/* Aura — presentation surface stylesheet.
   Serves /deck and /demo. Not part of the Flutter bundle.

   Every token below is copied from the shipped client, not invented:
     lib/core/ui/aura_surface.dart       — the palette (imported by 268 files;
                                           lib/core/ui/aura_theme.dart is dead
                                           code and its palette is NOT the product)
     lib/core/ui/aura_design_system.dart — AuraGradients: page, hero, header,
                                           card, accent, footer
     lib/core/ui/aura_text.dart          — the type scale
     lib/core/ui/aura_space.dart         — spacing
     lib/core/ui/aura_radius.dart        — radii (card 18, pill 999)
     lib/shared/identity/aura_identity_badge.dart — identity chip tones
     lib/core/ui/substrate_chip.dart     — typed-state chip grammar
     lib/features/home/presentation/public_home_screen.dart — the radial accent
                                           wash behind the public hero

   Register per company/visuals/visual-language/presentation-registers.md:
   dark, architectural, restrained, calm, governance-visible, reveal-only
   motion. Per visual-philosophy.md nothing here decorates — every gradient,
   rule and transition below is one the product already draws, used to carry
   the same meaning it carries there. */

:root {
  /* AuraSurface */
  --page:       #0D1520;
  --subtle:     #111D2E;
  --card:       #152438;
  --elevated:   #1B2E44;
  --overlay:    #203454;
  --ink:        #E2ECF5;
  --muted:      #7A96B5;
  --faint:      #4B6882;
  --divider:    rgba(255, 255, 255, 0.08);
  --accent:     #5B6CFF;
  --accent-soft: rgba(91, 108, 255, 0.20);
  --accent-text: #8B9EFF;
  --violet:     #7A4DFF;

  /* semantic pairs */
  --good-bg: #0E2318;  --good-ink: #5FD99A;
  --warn-bg: #221B0E;  --warn-ink: #EDC264;
  --danger-bg: #231010; --danger-ink: #F07878;
  --info-bg: #0F1E2E;  --info-ink: #6BAEED;

  /* identity chip tones, from aura_identity_badge.dart */
  --official-bg: rgba(13, 148, 136, 0.12);
  --official-ink: #5EEAD4;
  --official-line: rgba(13, 148, 136, 0.30);
  --admin-bg: rgba(139, 92, 246, 0.12);
  --admin-ink: #C4B5FD;
  --admin-line: rgba(139, 92, 246, 0.30);

  /* AuraGradients, verbatim */
  --g-page:   linear-gradient(to bottom, #0A1220 0%, #0D1520 52%, #0F1C2C 100%);
  --g-hero:   linear-gradient(135deg, #0A1428 0%, #0F2040 55%, #163058 100%);
  --g-header: linear-gradient(135deg, #0E1828 0%, #132030 55%, #152438 100%);
  --g-card:   linear-gradient(135deg, #192C42 0%, #122034 100%);
  --g-accent: linear-gradient(135deg, #5B6CFF 0%, #7A4DFF 100%);
  --g-footer: linear-gradient(to bottom, #0C1828 0%, #090F1C 100%);

  /* AuraRadius */
  --r-sm: 12px; --r-md: 14px; --r-card: 18px; --r-pill: 999px;

  /* AuraSpace */
  --s4: 4px; --s8: 8px; --s12: 12px; --s16: 16px;
  --s20: 20px; --s24: 24px; --s32: 32px;

  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --measure: 68ch;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Insurance only. The hero wash below is laid out against the BODY box, so
     it already stops at the scrollbar rather than overhanging it; this keeps
     any future full-bleed from silently growing a horizontal scrollbar.
     `clip` rather than `hidden` because `hidden` creates a scroll container
     and breaks `position: fixed` on the progress bar. */
  overflow-x: clip;
}

body {
  position: relative;
  margin: 0;
  /* AuraGradients.page — the sweep the app itself sits on. */
  background: var(--g-page) fixed;
  color: var(--ink);
  font-family: var(--sans);
  /* AuraText.body */
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.1px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-text); }

/* ── reading progress ──────────────────────────────────────────────────────
   AuraPublicationLayout takes `showProgress: true` and the white paper uses
   it. A publication surface on the web gets the same affordance, drawn in
   AuraGradients.accent. Width is set by script; with none it stays at 0 and
   the bar is simply invisible. */

.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--g-accent);
  z-index: 40;
  transition: width .12s linear;
  pointer-events: none;
}

/* ── page frame ────────────────────────────────────────────────────────── */

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

/* AuraGradients.hero plus the radial accent wash the public home draws behind
   its own hero (0x1A5B6CFF → transparent), so the page opens the way the
   product opens.

   Laid out against the BODY box rather than the viewport: `left/right: 0` on
   an absolutely positioned child of body resolves to body's width, which
   excludes the scrollbar. The `calc(50% - 50vw)` full-bleed this replaced
   overhung by exactly the scrollbar's width and grew a horizontal scrollbar.
   The gradient fades out well before its own bottom edge, so the height is a
   generous guess rather than a measurement that could drift. */
body::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 620px;
  background:
    radial-gradient(120% 130% at 18% 0%, rgba(91, 108, 255, 0.10) 0%, transparent 60%),
    var(--g-hero);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}

.masthead {
  position: relative;
  padding: 88px 0 48px;
  border-bottom: 1px solid var(--divider);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 var(--s16);
}

/* AuraText.display / headline / title */
h1 {
  font-size: 44px;
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.6px;
  margin: 0 0 var(--s20);
  max-width: 18ch;
  overflow-wrap: break-word;
}

h2 {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin: 0 0 var(--s12);
  overflow-wrap: break-word;
}

h3 {
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.1px;
  margin: 0 0 var(--s8);
}

h4 {
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.1px;
  margin: 0 0 var(--s8);
}

p { margin: 0 0 var(--s16); max-width: var(--measure); }

.lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 60ch;
}

.muted { color: var(--muted); }
.small { font-size: 13px; line-height: 1.45; color: var(--muted); }

/* ── section rhythm ──────────────────────────────────────────────────────
   A numeral and a hairline, the way InvestorSectionHeader numbers sections in
   the client. The numeral is structure, not ornament: it is how a reader
   refers to a section out loud. */

section { position: relative; padding: 64px 0; border-bottom: 1px solid var(--divider); }
section:last-of-type { border-bottom: 0; }

.sec-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 var(--s12);
}

.sec-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--divider), transparent);
  transform: translateY(-3px);
}

/* ── the causal spine ──────────────────────────────────────────────────────
   Aura's own movement. The public-first doctrine is an ordered chain, so it
   is drawn as a chain: a continuous rule with a node per step. Nothing here
   is a funnel and nothing narrows — the order is causal, not a conversion.

   The rule DRAWS ITSELF as the reader descends, which is the register's
   "progressive diagram build" and is the one motion on these pages that
   carries meaning: the order is the argument, so the order is what moves. */

.spine { position: relative; margin: var(--s32) 0 0; padding-left: 34px; }

/* the unlit track */
.spine::before {
  content: "";
  position: absolute;
  left: 8px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--divider);
}

/* the drawn portion, in AuraGradients.accent */
.spine::after {
  content: "";
  position: absolute;
  left: 8px; top: 6px;
  width: 1px;
  height: var(--spine-drawn, 100%);
  background: linear-gradient(to bottom, var(--accent), var(--violet));
  transition: height .18s linear;
}

.step { position: relative; padding: 0 0 var(--s24); }
.step:last-child { padding-bottom: 0; }

.step::before {
  content: "";
  position: absolute;
  left: -30px; top: 7px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--page);
  border: 1px solid var(--accent);
  transition: box-shadow .4s ease, background .4s ease;
}

/* A node lights when its step is reached. Same discipline as the spine: the
   only thing animated is the reader's position in the order. */
.step.lit::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(91, 108, 255, 0.14);
}

.step[data-institution]::before { border-color: var(--official-ink); }
.step[data-institution].lit::before {
  background: var(--official-ink);
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.16);
}

.step h4 { margin-bottom: var(--s4); }
.step p { margin: 0; color: var(--muted); font-size: 14px; max-width: 62ch; }

/* ── a frozen statement, quoted as one ────────────────────────────────────
   Doctrine that is quoted verbatim is set apart, so it is never mistaken for
   this page's own words. */

.frozen {
  position: relative;
  margin: var(--s32) 0 0;
  padding: var(--s20) var(--s24) var(--s20) var(--s32);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: linear-gradient(90deg, rgba(91, 108, 255, 0.07), transparent 72%);
}

.frozen::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--g-accent);
}

.frozen p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); max-width: 58ch; }
.frozen cite {
  display: block;
  margin-top: var(--s12);
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ── typed state chip — SubstrateChip grammar ─────────────────────────────
   Mono, uppercase, literal enum value. Colour is never the only signal. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--info-bg);
  color: var(--info-ink);
  border: 1px solid rgba(107, 174, 237, 0.25);
}

.chip[data-t="good"]   { background: var(--good-bg);   color: var(--good-ink);   border-color: rgba(95, 217, 154, 0.25); }
.chip[data-t="warn"]   { background: var(--warn-bg);   color: var(--warn-ink);   border-color: rgba(237, 194, 100, 0.25); }
.chip[data-t="accent"] { background: var(--accent-soft); color: var(--accent-text); border-color: rgba(91, 108, 255, 0.30); }
.chip[data-t="quiet"]  { background: rgba(255,255,255,0.04); color: var(--muted); border-color: var(--divider); }

/* identity chips carry their own tones, from the client */
.idchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
  background: var(--official-bg);
  color: var(--official-ink);
  border: 1px solid var(--official-line);
}
.idchip[data-t="admin"] {
  background: var(--admin-bg); color: var(--admin-ink); border-color: var(--admin-line);
}
.idchip[data-t="member"] {
  background: var(--accent-soft); color: var(--accent-text); border-color: rgba(91,108,255,0.30);
}

/* ── panels ───────────────────────────────────────────────────────────────
   A panel is a bounded statement. It is not a card in a grid of cards;
   Aura's reading surface is a column, and the panels sit in that column.
   The interior is AuraGradients.card — the depth the product's own cards
   have, which the flat fill here was missing. */

.panel {
  position: relative;
  background: var(--g-card);
  border: 1px solid var(--divider);
  border-radius: var(--r-card);
  padding: var(--s20) var(--s24);
  overflow: hidden;
}

/* A one-pixel accent along the top edge, brightest at the left, the way the
   client marks a surface that carries authority. */
.panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(to right, rgba(91, 108, 255, 0.55), transparent 60%);
}

.panel + .panel { margin-top: var(--s12); }

.panel h4 { margin-bottom: var(--s4); }
.panel p:last-child { margin-bottom: 0; }

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s12);
  margin-top: var(--s20);
}

.grid3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s12);
  margin-top: var(--s20);
}

/* ── a stated fact, with its source ───────────────────────────────────────
   Nothing on these pages claims a number without saying where it comes from. */

.facts { margin-top: var(--s20); border-top: 1px solid var(--divider); }

.fact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s16);
  align-items: baseline;
  padding: var(--s12) var(--s8);
  border-bottom: 1px solid var(--divider);
  transition: background .25s ease;
}

.fact:hover { background: rgba(255, 255, 255, 0.02); }

.fact__t { font-size: 14px; }
.fact__t b { font-weight: 600; }
.fact__s {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  text-align: right;
  white-space: nowrap;
}

/* ── authority diagram ────────────────────────────────────────────────────
   Governance made visible, per visual-philosophy §2. Three grants, held
   separately, each revocable on its own. Drawn rather than described because
   the separation IS the fact. */

.grants {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s12);
  margin-top: var(--s24);
  position: relative;
}

.grant {
  background: var(--g-card);
  border: 1px solid var(--divider);
  border-radius: var(--r-card);
  padding: var(--s16);
}

.grant__k {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--s8);
}

.grant__t { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.grant__d { font-size: 13px; color: var(--muted); line-height: 1.45; }

.grant__bar {
  margin-top: var(--s12);
  height: 2px;
  border-radius: 2px;
  background: var(--g-accent);
  opacity: 0.55;
}
.grant[data-held="no"] .grant__bar { background: var(--divider); opacity: 1; }
.grant[data-held="no"] .grant__k { color: var(--faint); }

/* ── reveal, per the register: reveal-only, never competing ─────────────────
   Hiding is OPT-IN, applied by a head script only when scripting is available
   and motion is allowed. Hiding by default would mean a failed or blocked
   script leaves the entire page blank below the masthead. */

.js-reveal .rv {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}
.js-reveal .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* End states are declared unconditionally. Disabling the transition alone
     would leave every revealed element stuck at opacity 0. */
  .js-reveal .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .progress { transition: none; }
  .spine::after { transition: none; }
  .step::before { transition: none; }
}

/* ── footer ───────────────────────────────────────────────────────────────── */

.foot {
  position: relative;
  padding: 44px 0 0;
  border-top: 1px solid var(--divider);
  color: var(--faint);
  font-size: 13px;
}
.foot a { color: var(--muted); }

.navline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s16);
  align-items: baseline;
  padding-top: var(--s16);
}

.navline a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.navline a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* ── responsive ───────────────────────────────────────────────────────────
   Verified at 200% zoom: no horizontal scroll, nothing clipped. */

@media (max-width: 860px) {
  .grid2, .grid3, .grants { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .wrap { padding: 0 var(--s16) 72px; }
  .masthead { padding: 56px 0 36px; }
  h1 { font-size: 32px; max-width: none; }
  h2 { font-size: 23px; }
  .lede { font-size: 16px; }
  section { padding: 44px 0; }
  .fact { grid-template-columns: 1fr; gap: var(--s4); }
  .fact__s { text-align: left; white-space: normal; }
  .frozen { padding-left: var(--s20); }
}

/* ── the enforcement ladder ────────────────────────────────────────────────
   `MonetizationMode` is a four-step ladder in the backend — disabled,
   visible, soft_enforce, enforce — and production sits on the first rung.
   Drawn as a ladder because that is what it is: a staged activation with a
   current position, not a roadmap promise. */

.ladder {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--s24);
  border: 1px solid var(--divider);
  border-radius: var(--r-card);
  overflow: hidden;
}

.rung {
  padding: var(--s16) var(--s12);
  border-right: 1px solid var(--divider);
  background: rgba(255, 255, 255, 0.015);
}
.rung:last-child { border-right: 0; }

.rung__k {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.rung__t { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.rung__d { margin-top: 3px; font-size: 12.5px; color: var(--faint); line-height: 1.45; }

.rung[data-now] {
  background: linear-gradient(180deg, rgba(91, 108, 255, 0.10), transparent);
  box-shadow: inset 0 2px 0 var(--accent);
}
.rung[data-now] .rung__k { color: var(--accent-text); }
.rung[data-now] .rung__t { color: var(--ink); }

/* ── a measured figure, with the source under it ─────────────────────────── */

.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s12);
  margin-top: var(--s24);
}

.figure {
  background: var(--g-card);
  border: 1px solid var(--divider);
  border-radius: var(--r-card);
  padding: var(--s20);
}
.figure__n {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.figure__t { margin-top: 4px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.figure__s {
  margin-top: var(--s12);
  padding-top: var(--s8);
  border-top: 1px solid var(--divider);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--faint);
}

@media (max-width: 860px) {
  .ladder { grid-template-columns: 1fr 1fr; }
  .rung:nth-child(2) { border-right: 0; }
  .rung:nth-child(-n+2) { border-bottom: 1px solid var(--divider); }
  .figures { grid-template-columns: 1fr; }
}