/* ============================================================
   Shared stylesheet for Claude's Statistics course (Ch 1–13)
   "Frankfurt School Press" — a refined academic-editorial system.
   One source of truth for the palette, type, page shell, cards, the
   sticky chapter nav, per-Part theming, focus/hover polish, the math
   typesetting (KaTeX) styling and the mobile breakpoint.
   Linked by index.html and every chapter.
   ============================================================ */

:root{
  /* --fsgold matches the Part-I accent (#b8860b) used by the legend,
     the index cards and STATS_PARTS.I in site.js — one brand gold. */
  --fsblue:#003366; --fsgold:#b8860b; --red:#961e1e; --green:#14552d;
  --grey:#f3f4f7; --ink:#1b2430; --muted:#5a6573; --line:#e6e3da;
  --paper:#f3f1ea;                       /* warm "textbook page" ground */
  --accent:var(--fsgold);                /* overridden per Part below */

  /* Type — an old-style serif for headings (pairs with KaTeX's Computer
     Modern math) + a humanist geometric sans for body/UI. Both resolve to
     system-available faces, so the apps stay 100% offline. */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Hoefler Text",Georgia,"Times New Roman",serif;
  --sans:"Avenir Next","Avenir",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Layered depth + radii tokens */
  --shadow-sm:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.07);
  --shadow-md:0 4px 14px rgba(16,24,40,.09),0 2px 5px rgba(16,24,40,.05);
  --shadow-lg:0 16px 34px rgba(16,24,40,.13),0 5px 10px rgba(16,24,40,.06);
  --r-sm:9px; --r:13px; --r-lg:18px;
}

/* Per-Part accent so the three sections of the course read as
   distinct colour zones instead of 14 identical clones. */
body[data-part="I"]  { --accent:#b8860b; }   /* Descriptive  — gold  */
body[data-part="II"] { --accent:#0e7c66; }   /* Probability  — teal  */
body[data-part="III"]{ --accent:#6d28d9; }   /* Inferential  — violet*/

*{box-sizing:border-box;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.68;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* faint warm/teal atmosphere in the far corners — barely there, adds depth */
  background-image:
    radial-gradient(1200px 620px at 100% -6%,rgba(184,134,11,.05),transparent 60%),
    radial-gradient(1000px 520px at -10% 112%,rgba(14,124,102,.045),transparent 55%);
  background-attachment:fixed;
}

/* Page header (chapter pages). index.html keeps its own hero. */
header{
  background:linear-gradient(135deg,#002a55 0%,#063e74 58%,#0a4d8c 100%);
  color:#fff;padding:26px 30px;border-bottom:3px solid var(--accent);
  position:relative;overflow:hidden;box-shadow:var(--shadow-sm);
}
header::after{                                   /* soft corner light */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(440px 190px at 92% -45%,rgba(255,255,255,.13),transparent 70%);
}
header h1{margin:0;font-family:var(--serif);font-weight:600;font-size:25px;letter-spacing:.01em;position:relative;}
header p{margin:6px 0 0;opacity:.86;font-size:13.5px;position:relative;}

.card{
  background:#fff;border-radius:var(--r);padding:18px 20px;
  box-shadow:var(--shadow-sm);border:1px solid rgba(20,30,50,.055);
}
h2{
  font-family:var(--serif);font-weight:600;font-size:18.5px;color:var(--fsblue);
  margin:0 0 12px;letter-spacing:.01em;
}
button{
  border:1px solid rgba(0,51,102,.28);background:#fff;color:var(--fsblue);
  padding:7px 14px;border-radius:var(--r-sm);cursor:pointer;font-weight:600;
  font-family:var(--sans);font-size:13.5px;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .08s ease;
}
button:hover{background:color-mix(in srgb,var(--accent) 9%,#fff);border-color:var(--accent);box-shadow:var(--shadow-sm);}
button:active{transform:translateY(1px);}
.note{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:8px;}
.stat{background:var(--grey);background:color-mix(in srgb,var(--accent) 6%,var(--grey));
  border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;}
.stat .lab{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:600;}
.stat .val{font-size:21px;font-weight:700;color:var(--fsblue);font-variant-numeric:tabular-nums;}
code{background:var(--grey);padding:1px 5px;border-radius:4px;font-size:.92em;}

/* ---- Sticky chapter nav (injected by site.js) ---------------- */
.site-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);
  padding:9px 18px;font-size:13px;}
.site-nav a{text-decoration:none;color:var(--fsblue);font-weight:600;padding:5px 11px;border-radius:8px;
  transition:background .14s ease,color .14s ease;}
.site-nav a:hover{background:color-mix(in srgb,var(--accent) 12%,#fff);color:var(--accent);}
.site-nav .home{display:flex;align-items:center;gap:6px;}
.site-nav .cur{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.site-nav .badge{background:var(--accent);color:#fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700;
  box-shadow:0 1px 2px rgba(0,0,0,.18);}
.site-nav .spacer{flex:1;}
.site-nav .disabled{color:#b3b9c2;padding:5px 10px;font-weight:600;}

/* ---- Accessibility & feedback -------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;}

/* ---- Mobile: collapse multi-column layouts ------------------- */
/* .grid is the index card container; forcing it (and chapter .row
   grids) to a single column on phones — auto-fill alone reflows, but
   this guarantees the explicit 1fr collapse. */
@media(max-width:760px){
  .row,.grid{grid-template-columns:1fr !important;}
  .card.full{grid-column:auto !important;}
  .site-nav{flex-wrap:wrap;font-size:12px;}
  .site-nav .cur{max-width:100%;}
  header{padding:20px 20px;}
  header h1{font-size:22px;}
}

/* ============================================================
   SHARED UI CONTRACT  (relied on by all 13 chapter apps)
   Three reusable teaching primitives. Each inherits the page's
   --accent (the per-Part colour set by body[data-part]).
   ============================================================ */

/* 1. .howto — soft accent-tinted "What to try / notice" callout.
      Markup: <div class="howto"><h4>What to try</h4> … </div> */
.howto{
  background:var(--grey);                                  /* fallback */
  background:color-mix(in srgb, var(--accent) 8%, #fff);   /* accent tint */
  border:1px solid color-mix(in srgb, var(--accent) 22%, #fff);
  border-left:4px solid var(--accent);
  border-radius:var(--r);
  padding:13px 16px;
  margin:13px 0;
  box-shadow:var(--shadow-sm);
}
.howto h4{
  margin:0 0 6px;
  font-size:12.5px;
  font-weight:700;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.6px;
}
.howto p{margin:6px 0;font-size:14.5px;line-height:1.6;}

/* 2. .selfcheck — question + reveal button + hidden answer.
      Markup:
        <div class="selfcheck">
          <p><b>Self-check.</b> …question…</p>
          <button class="reveal" data-reveal>Show answer</button>
          <div class="answer">…answer…</div>
        </div>
      Tinted distinctly from .howto (neutral paper, dashed accent edge).
      JS toggles ".show" on .answer (see wireReveals() in site.js). */
.selfcheck{
  background:#fff;
  border:1px solid var(--line);
  border-left:4px dashed var(--accent);
  border-radius:var(--r);
  padding:13px 16px;
  margin:13px 0;
  box-shadow:var(--shadow-sm);
}
.selfcheck p{margin:0 0 8px;font-size:14.5px;line-height:1.6;}
.reveal{
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  padding:6px 13px;
  border-radius:var(--r-sm);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:filter .14s ease,box-shadow .14s ease,transform .08s ease;
}
.reveal:hover{filter:brightness(1.07);background:var(--accent);box-shadow:var(--shadow-sm);}
.reveal:active{transform:translateY(1px);}
.answer{
  display:none;
  margin-top:10px;
  padding-top:11px;
  border-top:1px solid var(--line);
  font-size:14.5px;
  line-height:1.6;
}
.answer.show{display:block;animation:answerIn .22s ease;}
@keyframes answerIn{from{opacity:0;transform:translateY(-3px);}to{opacity:1;transform:none;}}

/* 3. .gloss — jargon term with a typeset hover tooltip.
      Markup: <span class="gloss" tabindex="0"
                    data-tip="\(\hat\sigma\) = sample SD">σ̂</span> */
.gloss{
  border-bottom:1px dotted var(--accent);
  cursor:help;
  position:relative;
}
/* The tooltip is a real DOM node (.gloss-pop, built by wireGlosses() in
   site.js) so its text can be KaTeX-rendered. Shown on hover / focus. */
.gloss-pop{
  position:absolute;
  left:50%;
  bottom:calc(100% + 9px);
  transform:translateX(-50%);
  background:#10202f;
  color:#fff;
  padding:9px 12px;
  border-radius:10px;
  font-size:12.5px;
  font-weight:400;
  line-height:1.5;
  white-space:normal;
  width:max-content;
  max-width:264px;
  box-shadow:0 10px 26px rgba(0,0,0,.30);
  z-index:200;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translateX(-50%) translateY(4px);
  transition:opacity .14s ease,transform .14s ease;
}
.gloss:hover .gloss-pop,
.gloss:focus-within .gloss-pop{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
/* caret pointing down at the glossed term */
.gloss-pop::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:#10202f;
}
/* KaTeX inside the dark tooltip should read white */
.gloss-pop .katex{ color:#fff; font-size:1em; }

/* ============================================================
   MATH TYPESETTING (KaTeX) + reading comfort
   ============================================================ */
.katex{ font-size:1.06em; }
.katex-display{ margin:.5em 0; overflow-x:auto; overflow-y:hidden; padding:2px 0; }

/* .formula — a centred display-math card. A page's own <style> (loaded
   after this file) may override it, so chapter-specific looks still win. */
.formula{
  background:var(--grey);                                   /* fallback */
  background:color-mix(in srgb, var(--accent) 7%, #fff);    /* accent tint */
  border:1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius:var(--r);
  padding:12px 16px;
  margin:11px 0;
  text-align:center;
  font-size:15px;
  line-height:1.5;
  overflow-x:auto;
  box-shadow:var(--shadow-sm);
}

/* a touch more leading on the prose-heavy teaching primitives */
.howto p, .selfcheck p, .answer{ line-height:1.62; }