/* ============================================================================
   MOIRAI: design tokens, locked from the approved avatar/banner art
   (3D dimensional coin mark: deep navy rim, flat corporate blue field,
   three thread colors: gold / coral / cream), plus ui-ux-pro-max's
   "Real-Time / Operations" dark-mode read on top of it.
   Sampled off assets/banner.png and assets/avatar.png directly (see build log).
   ========================================================================= */
:root {
  /* --- color: structural dark --- */
  --bg-void:        #05081C;  /* page base, darker than the art for terminal depth */
  --bg-panel:       #0D1240;  /* panel surface */
  --bg-panel-alt:   #121A52;  /* hover / secondary surface */
  --border-hair:    #232C66;  /* hairline panel borders */
  --navy-rim:       #0B2C80;  /* the coin's own rim navy, used for deep accents */

  /* --- color: brand accent (banner's flat blue field) --- */
  --blue-accent:    #0A6EEC;
  --blue-accent-dim:#0A6EEC55;

  /* --- color: the three threads (avatar's segments) --- */
  --gold:           #F5B75E;  /* SPIN */
  --coral:          #F16C55;  /* MEASURE */
  --cream:          #E7E4D9;  /* CUT + primary text-on-dark */

  /* --- text --- */
  --text-primary:   #F3F1E9;
  --text-dim:       #8A92C4;
  --text-faint:     #545D8F;

  /* --- type: 3 real webfonts, bundled locally (see assets/fonts) --- */
  --font-display: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Sora', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Fira Code', 'SFMono-Regular', Consolas, monospace;

  /* --- type scale --- */
  --fs-display: clamp(2.75rem, 6.4vw, 4.75rem);
  --fs-h2:      clamp(1.5rem, 2.6vw, 2rem);
  --fs-h3:      1.125rem;
  --fs-body:    1rem;
  --fs-small:   0.8125rem;
  --fs-mono:    0.8125rem;

  /* --- spacing scale (px) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* --- shape --- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-pill: 999px;

  /* --- motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-pipeline: 3.6s;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: 52px; /* room for fixed status bar */
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: -0.01em; }
.mono { font-family: var(--font-mono); font-feature-settings: "liga" 0; }

/* subtle structural backdrop: a faint radial field echoing the banner's flat
   blue, never a generic purple-blue hero gradient: this one is a single
   brand hue at low opacity, fixed, not decorative noise */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 500px at 82% -10%, var(--blue-accent-dim), transparent 60%),
    radial-gradient(ellipse 700px 500px at 0% 100%, #0B2C8033, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- error catcher banner (populated by app.js) ---------- */
#boot-error {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: #6E1414; color: #FFEDEA;
  font-family: var(--font-mono); font-size: 13px;
  padding: 10px 16px; border-bottom: 2px solid #F16C55;
}

/* ---------- ticker strip ---------- */
.ticker-strip {
  position: relative; z-index: 1;
  width: 100%; height: 34px;
  background: var(--navy-rim);
  border-bottom: 1px solid var(--border-hair);
  overflow: hidden;
  display: flex; align-items: center;
}
.ticker-track {
  display: flex; align-items: center;
  white-space: nowrap;
  animation: ticker-scroll 32s linear infinite;
  will-change: transform;
}
.ticker-strip:hover .ticker-track,
.ticker-strip:focus-within .ticker-track { animation-play-state: paused; }
.ticker-item {
  font-family: var(--font-mono); font-size: var(--fs-mono);
  color: var(--cream); opacity: 0.92;
  padding: 0 var(--sp-5);
  display: inline-flex; align-items: center; gap: 8px;
  border-right: 1px solid #ffffff1a;
}
.ticker-item .tk-up { color: #7FE0A8; }
.ticker-item .tk-down { color: #F16C55; }
.ticker-item .tk-sym { color: var(--text-dim); }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- nav ---------- */
.nav {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--border-hair);
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 34px; height: 34px; border-radius: 50%; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.01em; }
.nav-links { display: flex; gap: var(--sp-6); list-style: none; margin: 0; padding: 0; }
.nav-links a {
  text-decoration: none; color: var(--text-dim); font-size: 0.9rem; font-weight: 500;
  transition: color 0.2s var(--ease-out);
}
.nav-links a:hover { color: var(--text-primary); }
.nav-actions { display: flex; align-items: center; gap: var(--sp-3); }
.icon-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: transparent; border: 1px solid var(--border-hair);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px; transition: border-color 0.2s var(--ease-out), transform 0.15s var(--ease-out);
}
.icon-btn:hover { border-color: var(--blue-accent); transform: translateY(-1px); }
.icon-btn img { width: 100%; height: 100%; object-fit: contain; }
.buy-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue-accent); color: #ffffff;
  border: none; border-radius: var(--radius-pill);
  padding: 9px 18px 9px 10px; font-weight: 700; font-size: 0.9rem;
  transition: transform 0.15s var(--ease-out), box-shadow 0.2s var(--ease-out);
  box-shadow: 0 0 0 0 var(--blue-accent-dim);
}
.buy-btn img { width: 22px; height: 22px; }
.buy-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px -6px var(--blue-accent); }

@media (max-width: 640px) {
  .nav-links { display: none; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; z-index: 1;
  max-width: 900px;
  padding: var(--sp-8) var(--sp-6) var(--sp-7);
}
.eyebrow {
  color: var(--gold);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 10px 1px var(--gold);
}
.hero h1 {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.04;
  color: var(--text-primary);
  margin-bottom: var(--sp-5);
}
.hero .lede {
  font-size: 1.1rem; line-height: 1.6;
  color: var(--text-dim);
  max-width: 620px;
  margin-bottom: var(--sp-6);
}
.hero-stats {
  display: flex; gap: var(--sp-7); flex-wrap: wrap;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-hair);
}
.hero-stat .stat-val {
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; color: var(--cream);
  display: block;
}
.hero-stat .stat-label {
  font-size: 0.75rem; color: var(--text-faint); letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------- panels (shared) ---------- */
.panel {
  position: relative; z-index: 1;
  max-width: 1180px;
  margin: 0 auto var(--sp-8);
  padding: 0 var(--sp-6);
}
.panel-inner {
  background: var(--bg-panel);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.panel-head h2 {
  font-size: var(--fs-h2); font-weight: 800;
}
.badge {
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); border: 1px solid var(--border-hair);
  border-radius: var(--radius-pill); padding: 5px 12px;
}
.replay-btn {
  background: transparent; color: var(--cream);
  border: 1px solid var(--border-hair); border-radius: var(--radius-pill);
  padding: 8px 16px; font-size: 0.8rem; letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 8px;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.replay-btn:hover { border-color: var(--blue-accent); color: #fff; }
.replay-btn:active { transform: translateY(1px); }

/* ---------- pipeline diagram ---------- */
.pipeline-stage-wrap {
  position: relative;
  height: 220px;
  margin-bottom: var(--sp-2);
}
.pipeline-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.thread-path {
  fill: none; stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
}
.thread-gold  { stroke: var(--gold); }
.thread-coral { stroke: var(--coral); }
.thread-cream { stroke: var(--cream); }
.pipeline-stage-wrap.playing .thread-path {
  animation: thread-draw var(--dur-pipeline) var(--ease-out) forwards;
}
.pipeline-stage-wrap.playing .thread-coral { animation-delay: 0.12s; }
.pipeline-stage-wrap.playing .thread-cream { animation-delay: 0.24s; }
@keyframes thread-draw { to { stroke-dashoffset: 0; } }

.zone-divider { stroke: var(--border-hair); stroke-width: 1; stroke-dasharray: 3 5; }

.stage-node circle.node-ring {
  fill: var(--bg-panel); stroke: var(--border-hair); stroke-width: 2;
  transition: stroke 0.4s var(--ease-out);
}
.stage-node circle.node-dot { fill: var(--text-faint); transition: fill 0.4s var(--ease-out); }
.stage-node.active circle.node-ring { stroke: var(--stage-color, var(--blue-accent)); }
.stage-node.active circle.node-dot { fill: var(--stage-color, var(--blue-accent)); }
.stage-node.active circle.node-ring {
  animation: node-pulse 1.6s var(--ease-out) infinite;
}
@keyframes node-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 var(--stage-color, transparent)); }
  50% { filter: drop-shadow(0 0 7px var(--stage-color, transparent)); }
}

.blade {
  position: absolute; top: 6%; bottom: 6%; width: 3px;
  left: 82%;
  background: linear-gradient(var(--cream), var(--coral));
  opacity: 0; transform: scaleY(0);
  transform-origin: top;
  box-shadow: 0 0 14px 1px var(--cream);
}
.pipeline-stage-wrap.stage-cut .blade {
  animation: blade-cut 0.5s var(--ease-out) forwards;
}
@keyframes blade-cut {
  0% { opacity: 0; transform: scaleY(0); }
  30% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

.finalized-mark {
  position: absolute; right: 2%; top: 50%;
  width: 64px; height: 64px;
  transform: translate(0, -50%) scale(0.4);
  opacity: 0;
  transition: none;
}
.pipeline-stage-wrap.done .finalized-mark {
  animation: mark-reveal 0.6s var(--ease-out) forwards;
}
@keyframes mark-reveal {
  0% { opacity: 0; transform: translate(0,-50%) scale(0.3) rotate(-30deg); }
  70% { opacity: 1; transform: translate(0,-50%) scale(1.12) rotate(4deg); }
  100% { opacity: 1; transform: translate(0,-50%) scale(1) rotate(0); }
}

.stage-labels {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-hair);
}
.stage {
  border-left: 2px solid var(--border-hair);
  padding-left: var(--sp-4);
  transition: border-color 0.4s var(--ease-out);
}
.stage.active { border-left-color: var(--stage-color, var(--blue-accent)); }
.stage-no {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-faint);
  display: block; margin-bottom: 4px;
}
.stage-name {
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  display: block; margin-bottom: 6px; color: var(--text-primary);
}
.stage p { margin: 0; font-size: 0.85rem; color: var(--text-dim); line-height: 1.5; }
.stage-readout {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-faint);
  margin-top: 6px; min-height: 1em;
}

/* ---------- feed log ---------- */
.log-list { display: flex; flex-direction: column; }
.log-row {
  display: grid;
  grid-template-columns: 130px 90px 1fr 90px 110px;
  gap: var(--sp-4);
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-hair);
  font-family: var(--font-mono); font-size: 0.8rem;
  animation: row-in 0.4s var(--ease-out);
}
.log-row:last-child { border-bottom: none; }
.log-row .lg-time { color: var(--text-faint); }
.log-row .lg-sym { color: var(--cream); font-weight: 600; }
.log-row .lg-detail { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-row .lg-quorum { color: var(--text-dim); }
.log-row .lg-status { color: #7FE0A8; text-align: right; }
@keyframes row-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 720px) {
  .log-row { grid-template-columns: 1fr 1fr; row-gap: 2px; font-size: 0.72rem; }
  .log-row .lg-detail { grid-column: 1 / -1; white-space: normal; }
  .log-row .lg-status { text-align: left; }
}

/* ---------- footer / status bar ---------- */
.status-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: #030512; border-top: 1px solid var(--border-hair);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-5); height: 44px;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim);
  overflow-x: auto; white-space: nowrap;
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #7FE0A8;
  box-shadow: 0 0 8px 1px #7FE0A8; flex: none;
  animation: status-blink 2.4s ease-in-out infinite;
}
@keyframes status-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.status-bar .sep { color: var(--text-faint); }
.ca-group { display: inline-flex; align-items: center; gap: 8px; }
.ca-value { color: var(--cream); letter-spacing: 0.01em; }
.copy-btn {
  width: 28px; height: 28px; border: none; background: transparent; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  transition: transform 0.15s var(--ease-out);
}
.copy-btn:hover { transform: scale(1.08); }
.copy-btn img { width: 100%; height: 100%; }
.copy-toast {
  color: #7FE0A8; opacity: 0; transition: opacity 0.2s var(--ease-out);
}
.copy-toast.show { opacity: 1; }

/* ---------- footer credit ---------- */
.credit {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto; padding: 0 var(--sp-6) var(--sp-7);
  color: var(--text-faint); font-size: 0.78rem;
}

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .panel { padding: 0 var(--sp-4); }
  .panel-inner { padding: var(--sp-4); }
  .hero { padding: var(--sp-7) var(--sp-4) var(--sp-6); }
  .stage-labels { grid-template-columns: 1fr; gap: var(--sp-4); }
  .pipeline-stage-wrap { height: 260px; }
  .finalized-mark { width: 48px; height: 48px; right: 4%; }
  .blade { left: 80%; }
  .status-bar { font-size: 0.7rem; gap: var(--sp-3); padding: 0 var(--sp-3); }
}

/* ---------- reduced motion: land on the finished, trustworthy state ---------- */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .thread-path { animation: none !important; stroke-dashoffset: 0; }
  .blade { animation: none !important; }
  .finalized-mark { animation: none !important; opacity: 1; transform: translate(0,-50%) scale(1); }
  .stage-node circle.node-ring { animation: none !important; }
  .log-row { animation: none; }
}