/* CrackOn Dashboard — CRT Monitor Edition */

/* ─── Palette ─────────────────────────────────── */

:root {
  /* Core design tokens */
  --fg: #fafafa;
  --fg-secondary: #a3a3a3;
  --fg-muted: #737373;
  --bg: #0a0a0a;
  --bg-card: #141414;
  --bg-elevated: #1a1a1a;
  --border: #262626;
  --border-subtle: #1f1f1f;
  --gold: #c9b896;
  --lavender: #a78bfa;
  --lavender-faint: #1f1a2e;
  --green: #33ff33;

  /* Phosphor — CRT chrome elements.
     --phosphor-rgb is the bare R,G,B triplet every chrome glow + hairline
     consumes via rgba(var(--phosphor-rgb), α). The Interface Designer overrides
     this single token and all 74 derived glows re-tint in step. */
  --phosphor-rgb: 139, 240, 164;
  --phosphor: #8bf0a4;
  --phosphor-bright: #b4f7c8;
  --phosphor-dim: #4a9e64;
  --phosphor-faint: #2d6b40;
  --phosphor-glow: rgba(var(--phosphor-rgb), 0.12);

  /* Screen */
  --screen-bg: #06120a;
  --screen-bg-alt: #0a1a0f;

  /* Monitor housing */
  --housing-light: #d4cfc4;
  --housing-mid: #bfb9ab;
  --housing-dark: #a8a295;
  --housing-shadow: #6b675e;

  /* Content text — white for readability, green stays on chrome */
  --text-content: #e8e8e8;

  /* Typography */
  --font-sans: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Reading comfort — driven by the Interface Designer. Defaults are inert:
     0 letter-spacing and normal line-height match the un-themed appearance.
     Per the BDA dyslexia guidance these are the high-value, low-risk knobs
     (they inherit cleanly, unlike font-size against the fixed CRT geometry). */
  --user-letter-spacing: 0em;
  --user-line-height: normal;

  /* Zoom-driven scaling — set by JS based on absolute window size.
     --zoom starts high at small windows (tight on content),
     decreases toward 1.0 at large windows (full beach revealed).
     Fallback 1.15 if JS hasn't loaded yet. */
  --zoom: 1.15;
}

/* ─── Reset ───────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Body ────────────────────────────────────── */

body {
  font-family: var(--font-sans);
  background: #0c1a2a;
  color: var(--fg);
  margin: 0;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  /* Reading-comfort knobs cascade from here. Both inherit, so they reach all
     text that doesn't set its own value; defaults (0 / normal) are inert. */
  letter-spacing: var(--user-letter-spacing, 0em);
  line-height: var(--user-line-height, normal);
}

/* ─── Scene ───────────────────────────────────── */
/* Wraps monitor + overlay. Sized as cover × zoom.
   Cover ensures the PNG always fills the viewport.
   Zoom (JS-driven) adds extra at small windows → tight on content.
   At large windows, zoom → 1.0 → just cover → full beach visible. */

.scene {
  position: fixed;
  overflow: hidden;
  /* Dimensions and position set by JS updateLayout() */
}

/* ─── Monitor ─────────────────────────────────── */

.monitor {
  position: absolute;
  /* Screen hole is 54% x 62% of image. Monitor slightly larger for overlap. */
  width: 57%;
  height: 65%;
  /* Centre on the screen hole (49.2%, 44.2% of image) */
  left: 49.2%;
  top: 44.2%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  z-index: 1;
  border-radius: 4% / 3%;
}

.monitor::before { display: none; }
.monitor::after { display: none; }

/* ─── Bezel ───────────────────────────────────── */

.bezel {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* Inner bezel gradient */
.bezel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4% / 3%;
  box-shadow:
    inset 0 0 40px 15px rgba(10, 8, 6, 0.6),
    inset 0 0 80px 30px rgba(10, 8, 6, 0.3);
  pointer-events: none;
  z-index: 11;
}

.bezel::after { display: none; }
.chin-glow { display: none; }
.badge { display: none; }

/* ─── Screen ──────────────────────────────────── */

.screen {
  position: relative;
  background: var(--screen-bg);
  border-radius: 4% / 3%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  /* Inset content so it stays within the visible screen hole.
     Monitor is oversized (57%×62%) vs hole (54%×58%) — padding keeps
     content clear of the housing bezel overlap. */
  padding: 2.8% 3% 1.5% 3.6%;

  /* CRT vignette */
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.6),
    inset 0 0 120px rgba(0, 0, 0, 0.35),
    inset 0 0 200px rgba(0, 0, 0, 0.15);

  /* Responsive font — landscape screen hole is shorter, use vmin for stability */
  font-size: clamp(11px, 1.4vmin, 18px);
  line-height: 1.5;

  /* Subtle feathered edge — housing PNG does the heavy framing */
  -webkit-mask-image: radial-gradient(ellipse 98% 96% at 50% 50%, black 85%, transparent 100%);
  mask-image: radial-gradient(ellipse 98% 96% at 50% 50%, black 85%, transparent 100%);
}

/* Scanlines */
.screen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
}

/* Phosphor bloom */
.screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background: radial-gradient(
    ellipse 95% 85% at 50% 46%,
    rgba(var(--phosphor-rgb), 0.07) 0%,
    rgba(var(--phosphor-rgb), 0.02) 50%,
    transparent 80%
  );
}

/* ─── CRT Overlay ─────────────────────────────── */

.crt-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  pointer-events: none;
  user-select: none;
}

/* ─── Header Nav ─────────────────────────────── */

.nav-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  min-height: 60px;
  padding: 0 16px;
  background: #131313;
  border-bottom: 1px solid var(--border);
}

.nav-group {
  display: flex;
  gap: 0;
}

.nav-key {
  padding: 8px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #becabc;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  text-align: center;
  white-space: nowrap;
}

.nav-key:hover {
  color: var(--phosphor);
}

.nav-key.active {
  color: #8bf0a4;
  border-bottom-color: #8bf0a4;
}

/* Remove blue focus ring on mouse click; preserve for keyboard Tab */
.nav-key:focus:not(:focus-visible) {
  outline: none;
}

/* Responsive labels — full text on md+, single letter on mobile */
.nav-label-short {
  display: none;
}

/* ─── Central Orb ────────────────────────────── */

/* Dot-within-circle — Material radio_button_checked look, CSS-only.
   Steady state: outer ring + inner dot, subtle phosphor glow, no animation.
   .active (WORKING) state: pulses ring + dot together. */
.nav-orb {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--phosphor);
  background: transparent;
  margin: 0 16px;
  flex-shrink: 0;
  cursor: pointer;
  opacity: 0.85;
  box-shadow: 0 0 8px rgba(var(--phosphor-rgb), 0.25);
  transition: opacity 0.2s, box-shadow 0.2s, transform 0.2s;
}

.nav-orb::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--phosphor);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 4px var(--phosphor);
  transition: background 0.2s, box-shadow 0.2s;
}

.nav-orb:hover {
  opacity: 1;
  box-shadow: 0 0 12px rgba(var(--phosphor-rgb), 0.5);
}

.nav-orb:focus-visible {
  outline: 1px solid var(--phosphor);
  outline-offset: 3px;
}

@keyframes orb-pulse {
  0%, 100% {
    opacity: 0.85;
    box-shadow: 0 0 8px rgba(var(--phosphor-rgb), 0.3);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 18px rgba(var(--phosphor-rgb), 0.7);
  }
}

@keyframes orb-dot-pulse {
  0%, 100% {
    background: var(--phosphor);
    box-shadow: 0 0 4px var(--phosphor);
  }
  50% {
    background: var(--phosphor-bright);
    box-shadow: 0 0 10px var(--phosphor-bright);
  }
}

.nav-orb.active {
  animation: orb-pulse 1.3s ease-in-out infinite;
}
.nav-orb.active::after {
  animation: orb-dot-pulse 1.3s ease-in-out infinite;
}

/* ─── Screen Body ─────────────────────────────── */

.screen-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.screen-body::-webkit-scrollbar { width: 4px; }
.screen-body::-webkit-scrollbar-track { background: transparent; }
.screen-body::-webkit-scrollbar-thumb { background: var(--phosphor-faint); border-radius: 2px; }

.view-panel {
  height: 100%;
  overflow-y: auto;
}

.view-panel::-webkit-scrollbar { width: 4px; }
.view-panel::-webkit-scrollbar-track { background: transparent; }
.view-panel::-webkit-scrollbar-thumb { background: var(--phosphor-faint); border-radius: 2px; }

.badge-count {
  font-size: 9px;
  font-weight: 600;
  background: var(--lavender);
  color: var(--bg);
  border-radius: 8px;
  padding: 0 5px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ─── Loading State ───────────────────────────── */

.loading {
  padding: 20px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--phosphor-dim);
  text-align: center;
}

/* ─── Two-Column Layout (Today view) ──────────── */

.two-col-layout {
  display: grid;
  /* Landscape screen: Today column narrower (focused list), All Tasks wider (more detail) */
  grid-template-columns: 2fr 3fr;
  gap: 0;
  height: 100%;
}

.col-today, .col-all {
  overflow-y: auto;
  padding-bottom: 8px;
}

.col-today {
  border-right: 1px solid var(--phosphor-faint);
}

.col-today::-webkit-scrollbar,
.col-all::-webkit-scrollbar { width: 3px; }
.col-today::-webkit-scrollbar-track,
.col-all::-webkit-scrollbar-track { background: transparent; }
.col-today::-webkit-scrollbar-thumb,
.col-all::-webkit-scrollbar-thumb { background: var(--phosphor-faint); border-radius: 2px; }

/* ─── Layout flip (P5 — config flag, data-layout on <html>) ─────
   Canonical (attribute absent, default): Today | All, left→right.
   Flipped: mirror the CRT — All | Today, so the (still-narrow) Today
   column sits on the RIGHT. Gated entirely on :root[data-layout="flipped"];
   canonical rendering is byte-identical when the attribute is unset, so
   both live instances are untouched. Instances opt in via ?layout=flipped
   (no-flash boot script in index.html <head>); the scene horizontal anchor
   and VP insets mirror in updateLayout(). Desktop CRT only — mobile-flat
   stacks single-column and is out of scope for the flip. */
:root[data-layout="flipped"] .two-col-layout {
  grid-template-columns: 3fr 2fr; /* Today, now the right track, keeps its narrow 2fr */
}
:root[data-layout="flipped"] .col-all { order: 1; }
:root[data-layout="flipped"] .col-today {
  order: 2;
  border-right: none;
  border-left: 1px solid var(--phosphor-faint);
}

.col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 4px;
  border-bottom: 1px solid rgba(var(--phosphor-rgb), 0.08);
}

.col-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--phosphor-dim);
}

.pulse-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--phosphor-faint);
  letter-spacing: 0.02em;
}

/* ─── Section Labels ──────────────────────────── */

.section-label {
  padding: 6px 16px 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--phosphor-faint);
}

/* ─── Task Items ──────────────────────────────── */

.task-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 16px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}

.task-item:hover {
  background: rgba(var(--phosphor-rgb), 0.04);
}

.task-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1.5px solid var(--phosphor-dim);
  border-radius: 3px;
  background: none;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}

.task-check:hover {
  border-color: var(--phosphor);
}

.task-check.done {
  border-color: var(--phosphor-faint);
}

.task-check.done::after {
  content: '\2713';
  position: absolute;
  top: -2px;
  left: 2px;
  font-size: 12px;
  color: var(--phosphor-faint);
}

.task-today-indicator {
  flex-shrink: 0;
  width: 16px;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  color: var(--phosphor-faint);
  cursor: default;
  user-select: none;
}

.task-item.on-today {
  font-style: italic;
  font-size: 0.9em;
}

.task-body {
  flex: 1;
  min-width: 0;
}

.task-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-content);
  line-height: 1.4;
}

.task-item.completed .task-title {
  color: var(--phosphor-dim);
  text-decoration: line-through;
}

/* (The NEXT pill was removed 20Jun26s, #5 — "next" is now signalled by
   sort_order position, and on-today tasks carry an arrow marker instead.) */

.task-meta {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.task-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--phosphor-dim);
}

.task-tag.overdue { color: var(--text-content); }
.task-tag.today { color: var(--phosphor-bright); }
.task-tag.sched { color: var(--lavender); }
.task-tag.priority-high { color: var(--lavender); }

/* ─── Today Column Items ──────────────────────── */

.today-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-content);
  transition: background 0.1s;
  line-height: 1.4;
}

.today-item[draggable="true"] { cursor: grab; }
.today-item.dragging { opacity: 0.4; }

.today-item:hover {
  background: rgba(var(--phosphor-rgb), 0.06);
}

.today-item.done {
  color: var(--phosphor-dim);
}

.today-item.done .item-title {
  text-decoration: line-through;
}

.today-item.done:hover {
  background: rgba(var(--phosphor-rgb), 0.03);
}

.project-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  margin-left: auto;
  flex-shrink: 0;
}

/* ─── Triage Items ────────────────────────────── */

.triage-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px;
  gap: 8px;
}

.triage-item .item-title {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-content);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.triage-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.triage-btn {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 2px;
  border: 1px solid var(--phosphor-faint);
  background: none;
  cursor: pointer;
  transition: all 0.15s;
}

.triage-btn-yes {
  color: var(--phosphor);
}

.triage-btn-yes:hover {
  background: rgba(var(--phosphor-rgb), 0.15);
  border-color: var(--phosphor);
}

.triage-btn-no {
  color: var(--fg-muted);
}

.triage-btn-no:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* ─── Empty States ────────────────────────────── */

.today-empty-state,
.extractions-empty {
  padding: 16px 16px;
  text-align: center;
}

.today-empty-state p,
.extractions-empty p {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--phosphor-dim);
  margin-bottom: 4px;
}

.empty-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--phosphor-faint);
}

.empty-state {
  padding: 48px 24px;
  text-align: center;
}

.empty-state h2 {
  font-family: var(--font-mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--phosphor);
  margin: 0 0 12px;
  font-weight: 500;
}

.empty-state p {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--phosphor-dim);
  margin: 0;
}

/* ─── Task Content (two-line display) ────────── */

.task-content {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-secondary);
  line-height: 1.4;
  margin-top: 1px;
  white-space: normal;
  word-wrap: break-word;
}

.item-content {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-secondary);
  line-height: 1.4;
  margin-top: 2px;
  white-space: normal;
  word-wrap: break-word;
}

/* ─── Task Notes (subtitle line) ────────────── */

.task-notes {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--fg-muted);
  line-height: 1.4;
  margin-top: 0.125rem;
  white-space: normal;
  word-wrap: break-word;
}

/* Notes should NOT get strikethrough when task is done */
.today-item.done .task-notes,
.task-item.completed .task-notes {
  text-decoration: none;
}

/* Wrapper for today item title + notes */
.today-item-body {
  flex: 1;
  min-width: 0;
}

/* ─── Done Count ─────────────────────────────── */

.done-count {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  color: var(--phosphor-faint);
  letter-spacing: 0.02em;
}

/* Confirmation flash */
@keyframes confirm-flash {
  0% { background-color: rgba(201, 184, 150, 0.15); }
  100% { background-color: transparent; }
}

.task-just-confirmed {
  animation: confirm-flash 0.6s ease-out;
}

/* ─── Knowledge / Entity Approval (F3) ────────── */

.knowledge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px 6px;
  border-bottom: 1px solid rgba(var(--phosphor-rgb), 0.08);
}

.knowledge-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--phosphor-dim);
}

.confirm-all-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border: 1px solid var(--phosphor-faint);
  border-radius: 3px;
  background: none;
  color: var(--phosphor);
  cursor: pointer;
  transition: all 0.15s;
}

.confirm-all-btn:hover {
  background: rgba(var(--phosphor-rgb), 0.12);
  border-color: var(--phosphor);
  color: var(--phosphor-bright);
}

.confirm-all-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Extraction cards */
.extraction-card {
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.15s;
}

.extraction-card:hover {
  background: rgba(var(--phosphor-rgb), 0.03);
}

.extraction-card.relationship {
  border-left: 2px solid rgba(167, 139, 250, 0.3);
}

.extraction-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.extraction-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--phosphor-dim);
  border-radius: 3px;
  background: none;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.extraction-check input[type="checkbox"]:checked {
  border-color: var(--phosphor);
  background: rgba(var(--phosphor-rgb), 0.15);
}

.extraction-check input[type="checkbox"]:checked::after {
  content: '\2713';
  position: absolute;
  top: -1px;
  left: 2px;
  font-size: 12px;
  color: var(--phosphor-bright);
}

.entity-type {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--phosphor);
  background: rgba(var(--phosphor-rgb), 0.1);
  border: 1px solid var(--phosphor-faint);
  border-radius: 2px;
  padding: 1px 5px;
}

.entity-name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-content);
}

.rel-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-content);
}

.rel-type {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lavender);
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 2px;
  padding: 1px 5px;
  margin-left: 8px;
}

.extraction-detail {
  padding: 4px 0 2px 26px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-secondary);
}

/* ─── Settings View (F3) ──────────────────────── */

.settings-content {
  padding: 16px;
}

.settings-section {
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--phosphor-rgb), 0.06);
}

.settings-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--phosphor-dim);
  margin-bottom: 4px;
}

.settings-value {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-content);
}

.settings-group {
  margin-bottom: 20px;
}

.settings-group-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--phosphor-dim);
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(var(--phosphor-rgb), 0.12);
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.settings-row .settings-label {
  flex: 0 0 90px;
  margin-bottom: 0;
}

.settings-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(var(--phosphor-rgb), 0.18);
  color: var(--text-content);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 5px 8px;
  border-radius: 2px;
}

.settings-input:focus {
  outline: none;
  border-color: var(--phosphor);
}

.settings-checkbox {
  width: 14px;
  height: 14px;
  accent-color: var(--phosphor);
}

.settings-status-line {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--phosphor-dim);
  text-align: right;
  min-height: 14px;
  margin-top: 8px;
}

.settings-status-line.is-error {
  color: #d98a7a;
}

/* ─── Onboarding view (operator STT vocab loop) ───────────── */

.onboarding-content {
  overflow-y: auto;
  max-height: 100%;
}

.onboarding-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  color: var(--phosphor-dim);
  margin: 0 0 10px;
}

.onboarding-hint code {
  font-family: var(--font-mono);
  color: var(--text-content);
  background: rgba(0, 0, 0, 0.35);
  padding: 0 3px;
  border-radius: 2px;
}

.onboarding-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--phosphor-dim);
  letter-spacing: 0;
  text-transform: none;
}

.onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.onboarding-btn {
  padding: 6px 12px;
  border: 1px solid rgba(var(--phosphor-rgb), 0.2);
  border-radius: 3px;
  background: transparent;
  color: var(--phosphor-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.onboarding-btn:hover:not(:disabled) {
  color: var(--phosphor);
  border-color: var(--phosphor);
}

.onboarding-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.onboarding-btn-primary {
  color: var(--phosphor);
  border-color: rgba(var(--phosphor-rgb), 0.5);
  background: rgba(var(--phosphor-rgb), 0.06);
}

.onboarding-btn-primary:hover:not(:disabled) {
  background: rgba(var(--phosphor-rgb), 0.12);
}

.onboarding-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.onboarding-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border: 1px solid rgba(var(--phosphor-rgb), 0.22);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.3);
}

.onboarding-chip-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-content);
}

.onboarding-chip-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--phosphor-dim);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}

.onboarding-chip-del:hover {
  color: #d98a7a;
  background: rgba(217, 138, 122, 0.14);
}

.onboarding-result {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-content);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(var(--phosphor-rgb), 0.18);
  border-radius: 2px;
  padding: 10px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
}

/* ─── Voice Panel ────────────────────────────── */
/* Bottom-anchored inside .screen. Three-column: HVM | Chat | AVM.
   Hidden by default, shown via .open class. VP-B adds VU meters,
   VP-C rebuilds chat, VP-D adds dynamic height + mobile PTT. */

/* Floated above the screen content with an inset so the meters aren't clipped
   against the CRT housing. Stitch reference is 48px left/right + 24px bottom
   from the viewport — scaled slightly here since our container is .screen,
   not the viewport. */
.voice-panel {
  position: absolute;
  bottom: 16px;
  left: var(--vp-left, 28px);
  right: var(--vp-right, 28px);
  height: var(--vp-h, 155px);
  background: #141414;
  border: 1px solid rgba(var(--phosphor-rgb), 0.15);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  z-index: 8;
  transform: translateY(calc(100% + 16px));
  transition: transform 0.25s ease;
}

.voice-panel.open {
  transform: translateY(0);
}

.voice-panel.ptt-active {
  border-color: var(--phosphor-dim);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8),
              inset 0 0 16px rgba(var(--phosphor-rgb), 0.18);
}

/* Dashboard scroll clearance when VP is open. The two columns (.col-today,
   .col-all) are the actual scroll containers — applying padding to their
   ancestors too (.view-panel, .screen-body) stacks spatially and produces
   double/triple/quadruple empty gaps at the bottom. The VP is now drag-resized
   (voice.js initVpDragResize), so --vp-clearance is updated live to
   height + 16(inset) + 16(breathing). Fallback 187px = default 155 + 16 + 16
   for the pre-JS / never-dragged case. */
body:has(.voice-panel.open) .col-today,
body:has(.voice-panel.open) .col-all {
  padding-bottom: var(--vp-clearance, 187px);
}

/* ── VP Status Bar ───────────────────────────── */

.vp-status-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* Drag-resize handle — the whole status bar is the grab surface (20Jun26s,
   replaces the up/down stepper). ns-resize cursor + touch-action:none so a
   touch-drag resizes instead of scrolling the page. A short grip bar pinned
   top-centre advertises the affordance. */
.vp-status-bar {
  cursor: ns-resize;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.vp-drag-grip {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: var(--phosphor-dim);
  opacity: 0.4;
  z-index: 2;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.vp-status-bar:hover .vp-drag-grip,
.vp-status-bar.vp-dragging .vp-drag-grip { opacity: 0.85; }

/* Atmospheric glow behind status text */
.vp-status-bar::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  filter: blur(15px);
  opacity: 0;
  transition: opacity 0.3s, background 0.3s;
  pointer-events: none;
}

.vp-status-text {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--phosphor-dim);
  text-align: center;
  position: relative;
  z-index: 1;
  transition: color 0.3s;
}

/* ── VP Status States ────────────────────────── */
/* 6 canonical states driven by [data-state] on .vp-status-bar */

.vp-status-bar[data-state="offline"] .vp-status-text {
  color: var(--fg-muted);
}

.vp-status-bar[data-state="connecting"] .vp-status-text {
  color: var(--phosphor-dim);
}
.vp-status-bar[data-state="connecting"]::before {
  background: rgba(var(--phosphor-rgb), 0.1);
  opacity: 1;
  animation: vp-glow-pulse 2s ease-in-out infinite;
}

.vp-status-bar[data-state="ready"] .vp-status-text {
  color: var(--phosphor);
}
.vp-status-bar[data-state="ready"]::before {
  background: rgba(var(--phosphor-rgb), 0.08);
  opacity: 1;
}

.vp-status-bar[data-state="listening"] .vp-status-text {
  color: var(--phosphor-bright);
}
.vp-status-bar[data-state="listening"]::before {
  background: rgba(var(--phosphor-rgb), 0.2);
  opacity: 1;
  animation: vp-glow-pulse 1.2s ease-in-out infinite;
}

.vp-status-bar[data-state="speaking"] .vp-status-text {
  color: var(--gold);
}
.vp-status-bar[data-state="speaking"]::before {
  background: rgba(201, 184, 150, 0.15);
  opacity: 1;
}

.vp-status-bar[data-state="working"] .vp-status-text {
  color: var(--gold);
}
.vp-status-bar[data-state="working"]::before {
  background: rgba(201, 184, 150, 0.12);
  opacity: 1;
  animation: vp-glow-pulse 1.5s ease-in-out infinite;
}

/* Wave H — WORKING_CONTINUATION: same gold family as WORKING but visually
   distinct via a faster, breathing pulse + a softly-pulsing trailing ellipsis.
   Triggered by .working-continuation class (independent of [data-state] so
   the underlying state can remain 'working' for orb/PTT semantics). */
.vp-status-bar.working-continuation .vp-status-text {
  color: var(--gold);
}
.vp-status-bar.working-continuation .vp-status-text::after {
  content: ' \2022\2022\2022';
  letter-spacing: 0.1em;
  margin-left: 0.4em;
  display: inline-block;
  animation: vp-continuation-dots 1.2s ease-in-out infinite;
}
.vp-status-bar.working-continuation::before {
  background: rgba(201, 184, 150, 0.18);
  opacity: 1;
  animation: vp-continuation-pulse 1.2s ease-in-out infinite;
}

@keyframes vp-glow-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes vp-continuation-pulse {
  0%, 100% { opacity: 0.45; transform: translateX(-50%) scale(0.92); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.06); }
}

@keyframes vp-continuation-dots {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* QUEUED badge — surfaced when a PTT is queued during WORKING_CONTINUATION.
   Sits to the right of the status text. Phosphor-bright so it's unambiguous
   that input was received but is being held. */
.vp-queued-badge {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--phosphor-bright);
  margin-left: 10px;
  padding: 1px 5px;
  border: 1px solid var(--phosphor-bright);
  border-radius: 2px;
  position: relative;
  z-index: 1;
  animation: vp-queued-pulse 0.9s ease-in-out infinite;
}
.vp-queued-badge[hidden] { display: none; }

@keyframes vp-queued-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* ── VP Body (three-column) ─────────────────── */

.vp-body {
  flex: 1;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  min-height: 0;
}

/* ── VP Meter Columns (HVM / AVM) ──────────────── */

.vp-meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 2px 4px;
  overflow: hidden;
}

/* AVM now on the left, HVM on the right (swap from prior layout).
   Inner borders separate each meter column from the central chat. */
.vp-avm {
  border-right: 1px solid var(--border);
}

.vp-hvm {
  border-left: 1px solid var(--border);
}

.vp-meter-label {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--phosphor-faint);
  flex-shrink: 0;
  margin-bottom: 4px;
}

/* VU meter: 12 vertical rows, bottom-to-top fill */
.vu-column {
  display: flex;
  flex-direction: column-reverse; /* bottom-to-top: row 0 at bottom */
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  min-height: 0;
}

.vu-row {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.1;
  display: block;
  text-align: center;
  width: 100%;
}

/* HVM (human) — phosphor gradient, matches LISTENING state + green dashboard labels */
.vp-hvm .vu-row.b0 { color: #1a3a22; }
.vp-hvm .vu-row.b1 { color: var(--phosphor-dim); }
.vp-hvm .vu-row.b2 { color: var(--phosphor); }
.vp-hvm .vu-row.b3 { color: var(--phosphor-bright); }

/* AVM (agent) — gold gradient, matches SPEAKING state */
.vp-avm .vu-row.b0 { color: #2a2518; }
.vp-avm .vu-row.b1 { color: #8a7a52; }
.vp-avm .vu-row.b2 { color: #b0a070; }
.vp-avm .vu-row.b3 { color: var(--gold); }

/* ── VP Chat (transcript compatibility shim) ── */

.vp-chat {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── VP Mobile Touch Controls (contender D, 17Jun26w) ──────────
   Hidden on desktop (keyboard PTT remains the affordance there).
   Shown only on body.mobile-flat where no Space/M/X keys exist. */
.vp-controls { display: none; }

body.mobile-flat .vp-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.vp-ctl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vp-meta-toggle,
.vp-cancel-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 14px;
  border-radius: 6px;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.vp-meta-toggle {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--fg-muted);
  transition: color .15s, border-color .15s, background .15s;
}
.vp-meta-toggle.on {
  border-color: var(--lavender);
  color: #cbb8ff;
  background: var(--lavender-faint);
}

/* Neutral (greyed, matching META) at rest; only turns red on press. */
.vp-cancel-btn {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--fg-muted);
  transition: color .12s, border-color .12s, background .12s;
}
.vp-cancel-btn:active {
  border-color: #ff5a5a;
  color: #ff5a5a;
  background: #2a1010;
}

/* Full-width hold-to-talk bar */
.vp-talk-bar {
  width: 100%;
  min-height: 76px;
  border-radius: 12px;
  border: 2px solid var(--phosphor-dim);
  background: #0c150f;
  color: var(--phosphor);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: transform .08s, border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.vp-talk-main { font-size: 15px; font-weight: 500; }
.vp-talk-sub { font-size: 9px; color: var(--phosphor-faint); letter-spacing: 0.1em; }

.vp-talk-bar.holding {
  transform: scale(0.985);
  border-color: var(--phosphor-bright);
  background: #13241a;
  color: var(--phosphor-bright);
  box-shadow: 0 0 0 4px rgba(var(--phosphor-rgb),.12), inset 0 0 22px rgba(var(--phosphor-rgb),.22);
}

/* META armed — subtle lavender edge (contender D: discreet, dyslexia-leaning) */
.vp-talk-bar.meta-armed { border-color: var(--lavender); color: var(--lavender); }
.vp-talk-bar.meta-armed .vp-talk-sub { color: #6c5aa0; }
.vp-talk-bar.meta-armed.holding {
  border-color: #c4adff;
  color: #cbb8ff;
  background: #1b1430;
  box-shadow: 0 0 0 4px rgba(167,139,250,.14), inset 0 0 22px rgba(167,139,250,.28);
}

/* Red cancel ripple — fire-and-forget feedback. Rings expand far before fading. */
.vp-ripple-layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.vp-ripple {
  position: absolute;
  border: 2px solid #ff5a5a;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.9;
  animation: vp-ripple-out 1s ease-out forwards;
}
@keyframes vp-ripple-out {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.vp-chat::-webkit-scrollbar { width: 3px; }
.vp-chat::-webkit-scrollbar-track { background: transparent; }
.vp-chat::-webkit-scrollbar-thumb { background: var(--phosphor-faint); border-radius: 2px; }

.transcript-entry {
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.45;
  word-wrap: break-word;
  background: transparent;
  border-radius: 0;
  border: 0;
  transition: font-size 0.15s ease, opacity 0.15s ease;
}

/* Reverse-chronological hierarchy — first child is newest (prepended).
   Each tier is 2pt down from before; paired with a shorter panel this
   preserves the number of visible turns while reclaiming vertical space. */
.vp-chat .transcript-entry:nth-child(1),
.vp-chat .transcript-entry:nth-child(2) {
  font-size: 14px;
  line-height: 1.4;
  opacity: 1;
}

.vp-chat .transcript-entry:nth-child(3),
.vp-chat .transcript-entry:nth-child(4) {
  font-size: 11px;
  opacity: 0.8;
}

.vp-chat .transcript-entry:nth-child(n+5) {
  font-size: 10px;
  opacity: 0.5;
}

.vp-chat .transcript-entry:nth-child(n+7) {
  opacity: 0.3;
}

/* Stitch design: border-bar only, no bubble. User right-aligned with phosphor
   right-border; agent left-aligned with gold left-border. */
.transcript-entry.user {
  align-self: flex-end;
  text-align: right;
  border-right: 2px solid var(--phosphor);
  padding-right: 12px;
  color: var(--fg);
  max-width: 85%;
}

.transcript-entry.agent {
  align-self: flex-start;
  text-align: left;
  border-left: 2px solid var(--gold);
  padding-left: 12px;
  color: #a3a3a3;
  max-width: 85%;
}

.transcript-entry.system {
  align-self: center;
  color: var(--phosphor-faint);
  font-style: italic;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* User bubble structure: a single .transcript-entry.user holds the whole
   open turn — .user-committed above, .user-interim below. Both are display:block
   so reading order within the bubble is top-to-bottom (conventional), even
   though the bubble itself is near the top of the reverse-chronological thread.
   .user-interim is visually provisional (faded, italic, dashed underline); once
   the final arrives, text moves from .user-interim to .user-committed and the
   interim span empties. :empty keeps the bubble collapsed to one line when no
   interim is pending. */
.transcript-entry.user .user-committed,
.transcript-entry.user .user-interim {
  display: block;
}

.transcript-entry.user .user-committed:empty,
.transcript-entry.user .user-interim:empty {
  display: none;
}

.transcript-entry.user .user-interim {
  opacity: 0.5;
  font-style: italic;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
  margin-top: 2px;
}

/* Wave Meta-Mode (Phase 1B) — when Cmd+Spacebar PTT fires, voice.js sets
   currentTurnMode='meta' and app.js adds .meta-mode to the active user
   bubble. Lavender right-border overrides the default phosphor border;
   ::before pseudo-element provides a small META label affordance so Mat
   (voice-first) can see the mode at a glance. */
.transcript-entry.user.meta-mode {
  border-right-color: var(--lavender);
  position: relative;
  padding-top: 24px;
}

.transcript-entry.user.meta-mode::before {
  content: 'META';
  position: absolute;
  top: 6px;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--lavender);
  background: var(--lavender-faint);
  padding: 2px 6px;
  border-radius: 2px;
}

/* ─── Project Groups (All Tasks column) ───────── */

.project-group {
  border-bottom: 1px solid rgba(var(--phosphor-rgb), 0.04);
}

.project-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  cursor: pointer;
  transition: background 0.15s;
}

.project-section-header:hover {
  background: rgba(var(--phosphor-rgb), 0.04);
}

.project-name {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-secondary);
}

.project-task-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--phosphor-faint);
}

.project-chevron {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--fg-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
  line-height: 1;
}

.project-group.expanded .project-chevron {
  transform: rotate(90deg);
}

.health-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.health-red { background: var(--text-content); box-shadow: 0 0 4px rgba(232, 232, 232, 0.4); }
.health-amber { background: #f0d08b; box-shadow: 0 0 4px rgba(240, 208, 139, 0.4); }
.health-green { background: #4ade80; box-shadow: 0 0 4px rgba(74, 222, 128, 0.4); }
.health-grey { background: #555; }

.project-tasks {
  display: none;
  padding-bottom: 4px;
}

.project-group.expanded .project-tasks {
  display: block;
}

.project-group.expanded > .project-section-header {
  background: rgba(var(--phosphor-rgb), 0.04);
}

/* ─── Project Jobsheet ───────────────────────── */

.project-jobsheet {
  display: none;
  padding: 0.75rem 16px 0.75rem 28px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--fg-secondary);
  word-break: break-word;
  border-left: 2px solid var(--border);
  margin: 4px 16px 8px 28px;
  padding: 0.75rem;
  background: var(--bg-elevated);
  border-radius: 2px;
}

.project-group.expanded .project-jobsheet {
  display: block;
}

.project-jobsheet p {
  margin: 0 0 0.25rem;
}

.project-jobsheet br {
  display: block;
  content: '';
  margin: 0.25rem 0;
}

.project-jobsheet .jobsheet-h {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--fg);
  margin: 0.5rem 0 0.25rem;
  line-height: 1.3;
}

h3.jobsheet-h { font-size: 0.875rem; }
h4.jobsheet-h { font-size: 0.8125rem; }
h5.jobsheet-h { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }

.project-jobsheet .jobsheet-list {
  margin: 0.25rem 0 0.25rem 1rem;
  padding: 0;
  list-style: disc;
}

.project-jobsheet .jobsheet-list li {
  margin: 0.125rem 0;
}

.project-jobsheet .jobsheet-code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.1rem 0.3rem;
  border-radius: 2px;
  color: var(--fg);
}

.project-jobsheet strong {
  font-weight: 600;
  color: var(--fg);
}

.project-jobsheet em {
  font-style: italic;
  color: var(--fg-secondary);
}

/* ─── Project History (WS5) — completed-task list on expand ── */

/* Collapsed: just the label, no box — the History reads as part of the project
   folder (Jordan 20Jun26s, #4). The grey panel + rule only appear on expand. */
.project-history {
  display: none;
  margin: 4px 16px 8px 28px;
  padding: 2px 0 0;
  border-radius: 2px;
}

.project-group.expanded .project-history {
  display: block;
}

.project-history.expanded {
  padding: 0.5rem 0.75rem 0.6rem;
  background: var(--bg-elevated);
  border-left: 2px solid var(--border);
}

.project-history-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--phosphor-dim);
  opacity: 0.7;
  cursor: pointer;
  user-select: none;
}

.project-history-label:hover {
  opacity: 1;
}

.project-history-caret {
  display: inline-block;
  transition: transform 0.12s ease;
}

.project-history.expanded .project-history-caret {
  transform: rotate(90deg);
}

/* Body hidden by default — only the label shows until clicked. */
.project-history-body {
  display: none;
  margin-top: 6px;
}

.project-history.expanded .project-history-body {
  display: block;
}

.history-row {
  display: grid;
  /* Date column sits LEFT of the title (12094) — the title's 1fr column
     absorbs narrow-viewport squeeze via ellipsis, so the fixed-width date
     never crops at the right edge. */
  grid-template-columns: 14px auto 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 3px 0;
  font-size: 12px;
  line-height: 1.4;
}

.history-marker {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--phosphor-dim);
  opacity: 0.65;
  text-align: center;
}

.history-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-secondary);
}

.history-date {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.55;
  white-space: nowrap;
}

.history-empty {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--phosphor-dim);
  opacity: 0.55;
  padding: 4px 0;
}

/* General Task History (WS6) — reuses the .archive-row shell; inner list is
   the same History rows. */
.general-history-list {
  padding: 2px 0;
}

/* ─── Knowledge view actions (WS7) — BACKUP + IMPORT ── */

.knowledge-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-bottom: 6px;
}

.knowledge-action-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--phosphor-dim);
  border: 1px solid rgba(var(--phosphor-rgb), 0.2);
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 2px;
  transition: color 120ms, background 120ms, border-color 120ms;
}

.knowledge-action-btn:hover:not(:disabled) {
  color: var(--phosphor);
  border-color: rgba(var(--phosphor-rgb), 0.45);
  background: rgba(var(--phosphor-rgb), 0.06);
}

.knowledge-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.knowledge-action-status {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--phosphor-dim);
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* ─── Alias Value (Knowledge View) ───────────── */

.alias-value {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--fg-secondary);
  margin-left: 6px;
}

.extraction-card.alias {
  border-left: 2px solid rgba(201, 184, 150, 0.3);
}

/* ─── Spinner ─────────────────────────────────── */

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--phosphor-faint);
  border-top-color: var(--phosphor);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

/* ─── Archive (F2) — Archived projects ─────────── */

.archive-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px 6px;
  border-bottom: 1px solid rgba(var(--phosphor-rgb), 0.08);
  gap: 16px;
}

.archive-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--phosphor-dim);
}

.archive-body {
  padding: 12px 16px 24px;
  overflow-y: auto;
}

.archive-loading,
.archive-empty {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--phosphor-dim);
  padding: 24px 8px;
  text-align: center;
}

.archive-empty .empty-hint {
  margin-top: 6px;
  opacity: 0.6;
  font-size: 11px;
  line-height: 1.5;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.archive-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.archive-row {
  border-top: 1px solid rgba(var(--phosphor-rgb), 0.06);
  font-size: 13px;
  line-height: 1.4;
}

.archive-row:last-child {
  border-bottom: 1px solid rgba(var(--phosphor-rgb), 0.06);
}

.archive-row-summary {
  display: grid;
  grid-template-columns: 18px 1fr auto auto 14px;
  gap: 12px;
  align-items: baseline;
  padding: 8px 6px;
  cursor: pointer;
  transition: background 120ms;
}

.archive-row-summary:hover {
  background: rgba(var(--phosphor-rgb), 0.04);
}

.archive-marker {
  font-family: var(--font-mono);
  text-align: center;
  opacity: 0.7;
}

.archive-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-refcode {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--phosphor-dim);
  padding: 1px 6px;
  border: 1px solid rgba(var(--phosphor-rgb), 0.18);
  border-radius: 2px;
}

.archive-when {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.55;
  white-space: nowrap;
}

.archive-caret {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.45;
  transition: transform 150ms;
  display: inline-block;
}

.archive-row.expanded .archive-caret {
  transform: rotate(90deg);
  opacity: 0.8;
}

.archive-jobsheet {
  display: none;
  padding: 10px 14px 14px 38px;
  background: rgba(var(--phosphor-rgb), 0.02);
  border-top: 1px dashed rgba(var(--phosphor-rgb), 0.1);
}

.archive-row.expanded .archive-jobsheet {
  display: block;
}

.archive-jobsheet-text {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0 0 10px;
  color: inherit;
  opacity: 0.85;
}

.archive-jobsheet-empty {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--phosphor-dim);
  opacity: 0.55;
  padding: 6px 0 10px;
}

.history-loading {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--phosphor-dim);
  opacity: 0.55;
  padding: 4px 0;
}

/* P1 — demoted "Job Sheet (legacy)" caret inside an expanded archive row. The
   frozen <pre> stays hidden until the caret is clicked, so History reads as the
   primary body and the legacy record is kept but out of the way. */
.archive-legacy {
  margin: 4px 0 10px;
}
.archive-legacy-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--phosphor-dim);
  opacity: 0.7;
  cursor: pointer;
  user-select: none;
}
.archive-legacy-label:hover { opacity: 1; }
.archive-legacy-caret { display: inline-block; transition: transform 0.12s ease; }
.archive-legacy.expanded .archive-legacy-caret { transform: rotate(90deg); }
.archive-legacy .archive-jobsheet-text { display: none; margin-top: 8px; }
.archive-legacy.expanded .archive-jobsheet-text { display: block; }

/* P2 — small provenance marker for aA-domain projects (wA/unmarked render clean). */
.project-origin-aa {
  font-family: var(--font-mono);
  font-size: 0.6em;
  font-weight: 500;
  color: var(--fg-muted);
  margin-left: 3px;
  vertical-align: super;
  opacity: 0.8;
}

.archive-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(var(--phosphor-rgb), 0.06);
}

.archive-unarchive-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  color: var(--phosphor-dim);
  border: 1px solid rgba(var(--phosphor-rgb), 0.2);
  padding: 4px 10px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}

.archive-unarchive-btn:hover {
  color: var(--phosphor, #8bf0a4);
  border-color: rgba(var(--phosphor-rgb), 0.45);
  background: rgba(var(--phosphor-rgb), 0.06);
}

.archive-unarchive-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── Responsive: Mobile Flat Layout ────────── */

@media (max-width: 767px) {
  .nav-label-full { display: none; }
  .nav-label-short { display: inline; }
  .nav-orb { margin: 0 10px; }
  .nav-key { padding: 8px 10px; }
}

body.mobile-flat .scene {
  position: static;
  width: 100% !important;
  height: auto !important;
  overflow: visible;
}

body.mobile-flat .monitor {
  position: static;
  width: 100%;
  height: auto;
  transform: none;
  border-radius: 0;
}

body.mobile-flat .bezel {
  border-radius: 0;
}

body.mobile-flat .bezel::before {
  display: none;
}

body.mobile-flat .crt-overlay {
  display: none;
}

body.mobile-flat .screen {
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  -webkit-mask-image: none;
  mask-image: none;
  font-size: 14px;
  height: 100vh;
  height: 100dvh;
}

/* Mobile VP: tighter inset than desktop — viewport edge is the clipping concern,
   not the housing. 12px matches the scroll-snap column padding.
   Height matches desktop (180px) — reverse-chronological + nth-child hierarchy
   keeps the newest exchange legible without stealing dashboard real estate. */
body.mobile-flat .voice-panel {
  left: 12px;
  right: 12px;
  bottom: 12px;
  /* Taller default than desktop's 155px to seat the touch controls (top buttons +
     full-width TALK bar). Controls are flex-shrink:0 (fixed height); vp-body
     (flex:1) absorbs the change, so dragging the panel only resizes the chat
     area — the buttons keep their scale. Drag-resize (voice.js) sets --vp-h;
     no max-height cap — JS clamps the drag to ~full-minus-margin on mobile. */
  height: var(--vp-h, 38dvh);
}

/* Scroll clearance must track the mobile panel so the last task isn't
   trapped behind it (desktop's fixed fallback is wrong here). voice.js keeps
   --vp-clearance current; fallback = default 38dvh + 28px. */
body.mobile-flat:has(.voice-panel.open) .col-today,
body.mobile-flat:has(.voice-panel.open) .col-all {
  padding-bottom: var(--vp-clearance, calc(38dvh + 28px));
}

/* ── Mobile voice entry — bottom pull-tab (02Jul26h) ──────
   Persistent slim handle at the bottom edge where the panel slides from.
   Replaces the 16px nav orb as the mobile entry affordance (orb still works).
   Hidden on desktop and whenever the panel is open. */
.vp-pull-tab { display: none; }

body.mobile-flat .vp-pull-tab {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900; /* under the voice panel's own layer, over content */
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: calc(34px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(0, 0, 0, 0.82);
  border: none;
  border-top: 1px solid rgba(var(--phosphor-rgb), 0.45);
  box-shadow: 0 -4px 14px rgba(var(--phosphor-rgb), 0.12);
  color: var(--phosphor);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.mobile-flat .vp-pull-tab:active {
  background: rgba(var(--phosphor-rgb), 0.12);
}

.vp-pull-tab-chevron {
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 0 6px rgba(var(--phosphor-rgb), 0.6);
}

body.mobile-flat:has(.voice-panel.open) .vp-pull-tab { display: none; }

/* Panel-closed scroll clearance so the tab never covers the last task row.
   The panel-open rule above out-specifies this via :has(). */
body.mobile-flat .col-today,
body.mobile-flat .col-all {
  padding-bottom: calc(46px + env(safe-area-inset-bottom, 0px));
}

/* TALK bar disabled until the agent is actually in the room (READY) —
   mirrors the keydown agentReady gate so the visual and functional states
   can't disagree. Panel gains .agent-ready via setAgentReady(). */
body.mobile-flat .voice-panel:not(.agent-ready) .vp-talk-bar {
  opacity: 0.35;
  pointer-events: none;
}

/* Remove scanlines + bloom on mobile */
body.mobile-flat .screen::before,
body.mobile-flat .screen::after {
  display: none;
}

/* Horizontal scroll-snap between Today and All Tasks */
body.mobile-flat .two-col-layout {
  grid-template-columns: 100vw 100vw;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

body.mobile-flat .col-today,
body.mobile-flat .col-all {
  scroll-snap-align: start;
  min-width: 100vw;
  padding-left: 12px;
  padding-right: 12px;
}

body.mobile-flat .col-today {
  border-right: none;
}

/* ─── Knowledge View (F4) — W-1 three-sub-tab ──── */

#view-knowledge {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.knowledge-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 16px 0;
  border-bottom: 1px solid rgba(var(--phosphor-rgb), 0.08);
}

.knowledge-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  color: var(--phosphor-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 120ms, background 120ms, border-color 120ms;
  border-radius: 2px 2px 0 0;
}

.knowledge-tab:hover {
  color: var(--phosphor-dim);
  background: rgba(var(--phosphor-rgb), 0.04);
}

.knowledge-tab.active {
  color: var(--phosphor);
  background: rgba(var(--phosphor-rgb), 0.08);
  border-color: rgba(var(--phosphor-rgb), 0.25);
  border-bottom: 1px solid var(--bg-card);
  margin-bottom: -1px;
}

/* All Tasks two-tab strip (Workstream C) — echoes the Knowledge sub-tabs,
   sized down a touch to sit under the narrower ALL TASKS column header. */
.alltasks-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 16px 0;
  border-bottom: 1px solid rgba(var(--phosphor-rgb), 0.08);
}

.alltasks-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  color: var(--phosphor-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 120ms, background 120ms, border-color 120ms;
  border-radius: 2px 2px 0 0;
}

.alltasks-tab:hover {
  color: var(--phosphor-dim);
  background: rgba(var(--phosphor-rgb), 0.04);
}

.alltasks-tab.active {
  color: var(--phosphor);
  background: rgba(var(--phosphor-rgb), 0.08);
  border-color: rgba(var(--phosphor-rgb), 0.25);
  border-bottom: 1px solid var(--bg-card);
  margin-bottom: -1px;
}

.alltasks-panel[hidden] { display: none; }

.knowledge-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 16px 16px;
  overflow-y: auto;
  min-height: 0;
}

.knowledge-panel[hidden] {
  display: none;
}

/* Document meta strip (version + updated + dirty badge) */
.doc-meta-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--phosphor-dim);
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(var(--phosphor-rgb), 0.06);
}

.doc-meta-version,
.doc-meta-updated {
  white-space: nowrap;
}

.doc-dirty-badge {
  margin-left: auto;
  color: var(--gold);
  border: 1px solid rgba(201, 184, 150, 0.4);
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 9px;
  letter-spacing: 0.1em;
}

/* Textarea editor (AWARE subsections; generic single-doc fallback) */
.doc-editor {
  flex: 1;
  min-height: 280px;
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(var(--phosphor-rgb), 0.18);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  padding: 10px 12px;
  border-radius: 2px;
  resize: vertical;
  outline: none;
  tab-size: 2;
}

.doc-editor:focus {
  border-color: var(--phosphor);
}

/* AWARE — "always in mind" header + labelled subsections (Wave 1 WS2).
   One document, one PUT; the two textareas map to the `## agentPurpose` and
   `## userContext` sections of the body. */
.aware-header {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--phosphor);
  margin-bottom: 8px;
}

.aware-subsection {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.aware-subsection-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--phosphor-dim);
  margin-bottom: 4px;
}

.aware-subsection-help {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.5;
  color: var(--phosphor-dim);
  opacity: 0.85;
  margin: 0 0 8px;
}

.aware-subsection-editor {
  flex: none;
  min-height: 120px;
}

/* Name-token preview (Jordan 20Jun26s, #7) — read-only line showing how the
   {{name}} token in the AWARE doc resolves against Settings → Name. */
.aware-token-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--phosphor-dim);
  margin: 10px 0 0;
  padding: 7px 10px;
  background: rgba(var(--phosphor-rgb), 0.05);
  border-left: 2px solid rgba(var(--phosphor-rgb), 0.25);
  border-radius: 2px;
}
.aware-token-hint .atok { color: var(--lavender); }
.aware-token-hint .atok-val { color: var(--phosphor-bright); font-weight: 500; }

.doc-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
}

.doc-save-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: transparent;
  color: var(--phosphor-dim);
  border: 1px solid rgba(var(--phosphor-rgb), 0.25);
  padding: 5px 14px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}

.doc-save-btn:hover:not(:disabled) {
  color: var(--phosphor);
  border-color: rgba(var(--phosphor-rgb), 0.5);
  background: rgba(var(--phosphor-rgb), 0.06);
}

.doc-save-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.doc-status-line {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--phosphor-dim);
  letter-spacing: 0.05em;
  min-height: 14px;
}

.doc-status-ok { color: var(--phosphor); }
.doc-status-error { color: #f08b8b; }

/* Recall sub-tab */
.recall-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.recall-search {
  flex: 1;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(var(--phosphor-rgb), 0.18);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 2px;
  outline: none;
}

.recall-search:focus {
  border-color: var(--phosphor);
}

.recall-add-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: transparent;
  color: var(--phosphor-dim);
  border: 1px solid rgba(var(--phosphor-rgb), 0.25);
  padding: 6px 12px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  white-space: nowrap;
}

.recall-add-btn:hover {
  color: var(--phosphor);
  border-color: rgba(var(--phosphor-rgb), 0.5);
  background: rgba(var(--phosphor-rgb), 0.06);
}

.recall-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid rgba(var(--phosphor-rgb), 0.18);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.2);
}

.recall-add-content,
.recall-add-aliases {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(var(--phosphor-rgb), 0.18);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 2px;
  outline: none;
  box-sizing: border-box;
  resize: vertical;
}

.recall-add-content:focus,
.recall-add-aliases:focus {
  border-color: var(--phosphor);
}

.recall-add-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.recall-add-cancel {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: transparent;
  color: var(--phosphor-faint);
  border: 1px solid rgba(var(--phosphor-rgb), 0.12);
  padding: 5px 12px;
  border-radius: 2px;
  cursor: pointer;
}

.recall-add-cancel:hover {
  color: var(--phosphor-dim);
}

.recall-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recall-loading,
.recall-empty {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--phosphor-dim);
  padding: 24px 8px;
  text-align: center;
}

.recall-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 6px;
  border-top: 1px solid rgba(var(--phosphor-rgb), 0.06);
  transition: opacity 180ms;
}

.recall-row:last-child {
  border-bottom: 1px solid rgba(var(--phosphor-rgb), 0.06);
}

.recall-row:hover {
  background: rgba(var(--phosphor-rgb), 0.03);
}

.recall-row-deleting {
  opacity: 0;
}

.recall-row-body {
  flex: 1;
  min-width: 0;
}

.recall-content {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg);
  word-wrap: break-word;
  white-space: pre-wrap;
}

.recall-aliases {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.recall-alias {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--phosphor-dim);
  background: rgba(var(--phosphor-rgb), 0.06);
  border: 1px solid rgba(var(--phosphor-rgb), 0.15);
  padding: 1px 5px;
  border-radius: 2px;
}

.recall-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--phosphor-faint);
  margin-top: 4px;
  letter-spacing: 0.05em;
}

.recall-row-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.recall-icon-btn {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: transparent;
  color: var(--phosphor-faint);
  border: 1px solid rgba(var(--phosphor-rgb), 0.15);
  padding: 3px 8px;
  border-radius: 2px;
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}

.recall-icon-btn:hover {
  color: var(--phosphor);
  border-color: rgba(var(--phosphor-rgb), 0.4);
}

.recall-delete-btn:hover {
  color: #f08b8b;
  border-color: rgba(240, 139, 139, 0.4);
}

.recall-row-editing {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(var(--phosphor-rgb), 0.25);
  background: rgba(0, 0, 0, 0.2);
}

.recall-edit-content {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(var(--phosphor-rgb), 0.18);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 2px;
  outline: none;
  box-sizing: border-box;
  resize: vertical;
}

.recall-edit-content:focus {
  border-color: var(--phosphor);
}

.recall-edit-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.recall-edit-cancel {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: transparent;
  color: var(--phosphor-faint);
  border: 1px solid rgba(var(--phosphor-rgb), 0.12);
  padding: 5px 12px;
  border-radius: 2px;
  cursor: pointer;
}

.recall-edit-cancel:hover {
  color: var(--phosphor-dim);
}

/* ─── NEXT per project card (All Tasks column) ── */
.next-section {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--phosphor-faint);
}
.next-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 16px;
  font-size: 12px;
}
.next-project {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--phosphor-dim);
  flex-shrink: 0;
}
.next-title {
  color: var(--phosphor);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.next-urgent {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--gold);
  flex-shrink: 0;
}
.next-due {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--phosphor-dim);
  flex-shrink: 0;
}

/* BRIEFING sub-tab styles removed (Wave 1 WS4) — the dashboard read-view was
   retired; the /api/briefings route stays live server-side. */

/* ─── Interface Designer (Settings → INTERFACE) ──────────────────────────
   Curated-preset theming + reading-comfort controls. Built on the existing
   :root token contract — picking a preset overrides the consumed tokens at
   :root level and the whole CRT repaints reactively. localStorage-persisted,
   applied pre-paint by the no-flash boot script in index.html. */

.id-block { margin-top: 4px; }

.id-row-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--phosphor-dim);
  margin: 14px 0 8px;
}

/* Preset swatch grid — each swatch is a mini CRT screen preview */
.id-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

.id-swatch {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 9px 8px;
  border: 1px solid rgba(var(--phosphor-rgb), 0.18);
  border-radius: 4px;
  background: var(--sw-screen, #06120a);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  overflow: hidden;
}

.id-swatch:hover { border-color: rgba(var(--phosphor-rgb), 0.45); }

.id-swatch.active {
  border-color: var(--sw-accent, var(--phosphor));
  box-shadow: 0 0 0 1px var(--sw-accent, var(--phosphor)),
              0 0 12px -2px var(--sw-accent, var(--phosphor));
}

/* the little accent bar that reads as "chrome" in the preview */
.id-swatch-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--sw-accent, #8bf0a4);
  box-shadow: 0 0 6px -1px var(--sw-accent, #8bf0a4);
  width: 70%;
}

.id-swatch-name {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--sw-text, #e8e8e8);
}

.id-swatch-sample {
  font-family: var(--font-sans);
  font-size: 9px;
  color: var(--sw-text, #e8e8e8);
  opacity: 0.7;
}

.id-swatch.active .id-swatch-check {
  position: absolute;
  top: 5px;
  right: 6px;
  font-size: 9px;
  color: var(--sw-accent, var(--phosphor));
}

/* Font segmented control */
.id-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.id-seg-btn {
  flex: 1 1 auto;
  padding: 6px 10px;
  border: 1px solid rgba(var(--phosphor-rgb), 0.18);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-content);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.id-seg-btn:hover { border-color: rgba(var(--phosphor-rgb), 0.4); }

.id-seg-btn.active {
  border-color: var(--phosphor);
  background: rgba(var(--phosphor-rgb), 0.1);
  color: var(--phosphor-bright);
}

/* Reading-font live preview — rendered in the selected font so the change is
   visible right where it's chosen (the rest of the Settings panel is mono). */
.id-font-preview {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(var(--phosphor-rgb), 0.12);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-content);
  font-size: 15px;
  line-height: 1.5;
}

/* WCAG contrast read-out */
.id-wcag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--phosphor-dim);
}

.id-wcag-badge {
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: 600;
}

.id-wcag-badge.pass { color: var(--phosphor-bright); background: rgba(var(--phosphor-rgb), 0.14); }
.id-wcag-badge.warn { color: #f0d08b; background: rgba(240, 208, 139, 0.14); }
.id-wcag-badge.fail { color: #ff8b8b; background: rgba(255, 90, 90, 0.16); }

/* Reset link */
.id-reset {
  margin-top: 14px;
  padding: 6px 12px;
  border: 1px solid rgba(var(--phosphor-rgb), 0.2);
  border-radius: 3px;
  background: transparent;
  color: var(--phosphor-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.id-reset:hover { color: var(--phosphor); border-color: var(--phosphor); }

/* ─── Task actions, inline edit/create, dates (Workstream B, 20Jun26s) ─── */

/* ALL-tab action button (replaces the checkbox). Same lead-column footprint. */
/* The ⋯ trigger is hidden until the row is hovered (Jordan 20Jun26s, #2/#3) —
   no per-task box at rest. On touch devices (no hover) it stays invisible and
   the row body opens the menu instead (wireTaskActions). */
/* (.task-action-btn — the hover-revealed ⋯ trigger — was removed 05Jul26u;
   the whole row is now the click target. See wireTaskActions in app.js.) */

/* Leading row marker — plain bullet, or an arrow for tasks already on Today
   (replaces the NEXT pill, Jordan 20Jun26s, #5). */
.task-marker {
  flex-shrink: 0;
  width: 14px;
  margin-top: 3px;
  text-align: center;
  font-size: 13px;
  line-height: 1.1;
  color: var(--phosphor-dim);
  opacity: 0.5;
  user-select: none;
}
.task-marker.is-today {
  color: var(--phosphor-bright);
  opacity: 0.85;
}

/* Body-level fixed popover menu. */
.task-action-menu {
  position: fixed;
  z-index: 200;
  min-width: 132px;
  background: var(--bg-elevated);
  border: 1px solid rgba(var(--phosphor-rgb), 0.3);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.tam-item {
  background: transparent;
  border: none;
  color: var(--fg-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 7px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}
.tam-item:hover { background: rgba(var(--phosphor-rgb), 0.12); color: var(--fg); }

/* Inline edit/create form (Task + Notes). */
.task-edit-form { display: flex; flex-direction: column; gap: 3px; }
.tef-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}
.tef-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  padding: 6px 8px;
  width: 100%;
  resize: vertical;
}
.tef-input:focus { outline: none; border-color: var(--phosphor-dim); }
.tef-actions { display: flex; gap: 6px; margin-top: 4px; }
.tef-save, .tef-cancel {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.tef-save { color: var(--phosphor); border-color: var(--phosphor-dim); }
.tef-save:hover { background: rgba(var(--phosphor-rgb), 0.15); }
.tef-cancel { color: var(--fg-muted); }
.tef-cancel:hover { color: var(--fg); border-color: var(--fg-muted); }
.new-task-inline { background: rgba(var(--phosphor-rgb), 0.04); border-radius: 6px; }
/* (The standalone .not-today-btn was retired 20Jun26s, #3 — "Not Today" is now
   the first item of the shared hover/tap action menu on Today-list rows.) */

/* "+ NEW PROJECT" foot row + its inline form. */
.new-project-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 9px 10px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.new-project-row:hover { color: var(--phosphor); border-color: var(--phosphor-dim); }
.new-project-row .np-plus { font-size: 1rem; line-height: 1; }
.new-project-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--phosphor-dim);
  border-radius: 6px;
  background: rgba(var(--phosphor-rgb), 0.04);
}

/* Date-set popover — a VISIBLE, tappable native date field + explicit ✕. Visible
   so the picker opens on every platform (a 1px/hidden input opens nothing on
   mobile); the ✕ is the only dismiss path so nothing races the open picker.
   Field font-size:16px prevents mobile focus-zoom. */
.task-date-pop {
  position: fixed;
  z-index: 200;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 5px;
  background: var(--bg-elevated);
  border: 1px solid var(--phosphor-dim);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
}
.task-date-input {
  min-width: 150px;
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.02em;
}
.task-date-input:focus { outline: none; border-color: var(--phosphor); }
.task-date-cancel {
  flex-shrink: 0;
  width: 34px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.task-date-cancel:hover { color: var(--fg); border-color: var(--fg-muted); }

/* UNDO button — ALL TASKS header, right-anchored, lilac (Jordan 20Jun26s). */
.col-header-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* UNDO lives in the tabs row beside PROJECTS / NEXT (Jordan 20Jun26s, #1):
   borderless, green like the tab/col titles, pushed to the right end. */
.undo-btn {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--phosphor-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 4px;
  cursor: pointer;
  transition: color 0.12s ease, opacity 0.12s ease;
}
.undo-btn:hover { color: var(--phosphor); background: transparent; }
.undo-btn:disabled { opacity: 0.4; cursor: default; }
.undo-btn.undo-busy { opacity: 0.6; }
.undo-btn.undo-ok { color: var(--phosphor-bright); }
.undo-btn.undo-none { color: var(--fg-muted); }