felixm
1c81eb1b50
The active view's fast-path repainted only the status band, so the "now" window, per-window buckets, and their times froze at the moment the active screen first rendered — only the status-band switch count and the countdown kept moving. Give the evidence band a stable id and repaint it every tick via updateActiveEvidence, mirroring updateActiveDrift. The evidence band's own "context switches" readout duplicated the live count in the status band, so remove it (and its now-dead .switches CSS rule). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
130 lines
4.2 KiB
CSS
130 lines
4.2 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
--bg: #0d0f14;
|
|
--panel: #161922;
|
|
--line: #232733;
|
|
--ink: #e6e8ee;
|
|
--ink-dim: #8b91a6;
|
|
--ok: #34d399;
|
|
--warn: #f0b429;
|
|
--danger: #f06070;
|
|
--accent: #6b7280; /* default / locked */
|
|
}
|
|
|
|
/* The single state-driven knob: only --accent changes per state. */
|
|
[data-state="planning"] { --accent: #4c6ef5; }
|
|
[data-state="active"] { --accent: #34d399; }
|
|
[data-state="nudge"] { --accent: #f0b429; }
|
|
[data-state="drift"] { --accent: #f06070; }
|
|
[data-state="review"] { --accent: #a78bfa; }
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
font: 15px/1.5 system-ui, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
}
|
|
|
|
main { max-width: 560px; margin: 7vh auto; padding: 0 20px; }
|
|
|
|
h1 {
|
|
font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
|
|
color: var(--ink-dim); margin: 0 0 14px 6px;
|
|
}
|
|
|
|
/* The HUD card: a stack of bands. */
|
|
.card {
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.band { border-top: 1px solid var(--line); padding: 16px 20px; }
|
|
.band:first-child { border-top: 0; }
|
|
|
|
.statusband {
|
|
display: flex; align-items: baseline; gap: 12px;
|
|
border-top: 3px solid var(--accent);
|
|
background: color-mix(in srgb, var(--accent) 8%, var(--panel));
|
|
}
|
|
|
|
.pill {
|
|
font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
|
|
font-weight: 700; color: var(--accent);
|
|
}
|
|
.status-meta { font-size: 13px; color: var(--ink-dim); }
|
|
|
|
.timer {
|
|
font-size: 52px; font-weight: 700; line-height: 1;
|
|
font-variant-numeric: tabular-nums; color: var(--ink);
|
|
}
|
|
|
|
.action { font-size: 19px; font-weight: 600; }
|
|
.meta { color: var(--ink-dim); margin: 4px 0 0; }
|
|
|
|
label { display: block; font-size: 12px; color: var(--ink-dim); margin: 14px 0 5px; }
|
|
label:first-child { margin-top: 0; }
|
|
input {
|
|
width: 100%; padding: 10px 12px;
|
|
background: var(--bg); border: 1px solid var(--line);
|
|
border-radius: 8px; color: var(--ink); font: inherit;
|
|
}
|
|
input:focus { outline: 0; border-color: var(--accent); }
|
|
|
|
.btn {
|
|
margin-top: 16px; padding: 10px 16px; border: 0; border-radius: 8px;
|
|
font: inherit; font-weight: 600; cursor: pointer;
|
|
}
|
|
.btn-primary { background: var(--accent); color: #0d0f14; }
|
|
.btn-ghost { background: var(--line); color: var(--ink); }
|
|
.btn:disabled { background: var(--line); color: var(--ink-dim); cursor: not-allowed; }
|
|
|
|
/* Drift/nudge actions live in the status band; lay them out below the text. */
|
|
.band-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.band-actions .btn { margin-top: 0; padding: 7px 12px; }
|
|
|
|
.drift-reason, .nudge-msg { color: var(--ink); margin: 4px 0 0; font-weight: 400; }
|
|
.statusband.col { flex-direction: column; align-items: stretch; gap: 6px; }
|
|
|
|
/* Evidence band */
|
|
.evidence .now { font-size: 13px; color: var(--ink); }
|
|
.health-ok { color: var(--ok); }
|
|
.health-bad { color: var(--warn); }
|
|
.buckets { list-style: none; padding: 0; margin: 10px 0 0; font-size: 13px; color: var(--ink-dim); }
|
|
.buckets li {
|
|
display: flex; justify-content: space-between; padding: 2px 0;
|
|
font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Review summary band */
|
|
.summary { font-size: 14px; }
|
|
.summary-row {
|
|
display: flex; justify-content: space-between; padding: 3px 0;
|
|
font-variant-numeric: tabular-nums; color: var(--ink-dim);
|
|
}
|
|
.summary-row span:last-child { color: var(--ink); font-family: ui-monospace, monospace; }
|
|
|
|
/* Planning: today's tasks as clickable seed chips */
|
|
.tasklist { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.task-chip {
|
|
padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px;
|
|
background: var(--bg); color: var(--ink); font: inherit; font-size: 13px;
|
|
cursor: pointer; text-align: left;
|
|
}
|
|
.task-chip:hover { border-color: var(--accent); color: var(--accent); }
|
|
|
|
/* Planning: standing-profile grounding indicator */
|
|
.knowline { opacity: 0.85; }
|
|
.reflectline { opacity: 0.85; }
|
|
.link {
|
|
background: none; border: none; padding: 0; font: inherit; font-size: 12px;
|
|
color: var(--accent); cursor: pointer; text-decoration: underline;
|
|
}
|
|
|
|
.enforce-note { opacity: 0.8; font-size: 0.85em; }
|
|
.enforce-toggle { display: flex; align-items: center; gap: 0.4em; }
|
|
.hint { opacity: 0.7; font-size: 0.85em; margin: 0.2em 0 0.6em; }
|