/* =========================================================================
   TAXR — Design System
   Pulled from the Waddl3 visual language:
   deep navy-black canvas · bold serif display + periwinkle italic emphasis ·
   uppercase mono labels · royal-blue primary · mint-green success/live ·
   outlined pill badges · subtle dotted grid texture
   ========================================================================= */

:root {
  /* ---- Surfaces ---- */
  --bg:            #0a0e17;   /* deep navy-black canvas */
  --bg-2:          #0c1119;   /* alt section */
  --surface:       #11161f;   /* card */
  --surface-2:     #161c27;   /* raised card / hover */
  --surface-3:     #1c2330;   /* inputs, chips */
  --light:         #f5f3ee;   /* warm off-white section */
  --light-2:       #ebe8e1;

  /* ---- Lines ---- */
  --line:          rgba(255,255,255,0.09);
  --line-2:        rgba(255,255,255,0.14);
  --line-strong:   rgba(255,255,255,0.22);

  /* ---- Text ---- */
  --text:          #f4f6fa;
  --muted:         #9aa3b4;
  --dim:           #687085;
  --faint:         #474e5e;
  --on-light:      #1b2230;
  --on-light-mut:  #5a6373;

  /* ---- Accents (shared chroma, varied hue) ---- */
  --blue:          #3a6df0;   /* primary action */
  --blue-bright:   #5b85f5;
  --blue-soft:     rgba(58,109,240,0.14);
  --peri:          #93a6ff;   /* decorative serif italic */
  --peri-2:        #b9c6ff;
  --green:         #46d6a4;   /* live / correct / progress */
  --green-soft:    rgba(70,214,164,0.13);
  --amber:         #e7b35c;   /* hints / fish token */
  --amber-soft:    rgba(231,179,92,0.14);
  --wrong:         #f0846a;
  --wrong-soft:    rgba(240,132,106,0.13);

  /* ---- Theme-driven neutrals (overridden by light themes) ---- */
  --ink:           #d7dbe4;   /* rich body copy */
  --track:         rgba(255,255,255,0.08);
  --tex:           rgba(255,255,255,0.05);
  --nav-bg:        rgba(10,14,23,0.85);

  /* ---- Type ---- */
  --serif:  "Newsreader", Georgia, "Times New Roman", serif;
  --sans:   "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono:   "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* ---- Shadow ---- */
  --shadow:    0 18px 50px -20px rgba(0,0,0,0.7);
  --shadow-lg: 0 40px 90px -30px rgba(0,0,0,0.8);

  --maxw: 1180px;
}

/* ============================ LIGHT THEME · Cream & Blue ============================ */
[data-theme="cream"] {
  --bg:#f4eee1; --bg-2:#ece3d2; --surface:#fffdf8; --surface-2:#f7f0e3; --surface-3:#ece3d2;
  --light:#fffdf8; --light-2:#f0e8d8;
  --line:rgba(43,33,12,0.12); --line-2:rgba(43,33,12,0.18); --line-strong:rgba(43,33,12,0.30);
  --text:#1c2230; --muted:#5b6373; --dim:#8a8270; --faint:#b3a997; --ink:#2b3340;
  --on-light:#1c2230; --on-light-mut:#5b6373;
  --blue:#2f63e6; --blue-bright:#3f6eea; --blue-soft:rgba(47,99,230,0.10);
  --peri:#4a5fd0; --peri-2:#6f83df;
  --green:#1f9d6b; --green-soft:rgba(31,157,107,0.12);
  --amber:#a9761d; --amber-soft:rgba(169,118,29,0.13);
  --wrong:#d2553a; --wrong-soft:rgba(210,85,58,0.10);
  --track:rgba(28,34,48,0.10); --tex:rgba(43,33,12,0.06);
  --nav-bg:rgba(247,241,231,0.82);
  --shadow:0 18px 50px -24px rgba(70,55,25,0.30); --shadow-lg:0 40px 90px -34px rgba(70,55,25,0.34);
}

/* ============================ LIGHT THEME · Forest & Off-white ============================ */
[data-theme="forest"] {
  --bg:#eef3e8; --bg-2:#e4ebd9; --surface:#fbfdf7; --surface-2:#edf2e4; --surface-3:#e5ecd9;
  --light:#fbfdf7; --light-2:#e8efdc;
  --line:rgba(22,40,24,0.12); --line-2:rgba(22,40,24,0.18); --line-strong:rgba(22,40,24,0.30);
  --text:#16271d; --muted:#54604f; --dim:#7e8a72; --faint:#a7b199; --ink:#26342a;
  --on-light:#16271d; --on-light-mut:#54604f;
  --blue:#1f8a5b; --blue-bright:#239763; --blue-soft:rgba(31,138,91,0.12);
  --peri:#2f8f7a; --peri-2:#4fa892;
  --green:#1f8a5b; --green-soft:rgba(31,138,91,0.13);
  --amber:#a9761d; --amber-soft:rgba(169,118,29,0.13);
  --wrong:#cf5639; --wrong-soft:rgba(207,86,57,0.10);
  --track:rgba(22,39,29,0.10); --tex:rgba(22,40,24,0.06);
  --nav-bg:rgba(240,244,236,0.82);
  --shadow:0 18px 50px -24px rgba(30,50,30,0.28); --shadow-lg:0 40px 90px -34px rgba(30,50,30,0.34);
}

/* ========================= reset ========================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* NOTE: do NOT transition background here. The theme palette is delivered
     via var(--bg); transitioning a var-driven background freezes it on the
     pre-switch value in some engines. Snap the background, ease only color. */
  transition: color .3s ease;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
/* keep a crisp focus ring for keyboard users, but don't leave a mouse-click
   ring lingering on top of answer-state borders (quiz options etc.) */
button:focus { outline: none; }
button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: rgba(58,109,240,0.35); color: #fff; }

/* dotted-grid texture used on dark sections */
.grid-tex {
  background-image: radial-gradient(var(--tex) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: -13px -13px;
}
.grid-lines {
  background-image:
    linear-gradient(var(--tex) 1px, transparent 1px),
    linear-gradient(90deg, var(--tex) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ========================= typography ========================= */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: none; }
.eyebrow.green .dot { background: var(--green); }

.display {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.018em;
  color: var(--text);
}
.display .it {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(180deg, var(--peri-2), var(--peri));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* extend the clipped-gradient box so italic descenders/overhang aren't cut */
  padding-bottom: 0.12em;
  padding-right: 0.04em;
}
.serif { font-family: var(--serif); font-weight: 600; letter-spacing: -0.012em; }
.serif-it { font-family: var(--serif); font-style: italic; font-weight: 500; }

.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* ========================= layout ========================= */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.section { padding: 96px 0; }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}.gap-32{gap:32px}
.spread { justify-content: space-between; }
.center { align-items: center; justify-content: center; }
.wrap-flex { flex-wrap: wrap; }

/* ========================= badges / pills ========================= */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--muted);
  background: rgba(255,255,255,0.02);
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; }
.badge.green { color: var(--green); border-color: rgba(70,214,164,0.4); }
.badge.green .dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.badge.blue  { color: var(--blue-bright); border-color: rgba(91,133,245,0.45); }
.badge.amber { color: var(--amber); border-color: rgba(231,179,92,0.42); background: var(--amber-soft); }
.badge.lock  { color: var(--dim); border-color: var(--line); }
.badge.solid-green { background: var(--green-soft); color: var(--green); border-color: transparent; }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,0.015);
  color: var(--muted); font-size: 14px; white-space: nowrap;
  transition: border-color .18s, color .18s, background-color .18s;
}
.chip:hover { border-color: var(--line-strong); color: var(--text); }

/* ========================= buttons ========================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 15px; font-weight: 600;
  padding: 13px 22px; border-radius: 11px;
  border: 1px solid transparent;
  transition: transform .12s ease, background-color .18s, border-color .18s, box-shadow .18s, opacity .18s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn .arr { transition: transform .18s; }
.btn:hover .arr { transform: translateX(3px); }

.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 10px 26px -12px var(--blue); }
.btn-primary:hover { background: var(--blue-bright); }
.btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--line-strong); background: var(--surface-3); }
.btn-quiet { background: transparent; color: var(--muted); }
.btn-quiet:hover { color: var(--text); }
.btn-green { background: var(--green); color: #06241a; box-shadow: 0 10px 26px -12px var(--green); }
.btn-green:hover { filter: brightness(1.06); }
.btn-sm { padding: 9px 15px; font-size: 13.5px; border-radius: 9px; }
.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ========================= cards ========================= */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  position: relative;
}
.card-hover { transition: border-color .18s, transform .18s, background-color .18s; }
.card-hover:hover { border-color: var(--line-strong); transform: translateY(-3px); background: var(--surface-2); }
.card-pad { padding: 26px; }

/* window mock (traffic lights) — always a dark "product screenshot", so it
   scopes the dark palette locally and stays consistent in every theme */
.win {
  --surface: #11161f; --surface-2: #161c27; --surface-3: #1c2330;
  --text: #f4f6fa; --muted: #9aa3b4; --dim: #687085; --faint: #474e5e; --ink: #d7dbe4;
  --line: rgba(255,255,255,0.09); --line-2: rgba(255,255,255,0.14); --line-strong: rgba(255,255,255,0.22);
  --blue-bright: #5b85f5; --blue-soft: rgba(58,109,240,0.14);
  --green: #46d6a4; --green-soft: rgba(70,214,164,0.13);
  --track: rgba(255,255,255,0.08);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: linear-gradient(180deg, #11161f, #0d121b);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  color: var(--text);
}
.win-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.015);
}
.win-dot { width: 11px; height: 11px; border-radius: 50%; }
.win-url {
  margin-left: 10px; font-family: var(--mono); font-size: 12px; color: var(--dim);
}

/* ========================= progress ========================= */
.track { height: 7px; border-radius: 999px; background: var(--track); overflow: hidden; }
.track .fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--peri));
  transition: width .5s cubic-bezier(.2,.7,.3,1);
}
.track.green .fill { background: linear-gradient(90deg, var(--green), #7ee6c4); }
.track.thin { height: 5px; }

/* ring progress */
.ring { transform: rotate(-90deg); }
.ring .bg { stroke: var(--track); }
.ring .fg { stroke: var(--green); stroke-linecap: round; transition: stroke-dashoffset .6s; }

/* ========================= inputs ========================= */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dim);
}
.input {
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--r); padding: 13px 15px; font-size: 15px; color: var(--text);
  transition: border-color .18s, background-color .18s;
}
.input::placeholder { color: var(--faint); }
.input:focus { outline: none; border-color: var(--blue); background: #1a2230; }

/* ========================= stat block ========================= */
.stat .num { font-family: var(--serif); font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: -0.02em; }
.stat .lab { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-top: 8px; }

/* divider */
.hr { height: 1px; background: var(--line); border: 0; }
.vr { width: 1px; align-self: stretch; background: var(--line); }

/* numbered step */
.stepno {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  border: 1px solid var(--line-2); color: var(--blue-bright);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; letter-spacing: .05em;
}

/* entrance: a one-shot rise triggered by JS class so the resting state is the
   true, fully-visible position (captures cleanly, never frozen-hidden) */
@keyframes fadeUp { from { transform: translateY(14px); } to { transform: none; } }
.fade-up.in { animation: fadeUp .55s cubic-bezier(.2,.7,.3,1) both; }
@keyframes pop { from { transform: scale(.97); } to { transform: none; } }
.pop { animation: pop .22s ease both; }

/* scrollbars */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: #232b39; border-radius: 999px; border: 3px solid var(--bg); }
*::-webkit-scrollbar-track { background: transparent; }

/* utility text colors / sizes */
.t-muted{color:var(--muted)} .t-dim{color:var(--dim)} .t-green{color:var(--green)}
.t-blue{color:var(--blue-bright)} .t-peri{color:var(--peri)} .t-amber{color:var(--amber)}
.t-wrong{color:var(--wrong)}
.fs-13{font-size:13px}.fs-14{font-size:14px}.fs-15{font-size:15px}.fs-17{font-size:17px}.fs-19{font-size:19px}
.lh-rel{line-height:1.7}
.upper{text-transform:uppercase;letter-spacing:.16em}

/* theme swatch control */
.swatch { width:22px; height:22px; border-radius:50%; cursor:pointer; padding:0; border:2px solid transparent; transition:border-color .15s, transform .12s; }
.swatch:hover { transform:scale(1.08); }
.swatch.on { border-color: var(--blue); }

/* ============================ MOBILE — keep the desktop layout workable ============================ */
.hide-mobile { }
@media (max-width: 900px) {
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }
  /* stack any multi-column inline grid into one column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .section { padding: 60px 0 !important; }
  .vr { display: none; }
  .hide-mobile { display: none !important; }
  /* lesson reader: sidebar stacks above content */
  .lesson-shell { flex-direction: column !important; gap: 24px !important; }
  .lesson-side { position: static !important; width: 100% !important; top: auto !important; }
  .win { width: 100% !important; }
}
@media (max-width: 620px) {
  .wrap { padding-left: 15px !important; padding-right: 15px !important; }
  .display { font-size: 33px !important; line-height: 1.07 !important; }
  h1.display { font-size: 36px !important; }
  .section { padding: 46px 0 !important; }
  .stat .num { font-size: 30px !important; }
  .card-pad { padding: 20px !important; }
  /* wrap the landing stat strip instead of cramming 5 across */
  .stat-strip { flex-wrap: wrap !important; gap: 22px 0 !important; }
  .stat-strip .stat { flex: 0 0 33.33% !important; }
}

/* ============================ PRINT — certificate only ============================ */
@media print {
  body { background: #fff !important; }
  body * { visibility: hidden !important; }
  #taxr-cert, #taxr-cert * { visibility: visible !important; }
  #taxr-cert { position: absolute !important; left: 0; top: 0; width: 100%; box-shadow: none !important; opacity: 1 !important; }
}