@import url('/glee-prism.css?v=20260907-2');
/* ============================================================================
   GLEEShell — geometry. CANONICAL SOURCE.
   ----------------------------------------------------------------------------
   These numbers are the invariant. They exist once, here, and the continuity
   gate reads the same values from SHELL_SPEC in glee-shell.js — spec and
   enforcement cannot drift, because they are the same declaration.

   What this replaces: /bridge/ set max-width 1180 on DIV.shell, /map/ set 1180
   on MAIN.gmap-page, /receipts/ set none at all and let paragraphs carry
   --gp-measure, and nav-x came out 50 on one page and 70 on the others from the
   same stylesheet. Four shells, five content-left edges, one number typed in
   several places. A page must no longer be able to express geometry at all.
   ============================================================================ */

:root {
  --gs-header-h: 58px;
  --gs-pad-x: 24px;
  --gs-container: 1180px;
  --gs-mark: 22px;
  --gs-nav-gap: 4px;
  --gs-nav-pad-x: 10px;

  --gs-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --gs-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gs-font-data: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  /* Name every fallback so the shell remains self-describing and the L8
     palette probe can distinguish a canonical fallback from ad-hoc colour. */
  --gs-ground-default: #000000;
  --gs-ink-default: #F5F5F5;
  --gs-ink-2-default: #CCCCCC;
  --gs-muted-default: #9A9A9A;
  --gs-gold-default: #C9A96B;
  --gs-muted: var(--gd-muted, var(--gs-muted-default));
  --gs-gold-hi-default: #E4CFA1;
  --gs-hairline-default: #242424;
  --gs-panel-default: #0A0A0A;
  --gs-ground: var(--gd-canvas, var(--gs-ground-default));
  --gs-ink: var(--gd-ink, var(--gs-ink-default));
  --gs-ink-2: var(--gd-ink-2, var(--gs-ink-2-default));
  --gs-gold: var(--gd-gold, var(--gs-gold-default));
  --gs-gold-hi: var(--gd-gold-hi, var(--gs-gold-hi-default));
  --gs-hairline: var(--gd-hairline, var(--gs-hairline-default));
  --gs-panel: var(--gd-panel, var(--gs-panel-default));
}

/* The shell owns its own placement. Measured 2026-08-19: /map/ had no body-margin
   reset, so the browser default 8px inset the sticky header to x=8,y=8 while every
   other surface sat flush at 0,0 — a shell that starts in a different place on one
   page is the same fracture in miniature. A page must not be able to move it. */
body:has(> header.gs-shell),
body[data-gs-mounted] {
  margin: 0;
}

/* ---- the bar ------------------------------------------------------------- */

.gs-shell {
  position: sticky;
  top: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--gs-ground) 88%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--gs-hairline);
  font-family: var(--gs-font-ui);
}

.gs-bar {
  max-width: var(--gs-container);
  margin: 0 auto;
  padding: 0 var(--gs-pad-x);
  min-height: var(--gs-header-h);
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

/* ---- BrandAnchor — also the escape affordance ---------------------------- */

.gs-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  flex: none;
  color: var(--gs-ink);
  text-decoration: none;
  /* The way home is the one affordance every surface keeps, and on a phone it
     was the hardest thing in the bar to hit: the anchor took its height from
     the 22px mark, while every nav link next to it stood 31px. Found on all 22
     mobile pages at once, by the layered check, the first time that check
     measured the shell that actually mounts instead of the one it replaced.
     The mark stays 22px — this grows the target, not the geometry. */
  min-height: 32px;
}
.gs-mark {
  width: var(--gs-mark);
  height: var(--gs-mark);
  color: var(--gs-gold);
  flex: none;
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1), color 220ms;
}
.gs-brand:hover .gs-mark { color: var(--gs-gold-hi); transform: translateY(-1px) scale(1.05); }
.gs-wordmark {
  font-family: var(--gs-font-display);
  font-size: var(--text-16);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  line-height: 1;
}

/* ---- GlobalNav — Captain's frozen eight ---------------------------------- */

.gs-nav {
  display: flex;
  align-items: center;
  gap: var(--gs-nav-gap);
  flex: 1 1 auto;
  /* min-width:0 is load-bearing: a flex item defaults to min-width:auto, so a
     nowrap scroller widens the BAR instead of scrolling inside itself. */
  min-width: 0;
  /* Clip and scroll at EVERY width, not just phone width. This was inside the
     760px media query until 2026-08-22, and at 768px the eight sections
     overflowed a 442px box and painted straight through the account control.
     A breakpoint cannot know whether the labels fit; the container can. */
  overflow-x: auto;
  scrollbar-width: none;
  /* Fade the trailing edge so a clipped strip reads as scrollable rather than
     as a navigation that simply ends. */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}
.gs-nav::-webkit-scrollbar { display: none; }

.gs-nav-a {
  padding: 6px var(--gs-nav-pad-x);
  border-radius: var(--radius-8);
  color: var(--gs-muted);
  text-decoration: none;
  font-size: var(--text-12);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 140ms, background 140ms;
}
.gs-nav-a:hover { color: var(--gs-ink); background: rgba(201, 169, 107, .08); }
.gs-nav-a.is-on { color: var(--gs-gold-hi); background: rgba(201, 169, 107, .12); }
/* Tablet and small laptop: tighten tracking so more of the eight are visible
   before the strip has to scroll. Nothing is dropped at any width. */
@media (max-width: 1040px) {
  .gs-nav-a { padding: var(--space-4) var(--space-8); letter-spacing: .08em; }
}

/* The keyboard hint rides inside the Search item so the bar carries one
   Search control, not a nav item beside a lookalike pill. */
.gs-nav-key {
  margin-left: var(--space-4);
  font-family: var(--gs-font-data);
  font-size: var(--text-13);
  letter-spacing: 0;
  opacity: .55;
}

/* ---- SessionControl ------------------------------------------------------ */

/* The private conversation remains a direct global door without depending on
   the optional Companion launcher or JavaScript. Same renderer in both stacks. */
.gs-chat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 44px;
  padding-inline: var(--space-8);
  color: var(--gs-ink-2);
  font-size: var(--text-12);
  text-decoration: none;
}
.gs-chat:hover { color: var(--gs-gold-hi); }

.gs-right { display: flex; align-items: center; gap: var(--space-8); flex: none; margin-left: auto; }

/* Controls a page carried INTO the shell -- rescued JS hooks and state pills
   keep their own markup and their own (absent) sizing, so they arrive with
   whatever height their old bar gave them. /arcade/'s "back" link measured
   65x22 at 390px, under the 28px tap floor, while all eight nav items were 30.
   Sizing them here rather than in each page is the same argument as the bar
   itself: the shell owns the geometry of everything inside it. */
.gs-right a,
.gs-right button,
.gstate a,
.gstate button {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}
.gs-cmd {
  display: inline-flex; align-items: center; gap: var(--space-8);
  padding: var(--space-4) var(--space-12);
  border: 1px solid var(--gs-hairline);
  border-radius: var(--radius-pill);
  color: var(--gs-muted);
  text-decoration: none;
  font-size: var(--text-12);
  transition: border-color 140ms, color 140ms;
}
.gs-cmd:hover { border-color: rgba(201, 169, 107, .30); color: var(--gs-ink); }
.gs-cmd-key { font-family: var(--gs-font-data); font-size: var(--text-13); opacity: .8; }

.gs-session {
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-8);
  background: linear-gradient(180deg, var(--c-gold-mid), var(--c-gold));
  color: var(--c-ink-2);
  text-decoration: none;
  font-size: var(--text-12);
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}
.gs-session.is-in {
  background: transparent;
  border: 1px solid var(--gs-hairline);
  color: var(--gs-ink-2);
  font-weight: 600;
}

/* ---- LocalNav — the six groups, demoted beneath the shell ---------------- */

.gs-lnav {
  border-bottom: 1px solid var(--gs-hairline);
  background: color-mix(in srgb, var(--gs-panel) 60%, transparent);
}
.gs-lnav-in {
  max-width: var(--gs-container);
  margin: 0 auto;
  padding: 10px var(--gs-pad-x);
  display: flex;
  gap: var(--space-24);
  flex-wrap: wrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.gs-lnav-in::-webkit-scrollbar { display: none; }
.gs-lnav-g { display: flex; align-items: baseline; gap: var(--space-12); white-space: nowrap; }
.gs-lnav-t {
  font-size: var(--text-11); letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--gs-muted);
}
.gs-lnav-g a { color: var(--gs-ink-2); text-decoration: none; font-size: var(--text-13); }
.gs-lnav-g a:hover { color: var(--gs-gold-hi); }

/* ---- SurfaceFrame — the one container ------------------------------------ */

.gs-frame { width: 100%; }
.gs-content {
  max-width: var(--gs-container);
  margin: 0 auto;
  padding: 40px var(--gs-pad-x) 96px;
  display: block;
}
/* A specialized surface may use the full width for its workspace; it still
   inherits the header above and the padding rhythm. */
.gs-frame--specialized > .gs-content { max-width: none; padding-left: var(--gs-pad-x); padding-right: var(--gs-pad-x); }
.gs-frame--immersive > .gs-content { max-width: none; padding: 0; }

/* immersive keeps identity and a way out, nothing else */
.gs-shell.gs-immersive { position: fixed; background: transparent; border-bottom: 0; backdrop-filter: none; }
.gs-shell.gs-immersive .gs-bar { min-height: 44px; }

/* ---- responsive: the shell holds, the nav scrolls ------------------------ */

@media (max-width: 760px) {
  :root { --gs-pad-x: 14px; --gs-header-h: 52px; }
  .gs-bar { gap: var(--space-12); flex-wrap: nowrap; }
  .gs-bar > * { min-width: 0; }
  /* min-width:0 is load-bearing: a flex item defaults to min-width:auto, so a
     nowrap scroller widens the BAR instead of scrolling inside itself. */

  .gs-nav { gap: 0; }
  .gs-nav-a { padding: var(--space-4) var(--space-4); font-size: var(--text-11); letter-spacing: .04em; }
  .gs-nav-key { display: none; }
  .gs-session { padding: var(--space-4) var(--space-8); font-size: var(--text-11); }
  /* State pills are status, not navigation. Hidden rather than removed: page
     scripts rescued into .gstate still write into these nodes. */
  .gs-right .gstate { display: none; }

  .gs-wordmark { letter-spacing: .18em; font-size: var(--text-14); }
  .gs-content { padding-top: var(--space-24); }
}

@media (prefers-reduced-motion: reduce) {
  .gs-brand:hover .gs-mark { transform: none; }
  .gs-mark, .gs-nav-a, .gs-session { transition: none; }
}

/* ---- GLEE Product Language v1 -------------------------------------------
   A shared visual grammar for the public product surfaces. The shell remains
   the only owner of the global bar; these rules give its routes one readable
   institution: black ground, brass structure, neutral evidence, and a quiet
   document mode for proof. Art supports the interface and never substitutes
   for the records the interface exposes.
*/
:root {
  --glee-navy-0: #000000;
  --glee-navy-1: #0a0a0a;
  --glee-navy-2: #111111;
  --glee-brass: #d8bb78;
  --glee-brass-hi: #f0d79e;
  --glee-cyan: #74e4e9;
  --glee-ivory: #f5f5f5;
  --glee-graphite: #a4a4a4;
  --glee-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --glee-grid: rgba(255, 255, 255, .045);
}

body:has(> header.gs-shell),
body[data-gs-mounted] {
  color: var(--gs-ink);
  font-family: var(--gs-font-ui);
  background: var(--glee-navy-0);
}

body:has(> header.gs-shell)::after,
body[data-gs-mounted]::after {
  display: none;
}

.gs-shell {
  background: #000000;
  border-bottom-color: #242424;
  box-shadow: none;
}
.gs-brand { color: var(--glee-ivory); }
.gs-mark { color: var(--glee-brass); }
.gs-brand:hover .gs-mark { color: var(--glee-brass-hi); }
.gs-wordmark { letter-spacing: .3em; }
.gs-nav-a { color: var(--glee-graphite); }
.gs-nav-a:hover { color: var(--glee-ivory); background: #111111; }
.gs-nav-a.is-on { color: var(--glee-brass-hi); background: #0a0a0a; }
.gs-session { background: var(--glee-brass); color: #000000; }
.gs-session.is-in { color: var(--glee-ivory); border-color: rgba(216, 187, 120, .32); }
.gs-lnav { background: #0a0a0a; border-bottom-color: #242424; }
.gs-lnav-t { color: var(--glee-brass); }
.gs-lnav-g a { color: var(--glee-graphite); }
.gs-lnav-g a:hover { color: var(--glee-cyan); }

/* Shared route annotation: a page reads like an instrument sheet, not a poster. */
body[data-gs-section] .gtrail {
  border-bottom: 1px solid #242424;
  background: #000000;
}
body[data-gs-section] .gtrail-in {
  max-width: var(--gs-container);
  margin: 0 auto;
  padding: 10px var(--gs-pad-x);
  color: var(--glee-graphite);
  font: 600 10px/1.4 var(--gs-font-data);
  letter-spacing: .1em;
  text-transform: uppercase;
}
body[data-gs-section] .gtrail-in a { color: var(--glee-brass); }
body[data-gs-section] .gtrail-what { color: var(--glee-graphite); letter-spacing: .02em; text-transform: none; }

/* Explore is a cartographic surface: the grid and hairlines stay visible while
   live room truth, zones, and links remain the foreground. */
body[data-gs-section='explore'] > .shell,
body[data-gs-section='proof'] > .shell,
body[data-gs-section='proof'] > main.shell {
  width: min(var(--gs-container), calc(100% - 2 * var(--gs-pad-x)));
  max-width: var(--gs-container);
  margin: 0 auto;
  padding: 0 0 var(--space-64);
}
body[data-gs-section='explore'] .hero,
body[data-gs-section='proof'] .hero,
body[data-gs-section='proof'] .intro {
  position: relative;
  border-bottom: 1px solid rgba(216, 187, 120, .22);
  padding: clamp(var(--space-24), 5vw, var(--space-64)) 0 var(--space-24);
}
body[data-gs-section='explore'] .hero::before,
body[data-gs-section='proof'] .hero::before,
body[data-gs-section='proof'] .intro::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 28px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(180deg, var(--glee-brass), var(--glee-cyan), transparent);
  opacity: .8;
}
body[data-gs-section='explore'] .hero h1,
body[data-gs-section='proof'] .hero h1,
body[data-gs-section='proof'] .intro h1 {
  color: var(--glee-brass-hi);
  font-family: var(--glee-serif);
  font-weight: 500;
  letter-spacing: -.025em;
}
body[data-gs-section='explore'] .hero p,
body[data-gs-section='proof'] .hero p,
body[data-gs-section='proof'] .intro p {
  color: var(--glee-graphite);
  font-family: var(--gs-font-ui);
}
body[data-gs-section='explore'] .zlabel,
body[data-gs-section='explore'] .ship-header {
  border-bottom-color: rgba(116, 228, 233, .2);
}
body[data-gs-section='explore'] .zlabel h2,
body[data-gs-section='explore'] .ship-header strong {
  color: var(--glee-ivory);
  font-family: var(--glee-serif);
  font-size: var(--text-14);
  font-weight: 500;
  letter-spacing: .12em;
}
body[data-gs-section='explore'] .zlabel span { color: var(--glee-graphite); }

body[data-gs-section='explore'] .roomcard,
body[data-gs-section='explore'] .card,
body[data-gs-section='explore'] .dcard,
body[data-gs-section='proof'] .door,
body[data-gs-section='proof'] .step,
body[data-gs-section='proof'] .statusbox,
body[data-gs-section='proof'] .stat,
body[data-gs-section='proof'] .receipt {
  border-radius: var(--radius-2);
  border-color: #242424;
  background: #0a0a0a;
  box-shadow: none;
}
body[data-gs-section='explore'] .card:hover,
body[data-gs-section='explore'] .dcard:hover,
body[data-gs-section='proof'] .door:hover,
body[data-gs-section='proof'] .door:focus-visible {
  border-color: var(--glee-brass);
  box-shadow: 0 0 0 1px rgba(216, 187, 120, .22), 0 18px 44px rgba(0, 0, 0, .2);
}
body[data-gs-section='explore'] .roomcard { border-top: 2px solid rgba(216, 187, 120, .48); }
body[data-gs-section='explore'] .roomcard.reclaim { border-top-color: var(--rose); }
body[data-gs-section='explore'] .card .cn,
body[data-gs-section='explore'] .roomname,
body[data-gs-section='explore'] .dcard .dbody b,
body[data-gs-section='proof'] .door h2,
body[data-gs-section='proof'] .step h2,
body[data-gs-section='proof'] .statusbox strong,
body[data-gs-section='proof'] .receipt h3 {
  color: var(--glee-ivory);
  font-family: var(--glee-serif);
  font-weight: 500;
}
body[data-gs-section='explore'] .card .cl,
body[data-gs-section='explore'] .roomsummary,
body[data-gs-section='explore'] .dcard .dbody .dl,
body[data-gs-section='proof'] .door .sum,
body[data-gs-section='proof'] .step p,
body[data-gs-section='proof'] .receipt p { color: var(--glee-graphite); }

/* Proof opens into a warm evidence folio inside the dark shell. */
body.proof-document .receipt,
body.proof-document .statusbox,
body.proof-document .step {
  background:
    linear-gradient(90deg, rgba(116, 228, 233, .08) 0 2px, transparent 2px),
    linear-gradient(135deg, rgba(255, 255, 255, .5), transparent 22%),
    var(--glee-ivory);
  border-color: rgba(216, 187, 120, .64);
  color: var(--c-surface-2);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
body.proof-document .receipt h3,
body.proof-document .statusbox strong,
body.proof-document .step h2 { color: var(--c-surface); }
body.proof-document .receipt p,
body.proof-document .statusbox p,
body.proof-document .step p,
body.proof-document .receipt .meta,
body.proof-document .receipt .summary { color: var(--c-surface-3); }
body.proof-document .receipt .summary { border-left-color: var(--c-teal); }
body.proof-document .receipt .boundary { color: var(--c-danger); border-left-color: var(--c-danger); }
body.proof-document .receipt .tag { background: rgba(24, 40, 48, .04); border-color: rgba(24, 40, 48, .2); color: var(--c-surface-3); }
body.proof-document .receipt .tag.green { color: var(--c-ok); border-color: rgba(40, 122, 80, .45); }
body.proof-document .receipt .tag.gold { color: var(--c-surface-3); border-color: rgba(124, 95, 29, .42); }
body.proof-document .receipt .links a { color: var(--c-surface-3); border-color: rgba(23, 104, 114, .38); }

/* Forms and controls belong to the same instrument family as the records. */
body[data-gs-section] input,
body[data-gs-section] select,
body[data-gs-section] textarea,
body[data-gs-section] button { font-family: var(--gs-font-data); }
body[data-gs-section] input:focus-visible,
body[data-gs-section] select:focus-visible,
body[data-gs-section] textarea:focus-visible,
body[data-gs-section] button:focus-visible,
body[data-gs-section] a:focus-visible {
  outline: 2px solid var(--glee-cyan);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  body[data-gs-section='explore'] > .shell,
  body[data-gs-section='proof'] > .shell,
  body[data-gs-section='proof'] > main.shell {
    width: min(100% - 2 * var(--gs-pad-x), var(--gs-container));
  }
  body[data-gs-section='explore'] .hero::before,
  body[data-gs-section='proof'] .hero::before,
  body[data-gs-section='proof'] .intro::before { left: -8px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-gs-section] *,
  body[data-gs-section] *::before,
  body[data-gs-section] *::after { scroll-behavior: auto !important; }
}

/* Mobile GlobalNav repair (GLEE-WEB-001)
   The shell's global links are direct controls, so a narrow viewport must give
   them a discoverable layout rather than clipping the end of a scroll strip.
   The atelier homepage owns a separate Menu disclosure in page-css/atelier.css;
   keep that behavior scoped to its existing class and only expand standard
   shells here. The bar remains sticky, but its height grows in normal flow so
   the trail and page content cannot slide beneath a taller mobile nav. */
@media (max-width: 760px) {
  body:not(.atelier) .gs-bar {
    flex-wrap: wrap;
    row-gap: 0;
  }
  body:not(.atelier) .gs-brand { order: 1; }
  body:not(.atelier) .gs-right {
    order: 2;
    margin-left: auto;
  }
  body:not(.atelier) .gs-nav {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) 0 var(--space-8);
    -webkit-mask-image: none;
    mask-image: none;
  }
  body:not(.atelier) .gs-nav-a {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 32px;
    padding-inline: var(--space-8);
    white-space: nowrap;
  }
  body:not(.atelier) .gs-nav-a:focus-visible {
    outline: 2px solid var(--glee-cyan, #74e4e9);
    outline-offset: 2px;
  }
}
/* Redesign-wide direct navigation remains discoverable without JavaScript. */
body[data-gs-class] .gs-nav-a,
body[data-gs-class] .gs-session { min-height:44px; }
body[data-gs-class] .gs-chat { min-height:44px; }