/* 90s tropical, in two themes.
 *
 * The palette originally used --ink for three different jobs: text, borders and
 * the offset shadows. They agree in the light theme and disagree completely in
 * the dark one, so they're separate roles now:
 *
 *   --ink / --ink-soft   text
 *   --edge               borders
 *   --shade              offset block shadows
 *   --on-accent          text and icons sitting on a bright accent fill
 *
 * The accent fills stay bright in both themes, so --on-accent stays dark in
 * both. --accent-dk is the accent as *text*, which means it darkens on a light
 * ground and lightens on a dark one — the name is a role, not a direction.
 */
:root{
  --grey:#EDEEEA;
  --surface:#FFFFFF;
  --ink:#14313A;
  --ink-soft:#516A72;
  --edge:#14313A;
  --shade:#14313A;
  --on-accent:#14313A;

  --orange:#FF7A33;   --orange-dk:#B04510;
  --teal:#19B8B0;     --teal-dk:#0A7570;
  --lavender:#AC8BEA; --lavender-dk:#6A47C0;
  --sky:#5EC7F2;      --sky-dk:#116E9E;
  --lime:#A9DC3A;     --lime-dk:#547310;
  --banana:#FFDA47;   --banana-dk:#7E6010;

  /* set per topic */
  --accent:var(--teal);
  --accent-dk:var(--teal-dk);

  --pad:20px;
}

/* Deep teal rather than neutral black, so it reads as the same palette after
   dark. Accent fills keep their saturation; only the text variants lighten.
 *
 * Three states, not two. No data-theme means "follow the system", which is the
 * default and stores nothing. data-theme pins a choice, and has to win in both
 * directions — hence the :not() below, so choosing Light beats a dark OS.
 *
 * The palette is written twice because a media query and a plain selector can't
 * share one rule. A test asserts the two copies stay identical. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --grey:#0E1B20;
    --surface:#17272D;
    --ink:#E7EDEB;
    --ink-soft:#A7B8BC;
    --edge:#5E7880;
    --shade:#050D10;
    --on-accent:#0E1B20;

    --orange-dk:#FFA870;
    --teal-dk:#5FD3CB;
    --lavender-dk:#C6A9FF;
    --sky-dk:#82D2F7;
    --lime-dk:#BFE86A;
    --banana-dk:#EFCF6E;
  }
}
:root[data-theme="dark"]{
  --grey:#0E1B20;
  --surface:#17272D;
  --ink:#E7EDEB;
  --ink-soft:#A7B8BC;
  --edge:#5E7880;
  --shade:#050D10;
  --on-accent:#0E1B20;

  --orange-dk:#FFA870;
  --teal-dk:#5FD3CB;
  --lavender-dk:#C6A9FF;
  --sky-dk:#82D2F7;
  --lime-dk:#BFE86A;
  --banana-dk:#EFCF6E;
}

/* Tells the browser which way its own furniture should go — scrollbars, form
   controls, the canvas behind the page. */
:root{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

.t-start   {--accent:var(--orange);   --accent-dk:var(--orange-dk)}
.t-overwhelm{--accent:var(--teal);    --accent-dk:var(--teal-dk)}
.t-flooding{--accent:var(--lavender); --accent-dk:var(--lavender-dk)}
.t-time    {--accent:var(--sky);      --accent-dk:var(--sky-dk)}
.t-stop    {--accent:var(--lime);     --accent-dk:var(--lime-dk)}
.t-empty   {--accent:var(--banana);   --accent-dk:var(--banana-dk)}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--grey);
  color:var(--ink);
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100svh;
}
.wrap{
  max-width:560px;margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 14px) var(--pad) calc(env(safe-area-inset-bottom) + 28px);
  min-height:100svh;display:flex;flex-direction:column;
}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;gap:14px;min-height:42px;margin-bottom:24px}
.mark{
  font-weight:700;font-size:17px;letter-spacing:-0.02em;color:var(--ink);
  text-decoration:none;display:inline-flex;align-items:center;gap:7px;
}
.mark .dot{width:11px;height:11px;background:var(--accent);border:2px solid var(--edge);border-radius:50%}
.back{
  appearance:none;background:none;border:0;color:var(--ink-soft);
  font:inherit;font-size:15px;font-weight:500;padding:8px;padding-inline-start:0;cursor:pointer;
  display:none;align-items:center;gap:6px;min-height:44px;
}
.back.show{display:inline-flex}
.back:hover{color:var(--ink)}
.back svg{width:16px;height:16px;flex:none}
.steps{display:flex;gap:5px;margin-inline-start:auto}
.steps i{width:20px;height:7px;border:2px solid var(--edge);background:var(--surface);display:block}
.steps i.on{background:var(--accent)}
.steps.hide{visibility:hidden}

/* ---------- type ---------- */
h1{font-size:clamp(31px,8.5vw,42px);line-height:1.05;letter-spacing:-0.03em;font-weight:700;margin:0 0 12px}
.q{font-size:clamp(27px,7vw,34px);line-height:1.12;letter-spacing:-0.025em;font-weight:700;margin:0 0 22px;max-width:20ch}
.tagline{font-size:19px;font-weight:600;color:var(--orange-dk);margin:0 0 16px;letter-spacing:-0.01em}
.wrap.calm .tagline{color:var(--accent-dk)}
.sub{color:var(--ink-soft);font-size:16px;margin:0 0 28px;max-width:46ch}

/* ---------- option slabs ---------- */
.opts{display:flex;flex-direction:column;gap:14px}
.opt{
  position:relative;display:flex;flex-direction:column;gap:3px;
  width:100%;text-align:left;cursor:pointer;text-decoration:none;
  background:var(--surface);color:var(--ink);font:inherit;
  border:2px solid var(--edge);border-radius:14px;
  box-shadow:4px 4px 0 var(--accent);
  /* Logical properties throughout, so a right-to-left translation puts the
     accent stripe and its padding on the correct edge. */
  padding:16px 18px;padding-inline-start:34px;min-height:62px;
  transition:transform .1s ease,box-shadow .1s ease;
}
.opt::before{
  content:"";position:absolute;inset-inline-start:0;top:-2px;bottom:-2px;width:16px;
  background:var(--accent);border:2px solid var(--edge);
  border-start-start-radius:14px;border-end-start-radius:14px;
}
.opt:hover,.opt:focus-visible{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--accent)}
.opt:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--accent)}
.opt b{font-weight:600;font-size:17px;line-height:1.28}
.opt span{color:var(--ink-soft);font-size:14.5px;line-height:1.35}
.opt.plain{box-shadow:4px 4px 0 var(--accent)}

/* ---------- guidance ---------- */
.eyebrow{
  display:inline-block;background:var(--accent);color:var(--on-accent);
  border:2px solid var(--edge);border-radius:999px;
  font-size:13.5px;font-weight:600;padding:5px 13px;margin:0 0 14px;
}
.gtitle{font-size:clamp(26px,6.6vw,32px);line-height:1.12;letter-spacing:-0.025em;font-weight:700;margin:0 0 20px;max-width:22ch}
/* ---------- variant switcher ----------
   Was a whole screen and a third decision; it only ever changed the action
   below it, so it sits on top of that action instead. Same segmented control
   as the appearance picker, so there's one pattern to learn, not two. */
.variant{border:0;margin:0 0 14px;padding:0;min-inline-size:0}
.variant legend{padding:0;font-size:14px;font-weight:600;color:var(--ink-soft);margin-bottom:9px}
.variant-opts{display:flex;flex-wrap:wrap;gap:8px}
.variant-opt{position:relative;display:inline-flex}
.variant-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.variant-opt span{
  font-size:14.5px;font-weight:500;line-height:1.2;
  padding:9px 14px;min-height:44px;display:inline-flex;align-items:center;
  border:2px solid var(--edge);border-radius:999px;
  background:var(--surface);color:var(--ink-soft);
}
.variant-opt input:checked + span{background:var(--accent);color:var(--on-accent);font-weight:600}
.variant-opt input:focus-visible + span{outline:3px solid var(--accent-dk);outline-offset:2px}
.variant-opt input:hover + span{color:var(--ink)}
.variant-opt input:checked:hover + span{color:var(--on-accent)}
.wrap.calm .variant-opt span{border-width:1px}
.wrap.calm .variant-opt input:checked + span{background:var(--ink);color:var(--grey)}
@media (forced-colors:active){
  .variant-opt span{border:1px solid ButtonBorder;background:ButtonFace}
  .variant-opt input:checked + span{background:Highlight;color:HighlightText;forced-color-adjust:none}
}

.now{
  background:var(--banana);color:var(--on-accent);border:2px solid var(--edge);border-radius:14px;
  box-shadow:5px 5px 0 var(--shade);padding:20px 18px;margin:0 0 30px;
}
.now h2{margin:0 0 8px;font-size:13.5px;font-weight:700;color:var(--on-accent);opacity:.78}
.now p{margin:0;font-size:18.5px;line-height:1.42;font-weight:500}
.why{color:var(--ink-soft);font-size:16px;line-height:1.6;margin:0 0 28px}
.why em{color:var(--ink);font-style:normal;font-weight:600}
/* No opacity here: dimming ink with alpha put these at 3.9:1, and the blended
   result is invisible to a token-level check. Use the tested muted colour. */
.gsec{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--ink-soft)}
ul.steps-list{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:15px}
ul.steps-list li{position:relative;padding-inline-start:24px;font-size:16.5px;line-height:1.5}
ul.steps-list li::before{
  content:"";position:absolute;inset-inline-start:0;top:8px;width:11px;height:11px;
  background:var(--accent);border:2px solid var(--edge);
}
ul.steps-list li em{color:var(--ink);font-style:normal;font-weight:600}

/* ---------- link cards ---------- */
.links{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:12px}
.link{
  display:block;text-decoration:none;color:var(--ink);background:var(--surface);
  border:2px solid var(--edge);border-radius:12px;box-shadow:3px 3px 0 var(--shade);
  padding:14px 16px;transition:transform .1s ease,box-shadow .1s ease;
}
.link:hover,.link:focus-visible{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--shade)}
.link-title{display:block;font-weight:600;font-size:16px;color:var(--accent-dk);line-height:1.3}
.link > span{display:block;color:var(--ink-soft);font-size:14.5px;margin-top:4px;line-height:1.35}
.link > span.by{color:var(--ink-soft);font-size:13.5px;font-weight:500;margin-top:4px}
.link.vid .link-title{display:flex;align-items:flex-start;gap:10px}
.link.vid .play{
  flex:none;width:24px;height:24px;background:var(--lime);border:2px solid var(--edge);
  border-radius:6px;display:flex;align-items:center;justify-content:center;margin-top:-1px;
}
.link.vid .play svg{width:11px;height:11px;color:var(--on-accent);margin-inline-start:1px}

/* ---------- buttons ---------- */
.after{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:8px}
.ghost{
  appearance:none;cursor:pointer;font:inherit;font-size:16px;font-weight:600;
  background:var(--surface);border:2px solid var(--edge);border-radius:12px;
  box-shadow:3px 3px 0 var(--shade);color:var(--ink);padding:14px;text-align:center;
  transition:transform .1s ease,box-shadow .1s ease;
}
.ghost:hover,.ghost:focus-visible{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--shade)}
.ghost.go{background:var(--lime);color:var(--on-accent)}

/* ---------- crisis: deliberately calm, not party ---------- */
.crisis-card{
  background:var(--surface);border:2px solid var(--edge);border-radius:12px;
  box-shadow:4px 4px 0 var(--shade);padding:18px;margin:0 0 26px;
}
.crisis-card p{margin:0 0 12px;font-size:16px;line-height:1.5}
.crisis-card p:last-child{margin:0}
.crisis-card a{color:var(--teal-dk);font-weight:600;text-decoration:underline;text-underline-offset:3px}
#s-crisis{--accent:var(--teal);--accent-dk:var(--teal-dk)}

/* ---------- appearance control ----------
   In the footer, not the top bar: it isn't part of the task, and the top bar is
   already carrying Back and the progress. Most people never need it — the
   system setting is the default and covers them. */
.theme{border:0;margin:22px 0 0;padding:0;min-inline-size:0}
.theme legend{padding:0;font-size:13px;font-weight:600;color:var(--ink-soft)}
.theme-opts{display:flex;margin-top:8px;width:fit-content;max-width:100%}
/* The input covers its whole segment rather than being clipped to a pixel, so
   the hit target is the visible control — for a pointer, and for anything
   driving the page programmatically. */
.theme-opt{position:relative;display:inline-flex}
.theme-opt input{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;
}
.theme-opt span{
  font-size:14px;font-weight:500;line-height:1;
  padding:10px 14px;min-height:44px;display:inline-flex;align-items:center;
  border:2px solid var(--edge);border-inline-end-width:0;
  background:var(--surface);color:var(--ink-soft);
}
.theme-opt:first-child span{border-start-start-radius:10px;border-end-start-radius:10px}
.theme-opt:last-child span{border-inline-end-width:2px;border-start-end-radius:10px;border-end-end-radius:10px}
.theme-opt input:checked + span{background:var(--accent);color:var(--on-accent);font-weight:600}
.theme-opt input:focus-visible + span{outline:3px solid var(--accent-dk);outline-offset:2px}
.theme-opt input:hover + span{color:var(--ink)}
.theme-opt input:checked:hover + span{color:var(--on-accent)}
.wrap.calm .theme-opt span{border-width:1px;border-inline-end-width:0}
.wrap.calm .theme-opt:last-child span{border-inline-end-width:1px}
/* Calm mutes --accent to a mid tone that --on-accent can't sit on — 4.19:1 in
   the dark palette. Invert against ink and the page instead, which calm already
   guarantees a wide gap between, and which stays desaturated. */
.wrap.calm .theme-opt input:checked + span{background:var(--ink);color:var(--grey)}

footer{margin-top:auto;padding-top:36px}
.footlink{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--ink);font-size:14.5px;font-weight:500;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;
  text-decoration-color:var(--orange);padding:8px 0;
}
.footlink:hover{color:var(--orange-dk)}
.fine{color:var(--ink-soft);font-size:13px;line-height:1.5;margin:10px 0 0;max-width:44ch}

/* The wrap is a column flexbox and .after / footer rely on margin-top:auto, so
   the main landmark has to pass the growth through rather than absorb it. */
main{display:flex;flex-direction:column;flex:1;min-height:0}
.screen{display:none;flex-direction:column;flex:1}
.screen.on{display:flex}
:focus-visible{outline:3px solid var(--accent-dk);outline-offset:3px}

/* Headings take focus on every route change so screen readers announce the new
   screen. They're never reachable by Tab, so a focus ring on them marks nothing
   operable — and Chromium counts this as :focus-visible whenever the navigation
   came from somewhere other than a click, which makes the ring flicker in and
   out for no reason the reader can see. WCAG 2.4.7 covers keyboard-operable
   controls, which this is not. */
[tabindex="-1"]:focus{outline:none}

/* Available to assistive tech, invisible on screen. Used for things the layout
   already conveys visually: which step you're on, that a link leaves the site. */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- low-stimulation mode ----------
   Auto-applied on the sensory-overload branch: a page about too much
   input shouldn't be one. Desaturated, no hard shadows, thinner rules. */
.calm{--grey:#F1F2F0}
.wrap.calm{
  --accent:#A3B7B4; --accent-dk:#3E5652;
  --banana:#EFEDE2; --ink:#293A3F; --ink-soft:#5C6D73;
  --surface:#FAFAF9; --on-accent:#293A3F;
  /* Calm mode drops every shadow, so the border is the only thing marking a
     card as tappable — it has to clear the 3:1 non-text contrast bar. */
  --edge:#7C8A85;
}

/* Calm after dark: the same idea — pull the saturation out, drop the shadows —
   but around the dark ground, so it dims rather than turning into a light page
   in front of someone who is already overloaded. Written twice for the same
   reason as the palette above, and checked by the same test. */
@media (prefers-color-scheme:dark){
  /* The calm class lands on <html> and on .wrap, so the light rule below sets
     --grey on both. Override both, or the wrap keeps the light value and
     anything inside it that reads --grey silently uses the wrong palette. */
  :root:not([data-theme="light"]).calm,
  :root:not([data-theme="light"]) .calm{--grey:#111B1E}
  :root:not([data-theme="light"]) .wrap.calm{
    --accent:#5A6E6B; --accent-dk:#9FB5B1;
    --banana:#232E30; --ink:#DCE4E2; --ink-soft:#9AAAAE;
    --surface:#182225; --on-accent:#DCE4E2;
    /* Same 3:1 floor as light calm: with the shadows gone, this border is the
       only thing that says a card is tappable. */
    --edge:#687876;
  }
}
:root[data-theme="dark"].calm,
:root[data-theme="dark"] .calm{--grey:#111B1E}
:root[data-theme="dark"] .wrap.calm{
  --accent:#5A6E6B; --accent-dk:#9FB5B1;
  --banana:#232E30; --ink:#DCE4E2; --ink-soft:#9AAAAE;
  --surface:#182225; --on-accent:#DCE4E2;
  --edge:#687876;
}
.wrap.calm .opt,
.wrap.calm .link,
.wrap.calm .ghost,
.wrap.calm .now,
.wrap.calm .crisis-card{box-shadow:none;border-width:1px;border-color:var(--edge)}
.wrap.calm .opt::before{border-width:1px;border-color:var(--edge);top:-1px;bottom:-1px}
.wrap.calm .steps i{border-width:1px;border-color:var(--edge)}
.wrap.calm ul.steps-list li::before{border-width:1px;border-color:var(--edge)}
.wrap.calm .link.vid b .play{background:var(--accent);border-width:1px;border-color:var(--edge)}
.wrap.calm .eyebrow{background:transparent;color:var(--ink-soft);border-width:1px;border-color:var(--edge)}
.wrap.calm .opt:hover,.wrap.calm .link:hover,.wrap.calm .ghost:hover,
.wrap.calm .opt:active,.wrap.calm .opt:focus-visible,
.wrap.calm .link:focus-visible,.wrap.calm .ghost:focus-visible{transform:none;box-shadow:none;background:var(--surface)}
.wrap.calm .mark .dot{border-width:1px;border-color:var(--edge)}
.wrap.calm .footlink{text-decoration-thickness:1px;text-decoration-color:var(--edge)}
.calm-note{display:none;color:var(--ink-soft);font-size:13px;margin:-10px 0 20px}
.wrap.calm .calm-note{display:block}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (min-width:640px){:root{--pad:32px}}

/* Windows High Contrast and friends replace our colours wholesale. Almost
   everything here is distinguished by a fill or an offset shadow, both of which
   disappear — so restore real borders and let the system own the palette. */
@media (forced-colors:active){
  .opt,.link,.ghost,.now,.crisis-card{
    border:1px solid ButtonBorder;box-shadow:none;background:ButtonFace;
  }
  .opt::before,.steps i{border:1px solid ButtonBorder;background:ButtonFace}
  .steps i.on{background:Highlight;forced-color-adjust:none}
  .opt:hover,.opt:focus-visible,.link:hover,.link:focus-visible,
  .ghost:hover,.ghost:focus-visible{transform:none}
  .eyebrow{border:1px solid ButtonBorder;background:ButtonFace;color:ButtonText}
  ul.steps-list li::before{border:1px solid ButtonBorder;background:Highlight;forced-color-adjust:none}
  .link.vid .play{border:1px solid ButtonBorder;background:ButtonFace}
  :focus-visible{outline:3px solid Highlight;outline-offset:3px}
}