/* The stage menu (Round 4 T9): the navigation-open references. Desktop: a panel over the dimmed page; under 700 px: the whole screen.
   Sizes in stage units (css/stage.css), measured from the references; motion per docs/ANIMATION-SPEC.md "Navigation drawer". */

.drawer {
  --panel: var(--navy-800);
  --rule: color-mix(in srgb, var(--text) 32%, transparent);
  --row: max(44px, calc(var(--u) * 35.6));
  --edge: var(--gold);                 /* state marks: the current page's edge, the switch's ring */
  position: fixed;
  inset: 0 auto 0 0;
  width: calc(var(--u) * 291);
  max-width: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: env(safe-area-inset-top) calc(var(--u) * 20) max(calc(var(--u) * 24), env(safe-area-inset-bottom)) max(calc(var(--u) * 23), env(safe-area-inset-left));
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-right: calc(var(--u) * 1.5) solid var(--gold);
  background: var(--panel);
  color: var(--text);
  font: 500 calc(var(--u) * 12.5) / 1.2 var(--font-stage);
  text-shadow: none;
  transform: translateX(-100%);
  transition: transform .2s cubic-bezier(.64, 0, .78, 0), overlay .2s allow-discrete, display .2s allow-discrete;
}
.drawer:popover-open { display: flex; flex-direction: column; transform: none; transition-duration: .28s; transition-timing-function: cubic-bezier(.22, 1, .36, 1); }
@starting-style { .drawer:popover-open { transform: translateX(-100%); } }
.drawer::backdrop { background: color-mix(in srgb, black 45%, transparent); opacity: 0; transition: opacity .2s linear, overlay .2s allow-discrete, display .2s allow-discrete; }
.drawer:popover-open::backdrop { opacity: 1; }
@starting-style { .drawer:popover-open::backdrop { opacity: 0; } }
:root[data-mode=light] .drawer { --panel: color-mix(in srgb, var(--stage-paper) 40%, white); --rule: color-mix(in srgb, var(--text) 45%, transparent); --edge: color-mix(in srgb, var(--gold) 65%, black); }
@media (prefers-color-scheme: light) { :root:not([data-mode]) .drawer { --panel: color-mix(in srgb, var(--stage-paper) 40%, white); --rule: color-mix(in srgb, var(--text) 45%, transparent); --edge: color-mix(in srgb, var(--gold) 65%, black); } }
/* A pale wash in light, as the reference; no custom properties here, since older engines do not pass them to ::backdrop. */
:root[data-mode=light] .drawer::backdrop { background: color-mix(in srgb, white 35%, transparent); }
@media (prefers-color-scheme: light) { :root:not([data-mode]) .drawer::backdrop { background: color-mix(in srgb, white 35%, transparent); } }
/* The page under an open menu stays put: the scrollbar's gutter stays when the scrollbar goes, so nothing shifts sideways. */
html:has(#drawer:popover-open) { overflow: hidden; scrollbar-gutter: stable; }

/* ---------- head: Menu, the logo (phone), Close ---------- */
.drawer-head { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: calc(var(--u) * 49); border-bottom: 1px solid var(--rule); }
.drawer-title .bar-menu-icon { filter: none; }
.drawer-title { display: flex; align-items: center; gap: calc(var(--u) * 12); margin: 0; font-size: calc(var(--u) * 14.5); font-weight: 700; }
.drawer-logo { display: none; }
.drawer-close { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: calc(var(--u) * 6); min-height: 44px; padding: 0; color: var(--text); font: 500 calc(var(--u) * 12) / 1 var(--font-stage); }
.drawer-x { width: calc(var(--u) * 9); height: calc(var(--u) * 9); background: linear-gradient(45deg, transparent 43%, currentColor 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, currentColor 43% 57%, transparent 57%); }

/* ---------- the rows ---------- */
.drawer-list, .drawer-sub { margin: 0; padding: 0; list-style: none; }
.drawer-list > li { border-bottom: 1px solid var(--rule); }
.drawer-link { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 12); min-height: var(--row); font-size: calc(var(--u) * 16); font-weight: 700; cursor: pointer; }
.drawer-link .btn-arrow { width: calc(var(--u) * 17); height: calc(var(--u) * 2); margin-right: calc(var(--u) * 2); }
.drawer-link .btn-arrow::after { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-width: calc(var(--u) * 2) calc(var(--u) * 2) 0 0; }
summary.drawer-link { list-style: none; }
summary.drawer-link::-webkit-details-marker { display: none; }
.drawer-chevron { width: calc(var(--u) * 7); height: calc(var(--u) * 7); margin-right: calc(var(--u) * 4); border: solid var(--gold); border-width: 0 calc(var(--u) * 1.6) calc(var(--u) * 1.6) 0; transform: translateY(-25%) rotate(45deg); transition: transform .2s ease-out; }
.drawer-about:not([open]) .drawer-chevron { transform: rotate(-45deg); }
.drawer-sub { padding-bottom: calc(var(--u) * 14); }
.drawer-sub a { display: flex; align-items: center; min-height: max(32px, calc(var(--u) * 25.6)); padding-left: calc(var(--u) * 18.6); font-size: calc(var(--u) * 12.5); }
.drawer-about[open] .drawer-sub { animation: drawer-sub .2s ease-out; }
@keyframes drawer-sub { from { opacity: 0; transform: translateY(-6px); } }
/* The page you are on: a gold-tinted pill with a gold left edge. */
.drawer [aria-current=page] { padding-inline: calc(var(--u) * 14) calc(var(--u) * 6); border-radius: calc(var(--u) * 4); background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 34%, transparent), color-mix(in srgb, var(--gold) 6%, transparent)); box-shadow: inset calc(var(--u) * 3) 0 var(--edge); }
.drawer-sub [aria-current=page] { margin-left: calc(var(--u) * 5); padding-left: calc(var(--u) * 13.6); }
.drawer-pill { padding: calc(var(--u) * 3) calc(var(--u) * 9); border: calc(var(--u) * 1.2) solid var(--gold); border-radius: 999px; color: var(--accent); font-size: calc(var(--u) * 9.5); font-weight: 600; line-height: 1; white-space: nowrap; }
.drawer-list > li:last-child .drawer-link { min-height: max(44px, calc(var(--u) * 48)); }

/* ---------- appearance, staff link, account (phone), foot ---------- */
.drawer-mode { display: flex; align-items: center; justify-content: space-between; margin: calc(var(--u) * 19) 0 0; }
.drawer-switch { display: flex; border: calc(var(--u) * 1.2) solid var(--edge); border-radius: 999px; }
.drawer-switch button { position: relative; width: calc(var(--u) * 55); height: calc(var(--u) * 23); border-radius: 999px; color: var(--text); font: 600 calc(var(--u) * 11.5) / 1 var(--font-stage); transition: background-color .16s, color .16s; }
.drawer-switch [aria-pressed=true] { background: var(--gold); color: var(--stage-ink); font-weight: 700; }
.drawer-staff { align-self: flex-start; margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 12.5); font-weight: 700; }
.drawer-account { display: none; }
.drawer-foot { margin: calc(var(--u) * 18) 0 0; padding-top: calc(var(--u) * 18); border-top: 1px solid var(--rule); font-size: calc(var(--u) * 11.5); line-height: 1.45; }
.drawer-foot a { margin-left: calc(var(--u) * 8); color: color-mix(in srgb, var(--text) 75%, transparent); text-decoration: underline; text-underline-offset: 2px; }
.drawer-foot a:hover { color: var(--text); }
/* Tap targets: 44 px whatever the unit, without growing what is drawn. */
.drawer :is(.drawer-switch button, .drawer-staff, .drawer-sub a, .drawer-foot a)::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.drawer :is(.drawer-staff, .drawer-sub a, .drawer-foot a) { position: relative; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .drawer-link:hover .btn-arrow { transform: translateX(calc(var(--u) * 4)); }
  .drawer-link .btn-arrow { transition: transform .24s cubic-bezier(.3, .7, .3, 1); }
}

/* ---------- phone: the whole screen ---------- */
@media (max-width: 699px) {
  .drawer {
    width: 100%;
    padding-inline: max(calc(var(--u) * 27), env(safe-area-inset-left)) max(calc(var(--u) * 27), env(safe-area-inset-right));
    border-right: 0;
    opacity: 0;
    transform: translateY(-12px);
    transition: transform .2s ease-in, opacity .2s ease-in, overlay .2s allow-discrete, display .2s allow-discrete;
  }
  .drawer:popover-open { opacity: 1; transform: none; transition-duration: .28s; transition-timing-function: cubic-bezier(.22, 1, .36, 1); }
  @starting-style { .drawer:popover-open { opacity: 0; transform: translateY(-12px); } }
  .drawer-head { height: calc(var(--u) * 47); }
  .drawer-title { font-size: calc(var(--u) * 15); }
  .drawer-logo { display: block; }
  .drawer-logo img { width: calc(var(--u) * 30); height: calc(var(--u) * 33); object-fit: contain; }
  .drawer-close { font-size: calc(var(--u) * 12.5); }
  .drawer-link { font-size: calc(var(--u) * 16.5); }
  .drawer-sub a { min-height: max(36px, calc(var(--u) * 22)); }
  .drawer-account { display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 48); margin-top: calc(var(--u) * 16); padding: calc(var(--u) * 12) 0; border-top: 1px solid var(--rule); }
  .drawer-account .bar-link { display: flex; align-items: center; min-height: 44px; font-size: calc(var(--u) * 13); text-shadow: none; }
  .drawer-account .btn { width: calc(var(--u) * 86); height: calc(var(--u) * 26); font-size: calc(var(--u) * 13); }
  .drawer-account + .drawer-foot { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer::backdrop, .drawer-chevron { transition: none; }
  .drawer-about[open] .drawer-sub { animation: none; }
}