/* From Here — calm adult design. V3 reskin (2026-11-02): warm cream,
   deep green, soft sage — matching the founder's concept boards.
   Our screens, flow and behaviour are unchanged from V2; only the
   visual style moved. Sensory-friendly by default: no flashing, no
   autoplay, gentle transitions that are removed entirely when the
   user turns on Reduce motion. Light theme only. */

:root {
  --green: #2E5B45;        /* primary: buttons, active states */
  --green-deep: #24503A;   /* overlays, links, darker accents */
  --green-darkest: #1F4A36;/* focus outlines, picked-state borders */
  --heading: #14312A;      /* near-black green-teal — 12.96:1 on cream */
  --ink: #33473C;          /* body text — 9.24:1 on cream, 9.97:1 on white */
  --paper: #FAF6ED;        /* warm cream app background */
  --card: #ffffff;
  --line: #DDD6C2;
  --line-soft: #E7E1CE;
  --muted: #4E6355;        /* 6.01:1 on cream, 6.48:1 on white */
  --good: #21603B;
  --danger: #8A4633;       /* muted clay — never bright red */
  --danger-bg: #F6DFDA;
  --over: #96600F;         /* warm brown for the over-budget note — 4.90:1 on cream */
  --sage: #DCE8DC;
  --sage-mid: #A9C6AE;
  --sage-deep: #7FA98C;
  --blue-pale: #DCE9F2;
  --peach: #F5E3CE;
  --lavender: #E6E2F2;
  --rose: #F6DFDA;
  --radius: 22px;
  --radius-small: 14px;
  --parchment: #F3EEDF;
  --shadow: 0 2px 10px rgba(31, 74, 54, .08), 0 1px 3px rgba(31, 74, 54, .05);
  --font: ui-rounded, "SF Pro Rounded", "Segoe UI Rounded", "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
html.reduce-motion { scroll-behavior: auto; }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  font-size: 1.05rem;
}
html.large-text body { font-size: 1.3rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--green); color: #fff;
  padding: .6rem 1rem; z-index: 200; border-radius: 0 0 var(--radius-small) 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--green-darkest); outline-offset: 2px; }

.app-header {
  background: var(--paper); color: var(--ink);
  padding: 1rem 1.25rem .6rem; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: .5rem 1.5rem;
  max-width: 760px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: .75rem; }
.brand-mark { flex: none; display: block; }
.brand-name { margin: 0; font-size: 1.45rem; font-weight: 800; letter-spacing: .01em; color: var(--heading); }
.brand-sub { margin: 0; color: var(--green); font-size: 1rem; font-weight: 600; }
.privacy-line { margin: 0; font-size: .95rem; color: var(--muted); }

.header-side { display: flex; align-items: center; gap: .8rem; }
.icon-btn {
  font: inherit; cursor: pointer; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line-soft); color: var(--green-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { border-color: var(--green); }

/* V4 primary navigation: exactly three tabs, fixed to the bottom. */
.tab-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; background: #fff; border-top: 1px solid var(--line-soft);
  box-shadow: 0 -4px 16px rgba(31, 74, 54, .08);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab-btn {
  flex: 1; font: inherit; cursor: pointer; background: transparent; border: none;
  color: var(--muted); font-weight: 700; font-size: .95rem;
  padding: .55rem .25rem .65rem;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  min-height: 58px;
}
.tab-btn:hover { background: var(--parchment); }
.tab-btn.is-active { color: var(--green); box-shadow: inset 0 3px 0 var(--green); }

main { max-width: 760px; margin: 0 auto; padding: 1rem 1.25rem 8.5rem; }

.view { display: none; }
.view.is-active { display: block; }

/* (V5: the flat SVG hills band is gone — replaced by the real painted
   hero art; see the V5 section at the end of this file.) */

.plan-line { margin: 0 0 .4rem; font-size: 1.1rem; font-weight: 600; color: var(--green-deep); }

/* Change banner on Today: appears only when a repair really changed
   something today. Pale blue, plain words, taps to the Change Explainer. */
.change-banner {
  font: inherit; text-align: left; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: .7rem;
  background: #DCE9F5; color: #274A63; border: 2px solid #B9D2EA;
  border-radius: var(--radius-small); padding: .75rem 1rem; margin: .6rem 0 .2rem;
  font-size: 1.05rem; font-weight: 700;
}
.change-banner:hover { background: #CFE0F2; }
.change-banner .change-banner-arrow { margin-left: auto; font-size: 1.4rem; font-weight: 800; }

/* Hub link rows (Repair tab, Toolkit tab). */
.hub-links { display: grid; gap: .6rem; margin: .6rem 0 1rem; }
.hub-btn {
  font: inherit; text-align: left; cursor: pointer; width: 100%;
  background: #fff; border: 2px solid var(--line-soft); border-radius: var(--radius-small);
  color: var(--ink); padding: .8rem 1rem; font-size: 1.05rem; font-weight: 700;
  display: flex; align-items: center; gap: .7rem;
}
.hub-btn:hover { border-color: var(--green); }
.hub-btn .hub-sub { display: block; font-weight: 500; color: var(--muted); font-size: .95rem; }

h1 { font-size: 1.9rem; font-weight: 800; margin: .4rem 0 .6rem; color: var(--heading); }
h2 { font-size: 1.3rem; font-weight: 800; margin: 1.8rem 0 .6rem; color: var(--heading); }
.muted { color: var(--muted); }
.success { color: var(--good); font-weight: 600; }

.notice {
  background: #F8EFDB; border: 2px solid var(--sage-deep); border-radius: var(--radius);
  padding: .9rem 1.1rem; margin: 1rem 0; box-shadow: var(--shadow);
}

.energy-box {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin: 1rem 0; box-shadow: var(--shadow);
}
.energy-message { margin: .3rem 0 .6rem; }
.energy-message.over { font-weight: 700; color: var(--over); }
.energy-bar { height: 16px; background: #EFE9D6; border-radius: 999px; overflow: hidden; }
.energy-fill { height: 100%; width: 0; background: var(--green); transition: width .3s ease; }
.energy-fill.over { background: var(--over); }

/* V5 timeline: the boards' vertical line + circular nodes. Columns:
   muted time label | rail (node on the line) | white card with a pastel
   icon chip. Node meaning is time-based only — see itemHtml in app.js. */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; top: 18px; bottom: 18px;
  left: calc(4.3rem + .55rem + 11px); width: 2px;
  background: var(--line); border-radius: 2px;
}
.timeline li.tl-item {
  display: grid; grid-template-columns: 4.3rem 24px minmax(0, 1fr);
  column-gap: .55rem; align-items: start; margin-bottom: .75rem;
}
.timeline li:not(.tl-item) { margin: 0 0 .75rem calc(4.3rem + .55rem + 24px + .55rem); color: var(--muted); }
.tl-time { padding-top: 1.05rem; text-align: right; font-weight: 700; color: var(--muted); font-size: .95rem; white-space: nowrap; }
/* V6 (P2): bucket labels ("Afternoon") are wider than a clock time —
   a step smaller so they sit in the rail column without crowding. */
.tl-time.is-bucket { font-size: .82rem; padding-top: 1.18rem; }
.tl-rail { display: flex; justify-content: center; }
.tl-node {
  margin-top: 1rem; width: 24px; height: 24px; border-radius: 50%;
  border: 2.5px solid var(--sage-deep); background: var(--paper); color: #fff;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1; flex: none;
}
.tl-node.is-passed { background: var(--green); border-color: var(--green); }
.tl-node.is-next { border-color: var(--green); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 8px var(--green); }
.tl-card {
  display: flex; gap: .75rem; background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 22px; padding: .85rem 1rem; box-shadow: var(--shadow); min-width: 0;
}
.tl-main { flex: 1; min-width: 0; }
.tl-item.protected .tl-card { border-color: var(--sage-mid); }
.tl-item.is-changed .tl-card { background: #EAF2F9; border-color: #B9D2EA; }
.item-top { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: baseline; }
.item-time { font-weight: 700; color: var(--green-deep); white-space: nowrap; }
.item-title { font-weight: 700; font-size: 1.12rem; color: var(--heading); }
.tag {
  font-size: .85rem; border: 1.5px solid var(--muted); color: var(--muted);
  border-radius: 999px; padding: .05rem .55rem;
}
.tag.protected-tag { border-color: var(--green); color: var(--green-deep); font-weight: 700; background: var(--sage); }
.item-meta, .item-notes, .item-firststep { margin: .3rem 0 0; font-size: .98rem; }
.item-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }

.card-form {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 1.1rem 1.15rem; display: grid; gap: .8rem; margin: 1rem 0; box-shadow: var(--shadow);
}
/* V1.1.4: the empty-day note that replaces the change form on Step 4. */
.card-note {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 1.1rem 1.15rem; margin: 1rem 0; box-shadow: var(--shadow); font-size: 1.05rem;
}
label { display: grid; gap: .3rem; font-weight: 600; }
label.check-label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; }
label.check-label input { margin-top: .3rem; width: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--green); }
fieldset { border: 2px solid var(--line); border-radius: var(--radius); display: grid; gap: .5rem; padding: .8rem 1rem; }
legend { font-weight: 700; padding: 0 .4rem; color: var(--heading); }
input[type="text"], input[type="time"], input[type="number"], select, textarea {
  font: inherit; padding: .55rem .7rem; border: 2px solid #8FA396; border-radius: 12px;
  background: #fff; color: var(--ink); width: 100%;
}
input[type="radio"], input[type="checkbox"] { accent-color: var(--green); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }

.btn {
  font: inherit; cursor: pointer; border-radius: 16px; padding: .55rem 1.05rem;
  border: 2px solid var(--green); background: #fff; color: var(--green-deep); font-weight: 600;
  display: inline-block; text-decoration: none;
}
.btn-primary { background: var(--green); border-color: var(--green); color: #fff; }
/* Formerly the gold highlight button; in the boards' palette the
   standout action colour IS the deep green. */
.btn-gold { background: var(--green); border-color: var(--green-deep); color: #fff; }
.btn-danger { border-color: var(--danger); color: var(--danger); background: #fff; }
.btn-danger:hover { background: var(--danger-bg); }
.btn-small { padding: .3rem .7rem; font-size: .95rem; }
.btn-huge { font-size: 1.35rem; padding: 1rem 1.6rem; width: 100%; margin: .5rem 0; border-radius: 18px; }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .6rem 0; }
.file-btn { cursor: pointer; }
.del-confirm { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

.plain-list { padding-left: 1.3rem; }
.plain-list li { margin-bottom: .35rem; }

/* V5 repair choice rows, the boards' way: icon chip + item title on the
   left, the choice itself as a tinted pill dropdown on the right. The
   control is a native <select> (same options/defaults/values as the old
   radio group) — fully keyboard- and screen-reader-accessible. */
.choice-card {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: .85rem 1rem; margin-bottom: .7rem; box-shadow: var(--shadow);
  display: flex; flex-wrap: wrap; gap: .7rem .9rem; align-items: center;
}
.choice-head { display: flex; gap: .7rem; align-items: center; flex: 1 1 11rem; min-width: 0; }
.choice-head p { margin: 0; font-weight: 700; color: var(--heading); }
.choice-select-wrap { flex: 1 1 10.5rem; }
.choice-select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-weight: 700; color: var(--green-deep);
  background-color: #EDF3E4; border: 2px solid var(--sage-mid); border-radius: 999px;
  padding: .6rem 2.5rem .6rem 1rem; width: 100%; min-height: 50px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232E5B45' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.smallest-essential { font-weight: 500; }

.focus-view .focus-step { font-size: 2.4rem; line-height: 1.3; margin: 1.2rem 0; }
html.large-text .focus-view .focus-step { font-size: 2.9rem; }
.timer-box { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 1rem; margin: 1rem 0; max-width: 420px; box-shadow: var(--shadow); }
.timer-display { font-size: 1.6rem; font-weight: 700; margin: 0 0 .5rem; color: var(--heading); }

.script-output {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 1rem 1.1rem; white-space: pre-wrap; min-height: 4rem; margin: 1rem 0; font-size: 1.08rem; box-shadow: var(--shadow);
}
.script-output:empty::before { content: "Your script will appear here."; color: var(--muted); }

.readlive-text { font-size: 1.7rem; line-height: 1.6; white-space: pre-wrap; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 1.2rem; margin: 1rem 0; box-shadow: var(--shadow); }
html.large-text .readlive-text { font-size: 2rem; }

.checkin-question { font-size: 2rem; font-weight: 800; color: var(--heading); margin: 1.4rem 0 .6rem; }
.checkin-log-entry { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: .6rem; box-shadow: var(--shadow); }
.checkin-log-entry p { margin: .15rem 0; }

.calm-now-btn {
  position: fixed; right: 1rem; bottom: 84px; z-index: 100;
  font: inherit; font-size: 1.25rem; font-weight: 800; cursor: pointer;
  background: var(--green); color: var(--paper); border: 3px solid var(--green-deep);
  border-radius: 999px; padding: 1rem 1.7rem;
  box-shadow: 0 6px 20px rgba(31, 74, 54, .35);
}
.calm-overlay {
  position: fixed; inset: 0; z-index: 120; overflow-y: auto;
  background: var(--green-deep); color: var(--paper); padding: 1.5rem 1.25rem 3rem;
}
.calm-overlay h1 { color: var(--paper); }
.calm-overlay .calm-block {
  background: #fff; color: var(--ink); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin-bottom: 1rem; box-shadow: var(--shadow);
}
.calm-overlay .calm-block h2 { margin-top: 0; }
.calm-overlay .calm-block p, .calm-overlay .calm-block li { font-size: 1.2rem; }
/* Recalculating moment: one line, big, centred, nothing else competing.
   Deliberately NO animation property anywhere in these rules — the moment
   is a still pause. (The global reduce-motion rules strip animation and
   transition everywhere anyway, and app.js swaps the timer for a manual
   "Show my new day" tap when Reduce motion is on.) */
.recalc-overlay { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.recalc-overlay[hidden] { display: none; }
.recalc-text { font-size: 2.2rem; line-height: 1.3; margin: 0 0 1.5rem; }
html.large-text .recalc-text { font-size: 2.6rem; }
/* V8.2: the words display stacks ABOVE the calm overlay (120) — Calm
   stays open underneath while the words are shown, and Back returns
   to it. */
.words-overlay { background: var(--paper); color: var(--ink); z-index: 140; }
.words-display { font-size: 2.6rem; font-weight: 700; line-height: 1.35; margin: 2rem 0; color: var(--heading); }
html.large-text .words-display { font-size: 3.1rem; }

/* V8.2: the communication section inside Calm Now — the same phrase
   board (same .phrase-board / .phrase-btn classes, so every
   display-style rule that governs the board governs these tiles
   identically: pictures-first dominant, words-only text alone) —
   plus the communication-card overlay, which mirrors the words
   display's paper surface and stacking. */
#calm-comm { margin-top: 1.6rem; }
#calm-comm h2 { color: var(--paper); font-size: 1.5rem; margin-bottom: .2rem; }
#calm-phrases-empty { font-size: 1.15rem; line-height: 1.5; }
#calm-phrases-empty .btn { margin-left: .4rem; }
#calm-card-btn { margin-top: .2rem; }
.card-overlay {
  position: fixed; inset: 0; z-index: 140; overflow-y: auto;
  background: var(--paper); color: var(--ink); padding: 1.5rem 1.25rem 3rem;
}
.card-overlay h1 { color: var(--heading); }
#card-display { margin: 1.5rem 0 2rem; }

.danger-zone { border: 2px solid var(--danger); background: #FFF9F5; border-radius: var(--radius); padding: 1rem 1.1rem; margin: 1.5rem 0; }

.app-footer { background: #E7EEE0; color: var(--green-deep); padding: 1rem 1.25rem; text-align: center; }
.app-footer p { margin: 0; }

a { color: var(--green-deep); }
a:hover { color: var(--green); }

/* ---------- V2 additions ---------- */

/* Display modes (phase 1): calm / direct / independent.
   Calm = fewer words (extra explanation hidden), bigger spacing.
   Direct = short labels (long explanations hidden, short headings shown).
   Independent = full planner view + home today-summary (JS shows it). */
html[data-mode="calm"] .mode-short { display: none; }
html[data-mode="calm"] main { line-height: 1.75; }
html[data-mode="calm"] .feeling-grid, html[data-mode="calm"] .choice-grid { gap: 1rem; }
html[data-mode="calm"] .btn-huge, html[data-mode="direct"] .btn-huge { margin: .7rem 0; }
html[data-mode="direct"] .mode-extra { display: none; }
html[data-mode="calm"] .mode-extra { display: none; }
html[data-mode="independent"] .mode-short { display: none; }

.feeling-grid, .choice-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 1rem 0;
}
@media (max-width: 480px) { .feeling-grid, .choice-grid { grid-template-columns: 1fr; } }
.feeling-btn, .state-btn {
  font: inherit; font-size: 1.15rem; font-weight: 700; cursor: pointer;
  color: var(--heading);
  border: 2.5px solid var(--sage-mid); border-radius: var(--radius);
  padding: 1rem .8rem; min-height: 3.6rem; text-align: center;
}
/* Pastel tile tints, cycling calmly through the boards' colours. */
.feeling-grid .feeling-btn:nth-child(5n+1), .choice-grid .state-btn:nth-child(5n+1) { background: var(--sage); }
.feeling-grid .feeling-btn:nth-child(5n+2), .choice-grid .state-btn:nth-child(5n+2) { background: var(--blue-pale); }
.feeling-grid .feeling-btn:nth-child(5n+3), .choice-grid .state-btn:nth-child(5n+3) { background: var(--peach); }
.feeling-grid .feeling-btn:nth-child(5n+4), .choice-grid .state-btn:nth-child(5n+4) { background: var(--lavender); }
.feeling-grid .feeling-btn:nth-child(5n+5), .choice-grid .state-btn:nth-child(5n+5) { background: var(--rose); }
/* Picked state. Selector carries the grid class on purpose: the pastel
   nth-child tint rules above are more specific than a bare two-class
   selector, so a plain .is-picked rule lost the background while still
   winning the text colour — white on pale blue, unreadable (founder
   screenshot 2026-11-02). This selector ties the tints and comes later,
   so the picked tile goes fully green with cream text.
   V1.1.3: the guided build's tile containers are .build-tiles, NOT
   .feeling-grid — they fell outside this rule entirely, so a tapped
   build tile recorded the pick but showed NO visible change (founder:
   "I can't select anything", 2026-11-03). Every container that renders
   feeling/state tiles must be named here; the smoke suite checks the
   build-tiles selector is present. */
.feeling-grid .feeling-btn.is-picked, .build-tiles .feeling-btn.is-picked, .choice-grid .state-btn.is-picked {
  background: var(--green); color: var(--paper); border-color: var(--green-darkest);
  box-shadow: inset 0 0 0 2px var(--paper);
}

.btn-mega {
  font-size: 1.5rem; font-weight: 800; width: 100%;
  padding: 1.3rem 1rem; margin: 1.2rem 0 .6rem; border-radius: var(--radius);
}
.home-secondary { display: grid; gap: .2rem; }
.btn-col { display: grid; gap: .5rem; margin: .6rem 0; }
.btn-col .btn { width: 100%; text-align: center; }
.btn-col a.btn { text-align: center; }
.btn-col label { margin-top: .4rem; }

.home-promise { font-size: 1.25rem; font-weight: 700; color: var(--heading); text-align: center; margin: 1.6rem 0 .2rem; }
.no-fail-footer {
  text-align: center; font-weight: 700; color: var(--green);
  font-size: 1.1rem; margin: .4rem 0 0; letter-spacing: .01em;
}

.repair-step { margin-bottom: 1rem; }

/* ---------- V6 (2026-11-02): review-package additions ---------- */

/* P6: the same escape footer at the foot of every repair step. */
.step-footer {
  display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem;
  padding-top: .9rem; border-top: 2px solid var(--line-soft);
}

/* P1: staged explainer — stage sections + the stage nav row. The
   text button is deliberately quiet: it is always there, never loud. */
.stage-nav { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1rem 0 .4rem; }
.btn-text {
  font: inherit; cursor: pointer; background: none; border: none;
  color: var(--green-deep); font-weight: 700; text-decoration: underline;
  padding: .55rem .4rem;
}
.explainer-stage h3 { font-size: 1.12rem; font-weight: 800; color: var(--heading); margin: 1.3rem 0 .5rem; }

/* Item form: the one inline note ("Give it a name first"). */
.form-note { color: var(--over); font-weight: 700; margin: 0; }

/* No-phone-number note (Help view + phrase view). */
.no-phone-note {
  background: #F8EFDB; border: 2px solid var(--sage-deep); border-radius: var(--radius-small);
  padding: .7rem .95rem; margin: .8rem 0; font-weight: 600;
}

/* P3: Repair Kit as cards. The form itself is no longer one big card;
   each category is its own white card with its own header. */
.kit-form { display: grid; gap: 0; margin: 0; }
.kit-card {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 1rem 1.15rem; margin: 1rem 0; box-shadow: var(--shadow);
  display: grid; gap: .8rem;
}
.kit-card h2 { margin: 0; }
.kit-card > form { display: grid; gap: .8rem; }
.kit-count { margin: 1rem 0 0; }
.kit-count p { margin: .25rem 0; }
#kit-count-line { font-weight: 700; color: var(--green-deep); font-size: 1.08rem; }

/* P4: Calm Now first screen. The one action reads big; "More of my
   calm plan" is a quiet disclosure on the deep-green overlay. */
.calm-first-action-text { font-size: 1.45rem; font-weight: 700; line-height: 1.35; }
.calm-quiet { color: var(--paper); opacity: .85; font-size: 1.05rem; margin: .4rem 0; }
#calm-more { margin-top: 1.4rem; }
#calm-more summary { color: var(--paper); font-size: 1.15rem; padding: .8rem 0; }
#calm-more .calm-block h2 { color: var(--heading); }
.regulate-option, .problem-option, .helped-option {
  display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left;
  font: inherit; font-size: 1.1rem; font-weight: 600; cursor: pointer;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--sage-mid); border-radius: var(--radius);
  padding: .9rem 1rem; margin-bottom: .55rem; box-shadow: var(--shadow);
}
.regulate-option .opt-source, .problem-option .opt-source {
  display: block; font-size: .85rem; font-weight: 500; color: var(--muted); margin-top: .15rem;
}
.regulate-option.is-picked, .problem-option.is-picked, .helped-option.is-picked {
  background: var(--green); color: #fff;
}
.regulate-option.is-picked .opt-source, .problem-option.is-picked .opt-source { color: #EAF0E4; }
.finish-opt.is-picked { background: var(--green); color: #fff; }

.phrase-board { display: grid; gap: .6rem; margin: 1rem 0; }
.phrase-btn {
  font: inherit; font-size: 1.25rem; font-weight: 700; cursor: pointer;
  background: var(--card); color: var(--heading); text-align: left;
  border: 2.5px solid var(--sage-mid); border-radius: var(--radius);
  padding: 1.05rem 1.1rem; min-height: 3.8rem; width: 100%;
}
.phrase-board .phrase-btn:nth-child(5n+1) { background: var(--sage); }
.phrase-board .phrase-btn:nth-child(5n+2) { background: var(--blue-pale); }
.phrase-board .phrase-btn:nth-child(5n+3) { background: var(--peach); }
.phrase-board .phrase-btn:nth-child(5n+4) { background: var(--lavender); }
.phrase-board .phrase-btn:nth-child(5n+5) { background: var(--rose); }
.phrase-btn .pin-mark { color: var(--green-deep); font-size: .9rem; display: block; font-weight: 600; }
.phrase-custom-row {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: .6rem .9rem; margin-bottom: .5rem; box-shadow: var(--shadow);
}
.phrase-custom-row span { flex: 1 1 12rem; font-weight: 600; }

.focus-now-label { font-size: 1.1rem; font-weight: 700; color: var(--muted); margin: 1rem 0 0; }

details { margin: .8rem 0; }
details summary { cursor: pointer; font-weight: 700; color: var(--green-deep); padding: .5rem 0; }

.person-row {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: .8rem 1rem; margin-bottom: .6rem; box-shadow: var(--shadow);
}
.person-row p { margin: .2rem 0; }

.pattern-row {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: .7rem 1rem; margin-bottom: .6rem; box-shadow: var(--shadow);
}
#patterns-log .pattern-row:nth-child(4n+2) { background: #F3F7FA; }
#patterns-log .pattern-row:nth-child(4n+3) { background: #FBF4E6; }
#patterns-log .pattern-row:nth-child(4n+4) { background: #F6F3FA; }
.pattern-row p { margin: .15rem 0; }
.count-line { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; border-bottom: 1px solid var(--line-soft); }
.count-line:last-child { border-bottom: none; }

/* ---------- V4 additions ---------- */

/* Pale button ("Help me communicate" on Today, boards' pale style). */
.btn-pale { background: var(--sage); border-color: var(--sage-mid); color: var(--green-deep); }

.mode-btn-row { display: grid; gap: .2rem; margin: .4rem 0; }

/* The footer clears the fixed tab bar. */
.app-footer { margin-bottom: 72px; }

/* Phrase board tiles: icon chip + label (content unchanged from v2). */
.phrase-btn { display: flex; align-items: center; gap: .8rem; }
.phrase-icon {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, .65); color: var(--green-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.phrase-label { flex: 1; }

/* V7.3: the real painting on a default-phrase tile (PHRASE_ART in
   app.js). In Words + pictures it sits as a modest rounded thumb
   beside the words; the Pictures-first rules below give it the
   whole top of the tile. Decorative: the button is named by its
   words, exactly as with the icon chips. */
.phrase-art {
  flex: none; width: 56px; height: 56px; object-fit: cover;
  border-radius: 14px; display: block;
}

/* Feeling glyphs (V7.2): present in the DOM on both check-in grids,
   shown only in Pictures-first style (rules in the display-style
   block below) — Words + pictures and Words only keep the text-only
   tiles exactly as they were. */
.feeling-icon { display: none; }

/* Patterns as sentences: plain-language cards from the person's own data. */
.pattern-sentence {
  background: var(--card); border: 1px solid var(--line-soft);
  border-left: 8px solid var(--green);
  border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: .6rem;
  font-size: 1.15rem; font-weight: 600; box-shadow: var(--shadow);
}
.pattern-sentence-empty { border-left-color: var(--sage-mid); font-weight: 500; color: var(--muted); }

/* Share Support: toggle rows. Settings only choose what a SEND includes. */
.share-support { margin-top: 1.2rem; }
.share-control-copy {
  background: var(--sage); border-radius: var(--radius-small);
  padding: .8rem 1rem; font-size: 1.05rem; color: var(--green-deep);
}
.toggle-row {
  display: flex; align-items: center; gap: 1rem; cursor: pointer;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: .8rem 1rem; margin-bottom: .6rem; box-shadow: var(--shadow);
}
.toggle-text { flex: 1; }
.toggle-text strong { display: block; font-size: 1.08rem; color: var(--heading); }
.toggle-text .toggle-sub { display: block; font-weight: 500; color: var(--muted); font-size: .95rem; }
.switch { position: relative; flex: none; width: 56px; height: 32px; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch-track {
  position: absolute; inset: 0; border-radius: 999px;
  background: #D8D2C4; transition: background .15s ease;
}
.switch-track::after {
  content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(31, 74, 54, .3);
  transition: left .15s ease;
}
.switch input:checked + .switch-track { background: var(--green); }
.switch input:checked + .switch-track::after { left: 28px; }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--green); outline-offset: 2px; }

/* First-run set-up overlay. */
.onboarding-overlay {
  /* Fully opaque: --paper is solid cream. (This used to reference an
     undefined variable, which made the overlay transparent — founder
     screenshot 2026-11-02: page text ghosting through, unreadable.)
     z-index sits above the Calm Now button (100) and tab bar so
     nothing floats over the set-up flow. */
  position: fixed; inset: 0; z-index: 130; overflow-y: auto;
  background: var(--paper); padding: 1.2rem 1rem 6rem;
  overscroll-behavior: contain;
}
.ob-step { max-width: 560px; margin: 0 auto; }
.ob-progress { display: flex; gap: .5rem; justify-content: center; margin: .6rem 0 1.4rem; }
.ob-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--sage-mid); }
.ob-dot.is-on { background: var(--green); }
.ob-leaf { display: block; margin: .4rem auto .8rem; }
.ob-sub { font-size: 1.2rem; font-weight: 600; color: var(--green-deep); margin: .2rem 0 1rem; }
.ob-name-label { display: grid; gap: .4rem; font-weight: 700; color: var(--heading); font-size: 1.15rem; margin: 1rem 0 .4rem; }
#ob-mode-options { display: grid; gap: .7rem; margin: 1rem 0; }
.ob-mode-option {
  font: inherit; cursor: pointer; text-align: left; width: 100%;
  display: flex; align-items: center; gap: .9rem;
  background: var(--card); border: 2.5px solid var(--sage-mid); border-radius: var(--radius);
  padding: 1rem; box-shadow: var(--shadow);
}
.ob-mode-option .ob-mode-label { flex: 1; font-size: 1.25rem; font-weight: 800; color: var(--heading); }
.ob-mode-option .ob-mode-arrow { font-size: 1.6rem; font-weight: 800; color: var(--muted); }
.ob-mode-icon { color: var(--green-deep); display: inline-flex; }
.ob-mode-option.is-picked { border-color: var(--green); background: var(--sage); box-shadow: inset 0 0 0 2px var(--green); }
.ob-skip { background: #fff; }
.ob-reset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1rem 0; }
.ob-reset-tile {
  font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  background: var(--card); color: var(--heading);
  border: 2.5px solid var(--sage-mid); border-radius: var(--radius);
  padding: 1rem .6rem; min-height: 6.2rem; box-shadow: var(--shadow);
}
.ob-reset-tile .ob-tile-icon { color: var(--green-deep); display: inline-flex; }
.ob-reset-tile.is-picked { background: var(--green); color: #fff; border-color: var(--green-darkest); }
.ob-reset-tile.is-picked .ob-tile-icon { color: #fff; }


/* Display style (V4): the onboarding choice, backed by the same settings.
   Words only  -> decorative icons and art hidden (short labels carry it).
   Pictures first -> icon-forward: bigger tiles and buttons, icons larger.
   Icons here are the app's own simple drawings — never a symbol set. */
html[data-style="words-only"] .decor-icon { display: none; }
html[data-style="words-only"] .hills-band { display: none; }
html[data-style="words-only"] .brand-mark { display: none; }
html[data-style="words-only"] .phrase-icon { display: none; }
html[data-style="words-only"] .phrase-art { display: none; }
html[data-style="words-only"] .ob-mode-icon, html[data-style="words-only"] .ob-tile-icon { display: none; }
html[data-style="words-only"] .tab-btn svg { display: none; }
html[data-style="words-only"] .change-banner svg { display: none; }
html[data-style="words-only"] .art-icon { display: none; }
html[data-style="words-only"] .opt-icon { display: none; }
html[data-style="words-only"] .calm-first-art { display: none; }

/* V7.2: Pictures first means PICTURE-led — the concept boards' tile:
   a big picture in its tinted circle, the words as a short label
   under it. (Before, these rules only fattened the small inline chip
   and the board stayed text-led — the founder's "I only see text
   always.") */
html[data-style="pictures-first"] .phrase-btn {
  flex-direction: column; align-items: center; text-align: center;
  min-height: 15rem; padding: 1.2rem 1rem; gap: .7rem; font-size: 1.3rem;
}
html[data-style="pictures-first"] .phrase-icon { width: 150px; height: 150px; }
html[data-style="pictures-first"] .phrase-icon svg { width: 56px; height: 56px; }
html[data-style="pictures-first"] .phrase-label { flex: none; }
/* V7.3: where a tile HAS a real painting, the painting leads — it
   fills the full width of the tile's top (cover crop), the words
   become the short label underneath. Icon-circle tiles (custom
   phrases) keep the V7.2 treatment above. */
html[data-style="pictures-first"] .phrase-btn.has-art {
  padding: 0 0 1.1rem; overflow: hidden; gap: 0; min-height: 15.5rem;
}
html[data-style="pictures-first"] .phrase-btn.has-art .phrase-art {
  width: 100%; height: 200px; border-radius: 0;
}
html[data-style="pictures-first"] .phrase-btn.has-art .phrase-label {
  padding: .8rem 1rem 0;
}
html[data-style="pictures-first"] .feeling-btn, html[data-style="pictures-first"] .state-btn { min-height: 5rem; font-size: 1.25rem; }
/* V7.2: the two check-in grids go picture-led too — big glyph in a
   pale circle above the label, same recipe as the phrase board. */
html[data-style="pictures-first"] #feeling-grid .feeling-btn,
html[data-style="pictures-first"] #repair-feeling-grid .feeling-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .55rem; min-height: 9.5rem;
}
html[data-style="pictures-first"] .feeling-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; border-radius: 50%;
  background: rgba(255, 255, 255, .65); color: var(--green-deep);
}
html[data-style="pictures-first"] .feeling-icon svg { width: 52px; height: 52px; }
html[data-style="pictures-first"] .ob-reset-tile { min-height: 7.5rem; }
html[data-style="pictures-first"] .ob-tile-icon svg { width: 48px; height: 48px; }
html[data-style="pictures-first"] .ob-tile-icon .art-icon { width: 64px; height: 64px; }
html[data-style="pictures-first"] .btn { padding: 1rem 1.4rem; }
html[data-style="pictures-first"] .tab-btn { font-size: 1.02rem; }
html[data-style="pictures-first"] .tab-btn svg { width: 30px; height: 30px; }
html[data-style="pictures-first"] .tab-btn .art-icon { width: 42px; height: 42px; }

/* V8.3 in Pictures-first: option tiles go picture-dominant — the
   motif stands on top at 92px, the words become the caption. The
   check-in family (energy grids, guided-build tiles) joins the
   feeling grids' column layout. A custom phrase tile keeps the
   tall board tile with its words centred, a little larger. */
html[data-style="pictures-first"] .regulate-option,
html[data-style="pictures-first"] .problem-option,
html[data-style="pictures-first"] .helped-option {
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .55rem; min-height: 9.5rem;
}
html[data-style="pictures-first"] .opt-icon { width: 92px; height: 92px; }
html[data-style="pictures-first"] #energy-state-grid .state-btn,
html[data-style="pictures-first"] #build-q5-grid .state-btn,
html[data-style="pictures-first"] #build-q3-tiles .feeling-btn,
html[data-style="pictures-first"] #build-q4-tiles .feeling-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .55rem; min-height: 9.5rem;
}
html[data-style="pictures-first"] .phrase-btn.phrase-custom { justify-content: center; }
html[data-style="pictures-first"] .phrase-custom .phrase-label { font-size: 1.5rem; text-align: center; }
html[data-style="pictures-first"] .calm-first-action-row { flex-direction: column; align-items: flex-start; }
html[data-style="pictures-first"] .calm-first-art { width: 88px; height: 88px; }

/* ================================================================
   V8 FULL ART PASS (2026-11-02) — no generic line icons anywhere a
   picture carries meaning. Every sprite name has a painted motif
   (assets/icons/<name>.webp), rendered as .art-icon by the app.js
   helpers and by the static markup. Inside the circular chips the
   painting sits full-bleed in the circle; elsewhere it is a soft
   rounded tile. Even the functional marks (check, chevron, plus…)
   are painted brushstrokes now.
   ================================================================ */
.art-icon { object-fit: cover; border-radius: 32%; vertical-align: middle; flex: none; }
.ic-chip .art-icon { width: 100%; height: 100%; border-radius: 50%; }
.phrase-icon .art-icon { width: 100%; height: 100%; border-radius: 50%; }
.feeling-icon .art-icon { width: 100%; height: 100%; border-radius: 50%; }
.tab-btn .art-icon { border-radius: 50%; }
.brand-mark.art-icon { border-radius: 50%; }

/* ================================================================
   V8.3 OPTIONS-ART PASS (2026-11-02) — every built-in OPTION
   carries its painting; a person's own entries carry none.
   The option-tile pattern: a painted motif in a soft circle
   (.opt-icon, 40px beside the words in Words + pictures) + the
   words (.opt-text). Text-only tiles (.opt-custom — the person's
   own words) keep the same family: same tile, words centred.
   Pictures-first makes the picture dominant (92px, on top);
   Words-only hides the picture spans entirely.
   ================================================================ */
.opt-icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .65); color: var(--green-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.opt-icon .art-icon { width: 100%; height: 100%; border-radius: 50%; }
.opt-text { flex: 1; min-width: 0; }
.regulate-option.opt-custom, .problem-option.opt-custom, .helped-option.opt-custom {
  justify-content: center; text-align: center;
}
/* Static built-in option buttons (finish choices, the hurts fork)
   wear the same pattern via .btn-opt. */
.btn-opt { display: flex; align-items: center; gap: .8rem; text-align: left; }
/* Calm first action: the painting sits beside the action words
   (48px); in Pictures-first it stands above them at 88px. */
.calm-first-action-row { display: flex; align-items: center; gap: .9rem; }
.calm-first-action-row .calm-first-action-text { margin: 0; }
.calm-first-art {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, .65);
  display: inline-flex; align-items: center; justify-content: center;
}
.calm-first-art .art-icon { width: 100%; height: 100%; border-radius: 50%; }

/* ================================================================
   V8.4 NO-HIDING-PLACES PASS (2026-11-02) — the founder caught the
   Calm "More" kit lists rendering built-ins as bare bullets. Where
   a list enumerates entries that can be built-ins, each built-in
   entry is a picture ROW (the option-tile .opt-icon pattern: 40px
   beside the words, dominant in pictures-first via the global
   .opt-icon rule, hidden in words-only via the same global rule);
   a person's own entries are plain text rows in the same list.
   ================================================================ */
.calm-entry-list { list-style: none; margin: .4rem 0; padding: 0; }
.calm-entry {
  display: flex; align-items: center; gap: .8rem;
  padding: .45rem 0; font-size: 1.2rem;
}
.calm-entry.has-art .opt-text { flex: 1; min-width: 0; }

/* Body check-in (V8.4): the current question's picture stands above
   it — 64px circles in Words + pictures, 96px and dominant in
   Pictures-first, nothing in Words-only. 'temperature' shows two
   (sun + moon: hot or cold). */
.checkin-art { display: flex; gap: .6rem; justify-content: center; margin: .2rem 0 .8rem; }
.checkin-art .opt-icon { width: 64px; height: 64px; }
html[data-style="pictures-first"] .checkin-art .opt-icon { width: 96px; height: 96px; }
html[data-style="words-only"] .checkin-art { display: none; }

/* ================================================================
   V5 PREMIUM FIDELITY (2026-11-02) — real art, real icons, board polish.
   Structure, flow, wording and behaviour are V4's; this layer is craft.
   Contrast rules held throughout: text never sits on the art (it sits
   on cards/cream, or on the deep-green overlays); pastel tints sit
   behind dark-green icon strokes only (icons are decorative).
   ================================================================ */

/* The one icon system: sprite glyphs drawn at a single stroke weight. */
svg.ic {
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; flex: none;
}

/* Pastel circular icon chips (the boards' signature element). */
.ic-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  color: var(--green-deep); flex: none;
}
.tint-0 { background: var(--sage); }
.tint-1 { background: var(--blue-pale); }
.tint-2 { background: var(--peach); }
.tint-3 { background: var(--lavender); }
.tint-4 { background: var(--rose); }
.h-ic { width: 42px; height: 42px; vertical-align: middle; margin-right: .35rem; }
.row-ic { width: 44px; height: 44px; }

/* --- Real art: home header + greeting card (board 1, screen 3) --- */
.hero-wrap {
  position: relative; border-radius: 24px; overflow: hidden;
  height: 172px; margin: .2rem 0 0;
}
.hero-wrap::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  background: linear-gradient(to bottom, rgba(250, 246, 237, 0), var(--paper));
}
.hero-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.greeting-card {
  position: relative; z-index: 2;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 24px;
  box-shadow: var(--shadow); padding: 1rem 1.2rem .9rem; margin: -2.4rem .15rem .4rem;
}
.greeting-card h1 { margin: 0 0 .15rem; }
.greeting-card .muted { margin: 0; }

/* --- Real art: onboarding welcome band (board 1, screen 1) --- */
.ob-art {
  display: block; width: 100%; height: 150px; object-fit: cover;
  object-position: center 60%; border-radius: 20px; margin: .4rem 0 .9rem;
}

/* --- Real art: slim strip on the repaired-day view (board 2, screen 2) --- */
.art-strip {
  height: 96px; border-radius: 20px; margin: 0 0 1rem; box-shadow: var(--shadow);
  background: url('assets/hero-hills.webp') center 68% / cover no-repeat;
}

/* --- Recalculating: a whisper of the hills at the bottom of the deep
       green, masked so it fades in — text contrast untouched (the text
       sits far above it, on the solid green). Calm, or nothing. --- */
.recalc-overlay { overflow: hidden; }
.recalc-overlay::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  background: url('assets/hero-hills.webp') center bottom / cover no-repeat;
  opacity: .22; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%);
  mask-image: linear-gradient(to bottom, transparent, #000 55%);
}
.recalc-overlay > * { position: relative; z-index: 1; }

/* --- Buttons: the boards' feel — tall primaries, soft shadow --- */
.btn-primary, .btn-gold {
  min-height: 54px; display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; text-align: center;
  box-shadow: 0 6px 16px rgba(31, 74, 54, .16);
}
.btn-huge { border-radius: 18px; }

/* --- Hub rows (Repair / Toolkit tabs) as board-style cards --- */
.hub-links .btn {
  display: flex; align-items: center; gap: .7rem; text-align: left;
  background: #fff; border: 2px solid var(--line-soft); border-radius: var(--radius);
  padding: .85rem 1rem; color: var(--ink); box-shadow: var(--shadow); min-height: 54px;
}
.hub-links .btn .ic { color: var(--green); }
.hub-links .btn.btn-primary { background: var(--green); border-color: var(--green); color: #fff; }
.hub-links .btn.btn-primary .ic { color: #fff; }

/* --- Repaired-day explainer: numbered rows, number in a tinted circle
       (board 2, screen 2). CSS counters — the line text is unchanged. --- */
#repair-result .plain-list { list-style: none; padding-left: 0; counter-reset: rr; }
#repair-result .plain-list li {
  counter-increment: rr; position: relative;
  padding-left: 3rem; margin-bottom: .6rem; min-height: 2.2rem;
}
#repair-result .plain-list li::before {
  content: counter(rr); position: absolute; left: 0; top: -.2rem;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--sage); color: var(--green-deep); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
#repair-result .plain-list li:nth-child(5n+2)::before { background: var(--blue-pale); }
#repair-result .plain-list li:nth-child(5n+3)::before { background: var(--peach); }
#repair-result .plain-list li:nth-child(5n+4)::before { background: var(--lavender); }
#repair-result .plain-list li:nth-child(5n)::before { background: var(--rose); }

/* --- Focus screen ("Right now"), board 2 screen 3 composition --- */
.focus-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-top: .2rem; }
.back-link {
  font: inherit; font-weight: 700; color: var(--green-deep);
  background: none; border: none; cursor: pointer; padding: .35rem 0;
  font-size: 1.05rem; text-align: left;
}
.focus-progress { color: var(--muted); font-weight: 600; margin: .45rem 0 0; text-align: right; max-width: 55%; }
.focus-now-big { font-size: 2.6rem; margin: .5rem 0 .2rem; }
.focus-art { display: flex; justify-content: center; margin: .4rem 0 .2rem; }
.focus-art img { width: min(320px, 80vw); height: auto; border-radius: 28px; display: block; }
.focus-view .focus-step { font-size: 1.9rem; margin: .5rem 0 1rem; }
#view-startfocus .btn-col .btn { min-height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
#focus-stuck-btn { background: var(--blue-pale); border-color: #A9C3D6; color: #274A63; }

/* --- Patterns: private line + sentence rows with icon circles --- */
.private-line { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--green-deep); margin: .2rem 0 .4rem; }
.pattern-sentence { display: flex; gap: .8rem; align-items: center; }
.ps-ic { width: 42px; height: 42px; }

/* --- Safe people rows: icon chip + content --- */
.person-row { display: flex; gap: .8rem; align-items: flex-start; }
.person-main { flex: 1; min-width: 0; }

/* --- Share rows: icon chip, text flexes --- */
.toggle-row .toggle-text { flex: 1; }

/* --- Check-labels (smallest good version): icon chip after checkbox --- */
label.check-label .ic-chip { width: 40px; height: 40px; align-self: center; }

/* --- Display styles: words-only hides ALL art and chips too --- */
html[data-style="words-only"] .hero-wrap,
html[data-style="words-only"] .tab-hero,
html[data-style="words-only"] .ob-art,
html[data-style="words-only"] .art-strip,
html[data-style="words-only"] .focus-art,
html[data-style="words-only"] .ic-chip { display: none; }

/* --- Display styles: pictures-first enlarges the icon system --- */
html[data-style="pictures-first"] .ic-chip { width: 84px; height: 84px; }
html[data-style="pictures-first"] .ic-chip svg { width: 32px; height: 32px; }
html[data-style="pictures-first"] .hub-links .btn .ic { width: 28px; height: 28px; }
html[data-style="pictures-first"] .hub-links .btn .art-icon { width: 32px; height: 32px; }

/* ============================ V7 ============================ */
/* Structure pass: Today does, Planner decides, Repair adjusts.
   The hero gets shorter so Today is one short screen; the energy
   states sit in a single row; new cards for Up next and the moved
   pool; Planner hub counts; guided-build lists and tiles; kit
   accordion headers; the Calm repair wizard bar. */

/* Today hero: V7 shipped a compact band here; V7.1 removed it —
   the founder's art rule restored the full-size hero (see the V7.1
   section at the end of this file). The base .hero-wrap rules rule. */

/* Today: energy states as one compact row of small pills. */
.energy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.energy-row .state-btn {
  flex: 1 1 auto;
  padding: 8px 10px;
  font-size: 0.92rem;
  min-height: 40px;
}

/* Today: Up next card. */
.up-next-card { border-left: 6px solid var(--green); }
.up-next-title { font-size: 1.15rem; font-weight: 700; margin: 2px 0; }

/* Today: the moved-pool morning card — informational only, warm,
   never an alarm colour, never "overdue" language. */
.pool-card { border-left: 6px solid #C8A24B; }

/* Today: empty-state choices + starter tiles. */
.empty-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}
.starter-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.starter-tile {
  border: 2px solid var(--green);
  background: var(--card, #fff);
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 1rem;
  cursor: pointer;
  min-height: 44px;
}
.starter-tile:active { background: var(--green); color: #fff; }
/* Starter-tile art (V8.1): rendered on every tile but hidden outside
   Pictures-first — the same pattern as .feeling-icon (V7.2). Words +
   pictures and Words only keep the plain text pill, pixel for pixel. */
.starter-icon { display: none; }

/* Planner hub counts sit quietly after the row label. */
.hub-count { opacity: 0.75; font-weight: 400; }

/* Quick add: the day-target row. */
.add-row { margin-bottom: 10px; }

/* Guided build: entry lists + tile grids + review list. */
.build-list, .review-list {
  list-style: none;
  margin: 8px 0;
  padding: 0;
}
.build-list li, .review-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line, #d8d2c4);
}
.build-list li .btn, .review-list li .btn {
  min-width: 40px;
  min-height: 40px;
  font-size: 1.1rem;
  line-height: 1;
}
/* Guided-build review (V8.4): a tile-born row keeps its painting —
   the row packs picture + words to the left, remove stays right.
   (After the shared rule above so it wins the cascade.) */
.review-list li { justify-content: flex-start; }
.review-list li .btn { margin-left: auto; }
.build-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

/* Pool + unscheduled action columns. */
.pool-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.pool-no-easier { padding: 8px 0; }

/* Calm repair wizard bar. */
.wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0;
}
.wizard-count { font-weight: 700; }

/* Kit accordion: the summary row carries icon + name + filled-hint;
   the hint sits at the row's end, quiet. */
.kit-card > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}
.kit-card > summary::-webkit-details-marker { display: none; }
.kit-card > summary h2 { margin: 0; flex: 1 1 auto; }
.kit-filled-hint {
  font-size: 0.9rem;
  opacity: 0.75;
  white-space: nowrap;
}
.kit-card-body { padding-top: 6px; }

/* ============================ V7.1 ============================ */
/* Founder art rule (2026-11-02, verbatim): "The header art needs to
   be bigger and on every tab or a variant of it on every header."
   So: Today's full-size hero is back (the V7 compact band is gone);
   every tab hub gets a painted band in Today's composition — art
   band + a white title card straddling its bottom edge; and every
   sub-view gets the slim art strip at its top. ONE painting,
   assets/hero-hills.webp, many windows: the variants are CSS crops
   only. No new image files; page weight unchanged. */

/* --- Tab hub bands --- */
.tab-hero {
  position: relative; border-radius: 24px; overflow: hidden;
  height: 148px; margin: .2rem 0 0; background-color: var(--sage);
}
.tab-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  background: linear-gradient(to bottom, rgba(250, 246, 237, 0), var(--paper));
}
/* Planner — crop A: the sun and the high hills (upper right). */
.tab-hero-planner { background: url('assets/hero-hills.webp') 82% 6% / 175% auto no-repeat; }
/* Repair — crop B: the river bend (centre, low in the painting). */
.tab-hero-repair { background: url('assets/hero-hills.webp') 50% 88% / 165% auto no-repeat; }
/* Toolkit — crop C: the valley and foliage, mirrored. The flip lives
   on a ::before painting layer only — content never flips. */
.tab-hero-toolkit::before {
  content: ""; position: absolute; inset: 0;
  background: url('assets/hero-hills.webp') 16% 55% / 170% auto no-repeat;
  transform: scaleX(-1);
}
/* The title card: same recipe as Today's greeting card — white,
   rounded, soft shadow, pulled up over the band's bottom edge. */
.tab-hero-card {
  position: relative; z-index: 2;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 24px;
  box-shadow: var(--shadow); padding: 1rem 1.2rem .9rem; margin: -2.4rem .15rem .9rem;
}
.tab-hero-card h1 { margin: 0 0 .15rem; }
/* Words-only hides the band (rule above); the card then sits at the
   top of the page in its normal place — no overlap pull. */
html[data-style="words-only"] .tab-hero-card { margin-top: 0; }

/* --- Sub-view strips: the repaired-day .art-strip, at page top --- */
.sub-strip { height: 84px; margin: 0 0 .9rem; }
.sub-strip-v2 { background-position: 18% 24%; }
.sub-strip-v3 { background-position: 84% 94%; }

/* --- Pictures-first: the bands sit a little taller, the same way
   the icon system already enlarges in this style. --- */
html[data-style="pictures-first"] .hero-wrap { height: 216px; }
html[data-style="pictures-first"] .tab-hero { height: 190px; }
html[data-style="pictures-first"] .sub-strip { height: 104px; }

/* ============================ V8.1 ============================
   Display-size pass (2026-11-02). Founder direction, verbatim:
   "In the picture mode make the pictures bigger and more dominant,
   in word and picture mode make them the size they are now and
   obviously keep word only mode the same." So EVERY rule here is
   scoped to Pictures-first; the other two modes are untouched.
   In this mode the picture is the element and the words are its
   caption: the phrase board goes one wide tile per row with a
   200px painting zone (in-place rules above), feelings get a 96px
   picture circle, and the whole painted-icon system scales up
   ~1.4-1.5x (in-place rules above, plus these). */

/* The board is locked to one wide tile per row in this mode. */
html[data-style="pictures-first"] .phrase-board { grid-template-columns: 1fr; }

/* The tab bar grows with its 42px paintings; Calm Now and the
   footer move up by the same clearance so nothing hides under it.
   (Main's bottom padding, 8.5rem, already clears the taller bar.) */
html[data-style="pictures-first"] .tab-btn { min-height: 74px; }
html[data-style="pictures-first"] .calm-now-btn { bottom: 102px; }
html[data-style="pictures-first"] .app-footer { margin-bottom: 96px; }

/* The brand leaf leads too: header mark and the bigger onboarding
   leaf both scale from their attribute sizes (42px / 52px). */
html[data-style="pictures-first"] .brand-mark.art-icon { width: 62px; height: 62px; }
html[data-style="pictures-first"] .ob-leaf.brand-mark.art-icon { width: 76px; height: 76px; }

/* Today starter tiles turn picture-led: painting on top, words as
   the caption under it, the pill becoming a soft card. */
html[data-style="pictures-first"] .starter-tile {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  border-radius: var(--radius); padding: 14px 18px;
}
html[data-style="pictures-first"] .starter-icon { display: block; }
html[data-style="pictures-first"] .starter-icon .art-icon { width: 88px; height: 88px; }

/* ================================================================
   V1.1 POLISH PASS (2026-11-03) — Today reordered, Repair ungated.
   The check-in is ONE compact horizontal row of feeling chips; the
   plan comes immediately after it; energy is a smaller expandable
   card below the plan. On Repair there is no Start gate: the flow
   is the view and the hub contents sit below it (no CSS change
   needed there beyond the markup move).
   ================================================================ */

/* The compact check-in row: flex, no wrap, sideways scroll with
   snap so a chip settles cleanly. All ten feelings are in the row;
   the ones past the right edge are discoverable via the soft fade
   on the wrap (and the next chip peeking past it). */
.feeling-row-wrap { position: relative; }
.feeling-row {
  display: flex; flex-wrap: nowrap; overflow-x: auto;
  scroll-snap-type: x proximity;
  gap: .5rem; margin: .8rem 0; padding-bottom: .35rem;
  scrollbar-width: thin;
}
.feeling-row-wrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: .35rem; width: 2.8rem;
  background: linear-gradient(to right, rgba(250, 246, 237, 0), var(--paper));
  pointer-events: none;
}
.feeling-row .feeling-btn {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem; min-height: 3.2rem; text-align: left;
}
/* Row-friendly picture sizes (the row's height is the constraint):
   ~40px beside the words in Words + pictures. Pictures-first leads
   bigger below; Words-only hides the span entirely. */
.feeling-row .feeling-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: rgba(255, 255, 255, .65); color: var(--green-deep);
}
html[data-style="words-only"] .feeling-row .feeling-icon { display: none; }
/* Pictures-first in the row: the picture leads at 60px — dominance
   yields to the row format, the chip stays one short line. */
html[data-style="pictures-first"] #feeling-grid.feeling-row .feeling-btn {
  flex-direction: row; align-items: center; justify-content: flex-start;
  min-height: 4.4rem; gap: .6rem; text-align: left;
}
html[data-style="pictures-first"] #feeling-grid.feeling-row .feeling-icon {
  width: 60px; height: 60px;
}

/* The energy card: a <details> whose summary line always shows the
   current energy state (or "Energy today") plus the used/budget
   line; the picker and the budget detail live inside it. */
.energy-card {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow); margin: 1rem 0;
}
.energy-card > summary.energy-summary-line {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  list-style: none; cursor: pointer; padding: .9rem 1.1rem;
  font-weight: 700; color: var(--heading);
}
.energy-card > summary::-webkit-details-marker { display: none; }
.energy-summary-line::after {
  content: "›"; margin-left: auto; font-size: 1.35rem; line-height: 1;
  color: var(--green-deep); transition: transform .2s ease;
}
.energy-card[open ] > summary.energy-summary-line::after { transform: rotate(90deg); }
#energy-summary-state { font-size: 1.08rem; }
#energy-summary-usage { font-weight: 500; font-size: .98rem; }
.energy-card-body { padding: 0 1.1rem 1rem; }

/* The empty-plan heading reads as a heading, not a footnote. */
#today-empty { font-weight: 700; font-size: 1.12rem; color: var(--heading); }

/* Production unlock (2026-11-04): price row + textarea on the Unlock view */
.price-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.8rem 0; }
.price-row .btn { text-decoration: none; }
.btn.is-disabled { opacity: 0.55; pointer-events: none; }
#unlock-key-input { width: 100%; font-size: 0.95rem; }