@layer components {
/* Item menus (⋯ on sidebar rows and pages): grouped actions, a danger action last */
.pop.item-menu { min-width: 236px; }
.pop-i .i { color: var(--fg-3); }
.pop-i:hover .i { color: var(--fg); }
.pop-i .more-ico { margin-left: auto; color: var(--fg-4); }
.pop-i.danger, .pop-i.danger .i { color: var(--bad); }
.pop-i.danger:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); }
.pop-i:disabled { opacity: 0.45; pointer-events: none; }
.pop-who { display: flex; align-items: center; gap: 10px; padding: 8px 9px 6px; }
.pop-who div { min-width: 0; line-height: 1.25; }
.pop-who b { display: block; font-weight: 600; }
.pop-who span { font-size: var(--fs-11); color: var(--fg-3); }

/* Sidebar rows: actions show on hover, on keyboard focus, and while their menu is open */
.srow { position: relative; }
.srow.child > .nav { padding-left: 40px; }
.srow.child2 > .nav { padding-left: 62px; height: 28px; font-size: var(--fs-12-5); }
.row-acts { position: absolute; right: 4px; top: 0; bottom: 0; display: none; align-items: center; gap: 1px; }
.srow:is(:hover, :has(:focus-visible), .menu-on) .row-acts { display: flex; }
/* Actions show on hover, keyboard focus or an open menu (not after a mouse click, which leaves focus behind); the counts under them step aside. */
.srow:is(:hover, :has(:focus-visible), .menu-on) > .nav :is(.sub, .n, .livebadge) { visibility: hidden; }
.srow:is(:hover, :has(:focus-visible), .menu-on) > .nav { padding-right: 52px; }
.ra { width: 22px; height: 22px; border-radius: var(--r-6); display: grid; place-items: center; color: var(--fg-3); }
.ra:hover { background: var(--bg-5); color: var(--fg); }
.nav.rename { background: var(--bg-3); }
.nav.rename .lbl, .nav.rename .sub, .nav.rename .n, .nav.rename .livebadge { display: none; }
.rn-input { flex: 1; min-width: 0; height: 22px; background: var(--bg-1); border: 1px solid var(--accent-line); border-radius: var(--r-5); padding: 0 6px; outline: none; color: var(--fg); font-size: inherit; }
}