/* ADHD Playbook — "late-night desk" direction.
   Dark, low-arousal slate surface; one green accent reserved for GO/start;
   eight muted module hues; serif display over system sans body.
   Built for an overloaded user: huge targets, short lines, no clutter. */

:root {
  /* surfaces */
  --bg: oklch(16% 0.015 250);
  --bg-raise: oklch(21% 0.02 250);
  --bg-raise-2: oklch(25% 0.025 250);
  --line: oklch(31% 0.025 250);

  /* text */
  --ink: oklch(93% 0.008 120);
  --ink-dim: oklch(72% 0.015 250);
  --ink-faint: oklch(61% 0.015 250);

  /* the one accent — GO. Action, start, momentum. Never alarm. */
  --accent: oklch(80% 0.14 155);
  --accent-ink: oklch(18% 0.05 155);

  /* rescue is warmth, not danger — amber, with rose kept for real crisis signposts */
  --rescue: oklch(76% 0.11 60);
  --crisis: oklch(70% 0.12 15);

  /* module hues, all desaturated to sit quietly on dark */
  --c-activation: oklch(72% 0.11 150);
  --c-focus: oklch(72% 0.09 215);
  --c-time: oklch(72% 0.10 260);
  --c-memory: oklch(72% 0.10 305);
  --c-emotion: oklch(72% 0.10 350);
  --c-routines: oklch(72% 0.11 60);
  --c-admin: oklch(72% 0.10 95);
  --c-people: oklch(72% 0.09 180);

  /* type */
  --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);

  /* rhythm */
  --space: 1.25rem;
  --radius: 18px;
  --radius-sm: 12px;
  --nav-h: 4.25rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 220ms;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(120% 70% at 50% -10%, oklch(21% 0.03 230 / 0.9), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  min-height: 100dvh;
}

.view-root {
  max-width: 40rem;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 1.25rem) var(--space)
    calc(var(--nav-h) + 2.5rem + env(safe-area-inset-bottom, 0px));
}

.view { animation: rise var(--dur) var(--ease); }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .view { animation: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; }
a { color: inherit; text-decoration: none; }
p { margin: 0.4em 0; }

:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--accent), transparent 25%);
  outline-offset: 2px;
}

.linklike {
  background: none;
  border: 0;
  padding: 0;
  color: var(--rescue);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- shared bits ---------- */

.page-title { font-size: 2rem; margin: 0.2em 0 0.1em; }
.page-sub { color: var(--ink-dim); margin-bottom: 1.4em; max-width: 34ch; }
.section-title {
  font-size: 0.8rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 2.2em 0 0.7em;
}

.btn {
  display: inline-block;
  border: 0;
  border-radius: 999px;
  padding: 0.95rem 2rem;
  font: 600 1rem var(--font-body);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:active { transform: scale(0.97); }

.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-quiet {
  background: var(--bg-raise);
  color: var(--ink);
  border: 1px solid var(--line);
}

.back-link {
  display: inline-block;
  margin-top: 2.2rem;
  color: var(--ink-faint);
  font-size: 0.95rem;
}
.back-link:hover, .back-link:focus-visible { color: var(--ink); }

.chip {
  display: inline-block;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  font-size: 0.92rem;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chip:active { transform: scale(0.96); }
.chip-activation { border-color: color-mix(in oklch, var(--c-activation), transparent 55%); }
.chip-focus { border-color: color-mix(in oklch, var(--c-focus), transparent 55%); }
.chip-time { border-color: color-mix(in oklch, var(--c-time), transparent 55%); }
.chip-memory { border-color: color-mix(in oklch, var(--c-memory), transparent 55%); }
.chip-emotion { border-color: color-mix(in oklch, var(--c-emotion), transparent 55%); }
.chip-routines { border-color: color-mix(in oklch, var(--c-routines), transparent 55%); }
.chip-admin { border-color: color-mix(in oklch, var(--c-admin), transparent 55%); }
.chip-people { border-color: color-mix(in oklch, var(--c-people), transparent 55%); }

.pin-row { display: flex; flex-wrap: wrap; gap: 0.55rem; }

.hidden { display: none; }
.empty-note { color: var(--ink-faint); font-size: 0.95rem; max-width: 38ch; }

/* module accent helpers: views + cards carry .mod-<id> */
.mod-activation { --mod: var(--c-activation); }
.mod-focus { --mod: var(--c-focus); }
.mod-time { --mod: var(--c-time); }
.mod-memory { --mod: var(--c-memory); }
.mod-emotion { --mod: var(--c-emotion); }
.mod-routines { --mod: var(--c-routines); }
.mod-admin { --mod: var(--c-admin); }
.mod-people { --mod: var(--c-people); }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: auto 0 0 0;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  background: color-mix(in oklch, var(--bg), black 12%);
  border-top: 1px solid var(--line);
  z-index: 10;
}
.nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  font-size: 0.72rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}
.nav .nav-ico { font-size: 1.05rem; line-height: 1; }
.nav a.active { color: var(--accent); }

/* ---------- home ---------- */

.home-hero { padding: 2.5rem 0 1rem; text-align: center; }
.home-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.home-title { font-size: clamp(2.4rem, 9vw, 3.2rem); margin: 0.15em 0; }
.home-sub { color: var(--ink-dim); }
.btn-hero {
  margin-top: 1.4rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 1.15rem;
  padding: 1.1rem 3.4rem;
  border-radius: 999px;
  display: inline-block;
  font-weight: 700;
  box-shadow: 0 12px 36px -14px color-mix(in oklch, var(--accent), transparent 30%);
  transition: transform var(--dur) var(--ease);
}
.btn-hero:active { transform: scale(0.97); }

.hero-btns {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: center;
  margin-top: 1.4rem;
}
.hero-btns .btn-hero { margin-top: 0; width: min(100%, 19rem); }
.btn-hero-alt {
  background: var(--bg-raise-2);
  color: var(--ink);
  border: 1px solid color-mix(in oklch, var(--accent), transparent 55%);
  box-shadow: none;
}

.rescue-link {
  display: block;
  margin-top: 1.6rem;
  color: color-mix(in oklch, var(--rescue), var(--ink-dim) 30%);
  font-size: 0.95rem;
}

.home-pins { margin-top: 1.5rem; }

/* one-tap quick access on home */
.quick-now { margin-top: 0.5rem; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.quick-btn {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: var(--bg-raise);
  border: 1px solid color-mix(in oklch, var(--mod, var(--line)), var(--line) 45%);
  border-left: 4px solid var(--mod, var(--line));
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.quick-btn:active { transform: scale(0.97); background: var(--bg-raise-2); }
.quick-btn strong { font-size: 1.05rem; }
.quick-btn span { color: var(--ink-faint); font-size: 0.82rem; }

.home-nav { display: grid; gap: 0.8rem; margin-top: 1rem; }
.home-card {
  display: block;
  padding: 1.15rem 1.3rem;
  border-radius: var(--radius);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.home-card:active { transform: scale(0.985); }
.home-card h2 { margin: 0 0 0.15em; font-size: 1.25rem; }
.home-card p { margin: 0; color: var(--ink-dim); font-size: 0.95rem; }

/* ---------- triage ---------- */

.view-triage { padding-top: 1.5rem; }
.triage-q { font-size: clamp(1.9rem, 7vw, 2.4rem); max-width: 16ch; }
.triage-hint { color: var(--ink-faint); font-size: 0.95rem; max-width: 36ch; margin-bottom: 1.4em; }

.triage-opts { display: grid; gap: 0.7rem; margin-top: 1.2rem; }
.triage-opt {
  display: block;
  padding: 1.05rem 1.25rem;
  border-radius: var(--radius);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.triage-opt:active { transform: scale(0.985); background: var(--bg-raise-2); }
.opt-label { display: block; font-weight: 600; font-size: 1.05rem; }
.opt-sub { display: block; color: var(--ink-faint); font-size: 0.88rem; margin-top: 0.15rem; }

.triage-opt-rescue {
  border-color: color-mix(in oklch, var(--rescue), transparent 45%);
  background: color-mix(in oklch, var(--rescue), var(--bg) 90%);
}

/* ---------- result ---------- */

.result-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 1.5rem;
}
.result-note { color: var(--ink-dim); max-width: 38ch; font-size: 1.02rem; }
.result-history { color: var(--accent); font-size: 0.92rem; }

.result-skills { display: grid; gap: 0.8rem; margin-top: 1.3rem; }
.result-card {
  display: block;
  padding: 1.15rem 1.3rem;
  border-radius: var(--radius);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-left: 4px solid var(--mod, var(--line));
  transition: transform var(--dur) var(--ease);
}
.result-card:active { transform: scale(0.985); }
.result-order {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mod, var(--ink-faint));
}
.result-card h2 { margin: 0.2em 0 0.1em; font-size: 1.4rem; }
.result-tag { color: var(--ink-dim); margin: 0; font-size: 0.95rem; }
.result-mod { display: block; margin-top: 0.5rem; color: var(--ink-faint); font-size: 0.8rem; }

/* ---------- library / module ---------- */

.module-grid { display: grid; gap: 0.85rem; }
.module-card {
  display: block;
  padding: 1.3rem 1.4rem;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--mod), transparent 90%), transparent 55%),
    var(--bg-raise);
  border: 1px solid color-mix(in oklch, var(--mod), var(--line) 60%);
  transition: transform var(--dur) var(--ease);
}
.module-card:active { transform: scale(0.985); }
.module-strap {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mod, var(--ink-faint));
  margin: 0;
}
.module-card h2 { margin: 0.15em 0 0.25em; font-size: 1.45rem; }
.module-blurb { color: var(--ink-dim); font-size: 0.93rem; margin: 0; }
.module-count { display: inline-block; margin-top: 0.7rem; color: var(--ink-faint); font-size: 0.8rem; }

.skill-list { display: grid; gap: 0.6rem; margin-top: 1rem; }
.skill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.95rem 1.15rem;
  border-radius: var(--radius-sm);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  transition: transform var(--dur) var(--ease);
}
.skill-row:active { transform: scale(0.985); }
.skill-row h2 { font-size: 1.08rem; margin: 0; font-family: var(--font-body); font-weight: 600; }
.skill-row-tag { color: var(--ink-faint); font-size: 0.85rem; margin: 0.1em 0 0; }

.band {
  flex-shrink: 0;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-faint);
}
.band-high { color: var(--c-routines); border-color: color-mix(in oklch, var(--c-routines), transparent 50%); }
.band-medium { color: var(--accent); border-color: color-mix(in oklch, var(--accent), transparent 55%); }

/* ---------- skill detail ---------- */

.skill-module {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mod, var(--ink-faint));
  margin-top: 1.2rem;
}
.skill-title { font-size: 2.1rem; margin: 0.1em 0 0.05em; }
.skill-tagline { color: var(--ink-dim); font-size: 1.05rem; margin-bottom: 1em; }

.pin-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font: 500 0.9rem var(--font-body);
  cursor: pointer;
}
.pin-btn.pinned { border-color: var(--accent); color: var(--accent); }

.caution-link {
  color: var(--rescue);
  text-decoration: underline;
  font-weight: 600;
}

.caution {
  margin: 1.2rem 0;
  padding: 0.95rem 1.15rem;
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--rescue), var(--bg) 88%);
  border: 1px solid color-mix(in oklch, var(--rescue), transparent 50%);
  font-size: 0.93rem;
  line-height: 1.5;
}

.acronym { margin: 1.4rem 0; display: grid; gap: 0.9rem; }
.acronym-row { display: flex; gap: 1rem; align-items: flex-start; }
.acronym-letter {
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in oklch, var(--mod, var(--accent)), var(--bg) 80%);
  color: var(--mod, var(--accent));
  font: 700 1.1rem var(--font-display);
}
.acronym-row h3 { margin: 0.1em 0 0.15em; font-size: 1.05rem; font-family: var(--font-body); font-weight: 650; }
.acronym-row p { margin: 0; color: var(--ink-dim); font-size: 0.93rem; }

.skill-steps ol { padding-left: 1.2rem; display: grid; gap: 0.55rem; }
.skill-steps li::marker { color: var(--mod, var(--accent)); font-weight: 600; }

.skill-more p { color: var(--ink-dim); }

/* ---------- tools ---------- */

.tool {
  margin: 1.8rem 0;
  padding: 1.4rem;
  border-radius: var(--radius);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  text-align: center;
}
.tool-title { margin: 0 0 0.2em; font-size: 1.15rem; }
.tool-sub { color: var(--ink-dim); font-size: 0.9rem; max-width: 34ch; margin: 0 auto 0.8em; }

.breath-stage { display: grid; place-items: center; height: 11rem; }
.breath-circle {
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    color-mix(in oklch, var(--c-focus), white 15%),
    color-mix(in oklch, var(--c-focus), var(--bg) 55%));
  opacity: 0.85;
  transform: scale(0.55);
  will-change: transform;
}
.breath-phase { font-family: var(--font-display); font-size: 1.2rem; margin: 0.4em 0 0; }
.breath-count { color: var(--ink-faint); font-size: 1.6rem; font-variant-numeric: tabular-nums; margin: 0 0 0.6em; min-height: 1.2em; }

.timer-readout {
  font-size: 2.4rem;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  margin: 0.3em 0 0.5em;
}

/* visible-time timer */
.vt-presets { display: flex; justify-content: center; gap: 0.45rem; margin-bottom: 0.4rem; }
.vt-preset {
  border: 1px solid var(--line);
  background: var(--bg-raise-2);
  color: var(--ink-dim);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  font: 600 0.9rem var(--font-body);
  cursor: pointer;
}
.vt-preset.picked { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.vt-bar {
  height: 1.1rem;
  border-radius: 999px;
  background: var(--bg-raise-2);
  border: 1px solid var(--line);
  overflow: hidden;
  margin: 0.4rem 0 1rem;
}
.vt-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--accent), transparent 15%),
    var(--accent));
  transition: width 1s linear;
}

/* brain dump */
.tool-dump { text-align: left; }
.tool-dump .tool-title, .tool-dump .tool-sub { text-align: center; margin-left: auto; margin-right: auto; }
.dump-entry { display: flex; gap: 0.5rem; margin: 0.8rem 0 1rem; }
.dump-input {
  flex: 1;
  min-width: 0;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  background: var(--bg-raise-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font: 400 1rem var(--font-body);
}
.dump-input:focus { outline: 2px solid color-mix(in oklch, var(--accent), transparent 40%); border-color: transparent; }
.dump-add { padding: 0.8rem 1.4rem; flex-shrink: 0; }
.dump-list { display: grid; gap: 0.4rem; }
.dump-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.3rem 0.55rem 0.55rem;
  border-bottom: 1px solid var(--line);
}
.dump-row:last-child { border-bottom: 0; }
.dump-check { display: flex; align-items: center; gap: 0.7rem; flex: 1; min-width: 0; cursor: pointer; }
.dump-check input { accent-color: var(--accent); transform: scale(1.25); flex-shrink: 0; }
.dump-text { overflow-wrap: anywhere; }
.dump-row.done .dump-text { color: var(--ink-faint); text-decoration: line-through; }
.dump-del {
  flex-shrink: 0;
  background: none;
  border: 0;
  color: var(--ink-faint);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}
.dump-clear {
  margin-top: 0.9rem;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-faint);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font: 500 0.85rem var(--font-body);
  cursor: pointer;
}

/* decision picker */
.picker-input {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--bg-raise-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font: 400 0.95rem var(--font-body);
  line-height: 1.5;
  resize: vertical;
  text-align: left;
}
.picker-input:focus { outline: 2px solid color-mix(in oklch, var(--accent), transparent 40%); border-color: transparent; }
.picker-out {
  font-family: var(--font-display);
  font-size: 1.4rem;
  min-height: 1.4em;
  color: var(--accent);
  margin: 0.6em 0;
}

/* ---------- rating ---------- */

.rating { margin-top: 1.5rem; }
.scale-label { color: var(--ink-dim); font-size: 0.95rem; }
.scale-btns { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.scale-btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-raise);
  color: var(--ink-dim);
  font: 600 0.95rem var(--font-body);
  cursor: pointer;
}
.scale-btn.picked { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.rating-done { color: var(--accent); font-size: 0.95rem; }

/* ---------- learn ---------- */

.daily-card {
  display: block;
  margin: 0.5rem 0 1.4rem;
  padding: 1.3rem 1.4rem;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--mod, var(--accent)), transparent 86%), transparent 60%),
    var(--bg-raise);
  border: 1px solid color-mix(in oklch, var(--mod, var(--accent)), var(--line) 55%);
}
.daily-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mod, var(--accent));
  margin: 0;
}
.daily-card h2 { margin: 0.2em 0 0.1em; font-size: 1.5rem; }
.daily-tag { color: var(--ink-dim); margin: 0; font-size: 0.93rem; }

.article-list { display: grid; gap: 0.6rem; }
.article-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-sm);
  background: var(--bg-raise);
  border: 1px solid var(--line);
}
.article-row h2 { font-size: 1.1rem; margin: 0; }
.article-blurb { color: var(--ink-faint); font-size: 0.88rem; margin: 0.15em 0 0; }
.article-mins { flex-shrink: 0; color: var(--ink-faint); font-size: 0.8rem; }
.article-mins-top { color: var(--ink-faint); font-size: 0.85rem; margin-bottom: 1.5em; }

.view-article .article-p { color: var(--ink-dim); margin: 0.9em 0; max-width: 62ch; }
.article-h2 { font-size: 1.25rem; margin: 1.6em 0 0.4em; }

/* ---------- playbook ---------- */

.helper-list { display: grid; gap: 0.5rem; }
.helper-row {
  display: flex;
  justify-content: space-between;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--bg-raise);
  border: 1px solid var(--line);
}
.helper-stat { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 0.9rem; }

.plan-field { display: block; margin-bottom: 1.1rem; }
.plan-label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.35rem; }
.plan-input {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  color: var(--ink);
  font: 400 0.95rem var(--font-body);
  line-height: 1.5;
  resize: vertical;
}
.plan-input:focus { outline: 2px solid color-mix(in oklch, var(--accent), transparent 40%); border-color: transparent; }
.plan-sub { color: var(--ink-faint); font-size: 0.9rem; margin-top: -0.3em; }

.about-note p { color: var(--ink-faint); font-size: 0.9rem; }
.about-note a { color: var(--ink-dim); text-decoration: underline; }

/* ---------- rescue ---------- */

.view-rescue { padding-top: 1.5rem; }
.rescue-title { font-size: 1.9rem; max-width: 15ch; }
.rescue-sub { color: var(--ink-dim); max-width: 36ch; }

.rescue-steps { counter-reset: rescue; display: grid; gap: 0.7rem; margin-top: 1.4rem; }
.rescue-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  background: var(--bg-raise);
  border: 1px solid color-mix(in oklch, var(--rescue), var(--line) 65%);
}
.rescue-step::before {
  counter-increment: rescue;
  content: counter(rescue);
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in oklch, var(--rescue), var(--bg) 80%);
  color: var(--rescue);
  font: 700 1.05rem var(--font-display);
}
.rescue-step strong { display: block; font-size: 1.02rem; }
.rescue-step span { color: var(--ink-dim); font-size: 0.9rem; }

.rescue-tools { display: grid; gap: 0.6rem; margin-top: 1.8rem; }

/* crisis signpost block reused inside rescue */
.crisis-region { margin: 1.4rem 0 0.8rem; color: var(--ink-dim); font-size: 0.95rem; }
.region-select {
  background: var(--bg-raise);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  font: 500 0.95rem var(--font-body);
}

.crisis-lines { display: grid; gap: 0.6rem; }
.crisis-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.95rem 1.15rem;
  border-radius: var(--radius-sm);
  background: var(--bg-raise);
  border: 1px solid color-mix(in oklch, var(--crisis), var(--line) 60%);
}
.crisis-label { display: block; font-weight: 600; }
.crisis-number { display: block; color: var(--ink-dim); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.crisis-call {
  flex-shrink: 0;
  background: var(--crisis);
  color: oklch(18% 0.04 15);
  font-weight: 700;
  padding: 0.65rem 1.5rem;
  border-radius: 999px;
}

/* ---------- wider screens ---------- */

@media (min-width: 600px) {
  .home-nav, .module-grid { grid-template-columns: 1fr 1fr; }
}