/* App styles — a premium working journal, not a SaaS dashboard.
   Warm canvas, brand navy as the ink, terracotta as the single accent, and Newsreader reserved
   strictly for the coach's voice (headings, questions, eyebrows, numerals, reflective lines).
   All values from the signed-off design brief; see tokens.css. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* The voice: headings are set in Newsreader at regular weight — never bold, never tight-tracked. */
h1, h2, h3, h4 { font-family: var(--font-voice); font-weight: var(--fw-regular); line-height: 1.2; letter-spacing: normal; color: var(--ink); }
h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
a { color: var(--terracotta-text); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--terracotta); outline-offset: 2px; border-radius: 4px; }
.muted { color: var(--text-secondary); }
.small { font-size: var(--text-sm); }
.center { text-align: center; }
.hidden { display: none !important; }
/* Reflective/insight sentences — the coach speaking, not the interface. */
.voice { font-family: var(--font-voice); font-weight: var(--fw-regular); }
.voice-i { font-family: var(--font-voice); font-style: italic; }
.insight { font-family: var(--font-voice); font-size: var(--text-xl); line-height: 1.45; color: var(--ink); }
.eyebrow { font-family: var(--font-voice); font-size: var(--text-xs); font-weight: var(--fw-regular); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--terracotta-text); }
.eyebrow.quiet { color: var(--slate-text); }
/* On an ink panel the contrast relationship inverts: the darkened accent drops to 2.7:1, so
   accent text there uses apricot (10.4:1). Same warm family, legible on navy. */
.splash .hero .eyebrow, .sidebar .eyebrow, .hero-copy .eyebrow,
.splash .promise .k { color: var(--accent-on-ink); }

/* ---------- App shell ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar {
  background: var(--navy); color: var(--text-on-navy);
  padding: var(--sp-5) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-5); padding: 0 var(--sp-2); }
.sidebar .brand img { height: 26px; }
.sidebar .brand-lockup { flex-direction: column; align-items: flex-start; gap: 8px; }
.sidebar .brand-lockup img { height: 20px; }
.product-name { font-weight: var(--fw-black); font-size: 1.2rem; color: #fff; letter-spacing: var(--tracking-tight); line-height: 1.1; }
.product-byline { font-size: 11px; color: var(--slate-300); margin-top: 2px; }
.topbar-name { font-weight: var(--fw-black); color: #fff; letter-spacing: var(--tracking-tight); font-size: 1.05rem; }
.sidebar .brand .tool { font-size: var(--text-xs); color: var(--slate-300); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-top: 2px; }
.nav-group-label { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--rail-text); padding: var(--sp-4) var(--sp-3) var(--sp-1); }
/* Nav: a numbered narrative. Active is a 3px terracotta bar + brighter text — no filled pill. */
.nav-item {
  display: flex; align-items: center; gap: 14px; padding: 11px 28px;
  color: var(--rail-text); font-weight: var(--fw-medium); font-size: 14.5px;
  transition: color var(--transition); border: none; border-left: 3px solid transparent;
  background: transparent; width: 100%; text-align: left;
}
.nav-item:hover { color: var(--paper); text-decoration: none; }
.nav-item.active { border-left-color: var(--terracotta); color: var(--paper); font-weight: var(--fw-semi); }
.nav-item.quiet { font-size: 13.5px; }
.nav-item .grow { flex: 1; }
.nav-index { font-family: var(--font-voice); font-size: 13px; opacity: 0.7; width: 16px; flex: 0 0 16px; }
.nav-item .ico { width: 20px; height: 20px; flex: 0 0 20px; opacity: 0.9; }
.nav-item .tick { margin-left: auto; font-size: 13px; }
.nav-item .tick.done { color: var(--rail-text); }
.nav-item .tick.due { color: var(--accent-on-ink); }
.rail-divider { height: 1px; background: rgba(255, 255, 255, 0.12); margin: var(--sp-4) 28px; }
.sidebar .spacer { flex: 1; }
.sidebar .footer-note { font-size: var(--text-xs); color: var(--rail-text); padding: var(--sp-3); line-height: 1.4; }

.main { min-width: 0; display: flex; flex-direction: column; }
/* 66px top bar + the deliberately quiet 2px progress line beneath it. */
.topbar {
  display: flex; align-items: center; gap: var(--sp-4); height: 66px; flex: 0 0 66px;
  background: var(--canvas); border-bottom: 1px solid #D9CEBB;
  padding: 0 var(--page-pad); position: sticky; top: 0; z-index: 40;
}
.stage-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate-text); }
.topbar-file { margin-left: auto; min-height: 40px; padding: 9px 18px; font-size: 14px; }
.progress-track { height: 2px; background: var(--rule-strong); position: sticky; top: 66px; z-index: 39; }
.progress-track > i { display: block; height: 2px; width: 0; background: var(--terracotta); transition: width 0.5s ease; }
.content { padding: var(--page-pad) var(--page-pad) 120px; max-width: calc(var(--maxw) + 2 * 72px); width: 100%; margin: 0 auto; }
/* Eyebrow → heading 14px, heading → intro 14px (the brief's rhythm). */
.view-head { margin-bottom: var(--sp-6); }
.view-head .eyebrow { margin-bottom: 14px; display: block; }
.view-head h1 { margin-bottom: 14px; }
.view-head p { color: var(--text-secondary); max-width: 62ch; font-size: var(--text-lg); line-height: 1.7; }

/* ---------- Banners / callouts (the brief's alert treatment) ---------- */
.banner { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); margin-bottom: var(--sp-4); font-size: var(--text-sm); display: flex; gap: 12px; align-items: flex-start; background: var(--alert-bg); border: 1px solid var(--alert-border); color: var(--ink-soft); }
.banner.warn { border-left: 3px solid var(--terracotta); }
.banner.danger { background: #FBEDE9; border-color: #E3B6A8; border-left: 3px solid var(--danger); color: #7A3020; }
.banner.info { background: var(--paper-warm); border-color: var(--border); border-left: 3px solid var(--slate); color: var(--ink-soft); }
.banner > svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; }
/* The insight callout — the audit's "oh" moment. */
.callout { background: var(--alert-bg); border: 1px solid var(--alert-border); border-left: 3px solid var(--terracotta); border-radius: var(--r-md); padding: 26px 30px; }
.callout .s { font-family: var(--font-voice); font-size: var(--text-xl); line-height: 1.45; color: var(--ink); }
.callout p { margin-top: 12px; color: var(--ink-soft); }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 30px 34px; }
.card + .card { margin-top: var(--sp-4); }
.card h3 { margin-bottom: var(--sp-2); }
.grid { display: grid; gap: var(--sp-4); }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Buttons ---------- */
/* Two buttons only, as the brief describes: a filled primary and an outlined secondary.
   Terracotta is NOT a button colour — it's reserved for nav, eyebrows, links and over-runs. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; min-height: 44px; border-radius: var(--r-sm); border: 1.5px solid transparent;
  font-weight: var(--fw-semi); font-size: 15px; transition: background var(--transition), color var(--transition); white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary, .btn-navy { background: var(--ink); color: var(--paper); min-height: 48px; }
.btn-primary:hover, .btn-navy:hover { background: var(--navy-700); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--paper-warm); }
.btn-lg { padding: 15px 30px; font-size: var(--text-base); min-height: 52px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.voice-btn svg { width: 22px; height: 22px; }

/* ---------- Forms ---------- */
label.field { display: block; margin-bottom: var(--sp-4); }
label.field > span { display: block; font-weight: var(--fw-semi); font-size: var(--text-sm); margin-bottom: 6px; color: var(--navy); }
label.field .hint { font-weight: var(--fw-light); color: var(--text-secondary); font-size: var(--text-sm); }
input[type=text], input[type=email], input[type=number], input[type=date], input[type=time], input[type=tel], input[type=url], input[type=search], input[type=password], textarea, select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-md);
  font-family: inherit; font-size: var(--text-base); background: var(--surface); color: var(--text); transition: border var(--transition);
}
textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(251, 89, 75, 0.15); }
.input-row { display: flex; gap: var(--sp-2); }

/* ---------- Chips / pills ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--r-full); font-size: var(--text-xs); font-weight: var(--fw-medium); background: var(--canvas); border: 1px solid var(--border); color: var(--ink); }
.chip.compounds { background: var(--compounds-bg); color: var(--compounds); }
.chip.commodity { background: var(--commodity-bg); color: var(--commodity); }
.chip.comfort { background: var(--comfort-bg); color: var(--comfort); }
/* A state, not a notification badge — the alert surface rather than a filled accent. */
.chip.due { background: var(--alert-bg); border-color: var(--alert-border); color: var(--ink); }
.chip.done { background: var(--paper-warm); border-color: var(--border); color: var(--slate-text); }

/* ---------- Progress stepper ---------- */
.stepper { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0; }
.step { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border); font-size: var(--text-sm); font-weight: var(--fw-medium); }
.step .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: var(--fw-bold); background: var(--surface-sunken); color: var(--slate-text); }
.step.done .dot { background: var(--compounds); color: #fff; }
.step.active { border-color: var(--coral); box-shadow: var(--shadow-sm); }
.step.active .dot { background: var(--coral); color: #fff; }

.progressbar { height: 8px; background: var(--surface-sunken); border-radius: var(--r-full); overflow: hidden; }
.progressbar > i { display: block; height: 100%; background: var(--coral); border-radius: var(--r-full); transition: width 300ms ease; }

/* ---------- Chat (interview + check-in) ---------- */
.chat { display: flex; flex-direction: column; gap: var(--sp-4); }
.chat-log { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-2) 0; }
.msg { display: flex; gap: 12px; max-width: 90%; }
.msg .avatar { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px; display: grid; place-items: center; background: var(--navy); overflow: hidden; }
.msg .avatar img { width: 20px; }
.msg .bubble { padding: 14px 18px; border-radius: var(--r-lg); font-size: var(--text-base); line-height: 1.55; }
.msg.coach .bubble { background: var(--surface); border: 1px solid var(--border); border-top-left-radius: 4px; }
.msg.user { align-self: flex-end; flex-direction: row-reverse; }
.msg.user .avatar { background: var(--coral); }
.msg.user .bubble { background: var(--navy); color: var(--text-on-navy); border-top-right-radius: 4px; }
/* The question is the coach speaking — Newsreader 34px regular, not bold sans (brief §2). */
.chat-question { font-family: var(--font-voice); font-size: var(--text-question); font-weight: var(--fw-regular); color: var(--ink); letter-spacing: var(--tracking-tight); line-height: 1.35; }
.chat-help { color: var(--text-secondary); margin-top: var(--sp-2); }
.chat-input { position: sticky; bottom: 0; background: var(--bg); padding-top: var(--sp-3); }
.chat-input .row { display: flex; gap: var(--sp-2); align-items: flex-end; }
.chat-input textarea { flex: 1; }
.voice-btn { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; }
/* Listening is apricot, not accent — a warm glow, not an alarm (apricot is surface-only). */
.voice-btn.recording { background: var(--apricot); border-color: var(--apricot); color: var(--ink); animation: pulse 2.6s ease-in-out infinite; }
.voice-btn svg { width: 22px; height: 22px; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(240,211,174,0.6);} 50% { box-shadow: 0 0 0 10px rgba(240,211,174,0);} }
.typing { display: inline-flex; gap: 4px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--slate-300); animation: blink 1.2s infinite; }
.typing i:nth-child(2){ animation-delay: .2s;} .typing i:nth-child(3){ animation-delay: .4s;}
@keyframes blink { 0%,80%,100%{opacity:.3} 40%{opacity:1} }

/* ---------- The confrontation ---------- */
.confront { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-4); align-items: center; }
.confront .big { text-align: center; padding: var(--sp-6); border-radius: var(--r-lg); }
.confront .big .n { font-size: var(--text-4xl); font-weight: var(--fw-black); letter-spacing: var(--tracking-tight); line-height: 1; }
.confront .estimate { background: var(--surface-sunken); }
.confront .actual { background: var(--navy); color: var(--text-on-navy); }
.confront .actual .n { color: var(--white); }
.confront .vs { font-weight: var(--fw-bold); color: var(--slate-text); font-size: var(--text-lg); }
.confront .label { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-top: var(--sp-2); }

/* Bucket columns */
/* Three C's board: equal columns, 3px coloured top border, chips you select then place. */
.buckets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bucket-col { background: var(--paper); border-radius: var(--r-md); padding: 20px; min-height: 230px; border: 1px solid var(--border); border-top: 3px solid var(--ink); transition: border-color var(--transition); }
.bucket-col.commodity { border-top-color: var(--slate); }
.bucket-col.comfort { border-top-color: var(--terracotta); }
/* While a chip is selected, every column signals it's a target. */
.bucket-col.targeting { border-color: var(--terracotta); cursor: pointer; }
.bucket-col h4 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; font-family: var(--font); font-size: 14px; font-weight: var(--fw-semi); }
.bucket-blurb { font-size: var(--text-xs); color: var(--slate-text); line-height: 1.5; margin-bottom: 14px; }
.bucket-chips { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sortchip { display: inline-flex; align-items: center; gap: 8px; text-align: left; font-size: 14px; font-weight: var(--fw-medium); padding: 9px 14px; border-radius: var(--r-sm); background: var(--canvas); border: 1.5px solid var(--border-strong); color: var(--ink); min-height: 40px; }
.sortchip:hover { border-color: var(--terracotta); }
.sortchip.sel { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sortchip .h { font-size: var(--text-xs); opacity: 0.65; }

/* ---------- Lists / files ---------- */
.list { list-style: none; }
.list li { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.list li:last-child { border-bottom: none; }
.file-ico { width: 20px; height: 20px; color: var(--slate-text); flex: 0 0 20px; }
.list .grow { flex: 1; min-width: 0; }
.list .fname { font-weight: var(--fw-semi); font-size: var(--text-sm); }
.list .fmeta { font-size: var(--text-xs); color: var(--text-muted); }

/* Markdown render */
.md h1 { font-size: var(--text-2xl); margin: var(--sp-4) 0 var(--sp-2); }
.md h2 { font-size: var(--text-lg); margin: var(--sp-4) 0 var(--sp-2); color: var(--navy-600); }
.md h3 { font-size: var(--text-base); margin: var(--sp-3) 0 var(--sp-1); }
.md p { margin: var(--sp-2) 0; }
.md ul { margin: var(--sp-2) 0 var(--sp-2) var(--sp-5); }
.md li { margin: 4px 0; }
.md strong { font-weight: var(--fw-bold); }
.md code { background: var(--surface-sunken); padding: 1px 6px; border-radius: 4px; font-size: 0.9em; }
.md hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-4) 0; }

/* ---------- Toggle ---------- */
.toggle { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .track { position: absolute; inset: 0; background: var(--slate-300); border-radius: var(--r-full); transition: var(--transition); }
.toggle .track::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: var(--transition); box-shadow: var(--shadow-sm); }
.toggle input:checked + .track { background: var(--compounds); }
.toggle input:checked + .track::before { transform: translateX(20px); }
.setting-row { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.setting-row .grow { flex: 1; }
.setting-row .grow .t { font-weight: var(--fw-semi); }
.setting-row .grow .d { color: var(--text-secondary); font-size: var(--text-sm); }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,37,88,0.45); display: grid; place-items: center; padding: max(var(--sp-4), env(safe-area-inset-top)) var(--sp-4) max(var(--sp-4), env(safe-area-inset-bottom)); z-index: 100; }
.modal { background: var(--surface); border-radius: var(--r-lg); max-width: 560px; width: 100%; max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--shadow-lg); }
.modal .m-head { padding: var(--sp-5) var(--sp-5) 0; }
.modal .m-body { padding: var(--sp-4) var(--sp-5); }
.modal .m-foot { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap; position: sticky; bottom: 0; background: var(--surface); border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* ---------- Toast ---------- */
/* Confirmations are quiet and textual, per the brief — a note on paper, not a coloured pop-up.
   Success carries no colour at all; only genuine errors take a tint. */
.toasts { position: fixed; bottom: var(--sp-5); right: var(--sp-5); display: flex; flex-direction: column; gap: 8px; z-index: 400; }   /* above the tour */
.toast { background: var(--paper); color: var(--ink); border: 1px solid var(--border); border-left: 3px solid var(--slate); padding: 13px 18px; border-radius: var(--r-md); box-shadow: var(--shadow-md); font-family: var(--font-voice); font-size: 15px; max-width: 340px; animation: slidein 0.3s ease; }
.toast.success { border-left-color: var(--terracotta); }
.toast.danger { background: #FBEDE9; border-color: #E3B6A8; border-left-color: var(--danger); color: #7A3020; }
@keyframes slidein { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Usage paused (brief §11) — the free-tier limit handled with candour, not a paywall. */
.callout.paused { padding: 34px 38px; }
.callout.paused .s { font-size: var(--text-2xl); }
.paused-still { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--alert-border); }
.paused-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: none; border-bottom: 1px solid var(--alert-border); padding: 14px 0; font-family: var(--font); font-size: var(--text-base); color: var(--ink); min-height: 48px; }
.paused-row:last-child { border-bottom: none; }
.paused-row .grow { flex: 1; }
.paused-row .go { color: var(--terracotta-text); font-size: var(--text-lg); }
.paused-row:hover .go { transform: translateX(2px); }

/* Touch targets: the brief requires 44px minimum on anything interactive (48px for primary
   actions). Static chips stay compact; only interactive ones grow. */
button.chip, a.chip { min-height: 44px; padding: 10px 16px; }
.step { min-height: 44px; }
.topbar-file { min-height: 44px; }
.paused-row, .sortchip, .states button { min-height: 44px; }

/* Numerals speak in the coach's voice — a serif figure, never a bold badge. */
.voice-num { font-family: var(--font-voice); font-weight: var(--fw-regular); font-size: var(--text-xl); color: var(--terracotta-text); }
.voice-num.lg { font-size: var(--text-2xl); }
.commit-numeral { font-family: var(--font-voice); font-size: 30px; line-height: 1; color: var(--terracotta-text); flex: 0 0 auto; }

/* ---------- Interview (brief §2): one question at a time ---------- */
.q-head { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: 14px; }
.q-count { font-family: var(--font-voice); font-style: italic; font-size: 15px; color: var(--slate-text); }
/* Question progress is SLATE — distinct from the terracotta stage progress in the top bar. */
.q-progress { height: 2px; background: var(--rule-strong); margin-bottom: var(--sp-6); }
.q-progress > i { display: block; height: 2px; background: var(--slate); transition: width 0.4s ease; }
.permission { color: var(--ink-soft); max-width: 58ch; margin-top: 14px; }
.q-input { margin-top: var(--sp-5); }
.q-input textarea { min-height: 180px; font-size: 18px; line-height: 1.7; padding: 22px 24px; }

/* Type / Speak — a segmented control: two equal, mutually exclusive modes in one track.
   Voice is a first-class input, not a mic bolted onto a textarea. */
.seg { display: inline-flex; background: var(--mist); border-radius: var(--r-full); padding: 4px; margin-left: auto; }
/* Inactive uses ink-soft, not slate: `mist` is cooler than paper, and slate lands at 4.38 there.
   The unselected segment still reads quiet because it has no fill. */
.seg button { border: none; background: transparent; color: var(--ink-soft); font-family: var(--font); font-size: 14px; font-weight: var(--fw-medium); padding: 9px 20px; border-radius: var(--r-full); min-height: 44px; }
.seg button.on { background: var(--ink); color: var(--paper); }

/* Speak mode — an ink panel with the pulsing apricot dot. */
.speak-panel { background: var(--ink); border-radius: var(--r-md); padding: 48px 32px; text-align: center; }
.speak-dot { position: relative; width: 64px; height: 64px; margin: 0 auto var(--sp-5); display: grid; place-items: center; }
.speak-dot .pulse-ring { position: absolute; inset: 0; border-radius: 50%; background: var(--apricot); }
.speak-core { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--apricot); }
.speak-title { font-family: var(--font-voice); font-style: italic; font-size: var(--text-xl); color: #F4EFE6; }
.speak-sub { font-size: var(--text-sm); color: var(--rail-text); margin-top: 10px; }
.speak-heard { margin-top: var(--sp-5); color: var(--paper); font-size: 16.5px; line-height: 1.7; text-align: left; max-width: 52ch; margin-inline: auto; }
.speak-heard:empty { display: none; }

/* ---------- Check-in (brief §8): a narrow, centred column ---------- */
.narrow { max-width: 640px; margin: 0 auto; }
.narrow .view-head.center p { max-width: 52ch; }
.checkin-q { font-size: var(--text-checkin); line-height: 1.4; }
/* Three states — no streaks, no scores, and "Slipped a little" is never styled as failure. */
.states { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.states button { font-family: var(--font); font-size: 14px; font-weight: var(--fw-medium); padding: 13px 8px; min-height: 48px; border-radius: var(--r-sm); border: 1.5px solid var(--border-strong); background: transparent; color: var(--ink); }
.states button:hover { border-color: var(--terracotta); }
.states button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (max-width: 560px) { .states { grid-template-columns: 1fr; } }

/* ---------- The reconciliation (brief §Time audit) ---------- */
.rec-head { display: flex; gap: 12px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--slate-light-text); padding-bottom: 10px; }
.rec-row { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.rec-row:last-of-type { border-bottom: none; }
.rec-top { display: flex; align-items: baseline; gap: 12px; }
.rec-name { font-size: 16px; font-weight: var(--fw-medium); }
/* The honest delta — the coach's voice, never a red number. */
.rec-delta { margin-left: auto; font-family: var(--font-voice); font-style: italic; font-size: 15px; color: var(--slate-text); }
.rec-bars { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.rec-bar { height: 10px; border-radius: 2px; transition: width 0.6s ease; }
.rec-est { background: var(--estimate-bar); }
.rec-act { background: var(--ink); }
.rec-over { background: var(--terracotta); }  /* only past a 2h over-run — the whole insight */

/* ---------- The file — the signature element (brief §Signature element) ---------- */
.file { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-lg); }
.file-tilt { transform: rotate(-1.4deg); }
.file-h { background: var(--ink); color: var(--canvas); padding: 18px 32px; display: flex; align-items: center; gap: 14px; }
.file-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--apricot); flex: 0 0 16px; }
.file-name { font-family: var(--font-voice); font-size: 17px; }
.file-h .m { margin-left: auto; font-size: 12.5px; color: var(--rail-text); }
/* Ruled paper: a 34px rhythm offset to clear the name, with body copy at 1.95 so text sits ON the rules. */
.file-b {
  background: var(--paper); padding: 40px 48px;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px);
  background-size: 100% 34px; background-position: 0 56px;
}
.file-name-lg { font-family: var(--font-voice); font-size: 29px; line-height: 34px; color: var(--ink); }
.file-role { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--slate-text); line-height: 34px; }
.file-sec { font-family: var(--font-voice); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--terracotta-text); line-height: 34px; margin-top: 34px; }
.file-line { font-size: var(--text-base); line-height: var(--leading-file); color: var(--ink); }
.file-f { background: var(--paper-warm); border-top: 1px solid var(--rule); padding: 18px 32px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.file-f .m { margin-left: auto; font-size: var(--text-xs); color: var(--slate-text); }
@media (max-width: 640px) {
  .file-b { padding: 28px 24px; }
  .file-h, .file-f { padding: 16px 20px; }
  .file-tilt { transform: none; }
}

/* ---------- Motion (brief §Motion) ---------- */
@keyframes fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes softpulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.5); opacity: 0.08; } }
.content > * { animation: fadeup 0.45s ease both; }
.pulse-ring { animation: softpulse 2.6s ease-in-out infinite; background: var(--apricot); border-radius: 50%; }

/* Every animation is disabled under reduced-motion — non-negotiable in the brief. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Auth / splash ---------- */
/* Canvas column left (logo · hero · form · footer line), ink panel right holding the file prop. */
.splash { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 0.95fr; }
.splash .form-side { background: var(--canvas); padding: 64px 6vw; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-6); }
.splash .logo-dark { height: 30px; align-self: flex-start; }
.splash .product-name-dark { font-family: var(--font-voice); font-size: 22px; color: var(--ink); }
.signup-mid { max-width: 460px; width: 100%; }
.signup-hero { font-size: var(--text-4xl); line-height: 1.08; letter-spacing: var(--tracking-tight); margin: 14px 0; }
.signup-intro { font-size: var(--text-lg); line-height: 1.7; color: var(--ink-soft); max-width: 46ch; }
.signup-foot { font-size: var(--text-xs); color: var(--slate-text); }
/* The ink panel — faint horizontal rules behind a tilted file. */
.splash .hero {
  background-color: var(--ink); color: var(--text-on-navy); padding: var(--sp-8) var(--sp-6);
  display: grid; place-items: center;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 100% 40px;
}
.hero-inner { max-width: 460px; width: 100%; }
.hero-copy { margin-top: var(--sp-7); }
.hero-copy h2 { color: var(--paper); font-size: var(--text-2xl); margin-top: 8px; }
.splash .promise { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: 12px; }
.splash .promise div { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); color: var(--rail-text); line-height: 1.6; }
.splash .promise .k { color: var(--terracotta-text); }
.splash .promise strong { color: var(--paper); font-weight: var(--fw-semi); }
.dev-link { margin-top: var(--sp-4); padding: var(--sp-3); background: var(--alert-bg); border: 1px dashed var(--alert-border); border-radius: var(--r-sm); font-size: var(--text-xs); word-break: break-all; }

/* ---------- Dashboard ----------
   De-SaaS: the gradient hero and the radial glow are gone. This is a quiet paper card with an
   eyebrow and the coach's voice — the brief bans dashboard chrome, streaks and scores. */
.hero-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 30px 34px; }
.hero-card h2 { color: var(--ink); font-size: var(--text-2xl); margin: 12px 0 14px; max-width: 26ch; line-height: 1.25; }
.hero-card p { color: var(--ink-soft); max-width: 58ch; margin-bottom: var(--sp-5); }
/* Numerals are the coach's voice, never a scoreboard: regular weight, serif, no tracking. */
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat .v { font-family: var(--font-voice); font-size: var(--text-2xl); font-weight: var(--fw-regular); color: var(--ink); letter-spacing: normal; }
.stat .l { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--slate-text); }
.commit-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.commit-row:last-child { border: none; }
.commit-row .n { font-family: var(--font-voice); font-size: var(--text-lg); color: var(--terracotta-text); width: 26px; flex: 0 0 26px; }

/* ---------- Mobile nav ---------- */
.mobile-nav { display: none; }
.hamburger { display: none; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; position: fixed; z-index: 90; width: min(300px, 84vw); box-shadow: var(--shadow-lg); }
  .sidebar.open { display: flex; }
  /* Same canvas top bar on mobile — the hamburger simply joins it. */
  .topbar { gap: 12px; padding: 0 var(--sp-4); }
  .topbar img { height: 22px; }
  .hamburger { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: var(--r-sm); background: transparent; border: 1.5px solid var(--border-strong); }
  .hamburger span, .hamburger span::before, .hamburger span::after { content: ""; display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
  .hamburger span::before { position: absolute; top: -6px; } .hamburger span::after { position: absolute; top: 6px; }
  .scrim { position: fixed; inset: 0; background: rgba(0,37,88,0.4); z-index: 80; }
  .content { padding: var(--sp-4) var(--sp-4) calc(var(--sp-7) + env(safe-area-inset-bottom)); }
  .sidebar { padding-bottom: env(safe-area-inset-bottom); }
  .splash { grid-template-columns: 1fr; }
  .splash .hero { padding: var(--sp-6); }
  .splash .hero h1 { font-size: var(--text-3xl); }
  .splash .form-side { padding: var(--sp-6); }
  .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
  .confront { grid-template-columns: 1fr; }
  .confront .vs { text-align: center; }
  .buckets { grid-template-columns: 1fr; }
  h1 { font-size: var(--text-2xl); }
}
@media (max-width: 520px) {
  .chat-question { font-size: var(--text-xl); }
  .hero-card h2 { font-size: var(--text-2xl); }
}

/* ---------- Day Page (Feature 2) — paper day-planner ---------- */
.daygrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.daycard { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); box-shadow: var(--shadow-sm); transition: border var(--transition), transform var(--transition); min-height: 92px; }
.daycard:hover { border-color: var(--coral); transform: translateY(-1px); }
.daycard-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.daycard-head svg { width: 15px; height: 15px; color: var(--slate-text); }
.daycard-label { font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--slate-text); }
.daycard-body { font-size: var(--text-sm); color: var(--navy); line-height: 1.5; }
.daycard-empty { color: var(--text-muted); font-style: italic; }
.daycard.sealed { background: repeating-linear-gradient(45deg, #f7f4ee, #f7f4ee 10px, #f3efe6 10px, #f3efe6 20px); border-style: dashed; border-color: var(--border-strong); }
.daycard.sealed .daycard-label { color: var(--terracotta-text); }
@media (max-width: 640px) { .daygrid { grid-template-columns: 1fr; } }

/* ---------- The Letter (Feature 1) — correspondence ---------- */
.letter { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: clamp(1.5rem, 5vw, 3.5rem); max-width: 640px; margin: 0 auto; }
.letter-date { font-size: var(--text-sm); color: var(--slate-text); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: var(--sp-5); }
.letter-body { font-weight: var(--fw-light); font-size: 1.15rem; line-height: 1.85; color: var(--ink); }
.letter-body p { margin: 0 0 1.2rem; }

/* ---------- Codes table (admin) ---------- */
.codes-table { min-width: 560px; }
.codes-row { display: grid; grid-template-columns: 1.4fr 1fr 0.7fr 0.8fr 0.9fr 0.6fr 1fr; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.codes-row.head { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--slate-text); font-weight: var(--fw-bold); }
.codes-row code { background: var(--surface-sunken); padding: 2px 7px; border-radius: 6px; font-size: 12px; }
.codes-row svg { width: 15px; height: 15px; }



/* ---------- Your books (the quarter book + monthly inserts) ---------- */
.book-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-top: var(--sp-3); }
.book-card { min-height: 78px; }
.book-card.paper-only { background: transparent; box-shadow: none; border-style: dashed; cursor: default; }
.book-card.paper-only:hover { transform: none; border-color: var(--border); }
.book-card.paper-only .daycard-body { color: var(--slate-text); font-style: italic; }
/* The ninety days — the printed page's 3 × 30 grid, ticked from closed days. */
.ninety { display: grid; gap: var(--sp-3); margin-top: var(--sp-2); }
.ninety-label { display: flex; justify-content: space-between; font-size: var(--text-sm); margin-bottom: 6px; }
.ninety-boxes { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; max-width: 360px; }
.ninety-boxes .box { aspect-ratio: 1; max-width: 100%; border: 1.5px solid var(--border-strong); border-radius: 4px; }
.ninety-boxes .box.on { background: var(--ink); border-color: var(--ink); }
.ninety-boxes .box.today { border-color: var(--terracotta); border-width: 2px; }
/* A page, filed: paper-coloured, one section per printed block. */
.page-paper { background: var(--paper); }
.page-block { padding: var(--sp-4) 0; border-bottom: 1px solid var(--rule); }
.page-block:last-child { border-bottom: none; }
.page-block-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.page-block-head h3 { margin: 0; font-size: var(--text-lg); }
.page-block.sealed { border: 1.5px solid var(--ink); border-radius: var(--r-md); padding: var(--sp-4); margin: var(--sp-3) 0; background: var(--surface); }
.page-block textarea, .page-block input[type="text"], .page-block input[type="date"], .page-block input[type="number"], .page-block select { width: 100%; }
.block-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.block-row input[type="text"], .block-row select { width: auto; min-width: 0; }
.block-row.grid-head { font-size: var(--text-xs); color: var(--slate-text); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.block-num { flex: 0 0 26px; font-size: var(--text-sm); color: var(--terracotta-text); font-weight: var(--fw-semi); text-align: right; }
.block-num.c { flex-basis: 30px; text-align: left; }
.scroll-y { max-height: 55vh; overflow-y: auto; }
/* Tick-box choices (the monthly review's "this month is —"). */
.choice-list { display: grid; gap: 8px; }
.choice { display: flex; align-items: center; gap: 12px; text-align: left; background: transparent; border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); padding: 10px 14px; min-height: 44px; font: inherit; color: var(--ink); }
.choice .tick { width: 18px; height: 18px; border: 1.5px solid var(--ink-soft); border-radius: 4px; flex: 0 0 18px; display: grid; place-items: center; }
.choice.on { border-color: var(--ink); }
.choice.on .tick { background: var(--ink); }
.choice.on .tick::after { content: '✓'; color: var(--paper); font-size: 12px; line-height: 1; }
/* ▲ — ○ tables (hours, balances). */
.ccc-table { display: grid; gap: 6px; overflow-x: auto; }
.ccc-row { display: grid; gap: 8px; align-items: center; }   /* column template set per table in blocks.js */
.ccc-row.head { font-size: var(--text-xs); color: var(--slate-text); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.ccc-cell { display: flex; align-items: center; gap: 4px; }
.ccc-cell input { width: 100%; min-width: 0; }
.ccc-cell .unit { font-size: var(--text-xs); color: var(--slate-text); }
.ccc-table.readonly .ccc-cell { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .ccc-row { gap: 6px; }
  .ccc-row > .chip { font-size: 12px; padding: 4px 9px; white-space: nowrap; }
  .ccc-cell input { padding-inline: 8px; }
}
.ccc-row > .chip { justify-self: start; }
/* The Day Page as the printed spread — two pages side by side. */
.daygrid > .spread-page { display: grid; gap: var(--sp-3); align-content: start; }
.block-row.wrap { flex-wrap: wrap; }
.block-row .grow { flex: 1 1 200px; min-width: 0; width: auto; }

/* ---------- Guided tour (first run) ---------- */
/* Four shades around a cut-out: they dim AND block clicks, so the highlighted feature stays bright
   and nothing outside it can be clicked by accident. The ring outlines the cut-out. */
.gt-layer { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.gt-shade, .gt-ring, .gt-hole-block { position: fixed; left: 0; top: 0; will-change: transform, width, height; }
.gt-shade { background: rgba(0, 37, 88, 0.62); pointer-events: auto; }
.gt-hole-block { pointer-events: auto; background: transparent; }
.gt-ring { border-radius: 12px; box-shadow: 0 0 0 2px var(--apricot), 0 0 0 6px rgba(240, 211, 174, 0.35); pointer-events: none; }
.gt-centered .gt-ring { display: none; }
.gt-shade, .gt-ring, .gt-hole-block { transition: transform 0.28s ease, width 0.28s ease, height 0.28s ease; }
/* The popover moves but never animates its size: placement measures it, and a mid-animation width
   would put it in the wrong place. */
.gt-pop { transition: top 0.28s ease, left 0.28s ease; }
.gt-pop { box-sizing: border-box; position: fixed; pointer-events: auto; width: min(380px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 22px 24px 20px; outline: none; }
.gt-pop h2 { font-family: var(--font-voice); font-weight: var(--fw-regular); font-size: var(--text-2xl); line-height: 1.2; margin: 6px 0 8px; color: var(--ink); }
.gt-pop p { color: var(--text-secondary); font-size: var(--text-base); line-height: 1.6; margin: 0; }
.gt-top { display: flex; justify-content: space-between; align-items: center; }
.gt-count { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--terracotta-text); }
.gt-skip { background: none; border: 0; padding: 8px 0 8px 12px; min-height: 44px; font: inherit; font-size: var(--text-sm); color: var(--slate-text); text-decoration: underline; cursor: pointer; }
.gt-progress { height: 3px; background: var(--mist); border-radius: 3px; margin: 16px 0; overflow: hidden; }
.gt-progress span { display: block; height: 100%; background: var(--terracotta); }
.gt-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.gt-end { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: 1 1 auto; }
.gt-at-center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 32px)); }
/* The arrow points from the popover to the highlighted feature. */
.gt-pop::before { content: ''; position: absolute; width: 14px; height: 14px; background: var(--surface); transform: rotate(45deg); display: none; }
.gt-below::before { display: block; top: -7px; left: calc(var(--arrow-x, 50%) - 7px); }
.gt-above::before { display: block; bottom: -7px; left: calc(var(--arrow-x, 50%) - 7px); }
.gt-right::before { display: block; left: -7px; top: calc(var(--arrow-y, 50%) - 7px); }
.gt-left::before  { display: block; right: -7px; top: calc(var(--arrow-y, 50%) - 7px); }
/* Phones: a sheet at the bottom (or the top, if the feature is low on screen). */
.gt-sheet-bottom, .gt-sheet-top { left: 16px !important; right: 16px; width: auto; max-width: 560px; margin: 0 auto; }
.gt-sheet-bottom { top: auto !important; bottom: calc(16px + env(safe-area-inset-bottom)); }
.gt-sheet-top { top: calc(16px + env(safe-area-inset-top)) !important; }
.gt-compact { padding: 14px 18px 14px; }
.gt-compact h2 { font-size: var(--text-xl); margin: 2px 0 4px; }
.gt-compact p { font-size: var(--text-sm); line-height: 1.5; }
.gt-compact .gt-progress { display: none; }
.gt-compact .gt-actions { margin-top: 10px; }
.gt-instant .gt-shade, .gt-instant .gt-ring, .gt-instant .gt-hole-block, .gt-instant .gt-pop { transition: none; }
@media (prefers-reduced-motion: reduce) { .gt-shade, .gt-ring, .gt-hole-block, .gt-pop { transition: none; } }

/* ---------- How-to guide ---------- */
.guide-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.guide-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.guide-toc { position: sticky; top: 96px; font-size: var(--text-sm); }
.guide-toc ol { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 2px; }
.guide-toc a { display: flex; align-items: center; padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink-soft); text-decoration: none; min-height: 44px; }
.guide-toc a:hover, .guide-toc a:focus-visible { background: var(--paper-warm); color: var(--ink); }
.guide-toc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.guide-toc summary::-webkit-details-marker { display: none; }
.guide-toc summary::after { content: '+'; font-size: 18px; color: var(--slate-text); }
.guide-toc details[open] summary::after { content: '–'; }
.guide-body h2[id], .guide-body h3[id] { scroll-margin-top: 84px; }
.guide-body { max-width: 68ch; font-size: var(--text-base); line-height: 1.75; }
.guide-body > p:first-child { font-family: var(--font-voice); font-size: var(--text-xl); line-height: 1.55; color: var(--ink); }
.guide-body h2 { font-family: var(--font-voice); font-weight: var(--fw-regular); font-size: var(--text-2xl); line-height: 1.25; color: var(--ink); margin-top: var(--sp-7, 3rem); padding-top: var(--sp-4); border-top: 1px solid var(--rule); scroll-margin-top: 90px; }
.guide-body h3 { font-family: var(--font); font-weight: var(--fw-semi); font-size: var(--text-lg); color: var(--ink); text-transform: none; letter-spacing: normal; margin-top: var(--sp-5); scroll-margin-top: 90px; }
.guide-body ul, .guide-body ol { padding-left: 1.3rem; }
.guide-body li { margin-bottom: 6px; }
.guide-body em { font-family: var(--font-voice); color: var(--slate-text); }
@media (max-width: 860px) { .guide-layout { grid-template-columns: 1fr; } .guide-toc { position: static; border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); background: var(--surface); } }
@media print {
  body { background: #fff; }
  .sidebar, .topbar, .progress-track, .toasts, .no-print, .guide-toc, .mobile-nav, .scrim { display: none !important; }
  .app, .main, .content { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .guide-layout { display: block; }
  .guide-body { max-width: none; font-size: 11pt; }
  .guide-body h2 { break-after: avoid; }
  .guide-body a { color: inherit; text-decoration: none; }
}

/* ---------- Cover the private box (photo flow) ---------- */
.cover-stage { position: relative; width: min(100%, 380px); margin: 0.75rem auto; cursor: crosshair; touch-action: manipulation; border-radius: var(--r-sm); overflow: hidden; }
.cover-img { display: block; width: 100%; height: auto; }
.cover-box { position: absolute; right: 0; bottom: 0; background: rgba(0, 37, 88, 0.94); border-top: 2px dashed var(--apricot); border-left: 2px dashed var(--apricot); display: grid; place-items: center; }
.cover-range { width: 100%; min-height: 44px; accent-color: var(--ink); }
.cover-box span { color: var(--paper); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 4px; text-align: center; }

/* ---------- Phone pass (Oct 2026) ----------
   Most people will fill the books in on a phone. Everything below is about thumbs and small
   screens; desktop is unchanged unless noted. */
/* Tick boxes: a visible 22px box inside a 44px hit area. */
.tick-hit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; cursor: pointer; flex: 0 0 auto; }
.tick-hit input[type=checkbox], .cover-check input[type=checkbox] { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); flex: 0 0 22px; }
.cover-check { display: flex; gap: 10px; align-items: center; min-height: 44px; margin-bottom: 0.5rem; }
/* Switches: the visible track stays 46×26; the tappable area doesn't. */
.toggle::after { content: ""; position: absolute; inset: -10px -8px; }
/* ▲ — ○ mark beside each hour (all widths: at 52px with 14px padding the mark was invisible). */
.mark-select { flex: 0 0 64px; width: 64px !important; padding: 10px 4px; text-align: center; text-align-last: center; }
.mark-legend { font-size: var(--text-sm); color: var(--slate-text); margin: 0 0 var(--sp-3); }
.mark-legend b { color: var(--ink); font-weight: var(--fw-semi); }
/* A commitment you can read: two lines, not a clipped one-liner. */
textarea.short { min-height: 0; resize: none; overflow: hidden; }
.block-row.wrap.top { align-items: flex-start; }
.block-row.wrap.top .block-num { padding-top: 12px; }
/* From / to */
.daterange { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.daterange label { display: flex; align-items: center; gap: 8px; flex: 1 1 150px; min-width: 0; }
.daterange input { flex: 1 1 auto; min-width: 0; }
/* Who compounds */
.people-who { flex: 1 1 28%; min-width: 120px; }
/* The day spread: say which page is which (on a phone the two pages stack). */
.spread-label { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--terracotta-text); margin: var(--sp-2) 0 0; }
@media (max-width: 860px) {
  .toasts { left: var(--sp-4); right: var(--sp-4); bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); }
  .toast { max-width: none; }
}
@media (max-width: 640px) {
  /* Long button labels wrap instead of pushing the page sideways. */
  .btn { white-space: normal; text-align: center; }
  .topbar .btn { white-space: nowrap; flex: 0 0 auto; }
  .stage-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .card { padding: 22px 18px; }
  .modal .m-head { padding: var(--sp-4) var(--sp-4) 0; }
  .modal .m-body { padding: var(--sp-3) var(--sp-4); }
  .modal .m-foot { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .modal .m-foot .btn { flex: 1 1 auto; }
  .people-who { flex-basis: 100%; }
  /* Read-only ▲ — ○ tables: the chip column takes what it needs, numbers share the rest. */
  .ccc-table { --ccc-first: 104px; }
  .ccc-row.head span { letter-spacing: 0.04em; font-size: 11px; }
  .ccc-table.readonly .ccc-cell { justify-content: flex-start; }
  /* The tour's last card: one clear next step, then the alternatives. */
  .gt-final { flex-direction: column-reverse; align-items: stretch; }
  .gt-final .gt-end { flex-direction: column-reverse; align-items: stretch; }
  .gt-final .btn { width: 100%; }
}
.rec-from { display: block; font-size: var(--text-xs); color: var(--slate-text); font-weight: var(--fw-regular); margin-top: 2px; }
/* Goals: ideas wrap on a desktop, swipe as one row on a phone; numbers sit on one line. */
.goal-palette { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.goal-numbers { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.5rem; align-items: center; margin-top: 0.5rem; max-width: 460px; }
@media (max-width: 640px) {
  .goal-palette { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 6px; margin-inline: -4px; padding-inline: 4px; }
  .goal-palette > .chip { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
}