/* theme.css — the one shared readability layer, injected by pp-ux.js on every page.
   Born from direct user feedback (31 Aug 2026): "really small grey writing on black
   backgrounds is quite difficult for older people and more hard of seeing people".
   They were right, and measurably so: the estate's muted grey (#6e7a90 on #050608)
   is ~4.3:1 — BELOW the WCAG AA 4.5:1 floor for normal text — and it was being used
   at 10–12px in 192 places. Pages define the same tokens locally; this sheet loads
   AFTER page styles, so these overrides win everywhere without touching 78 files.

   Layers:
   1. Brighter muted/secondary text tokens (≈7:1 and ≈10:1 against the void).
   2. A 6.25% base-font bump — the whole estate is rem-sized, so every small label
      steps up proportionally (0.66rem: 10.6px → 11.2px) with no layout surgery.
   3. Visible keyboard focus on every interactive element that doesn't already
      define its own (:where keeps specificity low so page-level styles still win).
   4. prefers-contrast: more — users who ask their OS for higher contrast get it. */

:root{
  color-scheme:dark;
  --tm:#94a1b6;              /* was #6e7a90 — muted text, now ~7:1 on the void */
  --text-muted:#94a1b6;      /* the app page's name for the same role */
  --ts:#b7c2d0;              /* was #9aa6ba — secondary text, now ~10:1 */
  --text-secondary:#b7c2d0;
}

:root[data-pp-theme="light"]{
  color-scheme:light;
  --void:#f5f7f8;--deep:#eef2f4;--surface:#ffffff;--elevated:#f0f4f5;
  --border:#d7dee2;--border-bright:#b9c6cc;--line:#d7dee2;--line-bright:#b9c6cc;
  --tp:#142126;--ink:#142126;--ts:#42545d;--text-secondary:#42545d;
  --tm:#586a73;--soft:#586a73;--text-muted:#586a73;
  --teal:#007f75;--accent:#007f75;--green:#19753b;--amber:#9a5b00;--red:#b42c21;
}
:root[data-pp-theme="dark"]{color-scheme:dark}
.pp-theme-control{display:flex;align-items:center;gap:.4rem;font-family:var(--ui,system-ui,sans-serif)}
.pp-theme-control label{font-size:.75rem;color:var(--ts,#b7c2d0)}
.pp-theme-control select{min-height:40px;border:1px solid var(--border-bright,var(--line-bright,#2a3240));border-radius:8px;background:var(--surface,#111318);color:var(--tp,var(--ink,#eef1f7));padding:.35rem 1.8rem .35rem .55rem}
.pp-theme-float{position:fixed;right:14px;bottom:64px;z-index:99989;padding:.3rem .45rem;border-radius:10px;background:var(--surface,#111318);border:1px solid var(--border-bright,var(--line-bright,#2a3240));box-shadow:0 4px 18px rgba(0,0,0,.18)}
:root[data-pp-theme="light"] body{background:var(--void)!important;color:var(--tp)!important}
:root[data-pp-theme="light"] .panel,:root[data-pp-theme="light"] .infobox,:root[data-pp-theme="light"] .back{background:rgba(255,255,255,.96)!important}
:root[data-pp-theme="light"] .bar{background:linear-gradient(180deg,rgba(245,247,248,.96),rgba(245,247,248,0))!important}
:root[data-pp-theme="light"] .base-tiles,:root[data-pp-theme="light"] .os-detail{filter:none!important}
:root[data-pp-theme="light"] .leaflet-container{background:#e7ecee!important}
/* The landing and radar pages hardcode the sticky header to the void colour, so in Light the
   wordmark (var(--tp), now dark ink) vanished into a black bar. Match the header to the page. */
:root[data-pp-theme="light"] header{background:rgba(245,247,248,.92)!important;border-bottom-color:var(--border)!important}

html{font-size:106.25%}      /* 17px base */

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--teal,var(--accent,#00e5cc));
  outline-offset:2px;
}

@media (prefers-contrast:more){
  :root{
    --tm:#c9d2dd; --text-muted:#c9d2dd;
    --ts:#e0e6ed; --text-secondary:#e0e6ed;
  }
  :root[data-pp-theme="light"]{
    --tm:#31434b;--text-muted:#31434b;
    --ts:#1f3037;--text-secondary:#1f3037;
  }
}
@media print{.pp-theme-control{display:none!important}:root{color-scheme:light}}