/* ============================================================
   Build & Reason, AI Fundamentals  ·  base.css
   Brand tokens, neumorphic system, page shell, topbar, landing.
   Visual system: warm cream, neumorphic elevation, brand-blue accent.
   Type set large + high-contrast for a 45–75 executive audience.

   NOTE: the designer "Tweaks" panel (React) was removed for the
   production static site. Its chosen values are baked in below:
     accent intensity 55% → --accent-presence: 0.55
     neumorphism      65% → --neu-d/-b/-light/-dark (computed once)
     tile grid        on  → body tiles on by default (.no-tiles opts out)
   ============================================================ */

:root{
  /*, , Brand palette (from B&R design system), , */
  --bg:            #F3F1EC;   /* warm cream, never pure white */
  --bg-sunk:       #ECE9E1;   /* slightly deeper cream for inset wells */
  --fg:            #0B0D10;   /* near-black, blue-leaning */
  --fg-muted:      #4A4F5B;   /* darkened from DS #5A5F6B for extra contrast */
  --fg-faint:      #8A909C;   /* metadata */
  --line:          #D4D6DB;   /* dividers, inactive */
  --hair:          #E2E0D9;   /* inner hairlines on cream */
  --accent:        #153BFF;   /* brand blue, accent ONLY */
  --accent-deep:   #0F2BCC;
  --accent-tint:   #E4E8FF;   /* pale blue wash for fills */
  --accent-tint-2: #D4DAFF;
  --good:          #1F6B47;
  --good-tint:     #E4EFE8;
  --warn:          #8A5A12;
  --warn-tint:     #F4ECDC;
  --bad:           #B42318;   /* wrong-answer red, muted to suit the cream palette */
  --bad-tint:      #F7E4E1;

  /*, , Type, , */
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;

  /*, , Neumorphism (baked from the 65% tweak default), , */
  --neu-d: 3.28px;                       /* shadow offset distance */
  --neu-b: 8.85px;                       /* shadow blur */
  --neu-light: rgba(255,255,252,0.810);  /* top-left highlight */
  --neu-dark:  rgba(157,164,176,0.401);  /* bottom-right shadow */
  --neu-raised:
    calc(-1 * var(--neu-d)) calc(-1 * var(--neu-d)) var(--neu-b) var(--neu-light),
    var(--neu-d) var(--neu-d) var(--neu-b) var(--neu-dark);
  --neu-raised-lg:
    calc(-2 * var(--neu-d)) calc(-2 * var(--neu-d)) calc(2 * var(--neu-b)) var(--neu-light),
    calc(1.6 * var(--neu-d)) calc(1.6 * var(--neu-d)) calc(2 * var(--neu-b)) var(--neu-dark);
  --neu-inset:
    inset calc(-1 * var(--neu-d) * 0.6) calc(-1 * var(--neu-d) * 0.6) calc(var(--neu-b) * 0.7) var(--neu-light),
    inset var(--neu-d) var(--neu-d) calc(var(--neu-b) * 0.8) var(--neu-dark);

  /*, , Accent presence (baked from the 55% tweak default), , */
  --accent-presence: 0.55;

  /*, , Motion, , */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --in: 0.18s;
  --out: 1.1s;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --maxw: 1080px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:var(--font-body);
  color:var(--fg);
  background:var(--bg);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:clamp(16px, 3vw, 40px);
}
::selection{ background:var(--accent); color:var(--bg); }

/* The whole page sits on the brand tile grid */
body{
  background-image:
    repeating-linear-gradient(90deg, var(--tile-line, rgba(178,182,190,0.22)) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  var(--tile-line, rgba(178,182,190,0.22)) 0 1px, transparent 1px 56px);
  background-size:56px 56px;
  background-attachment:fixed;
}
body.no-tiles{ background-image:none; }

/* ---------- shell ---------- */
.shell{ width:min(var(--maxw), 100%); position:relative; z-index:1; }

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:2px 4px 18px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; }
.logomark{ width:34px; height:34px; flex:none; display:block; }
.wordmark{ display:flex; flex-direction:column; line-height:1.15; }
.wordmark b{
  font-family:var(--font-mono); font-weight:700; font-size:15px;
  letter-spacing:0.08em; color:var(--fg);
}
.wordmark span{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em;
  color:var(--fg-faint); margin-top:4px; text-transform:uppercase;
}
.modtag{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.16em;
  color:var(--fg-muted); font-weight:700; text-transform:uppercase;
  background:var(--bg); border-radius:var(--radius-sm);
  box-shadow:var(--neu-raised); padding:10px 16px; white-space:nowrap;
}
/* topbar can hold a back-link + tag together */
.topbar .topbar-right{ display:flex; align-items:center; gap:12px; }
.backlink{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; font-weight:700;
  text-transform:uppercase; color:var(--fg-muted); text-decoration:none;
  background:var(--bg); box-shadow:var(--neu-raised); border-radius:var(--radius-sm);
  padding:10px 14px; display:inline-flex; align-items:center; gap:8px;
  transition:transform var(--in) var(--ease), box-shadow var(--out) var(--ease);
}
.backlink:hover{ transform:translateY(-2px); box-shadow:var(--neu-raised-lg); color:var(--accent); }
.backlink .arr{ color:var(--accent); }

/* standalone square (1:1) replay button, top-right of the player */
.replay-fab{
  width:50px; height:50px; flex:none; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--bg); border:none; border-radius:var(--radius-sm); cursor:pointer;
  box-shadow:0 6px 18px -8px rgba(21,59,255,0.5), var(--neu-raised);
  transition:transform var(--in) var(--ease), box-shadow var(--out) var(--ease), background var(--in);
}
.replay-fab:hover{ background:var(--accent-deep); transform:translateY(-2px); box-shadow:var(--neu-raised-lg); }
.replay-fab:active{ box-shadow:var(--neu-inset); transform:none; }
.replay-fab .ico{ width:22px; height:22px; display:block; }

/* ============================================================
   LANDING PAGE, course overview + 8-module grid
   ============================================================ */
.landing{ width:min(var(--maxw), 100%); position:relative; z-index:1; }
.hero{
  text-align:left; max-width:62ch; margin:clamp(20px,5vw,56px) 0 clamp(28px,5vw,52px);
}
.hero .kicker{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
  font-weight:700; color:var(--accent); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.hero h1{
  font-weight:300; color:var(--fg); line-height:1.05; letter-spacing:-0.03em;
  font-size:clamp(38px, 6.4vw, 60px);
}
.hero h1 b{ font-weight:600; color:var(--accent); }
/* blue highlighter marker (matches the player's .marker) */
.marker{ background:var(--accent); color:var(--bg); padding:0 10px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
/* landing "8 modules" tag: blue with white text */
.landing .modtag{ background:var(--accent); color:var(--bg); box-shadow:0 6px 18px -8px rgba(21,59,255,0.5), var(--neu-raised); }
.hero .lede{
  font-size:clamp(18px, 2.4vw, 23px); color:var(--fg-muted); line-height:1.5; font-weight:300;
  margin-top:22px; max-width:52ch;
}
.hero .meta{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.06em; color:var(--fg-faint);
  margin-top:22px; text-transform:uppercase;
}

.module-grid{
  display:grid; gap:clamp(14px, 2vw, 20px);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  margin-bottom:48px;
}
.mcard{
  position:relative; display:flex; flex-direction:column; min-height:180px;
  background:var(--bg); box-shadow:var(--neu-raised); border-radius:var(--radius);
  padding:22px 22px 20px; text-decoration:none; color:inherit;
  transition:transform var(--in) var(--ease), box-shadow var(--out) var(--ease);
}
.mcard.live:hover, .mcard.live:focus-visible{
  transform:translateY(-4px); box-shadow:var(--neu-raised-lg); outline:none;
}
.mcard.live:focus-visible{ box-shadow:inset 0 0 0 2px var(--accent), var(--neu-raised-lg); }
.mcard .mnum{
  font-family:var(--font-mono); font-weight:700; font-size:13px; letter-spacing:0.14em;
  color:var(--accent); text-transform:uppercase;
}
.mcard .mtitle{ font-size:22px; font-weight:600; color:var(--fg); letter-spacing:-0.01em; margin:10px 0 8px; line-height:1.2; }
.mcard .mseg{ font-size:15px; color:var(--fg-muted); line-height:1.45; }
.mcard .mfoot{
  margin-top:auto; padding-top:16px; display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700;
}
.mcard .mstatus{ display:inline-flex; align-items:center; gap:7px; color:var(--fg-faint); }
.mcard .mstatus::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--fg-faint); flex:none; }
.mcard .mgo{ color:var(--accent); }
.mcard .mgo .arr{ transition:transform var(--in) var(--ease); display:inline-block; }
.mcard.live:hover .mgo .arr{ transform:translateX(4px); }

/* live module */
.mcard.live .mstatus{ color:var(--good); }
.mcard.live .mstatus::before{ background:var(--good); animation:livePulse 2s ease-out infinite; }
@keyframes livePulse{
  0%   { box-shadow:0 0 0 0 rgba(31,107,71,0.5); }
  70%  { box-shadow:0 0 0 8px rgba(31,107,71,0); }
  100% { box-shadow:0 0 0 0 rgba(31,107,71,0); }
}

/* coming-soon modules: inset/sunk, muted, non-interactive */
.mcard.soon{
  background:var(--bg-sunk); box-shadow:var(--neu-inset); cursor:default;
}
.mcard.soon .mtitle, .mcard.soon .mseg{ color:var(--fg-faint); }
.mcard.soon .mnum{ color:var(--fg-faint); }
.mcard.soon .mgo{ display:none; }

.landing-foot{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--fg-faint); border-top:1px solid var(--hair); padding-top:20px; margin-bottom:24px;
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; justify-content:space-between;
}
.landing-foot a{ color:var(--fg-muted); text-decoration:none; }
.landing-foot a:hover{ color:var(--accent); }

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--fg); color:var(--bg); padding:12px 18px; border-radius:0 0 var(--radius-sm) 0;
  font-weight:600;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

/* Reduced motion, OS preference AND the in-UI toggle (body.reduced-motion) */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; animation-iteration-count:1 !important; }
}
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after{
  animation-duration:0.001ms !important; transition-duration:0.001ms !important; animation-iteration-count:1 !important;
}