:root {
  --bg: #0d2828;
  --bg-deep: #091d1d;
  --surface: #102f2f;
  --surface-2: #0a2222;
  --line: rgba(168, 222, 222, 0.18);
  --line-soft: rgba(168, 222, 222, 0.09);
  --text: #f8fafa;
  --soft: #a8dede;
  --muted: #7daaaa;
  --teal: #32b8b8;
  --teal-light: #68c8c8;
  --gold: #c8a84b;
  /* WBR-351. David: "the bars on the graph on the analytics page are still
     missing." They were never missing. Five rules on this branch paint with
     --ember and nothing on this branch has ever defined it, so every bar was
     drawn at the right width and the right height and filled with nothing. The
     variable was added on 31 August in the same divergence that took his search
     and his standing panel; main was rebuilt without the palette entry and kept
     every rule that depends on it.

     This is the failure mode of an undefined custom property and it is worth
     naming: it does not throw, it does not warn, and it does not fall back. The
     declaration is simply dropped, so a bar keeps its box and loses its colour
     and the page looks like it has no data rather than like it is broken. I
     measured the bar heights earlier tonight, saw real numbers, and told him the
     chart was fine. Geometry is not paint. */
  --ember: #e2893f;
  --ember-soft: rgba(226, 137, 63, 0.13);
  --green: #4ade80;
  --danger: #ef4444;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

.wb-header {
  position: sticky; top: 0; z-index: 20;
  min-height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
  padding: 9px max(24px, calc((100vw - 1512px) / 2));
  border-bottom: 1px solid var(--line); background: rgba(9, 29, 29, 0.97); backdrop-filter: blur(12px);
}
.wb-brand { display: flex; align-items: center; gap: 10px; width: max-content; }
.wb-brand img { width: 34px; height: 34px; border-radius: 7px; }
.wb-brand strong, .wb-brand small { display: block; }
.wb-brand small { margin-bottom: 2px; color: var(--teal-light); font: 700 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.wb-brand strong { font-size: 16px; line-height: 1.15; font-weight: 800; }
.wb-header nav { display: flex; align-items: center; gap: 6px; }
.wb-header nav a, .quiet-button, .primary-button, .icon-action {
  min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: transparent;
  color: var(--soft); cursor: pointer; font-weight: 700;
}
.wb-header nav a.active { border-color: rgba(50, 184, 184, .45); background: rgba(50, 184, 184, .12); color: var(--teal-light); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 6px; }
.quiet-button:hover, .icon-action:hover, .wb-header nav a:hover { border-color: var(--teal); color: var(--text); }
.primary-button { border-color: var(--teal); background: var(--teal); color: #062121; font-weight: 800; }
.primary-button svg, .quiet-button svg { width: 15px; }
button:disabled { opacity: .55; cursor: wait; }

main { width: min(1560px, 100%); margin: 0 auto; padding: 22px 24px 64px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.18; }
h1 { margin-bottom: 5px; font-size: 27px; font-weight: 800; }
h2 { margin-bottom: 0; font-size: 16px; font-weight: 800; }
h3 { margin-bottom: 4px; font-size: 14px; font-weight: 800; }
.eyebrow { margin-bottom: 5px; color: var(--teal-light); font: 800 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; }

.auth-card, .error-card, .loading-card { width: min(420px, 100%); margin: 7vh auto 0; padding: 28px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.auth-card h1, .error-card h1 { font-size: 24px; }
.auth-card p, .error-card p { color: var(--muted); }
.auth-card label { display: block; margin: 18px 0 6px; color: var(--soft); font-weight: 700; }
.auth-card input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #071a1a; color: var(--text); }
.auth-card input:focus { outline: 0; border-color: var(--teal); }
.auth-card .primary-button { width: 100%; margin-top: 10px; }
.form-message { min-height: 20px; margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.form-message.error, .error-card { color: var(--danger); }

.page-intro { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.page-intro p:last-child { margin-bottom: 0; color: var(--muted); font-size: 12px; }
/* WBR-350. The open count, and the sentence saying what it counts. */
.board-count { flex: 0 0 auto; display: grid; justify-items: end; gap: 2px; text-align: right; }
.board-count-figure { font: 800 26px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--teal-light); }
.board-count-label { max-width: 24ch; color: var(--muted); font-size: 11px; font-weight: 600; }
.board-count-sub { max-width: 28ch; color: var(--muted); font-size: 11px; opacity: 0.8; }
@media (max-width: 640px) { .page-intro { flex-direction: column; align-items: start; } .board-count { justify-items: start; text-align: left; } }
.command-strip { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 12px; }
.health-lights { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.health-light { display: grid; grid-template-columns: 13px minmax(0, 1fr); gap: 7px; min-width: 0; padding: 8px; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(6, 22, 22, .35); }
.health-lamp { width: 11px; height: 11px; margin-top: 3px; border-radius: 999px; background: var(--muted); box-shadow: 0 0 0 3px rgba(125, 170, 170, .12); }
.health-light.green .health-lamp { background: var(--green); box-shadow: 0 0 0 3px rgba(74, 222, 128, .12); }
.health-light.amber .health-lamp { background: var(--gold); box-shadow: 0 0 0 3px rgba(200, 168, 75, .12); }
.health-light.red .health-lamp, .health-light.failed .health-lamp { background: var(--danger); box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); }
.health-light strong, .health-light small { display: block; }
.health-light strong { font-size: 10px; line-height: 1.2; }
.health-light small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.25; }
.grade-panel { position: relative; }
.grade-mark { min-width: 42px; min-height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--teal-light); font-size: 24px; font-weight: 900; }
.grade-a, .grade-b { color: var(--green); border-color: rgba(74, 222, 128, .42); }
.grade-c { color: var(--gold); border-color: rgba(200, 168, 75, .42); }
.grade-d, .grade-f { color: var(--danger); border-color: rgba(239, 68, 68, .42); }
.grade-summary { display: grid; gap: 2px; }
.grade-form { display: grid; grid-template-columns: 126px minmax(0, 1fr) auto; gap: 6px; margin-top: 10px; }
.grade-form select, .grade-form input { min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-deep); color: var(--text); padding: 7px 8px; font-size: 11px; }
.grade-form .quiet-button { min-height: 31px; padding: 0 8px; font-size: 10px; white-space: nowrap; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 12px; align-items: start; }
.panel { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.panel-wide { grid-column: 1 / -1; }
.daily-report-panel { border-color: rgba(50, 184, 184, .42); }
.daily-report { display: grid; gap: 16px; }
.daily-report-day { display: grid; gap: 8px; }
.daily-report-day + .daily-report-day { padding-top: 15px; border-top: 1px solid var(--line); }
.daily-report-day-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.daily-report-day-heading h3 { margin: 0; color: var(--text); font-size: 17px; }
.daily-report-day-heading time { color: var(--muted); font: 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.daily-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.report-period { min-width: 0; padding: 13px; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(6, 22, 22, .35); }
.report-period header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.report-period header h3 { margin: 0; color: var(--teal-light); font-size: 15px; }
.report-period-meta { display: grid; justify-items: end; gap: 4px; text-align: right; }
.report-period-meta time { color: var(--muted); font: 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.report-period p { margin: 0; color: var(--soft); font-size: 12px; }
.report-period ul { display: grid; gap: 5px; margin: 9px 0 0; padding-left: 18px; color: var(--soft); font-size: 12px; }
.report-period li strong { color: var(--text); }
.report-period .report-next { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft); color: var(--teal-light); font-weight: 700; }
.report-period .report-unknown { margin-top: 8px; color: var(--gold); }
.report-period ol.report-passes { display: grid; gap: 4px; margin: 9px 0 0; padding: 8px 0 0 18px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 11px; }
.report-period ol.report-passes li.is-latest { color: var(--soft); }
.report-period ol.report-passes li.is-latest > strong { color: var(--teal-light); }
.report-period ol.report-passes time { color: var(--muted); font: 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.report-period ol.report-passes .report-pass-summary { color: var(--muted); }
.report-public-actions { display: grid; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-soft); }
.report-public-actions > strong { color: var(--text); font-size: 11px; }
.report-public-actions a { display: flex; align-items: center; min-height: 34px; padding: 7px 9px; border: 1px solid rgba(50, 184, 184, .35); border-radius: 7px; background: rgba(50, 184, 184, .08); color: var(--teal-light); font-size: 11px; font-weight: 800; line-height: 1.35; text-decoration: none; }
.report-public-actions a:hover, .report-public-actions a:focus-visible { border-color: var(--teal); background: rgba(50, 184, 184, .16); color: var(--text); outline: none; }
.attention-panel { border-color: rgba(200, 168, 75, .42); }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.count-badge { min-width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(200, 168, 75, .42); border-radius: 999px; color: var(--gold); font-size: 11px; font-weight: 800; }
.stack-list, .journal-list { display: grid; gap: 7px; }
.empty-state { margin: 0; padding: 12px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 12px; }
.update-card, .journal-entry { padding: 11px 12px; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(6, 22, 22, .35); }
.update-card p, .journal-entry p { margin: 4px 0 0; color: var(--soft); font-size: 12px; white-space: pre-wrap; }
.update-meta { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 7px; color: var(--muted); font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
.update-meta span, .update-meta time { white-space: nowrap; }
.update-meta .due-time { color: var(--gold); }
.record-timestamp { margin-top: 7px !important; padding-top: 6px; border-top: 1px solid var(--line-soft); color: var(--muted) !important; font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace !important; }
.update-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.update-actions button { min-height: 29px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--soft); cursor: pointer; font-size: 11px; font-weight: 700; }
.update-actions button:hover { border-color: var(--teal); color: var(--text); }
.outcome-actions { justify-content: flex-end; }
.outcome-actions button { width: 30px; padding: 0; }
.outcome-actions svg { width: 14px; }
.inline-edit { display: grid; gap: 7px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.inline-edit input, .inline-edit textarea { width: 100%; padding: 8px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-deep); color: var(--text); }
.inline-edit textarea { resize: vertical; }

.update-card p.clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.body-toggle { margin-top: 6px; min-height: 22px; padding: 0 6px; border: 0; background: transparent; color: var(--teal-light); cursor: pointer; font-size: 11px; font-weight: 700; }
.body-toggle:hover { text-decoration: underline; }
.panel-subtitle { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
#diagnostics-panel .update-card { opacity: .82; }
#diagnostics-panel .update-card:hover { opacity: 1; }

.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.module-card { min-width: 0; padding: 10px 11px; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(6, 22, 22, .35); }
.module-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.module-card-heading h3 { margin: 0; }
.status-chip { flex: none; padding: 2px 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--teal-light); font: 700 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.module-card p { margin: 3px 0 0; color: var(--soft); font-size: 11px; }
.module-card p strong { color: var(--muted); font-weight: 700; }
.module-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; }
.module-links a { color: var(--teal-light); font-size: 10px; font-weight: 800; }
.module-links a:hover { text-decoration: underline; }
.module-card.client-needs_review { border-color: rgba(200, 168, 75, .5); }
.module-card.client-current { border-color: rgba(74, 222, 128, .3); }
.journal-panel { align-self: stretch; }
.journal-panel .journal-entry p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.panel-actions { display: flex; gap: 5px; }
.panel-actions .quiet-button { min-height: 30px; padding: 0 8px; font-size: 10px; }

.journal-form { margin-bottom: 12px; padding: 13px; border: 1px solid var(--teal); border-radius: 8px; background: var(--bg-deep); }
.journal-form .form-row { display: grid; grid-template-columns: 150px 1fr; gap: 8px; }
.journal-form input, .journal-form textarea, .journal-form select { width: 100%; border: 1px solid var(--line); border-radius: 6px; background: #071a1a; color: var(--text); padding: 9px 10px; }
.journal-form textarea { margin-top: 8px; resize: vertical; }
.form-actions { display: flex; gap: 8px; margin-top: 8px; }
.journal-entry header { display: flex; justify-content: space-between; gap: 10px; }
.journal-entry time { color: var(--muted); font-size: 10px; white-space: nowrap; }
.journal-entry .journal-type { color: var(--gold); font-size: 10px; font-weight: 800; text-transform: uppercase; }

.todo-main { width: min(1080px, 100%); padding-top: 22px; }
.todo-intro { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.todo-intro h1 { margin-bottom: 0; }
.todo-intro p:last-child { max-width: 720px; margin: 5px 0 0; color: var(--muted); font-size: 12px; }
/* WBR-351. Standing runs the full width under the quadrants: it is a different
   kind of thing, not a fifth quadrant. */
.standing-panel { grid-column: 1 / -1; border-style: dashed; }
.standing-panel .quadrant-label { font-variant-numeric: tabular-nums; }

/* WBR-351. The search box, rebuilt from the 31 August original. */
.todo-toolbar { display: flex; gap: 10px; align-items: center; margin: 0 0 12px; }
.todo-search { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: inherit; font: inherit; }
.todo-search-count { flex: 0 0 auto; color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
@media (max-width: 640px) { .todo-search-count { display: none; } }
.todo-owner-tabs { display: flex; gap: 7px; margin-bottom: 6px; }
.todo-count-legend { margin: 0 0 12px; color: var(--muted); font-size: 12px; font-weight: 600; }
.todo-count-legend:empty { display: none; }
.todo-owner-tab { min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--soft); cursor: pointer; font-weight: 800; }
.todo-owner-tab span { min-width: 22px; display: inline-grid; place-items: center; margin-left: 6px; padding: 2px 6px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font: 800 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.todo-owner-tab.active { border-color: rgba(50, 184, 184, .55); background: rgba(50, 184, 184, .13); color: var(--teal-light); }
.todo-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.todo-quadrant { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.todo-quadrant[data-quadrant="Q1"] { border-color: rgba(200, 168, 75, .45); }
.todo-quadrant-heading { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.todo-quadrant-heading h2 { color: var(--text); }
.todo-quadrant-heading p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.quadrant-label { color: var(--teal-light); font: 800 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.todo-project { margin-top: 7px; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(6, 22, 22, .35); overflow: hidden; }
.todo-project summary { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; cursor: pointer; color: var(--soft); font-weight: 800; list-style: none; }
.todo-project summary::-webkit-details-marker { display: none; }
.todo-project summary::after { content: '+'; color: var(--muted); font-size: 17px; }
.todo-project[open] summary::after { content: '\2212'; }
.todo-project[open] summary { border-bottom: 1px solid var(--line-soft); color: var(--text); }
.project-count { flex: none; color: var(--muted); font: 800 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.todo-project-body { padding: 0 9px 8px; }
/* WBR-364. The Board row's own furniture, ported from the branch main was
   rebuilt without. Deliberately NOT copied verbatim: the original painted with
   --ink-soft and --accent, and neither has ever been defined on either branch,
   so the badge and the reference tag were losing their text colour there too.
   An undefined custom property drops the declaration silently, which is exactly
   what made the Analytics bars invisible for weeks. Mapped onto the palette this
   page actually has. */
.queue-task { padding: 9px 5px; border-top: 1px solid var(--line-soft); }
.queue-task-head { display: flex; gap: 8px; align-items: baseline; }
.queue-task-head strong { flex: 1; min-width: 0; }
.priority-badge { flex: 0 0 auto; min-width: 22px; padding: 1px 6px; border-radius: 999px; background: var(--line-soft); color: var(--muted); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; }
.priority-badge[data-band="next"] { background: var(--teal); color: var(--bg-deep); }
.priority-badge[data-band="horizon"] { background: transparent; border: 1px solid var(--line); }
.queue-task-ref { flex: 0 0 auto; padding: 1px 5px; border-radius: 4px; background: var(--line-soft); color: var(--soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .04em; }
.queue-task-dead { opacity: .62; }
.queue-task-dead .queue-task-head strong { text-decoration: line-through; }
.queue-task-dead-tag { flex: 0 0 auto; padding: 1px 6px; border-radius: 999px; background: var(--line-soft); color: var(--ember); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.queue-task-done { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; padding: 0; border: 1.5px solid var(--line); border-radius: 5px; background: transparent; cursor: pointer; }
.queue-task-done:hover { border-color: var(--teal); background: rgba(50, 184, 184, .14); }
.queue-task-done:disabled { opacity: .4; cursor: default; }
.last-moved { opacity: .55; font-size: 11px; }
.last-moved.stale { opacity: 1; color: var(--ember); }
.needs-from { opacity: .95; font-weight: 700; }
.waiting-on { opacity: .75; font-style: italic; }
.card-open-link { display: inline-block; margin-top: 8px; padding: 6px 14px; border: 1px solid var(--ember); border-radius: 999px; color: var(--ember); font-size: 13px; font-weight: 700; }
.card-open-link:hover { background: var(--ember-soft); }
.queue-task-open { margin-top: 6px; padding: 4px 12px; font-size: 12px; }
.queue-task small a { color: var(--teal-light); text-decoration: underline; }
.queue-task:first-child { border-top: 0; }
.queue-task strong, .queue-task small { display: block; }
.queue-task strong { color: var(--text); font-size: 12px; }
.queue-task small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.queue-task .task-thread { margin-top: 7px; padding-left: 0; }
.todo-document { display: grid; gap: 12px; }
.todo-section { padding: 15px 16px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.section-title-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin-bottom: 5px; }
.section-title { margin: 0; padding: 2px 4px; border: 0; background: transparent; color: var(--teal-light); font-size: 15px; font-weight: 800; outline: none; }
.section-title:focus { background: var(--bg-deep); box-shadow: inset 0 -1px var(--teal); }
.section-controls, .task-controls { display: flex; gap: 2px; opacity: .35; }
.todo-section:hover .section-controls, .task-row:hover .task-controls, .section-controls:focus-within, .task-controls:focus-within { opacity: 1; }
.section-controls button, .task-controls button { width: 28px; height: 28px; border: 0; border-radius: 5px; display: grid; place-items: center; background: transparent; color: var(--muted); cursor: pointer; }
.section-controls button:hover, .task-controls button:hover { background: var(--surface-2); color: var(--text); }
.section-controls svg, .task-controls svg { width: 14px; }
.task-list { display: grid; }
.task-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 5px; min-height: 36px; border-top: 1px solid var(--line-soft); }
.task-check { appearance: none; width: 18px; height: 18px; margin: 0 0 0 2px; border: 2px solid var(--muted); border-radius: 4px; display: grid; place-items: center; cursor: pointer; }
.task-check:checked { border-color: var(--teal); background: var(--teal); }
.task-check:checked::after { content: '\2713'; color: #071f1f; font-size: 13px; font-weight: 900; }
.task-title { min-width: 0; padding: 6px 5px; border: 0; background: transparent; color: var(--text); outline: 0; line-height: 1.4; }
.task-title:focus { background: var(--bg-deep); box-shadow: inset 0 -1px var(--teal); }
.task-row.done .task-title { color: var(--muted); text-decoration: line-through; }
.task-add { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 5px; border-top: 1px solid var(--line-soft); }
.task-add span { color: var(--muted); text-align: center; font-size: 17px; }
.task-add input { min-height: 35px; padding: 4px 5px; border: 0; background: transparent; color: var(--text); outline: 0; }
.task-add input:focus { background: var(--bg-deep); box-shadow: inset 0 -1px var(--teal); }
.task-add input::placeholder { color: var(--muted); }

/* The instruction thread. WBR-321. The + matches the one that adds a task,
   because David asked for the same affordance and a second grammar for the
   same gesture is a thing to learn rather than a thing to use. */
.task-item { border-top: 1px solid var(--line-soft); }
.task-item .task-row { border-top: 0; }
.task-thread { display: grid; gap: 6px; padding: 0 0 6px 33px; }
.task-note { padding: 7px 9px; border-left: 2px solid var(--line); border-radius: 0 6px 6px 0; background: var(--surface-2); }
.task-note.from-workerbee { border-left-color: var(--teal); }
.task-note-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 3px; font-size: 11px; color: var(--muted); }
.task-note-meta strong { color: var(--soft); font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.task-note-waiting { color: var(--gold); }
.task-note-body { margin: 0; color: var(--text); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-note-add { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 5px; }
.task-note-plus { grid-column: 1; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.task-note-plus:hover, .task-note-label:hover { background: var(--surface-2); color: var(--text); }
.task-note-label { grid-column: 2; justify-self: start; padding: 3px 6px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 12px; text-align: left; cursor: pointer; }
.task-note-form { grid-column: 1 / -1; display: grid; gap: 6px; padding-top: 4px; }
.task-note-box { width: 100%; padding: 8px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-deep); color: var(--text); font-size: 13px; line-height: 1.5; resize: vertical; outline: 0; }
.task-note-box:focus { border-color: var(--teal); }
.task-note-actions { display: flex; gap: 6px; }
.task-note-actions .small { min-height: 30px; padding: 4px 10px; font-size: 12px; }

.toast { position: fixed; right: 18px; bottom: 18px; z-index: 60; max-width: min(380px, calc(100vw - 36px)); padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--text); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); font-size: 12px; }
.toast.error { border-color: var(--danger); }

@media (max-width: 900px) {
  .command-strip { grid-template-columns: 1fr; }
  .health-lights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .panel-wide { grid-column: auto; }
  .module-grid { grid-template-columns: 1fr; }
  .daily-report-grid { grid-template-columns: 1fr; }
  .todo-board { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .wb-header { min-height: 58px; grid-template-columns: 1fr auto; padding: 7px 12px; }
  .wb-header nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .header-actions { grid-column: 2; grid-row: 1; }
  .wb-brand img { width: 31px; height: 31px; }
  .wb-brand small { font-size: 8px; }
  .wb-brand strong { font-size: 14px; }
  .wb-header nav a { min-height: 32px; padding: 0 9px; font-size: 12px; }
  .wb-header nav { gap: 3px; }
  .header-actions { gap: 3px; }
  .header-actions .quiet-button { min-height: 32px; padding: 0 8px; font-size: 11px; }
  main { padding: 15px 12px calc(64px + env(safe-area-inset-bottom)); }
  h1 { font-size: 23px; }
  .page-intro { margin-bottom: 11px; }
  .panel { padding: 13px 12px; }
  .health-lights { grid-template-columns: 1fr; }
  .grade-form { grid-template-columns: 1fr; }
  .journal-form .form-row { grid-template-columns: 1fr; }
  .todo-intro { align-items: center; margin-bottom: 10px; }
  .todo-intro .eyebrow { display: none; }
  .todo-intro h1 { font-size: 22px; }
  .todo-intro .quiet-button { min-width: 40px; min-height: 34px; padding: 0 9px; }
  .todo-section { padding: 12px 10px 9px; }
  .section-title { font-size: 14px; }
  .task-controls { opacity: .3; }
  .task-row { min-height: 38px; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Analytics is deliberately dependency-free. The recorded snapshots are the
   source of truth, and these columns make their movement visible. */
.analytics-note { color: var(--muted); margin: 0 0 14px; }
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.analytics-card { padding: 15px; }
.analytics-card small { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; }
.analytics-card strong { display: block; margin: 6px 0 4px; font-size: 30px; font-weight: 800; color: var(--ember); letter-spacing: -.02em; }
.analytics-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.analytics-trend { margin-bottom: 18px; padding: 20px; }
.analytics-trend h2 { margin: 0 0 4px; font-size: 17px; }
.analytics-sub { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.trend-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.period-tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.period-tab { padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.period-tab:hover { color: var(--text); }
.period-tab.active { background: var(--ember-soft); color: var(--ember); }
.bar-chart { display: flex; align-items: flex-end; justify-content: flex-start; gap: 2px; overflow-x: auto; padding: 4px 0 0; border-bottom: 1px solid var(--line); }
.bar-col { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 7px; width: 34px; padding-bottom: 8px; }
.bar-plot { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; width: 100%; height: 132px; }
.bar-fill { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; border-radius: 2px 2px 0 0; background: var(--ember); }
.bar-part { display: block; width: 100%; border-radius: 0 0 3px 3px; background: var(--teal); }
.bar-value { color: var(--text); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.bar-label { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.demerit-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.demerit-row { padding: 10px 12px; border-left: 3px solid var(--warm, #c2410c); border-radius: 0 6px 6px 0; background: var(--surface-2); }
.demerit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.demerit-date { color: var(--muted); font-size: 12px; }
.demerit-weight { color: var(--warm, #c2410c); font-size: 13px; font-weight: 700; }
.demerit-reason { margin: 0; font-size: 13px; line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) { .bar-fill { transition: height .25s ease; } }
@media (max-width: 560px) {
  .bar-chart { gap: 1px; }
  .bar-col { width: 26px; }
  .bar-plot { height: 104px; }
  .bar-value { font-size: 11px; }
  .bar-label { font-size: 10px; }
}

/* WBR-337. New since the last visit is a mark on work that is shown either
   way. It is never the reason a row exists, because the marker that decides it
   moves every time anybody opens the page. */
.stack-list > .is-new { border-left: 2px solid var(--teal); padding-left: 9px; }
.stack-list > .is-new::after { content: 'new'; margin-left: 6px; color: var(--teal); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

/* WBR-347. The capture strip: what has been written down and not yet given a
   quadrant. It sits above the quadrants because that is where the waiting is
   visible, and it stays quiet when it is empty. */
.capture-strip { margin-bottom: 14px; padding: 14px 14px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.capture-strip.has-captures { border-color: rgba(200, 168, 75, .45); }
.capture-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.capture-head h2 { margin: 0; font-size: 17px; }
.capture-sub { max-width: 62ch; margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.capture-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.capture-form label { display: block; margin-bottom: 4px; color: var(--teal-light); font: 800 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.capture-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.capture-field input { min-height: 38px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-deep); color: var(--text); outline: 0; }
.capture-field input:focus { border-color: var(--teal); }
.capture-field input::placeholder { color: var(--muted); }
.capture-field .primary-button { min-height: 38px; padding: 0 14px; }
.capture-list { margin-top: 12px; display: grid; gap: 9px; }
.capture-list:empty { margin-top: 0; }
.capture-item { padding: 10px 11px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--surface-2); }
.capture-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.capture-owner { padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--soft); font: 800 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.capture-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.capture-prompt { margin-right: 3px; color: var(--muted); font-size: 12px; }
.capture-quadrant { display: flex; align-items: baseline; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--soft); cursor: pointer; }
.capture-quadrant strong { font: 800 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--teal-light); }
.capture-quadrant small { color: var(--muted); font-size: 11px; }
.capture-quadrant:hover:not(:disabled) { border-color: rgba(50, 184, 184, .55); background: rgba(50, 184, 184, .12); }
.capture-quadrant:disabled { opacity: .45; cursor: default; }

/* WBR-348. Browsing what got moved off the list. */
/* WBR-355. The walkthrough button on the morning card, and the panel it opens. */
.report-walkthrough { display: grid; gap: 8px; margin-top: 10px; }
.walkthrough-button { justify-self: start; }
.walkthrough-stale-chip { justify-self: start; padding: 2px 8px; border-radius: 999px; background: var(--ember); color: var(--bg-deep); font-size: 11px; font-weight: 800; }
.walkthrough-panel { display: grid; gap: 14px; max-height: 60vh; overflow-y: auto; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-deep); }
.walkthrough-stale { margin: 0; color: var(--ember); font-size: 12.5px; font-weight: 700; }

/* WBR-356. Three histories, each shut by default with its own scrolling
   window, so the page is one screen tall at rest and each record browses
   without moving the other two. */
.history-panel { padding-block: 0; }
.history-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.history-toggle-words { display: grid; gap: 3px; min-width: 0; }
.history-toggle-title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.history-toggle .analytics-sub { margin: 0; }
.history-toggle i { flex: 0 0 auto; transition: transform .18s ease; }
.history-panel.open .history-toggle i { transform: rotate(180deg); }
.history-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 8px; }
.history-body { padding-bottom: 16px; }
.history-scroll { max-height: 440px; overflow-y: auto; }
.order-item .done-tags { white-space: nowrap; }
.order-detail { padding-top: 4px; }
.walkthrough { display: grid; gap: 9px; }
.walkthrough h3 { margin: 0; font-size: 15px; font-weight: 800; }
.walkthrough h4 { margin: 6px 0 0; font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.walkthrough p { margin: 0; line-height: 1.55; }
.walkthrough ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.walkthrough-stamp { color: var(--muted); font-size: 12px; font-style: italic; }
.done-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.done-filters input, .done-filters select { min-height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-deep); color: var(--text); outline: 0; }
.done-filters input { min-width: 190px; }
.done-filters input:focus, .done-filters select:focus { border-color: var(--teal); }
.done-list { display: grid; gap: 4px; margin-top: 12px; }
.done-day { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 4px; padding: 5px 2px; background: var(--surface); color: var(--teal-light); font: 800 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
.done-day:first-child { margin-top: 0; }
.done-day span { color: var(--muted); }
.done-group { display: grid; gap: 4px; }
.done-item { border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface-2); }
.done-item summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 9px 11px; cursor: pointer; list-style: none; }
.done-item summary::-webkit-details-marker { display: none; }
.done-item[open] { border-color: var(--line); }
.done-title { flex: 1 1 260px; min-width: 0; font-weight: 700; }
.done-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.done-tags em { padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 700 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; white-space: nowrap; }
.done-tags .done-owner.workerbee { border-color: rgba(50, 184, 184, .4); color: var(--teal-light); }
.done-tags .done-owner.david { border-color: rgba(200, 168, 75, .42); color: var(--gold); }
.done-detail { padding: 0 11px 11px; color: var(--soft); font-size: 12.5px; white-space: pre-wrap; }

@media (max-width: 720px) {
  .capture-forms { grid-template-columns: 1fr; }
  .capture-strip { padding: 12px 11px 10px; }
  .capture-head { flex-direction: column; gap: 8px; }
  .capture-sub { font-size: 11.5px; }
  .capture-quadrant small { display: none; }
  .capture-quadrant { min-width: 46px; justify-content: center; }
  .done-filters input { min-width: 0; flex: 1 1 100%; }
  .history-scroll { max-height: 60vh; }
}

/* ── MOMENTUM HUB THREE HUNDRED ──────────────────────
   WBR-373. The results page David asked for three times. Verdict colors reuse
   the palette that already exists rather than introducing a fourth green:
   --green for PASS, --gold for PART, --danger for FAIL, --ember for the rows
   still waiting on a live look, and the muted line for another app's day.
   Every variable here is one check-css-variables.mjs can find, which is the
   whole reason that gate exists. */
.m300-section {
  margin: 26px 0 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--soft);
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 6px;
}
.m300-section:first-child { margin-top: 6px; }
.m300-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.m300-number {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 13px;
  padding-top: 2px;
}
.m300-words { min-width: 0; }
.m300-question { margin: 0; color: var(--text); font-size: 14px; line-height: 1.45; }
.m300-note { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.m300-chip {
  align-self: start;
  font-size: 11px;
  letter-spacing: 0.06em;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.m300-pass { color: var(--green); border-color: var(--green); }
.m300-part { color: var(--gold); border-color: var(--gold); }
.m300-fail { color: var(--danger); border-color: var(--danger); }
.m300-live { color: var(--ember); border-color: var(--ember); }
.m300-na { color: var(--muted); }

@media (max-width: 640px) {
  .m300-row { grid-template-columns: 28px minmax(0, 1fr); }
  .m300-chip { grid-column: 2; justify-self: start; margin-top: 4px; }
}