/* ========================================
   Caregiver Rest · design system
   Fraunces (display) + Newsreader (body)
   parchment · pine · clay · apricot
======================================== */

:root {
  --apricot-mist: #F8EDD7;
  --parchment: #F6F0E4;
  --parchment-deep: #EFE6D4;
  --card: #FDFAF3;
  --ink: #26241F;
  --ink-soft: #5E574A;
  --ink-faint: #98907F;
  --pine: #1E4D48;
  --pine-deep: #143733;
  --pine-mist: #E3EAE4;
  --clay: #B85C38;
  --clay-deep: #9A4B2D;
  --clay-mist: #F4E4DA;
  --apricot: #E9B872;
  --hairline: #E2D7C0;
  --danger: #A33B2E;
  --danger-mist: #F6E2DE;
  --serif-display: "Fraunces", Georgia, serif;
  --serif-body: "Newsreader", Georgia, serif;
  --shadow-soft: 0 1px 2px rgba(38,36,31,.04), 0 4px 14px rgba(38,36,31,.06);
  --shadow-card: 0 1px 3px rgba(38,36,31,.06), 0 8px 22px rgba(38,36,31,.08);
  --shadow-lift: 0 2px 4px rgba(38,36,31,.05), 0 12px 28px rgba(38,36,31,.10);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.31 0 0 0 0 0.24 0 0 0 0.028 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --fs-base: 19px;
}

html[data-font="easy"] {
  --serif-body: "Atkinson Hyperlegible", -apple-system, "Segoe UI", Roboto, sans-serif;
}
html[data-font="easy"] body { line-height: 1.75; letter-spacing: .008em; }
html[data-font="easy"] .say { font-family: var(--serif-body); font-style: normal; font-weight: 700; }

html[data-size="lg"]  { --fs-base: 21.5px; }
html[data-size="xl"]  { --fs-base: 24px; }

html[data-theme="dark"] {
  --apricot-mist: #2A2A1E;
  --parchment: #101614;
  --parchment-deep: #18201D;
  --card: #161E1B;
  --ink: #E6EBE5;
  --ink-soft: #A7B4AC;
  --ink-faint: #71807A;
  --pine: #86BFB3;
  --pine-deep: #B5DAD1;
  --pine-mist: #1E2B27;
  --clay: #D08A66;
  --clay-deep: #DE9F7E;
  --clay-mist: #2B221C;
  --apricot: #C9A15E;
  --hairline: #2A342F;
  --danger: #E08573;
  --danger-mist: #33221E;
  --shadow-soft: 0 1px 2px rgba(0,0,0,.25), 0 4px 14px rgba(0,0,0,.28);
  --shadow-card: 0 1px 3px rgba(0,0,0,.3), 0 8px 22px rgba(0,0,0,.34);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.3), 0 12px 28px rgba(0,0,0,.38);
  --grain: none;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Anchor jumps land instantly, on purpose. Native smooth scrolling animates
   faster the further it travels, so our longest, most-used jump was the worst
   one: the Guide menu item flings you 2,716px down the homepage in one blur.
   That reads as jarring to anyone, and large-distance motion is a known trigger
   for vertigo and nausea in exactly our audience. An instant jump has no such
   cost: you are simply there, under the heading you asked for. Consistent with
   the no-timed-animations rule. (Interaction feedback like .settle and savePop
   stays: those are short, local, and you asked for them by tapping.) */
html { scroll-behavior: auto; }
body {
  font-family: var(--serif-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--parchment);
  background-image: var(--grain);
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}
::selection { background: var(--apricot); color: #26241F; }
:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3, h4 { font-family: var(--serif-display); font-weight: 560; line-height: 1.18; letter-spacing: -0.012em; }

a { color: var(--pine-deep); }

.kicker {
  font-family: var(--serif-body);
  font-size: .66em; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint);
}
.help-now > .kicker { color: var(--clay); }

/* The `settle` motion is kept ONLY for things you opened by tapping: a crisis
   card, a practice outcome. Those animate because you asked them to.

   It used to run on page load too: nine blocks on the homepage each slid up
   14px and faded in over .7s, staggered .06s-.3s, the emergency strip and the
   crisis panel among them. That broke two rules at once. "Interaction-triggered
   only, never timed" (this was timed, and nobody asked for it) and "the crisis
   path stays fastest" (the fastest path was arriving last, at 3am, moving).
   It survived only because it predated the rule that outlawed it and got
   grandfathered in. Removed 2026-07-15. Page content is now simply there.
   Do not reintroduce entrance motion: this audience includes people for whom
   drifting content is a vertigo trigger, not a delight. */
@keyframes settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.d1, .d2, .d3, .d4 { /* stagger delays: retired with the load animation */ }
@media (prefers-reduced-motion: reduce) {
  .fire-card.show, .outcome.show { animation: none; }
  /* scroll-behavior isn't repeated here any more: it's auto for everyone now. */
  * { transition: none !important; }
}

/* ————— header ————— */
header.site {
  padding: 22px 40px 20px;
  display: flex; align-items: center; gap: 16px;
  max-width: 1080px; margin: 0 auto;
}
.rose { width: 44px; height: 44px; flex-shrink: 0; }
.rose .rose-ring { stroke: var(--pine); }
.rose .rose-n { fill: var(--clay); }
.rose .rose-pt { fill: var(--pine); }
header.site a.home { text-decoration: none; display: flex; align-items: center; gap: 14px; color: inherit; }
header.site .wordmark { font-family: var(--serif-display); font-size: 23px; font-weight: 560; color: var(--pine-deep); }
header.site .wordmark small { display: block; font-family: var(--serif-body); font-size: 13px; font-weight: 400; font-style: italic; color: var(--ink-soft); margin-top: 1px; }
nav.main { margin-left: auto; display: flex; gap: 22px; align-items: center; }
nav.main a {
  font-size: 15.5px; font-weight: 500;
  color: var(--ink-soft); text-decoration: none; position: relative; padding: 4px 0;
  white-space: nowrap;
}
nav.main a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  border-bottom: 2px solid var(--clay); transition: right .25s ease;
}
nav.main a:hover::after, nav.main a.active::after { right: 0; }
nav.main a.active { color: var(--pine-deep); }

/* comfort controls */
.comfort { display: flex; gap: 8px; margin-left: 14px; }
.comfort button {
  font-family: var(--serif-body); font-size: 13.5px; font-weight: 600;
  background: var(--card); color: var(--ink-soft);
  border: 1px solid var(--hairline); border-radius: 999px;
  min-width: 40px; height: 34px; padding: 0 10px; cursor: pointer;
  transition: all .15s ease;
}
.comfort button:hover { border-color: var(--clay); color: var(--ink); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 40px; }

/* ————— emergency strip ————— */
.emergency-strip {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  background: var(--parchment-deep);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: 9px 16px; font-size: 15px; text-align: center; color: var(--ink-soft);
}
.emergency-strip a { color: var(--pine-deep); font-weight: 600; }
.emergency-strip a strong { color: var(--danger); }
.emergency-strip .dot { color: var(--danger); opacity: .5; }

/* emergency page: the answer before the prose */
.em-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 8px; }
.em-btn {
  flex: 1 1 200px; text-align: center; text-decoration: none;
  font-weight: 700; font-size: 1.02em; white-space: nowrap;
  padding: 14px 16px; border-radius: 8px;
  background: var(--card); color: var(--pine-deep);
  border: 1.5px solid var(--pine);
}
.em-btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }

/* "On this page" jump chips — auto-added on long pages (assets/app.js) */
.page-jump { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 12px; }
.page-jump a {
  font-size: .8em; font-weight: 600; text-decoration: none;
  color: var(--pine-deep); background: var(--card);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 5px 12px;
}
.page-jump a:hover { border-color: var(--pine); }
h2[id] { scroll-margin-top: 16px; }

/* ————— panels & cards ————— */
.panel {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 4px;
  padding: 40px 44px; margin-bottom: 26px; box-shadow: var(--shadow-soft);
}
.panel .kicker { display: block; margin-bottom: 8px; }
.panel h2, .panel h3 { color: var(--pine-deep); }
.panel p.desc { font-size: .9em; font-style: italic; color: var(--ink-soft); }

.help-now {
  position: relative;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 28px 44px 30px;
  margin: 16px 0 30px;
  box-shadow: var(--shadow-soft);
}
.help-now > * { position: relative; }
.help-now h1 { font-size: clamp(24px, 3vw, 30px); color: var(--pine-deep); margin-bottom: 4px; }
.help-now p.sub { font-size: .88em; color: var(--ink-soft); font-style: italic; margin-bottom: 15px; }

/* "And how are you?" — kept separate, but visually quieter than the crisis panel */
.foryou {
  background: var(--pine-mist);
  border: 1px solid var(--pine);
  padding: 32px 44px 30px;
  margin-top: 34px;
}
.foryou::before { border-color: rgba(30,77,72,.18); }
.foryou h2 { font-size: clamp(20px, 2.6vw, 24px); }
.foryou p.sub { margin-bottom: 16px; }

/* search */
.search-row { margin-bottom: 14px; }
.search-row input {
  width: 100%; max-width: 420px;
  font-family: var(--serif-body); font-size: .94em; font-style: italic;
  color: var(--ink); background: var(--parchment);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 9px 20px; outline: none;
}
.search-row input:focus { border-color: var(--clay); }
.search-row input::placeholder { color: var(--ink-faint); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px 10px; }

/* quiet shelves — crisis chips grouped under small labels */
.chip-shelves .chip-group { margin-bottom: 18px; }
.chip-shelves .chip-group:last-child { margin-bottom: 0; }
.chip-group-label {
  display: block;
  font-family: var(--serif-body);
  font-size: .64em; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--clay); opacity: .8;
  margin-bottom: 8px;
}
.chip-group.hidden { display: none; }
.chip-group.anytime { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--parchment); border: 1px solid var(--hairline); border-radius: 999px;
  padding: 8px 15px 8px 12px; min-height: 44px;
  font-family: var(--serif-body); font-size: .9em; font-weight: 500; color: var(--ink);
  cursor: pointer; transition: all .18s ease;
}
.chip svg { width: 17px; height: 17px; stroke: var(--pine); flex-shrink: 0; opacity: .55; }
.chip:hover { border-color: var(--clay); background: var(--card); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.chip.active { background: var(--clay); border-color: var(--clay); color: #FDF8F2; }
.chip.active svg { stroke: #F3D9CB; }
.chip.hidden { display: none; }
.chip.pine svg { stroke: var(--pine); }
.chip.pine:hover { border-color: var(--pine); }
.chip.pine.active { background: var(--pine); border-color: var(--pine); color: #F0F5F2; }
.chip.pine.active svg { stroke: #BFD8D1; }
.no-match { display: none; font-style: italic; color: var(--ink-soft); font-size: .9em; margin-top: 14px; }
.no-match.show { display: block; }
.no-match a { color: var(--clay-deep); }

/* fire card */
.help-now { overflow-anchor: none; } /* the open card moves between shelves; don't let scroll anchoring fight the explicit scroll */
.fire-card { display: none; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--hairline); scroll-margin: 12px; }
.fire-card.show { display: block; animation: settle .45s cubic-bezier(.22,.8,.36,1) both; }
/* when the card opens inside the two-column shelves, it spans the full row
   and closes with a rule so the shelves visibly resume below it */
.chip-shelves .fire-card { grid-column: 1 / -1; margin: 6px 0 22px; padding-bottom: 24px; border-bottom: 1px solid var(--hairline); }
.fire-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.fire-card h3 { font-size: 1.4em; color: var(--pine-deep); font-weight: 560; flex: 1; }
.card-actions { display: flex; gap: 8px; }
.card-actions button {
  font-family: var(--serif-body); font-size: 14px; font-weight: 600;
  background: var(--card); color: var(--ink-soft);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 7px 16px; cursor: pointer; transition: all .15s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.card-actions button:hover { border-color: var(--apricot); color: var(--ink); }
.card-actions button.saved { background: var(--apricot); border-color: var(--apricot); color: #26241F; }

.fire-card ol { list-style: none; margin-bottom: 20px; }
.fire-card ol li { position: relative; padding: 0 0 17px 56px; }
.fire-card ol li::before {
  content: attr(data-n);
  position: absolute; left: 0; top: -2px;
  font-family: var(--serif-display); font-size: 1.55em; font-weight: 420; font-style: italic;
  color: var(--pine); opacity: .85; line-height: 1;
}
.fire-card ol li::after {
  content: ""; position: absolute; left: 11px; top: 34px; bottom: 6px;
  border-left: 1px solid var(--hairline);
}
.fire-card ol li:last-child::after { display: none; }
.fire-card ol li strong { font-weight: 600; color: var(--pine-deep); }

.say {
  display: block; margin-top: 8px; position: relative;
  background: var(--pine-mist); border-radius: 3px;
  padding: 9px 18px 9px 40px;
  font-family: var(--serif-display); font-style: italic; font-weight: 460;
  font-size: 1.02em; color: var(--pine-deep);
}
.say::before {
  content: "“"; position: absolute; left: 12px; top: 1px;
  font-family: var(--serif-display); font-size: 2.1em; line-height: 1;
  color: var(--pine); opacity: .5;
}
.foryou .say { background: var(--card); }

.redflag {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--danger-mist); border-left: 3px solid var(--danger);
  border-radius: 3px; padding: 12px 16px; margin-bottom: 18px;
  font-size: .87em; color: var(--danger);
}
.redflag strong { font-weight: 600; }
.redflag a { color: var(--danger); }

details.why { margin-top: 2px; }
details.why summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 9px;
  font-size: .82em; font-style: italic; color: var(--ink-soft);
  padding: 6px 2px; border-bottom: 1px dashed var(--hairline);
  transition: color .15s;
}
details.why summary:hover { color: var(--clay-deep); }
details.why summary::-webkit-details-marker { display: none; }
details.why summary .fleuron { color: var(--ink-faint); font-style: normal; font-size: .85em; transition: transform .2s ease; display: inline-block; }
details.why[open] summary .fleuron { transform: rotate(90deg); }
details.why p {
  margin-top: 14px; font-size: .9em; color: var(--ink-soft);
  padding-left: 20px; border-left: 2px solid var(--apricot); max-width: 60ch;
}
details.why p strong { color: var(--pine-deep); font-weight: 600; }

/* saved row */
.saved-row { margin: 0 0 26px; display: none; }
.saved-row.show { display: block; }
.saved-row .kicker { display: block; margin-bottom: 10px; }
.saved-row .chips .chip { border-color: var(--apricot); }

/* ————— section heads / interlude ————— */
.sec-eyebrow {
  display: block;
  font-family: var(--serif-body);
  font-size: .66em; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--pine); opacity: .72;
  margin-bottom: 7px;
}
.sec-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 8px; }
.sec-head h2 { font-size: clamp(26px, 3.2vw, 32px); color: var(--pine-deep); white-space: nowrap; }
.sec-head .rule { flex: 1; border-bottom: 1px solid var(--hairline); position: relative; top: -6px; }
.sec-sub { font-size: .9em; font-style: italic; color: var(--ink-soft); margin-bottom: 28px; }

/* toolkit sits in its own shaded room so it stops blurring into the chapter grid */
.toolkit-band {
  background: var(--parchment-deep);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 44px 40px 40px;
  margin-bottom: 72px;
}
.toolkit-band .tool-row { margin-bottom: 0; }

.welcome { text-align: center; margin: 56px auto 72px; max-width: 620px; }
.welcome h2 { font-size: clamp(25px, 3.4vw, 32px); color: var(--pine-deep); margin-bottom: 10px; font-style: italic; font-weight: 460; }
.welcome p { font-size: .93em; color: var(--ink-soft); }

/* ————— chapter grid ————— */
.journey { margin-bottom: 72px; }
.path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.station {
  position: relative; display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 6px;
  border-top: 3px solid var(--pine); padding: 24px 22px 22px; overflow: hidden;
  transition: all .22s ease; box-shadow: var(--shadow-card);
}
.station:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-top-color: var(--pine-deep); }
.station .ghost {
  position: absolute; top: 12px; right: 16px;
  font-family: var(--serif-display); font-size: 34px; font-weight: 380; font-style: italic;
  color: var(--pine); opacity: .32; line-height: 1; user-select: none;
}
.station h3 { position: relative; font-size: 1em; color: var(--pine-deep); margin-bottom: 7px; padding-right: 18px; }
.station p { position: relative; font-size: .82em; line-height: 1.55; color: var(--ink-soft); }
.station .adv {
  position: relative; display: inline-block; margin-bottom: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint); background: transparent; border: 1px solid var(--hairline);
  border-radius: 999px; padding: 2px 10px;
}
.station .done {
  position: absolute; top: 14px; right: 14px; color: var(--pine);
  font-size: 15px; opacity: 0;
}
.station.visited .done { opacity: .9; }

/* tools row */
.tool-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-bottom: 72px; }
.tool-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 6px;
  padding: 24px 24px 20px; transition: all .22s ease; box-shadow: var(--shadow-card);
}
.tool-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.tool-card .kicker { display: block; margin-bottom: 6px; }
.tool-card h3 { font-size: 1.02em; color: var(--pine-deep); margin-bottom: 5px; }
.tool-card p { font-size: .84em; color: var(--ink-soft); line-height: 1.55; }

/* toolkit grouped into labeled bands (same idea as the crisis shelves) */
.tool-group { margin-bottom: 40px; }
.tool-group:last-child { margin-bottom: 0; }
.tool-group .tool-row { margin-bottom: 0; }
.tool-group-label {
  display: block;
  font-family: var(--serif-body);
  font-size: .68em; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--pine); opacity: .85;
  margin-bottom: 12px;
}

/* site-wide hits under the homepage search */
.site-hits { display: none; margin: 10px 0 4px; }
.site-hits.show { display: block; }
.site-hits .hits-label {
  display: block; font-size: .68em; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 6px;
}
.site-hits a {
  display: block; text-decoration: none;
  padding: 8px 12px; margin-bottom: 6px;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 6px;
  font-size: .92em; color: var(--pine-deep);
}
.site-hits a span { display: block; font-size: .86em; color: var(--ink-soft); }
.site-hits a:hover { border-color: var(--pine); }

/* find.html directory rows — icon first: recognition beats reading */
.find-group { margin: 30px 0; }
.find-group.hidden { display: none; }
.find-row {
  display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: center;
  text-decoration: none;
  padding: 10px 14px; margin-bottom: 8px;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 6px;
  transition: border-color .15s ease;
}
.find-row:hover { border-color: var(--pine); }
.find-row.hidden { display: none; }
.find-row .row-ico { grid-row: 1 / span 2; width: 26px; height: 26px; stroke: var(--pine); opacity: .8; }
.find-row strong { grid-column: 2; color: var(--pine-deep); font-size: .98em; }
.find-row span { grid-column: 2; display: block; font-size: .85em; color: var(--ink-soft); line-height: 1.5; }
.tool-group-label .label-ico { width: 15px; height: 15px; stroke: var(--pine); vertical-align: -2px; }

/* tool-card glyphs */
.tool-ico { display: block; width: 27px; height: 27px; stroke: var(--pine); opacity: .8; margin-bottom: 10px; }

/* copy-paste message library (helpers.html) */
.copy-msg {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 8px;
  padding: 13px 16px 11px; margin: 12px 0;
}
.copy-msg .copy-label {
  display: block; font-size: .7em; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--pine); opacity: .85; margin-bottom: 6px;
}
.copy-msg p { font-size: .95em; font-style: italic; color: var(--ink); margin-bottom: 10px; }
.copy-msg .copy-btn { font-size: .82em; padding: 6px 14px; }
@media print { .copy-msg .copy-btn { display: none; } }

/* printable wallet cards (emergency.html) */
.wallet-cards { display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 0 10px; }
.wallet-card {
  flex: 1 1 300px; max-width: 360px;
  background: var(--card); border: 1.5px solid var(--pine); border-radius: 10px;
  padding: 13px 16px;
}
.wallet-card.alert { border-color: var(--danger); }
.wallet-card .wc-head {
  display: block; font-size: .68em; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pine-deep); margin-bottom: 6px;
}
.wallet-card.alert .wc-head { color: var(--danger); }
.wallet-card p { font-size: .88em; line-height: 1.5; margin-bottom: 6px; }
.wallet-card .wc-line { font-size: .8em; color: var(--ink-soft); margin: 8px 0 0; }
@media print {
  .wallet-cards { display: flex !important; }
  .wallet-card { border-width: 1px; break-inside: avoid; }
}

/* at-a-glance comparison chart (buy.html) — scrolls sideways on small screens */
.chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 22px 0 8px;
  border: 1px solid var(--hairline); border-radius: 8px; }
.buy-chart { border-collapse: collapse; width: 100%; min-width: 660px; font-size: .88em; }
.buy-chart th, .buy-chart td { text-align: left; padding: 9px 13px; vertical-align: top;
  border-bottom: 1px solid var(--hairline); line-height: 1.4; }
.buy-chart thead th { font-family: var(--serif-body); font-size: .82em; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1.5px solid var(--pine); position: sticky; top: 0; background: var(--card); }
.buy-chart tbody th { font-weight: 600; color: var(--pine-deep); }
.buy-chart tr.grp td { background: var(--parchment-deep); font-size: .76em; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--clay); padding: 7px 13px; }
.buy-chart .yes { color: var(--pine); font-weight: 700; }
.buy-chart .no  { color: var(--ink-faint); }
.buy-chart tbody tr:not(.grp):hover { background: var(--parchment); }
.chart-legend { font-size: .85em; color: var(--ink-soft); font-style: italic; margin: 4px 0 26px; }
@media print { .chart-wrap { overflow: visible; } .buy-chart { min-width: 0; font-size: .72em; } }

/* "make it yours" row: relationship, name, stage — quiet, one line */
.tune-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin: 26px 0 6px; padding: 12px 16px;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 8px;
  font-size: .92em; color: var(--ink-soft);
}
.tune-row .tune-lead { font-style: italic; }
.tune-row label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.tune-row select, .tune-row input {
  font-family: var(--serif-body); font-size: .95em; color: var(--pine-deep);
  background: var(--parchment); border: 1px solid var(--hairline); border-radius: 6px;
  padding: 5px 8px; max-width: 130px;
}
.tune-row input { width: 110px; }
.tune-row .tune-note { flex-basis: 100%; font-size: .82em; color: var(--ink-faint); }
@media print { .tune-row { display: none; } }

/* fit blocks: content for a different relationship/stage folds to one line
   (never disappears). No choice made → nothing folds. */
.fit-fold > *:not(.fit-toggle) { display: none; }
.fit-toggle { display: none; }
.fit-fold .fit-toggle {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font-family: var(--serif-body); font-size: .88em; font-weight: 600;
  color: var(--ink-soft); background: var(--parchment);
  border: 1px dashed var(--hairline); border-radius: 8px;
  padding: 9px 14px; margin: 14px 0;
}
.fit-toggle span { font-weight: 400; color: var(--ink-faint); }
.fit-toggle:hover { border-color: var(--pine); color: var(--ink); }
@media print { .fit-fold > * { display: block !important; } .fit-toggle { display: none !important; } }

/* "browse by the hour" tiles — a second, visual way in */
.angle-band { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 26px 0; }
.angle-lead { font-size: .92em; font-style: italic; color: var(--ink-soft); margin-right: 2px; }
.angle-tile {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; font-weight: 600; font-size: .92em; color: var(--pine-deep);
  background: var(--card); border: 1px solid var(--hairline); border-radius: 999px;
  padding: 9px 16px; transition: border-color .15s ease;
}
.angle-tile svg { width: 19px; height: 19px; stroke: var(--clay); opacity: .9; }
.angle-tile:hover { border-color: var(--pine); }
@media (max-width: 560px) {
  .angle-tile { padding: 8px 12px; font-size: .88em; gap: 6px; }
  .tool-ico { float: right; margin: 2px 0 0 10px; width: 24px; height: 24px; }
}
@media print { .angle-band { display: none; } }

/* personalize */
.personalize-line {
  display: flex; align-items: center; gap: 16px;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: 20px 8px; margin-bottom: 72px;
  font-size: .85em; font-style: italic; color: var(--ink-soft); flex-wrap: wrap;
}
.personalize-line button.linkish {
  font-family: inherit; font-size: inherit; background: none; border: none; cursor: pointer;
  color: var(--pine-deep); font-weight: 600; font-style: normal;
  border-bottom: 1px solid var(--apricot); padding: 0;
}
.personalize-line select {
  font-family: var(--serif-body); font-size: 15px; color: var(--ink);
  background: var(--card); border: 1px solid var(--hairline); border-radius: 999px;
  padding: 6px 14px;
}

/* ————— chapter pages ————— */
article.chapter { padding-top: 20px; padding-bottom: 40px; }
article.chapter .kicker { display: block; margin-bottom: 10px; }
article.chapter h1 { font-size: clamp(32px, 5vw, 44px); color: var(--pine-deep); margin-bottom: 14px; }
article.chapter p.lede { font-size: 1.08em; font-style: italic; color: var(--ink-soft); margin-bottom: 36px; max-width: 34em; }
article.chapter h2 {
  font-size: clamp(23px, 3vw, 28px); color: var(--pine-deep);
  margin: 44px 0 14px; padding-top: 34px; border-top: 1px solid var(--hairline);
}
article.chapter h2:first-of-type { border-top: none; padding-top: 0; margin-top: 24px; }
article.chapter p { margin-bottom: 16px; max-width: 66ch; }
article.chapter ul { margin: 0 0 18px 22px; max-width: 62ch; }
article.chapter li { margin-bottom: 9px; }
article.chapter li strong, article.chapter p strong { font-weight: 600; color: var(--pine-deep); }

.callout {
  background: var(--card); border: 1px solid var(--hairline); border-left: 3px solid var(--apricot);
  border-radius: 3px; padding: 18px 24px; margin: 24px 0; max-width: 62ch;
  font-size: .93em;
}
.callout .label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--clay); margin-bottom: 6px;
}
.callout.send { border-left-color: var(--pine); }
.callout p:last-child { margin-bottom: 0; }

.watch-stub {
  background: var(--parchment-deep); border: 1px dashed #CFC3A8; border-radius: 4px;
  padding: 14px 18px; margin: 20px 0; font-size: .82em; color: var(--ink-soft); max-width: 62ch;
}
html[data-theme="dark"] .watch-stub { border-color: var(--hairline); }
.watch-stub .len {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--pine-deep);
  background: var(--pine-mist); border-radius: 999px; padding: 2px 11px; margin-right: 8px;
}
.watch-stub .len::before { content: "▶"; font-size: 8px; color: var(--pine); }

.chapter-nav {
  display: flex; justify-content: space-between; gap: 20px;
  border-top: 1px solid var(--hairline); margin-top: 52px; padding: 26px 0 40px;
  font-size: .9em;
}
.chapter-nav a { text-decoration: none; color: var(--pine-deep); font-weight: 500; }
.chapter-nav a:hover { color: var(--clay-deep); }
.chapter-nav .lbl { display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }

/* ————— scenario ————— */
.scenario { margin-bottom: 30px; }
.scenario-text { font-size: 1em; margin-bottom: 18px; max-width: 60ch; }
.scenario-text em { color: var(--ink-soft); }
.choice {
  display: block; width: 100%; max-width: 640px; text-align: left;
  background: var(--parchment); border: 1px solid var(--hairline); border-radius: 4px;
  padding: 14px 20px; min-height: 50px; margin-bottom: 10px;
  font-family: var(--serif-body); font-size: .92em; color: var(--ink); cursor: pointer;
  transition: all .16s ease;
}
.choice:hover { border-color: var(--pine); background: var(--card); transform: translateX(3px); }
.choice.picked-good { background: var(--pine-mist); border-color: var(--pine); }
.choice.picked-bad { background: var(--clay-mist); border-color: var(--clay); }
.outcome { display: none; font-size: .87em; line-height: 1.6; border-radius: 4px; padding: 15px 20px; margin-top: 4px; max-width: 640px; }
.outcome.show { display: block; animation: settle .4s ease both; }
.outcome.good { background: var(--pine-mist); color: var(--pine-deep); border-left: 3px solid var(--pine); }
.outcome.gentle { background: var(--clay-mist); color: var(--clay-deep); border-left: 3px solid var(--clay); }

/* ————— tools ————— */
.tool-form { display: grid; gap: 14px; max-width: 640px; margin-bottom: 30px; }
.tool-form label { font-size: .82em; font-weight: 600; color: var(--pine-deep); display: block; margin-bottom: 4px; }
.tool-form select, .tool-form input, .tool-form textarea {
  width: 100%; font-family: var(--serif-body); font-size: .95em; color: var(--ink);
  background: var(--parchment); border: 1px solid var(--hairline); border-radius: 4px;
  padding: 11px 14px; outline: none;
}
.tool-form select:focus, .tool-form input:focus, .tool-form textarea:focus { border-color: var(--clay); }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--serif-body); font-size: 16px; font-weight: 600;
  background: var(--pine); color: #F0F5F2;
  border: none; border-radius: 999px; padding: 12px 26px; cursor: pointer;
  transition: all .15s ease;
}
.btn:hover { background: var(--pine-deep); }
html[data-theme="dark"] .btn { color: #10201C; }
.btn.quiet { background: var(--card); color: var(--ink-soft); border: 1px solid var(--hairline); }
.btn.quiet:hover { color: var(--ink); border-color: var(--clay); background: var(--card); }

.log-entry {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 4px;
  padding: 14px 20px; margin-bottom: 10px; font-size: .88em; max-width: 640px;
  display: flex; gap: 14px; align-items: baseline;
}
.log-entry .when { font-family: var(--serif-display); font-style: italic; color: var(--clay); white-space: nowrap; }
.log-entry .what strong { color: var(--pine-deep); }
.log-entry .del { margin-left: auto; background: none; border: none; color: var(--ink-faint); cursor: pointer; font-size: 15px; }
.log-entry .del:hover { color: var(--danger); }
.pattern-hint {
  background: var(--pine-mist); border-left: 3px solid var(--pine); border-radius: 3px;
  padding: 14px 20px; margin: 22px 0; font-size: .88em; color: var(--pine-deep); max-width: 640px;
}

/* checklist (doctor prep) */
.checklist { list-style: none; margin: 0 0 26px; max-width: 62ch; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px dashed var(--hairline); font-size: .93em; }
.checklist input[type=checkbox] { width: 19px; height: 19px; margin-top: 5px; accent-color: var(--pine); flex-shrink: 0; }

/* ————— emergency page ————— */
.triage { display: grid; gap: 20px; margin: 30px 0 40px; }
.triage-card { border-radius: 4px; padding: 26px 30px; border: 1px solid var(--hairline); background: var(--card); }
.triage-card.now { border-left: 5px solid var(--danger); }
.triage-card.today { border-left: 5px solid var(--clay); }
.triage-card.talk { border-left: 5px solid var(--pine); }
.triage-card h2 { font-size: 1.25em; margin-bottom: 10px; color: var(--pine-deep); }
.triage-card.now h2 { color: var(--danger); }
.triage-card.today h2 { color: var(--clay-deep); }
.triage-card ul { margin: 0 0 10px 20px; font-size: .92em; }
.triage-card li { margin-bottom: 7px; }
.triage-card .tel { font-family: var(--serif-display); font-style: italic; font-size: 1.1em; }

/* ————— footer ————— */
footer.site {
  position: relative; background: var(--pine-deep); color: #B9CCC6;
  padding: 40px 40px 36px; text-align: center; font-size: .78em; overflow: hidden;
  margin-top: 40px;
}
html[data-theme="dark"] footer.site { background: #0B1210; }
footer.site .rose-big { position: absolute; right: -60px; bottom: -80px; width: 280px; height: 280px; opacity: .07; }
footer.site p { position: relative; max-width: 640px; margin: 0 auto 6px; }
footer.site strong { color: #F0EAD9; font-weight: 600; }
footer.site a { color: #DCE8E4; }
footer.site .disclaimer { font-size: .92em; opacity: .75; font-style: italic; }

/* ————— print: fridge sheets ————— */
@media print {
  body { background: #fff; font-size: 13.5pt; }
  header.site, footer.site, nav.main, .comfort, .emergency-strip, .welcome, .journey,
  .tool-row, .toolkit-band, .personalize-line, .search-row, .chips, .chip-shelves, .no-match, .card-actions,
  .sec-eyebrow, .sec-head, .sec-sub, .saved-row, .mockup-note, .chapter-nav, .watch-stub { display: none !important; }
  .help-now, .panel { border: none; box-shadow: none; padding: 0; margin: 0; }
  .help-now::before { display: none; }
  .help-now h1, .help-now p.sub { display: none; }
  .fire-card { display: none; border: none; padding-top: 0; }
  .fire-card.show { display: block; }
  .fire-card h3 { font-size: 20pt; margin-bottom: 16pt; }
  details.why { display: block; }
  details.why summary { display: none; }
  details.why p { display: block; }
  .say { background: #f0f0eb; }
  body.print-tool .panel { display: block; }
}

/* ————— responsive ————— */
@media (max-width: 920px) {
  .wrap, .wrap-narrow { padding: 0 20px; }
  header.site { padding: 18px 20px; flex-wrap: wrap; }
  nav.main { gap: 16px; }
  .help-now, .panel { padding: 28px 22px; }
  .toolkit-band { padding: 30px 20px 26px; border-radius: 10px; }
  .path { grid-template-columns: 1fr 1fr; }
  .tool-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .path { grid-template-columns: 1fr; }

  /* Section headings wrap on phones. `white-space: nowrap` (set above so the
     hairline rule can sit beside the heading) made "Small tools that close the
     loop" render 357px wide inside a 375px screen, so the whole homepage
     scrolled sideways by 23px. Nothing was cut off, but the page drifted under
     the thumb, which is precisely the kind of small wrongness this audience
     cannot afford. Found 2026-07-15 while measuring the nav. */
  .sec-head h2 { white-space: normal; }

  /* compact header: one tight bar instead of half the first screen */
  header.site { padding: 12px 16px 10px; gap: 10px; }
  header.site .wordmark { font-size: 19px; }
  header.site .wordmark small { display: none; } /* tagline rests on phones */
  .rose { width: 34px; height: 34px; }
  .comfort { margin-left: auto; order: 2; }
  .comfort button { min-width: 34px; height: 30px; font-size: 12.5px; padding: 0 8px; }
  /* `wrap`, not `nowrap`. The six items fit one line at 375px with about 6px
     to spare, so in practice this changes nothing — but 6px is thinner than
     the difference a fallback font or a slightly narrower phone can make, and
     under `nowrap` the overflow doesn't wrap, it slides the whole page
     sideways under the reader's thumb. Wrapping to two lines is a shrug;
     a nav you have to scroll to reach Emergency in is not. Let it wrap.
     (The one-line rule was also what vetoed clearer labels than "Supplies":
     it's a preference, not a requirement, and it should never win over
     reachability.) */
  nav.main { width: 100%; order: 3; justify-content: space-between; gap: 6px; flex-wrap: wrap; margin-left: 0; }
  nav.main a { font-size: 14px; }

  /* emergency strip: one calm line */
  .emergency-strip { padding: 7px 12px; font-size: 14px; }
  .emergency-strip > span { display: none; }

  /* toolkit reads like a menu: titles only, details on the page itself */
  .tool-card { padding: 13px 16px 12px; }
  .tool-card p { display: none; }
  .tool-card .kicker { margin-bottom: 2px; }
  .tool-card h3 { margin-bottom: 0; }
  .tool-group { margin-bottom: 26px; }
}

/* wide screens: two-column shelves halve the crisis panel's height */
@media (min-width: 1000px) {
  .chip-shelves { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
  .chip-shelves .chip-group.anytime { grid-column: 1 / -1; }
}

/* one entry point for the eye: the three most common moments sit slightly forward */
.chip[data-card="agitation"], .chip[data-card="home"], .chip[data-card="repeat"] {
  border-color: var(--clay);
}

/* the emergency nav link reads as what it is */
nav.main a[href$="emergency.html"] { color: var(--danger); }


/* ————— tap-to-highlight reading ————— */
.hl-block { position: relative; transition: background .2s ease; border-radius: 3px; }
.hl-block.hl-on { background: var(--apricot-mist); box-shadow: 0 0 0 6px var(--apricot-mist); }
.hl-btn {
  background: none; border: none; cursor: pointer; padding: 0 4px;
  font-size: 14px; color: var(--ink-faint); opacity: 0; margin-left: 6px;
  vertical-align: baseline; transition: opacity .15s ease, color .15s ease;
}
.hl-block:hover .hl-btn, .hl-btn:focus-visible, .hl-block.hl-on .hl-btn { opacity: .8; }
.hl-btn:hover { color: var(--clay); }
.hl-on .hl-btn { color: var(--clay); }
@media (hover: none) { .hl-btn { opacity: .45; } }

/* ————— spec cards: scannable what/why/cost/when ————— */
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0 30px; }
.spec-card {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 4px;
  padding: 18px 20px 14px; box-shadow: var(--shadow-soft);
}
.spec-card h4 { font-size: 1em; color: var(--pine-deep); margin-bottom: 10px; }
.spec-card h4 .best {
  font-family: var(--serif-body); font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pine); background: var(--pine-mist);
  border-radius: 999px; padding: 2px 9px; margin-left: 8px; vertical-align: 2px; white-space: nowrap;
}
.spec-card dl { margin: 0; }
.spec-card dl > div { display: grid; grid-template-columns: 62px 1fr; gap: 10px; padding: 5px 0; border-top: 1px dashed var(--hairline); }
.spec-card dl > div:first-child { border-top: none; }
.spec-card dt {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); padding-top: 3px;
}
.spec-card dd { margin: 0; font-size: .82em; line-height: 1.5; color: var(--ink); }
.spec-card dd em { color: var(--ink-soft); }
@media (max-width: 720px) { .spec-grid { grid-template-columns: 1fr; } }

/* ————— notebook / checklist builder ————— */
.nb-list {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 4px;
  padding: 22px 24px; margin-bottom: 20px; box-shadow: var(--shadow-soft); max-width: 680px;
}
.nb-list .nb-title {
  width: 100%; font-family: var(--serif-display); font-size: 1.2em; font-weight: 560;
  color: var(--pine-deep); background: transparent; border: none; outline: none; margin-bottom: 10px;
}
.nb-item { display: flex; gap: 11px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--hairline); }
.nb-item input[type=checkbox] { width: 19px; height: 19px; margin-top: 4px; accent-color: var(--pine); flex-shrink: 0; }
.nb-item .txt { flex: 1; font-size: .92em; border: none; background: transparent; font-family: var(--serif-body); color: var(--ink); outline: none; width: 100%; }
.nb-item.done .txt { text-decoration: line-through; color: var(--ink-faint); }
.nb-item .del { background: none; border: none; color: var(--ink-faint); cursor: pointer; font-size: 14px; padding: 4px; }
.nb-item .del:hover { color: var(--danger); }
.nb-add { display: flex; gap: 8px; margin-top: 12px; }
.nb-add input {
  flex: 1; font-family: var(--serif-body); font-size: .9em; color: var(--ink);
  background: var(--parchment); border: 1px solid var(--hairline); border-radius: 999px;
  padding: 9px 16px; outline: none;
}
.nb-add input:focus { border-color: var(--clay); }
.nb-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.hl-quote {
  border-left: 3px solid var(--apricot); background: var(--card);
  border-radius: 3px; padding: 12px 18px; margin-bottom: 12px; max-width: 680px;
  font-size: .9em;
}
.hl-quote .from { display: block; font-size: .78em; font-style: italic; color: var(--ink-soft); margin-top: 6px; }
.hl-quote .from a { color: var(--pine-deep); }
.hl-quote .rm { float: right; background: none; border: none; color: var(--ink-faint); cursor: pointer; }
.hl-quote .rm:hover { color: var(--danger); }

@media print {
  .nb-add, .nb-actions, .nb-item .del, .hl-btn { display: none !important; }
  .nb-list { border: none; box-shadow: none; }
}


/* ————— read-aloud ————— */
.listen-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--serif-body); font-size: 14px; font-weight: 600;
  background: var(--card); color: var(--ink-soft);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 7px 16px; cursor: pointer; transition: all .15s ease;
  margin: 4px 0 18px;
}
.listen-btn:hover { border-color: var(--pine); color: var(--ink); }
.listen-btn.speaking { background: var(--pine-mist); border-color: var(--pine); color: var(--pine-deep); }
@media print { .listen-btn { display: none !important; } }


/* ————— scripture ————— */
.verse { text-align: center; margin: 40px auto; max-width: 46ch; }
.verse::before { content: "†"; display: block; font-family: var(--serif-display); font-size: 15px; color: var(--apricot); margin-bottom: 8px; }
.verse p {
  font-family: var(--serif-display); font-style: italic; font-weight: 460;
  font-size: 1.06em; line-height: 1.55; color: var(--pine-deep); margin: 0 0 7px;
}
.verse .ref {
  font-size: .7em; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint);
}


/* ————— resource filtering ————— */
.filter-row { display: flex; flex-wrap: wrap; gap: 9px; margin: 4px 0 26px; }
.filter-chip {
  font-family: var(--serif-body); font-size: 14px; font-weight: 600;
  background: var(--parchment); color: var(--ink-soft);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 8px 16px; cursor: pointer; transition: all .15s ease;
}
.filter-chip:hover { border-color: var(--pine); color: var(--ink); }
.filter-chip.active { background: var(--pine); border-color: var(--pine); color: #F0F5F2; }
html[data-theme="dark"] .filter-chip.active { color: #10201C; }
.res-list { list-style: none; margin: 0 0 8px; }
.res-list li {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 4px;
  padding: 16px 20px 13px; margin-bottom: 12px; font-size: .92em; line-height: 1.6;
  box-shadow: var(--shadow-soft);
}
.res-list li.hidden { display: none; }
.res-list .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.tag {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pine-deep); background: var(--pine-mist);
  border-radius: 999px; padding: 2px 10px;
}
.res-empty { display: none; font-style: italic; color: var(--ink-soft); font-size: .9em; }
.res-empty.show { display: block; }

/* ————— micro-interactions — pressed, saved, kept ————————————————
   Interaction-triggered only (press, save, confirm) — never timed, never
   looping, all inside the reduced-motion gate. The goal is a felt "that
   worked" for a tired hand, not decoration. */
@media (prefers-reduced-motion: no-preference) {
  .chip:active, .btn:active, .comfort button:active, .filter-chip:active,
  .copy-btn:active, .card-actions button:active, .hl-btn:active,
  .tool-card:active, .station:active { transform: scale(.965); }
  nav.main a:active { transform: translateY(1px); }

  /* the save/keep confirmation — a small pop, then still */
  @keyframes savePop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
  .save-pop { animation: savePop .26s cubic-bezier(.34,1.4,.64,1); }

  /* highlight confirmation — the passage warms for a breath, then settles
     into its kept state (hl-on) */
  @keyframes keptPulse { 0% { background: var(--pine-mist); } 100% { background: transparent; } }
  .hl-block.kept-pulse:not(.hl-on) { animation: keptPulse .5s ease; }
}