/* de:veghe hub — the night world (rebrand 2026-09-14).
 * Source of truth: contracts/design-system/ (tokens/, guidelines/, ui_kits/deveghe-app/).
 * A warm near-black night lit by one flame; the teal→amber→red scale means gauge
 * STATE only, never style; hero numerals BREATHE — one glowing element per screen.
 * Two type families only: Instrument Sans (human) + JetBrains Mono (data).
 * No colored left-accent borders — difficulty tints are slim bars on timeline rows. */

:root {
    /* night ground (the product) */
    --dv-night:        #14110c;
    --dv-hearth:       #1f1911;
    --dv-card:         rgba(255,240,214,0.03);
    --dv-card-solid:   #191510;
    --dv-inset:        #110e0a;
    --dv-track:        #262016;

    /* borders */
    --dv-border:        #2b261a;
    --dv-border-strong: #352e1f;
    --dv-hairline:      #221d14;

    /* ink ramp, brightest → faintest */
    --dv-ink-hi:    #f2eee2;
    --dv-ink:       #e6e0d2;
    --dv-ink-body:  #c8c0af;
    --dv-ink-mute:  #94896f;
    --dv-ink-dim:   #8a8171;
    --dv-ink-fade:  #6e6753;
    --dv-ink-faint: #57523f;

    /* flame — the ONLY brand accent */
    --dv-flame:     #e8a33d;
    --dv-flame-lit: #ffc46b;
    --dv-lamplight: #ffe9c8;

    /* state (meaning is fixed; never decorative) */
    --dv-good:      #00d2be;  --dv-good-lit: #33ded0;  --dv-good-glow: #c9fff6;   /* in range */
    --dv-warn:      #f5a623;  --dv-warn-lit: #ffbe4d;  --dv-warn-glow: #ffdca3;   /* approaching */
    --dv-ceiling:   #ffd76a;
    --dv-bad:       #ff5a6e;  --dv-bad-lit:  #ff8a9a;  --dv-bad-glow:  #ffc9d0;   /* over the line */
    --dv-sky:       #4aa8e8;  --dv-sky-lit:  #7cc4f4;                             /* meetings */
    --dv-commit:    #8a5cff;  --dv-commit-lit: #b394ff;                           /* commitments */

    /* type */
    --font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* radii */
    --radius-card:  14px;
    --radius-input: 10px;
    --radius-row:   10px;
    --radius-chip:  8px;
    --radius-tag:   6px;
    --radius-pill:  9999px;

    /* the living glow */
    --field: radial-gradient(120% 60% at 50% -5%, var(--dv-hearth) 0%, var(--dv-night) 58%);
    --glow-flame: 0 0 10px rgba(232,163,61,0.5);
    --glow-teal:  0 0 10px rgba(0,210,190,0.5);
    --glow-red:   0 0 10px rgba(255,90,110,0.5);
    --glow-amber: 0 0 10px rgba(245,166,35,0.5);
    --dur-blink:         2.4s;
    --dur-breath-calm:   4.2s;
    --dur-breath-mid:    3s;
    --dur-breath-urgent: 2s;
    --dur-pulse:         2.2s;
    --ease-breath: ease-in-out;
}

/* the wordmark colon — blinks like clock seconds, only while the watch is live */
@keyframes dv-colon {
    0%,100% { opacity: 1;   text-shadow: 0 0 14px rgba(232,163,61,.5), 0 0 40px rgba(232,163,61,.16); }
    50%     { opacity: .45; text-shadow: 0 0 6px rgba(232,163,61,.25); }
}
/* number glows (numerals) */
@keyframes dv-breath-teal {
    0%,100% { text-shadow: 0 0 18px rgba(0,210,190,.42), 0 0 42px rgba(0,210,190,.14); }
    50%     { text-shadow: 0 0 32px rgba(0,210,190,.72), 0 0 74px rgba(0,210,190,.28); }
}
@keyframes dv-breath-red {
    0%,100% { text-shadow: 0 0 22px rgba(255,70,90,.5), 0 0 48px rgba(255,70,90,.2); }
    50%     { text-shadow: 0 0 42px rgba(255,70,90,.95), 0 0 92px rgba(255,70,90,.42); }
}
@keyframes dv-breath-amber {
    0%,100% { text-shadow: 0 0 18px rgba(245,166,35,.48), 0 0 42px rgba(245,166,35,.16); }
    50%     { text-shadow: 0 0 34px rgba(245,166,35,.85), 0 0 82px rgba(245,166,35,.34); }
}
/* ring auras (gauge rings) */
@keyframes dv-aura-teal {
    0%,100% { box-shadow: 0 0 26px rgba(0,210,190,.28), inset 0 0 18px rgba(0,210,190,.1); }
    50%     { box-shadow: 0 0 50px rgba(0,210,190,.5),  inset 0 0 26px rgba(0,210,190,.18); }
}
@keyframes dv-aura-red {
    0%,100% { box-shadow: 0 0 30px rgba(255,70,90,.34), inset 0 0 20px rgba(255,70,90,.14); }
    50%     { box-shadow: 0 0 58px rgba(255,70,90,.6),  inset 0 0 30px rgba(255,70,90,.24); }
}
@keyframes dv-aura-amber {
    0%,100% { box-shadow: 0 0 26px rgba(245,166,35,.3),  inset 0 0 18px rgba(245,166,35,.12); }
    50%     { box-shadow: 0 0 52px rgba(245,166,35,.55), inset 0 0 26px rgba(245,166,35,.2); }
}
/* pulsing "live now" dot */
@keyframes dv-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    background: var(--dv-night);
    background-image: var(--field);
    background-attachment: fixed;
    color: var(--dv-ink-mute);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font-family: inherit; }

.wrap { max-width: 560px; margin: 0 auto; padding: 0 22px 40px; }
.stack > * + * { margin-top: 12px; }

/* header bar — the wordmark and the way around */
.site-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border-bottom: 1px solid var(--dv-hairline);
    padding: 18px 2px; margin-bottom: 16px;
}
.brand {
    font-size: 16px; font-weight: 600; letter-spacing: -0.03em; line-height: 1;
    color: var(--dv-ink-hi); white-space: nowrap;
}
/* the bedside colon: JetBrains Mono, always amber; lit means watching */
.wm-colon {
    font-family: var(--font-mono); font-weight: 500; margin: 0 .04em;
    color: var(--dv-flame-lit);
}
.wm-live .wm-colon { animation: dv-colon var(--dur-blink) steps(1) infinite; }
.site-nav { display: flex; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; }
.site-nav a { padding: 6px 12px; border-radius: var(--radius-chip); color: var(--dv-ink-dim); border: 1px solid transparent; }
.site-nav a:hover { color: var(--dv-flame-lit); }
.site-nav a.on { color: var(--dv-flame-lit); background: rgba(232,163,61,.1); border-color: rgba(232,163,61,.34); }

/* status / day nav line */
.statusline {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--font-mono); font-size: 11.5px; color: var(--dv-ink-dim);
    padding: 0 2px; font-variant-numeric: tabular-nums;
}
.statusline-right { display: flex; align-items: center; gap: 12px; }
.daynav { display: flex; align-items: center; gap: 12px; }
.daynav a { color: var(--dv-ink-faint); font-size: 15px; }
.daynav a:hover { color: var(--dv-flame-lit); }
.daynav-day { color: var(--dv-ink); letter-spacing: 0.02em; }
.strong { color: var(--dv-ink); font-weight: 600; }
.lit { color: var(--dv-ink-body); }
.faint { color: var(--dv-ink-fade); }
.dot { color: var(--dv-ink-fade); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* accent + state colors — teal/amber/red mean gauge state, flame is the brand */
.c-flame { color: var(--dv-flame-lit); }
.c-teal { color: var(--dv-good-lit); }
.c-teal-dim { color: rgba(0,210,190,0.7); }
.c-emerald { color: var(--dv-good-lit); }
.c-amber { color: var(--dv-warn-lit); }
.c-red { color: var(--dv-bad-lit); }
.c-sky { color: var(--dv-sky-lit); }
.c-sky-dim { color: rgba(74,168,232,0.7); }
.c-purple { color: var(--dv-ink-mute); }
.c-good { color: var(--dv-good-lit); }
.c-warn { color: var(--dv-warn-lit); }
.c-bad  { color: var(--dv-bad-lit); }
.c-dim  { color: var(--dv-ink-faint); }

/* cards / panels — warm-white breath on the night, hairline border, 14px radius. NO accent border. */
.card, .panel {
    background: var(--dv-card);
    border: 1px solid var(--dv-border);
    border-radius: var(--radius-card);
    padding: 18px;
}
.card.alarm, .panel.alarm { border-color: rgba(255,90,110,.3); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-title { font-size: 13.5px; font-weight: 600; color: var(--dv-ink); letter-spacing: -0.01em; }
.card-meta, .meta {
    font-family: var(--font-mono); font-size: 11px; color: var(--dv-ink-dim);
    font-variant-numeric: tabular-nums;
}
.mini-label {
    font-family: var(--font-mono); font-size: 10.5px; color: var(--dv-ink-fade);
    text-transform: uppercase; letter-spacing: 0.07em;
}
.state-empty { padding: 16px; text-align: center; color: var(--dv-ink-fade); font-family: var(--font-mono); font-size: 11px; }

/* ---- the decision line (shown only when something is wrong) ---- */
.now {
    border: 1px solid; border-radius: 12px;
    padding: 13px 15px; display: flex; align-items: center; gap: 14px;
}
.now-red   { border-color: rgba(255,90,110,.4);  background: rgba(255,90,110,.07); }
.now-amber { border-color: rgba(245,166,35,.35); background: rgba(245,166,35,.07); }
.now-teal  { border-color: rgba(0,210,190,.35);  background: rgba(0,210,190,.06); }
.now-dot {
    width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
    animation: dv-pulse var(--dur-pulse) var(--ease-breath) infinite;
}
.now-red .now-dot { background: var(--dv-bad); box-shadow: 0 0 12px var(--dv-bad); }
.now-amber .now-dot { background: var(--dv-warn); box-shadow: 0 0 12px var(--dv-warn); }
.now-teal .now-dot { background: var(--dv-good-lit); box-shadow: 0 0 12px var(--dv-good-lit); animation: none; }
.now-t { font-size: 14.5px; font-weight: 500; line-height: 1.45; }
.now-red .now-t { color: var(--dv-bad-glow); }
.now-amber .now-t { color: var(--dv-warn-glow); }
.now-teal .now-t { color: var(--dv-good-glow); }
.now-s { font-size: 10.5px; margin-top: 5px; line-height: 1.4; font-family: var(--font-mono); color: var(--dv-ink-dim); }

/* ---- hero gauges ---- */
.gauges { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 14px 0 8px; }

/* recovery: a small quiet marker BETWEEN the rings */
.rec-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 2px; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; }
.rd-teal  { background: var(--dv-good-lit); box-shadow: 0 0 10px rgba(0,210,190,.7); }
.rd-amber { background: var(--dv-warn-lit); box-shadow: 0 0 10px rgba(245,166,35,.7); }
.rd-red   { background: var(--dv-bad-lit);  box-shadow: 0 0 10px rgba(255,90,110,.7); animation: dv-pulse var(--dur-breath-urgent) var(--ease-breath) infinite; }
.rec-val { font-family: var(--font-mono); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rec-lbl {
    font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--dv-ink-faint);
}
.gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gauge {
    width: 150px; height: 150px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; position: relative;
}
.gauge-hole {
    width: 116px; height: 116px; border-radius: 50%;
    background: radial-gradient(circle, #130f0a, #0f0c08);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.gauge-num { font-family: var(--font-mono); font-size: 44px; font-weight: 500; line-height: 0.9; font-variant-numeric: tabular-nums; color: var(--dv-ink-hi); }
.gauge-lbl { font-size: 11px; color: var(--dv-ink-dim); margin-top: 5px; }
.gauge-cap { font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--dv-ink-dim); }
.gauge-tick {
    position: absolute; width: 3px; height: 11px; top: 6px; left: 50%;
    background: var(--dv-ceiling); box-shadow: 0 0 8px rgba(255,215,106,.8);
    transform-origin: 50% 69px;   /* gauge is 150px: origin sits at ring center */
}
/* glow = lamplight tint of the state, saturated color in the shadow */
.glow-red   { color: var(--dv-bad-glow);  animation: dv-breath-red var(--dur-breath-urgent) var(--ease-breath) infinite; }
.glow-amber { color: var(--dv-warn-glow); animation: dv-breath-amber var(--dur-breath-mid) var(--ease-breath) infinite; }
.glow-teal  { color: var(--dv-good-glow); animation: dv-breath-teal var(--dur-breath-calm) var(--ease-breath) infinite; }
.aura-red   { animation: dv-aura-red var(--dur-breath-urgent) var(--ease-breath) infinite; }
.aura-amber { animation: dv-aura-amber var(--dur-breath-mid) var(--ease-breath) infinite; }
.aura-teal  { animation: dv-aura-teal var(--dur-breath-calm) var(--ease-breath) infinite; }
/* the second ring stays still — one breathing element per screen */
.gauge-still { box-shadow: 0 0 18px rgba(0,210,190,.14), inset 0 0 12px rgba(0,210,190,.06); }
.glow-still { color: var(--dv-ink-hi); }

/* coach gauges panel — cycle-phase word gauge */
.gauge-phase {
    font-family: var(--font-mono); font-size: 15px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--dv-ink-body); line-height: 2;
}

/* ---- bars ---- */
.track { height: 5px; border-radius: 99px; background: var(--dv-track); overflow: hidden; }
.fill { height: 100%; border-radius: 99px; }
.f-flame  { background: linear-gradient(90deg, #e8a33d, #ffc46b); box-shadow: var(--glow-flame); }
.f-teal   { background: linear-gradient(90deg, #00d2be, #33ded0); box-shadow: var(--glow-teal); }
.f-amber  { background: linear-gradient(90deg, #f5a623, #ffbe4d); box-shadow: var(--glow-amber); }
.f-red    { background: linear-gradient(90deg, #ff5a6e, #ff8a5c); box-shadow: var(--glow-red); }
.f-purple { background: linear-gradient(90deg, #6e6753, #94896f); }
.f-dim    { background: #3a3426; }
/* legacy zone aliases (zone → fill) */
.bg-teal { background: linear-gradient(90deg, #00d2be, #33ded0); box-shadow: var(--glow-teal); }
.bg-emerald { background: linear-gradient(90deg, #00d2be, #33ded0); box-shadow: var(--glow-teal); }
.bg-amber { background: linear-gradient(90deg, #f5a623, #ffbe4d); box-shadow: var(--glow-amber); }
.bg-red { background: linear-gradient(90deg, #ff5a6e, #ff8a5c); box-shadow: var(--glow-red); }
.bg-purple { background: linear-gradient(90deg, #6e6753, #94896f); }

/* labelled bar row: label | track | value */
.brow {
    display: grid; grid-template-columns: 58px 1fr 36px; align-items: center; gap: 11px;
    font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums;
    color: var(--dv-ink-dim);
}
.brow .brow-val { text-align: right; }
.brow.dim { opacity: 0.55; }
.brow-extra { font-size: 9.5px; color: var(--dv-ink-faint); }
.pools { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pools .card { padding: 16px; }
.pools .card-title { font-size: 12.5px; }
.brows { display: flex; flex-direction: column; gap: 9px; margin-top: 11px; }

/* ---- strain budget bar ---- */
.hd-bar { height: 7px; border-radius: 99px; background: var(--dv-track); overflow: hidden; position: relative; }

/* ---- tap-to-explain fold (no hover on the iPhone PWA) ---- */
.fold { margin-top: 10px; }
.fold > summary {
    cursor: pointer; list-style: none;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--dv-ink-faint);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "\25B8 "; }
.fold[open] > summary::before { content: "\25BE "; }
.fold[open] > summary { color: var(--dv-flame-lit); }

/* quiet header toggles (habits edit/week) — ghost mono, flame when active */
.head-tools { display: flex; align-items: center; gap: 12px; }
.head-toggle {
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--dv-ink-faint);
}
.head-toggle:hover, .head-toggle.on { color: var(--dv-flame-lit); }
.habits-section { margin-top: 12px; border-top: 1px solid var(--dv-hairline); padding-top: 12px; }

/* ---- work/meet/breaks strip ---- */
.strip {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--dv-card); border: 1px solid var(--dv-border); border-radius: var(--radius-card);
    padding: 12px 18px; font-family: var(--font-mono); font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.strip-label { color: var(--dv-ink-dim); }
.strip-val { font-weight: 600; }
.strip-sep { color: var(--dv-border-strong); }

/* ---- session timeline (work in flame, meetings in sky, breaks pale) ---- */
.tl { display: flex; flex-direction: column; gap: 14px; }
.tlrow { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px; }
.tltime { font-family: var(--font-mono); font-size: 11.5px; color: var(--dv-ink-dim); font-variant-numeric: tabular-nums; }
.tlbar { height: 11px; border-radius: 5px; background: var(--dv-hearth); position: relative; overflow: hidden; }
.tlseg { display: flex; height: 100%; border-radius: 5px; overflow: hidden; }
.seg { flex-shrink: 0; flex-basis: 0; height: 100%; display: block; }
.seg-work { background: linear-gradient(90deg, #e8a33d, #ffc46b); }
.seg-meeting { background: linear-gradient(90deg, #2b8fd6, #4aa8e8); }
.seg-multitask { background-image: repeating-linear-gradient(135deg, #4aa8e8 0 4px, rgba(232,163,61,.9) 4px 8px); }
.seg-break { background: rgba(255,240,214,.22); }
.tldur {
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--dv-ink);
    min-width: 44px; text-align: right; font-variant-numeric: tabular-nums;
}
.tlsum { display: flex; align-items: center; gap: 9px; padding-left: 76px; margin-top: 6px; min-width: 0; }
.tlsum-t {
    font-size: 12.5px; color: var(--dv-ink-body);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.assess {
    display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
    font-family: var(--font-mono); font-size: 10px; color: var(--dv-ink-dim);
    font-variant-numeric: tabular-nums;
}
.caret { color: var(--dv-ink-fade); font-size: 9px; }
.tl-parts {
    font-family: var(--font-mono); font-size: 9.5px; color: var(--dv-ink-fade);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
    font-variant-numeric: tabular-nums;
}
.tag {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    padding: 2px 8px; border-radius: var(--radius-tag);
    font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.02em;
}
.tag-locked { background: rgba(0,210,190,.14); color: var(--dv-good-lit); }
.tag-juggle { background: rgba(245,166,35,.15); color: var(--dv-warn-lit); }
.tag-drift { background: rgba(255,90,110,.14); color: var(--dv-bad-lit); }
.tag-meeting { background: rgba(74,168,232,.14); color: var(--dv-sky-lit); }
.tldot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--dv-flame-lit);
    box-shadow: 0 0 10px var(--dv-flame-lit); flex-shrink: 0;
    animation: dv-pulse var(--dur-pulse) var(--ease-breath) infinite;
}
.tl-live {
    display: flex; align-items: center; gap: 9px; padding-left: 76px; margin-top: 6px;
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--dv-flame-lit);
}
.tl-gap {
    display: flex; align-items: center; gap: 10px; margin-left: 76px;
    font-family: var(--font-mono); font-size: 9.5px; color: var(--dv-ink-fade);
}
.tl-gap-line { flex: 1; border-top: 1px dashed var(--dv-border); }

/* expanded assessment report */
.tl-assess > summary { cursor: pointer; list-style: none; }
.tl-assess > summary::-webkit-details-marker { display: none; }
.tl-assess > summary:hover .assess { color: var(--dv-flame-lit); }
.tl-assess .caret::after { content: "\25B8"; }
.tl-assess[open] .caret::after { content: "\25BE"; }
.report {
    margin: 8px 0 2px 76px; padding: 13px 15px;
    background: var(--dv-inset); border: 1px solid var(--dv-border); border-radius: 12px;
    font-family: var(--font-mono); font-size: 11px; color: var(--dv-ink-dim);
    display: flex; flex-direction: column; gap: 8px; line-height: 1.5;
}
.report .rs { font-family: var(--font-sans); font-size: 12.5px; color: var(--dv-ink-body); line-height: 1.45; }
.report .k { color: var(--dv-ink-fade); }
.report .kk { color: var(--dv-ink-faint); }
.report .v { color: var(--dv-ink-hi); }
.report .pl { padding-left: 10px; color: var(--dv-ink-mute); }
.report .foot { font-size: 9.5px; color: var(--dv-ink-faint); }

/* dictation folds — quiet by default, flame once opened */
.dict { padding-left: 76px; margin-top: 6px; }
.dict-flat { padding-left: 0; margin-top: 0; }
.dict summary {
    cursor: pointer; list-style: none;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--dv-ink-fade);
}
.dict[open] summary { color: var(--dv-flame-lit); }
.dict summary::-webkit-details-marker { display: none; }
.dict summary::before { content: "\25B8 "; }
.dict[open] summary::before { content: "\25BE "; }
.dict-text {
    margin-top: 7px; padding: 11px 13px;
    background: var(--dv-inset); border: 1px solid var(--dv-border); border-radius: var(--radius-input);
    font-size: 12.5px; color: var(--dv-ink-body); line-height: 1.6; white-space: pre-wrap;
}
.dict-ts {
    display: block; margin-bottom: 5px;
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--dv-flame);
    font-variant-numeric: tabular-nums;
}

/* ---- Body (WHOOP) ---- */
.whoop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.whoop-num {
    font-family: var(--font-mono); font-size: 26px; font-weight: 500; line-height: 1;
    color: var(--dv-ink-hi); font-variant-numeric: tabular-nums;
}
.whoop-unit { font-size: 14px; color: var(--dv-ink-dim); font-weight: 400; }
.whoop-stat .mini-label { display: block; margin-bottom: 5px; font-size: 9.5px; letter-spacing: 0.1em; color: var(--dv-ink-dim); }
.whoop-sleepline {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--font-mono); font-size: 11.5px; color: var(--dv-ink-dim);
    padding-top: 13px; margin-top: 14px; border-top: 1px solid var(--dv-border);
    font-variant-numeric: tabular-nums;
}
.wsl-right { display: flex; gap: 12px; }
.whoop-detail {
    font-family: var(--font-mono); font-size: 10px; color: var(--dv-ink-fade);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px;
    font-variant-numeric: tabular-nums;
}
.workout-list { display: flex; flex-direction: column; gap: 8px; }
.workout-row {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums;
}
.workout-name { color: var(--dv-ink-body); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whoop-streak-banner {
    border-color: rgba(255,90,110,.3);
    background: rgba(255,90,110,.07);
    font-family: var(--font-mono); font-size: 11.5px; color: var(--dv-bad-lit);
}

/* ---- habits — a row of pills, lit flame when kept ---- */
.habits-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.habit-toggle { cursor: pointer; user-select: none; min-width: 0; }
.habit-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.habit-pill {
    min-width: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; min-height: 40px; border-radius: var(--radius-pill);
    border: 1px solid var(--dv-border); font-size: 12.5px;
    color: var(--dv-ink-dim);
    transition: border-color 120ms, color 120ms;
}
.habit-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.habit-target { font-family: var(--font-mono); font-size: 9px; color: var(--dv-ink-faint); flex-shrink: 0; }
.habit-pill .ck { display: none; }
.habit-toggle input:checked + .habit-pill {
    border-color: rgba(232,163,61,.45); color: var(--dv-flame-lit);
}
.habit-toggle input:checked + .habit-pill .habit-name::before { content: "\2713 "; }
.habit-toggle input:focus-visible + .habit-pill { box-shadow: 0 0 0 2px rgba(232,163,61,.4); }
.habits-save { display: flex; justify-content: flex-end; margin-top: 10px; }

/* habits — edit + compliance sections (toggled from the card head) */
.habits-edit { display: flex; flex-direction: column; gap: 8px; }
.habit-edit-row, .habit-add-row { display: flex; align-items: center; gap: 8px; }
.habit-add-row { border-top: 1px solid var(--dv-hairline); padding-top: 10px; margin-top: 4px; }
.habit-input {
    flex: 1; min-width: 0; background: var(--dv-inset); border: 1px solid var(--dv-border);
    border-radius: var(--radius-chip); padding: 8px 10px; font-family: var(--font-mono); font-size: 11.5px;
    color: var(--dv-ink-body);
}
.habit-num {
    width: 46px; text-align: center; background: var(--dv-inset); border: 1px solid var(--dv-border);
    border-radius: var(--radius-chip); padding: 8px 4px; font-family: var(--font-mono); font-size: 11.5px;
    color: var(--dv-ink-body);
}
.habit-input:focus, .habit-num:focus { outline: none; border-color: var(--dv-flame); }
.habit-unit { font-size: 9px; color: var(--dv-ink-faint); font-family: var(--font-mono); }
.habit-btn {
    padding: 7px 10px; border-radius: var(--radius-chip); font-family: var(--font-mono); font-size: 10px;
    text-transform: uppercase; cursor: pointer; border: 1px solid;
}
.habit-btn.save, .habit-btn.add { background: rgba(232,163,61,.1); border-color: rgba(232,163,61,.4); color: var(--dv-flame-lit); }
.habit-btn.del { background: rgba(255,90,110,.1); border-color: rgba(255,90,110,.4); color: var(--dv-bad-lit); }

/* habits — 7-day compliance grid */
.compliance { display: flex; flex-direction: column; gap: 7px; }
.compliance-row { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; }
.compliance-row.head { font-size: 9px; color: var(--dv-ink-fade); text-transform: uppercase; }
.compliance-name {
    width: 96px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--dv-ink-dim);
}
.compliance-name.arch { color: var(--dv-ink-faint); font-style: italic; }
.compliance-cells { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.compliance-daylabel { text-align: center; color: var(--dv-ink-fade); }
.cell { height: 16px; border-radius: 3px; }
.cell.done { background: var(--dv-flame); }
.cell.skip { background: var(--dv-border-strong); }
.cell.none { background: var(--dv-inset); border: 1px solid var(--dv-border); }
.compliance-count { width: 44px; text-align: right; color: var(--dv-ink-fade); font-variant-numeric: tabular-nums; }
.compliance-pct { width: 40px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.compliance-pct.good { color: var(--dv-good-lit); }
.compliance-pct.warn { color: var(--dv-warn-lit); }
.compliance-pct.bad { color: var(--dv-bad-lit); }

/* ---- journal ---- */
.journal-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.journal-entry {
    background: var(--dv-card); border: 1px solid var(--dv-hairline);
    border-radius: var(--radius-row); padding: 11px 13px; flex-shrink: 0;
    transition: border-color 150ms;
}
.journal-entry:hover { border-color: rgba(232,163,61,.3); }
.journal-time {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
    color: var(--dv-flame); margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}
.journal-time::before {
    content: ''; width: 4px; height: 4px; border-radius: 50%;
    background: var(--dv-flame); box-shadow: 0 0 7px rgba(232,163,61,.7);
}
.journal-body { font-size: 12.5px; color: var(--dv-ink-body); line-height: 1.55; white-space: pre-wrap; }
.journal-add { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.journal-input {
    flex: 1; resize: none; min-height: 44px;
    background: var(--dv-inset); border: 1px solid var(--dv-border); border-radius: var(--radius-input);
    padding: 11px 13px; font-family: var(--font-sans); font-size: 13px;
    color: var(--dv-ink-body); line-height: 1.5;
}
.journal-input::placeholder { color: var(--dv-ink-faint); }
.journal-input:focus { outline: none; border-color: var(--dv-flame); }

/* buttons — one flame-filled primary per screen at most; everything else quiet */
.btn-primary {
    font-size: 13px; font-weight: 600; letter-spacing: 0;
    color: var(--dv-night); background: var(--dv-flame);
    border: 1px solid var(--dv-flame); border-radius: var(--radius-input);
    padding: 11px 16px; min-height: 40px; cursor: pointer; white-space: nowrap;
    transition: background 120ms ease;
}
.btn-primary:hover { background: var(--dv-flame-lit); border-color: var(--dv-flame-lit); }

/* ---- meetings list ---- */
.daygroup {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--dv-flame); margin: 2px 2px 0;
}
.mtg-list { display: flex; flex-direction: column; gap: 8px; }
.mtg-row {
    display: block; background: var(--dv-card); border: 1px solid var(--dv-border);
    border-radius: var(--radius-card); padding: 13px 15px; transition: border-color 150ms;
}
.mtg-row:hover { border-color: rgba(232,163,61,.4); }
.mtg-head {
    display: flex; align-items: baseline; gap: 11px;
    font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.mtg-time { color: var(--dv-sky); }
.mtg-dur { color: var(--dv-ink-hi); font-weight: 600; }
.mtg-app { color: var(--dv-ink-dim); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; margin-left: auto; }
.mtg-title { margin: 6px 0 8px; font-size: 13.5px; font-weight: 600; color: var(--dv-ink); line-height: 1.35; }

/* row chips — heavy / good / owe, answered without opening the meeting */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    padding: 3px 8px; border-radius: var(--radius-tag); white-space: nowrap;
    font-family: var(--font-mono); font-size: 10px; font-variant-numeric: tabular-nums;
}
.chip-dim { background: rgba(255,240,214,.05); color: var(--dv-ink-mute); }
.chip-teal { background: rgba(0,210,190,.12); color: var(--dv-good-lit); }
.chip-warn { background: rgba(245,166,35,.13); color: var(--dv-warn-lit); }
.chip-nudge { border: 1px solid rgba(232,163,61,.45); color: var(--dv-flame-lit); }
.chip-commit { background: rgba(138,92,255,.14); color: var(--dv-commit-lit); }

/* meeting assessment + calibration (meeting detail page) */
.meet-assess { font-family: var(--font-mono); font-size: 11px; color: var(--dv-ink-dim); margin-top: 10px; line-height: 1.5; }
.meet-assess .k { color: var(--dv-ink-fade); }
.meet-assess .kk { color: var(--dv-ink-faint); }
.meet-assess .v { color: var(--dv-ink-hi); }
.score-row { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-family: var(--font-mono); font-size: 10px; }
.score-row .k { color: var(--dv-ink-fade); }
.score-row .kk { color: var(--dv-ink-faint); }
.score-btn {
    width: 30px; height: 28px; cursor: pointer; border-radius: 7px;
    background: var(--dv-inset); border: 1px solid var(--dv-border);
    color: var(--dv-ink-dim); font-family: var(--font-mono); font-size: 10px;
}
.score-btn:hover { border-color: rgba(232,163,61,.5); color: var(--dv-flame-lit); }
.score-btn-set { background: rgba(232,163,61,.1); border-color: var(--dv-flame); color: var(--dv-flame-lit); font-weight: 600; }
.score-hint { font-family: var(--font-mono); font-size: 10px; color: var(--dv-ink-faint); margin-top: 6px; }

/* meeting summary bullets + decisions */
.meet-summary { margin-bottom: 14px; font-size: 13px; color: var(--dv-ink-body); line-height: 1.55; }
.meet-summary p + p { margin-top: 3px; }

/* conduct strip — tier-1 numbers with faint reference targets, no judgment */
.conduct-strip {
    display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px;
    padding: 10px 14px; background: var(--dv-inset);
    border: 1px solid var(--dv-hairline); border-radius: var(--radius-input);
    font-family: var(--font-mono); font-size: 11px; color: var(--dv-ink-dim);
    font-variant-numeric: tabular-nums;
}
.conduct-strip b { color: var(--dv-ink-hi); font-weight: 600; }
.conduct-strip i { font-style: normal; color: var(--dv-ink-faint); font-size: 10px; }

/* conduct moments — playbook verdicts with receipts */
.moments { margin-bottom: 14px; }
.construct-line { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 4px;
                  font-family: var(--font-mono); font-size: 10.5px;
                  color: var(--dv-ink-fade); font-variant-numeric: tabular-nums; }
.construct-line b { color: var(--dv-ink-hi); font-weight: 600; }
.construct-strip { margin-bottom: 14px; }
.moments-line { font-family: var(--font-mono); font-size: 11px; color: var(--dv-ink-dim); }
.moments-line .v { color: var(--dv-ink-hi); font-weight: 600; }
.moments-line .k, .moments-line.k { color: var(--dv-ink-fade); }
.moment { margin-top: 8px; padding: 10px 12px; background: var(--dv-inset);
          border: 1px solid var(--dv-hairline); border-radius: var(--radius-input); }
.moment-head { display: flex; gap: 10px; align-items: baseline;
               font-family: var(--font-mono); font-size: 10px; }
.moment-verdict { text-transform: uppercase; letter-spacing: 0.06em; }
.moment-taken .moment-verdict { color: var(--dv-good-lit); }
.moment-partial .moment-verdict { color: var(--dv-warn-lit); }
.moment-missed .moment-verdict { color: var(--dv-bad-lit); }
.moment-label { color: var(--dv-ink-dim); }
.moment-ts { margin-left: auto; color: var(--dv-ink-faint); font-variant-numeric: tabular-nums; }
.moment-vetoed { opacity: 0.45; }
.moment-veto { margin-top: 6px; display: flex; gap: 6px; }
.veto-btn { cursor: pointer; background: none; border: 1px solid var(--dv-border);
            border-radius: var(--radius-tag); padding: 4px 9px; font-family: var(--font-mono);
            font-size: 9.5px; color: var(--dv-ink-fade); }
.veto-btn:hover { color: var(--dv-ink-hi); border-color: rgba(232,163,61,.4); }
.moment-flag { margin-top: 10px; font-family: var(--font-mono); font-size: 10px; }
.moment-flag summary { cursor: pointer; color: var(--dv-ink-faint); }
.moment-flag form { margin-top: 6px; display: flex; gap: 6px; align-items: center; }
.moment-flag input { background: var(--dv-inset); border: 1px solid var(--dv-border);
                     border-radius: var(--radius-tag); color: var(--dv-ink-body);
                     font-family: var(--font-mono); font-size: 10.5px; padding: 4px 8px; }

/* coach moments — tagged verbatim quotes (evidence, not scores) */
.meet-snippets { margin-bottom: 14px; }
.meet-snippets summary { cursor: pointer; list-style: none; }
.meet-snippets summary::before { content: "\25B8 "; }
.meet-snippets[open] summary::before { content: "\25BE "; }
.snippet { margin-top: 10px; padding: 10px 12px; background: var(--dv-inset);
           border: 1px solid var(--dv-hairline); border-radius: var(--radius-input); }
.snippet-tag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
               letter-spacing: 0.06em; color: var(--dv-ink-dim); }
.snippet-heat .snippet-tag, .snippet-criticism .snippet-tag { color: var(--dv-bad-lit); }
.snippet-praise .snippet-tag, .snippet-question_coaching .snippet-tag { color: var(--dv-good-lit); }
.snippet-solved_for_them .snippet-tag { color: var(--dv-warn-lit); }
.snippet-quote { margin-top: 4px; font-size: 12.5px; color: var(--dv-ink-body); line-height: 1.5; }
.snippet-note { margin-top: 3px; font-family: var(--font-mono); font-size: 10.5px; color: var(--dv-ink-fade); }

/* meeting transcript */
.tr-list { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.tr-seg { display: flex; gap: 12px; align-items: flex-start; }
.tr-ts {
    width: 38px; flex-shrink: 0; text-align: right; padding-top: 2px;
    font-family: var(--font-mono); font-size: 10.5px; color: var(--dv-ink-fade);
    font-variant-numeric: tabular-nums;
}
.tr-speaker { flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 600; min-width: 52px; }
.t-you { color: var(--dv-flame); }
.t-them { color: var(--dv-sky); }
.tr-text { font-size: 13px; color: var(--dv-ink-body); line-height: 1.6; min-width: 0; }

/* ---- meeting detail — verdict strip, tabs, moment spine ---- */
.mtg-hero { padding: 2px 2px 0; }
.mtg-hero-title { font-size: 18px; font-weight: 600; color: var(--dv-ink-hi); letter-spacing: -0.02em; line-height: 1.3; }
.mtg-hero-sub { margin-top: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--dv-ink-dim); }

/* verdict first: what it cost, how you ran it, what came out of it */
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vcard {
    background: var(--dv-card); border: 1px solid var(--dv-border);
    border-radius: var(--radius-card); padding: 13px 15px;
}
.vnum {
    font-family: var(--font-mono); font-size: 22px; font-weight: 500;
    color: var(--dv-ink-hi); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.vlbl {
    margin-top: 5px; font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: 0.07em; text-transform: uppercase; color: var(--dv-ink-dim); line-height: 1.35;
}
.vlbl i { font-style: normal; color: var(--dv-ink-faint); }

/* tabs are links, not client state — every view is its own URL */
.tabs { display: flex; gap: 6px; font-family: var(--font-mono); font-size: 11px; padding: 2px 0; }
.tab {
    padding: 8px 16px; border-radius: var(--radius-chip); color: var(--dv-ink-dim);
    border: 1px solid transparent; white-space: nowrap;
}
.tab:hover { color: var(--dv-ink-hi); }
.tab.on { color: var(--dv-flame-lit); background: rgba(232,163,61,.1); border-color: rgba(232,163,61,.34); }

.stack-tight > * + * { margin-top: 14px; }
/* eyebrow: small mono kicker — the ONLY uppercase in the system, flame by default */
.eyebrow {
    margin-bottom: 8px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
    letter-spacing: 0.07em; text-transform: uppercase; color: var(--dv-flame);
}
.dec { font-size: 12.5px; color: var(--dv-ink); line-height: 1.5; }
.dec + .dec { margin-top: 4px; }

/* commitments — things he owes, in their own purple so they never read as
   just another decision */
.eyebrow-commit { color: var(--dv-commit-lit); }
.commit-block { border-top: 1px solid var(--dv-border); padding-top: 14px; }
.commit-list { display: flex; flex-direction: column; gap: 9px; }
.cmt-row { display: flex; align-items: center; gap: 10px; }
.cmt-row form { display: flex; }
.ck {
    width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--dv-ink-faint);
    flex-shrink: 0; padding: 0; background: none; cursor: pointer;
}
/* The box stays small (it's a marker, not a control), but the THUMB target
   is 40px — this is a phone. Inset pseudo-element grows the hit area. */
button.ck { position: relative; }
button.ck::before { content: ""; position: absolute; inset: -11px; }
button.ck:hover { border-color: var(--dv-commit-lit); }
.ck-done {
    border-color: rgba(138,92,255,.7); background: rgba(138,92,255,.18);
    position: relative;
}
.ck-done::after {
    content: "\2713"; position: absolute; inset: 0; display: flex;
    align-items: center; justify-content: center;
    font-size: 11px; color: var(--dv-commit-lit);
}
.cmt-t { flex: 1; font-size: 12.5px; color: var(--dv-ink-body); line-height: 1.45; }
.cmt-done { color: var(--dv-ink-fade); text-decoration: line-through; }
.cmt-state {
    font-family: var(--font-mono); font-size: 10px; color: var(--dv-ink-dim);
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cmt-aging { color: var(--dv-warn-lit); }
.cmt-src { font-family: var(--font-mono); font-size: 10px; color: var(--dv-ink-faint); }
.pbtn {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    color: var(--dv-commit-lit); background: rgba(138,92,255,.12);
    border: 1px solid rgba(138,92,255,.4); border-radius: var(--radius-chip);
    padding: 5px 10px; cursor: pointer; white-space: nowrap;
}
.pbtn:hover { background: rgba(138,92,255,.2); }
.commit-panel { border-color: rgba(138,92,255,.35); background: rgba(138,92,255,.05); }
.commit-all { display: inline-block; margin-top: 5px; padding: 8px 4px; font-size: 10px; color: var(--dv-commit-lit); }

/* ---- coach: the "between us" feed ---- */
.feed-links { display: flex; gap: 14px; }
.feed-links a { color: var(--dv-ink-dim); }
.feed-links a:hover { color: var(--dv-flame-lit); }
.eyebrow-warn { color: var(--dv-warn-lit); }
.eyebrow-teal { color: var(--dv-flame); }
.feed-src { font-size: 10px; color: var(--dv-ink-fade); }
.feed-line { margin-top: 3px; font-size: 13px; color: var(--dv-ink-body); line-height: 1.5; }
.feed-why { margin-top: 4px; font-size: 12px; color: var(--dv-ink-mute); line-height: 1.45; }
.feed-actions { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.feed-more { font-size: 10px; color: var(--dv-ink-fade); margin-left: auto; }
.feed-all { display: inline-block; margin-top: 6px; padding: 8px 4px; font-size: 10px; color: var(--dv-ink-fade); }
.feed-all:hover { color: var(--dv-flame-lit); }
/* quiet button: hairline, ink; the primary is the flame */
.gbtn {
    font-size: 13px; font-weight: 500; color: var(--dv-ink-body);
    background: none; border: 1px solid var(--dv-border); border-radius: var(--radius-input);
    padding: 10px 16px; min-height: 40px; cursor: pointer; white-space: nowrap;
}
.gbtn:hover { color: var(--dv-ink-hi); border-color: rgba(232,163,61,.4); }
/* the last turn, as a quiet doorway back into the thread */
.feed-last { display: block; padding: 2px 4px; }
.feed-last-t {
    display: block; margin-top: 2px; font-size: 12px; color: var(--dv-ink-dim);
    line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.feed-last:hover .feed-last-t { color: var(--dv-ink-body); }
.mind-pending { padding: 0 2px; }
.sprint-plan { font-size: 13px; color: var(--dv-ink-body); line-height: 1.5; }
.sprint-reps { margin-top: 4px; font-size: 10.5px; color: var(--dv-ink-fade); }

/* ---- coach Mind: the machinery as one calm index ---- */
.mind-insights { display: flex; flex-direction: column; gap: 10px; }
.mind-insight-t { font-size: 12.5px; color: var(--dv-ink-body); line-height: 1.5; }
.ev { margin-top: 3px; font-size: 10px; color: var(--dv-ink-fade); }
.mind-foot { margin-top: 11px; }
.mind-knows-head { padding: 0 4px; }

/* one row per machine: key · what it did · the way in.  The row IS the
   summary — it opens in place rather than costing a page. */
.mind-rows { padding: 6px 0; }
.mrow > summary {
    display: flex; align-items: center; gap: 11px; padding: 11px 18px;
    cursor: pointer; list-style: none;
}
.mrow > summary::-webkit-details-marker { display: none; }
.mrow + .mrow { border-top: 1px solid var(--dv-hairline); }
.mrow > summary:hover .mrow-a { color: var(--dv-flame-lit); }
.mrow-k { font-size: 10px; color: var(--dv-ink-fade); width: 52px; flex-shrink: 0; }
.mrow-t { flex: 1; font-size: 12.5px; color: var(--dv-ink-body); line-height: 1.4; }
.mrow-a { font-size: 10px; color: var(--dv-ink-fade); white-space: nowrap; }
.mrow[open] > summary .mrow-a { color: var(--dv-flame-lit); }
.mrow > *:not(summary) { padding: 0 18px 14px; }
.score-hint-inline { margin-left: 6px; }

/* conduct tier-1 numbers as a stat row — the floor is sized so the widest
   value ("3m 40s") still fits one row on a 375px phone */
.stat-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 8px;
    font-family: var(--font-mono); margin-top: 4px;
}
.stat-v { font-size: 14px; font-weight: 600; color: var(--dv-ink-hi); font-variant-numeric: tabular-nums; }
.construct-line-inline { margin-top: 12px; }
.construct-line-inline b { color: var(--dv-ink-mute); }

/* The spine: one time-pinned row per moment, receipt opens in place.  The
   rail is drawn once on the list; rows are plain grids so <summary> keeps
   its native toggle behaviour on iOS. */
.spine-list { position: relative; }
.spine-list::before {
    content: ""; position: absolute; left: 64px; top: 8px; bottom: 8px;
    width: 1px; background: var(--dv-border);
}
.spine-row {
    display: grid; grid-template-columns: 44px 20px 1fr; gap: 0 10px;
    cursor: pointer; list-style: none;
}
.spine-row::-webkit-details-marker { display: none; }
.spine-tail { display: grid; grid-template-columns: 44px 20px 1fr; gap: 0 10px; }
.sp-ts {
    font-family: var(--font-mono); font-size: 10.5px; color: var(--dv-ink-fade);
    text-align: right; padding-top: 1px; font-variant-numeric: tabular-nums;
}
.sp-rail { display: flex; justify-content: center; }
.sp-dot {
    width: 7px; height: 7px; border-radius: 50%; margin-top: 4px;
    flex-shrink: 0; position: relative;
}
.d-taken { background: var(--dv-good-lit); box-shadow: 0 0 8px rgba(0,210,190,.6); }
.d-partial { background: var(--dv-warn-lit); box-shadow: 0 0 8px rgba(255,190,77,.5); }
.d-missed { background: var(--dv-bad); box-shadow: 0 0 8px rgba(255,90,110,.6); }
.d-plain { background: var(--dv-ink-faint); }
.sp-body { margin-bottom: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sp-t { font-size: 12.5px; color: var(--dv-ink-body); line-height: 1.45; }
.sp-open {
    margin: 0 0 14px 74px; padding: 12px 14px; background: var(--dv-inset);
    border: 1px solid var(--dv-hairline); border-radius: 12px;
}
.spine-vetoed .sp-body { opacity: 0.45; }

.tagm {
    display: inline-flex; padding: 2px 8px; border-radius: var(--radius-tag); white-space: nowrap;
    font-family: var(--font-mono); font-size: 10px;
}
.t-taken { background: rgba(0,210,190,.14); color: var(--dv-good-lit); }
.t-partial { background: rgba(245,166,35,.15); color: var(--dv-warn-lit); }
.t-missed { background: rgba(255,90,110,.14); color: var(--dv-bad-lit); }
.t-borderline { background: rgba(255,240,214,.05); color: var(--dv-ink-mute); }

/* transcript tab — minimap pins every judged moment to its place in time */
.tr-tools { display: flex; align-items: center; gap: 10px; }
.tr-edge { font-size: 9.5px; color: var(--dv-ink-fade); }
.mm { flex: 1; height: 8px; border-radius: 5px; background: var(--dv-hearth); position: relative; }
.mm span { position: absolute; top: -2px; width: 3px; height: 12px; border-radius: 2px; }
.mm-taken { background: var(--dv-good-lit); box-shadow: 0 0 6px rgba(0,210,190,.7); }
.mm-partial { background: var(--dv-warn-lit); }
.mm-missed { background: var(--dv-bad); box-shadow: 0 0 6px rgba(255,90,110,.7); }
.srch {
    width: 170px; box-sizing: border-box; background: var(--dv-inset);
    border: 1px solid var(--dv-border); border-radius: var(--radius-chip); padding: 7px 11px;
    color: var(--dv-ink-body); font-family: var(--font-mono); font-size: 11px;
}
.srch:focus { outline: none; border-color: var(--dv-flame); }
.tr-body { min-width: 0; }
.tr-body .tagm { margin-top: 6px; }
.tr-list-tight { margin-top: 8px; gap: 8px; }
.tr-list-tight .tr-text { font-size: 12px; }
.tr-seg.dim { opacity: 0.55; }

/* ---- login / welcome — the wordmark at rest on the field ---- */
.login-wrap { display: flex; justify-content: center; padding-top: 64px; }
.login-card {
    width: 100%; max-width: 340px;
    background: var(--dv-card); border: 1px solid var(--dv-border);
    border-radius: 16px;
    padding: 26px 24px; display: flex; flex-direction: column; gap: 12px;
}
.login-mark {
    font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1;
    color: var(--dv-ink-hi); margin-bottom: 6px;
}
.login-input {
    background: var(--dv-inset); border: 1px solid var(--dv-border); border-radius: var(--radius-input);
    padding: 11px 13px; font-family: var(--font-mono); font-size: 12px; color: var(--dv-ink-body);
}
.login-input:focus { outline: none; border-color: var(--dv-flame); }
.login-error { font-family: var(--font-mono); font-size: 11px; color: var(--dv-bad-lit); }
.login-line { font-size: 18px; font-weight: 600; color: var(--dv-ink-hi); letter-spacing: -0.02em; line-height: 1.25; }
.login-sub { font-size: 13.5px; line-height: 1.55; color: var(--dv-ink-body); }
.login-google { display: block; text-align: center; text-decoration: none; padding: 12px 15px; font-size: 13.5px; }
.login-fine { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; color: var(--dv-ink-fade); text-decoration: none; }
.welcome-label { font-size: 12.5px; font-weight: 600; color: var(--dv-ink); }
.welcome-intake { color: var(--dv-ink-hi); }
textarea.login-input { font-family: var(--font-sans); font-size: 13px; line-height: 1.45; resize: vertical; }

/* ---- coach view: the human coach's one page ---- */
.cv-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid var(--dv-border); }
.cv-row:first-of-type { border-top: 0; }
.cv-k { flex: 1; font-size: 13px; color: var(--dv-ink-body); }
.cv-v { font-size: 12px; min-width: 34px; text-align: right; }
.cv-item { padding: 8px 0; border-top: 1px solid var(--dv-border); }
.cv-week-wrap { overflow-x: auto; }
.cv-week { width: 100%; border-collapse: collapse; font-size: 11px; }
.cv-week th { text-align: right; font-weight: 500; color: var(--dv-ink-fade); padding: 4px 4px; letter-spacing: 0.02em; white-space: nowrap; }
.cv-week th:first-child, .cv-week td:first-child { text-align: left; padding-left: 0; }
.cv-week td { text-align: right; padding: 5px 4px; border-top: 1px solid var(--dv-border); color: var(--dv-ink-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-today td { color: var(--dv-ink-hi); }

/* ---- small screens ---- */
@media (max-width: 430px) {
    .wrap { padding: 0 14px 32px; }
    /* four nav pills must not push the page sideways on a 375px phone */
    .site-nav { gap: 2px; }
    .site-nav a { padding: 6px 9px; }
    .gauge { width: 128px; height: 128px; }
    .gauge-hole { width: 98px; height: 98px; }
    .gauge-num { font-size: 38px; }
    .gauge-tick { transform-origin: 50% 58px; }
    .gauges { gap: 14px; }
    .tlrow { grid-template-columns: 46px 1fr auto; gap: 8px; }
    .tlsum, .tl-live, .tl-gap, .dict { padding-left: 0; margin-left: 0; }
    .report { margin-left: 0; }
    .pools { grid-template-columns: 1fr; }
}

/* motion discipline: breath, blink, pulse only; honor reduced motion */
@media (prefers-reduced-motion: reduce) {
    .glow-red, .glow-amber, .glow-teal, .aura-red, .aura-amber, .aura-teal,
    .now-dot, .tldot, .rd-red, .wm-live .wm-colon { animation: none; }
}

/* gauges page — 28d trend + no-go journal */
.gz-trend { display: grid; grid-template-columns: repeat(28, 1fr); gap: 3px; align-items: end; }
.gz-col { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.gz-trap { height: 10px; font-size: 8px; color: var(--dv-bad-lit); line-height: 10px; }
.gz-slot { height: 84px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.gz-fill { width: 70%; max-width: 10px; border-radius: 3px 3px 0 0; }
.gz-teal  { background: linear-gradient(180deg, #33ded0, #00d2be); }
.gz-amber { background: linear-gradient(180deg, #ffbe4d, #f5a623); }
.gz-red   { background: linear-gradient(180deg, #ff8a9a, #ff5a6e); box-shadow: var(--glow-red); }
.gz-ghost { width: 70%; max-width: 10px; height: 0; border-bottom: 2px dashed var(--dv-border-strong); align-self: flex-end; margin-bottom: 1px; }
.gz-day { font-family: var(--font-mono); font-size: 8.5px; color: var(--dv-ink-faint); height: 11px; white-space: nowrap; }
.gz-brake-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gz-brake-row .journal-input { min-height: 0; }
.gz-brake-row .chip { cursor: pointer; border: 1px solid var(--dv-border); background: none; color: var(--dv-ink-dim); padding: 6px 10px; }
.gz-brake-row .chip:hover { color: var(--dv-flame-lit); border-color: rgba(232,163,61,.4); }
a.gz-col { text-decoration: none; color: inherit; }
.gz-pastday {
    font-family: var(--font-mono); font-size: 11px; text-align: center;
    color: var(--dv-ink-dim);
}
.gz-pastday a { color: var(--dv-flame-lit); text-decoration: none; }
.nogo-list { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.nogo-row {
    display: flex; gap: 10px; align-items: baseline;
    font-size: 12.5px; line-height: 1.45; color: var(--dv-ink-body);
}
.nogo-date {
    font-family: var(--font-mono); font-size: 10px;
    font-variant-numeric: tabular-nums; color: var(--dv-ink-faint);
    flex: none;
}

/* coach page — library, threads, consolidation log */
.coach-thread { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--dv-border); }
.coach-thread:last-child { border-bottom: none; }
.coach-thread-title { font-weight: 600; color: var(--dv-ink-body); }
.coach-add { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.coach-add textarea { flex: 1; }
.coach-add input[type=file] { flex: 1; font-family: var(--font-mono); font-size: 11px; color: var(--dv-ink-fade); }
.coach-doc { padding: 10px 0; border-top: 1px solid var(--dv-border); display: flex; flex-direction: column; gap: 8px; }
.coach-doc-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.coach-doc-name { font-weight: 600; color: var(--dv-ink-body); overflow-wrap: anywhere; }
.coach-proposals { display: flex; flex-direction: column; gap: 8px; }
.coach-prop { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--dv-ink-body); }
.coach-prop input { margin-top: 3px; accent-color: var(--dv-flame); }
.coach-editor { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.coach-editor textarea { width: 100%; box-sizing: border-box; }
.coach-events { display: flex; flex-direction: column; gap: 6px; }
.coach-event { display: grid; grid-template-columns: 76px 1fr; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--dv-ink-body); }

/* coach chat — the conversation surface */
.backlink { font-family: var(--font-mono); font-size: 11px; color: var(--dv-ink-fade); text-decoration: none; }
.backlink:hover { color: var(--dv-flame-lit); }
.coach-mem-link { color: var(--dv-ink-fade); text-decoration: none; }
.coach-mem-link:hover { color: var(--dv-flame-lit); }
.coach-msgs { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 12px; min-height: 40vh; }
.coach-msg { max-width: 86%; padding: 10px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; color: var(--dv-ink-body); display: flex; flex-direction: column; gap: 3px; white-space: pre-wrap; overflow-wrap: anywhere; }
.coach-msg-user { align-self: flex-end; background: rgba(232,163,61,.09); border: 1px solid rgba(232,163,61,.24); border-bottom-right-radius: 6px; }
.coach-msg-coach { align-self: flex-start; background: var(--dv-card); border: 1px solid var(--dv-border); border-bottom-left-radius: 6px; }
.coach-msg-time { font-family: var(--font-mono); font-size: 9.5px; color: var(--dv-ink-faint); align-self: flex-end; }
.coach-say { display: flex; gap: 8px; align-items: flex-end; position: sticky; bottom: 0; padding: 10px 0 14px; background: linear-gradient(180deg, transparent, var(--dv-night) 30%); }
.coach-say textarea { flex: 1; }
.coach-chat-note { text-align: center; }

/* nightly reflection report + proposal gate */
.coach-prop-actions { display: flex; gap: 8px; }
.coach-reflection { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.coach-insight { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--dv-card); border: 1px solid var(--dv-border); border-radius: var(--radius-row); font-size: 13.5px; line-height: 1.45; color: var(--dv-ink-body); }
.coach-insight .meta { font-size: 11px; }

/* personal-block tag (life, not work) */
.tag-personal { color: var(--dv-ink-mute); border: 1px solid rgba(148,137,111,.35); }

/* weekly researcher trace */
.coach-query { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; background: rgba(255,240,214,.015); border: 1px solid var(--dv-border); border-radius: var(--radius-row); }
.coach-query code { font-family: var(--font-mono); font-size: 11px; color: var(--dv-flame-lit); overflow-wrap: anywhere; white-space: pre-wrap; }
.coach-query-result { font-family: var(--font-mono); font-size: 10.5px; color: var(--dv-ink-fade); white-space: pre-wrap; overflow-x: auto; max-height: 180px; overflow-y: auto; }

/* morning digest archive */
.coach-digest { margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--dv-ink-body); white-space: pre-wrap; }

/* ---- coach tabs + recharge list ---- */
.coach-tabs { display: flex; gap: 6px; font-size: 11px; }
.coach-tabs a { padding: 5px 11px; border-radius: var(--radius-chip); color: var(--dv-ink-dim); border: 1px solid transparent; }
.coach-tabs a:hover { color: var(--dv-flame-lit); }
.coach-tabs a.on { color: var(--dv-flame-lit); background: rgba(232,163,61,.1); border-color: rgba(232,163,61,.34); }
.recharge-escalation { font-size: 13px; margin-bottom: 8px; }
.recharge-slots > * + * { margin-top: 14px; }
.recharge-slot-title { font-size: 14px; color: var(--dv-ink); }
.recharge-slot-title a { color: var(--dv-flame-lit); text-decoration: underline; text-underline-offset: 3px; }
.recharge-slot-title .chip {
    margin-left: 6px; font-family: var(--font-mono); font-size: 10px;
    color: var(--dv-ink-mute); border: 1px solid rgba(148,137,111,.4);
    border-radius: var(--radius-chip); padding: 1px 7px; vertical-align: 2px;
}
.recharge-why { font-size: 12.5px; color: var(--dv-ink-body); margin-top: 2px; }
.recharge-usual { font-size: 12.5px; margin-top: 6px; }
.recharge-bucket-label { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--dv-flame); margin: 14px 0 6px; }
.recharge-searched { margin-top: 12px; font-size: 10.5px; }

/* between us — the conversation compressed by day (folds) */
.chat-day { margin: 2px 0; }
.chat-day > summary { font-family: var(--font-mono); font-size: 11.5px; }
.chat-day .coach-msgs { margin-top: 8px; }
.chat-day-head { font-size: 11.5px; color: var(--dv-ink-fade); margin-top: 6px; }

/* ---- gauges page: three rings as tabs, evidence below ----
   Tap a ring, its "why" opens; one at a time.  Only the selected ring
   breathes (one glowing element per screen); the others sit back, still. */
.gauges-3 { gap: 0; margin: 6px 0 0; align-items: flex-start; }
.gauges-3 .gauge { width: 100px; height: 100px; }
.gauges-3 .gauge-hole { width: 76px; height: 76px; }
.gauges-3 .gauge-num { font-size: 29px; }
/* two kinds of number, visibly apart: risk (keep low) | performance (keep high) */
.gz-group { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gz-group + .gz-group { border-left: 1px solid var(--dv-border-strong); margin-left: 10px; padding-left: 10px; }
.gz-group-rings { display: flex; gap: 10px; }
.gz-group-lbl { margin: 0; }
.gauges-3 .gauge-lbl { font-size: 10px; margin-top: 3px; }
.gz-tab {
    background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
    font: inherit; color: inherit; opacity: .68; transition: opacity .2s;
    -webkit-tap-highlight-color: transparent;
}
.gz-tab[aria-selected="true"] { opacity: 1; }
.gz-tab[aria-selected="false"] .gauge { animation: none; box-shadow: none; }
.gz-tab[aria-selected="false"] .gauge-num { animation: none; text-shadow: none; }
.gz-tab[aria-selected="true"] .gauge-lbl { color: var(--dv-flame-lit); }
.gz-tab-mark { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.gz-tab[aria-selected="true"] .gz-tab-mark { background: var(--dv-flame-lit); box-shadow: 0 0 8px rgba(232,163,61,.7); }
.gz-ev-head {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--dv-ink-faint); text-align: center;
}
.gz-habits .brow { grid-template-columns: 1fr 92px 44px; }
.gz-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; margin-top: 8px; }
.gz-week .gz-slot { height: 64px; }
.gz-week .gz-fill, .gz-week .gz-ghost { max-width: 22px; }
.gz-hrs { font-family: var(--font-mono); font-size: 9.5px; color: var(--dv-ink-dim); height: 12px; font-variant-numeric: tabular-nums; }
.gz-trend-lbl { margin: 12px 0 4px; }
.gz-trend-lbl:first-of-type { margin-top: 0; }
.gz-trend-head .card-title { white-space: nowrap; }

/* ---- meeting start: the accountability screen (2026-09-14, parallel session) ---- */
.review-list { display: flex; flex-direction: column; gap: 14px; }
.review-row { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--dv-border); }
.review-row:first-child { padding-top: 0; border-top: 0; }
.review-text { margin: 0; font-size: 14px; color: var(--dv-ink-hi); line-height: 1.45; }
.review-src { margin: 0; font-size: 10px; color: var(--dv-ink-faint); }
.review-why {
    background: var(--dv-inset); border: 1px solid var(--dv-border); border-radius: var(--radius-input);
    padding: 9px 12px; font-family: var(--font-sans); font-size: 12.5px; color: var(--dv-ink-body);
}
.review-why::placeholder { color: var(--dv-ink-faint); }
.review-why:focus { outline: none; border-color: var(--dv-flame); }
.review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.gbtn-quiet { color: var(--dv-ink-faint); }

/* ---- your word: the kept-rate line (2026-09-14) ---- */
.kept-line { margin: 0 0 10px; font-size: 14px; color: var(--dv-ink-hi); }
.kept-line .mono { font-weight: 600; }
