/* 06-components/_menu.css — .c-menu: context and dropdown menu. */
.c-menu { position: absolute; inset-block-start: calc(100% + var(--space-2xs)); inset-inline-end: 0; z-index: var(--z-menu); min-width: max(12rem, 100%); padding: var(--space-2xs); background: var(--surface-raised); border: var(--stroke) solid var(--rule); border-radius: var(--radius-md); box-shadow: var(--shadow-menu); display: none; }
.c-menu.is-open { display: block; }
.c-menu--static { position: static; inset: auto; display: block; }
.c-menu__item { display: flex; align-items: center; gap: var(--space-xs); width: 100%; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); text-align: start; color: var(--ink); text-decoration: none; font-size: var(--text-md); }
.c-menu__item:hover { background: var(--surface-sunken); }
@media (pointer: coarse) { .c-menu__item { min-height: var(--height-control); } }
.c-menu__item svg { width: 1rem; height: 1rem; color: var(--ink-muted); }
.c-menu__item--danger { color: var(--band-danger-ink); }
.c-menu__item--danger:hover { background: var(--band-danger-fill); }
.c-menu__sep { height: 1px; margin: var(--space-2xs) 0; background: var(--rule); }
.c-menu__head { padding: var(--space-xs) var(--space-sm) var(--space-2xs); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); }

/* .c-menu--account: the topbar dropdown, one box. .c-menu__trigger is its top slot
   (the user, in the menu's own mono eyebrow type); .c-menu__drawer is the rest,
   hanging off the box's bottom edge and squared where the two meet. */
.c-menu--account { position: relative; inset: auto; display: block; min-width: 0; padding: 0; box-shadow: none; }
.c-menu__trigger { display: flex; align-items: center; gap: var(--space-xs); width: 100%; min-height: var(--height-control); padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-2xs); border: 0; border-radius: inherit; background: none; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-muted); }
.c-menu__trigger:hover { background: var(--surface-sunken); color: var(--ink); }
.c-menu__trigger-name { white-space: nowrap; }
.c-menu__trigger .c-avatar { background: var(--rule); color: var(--ink-muted); }
.c-menu__caret { width: 0.4rem; height: 0.4rem; margin-inline-start: var(--space-2xs); border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; color: var(--ink-faint); transform: translateY(-1px) rotate(45deg); }
.c-menu__drawer { display: none; position: absolute; inset-block-start: calc(100% + var(--stroke)); inset-inline-start: auto; inset-inline-end: calc(-1 * var(--stroke)); z-index: var(--z-menu); min-width: max(12rem, calc(100% + 2 * var(--stroke))); padding: var(--space-2xs); background: var(--surface-raised); border: var(--stroke) solid var(--rule); border-block-start: 0; border-end-start-radius: var(--radius-md); border-end-end-radius: var(--radius-md); box-shadow: var(--shadow-menu); }
.c-menu--account.is-open { border-end-start-radius: 0; border-end-end-radius: 0; }
.c-menu--account.is-open .c-menu__trigger { border-end-start-radius: 0; border-end-end-radius: 0; background: var(--surface-sunken); color: var(--ink); }
.c-menu--account.is-open .c-menu__caret { transform: translateY(1px) rotate(-135deg); }
.c-menu--account.is-open .c-menu__drawer { display: block; }