/* SAMR at PUFSD. Shared stylesheet for learn, examples, and tools.
   Tokens and control classes copied from pufsd-components.css.
   Site chrome uses the s- prefix. Controls keep the pv- prefix.
*/

/* ==== TOKENS ============================================================ */
:root{
  --pv-ink:#030303; --pv-slate:#202020; --pv-silver:#909090; --pv-cloud:#D8D8D8;
  --pv-green:#036C3E; --pv-green-hover:#025A33; --pv-spring:#6DB94C; --pv-spring-hover:#5CA83E;
  --pv-forrest:#00260C; --pv-highlight:#B1D055;
  --pv-page:#FFFFFF; --pv-card:#EDEDED; --pv-field:#F5F5F5;

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

  --pv-text:var(--pv-slate); --pv-text-strong:var(--pv-ink); --pv-text-muted:var(--pv-silver);
  --pv-text-on-dark:#FFFFFF;
  --pv-accent:var(--pv-green); --pv-accent-hover:var(--pv-green-hover);
  --pv-accent-active:var(--pv-forrest); --pv-accent-on-green:var(--pv-highlight);
  --pv-emphasis:var(--pv-spring); --pv-emphasis-hover:var(--pv-spring-hover);
  --pv-focus:var(--pv-green);
  --pv-control-edge:var(--pv-silver);

  --pv-font:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --pv-w-reg:400; --pv-w-semi:600;
  --pv-track-h1:-1px;
  --pv-1:4px; --pv-2:8px; --pv-3:12px; --pv-4:16px; --pv-5:20px; --pv-6:24px;
  --pv-8:32px; --pv-10:40px; --pv-12:48px; --pv-16:64px;
  --pv-radius:4px; --pv-radius-pill:999px; --pv-hairline:1px solid var(--pv-cloud);
  --pv-ease:cubic-bezier(.4,0,.2,1); --pv-fast:150ms; --pv-base:200ms;
  --pv-touch:44px; --pv-measure:68ch;
}

/* ==== BASE ============================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--pv-page);color:var(--pv-text);font-family:var(--pv-font);
  font-size:16px;font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-weight:var(--pv-w-semi);margin:0 0 var(--pv-3);letter-spacing:0}
h1{font-size:34px;line-height:1.2;letter-spacing:var(--pv-track-h1);color:var(--pv-text-strong)}
h2{font-size:26px;line-height:1.25;color:var(--pv-text-strong)}
h3{font-size:20px;line-height:1.3}
h4{font-size:17px;line-height:1.35}
p{margin:0 0 var(--pv-4);max-width:var(--pv-measure)}
a{color:var(--pv-accent);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--pv-accent-hover)}
:focus-visible{outline:2px solid var(--pv-focus);outline-offset:2px}
[hidden]{display:none !important}
img,svg{max-width:100%}
.pv-label{font-size:13px;font-weight:var(--pv-w-semi);letter-spacing:.06em;
  text-transform:uppercase;color:var(--pv-text-muted);display:block;margin-bottom:var(--pv-2)}
.pv-caption{font-size:13px;color:var(--pv-text-muted)}

/* ==== BUTTONS =========================================================== */
.pv-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--pv-2);
  min-height:var(--pv-touch);padding:10px 18px;border:0;border-radius:var(--pv-radius);
  font-family:var(--pv-font);font-size:16px;font-weight:var(--pv-w-semi);line-height:1;
  text-decoration:none;cursor:pointer;transition:background-color var(--pv-fast) var(--pv-ease),
  border-color var(--pv-fast) var(--pv-ease),color var(--pv-fast) var(--pv-ease)}
.pv-btn--primary{background:var(--pv-accent);color:var(--pv-text-on-dark)}
.pv-btn--primary:hover{background:var(--pv-accent-hover);color:var(--pv-text-on-dark)}
.pv-btn--primary:active{background:var(--pv-accent-active)}
.pv-btn--secondary{background:transparent;color:var(--pv-accent);border:var(--pv-hairline)}
.pv-btn--secondary:hover{background:var(--pv-card);color:var(--pv-accent)}
.pv-btn--secondary:active{background:var(--pv-cloud)}
.pv-btn--ghost{background:transparent;color:var(--pv-text)}
.pv-btn--ghost:hover{background:var(--pv-field);color:var(--pv-text)}
.pv-btn--ghost:active{background:var(--pv-card)}
.pv-btn--small{min-height:36px;padding:8px 14px;font-size:15px}
.pv-btn:disabled{background:var(--pv-card);color:var(--pv-text-muted);cursor:not-allowed;
  border-color:transparent}

/* ==== FIELDS and SELECT ================================================= */
.pv-field{width:100%;min-height:var(--pv-touch);padding:10px 12px;
  background:var(--pv-field);border:var(--pv-hairline);border-radius:var(--pv-radius);
  font-family:var(--pv-font);font-size:16px;line-height:1.5;color:var(--pv-text)}
.pv-field::placeholder{color:var(--pv-text-muted)}
.pv-field:focus-visible{border-color:var(--pv-accent)}
textarea.pv-field{resize:vertical;min-height:150px}
.pv-help{font-size:13px;color:var(--pv-text-muted);margin-top:var(--pv-2)}
.pv-select{appearance:none;-webkit-appearance:none;padding-right:40px;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}

/* ==== TABS ============================================================== */
.pv-tabs{display:flex;gap:var(--pv-1);border-bottom:1px solid var(--pv-cloud)}
.pv-tab{appearance:none;border:0;background:transparent;font-family:var(--pv-font);font-size:16px;
  font-weight:var(--pv-w-semi);color:var(--pv-text-muted);min-height:var(--pv-touch);padding:0 var(--pv-4);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--pv-fast) var(--pv-ease),border-color var(--pv-fast) var(--pv-ease)}
.pv-tab:hover{color:var(--pv-text)}
.pv-tab[aria-selected="true"]{color:var(--pv-accent);border-bottom-color:var(--pv-accent)}
.pv-tab:focus-visible{outline:2px solid var(--pv-focus);outline-offset:-2px}

/* ==== FILTER CHIPS ====================================================== */
.pv-chip{display:inline-flex;align-items:center;gap:var(--pv-2);min-height:36px;padding:8px 14px;
  border-radius:var(--pv-radius-pill);border:1px solid var(--pv-control-edge);background:transparent;
  font-family:var(--pv-font);font-size:14px;font-weight:var(--pv-w-semi);color:var(--pv-text);
  cursor:pointer;transition:background-color var(--pv-fast) var(--pv-ease),
  border-color var(--pv-fast) var(--pv-ease),color var(--pv-fast) var(--pv-ease)}
.pv-chip:hover{background:var(--pv-field)}
.pv-chip[aria-pressed="true"]{background:var(--pv-accent);border-color:var(--pv-accent);
  color:var(--pv-text-on-dark)}
.pv-chip[aria-pressed="true"]:hover{background:var(--pv-accent-hover)}

/* ==== ALERT ============================================================= */
.pv-alert{display:flex;gap:var(--pv-3);padding:var(--pv-4);border-radius:var(--pv-radius);
  border-left:4px solid transparent;font-size:15px;margin-top:var(--pv-4)}
.pv-alert svg{flex:none;margin-top:2px}
.pv-alert p{margin:0;max-width:none}
.pv-alert--err{background:var(--pv-err-bg);border-left-color:var(--pv-err);color:var(--pv-err)}

/* ==== BADGES ============================================================ */
.pv-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  border-radius:var(--pv-radius-pill);font-size:13px;font-weight:var(--pv-w-semi);line-height:1.4}
.pv-badge--neutral{background:var(--pv-card);color:var(--pv-slate)}
.pv-badge--green{background:var(--pv-accent);color:var(--pv-text-on-dark)}
.pv-badge--spring{background:var(--pv-emphasis);color:var(--pv-ink)}

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

/* ==== EMPTY STATE ======================================================= */
.pv-empty{text-align:center;padding:var(--pv-12) var(--pv-5);border:1px dashed var(--pv-cloud);
  border-radius:var(--pv-radius)}
.pv-empty h2,.pv-empty h3{margin-bottom:var(--pv-2);font-size:20px}
.pv-empty p{margin:0 auto var(--pv-4);color:var(--pv-text-muted);max-width:44ch}
.pv-empty p:last-child{margin-bottom:0}

/* ==== SITE CHROME ======================================================= */
.s-skip{position:absolute;left:var(--pv-4);top:-60px;z-index:60;background:var(--pv-accent);
  color:var(--pv-text-on-dark);padding:10px 16px;border-radius:var(--pv-radius);
  font-weight:var(--pv-w-semi);text-decoration:none;transition:top var(--pv-fast) var(--pv-ease)}
.s-skip:focus{top:var(--pv-3);color:var(--pv-text-on-dark)}

.s-head{position:sticky;top:0;z-index:40;background:var(--pv-page);border-bottom:var(--pv-hairline)}
.s-head__in{display:flex;align-items:center;justify-content:space-between;gap:var(--pv-5);
  max-width:1120px;margin:0 auto;padding:0 var(--pv-5)}
.s-brand{display:flex;flex-direction:column;justify-content:center;gap:1px;min-height:68px;
  text-decoration:none;color:var(--pv-text-strong)}
.s-brand:hover{color:var(--pv-text-strong)}
.s-brand__mark{font-size:19px;font-weight:var(--pv-w-semi);line-height:1.1}
.s-brand__sub{font-size:12px;font-weight:var(--pv-w-reg);color:var(--pv-text-muted);line-height:1.2}
.s-nav{display:flex;gap:var(--pv-1)}
.s-nav a{display:inline-flex;align-items:center;min-height:var(--pv-touch);padding:0 var(--pv-3);
  font-size:15px;font-weight:var(--pv-w-semi);color:var(--pv-text);text-decoration:none;
  white-space:nowrap;border-bottom:2px solid transparent;
  transition:color var(--pv-fast) var(--pv-ease),border-color var(--pv-fast) var(--pv-ease)}
.s-nav a:hover{color:var(--pv-accent)}
.s-nav a[aria-current="page"]{color:var(--pv-accent);border-bottom-color:var(--pv-accent)}

.s-wrap{max-width:1120px;margin:0 auto;padding:0 var(--pv-5)}
.s-narrow{max-width:740px;margin:0 auto;padding:0 var(--pv-5)}
.s-sec{padding:var(--pv-10) 0}
.s-sec--tint{background:var(--pv-field);border-top:var(--pv-hairline);border-bottom:var(--pv-hairline)}
.s-sec--top{padding-top:var(--pv-12)}
.s-eyebrow{font-size:13px;font-weight:var(--pv-w-semi);letter-spacing:.06em;text-transform:uppercase;
  color:var(--pv-text-muted);margin:0 0 var(--pv-2)}
.s-lede{font-size:18px;max-width:62ch;color:var(--pv-text)}
.s-head-block{margin-bottom:var(--pv-8)}
.s-head-block p:last-child{margin-bottom:0}

/* Hero. The brand sheet sets H1 tracking at -1px and calls for -.03em above
   40px so the tracking scales with the type. This H1 crosses that threshold. */
.s-hero{padding:var(--pv-12) 0 var(--pv-10)}
.s-hero h1{font-size:clamp(30px,4.6vw,44px);letter-spacing:-.03em;max-width:17ch;
  margin-bottom:var(--pv-4)}
.s-hero__sub{font-size:19px;max-width:56ch;margin-bottom:var(--pv-6)}
.s-actions{display:flex;flex-wrap:wrap;gap:var(--pv-3)}

/* Level cards */
.s-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--pv-4)}
.s-level{display:flex;flex-direction:column;border-radius:var(--pv-radius);padding:var(--pv-5);
  background:var(--pv-card);color:var(--pv-slate)}
.s-level__letter{display:block;font-size:32px;line-height:1;font-weight:var(--pv-w-semi);
  letter-spacing:-.02em;color:var(--pv-accent);margin-bottom:var(--pv-3)}
.s-level h3{margin-bottom:var(--pv-2);color:inherit}
.s-level p{margin:0 0 var(--pv-4);max-width:none;font-size:15px}
.s-level__tell{font-size:12px;font-weight:var(--pv-w-semi);letter-spacing:.06em;text-transform:uppercase;
  color:var(--pv-text-muted);margin:auto 0 var(--pv-1);padding-top:var(--pv-2)}
.s-level__ex{font-size:15px;margin:0}
.s-level--m{background:var(--pv-emphasis);color:var(--pv-ink)}
.s-level--m .s-level__letter{color:var(--pv-ink)}
.s-level--m .s-level__tell{color:var(--pv-slate)}
.s-level--r{background:var(--pv-accent);color:var(--pv-text-on-dark)}
.s-level--r .s-level__letter{color:var(--pv-accent-on-green)}
.s-level--r .s-level__tell{color:var(--pv-text-on-dark)}

/* Enhancement and transformation rail */
.s-spectrum{margin-top:var(--pv-6)}
.s-spectrum__rail{position:relative;height:2px;background:var(--pv-cloud);
  border-radius:var(--pv-radius-pill)}
.s-spectrum__rail::after{content:"";position:absolute;left:50%;top:-7px;width:2px;height:16px;
  margin-left:-1px;background:var(--pv-accent)}
.s-spectrum__ends{display:flex;justify-content:space-between;gap:var(--pv-5);margin-top:var(--pv-4)}
.s-spectrum__end{max-width:36ch}
.s-spectrum__end--right{text-align:right}
.s-spectrum__name{display:block;font-size:13px;font-weight:var(--pv-w-semi);letter-spacing:.06em;
  text-transform:uppercase;color:var(--pv-text)}
.s-spectrum__sub{display:block;font-size:15px;color:var(--pv-text-muted);margin-top:2px}
.s-spectrum__note{font-size:15px;color:var(--pv-text-muted);margin:var(--pv-5) 0 0;max-width:66ch}

/* Two column prose */
.s-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--pv-8)}
.s-panel{background:var(--pv-card);border-radius:var(--pv-radius);padding:var(--pv-5)}
.s-panel h3{margin-bottom:var(--pv-2);font-size:17px}
.s-panel p{max-width:none;font-size:15px}
.s-panel p:last-child{margin-bottom:0}
.s-panel--green{background:var(--pv-accent);color:var(--pv-text-on-dark)}
.s-panel--green h3{color:var(--pv-text-on-dark)}
.s-panel + .s-panel{margin-top:var(--pv-4)}

/* Worked example ladder */
.s-ladder{list-style:none;margin:0 0 var(--pv-5);padding:0;display:grid;gap:var(--pv-2)}
.s-rung{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--pv-4);align-items:start;
  padding:var(--pv-4);border:var(--pv-hairline);border-radius:var(--pv-radius);background:var(--pv-page)}
.s-rung__letter{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--pv-radius);background:var(--pv-card);color:var(--pv-accent);
  font-size:19px;font-weight:var(--pv-w-semi)}
.s-rung--m .s-rung__letter{background:var(--pv-emphasis);color:var(--pv-ink)}
.s-rung--r .s-rung__letter{background:var(--pv-accent);color:var(--pv-text-on-dark)}
.s-rung__name{font-size:12px;font-weight:var(--pv-w-semi);letter-spacing:.06em;text-transform:uppercase;
  color:var(--pv-text-muted);margin:0 0 var(--pv-1)}
.s-rung p{margin:0;max-width:none}
.s-rung__tools{display:flex;flex-wrap:wrap;gap:var(--pv-2);margin-top:var(--pv-3)}

/* Inventory and reference grids */
.s-kit{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--pv-4)}
.s-kit ul{margin:0;padding-left:var(--pv-5);font-size:15px}
.s-kit li{margin-bottom:var(--pv-1)}

/* Numbered questions */
.s-qs{margin:0;padding:0;list-style:none;counter-reset:q}
.s-qs li{counter-increment:q;position:relative;padding-left:var(--pv-10);margin-bottom:var(--pv-5)}
.s-qs li:last-child{margin-bottom:0}
.s-qs li::before{content:counter(q);position:absolute;left:0;top:1px;width:var(--pv-6);height:var(--pv-6);
  display:flex;align-items:center;justify-content:center;border-radius:var(--pv-radius);
  background:var(--pv-accent);color:var(--pv-text-on-dark);font-size:14px;font-weight:var(--pv-w-semi)}
.s-qs strong{display:block;color:var(--pv-text-strong)}
.s-qs p{margin:var(--pv-1) 0 0;max-width:none;font-size:15px;color:var(--pv-text)}

/* ==== EXAMPLES PAGE ===================================================== */
.s-controls{display:flex;flex-wrap:wrap;gap:var(--pv-3);align-items:flex-end;margin-bottom:var(--pv-4)}
.s-controls__search{flex:1 1 260px;min-width:0}
.s-controls__pick{flex:0 1 180px}
.s-search{position:relative}
.s-search .pv-field{padding-right:44px}
.s-search__clear{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:40px;height:40px;
  border:0;background:transparent;color:var(--pv-text-muted);cursor:pointer;
  border-radius:var(--pv-radius);display:flex;align-items:center;justify-content:center;
  transition:background-color var(--pv-fast) var(--pv-ease)}
.s-search__clear:hover{background:var(--pv-cloud)}
.s-chips{display:flex;flex-wrap:wrap;gap:var(--pv-2);margin-bottom:var(--pv-5)}
.s-resultbar{display:flex;flex-wrap:wrap;gap:var(--pv-3);align-items:center;
  justify-content:space-between;margin-bottom:var(--pv-4)}
.s-count{font-size:15px;color:var(--pv-text-muted);margin:0}
.s-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--pv-4);
  list-style:none;margin:0;padding:0}
.s-card{display:flex;flex-direction:column;gap:var(--pv-3);border:var(--pv-hairline);
  border-radius:var(--pv-radius);padding:var(--pv-5)}
.s-card__meta{display:flex;flex-wrap:wrap;gap:var(--pv-2);align-items:center}
.s-card p{margin:0;max-width:none}
.s-card__sub{font-size:13px;color:var(--pv-text-muted);margin-top:auto;padding-top:var(--pv-2)}
.s-more{display:flex;justify-content:center;margin-top:var(--pv-6)}

/* ==== TOOLS PAGE ======================================================== */
.s-tool{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--pv-8);align-items:start;
  margin-top:var(--pv-6)}
.s-form{display:grid;gap:var(--pv-4)}
.s-form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--pv-4)}
.s-fieldfoot{display:flex;flex-wrap:wrap;gap:var(--pv-3);justify-content:space-between;
  align-items:baseline}
.s-try{display:flex;flex-wrap:wrap;gap:var(--pv-2);align-items:center}
.s-try__label{font-size:13px;color:var(--pv-text-muted)}
.s-result{margin-top:var(--pv-8)}
.s-result:focus{outline:none}
.s-quote{border-left:2px solid var(--pv-cloud);padding-left:var(--pv-4);margin:0 0 var(--pv-5);
  color:var(--pv-text);font-size:15px}
.s-quote span{display:block;font-size:13px;color:var(--pv-text-muted);margin-top:var(--pv-2)}
.s-verdict{border:var(--pv-hairline);border-radius:var(--pv-radius);padding:var(--pv-5);
  margin-bottom:var(--pv-6)}
.s-verdict__top{display:flex;flex-wrap:wrap;gap:var(--pv-2);align-items:center;margin-bottom:var(--pv-4)}
.s-verdict h3{margin:0 0 var(--pv-2);font-size:17px}
.s-verdict p{max-width:none;margin-bottom:var(--pv-5)}
.s-verdict p:last-child{margin-bottom:0}
.s-verdict ul{margin:0 0 var(--pv-5);padding-left:var(--pv-5)}
.s-verdict ul:last-child{margin-bottom:0}
.s-verdict li{margin-bottom:var(--pv-1)}
.s-bars{display:grid;gap:var(--pv-3);margin:0 0 var(--pv-6)}
.s-bar__top{display:flex;justify-content:space-between;font-size:14px;margin-bottom:var(--pv-1)}
.s-bar__name{font-weight:var(--pv-w-semi)}
.s-bar__num{font-variant-numeric:tabular-nums;color:var(--pv-text-muted)}
.s-bar--top .s-bar__name{color:var(--pv-accent)}
.s-subhead{font-size:13px;font-weight:var(--pv-w-semi);letter-spacing:.06em;text-transform:uppercase;
  color:var(--pv-text-muted);margin:0 0 var(--pv-3)}
.s-step{border:var(--pv-hairline);border-radius:var(--pv-radius);padding:var(--pv-5);
  margin-bottom:var(--pv-3)}
.s-step__top{display:flex;align-items:center;gap:var(--pv-3);margin-bottom:var(--pv-3)}
.s-step__letter{width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:var(--pv-radius);background:var(--pv-card);color:var(--pv-accent);font-size:15px;
  font-weight:var(--pv-w-semi)}
.s-step--m .s-step__letter{background:var(--pv-emphasis);color:var(--pv-ink)}
.s-step--r .s-step__letter{background:var(--pv-accent);color:var(--pv-text-on-dark)}
.s-step h4{margin:0;font-size:17px}
.s-step p{max-width:none}
.s-step p:last-child{margin-bottom:0}
.s-toolline{display:flex;flex-wrap:wrap;gap:var(--pv-2);margin-top:var(--pv-3)}
.s-actions--result{margin-top:var(--pv-6);padding-top:var(--pv-5);border-top:var(--pv-hairline)}

.s-side h3{margin-bottom:var(--pv-2);font-size:17px}
.s-hist{list-style:none;margin:var(--pv-3) 0 0;padding:0;display:grid;gap:var(--pv-2)}
.s-hist li{border:var(--pv-hairline);border-radius:var(--pv-radius)}
.s-hist button{display:block;width:100%;text-align:left;background:transparent;border:0;
  padding:var(--pv-3);font-family:var(--pv-font);font-size:14px;color:var(--pv-text);cursor:pointer;
  border-radius:var(--pv-radius);transition:background-color var(--pv-fast) var(--pv-ease)}
.s-hist button:hover{background:var(--pv-field)}
.s-hist button[aria-current="true"]{background:var(--pv-field);
  border-left:2px solid var(--pv-accent);padding-left:10px}
.s-hist__lvl{display:block;font-size:12px;font-weight:var(--pv-w-semi);letter-spacing:.06em;
  text-transform:uppercase;color:var(--pv-accent);margin-bottom:2px}
.s-hist__txt{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Loading */
.s-spin{width:18px;height:18px;flex:none;border:2px solid var(--pv-cloud);
  border-top-color:var(--pv-accent);border-radius:50%;animation:s-turn .7s linear infinite}
@keyframes s-turn{100%{transform:rotate(360deg)}}
.s-loading{display:flex;align-items:center;gap:var(--pv-3);color:var(--pv-text-muted);font-size:15px;
  margin-top:var(--pv-5)}

/* ==== RESPONSIVE ======================================================== */
@media (max-width:900px){
  .s-cols{grid-template-columns:minmax(0,1fr);gap:var(--pv-5)}
  .s-tool{grid-template-columns:minmax(0,1fr);gap:var(--pv-6)}
}
@media (max-width:640px){
  h1{font-size:28px}
  h2{font-size:22px}
  .s-head__in{padding:0 var(--pv-4);flex-wrap:wrap;gap:0}
  .s-brand{min-height:58px}
  .s-nav{width:100%;border-top:var(--pv-hairline)}
  .s-nav a{flex:1;justify-content:center;padding:0 var(--pv-2);font-size:14px}
  .s-wrap,.s-narrow{padding:0 var(--pv-4)}
  .s-sec{padding:var(--pv-6) 0}
  .s-sec--top{padding-top:var(--pv-8)}
  .s-hero{padding:var(--pv-8) 0 var(--pv-6)}
  .s-hero__sub,.s-lede{font-size:17px}
  .s-actions .pv-btn{flex:1 1 100%}
  .s-spectrum__ends{flex-direction:column;gap:var(--pv-3)}
  .s-spectrum__end--right{text-align:left}
  .s-rung{grid-template-columns:minmax(0,1fr);gap:var(--pv-3)}
  .s-controls__pick{flex:1 1 140px}
}

/* ==== PRINT ============================================================= */
@media print{
  .s-head,.s-skip,.s-side,.s-form,.pv-tabs,.s-actions--result,.s-sec--tint{display:none !important}
  body{font-size:11pt;color:#030303}
  .s-result{margin-top:0}
  .s-verdict,.s-step{border:1px solid #909090;break-inside:avoid}
  .pv-badge{border:1px solid #909090}
}

/* ==== 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}
}