/* =============================================================================
   QUEERING ANCs — STRUCTURE / COMPONENT LAYER
   Capital Stonewall Democrats
   -----------------------------------------------------------------------------
   Brand-agnostic: references tokens (theme.css) only, never a raw brand value.
   A superset of the original styles.css — every existing class name & behavior
   is preserved; states are refined and new civic/learning components are added.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0 · RESET & BASE
   ---------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:var(--fw-regular);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
hr{border:0;border-top:1px solid var(--line);margin:var(--space-7) 0}
::selection{background:var(--accent);color:var(--paper)}

/* Consistent keyboard focus everywhere. Components override with their own
   ring where a tighter fit looks better, but nothing is ever focus-invisible. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
  border-radius:var(--r-xs);
}
:where(a,button,input,select,textarea,summary):focus:not(:focus-visible){outline:none}

/* Skip link for keyboard / screen-reader users */
.skip-link{
  position:absolute;left:var(--space-4);top:-60px;z-index:50;
  background:var(--ink);color:var(--on-dark);
  padding:10px 16px;border-radius:var(--r-sm);font-weight:600;font-size:14px;text-decoration:none;
  transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{top:var(--space-4)}

/* ----------------------------------------------------------------------------
   1 · LAYOUT · MASTHEAD · BRANDMARK
   ---------------------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) var(--space-11)}
.wrap.wide{max-width:var(--maxw-wide)}

.masthead{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:26px 0 16px;border-bottom:1px solid var(--line);margin-bottom:34px;
}
.wordmark{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:19px;letter-spacing:-.01em}
.org{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
.logo{display:block;height:30px;width:auto}

/* Wordmark lockup container — the chosen logo mark drops in beside/above it */
.brandmark{display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px;text-decoration:none;color:var(--ink)}
.brandmark .wordmark{line-height:1}
.brandmark.inline{flex-direction:row;align-items:center;gap:11px}

/* ----------------------------------------------------------------------------
   2 · THE SPARK — our connective mark  (queer + civic, reused everywhere)
   An asterisk: the mark of annotation and expansiveness. It's the footnote of
   democracy (the hyper-local office everyone overlooks — "*this matters") and
   the "*" of trans* / LGBTQ+ that means "and everyone." In the lockup it
   connects the verb to the office — Queering * ANCs — and it recurs as bullets,
   dividers, the seal's heart, badge marks, and the level-up burst. Sized by
   font-size, colored by `color`. Monochrome by default; the pride variant
   carries six rainbow spokes for hero + celebratory moments only.
   ---------------------------------------------------------------------------- */
.spark{position:relative;display:inline-block;width:1em;height:1em;flex:none;color:var(--accent);vertical-align:-0.13em;
  background:linear-gradient(currentColor,currentColor) center/15% 100% no-repeat}
.spark::before,.spark::after{content:"";position:absolute;inset:0;background:linear-gradient(currentColor,currentColor) center/15% 100% no-repeat}
.spark::before{transform:rotate(60deg)}
.spark::after{transform:rotate(120deg)}
.spark--ink{color:var(--ink)}
.spark--pink{color:var(--pink)}
.spark--paper{color:var(--paper)}
/* pride spark — six rainbow spokes, for the logo / seal / celebration only */
.spark--pride{background:linear-gradient(180deg,var(--pride-1) 0 50%,var(--pride-4) 50% 100%) center/15% 100% no-repeat}
.spark--pride::before{background:linear-gradient(180deg,var(--pride-2) 0 50%,var(--pride-5) 50% 100%) center/15% 100% no-repeat}
.spark--pride::after{background:linear-gradient(180deg,var(--pride-3) 0 50%,var(--pride-6) 50% 100%) center/15% 100% no-repeat}

/* spark divider — connective tissue between sections */
.sparkrule{display:flex;align-items:center;gap:15px;color:var(--line)}
.sparkrule::before,.sparkrule::after{content:"";flex:1;height:1px;background:currentColor}
.sparkrule .spark{font-size:17px;color:var(--accent)}

/* spark bullet list */
.sparklist{list-style:none;margin:14px 0 0;padding:0}
.sparklist li{display:flex;gap:11px;align-items:baseline;padding:8px 0;color:var(--ink-2);font-size:16px}
.sparklist li .spark{font-size:14px;color:var(--accent)}

@keyframes sparkburst{0%{transform:scale(.3) rotate(-45deg);opacity:0}55%{transform:scale(1.3) rotate(15deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.stagebadge.is-levelup .spark{animation:sparkburst .6s var(--ease-spring)}

/* ----------------------------------------------------------------------------
   3 · TYPE
   ---------------------------------------------------------------------------- */
.eyebrow{
  font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--muted);font-weight:var(--fw-semibold);margin:0 0 14px;
}
.eyebrow.accent{color:var(--accent)}
.eyebrow.pink{color:var(--secondary-strong)}

/* Q61 — the daily quote (three quiet placements). Tokens only; no animation (reduced-motion safe). */
.daily-quote{margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--seat-line,#D9D5CC)}
.daily-quote .dq-frame{margin:0 0 8px}
.daily-quote .dq-q{margin:0;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-d3,1.25rem);line-height:1.3;color:var(--ink);border:0;padding:0;quotes:none}
.daily-quote .dq-cite{margin:10px 0 0;font-size:13px;color:var(--muted);font-style:normal}
.daily-quote .dq-cite cite{font-style:normal}
.daily-quote .dq-src{margin-left:6px;white-space:nowrap}
.daily-quote .dq-attr{margin-left:6px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);opacity:.85}

h1.display{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-d1);line-height:var(--lh-d1);letter-spacing:var(--ls-d1);margin:0 0 18px}
h2.display{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-d2);line-height:var(--lh-d2);letter-spacing:var(--ls-d2);margin:0 0 12px}
h3.display{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-d3);line-height:var(--lh-d3);letter-spacing:var(--ls-d3);margin:0 0 10px}
.display .mark{background:linear-gradient(180deg,transparent 58%,var(--highlight) 58% 92%,transparent 92%);padding:0 .04em}

.sub{font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);color:var(--ink-2);max-width:48ch;margin:0 0 22px}
.body{font-size:var(--fs-body);color:var(--muted);max-width:52ch;margin:0 0 30px}
.body b{color:var(--ink-2);font-weight:var(--fw-semibold)}

a.link{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-soft);padding-bottom:1px;font-weight:500;transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
a.link:hover{border-bottom-color:var(--accent)}
a.link:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);border-bottom-color:transparent}

/* Placeholder for imagery you'll drop in later (striped, with a monospace note) */
.ph{
  background:repeating-linear-gradient(45deg,var(--surface-sunken) 0 11px,var(--surface-2) 11px 22px);
  border:1.5px dashed var(--line-strong);border-radius:var(--r);
  display:grid;place-items:center;text-align:center;
  color:var(--muted);font-family:var(--font-num);font-size:12px;letter-spacing:.03em;
  min-height:180px;padding:18px;
}

/* ----------------------------------------------------------------------------
   4 · STEPLINE  (top-of-quiz progress)
   ---------------------------------------------------------------------------- */
.stepline{display:flex;align-items:center;gap:14px;margin-bottom:30px;color:var(--muted)}
.stepline .n{font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.04em;white-space:nowrap}
.stepline .track{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden;border-radius:var(--r-pill)}
.stepline .track i{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);transition:width var(--dur) var(--ease)}

/* ----------------------------------------------------------------------------
   5 · FORMS
   ---------------------------------------------------------------------------- */
fieldset{border:0;margin:0;padding:0}
legend{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-d3);line-height:var(--lh-d3);letter-spacing:var(--ls-d3);padding:0;margin-bottom:8px}
.qhelp{font-size:14.5px;color:var(--muted);margin:0 0 22px;max-width:50ch}

.field{display:block;margin:20px 0 0}
.field .flabel{font-size:13px;font-weight:var(--fw-semibold);color:var(--ink-2);margin-bottom:7px;letter-spacing:.01em}
.field .fhelp{font-size:12.5px;color:var(--muted);margin-top:6px}

input[type=text],input[type=email],input[type=search],input[type=tel],input[type=url],input[type=number],input[type=date],select,textarea{
  width:100%;font:inherit;font-size:16px;padding:12px 13px;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
textarea{min-height:108px;resize:vertical;line-height:1.5}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--ink-2)}
input[type=text]:focus,input[type=email]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=url]:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);
}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-sunken);color:var(--muted);cursor:not-allowed;border-style:dashed}
[aria-invalid="true"],input.invalid,select.invalid{border-color:var(--bad)!important}
[aria-invalid="true"]:focus,input.invalid:focus{box-shadow:0 0 0 3px var(--bad-soft)!important}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 18px) 51%,calc(100% - 13px) 51%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}

/* ----------------------------------------------------------------------------
   6 · BUTTONS  (hard "stamp" shadow is the signature. Full state matrix.)
   ---------------------------------------------------------------------------- */
.btn,.btn-outline{
  font:inherit;font-size:15px;font-weight:var(--fw-semibold);letter-spacing:.01em;cursor:pointer;
  border:2px solid var(--ink);padding:12px 22px;border-radius:var(--r-sm);text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 0 0 transparent;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
.btn{background:var(--accent);color:var(--on-accent)}
.btn-outline{background:var(--surface);color:var(--ink)}
.btn:hover,.btn-outline:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-pop)}
.btn:active,.btn-outline:active{transform:translate(0,0);box-shadow:var(--shadow-pop-sm)}
.btn:focus-visible,.btn-outline:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.btn:disabled,.btn-outline:disabled,.btn[aria-disabled="true"],.btn-outline[aria-disabled="true"]{opacity:.32;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}
.btn .arr,.btn-outline .arr{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;transition:transform var(--dur-fast) var(--ease)}
.btn:hover .arr,.btn-outline:hover .arr{transform:translateX(3px)}

/* Variants (additive — markup opts in; primary/.btn behavior unchanged) */
.btn.secondary{background:var(--secondary-strong);color:#fff}
.btn.dark{background:var(--ink);color:var(--on-dark)}
.btn-outline.accent{color:var(--accent);border-color:var(--accent)}
.btn-outline.accent:hover{box-shadow:var(--shadow-pop-accent)}
.btn.block,.btn-outline.block{width:100%}
.btn.sm,.btn-outline.sm{padding:8px 15px;font-size:13.5px}
.btn.lg,.btn-outline.lg{padding:15px 28px;font-size:16.5px}

/* Quiet text button */
.btn-quiet{background:none;border:none;color:var(--muted);font:inherit;font-size:15px;font-weight:500;cursor:pointer;padding:8px 2px;border-radius:var(--r-xs);transition:color var(--dur-fast) var(--ease)}
.btn-quiet:hover{color:var(--ink)}
.btn-quiet:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.btn-quiet:disabled{opacity:.35;cursor:not-allowed}

/* ----------------------------------------------------------------------------
   7 · QUIZ CONTROLS
   ---------------------------------------------------------------------------- */

/* Multi/single option rows */
.opts{margin:0}
.opt{display:flex;align-items:center;gap:14px;padding:15px 4px;cursor:pointer;border-top:1px solid var(--line);transition:padding-left var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.opt:last-of-type{border-bottom:1px solid var(--line)}
.opt:hover{padding-left:8px;background:var(--surface-2)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt .mark{width:16px;height:16px;flex:none;border:1.5px solid var(--line-strong);border-radius:3px;display:grid;place-items:center;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.opt .mark:after{content:"";width:8px;height:8px;border-radius:1px;background:var(--accent);transform:scale(0);transition:transform var(--dur-fast) var(--ease-spring)}
.opt input:checked ~ .mark{border-color:var(--accent)}
.opt input:checked ~ .mark:after{transform:scale(1)}
.opt .lab{font-size:16.5px;color:var(--ink-2)}
.opt input:checked ~ .lab{color:var(--ink);font-weight:500}
.opt:has(input:checked){box-shadow:inset 3px 0 0 var(--accent);background:var(--accent-soft)}
.opt input:focus-visible ~ .mark{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.opt input:disabled ~ .lab{color:var(--muted)}
.opt:has(input:disabled){cursor:not-allowed;background:none;box-shadow:none}
/* Radio rendering: round mark */
.opt.radio .mark{border-radius:50%}
.opt.radio .mark:after{border-radius:50%}

/* 1–5 scale (Likert) */
.scale{display:flex;gap:8px;margin:18px 0 10px}
.scale .pip{flex:1}
.scale .pip input{position:absolute;opacity:0;width:0;height:0}
.scale .pip .face{display:flex;align-items:center;justify-content:center;height:46px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);font-weight:var(--fw-semibold);color:var(--ink-2);cursor:pointer;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.scale .pip .face:hover{border-color:var(--accent);color:var(--accent)}
.scale .pip input:checked ~ .face{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.scale .pip input:checked ~ .face{transform:translateY(-2px)}
.scale .pip input:focus-visible ~ .face{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.scale-ends{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)}

/* "Well" — compact mini-scale matrix rows */
.well{margin:14px 0 0}
.well-row{padding:16px 0;border-top:1px solid var(--line)}
.well-row:last-child{border-bottom:1px solid var(--line)}
.well-q{font-size:15.5px;color:var(--ink);margin:0 0 10px;font-weight:500}
.well-opts{display:flex;gap:8px}
.well-opts label{flex:1}
.well-opts input{position:absolute;opacity:0;width:0;height:0}
.well-opts .face{display:block;text-align:center;padding:9px 6px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);font-size:13.5px;color:var(--ink-2);cursor:pointer;transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.well-opts .face:hover{border-color:var(--accent);color:var(--accent)}
.well-opts input:checked ~ .face{border-color:var(--accent);color:var(--accent);font-weight:var(--fw-semibold);background:var(--accent-soft)}
.well-opts input:focus-visible ~ .face{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

/* Rank / reorder list */
.rank{list-style:none;margin:18px 0 0;padding:0}
.rank li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);transition:background var(--dur-fast) var(--ease)}
.rank li:last-child{border-bottom:1px solid var(--line)}
.rank li:hover{background:var(--surface-2)}
.rank .rnk{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:17px;color:var(--accent);min-width:22px;font-variant-numeric:tabular-nums}
.rank .rlab{flex:1;font-size:16px;color:var(--ink)}
.rank .mv{border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink-2);width:30px;height:30px;border-radius:var(--r-sm);cursor:pointer;display:grid;place-items:center;transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.rank .mv:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.rank .mv:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.rank .mv:disabled{opacity:.3;cursor:not-allowed}
.rank .mv svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

/* SMD finder (look up your district) */
.smd-find{display:flex;gap:10px;align-items:flex-end;margin:20px 0 0;flex-wrap:wrap}
.smd-find .field{flex:1;min-width:200px;margin:0}
.smd-out{margin:14px 0 0;font-size:15px;line-height:1.5}
.smd-out.ok{padding-left:14px;border-left:2px solid var(--accent);color:var(--ink-2)}
.smd-out.warn{padding-left:14px;border-left:2px solid var(--line-strong);color:var(--muted)}
.smd-out b{color:var(--ink);font-weight:var(--fw-semibold)}

/* Platform builder (numbered planks) */
.platform{list-style:none;margin:14px 0 0;padding:0;counter-reset:plat}
.platform li{display:flex;gap:14px;padding:11px 0;border-top:1px solid var(--line);align-items:baseline}
.platform li:before{counter-increment:plat;content:counter(plat);font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--accent);min-width:18px;font-variant-numeric:tabular-nums}
.platform .ptxt{color:var(--ink-2);font-size:16px}

/* Care / human-voice note (trans-blue keyline = the "we've got you" voice) */
.care{font-size:15px;color:var(--ink-2);line-height:1.55;margin:0 0 10px;padding-left:14px;border-left:2px solid var(--trans-blue);max-width:54ch}

/* Multi-select hint + confirm */
.multihint{font-size:13px;color:var(--muted);margin:0 0 14px}
/* A10: optional free-text under a multi-select ("Something else") */
.ft-field{display:block;margin:16px 0 0}
.ft-label{display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin:0 0 6px}
.ft-field textarea{width:100%;font:inherit;font-size:16px;padding:11px 13px;border:2px solid var(--seat-line,#D9D5CC);border-radius:9px;background:#fff;resize:vertical}
.ft-field textarea:focus{border-color:var(--ink);outline:2px solid var(--accent);outline-offset:1px}
/* A2: inline text button (Change location) */
button.linkbtn{background:none;border:0;padding:0;color:var(--accent);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
button.linkbtn:hover{color:var(--ink)}
.confirm{margin-top:18px;padding-left:16px;border-left:2px solid var(--accent)}

/* ----------------------------------------------------------------------------
   8 · ACTIONS BAR
   ---------------------------------------------------------------------------- */
.actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:34px}
.actions .grow{display:flex;gap:12px;flex-wrap:wrap}

/* ----------------------------------------------------------------------------
   9 · RESULTS
   ---------------------------------------------------------------------------- */
.result-head{margin-bottom:34px}
.lead{font-size:18px;line-height:1.55;color:var(--ink-2);max-width:52ch;margin:0}
.flag{font-size:14.5px;color:var(--muted);margin:14px 0 0;padding-left:14px;border-left:2px solid var(--line-strong);max-width:52ch}

.section{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.section > .eyebrow{margin-bottom:18px}

.score{display:flex;align-items:flex-end;gap:16px;margin-bottom:14px}
.score .num{font-family:var(--font-display);font-weight:var(--fw-display);font-size:64px;line-height:.86;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--accent)}
.score .den{font-size:15px;color:var(--muted);padding-bottom:7px}

.bar{height:3px;background:var(--line);position:relative;overflow:hidden;margin:2px 0 12px;border-radius:var(--r-pill)}
.bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);transition:width var(--dur-slow) var(--ease)}
.bar.tall{height:6px}
.bar.spectrum-fill i{background:linear-gradient(90deg,var(--spectrum-1),var(--spectrum-4))}

.pairs{display:grid;grid-template-columns:1fr 1fr;gap:30px 36px}
.pair .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:var(--fw-semibold);margin-bottom:8px}
.pair .v{font-size:16px;color:var(--ink-2);line-height:1.5}

.count{display:flex;gap:22px;margin:2px 0 4px}
.count .u b{font-family:var(--font-display);font-weight:var(--fw-display);font-size:32px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.count .u span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px;display:block}

.dates{list-style:none;margin:0;padding:0}
.dates li{display:flex;gap:16px;padding:9px 0;border-top:1px solid var(--line);font-size:15px}
.dates .d{font-variant-numeric:tabular-nums;color:var(--muted);min-width:118px}
.dates li.key .ev{color:var(--ink);font-weight:var(--fw-semibold)}
.dates li.key{box-shadow:inset 3px 0 0 var(--accent);padding-left:12px;margin-left:-12px}

.cta-form{margin-top:14px;max-width:420px}

.nextsteps{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 6px}
.nextsteps a{justify-content:center;text-align:center}

/* ----------------------------------------------------------------------------
   10 · STATUS PILLS / TAGS
   (module status, approval state — text + soft bg + matching ink, all AA)
   ---------------------------------------------------------------------------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;line-height:1;
  padding:5px 10px;border-radius:var(--r-pill);border:1.5px solid;white-space:nowrap;
}
/* No leading dot by design — a clean tag, not an "AI pill". */
.pill.is-done{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-border)}
.pill.is-progress{color:var(--accent-strong);background:var(--accent-soft);border-color:var(--info-border)}
.pill.is-locked{color:var(--muted);background:var(--surface-sunken);border-color:var(--line-strong)}
.pill.is-new{color:var(--secondary-strong);background:var(--secondary-soft);border-color:var(--secondary-border)}
.pill.is-review{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-border)}
.pill.is-approved{color:var(--on-accent);background:var(--accent);border-color:var(--ink)}

/* ----------------------------------------------------------------------------
   11 · CALLOUTS / ALERTS
   ---------------------------------------------------------------------------- */
.callout{position:relative;padding:16px 18px;border:1.5px solid var(--border);border-radius:var(--r);background:var(--surface);margin:18px 0}
.callout__title{font-weight:var(--fw-semibold);color:var(--ink);margin:0 0 4px;font-size:15px}
.callout p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.55}
.callout p + p{margin-top:8px}
.callout--info{background:var(--info-soft);border-color:var(--info-border);box-shadow:inset 3px 0 0 var(--accent)}
.callout--ok{background:var(--ok-soft);border-color:var(--ok-border);box-shadow:inset 3px 0 0 var(--ok)}
.callout--warn{background:var(--warn-soft);border-color:var(--warn-border);box-shadow:inset 3px 0 0 var(--warn)}
.callout--bad{background:var(--bad-soft);border-color:var(--bad-border);box-shadow:inset 3px 0 0 var(--bad)}
/* Pride callout: the bold human-voice moment — a confident dark statement card */
.callout--pride{background:var(--surface-ink);border-color:var(--ink);color:var(--on-dark)}
.callout--pride .callout__title{color:#fff}
.callout--pride p{color:var(--on-dark-muted)}
.callout--pride .stars{margin-bottom:14px}

/* ----------------------------------------------------------------------------
   12 · IN-MODULE FEEDBACK BOX  (right / wrong answer reveal)
   ---------------------------------------------------------------------------- */
.feedback{border-radius:var(--r);padding:16px 18px;margin:16px 0;border:1.5px solid var(--border);background:var(--surface)}
.feedback__label{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:var(--fw-bold);margin-bottom:6px}
.feedback__label .ic{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff}
.feedback__label .ic svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.4}
.feedback p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.55}
.feedback--correct{background:var(--ok-soft);border-color:var(--ok-border);box-shadow:inset 3px 0 0 var(--ok)}
.feedback--correct .feedback__label{color:var(--ok)}
.feedback--correct .ic{background:var(--ok)}
.feedback--incorrect{background:var(--bad-soft);border-color:var(--bad-border);box-shadow:inset 3px 0 0 var(--bad)}
.feedback--incorrect .feedback__label{color:var(--bad)}
.feedback--incorrect .ic{background:var(--bad)}

/* ----------------------------------------------------------------------------
   13 · LEARNING PORTAL — module grid + cards + progress ring + nav
   ---------------------------------------------------------------------------- */
.navlinks{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.navlinks a{font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;padding:7px 11px;border-radius:var(--r-sm);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.navlinks a:hover{background:var(--surface-2);color:var(--ink)}
.navlinks a[aria-current],.navlinks a.active{color:var(--accent);background:var(--accent-soft)}
.navlinks a:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

.modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;margin:22px 0}
.module-card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);
  padding:22px;text-decoration:none;color:inherit;box-shadow:var(--shadow-soft);
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
a.module-card:hover,button.module-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft-lg);border-color:var(--ink)}
.module-card:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.module-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.module-card__n{font-family:var(--font-num);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.module-card__title{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:20px;letter-spacing:-.015em;line-height:1.15;margin:0;color:var(--ink)}
.module-card__desc{font-size:14.5px;color:var(--muted);margin:0;line-height:1.5}
.module-card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.module-card__foot .meta{font-size:12.5px;color:var(--muted)}
.module-card.is-done{border-color:var(--ok-border)}
.module-card.is-active{border-color:var(--ink);box-shadow:var(--shadow-pop)}
.module-card.is-locked{opacity:.62;box-shadow:none;cursor:not-allowed}
.module-card.is-locked:hover{transform:none;box-shadow:none;border-color:var(--border)}

/* Donut progress ring — set --p (0–100) inline: <div class="ring" style="--p:60"> */
.ring{
  --p:0;--size:46px;
  width:var(--size);height:var(--size);flex:none;border-radius:50%;position:relative;
  display:grid;place-items:center;font-family:var(--font-num);font-size:11px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;
  background:
    radial-gradient(closest-side,var(--surface) 0 70%,transparent 71% 100%),
    conic-gradient(var(--accent) calc(var(--p)*1%),var(--surface-sunken) 0);
}
.ring.is-done{background:radial-gradient(closest-side,var(--surface) 0 70%,transparent 71% 100%),conic-gradient(var(--ok) 100%,var(--ok) 0)}
.ring.lg{--size:64px;font-size:13px}

/* ----------------------------------------------------------------------------
   14 · ACHIEVEMENT BADGE  (downloadable completion coin)
   Self-contained block — renders standalone for export/print.
   ---------------------------------------------------------------------------- */
.badge{
  position:relative;width:212px;height:212px;border-radius:50%;
  background:var(--surface);border:2px solid var(--ink);box-shadow:var(--shadow-pop);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  text-align:center;padding:30px 26px;overflow:hidden;
}
/* discrete spectrum ring band inside the coin */
.badge::before{
  content:"";position:absolute;inset:9px;border-radius:50%;z-index:0;
  background:conic-gradient(
    var(--spectrum-1) 0 20%,var(--spectrum-2) 20% 40%,var(--spectrum-3) 40% 60%,
    var(--spectrum-4) 60% 80%,var(--spectrum-5) 80% 100%);
  -webkit-mask:radial-gradient(closest-side,transparent 0 85%,#000 86%);
  mask:radial-gradient(closest-side,transparent 0 85%,#000 86%);
}
.badge > *{position:relative;z-index:1}
/* Q107 BRAND SAFETY — the compact mark holds the pride SPARK, never the "QA" 2-letter monogram (too close to "QAnon") */
.badge .monogram{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--on-dark);display:grid;place-items:center}
.badge .b-kicker{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:var(--fw-bold)}
.badge .b-title{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:21px;line-height:1.04;letter-spacing:-.02em;color:var(--ink);max-width:9ch}
.badge .b-status{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:var(--fw-bold);color:var(--ok)}
.badge.locked{filter:grayscale(1);opacity:.5}
.badge.lg{width:264px;height:264px}

/* ----------------------------------------------------------------------------
   15 · APPROVED SEAL  (official stamp — used on certificate / approvals)
   ---------------------------------------------------------------------------- */
.seal{
  position:relative;width:150px;height:150px;border-radius:50%;border:2px solid var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;
  box-shadow:var(--shadow-pop-sm);
  background:
    radial-gradient(closest-side,var(--surface) 0 78%,transparent 79% 100%),
    conic-gradient(
      var(--spectrum-1) 0 20%,var(--spectrum-2) 20% 40%,var(--spectrum-3) 40% 60%,
      var(--spectrum-4) 60% 80%,var(--spectrum-5) 80% 100%);
}
.seal::before{content:"";position:absolute;inset:15px;border:1.5px solid var(--ink);border-radius:50%;opacity:.32}
.seal .s-top,.seal .s-bottom{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:var(--fw-bold);max-width:13ch;line-height:1.3}
.seal .s-main{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:19px;letter-spacing:-.01em;color:var(--ink);line-height:1}
.seal .s-bar{height:3px;width:30px;border-radius:var(--r-pill);background:var(--accent)}
.seal.sm{width:108px;height:108px}
.seal.sm .s-main{font-size:14px}

/* ----------------------------------------------------------------------------
   16 · CERTIFICATE  (printable completion document)
   ---------------------------------------------------------------------------- */
.certificate{
  position:relative;background:var(--surface);border:2px solid var(--ink);box-shadow:var(--shadow-pop);
  max-width:880px;margin:0 auto;padding:clamp(28px,5vw,56px);overflow:hidden;
}
.certificate::before{content:"";position:absolute;inset:13px;border:1px solid var(--line-strong);pointer-events:none}
.certificate > *{position:relative}
.cert-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:30px}
.cert-org{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:var(--fw-bold)}
.cert-eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:var(--fw-bold);margin:0 0 14px}
.cert-name{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(34px,5.6vw,52px);line-height:1.02;letter-spacing:-.025em;margin:0 0 16px;color:var(--ink)}
.cert-body{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:54ch;margin:0 0 36px}
.cert-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line)}
.cert-sigs{display:flex;gap:40px;flex-wrap:wrap}
.cert-sig{min-width:170px}
.cert-sig .line{height:1.5px;background:var(--ink);margin-bottom:8px}
.cert-sig .who{font-size:13px;color:var(--ink);font-weight:var(--fw-semibold)}
.cert-sig .role{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.cert-seal{flex:none}

/* ----------------------------------------------------------------------------
   17 · ADMIN TABLES
   ---------------------------------------------------------------------------- */
.table-wrap{width:100%;overflow-x:auto;border:1.5px solid var(--border);border-radius:var(--r);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.table thead th{
  text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:var(--fw-bold);
  padding:13px 16px;border-bottom:2px solid var(--ink);white-space:nowrap;background:var(--surface-2);
}
.table tbody td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr{transition:background var(--dur-fast) var(--ease)}
.table tbody tr:hover{background:var(--surface-2)}
.table .num{font-family:var(--font-num);font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
.table .who{font-weight:var(--fw-semibold);color:var(--ink)}
.table th.num{text-align:right}
.table-sort{background:none;border:0;font:inherit;font-weight:var(--fw-bold);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer;padding:0;display:inline-flex;gap:5px;align-items:center}
.table-sort:hover,.table-sort[aria-sort]{color:var(--ink)}
.table-sort:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

/* ----------------------------------------------------------------------------
   17.5 · CANDIDATE DASHBOARD  (private "my journey" progress portal)
   Cute via microcopy + color + gentle motion — never emoji. Honors
   prefers-reduced-motion (the global rule collapses these animations).
   ---------------------------------------------------------------------------- */

/* — Signature tracker (25 "Qualifies" · 50 "Challenge-proof") ------------- */
.tracker{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-soft)}
.tracker__head{display:flex;align-items:center;justify-content:space-between;gap:16px 22px;flex-wrap:wrap;margin-bottom:8px}
.tracker__lead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tracker__count{display:flex;align-items:flex-end;gap:11px}
.tracker__count .num{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(46px,8vw,62px);line-height:.82;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--tracker-fill);transition:color var(--dur) var(--ease)}
.tracker__count .den{font-size:15px;color:var(--muted);padding-bottom:7px}
.tracker.is-goal .tracker__count .num{color:var(--tracker-goal)}
.tracker__update{display:flex;gap:8px;align-items:center}
.tracker__update input{width:88px;text-align:center;font-variant-numeric:tabular-nums}
.tracker__track{position:relative;padding-top:38px;margin-top:14px}
.tracker__track .bar{height:12px;border-radius:var(--r-pill);background:var(--surface-sunken)}
.tracker__track .bar i{border-radius:var(--r-pill);background:var(--tracker-fill)}
.tracker.is-goal .tracker__track .bar i{background:var(--tracker-goal)}
.tracker__mark{position:absolute;top:0;bottom:0;left:var(--at,50%);width:0;pointer-events:none}
.tracker__mark .stem{position:absolute;top:30px;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:var(--milestone);opacity:.5;border-radius:2px}
.tracker__mark .chip{position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;line-height:1.15;white-space:nowrap}
.tracker__mark .chip b{font-family:var(--font-num);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.tracker__mark .chip span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:1px}
.tracker__mark--end .chip{left:auto;right:0;transform:none;align-items:flex-end}
.tracker__mark--end .stem{left:auto;right:0;transform:none}
.tracker__mark.is-reached .stem{background:var(--ok);opacity:1}
.tracker__mark.is-reached .chip b{color:var(--ok)}
.tracker__cap{font-size:15px;color:var(--ink-2);line-height:1.55;margin:18px 0 0;max-width:62ch}
.tracker__cap b{color:var(--ink);font-weight:600}

/* the journey ladder is now .stepper (v1.1) — revive the level-up pop on the current node */
.stepper.is-levelup li.is-current .node{animation:levelpop .6s var(--ease-spring)}
/* compact inline stage badge (dashboard header) */
.stagebadge{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 10px;border:1.5px solid var(--border);border-radius:var(--r-pill);background:var(--surface);font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.stagebadge .n{font-family:var(--font-num);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;padding-left:9px;margin-left:3px;border-left:1px solid var(--line)}
.stagebadge.is-levelup{animation:levelpop .6s var(--ease-spring);border-color:var(--levelup)}
@keyframes levelpop{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes ringpulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}

/* — Reflection / check-in ------------------------------------------------- */
.checkin{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:22px}
.checkin__prompt{font-size:16px;color:var(--ink);font-weight:500;margin:0 0 12px;line-height:1.45}
.checkin__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
.checkin__streak{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:600}
.checkin__saved{display:none;align-items:center;gap:8px;font-size:14px;color:var(--ok);font-weight:600;margin:14px 0 0}
.checkin__saved svg{width:16px;height:16px;stroke:var(--ok);fill:none;stroke-width:2.4;flex:none}
.checkin.is-saved .checkin__saved{display:inline-flex}
.checkin.is-saved .checkin__foot{display:none}
.checkin .scale-ends{margin-top:2px}
/* "Your why" — re-surfaced reflection */
.why{position:relative;background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:24px 24px 24px 28px;overflow:hidden}
.why::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent)}
.why__eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 12px}
.why__quote{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(19px,2.5vw,25px);line-height:1.28;letter-spacing:-.015em;color:var(--ink);margin:0}
.why__foot{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:13px;color:var(--muted)}

/* — "My journey" dashboard layout ----------------------------------------- */
.journey{display:grid;gap:18px}
.journey__head{display:flex;align-items:center;justify-content:space-between;gap:14px 18px;flex-wrap:wrap}
.journey__head .greet{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(22px,3vw,28px);letter-spacing:-.02em;margin:0;color:var(--ink)}
.journey__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:9px}
.stat__n{font-family:var(--font-display);font-weight:var(--fw-display);font-size:36px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat__n .d{font-size:17px;color:var(--muted);font-weight:var(--fw-semibold)}
.stat__l{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.stat .bar{margin-top:3px}
.journey__bottom{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}
.nextstep{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:2px solid var(--ink);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-pop)}
.nextstep .eyebrow{margin:0}
.nextstep__title{font-family:var(--font-display);font-weight:var(--fw-display);font-size:21px;line-height:1.15;letter-spacing:-.015em;color:var(--ink);margin:0}
.nextstep__why{font-size:14px;color:var(--muted);margin:0;line-height:1.5}
.nextstep .btn{margin-top:auto;align-self:flex-start}
@media(max-width:760px){
  .journey__stats{grid-template-columns:1fr}
  .journey__bottom{grid-template-columns:1fr}
}

/* ----------------------------------------------------------------------------
   17.6 · SUPPORT / DONATE BAND  (calm, warm — never a pop-up or nag)
   Amount chips reuse the selectable-control language; Give = primary button.
   ---------------------------------------------------------------------------- */
.support{display:grid;grid-template-columns:1.05fr .95fr;gap:30px 44px;align-items:center;
  background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:clamp(24px,4vw,42px)}
.support__copy h2.display{margin:0 0 12px}
.support__copy .sub{margin:0;max-width:44ch}
.support__form{display:flex;flex-direction:column;gap:18px}
.amounts{display:flex;flex-wrap:wrap;gap:10px}
.amount{position:relative}
.amount input{position:absolute;opacity:0;width:0;height:0}
.amount .face{display:flex;align-items:center;justify-content:center;min-width:70px;padding:13px 19px;
  border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);
  font-weight:var(--fw-semibold);font-size:16px;color:var(--ink-2);cursor:pointer;font-variant-numeric:tabular-nums;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.amount .face:hover{border-color:var(--accent);color:var(--accent)}
.amount input:checked ~ .face{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong);font-weight:var(--fw-bold);transform:translateY(-1px)}
.amount input:focus-visible ~ .face{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.amount--other .face{min-width:84px}

/* monthly toggle (switch) */
.toggle{display:inline-flex;align-items:center;gap:11px;cursor:pointer;font-size:15px;font-weight:var(--fw-medium);color:var(--ink-2);user-select:none}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.toggle .track{position:relative;width:44px;height:26px;flex:none;border-radius:var(--r-pill);background:var(--surface-sunken);border:1.5px solid var(--line-strong);transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.toggle .knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(18,16,22,.25);transition:transform var(--dur-fast) var(--ease-spring)}
.toggle input:checked ~ .track{background:var(--accent);border-color:var(--accent)}
.toggle input:checked ~ .track .knob{transform:translateX(18px)}
.toggle input:focus-visible ~ .track{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.support__actions{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.support .reassure{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);line-height:1.45;margin:0;max-width:46ch}
.support .reassure svg{width:13px;height:13px;stroke:var(--muted);fill:none;stroke-width:1.7;flex:none}

/* quiet "Support" link (footer / nav) */
.support-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:var(--fw-semibold);color:var(--ink-2);text-decoration:none;padding:6px 13px;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.support-link::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.support-link:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.support-link:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

@media(max-width:760px){.support{grid-template-columns:1fr;gap:24px}}

/* ----------------------------------------------------------------------------
   18 · FOOTER
   ---------------------------------------------------------------------------- */
footer{margin-top:54px;padding-top:24px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.6}
footer .foot-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:18px}
footer a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--dur-fast) var(--ease)}
footer a:hover{border-bottom-color:var(--ink-2)}
footer a:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

/* ----------------------------------------------------------------------------
   19 · UTILITIES
   ---------------------------------------------------------------------------- */
.hidden{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap}
/* Skip link — visible only on keyboard focus. Unified class across all pages (S8). */
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 var(--r-sm) 0;font-size:14px;font-weight:var(--fw-semibold);text-decoration:none}
.skip:focus{left:0}
.skip:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.stack-2{display:flex;flex-direction:column;gap:var(--space-2)}
.stack-4{display:flex;flex-direction:column;gap:var(--space-4)}
.row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.panel{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:var(--space-6)}
.panel-pop{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);padding:var(--space-6);box-shadow:var(--shadow-pop)}

/* Inverted (dark) section — high-contrast brand moment */
.invert{background:var(--surface-ink);color:var(--on-dark);border-radius:var(--r-lg);padding:var(--space-8)}
.invert .eyebrow{color:var(--trans-blue)}
.invert h1.display,.invert h2.display,.invert h3.display{color:var(--on-dark)}
.invert .sub,.invert .body{color:var(--on-dark-muted)}
.invert a.link{color:var(--trans-blue);border-bottom-color:transparent}
.invert .btn-outline{background:transparent;color:var(--on-dark);border-color:var(--on-dark)}

/* ----------------------------------------------------------------------------
   20 · RESPONSIVE
   ---------------------------------------------------------------------------- */
@media(max-width:760px){
  .masthead{flex-direction:column;align-items:flex-start;gap:6px}
  .mast-right{width:100%;justify-content:space-between;gap:var(--space-2)}   /* Q108 P0-1 — the login-screen action row goes full width + wraps instead of overflowing */
  .cert-foot{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .pairs{grid-template-columns:1fr;gap:24px}
  .nextsteps{grid-template-columns:1fr}
  .modules{grid-template-columns:1fr}
  .actions{flex-direction:column-reverse;align-items:stretch}
  .actions .grow{justify-content:stretch}
  .actions .grow .btn,.actions .grow .btn-outline{flex:1}
  .scale{gap:6px}
  .scale .pip .face{height:42px}
}

/* ----------------------------------------------------------------------------
   21 · MOTION PREFERENCES
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}

/* ----------------------------------------------------------------------------
   22 · PRINT  (certificate is the print target)
   ---------------------------------------------------------------------------- */
@media print{
  @page{size:landscape;margin:14mm}
  body{background:#fff;color:#000}
  .no-print{display:none!important}
  .certificate{box-shadow:none;border:2px solid #000;max-width:100%;margin:0;page-break-inside:avoid}
  .certificate::before{border-color:var(--neutral-rule)}
  .seal,.badge{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .spectrum,.seal,.badge::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* --- re-added during reconciliation (emitted by app.js, were dropped in the design pass) --- */
.rank .moves{display:flex;gap:6px}
.nextsteps-note{font-size:13.5px;color:var(--muted);margin:4px 0 0}

/* =============================================================================
   23 · DESIGN SYSTEM v1.1 — net-new components
   ========================================================================== */

/* 23.0 · INPUT GAP FIX (Audit #2 C-1, the "weird sizes").
   Native number/date/etc. were unstyled — they omitted the base field rule. Bind them to the
   same look. :where() keeps zero specificity so component width rules (.logadd input, etc.) win. */
input:where([type=number],[type=date],[type=month],[type=week],[type=time],[type=datetime-local],[type=password]){
  width:100%;font:inherit;font-size:16px;padding:12px 13px;min-height:46px;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
input:where([type=number],[type=date],[type=month],[type=week],[type=time],[type=datetime-local],[type=password]):hover:not(:disabled){border-color:var(--ink-2)}
input:where([type=number],[type=date],[type=month],[type=week],[type=time],[type=datetime-local],[type=password]):focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.no-spin{appearance:textfield;-moz-appearance:textfield}
.no-spin::-webkit-outer-spin-button,.no-spin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* 23.0b · small-button target size (Audit #2 S-1) — align field+button rows at one height */
.btn.sm,.btn-outline.sm,.btn-quiet.sm{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:6px}

/* 23.1 · STEPPER — the journey ladder (role=progressbar on <ol>, aria-current on <li>). */
.stepper{list-style:none;display:flex;margin:0;padding:0}
.stepper li{flex:1 1 0;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;min-width:0;padding-top:2px}
.stepper li + li::before{content:"";position:absolute;top:13px;right:50%;width:100%;height:2px;background:var(--line-strong);z-index:0}
.stepper .node{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);display:grid;place-items:center;color:var(--muted)}
.stepper .node svg{width:15px;height:15px;stroke:currentColor;stroke-width:3;fill:none}
.stepper .node .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.stepper .lbl{font-size:12.5px;line-height:1.25;color:var(--muted)}
.stepper li.is-done .node{background:var(--accent);border-color:var(--accent);color:#fff}
.stepper li.is-done + li::before{background:var(--accent)}
.stepper li.is-current .node{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.stepper li.is-current .lbl{color:var(--ink);font-weight:var(--fw-semibold)}
.stepper--stacked,.stepper.is-stacked{flex-direction:column;align-items:stretch}
.stepper--stacked li,.stepper.is-stacked li{flex-direction:row;justify-content:flex-start;text-align:left;gap:12px;padding:8px 0;min-height:44px}
.stepper--stacked li + li::before,.stepper.is-stacked li + li::before{top:-6px;right:auto;left:13px;width:2px;height:100%}
.stepper--stacked .node,.stepper.is-stacked .node{flex:none}
.stepper--stacked .lbl,.stepper.is-stacked .lbl{flex:1}
@media(max-width:560px){
  .stepper{flex-direction:column;align-items:stretch}
  .stepper li{flex-direction:row;justify-content:flex-start;text-align:left;gap:12px;padding:8px 0;min-height:44px}
  .stepper li + li::before{top:-6px;right:auto;left:13px;width:2px;height:100%}
  .stepper .node{flex:none}
  .stepper .lbl{flex:1}
}

/* 23.2 · DROPZONE — photo / logo upload tile. */
.dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;
  border:2px dashed var(--line-strong);border-radius:var(--r);background:var(--surface-sunken);padding:24px 18px;cursor:pointer;min-height:128px;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.dropzone:hover,.dropzone.is-dragover{border-color:var(--accent);background:var(--accent-soft)}
.dropzone:focus-within{outline:var(--focus-ring);outline-offset:2px}
.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.dropzone__icon{width:28px;height:28px;color:var(--muted)}
.dropzone__title{font-weight:var(--fw-semibold);font-size:14.5px;color:var(--ink)}
.dropzone__hint{font-size:12.5px;color:var(--muted);line-height:1.4;max-width:36ch}
.dropzone.is-filled{border-style:solid;border-color:var(--line-strong);padding:14px}
.dropzone__preview{width:96px;height:96px;border-radius:var(--r-sm);object-fit:cover}
.dropzone--logo{min-height:104px}
.dropzone--logo .dropzone__preview{width:auto;max-width:160px;max-height:72px;border-radius:0}

/* 23.3 · LOGADD / LOGLIST / DAYCOUNT — add-as-you-go signatures. */
.logadd{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.logadd .field{margin:0}
.logadd input[type=number]{width:96px}
.loglist{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:0}
.loglist li{display:flex;gap:12px;align-items:baseline;font-size:13px;padding:6px 0;border-bottom:1px solid var(--line)}
.loglist .n{font-weight:700;color:var(--accent);min-width:38px}
.loglist .when{color:var(--muted)}
.loglist .note{color:var(--ink-2)}
.daycount{display:inline-flex;align-items:baseline;gap:6px;font-size:12.5px;color:var(--ink-2);
  background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--r-pill);padding:4px 11px}
.daycount b{font-size:14px;color:var(--accent);font-weight:700}
.daycount.is-soon b{color:var(--secondary-strong)}
.daycount.is-past{opacity:.65}
.daycount.is-past b{color:var(--muted)}

/* 23.4 · TIMELINE — the tracker's mini date axis (start → reach-50 → file-by → Aug 5). */
.timeline{margin-top:16px}
.timeline__track{position:relative;height:6px;border-radius:3px;background:var(--line-strong);margin:8px 7px 0}
.timeline__done{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:var(--accent)}
.timeline__proj{position:absolute;top:50%;height:0;border-top:2px dashed var(--accent);opacity:.55;transform:translateY(-50%)}
.timeline__pt{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid var(--paper);box-shadow:0 0 0 1px var(--line-strong);background:var(--ink)}
.timeline__pt.is-today{background:var(--ink)}
.timeline__pt.is-goal{background:var(--accent)}
.timeline__pt.is-file{background:var(--secondary-strong)}
.timeline__pt.is-proj{background:var(--ok)}
.timeline__ends{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:8px}
.timeline__legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px}
.timeline__legend span{font-size:11.5px;color:var(--ink-2);display:inline-flex;align-items:center;gap:5px}
.timeline__legend span::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;background:var(--ink)}
.timeline__legend .is-goal::before{background:var(--accent)}
.timeline__legend .is-file::before{background:var(--secondary-strong)}
.timeline__legend .is-proj::before{background:var(--ok)}

/* 23.5 · (SEGMENT removed — the Public/Private control belongs to the post-launch Explore directory;
   not shipping a component that isn't wired into any UI. Re-add with Explore.) */
.block{display:block;width:100%}

/* 23.6 · SEATMAP — the empty-seat data-viz (tiles are <button>, colors from --seat-*). */
.seatmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.seat{display:flex;flex-direction:column;gap:1px;align-items:flex-start;text-align:left;font:inherit;cursor:pointer;
  border:1.5px solid var(--seat-line);border-radius:var(--r-sm);padding:8px 10px;background:var(--surface);color:var(--ink);
  transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.seat b{font-size:14px}
.seat span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.seat:hover{transform:translateY(-1px);border-color:var(--ink)}
.seat:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.seat.is-open{border-color:var(--seat-nocand)}
.seat.is-open b{color:var(--seat-nocand)}
.seat.is-unopposed{border-color:var(--seat-unopposed)}
.seat.is-unopposed b{color:var(--seat-unopposed)}
.seat.is-contested{border-color:var(--seat-line)}
.seatlegend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 16px}
.seatlegend span{font-size:12px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.seatlegend span::before{content:"";width:11px;height:11px;border-radius:3px;flex:none;border:1.5px solid var(--seat-line);background:var(--surface)}
.seatlegend .is-open::before{border-color:var(--seat-nocand);background:var(--seat-nocand-soft)}
.seatlegend .is-unopposed::before{border-color:var(--seat-unopposed);background:var(--accent-soft)}
@media(prefers-reduced-motion:reduce){.seat:hover{transform:none}}

/* 23.7 · HEADSHOT — circular frame in the six-color pride ring (hard arcs, not a blend). */
.headshot{position:relative;width:72px;height:72px;border-radius:50%;flex:none;padding:3px;
  background:conic-gradient(var(--pride-1) 60deg,var(--pride-2) 60deg 120deg,var(--pride-3) 120deg 180deg,var(--pride-4) 180deg 240deg,var(--pride-5) 240deg 300deg,var(--pride-6) 300deg)}
.headshot__img,.headshot__initial{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--paper);background:var(--surface);box-sizing:border-box}
.headshot__initial{display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--accent)}
.headshot.sm{width:46px;height:46px;padding:2px}
.headshot.sm .headshot__initial{font-size:18px}
.headshot.lg{width:104px;height:104px}
.headshot.lg .headshot__initial{font-size:38px}

/* 23.8 · CHECKLIST + LOCKED states — the brunch eligibility gate. */
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.checklist li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--ink-2)}
.checkcircle{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line-strong);display:grid;place-items:center;color:transparent;background:var(--surface);margin-top:1px}
.checkcircle svg{width:12px;height:12px;stroke:currentColor;stroke-width:3;fill:none}
.checklist li.is-done .checkcircle{background:var(--ok);border-color:var(--ok);color:#fff}
.checklist li.is-done{color:var(--ink)}
.btn.is-locked,.btn.is-locked:hover,.btn.is-locked:focus{background:var(--surface-sunken);color:var(--muted);border-color:var(--line-strong);box-shadow:none;transform:none;cursor:not-allowed}
.btn.is-locked .lockicon{width:14px;height:14px;margin-right:2px}
.pill.is-locked{background:var(--surface-sunken);color:var(--muted);border:1px solid var(--line-strong)}

/* 23.9 · DISCLOSURE — FAQ / sources accordions. */
details.disclosure{border:1px solid var(--border);border-radius:var(--r-sm);padding:0 16px;margin:10px 0}
details.disclosure > summary{cursor:pointer;font-weight:var(--fw-semibold);padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
details.disclosure > summary::-webkit-details-marker{display:none}
details.disclosure > summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg);transition:transform var(--dur-fast) var(--ease);flex:none}
details.disclosure[open] > summary::after{transform:rotate(-135deg)}
details.disclosure[open]{padding-bottom:16px}
details.disclosure > summary:focus-visible{outline:var(--focus-ring);outline-offset:3px}

/* =============================================================================
   24 · DESIGN SYSTEM v1.1 — bold badge + certificate (optional direction)
   The original .badge coin + .seal are untouched; this is an alternate bold award.
   ========================================================================== */
/* Q102 — the full BOLD CARD system (BADGE_CERTIFICATE_DESIGN.md, matches the reference PNGs). Grounded in
   the live base tokens above (3px ink keyline, --surface ground, --r-lg, the 8px hard stamp shadow); the
   render (learn/portal.js) points shelf/library/earn/cohort-gate at these. Left-aligned per the PNG.
   Tokens only; state lives in words + the pill (never color alone); the pride spark is aria-hidden. */
.award{position:relative;display:flex;flex-direction:column;gap:9px;text-align:left;
  border:3px solid var(--ink);border-radius:var(--r-lg);background:var(--surface);padding:20px 22px;box-shadow:8px 8px 0 var(--ink)}
.award__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.award__kicker{font:700 var(--fs-eyebrow)/1.2 var(--font-ui);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--muted)}
.award__spark{font-size:24px;line-height:1}
.award--locked .award__spark{color:var(--muted)}
.award__title{margin:0;font-family:var(--font-display);font-weight:var(--fw-display-heavy);font-size:clamp(22px,3.8vw,29px);line-height:1.03;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.award--locked .award__title{color:var(--ink-2)}
.award__desc{margin:0;font-size:14px;line-height:1.42;color:var(--ink-2)}
.award__foot{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:2px}
.award__pill{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:5px 15px;border-radius:var(--r-pill,999px);
  font:700 12.5px/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.award__pill--cobalt{background:var(--accent);color:var(--on-accent)}
.award__pill--muted{background:var(--surface-sunken);color:var(--muted);border:1.5px solid var(--line-strong)}
.award__pill .ic{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.award__cohort{font:700 12px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.award__path{display:inline-flex;align-items:center;min-height:44px;font:600 13px/1.35 var(--font-ui);color:var(--accent);text-decoration:none}
.award__path:hover,.award__path:focus-visible{text-decoration:underline}
.award__footer{margin-top:4px;padding-top:8px;border-top:1.5px solid var(--line);font:700 var(--fs-eyebrow)/1.2 var(--font-ui);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--muted)}

/* the certificate — .certificate--bold (landscape typographic shell, printable, NO drop shadow on print) */
.certificate--bold{position:relative;display:block;background:var(--surface);border:3px solid var(--ink);border-radius:var(--r-lg);
  padding:30px 34px 34px;margin:6px 0 0;max-width:760px;text-align:left}
.certificate--bold::before{content:none}
.certificate--bold .cert-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.certificate--bold .cert-mark{font-family:var(--font-display);font-weight:var(--fw-display-heavy);font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink)}
.certificate--bold .cert-mark .spark{font-size:14px}
.certificate--bold .cert-spark{font-size:26px}
.certificate--bold .cert-eyebrow{margin:22px 0 6px;font:700 var(--fs-eyebrow)/1.2 var(--font-ui);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent)}
.certificate--bold .cert-name{margin:0;font-family:var(--font-display);font-weight:var(--fw-display-heavy);font-size:clamp(34px,7vw,58px);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.certificate--bold .cert-body{margin:16px 0 0;max-width:46ch;font-size:15px;line-height:1.5;color:var(--ink-2)}
.certificate--bold .cert-rule{height:1.5px;background:var(--line);margin:22px 0 0}
.certificate--bold .cert-sigs{display:flex;flex-wrap:wrap;gap:34px;margin:16px 0 0}
.certificate--bold .cert-sig b{display:block;font:600 14px/1.3 var(--font-ui);color:var(--ink)}
.certificate--bold .cert-sig span{display:block;margin-top:2px;font:600 11px/1.2 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.certificate--bold .cert-sig .cert-date{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.certificate--bold .cert-stamp{display:inline-flex;align-items:center;gap:8px;margin:20px 0 0;padding:8px 18px;border-radius:var(--r-pill,999px);
  background:var(--accent);color:var(--on-accent);box-shadow:5px 5px 0 var(--ink);font:700 12.5px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase}
.certificate--bold .cert-stamp .spark{font-size:15px;color:var(--on-accent)}
@media print{
  .certificate--bold{box-shadow:none;border-color:var(--ink)}
  .certificate--bold .cert-stamp{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* =============================================================================
   22 · GEOGRAPHIC SEAT MAP (SEAT_MAP_SPEC.md) — real 2023 SMD polygons in our
   palette. Per-feature status classes are set by the map JS; colors come from the
   --seat-* tokens. Vacancy is a separate hatch overlay. Never say "open" in copy.
   ========================================================================== */
.geowrap{display:grid;grid-template-columns:1fr 340px;gap:20px;margin-top:22px;align-items:start}
@media(max-width:860px){.geowrap{grid-template-columns:1fr}}
.geomap{width:100%;height:min(68vh,620px);border:1.5px solid var(--border);border-radius:var(--r);
  background:var(--surface-sunken);overflow:hidden}
.geomap .leaflet-container{background:var(--surface-sunken);font:inherit;outline:none}
.geomap .leaflet-interactive:focus{outline:none}

/* — Gentle in-page navigation (plan/checklist links) ----------------------- */
/* Smooth travel for anchor jumps, only when motion is welcome. */
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
/* Breathing room above any landed target so it never kisses the viewport edge. */
#why-card,#trk,#portal,#stump-card,#profile-panel,#crew-block,#board-block,.plan-anchor{scroll-margin-top:18px}
/* The landing glow: a soft accent ring that says "here" — appears on arrival, lifts away. */
.is-landed{outline:3px solid var(--accent-soft);outline-offset:5px;border-radius:var(--r-lg)}
@media (prefers-reduced-motion: no-preference){
  .is-landed{animation:landfade 1.8s var(--ease) forwards}
  @keyframes landfade{0%,55%{outline-color:var(--accent-soft)}100%{outline-color:transparent}}
}

/* Light washes so the street basemap reads through every district (this rule OWNS fill-opacity —
   CSS beats Leaflet's inline attr, which is how the old fill-opacity:1 was overriding map.js). */
.geo-poly{stroke:var(--paper);stroke-width:.8;fill-opacity:.22;cursor:pointer;transition:fill-opacity .12s ease}
.geo-poly.is-contested{fill:var(--seat-contested)}
.geo-poly.is-unopposed{fill:var(--seat-unopposed)}
.geo-poly.is-noran{fill:var(--seat-nocand);fill-opacity:.32}
.geo-poly.is-nodata{fill:var(--seat-empty)}
.geo-poly:hover{fill-opacity:.5}
.geo-poly.is-sel{fill-opacity:.55}
/* interaction states — the feature is brought to front so its stroke isn't clipped */
.geo-poly.is-hover{stroke:var(--ink);stroke-width:2}
.geo-poly.is-dim{fill-opacity:.08!important}   /* QL1 list<->map sync: non-matching districts recede */
.geo-poly.is-focus{stroke:var(--accent);stroke-width:2.5;stroke-dasharray:5 4}
.geo-poly.is-sel{stroke:var(--ink);stroke-width:3.5}
.geo-poly.is-home{stroke:var(--accent);stroke-width:3}
.geo-vac{fill:url(#vac-hatch)}
.geo-pin{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}

/* legend */
.geolegend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:14px 0 0}
.geolegend span{font-size:12px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.geolegend span::before{content:"";width:13px;height:13px;border-radius:3px;flex:none;border:1px solid var(--seat-line)}
.geolegend .is-contested::before{background:var(--seat-contested)}
.geolegend .is-unopposed::before{background:var(--seat-unopposed)}
.geolegend .is-noran::before{background:var(--seat-nocand)}
.geolegend .is-nodata::before{background:var(--seat-empty)}
.geolegend .is-vac::before{background:var(--seat-empty);background-image:repeating-linear-gradient(45deg,var(--ink) 0 2px,transparent 2px 5px)}

/* the seat card (map select) */
.seatcard{border:2px solid var(--ink);border-radius:var(--r);background:var(--surface);padding:18px 20px;box-shadow:var(--shadow-pop-sm)}
.seatcard__id{font-family:var(--font-display);font-weight:700;font-size:20px;margin:0}
.seatcard__meta{font-size:13px;color:var(--muted);margin:2px 0 12px}
.seatcard__rep{font-size:15px;color:var(--ink);margin:0 0 4px}
.seatcard__vac{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:#fff;background:var(--ink);border-radius:var(--r-pill);padding:3px 10px;margin:0 0 8px}
.seatcard__status{font-size:14px;color:var(--ink-2);margin:0 0 6px}
.seatcard__take{font-size:13.5px;color:var(--ink);margin:0 0 14px;line-height:1.45}
.seatcard__actions{display:flex;gap:10px;flex-wrap:wrap}
.seatcard__empty{color:var(--muted);font-size:14px}

/* the a11y companion list — equal to the map, searchable + sortable */
.smdlist-wrap{margin-top:34px}
.smdlist-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.smdlist-tools input{max-width:280px}
.smdlist{width:100%;border-collapse:collapse;font-size:13.5px}
.smdlist th,.smdlist td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
.smdlist th button{background:none;border:0;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;padding:0;display:inline-flex;gap:4px;align-items:center}
.smdlist th button:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.smdlist tbody tr{cursor:pointer}
.smdlist tbody tr:hover{background:var(--surface-sunken)}
.smdlist tbody tr.is-sel{background:var(--accent-soft)}
.smdlist tbody tr:focus-visible{outline:var(--focus-ring);outline-offset:-2px}
.smd-dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.smd-dot.is-contested{background:var(--seat-contested)}
.smd-dot.is-unopposed{background:var(--seat-unopposed)}
.smd-dot.is-noran{background:var(--seat-nocand)}
.smd-dot.is-nodata{background:var(--seat-empty)}

/* shared EN/ES language toggle (quiz, privacy, about — pages that don't load portal.css) */
.langtoggle{font:inherit;font-size:12px;font-weight:600;letter-spacing:.04em;cursor:pointer;background:none;border:1.5px solid var(--line-strong);color:var(--ink-2);border-radius:999px;padding:6px 14px}
.langtoggle:hover{border-color:var(--accent);color:var(--accent)}

/* Canonical chip-picker (CHIP_PICKER_PATTERN) — pills ARE the value */
.cp-group{margin:14px 0}
.cp-legend{font-weight:600;font-size:14px;margin:0 0 4px}
.cp-helper{font-size:13px;color:var(--muted);margin:0 0 10px;transition:color .15s}
.cp-helper--pulse{color:var(--secondary-strong,var(--secondary-strong));font-weight:700}
.cp-chips{display:flex;flex-wrap:wrap;gap:8px}
.cp-chip{display:inline-flex;align-items:center;gap:7px;border:2px solid var(--seat-line,#D9D5CC);border-radius:999px;padding:7px 14px;cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;background:#fff;color:var(--ink)}
.cp-chip:hover{border-color:var(--ink)}
.cp-chip.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.cp-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cp-rank{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:rgba(255,255,255,.28);font-size:11px;font-weight:800}
.cp-somethingelse{border-style:dashed}
.cp-x{font-weight:800;opacity:.8}
.cp-custombox{margin:10px 0 0}
.cp-ownwords{display:block;font-size:13px;font-weight:600;margin:0 0 6px}
.cp-inline{display:flex;gap:8px}
.cp-inline input{flex:1;font:inherit;font-size:16px;padding:8px 12px;border:2px solid var(--seat-line,#D9D5CC);border-radius:var(--r-sm);box-sizing:border-box}

/* Fast-lane decided banner (FRONT_DOOR_SPEC B) */
.decided-banner{font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1.4;background:var(--surface-sunken,#EFECE2);border-left:4px solid var(--accent);border-radius:0 10px 10px 0;padding:14px 18px;margin:0}
.decided-branch{border:2px solid var(--line,#E4E0D5);border-radius:12px;padding:14px 16px;margin:16px 0 0;display:grid;gap:10px}
.decided-branch legend{padding:0 6px}

/* Share-moment sheet (SHARE_LOOP_SPEC) — one component, all nine moments */
.sharem-overlay{position:fixed;inset:0;background:rgba(26,22,34,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.sharem{background:#fff;border-radius:16px;padding:22px;max-width:440px;width:100%;box-shadow:var(--shadow-pop);position:relative}
.sharem-x{position:absolute;top:8px;right:12px;background:none;border:none;font-size:26px;line-height:1;cursor:pointer;color:var(--ink-2)}
.sharem-h{font-family:var(--font-display);font-weight:800;font-size:19px;margin:0 0 12px}
.sharem-text{width:100%;box-sizing:border-box;font:inherit;font-size:15px;padding:12px;border:2px solid var(--line,#E4E0D5);border-radius:10px;resize:vertical}
.sharem-actions{display:flex;gap:10px;margin-top:14px}

/* Threshold breath (Q60 / CALM §2) — static settle line, reduced-motion-safe by construction */
.threshold-breath{font-weight:600;margin:0 0 14px}

/* Feedback modal (Q84) — native dialog, system tokens */
.fbk{border:2px solid var(--ink);border-radius:16px;padding:22px;max-width:460px;width:92vw;box-shadow:var(--shadow-pop);background:var(--surface)}
.fbk::backdrop{background:rgba(26,22,34,.5)}
.fbk-form{position:relative}
.fbk-x{position:absolute;top:-6px;right:-4px;background:none;border:none;font-size:26px;line-height:1;cursor:pointer;color:var(--ink-2)}
.fbk-h{font-family:var(--font-display);font-weight:800;font-size:22px;margin:0 0 6px}
.fbk-sub{font-size:14px;color:var(--ink-2);margin:0 0 12px}
.fbk-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.fbk textarea.field{width:100%;box-sizing:border-box;resize:vertical}
.fbk-ctx{font-size:12px;margin:6px 0}
.fbk-emailopt{display:flex;align-items:center;gap:6px;font-size:14px;margin:8px 0}
.fbk #fbk-email{width:100%;box-sizing:border-box;margin:0 0 8px}
.fbk-actions{margin-top:12px}
.fbk-done{font-weight:600;margin:8px 0 0}
.fbk-tie{display:block;font-weight:400;font-size:13px;color:var(--ink-2);margin-top:6px}
.foot-feedback{margin-top:10px}
/* Q45 — the "Make one ask" kit (recruit-the-recruiters). Shared by the dashboard + supporter surface;
   self-contained (crew page doesn't load support.css), tokens-only. */
.ask-kit{display:grid;gap:12px}
.ak-intro{margin:0;font-size:15px;color:var(--ink)}
.ak-chips{display:flex;flex-wrap:wrap;gap:8px}
.ak-chip{font:inherit;font-size:14px;min-height:44px;box-sizing:border-box;background:var(--surface);border:2px solid var(--seat-line);border-radius:var(--r-pill);padding:6px 14px;color:var(--ink);cursor:pointer;text-align:left}
.ak-chip:hover{border-color:var(--ink)}
.ak-chip.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.ak-chip:focus-visible{outline:var(--focus-ring,2px solid var(--accent));outline-offset:2px}
.ak-out{display:grid;gap:8px;border-left:3px solid var(--accent);padding:4px 0 4px 14px}
.ak-lab{margin:0;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700}
.ak-script{margin:0;padding-left:18px;display:grid;gap:4px;font-size:15px;line-height:1.45}
.ak-job{margin:0;font-size:13.5px;color:var(--muted);font-weight:600}
.ak-linkrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ak-link{flex:1 1 200px;min-width:140px;min-height:44px;font-size:16px;padding:6px 10px;border:1.5px solid var(--line-strong);border-radius:var(--r);background:#fff;color:var(--ink)}
.ak-report{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 0}
.ak-report__q{flex-basis:100%;font-size:14px;color:var(--ink)}
.ak-again{margin:0;font-weight:600;color:var(--accent)}
.ak-count{margin:0;font-size:13px;color:var(--muted)}
.ak-receipt{margin:0;font-size:13px;font-weight:600;color:var(--accent)}
.ak-receipt:empty{display:none}
/* Q47 belonging stories — doubt-moment card (quiz + front door + portal) + collection form */
.bstory{margin:0;border-left:3px solid var(--accent);padding:8px 0 8px 14px;display:grid;gap:6px}
.bstory__eyebrow{margin:0;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700}
.bstory__q{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}
.bstory__by{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.bstory__pic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--r-pill);background:var(--accent-tint);color:var(--ink);font-size:12px;font-weight:700}
.fd-story{margin-top:12px}
.bshare{display:grid;gap:10px}
.bshare__intro{margin:0;font-size:14px;color:var(--ink)}
.bshare__note{margin:0;font-size:12.5px}
.bshare__thanks{margin:0;font-weight:600}
.bs-tier{border:0;padding:0;margin:0;display:grid;gap:6px}
.bs-tieropt{display:flex;align-items:center;gap:8px;font-size:14px;min-height:44px}
.bs-tieropt input{min-width:20px;min-height:20px}
.bshare .bs-text,.bshare .bs-type,.bshare .bs-name{font-size:16px}
/* Q76 partner interest pipeline — the "Partner with us" form (About + /partners/) */
.partner-section{max-width:640px;margin:28px auto 0}
.partner-title{margin:0 0 8px}
.partner-form{display:grid;gap:12px}
.pi-intro{margin:0;font-size:15px;color:var(--ink)}
.pi-set{border:0;padding:0;margin:0}
.pi-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.pi-chip{font:inherit;font-size:14px;min-height:44px;box-sizing:border-box;background:var(--surface);border:2px solid var(--seat-line);border-radius:var(--r-pill);padding:6px 14px;color:var(--ink);cursor:pointer}
.pi-chip:hover{border-color:var(--ink)}
.pi-chip.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.pi-chip:focus-visible{outline:var(--focus-ring,2px solid var(--accent));outline-offset:2px}
.partner-form input,.partner-form textarea{font-size:16px}
.pi-check{display:flex;gap:8px;align-items:flex-start;font-size:14px}
.pi-check input{margin-top:3px;min-width:18px;min-height:18px}
.pi-thanks{margin:0 0 8px;font-weight:600}
.pi-activation{margin:0;padding-left:18px;display:grid;gap:6px}