/* Theme toggle + dark theme token overrides. Owned by the dark-mode agent. */

/* toggle button (outline pill icon button) */
#themeToggle { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; background: transparent; color: var(--color-ink); border: 1px solid var(--color-hairline); border-radius: 18px; flex: none; }
#themeToggle:hover { background: var(--color-canvas); }
#themeToggle svg { display: block; }
.mode + #themeToggle, .feeder + #themeToggle { margin-left: 0; }
body.m header.top #themeToggle { margin-left: auto; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-canvas: #0a0a0a; --color-surface-alt: #121212; --color-paper: #171717;
    --color-ink: #fafafa; --color-ink-soft: #e5e5e5; --color-mid-gray: #a3a3a3;
    --color-hairline: #2e2e2e; --color-ember: #ff5c5f;
    --shadow-subtle: 0 0 0 1px rgba(255,255,255,0.06);
    --color-status-red: #f87171; --color-status-amber: #fbbf24; --color-status-green: #4ade80;
    --color-status-red-wash: rgba(248,113,113,0.12); --color-status-amber-wash: rgba(251,191,36,0.12); --color-status-green-wash: rgba(74,222,128,0.12);
    --gs-scrim: rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #0a0a0a; --color-surface-alt: #121212; --color-paper: #171717;
  --color-ink: #fafafa; --color-ink-soft: #e5e5e5; --color-mid-gray: #a3a3a3;
  --color-hairline: #2e2e2e; --color-ember: #ff5c5f;
  --shadow-subtle: 0 0 0 1px rgba(255,255,255,0.06);
  --color-status-red: #f87171; --color-status-amber: #fbbf24; --color-status-green: #4ade80;
  --color-status-red-wash: rgba(248,113,113,0.12); --color-status-amber-wash: rgba(251,191,36,0.12); --color-status-green-wash: rgba(74,222,128,0.12);
  --gs-scrim: rgba(0,0,0,.6);
}

/* Component overrides for hard-coded colours in app.css (applied in both dark selectors) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background: #0a0a0a; }
  :root:not([data-theme="light"]) nav.tabs button.on .muted { color: #525252; }
  :root:not([data-theme="light"]) .pill.red { color: #0a0a0a; }
  :root:not([data-theme="light"]) .dt-mk { color: #0a0a0a; border-color: #171717; }
  :root:not([data-theme="light"]) .ss-mk { border-color: #171717; }
  :root:not([data-theme="light"]) svg text[fill="#fff"] { fill: #0a0a0a; }
  :root:not([data-theme="light"]) .drawer-bg { background: var(--gs-scrim); }
  :root:not([data-theme="light"]) .geo .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(.85) contrast(.9); }
  :root:not([data-theme="light"]) .leaflet-container { background: #0a0a0a; }
  :root:not([data-theme="light"]) .leaflet-bar a, :root:not([data-theme="light"]) .leaflet-bar a:hover { background: #171717; color: #fafafa; border-bottom-color: #2e2e2e; }
  :root:not([data-theme="light"]) .leaflet-bar a:hover { background: #262626; }
  :root:not([data-theme="light"]) .leaflet-bar { border: 1px solid #2e2e2e; box-shadow: none; }
  :root:not([data-theme="light"]) .leaflet-control-attribution { background: rgba(18,18,18,.8); color: #a3a3a3; }
  :root:not([data-theme="light"]) .leaflet-control-attribution a { color: #e5e5e5; }
  :root:not([data-theme="light"]) .geo .leaflet-tooltip, :root:not([data-theme="light"]) .leaflet-popup-content-wrapper, :root:not([data-theme="light"]) .leaflet-popup-tip { background: #171717; color: #fafafa; border-color: #2e2e2e; }
  :root:not([data-theme="light"]) .leaflet-tooltip-top:before { border-top-color: #171717; }
  :root:not([data-theme="light"]) .leaflet-tooltip-bottom:before { border-bottom-color: #171717; }
  :root:not([data-theme="light"]) .leaflet-tooltip-left:before { border-left-color: #171717; }
  :root:not([data-theme="light"]) .leaflet-tooltip-right:before { border-right-color: #171717; }
}
:root[data-theme="dark"] body { background: #0a0a0a; }
:root[data-theme="dark"] nav.tabs button.on .muted { color: #525252; }
:root[data-theme="dark"] .pill.red { color: #0a0a0a; }
:root[data-theme="dark"] .dt-mk { color: #0a0a0a; border-color: #171717; }
:root[data-theme="dark"] .ss-mk { border-color: #171717; }
:root[data-theme="dark"] svg text[fill="#fff"] { fill: #0a0a0a; }
:root[data-theme="dark"] .drawer-bg { background: var(--gs-scrim); }
:root[data-theme="dark"] .geo .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(.85) contrast(.9); }
:root[data-theme="dark"] .leaflet-container { background: #0a0a0a; }
:root[data-theme="dark"] .leaflet-bar a { background: #171717; color: #fafafa; border-bottom-color: #2e2e2e; }
:root[data-theme="dark"] .leaflet-bar a:hover { background: #262626; }
:root[data-theme="dark"] .leaflet-bar { border: 1px solid #2e2e2e; box-shadow: none; }
:root[data-theme="dark"] .leaflet-control-attribution { background: rgba(18,18,18,.8); color: #a3a3a3; }
:root[data-theme="dark"] .leaflet-control-attribution a { color: #e5e5e5; }
:root[data-theme="dark"] .geo .leaflet-tooltip, :root[data-theme="dark"] .leaflet-popup-content-wrapper, :root[data-theme="dark"] .leaflet-popup-tip { background: #171717; color: #fafafa; border-color: #2e2e2e; }
:root[data-theme="dark"] .leaflet-tooltip-top:before { border-top-color: #171717; }
:root[data-theme="dark"] .leaflet-tooltip-bottom:before { border-bottom-color: #171717; }
:root[data-theme="dark"] .leaflet-tooltip-left:before { border-left-color: #171717; }
:root[data-theme="dark"] .leaflet-tooltip-right:before { border-right-color: #171717; }
:root[data-theme="dark"] .geo .leaflet-overlay-pane path:not(.leaflet-interactive) { stroke: #a3a3a3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .geo .leaflet-overlay-pane path:not(.leaflet-interactive) { stroke: #a3a3a3; } }