/* site-aipredicts/chassis/house.css — THE GLASS EXCHANGE house layer (sprint-238 T238.4).
 *
 * HOUSE LAW (frozen — build-core lintWorldCss FAILS any world.css that redefines these):
 *   --gold / --gold-hi   money. Identical values to aisignals brass: tokens, prices, buy
 *                        flows are the SAME product across both sites.
 *   --win / --loss / --push   ledger semantics. Records must read identically on every
 *                        desk of every site — these never vary, ever.
 *
 * Everything else here is the shared glass environment (design-direction §2/§3/§4):
 * ocean-dusk ground ramp, three glass elevations (pane/slab/raised), teal light,
 * editorial-serif display + grotesk UI + tabular mono for every number.
 * A guru world.css may retint the WORLD (ground hue, accent, texture) — never the law.
 */

:root {
  /* — house law (frozen) — */
  --gold: #C9A25B;
  --gold-hi: #E3C185;
  --win: #57A06B;
  --loss: #C9584F;
  --push: #8C8377;

  /* — the water (ground ramp, teal-tinted near-black) — */
  --abyss: #050B0E;
  --deep: #081318;
  --water: #0C1B22;

  /* — the light — */
  --teal: #14B8A6;
  --teal-hi: #2DD4BF;
  --cyan: #22D3EE;

  /* — ink ramp on glass (prototype-signed values, artifact 9e031c80) — */
  --ink: #EEF6F7;
  --dim: #B4C9CC;
  --faint: #7A9296;

  /* — lines — */
  --line: rgba(255, 255, 255, 0.08);
  --line-hi: rgba(255, 255, 255, 0.16);

  /* — type roles (prototype-signed: Bodoni Moda display, Michroma wordmark) — */
  --display: 'Bodoni Moda', Didot, 'Playfair Display', Georgia, serif;
  --wordmark: 'Michroma', 'Eurostile', var(--ui);
  --ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  --wrap: 1080px;
}

@font-face {
  font-family: 'Bodoni Moda';
  src: url('/predicts/assets/fonts/bodoni-moda.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Michroma';
  src: url('/predicts/assets/fonts/michroma.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(20, 184, 166, 0.10), transparent 60%),
    radial-gradient(900px 600px at 12% 110%, rgba(34, 211, 238, 0.06), transparent 55%),
    linear-gradient(180deg, var(--abyss) 0%, var(--deep) 55%, var(--water) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* WWFD gotcha (fixed once already on aisignals — kept as root law here):
 * button elements do NOT inherit color; without this, pack quantities render
 * black-on-black inside the buy modal. */
button { color: inherit; font-family: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ── Glass elevations (§2: never one flat glass) ─────────────────────────────
 * pane  — ambient surface (section shells, the board)
 * slab  — interactive card (doors, tickets)
 * raised — modal / hero stage, deepest shadow, strongest specular
 */
.glass-pane, .glass-slab, .glass-raised {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),           /* specular top edge */
    inset 0 -1px 0 rgba(20, 184, 166, 0.10),           /* teal refraction, bottom */
    inset 0 0 24px rgba(255, 255, 255, 0.02);          /* thickness */
}
.glass-slab {
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(20, 184, 166, 0.10),
    inset 0 0 24px rgba(255, 255, 255, 0.02),
    0 18px 48px -24px rgba(0, 0, 0, 0.85);
}
.glass-raised {
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-color: var(--line-hi);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(20, 184, 166, 0.12),
    inset 0 0 32px rgba(255, 255, 255, 0.03),
    0 32px 80px -28px rgba(0, 0, 0, 0.95);
}

/* ── Numbers are the protagonist (§3) ── */
.num, .prob, .rec, .price {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.prob { color: var(--teal-hi); }
.rec .w, .pos { color: var(--win); }
.rec .l, .neg { color: var(--loss); }
.rec .p { color: var(--push); }
.money { color: var(--gold); }

/* ── Shared micro-typography ── */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
}
h1, h2, h3 { font-family: var(--display); font-weight: 500; margin: 0; }

/* ── TEST-phase ribbon (SIGNAL_FEED_MODE-era truth: never the official record) ──
 * Fixed-height box so sticky surfaces below can offset by exactly --ribbon-h
 * (review R1: two top:0 stickies overlap — the topbar must sit at top:var(--ribbon-h)). */
:root { --ribbon-h: 30px; }
.test-ribbon {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--ribbon-h);
  line-height: 16px;
  text-align: center;
  padding: 7px 16px;
  box-sizing: border-box;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--abyss);
  background: linear-gradient(90deg, var(--teal), var(--cyan));
}

/* ── Motion law (§4): alive, never a trick; reduced-motion is a full opt-out ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}