/* SAMR at PUFSD. Shared stylesheet for learn, examples, and tools.

   Layout: a light grey canvas with flat, spacious, rounded white cards for
   content. Cards separate from the canvas by color alone, never a border.

   Type: Figtree 600 for headings, tracked tight. Body runs on the system
   font, sized up a step from a default page for a bolder, more confident
   read.

   Color: a four-stop green ramp, one tone per SAMR level, muted to vivid.
   The same four tones repeat across every component: level cards, rung
   markers, badges, filter chips, result steps. All four pairs check at 6:1
   contrast or better.

   Interaction: three real patterns carry the content instead of long
   scrolling prose. Accordions collapse detail until asked for. Tabs switch
   panels of related content. A dialog opens on demand for the one thing
   worth a closer look. Everything backs off under prefers-reduced-motion.
*/

/* ==== TOKENS ============================================================ */
:root{
  --ink:#030303; --slate:#202020; --cloud:#D8D8D8;
  --bg:#EDEDED; --mist:#EDEDED; --field:#F5F5F5; --page:#FFFFFF;
  --surface-hover:#E2E2E2; --muted:#6B6B6B;

  --green-900:#00260C; --green-700:#036C3E; --green-600:#0B7F49; --green-100:#D9EEDF;

  --err:#B3261E; --err-bg:#FBECEB;

  /* Level ramp. Muted and neutral at S, vivid and dark at R. */
  /* Level ramp, as specified: S is deep and grounded, R is bright and open.
     All four carry white text per explicit instruction. Flagged in the
     project notes: A/M/R fall short of WCAG AA for this pairing. */
  --lvl-s-bg:#036C3E; --lvl-s-fg:#FFFFFF;
  --lvl-a-bg:#2E9640; --lvl-a-fg:#FFFFFF;
  --lvl-m-bg:#6DB94C; --lvl-m-fg:#FFFFFF;
  --lvl-r-bg:#B1D055; --lvl-r-fg:#FFFFFF;

  --text:var(--slate); --text-strong:var(--ink); --text-muted:var(--muted); --text-on-dark:#FFFFFF;
  --accent:var(--green-700); --accent-hover:var(--green-600); --accent-active:var(--green-900);
  --focus:var(--green-700);

  --font-display:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  --r-md:14px; --r-lg:20px; --r-xl:28px; --r-2xl:32px; --r-pill:999px;

  --hairline:1px solid var(--cloud);
  --ease:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.25,.64,1);
  --fast:150ms; --base:240ms; --slow:420ms;
  /* One lift scale, so every hover rise is deliberate. */
  --lift-sm:-2px; --lift-md:-4px;
  --touch:44px; --measure:64ch;
  /* Clearance under the fixed nav pill. Every page top uses this. */
  --top-clear:124px;

  --shadow-sm:0 1px 2px rgba(3,38,12,.06), 0 1px 1px rgba(3,38,12,.04);
  --shadow-md:0 8px 24px rgba(3,38,12,.10), 0 2px 6px rgba(3,38,12,.06);
  --shadow-lg:0 24px 64px rgba(3,38,12,.16), 0 8px 20px rgba(3,38,12,.09);
  --glow:0 8px 20px rgba(3,108,62,.28);
}

/* ==== BASE ============================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:17px;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0 0 var(--sp-3);color:var(--text-strong)}
h1{font-size:clamp(48px,7.2vw,80px);font-weight:700;line-height:1.02;letter-spacing:-2.5px}
h2{font-size:44px;font-weight:700;line-height:1.08;letter-spacing:-1.5px}
h3{font-size:24px;line-height:1.26;letter-spacing:-.6px}
h4{font-size:18px;line-height:1.3;letter-spacing:-.3px}

p{margin:0 0 var(--sp-4);max-width:var(--measure);color:var(--text)}
p:last-child{margin-bottom:0}
a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
a:not(.pv-btn):hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
[hidden]{display:none !important}
img,svg{max-width:100%}
.pv-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pv-label{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-muted);display:block;margin-bottom:var(--sp-2)}
.pv-caption{font-size:14px;color:var(--text-muted)}

/* ==== CARD SYSTEM =========================================================
   Everything in .s-wrap sits on the grey canvas. Major content blocks live
   in one flat, spacious, rounded white card each; the canvas shows as the
   gap between them, not as a background swap between sections. */
.s-block{background:var(--page);border-radius:var(--r-2xl);padding:var(--sp-12) var(--sp-12);
  box-shadow:var(--shadow-sm)}
.s-block--green{background:linear-gradient(155deg,var(--green-600),var(--accent));color:var(--text-on-dark)}
.s-block--green h2{color:var(--text-on-dark)}
.s-block--green p{color:var(--text-on-dark);opacity:.92}
.s-block + .s-block{margin-top:var(--sp-6)}

/* ==== BUTTONS ============================================================
   Pill shaped. Primary carries a gradient fill and lifts with a soft green
   glow on hover. Secondary is a quiet flat pill. Ghost is text only. */
.pv-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--touch);padding:11px 22px;border:0;border-radius:var(--r-pill);
  font-family:var(--font);font-size:16px;font-weight:600;line-height:1;
  text-decoration:none;cursor:pointer;transform:translateY(0);
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),
  background-color var(--fast) var(--ease),background var(--fast) var(--ease),color var(--fast) var(--ease)}
.pv-btn--primary{background:linear-gradient(135deg,var(--green-600),var(--accent) 65%);color:var(--text-on-dark);
  box-shadow:var(--shadow-sm)}
.pv-btn--primary:hover{transform:translateY(var(--lift-sm));box-shadow:var(--glow)}
.pv-btn--primary:active{transform:translateY(0) scale(.98);box-shadow:var(--shadow-sm)}
.pv-btn--secondary{background:var(--mist);color:var(--text-strong)}
.pv-btn--secondary:hover{background:var(--green-100);transform:translateY(var(--lift-sm))}
.pv-btn--secondary:active{transform:translateY(0) scale(.98)}
.pv-btn--white{background:var(--page);color:var(--accent)}
.pv-btn--white:hover{background:var(--green-100);transform:translateY(var(--lift-sm))}
.pv-btn--ghost{background:transparent;color:var(--text-muted)}
.pv-btn--ghost:hover{background:var(--mist);color:var(--text)}
.pv-btn--ghost-light{background:transparent;color:var(--text-on-dark);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.pv-btn--ghost-light:hover{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.pv-btn--small{min-height:36px;padding:8px 16px;font-size:15px}
.pv-btn:disabled{background:var(--cloud);color:var(--text-muted);cursor:not-allowed;box-shadow:none;
  transform:none}

/* ==== FIELDS ============================================================= */
.pv-field{width:100%;min-height:var(--touch);padding:11px 16px;
  background:var(--field);border:1.5px solid transparent;border-radius:var(--r-md);
  font-family:var(--font);font-size:16px;line-height:1.5;color:var(--text);
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.pv-field::placeholder{color:var(--text-muted)}
.pv-field:focus-visible{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px var(--green-100)}
textarea.pv-field{resize:vertical;min-height:140px}
.pv-help{font-size:14px;color:var(--text-muted);margin-top:var(--sp-2)}
.pv-select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23909090' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.pv-select:hover{background-color:var(--mist)}

/* ==== SEGMENTED TOGGLE ====================================================
   A pill with a sliding white thumb positioned by samr.js. Used for the
   Evaluate/Practice switch and the district-inventory tabs. The header nav
   reuses the same visual language at a slightly smaller scale. */
.pv-toggle{position:relative;display:inline-flex;flex-wrap:wrap;padding:4px;background:var(--mist);
  border-radius:var(--r-pill);gap:0}
.pv-toggle__thumb{position:absolute;top:4px;left:0;height:calc(100% - 8px);background:var(--page);
  border-radius:var(--r-pill);box-shadow:var(--shadow-sm);
  transition:transform var(--base) var(--ease-spring),width var(--base) var(--ease-spring)}
.pv-toggle button{position:relative;z-index:1;appearance:none;border:0;background:transparent;
  font-family:var(--font);font-size:15px;font-weight:600;color:var(--text-muted);min-height:38px;
  padding:0 var(--sp-5);border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;
  transition:color var(--fast) var(--ease)}
.pv-toggle button:hover{color:var(--text)}
.pv-toggle button[aria-selected="true"]{color:var(--text-strong)}
.pv-toggle button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ==== FILTER CHIPS =========================================================
   Selected state tints per SAMR level, so the chip previews the same color
   the results will carry. */
.pv-chip{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:36px;padding:0 var(--sp-4);
  border-radius:var(--r-pill);border:0;background:var(--mist);
  font-family:var(--font);font-size:15px;font-weight:600;color:var(--text);
  cursor:pointer;transform:scale(1);
  transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease),
  transform var(--fast) var(--ease)}
.pv-chip:hover{background:var(--cloud);transform:translateY(var(--lift-sm))}
.pv-chip:active{transform:scale(.96)}
.pv-chip[aria-pressed="true"]{background:var(--accent);color:var(--text-on-dark)}
.pv-chip[data-level="s"][aria-pressed="true"]{background:var(--lvl-s-bg);color:var(--lvl-s-fg)}
.pv-chip[data-level="a"][aria-pressed="true"]{background:var(--lvl-a-bg);color:var(--lvl-a-fg)}
.pv-chip[data-level="m"][aria-pressed="true"]{background:var(--lvl-m-bg);color:var(--lvl-m-fg)}
.pv-chip[data-level="r"][aria-pressed="true"]{background:var(--lvl-r-bg);color:var(--lvl-r-fg)}

/* ==== ACCORDION ============================================================
   Flat grey rows inside a white card. The panel animates open with a
   grid-rows trick so height doesn't need to be measured in JS. */
.s-acc{display:grid;gap:var(--sp-2)}
.s-acc__item{background:var(--mist);border-radius:var(--r-lg);overflow:hidden;
  transition:background-color var(--fast) var(--ease)}
.s-acc__item:hover{background:var(--surface-hover)}
.s-acc__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-6);border:0;background:transparent;cursor:pointer;text-align:left;
  font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-.3px;
  color:var(--text-strong)}
.s-acc__btn svg{flex:none;color:var(--text-muted);transition:transform var(--base) var(--ease)}
.s-acc__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.s-acc__panel{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--base) var(--ease)}
.s-acc__inner > p{opacity:0;transition:opacity var(--fast) var(--ease)}
.s-acc__btn[aria-expanded="true"] + .s-acc__panel .s-acc__inner > p{opacity:1;
  transition:opacity var(--base) var(--ease) 80ms}
.s-acc__btn[aria-expanded="true"] + .s-acc__panel{grid-template-rows:1fr}
.s-acc__inner{overflow:hidden}
.s-acc__inner p{margin:0;padding:0 var(--sp-6) var(--sp-5);max-width:none;color:var(--text-muted);
  font-size:16px}

/* ==== DIALOG ================================================================
   Native <dialog> for the level-detail modal: built-in focus trap, ESC to
   close, and a real backdrop, no JS reimplementation needed. */
dialog.s-dialog{width:min(560px,calc(100vw - 40px));border:0;border-radius:var(--r-2xl);
  padding:0;box-shadow:var(--shadow-lg);color:var(--text)}
dialog.s-dialog::backdrop{background:rgba(0,0,0,.55)}
dialog.s-dialog[open]{animation:s-dlgin 260ms cubic-bezier(.16,1,.3,1)}
dialog.s-dialog[open]::backdrop{animation:s-bgin 260ms ease}
/* Closing plays in reverse, choreographed from JS: a class is added, the
   dialog is left open for the duration of this animation, then the real
   close() call lands once it finishes. Same specificity as the [open]
   rules above, so source order below is what makes this win while active. */
dialog.s-dialog.is-closing{animation:s-dlgout 200ms ease forwards}
dialog.s-dialog.is-closing::backdrop{animation:s-bgout 200ms ease forwards}
@keyframes s-dlgin{from{opacity:0;transform:translateY(14px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes s-dlgout{from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes s-bgin{from{opacity:0}to{opacity:1}}
@keyframes s-bgout{from{opacity:1}to{opacity:0}}
.s-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-8) var(--sp-8) 0}
.s-dialog__badges{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.s-dialog__letter{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;padding:6px 14px;border-radius:var(--r-pill);display:inline-block}
.s-dialog__half{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-muted)}
.s-dialog__close{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--field);
  color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.s-dialog__close:hover{background:var(--cloud);color:var(--text)}
.s-dialog__body{padding:var(--sp-6) var(--sp-8) var(--sp-8)}
.s-dialog__body h2{font-size:34px;letter-spacing:-1.2px;margin-bottom:var(--sp-3)}
.s-dialog__q{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-.4px;
  color:var(--accent);margin-bottom:var(--sp-4)}
.s-dialog__body h3{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:var(--sp-2)}
.s-dialog__body p{font-size:16px}
.s-dialog__block{background:var(--field);border-radius:var(--r-lg);padding:var(--sp-5);margin-top:var(--sp-5)}
.s-dialog__block p{margin:0}
.s-dialog__block--tell{background:var(--green-100)}
.s-dialog__block--tell h3{color:var(--accent-active)}

/* ==== ALERT ================================================================= */
.pv-alert{display:flex;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);
  font-size:15px;margin-top:var(--sp-4)}
.pv-alert svg{flex:none;margin-top:1px}
.pv-alert--err{background:var(--err-bg);color:var(--err)}

/* ==== BADGES ================================================================= */
.pv-badge{display:inline-flex;align-items:center;padding:5px 13px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;line-height:1.4}
.pv-badge--neutral{background:var(--mist);color:var(--slate)}
.pv-badge--s{background:var(--lvl-s-bg);color:var(--lvl-s-fg)}
.pv-badge--a{background:var(--lvl-a-bg);color:var(--lvl-a-fg)}
.pv-badge--m{background:var(--lvl-m-bg);color:var(--lvl-m-fg)}
.pv-badge--r{background:var(--lvl-r-bg);color:var(--lvl-r-fg)}

/* ==== PROGRESS ================================================================ */
.pv-progress{height:7px;border-radius:var(--r-pill);background:var(--cloud);overflow:hidden}
.pv-progress__bar{height:100%;border-radius:var(--r-pill);width:0;background:var(--accent);
  transition:width var(--slow) var(--ease)}

/* ==== EMPTY STATE ============================================================= */
.pv-empty{text-align:center;padding:var(--sp-16) var(--sp-5)}
.pv-empty h2,.pv-empty h3{margin-bottom:var(--sp-2)}
.pv-empty p{margin:0 auto var(--sp-4);color:var(--text-muted);max-width:40ch}

/* ==== SITE CHROME =============================================================
   No header bar. The nav is one floating pill, fixed top center, holding the
   brand and the three links. Content scrolls underneath it. On small screens
   the pill yields to the bottom tab bar and a static brand row. */
.s-skip{position:absolute;left:var(--sp-4);top:-60px;z-index:70;background:var(--accent);
  color:var(--text-on-dark);padding:10px 18px;border-radius:var(--r-pill);
  font-weight:600;text-decoration:none;transition:top var(--fast) var(--ease)}
.s-skip:focus{top:var(--sp-3);color:var(--text-on-dark)}

.s-nav{position:fixed;top:var(--sp-4);left:50%;transform:translateX(-50%);z-index:60;
  display:inline-flex;align-items:center;padding:5px;background:var(--page);
  border-radius:var(--r-pill);border:1px solid var(--cloud)}
.s-nav__thumb{position:absolute;top:5px;left:0;width:0;height:calc(100% - 10px);
  background:var(--mist);border-radius:var(--r-pill);opacity:0;pointer-events:none;z-index:0;
  transition:transform var(--base) var(--ease-spring),width var(--base) var(--ease-spring),
  opacity var(--fast) var(--ease)}
.s-nav .s-brand{position:relative;z-index:1;display:flex;align-items:center;gap:var(--sp-2);
  min-height:50px;padding:0 var(--sp-5);text-decoration:none;color:var(--text-strong);
  font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.6px}
.s-nav__link{position:relative;z-index:1;display:flex;align-items:center;min-height:50px;
  padding:0 var(--sp-6);font-family:var(--font-display);font-size:16px;font-weight:600;
  letter-spacing:-.2px;color:var(--text-muted);text-decoration:none;white-space:nowrap;
  border-radius:var(--r-pill);transition:color var(--fast) var(--ease)}
.s-nav__link:hover{color:var(--text-strong)}
.s-nav__link[aria-current="page"]{color:var(--text-strong)}

/* Static brand row, shown only below the pill breakpoint. */
.s-topbrand{display:none;align-items:center;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5);
  text-decoration:none;color:var(--text-strong);font-family:var(--font-display);font-weight:700;
  font-size:20px;letter-spacing:-.6px}

/* Fixed bottom tab bar, mobile only. Icons live here, not in the desktop
   pill, since a compact touch target needs them and a small pill doesn't. */
.s-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  justify-content:space-around;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border-top:1px solid var(--cloud);box-shadow:0 -8px 24px rgba(3,38,12,.07);
  padding-bottom:env(safe-area-inset-bottom,0)}
.s-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:58px;padding:8px 4px 10px;text-decoration:none;color:var(--text-muted);
  transition:color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.s-tabbar a:active{transform:scale(.94)}
.s-tabbar__icon{width:36px;height:26px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);transition:background-color var(--base) var(--ease)}
.s-tabbar svg{width:20px;height:20px}
.s-tabbar__label{font-size:12px;font-weight:600}
.s-tabbar a[aria-current="page"]{color:var(--text-strong)}
.s-tabbar a[aria-current="page"] .s-tabbar__icon{background:var(--mist)}
.s-tabbar a[aria-current="page"] svg{color:var(--accent)}

.s-wrap{max-width:1120px;margin:0 auto;padding:0 var(--sp-5)}
/* Anchored sections stop clear of the fixed nav pill rather than sliding
   under it. The section's own 16px top padding is part of the gap, so this
   is the pill clearance minus that. */
.s-sec{padding:var(--sp-4) 0;scroll-margin-top:calc(var(--top-clear) - var(--sp-8))}
.s-sec--top{padding-top:var(--top-clear)}
main{padding-bottom:var(--sp-16)}
.s-lede,.s-hero__sub{font-size:18px;line-height:1.55;max-width:56ch;color:var(--text-muted)}
.s-hero__sub{margin-bottom:var(--sp-6)}
.s-head-block{margin-bottom:var(--sp-8)}

/* Hero sits directly on the grey canvas, not in a card, so it reads as the
   one open, unbounded moment before the page settles into card rhythm. */
.s-hero{padding:var(--top-clear) 0 var(--sp-10)}
.s-hero h1{max-width:15ch;margin-bottom:var(--sp-5);color:var(--text-strong)}
.s-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* ==== SCROLL REVEAL ============================================================ */
.s-reveal{opacity:0;transform:translateY(10px);
  transition:opacity 380ms var(--ease),transform 380ms var(--ease)}
.s-reveal.is-visible{opacity:1;transform:translateY(0)}
.s-levels .s-reveal:nth-child(2){transition-delay:70ms}
.s-levels .s-reveal:nth-child(3){transition-delay:140ms}
.s-levels .s-reveal:nth-child(4){transition-delay:210ms}

/* Level cards as a staircase: bottom aligned, each taller than the last, so
   the shape of the model is the visual. Each card is a real button that
   opens the detail dialog. Letters grow with the cards. */
.s-levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);
  align-items:end}
.s-level{display:flex;flex-direction:column;align-items:stretch;
  border:0;border-radius:var(--r-xl);padding:var(--sp-6);cursor:pointer;font-family:var(--font);
  text-align:left;box-shadow:var(--shadow-sm);
  transition:transform var(--base) var(--ease),box-shadow var(--base) var(--ease)}
.s-level:hover{transform:translateY(var(--lift-md));box-shadow:var(--shadow-md)}
.s-level:active{transform:translateY(var(--lift-sm)) scale(.995)}
.s-level--s{min-height:250px}
.s-level--a{min-height:310px}
.s-level--m{min-height:370px}
.s-level--r{min-height:430px}
.s-level__letter{font-family:var(--font-display);display:block;line-height:1;
  font-weight:600;letter-spacing:-1px;margin-bottom:var(--sp-4)}
.s-level--s .s-level__letter{font-size:34px}
.s-level--a .s-level__letter{font-size:44px}
.s-level--m .s-level__letter{font-size:54px}
.s-level--r .s-level__letter{font-size:64px}
.s-level__title{display:block;font-family:var(--font-display);font-size:24px;line-height:1.22;
  font-weight:700;letter-spacing:-.7px;margin-bottom:var(--sp-2);color:inherit}
.s-level p{margin:0;max-width:none;font-size:15px;color:inherit;opacity:.9}
.s-level__cta{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:var(--sp-5);
  font-size:13px;font-weight:600;opacity:.75}
.s-level__cta svg{transition:transform var(--fast) var(--ease)}
.s-level:hover .s-level__cta svg{transform:translateX(3px)}
.s-level--s{background:var(--lvl-s-bg);color:var(--lvl-s-fg)}
.s-level--s .s-level__letter{color:var(--lvl-s-fg)}
.s-level--a{background:var(--lvl-a-bg);color:var(--lvl-a-fg)}
.s-level--a .s-level__letter{color:var(--lvl-a-fg)}
.s-level--m{background:var(--lvl-m-bg);color:var(--lvl-m-fg)}
.s-level--m .s-level__letter{color:var(--lvl-m-fg)}
.s-level--r{background:var(--lvl-r-bg);color:var(--lvl-r-fg)}
.s-level--r .s-level__letter{color:var(--lvl-r-fg)}

/* Two column prose, living inside a white .s-block */
.s-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--sp-10);
  align-items:end}
.s-panel{background:var(--mist);border-radius:var(--r-lg);padding:var(--sp-6)}
.s-panel h3{margin-bottom:var(--sp-2);font-size:16px}
.s-panel p{max-width:none;font-size:15px;color:var(--text-muted)}
.s-panel--green{background:linear-gradient(155deg,var(--green-600),var(--accent));color:var(--text-on-dark)}
.s-panel--green h3{color:var(--text-on-dark)}
.s-panel--green p{color:var(--text-on-dark);opacity:.9}
.s-panel + .s-panel{margin-top:var(--sp-3)}

/* ==== EXAMPLES PAGE ============================================================ */
.s-toolbar{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.s-search{position:relative;flex:1 1 240px;min-width:0}
.s-search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--text-muted);
  pointer-events:none}
.s-search input{padding-left:42px}
.s-search__clear{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:34px;height:34px;
  border:0;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;transition:background-color var(--fast) var(--ease)}
.s-search__clear:hover{background:var(--cloud)}
.s-toolbar select{width:auto;min-width:150px;flex:0 0 auto}
.s-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--sp-6)}
.s-resultbar{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;justify-content:space-between;
  margin-bottom:var(--sp-4)}
.s-count{font-size:14px;color:var(--text-muted);margin:0}
.s-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--sp-3);
  list-style:none;margin:0;padding:0}
.s-card{display:flex;flex-direction:column;gap:var(--sp-3);background:var(--mist);
  border-radius:var(--r-lg);padding:var(--sp-5);transition:transform var(--base) var(--ease),
  box-shadow var(--base) var(--ease);
  animation:s-rise var(--base) var(--ease) backwards}
.s-card:hover{transform:translateY(var(--lift-sm));box-shadow:var(--shadow-md)}
.s-card p{margin:0;max-width:none;font-size:16px}
.s-card__sub{font-size:14px;color:var(--text-muted);margin-top:auto;padding-top:var(--sp-1)}
.s-card > .pv-badge{align-self:flex-start}
.s-more{display:flex;justify-content:center;margin-top:var(--sp-6)}
@keyframes s-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.s-grid li:nth-child(1){animation-delay:0ms} .s-grid li:nth-child(2){animation-delay:30ms}
.s-grid li:nth-child(3){animation-delay:60ms} .s-grid li:nth-child(4){animation-delay:90ms}
.s-grid li:nth-child(5){animation-delay:120ms} .s-grid li:nth-child(6){animation-delay:150ms}
.s-grid li:nth-child(7){animation-delay:180ms} .s-grid li:nth-child(8){animation-delay:210ms}
.s-grid li:nth-child(9){animation-delay:240ms} .s-grid li:nth-child(10){animation-delay:270ms}
.s-grid li:nth-child(11){animation-delay:300ms} .s-grid li:nth-child(12){animation-delay:330ms}

/* ==== TOOLS PAGE ================================================================ */
.s-tool{display:block;margin-top:var(--sp-6)}
.s-tool > p{max-width:none}
.s-form{display:grid;gap:var(--sp-5)}
.s-form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-4)}
.s-fieldfoot{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:space-between;align-items:baseline}
.s-fieldfoot .pv-help{margin-top:0}
.s-try{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.s-try__label{font-size:14px;color:var(--text-muted);margin-right:2px}

.s-result{margin-top:var(--sp-10);padding-top:var(--sp-8);border-top:var(--hairline)}
.s-result:focus{outline:none}
.s-result:not([hidden]) > *{animation:s-rise var(--slow) var(--ease) backwards}
.s-quote{padding:var(--sp-4) var(--sp-5);background:var(--mist);border-radius:var(--r-lg);
  margin:0 0 var(--sp-5);font-size:15px;color:var(--text)}
.s-quote span{display:block;font-size:13px;color:var(--text-muted);margin-top:var(--sp-2)}
.s-prompt{padding:var(--sp-5);background:var(--mist);border-radius:var(--r-lg);margin-bottom:var(--sp-3)}
.s-prompt p{margin:0}

.s-verdict{background:var(--mist);border-radius:var(--r-xl);padding:var(--sp-6);margin-bottom:var(--sp-6)}
.s-verdict__top{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-5)}
.s-verdict h3{margin:0 0 6px;font-family:var(--font);font-size:13px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.s-verdict h3 + p{margin-bottom:var(--sp-5);font-size:16px}
.s-verdict > div:last-of-type p:last-child{margin-bottom:0}
.s-verdict ul{margin:0 0 var(--sp-5);padding-left:var(--sp-4)}
.s-verdict li{margin-bottom:var(--sp-1);font-size:16px}

.s-bars{display:grid;gap:var(--sp-3);margin:0 0 var(--sp-8)}
.s-bar__top{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px}
.s-bar__name{font-weight:600}
.s-bar__num{font-variant-numeric:tabular-nums;color:var(--text-muted)}
.s-bar--top .s-bar__name{color:var(--accent)}

.s-subhead{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-muted);margin:0 0 var(--sp-3)}
.s-step{position:relative;padding:var(--sp-1) 0 var(--sp-1) var(--sp-5);margin-bottom:var(--sp-6)}
.s-step::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:4px;border-radius:var(--r-pill);
  background:var(--cloud)}
.s-step--a::before{background:var(--lvl-a-bg)}
.s-step--m::before{background:var(--lvl-m-bg)}
.s-step--r::before{background:var(--lvl-r-bg)}
.s-step h4{margin-bottom:var(--sp-2)}
.s-step p{max-width:none;font-size:16px}
.s-toolline{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-2)}
.s-toolline .pv-badge{background:transparent;color:var(--text-muted);padding:0;font-weight:400;font-size:14px}
.s-toolline .pv-badge:not(:last-child)::after{content:"\00b7";margin-left:8px;color:var(--cloud)}
.s-actions--result{margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:var(--hairline)}

.s-spin{width:16px;height:16px;flex:none;border-radius:50%;
  background:conic-gradient(var(--accent) 0turn,var(--green-100) 1turn);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),black calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),black calc(100% - 2px));
  animation:s-turn .8s linear infinite}
@keyframes s-turn{100%{transform:rotate(360deg)}}
.s-loading{display:flex;align-items:center;gap:var(--sp-3);color:var(--text-muted);font-size:15px;
  margin-top:var(--sp-4)}

/* ==== SELF-CHECK QUIZ ======================================================= */
.s-quiz{display:grid;gap:var(--sp-3)}
.s-quiz__item{background:var(--mist);border-radius:var(--r-lg);padding:var(--sp-6);
  transition:background-color var(--base) var(--ease)}
.s-quiz__item.is-ok{background:var(--green-100)}
.s-quiz__item.is-no{background:var(--err-bg)}
.s-quiz__q{font-family:var(--font-display);font-size:19px;line-height:1.38;letter-spacing:-.4px;
  font-weight:600;max-width:none;color:var(--text-strong);margin-bottom:var(--sp-4)}
.s-quiz__chips{display:flex;flex-wrap:wrap;gap:6px}
.s-quiz__chips .pv-chip{background:var(--page)}
.s-quiz__chips .pv-chip:disabled{cursor:default;transform:none;opacity:.55}
.s-quiz__chips .pv-chip[aria-pressed="true"]:disabled{opacity:1}
.s-quiz__chips .pv-chip.is-wrong{background:var(--err);color:var(--text-on-dark);opacity:1}
.s-quiz__why{margin:var(--sp-4) 0 0;max-width:none;font-size:15px}
.s-quiz__why:empty{display:none}

.s-acc2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);margin-top:var(--sp-6)}
.s-subgroup{margin-top:0;margin-bottom:var(--sp-4);font-size:16px;color:var(--text-muted);
  font-weight:600}

/* ==== VIDEOS ================================================================= */
.s-vids{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
.s-vid{display:flex;flex-direction:column;align-items:stretch;text-align:left;border:0;padding:0;
  background:var(--mist);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  font-family:var(--font);
  transition:background-color var(--fast) var(--ease),transform var(--base) var(--ease),
  box-shadow var(--base) var(--ease)}
.s-vid:hover{background:var(--surface-hover);transform:translateY(var(--lift-sm));box-shadow:var(--shadow-md)}
.s-vid:active{transform:translateY(0) scale(.99)}
.s-vid__thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--cloud)}
.s-vid__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.s-vid__play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;
  border-radius:50%;background:var(--page);color:var(--accent);display:flex;align-items:center;
  justify-content:center;transition:transform var(--fast) var(--ease)}
.s-vid__play svg{margin-left:2px}
.s-vid:hover .s-vid__play{transform:scale(1.08)}
.s-vid__body{display:block;padding:var(--sp-6)}
.s-vid__title{display:block;font-family:var(--font-display);font-size:19px;font-weight:700;
  letter-spacing:-.5px;line-height:1.25;color:var(--text-strong);margin-bottom:var(--sp-3)}
.s-vid__desc{display:block;font-size:15px;line-height:1.5;color:var(--text-muted)}

/* Video modal is wider than the level modal, since a 16:9 frame needs room. */
dialog.s-dialog--video{width:min(880px,calc(100vw - 40px))}
.s-vdlg__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-5) var(--sp-4) var(--sp-6)}
.s-vdlg__head h2{font-size:20px;letter-spacing:-.5px;margin:0}
.s-vdlg__frame{aspect-ratio:16/9;background:var(--ink);border-bottom-left-radius:var(--r-2xl);
  border-bottom-right-radius:var(--r-2xl);overflow:hidden}
.s-vdlg__frame iframe{width:100%;height:100%;border:0;display:block}

/* ==== RESPONSIVE ================================================================ */
/* 820px, not the usual 768, on purpose: an iPad in portrait reports 768px wide,
   and that's real hardware in this district. Below this the floating pill
   gives way to the fixed bottom tab bar plus a static brand row. */
@media (max-width:820px){
  .s-nav{display:none}
  .s-topbrand{display:flex}
  .s-tabbar{display:flex}
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom,0))}
  .s-sec--top{padding-top:var(--sp-4)}
  .s-hero{padding:var(--sp-6) 0 var(--sp-8)}
}
@media (max-width:900px){
  .s-cols{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
  .s-acc2{grid-template-columns:minmax(0,1fr);gap:var(--sp-8)}
  .s-vids{grid-template-columns:minmax(0,1fr)}
  .s-block{padding:var(--sp-8) var(--sp-8)}
  /* Staircase compresses but keeps its rise. */
  .s-level--s{min-height:210px}
  .s-level--a{min-height:250px}
  .s-level--m{min-height:290px}
  .s-level--r{min-height:330px}
  .s-level--s .s-level__letter{font-size:30px}
  .s-level--a .s-level__letter{font-size:36px}
  .s-level--m .s-level__letter{font-size:42px}
  .s-level--r .s-level__letter{font-size:48px}
}
@media (max-width:640px){
  .s-wrap,  .s-block{padding:var(--sp-6) var(--sp-5);border-radius:var(--r-xl)}
  .s-sec{padding:var(--sp-2) 0}
  .s-hero__sub,.s-lede{font-size:16px}
  h2{font-size:34px;letter-spacing:-1.2px}
  .s-dialog__body h2{font-size:28px;letter-spacing:-1px}
  .s-actions .pv-btn{flex:1 1 100%}
  /* Single column: the stair becomes a stack, letters still grow downward. */
  .s-levels{grid-template-columns:minmax(0,1fr)}
  .s-level--s,.s-level--a,.s-level--m,.s-level--r{min-height:0}
  .s-quiz__item{padding:var(--sp-5)}
  .s-toolbar select{flex:1 1 130px;min-width:0}
  .s-dialog__head{padding:var(--sp-6) var(--sp-6) 0}
  .s-dialog__body{padding:var(--sp-5) var(--sp-6) var(--sp-6)}
}

/* ==== PRINT ====================================================================== */

/* ==== PRINT ====================================================================== */
@media print{
  .s-nav,.s-topbrand,.s-skip,.s-form,.pv-toggle,.s-actions--result,.s-tabbar{display:none !important}
  body{font-size:11pt;color:#030303;background:#fff;padding-bottom:0}
  .s-block{box-shadow:none;background:#fff}
  .s-result{margin-top:0}
  .s-verdict,.s-step,.s-level,.s-card{box-shadow:none;break-inside:avoid}
}

/* ==== REDUCED MOTION ============================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .s-reveal{opacity:1;transform:none}
}