/* The header's menu as a side bar from the right (Chris, 9 Nov 2026: "it should open as a Side Bar, not a rectangle stacked
   box"), on a phone or a tablet. From 1024px there is no menu at all: the bar has its links and My account (partials/header-nav)
   and Sign out is on the account pages' tabs. Its own file, loaded after every look (partials/look-styles) - Ruby's candy and
   each template alike - so the bar opens and closes the same way everywhere, wearing the look's own panel (its surface, edge
   and words: the look's .st-panel) and the look's own menu rows. Markup: partials/header-menu; opening and closing: the store
   layout's script.
   A <dialog> opened with showModal() goes into the browser's top layer, so nothing in the header can trap it (HUD's and
   Arcade's .st-top has a backdrop-filter, which makes the header the box a position:fixed child is placed in) and nothing on
   the page is drawn over it; the browser adds the shade (::backdrop), keeps the page under it out of reach, and closes it on
   Escape. Every display here is set on [open] alone: an author's display beats a closed dialog's own display:none. */

/* the button is a phone's and a tablet's */
@media (min-width:1024px){.st-top .st-menu{display:none}}

/* the bar: the screen's full height at the right edge, the look's panel with its right-hand corners square */
.st-menu>dialog.st-menu__panel.st-panel{position:fixed;inset:0 0 0 auto;width:min(340px,86vw);height:auto;max-width:none;max-height:none;margin:0;padding:0;
  border-top-right-radius:0;border-bottom-right-radius:0;overflow:hidden;overscroll-behavior:contain}
.st-menu>dialog.st-menu__panel.st-panel:not([open]){display:none}
.st-menu>dialog.st-menu__panel.st-panel[open]{display:block;animation:st-menu-in .26s cubic-bezier(.2,.8,.2,1)}
.st-menu>dialog.st-menu__panel.st-panel.is-closing{animation:st-menu-out .18s ease-in forwards}
.st-menu>dialog.st-menu__panel::backdrop{background:rgba(0,0,0,.55)}
.st-menu>dialog.st-menu__panel[open]::backdrop{animation:st-menu-shade .26s ease-out}
.st-menu>dialog.st-menu__panel.is-closing::backdrop{animation:st-menu-unshade .18s ease-in forwards}
@keyframes st-menu-in{from{transform:translateX(100%)}}
@keyframes st-menu-out{to{transform:translateX(100%)}}
@keyframes st-menu-shade{from{opacity:0}}
@keyframes st-menu-unshade{to{opacity:0}}
@media (prefers-reduced-motion:reduce){.st-menu>dialog.st-menu__panel.st-panel,.st-menu>dialog.st-menu__panel::backdrop{animation:none}}
/* the page under the bar stays where it was */
html:has(.st-menu>dialog.st-menu__panel[open]){overflow:hidden}

/* inside: the bar's full height, its rows from the top, scrolling on a short screen, clear of a notch and the home bar; the
   whole bar is this box, so a tap that lands on the dialog itself is a tap on the shade beside it */
.st-menu__body{box-sizing:border-box;display:flex;flex-direction:column;gap:8px;height:100%;overflow-y:auto;overscroll-behavior:contain;
  padding:max(8px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) 16px}
.st-menu__head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px}
.st-menu__title{font-family:var(--st-font-display,var(--rcc-display,inherit));font-size:22px;font-weight:inherit;line-height:1.1;text-transform:var(--st-head-case,none)}
.st-menu__panel .st-menu__close{margin-right:-8px;color:inherit;background:transparent;border-color:transparent;box-shadow:none}
/* one row a link: a side bar is a list */
.st-menu__panel .st-menu__grid{grid-template-columns:minmax(0,1fr)}
/* Sign out (or Sign in) at the foot of the bar, under everything else */
.st-menu__body>form,.st-menu__body>a.st-btn{flex:none;margin-top:auto}