/* Readability pass (2026-09-15). Loaded after every other stylesheet.
   1. Module stylesheets (station health, OTA, admin...) use --panel/--border with white fallbacks that the themes
      never defined, so dark mode painted white cards under light text. Map them to the theme tokens.
   2. Raise text below WCAG AA (4.5:1 normal, 3:1 large) in both themes; colours measured on the rendered pages. */
:root{--panel:var(--surface);--border:var(--line);--accent-text:#7fe3c9;--link-text:#9dd3ff}
:root[data-theme=light]{--accent-text:#0a6a5e;--link-text:#1c5f9e}

/* Status pills and text links that used the brand green directly on pale green / white. */
:root[data-theme=light] .badge:not(.stale),:root[data-theme=light] .connection,:root[data-theme=light] #stationState:not(.stale){color:var(--accent-text)}
:root[data-theme=light] :is(main,dialog) .text-button:not(.danger-text){color:var(--accent-text)}
:root[data-theme=light] .demo-banner strong{color:var(--accent-text)}
:root[data-theme=light] .segmented button.selected{color:#1c5f9e}
:root[data-theme=light] .compass-n{color:#1c65a8!important}

/* Primary buttons: dark navy on brand green was 3.98:1. A deeper green with white text keeps the brand and reads 5:1+. */
:root[data-theme=light] .button:not(.secondary):not(.ghost):not(.danger):not(:disabled),
:root[data-theme=light] .geo-open{background:#0c7669;border-color:#0c7669;color:#fff}
:root[data-theme=light] .button:not(.secondary):not(.ghost):not(.danger):not(:disabled) span,
:root[data-theme=light] .geo-open span{color:inherit}

/* Map analysis panel in dark mode: headings were dark navy on the dark panel. */
:root:not([data-theme=light]) #analysisHeading,
:root:not([data-theme=light]) #analysisZoneLabel,
:root:not([data-theme=light]) #analysisOptionsTitle{color:var(--text)}
:root:not([data-theme=light]) #analysisScope{color:var(--muted)}
:root:not([data-theme=light]) .analysis-presets button{background:var(--surface2);border-color:var(--line);color:var(--text)}
:root:not([data-theme=light]) .analysis-presets button[aria-pressed=true]{background:#1f3b52;color:#e6f3ff}

/* Disabled pager buttons stay visibly disabled but legible. */
.button.secondary:disabled{opacity:1;color:var(--muted)}

/* Disabled actions: solid muted colours instead of 40% opacity, so the label stays readable while clearly inactive. */
.button:not(.secondary):disabled{opacity:1;background:var(--surface2);border-color:var(--line);color:var(--muted);box-shadow:none}
.button:not(.secondary):disabled span{color:inherit}

/* OTA page eyebrow in dark mode. */
:root:not([data-theme=light]) .ota-eyebrow{color:#86c9ec}

/* ---- Every device: phones (≤640px) get readable minimum text sizes, card-style admin tables and roomy actions ---- */
.sensor-note{font-size:12px;line-height:1.35}
@media (max-width:640px){
 p.eyebrow,#stationId,.sensor-group-title span{font-size:12px}
 #atlasExplore span,#atlasSensors span,#mapExpand{font-size:13px}
 .map-reading-head span,.map-reading-station,.map-reading-time,.map-reading-number small{font-size:12px}
 .atlas-coordinate-label,#atlasPositionStatus,.atlas-coverage span{font-size:12px}
 .geo-detail-head .eyebrow,.geo-data-status,.geo-detail dt,.geo-detail-head+* dt{font-size:12px}
 .small-card p,.sensor-heading p{font-size:13px}
 /* Station tile actions: two columns of real buttons instead of four cramped text links. */
 .station-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .station-actions button{min-height:42px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);font-size:14px}
 /* Admin tables become labelled cards (labels are copied from the table header by admin.js). */
 .table-wrap{overflow:visible}
 .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:100%}
 .table-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .table-wrap tr{margin:0 0 10px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
 .table-wrap table{white-space:normal}   /* the desktop table is nowrap; card labels must wrap */
 .table-wrap td{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:center;gap:12px;padding:7px 0;border:0;text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
 .table-wrap td[data-label]::before{content:attr(data-label);color:var(--muted);font-size:13px;line-height:1.35;text-align:left;white-space:normal}
 .table-wrap td.user-actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:10px}
 .table-wrap td.user-actions::before{flex-basis:100%}
 .table-wrap td.user-actions button{min-height:40px}
 .demo-banner a,.demo-banner button,#logout{display:inline-flex;align-items:center;min-height:40px}
}

/* Hero banners drawn with pale gradients for the light theme: give dark mode a matching dark gradient. */
:root:not([data-theme=light]) :is(.health-hero,.ota-hero){border-color:#29545a;background:radial-gradient(circle at 88% 0,#1d5a52,transparent 45%),linear-gradient(120deg,#12283a,#142b2a);color:var(--text)}
:root:not([data-theme=light]) .health-hero>span{color:#7fe3c9}
:root:not([data-theme=light]) :is(.health-hero,.ota-hero) :is(h2,p){color:var(--text)}

/* Phone text floor: some module rules are more specific than the block above, so the minimum sizes are enforced. */
@media (max-width:640px){
 p.eyebrow,.eyebrow,#stationId,.sensor-group-title span,#mapModeLabel,#missionAlertCount{font-size:12px!important}
 .small-card p,.sensor-heading p{font-size:13px!important}
}

/* ---- Desktop layout: one rhythm for the dashboard ---- */
@media (min-width:1101px){
 /* Four equal headline cards (the first was 1.2x wider), same gap as the sensor grid, same number size. */
 .primary-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
 .metric-card{min-height:190px}
 .metric-card .metric-number strong{font-size:2.7rem}
 .metric-card:first-child .metric-number strong{font-size:2.7rem}
 /* Station tiles: fixed card width; a lone station stays a card instead of stretching across the page. */
 .station-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
 /* Cards lift slightly on hover so clickable tiles read as clickable. */
 .metric-card,.station-tile,.health-card{transition:transform .15s ease,box-shadow .15s ease}
 .station-tile:hover,.health-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px #1c3b5718}
}
@media (min-width:1500px){
 .workspace{padding-left:64px;padding-right:64px}
}
@media (prefers-reduced-motion:reduce){.metric-card,.station-tile,.health-card{transition:none}.station-tile:hover,.health-card:hover{transform:none}}

/* ---- Station tiles: card layout shared by every screen size ---- */
.station-tile{display:flex;flex-direction:column;padding:22px 22px 18px;border-radius:18px;border:1px solid var(--line);background:var(--surface);box-shadow:0 6px 20px #203b5a08}
.station-tile .station-open{min-height:0}
.station-tile h3{font-size:1.15rem;line-height:1.3;margin:0 0 6px}
.station-tile p{margin:0 0 16px;font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:.78rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.station-tile footer{margin-top:auto;align-items:flex-end;gap:12px}
.station-tile footer .badge{align-self:center;font-size:.78rem;padding:5px 10px;border-radius:999px}
.station-tile footer>span:last-child{font-size:1.65rem;font-weight:650;line-height:1;color:var(--text);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.station-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.station-actions button{min-height:38px;padding:6px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--text);font-size:.85rem;font-weight:600;transition:border-color .15s,color .15s,background .15s}
.station-actions button:hover:not(:disabled){border-color:var(--accent);color:var(--accent-text)}
.station-actions button:disabled{opacity:.5;cursor:not-allowed}
.station-actions button.danger-text{color:var(--red)}
.station-actions button.danger-text:hover:not(:disabled){border-color:var(--red);color:var(--red)}

/* ---- history readings on phones: headline values first, the rest folds behind a button ---- */
.row-toggle{display:none}
@media (max-width:640px){
 #tableBody tr{padding-bottom:6px}
 #tableBody td.row-time{grid-template-columns:minmax(0,1fr) auto;padding-bottom:10px;margin-bottom:4px;border-bottom:1px dashed var(--line);font-weight:700}
 #tableBody tr:not(.open) td:not([data-primary]):not(.row-time):not(.row-toggle):not([colspan]){display:none}
 #tableBody td.row-toggle{display:block;padding:10px 0 4px}
 #tableBody td.row-toggle::before{content:none}
 .row-more{width:100%;min-height:42px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);color:var(--accent-text);font-weight:600}
 .row-more[aria-expanded="true"]{background:var(--soft)}
}