/* ============================================================
   PML THEME — one file that sets the look of the whole site
   v1 · 2026-09-04 · direction "Notebook" (warm paper, ink navy,
   orange kept for actions only)

   HOW IT WORKS
   Every page already defines its own :root tokens (--bg, --ink,
   --navy, --accent, --line ...). This file is linked AFTER the
   page's own <style>, so it re-defines those same token values
   and the whole page re-colours with no per-page edits.
   Change a colour for the entire site by changing it HERE.

   Nav and floating-CTA blocks hard-code their colours in inline
   <style> blocks that sit later in the document, so those few
   rules are re-stated at the bottom with doubled class
   specificity (.pml-topnav.pml-topnav) to win regardless of order.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,600&family=Noto+Serif+Thai:wght@600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* ---- ground & ink ---------------------------------------- */
  --bg:#FBFAF6;            /* warm paper, replaces #f6f8fc      */
  --soft:#FFFFFF;          /* panels                            */
  --paper-2:#F4F1E9;       /* recessed strips, table heads      */
  --ink:#1B1F27;
  --muted:#5C6270;
  --ink-3:#8A8F9B;
  --line:#E6E2D7;          /* hairline on paper                 */
  --line-2:#D3CDBC;        /* stronger rule                     */

  /* ---- brand ----------------------------------------------- */
  --navy:#12294D;
  --navy-2:#1E3E6B;
  --navy-3:#2C548C;
  --accent:#DD5F2C;        /* orange, calmed for paper          */
  --accent-2:#F0A97F;
  --accent-deep:#A8410F;
  --accent-tint:#FBEDE4;

  /* ---- meaning, not decoration ----------------------------- */
  --good:#1C7A57;
  --good-tint:#E7F3ED;
  --bad:#B3352A;
  --bad-tint:#FBEBE8;
  --yellow:#B07A18;
  --gold:#B07A18;

  /* ---- shape ----------------------------------------------- */
  --radius:6px;
  --radius-sm:4px;
  --radius-lg:10px;
  --shadow-1:0 1px 2px rgba(27,31,39,.05);
  --shadow-2:0 2px 4px rgba(27,31,39,.05), 0 14px 28px -18px rgba(27,31,39,.28);

  /* ---- type ------------------------------------------------ */
  --font-body:"Anuphan","IBM Plex Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Thai",sans-serif;
  --font-display:"Newsreader","Noto Serif Thai",Georgia,"Times New Roman",serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- base type -------------------------------------- */
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,.hero h1,.pml-display{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.012em;
  text-wrap:balance;
}
h3,h4{letter-spacing:-.005em}

/* numbers line up wherever they sit in a column */
table td,table th,.num,.score,.marks,[class*="count"]{font-variant-numeric:tabular-nums}

/* eyebrows / small caps labels get real tracking */
.kick,.eyebrow,.ct,.lbl,.tlbl,.llbl,.pml-opt-tag{
  font-family:var(--font-mono);
  letter-spacing:.11em;
  text-transform:uppercase;
}

/* ---------- the highlight band, fixed ----------------------- */
/* was: 35% orange washed over navy = brown. now: a rule under
   the words, in real brand orange. */
.hero h1 .highlight,.highlight{
  background:none !important;
  box-shadow:inset 0 -.1em 0 0 var(--accent);
  padding-bottom:.02em;
}

/* ---------- one card, one border, one radius ---------------- */
.card,.tcard,.panel,.box,.pml-card{
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:none;
}

/* ---------- notices: a rule on the left, not a peach slab --- */
.notice,.note,.callout,.freebar,.tip{
  background:var(--paper-2);
  /* one border shorthand + colour list, not border + border-left:
     the dark-mode engine can only rewrite a var() it can still read */
  border:1px solid;
  border-color:var(--line) var(--line) var(--line) var(--accent);
  border-left-width:2px;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--ink);
}

/* ---------- buttons ----------------------------------------- */
.cta,.btn-primary,.b1{
  background:var(--accent);
  color:#fff;
  border-radius:var(--radius);
  box-shadow:none;
  transition:background .15s ease, transform .15s ease;
}
.cta:hover,.btn-primary:hover,.b1:hover{
  background:var(--accent-deep);
  transform:translateY(-1px);
  box-shadow:0 6px 16px -8px rgba(168,65,15,.55);
}
.btn-secondary,.b2,.ghost{
  background:transparent;
  border:1px solid var(--line-2);
  color:var(--ink);
  border-radius:var(--radius);
}
.btn-secondary:hover,.b2:hover,.ghost:hover{border-color:var(--navy);background:var(--soft)}


/* ---------- page-level notice bars used across the site ------ */
/* .buildbar (level pages) and .freebar (30 pages) were peach
   slabs with brown text. Same shape as every other notice now. */
.buildbar{
  background:var(--paper-2) !important;
  border:1px solid !important;
  border-color:var(--line) var(--line) var(--line) var(--accent) !important;
  border-left-width:2px !important;
  border-radius:0 var(--radius) var(--radius) 0 !important;
  text-align:left !important;
}
.buildbar .txt{color:var(--ink) !important;font-weight:500 !important}
.buildbar .ic{color:var(--accent)}
.buildbar a{
  background:var(--navy);color:#fff;border-radius:var(--radius);
  padding:9px 15px;font-weight:600;text-decoration:none;
}
.buildbar a:hover{background:var(--navy-2)}
.freebar{font-family:var(--font-body)}

/* the small emoji slot, now an icon slot */
.ic{display:inline-flex;align-items:center;justify-content:center;line-height:1}

/* ---------- exam-board / kicker pills ------------------------ */
.kick{color:var(--accent-deep)}


/* ---------- Teach Mode: keep the fit engine's headroom -------
   Anuphan sets a touch larger than the old system font, which
   pushed 3 of 49 slides past the fold on the quadratics lesson.
   2.5% back gives the fitter the room it had before — measured
   before/after across all 49 slides at 1470x790 and 390x844:
   0 slides worse, 2 better. Re-run that sweep if this changes. */
#stage{font-size:.975em}

/* ---------- links -------------------------------------------- */
a{color:var(--navy-3)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:3px;
}

/* ---------- tables ------------------------------------------ */
table th{background:var(--paper-2);color:var(--muted);font-family:var(--font-mono);font-size:.78em;letter-spacing:.1em;text-transform:uppercase;font-weight:400}
table td,table th{border-color:var(--line)}

/* ---------- nav: later inline <style> beats a link, so these
   rules double the class name to win on specificity ---------- */
.pml-topnav.pml-topnav{
  background:rgba(251,250,246,.92);
  border-bottom:1px solid var(--line);
  font-family:var(--font-body);
}
.pml-topnav.pml-topnav .pml-brand{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--ink)}
.pml-topnav.pml-topnav .pml-brand b{color:var(--accent)}
.pml-nav-links.pml-nav-links a,
.pml-nav-links.pml-nav-links button.pml-navitem{
  color:var(--muted);font-weight:500;border-radius:var(--radius-sm);
  position:relative;transition:color .15s ease;
}
.pml-nav-links.pml-nav-links a:hover,
.pml-nav-links.pml-nav-links button.pml-navitem:hover{background:transparent;color:var(--ink)}
/* underline that grows from the left on hover */
.pml-nav-links.pml-nav-links a::after,
.pml-nav-links.pml-nav-links button.pml-navitem::after{
  content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.pml-nav-links.pml-nav-links a:hover::after,
.pml-nav-links.pml-nav-links button.pml-navitem:hover::after{transform:scaleX(1)}
.pml-nav-links.pml-nav-links a.pml-nav-cta::after{display:none}
.pml-nav-lang.pml-nav-lang{border-color:var(--line-2);background:var(--soft);color:var(--ink);font-family:var(--font-mono);font-weight:500;font-size:12px}

/* ---------- floating buttons: one weight, not three ---------- */
.pml-cta-fab.pml-cta-fab{
  background:var(--accent);
  box-shadow:0 8px 22px -12px rgba(168,65,15,.7);
  font-family:var(--font-body);font-weight:600;
  border-radius:999px;
}
.pml-cta-fab.pml-cta-fab:hover{background:var(--accent-deep)}
#wbFab,.padbtn{font-family:var(--font-body)}

/* ---------- scrollbar on the reading pages ------------------ */
@supports (scrollbar-color: auto){
  html{scrollbar-color:var(--line-2) transparent}
}

/* ---------- print: papers should print like papers ---------- */
@media print{
  body{background:#fff}
  .pml-topnav,.pml-cta-fab,#wbFab,.padbtn,.freebar{display:none !important}
}

/* ---------- motion off if the reader asked for that ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* PML-NAV-FIT (11 Sep 2026) — the top nav (6 links + LINE + language) needs ~1110px
   with icons. Between the hamburger breakpoint (860px) and 1140px drop the icons and
   tighten, so the bar never runs off the right edge (it overflowed 861–985px even
   before "Exam packs" was added). */
@media (min-width:861px) and (max-width:1140px){
  .pml-topnav.pml-topnav{gap:10px}
  .pml-nav-links.pml-nav-links .pml-ico{display:none}
  .pml-nav-links.pml-nav-links a,.pml-nav-links.pml-nav-links button.pml-navitem{padding:8px 9px}
  .pml-nav-links.pml-nav-links a.pml-nav-cta{padding:7px 13px !important}
}
@media (min-width:861px) and (max-width:960px){
  .pml-nav-links.pml-nav-links a,.pml-nav-links.pml-nav-links button.pml-navitem{padding:8px 6px;font-size:13px}
  .pml-nav-links.pml-nav-links a.pml-nav-cta{padding:7px 11px !important}
}


/* ============================================================
   DARK MODE (v1 · 2026-09-11) — engine: /learn/_pml-dark.js
   The engine rewrites every colour USE to var(--x__pbg|__pfg|__pbd,
   var(--x)) — background / text / line. It invents those variants
   for any token it finds; the brand tokens are hand-picked here so
   the core palette is chosen, not computed. Tokens themselves are
   never changed, so light mode is untouched.
   Hand-tune anything in dark with a rule whose selector mentions
   data-theme — the engine leaves those alone.
   ============================================================ */
html[data-theme="dark"]{
  --bg__pbg:#171b21;        --bg__pfg:#d8d5ce;       --bg__pbd:#2a303a;
  --soft__pbg:#20252d;      --soft__pfg:#d8d5ce;     --soft__pbd:#2a303a;
  --paper-2__pbg:#272d36;   --paper-2__pfg:#b7bac1;  --paper-2__pbd:#2f3541;
  --ink__pfg:#d8d5ce;       --ink__pbg:#2b313c;      --ink__pbd:#b7bac1;
  --muted__pfg:#9ba1ad;     --muted__pbg:#3a404c;    --muted__pbd:#6b7280;
  --ink-3__pfg:#7d8494;     --ink-3__pbg:#353b47;    --ink-3__pbd:#5d6473;
  --line__pbd:#333a45;      --line__pbg:#333a45;     --line__pfg:#6b7280;
  --line-2__pbd:#434b59;    --line-2__pbg:#434b59;   --line-2__pfg:#7b8391;

  --navy__pfg:#a9c1ee;      --navy__pbg:#1d3761;     --navy__pbd:#5b7cb8;
  --navy-2__pfg:#bcd0f2;    --navy-2__pbg:#25447a;   --navy-2__pbd:#6a8bc4;
  --navy-3__pfg:#8fb3f0;    --navy-3__pbg:#2c548c;   --navy-3__pbd:#6f95d6;

  --accent__pfg:#f08a5b;    --accent__pbg:#dd5f2c;   --accent__pbd:#e8743f;
  --accent-2__pfg:#f5b894;  --accent-2__pbg:#6e3a22; --accent-2__pbd:#d98b62;
  --accent-deep__pfg:#f39a6c; --accent-deep__pbg:#b54914; --accent-deep__pbd:#c85a26;
  --accent-tint__pbg:#2d2019; --accent-tint__pfg:#f5c9af; --accent-tint__pbd:#5a3526;

  --good__pfg:#5fd19b;      --good__pbg:#1c7a57;     --good__pbd:#3fae7d;
  --good-tint__pbg:#14291f; --good-tint__pfg:#b2dcc6;--good-tint__pbd:#285c45;
  --bad__pfg:#f28b7f;       --bad__pbg:#b3352a;      --bad__pbd:#d65a4e;
  --bad-tint__pbg:#2e1917;  --bad-tint__pfg:#eab8b1; --bad-tint__pbd:#613029;
  --yellow__pfg:#e6b550;    --yellow__pbg:#8a6212;   --yellow__pbd:#c99530;
  --gold__pfg:#e6b550;      --gold__pbg:#8a6212;     --gold__pbd:#c99530;

  --shadow-1__pbg:0 1px 2px rgba(0,0,0,.45);
  --shadow-2__pbg:0 2px 4px rgba(0,0,0,.35), 0 14px 28px -18px rgba(0,0,0,.8);
}