/* Theme chip — small reading-tone toggle, lives top-right of Brief / Live / Radar.
   Plus all overrides for [data-theme="lighter"] across those three views.
   Lighter mode = warm graphite (mid-tone): bg lifts from near-black to a sepia-charcoal,
   ink stays warm cream, copper stays at full saturation. */

/* ── Theme chip ── */
.theme-chip {
  top: 20px; right: 24px; z-index: 30;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  background: rgba(10,10,11,0.55);
  border: 1px solid var(--gray-800);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--gray-300); text-transform: uppercase;
  cursor: pointer; user-select: none;
  backdrop-filter: blur(4px);
  transition: border-color 180ms, color 180ms, background 180ms;
}
.theme-chip:hover { border-color: var(--copper); color: var(--paper-warm); }
.theme-chip-track {
  position: relative; width: 26px; height: 12px;
  border: 1px solid var(--gray-700);
  background: rgba(0,0,0,0.4);
}
.theme-chip-pip {
  position: absolute; top: 1px; width: 10px; height: 8px;
  background: var(--copper);
  transition: left 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.theme-chip-pip.left { left: 1px; }
.theme-chip-pip.right { left: 13px; }
.theme-chip-label { color: var(--paper-warm); min-width: 52px; text-align: right; }

/* In radar bar, the chip is inline with action buttons — un-floats it */
.radar-actions .theme-chip { background: transparent; padding: 5px 10px; }

/* ──────────────────────────────────────────────────────────────────────────────
   LIGHTER MODE
   Applies only on .brief, .live, .radar-shell when [data-theme="lighter"] on .app
   ────────────────────────────────────────────────────────────────────────────── */

/* Token shifts — re-purpose surface tokens to a warm graphite. */
.app[data-theme="lighter"] section.brief,
.app[data-theme="lighter"] section.live,
.app[data-theme="lighter"] .radar-shell {
  --rd-surface: #2A2520;       /* warm graphite — page bg */
  --rd-surface-2: #3A332C;     /* slightly lifted — table rows, fields */
  --rd-surface-3: #4A4138;     /* cards, hover */
  --rd-rule: rgba(232, 220, 192, 0.14);   /* hairlines */
  --rd-rule-strong: rgba(232, 220, 192, 0.28);
  --rd-ink: #F2E6CC;           /* primary text — slightly warmer than dark mode */
  --rd-ink-mute: #C9BBA1;      /* secondary text */
  --rd-ink-faint: #A89880;     /* tertiary / labels */
  background: var(--rd-surface);
}

/* ── Brief Builder ── */
.app[data-theme="lighter"] section.brief { background: var(--rd-surface); }
.app[data-theme="lighter"] .brief h1,
.app[data-theme="lighter"] .brief-progress .step .nm { color: var(--rd-ink); }
.app[data-theme="lighter"] .brief-progress .step { border-top-color: var(--rd-rule-strong); }
.app[data-theme="lighter"] .brief-progress .step .num { color: var(--rd-ink-faint); }
.app[data-theme="lighter"] .brief-field input,
.app[data-theme="lighter"] .brief-field textarea,
.app[data-theme="lighter"] .brief-field select {
  color: var(--rd-ink);
  border-bottom-color: var(--rd-rule-strong);
}
.app[data-theme="lighter"] .brief-field input::placeholder,
.app[data-theme="lighter"] .brief-field textarea::placeholder { color: var(--rd-ink-faint); opacity: 0.7; }
.app[data-theme="lighter"] .brief-field .hint { color: var(--rd-ink-faint); }
.app[data-theme="lighter"] .brief-field .opt { border-color: var(--rd-rule-strong); background: var(--rd-surface-2); }
.app[data-theme="lighter"] .brief-field .opt:hover { border-color: var(--copper); background: var(--rd-surface-3); }
.app[data-theme="lighter"] .brief-field .opt.sel { background: rgba(217,119,87,0.18); border-color: var(--copper); }
.app[data-theme="lighter"] .brief-field .opt .nm { color: var(--rd-ink); }
.app[data-theme="lighter"] .brief-field .opt .meta { color: var(--rd-ink-faint); }
.app[data-theme="lighter"] .brief-nav { border-top-color: var(--rd-rule-strong); }

/* ── Live Briefs ── */
.app[data-theme="lighter"] section.live { background: var(--rd-surface); }
.app[data-theme="lighter"] .live-bar { border-bottom-color: var(--rd-rule-strong); }
.app[data-theme="lighter"] .live-bar h1 { color: var(--rd-ink) !important; }
.app[data-theme="lighter"] .live-bar p { color: var(--rd-ink-mute) !important; }
.app[data-theme="lighter"] .next-drop { border-left-color: var(--rd-rule-strong); }
.app[data-theme="lighter"] .t-mono-label { color: var(--rd-ink-faint); }
.app[data-theme="lighter"] .live-head,
.app[data-theme="lighter"] .live-row { border-bottom-color: var(--rd-rule); }
.app[data-theme="lighter"] .live-head { color: var(--rd-ink-faint); border-bottom-color: var(--rd-rule-strong); }
.app[data-theme="lighter"] .live-row { color: var(--rd-ink-mute); }
.app[data-theme="lighter"] .live-row .wk,
.app[data-theme="lighter"] .live-row .date,
.app[data-theme="lighter"] .live-row .read,
.app[data-theme="lighter"] .live-row .by { color: var(--rd-ink-faint); }
.app[data-theme="lighter"] .live-row .topic { color: var(--rd-ink-mute); }
.app[data-theme="lighter"] .live-row .title { color: var(--rd-ink); }
.app[data-theme="lighter"] .live-row.live { background: rgba(217,119,87,0.08); }
.app[data-theme="lighter"] .live-row.live:hover { background: rgba(217,119,87,0.16); }
.app[data-theme="lighter"] .live-foot { border-top-color: var(--rd-rule-strong); }

/* ── Radar shell + watermark ── */
.app[data-theme="lighter"] .radar-shell { background: var(--rd-surface); }
.app[data-theme="lighter"] .radar-bar { background: rgba(42, 37, 32, 0.96); border-bottom-color: var(--rd-rule-strong); }
.app[data-theme="lighter"] .radar-bar .back { color: var(--rd-ink); }
.app[data-theme="lighter"] .radar-watermark { color: rgba(217,119,87,0.07); }

/* The chip itself looks correct against lighter bg — slight nudge for contrast */
.app[data-theme="lighter"] .theme-chip { background: rgba(20,16,12,0.4); border-color: var(--rd-rule-strong); }