/* Main menu sheet (#menu): a list page and sub-pages inside one scrolling body. Sheet geometry comes from style-sheets.css. */
.menu-page[hidden] { display: none; }
.menu-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.menu-item { display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: 52px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-md); background: transparent;
  color: var(--text); text-align: left; font-size: var(--fs-lg); font-weight: var(--fw-medium); }
@media (hover: hover) { .menu-item:not(:disabled):hover { background: var(--ctl-bg-hover); } }
.menu-item:not(:disabled):active { background: var(--ctl-bg-active); }
.menu-item:focus-visible { outline: 3px solid var(--ctl-ring); outline-offset: -3px; }
.menu-item:disabled { color: var(--muted); cursor: default; opacity: .65; }
.menu-icon, .menu-chevron { display: grid; place-items: center; color: var(--muted); }
.menu-label { flex: 1; min-width: 0; }
.menu-soon { padding: 2px 9px; border-radius: var(--radius-pill); background: var(--surface); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
#menu-back[hidden] { display: none; }
#menu .sheet-header { padding-left: var(--space-3); }
#menu .sheet-header h2 { padding-left: var(--space-2); }
#menu .sheet-body { padding-top: var(--space-3); }
#legal p { color: var(--muted); }
.menu-item { text-decoration: none; }
.legal-links { display: flex; flex-direction: column; gap: 8px; }
.legal-links a { padding: 10px 0; }
/* Sub-pages slide in from the right, the list back in from the left. */
.menu-page.slide-in { animation: menu-in 220ms var(--ease-out); }
.menu-page.slide-back { animation: menu-back 220ms var(--ease-out); }
@keyframes menu-in { from { opacity: 0; transform: translateX(28px); } }
@keyframes menu-back { from { opacity: 0; transform: translateX(-28px); } }
@media (prefers-reduced-motion: reduce) { .menu-page.slide-in, .menu-page.slide-back { animation: none; } }
/* Bottom sheet: the list is as high as its content, sub-pages may use the full height. */
@media (max-width: 1023px) {
  #menu { interpolate-size: allow-keywords; transition: transform var(--dur-sheet) var(--ease-out), height 220ms var(--ease-out); }
  #menu.is-dragging { transition: none; }
  #menu:not([data-page="list"]) { height: calc(100dvh - var(--sheet-top)); }
}
@media (prefers-reduced-motion: reduce) { #menu { transition: none !important; } }