/* ==========================================================================
   Terminal Light bridge for the admin and editor screens (undesigned; see
   EXTEND_TO_ALL_SCREENS.md). Linked by admin_settings, topic_settings,
   collection_viewer and collection_editor_unified.

   1. Legacy variables.css tokens (dark-only) are re-pointed at the TL tokens
      on these pages, so the old block/editor sheets follow the theme toggle.
   2. The Settings pattern: the shell rail becomes section navigation
      (.tl-settings-rail), groups are TL cards with a header row, and rows put
      the label + hint on the left and the control on the right.
   ========================================================================== */

body:is(.admin-workspace, .topic-settings-mode, .timeline-viewer-mode, .collection-unified-editor-mode) {
  --color-primary: var(--tl-ink);
  --color-primary-rgb: var(--tl-ink-rgb);
  --color-primary-light: var(--tl-fill-06);
  --color-primary-medium: var(--tl-line-12);
  --color-primary-dark: var(--tl-ink-60);
  --color-primary-glow: none;
  --color-bg-primary: var(--tl-page);
  --color-bg-base: var(--tl-page);
  --color-bg-base-darker: var(--tl-page);
  --color-bg-base-mid: var(--tl-card);
  --color-bg-base-light: var(--tl-card);
  --color-bg-card: var(--tl-card);
  --color-bg-card-hover: var(--tl-card);
  --color-bg-overlay: var(--tl-card);
  --color-bg-elevated: var(--tl-card);
  --color-bg-secondary: var(--tl-fill-03);
  --color-text-primary: var(--tl-ink);
  --color-text-secondary: var(--tl-ink-60);
  --color-text-tertiary: var(--tl-ink-45);
  --color-text-muted: var(--tl-ink-50);
  --color-text-disabled: var(--tl-ink-35);
  --color-text-input: var(--tl-ink);
  --color-border: var(--tl-line-10);
  --color-border-primary: var(--tl-ink-50);
  --color-border-secondary: var(--tl-line-06);
  --color-border-light: var(--tl-line-05);
  --color-border-muted: var(--tl-fill-025);
  --color-shadow-primary: var(--tl-line-10);
  --color-shadow-glow: transparent;
  --font-sans: var(--tl-font);
  --font-mono: var(--tl-mono);
  --accent: var(--tl-ink);
  --pos: var(--tl-up);
  --neg: var(--tl-down);
}

/* ---- Settings rail: section nav inside the shell sidebar ---- */
.tl-settings-rail .tl-settings-back { margin-bottom: 10px; gap: 6px; font-size: 12.5px; color: var(--tl-ink-50); }
.tl-settings-rail .tl-side-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-settings-rail .tl-settings-nav { display: flex; flex-direction: column; gap: 1px; }
.tl-settings-rail button.tl-side-link {
  width: 100%; border: 0; background: transparent; cursor: pointer;
  font: 400 13.5px var(--tl-font); text-align: left; justify-content: flex-start;
}
.tl-settings-rail .tl-side-link svg { flex: none; color: var(--tl-ink-45); }
.tl-settings-rail .tl-side-link:is(.active, [aria-current]) { background: var(--tl-fill-06); color: var(--tl-ink); font-weight: 500; }
.tl-settings-rail .tl-side-link:is(.active, [aria-current]) svg { color: var(--tl-ink); }
.tl-settings-rail .tl-side-link .count {
  margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--tl-r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tl-fill-06); font: 400 10.5px var(--tl-mono); color: var(--tl-ink-60);
}
.tl-settings-rail .tl-side-link .count[data-count="0"] { display: none; }

/* ---- Settings rows: label + hint left, control right ---- */
.tl-set-row { display: flex; align-items: center; gap: 16px; padding: 12px 18px; }
.tl-set-row + .tl-set-row { border-top: 1px solid var(--tl-line-05); }
.tl-set-row > .lbl { flex: 1; min-width: 0; }
.tl-set-row > .lbl b { display: block; font-size: 13.5px; font-weight: 600; color: var(--tl-ink); }
.tl-set-row > .lbl span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--tl-ink-50); }
.tl-set-row > .ctl { flex: none; display: flex; align-items: center; gap: 8px; }
@media (max-width: 720px) {
  .tl-set-row { flex-wrap: wrap; padding: 12px 14px; }
  .tl-set-row > .ctl { width: 100%; }
}