/*
 * brand-upgrade.css · Liminal prototype · 2026-05-07
 * ═══════════════════════════════════════════════════
 * Full design system: brand fonts, type hierarchy, 12-wheel colors,
 * neutral surfaces, orbital/tray/rail overrides.
 *
 * Import after cut-shell.css:
 *   <link rel="stylesheet" href="../lib/brand-upgrade.css">   (cuts/)
 *   <link rel="stylesheet" href="lib/brand-upgrade.css">      (root)
 */

/* ══════════════════════════════════════════════════════
   BRAND FONTS — PerfectlyNineties full 16-weight range
   No italic used for emphasis — weight is the emphasis axis.
   ══════════════════════════════════════════════════════ */
@font-face {
  font-family: 'NinetiesHeadliner';
  src: url('../fonts/nineties-headliner.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PerfectlyNineties';
  src: url('../fonts/PerfectlyNineties-Thin.otf') format('opentype');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PerfectlyNineties';
  src: url('../fonts/PerfectlyNineties-Extralight.otf') format('opentype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PerfectlyNineties';
  src: url('../fonts/perfectly-nineties-light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PerfectlyNineties';
  src: url('../fonts/perfectly-nineties-regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PerfectlyNineties';
  src: url('../fonts/PerfectlyNineties-Semibold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PerfectlyNineties';
  src: url('../fonts/perfectly-nineties-bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PerfectlyNineties';
  src: url('../fonts/PerfectlyNineties-Extrabold.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PerfectlyNineties';
  src: url('../fonts/PerfectlyNineties-Black.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ══════════════════════════════════════════════════════
   TYPE SYSTEM — scale ratio 1.250 (Major Third)
   Weight axis replaces italic for all emphasis. No italic.

   DISPLAY   NinetiesHeadliner 700   4.8–9rem    -0.04em  ← hero numbers, brand wordmark
   SUBHEAD   NinetiesHeadliner 700   1.5–2.4rem  -0.03em  ← section headers, slate titles
   H1        PerfectlyNineties 700   2.4–3.6rem  -0.03em  ← major section headlines
   H2        PerfectlyNineties 600   1.5–2rem    -0.025em ← card titles, panel headers
   BODY      PerfectlyNineties 300   0.9–1rem    -0.005em ← all running prose
   EMPHASIS  PerfectlyNineties 600   inherit      inherit  ← inline stress, no italic
   LABEL     Geist Mono 400          0.58–0.72rem  0.16em ← UI labels, status tags
   EYEBROW   Geist Mono 400          0.52–0.58rem  0.22em ← register names, section tags
   META      Geist Mono 400          0.52rem       0.12em ← timestamps, counts

   CSS custom properties for consistent reuse:
   ══════════════════════════════════════════════════════ */
:root {
  /* Font stacks — canonical Liminal three-font system */
  --font-display:  "NinetiesHeadliner", Georgia, serif;
  --font-serif:    "PerfectlyNineties", Georgia, serif;
  --font-mono:     "Cougar", "Space Mono", "SF Mono", ui-monospace, monospace;
  --font-sans:     "PerfectlyNineties", Georgia, serif;

  /* Cut-shell compat aliases */
  --display: var(--font-display);
  --serif:   var(--font-serif);
  --mono:    var(--font-mono);
  --sans:    var(--font-sans);

  /* Type scale — 1.250 Major Third ratio, base 16px */
  --text-2xs:  0.512rem;   /* 8.2px  — meta, footnote */
  --text-xs:   0.64rem;    /* 10.2px — eyebrow, label */
  --text-sm:   0.8rem;     /* 12.8px — caption, UI */
  --text-base: 1rem;       /* 16px   — body */
  --text-md:   1.25rem;    /* 20px   — large body */
  --text-lg:   1.563rem;   /* 25px   — h3 */
  --text-xl:   1.953rem;   /* 31px   — h2 */
  --text-2xl:  2.441rem;   /* 39px   — h1 */
  --text-3xl:  3.052rem;   /* 49px   — display sm */
  --text-4xl:  3.815rem;   /* 61px   — display md */
  --text-5xl:  4.768rem;   /* 76px   — display lg */
  --text-6xl:  5.96rem;    /* 95px   — hero */

  /* Line heights */
  --leading-tight:  0.9;
  --leading-snug:   1.1;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;
  --leading-loose:  1.8;

  /* Letter spacing */
  --tracking-tight:   -0.04em;
  --tracking-snug:    -0.03em;
  --tracking-normal:  -0.01em;
  --tracking-body:    -0.005em;
  --tracking-wide:     0.12em;
  --tracking-wider:    0.16em;
  --tracking-widest:   0.22em;

  /* Backgrounds — warm black axis */
  --bg:           #08080a;
  --frame-bg:     #0c0c0f;
  --frame-bg-2:   #0a0a0d;
  --frame-bg-3:   #111116;
  --frame-border: #1c1c22;
  --card-border:  #202026;
  --card-border-2:#28282e;

  /* Ink scale — warm cream axis */
  --text:       #F2F0EC;
  --text-mid:   #C4C0B8;
  --text-dim:   #847F79;
  --text-faint: #504C47;

  /* ── 12-wheel register colors ─────────────────────
     4 agent registers only. No orange/yellow/coral/teal.
     Diligence = clarity violet  · Judgment = wholeness magenta
     Synthesis = cerulean blue   · Outreach = connection green
  ─────────────────────────────────────────────────── */
  --clarity:      #8E66FB;
  --clarity-soft: rgba(142,102,251,0.35);
  --clarity-bg:   rgba(142,102,251,0.07);
  --clarity-edge: rgba(142,102,251,0.22);

  --wholeness:      #E8006A;
  --wholeness-soft: rgba(232,0,106,0.35);
  --wholeness-bg:   rgba(232,0,106,0.07);
  --wholeness-edge: rgba(232,0,106,0.22);

  --cerulean:      #197EEB;
  --cerulean-soft: rgba(25,126,235,0.35);
  --cerulean-bg:   rgba(25,126,235,0.07);
  --cerulean-edge: rgba(25,126,235,0.22);

  --connection:      #31E682;
  --connection-soft: rgba(49,230,130,0.35);
  --connection-bg:   rgba(49,230,130,0.07);
  --connection-edge: rgba(49,230,130,0.22);

  /* liminal-space-v0 compat aliases — same values, different names */
  --magenta:        var(--wholeness);
  --magenta-soft:   var(--wholeness-soft);
  --magenta-bg:     var(--wholeness-bg);
  --violet:         var(--clarity);
  --violet-soft:    var(--clarity-soft);

  /* Register → role bindings */
  --diligence:      var(--clarity);
  --diligence-soft: var(--clarity-soft);
  --diligence-bg:   var(--clarity-bg);
  --diligence-edge: var(--clarity-edge);

  --judgment:       var(--wholeness);
  --judgment-soft:  var(--wholeness-soft);
  --judgment-bg:    var(--wholeness-bg);
  --judgment-edge:  var(--wholeness-edge);

  --synthesis:      var(--cerulean);
  --synthesis-soft: var(--cerulean-soft);
  --synthesis-bg:   var(--cerulean-bg);
  --synthesis-edge: var(--cerulean-edge);

  --outreach:       var(--connection);
  --outreach-soft:  var(--connection-soft);
  --outreach-bg:    var(--connection-bg);
  --outreach-edge:  var(--connection-edge);
}

/* body-level accent — wins over per-file :root overrides */
body {
  --accent:      #E8006A;
  --accent-soft: rgba(232,0,106,0.35);
  --accent-bg:   rgba(232,0,106,0.07);
  --accent-edge: rgba(232,0,106,0.22);
  --accent-glow: 0 0 20px rgba(232,0,106,0.4);
  --pink:        #E8006A;
  --clarity:     #8E66FB;
}

/* ══════════════════════════════════════════════════════
   GLOBAL EMPHASIS RULE — weight not italic
   em/strong always → PerfectlyNineties semibold, no slant
   ══════════════════════════════════════════════════════ */
em, strong,
.brief-body em, .brief-body strong,
.move-body em, .panel-body em,
.se-helper em, .slate-subtitle em {
  font-family: "PerfectlyNineties", Georgia, serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: var(--text) !important;
}

/* ══════════════════════════════════════════════════════
   ENTRY OVERLAY
   ══════════════════════════════════════════════════════ */
.entry-overlay {
  background: rgba(8,8,10,0.96) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
}
.entry-card {
  background: #0f0f13 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 8px !important;
  box-shadow: 0 40px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04) inset !important;
  padding: 48px 44px 40px !important;
  max-width: 640px !important;
}
.entry-wedge {
  font-family: "NinetiesHeadliner", Georgia, serif !important;
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  line-height: var(--leading-snug) !important;
  letter-spacing: var(--tracking-snug) !important;
  color: var(--text) !important;
  font-style: normal !important;
}
.entry-card .entry-brand {
  font-family: "PerfectlyNineties", Georgia, serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: var(--text-sm) !important;
  color: rgba(242,240,236,0.4) !important;
  letter-spacing: var(--tracking-body) !important;
}
.entry-prompt {
  font-family: var(--font-mono) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 400 !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  color: rgba(242,240,236,0.3) !important;
  margin-top: 32px !important;
  margin-bottom: 16px !important;
}
.entry-door {
  background: #141418 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 4px !important;
  padding: 18px 20px !important;
  transition: border-color 0.15s, background 0.15s !important;
}
.entry-door:hover {
  background: #1a1a1f !important;
  border-color: rgba(255,255,255,0.14) !important;
}
.ed-eyebrow {
  font-family: var(--font-mono) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 400 !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase !important;
  color: rgba(242,240,236,0.35) !important;
  margin-bottom: 6px !important;
}
.ed-title {
  font-family: "NinetiesHeadliner", Georgia, serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: var(--text-base) !important;
  letter-spacing: var(--tracking-normal) !important;
  color: var(--text) !important;
  margin-bottom: 6px !important;
}
.ed-helper {
  font-family: "PerfectlyNineties", Georgia, serif !important;
  font-weight: 300 !important;
  font-size: var(--text-sm) !important;
  color: rgba(242,240,236,0.4) !important;
  line-height: var(--leading-normal) !important;
}
.entry-skip {
  font-family: var(--font-mono) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 400 !important;
  letter-spacing: var(--tracking-wide) !important;
  color: rgba(242,240,236,0.2) !important;
  text-transform: uppercase !important;
  margin-top: 24px !important;
}

/* ══════════════════════════════════════════════════════
   FRAME CHROME
   ══════════════════════════════════════════════════════ */
.titlebar {
  background: #0c0c0f !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.brand {
  font-family: var(--font-mono) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 400 !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  color: rgba(242,240,236,0.55) !important;
}
.diamond { color: rgba(142,102,251,0.8) !important; }
.product-tab {
  font-family: var(--font-mono) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 400 !important;
  letter-spacing: var(--tracking-wider) !important;
}

/* ══════════════════════════════════════════════════════
   SLATE
   ══════════════════════════════════════════════════════ */
.slate-title {
  font-family: "NinetiesHeadliner", Georgia, serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: var(--tracking-snug) !important;
}
.slate-subtitle {
  font-family: "PerfectlyNineties", Georgia, serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: var(--text-base) !important;
  line-height: var(--leading-relaxed) !important;
  letter-spacing: var(--tracking-body) !important;
}
.se-headline {
  font-family: "NinetiesHeadliner", Georgia, serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: var(--text-md) !important;
  line-height: var(--leading-snug) !important;
  letter-spacing: var(--tracking-snug) !important;
  color: rgba(242,240,236,0.55) !important;
}
.se-glyph {
  color: rgba(142,102,251,0.5) !important;
  font-size: var(--text-lg) !important;
}
.classification {
  font-family: var(--font-mono) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 400 !important;
  letter-spacing: var(--tracking-widest) !important;
}

/* ══════════════════════════════════════════════════════
   BRIEF + DISPOSITION
   ══════════════════════════════════════════════════════ */
.brief-head {
  font-family: var(--font-mono) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 400 !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase !important;
  color: rgba(242,240,236,0.35) !important;
}
.brief-head .glyph { color: var(--wholeness) !important; }
.brief-body {
  font-family: "PerfectlyNineties", Georgia, serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: var(--text-sm) !important;
  line-height: var(--leading-relaxed) !important;
  letter-spacing: var(--tracking-body) !important;
  color: rgba(242,240,236,0.82) !important;
}
.brief-body em, .brief-body strong {
  font-weight: 600 !important;
  font-style: normal !important;
  color: var(--text) !important;
}

/* Disposition buttons — neutral, no green */
.brief-disposition .dispo-btn,
.dispo-btn {
  font-family: var(--font-mono) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 400 !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  border: 1px solid rgba(242,240,236,0.18) !important;
  background: rgba(242,240,236,0.05) !important;
  color: rgba(242,240,236,0.65) !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.brief-disposition .dispo-btn:hover,
.dispo-btn:hover {
  background: rgba(242,240,236,0.1) !important;
  border-color: rgba(242,240,236,0.3) !important;
  color: var(--text) !important;
}
.brief-disposition .dispo-btn:first-child,
.dispo-btn.is-primary {
  background: rgba(242,240,236,0.1) !important;
  border-color: rgba(242,240,236,0.28) !important;
  color: var(--text) !important;
}
.brief-disposition .dispo-signed {
  color: var(--wholeness) !important;
}

/* ══════════════════════════════════════════════════════
   AGENCY RAIL
   ══════════════════════════════════════════════════════ */
.rail-right-header {
  font-family: var(--font-mono) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 400 !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding-bottom: 10px !important;
}
.agent-slot {
  font-family: var(--font-mono) !important;
}
.ar-label {
  font-family: var(--font-mono) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 400 !important;
  letter-spacing: var(--tracking-wider) !important;
}

/* ══════════════════════════════════════════════════════
   ORBITAL DIAGRAM — monochrome plates, magenta convergence
   ══════════════════════════════════════════════════════ */
.reg-plate {
  fill: rgba(255,255,255,0.02) !important;
  stroke: rgba(255,255,255,0.1) !important;
  stroke-width: 0.75 !important;
}
.reg-plate.diligence, .reg-plate.outreach,
.reg-plate.synthesis, .reg-plate.judgment {
  stroke: rgba(255,255,255,0.1) !important;
}
.reg-label.diligence, .reg-label.outreach,
.reg-label.synthesis, .reg-label.judgment {
  fill: rgba(255,255,255,0.28) !important;
  font-family: var(--font-mono) !important;
}

/* Convergence → magenta */
.center-orb.convergent {
  fill: rgba(232,0,106,0.12) !important;
  stroke: rgba(232,0,106,0.45) !important;
}
.center-orb.sealed {
  fill: rgba(232,0,106,0.22) !important;
  stroke: rgba(232,0,106,0.75) !important;
  stroke-width: 1.5 !important;
  filter: drop-shadow(0 0 10px rgba(232,0,106,0.4)) !important;
}

/* Refusal arrows — neutral */
.refusal-arrow.active { opacity: 0.3 !important; }
.refusal-arrow.diligence, .refusal-arrow.outreach,
.refusal-arrow.synthesis, .refusal-arrow.judgment {
  stroke: rgba(255,255,255,0.5) !important;
}

/* ══════════════════════════════════════════════════════
   RAILS + SURFACES
   ══════════════════════════════════════════════════════ */

/* Accent remap — neutral tray/rail */
body[data-product="personal"],
body[data-product="team"],
body[data-product="business"] {
  --p-accent:      rgba(240,238,234,0.5);
  --p-accent-soft: rgba(240,238,234,0.2);
  --p-accent-bg:   rgba(240,238,234,0.04);
  --p-accent-edge: rgba(240,238,234,0.1);
}

.rail-right {
  background: #0c0c0f !important;
  border-left-color: rgba(255,255,255,0.07) !important;
}
.rail-left {
  background: #0a0a0d !important;
  border-right-color: rgba(255,255,255,0.06) !important;
}
.tray-panel, .tray-pop .tray-panel {
  background: #0d0d10 !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.tray-pill, .stage .tray-pill, .frame .tray-pill {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: none !important;
}
.tray-pill:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.15) !important;
}
.tray-tile, .tray-item {
  background: #111115 !important;
  border-color: rgba(255,255,255,0.07) !important;
}
.tray-tile:hover, .tray-item:hover,
.tray-tile.active, .tray-item.active {
  background: #16161b !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════
   EMBED DEMO REGISTER COLORS + STATUS BADGES
   ══════════════════════════════════════════════════════ */

/* REFUSED → magenta (was orange) */
.status-badge.refused, .tag-refused,
[class*="refused"], .agent-tag.refused {
  color: var(--wholeness) !important;
  background: var(--wholeness-bg) !important;
  border-color: var(--wholeness-edge) !important;
}

/* Active/reading → clarity violet */
.status-badge.active, .status-badge.reading,
.agent-tag.active, .move-tag.dispatched {
  color: var(--clarity) !important;
  background: var(--clarity-bg) !important;
  border-color: var(--clarity-edge) !important;
}

/* Status badges — mono, tight */
.status-badge, .agent-status, .move-status {
  font-family: var(--font-mono) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 400 !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
}

/* Live dot → magenta */
.signal-dot, .live-dot, .status-live {
  background: var(--wholeness) !important;
  box-shadow: 0 0 8px var(--wholeness) !important;
}

/* Column/panel headers */
.col-header, .register-name, .panel-label,
.section-label, .move-label, .agent-name {
  font-family: var(--font-mono) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 400 !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase !important;
}

/* Panel body text */
.move-body, .agent-read, .dispatch-body,
.commit-body, .panel-body {
  font-family: "PerfectlyNineties", Georgia, serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: var(--text-sm) !important;
  line-height: var(--leading-relaxed) !important;
  letter-spacing: var(--tracking-body) !important;
}

/* Section headlines */
.panel-headline, .section-headline,
.move-title, .dispatch-title {
  font-family: "NinetiesHeadliner", Georgia, serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: var(--tracking-snug) !important;
}

/* Footer strips */
.footer-strip, .meta-bar, .bottom-bar,
.stat-strip, .count-strip {
  font-family: var(--font-mono) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 400 !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase !important;
  color: var(--text-faint) !important;
  border-top-color: rgba(255,255,255,0.07) !important;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — cut-shell layout at different viewports
   These demos are desktop product UI. We handle:
   ≥1280px  full 3-pane (default)
   1024–1279px  compressed 3-pane
   860–1023px   2-pane (hide orbital rail, show left+slate)
   <860px   1-pane (slate only, rails as overlays)
   ══════════════════════════════════════════════════════ */

/* ── 1024–1279px: compressed 3-pane ─────────────────── */
@media (max-width: 1279px) {
  .main {
    grid-template-columns: 220px 1fr 260px !important;
  }
  .rail-left {
    min-width: 220px !important;
    max-width: 220px !important;
  }
  .rail-right {
    min-width: 260px !important;
    max-width: 260px !important;
  }
  /* Tighter type at compressed width */
  .slate-title    { font-size: 1.1rem !important; }
  .brief-body     { font-size: 0.78rem !important; }
  .rail-right-header { font-size: 0.5rem !important; }
  .agent-slot     { font-size: 6.5px !important; }
}

/* ── 860–1023px: 2-pane — hide right orbital rail ───── */
@media (max-width: 1023px) {
  .main {
    grid-template-columns: 200px 1fr !important;
  }
  .rail-right {
    display: none !important;
  }
  /* Product tabs — compress */
  .product-tab .pt-shape {
    display: none !important;
  }
  /* Slate gets full remaining width */
  .slate-area {
    min-width: 0 !important;
  }
  /* Brief disposition wraps */
  .brief-disposition {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* Tray pill still accessible */
  .tray-pop {
    display: flex !important;
  }
}

/* ── <860px: 1-pane + slide-over rails ──────────────── */
@media (max-width: 859px) {
  /* Frame fills full viewport */
  .stage, .frame {
    width: 100vw !important;
    min-width: 0 !important;
    border-radius: 0 !important;
  }
  .main {
    grid-template-columns: 1fr !important;
    position: relative !important;
  }

  /* Left rail: slide-over drawer from left */
  .rail-left {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 260px !important;
    max-width: 80vw !important;
    z-index: 40 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.25s ease !important;
    box-shadow: 4px 0 32px rgba(0,0,0,0.6) !important;
  }
  /* Show left rail when body has data-rail-left="open" */
  body[data-rail-left="open"] .rail-left {
    transform: translateX(0) !important;
  }

  /* Right rail: hidden at this size */
  .rail-right { display: none !important; }

  /* Slate takes full width */
  .slate-area {
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 16px !important;
  }

  /* Titlebar — compress */
  .titlebar {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .breadcrumb { max-width: 160px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

  /* Product nav — horizontal scroll */
  .product-row {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0 !important;
  }
  .product-tab { flex-shrink: 0 !important; }
  .product-tab .pt-shape { display: none !important; }

  /* Slate header — tighter */
  .slate-title    { font-size: 1rem !important; }
  .slate-subtitle { font-size: 0.78rem !important; }

  /* Brief — full width */
  .brief-area {
    padding: 16px !important;
  }
  .brief-body { font-size: 0.82rem !important; line-height: 1.6 !important; }

  /* Footer — hide secondary stats */
  .footer-stats { display: none !important; }
  .bottom-bar, .stat-strip { font-size: 0.45rem !important; gap: 12px !important; }

  /* Touch targets */
  .dispo-btn {
    min-height: 36px !important;
    padding: 8px 14px !important;
  }

  /* Entry overlay — full screen at mobile */
  .entry-card {
    padding: 32px 24px 28px !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .entry-wedge { font-size: 1.2rem !important; }
  .entry-doors { grid-template-columns: 1fr !important; }
}

/* ── Small left rail toggle button (injected by JS) ── */
.rail-toggle-btn {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 50;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(242,240,236,0.08);
  border: 1px solid rgba(242,240,236,0.15);
  color: var(--text-mid);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
@media (max-width: 859px) {
  .rail-toggle-btn { display: flex; }
}

/* ── Responsive polish passes ────────────────────── */

/* Product tab row: always scrollable horizontally, never wraps */
.product-row {
  overflow-x: auto !important;
  overflow-y: visible !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
.product-row::-webkit-scrollbar { display: none !important; }

/* Tray chevron: hide on mobile where tray is inaccessible */
@media (max-width: 859px) {
  .tray-pop { display: none !important; }
  .tray-pill { display: none !important; }
}

/* Slate tiles grid: single column on mobile */
@media (max-width: 640px) {
  .slate-tiles {
    grid-template-columns: 1fr !important;
  }
  /* Surface meta banner: hide at small sizes */
  .surface-meta { display: none !important; }
  /* Rail header meta text: compress */
  .rh-meta { display: none !important; }
}

/* Brief body: ensure emphasis weight lands everywhere */
.brief-body b, .brief-body strong,
[class*="agent-name"] {
  font-family: "NinetiesHeadliner", Georgia, serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: 0.75rem !important;
  letter-spacing: 0 !important;
  color: var(--text) !important;
}