/* ==========================================================================
   Skumetrica Academy — the guide's own stylesheet.

   Deliberately its own file rather than an @import of app.css: the
   dashboard's job is to disappear behind the figures, this site's job is to
   teach. It reuses app.css's colour tokens verbatim — the same brand,
   the same chart palette — so a chart embedded on a lesson page cannot
   disagree with the same chart in the app, but it carries its own type
   scale and its own layout. No dependency on app.css or welcome.css at
   render time: this file stands alone, the same way shell.php does.

   Every custom property charts.js reads at runtime (public/assets/js/
   charts.js:15-32) is defined here, in both themes, because Task 3 renders
   real charts on these pages: --s1..--s5, --grid, --axis, --muted, --text,
   --text-2, --surface. A missing one fails silently in light mode and
   visibly in dark, so all seven are present below, light and dark alike.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */
/* Self-hosted, same four files welcome.css loads. No CDN, no dependency
   fetched at render time — the Academy is public and must survive on its
   own the same way the landing page does. */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-var-latin.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plexmono-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plexmono-600-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------- tokens */
/* Colour values copied from public/assets/css/app.css, light block. Kept as
   values rather than an @import so this file has no load-time dependency on
   that one — the two are free to diverge in every property except colour,
   and colour is checked by eye against app.css on every change. */
:root {
  color-scheme: light;

  --brand:      #23466c;
  --accent:     #f5851a;

  --page:       #f4f3f7;
  --surface:    #ffffff;
  --surface-2:  #fafaf9;
  --ink:        #1b3557;
  --ink-2:      #234064;

  --text:       #0b0b0b;
  --text-2:     #52514e;
  --muted:      #898781;
  --on-ink:     #ffffff;
  --on-ink-2:   rgba(255,255,255,.70);

  --grid:       #e8e7e1;
  --axis:       #d8d7d0;
  --border:     rgba(11,11,11,.09);
  --rule:       #d9d8e1;
  --shadow:     0 1px 2px rgba(16,15,25,.04), 0 8px 24px rgba(16,15,25,.06);
  --shadow-l:   0 2px 8px rgba(16,15,25,.08), 0 24px 60px rgba(16,15,25,.12);

  /* Categorical series — identical values to app.css. Never re-derived here. */
  --s1: #2f6fb0;
  --s2: #d9700f;
  --s3: #1baf7a;
  --s4: #eda100;
  --s5: #e87ba4;

  --red: #c0322f;

  --display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --read:    'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:    'Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --r-sm: 8px;  --r: 14px;  --r-lg: 20px;

  --gutter: clamp(20px, 5vw, 56px);
  --wide: 1080px;
  --measure: 68ch;
}

/* Dark mode: media query is the default signal, an explicit data-theme
   always wins over it — the same pair app.css and layout.php use, so a
   visitor who set a preference on the dashboard sees it honoured here too
   if the theme is ever synced, and nothing regresses if it never is. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0d0d0d;  --surface: #1a1a19;  --surface-2: #222221;
    --ink: #16283f;   --ink-2: #1e3653;
    --text: #ffffff;  --text-2: #c3c2b7;   --muted: #898781;
    --grid: #2c2c2a;  --axis: #383835;     --border: rgba(255,255,255,.10);
    --rule: rgba(255,255,255,.13);
    --shadow:   0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
    --shadow-l: 0 2px 6px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.45);
    --s1: #4a8ac9; --s2: #e8770f; --s3: #199e70; --s4: #c98500; --s5: #d55181;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d;  --surface: #1a1a19;  --surface-2: #222221;
  --ink: #16283f;   --ink-2: #1e3653;
  --text: #ffffff;  --text-2: #c3c2b7;   --muted: #898781;
  --grid: #2c2c2a;  --axis: #383835;     --border: rgba(255,255,255,.10);
  --rule: rgba(255,255,255,.13);
  --shadow:   0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --shadow-l: 0 2px 6px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.45);
  --s1: #4a8ac9; --s2: #e8770f; --s3: #199e70; --s4: #c98500; --s5: #d55181;
}
:root[data-theme="light"] { color-scheme: light; }

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul { padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--on-ink);
  padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

.a-wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* -------------------------------------------------------------------- nav */
.a-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.a-nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 66px;
}
.a-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.a-logo img { height: 24px; width: auto; }
/* The sidebar's own dark/light swap (public/assets/css/app.css:141-149),
   reproduced here rather than shared, because this file takes no load-time
   dependency on that one. */
.logo-on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .logo-on-light { display: none; }
  :root:where(:not([data-theme="light"])) .logo-on-dark  { display: block; }
}
:root[data-theme="dark"]  .logo-on-light { display: none; }
:root[data-theme="dark"]  .logo-on-dark  { display: block; }
:root[data-theme="light"] .logo-on-light { display: block; }
:root[data-theme="light"] .logo-on-dark  { display: none; }

.a-logo-tag {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 10px;
  border-left: 1px solid var(--rule);
}
.a-back {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
}
.a-back:hover { color: var(--brand); }
:root[data-theme="dark"] .a-back:hover,
:root:where(:not([data-theme="light"])) .a-back:hover { color: var(--accent); }

@media (max-width: 480px) {
  .a-logo-tag { display: none; }
}

/* ------------------------------------------------------------------- type */
.a-eyebrow {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brand);
}
:root[data-theme="dark"] .a-eyebrow,
:root:where(:not([data-theme="light"])) .a-eyebrow { color: var(--accent); }

.a-h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.08;
  letter-spacing: -.028em;
  color: var(--text);
  text-wrap: balance;
}
.a-h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.2;
  letter-spacing: -.018em;
  color: var(--text);
}
.a-prose {
  font-family: var(--read);
  font-weight: 380;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: var(--measure);
}
.a-prose strong { font-weight: 600; color: var(--text); }

/* ------------------------------------------------------------------- hero */
.a-hero { padding-block: clamp(40px, 6vw, 68px) clamp(28px, 4vw, 44px); }
.a-hero > * + * { margin-top: 14px; }

/* -------------------------------------------------------------- the cards */
.a-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding-block: 8px clamp(40px, 6vw, 64px);
}
.a-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px clamp(18px, 3vw, 26px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
a.a-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-l);
  border-color: var(--brand);
}
.a-card-num {
  flex: none;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 15px;
}
.a-card-body { min-width: 0; }
.a-card-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17.5px;
  letter-spacing: -.012em;
  color: var(--text);
}
.a-card-blurb {
  margin-top: 5px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.a-card-idea {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .01em;
  color: var(--muted);
}
.a-card-idea::before { content: '\2192\0020'; } /* → */

/* Unavailable: not a link, and says so rather than pretending the lesson
   is one click away. */
.a-card-soon {
  cursor: default;
}
.a-card-soon .a-card-num { background: var(--surface-2); color: var(--muted); }
.a-card-soon .a-card-title { color: var(--muted); }
.a-card-soon-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 640px) {
  .a-grid { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------- reference */
.a-ref { padding-block: 8px clamp(48px, 7vw, 80px); }
.a-ref-empty {
  padding: 26px clamp(18px, 3vw, 26px);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

/* ------------------------------------------------------------------ lesson */
/* Task 3's page, built around the-bar's argument. Lesson pages live one
   level below the course map at the same public/academy/ path, so no new
   asset root is needed. */

.a-lesson-head { padding-block: clamp(32px, 5vw, 56px) 6px; }
.a-lesson-head > * + * { margin-top: 12px; }

.a-lesson-body { padding-block: 6px clamp(24px, 4vw, 36px); }
.a-lesson-block { margin-block: clamp(26px, 4vw, 38px); }
.a-lesson-block:first-child { margin-top: 0; }
.a-lesson-block > * + * { margin-top: 14px; }

.a-lesson-missing { padding-block: clamp(48px, 7vw, 84px) clamp(56px, 8vw, 96px); }
.a-lesson-missing > * + * { margin-top: 14px; }

.a-cta { color: var(--brand); font-weight: 600; text-decoration: none; }
:root[data-theme="dark"] .a-cta,
:root:where(:not([data-theme="light"])) .a-cta { color: var(--accent); }
.a-cta:hover { text-decoration: underline; }

/* --------------------------------------------------------------- KPI tiles */
/* Same class names the dashboard's own stat tiles use (public/assets/css/
   app.css: .kpis/.kpi/.kpi-label/.kpi-value/.kpi-foot/.kpi-note) — reused
   deliberately, values redefined here since this file takes no load-time
   dependency on app.css, so the guide's tiles look like the ones they
   describe and Stage 2's coverage scraper finds the same markup either way. */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.kpis.k1 { grid-template-columns: minmax(0, 280px); }
.kpis.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.kpi-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.kpi-value {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 750;
  letter-spacing: -.02em;
  margin-top: 6px;
  color: var(--text);
}
.kpi-foot { margin-top: 8px; }
.kpi-note { font-size: 12.5px; line-height: 1.4; color: var(--text-2); }

/* -------------------------------------------------------------- the table */
.a-table-wrap {
  overflow-x: auto;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow);
}
table.a-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.a-table caption {
  text-align: left;
  padding: 14px 16px 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .03em;
  color: var(--muted);
}
table.a-table th {
  text-align: left;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
table.a-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  white-space: nowrap;
}
table.a-table td.num, table.a-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.a-table tbody tr:last-child td { border-bottom: 0; }
table.a-table tbody tr:hover td { background: var(--surface-2); }

/* -------------------------------------------------------------- prev/next */
.a-lesson-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-block: 8px clamp(28px, 4vw, 44px);
}
.a-lesson-nav-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.a-lesson-nav-item:nth-child(2) { text-align: right; align-items: flex-end; }
a.a-lesson-nav-link:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-l);
  transform: translateY(-1px);
}
.a-lesson-nav-dir {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.a-lesson-nav-title { font-weight: 650; color: var(--text); }
.a-lesson-nav-soon .a-lesson-nav-title { color: var(--muted); }
.a-lesson-nav-empty { visibility: hidden; }

.a-lesson-back { padding-block: 0 clamp(40px, 6vw, 64px); }
.a-lesson-back a { color: var(--text-2); text-decoration: none; font-size: 14.5px; }
.a-lesson-back a:hover { color: var(--brand); }

@media (max-width: 640px) {
  .kpis, .kpis.k1, .kpis.k2, .kpis.k3 { grid-template-columns: 1fr; }
  .a-lesson-nav { grid-template-columns: 1fr; }
  .a-lesson-nav-item:nth-child(2) { text-align: left; align-items: flex-start; }
}

/* --------------------------------------------------------- Stage 4 widgets */
/* Progressive enhancement over content that already reads correctly
   without JavaScript — see public/assets/js/academy.js. Reduced motion is
   already handled globally above (the *, *::before, *::after rule), so
   nothing below needs its own prefers-reduced-motion guard. */

/* Widget 1 — the payout waterfall (lesson 1). */
.a-waterfall { margin-top: 18px; }
.a-waterfall-chart {
  min-height: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.a-waterfall-chart svg rect[fill="transparent"] { cursor: pointer; }

.a-wf-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.a-wf-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.a-wf-item[open] { border-color: var(--brand); }
:root[data-theme="dark"] .a-wf-item[open],
:root:where(:not([data-theme="light"])) .a-wf-item[open] { border-color: var(--accent); }
.a-wf-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 12.5px;
}
.a-wf-item summary::-webkit-details-marker { display: none; }
.a-wf-item-label {
  color: var(--text);
  font-weight: 600;
  letter-spacing: .01em;
}
.a-wf-item-value {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.a-wf-item-body {
  margin: 0;
  padding: 0 16px 14px;
  font-family: var(--read);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-2);
}

/* Widget 2 — "Set the bar" (lesson 5), the site's own most important one. */
.a-bar-widget { margin-top: 18px; }
.a-bar-controls {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.a-bar-range-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.a-bar-range-label output {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--text);
}
#a-bar-range {
  width: 100%;
  margin-top: 10px;
  accent-color: var(--brand);
}
:root[data-theme="dark"] #a-bar-range,
:root:where(:not([data-theme="light"])) #a-bar-range { accent-color: var(--accent); }
.a-bar-summary { margin-top: 10px; font-size: 14.5px; }
td.a-bar-ahead { color: var(--s3); font-weight: 650; }
td.a-bar-behind { color: var(--red); font-weight: 650; }

/* Widget 3 — the ACoS dial (lesson 6). */
.a-acos-dial {
  margin-top: 16px;
  padding: 18px clamp(16px, 3vw, 22px) 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.a-acos-dial-label {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--muted);
}
.a-acos-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--grid);
}
.a-acos-zone-band { position: absolute; top: 0; bottom: 0; }
.a-acos-zone-below { left: 0; background: var(--s3); opacity: .55; }
.a-acos-zone-mid   { background: var(--s4); opacity: .55; }
.a-acos-zone-above { background: var(--red); opacity: .5; }
.a-acos-marker {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 14px;
  background: var(--ink);
  transform: translateX(-1px);
}
:root[data-theme="dark"] .a-acos-marker,
:root:where(:not([data-theme="light"])) .a-acos-marker { background: var(--on-ink); }
.a-acos-dial-input {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.a-acos-dial-input span:first-child {
  flex: none;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
#a-acos-range {
  flex: 1;
  accent-color: var(--brand);
}
:root[data-theme="dark"] #a-acos-range,
:root:where(:not([data-theme="light"])) #a-acos-range { accent-color: var(--accent); }
.a-acos-dial-input output {
  flex: none;
  min-width: 4.5ch;
  text-align: right;
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
#a-acos-zone { margin-top: 12px; }
#a-acos-zone[data-zone="above-break-even"] { color: var(--red); }
#a-acos-zone[data-zone="between"] { color: var(--s4); }
#a-acos-zone[data-zone="below-target"] { color: var(--s3); }

/* ---------------------------------------------------------------- footer */
.a-foot { border-top: 1px solid var(--rule); padding-block: 26px; }
.a-foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}
.a-foot-links { display: flex; gap: 18px; }
.a-foot-links a { color: var(--muted); text-decoration: none; }
.a-foot-links a:hover { color: var(--text); }