/* Claude for K-4 teachers. Shared stylesheet for Start, Prompts, and Safe use.

   A light grey canvas with flat white cards. Pill controls. Figtree for
   headings, the system font for body text. District Green is the only
   interactive color. The privacy lights add an amber and a red, and each
   one is always paired with an icon and a word.

   Nothing on this site moves on hover. Hover changes color only. The only
   animations are the dialog opening and closing, the progress bars, and the
   copy confirmation, and all of them switch off under 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-800:#025A33; --green-700:#036C3E; --green-100:#D9EEDF;

  --ok:#036C3E; --ok-bg:#D9EEDF;
  --warn:#8A5A00; --warn-bg:#FBF3E2;
  --stop:#B3261E; --stop-bg:#FBECEB;

  --text:var(--slate); --text-strong:var(--ink); --text-muted:var(--muted); --on-dark:#FFFFFF;
  --accent:var(--green-700); --accent-hover:var(--green-800);

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

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

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

  --ease:cubic-bezier(.2,.7,.2,1);
  --fast:150ms; --base:220ms;
  --touch:44px; --measure:64ch;
  /* Clearance under the fixed nav pill. */
  --top-clear:112px;

  --shadow-sm:0 1px 2px rgba(3,38,12,.06), 0 1px 1px rgba(3,38,12,.04);
  --shadow-lg:0 24px 64px rgba(3,38,12,.16), 0 8px 20px rgba(3,38,12,.09);
}

/* ==== 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(40px,6.4vw,68px);font-weight:700;line-height:1.05;letter-spacing:-2px}
h2{font-size:40px;font-weight:700;line-height:1.1;letter-spacing:-1.3px}
h3{font-size:22px;line-height:1.28;letter-spacing:-.5px}
h4{font-size:18px;line-height:1.3;letter-spacing:-.3px}

h1,h2,h3,h4{text-wrap:balance}
p,li,.k-way__sum,.s-lede{text-wrap:pretty}
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(--accent);outline-offset:2px;border-radius:4px}
[hidden]{display:none !important}
img,svg{max-width:100%}
.pv-label{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-muted);display:block;margin-bottom:var(--sp-3)}
.pv-caption{font-size:14px;color:var(--text-muted)}

/* ==== CARDS ================================================================ */
.s-block{background:var(--page);border-radius:var(--r-2xl);padding:var(--sp-12);
  box-shadow:var(--shadow-sm)}
.s-block--green{background:var(--accent);color:var(--on-dark)}
.s-block--green h2{color:var(--on-dark)}
.s-block--green p{color:var(--on-dark)}
.s-block--green .s-actions{margin-top:var(--sp-6)}
.s-block + .s-block{margin-top:var(--sp-6)}

/* ==== BUTTONS ============================================================== */
.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.2;
  text-decoration:none;cursor:pointer;
  transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease),
  box-shadow var(--fast) var(--ease)}
.pv-btn--primary{background:var(--accent);color:var(--on-dark)}
.pv-btn--primary:hover{background:var(--accent-hover)}
.pv-btn--primary:active{background:var(--green-900)}
.pv-btn--secondary{background:var(--page);color:var(--text-strong);box-shadow:inset 0 0 0 1.5px var(--cloud)}
.pv-btn--secondary:hover{background:var(--green-100);box-shadow:inset 0 0 0 1.5px var(--green-100)}
.pv-btn--white{background:var(--page);color:var(--accent)}
.pv-btn--white:hover{background:var(--green-100)}
.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(--on-dark);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.pv-btn--ghost-light:hover{background:rgba(255,255,255,.16)}
.pv-btn--small{min-height:40px;padding:8px 18px;font-size:15px}

/* Hero buttons sit on the grey canvas, so the secondary one needs an edge. */
.s-hero .pv-btn--secondary{background:transparent}
.s-hero .pv-btn--secondary:hover{background:var(--page);box-shadow:inset 0 0 0 1.5px var(--cloud)}

/* ==== 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),background-color var(--fast) var(--ease)}
.pv-field::placeholder{color:var(--text-muted)}
.pv-field:hover{background:var(--mist)}
.pv-field:focus-visible{border-color:var(--accent);outline:none;background:var(--page);
  box-shadow:0 0 0 3px var(--green-100)}

select.pv-field{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;text-overflow:ellipsis;
  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='%236B6B6B' 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 14px center}
.pv-field:disabled{opacity:.55;cursor:not-allowed}
.pv-field:disabled:hover{background:var(--field)}

/* ==== TABS (segmented) ======================================================
   Plain pill buttons. The selected tab turns white. No sliding parts. */
.pv-toggle{display:flex;gap:4px;max-width:100%;padding:4px;background:var(--mist);
  border-radius:var(--r-pill);overflow-x:auto;scrollbar-width:none;width:fit-content}
.pv-toggle::-webkit-scrollbar{display:none}
.pv-toggle button{flex:none;appearance:none;border:0;background:transparent;
  font-family:var(--font);font-size:15px;font-weight:600;color:var(--text-muted);min-height:44px;
  padding:0 var(--sp-5);border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;
  transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.pv-toggle button:hover{color:var(--text-strong)}
.pv-toggle button[aria-selected="true"]{background:var(--page);color:var(--text-strong);
  box-shadow:var(--shadow-sm)}
.pv-toggle button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ==== CHIPS ================================================================= */
.pv-chip{display:inline-flex;align-items:center;min-height:44px;padding:8px var(--sp-4);
  border-radius:var(--r-pill);border:0;background:var(--page);
  font-family:var(--font);font-size:15px;font-weight:600;line-height:1.3;text-align:left;
  color:var(--text);cursor:pointer;
  transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.pv-chip:hover{background:var(--green-100)}
.pv-chip.is-copied{background:var(--green-100);color:var(--green-900)}

.pv-badge{display:inline-flex;align-items:center;padding:8px 16px;border-radius:var(--r-pill);
  font-size:15px;font-weight:600;line-height:1.3;background:var(--mist);color:var(--slate)}

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

/* ==== DIALOG ================================================================
   Native <dialog>: focus trap, Escape to close, and a real backdrop. Closing
   plays a short fade. A class is added, the dialog stays open for that
   animation, then close() runs. */
dialog.s-dialog{width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 32px);
  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:k-in 200ms var(--ease)}
dialog.s-dialog[open]::backdrop{animation:k-fade-in 200ms ease}
dialog.s-dialog.is-closing{animation:k-out 150ms ease forwards}
dialog.s-dialog.is-closing::backdrop{animation:k-fade-out 150ms ease forwards}
@keyframes k-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes k-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(6px)}}
@keyframes k-fade-in{from{opacity:0}to{opacity:1}}
@keyframes k-fade-out{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;
  background:var(--accent);color:var(--on-dark)}
.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:44px;height:44px;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:36px;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:-.3px;
  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-3)}
.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 p + p{margin-top:var(--sp-3)}
.s-dialog__block--tell{background:var(--green-100)}
.s-dialog__block--tell h3{color:var(--green-900)}
.s-dialog__block--care{background:var(--warn-bg)}
.s-dialog__block--care h3{color:var(--warn)}
.s-dialog__prompt{margin-bottom:var(--sp-4) !important;color:var(--text-strong)}
.s-dialog__list{margin-top:var(--sp-5)}
.s-dialog__foot{display:flex;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-8);
  padding-top:var(--sp-5);border-top:1px solid var(--cloud)}

/* ==== LISTS ================================================================= */
.k-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.k-list li{position:relative;padding-left:var(--sp-5);font-size:16px;line-height:1.5;color:var(--text)}
.k-list li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;
  border-radius:50%;background:var(--accent)}
.k-list--cols{display:block;columns:2;column-gap:var(--sp-8)}
.k-list--cols li{break-inside:avoid;margin-bottom:var(--sp-2)}
.k-list--stop li::before{background:var(--stop)}
.k-list--warn li::before{background:var(--warn)}

.k-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2);counter-reset:k-step}
.k-steps li{counter-increment:k-step;display:flex;align-items:center;gap:var(--sp-4);
  background:var(--mist);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);
  font-size:17px;line-height:1.4;color:var(--text-strong);font-weight:600;
  font-family:var(--font-display);letter-spacing:-.2px}
.k-steps li::before{content:counter(k-step);flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--page);color:var(--accent);display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700}

/* ==== NAV =====================================================================
   One floating pill, fixed top center. The current page has a grey fill.
   Hover changes the text color only. Below 820px the pill is replaced by a
   static brand row and a bottom tab bar. */
.s-skip{position:absolute;left:var(--sp-4);top:-60px;z-index:70;background:var(--accent);
  color:var(--on-dark);padding:10px 18px;border-radius:var(--r-pill);
  font-weight:600;text-decoration:none}
.s-skip:focus{top:var(--sp-3);color:var(--on-dark)}

.s-nav{position:fixed;top:var(--sp-4);left:50%;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:2px;padding:5px;background:var(--page);
  border-radius:var(--r-pill);border:1px solid var(--cloud)}
.s-brand{display:flex;align-items:center;min-height:46px;padding:0 var(--sp-5);
  text-decoration:none;color:var(--text-strong);white-space:nowrap;
  font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.5px}
.s-nav__link{display:flex;align-items:center;min-height:46px;padding:0 var(--sp-5);
  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),background-color var(--fast) var(--ease)}
.s-nav__link:hover{color:var(--text-strong);background:var(--field)}
.s-nav__link[aria-current="page"]{color:var(--text-strong);background:var(--mist)}

.s-topbrand{display:none;align-items:center;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:-.5px}

.s-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  justify-content:space-around;background:var(--page);border-top:1px solid var(--cloud);
  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)}
.s-tabbar__icon{width:44px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-pill)}
.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)}

/* ==== LAYOUT ================================================================ */
.s-wrap{max-width:1120px;margin:0 auto;padding:0 var(--sp-5)}
.s-sec{padding:var(--sp-3) 0;scroll-margin-top:var(--top-clear)}
main{padding-bottom:var(--sp-8)}
.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)}
.s-hero{padding:var(--top-clear) 0 var(--sp-8)}
.s-hero h1{max-width:18ch;margin-bottom:var(--sp-5)}
.s-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.k-foot{padding-top:var(--sp-6);padding-bottom:var(--sp-10)}
.k-foot p{max-width:none;font-size:14px;color:var(--text-muted)}

.s-cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--sp-10);
  align-items:start}
.s-cols--center{align-items:center}
.s-cols--equal{align-items:stretch}
.s-panel{background:var(--mist);border-radius:var(--r-xl);padding:var(--sp-6)}
.s-panel h3{margin-bottom:var(--sp-4);font-size:20px}
.s-panel p{max-width:none;font-size:16px}
.s-panel .k-list{margin-bottom:var(--sp-4)}
.s-panel .k-list:last-child{margin-bottom:0}
.s-panel--green{background:var(--ok-bg)}
.s-panel--green h3{color:var(--green-900)}
.s-panel--stop{background:var(--stop-bg)}
.s-panel--stop h3{color:var(--stop)}
.k-tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-6);padding:0;list-style:none}

/* ==== SIX WAYS ============================================================== */
.k-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.k-way{display:flex;flex-direction:column;align-items:stretch;text-align:left;border:0;
  background:var(--mist);border-radius:var(--r-xl);padding:var(--sp-6);min-height:220px;
  cursor:pointer;font-family:var(--font);color:var(--text);
  transition:background-color var(--fast) var(--ease)}
.k-way:hover{background:var(--green-100)}
.k-way__num{width:38px;height:38px;border-radius:50%;background:var(--page);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-size:17px;font-weight:700;margin-bottom:var(--sp-5)}
.k-way__name{display:block;font-family:var(--font-display);font-size:26px;font-weight:700;
  letter-spacing:-.8px;line-height:1.1;color:var(--text-strong);margin-bottom:var(--sp-2)}
.k-way__sum{display:block;font-size:16px;line-height:1.5;color:var(--text)}
.k-way__cta{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:var(--sp-5);
  font-size:14px;font-weight:600;color:var(--accent)}

.k-review{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.k-review li{display:flex;align-items:center;gap:var(--sp-3);background:var(--mist);
  border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);font-family:var(--font-display);
  font-size:18px;font-weight:600;letter-spacing:-.3px;color:var(--text-strong)}
.k-review svg{flex:none;color:var(--accent)}

/* ==== PROMPT BUILDER ======================================================
   Form on the left, the finished prompt on the right. On a laptop the prompt
   stays in view while the form scrolls. */
.k-builder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--sp-8);
  margin-top:var(--sp-6);align-items:start}
.k-builder__form{display:grid;gap:var(--sp-6);align-content:start;min-width:0}
.k-builder__intro{margin:0;font-size:17px;font-weight:600;color:var(--text-strong)}
.k-fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:var(--sp-3)}
.k-fieldset > legend,.k-field > label{padding:0;font-size:15px;font-weight:600;color:var(--text-strong);
  margin-bottom:var(--sp-2)}
.k-fieldset > legend{float:left;width:100%}
.k-fieldset > legend + *{clear:both}
.k-opt{margin-left:var(--sp-2);font-size:13px;font-weight:400;color:var(--text-muted)}
.k-field{display:block}
.k-field > label{display:block}
.k-fields{display:grid;gap:var(--sp-4)}
.k-grades{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.k-grade{position:relative;display:block}
.k-grade input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.k-grade span{display:flex;align-items:center;justify-content:center;min-width:56px;min-height:48px;
  padding:0 var(--sp-4);border-radius:var(--r-pill);background:var(--field);color:var(--text-strong);
  font-family:var(--font-display);font-size:18px;font-weight:700;
  transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.k-grade:hover span{background:var(--surface-hover)}
.k-grade input:checked + span{background:var(--accent);color:var(--on-dark)}
.k-grade input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.k-std{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);
  background:var(--green-100);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5)}
.k-std__code{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--green-900);
  margin-bottom:var(--sp-2)}
.k-std p{max-width:none;margin:0;font-size:15px;line-height:1.5;color:var(--text-strong)}
.k-std .pv-btn{flex:none}
.k-prompt{background:var(--mist);border-radius:var(--r-xl);padding:var(--sp-6);min-width:0}
.k-prompt--sticky{position:sticky;top:var(--sp-6)}
.k-prompt__text{margin:0 0 var(--sp-5);max-width:none;font-size:17px;line-height:1.65;
  color:var(--text-strong);white-space:pre-wrap;overflow-wrap:anywhere}
.k-builder__note{margin:0 0 var(--sp-5);max-width:none;font-size:15px;color:var(--text-muted)}
.k-fill,.k-blank{border-radius:6px;padding:1px 6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.k-fill{background:var(--green-100);color:var(--green-900);font-weight:600}
.k-blank{background:var(--page);color:var(--text-muted)}
.k-prompt__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.k-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}

/* ==== PRIVACY LIGHTS ======================================================== */
.k-lights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);align-items:stretch}
.k-light{border-radius:var(--r-xl);padding:var(--sp-6)}
.k-light--green{background:var(--ok-bg)}
.k-light--yellow{background:var(--warn-bg)}
.k-light--red{background:var(--stop-bg)}
.k-light__head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.k-light__dot{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:var(--on-dark)}
.k-light--green .k-light__dot{background:var(--ok)}
.k-light--yellow .k-light__dot{background:var(--warn)}
.k-light--red .k-light__dot{background:var(--stop)}
.k-light h3{margin:0;font-size:21px;letter-spacing:-.5px}
.k-light--green h3{color:var(--green-900)}
.k-light--yellow h3{color:var(--warn)}
.k-light--red h3{color:var(--stop)}
.k-light__def{font-size:16px;margin-bottom:var(--sp-5)}
.k-light h4{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text);margin-bottom:var(--sp-3)}
.k-light--green .k-list li::before{background:var(--ok)}
.k-light--yellow .k-list li::before{background:var(--warn)}
.k-light--red .k-list li::before{background:var(--stop)}

.k-note{display:flex;gap:var(--sp-4);align-items:flex-start;background:var(--warn-bg);
  border-radius:var(--r-xl);padding:var(--sp-6);margin-top:var(--sp-4)}
.k-note__icon{flex:none;width:44px;height:44px;border-radius:50%;background:var(--warn);
  color:var(--on-dark);display:flex;align-items:center;justify-content:center}
.k-note h3{font-size:20px;margin-bottom:var(--sp-2);color:var(--warn)}
.k-note p{max-width:none;font-size:16px}

/* ==== SORTER ================================================================ */
.k-score{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-6)}
.k-score .pv-progress{flex:1 1 200px}
.k-score__text{font-size:15px;font-weight:600;color:var(--text-strong);margin:0}
.k-sort{display:grid;gap:var(--sp-3)}
.k-sort__item{background:var(--mist);border-radius:var(--r-lg);padding:var(--sp-6)}
.k-sort__item.is-ok{background:var(--ok-bg)}
.k-sort__q{font-family:var(--font-display);font-size:19px;line-height:1.38;letter-spacing:-.3px;
  font-weight:600;max-width:none;color:var(--text-strong);margin-bottom:var(--sp-4)}
.k-sort__chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.k-sort__chips .pv-chip:hover{background:var(--cloud)}
.k-sort__chips .pv-chip:disabled{cursor:default;opacity:.55}
.k-sort__chips .pv-chip:disabled:hover{background:var(--page)}
.k-sort__chips .pv-chip[aria-pressed="true"]:disabled{opacity:1}
.k-sort__chips .pv-chip[data-light="green"][aria-pressed="true"]{background:var(--ok);color:var(--on-dark)}
.k-sort__chips .pv-chip[data-light="yellow"][aria-pressed="true"]{background:var(--warn);color:var(--on-dark)}
.k-sort__chips .pv-chip[data-light="red"][aria-pressed="true"]{background:var(--stop);color:var(--on-dark)}
.k-sort__chips .pv-chip.is-answer{opacity:1;box-shadow:inset 0 0 0 2px var(--text-strong)}
.k-sort__why{margin:var(--sp-4) 0 0;max-width:none;font-size:16px}
.k-sort__why:empty{display:none}
.k-sort__why strong{color:var(--text-strong)}
.k-sort__done{margin-top:var(--sp-6);display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}
.k-sort__done p{margin:0;font-weight:600;color:var(--text-strong)}

/* ==== CHECKLIST ============================================================= */
.k-check{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.k-check li{background:var(--mist);border-radius:var(--r-lg);transition:background-color var(--fast) var(--ease)}
.k-check li:hover{background:var(--surface-hover)}
.k-check li.is-checked{background:var(--ok-bg)}
.k-check label{display:flex;align-items:center;gap:var(--sp-4);min-height:56px;
  padding:var(--sp-3) var(--sp-5);cursor:pointer;font-size:17px;line-height:1.4;color:var(--text)}
.k-check input{flex:none;appearance:none;-webkit-appearance:none;width:26px;height:26px;margin:0;
  border-radius:8px;background:var(--page);border:2px solid var(--cloud);cursor:pointer;
  display:grid;place-content:center;
  transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.k-check input::after{content:"";width:12px;height:7px;border-left:3px solid var(--on-dark);
  border-bottom:3px solid var(--on-dark);transform:rotate(-45deg);margin-top:-3px;opacity:0}
.k-check input:checked{background:var(--accent);border-color:var(--accent)}
.k-check input:checked::after{opacity:1}
.k-check input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ==== TOAST ================================================================= */
.k-toast{position:fixed;left:50%;bottom:var(--sp-8);z-index:80;transform:translateX(-50%);
  background:var(--ink);color:var(--on-dark);font-size:15px;font-weight:600;
  padding:12px 22px;border-radius:var(--r-pill);opacity:0;pointer-events:none;
  transition:opacity var(--base) var(--ease)}
.k-toast.is-on{opacity:1}

/* ==== RESPONSIVE ============================================================ */
/* 820px, not 768, on purpose: an iPad in portrait is 768px wide. Below this
   the floating pill gives way to a bottom tab bar and 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-hero{padding:var(--sp-6) 0 var(--sp-8)}
  .s-sec{scroll-margin-top:var(--sp-4)}
  .k-toast{bottom:calc(86px + env(safe-area-inset-bottom,0))}
}
@media (max-width:900px){
  .s-cols{grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
  .s-block{padding:var(--sp-8)}
  .k-ways{grid-template-columns:repeat(2,minmax(0,1fr))}
  .k-lights{grid-template-columns:minmax(0,1fr)}
  .k-builder{grid-template-columns:minmax(0,1fr)}
  .k-prompt--sticky{position:static}
}
@media (max-width:640px){
  .s-block{padding:var(--sp-6) var(--sp-5);border-radius:var(--r-xl)}
  .s-hero__sub,.s-lede{font-size:16px}
  h2{font-size:32px;letter-spacing:-1px}
  .s-dialog__body h2{font-size:30px;letter-spacing:-1px}
  .s-actions .pv-btn{flex:1 1 100%}
  .k-ways{grid-template-columns:minmax(0,1fr)}
  .k-way{min-height:0}
  .k-list--cols{columns:1}
  .k-sort__item{padding:var(--sp-5)}
  .s-dialog__head{padding:var(--sp-6) var(--sp-6) 0}
  .s-dialog__body{padding:var(--sp-5) var(--sp-6) var(--sp-6)}
  .k-note{flex-direction:column;gap:var(--sp-3)}
}

/* ==== PRINT ================================================================= */
@media print{
  .s-nav,.s-topbrand,.s-skip,.s-tabbar,.s-actions,.k-toast,.pv-toggle{display:none !important}
  body{font-size:11pt;color:#030303;background:#fff;padding-bottom:0}
  .s-block{box-shadow:none;background:#fff}
  .s-block--green{background:#fff;color:#030303}
  .s-block--green h2,.s-block--green p{color:#030303}
  .k-way,.k-light,.k-sort__item{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}
}