/* ============================================================================
   Trinetra concept-tutorial shared stylesheet.
   Mirrors the design tokens from /home/kali/Desktop/sizzle/sizzle-shared.jsx.
   Each lab page sets its --acc colour at the top of <style> and the rest of
   the system colour-adapts automatically.
   ============================================================================ */

:root{
  /* Surface */
  --bg0:#06090F; --bg1:#0B0F1A; --bg2:#11172A;
  --surface:#161C2D; --surface2:#1C2338;
  --border:rgba(255,255,255,.08); --borderStrong:rgba(255,255,255,.16);

  /* Text */
  --text0:#F4F6FB; --text1:#B8C0D4; --text2:#7A8398; --text3:#555E76;

  /* Per-discipline accents (one is picked as --acc per lab).
     CANONICAL brand hues — single source of truth in
     apps/web/lib/disciplines/config.ts (DISCIPLINE_ACCENTS):
       Defend/cyber → lime #9FEF00 · Code → blue #5BA9F9
       Market → emerald #34D399 · Model/ml → violet #A78BFA */
  --brand:#9FEF00;
  --code:#5BA9F9;   --code-glow:rgba(91,169,249,.45);
  --market:#34D399; --market-glow:rgba(52,211,153,.45);
  --ml:#A78BFA;     --ml-glow:rgba(167,139,250,.50);
  --cyber:#9FEF00;  --cyber-glow:rgba(159,239,0,.42);
  --info:#5BA9F9;   --info-glow:rgba(91,169,249,.45);
  --ok:#3DDC97;

  /* Defaults (per-page can override --acc / --acc-glow etc.) */
  --acc: var(--brand);
  --acc-glow: var(--brand-glow, rgba(159,239,0,.42));
  --acc-soft: rgba(159,239,0,.20);
  --acc-fade: rgba(159,239,0,.08);
  --acc-border: rgba(159,239,0,.36);

  --sans: var(--font-geist-sans), 'Geist', ui-sans-serif, system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-pop: cubic-bezier(.22,1.4,.36,1);
}

*{box-sizing:border-box}
html,body{margin:0; padding:0; min-height:100vh; background:var(--bg0); color:var(--text0); font-family:var(--sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
body{
  background:
    radial-gradient(ellipse 50% 60% at 78% 18%, var(--acc-glow), transparent 65%),
    radial-gradient(ellipse 40% 50% at 10% 90%, rgba(91,169,249,.14), transparent 60%),
    var(--bg0);
  overflow-x:hidden;
}
a{ color: var(--acc); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ── Grid background + orbs ── */
.grid-bg{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(159,239,0,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,239,0,.04) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 28%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, black 28%, transparent 80%);
  animation: gridDrift 24s linear infinite;
}
@keyframes gridDrift{ to{ background-position: 64px 64px, 64px 64px; } }
.orb{ position:fixed; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:0; }
.orb-a{ width:720px; height:720px; left:78%; top:14%; transform:translate(-50%,-50%); background:radial-gradient(circle, var(--acc-glow), transparent 60%); animation: drift1 14s ease-in-out infinite; }
.orb-b{ width:540px; height:540px; left:8%; top:88%; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(91,169,249,.28), transparent 60%); animation: drift2 18s ease-in-out infinite; }
@keyframes drift1{ 0%,100%{transform:translate(-50%,-50%)} 50%{transform:translate(-50%,-50%) translate(-30px,40px)} }
@keyframes drift2{ 0%,100%{transform:translate(-50%,-50%)} 50%{transform:translate(-50%,-50%) translate(40px,-30px)} }

/* ── Top bar (wordmark + chip) ── */
.topbar{
  position:sticky; top:0; z-index:30; height:60px;
  backdrop-filter: blur(10px); background:rgba(6,9,15,.6);
  border-bottom: 1px solid var(--border);
  display:flex; align-items:center; gap:22px; padding:0 28px;
}
.wm{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.wm-svg{ width:30px; height:30px; }
.wm-name{ font-weight:700; font-size:18px; letter-spacing:-0.02em; line-height:1; }
.wm-name .dot{ color: var(--acc); }
.wm-sub{ font-family:var(--mono); font-size:10px; letter-spacing:0.28em; color:var(--text3); text-transform:uppercase; margin-top:3px; }
.topbar-crumb{ font-family:var(--mono); font-size:11px; color:var(--text2); letter-spacing:0.18em; text-transform:uppercase; }
.topbar-crumb a{ color: var(--text2); text-decoration:none; }
.topbar-crumb a:hover{ color: var(--text0); }
.trackchip{
  margin-left:auto; display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px; border-radius:99px;
  background:rgba(11,15,26,.7); backdrop-filter:blur(10px);
  border:1px solid var(--acc-border);
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--acc);
  box-shadow: 0 0 0 1px var(--acc-soft), 0 0 24px var(--acc-glow);
}
.trackchip .pulse{ width:8px; height:8px; border-radius:50%; background:var(--acc); box-shadow:0 0 10px var(--acc); animation:chipPulse 1.6s ease-in-out infinite; }
@keyframes chipPulse{ 0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.35); opacity:.55} }

/* ── 4-step flow nav ── */
.flow-nav{
  position:sticky; top:60px; z-index:20;
  backdrop-filter: blur(10px); background:rgba(6,9,15,.45);
  border-bottom: 1px solid var(--border);
  padding: 14px 28px;
}
.flow-steps{
  max-width:1100px; margin: 0 auto;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.flow-step{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:10px;
  background: rgba(255,255,255,.02); border: 1px solid var(--border);
  text-decoration:none; color: var(--text2);
  font-family: var(--mono); font-size: 11.5px; letter-spacing:.16em; text-transform: uppercase;
  transition: all .25s var(--ease-out);
}
.flow-step:hover{ color: var(--text0); border-color: var(--acc-border); }
.flow-step.active{ color: var(--text0); border-color: var(--acc-border); background: var(--acc-fade); box-shadow: 0 0 0 1px var(--acc-soft); }
.flow-step.done{ color: var(--ok); border-color: rgba(61,220,151,.30); background: rgba(61,220,151,.05); }
.flow-step .num{
  width:24px; height:24px; border-radius:6px;
  display:grid; place-items:center; flex-shrink:0;
  background: var(--acc-soft); color: var(--acc); border: 1px solid var(--acc-border);
  font-family:var(--mono); font-size:10.5px; font-weight:700;
}
.flow-step.done .num{ background: rgba(61,220,151,.16); color: var(--ok); border-color: rgba(61,220,151,.40); }
.flow-step .label{ flex:1; }
.flow-step .check{ font-size:13px; }

/* ── Stage (page container) ── */
.stage{
  position:relative; z-index:1;
  max-width:1400px; margin: 32px auto 16px; padding: 24px 40px 24px;
}

/* ── SceneHeader (eyebrow + headline + sub) ── */
.eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.3em; text-transform:uppercase; color:var(--acc);
  margin-bottom:18px;
  animation: rise .55s var(--ease-out) both;
}
.eyebrow .box{
  width:30px; height:30px; border-radius:8px;
  background:var(--acc-soft); border:1px solid var(--acc-border);
  display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:12px; color:var(--acc);
}
.headline{
  font-family:var(--sans); font-weight:600;
  font-size:clamp(32px, 4.6vw, 56px);
  letter-spacing:-0.025em; line-height:1.05;
  color:var(--text0); margin:0; max-width:1100px;
  animation: rise .7s var(--ease-out) both;
}
.headline .accent{ color:var(--acc); }
.sub{
  margin:14px 0 0; max-width:840px;
  font-size:clamp(15px, 1.3vw, 20px); color:var(--text2);
  letter-spacing:-0.01em; line-height:1.5;
  animation: rise .85s var(--ease-out) .07s both;
}
@keyframes rise{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)} }

/* ── Lesson card (used for every block on every page) ── */
.lesson-card{
  border:1px solid var(--border); border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 30%), var(--bg1);
  overflow:hidden;
  animation: rise 1s var(--ease-out) .12s both;
}
.lesson-hdr{
  padding:16px 22px; display:flex; align-items:center; gap:12px;
  border-bottom:1px solid var(--border);
}
.lesson-hdr .lab{
  width:30px; height:30px; border-radius:8px;
  background:var(--acc-soft); border:1px solid var(--acc-border);
  display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:13px; color:var(--acc);
}
.lesson-hdr .title{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--acc);
}
.lesson-hdr .sub{
  margin: 0 0 0 auto !important;
  font-family:var(--mono); font-size:10.5px; color:var(--text3); letter-spacing:.15em; text-transform:uppercase;
  animation: none !important;
}
.lesson-body{ padding:22px; }

/* ── Bottom CTA bar (prev / next page in the flow) ── */
.flow-cta{
  position: sticky; bottom: 0; z-index: 15;
  background: linear-gradient(180deg, transparent 0%, rgba(6,9,15,.85) 35%, var(--bg0) 100%);
  padding: 28px 28px 24px;
  display:flex; justify-content:space-between; align-items:center; gap: 12px;
  max-width: 1400px; margin: 24px auto 0;
}
.cta-link{
  display:inline-flex; align-items:center; gap: 10px;
  padding: 12px 22px; border-radius: 99px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid var(--border); color: var(--text1); text-decoration:none;
  transition: all .25s var(--ease-out);
  background: rgba(11,15,26,.6); backdrop-filter: blur(8px);
}
.cta-link:hover:not([aria-disabled="true"]){ color: var(--text0); border-color: var(--acc-border); background: var(--acc-fade); }
.cta-link.primary{ color: var(--acc); border-color: var(--acc-border); background: var(--acc-fade); box-shadow: 0 0 0 1px var(--acc-soft), 0 0 24px var(--acc-glow); }
.cta-link.primary:hover{ background: var(--acc-soft); }
.cta-link[aria-disabled="true"]{ opacity: .35; cursor: not-allowed; }

/* ── Buttons ── */
.btn{
  appearance:none; background:transparent; border:1px solid var(--border); color:var(--text2);
  padding:9px 14px; border-radius:8px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; cursor:pointer;
  text-transform:uppercase; transition: all .2s var(--ease-out);
}
.btn:hover{ color:var(--text0); border-color: var(--acc-border); background:var(--acc-fade); }
.btn-primary{ color: var(--acc); border-color: var(--acc-border); background: var(--acc-fade); }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ── Mobile ── */
@media (max-width: 720px){
  .flow-steps{ grid-template-columns: 1fr 1fr; }
  .flow-step{ font-size: 10.5px; padding: 9px 11px; }
  .stage{ padding: 20px 16px; }
  .flow-cta{ flex-direction: column-reverse; }
}