/* ============================================================
   styles.css was 134KB and could not be pushed reliably in one
   piece - it was silently truncated in production TWICE, once to
   98KB and once to 44KB, breaking every screen. Split so neither
   half is large enough to fail. Load order matters: this file
   second, after styles.css.
   ============================================================ */
.cust-doll-large{width:168px;height:196px;filter:drop-shadow(0 12px 28px rgba(0,0,0,.55))}

.cust-state-btn{font-size:10px;padding:5px 10px;border-radius:999px}
.cust-state-btn.active{background:rgba(163,230,53,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}

/* Option cards — the labels were effectively invisible before */
.style-btn{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 6px 8px;border-radius:14px;cursor:pointer;
  background:rgba(163,230,53,.04);
  border:1px solid var(--border);
  transition:border-color .12s,background .12s,transform .12s;
}
.style-btn:hover{border-color:var(--border-bright);background:rgba(163,230,53,.07)}
.style-btn.active{
  border-color:var(--acid);
  background:rgba(163,230,53,.13);
  box-shadow:0 6px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.14);
}
.style-btn:active{transform:scale(.97)}

.style-btn-preview{width:100%;display:flex;justify-content:center;pointer-events:none}
.style-btn-preview svg{width:46px;height:56px;display:block}

/* READABLE. This was the main defect. */
.style-btn-label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.8px;
  color:var(--ink-soft);text-align:center;line-height:1.2;
  text-transform:uppercase;
}
.style-btn.active .style-btn-label{color:var(--acid);font-weight:500}

/* Option rows scroll horizontally instead of wrapping into tall stacks */
.cust-section .style-row,
.cust-section > div:has(> .style-btn){
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(74px,1fr);
  gap:8px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin;
}
.cust-section > div:has(> .style-btn)::-webkit-scrollbar{height:4px}
.cust-section > div:has(> .style-btn)::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:2px}

/* Silhouette-only selectors — deliberately wordless, so give them presence */
.silhouette-btn{
  display:flex;align-items:center;justify-content:center;
  padding:10px 8px;border-radius:14px;cursor:pointer;
  background:rgba(163,230,53,.04);border:1px solid var(--border);
  transition:border-color .12s,background .12s,transform .12s;
}
.silhouette-btn svg{width:40px;height:52px;display:block;pointer-events:none}
.silhouette-btn:hover{border-color:var(--border-bright)}
.silhouette-btn.active{
  border-color:var(--acid);background:rgba(163,230,53,.13);
  box-shadow:0 6px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.14);
}
.silhouette-btn:active{transform:scale(.97)}

/* Swatches: tighter grid so 12 tones read as one ramp, not 11 plus an orphan */
.swatch-row{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.swatch{width:100%;aspect-ratio:1;height:auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.35)}
.swatch.active{transform:scale(1.06);box-shadow:0 0 0 2px var(--acid),0 4px 12px rgba(0,0,0,.45)}

.cust-section{padding:16px 18px}
.cust-label{font-size:10px;color:var(--acid);letter-spacing:3px;margin-bottom:12px;opacity:.9}
.cust-sublabel{font-size:10px;color:var(--ink-muted);letter-spacing:1.4px;margin:12px 0 7px}

.cust-randomise-btn{padding:9px 22px;border-radius:999px;background:rgba(163,230,53,.08);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.cust-randomise-btn:hover{background:rgba(163,230,53,.15)}

/* ===== v1.7.0 YOUR UNIVERSE — field manual (screen-universe) ===== */

/* dept home — YOUR UNIVERSE card, reuses .h-sys-card but as a full-width row */
.h-universe-wrap{margin:0 0 14px}
.h-universe-wrap .h-sys-card{width:100%;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;text-align:left}
.h-universe-wrap .h-sys-icon{font-size:22px}

.u-intro-card{padding:18px 16px;border-radius:16px;margin:14px 0 18px}
.u-list-heading{font-family:var(--font-mono);font-size:10px;color:var(--acid);letter-spacing:3px;text-transform:uppercase;margin-bottom:10px}
.u-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.u-entry{border-radius:14px;padding:16px}
.u-entry-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.u-entry-title{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--ink);letter-spacing:.5px}
.u-entry-p{font-size:14px;line-height:1.7;color:var(--ink-soft);margin-bottom:10px}
.u-listen{background:rgba(163,230,53,0.05);border-left:2px solid var(--acid);padding:10px 12px;border-radius:0 8px 8px 0;font-size:13px;line-height:1.6;color:var(--acid)}
.u-listen-label{font-family:var(--font-mono);font-size:10px;letter-spacing:1px;font-weight:700;margin-right:4px}
.u-new-badge{background:rgba(163,230,53,0.12);color:var(--acid);font-family:var(--font-mono);font-size:10px;padding:2px 6px;border-radius:3px;letter-spacing:1px}
.u-entry-locked{display:flex;align-items:center;gap:12px;padding:14px 16px;opacity:.75}
.u-entry-lock{font-size:18px;flex-shrink:0}
.u-entry-title-locked{color:var(--ink-muted)}
.u-entry-unlock{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);letter-spacing:.3px;margin-top:3px}
.u-count{font-family:var(--font-mono);font-size:11px;color:var(--ink-muted);text-align:center;letter-spacing:.5px;margin:4px 0 20px}

/* ===== v1.7.1 LEGIBILITY PASS =====
   Audited every text node on every active screen against WCAG AA using computed
   colours with correct alpha compositing. 14 real failures, all sharing one root
   cause: --ink-muted (#4a6b52) scored 3.24:1 against the background — below the
   4.5:1 minimum — and it is used on nearly every small label in the app.
   Token raised to #7A9B82 (6.31:1 on void, 5.68:1 on panels).

   Second cause: 9px type. Even at passing contrast, 9px is below a sane floor
   for a ten-year-old, and several of these labels are the only thing telling him
   what an option does. Minimum is now 10px, 11px where it carries meaning. */

.cust-sublabel{font-size:10px;color:var(--ink-muted);letter-spacing:1.2px}
.cust-state-btn{font-size:10px;color:var(--ink-soft)}
.cust-state-btn.active{color:var(--acid)}
.style-btn-label{font-size:10px;color:var(--ink-soft)}
.style-btn.active .style-btn-label{color:var(--acid)}
.acc-card-sub{font-size:10.5px;color:var(--ink-muted)}
.acc-card-name{font-size:11px}
.dept-status{font-size:9.5px;color:var(--ink-muted)}
.dept-sub{font-size:9.5px;color:var(--ink-muted)}
.pack-role{font-size:10px;color:var(--ink-soft)}
.pack-caption{font-size:10.5px;color:var(--ink-muted)}
.welcome-eyebrow{font-size:10.5px}
.acct-helper{font-size:11px;color:var(--ink-muted)}
.rv-exit{font-size:10px;color:var(--ink-soft)}
.ggtl-version-stamp{font-size:10px;opacity:.55}

/* Lock icons were the single worst offender at 1.9:1 — effectively invisible */
.lock-icon{opacity:1;color:var(--ink-soft);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.dept-card.locked .dept-icon{opacity:.75}

/* Locked cards were dimmed so far they became unreadable rather than merely inactive */
.dept-card.locked{opacity:.72}
.swatch.locked{opacity:.5}

/* Preview must clip its figure — long hair was overflowing into the state row */
.cust-preview-wrap{overflow:hidden}
.cust-doll-large{overflow:visible}

/* ===== v1.8.0 PACK & FAMILY CHALLENGE (screen-pack) =====
   Additive only — see docs/pack_challenge_spec.md. No per-member bar, no
   percentage, no rank. Tokens reused from :root only. */
.pk-total-card{margin:16px 0;padding:22px 16px;border-radius:16px;text-align:center}
.pk-total-num{font-family:var(--font-display);font-size:38px;font-weight:700;color:var(--acid);letter-spacing:1px;line-height:1}
.pk-total-label{font-size:13px;color:var(--ink-soft);margin-top:6px}
.pk-contest-card{margin:0 0 16px;padding:16px;border-radius:16px}
.pk-contest-label{font-family:var(--font-mono);font-size:10px;color:var(--acid);letter-spacing:3px;text-transform:uppercase;margin-bottom:10px}
.pk-contest-track{height:8px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden}
.pk-contest-fill{height:100%;width:0%;background:var(--acid);border-radius:4px;transition:width .5s ease}
.pk-contest-sub{font-family:var(--font-mono);font-size:11px;color:var(--ink-muted);letter-spacing:.5px;margin-top:8px}
.pk-contest-line{font-size:13px;line-height:1.6;color:var(--ink-soft);margin-top:10px}
.pk-members-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.pk-member-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-radius:12px}
.pk-member-self{border-color:var(--border-bright);background:rgba(163,230,53,0.05)}
.pk-member-handle{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--ink)}
.pk-member-added{font-family:var(--font-mono);font-size:12px;color:var(--acid);letter-spacing:.5px}
.pk-partner-card{margin-bottom:16px;padding:16px;border-radius:16px}
.pk-partner-label{font-family:var(--font-mono);font-size:10px;color:var(--acid);letter-spacing:3px;text-transform:uppercase;margin-bottom:10px}
.pk-partner-current{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--ink);margin-bottom:10px}
.pk-partner-change{font-family:var(--font-mono);font-size:11px;color:var(--ink-muted);text-decoration:underline;cursor:pointer;letter-spacing:.5px;background:none;border:none;padding:0}
.pk-partner-prompt{font-size:14px;line-height:1.6;color:var(--ink-soft);margin-bottom:12px}
.pk-partner-list{display:flex;flex-direction:column;gap:8px}
.pk-partner-pick{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px 14px;cursor:pointer;text-align:left;width:100%;transition:all .12s}
.pk-partner-pick:active{transform:scale(.98)}
.pk-partner-pick:hover{border-color:var(--border-bright)}
.pk-partner-pick-handle{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--ink)}
.pk-partner-helper{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);letter-spacing:.3px;margin-top:10px}
.pk-footer-line{font-size:13px;color:var(--ink-muted);text-align:center;margin:8px 0 20px}
.pk-error{padding:16px;border-radius:14px;font-size:14px;line-height:1.7;color:var(--ink-soft);margin-top:16px}

/* ===== v1.9.0 CONTEST (screen-pack contest-block states + screen-prize) =====
   endsAt and thresholdPct may be NULL on the contest object — these rules
   style both the "no threshold yet" and "threshold set" states, plus the
   optional countdown line. Tokens reused from :root only. */
.pk-contest-countdown{font-family:var(--font-mono);font-size:11px;color:var(--acid);letter-spacing:1px;margin-bottom:8px}
.pk-contest-num{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--acid);letter-spacing:1px;line-height:1}
.pk-contest-nothreshold{font-size:13px;line-height:1.6;color:var(--ink-soft);margin-top:10px}
.pk-contest-viewprize{display:block;width:100%;margin-top:14px;padding:0;background:none;border:none;font-family:var(--font-mono);font-size:11px;color:var(--acid);letter-spacing:1px;text-decoration:underline;text-align:center;cursor:pointer}
.pk-contest-viewprize:active{transform:scale(.98)}

/* screen-prize — reuses .rv-eyebrow/.rv-title/.rv-body/.prize-card/.prize-kicker/.rv-closing/.rv-exit from the existing screen-contest pattern. */
.prize-copy{font-size:14px;line-height:1.7;color:var(--ink-soft)}
.pz-error{padding:16px;border-radius:14px;font-size:14px;line-height:1.7;color:var(--ink-soft);margin-top:16px}


/* ===== v1.10.0 ACCESSIBILITY PASS =====
   Two gaps that matter more than usual for this audience. */

/* ---- 1. REDUCED MOTION ----
   22 keyframe animations, 28 animation declarations, 38 transitions, and no
   respect for prefers-reduced-motion. Motion sensitivity is common on the
   autism spectrum, and confetti bursts, particle sprays and looping pulses are
   exactly the kinds of movement that overwhelm.

   Deliberately NOT a blanket kill: short state transitions under ~200ms aid
   comprehension by showing that something responded. What goes is looping
   motion, large travel, and celebratory particle effects. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    scroll-behavior: auto !important;
  }
  /* Celebratory particle effects removed entirely rather than sped up */
  .particle,
  .win-confetti { display: none !important; }
  /* Looping attention-seekers stop looping */
  .howlie-bubble-wrap,
  .ln-toast,
  .ggtl-update-bar { animation: none !important; }
  /* Scale-on-press becomes a colour change instead of movement */
  .welcome-btn:active,
  .style-btn:active,
  .silhouette-btn:active,
  .cust-randomise-btn:active { transform: none !important; filter: brightness(1.12); }
  .swatch.active { transform: none !important; }
}

/* ---- 2. KEYBOARD FOCUS ----
   Nothing in the app had a focus style, making it unusable without a mouse or
   touch. Uses :focus-visible so the ring appears for keyboard users without
   flashing on every tap. */
:where(button, a, input, textarea, [tabindex], .dept-card, .h-sys-card, .style-btn,
       .silhouette-btn, .swatch, .iq-opt, .rv-opt, .h-chip, .acc-card):focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 2px;
  border-radius: 8px;
}
/* Round controls get a matching round ring */
.swatch:focus-visible { border-radius: 50%; outline-offset: 3px; }
.welcome-signin:focus-visible,
.cust-randomise-btn:focus-visible { border-radius: 999px; }

/* Focus must survive the glass surfaces, which otherwise swallow a thin ring */
.glass:focus-visible { outline-offset: 3px; box-shadow: 0 0 0 4px rgba(163,230,53,.18); }

/* Clickable divs were unreachable by keyboard entirely — make them focusable
   targets with a real hit area and cursor affordance. */
.dept-card, .h-sys-card, .acc-card { cursor: pointer; }

/* ---- 3. TAP TARGETS ----
   Several controls sat under the 44px minimum comfortable touch size. */
/* Was 32px. This one rule governed four interactive controls including Back,
   the most-tapped thing in the app, and it silently overrode a later fix in
   styles.css. 44px is the touch floor. */
.welcome-link, .rv-exit, .cust-state-btn, .scr-skip { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.welcome-signin { min-height: 36px; }

/* ===== v1.11.0 AVATAR ANIMATION & PER-PART REACTION =====
   Cross-fade transitions between doll renders, an idle breathing loop, and a
   blink loop, layered on top of the always-on continuous per-part reaction
   baked into generateDollSVG() itself. See docs/avatar_reaction_spec.md. */

/* Containers the animated doll renders into need a positioning context so
   cross-fade layers can stack absolutely on top of one another. */
.voodoo-mini, .voodoo-in-game, .cust-doll-large, .prog-doll { position: relative; }

.hl-avatar-layer {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 420ms cubic-bezier(.34,1.56,.64,1);
  transform-origin: 50% 100%; /* breathing pivots at the feet */
}
.hl-avatar-layer svg { width: 100%; height: 100%; display: block; }
.hl-avatar-layer.hl-in { opacity: 1; }

/* Breathing loop — vertical scale 1.0 -> 1.012 -> 1.0 over 4s, ease-in-out,
   infinite. Slower (6s) when Load is high, faster (3.4s) when thriving. */
.hl-avatar-layer.hl-breathe { animation: hlBreathe 4s ease-in-out infinite; }
.hl-avatar-layer.hl-breathe.hl-breathe-slow { animation-duration: 6s; }
.hl-avatar-layer.hl-breathe.hl-breathe-fast { animation-duration: 3.4s; }
@keyframes hlBreathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.012); }
}

/* Blink — eyes scale-Y to 0.1 for 90ms, timed from JS (avatar.b.js) at a
   random interval between 3s and 7s. transform-box:fill-box keeps the pivot
   centred on the eyes themselves rather than the whole SVG viewport. */
.hl-eyes { transform-box: fill-box; transform-origin: center; }
.hl-eyes.hl-blink { transform: scaleY(.1); }

/* Reduced motion: no breathing, no blink, no cross-fade — swap instantly.
   Per-part reaction (posture/eye/colour/aura/shoulders) is untouched here —
   it lives inside the SVG markup itself and always applies. */
@media (prefers-reduced-motion: reduce) {
  .hl-avatar-layer { transition: none !important; animation: none !important; }
  .hl-eyes.hl-blink { transform: none !important; }
}

/* ===== FEET — foot care tracker, routine, field notes (v1.12.0) ===== */

/* Avatar Maintenance entry card */
.h-feet-wrap{margin:4px 0 18px}
.h-feet-wrap .h-sys-card{width:100%;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;text-align:left}

/* Healing trend strip — one square per day, oldest to newest. No score,
   percentage, or streak — colour is the only signal. */
.f-trend-strip{display:flex;gap:4px;margin:14px 0 10px}
.f-trend-sq{flex:1;aspect-ratio:1;min-width:0;border-radius:3px}
.f-trend-sq.empty{background:transparent;border:1.5px solid var(--border-bright)}

/* THE ROUTINE — numbered tappable cards */
.f-routine-list{display:flex;flex-direction:column;gap:10px;margin:14px 0 18px}
.f-routine-card{display:flex;align-items:flex-start;gap:12px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;cursor:pointer;text-align:left;width:100%;font:inherit}
.f-routine-card:active{transform:scale(.98)}
.f-routine-card.done{border-color:var(--acid);background:rgba(163,230,53,0.08)}
.f-routine-card.key-step{border-color:var(--border-bright);box-shadow:0 0 16px rgba(163,230,53,0.12)}
.f-routine-card.key-step.done{border-color:var(--acid);box-shadow:0 0 20px rgba(163,230,53,0.25)}
.f-routine-num{width:30px;height:30px;border-radius:50%;background:rgba(163,230,53,0.1);border:1.5px solid var(--border-bright);color:var(--acid);font-family:var(--font-display);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.f-routine-card.done .f-routine-num{background:var(--acid);color:var(--void);border-color:var(--acid)}
.f-routine-info{flex:1}
.f-routine-title{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.4px;margin-bottom:4px}
.f-routine-body{font-size:13px;line-height:1.6;color:var(--ink-soft)}
.f-routine-check{width:20px;height:20px;border-radius:5px;border:1.5px solid var(--border-bright);flex-shrink:0;margin-top:4px}
.f-routine-card.done .f-routine-check{background:var(--acid);border-color:var(--acid)}
.f-btn-logged{background:var(--acid);box-shadow:0 0 20px rgba(163,230,53,0.35)}

/* FIELD NOTES — expandable entries, mirrors the u-entry glass-card look */
.f-notes-list{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.f-note{background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.f-note-header{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:14px 16px;background:transparent;border:none;cursor:pointer;text-align:left;font:inherit}
.f-note-header:active{transform:scale(.99)}
.f-note-title{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.4px}
.f-note-chevron{font-family:var(--font-mono);font-size:12px;color:var(--ink-muted);flex-shrink:0;transition:transform .2s ease}
.f-note.open .f-note-chevron{transform:rotate(180deg);color:var(--acid)}
.f-note-body{max-height:0;overflow:hidden;transition:max-height .25s ease}
.f-note.open .f-note-body{max-height:400px}
.f-note-body-inner{padding:0 16px 16px}
.f-note-p{font-size:14px;line-height:1.7;color:var(--ink-soft);margin-bottom:10px}
.f-note-p:last-child{margin-bottom:0}

/* THE SCAN + EARS — screen-scan, screen-ears (v1.13.0) */
.u-scan-wrap{margin:0 0 16px}
.u-scan-wrap .h-sys-card{width:100%;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;text-align:left}
.u-scan-wrap .h-sys-icon{font-size:22px}

.h-ears-wrap{margin:4px 0 18px}
.h-ears-wrap .h-sys-card{width:100%;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;text-align:left}

.scr-step-count{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);letter-spacing:1px;margin-bottom:6px}

.e-hist-list{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.e-hist-row{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.e-hist-date{color:var(--ink);font-weight:600}

.e-field-note{border-radius:14px;padding:16px;margin:20px 0 6px}

/* ===== TODAY — screen-today, default boot destination (v1.14.0) =====
   No score, no streak on this screen — those live in Health/Progress. */
.t-header{display:flex;align-items:center;gap:14px;margin:0 0 4px}
.t-avatar.voodoo-mini{width:82px;height:112px;border-radius:14px;font-size:0;padding:4px;align-items:flex-end}
.t-greeting{flex:1;min-width:0}
.t-greeting-name{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--ink);letter-spacing:.5px;line-height:1.15}
.t-greeting-date{font-family:var(--font-mono);font-size:11px;color:var(--ink-muted);letter-spacing:1px;margin-top:4px}

.t-card{border-radius:16px;padding:22px;margin:14px 0}
.t-copy{margin-bottom:14px}

.t-check-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 18px}
.t-check-row .h-sys-card{padding:12px 4px;gap:4px}
.t-check-row .h-sys-icon{font-size:18px}
.t-check-row .h-sys-name{font-size:10px;letter-spacing:.3px;line-height:1.25}
.t-check-row .h-sys-sub{display:none}

.t-footer{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:24px 0 8px;padding-top:16px;border-top:1px solid var(--border)}
.t-footer-link{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);letter-spacing:1.5px;background:transparent;border:none;cursor:pointer;padding:6px}
.t-footer-link:active{transform:scale(.96)}
.t-footer-sep{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted)}

/* ===== THE LOG — quick entry surface ===================================
   One persistent button, one sheet, two taps maximum. Present on every
   screen except welcome/signup so logging never requires navigating
   into a department first. Sits above nav (z 120) but below nothing. */
.q-fab{position:fixed;right:16px;bottom:78px;z-index:130;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;width:62px;height:62px;border-radius:50%;
  border:2px solid var(--acid);background:var(--void);color:var(--acid);cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.45);padding:0}
.q-fab:active{transform:scale(.94)}
.q-fab-plus{font-size:22px;line-height:1;font-weight:700}
.q-fab-text{font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px}

.q-sheet{position:fixed;inset:0;z-index:200;pointer-events:none}
.q-sheet.q-open{pointer-events:auto}
.q-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:opacity .25s}
.q-sheet.q-open .q-backdrop{opacity:1}
.q-panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow-y:auto;
  background:var(--panel);border-top:1px solid var(--border-bright);
  border-radius:20px 20px 0 0;padding:10px 18px 26px;
  transform:translateY(100%);transition:transform .28s cubic-bezier(.22,1,.36,1)}
.q-sheet.q-open .q-panel{transform:translateY(0)}
.q-grab{width:38px;height:4px;border-radius:2px;background:var(--border-bright);margin:0 auto 14px}
.q-title{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--ink);margin-bottom:14px}

.q-big{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:var(--acid);color:var(--void);border:none;border-radius:14px;
  padding:16px 18px;margin-bottom:18px;cursor:pointer;text-align:left}
.q-big:active{transform:scale(.985)}
.q-big-label{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:1px}
.q-big-sub{font-family:var(--font-mono);font-size:11px;opacity:.75}

.q-group{margin-bottom:16px}
.q-group-label{font-family:var(--font-mono);font-size:10px;letter-spacing:1.6px;
  color:#7A9B82;margin-bottom:8px}
.q-chips{display:flex;flex-wrap:wrap;gap:8px}
.q-chip{background:rgba(163,230,53,.09);border:1px solid var(--border-bright);color:var(--ink);
  border-radius:999px;padding:11px 16px;font-size:14px;font-family:var(--font-body);cursor:pointer;
  min-height:44px}
.q-chip:active{background:rgba(163,230,53,.22);transform:scale(.96)}

.q-close{width:100%;background:none;border:1px solid var(--border);color:#7A9B82;
  border-radius:12px;padding:13px;font-family:var(--font-mono);font-size:12px;
  letter-spacing:1px;cursor:pointer;margin-top:4px}

.q-toast{position:fixed;left:50%;bottom:150px;transform:translate(-50%,10px);z-index:260;
  background:var(--void);border:1px solid var(--acid);color:var(--ink);
  border-radius:999px;padding:11px 20px;font-size:14px;opacity:0;
  transition:opacity .28s,transform .28s;pointer-events:none;max-width:82vw;text-align:center}
.q-toast.q-toast-in{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion: reduce){
  .q-panel,.q-backdrop,.q-toast{transition:none}
  .q-fab:active,.q-chip:active,.q-big:active{transform:none}
}

/* ===== WHAT THEY ARE ASKING FOR =======================================
   Two voices answer every prayer. Dr. Howlie is true and small.
   Mr. Meow is made of disinformation and is always tagged as such.
   No score, no streak, no guilt anywhere on this screen. */
.pr-intro{padding:4px 0 14px}
.pr-title{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--ink);
  letter-spacing:.5px;line-height:1.1;margin:6px 0 8px}
.pr-lede{font-size:15px;line-height:1.5;color:var(--ink);opacity:.9;margin:0}

.pr-card{border-radius:16px;padding:18px;margin-bottom:16px}
.pr-name{font-family:var(--font-mono);font-size:10px;letter-spacing:2.4px;color:var(--acid);margin-bottom:8px}
.pr-asking{font-size:16px;line-height:1.5;color:var(--ink);margin-bottom:16px}

.pr-voice{border-radius:12px;padding:12px 14px;margin-bottom:10px}
.pr-voice-who{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:10px;letter-spacing:1.6px;margin-bottom:6px}
.pr-voice-line{font-size:15px;line-height:1.45;color:var(--ink)}
.pr-voice-face{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0}
.pr-dw-face{font-size:17px;line-height:1}

.pr-voice-howlie{background:rgba(163,230,53,.10);border:1px solid var(--border-bright)}
.pr-voice-howlie .pr-voice-who{color:var(--acid)}

.pr-voice-dw{background:rgba(255,255,255,.04);border:1px dashed #6b5a7a}
.pr-voice-dw .pr-voice-who{color:#B79BD1}
.pr-voice-dw .pr-voice-line{opacity:.82;font-style:italic}
.pr-disinfo{margin-left:auto;background:#B79BD1;color:var(--void);border-radius:4px;
  padding:2px 6px;font-size:10px;letter-spacing:1.2px;font-weight:700;font-style:normal}

.pr-truth{font-size:13px;line-height:1.5;color:#7A9B82;margin:12px 0 14px;
  padding-left:11px;border-left:2px solid var(--border-bright)}
.pr-truth strong{color:var(--acid);font-weight:700}

.pr-answer{width:100%}
.pr-skip{text-align:center;font-size:12px;color:#7A9B82;margin-top:9px}

.pr-quiet{font-size:17px;color:var(--ink);margin-bottom:6px}
.pr-quiet-sub{font-size:14px;color:#7A9B82;line-height:1.45}

.t-footer-primary{color:var(--acid) !important;border-color:var(--acid) !important}

/* ===== THE BOARD'S DECISION ===========================================
   Visual language borrowed from Chance's own MEOW LABS terminal:
   monospace, green on black, one idea per card, generous spacing.
   His layout was more legible than ours and this credits it. */
.an-wrap{padding:2px 0 20px}
.an-term{border:1px solid var(--acid);border-radius:10px;padding:12px 14px;margin-bottom:18px;
  background:rgba(163,230,53,.06)}
.an-term-head{font-family:var(--font-mono);font-size:12px;letter-spacing:1.2px;color:var(--acid);
  line-height:1.4}
.an-term-sub{font-family:var(--font-mono);font-size:10px;letter-spacing:1.4px;color:#7A9B82;margin-top:5px}

.an-card{border:1px solid var(--border-bright);border-radius:14px;padding:17px;margin-bottom:14px;
  background:var(--panel)}
.an-label{font-family:var(--font-mono);font-size:10px;letter-spacing:1.8px;color:#7A9B82;margin-bottom:9px}
.an-decision{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--acid);
  letter-spacing:1px;line-height:1.05;margin-bottom:12px}
.an-body{font-size:15px;line-height:1.55;color:var(--ink);margin-bottom:10px}
.an-body:last-child{margin-bottom:0}
.an-body-strong{color:var(--acid);font-weight:600}

.an-hire{display:flex;align-items:center;gap:13px;margin:4px 0 12px}
.an-face{font-size:40px;line-height:1}
.an-name{font-family:var(--font-display);font-size:23px;font-weight:700;color:var(--ink);letter-spacing:.5px}
.an-title{font-family:var(--font-mono);font-size:10px;letter-spacing:1.6px;color:#B79BD1;margin-top:3px}

.an-memo{border:1px dashed #B79BD1;border-radius:12px;padding:15px;margin-bottom:14px;
  background:rgba(183,155,209,.07)}
.an-memo-label{font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;color:#B79BD1;margin-bottom:9px}
.an-memo-text{font-family:var(--font-mono);font-size:15px;line-height:1.6;color:var(--ink)}

.an-who{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:1.6px;color:var(--acid);margin-bottom:10px}
.an-who-face{width:22px;height:22px;border-radius:50%;object-fit:cover}

.an-joint{border:2px solid var(--acid);border-radius:16px;padding:20px 17px;margin-top:20px;
  background:rgba(163,230,53,.07)}
.an-joint-label{font-family:var(--font-mono);font-size:10px;letter-spacing:2.4px;color:#7A9B82;
  margin-bottom:10px}
.an-joint-title{font-family:var(--font-display);font-size:29px;font-weight:700;color:var(--acid);
  line-height:1.08;letter-spacing:1px;margin-bottom:14px}
.an-joint-real{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--ink);
  margin-bottom:10px}
.an-cta{width:100%;margin-top:6px}
.an-secondary{width:100%;background:none;border:1px solid var(--border);color:#7A9B82;
  border-radius:12px;padding:13px;font-family:var(--font-mono);font-size:12px;letter-spacing:1px;
  cursor:pointer;margin-top:10px}

/* ===== GUIDED ROUTINES ================================================
   Audio-first. Big type so a glance is enough and he never has to
   study the screen. The app is a voice, not an audience. */
.rt-menu{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.rt-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--border-bright);border-radius:14px;
  padding:15px 16px;cursor:pointer;min-height:64px}
.rt-card:active{transform:scale(.985)}
/* .rt-card-emoji removed with the emoji themselves */
.rt-card-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.rt-card-title{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--ink)}
.rt-card-sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.8px;color:#7A9B82}

.rt-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.rt-exit,.rt-mute{background:none;border:1px solid var(--border);color:#7A9B82;border-radius:999px;
  padding:10px 16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.8px;cursor:pointer;
  /* 40px failed the 44px touch floor. Leave is the button he needs most in the
     middle of a routine — partial credit is real credit only if he can reach
     the exit. */
  min-height:44px}
.rt-count{font-family:var(--font-mono);font-size:12px;letter-spacing:1.4px;color:var(--acid)}

.rt-bar{height:4px;background:rgba(163,230,53,.14);border-radius:2px;overflow:hidden;margin-bottom:26px}
.rt-bar-fill{height:100%;background:var(--acid);border-radius:2px;transition:width .4s ease}

.rt-stage{text-align:center;padding:8px 4px 26px}
.rt-pose{display:none}
.rt-name{font-family:var(--font-display);font-size:27px;font-weight:700;color:var(--ink);
  letter-spacing:.5px;line-height:1.1}
.rt-sanskrit{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:#7A9B82;margin-top:5px}
.rt-text{font-size:19px;line-height:1.55;color:var(--ink);margin-top:18px;max-width:34ch;
  margin-left:auto;margin-right:auto}

.rt-controls{display:flex;flex-direction:column;gap:10px}
.rt-next{width:100%;min-height:56px;font-size:17px}
.rt-skip{background:none;border:none;color:#7A9B82;font-size:14px;padding:12px;cursor:pointer;
  text-decoration:underline}
.rt-note{text-align:center;font-size:13px;color:#7A9B82;margin-top:18px;line-height:1.5}

.rt-after{text-align:center;padding:30px 4px}
.rt-after-mark{display:none}
.rt-after-title{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--acid);
  margin-bottom:12px}
.rt-after-body{font-size:16px;line-height:1.55;color:var(--ink);max-width:34ch;margin:0 auto 26px}
.rt-after-q{font-family:var(--font-mono);font-size:11px;letter-spacing:1.8px;color:#7A9B82;
  margin-bottom:12px}
.rt-after-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:26px}
.rt-after-close{background:none;border:1px solid var(--border);color:#7A9B82;border-radius:12px;
  padding:13px 28px;font-family:var(--font-mono);font-size:12px;letter-spacing:1px;cursor:pointer}

@media (prefers-reduced-motion: reduce){ .rt-bar-fill{transition:none} .rt-card:active{transform:none} }

/* ===== THE DAILY LOOP =================================================
   G1: the only affordance offered on an incomplete day makes the day
   SMALLER. There is no warning state, no count of what is missing, and
   no "behind" anywhere in this component. */
.lp-wrap{margin:18px 0 6px}
.lp-strip{display:flex;gap:8px}
.lp-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  border:1px solid var(--border);border-radius:12px;padding:11px 6px;background:var(--panel)}
.lp-step.lp-done{border-color:var(--acid);background:rgba(163,230,53,.10)}
.lp-tick{font-size:16px;line-height:1;color:#7A9B82}
.lp-step.lp-done .lp-tick{color:var(--acid)}
.lp-label{font-family:var(--font-mono);font-size:10px;letter-spacing:1.2px;color:#7A9B82;text-align:center}
.lp-step.lp-done .lp-label{color:var(--acid)}

.lp-toomuch{display:block;width:100%;margin-top:10px;background:none;
  border:1px solid var(--border);color:#7A9B82;border-radius:12px;padding:12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:1px;cursor:pointer;min-height:44px}
.lp-toomuch:active{background:rgba(163,230,53,.08)}
.lp-eased{margin-top:10px;font-size:13px;line-height:1.5;color:#7A9B82;text-align:center}
.lp-savers{margin-top:9px;font-family:var(--font-mono);font-size:10px;letter-spacing:1.2px;
  color:var(--acid);text-align:center}

/* ===== THE AGREEMENT ==================================================
   Three numbers and plain terms. His valuation audit is shown as a
   correction he made, not a concession we granted. No "behind" state
   exists in this component. */
.ct-title{font-family:var(--font-display);font-size:29px;font-weight:700;color:var(--ink);
  letter-spacing:.5px;margin:6px 0 18px}

.ct-audit{border:1px dashed #B79BD1;border-radius:12px;padding:15px;margin-bottom:18px;
  background:rgba(183,155,209,.07)}
.ct-audit-label{font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;color:#B79BD1;
  margin-bottom:11px}
.ct-audit-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:15px;color:var(--ink);margin-bottom:6px}
.ct-strike{text-decoration:line-through;opacity:.55;font-family:var(--font-mono)}
.ct-real{color:var(--acid);font-weight:700;font-family:var(--font-mono)}
.ct-audit-note{font-size:13px;line-height:1.55;color:#7A9B82;margin-top:11px}
.ct-audit-note strong{color:var(--acid)}

.ct-numbers{display:flex;gap:9px;margin-bottom:18px}
.ct-num{flex:1;background:var(--panel);border:1px solid var(--border-bright);border-radius:13px;
  padding:14px 8px;text-align:center}
.ct-num-v{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--acid);
  line-height:1.15;word-break:break-word}
.ct-num-l{font-family:var(--font-mono);font-size:10px;letter-spacing:.9px;color:#7A9B82;margin-top:6px}

.ct-stage{background:var(--panel);border:1px solid var(--border-bright);border-radius:14px;
  padding:16px;margin-bottom:18px}
.ct-stage-label{font-family:var(--font-mono);font-size:10px;letter-spacing:1.8px;color:#7A9B82;
  margin-bottom:11px}
.ct-bar{height:9px;background:rgba(163,230,53,.14);border-radius:5px;overflow:hidden;margin-bottom:10px}
.ct-bar-fill{height:100%;background:var(--acid);border-radius:5px;transition:width .5s ease}
.ct-stage-count{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--ink)}
.ct-savers{font-family:var(--font-mono);font-size:10px;letter-spacing:1.1px;color:var(--acid);margin-top:7px}
.ct-stage-note{font-size:13px;line-height:1.5;color:#7A9B82;margin-top:9px}

.ct-terms{background:var(--panel);border:1px solid var(--border);border-radius:14px;
  padding:16px;margin-bottom:16px}
.ct-terms-label{font-family:var(--font-mono);font-size:10px;letter-spacing:1.8px;color:var(--acid);
  margin-bottom:12px}
.ct-list{margin:0;padding-left:20px}
.ct-list li{font-size:15px;line-height:1.6;color:var(--ink);margin-bottom:11px}
.ct-list li:last-child{margin-bottom:0}
.ct-list strong{color:var(--acid)}

.ct-why{border:2px solid var(--acid);border-radius:14px;padding:16px;background:rgba(163,230,53,.07)}
.ct-why-label{font-family:var(--font-mono);font-size:10px;letter-spacing:2px;color:#7A9B82;margin-bottom:9px}
.ct-why-body{font-size:16px;line-height:1.55;color:var(--ink)}

@media (prefers-reduced-motion: reduce){ .ct-bar-fill{transition:none} }

/* ===== TIME TRAVEL NOTICE =============================================
   He moved his phone clock forward and it cost him progress. The app's
   answer is in character and admiring, never an accusation. */
#tgNotice{position:fixed;inset:0;z-index:240;background:rgba(0,0,0,.72);
  display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.tg-card{background:var(--panel);border:2px solid var(--acid);border-radius:18px;
  padding:20px;max-width:440px;width:100%}
.tg-title{font-family:var(--font-display);font-size:23px;font-weight:700;color:var(--acid);
  letter-spacing:1px;margin-bottom:16px}
.tg-voice{display:flex;gap:11px;align-items:flex-start;border-radius:12px;padding:12px;
  margin-bottom:10px;background:rgba(163,230,53,.10);border:1px solid var(--border-bright)}
.tg-voice-dw{background:rgba(255,255,255,.04);border:1px dashed #6b5a7a}
.tg-face{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0}
.tg-cat{font-size:22px;line-height:1;flex-shrink:0}
.tg-who{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:1.5px;color:var(--acid);margin-bottom:5px}
.tg-who-dw{color:#B79BD1}
.tg-line{font-size:14px;line-height:1.5;color:var(--ink)}
.tg-voice-dw .tg-line{opacity:.82;font-style:italic}
.tg-footer{font-size:13px;line-height:1.55;color:var(--acid);margin:14px 0 4px;
  padding-left:11px;border-left:2px solid var(--acid)}
.tg-close{width:100%;margin-top:14px;background:var(--acid);color:var(--void);border:none;
  border-radius:12px;padding:14px;font-family:var(--font-display);font-size:15px;
  font-weight:700;letter-spacing:1px;cursor:pointer;min-height:48px}

/* ===== CERTIFICATION ================================================== */
.cert-summary{display:flex;gap:10px;margin:18px 0}
.cert-sum-box{flex:1;background:var(--panel);border:1px solid var(--border-bright);
  border-radius:13px;padding:15px 10px;text-align:center}
.cert-sum-v{font-family:var(--font-display);font-size:27px;font-weight:700;color:var(--acid);line-height:1}
.cert-sum-v span{font-size:15px;opacity:.6}
.cert-sum-l{font-family:var(--font-mono);font-size:10px;letter-spacing:1.1px;color:#7A9B82;margin-top:7px}

.cert-group-label{font-family:var(--font-mono);font-size:10px;letter-spacing:2px;color:var(--acid);
  margin:20px 0 9px}
.cert-item{display:flex;align-items:flex-start;gap:11px;background:var(--panel);
  border:1px solid var(--border);border-radius:12px;padding:13px;margin-bottom:8px}
.cert-item-done{border-color:var(--acid);background:rgba(163,230,53,.09)}
.cert-tick{font-size:15px;line-height:1.3;color:#7A9B82;flex-shrink:0}
.cert-item-done .cert-tick{color:var(--acid)}
.cert-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cert-label{font-size:15px;line-height:1.4;color:var(--ink)}
.cert-detail{font-size:13px;line-height:1.45;color:#7A9B82}
.cert-state{font-family:var(--font-mono);font-size:10px;letter-spacing:.9px;color:#7A9B82;
  flex-shrink:0;padding-top:2px;text-align:right}
.cert-item-done .cert-state{color:var(--acid)}

.cert-file-btn{width:100%;margin-top:22px;background:none;border:2px solid var(--acid);
  color:var(--acid);border-radius:13px;padding:15px;font-family:var(--font-display);
  font-size:15px;font-weight:700;letter-spacing:1px;cursor:pointer;min-height:50px}
.cert-report{background:var(--panel);border:1px solid var(--border-bright);border-radius:13px;
  padding:15px;margin-top:12px}
.cert-report-label{font-family:var(--font-mono);font-size:10px;letter-spacing:1.6px;
  color:var(--acid);margin-bottom:10px}
.cert-textarea{width:100%;min-height:88px;background:var(--void);border:1px solid var(--border-bright);
  border-radius:10px;color:var(--ink);font-size:15px;font-family:var(--font-body);padding:12px;
  margin-bottom:11px;resize:vertical}
.cert-report-note{font-size:13px;line-height:1.5;color:#7A9B82;margin-top:10px}
.h-cool-cap-note{text-align:center;font-size:13px;color:#7A9B82;margin-top:8px;min-height:18px}

/* ===== THE RAMP =======================================================
   Leads with days already done, never with what is left. The ask scales
   with days completed, so it cannot rise while he is away. */
.rp-wrap{margin:16px 0 4px}
.rp-week{display:flex;gap:7px;justify-content:center;margin-bottom:10px}
.rp-dot{width:13px;height:13px;border-radius:50%;border:2px solid var(--border-bright);
  background:transparent;flex-shrink:0}
.rp-dot-on{background:var(--acid);border-color:var(--acid)}
.rp-week-label{text-align:center;font-family:var(--font-mono);font-size:11px;
  letter-spacing:1.2px;color:var(--acid);margin-bottom:14px}

.rp-today{background:var(--panel);border:1px solid var(--border-bright);border-radius:14px;
  padding:16px;text-align:center}
.rp-today-met{border-color:var(--acid);background:rgba(163,230,53,.10)}
.rp-today-label{font-family:var(--font-mono);font-size:10px;letter-spacing:1.8px;
  color:#7A9B82;margin-bottom:8px}
.rp-today-title{font-family:var(--font-display);font-size:23px;font-weight:700;
  color:var(--ink);line-height:1.15}
.rp-today-met .rp-today-title{color:var(--acid)}
.rp-today-sub{font-size:14px;line-height:1.5;color:#7A9B82;margin-top:8px}
.rp-today-count{font-family:var(--font-mono);font-size:13px;letter-spacing:1.4px;
  color:var(--acid);margin-top:11px}

/* Shown once, to a kid who had three days banked and no idea. */
.rp-reassure{border:2px solid var(--acid);border-radius:16px;padding:18px;margin-bottom:16px;
  background:rgba(163,230,53,.09)}
.rp-reassure-title{font-family:var(--font-display);font-size:22px;font-weight:700;
  color:var(--acid);line-height:1.15;margin-bottom:10px}
.rp-reassure-body{font-size:15px;line-height:1.55;color:var(--ink);margin-bottom:10px}
.rp-reassure-btn{width:100%;background:var(--acid);color:var(--void);border:none;
  border-radius:12px;padding:13px;font-family:var(--font-display);font-size:15px;
  font-weight:700;letter-spacing:1px;cursor:pointer;min-height:46px;margin-top:4px}

/* ===== TODAY, SIMPLIFIED ==============================================
   Two taps visible: do the thing, or open More. Everything else is
   collapsed and re-collapses on every render, so the screen he lands on
   is identical every time. */
.t-do{width:100%;margin-top:18px;background:var(--acid);color:var(--void);border:none;
  border-radius:16px;padding:20px;font-family:var(--font-display);font-size:19px;
  font-weight:700;letter-spacing:1.5px;cursor:pointer;min-height:64px}
.t-do:active{transform:scale(.985)}
.t-more-btn{display:block;width:100%;margin-top:14px;background:none;border:none;
  color:#7A9B82;font-family:var(--font-mono);font-size:12px;letter-spacing:1.6px;
  padding:14px;cursor:pointer;min-height:44px}
.t-more{margin-top:4px}
.t-more .t-card{margin-bottom:12px}
@media (prefers-reduced-motion: reduce){ .t-do:active{transform:none} }

/* ===== "WHAT DO I HAVE TO DO?" =========================================
   His own question, answered on a screen he can re-read as often as he
   likes without asking a person. Sits above the action, quiet. */
.t-ask-what{display:block;width:100%;margin-top:16px;background:none;
  border:1px solid var(--border-bright);color:var(--acid);border-radius:14px;
  padding:15px;font-family:var(--font-body);font-size:16px;cursor:pointer;min-height:52px}
.t-ask-what:active{background:rgba(163,230,53,.08)}

.or-title{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--ink);
  letter-spacing:.5px;line-height:1.1;margin:8px 0 18px}
.or-letter{background:var(--panel);border:1px solid var(--border-bright);border-radius:16px;
  padding:20px 18px}
.or-p{font-size:16px;line-height:1.6;color:var(--ink);margin:0 0 15px}
.or-p-quiet{color:#7A9B82;font-size:15px}

.or-job{border:2px solid var(--acid);border-radius:14px;padding:18px;margin:18px 0;
  background:rgba(163,230,53,.09);text-align:center}
.or-job-alt{border-style:dashed}
.or-job-label{font-family:var(--font-mono);font-size:10px;letter-spacing:2.2px;
  color:#7A9B82;margin-bottom:12px}
.or-job-line{font-family:var(--font-display);font-size:22px;font-weight:700;
  color:var(--acid);line-height:1.3}
.or-job-sub{font-size:14px;line-height:1.5;color:var(--ink);margin-top:10px}

.or-sign{display:flex;align-items:center;gap:11px;margin-top:22px;padding-top:16px;
  border-top:1px solid var(--border)}
.or-sign-face{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0}
.or-sign-name{font-family:var(--font-mono);font-size:11px;letter-spacing:1.6px;color:var(--acid)}
.or-sign-title{font-family:var(--font-mono);font-size:10px;letter-spacing:1.2px;color:#7A9B82;margin-top:3px}

.or-file-btn{width:100%;margin-top:20px;background:none;border:1px dashed #B79BD1;
  color:#B79BD1;border-radius:14px;padding:16px;font-family:var(--font-mono);
  font-size:12px;letter-spacing:1.2px;cursor:pointer;min-height:52px}

/* ===== DR. WHISKERS' PERSONNEL FILE ===================================
   Chance created this character. This is his creation made canon and
   credited to him by name. Nothing here is a task. */
.dw-card{background:var(--panel);border:1px solid #B79BD1;border-radius:16px;padding:18px;
  margin-bottom:14px}
.dw-head{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.dw-face{font-size:42px;line-height:1}
.dw-name{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--ink)}
.dw-role{font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;color:#B79BD1;margin-top:4px}
.dw-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-top:1px solid var(--border);font-family:var(--font-mono);font-size:12px;color:#7A9B82}
.dw-row span:last-child{color:var(--ink);text-align:right}
.dw-ok{color:var(--acid) !important}
.dw-bad{color:#B79BD1 !important}
.dw-credit{color:var(--acid) !important;font-weight:700;letter-spacing:1.5px}
.dw-row-wide{border-top:1px solid var(--acid);margin-top:4px;padding-top:12px}

.dw-memo{border:1px dashed #B79BD1;border-radius:12px;padding:15px;margin-bottom:14px;
  background:rgba(183,155,209,.07)}
.dw-memo-label{font-family:var(--font-mono);font-size:10px;letter-spacing:1.4px;
  color:#B79BD1;margin-bottom:9px}
.dw-memo-text{font-family:var(--font-mono);font-size:15px;line-height:1.6;color:var(--ink)}

.dw-note{background:var(--panel);border:1px solid var(--border-bright);border-radius:14px;
  padding:17px;margin-bottom:14px}
.dw-note-quiet{border-color:var(--border)}
.dw-note-label{font-family:var(--font-mono);font-size:10px;letter-spacing:1.8px;
  color:var(--acid);margin-bottom:11px}
.dw-note-body{font-size:15px;line-height:1.6;color:var(--ink);margin-bottom:11px}
.dw-note-body:last-child{margin-bottom:0}
.dw-note-body strong{color:var(--acid)}
.dw-note-foot{font-family:var(--font-mono);font-size:12px;letter-spacing:.6px;
  color:var(--acid);margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}

/* ===== THE WEEKLY CLIMB ===============================================
   Two dials, not one. The daily floor never rises; this rises every week.
   Unfinished items read "this week", never "you have not". */
.rp-climb{margin-top:14px;background:var(--panel);border:1px solid var(--border-bright);
  border-radius:14px;padding:15px}
.rp-climb-label{font-family:var(--font-mono);font-size:10px;letter-spacing:2px;
  color:var(--acid);margin-bottom:12px}
.rp-climb-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;
  border-top:1px solid var(--border)}
.rp-climb-row:first-of-type{border-top:none;padding-top:0}
.rp-climb-tick{font-size:14px;line-height:1.35;color:#7A9B82;flex-shrink:0}
.rp-climb-done .rp-climb-tick{color:var(--acid)}
.rp-climb-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.rp-climb-title{font-size:15px;line-height:1.4;color:var(--ink)}
.rp-climb-done .rp-climb-title{color:var(--acid)}
.rp-climb-detail{font-size:13px;line-height:1.45;color:#7A9B82}
.rp-climb-foot{font-size:13px;line-height:1.5;color:#7A9B82;margin-top:12px;
  padding-top:11px;border-top:1px solid var(--border)}
.rp-next{margin-top:11px;text-align:center;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.8px;color:#7A9B82}
.rp-next strong{color:var(--acid);font-weight:700}

/* ===== SHOW ME HOW ====================================================
   The walkthrough is the product. This sat behind "More" as one link
   among seven; it now sits above logging, because he should be shown
   how before he is asked to do. */
.t-show{width:100%;margin-top:18px;display:flex;flex-direction:column;gap:5px;
  align-items:center;background:none;border:2px solid var(--acid);color:var(--acid);
  border-radius:16px;padding:18px;cursor:pointer;min-height:64px}
.t-show:active{background:rgba(163,230,53,.08)}
.t-show-main{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:1.5px}
.t-show-sub{font-family:var(--font-body);font-size:13px;color:#7A9B82;letter-spacing:0;text-align:center}

/* ===== WEEK ONE ========================================================
   He counted the days and waited. This is the moment he waited for -
   not a menu item quietly appearing. */
.w1-term{font-family:var(--font-mono);font-size:11px;letter-spacing:1.2px;color:var(--acid);
  border:1px solid var(--acid);border-radius:10px;padding:11px 13px;margin-bottom:18px;
  background:rgba(163,230,53,.06)}
.w1-title{font-family:var(--font-display);font-size:42px;font-weight:700;color:var(--acid);
  letter-spacing:1px;line-height:1;margin:0 0 20px}
.w1-card{background:var(--panel);border:1px solid var(--border-bright);border-radius:16px;
  padding:18px;margin-bottom:16px}
.w1-p{font-size:16px;line-height:1.6;color:var(--ink);margin:0 0 13px}
.w1-p:last-child{margin-bottom:0}
.w1-quiet{color:#7A9B82;font-size:15px}

.w1-unlock{border:2px solid var(--acid);border-radius:16px;padding:18px;margin-bottom:16px;
  background:rgba(163,230,53,.09)}
.w1-unlock-label{font-family:var(--font-mono);font-size:10px;letter-spacing:2.2px;
  color:#7A9B82;margin-bottom:10px}
.w1-unlock-line{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--acid);
  line-height:1.15;margin-bottom:9px}
.w1-unlock-sub{font-size:15px;line-height:1.55;color:var(--ink)}

.w1-mult{border:2px dashed var(--acid);border-radius:16px;padding:18px;margin-bottom:16px;
  background:rgba(163,230,53,.05)}
.w1-mult-label{font-family:var(--font-mono);font-size:10px;letter-spacing:2.2px;
  color:#7A9B82;margin-bottom:10px}
.w1-mult-title{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--acid);
  line-height:1.12;margin-bottom:14px}
.w1-rule{background:rgba(163,230,53,.12);border-radius:12px;padding:15px;margin:14px 0;
  font-size:16px;line-height:1.55;color:var(--ink);text-align:center}
.w1-rule strong{color:var(--acid)}
.w1-list{margin:14px 0}
.w1-list-row{display:flex;align-items:center;gap:11px;padding:9px 0;
  border-top:1px solid var(--border);font-size:15px;color:var(--ink)}
.w1-list-row:first-child{border-top:none}
.w1-bullet{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--acid);
  flex-shrink:0;min-width:26px}

.w1-ledger{background:var(--panel);border:1px solid var(--border-bright);border-radius:14px;
  padding:16px;margin-bottom:18px}
.w1-ledger-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;
  border-top:1px solid var(--border);font-size:15px;color:var(--ink)}
.w1-ledger-row:first-child{border-top:none}
.w1-plus{color:var(--acid);font-weight:700}
.w1-ledger-total{border-top:2px solid var(--acid);margin-top:4px;padding-top:13px;
  font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--acid)}

.w1-cta{width:100%}
.w1-secondary{width:100%;background:none;border:1px solid var(--border);color:#7A9B82;
  border-radius:12px;padding:13px;font-family:var(--font-mono);font-size:12px;
  letter-spacing:1px;cursor:pointer;margin-top:10px;min-height:46px}

.ct-bonus{font-family:var(--font-mono);font-size:12px;color:#7A9B82;margin-bottom:10px}
.ct-bonus-plus{color:var(--acid);font-weight:700}

/* ===== TODAY'S RUN ====================================================
   ADHD / spectrum friendly: one path, numbered, lit vs unlit, always
   resumable. Completed steps glow; unfinished ones are simply not lit
   yet - never marked missed. */
.t-run{width:100%;margin-top:18px;display:flex;flex-direction:column;gap:5px;align-items:center;
  background:var(--acid);color:var(--void);border:none;border-radius:18px;padding:20px;
  cursor:pointer;min-height:72px;box-shadow:0 0 24px rgba(163,230,53,.28)}
.t-run:active{transform:scale(.985)}
.t-run-main{font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:1.5px}
.t-run-sub{font-family:var(--font-body);font-size:13px;opacity:.78;text-align:center}

.fl-snap{background:var(--panel);border:1px solid var(--border-bright);border-radius:16px;
  padding:16px;margin-bottom:18px}
.fl-snap-name{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--ink);
  margin-bottom:14px}
.fl-snap-row{display:flex;gap:9px}
.fl-snap-box{flex:1;text-align:center;border:1px solid var(--border);border-radius:12px;padding:12px 6px}
.fl-snap-now{border-color:var(--acid);background:rgba(163,230,53,.10)}
.fl-snap-v{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--acid);line-height:1}
.fl-snap-l{font-family:var(--font-mono);font-size:10px;letter-spacing:.9px;color:#7A9B82;
  margin-top:7px;line-height:1.35}

.fl-run{display:flex;flex-direction:column;gap:10px}
.fl-step{display:flex;gap:13px;align-items:flex-start;background:var(--panel);
  border:1px solid var(--border);border-radius:15px;padding:15px;transition:all .35s ease}
.fl-num{flex-shrink:0;width:34px;height:34px;border-radius:50%;border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-size:16px;font-weight:700;color:#7A9B82}
.fl-mid{flex:1;min-width:0}
.fl-title{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--ink);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fl-sub{font-size:14px;line-height:1.5;color:#7A9B82;margin-top:5px}
.fl-extra{font-family:var(--font-mono);font-size:9px;letter-spacing:1.2px;color:#B79BD1;
  border:1px solid #B79BD1;border-radius:4px;padding:2px 6px}

/* lit up */
.fl-done{border-color:var(--acid);background:rgba(163,230,53,.10);
  box-shadow:0 0 16px rgba(163,230,53,.18)}
.fl-done .fl-num{border-color:var(--acid);background:var(--acid);color:var(--void)}
.fl-done .fl-title{color:var(--acid)}
/* the one you are on */
.fl-here{border-color:var(--acid);box-shadow:0 0 20px rgba(163,230,53,.22)}
.fl-here .fl-num{border-color:var(--acid);color:var(--acid)}

.fl-go{margin-top:12px;background:var(--acid);color:var(--void);border:none;border-radius:11px;
  padding:13px 20px;font-family:var(--font-display);font-size:14px;font-weight:700;
  letter-spacing:1.2px;cursor:pointer;min-height:46px;width:100%}
.fl-go:active{transform:scale(.97)}

.fl-done-card{margin-top:18px;border:2px solid var(--acid);border-radius:16px;padding:20px;
  background:rgba(163,230,53,.10);text-align:center}
.fl-done-title{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--acid);
  margin-bottom:10px}
.fl-done-sub{font-size:15px;line-height:1.55;color:var(--ink)}
.fl-toomuch{display:block;width:100%;margin-top:16px;background:none;border:1px solid var(--border);
  color:#7A9B82;border-radius:12px;padding:14px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:1px;cursor:pointer;min-height:46px}

#flowNote{position:fixed;inset:0;z-index:240;background:rgba(0,0,0,.72);display:flex;
  align-items:center;justify-content:center;padding:20px}
.fl-note-card{background:var(--panel);border:2px solid var(--acid);border-radius:18px;
  padding:22px;max-width:420px;width:100%}
.fl-note-who{font-family:var(--font-mono);font-size:10px;letter-spacing:1.8px;color:var(--acid);
  margin-bottom:12px}
.fl-note-text{font-size:18px;line-height:1.6;color:var(--ink);margin-bottom:20px}
.fl-note-btn{width:100%;background:var(--acid);color:var(--void);border:none;border-radius:12px;
  padding:15px;font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:1.2px;
  cursor:pointer;min-height:50px}

@media (prefers-reduced-motion: reduce){
  .fl-step{transition:none}
  .t-run,.fl-done,.fl-here{box-shadow:none}
  .t-run:active,.fl-go:active{transform:none}
}

/* ===== YOUR DAY =======================================================
   Two inputs, everything else derived. His routine, on his device, under
   his account - not Mama's and not Nick's. Sleep numbers are AASM/AAP
   (9-12h for ages 6-12); screens off 60 min before bed is the same
   guidance. One rule set with range feedback - no per-account copy. */
.dp-title{font-family:var(--font-display);font-size:29px;font-weight:700;color:var(--ink);
  letter-spacing:.5px;margin:6px 0 14px}
.dp-lede{font-size:16px;line-height:1.55;color:var(--ink);margin:0 0 13px}
.dp-lede strong{color:var(--acid)}
.dp-ask{background:var(--panel);border:1px solid var(--border-bright);border-radius:16px;
  padding:18px;margin-top:8px}
.dp-label{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:1.4px;
  color:#7A9B82;margin:14px 0 8px}
.dp-label:first-child{margin-top:0}
.dp-input{width:100%;background:var(--void);border:1px solid var(--border-bright);
  border-radius:12px;color:var(--ink);font-size:20px;font-family:var(--font-mono);
  padding:14px;margin-bottom:6px;min-height:52px}

.dp-sleep{border-radius:16px;padding:17px;margin-bottom:18px;border:2px solid var(--acid);
  background:rgba(163,230,53,.10)}
.dp-sleep.dp-low,.dp-sleep.dp-high{border-color:#B79BD1;background:rgba(183,155,209,.08)}
.dp-sleep-h{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--acid);
  margin-bottom:9px}
.dp-low .dp-sleep-h,.dp-high .dp-sleep-h{color:#B79BD1}
.dp-sleep-line{font-size:15px;line-height:1.55;color:var(--ink)}

.dp-plan{display:flex;flex-direction:column;gap:2px}
.dp-row{display:flex;gap:14px;align-items:flex-start;padding:13px 0;
  border-top:1px solid var(--border)}
.dp-row:first-child{border-top:none}
.dp-past{opacity:.45}
.dp-time{flex-shrink:0;width:74px;font-family:var(--font-mono);font-size:13px;
  letter-spacing:.5px;color:var(--acid);padding-top:2px}
.dp-what{flex:1;min-width:0}
.dp-what-t{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--ink)}
.dp-what-b{font-size:14px;line-height:1.5;color:#7A9B82;margin-top:4px}

.dp-foot{font-size:14px;line-height:1.55;color:#7A9B82;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--border)}
.dp-redo{width:100%;margin-top:16px;background:none;border:1px solid var(--border);
  color:#7A9B82;border-radius:12px;padding:14px;font-family:var(--font-mono);font-size:12px;
  letter-spacing:1px;cursor:pointer;min-height:46px}

/* ===== FIELD REPORT ===================================================
   Not a book report and never called one. He is a Product Tester;
   testers file reports. Voice-to-text friendly: big fields, short
   questions, nothing marked. */
.wt-title{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--ink);
  letter-spacing:.5px;line-height:1.15;margin:6px 0 14px}
.wt-lede{font-size:16px;line-height:1.55;color:var(--ink);margin:0 0 16px}
.wt-pick{border:2px solid var(--acid);border-radius:16px;padding:17px;
  background:rgba(163,230,53,.09);margin-bottom:14px}
.wt-pick-label{font-family:var(--font-mono);font-size:10px;letter-spacing:2px;
  color:#7A9B82;margin-bottom:10px}
.wt-show{font-family:var(--font-mono);font-size:12px;letter-spacing:1.4px;color:var(--acid)}
.wt-ep{font-family:var(--font-display);font-size:23px;font-weight:700;color:var(--ink);
  line-height:1.2;margin:5px 0 9px}
.wt-why{font-size:14px;line-height:1.5;color:#7A9B82}
.wt-own{font-size:15px;line-height:1.55;color:var(--ink);background:var(--panel);
  border:1px dashed var(--border-bright);border-radius:14px;padding:15px;margin-bottom:18px}
.wt-own strong{color:var(--acid)}

.wt-form{background:var(--panel);border:1px solid var(--border-bright);border-radius:16px;padding:17px}
.wt-label{display:block;font-size:15px;line-height:1.45;color:var(--ink);margin:16px 0 8px}
.wt-label:first-child{margin-top:0}
.wt-input,.wt-area{width:100%;background:var(--void);border:1px solid var(--border-bright);
  border-radius:11px;color:var(--ink);font-size:16px;font-family:var(--font-body);
  padding:13px;margin-bottom:4px;min-height:48px;resize:vertical}
.wt-area{min-height:64px}
.wt-note{font-size:13px;line-height:1.5;color:#7A9B82;margin-top:12px}
.wt-count{text-align:center;font-family:var(--font-mono);font-size:11px;letter-spacing:1.2px;
  color:var(--acid);margin-top:16px}

/* ===== CUES ===========================================================
   The research gap: habits need a stable trigger at the point of
   performance. Everything else in this app waits for him to REMEMBER
   to open it - the one executive function it should be compensating
   for. Cues are invitations at his own times, three a day maximum,
   and they never mention anything undone. */
.cue-card{background:var(--panel);border:1px solid var(--border-bright);border-radius:14px;
  padding:16px;margin-top:20px}
.cue-on{border-color:var(--acid);background:rgba(163,230,53,.09)}
.cue-label{font-family:var(--font-mono);font-size:10px;letter-spacing:2px;color:var(--acid);
  margin-bottom:10px}
.cue-body{font-size:14px;line-height:1.55;color:var(--ink)}
.cue-times{margin:14px 0 4px}
.cue-time{display:flex;gap:12px;align-items:baseline;padding:8px 0;
  border-top:1px solid var(--border);font-size:14px;color:#7A9B82}
.cue-time span{font-family:var(--font-mono);font-size:12px;color:var(--acid);
  flex-shrink:0;min-width:64px}
.cue-on-btn{width:100%;margin-top:14px;background:var(--acid);color:var(--void);border:none;
  border-radius:12px;padding:14px;font-family:var(--font-display);font-size:14px;font-weight:700;
  letter-spacing:1.2px;cursor:pointer;min-height:48px}
.cue-off{width:100%;margin-top:12px;background:none;border:1px solid var(--border);
  color:#7A9B82;border-radius:12px;padding:13px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:1px;cursor:pointer;min-height:46px}

/* ===== YOUR RECORD ====================================================
   What he wanted when he asked for watch sync: to SEE progress. No
   targets, no comparison, no gaps drawn as failure. This screen can
   only ever go up. */
.pg-title{font-family:var(--font-display);font-size:27px;font-weight:700;color:var(--ink);
  letter-spacing:.5px;line-height:1.15;margin:6px 0 12px}
.pg-lede{font-size:16px;line-height:1.55;color:var(--ink);margin:0 0 18px}
.pg-card{background:var(--panel);border:1px solid var(--border-bright);border-radius:16px;
  padding:17px;margin-bottom:14px}
.pg-label{font-family:var(--font-mono);font-size:10px;letter-spacing:2px;color:var(--acid);
  margin-bottom:13px}

.pg-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.pg-cell{aspect-ratio:1;border-radius:5px;border:1px solid var(--border);background:transparent}
.pg-cell.pg-on{background:rgba(163,230,53,.35);border-color:var(--acid)}
.pg-cell.pg-on.pg-mid{background:rgba(163,230,53,.62)}
.pg-cell.pg-on.pg-big{background:var(--acid);box-shadow:0 0 8px rgba(163,230,53,.45)}
.pg-grid-note{font-size:13px;line-height:1.5;color:#7A9B82;margin-top:12px}

.pg-nums{display:flex;gap:9px}
.pg-num{flex:1;text-align:center;border:1px solid var(--border);border-radius:12px;
  padding:13px 6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.7px;
  color:#7A9B82;line-height:1.4}
.pg-num span{display:block;font-family:var(--font-display);font-size:24px;font-weight:700;
  color:var(--acid);letter-spacing:0;margin-bottom:6px}
.pg-num-hi{border-color:var(--acid);background:rgba(163,230,53,.10)}

.pg-row{display:flex;align-items:baseline;gap:12px;padding:9px 0;
  border-top:1px solid var(--border);font-size:15px;color:var(--ink)}
.pg-row:first-of-type{border-top:none}
.pg-row-n{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--acid);
  min-width:44px;text-align:right;flex-shrink:0}

.pg-feel-note{font-size:14px;line-height:1.55;color:#7A9B82;margin-bottom:14px}
.pg-feel{margin-bottom:11px}
.pg-feel-top{display:flex;justify-content:space-between;font-size:14px;color:var(--ink);
  margin-bottom:5px}
.pg-feel-top span:last-child{font-family:var(--font-mono);font-size:12px;color:var(--acid)}
.pg-feel-bar{height:7px;background:rgba(163,230,53,.12);border-radius:4px;overflow:hidden}
.pg-feel-fill{height:100%;background:var(--acid);border-radius:4px}

.pg-foot{font-size:14px;line-height:1.55;color:#7A9B82;margin-top:18px;padding-top:15px;
  border-top:1px solid var(--border)}
.fl-dw{border:1px dashed #6b5a7a;border-radius:12px;padding:13px;margin-bottom:16px;
  background:rgba(255,255,255,.04)}
.fl-dw-who{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:1.5px;color:#B79BD1;margin-bottom:7px}
.fl-dw-text{font-size:16px;line-height:1.5;color:var(--ink);opacity:.82;font-style:italic}

/* HOW THIS WORKS - the whole deal in plain words, framed as what things are
   worth rather than what is missing. Added because the adult could not explain
   the state of play without asking; the child had no chance. */
.ct-how{border:2px dashed var(--acid);border-radius:15px;padding:16px;margin-bottom:16px;
  background:rgba(163,230,53,.06)}
.ct-how-label{font-family:var(--font-mono);font-size:10px;letter-spacing:2px;color:#7A9B82;
  margin-bottom:12px}
.ct-how-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;border-top:1px solid var(--border);font-size:16px;color:var(--ink)}
.ct-how-line:first-of-type{border-top:none}
.ct-how-v{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--acid);
  flex-shrink:0}
.ct-how-sub{font-size:13px;line-height:1.55;color:#7A9B82;margin-top:11px}
.ct-how-math{display:flex;gap:10px;margin-top:14px}
.ct-how-math div{flex:1;text-align:center;border:1px solid var(--border);border-radius:11px;
  padding:12px 6px;font-family:var(--font-mono);font-size:11px;color:#7A9B82;line-height:1.4}
.ct-how-math span{display:block;font-family:var(--font-display);font-size:23px;font-weight:700;
  color:var(--acid);margin-bottom:5px}