/* =============================================================
   styles.css — one stylesheet, no build step, no framework.
   Colours live as tokens in :root. Change them once, here.
   ============================================================= */

/* ---------- TOKENS: LIGHT ----------
   Palette is Purple Maiʻa's own, sampled from the brand logo:
     purple #1a002d · navy #081659 · green #006838 · tan #c3996b
     red #ec1c24 · cyan #00adee · amber #faaf40 · lime #8bc53f
   purplemaia.org pairs Montserrat headings with Inter body text,
   near-black on off-white, and a 16px corner radius. Same here.
   Accent values are tuned for contrast, not picked by eye:
   --accent is 8.2:1 on --bg and 8.5:1 under white button text.      */
:root {
  --bg:            #fbfafc;
  --bg-alt:        #f4f1f7;
  --surface:       #ffffff;
  --surface-2:     #f8f6fa;
  --border:        #e7e2ec;
  --border-strong: #d5cdde;

  --text:          #15031f;
  --text-2:        #463a52;
  --muted:         #776c82;

  --accent:        #6b2f96;
  --accent-hover:  #5b2a82;
  --accent-soft:   #f2e9fa;
  --accent-ink:    #ffffff;

  --coral:         #b4452c;
  --coral-soft:    #fbeae4;
  --gold:          #946a0c;
  --gold-soft:     #f8f0dc;
  --ocean:         #0d6f99;
  --ocean-soft:    #e4f1f8;

  --shadow-sm: 0 1px 2px rgba(26,0,45,.05), 0 1px 3px rgba(26,0,45,.05);
  --shadow-md: 0 2px 4px rgba(26,0,45,.04), 0 8px 24px rgba(26,0,45,.08);
  --shadow-lg: 0 8px 16px rgba(26,0,45,.07), 0 24px 64px rgba(26,0,45,.15);

  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --header-h: 62px;
  --wrap: 1180px;
}

/* ---------- TOKENS: DARK ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #120a18;
    --bg-alt:        #180e20;
    --surface:       #1d1226;
    --surface-2:     #251830;
    --border:        #33243f;
    --border-strong: #46334f;

    --text:          #f3eef7;
    --text-2:        #cfc4d8;
    --muted:         #9b8fa6;

    --accent:        #c9a4ef;
    --accent-hover:  #dcc0f8;
    --accent-soft:   #2a1838;
    --accent-ink:    #1a002d;

    --coral:         #f0876a;
    --coral-soft:    #33201a;
    --gold:          #e8a33d;
    --gold-soft:     #2f2411;
    --ocean:         #4cc6f5;
    --ocean-soft:    #102b38;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 2px 6px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    --shadow-lg: 0 10px 20px rgba(0,0,0,.45), 0 30px 70px rgba(0,0,0,.5);
  }
}

:root[data-theme="dark"] {
  --bg:            #120a18;
  --bg-alt:        #180e20;
  --surface:       #1d1226;
  --surface-2:     #251830;
  --border:        #33243f;
  --border-strong: #46334f;

  --text:          #f3eef7;
  --text-2:        #cfc4d8;
  --muted:         #9b8fa6;

  --accent:        #c9a4ef;
  --accent-hover:  #dcc0f8;
  --accent-soft:   #2a1838;
  --accent-ink:    #1a002d;

  --coral:         #f0876a;
  --coral-soft:    #33201a;
  --gold:          #e8a33d;
  --gold-soft:     #2f2411;
  --ocean:         #4cc6f5;
  --ocean-soft:    #102b38;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 2px 6px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --shadow-lg: 0 10px 20px rgba(0,0,0,.45), 0 30px 70px rgba(0,0,0,.5);
}

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Must win over the display rules below (.palette-backdrop, .btn, …),
   otherwise anything toggled with the `hidden` attribute stays visible. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 18px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- ʻOhe kāpala texture ----------
   The stamp motif the Purple Maiʻa deck uses, bled into the margins either
   side of the 1180px column. It ships as a *mask*, not as a
   coloured image, so a single file tints itself from --accent and follows
   the theme instead of needing a light and a dark copy.

   The file keeps a real alpha channel on purpose: the default mask-mode is
   alpha, so this never depends on mask-mode:luminance, which older Chrome
   ignores — and ignoring it would paint a solid square.

   body gets its own stacking context so the ::before can sit at z-index -1,
   which puts it above body's background but below every bit of content. */
body { position: relative; z-index: 0; }

body::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: none;              /* only drawn when there is margin to draw in */
  background-color: var(--accent);
  opacity: .06;

  --stamp: url("stamp.png");
  -webkit-mask-image: var(--stamp), var(--stamp), var(--stamp), var(--stamp), var(--stamp);
          mask-image: var(--stamp), var(--stamp), var(--stamp), var(--stamp), var(--stamp);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 420px, 340px, 380px, 460px, 360px;
          mask-size: 420px, 340px, 380px, 460px, 360px;
  /* Pushed mostly off-canvas; only an edge bleeds in, so it reads as
     texture rather than as clip art sitting in the margin. */
  -webkit-mask-position:
    left -150px top 7%,  right -120px top 26%, left -110px top 48%,
    right -170px top 70%, left -140px top 90%;
          mask-position:
    left -150px top 7%,  right -120px top 26%, left -110px top 48%,
    right -170px top 70%, left -140px top 90%;
}

@media (min-width: 1240px) { body::before { display: block; } }

/* Light purple on a near-black page needs a little more to register. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before { opacity: .085; }
}
:root[data-theme="dark"] body::before { opacity: .085; }

@media print { body::before { display: none; } }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -.022em; margin: 0; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
img, svg { max-width: 100%; }
button { font: inherit; color: inherit; }
code { font-family: var(--font-mono); font-size: .88em; background: var(--surface-2); padding: .15em .4em; border-radius: 5px; }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 16px; }
.wrap-narrow { max-width: 780px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; color: var(--accent-ink); }

.linklike {
  background: none; border: 0; padding: 0; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 500;
}

/* ---------- HEADER ---------- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--border); }

/* Home page: frosted glass. More see-through and more blur than elsewhere,
   so the cards and the margin texture show softly through as they pass
   under it. At the top it sits on the plain page colour, the same colour as
   the title band below it, so the two read as one. */
.site-header.is-glass {
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
}
.site-header.is-glass.is-stuck {
  border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--surface) 40%, transparent) inset, var(--shadow-sm);
}

.header-inner { display: flex; align-items: center; gap: 18px; height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 600; flex-shrink: 1; min-width: 0; }
/* Purple Maiʻa mark. Two files rather than one tinted file: the mark is
   nine brand colours, and its deep purple cells vanish on a dark page. */
.brand-mark {
  width: 32px; height: 26px; flex-shrink: 0;
  background: url("pm-mark.png") center/contain no-repeat;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-mark { background-image: url("pm-mark-white.png"); }
}
:root[data-theme="dark"] .brand-mark { background-image: url("pm-mark-white.png"); }
.brand-text { font-family: var(--font-display); font-size: 1.04rem; letter-spacing: -.02em; white-space: nowrap; }
/* A long site name must never push the search, theme and menu buttons off a
   phone screen: below 560px it may wrap onto two lines instead. */
@media (max-width: 560px) {
  .brand-text { white-space: normal; font-size: .92rem; line-height: 1.2; text-wrap: balance; }
  .header-inner { gap: 12px; }
}

.site-nav { display: flex; gap: 2px; margin-left: auto; }
.site-nav a {
  color: var(--text-2); text-decoration: none; font-size: .925rem; font-weight: 500;
  padding: 7px 11px; border-radius: 8px; transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.site-nav a:hover { background: var(--surface-2); color: var(--text); }
.site-nav a.active { color: var(--accent); background: var(--accent-soft); }

.header-actions { display: flex; align-items: center; gap: 8px; }

.search-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); padding: 6px 9px 6px 11px; border-radius: 9px; cursor: pointer;
  font-size: .875rem; transition: border-color .15s ease, color .15s ease;
}
.search-trigger:hover { border-color: var(--border-strong); color: var(--text-2); }
.search-trigger svg { width: 15px; height: 15px; }

kbd {
  font-family: var(--font-mono); font-size: .72rem; line-height: 1;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 3px 5px; color: var(--muted);
}

.icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 9px; cursor: pointer; color: var(--text-2);
  transition: border-color .15s ease, color .15s ease;
}
.icon-btn:hover { border-color: var(--border-strong); color: var(--text); }
.icon-btn svg { width: 17px; height: 17px; }
.i-moon { display: none; }
:root[data-theme="dark"] .i-sun { display: none; }
:root[data-theme="dark"] .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .i-sun { display: none; }
  :root:not([data-theme="light"]) .i-moon { display: block; }
}

.menu-btn { display: none; }

/* Under the header on a module page: how much of that module is done. */
.scroll-progress[hidden] { display: none; }
.scroll-progress {
  height: 3px; background: var(--accent); width: 0%;
  transition: width .5s cubic-bezier(.22,1,.36,1); position: absolute; bottom: -1px; left: 0;
}

/* ---------- HERO ---------- */
.hero { position: relative; padding: 68px 0 0; overflow: hidden; }
.hero-inner { position: relative; }
/* The hairline between the title band and the module cards. Drawn inside the
   content column, like the one under a module page's header. */
.hero-inner::after { content: ""; display: block; height: 1px; margin-top: 44px; background: var(--border); }
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 3.9rem); max-width: 16ch; margin-bottom: 18px; text-wrap: balance; }
.lede { font-size: clamp(1.1rem, 2vw, 1.22rem); color: var(--text-2); max-width: 54ch; margin: 0; }

.hero-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 20px 0 0; }
.hero-meta:empty { display: none; }
.hero-meta li { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: .94rem; }
.hero-meta svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 11px; font-weight: 600; font-size: .96rem;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-md); }
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--border-strong); color: var(--text); }
.btn-small { padding: 7px 13px; font-size: .85rem; border-radius: 9px; }

/* ---------- MODULE CARDS (home) ---------- */
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.module-card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.module-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); color: inherit; }
.module-card:focus-visible { outline-offset: 3px; border-radius: var(--radius-lg); }
.module-art {
  position: relative; aspect-ratio: 16 / 9; display: block; border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface-2)), color-mix(in srgb, var(--ocean) 13%, var(--surface-2)));
}
.module-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The hover clip sits over the still and fades in once it is really playing. */
.module-preview {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.module-art.is-playing .module-preview { opacity: 1; }
.module-num {
  position: absolute; top: 12px; left: 12px; font-size: .78rem; font-weight: 700; color: var(--text-2);
  background: color-mix(in srgb, var(--surface) 92%, transparent); padding: 4px 10px; border-radius: 999px;
}
.module-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1; }
.module-title { font-size: 1.45rem; }
.module-summary { color: var(--text-2); font-size: .97rem; margin: 0; flex: 1; }
.module-meta { font-size: .86rem; color: var(--muted); }
.module-cta { align-self: flex-start; margin-top: 6px; }

/* Progress meters: the module cards and the line under the headline. */
.meter { display: block; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.meter b { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .6s cubic-bezier(.22,1,.36,1); }
.module-progress { display: flex; align-items: center; gap: 12px; font-size: .86rem; color: var(--text-2); }
.module-progress .meter { flex: 1; }
.module-progress-label { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.module-card.is-complete .module-progress-label { color: var(--accent); font-weight: 600; }
.overall { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 24px; font-size: .92rem; color: var(--text-2); }
.overall .meter { width: 220px; height: 8px; }
.overall-text { font-weight: 600; font-variant-numeric: tabular-nums; }
.overall-text:focus { outline: none; }
.overall .linklike[hidden] { display: none; }
.overall-note { color: var(--muted); }
.overall .linklike { font-size: .88rem; }
/* The certificate button sits in the same row, after the reset link. It is
   hidden until the whole course is finished, so it never competes with the
   progress line for attention. */
.overall .cert-cta[hidden] { display: none; }
.overall .cert-cta { flex-basis: 100%; width: fit-content; margin-top: 4px; }
@media (min-width: 720px) { .overall .cert-cta { flex-basis: auto; margin-top: 0; } }

.placement { margin-top: 22px; max-width: 760px; }
.placement-open {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 16px 20px; border: 1px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--surface);
}
.placement-open p { margin: 0; color: var(--text-2); font-size: .97rem; }
.placement-open .btn { margin-left: auto; }

/* ---------- REFERENCE (links on home, and its own page) ---------- */
.ref-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ref-link {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-2); font-size: .93rem; line-height: 1.5;
  transition: border-color .15s ease, transform .18s ease;
}
.ref-link:hover { border-color: var(--accent); color: var(--text-2); transform: translateY(-2px); }
.ref-link-title { font: 700 1.1rem/1.2 var(--font-display); letter-spacing: -.02em; color: var(--text); }
.ref-head { padding: 52px 0 10px; }
.ref-head h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); margin-bottom: 18px; }
.ref-head h1:focus { outline: none; }
.ref-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.ref-jump a {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); text-decoration: none; font-size: .9rem; font-weight: 500;
  transition: border-color .15s ease, color .15s ease;
}
.ref-jump a:hover { border-color: var(--accent); color: var(--accent); }
/* <html> already reserves the header plus 18px when scrolling to anything
   (scroll-padding-top), so these margins only add the breathing room. */
#referenceView .section-head { scroll-margin-top: 10px; }
@media (max-width: 980px) { .ref-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ref-links { grid-template-columns: 1fr; } }

.why h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin-bottom: 12px; }
.why p { color: var(--text-2); max-width: 68ch; }

/* ---------- Hero quiz: the three placement questions ---------- */
.hq-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px 30px 24px; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  animation: hq-in .32s cubic-bezier(.22,1,.36,1);
}
@keyframes hq-in { from { opacity: .4; transform: translateY(6px); } }
.hq-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.hq-step { font-size: .86rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.hq-bars { display: flex; gap: 6px; margin-left: auto; }
.hq-bars i { width: 34px; height: 5px; border-radius: 999px; background: var(--border); transition: background .2s ease; }
.hq-bars i.on { background: var(--accent); }
.hq-q { font-size: clamp(1.35rem, 2.3vw, 1.7rem); line-height: 1.22; margin-bottom: 22px; text-wrap: balance; }
.hq-q:focus { outline: none; }
.hq-q:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 4px; }
.hq-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hq-option {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font-weight: 500; font-size: 1rem; line-height: 1.4;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.hq-mark {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border-strong); transition: border-color .15s ease, border-width .15s ease;
}
.hq-option:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.hq-option:hover .hq-mark { border-color: var(--accent); }
.hq-option:active .hq-mark { border-width: 6px; border-color: var(--accent); }
.hq-option:focus-visible { outline-offset: 3px; border-radius: var(--radius); }
.hq-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; min-height: 24px; }
.hq-note { font-size: .84rem; color: var(--muted); margin-left: auto; }
.hq-foot .linklike { font-size: .88rem; }

.hq-result .tag { align-self: flex-start; margin-bottom: 12px; }
.hq-result .hq-q { margin-bottom: 10px; }
.hq-body { color: var(--text-2); font-size: 1rem; margin: 0 0 24px; }
.hq-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- SECTIONS ---------- */
.section { padding: 76px 0; }
.section-tight { padding: 48px 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--border); }
.section-head { max-width: 62ch; margin-bottom: 34px; }
.section-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.35rem); margin-bottom: 10px; }
.section-sub { color: var(--muted); font-size: 1.03rem; margin: 0; }

/* ---------- TOOLBAR / FILTERS ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.filters { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
  padding: 7px 14px; border-radius: 999px; font-size: .885rem; font-weight: 500; cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip .chip-count { opacity: .6; margin-left: 5px; font-variant-numeric: tabular-nums; }

.filter-input { position: relative; display: flex; align-items: center; min-width: 230px; }
.filter-input-wide { max-width: 420px; margin-bottom: 26px; }
.filter-input svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.filter-input input {
  width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text);
  padding: 10px 14px 10px 36px; border-radius: 10px; font-size: .93rem; font-family: inherit;
}
.filter-input input::placeholder { color: var(--muted); }
.filter-input input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

.empty-state { text-align: center; color: var(--muted); padding: 44px 0; }

/* ---------- TIMELINE ---------- */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; max-width: 840px; }
.timeline::before { content: ""; position: absolute; left: 79px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
.timeline li { position: relative; display: grid; grid-template-columns: 62px 1fr; gap: 34px; padding: 0 0 26px; }
.timeline li:last-child { padding-bottom: 0; }
.t-time { font-family: var(--font-mono); font-size: .86rem; color: var(--muted); text-align: right; padding-top: 3px; font-weight: 500; }
.t-body { position: relative; }
.t-body::before {
  content: ""; position: absolute; left: -22px; top: 8px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg-alt);
}
.t-body h3 { font-size: 1.08rem; margin-bottom: 3px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.t-body p { color: var(--text-2); font-size: .93rem; margin: 0; }
.t-tag { font-size: .69rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-family: var(--font-body); }

/* ---------- PROMPTS ---------- */
.prompt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 18px; }
.prompt-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.prompt-card h3 { font-size: 1.08rem; }
.prompt-use { color: var(--muted); font-size: .87rem; margin: 0; }
.prompt-card pre {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px; margin: 0; overflow-x: auto; flex-grow: 1;
  font-family: var(--font-mono); font-size: .8rem; line-height: 1.6; color: var(--text-2);
  white-space: pre-wrap; word-break: break-word;
}
.copy-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  padding: 7px 13px; border-radius: 9px; font-size: .855rem; font-weight: 600; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent); }
.copy-btn svg { width: 14px; height: 14px; }
.copy-btn.copied { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* ---------- GLOSSARY ---------- */
.glossary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 14px; }
.term-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.term-card dt { font-family: var(--font-display); font-size: 1.04rem; font-weight: 600; margin-bottom: 4px; }
.term-card dd { margin: 0; color: var(--text-2); font-size: .91rem; }
mark { background: color-mix(in srgb, var(--gold) 34%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.faq-item summary {
  cursor: pointer; padding: 16px 20px; font-weight: 600; font-size: 1.02rem;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; width: 9px; height: 9px; flex-shrink: 0;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq-item[open] summary { color: var(--accent); }
.faq-item .faq-answer { padding: 0 20px 18px; color: var(--text-2); font-size: .96rem; }

/* ---------- RESOURCES ---------- */
.resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 22px; }
.resource-group h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: 12px; font-family: var(--font-body); font-weight: 700; }
.resource-group ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.resource-link {
  display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 15px; transition: border-color .15s ease, transform .15s ease;
}
.resource-link:hover { border-color: var(--accent); transform: translateX(3px); color: inherit; }
.resource-link svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.resource-link strong { display: block; font-size: .95rem; font-weight: 600; }
.resource-link span { display: block; font-size: .85rem; color: var(--muted); }

/* ---------- FOOTER ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 46px 0 28px; background: var(--bg); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 26px; justify-content: space-between; align-items: flex-start; }
.footer-inner > div { max-width: 46ch; }
.footer-logo { display: block; width: 200px; height: auto; margin-bottom: 14px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .footer-logo { content: url("pm-lockup-white.png"); }
}
:root[data-theme="dark"] .footer-logo { content: url("pm-lockup-white.png"); }
.footer-org { font-family: var(--font-display); font-size: 1.14rem; font-weight: 600; margin-bottom: 6px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-links a { color: var(--text-2); text-decoration: none; font-size: .93rem; font-weight: 500; }
.footer-links a:hover { color: var(--accent); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border); }
.footer-bottom p { margin: 0; }
.to-top { background: none; border: 0; color: var(--muted); font-size: .875rem; cursor: pointer; font-weight: 500; }
.to-top:hover { color: var(--accent); }

/* ---------- DIALOG CLOSE (feedback) ---------- */
.dialog-close {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border);
  cursor: pointer; color: var(--text-2); backdrop-filter: blur(8px);
}
.dialog-close:hover { color: var(--text); border-color: var(--border-strong); }
.dialog-close svg { width: 16px; height: 16px; }

.video-frame { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Stand-in notice under every third-party embed. Rendered by embedFor() for
   youtube/vimeo only, so it vanishes when a lesson moves to a `file:` video. */
.video-standin {
  margin: 0;
  padding: 10px 16px;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--text-2);
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border);
}
.video-standin strong { color: var(--accent); font-weight: 600; }
/* ---------- COMMAND PALETTE ---------- */
.palette-backdrop {
  position: fixed; inset: 0; z-index: 120; background: rgba(10,12,16,.5);
  backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(40px, 12vh, 130px) 16px 16px;
}
.palette {
  width: min(620px, 100%); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
  animation: pop .16s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.palette-input { display: flex; align-items: center; gap: 11px; padding: 15px 17px; border-bottom: 1px solid var(--border); }
.palette-input svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.palette-input input { flex: 1; background: none; border: 0; outline: 0; font-size: 1.02rem; color: var(--text); font-family: inherit; }
.palette-input input::placeholder { color: var(--muted); }
.palette-results { list-style: none; margin: 0; padding: 7px; max-height: 46vh; overflow-y: auto; }
.palette-results li { border-radius: var(--radius-sm); }
.palette-results button {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 10px 12px; border-radius: var(--radius-sm); display: flex; align-items: baseline; gap: 10px;
}
.palette-results li.active button, .palette-results button:hover { background: var(--surface-2); }
.palette-results .r-kind { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--accent); flex-shrink: 0; width: 66px; }
.palette-results .r-title { font-weight: 600; font-size: .95rem; }
.palette-results .r-sub { color: var(--muted); font-size: .84rem; margin-left: auto; padding-left: 12px; flex-shrink: 0; }
.palette-empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: .93rem; }
.palette-foot { margin: 0; padding: 10px 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: .78rem; display: flex; align-items: center; gap: 5px; }
.palette-foot kbd { margin-right: 2px; }

/* ---------- TOAST ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px);
  background: var(--text); color: var(--bg); padding: 11px 19px; border-radius: 11px;
  font-size: .91rem; font-weight: 500; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 200;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- AUDIENCE SWITCHER ---------- */
.audience-bar { background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 11px 0 12px; }
.audience-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.audience-label {
  font-size: .71rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: var(--muted); flex-shrink: 0;
}
.audience-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.audience-chip {
  font: inherit; font-size: .855rem; font-weight: 500; cursor: pointer;
  padding: 5px 13px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); transition: border-color .15s ease, color .15s ease;
}
.audience-chip:hover { border-color: var(--border-strong); color: var(--text); }
.audience-chip[aria-pressed="true"] {
  background: var(--ocean-soft); border-color: color-mix(in srgb, var(--ocean) 55%, var(--border));
  color: var(--ocean); font-weight: 600;
}
.audience-share {
  margin-left: auto; font: inherit; font-size: .82rem; font-weight: 500;
  background: none; border: 0; cursor: pointer; color: var(--muted); white-space: nowrap;
}
.audience-share:hover { color: var(--accent); }
.audience-blurb { margin: 8px auto 0; color: var(--muted); font-size: .86rem; }

/* "Start here" flag on the lessons an audience leads with */
.tag-feature { background: var(--ocean-soft); color: var(--ocean); }
.tag-check { background: var(--gold-soft); color: var(--gold); }
.chip-feature[aria-pressed="false"] { border-color: color-mix(in srgb, var(--ocean) 40%, var(--border)); color: var(--ocean); }
.chip-feature[aria-pressed="true"] { background: var(--ocean); border-color: var(--ocean); color: #fff; }

/* ---------- CHECK YOUR UNDERSTANDING ---------- */
/* One component, three homes: the lesson dialog, Term match and Would you send it? */
.quiz { display: flex; flex-direction: column; gap: 14px; }
.quiz-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.quiz-meta { flex-shrink: 0; display: inline-flex; align-items: baseline; gap: 10px; }
.quiz-streak {
  white-space: nowrap; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 9px;
}
.quiz-streak[hidden] { display: none; }
.quiz-streak.bump { animation: streak-bump .5s cubic-bezier(.16,1,.3,1); }
@keyframes streak-bump { 0% { transform: scale(.6); opacity: 0; } 55% { transform: scale(1.12); opacity: 1; } }
.quiz-step { flex-shrink: 0; white-space: nowrap; font-size: .76rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.quiz-q { font-weight: 600; font-size: 1rem; margin: 0; line-height: 1.45; }
.quiz-options { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.quiz-option {
  width: 100%; text-align: left; font: inherit; font-size: .93rem; cursor: pointer;
  display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-2); transition: border-color .15s ease, background .15s ease;
}
.quiz-option:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.quiz-option:disabled { cursor: default; }
.quiz-option .mark {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; margin-top: 1px;
  border: 1px solid var(--border-strong); display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; color: var(--muted);
}
.quiz-option.is-correct { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.quiz-option.is-correct .mark { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.quiz-option.is-wrong { border-color: var(--coral); background: var(--coral-soft); color: var(--text); }
.quiz-option.is-wrong .mark { background: var(--coral); border-color: var(--coral); color: #fff; }
.quiz-option .mark svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* The stamp. A right pick presses down like the ʻohe kāpala hitting paper:
   the row dips, the mark lands from a slight lift, violet floods out from it
   across the row, the tick inks in and a few flecks spatter off the mark.
   Every resting style is the finished state, so reduced motion (which
   collapses durations) simply shows the answer stamped. */
.quiz-option.just-stamped {
  position: relative; isolation: isolate;
  background: var(--surface);
  animation: stamp-press .38s cubic-bezier(.3,0,.2,1);
}
.quiz-option.just-stamped::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--accent-soft);
  animation: stamp-flood .7s cubic-bezier(.16,1,.3,1) .08s backwards;
}
.quiz-option.just-stamped .mark { position: relative; animation: stamp-land .38s cubic-bezier(.3,0,.2,1); }
.quiz-option.just-stamped .mark svg path { stroke-dasharray: 24; animation: stamp-ink .32s cubic-bezier(.16,1,.3,1) .16s backwards; }
.quiz-option .ink, .seal .ink {
  position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px;
  border-radius: 50%; pointer-events: none; opacity: 0; color: var(--accent);
  box-shadow:
    0 -17px 0 0, 13px -11px 0 -.5px, 17px 2px 0 .5px, 10px 14px 0 -.5px,
    -4px 17px 0 0, -15px 8px 0 -.5px, -16px -6px 0 .5px, -7px -16px 0 -1px;
  animation: stamp-fleck .6s cubic-bezier(.16,1,.3,1) .1s backwards;
}
@keyframes stamp-press {
  0% { transform: scale(1); }
  40% { transform: scale(.975); }
  100% { transform: scale(1); }
}
@keyframes stamp-land {
  0% { transform: translateY(-3px) scale(1.35) rotate(-10deg); }
  45% { transform: scale(.88) rotate(0); }
  100% { transform: none; }
}
@keyframes stamp-flood { from { clip-path: circle(0 at 24px 50%); } to { clip-path: circle(140% at 24px 50%); } }
@keyframes stamp-ink { from { stroke-dashoffset: 24; } }
@keyframes stamp-fleck {
  from { opacity: 1; transform: scale(.35); }
  60% { opacity: .9; }
  to { opacity: 0; transform: scale(1.15); }
}

/* Sealed result (80% or better). The tally fills pip by pip, then the seal
   stamps down at --land and Violet Wash floods out from it, the same motion
   as a right answer, one size up. */
.quiz-sealed {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
  padding: 22px 24px; border-radius: var(--radius-md);
}
.quiz-sealed::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--accent-soft);
  animation: seal-flood .9s cubic-bezier(.16,1,.3,1) calc(var(--land) + 60ms) backwards;
}
.seal {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 2px 4px rgba(26,0,45,.08), 0 8px 18px rgba(26,0,45,.14);
  animation: seal-land .5s cubic-bezier(.3,0,.2,1) var(--land) backwards;
}
.seal::before {                       /* the stamp's pressed rim */
  content: ''; position: absolute; inset: 5px; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--accent-ink) 55%, transparent);
}
.seal svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.seal svg path { stroke-dasharray: 24; animation: stamp-ink .4s cubic-bezier(.16,1,.3,1) calc(var(--land) + 180ms) backwards; }
.seal .ink { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; animation:seal-fleck .75s cubic-bezier(.16,1,.3,1) calc(var(--land) + 120ms) backwards; }
.sealed-body { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sealed-score {
  margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  font: 700 1.6rem/1.15 var(--font-display); letter-spacing: -.022em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sealed-score:focus { outline: none; }   /* focused only so screen readers start here; not a control */
.quiz-sealed.is-perfect .sealed-score b { color: var(--accent); }
.sealed-score b { font-weight: inherit; }
.sealed-pct { font: 600 .95rem var(--font-body); letter-spacing: 0; color: var(--text-2); }
.sealed-best {
  align-self: center; font: 700 .72rem var(--font-body); letter-spacing: 0;
  color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 3px 10px;
  animation: streak-bump .5s cubic-bezier(.16,1,.3,1) calc(var(--land) + 200ms) backwards;
}
.sealed-note { margin: 0; color: var(--text-2); font-size: .93rem; line-height: 1.55; }
.tally { list-style: none; margin: 2px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tally li {
  width: 10px; height: 10px; border-radius: 50%;
  animation: pip-in .4s cubic-bezier(.16,1,.3,1) var(--d) backwards;
}
.tally .is-right { background: var(--accent); }
.tally .is-miss { border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent); }
@keyframes pip-in { from { opacity: 0; transform: scale(0); } 60% { transform: scale(1.3); } }
@keyframes seal-land {
  0% { opacity: 0; transform: translateY(-12px) scale(1.5) rotate(-14deg); }
  40% { opacity: 1; transform: scale(.9) rotate(0); }
  100% { transform: none; }
}
@keyframes seal-flood { from { clip-path: circle(0 at 56px 54px); } to { clip-path: circle(150% at 56px 54px); } }
@keyframes seal-fleck {
  from { opacity: 1; transform: scale(.9); }
  60% { opacity: .9; }
  to { opacity: 0; transform: scale(2.4); }
}
@media (max-width: 420px) {
  .quiz-sealed { gap: 14px; padding: 18px 16px; }
  .seal { width: 52px; height: 52px; }
  .seal svg { width: 24px; height: 24px; }
  .sealed-score { font-size: 1.35rem; }
  @keyframes seal-flood { from { clip-path: circle(0 at 42px 44px); } to { clip-path: circle(150% at 42px 44px); } }
}

@media (prefers-reduced-motion: reduce) {
  /* the global rule shortens durations but not delays; drop the stamp outright */
  .quiz-option.just-stamped, .quiz-option.just-stamped::before, .quiz-option.just-stamped .mark,
  .quiz-option.just-stamped .mark svg path, .quiz-option .ink, .quiz-streak.bump,
  .quiz-sealed::before, .seal, .seal svg path, .seal .ink, .sealed-best, .tally li { animation: none; }
}
.quiz-why {
  margin: 0; padding: 13px 15px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); font-size: .91rem; line-height: 1.55;
}
.quiz-why strong { color: var(--text); }
.quiz-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.quiz-score { font-size: .88rem; color: var(--muted); margin: 0; }
.quiz-score strong { color: var(--text); font-family: var(--font-display); font-size: 1.05rem; }

/* ---------- PRACTICE ---------- */
.practice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 18px; }
.practice-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px; display: flex; flex-direction: column; gap: 12px;
}
.practice-card > h3 { font-size: 1.16rem; margin: 0; }
.practice-tag {
  align-self: flex-start; font-size: .69rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 3px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
}
.practice-blurb { color: var(--text-2); font-size: .93rem; margin: 0; }
.practice-body { display: flex; flex-direction: column; gap: 13px; }
.practice-note { color: var(--muted); font-size: .8rem; margin: 0; line-height: 1.5; }
.practice-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto; padding-top: 4px; }
.practice-foot a { font-size: .84rem; font-weight: 600; color: var(--accent); }

/* Token chopper */
.tok-field {
  width: 100%; min-height: 88px; resize: vertical; padding: 12px 14px;
  font: inherit; font-size: .95rem; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.tok-field:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.tok-out {
  display: flex; flex-wrap: wrap; gap: 3px; padding: 13px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  min-height: 56px; align-content: flex-start;
}
.tok {
  font-family: var(--font-mono); font-size: .82rem; padding: 2px 5px;
  border-radius: 4px; white-space: pre; color: var(--text);
}
.tok-0 { background: var(--accent-soft); }
.tok-1 { background: var(--gold-soft); }
.tok-2 { background: var(--ocean-soft); }
.tok-3 { background: var(--coral-soft); }
.tok-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.tok-stat { display: flex; align-items: baseline; gap: 7px; font-size: .84rem; color: var(--muted); }
.tok-stat strong { font-family: var(--font-display); font-size: 1.25rem; color: var(--text); font-variant-numeric: tabular-nums; }

/* Roll the dice */
.dice-stem {
  font-family: var(--font-mono); font-size: .92rem; padding: 12px 14px; margin: 0;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text);
}
.dice-stem .caret { color: var(--accent); font-weight: 700; }
.dice-options { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.dice-option {
  position: relative; width: 100%; font: inherit; font-size: .9rem; cursor: pointer; text-align: left;
  padding: 9px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.dice-option:hover:not(:disabled) { border-color: var(--accent); }
.dice-option:disabled { cursor: default; }
.dice-option .fill {
  position: absolute; inset: 0 auto 0 0; background: var(--accent-soft);
  transition: width .4s ease; z-index: 0;
}
.dice-option .word, .dice-option .pct { position: relative; z-index: 1; }
.dice-option .word { font-weight: 500; }
.dice-option .pct { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .82rem; }
.dice-option.is-picked { border-color: var(--accent); }
.dice-option.is-picked .word::after { content: " ← your pick"; color: var(--muted); font-size: .78rem; font-weight: 400; }
.dice-option.is-rolled { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.dice-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.dice-temp { display: flex; align-items: center; gap: 9px; flex: 1 1 220px; min-width: 180px; }
.dice-temp label { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.dice-temp input { flex: 1; accent-color: var(--accent); min-width: 90px; }
.dice-temp .val { font-family: var(--font-mono); font-size: .82rem; color: var(--text); width: 2.4em; text-align: right; }
.dice-result { margin: 0; font-size: .91rem; color: var(--text-2); }
.dice-result strong { color: var(--text); }
.dice-tally { margin: 0; font-size: .84rem; color: var(--muted); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .module-grid { grid-template-columns: 1fr; max-width: 620px; }
}

@media (max-width: 760px) {
  .site-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; gap: 0; background: var(--bg);
    border-bottom: 1px solid var(--border); padding: 8px 16px 16px;
    box-shadow: var(--shadow-md); display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 10px; font-size: 1rem; border-radius: 10px; }
  .menu-btn { display: grid; }
  .search-trigger-text, .search-trigger kbd { display: none; }
  .search-trigger { padding: 8px; }
  .header-actions { margin-left: auto; }

  .hero { padding: 42px 0 0; }
  .hero-inner::after { margin-top: 32px; }
  .section { padding: 54px 0; }
  .timeline::before { left: 5px; }
  .timeline li { grid-template-columns: 1fr; gap: 4px; padding-left: 26px; }
  .t-time { text-align: left; }
  .t-body::before { left: -26px; top: 6px; }
  .hq-card { padding: 22px 20px 20px; }
  .hq-option { padding: 13px 15px; }
}

@media (max-width: 420px) {
  .hq-actions .btn { width: 100%; }
  .hq-bars i { width: 22px; }
}

/* ---------- MOTION / PRINT ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .site-header, .placement, .art-toc, .art-poster .play, .toolbar, .to-top, .palette-backdrop, .toast, .skip-link, .audience-bar, #practice { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding: 18px 0; page-break-inside: avoid; }
  .art-section, .prompt-card, .term-card { break-inside: avoid; }
}

/* Reveal-on-scroll.
   Content is visible by DEFAULT. The hiding only applies once app.js adds
   .js-anim to <html>, which it does only when it can guarantee the reveal
   runs. If scripting fails at any point, the page still reads normally. */
:root.js-anim .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
:root.js-anim .reveal.in { opacity: 1; transform: none; }
@media print { :root.js-anim .reveal { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  :root.js-anim .reveal { opacity: 1; transform: none; }
}

/* hero text column: allow it to shrink inside the grid */
.hero-copy { min-width: 0; }

/* small note under the "no recording yet" placeholder, aimed at whoever runs the page */
.facilitator-hint { font-size: .78rem; color: var(--muted); margin: 4px 0 0; }
.facilitator-hint code { font-size: .74rem; }

/* audience switcher + practice cards on narrow screens */
@media (max-width: 760px) {
  .audience-inner { gap: 8px 10px; }
  .audience-share { margin-left: 0; }
  .practice-grid { grid-template-columns: 1fr; }
  .practice-card { padding: 18px; }
  .dice-temp { flex-basis: 100%; }
}

/* Seven nav items need more room than six. Between the mobile menu and a
   wide desktop, tighten the links and drop the search label. */
@media (min-width: 761px) and (max-width: 1040px) {
  .site-nav a { padding: 7px 8px; font-size: .875rem; }
  .search-trigger-text, .search-trigger kbd { display: none; }
  .search-trigger { padding: 8px; }
}



/* a resource that is announced but not linked yet (pending: true) */
.resource-link.is-pending { border-style: dashed; color: var(--muted); cursor: default; }
.resource-link.is-pending:hover { transform: none; border-color: var(--border); }
.resource-link.is-pending svg { color: var(--muted); }
.resource-link.is-pending strong { font-weight: 600; }
/* needs .resource-link in the selector to outrank `.resource-link span` above */
.resource-link .pending-badge {
  margin-left: auto; align-self: flex-start; flex-shrink: 0; white-space: nowrap;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 8px; border-radius: 999px; background: var(--gold-soft); color: var(--gold);
}

/* ---------- Invent a citation ---------- */
.cite-label { font-size: .82rem; color: var(--muted); font-weight: 600; }
.cite-select {
  width: 100%; font: inherit; font-size: .92rem; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.cite-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.cite-out {
  position: relative; padding: 16px; min-height: 84px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.cite-stamp {
  position: absolute; top: 10px; right: 10px;
  font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
  color: var(--coral); border: 1.5px solid var(--coral); border-radius: 4px;
  padding: 2px 7px; transform: rotate(4deg); opacity: .85;
}
.cite-ref { margin: 0; padding-right: 76px; font-size: .93rem; line-height: 1.6; color: var(--text); }
.cite-f {
  background: var(--gold-soft); color: var(--text);
  border-radius: 3px; padding: 0 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ---------- How much did it read? ---------- */
.corpus-qs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.corpus-q {
  font: inherit; font-size: .84rem; cursor: pointer; text-align: left;
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2);
}
.corpus-q:hover { border-color: var(--border-strong); color: var(--text); }
.corpus-q.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.corpus-meters { display: flex; flex-direction: column; gap: 12px; }
.corpus-meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 5px; }
.corpus-meter-top span { font-size: .84rem; color: var(--text-2); }
.corpus-meter-top strong { font-family: var(--font-display); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.corpus-track { height: 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.corpus-fill { display: block; height: 100%; border-radius: 999px; transition: width .45s cubic-bezier(.4,0,.2,1); }
.corpus-read { background: var(--accent); }
.corpus-sure { background: var(--coral); }
.corpus-punch {
  margin: 0; padding: 13px 15px; border-radius: var(--radius-sm);
  background: var(--coral-soft); border-left: 3px solid var(--coral);
  color: var(--text-2); font-size: .91rem; line-height: 1.55;
}

/* ---------- Practice: demos and quizzes are separate ---------- */
#practiceGrid { display: flex; flex-direction: column; gap: 40px; }
.practice-grid-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 18px; }
.practice-group-head { margin-bottom: 16px; }
.practice-group-head h3 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); font-family: var(--font-body); font-weight: 700; margin: 0 0 4px;
}
.practice-group-head p { margin: 0; color: var(--text-2); font-size: .95rem; }
@media (max-width: 760px) { .practice-grid-inner { grid-template-columns: 1fr; } }

/* ---------- Chart series colours ----------
   Categorical pair for the two-series meters. NOT the UI --accent/--coral:
   those fail the colourblind-separation and chroma checks as a data pair.
   These steps pass all six checks of the dataviz validator against each
   mode's surface. Re-run it before changing them:
     node scripts/validate_palette.js "#6b2f96,#b4452c" --mode light
     node scripts/validate_palette.js "#a86fd6,#d4634a" --mode dark      */
:root { --viz-read: #6b2f96; --viz-sure: #b4452c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --viz-read: #a86fd6; --viz-sure: #d4634a; }
}
:root[data-theme="dark"] { --viz-read: #a86fd6; --viz-sure: #d4634a; }

/* ---------- How much did it read? ---------- */
.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;
}
.cq-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .82rem; color: var(--text-2); }
.cq-legend span { display: inline-flex; align-items: center; gap: 7px; }
.cq-key { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.cq-key.cq-read { background: var(--viz-read); }
.cq-key.cq-sure { background: var(--viz-sure); }

.cq-table { width: 100%; border-collapse: collapse; }
.cq-table th, .cq-table td { padding: 7px 0; vertical-align: middle; text-align: left; font-weight: 400; }
.cq-table th { width: 42%; padding-right: 14px; }
.cq-table th button {
  font: inherit; font-size: .87rem; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 0; color: var(--text-2); line-height: 1.35;
}
.cq-table th button:hover { color: var(--text); text-decoration: underline; }
.cq-row.is-open th button { color: var(--text); font-weight: 600; }

/* 2px surface gap between the two fills, per the mark spec */
.cq-bars { display: flex; flex-direction: column; gap: 2px; }
.cq-bar { display: block; height: 9px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cq-fill { display: block; height: 100%; border-radius: 999px; transition: width .4s cubic-bezier(.4,0,.2,1); }
.cq-fill.cq-read { background: var(--viz-read); }
.cq-fill.cq-sure { background: var(--viz-sure); }

.cq-nums { width: 46px; text-align: right; }
.cq-n { display: block; font-size: .76rem; font-variant-numeric: tabular-nums; line-height: 1.5; }
.cq-n-read { color: var(--viz-read); font-weight: 600; }
.cq-n-sure { color: var(--viz-sure); font-weight: 600; }
.cq-row.is-open .cq-bar { box-shadow: 0 0 0 1px var(--border-strong); }

@media (max-width: 560px) {
  .cq-table th { width: 50%; }
  .cq-table th button { font-size: .82rem; }
}

/* ---------- Spot the real one ---------- */
.ref-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ref {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-2); transition: border-color .15s ease, background .15s ease;
}
.ref:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.ref:disabled { cursor: default; }
.ref-mark {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; margin-top: 1px;
  border: 1px solid var(--border-strong); display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; color: var(--muted);
}
.ref-body { font-size: .89rem; line-height: 1.55; }
.ref-authors { font-weight: 600; color: var(--text); }
.ref-verdict {
  display: inline-block; margin-top: 6px; font-size: .66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .11em; padding: 2px 7px; border-radius: 4px;
}
.ref.is-real { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.ref.is-real .ref-mark { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ref.is-real .ref-verdict { background: var(--accent); color: var(--accent-ink); }
.ref.is-fake { border-style: dashed; }
.ref.is-fake .ref-verdict { border: 1.5px solid var(--coral); color: var(--coral); }
.ref.is-picked { box-shadow: 0 0 0 2px var(--border-strong); }
.ref.is-fake.is-picked { box-shadow: 0 0 0 2px var(--coral); }

/* ---------- Practice: one band per module, one row per activity ---------- */
.practice-rows { display: flex; flex-direction: column; gap: 16px; }
.practice-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.practice-kind {
  font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  padding: 3px 9px; border-radius: 999px;
}
.practice-kind.is-demo { background: var(--accent); color: var(--accent-ink); }
.practice-kind.is-quiz { background: var(--ocean-soft); color: var(--ocean); border: 1px solid color-mix(in srgb, var(--ocean) 35%, transparent); }
.practice-group-head h3 { font-size: .95rem; text-transform: none; letter-spacing: 0; color: var(--text); font-family: var(--font-display); }
.practice-group-head p { max-width: 74ch; }

/* At desktop width a full-width card can breathe two-up inside itself */
@media (min-width: 900px) {
  .practice-card { padding: 24px 26px; }
}

/* ===================== FEEDBACK WIDGET =====================
   The one part of this page that transmits anything. Styled to sit
   quietly: it should be findable when somebody is annoyed, and
   invisible the rest of the time. Hidden entirely when printing.
   ----------------------------------------------------------- */
.fb-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 150;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 13px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 70%, #000);
  font-family: inherit; font-size: .88rem; font-weight: 600;
  box-shadow: var(--shadow-lg); cursor: pointer;
  transition: transform .16s ease, background .16s ease;
}
.fb-fab:hover { background: var(--accent-hover); transform: translateY(-1px); }
.fb-fab:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.fb-fab svg { width: 17px; height: 17px; }
/* The toast is centred at the same height, so on narrow screens the label
   drops and the button shrinks to its icon rather than overlapping it. */
@media (max-width: 560px) {
  .fb-fab { right: 14px; bottom: 14px; padding: 11px; }
  .fb-fab span { display: none; }
}

.fb-dialog {
  width: min(560px, calc(100vw - 32px)); padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
}
.fb-dialog::backdrop { background: rgba(10,12,16,.55); backdrop-filter: blur(3px); }
.fb-form { padding: 26px 26px 22px; display: grid; gap: 0; }
.fb-title { font-size: 1.25rem; margin-bottom: 6px; padding-right: 30px; }
.fb-blurb { font-size: .9rem; line-height: 1.55; margin-bottom: 18px; max-width: 46ch; }

.fb-kinds { border: 0; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.fb-kind { position: relative; }
.fb-kind input { position: absolute; opacity: 0; width: 0; height: 0; }
.fb-kind span {
  display: block; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: .85rem; font-weight: 500; color: var(--text-2);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.fb-kind span:hover { border-color: var(--border-strong); color: var(--text); }
.fb-kind input:checked + span {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600;
}
.fb-kind input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

.fb-label { display: block; font-size: .83rem; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.fb-textarea, .fb-input {
  width: 100%; font: inherit; font-size: .93rem; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 13px; resize: vertical;
}
.fb-textarea:focus, .fb-input:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.fb-textarea[aria-invalid="true"] { border-color: var(--coral); }
.fb-count { font-size: .74rem; color: var(--muted); text-align: right; margin: 5px 0 14px; }
.fb-input { margin-bottom: 16px; }

.fb-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fb-status { font-size: .84rem; color: var(--muted); }
.fb-status.is-error { color: var(--coral); }
.fb-status.is-ok { color: var(--accent); font-weight: 600; }

@media print { .fb-fab, .fb-dialog { display: none !important; } }

/* ===================== MODULE ARTICLE =====================
   One page per module: a big module number beside the title,
   the reading column on the left, "In this module" on the
   right, then practice and the next module.
   ----------------------------------------------------------- */
.art-head {
  display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 30px; align-items: center;
  padding: 52px 0 44px; margin-bottom: 46px; border-bottom: 1px solid var(--border);
}
/* Centred on the header copy both ways. text-box trims the line box to the
   numeral's cap height, so the box is the ink and centring the box centres
   the figure; browsers without it get the same result from line-height 0.73,
   which is the Montserrat cap height. */
.art-num {
  font: 800 10.5rem/.73 var(--font-display); letter-spacing: 0; color: var(--accent);
  justify-self: center; text-align: center;
  text-box: trim-both cap alphabetic;
}
.crumb { font-size: .9rem; color: var(--muted); margin: 0 0 10px; }
.crumb a { font-weight: 600; text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.art-head h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); margin-bottom: 14px; text-wrap: balance; }
.art-head h1:focus { outline: none; }
.art-lede { font-size: 1.15rem; color: var(--text-2); max-width: 58ch; margin: 0; }
.art-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 16px 0 0; font-size: .9rem; color: var(--muted); }
.art-facts strong { color: var(--text-2); font-variant-numeric: tabular-nums; }

.art-layout { display: grid; grid-template-columns: minmax(0, 700px) 250px; gap: 70px; padding-bottom: 90px; }
.art-body { grid-column: 1; grid-row: 1; min-width: 0; font-size: 1.03rem; line-height: 1.72; }
.art-section { scroll-margin-top: 4px; margin-bottom: 52px; }
.art-part { scroll-margin-top: 4px; margin-top: 30px; }
.art-body h2 { font-size: clamp(1.45rem, 2.6vw, 1.75rem); margin-bottom: 14px; }
.art-body h3 { font-size: 1.2rem; margin: 0 0 10px; }
.art-body p { color: var(--text-2); }
.art-body p strong, .art-body li strong { color: var(--text); }
.art-list, .art-steps { padding-left: 1.3em; margin: 0 0 1.1em; color: var(--text-2); }
.art-list li, .art-steps li { margin-bottom: .55em; padding-left: .2em; }
.art-steps li::marker { color: var(--accent); font-weight: 700; font-family: var(--font-display); }

.art-table { overflow-x: auto; margin: 6px 0 1.2em; border: 1px solid var(--border); border-radius: var(--radius); }
.art-table table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.art-table th, .art-table td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.art-table tbody tr:last-child th, .art-table tbody tr:last-child td { border-bottom: 0; }
.art-table thead th { background: var(--surface-2); font-size: .85rem; color: var(--text-2); }
.art-table tbody th { font-weight: 600; color: var(--text); width: 42%; }
.art-table td { color: var(--text-2); }

.art-video { margin: 24px 0 28px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.art-poster { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: pointer; background: #000; }
.art-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s ease; }
.play {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--accent); box-shadow: var(--shadow-md);
  transition: transform .18s ease;
}
.play svg { width: 21px; height: 21px; margin-left: 3px; }
.art-poster .play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; }
.art-poster .play svg { width: 24px; height: 24px; }
.art-poster:hover img { opacity: .88; }
.art-poster:hover .play { transform: scale(1.08); }
.art-poster:focus-visible { outline-offset: -4px; border-radius: 0; }
.art-video figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; font-size: .86rem; color: var(--text-2); line-height: 1.45; }
.art-video figcaption span:last-child { color: var(--muted); }
.art-video .video-standin { border-top: 1px solid var(--border); }
/* The follow-on explainer. Same bar as the stand-in notice, because it is
   the same kind of thing: a note about the video, not part of it. */
.art-deeper { margin: 0; border-top: 1px solid var(--border); padding: 11px 16px;
  font-size: .86rem; color: var(--muted); line-height: 1.45; }
.art-deeper a { color: var(--text-2); }

/* Films shot vertically. The file is still 16:9 with black bars either side,
   so the frame is given the real 9:16 shape (inline, from the lesson) and the
   video fills it: `cover` crops the bars off exactly, because the bars are
   symmetrical and what is left is precisely 9:16. Nothing is re-encoded. */
.art-poster.is-portrait,
.video-frame.is-portrait { max-width: min(100%, 420px); margin-inline: auto; }
.video-frame.is-portrait video { object-fit: cover; }

.takeaway { background: var(--accent-soft); border-radius: var(--radius); padding: 18px 22px; margin: 8px 0 0; }
.takeaway p { margin: 0; color: var(--text); font-weight: 500; }
.takeaway .takeaway-label { font-size: .88rem; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.art-cite { font-size: .84rem; color: var(--muted); margin: 14px 0 0; }

.art-practice { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 32px; }
.art-practice-sub { margin-bottom: 8px; }
.art-practice h3 { margin-top: 26px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.art-practice h3 .quiz-step { font-family: var(--font-body); font-weight: 500; }
.art-practice h2 .quiz-step { margin-left: 6px; font-family: var(--font-body); font-weight: 500; letter-spacing: 0; vertical-align: middle; }
/* A hands-on demo inside the section it illustrates. */
.art-demo { margin: 24px 0 28px; }
.art-demo .practice-card { box-shadow: none; }
.art-demo .practice-tag { display: none; }   /* the section already says which topic */
.practice-card > h4 { font-size: 1.12rem; margin: 0; }

.art-next {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin: 0 0 52px; padding: 26px 30px; border-radius: var(--radius-lg);
  background: var(--accent); color: var(--accent-ink); text-decoration: none;
  transition: background .15s ease;
}
.art-next:hover { background: var(--accent-hover); color: var(--accent-ink); }
.art-next small { display: block; font-size: .88rem; color: color-mix(in srgb, var(--accent-ink) 80%, transparent); }
.art-next strong { font: 700 1.5rem/1.2 var(--font-display); letter-spacing: -.02em; }
.art-next-cta { background: var(--accent-ink); color: var(--accent); font-weight: 600; padding: 11px 20px; border-radius: 11px; }

.art-sources h2 { font-size: 1.1rem; margin-bottom: 10px; }
.art-sources ol { padding-left: 1.3em; margin: 0; font-size: .86rem; line-height: 1.55; color: var(--text-2); }
.art-sources li { margin-bottom: .6em; }
.art-sources a { word-break: break-word; }

.art-toc {
  grid-column: 2; grid-row: 1;
  position: sticky; top: calc(var(--header-h) + 30px); align-self: start;
  border-left: 3px solid var(--accent-soft); padding-left: 16px; font-size: .9rem;
}
.art-toc-title { font-weight: 700; color: var(--text); margin: 0 0 8px; }
/* Sits on the rail's 3px rule and glides to the section being read. */
.art-toc-marker {
  position: absolute; left: -3px; top: 0; width: 3px; height: 0; border-radius: 3px;
  background: var(--accent); opacity: 0; pointer-events: none;
  transition: transform .45s cubic-bezier(.16,1,.3,1), height .45s cubic-bezier(.16,1,.3,1), opacity .2s ease;
}
.art-toc ol { list-style: none; padding: 0; margin: 0; }
.art-toc a { display: block; padding: 5px 0; color: var(--text-2); text-decoration: none; line-height: 1.4; }
.art-toc a:hover { color: var(--accent); }
.art-toc a { display: flex; align-items: baseline; gap: 8px; }
.art-toc a.is-read { color: var(--muted); }
.art-toc a.just-read::after { animation: tick-in .45s cubic-bezier(.16,1,.3,1); }
@keyframes tick-in { from { opacity: 0; transform: scale(.4) rotate(-12deg); } }
.art-toc a.is-read::after {
  content: ""; width: 13px; height: 13px; flex-shrink: 0; align-self: center; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat;
}
.art-toc a.is-current { color: var(--accent); font-weight: 700; }
.art-status { color: var(--accent); font-weight: 600; }
.art-status:empty { display: none; }
.art-toc-practice { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

@media (max-width: 980px) {
  .art-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* On a narrow screen the contents list comes first, as a plain list. */
  .art-body, .art-toc { grid-column: 1; grid-row: auto; }
  /* `top: auto` matters: the sticky offset above would otherwise shift a
     relative box 92px down, onto the first heading. */
  .art-toc { position: relative; top: auto; margin-bottom: 40px; }
}
@media (max-width: 760px) {
  .art-head { grid-template-columns: 1fr; gap: 6px; padding: 34px 0 30px; margin-bottom: 30px; }
  .art-num { font-size: 5.5rem; justify-self: start; text-align: left; margin-bottom: 14px; }
  .art-practice { padding: 22px 18px; }
  .art-next { padding: 22px 20px; }
  .art-video figcaption { flex-direction: column; gap: 2px; }
}

/* ===================== PAGE TRANSITIONS =====================
   Home, a module and Reference cross-fade when you move between them, the
   new page settling up a few pixels. The header has its own name, so it holds
   still instead of fading with the page. */
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: page-out .16s ease-in both; }
::view-transition-new(root) { animation: page-in .38s cubic-bezier(.16,1,.3,1) both; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ===================== CERTIFICATE =====================
   The sign-in form reuses the feedback dialog's shell, so only the
   issued certificate needs its own look. It is designed to print on
   one page with nothing else on it, which is the only reason the
   print block below is as blunt as it is.
   ------------------------------------------------------- */
.cert-view-dialog {
  width: min(680px, calc(100vw - 32px)); padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
}
.cert-view-dialog::backdrop { background: rgba(10,12,16,.55); backdrop-filter: blur(3px); }

.cert-sheet {
  padding: 44px 44px 36px; text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--accent-soft) 0%, transparent 62%),
    var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.cert-logo { height: 34px; width: auto; margin-bottom: 26px; }
:root[data-theme="dark"] .cert-logo { content: url("pm-lockup-white.png"); }

.cert-kicker {
  margin: 0 0 14px; font-size: .74rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .16em; color: var(--accent);
}
.cert-name {
  font-family: var(--font-display); font-size: clamp(1.7rem, 5vw, 2.5rem);
  font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
  margin: 0 0 14px; color: var(--text);
}
.cert-course { margin: 0 0 20px; font-size: 1rem; color: var(--text-2); }
.cert-course strong { color: var(--text); font-weight: 600; }
.cert-meta { margin: 0 0 26px; font-size: .86rem; color: var(--muted); }
.cert-code {
  display: inline-block; margin: 0 0 12px; padding: 7px 15px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .84rem; letter-spacing: .06em; color: var(--text-2);
}
.cert-verify { margin: 0; font-size: .74rem; color: var(--muted); max-width: 46ch; margin-inline: auto; }

.cert-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 18px 26px 22px; border-top: 1px solid var(--border); background: var(--surface-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Printing. Everything on the page is hidden and the certificate is lifted
   out of the dialog's top layer, because a modal dialog prints clipped or
   not at all depending on the browser. */
@media print {
  .no-print { display: none !important; }
  body > *:not(.cert-view-dialog) { display: none !important; }
  .cert-view-dialog[open] {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important; max-width: none !important;
    margin: 0 !important; border: 0 !important; box-shadow: none !important;
    background: #fff !important; color: #15031f !important;
  }
  .cert-view-dialog[open]::backdrop { display: none !important; }
  .cert-sheet {
    background: #fff !important; padding: 12% 10% !important; border-radius: 0 !important;
  }
  .cert-name, .cert-course strong { color: #15031f !important; }
  .cert-kicker { color: #6b2f96 !important; }
  .cert-actions { display: none !important; }
}