/* ============================================================================
   NOCTURNE — FLEET FOUNDATION (shared, loads AFTER design-system.css)
   The ember-flame dark grammar for every *.classical.nyc surface.
   Strategy proven on the hub (design/GAP-ANALYSIS-hub-nocturne.md §5):
   design-system.css stays; this sheet re-binds its consumed tokens so each
   template converts by adding ONE link. Service-specific components stay in
   per-service sheets (e.g. hub/static/nocturne-hub.css).

   House laws: ember is never a button fill (primary = cream/ink); gold
   certifies only; Fraunces/Newsreader/IBM Plex Mono; flat hairlines, no
   glass; mono floor .68rem; reduced motion kills animation, never data.

   One flame, four voices: audience identity is a mono eyebrow + a
   whisper-faint masthead aura only. Set body[data-voice].
   ============================================================================ */

/* ============================================================================
   NOCTURNE — HUB SKIN (hub-scoped, loads AFTER /shared-static/design-system.css)
   Strategy per design/GAP-ANALYSIS-hub-nocturne.md §5: the shared sheet stays
   linked (design-panel.js and 21 other surfaces depend on it); this hub-only
   layer re-binds every consumed token at :root to nocturne values and restyles
   the hub's own component classes. IDs, JS classes and data-* attributes are
   the API — nothing here renames them.

   House laws honored here:
   - ember is never a button fill; primary = cream fill / ink text
   - gold certifies only (judge pips, seals) — never actions
   - numbers Fraunces, small UI mono (.68rem floor)
   - one flame aura (body), one floating shadow (toasts/menus/dialogs)
   - ember lands once at page entry: the truth sentence <em>
   ========================================================================= */

/* ============================ 1 · NOCTURNE TOKENS ============================ */
:root {
  --night:      #181511;
  --night-lift: #1c1814;
  --night-high: #262019;
  --night-well: #141110;

  --cream:       #f4f0e7;
  --cream-soft:  rgba(244,240,231,.78);
  --cream-faint: rgba(244,240,231,.55);
  --cream-22:    rgba(244,240,231,.22);
  --cream-35:    rgba(244,240,231,.35);

  --hairline:      rgba(244,240,231,.10);
  --hairline-soft: rgba(244,240,231,.05);

  --ember:      #c75d2c;
  --ember-glow: rgba(199,93,44,.14);
  --ember-bright: #E27B4F;

  --gild-rule:  rgba(169,132,47,.46);
  --gold-dim:   rgba(169,132,47,.14);

  --ok:         #56A87A;  --ok-dim:     rgba(86,168,122,.14);
  --warn:       #D4B143;  --warn-dim:   rgba(212,177,67,.14);
  --danger:     #DA6A5E;  --danger-dim: rgba(218,106,94,.14);
  --info:       #7A97C0;  --info-dim:   rgba(122,151,192,.14);
  --warn-wash:   rgba(227,194,75,.04);
  --danger-wash: rgba(218,106,94,.05);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --read:    "Newsreader", Georgia, serif;

  --n-ease: cubic-bezier(.22,.61,.36,1);
  --n-slow: cubic-bezier(.16,1,.3,1);
  --n-dur:  500ms;
}

/* ==================== 2 · TOKEN BRIDGE (design-system remap) ==================== */
/* Every var() the page consumes from design-system.css resolves to nocturne. */
:root {
  --bg: var(--night);
  --surface: var(--night-lift);
  --surface-hover: var(--night-high);
  --bg-raised: var(--night-lift);
  --border: var(--hairline);
  --border-hover: var(--cream-22);
  --text: var(--cream);
  --text-secondary: var(--cream-soft);
  --text-muted: var(--cream-faint);

  --font-serif: var(--display);
  --font-sans: var(--read);
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* fixes the known gap: var(--mono) is used 11x but was never defined */
  --mono: var(--font-mono);

  --color-success: var(--ok);
  --color-warning: var(--warn);
  --color-danger:  var(--danger);
  --color-info:    var(--info);

  --gold: #a9842f;
  --gold-lt: #c9a84c;

  /* legacy per-page accent: gold-lt for residual consumers; specific action
     surfaces are restyled below so gold never acts */
  --accent: var(--gold-lt);
  --accent-rgb: 201,168,76;

  /* neutralize glass */
  --glass-bg: var(--night-lift);
  --glass-border: var(--hairline);
  --glass-blur: 0px;
}

/* ============================ 3 · BASE ============================ */
body {
  /* design-system.css makes body a flex column for its sticky-footer pattern
     (.c-page-main/.c-page-anchor). The hub uses neither class, and flex-item
     cross-axis auto margins collapse every `margin:0 auto` section to
     content width — so restore normal block flow here. */
  display: block;
  background-color: var(--night);
  /* the one flame: masthead-top aura, whisper alpha */
  background-image: radial-gradient(110% 80% at 50% 0%, var(--ember-glow) 0%, transparent 55%);
  background-repeat: no-repeat;
  color: var(--cream-soft);
  font-family: var(--read);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  animation: none;
}
/* plaster grain over the night ground; pointer-transparent */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; opacity: .22;
}
::selection { background: var(--ember); color: var(--cream); }

/* global ember focus ring (a11y law) — beats the page's gold/blue rings */
:focus-visible,
*:focus-visible,
button:focus-visible, .tab-btn:focus-visible, .tbtn:focus-visible,
.card-open-link:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
  border-radius: 2px;
}

.n-skip {
  position: absolute; left: -999px; top: 0; z-index: 300;
  background: var(--cream); color: var(--night-lift);
  padding: .7rem 1.1rem; border-radius: 3px;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .08em;
  text-decoration: none;
}
.n-skip:focus { left: 1rem; top: 1rem; }

.n-fine { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  color: var(--cream-faint); }

.n-eyebrow {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cream-faint);
  display: inline-flex; align-items: center; gap: .6rem; margin: 0;
}
.n-eyebrow::before {
  content: ""; display: inline-block; flex: 0 0 auto;
  width: 26px; height: 1px; background: var(--gild-rule);
}

/* ============================ 4 · ENTRANCE ============================ */
/* one staggered fade-up on load replaces scroll-reveal / glow / parallax */
@keyframes n-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.n-reveal { opacity: 0; animation: n-rise var(--n-dur) var(--n-slow) forwards; }
.n-reveal[data-d="1"] { animation-delay: 0ms; }
.n-reveal[data-d="2"] { animation-delay: 75ms; }
.n-reveal[data-d="3"] { animation-delay: 150ms; }
.n-reveal[data-d="4"] { animation-delay: 225ms; }
.n-reveal[data-d="5"] { animation-delay: 300ms; }

/* neutralize legacy motion: cards render visible on load (below-fold black
   screenshot bug retired with the scroll observer). The :not(.n-reveal)
   guards keep these from beating the entrance animation above. */
.grid .agent-card { opacity: 1; transform: none; }
.grid .agent-card.revealed { transform: none; }
.grid-wrap { perspective: none; }
.grid { transform-style: flat; }
.hero:not(.n-reveal) { animation: none; }
.stats-bar:not(.n-reveal) { animation: none; }
.stats-bar .stat-val { animation: none; }


/* ============================ AUDIENCE VOICES ============================ */
/* One flame. The voice is a whisper: a <=6% aura tint behind the masthead
   region, nothing else. Default (no attr) = ops ember. */
body[data-voice] { position: relative; }
body[data-voice]::after {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 42vh;
  pointer-events: none; z-index: 0;
  background: radial-gradient(110% 80% at 50% 0%, var(--voice-aura, rgba(199,93,44,.05)) 0%, transparent 55%);
}
body[data-voice="client"]  { --voice-aura: rgba(169,132,47,.06); }  /* gild */
body[data-voice="student"] { --voice-aura: rgba(86,168,122,.06); }  /* sage */
body[data-voice="advisor"] { --voice-aura: rgba(122,151,192,.06); } /* info */
body[data-voice="ops"]     { --voice-aura: rgba(199,93,44,.05); }   /* ember */

/* footer motto — every surface signs the same sentence */
.nocturne-motto {
  font-family: var(--n-read, Georgia, serif); font-style: italic;
  font-size: .95rem; color: var(--n-cream-faint, rgba(244,240,231,.55));
}

/* ============================ 17 · REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
  .n-reveal { opacity: 1; animation: none; transform: none; }
  .agent-card, .agent-card:hover { transform: none; }
  .card-desc, .metric-line, .card-metrics .metric-line + .metric-line,
  .card-metrics .sparkline-wrap, .card-open, .card-arrow { transition: none; }
}