/*
 * THE SHELL (SB1, docs/DESKTOP.md) — the one header, the one content region,
 * the one panel, and the one reflowing grid. Decided once, worn by every game
 * screen; before this file each page started from nothing, which is why three
 * of them disagreed about what a desktop is.
 *
 * WHAT CROSSED FROM HENDORA, AND WHAT DID NOT. Hendo asked for its structure
 * by name, and its stylesheet was read rather than admired
 * (docs/DESKTOP.md "WHAT TO TAKE FROM HENDORA"). Three ideas crossed: one
 * `.panel` whose padding is variables the children can read (its own comment:
 * "two places holding 22px is how a table ends up one pixel proud of the
 * panel it lives in"); content maxima that are stated and few
 * (`tokens.css`'s three `--st-stage-*`); and
 * `repeat(auto-fit, minmax(min(…,100%),1fr))`, which is why its screens hold
 * at every width without a media query per page. The SKIN did not cross —
 * no backdrop blur, no gradient grounds, no drifting rule. A ScribbleTod
 * panel is one surface, a thin coloured outline, a soft static glow and
 * honest padding (Cosmic Tod, 2026-09-11 — it was white, a hairline and a
 * shadow before; every one of those is a token, so this file did not
 * change shape), because the personality here is the artist's drawings and
 * the layout's job is to give them room.
 *
 * THE MASTHEAD IS STATIC, NOT STICKY, on purpose. The grid's column picker is
 * a non-modal `<dialog>` on a desktop, and S4b already paid for a sticky
 * header with a z-index painting over one and eating its clicks. A bar that
 * scrolls away costs a 1080px screen nothing and interacts with nothing.
 */

/*
 * The verification banner (S0r) rides in with the shell, because `mast.ts`
 * mounts it and every page that wears the mast links this file. One `@import`
 * rather than a `<link>` on twenty-three pages: the mast is already the thing
 * that decides a page has a header, and a page that had the header without the
 * banner's styles would show an unstyled paragraph over its own layout.
 */
@import './verify-banner.css';

/* -------------------------------------------------------------------------- */
/* The stage — one content region, three stated widths                          */
/* -------------------------------------------------------------------------- */

/*
 * The stage owns WIDTH and nothing else: no padding, no background. Every
 * page keeps the gutters it was measured with at the 360 floor
 * (`docs/DEVICES.md`), so below its maximum a mounted page renders to the
 * pixel as it did unmounted — mounting must never re-open the floor
 * measurements. The maxima are `tokens.css`'s; a page picks a KIND, never a
 * number.
 */
.st-stage {
  width: 100%;
  max-width: var(--st-stage-max, var(--st-stage-play));
  margin-inline: auto;
}

.st-stage--copy {
  --st-stage-max: var(--st-stage-copy);
}

.st-stage--play {
  --st-stage-max: var(--st-stage-play);
}

.st-stage--table {
  --st-stage-max: var(--st-stage-table);
}

/* -------------------------------------------------------------------------- */
/* The panel                                                                   */
/* -------------------------------------------------------------------------- */

/*
 * ONE panel. The surface navy, the electric hairline, the card's own glow, and
 * padding declared as variables so a child that must meet the panel's edge
 * (a full-bleed table, a divider) pulls itself out by exactly what the panel
 * put in — never by a second copy of the number.
 *
 * The inline padding breathes with the screen: 16px at the 360 floor, 24px
 * once there is room. `clamp()` rather than a media query so the panel has
 * one definition, not two.
 */
.st-panel {
  --st-panel-pad-x: clamp(var(--st-space-4), 3vw, var(--st-space-5));
  --st-panel-pad-y: var(--st-space-4);

  background: var(--st-surface);
  border: var(--st-line) solid var(--st-rule);
  border-radius: var(--st-radius-lg);
  padding: var(--st-panel-pad-y) var(--st-panel-pad-x);
  box-shadow: var(--st-shadow-card);
}

/* A panel that hands its whole inside to one child — a table, a picture. */
.st-panel--flush {
  padding: 0;
}

/*
 * The quiet variant: sunk paper, no shadow. For a note or a nudge that should
 * read as part of the page rather than a thing sitting on it.
 */
.st-panel--sunk {
  background: var(--st-surface-sunk);
  box-shadow: none;
}

/*
 * A panel that only becomes one when there is room (SB2). The marketplace's
 * and fusion page's sections were measured at the 360 floor WITHOUT a panel's
 * inset — boxing them there would take ~32px from rows that spend every pixel
 * (a market row's facts column drops from 176px to 144) — but at desktop
 * widths the same sections floating unboxed are the "nothing is organized"
 * Hendo named. One definition here rather than a media query per page, so the
 * panel's numbers stay in one place; below 720 it is bare flow, above it is
 * exactly `.st-panel`.
 */
.st-panel--wide {
  padding: 0;
  border: 0;
  border-radius: var(--st-radius-lg);
  background: transparent;
  box-shadow: none;
}

@media (min-width: 720px) {
  .st-panel--wide {
    padding: var(--st-panel-pad-y) var(--st-panel-pad-x);
    border: var(--st-line) solid var(--st-rule);
    background: var(--st-surface);
    box-shadow: var(--st-shadow-card);
  }
}

/* -------------------------------------------------------------------------- */
/* The flow — the grid that reflows instead of switching                       */
/* -------------------------------------------------------------------------- */

/*
 * Hendora leans on this shape fifty times over and it is why its screens hold
 * together at every width with no media query per page: columns as wide as
 * fit, never narrower than `--st-flow-min`, and `min(…, 100%)` so one item on
 * a screen narrower than the minimum shrinks instead of overflowing. Set
 * `--st-flow-min` per use; the default suits a tile with a sentence in it.
 */
.st-flow {
  display: grid;
  gap: var(--st-space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--st-flow-min, 280px), 100%), 1fr));
}

/* -------------------------------------------------------------------------- */
/* The masthead                                                                */
/* -------------------------------------------------------------------------- */

/*
 * One header: the wordmark, the navigation, the player's name and their
 * Todcoins. The element is IN EVERY PAGE'S HTML (empty, `data-mast`) and
 * `shell/mast.ts` fills it — static markup so the bar's ground is there at
 * first paint, one builder so twenty pages cannot drift. The min-height is
 * the fill's exact height, so the page does not jump when the contents land.
 *
 * Its inner row aligns to the SITE's width — the widest stage — not the
 * page's: chrome that re-centred itself to each page's kind would jump
 * between screens, and a header is the one thing that must hold still.
 */
.st-mast {
  background: var(--st-paper);
  border-bottom: var(--st-line) solid var(--st-rule);
  min-height: calc(var(--st-tap-min) + 2 * var(--st-space-2));
}

.st-mast__in {
  max-width: var(--st-stage-table);
  margin-inline: auto;
  padding: var(--st-space-2) var(--st-space-4);
  display: flex;
  align-items: center;
  gap: var(--st-space-3);
}

/* The wordmark is the brand AND the way home, on every screen. */
.st-mast__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--st-tap-min);
  min-width: var(--st-tap-min);
  flex: none;
}

.st-mast__brand img {
  display: block;
  /* 720x176 brush art (§13): 28px tall is ~115px wide, a compact masthead. */
  height: 28px;
  width: auto;
}

/*
 * The navigation: the same four things SB3's phone bar will say — Home, My
 * cards, Shop, Fight. Under 720px it stands down entirely; phones get the
 * quick bar and the sheet (docs/DESKTOP.md's last section), not a cramped
 * row of five-point type.
 */
.st-mast__nav {
  display: none;
}

@media (min-width: 720px) {
  .st-mast__nav {
    display: flex;
    align-items: center;
    gap: 2px;
  }
}

/*
 * THE FLOATING BAR (Hendo, 2026-09-13): "desktop i want nav bar floating
 * center, more colours obvious submenus, leaned up, i think full width navbars
 * look tacky." Mobile was "looking good", so EVERY rule here is above the
 * 720px seam and the phone's header, quick bar and sheet are untouched.
 *
 * The header's own ground and hairline stand down and its inner row becomes a
 * pill as wide as what it holds, centred, with a border that runs through the
 * sections' colours. Still STATIC, not sticky — the S4b dialog lesson above
 * stands — and it lifts over the page only while a pointer or focus is in it,
 * which is the only time a submenu can be hanging over the content.
 *
 * The reserved height is the filled height: 10px + 6px of air, and a pill of
 * one 44px control, 4px of padding each side and a 1px line each side.
 */
@media (min-width: 720px) {
  .st-mast {
    position: relative;
    padding-block: 10px 6px;
    background: transparent;
    border-bottom: 0;
    min-height: calc(var(--st-tap-min) + 2 * 4px + 2 * var(--st-line) + 16px);
  }

  .st-mast:hover,
  .st-mast:focus-within {
    z-index: calc(var(--st-z-sticky) + 1);
  }

  .st-mast__in {
    width: fit-content;
    max-width: calc(100% - 2 * var(--st-space-4));
    padding: 4px 4px 4px var(--st-space-4);
    gap: var(--st-space-2);
    border: var(--st-line) solid transparent;
    border-radius: var(--st-radius-pill);
    background:
      linear-gradient(var(--st-surface), var(--st-surface)) padding-box,
      linear-gradient(
          90deg,
          var(--st-electric),
          var(--st-violet),
          var(--st-tier-mythic),
          var(--st-coin),
          var(--st-mint)
        )
        border-box;
    box-shadow:
      0 10px 30px rgb(0 0 0 / 55%),
      0 0 24px rgb(22 139 255 / 18%);
  }
}

/*
 * EACH SECTION WEARS ONE COLOUR, in the bar, its submenu and the Menu panel:
 * home electric, cards violet, spending coin gold, fights mythic pink, you
 * mint, the owner's rows legendary orange. `--st-nav-hue` is the colour and
 * `--st-nav-ink` the same colour lifted toward white, for words on the navy.
 * Scoped to the two navigations so no other `data-section` on a page picks
 * them up.
 */
.st-mast [data-section],
.st-navsheet [data-section],
.st-mast__more {
  --st-nav-hue: var(--st-electric);
  --st-nav-ink: var(--st-electric-bright);
}

.st-mast [data-section='cards'],
.st-navsheet [data-section='cards'] {
  --st-nav-hue: var(--st-violet);
  --st-nav-ink: color-mix(in srgb, var(--st-violet) 60%, white);
}

.st-mast [data-section='shop'],
.st-navsheet [data-section='shop'] {
  --st-nav-hue: var(--st-coin);
  --st-nav-ink: color-mix(in srgb, var(--st-coin) 80%, white);
}

.st-mast [data-section='fight'],
.st-navsheet [data-section='fight'] {
  --st-nav-hue: var(--st-tier-mythic);
  --st-nav-ink: color-mix(in srgb, var(--st-tier-mythic) 70%, white);
}

.st-mast__more,
.st-navsheet [data-section='you'] {
  --st-nav-hue: var(--st-mint);
  --st-nav-ink: color-mix(in srgb, var(--st-mint) 80%, white);
}

.st-navsheet [data-section='owner'] {
  --st-nav-hue: var(--st-tier-legendary);
  --st-nav-ink: color-mix(in srgb, var(--st-tier-legendary) 80%, white);
}

/* One verb and the submenu it owns. */
.st-mast__item {
  position: relative;
}

.st-mast__item > a,
.st-mast__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--st-tap-min);
  padding: 0 var(--st-space-3);
  border: 0;
  border-radius: var(--st-radius-pill);
  background: none;
  color: var(--st-ink-muted);
  text-decoration: none;
  font-family: inherit;
  font-size: var(--st-text-md);
  font-weight: var(--st-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 140ms ease,
    color 140ms ease;
}

/* The section's mark, in its colour — on a screen with room for it. */
.st-mast__icon {
  display: none;
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--st-nav-hue);
}

@media (min-width: 1100px) {
  .st-mast__icon {
    display: inline-block;
  }
}

/* A chevron on everything that opens something: it says "there is more here". */
.st-mast__has-sub::after,
.st-mast__more::after {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin-inline-start: 2px;
  border-right: var(--st-line-thick) solid currentcolor;
  border-bottom: var(--st-line-thick) solid currentcolor;
  opacity: 0.7;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 140ms ease;
}

.st-mast__item > a:hover,
.st-mast__item > a:focus-visible,
.st-mast__more:hover,
.st-mast__more:focus-visible {
  color: var(--st-nav-ink);
  background: color-mix(in srgb, var(--st-nav-hue) 14%, transparent);
}

/* Where you are: the section's colour, filled, with a ring of it. */
.st-mast__item > a[aria-current='page'] {
  color: var(--st-nav-ink);
  background: color-mix(in srgb, var(--st-nav-hue) 22%, transparent);
  box-shadow: inset 0 0 0 var(--st-line) color-mix(in srgb, var(--st-nav-hue) 60%, transparent);
}

/*
 * THE SUBMENU. `display: none` while shut, so it has no box at all — a shut
 * menu must not exist to the overflow and tap-target checks — and open on
 * hover (pointers only: a touch tablet taps the verb and goes there) or while
 * keyboard focus is inside the item. The `::before` bridges the 8px between
 * the bar and the panel so a pointer travelling down does not close it.
 */
.st-mast__sub {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  translate: -50% 0;
  min-width: 220px;
  padding: 6px;
  background: var(--st-surface);
  border: var(--st-line) solid color-mix(in srgb, var(--st-nav-hue) 50%, transparent);
  border-top: 3px solid var(--st-nav-hue);
  border-radius: var(--st-radius-lg);
  box-shadow:
    0 14px 32px rgb(0 0 0 / 60%),
    0 0 22px color-mix(in srgb, var(--st-nav-hue) 28%, transparent);
}

.st-mast__sub::before {
  content: '';
  position: absolute;
  inset: -12px 0 auto;
  height: 12px;
}

@media (hover: hover) {
  .st-mast__item:hover > .st-mast__sub {
    display: grid;
  }

  .st-mast__item:hover > .st-mast__has-sub::after {
    transform: translateY(1px) rotate(225deg);
  }
}

.st-mast__item:focus-within > .st-mast__sub {
  display: grid;
}

.st-mast__sub a {
  display: flex;
  align-items: center;
  gap: var(--st-space-3);
  min-height: var(--st-tap-min);
  padding: 0 var(--st-space-3);
  border-radius: var(--st-radius-md);
  color: var(--st-ink);
  text-decoration: none;
  font-weight: var(--st-weight-medium);
  white-space: nowrap;
}

.st-mast__sub-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--st-nav-ink);
}

.st-mast__sub a:hover,
.st-mast__sub a:focus-visible {
  background: color-mix(in srgb, var(--st-nav-hue) 16%, transparent);
  color: var(--st-nav-ink);
}

.st-mast__sub a[data-here='yes'] {
  background: color-mix(in srgb, var(--st-nav-hue) 24%, transparent);
  color: var(--st-nav-ink);
}

/*
 * THE WAY TO EVERYTHING ELSE, at the desktop width (2026-09-06).
 *
 * `shell/mast.ts` appends this button to the nav and hands it to
 * `shell/nav.ts`, so it opens the SAME sheet the phone's Menu cell does —
 * there is one menu, and `shared/menu.ts` is still the only list of what is
 * in it. It wears the verbs' clothes (the rules above) in the "you" colour,
 * and `.on` is the class `setOpen` toggles while the sheet is up.
 *
 * It lives INSIDE `.st-mast__nav`, which is `display: none` under 720px, so
 * below the seam the quick bar's Menu cell is the control and this one is not
 * on screen at all.
 */
.st-mast__more.on {
  color: var(--st-nav-ink);
  background: color-mix(in srgb, var(--st-nav-hue) 22%, transparent);
}

.st-mast__more.on::after {
  transform: translateY(1px) rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
  .st-mast__item > a,
  .st-mast__more,
  .st-mast__has-sub::after,
  .st-mast__more::after {
    transition: none;
  }
}

/* Who you are and what you hold, at the far end. */
.st-mast__you {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--st-space-2);
  min-width: 0;
}

@media (min-width: 720px) {
  .st-mast__you {
    margin-left: var(--st-space-1);
    padding: 0 var(--st-space-3) 0 var(--st-space-3);
    border-left: var(--st-line) solid var(--st-rule);
  }
}

/*
 * The name is the account link. It waits for 900px: between 720 and 900 the
 * bar carries brand, four words and the purse, and a sixteen-character name
 * (§1.8's maximum) is the thing that does not fit.
 */
.st-mast__name {
  display: none;
  align-items: center;
  min-height: var(--st-tap-min);
  padding: 0 var(--st-space-2);
  color: var(--st-ink);
  text-decoration: none;
  font-weight: var(--st-weight-medium);
  white-space: nowrap;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* In the floating bar the name waits for 1200px: below that it is the thing that does not fit. */
@media (min-width: 1200px) {
  .st-mast__name {
    display: inline-flex;
  }
}

.st-mast__name:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--st-line-thick);
  text-underline-offset: 6px;
}

/*
 * The purse: §3's coin, then the figure. The WORD "Todcoins" joins it once
 * there is room; on a phone the bar shows coin + figure and carries the word
 * in `aria-label` — `shell/coin.ts` wants the word nearby, and on a 360px
 * bar the coin drawing plus the label is what fits.
 */
.st-mast__purse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--st-tap-min);
  color: var(--st-ink);
  white-space: nowrap;
}

.st-mast__purse .st-coin {
  flex: none;
}

.st-mast__purse-word {
  display: none;
  color: var(--st-ink-muted);
}

/* The word joins the figure once the floating bar has room for it. */
@media (min-width: 1100px) {
  .st-mast__purse-word {
    display: inline;
  }
}

/* The signed-out slot: one way in, shaped like the site's quiet button. */
.st-mast__signin {
  display: inline-flex;
  align-items: center;
  min-height: var(--st-tap-min);
  padding: 0 var(--st-space-4);
  border: var(--st-line-thick) solid var(--st-ink);
  border-radius: var(--st-radius-pill);
  color: var(--st-ink);
  text-decoration: none;
  font-weight: var(--st-weight-medium);
}

.st-mast__signin:hover {
  background: var(--st-accent);
  border-color: var(--st-accent);
  color: var(--st-accent-ink);
}

/*
 * AN ACTION INSIDE A SENTENCE, big enough to hit.
 *
 * docs/DEVICES.md's 44px is about controls, and a bare `<a>` in the middle of
 * a paragraph is 16px tall — measured at 2026-09-06 on the food store's and
 * the marketplace's signed-out panels, which are exactly the screens somebody
 * lands on when something has already gone wrong. It stays inline (a button
 * here would break the sentence) and takes its height in padding instead.
 */
.st-inline-do {
  display: inline-block;
  padding: 12px 4px;
  color: var(--st-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/*
 * The seam's own squeeze: from 720 to 900 the floating bar holds brand, four
 * verbs, Menu and the purse in at most 688px, and at the roomier spacing it is
 * 743 (measured 2026-09-13, the purse spilled out of the pill). Tighter
 * padding here only; every control keeps its 44px height.
 */
@media (min-width: 720px) and (max-width: 899.98px) {
  .st-mast__in {
    gap: var(--st-space-1);
    padding-inline-start: var(--st-space-3);
  }

  .st-mast__item > a,
  .st-mast__more {
    padding: 0 var(--st-space-2);
  }

  .st-mast__you {
    padding-inline: var(--st-space-2);
  }
}