/* Colours for every TabBuzz page. Dark follows the system unless the Look setting
   pins a theme: theme-boot.js and applyTheme() set <html data-theme>. */
:root {
  --bg: #ffffff;
  --fg: #18181b;
  --muted: #71717a;
  --line: #eef0f3;
  --row-line: #f1f1f4;
  --card: #ffffff;
  --card-line: #d4d4d8;
  --faint: #d4d4d8;
  --soft: #f8fafc;
  --soft-line: #eef2f7;
  --key-bg: #fafafa;
  --key-line: #e4e4e7;
  --accent: #14b8a6;
  --accent-strong: #0d9488;
  --accent-text: #0f766e;
  --accent-soft: #f0fdfa;
  --due: #dc2626;
  --track: #e2e8f0;
  --shadow: rgba(15, 23, 42, 0.12);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f172a;
    --fg: #e2e8f0;
    --muted: #94a3b8;
    --line: #1e293b;
    --row-line: #1e293b;
    --card: #1e293b;
    --card-line: #1e293b;
    --faint: #475569;
    --soft: #111c33;
    --soft-line: #1e293b;
    --key-bg: #0f172a;
    --key-line: #334155;
    --accent: #2dd4bf;
    --accent-strong: #0d9488;
    --accent-text: #5eead4;
    --accent-soft: #134e4a;
    --due: #f87171;
    --track: #334155;
    --shadow: rgba(2, 6, 23, 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0f172a;
  --fg: #e2e8f0;
  --muted: #94a3b8;
  --line: #1e293b;
  --row-line: #1e293b;
  --card: #1e293b;
  --card-line: #1e293b;
  --faint: #475569;
  --soft: #111c33;
  --soft-line: #1e293b;
  --key-bg: #0f172a;
  --key-line: #334155;
  --accent: #2dd4bf;
  --accent-strong: #0d9488;
  --accent-text: #5eead4;
  --accent-soft: #134e4a;
  --due: #f87171;
  --track: #334155;
  --shadow: rgba(2, 6, 23, 0.5);
  color-scheme: dark;
}

/* Switches and segmented choices, used by the settings page and the popup's quick settings. */
.sw { appearance: none; width: 34px; height: 20px; border-radius: 999px; background: var(--faint); position: relative; cursor: pointer; flex: none; margin: 0; transition: background 0.15s; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.15s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.sw:checked { background: var(--accent-strong); }
.sw:checked::after { transform: translateX(14px); }
.sw:focus-visible, .seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg { display: inline-flex; gap: 2px; background: var(--soft); border: 1px solid var(--soft-line); border-radius: 8px; padding: 2px; flex: none; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 3px 9px; border-radius: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
.seg input:checked + span { background: var(--card); color: var(--accent-text); font-weight: 600; box-shadow: 0 1px 2px var(--shadow); }
select, .field { font: inherit; color: var(--fg); background: var(--card); border: 1px solid var(--card-line); border-radius: 7px; padding: 4px 7px; }
select:focus, .field:focus { outline: 2px solid var(--accent); outline-offset: -1px; }