/* ─────────────────────────────────────────────────────────────────────────────
   MeteoLab pro pages: the shared design system
   ─────────────────────────────────────────────────────────────────────────────
   Used by the professional pages (index.html now; export, hydrology and status next).
   It holds only what those pages share: the self-hosted typeface, the colour and type
   tokens for both themes, base typography, the top bar with nav and theme/time
   controls, buttons and segmented controls, form fields, the ruled data table,
   section headings and captions, the quiet map base, the footer, focus and
   reduced-motion rules. Anything used by one page only stays inline in that page.

   Theme convention: <html data-theme="light|dark"> is ALWAYS set by JS from
   localStorage "meteolab_theme" (light when unset). Every page has this in <head>,
   before any stylesheet, so there is no flash of the wrong theme:
     <script>(function(){var t="light";try{var s=localStorage.getItem("meteolab_theme");
       if(s==="dark"||s==="light")t=s;}catch(e){}document.documentElement.setAttribute("data-theme",t);})();</script>

   No CDN: the font lives in assets/fonts (GDPR, see docs/2026-07-16-self-hosted-assets-gdpr.md).
   Colours were checked for WCAG AA text contrast on --paper in both themes.
   ───────────────────────────────────────────────────────────────────────────── */

/* Atkinson Hyperlegible Next (Braille Institute, OFL): one variable font, weights 200–800 */
@font-face{
  font-family:"Atkinson Hyperlegible Next"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("../fonts/atkinsonhyperlegiblenext-var-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Atkinson Hyperlegible Next"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("../fonts/atkinsonhyperlegiblenext-var-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── tokens ── */
:root{
  /* light (default): weather maps are printed on white */
  --paper:#FFFFFF;        /* page and chart surface */
  --ink:#1B2430;          /* text, marks */
  --muted:#5B6675;        /* secondary text (5.8:1) */
  --rule:#DDE2E8;         /* hairlines, control borders */
  --grid:#EDF0F3;         /* chart gridlines */
  --hatch:#B4BAC4;        /* missing data */
  --accent:#0B5CAD;       /* INFP blue: selection, focus, links, nothing else */
  --accent-soft:rgba(11,92,173,.08);
  --temp:#C8322B;         /* temperature, only */
  --dew:#2E7D32;          /* dew point, only */
  --sa:#0B5CAD;           /* comparison series A */
  --sb:#B4540A;           /* comparison series B */
  --bad:#B42318;          /* error text */
  --tiles:grayscale(1) contrast(.82) brightness(1.1);   /* quiet OSM base */
  --tiles-op:.62;

  --font:"Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-h1:32px; --fs-h2:20px; --fs-h3:15px; --fs-body:16px; --fs-small:14px; --fs-caption:13px;
  --gut:24px;             /* page gutter (16px on phones) */
  --col:1320px;           /* content column */
  --radius:3px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#121A24; --ink:#E6EBF2; --muted:#9AA6B5; --rule:#2A3644; --grid:#1C2733; --hatch:#4E5561;
  --accent:#6FA8E8; --accent-soft:rgba(111,168,232,.12);
  --temp:#F07A70; --dew:#6CC47A;
  --sa:#5A97DA; --sb:#D07A38;
  --bad:#FF9A8F;
  --tiles:invert(1) grayscale(1) brightness(.62) contrast(1.05);
  --tiles-op:.55;
  color-scheme:dark;
}
@media (max-width:1000px){ :root{ --gut:16px; --fs-h1:26px; } }

/* ── base ── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font); font-size:var(--fs-body);
  line-height:1.5; font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased}
a{color:var(--accent)}
button, select, input{font:inherit; color:inherit}
h1, h2, h3{font-weight:500; margin:0; letter-spacing:-.005em}
h1{font-size:var(--fs-h1); line-height:1.15}
h2{font-size:var(--fs-h2); line-height:1.25}
h3{font-size:var(--fs-h3); line-height:1.35}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.wrap{max-width:calc(var(--col) + 2 * var(--gut)); margin:0 auto; padding:0 var(--gut)}
.skip{position:absolute; left:-999px; top:8px; background:var(--paper); color:var(--ink); padding:6px 10px; z-index:3000}
.skip:focus{left:8px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.hidden{display:none !important}
.muted{color:var(--muted)}
.err{color:var(--bad); font-size:var(--fs-small); white-space:pre-wrap; margin:0}
.err:empty{display:none}

/* ── top bar ── */
.top{border-bottom:1px solid var(--rule)}
.top .wrap{display:flex; align-items:center; gap:4px 32px; min-height:60px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand svg{flex:none}
.brand b{font-weight:600; font-size:18px; letter-spacing:-.01em}
.brand span{color:var(--muted); font-size:var(--fs-small)}
nav.main{display:flex; gap:24px; font-size:15px}
nav.main a{color:var(--muted); text-decoration:none; padding:18px 0 16px; border-bottom:2px solid transparent}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--ink)}
.ctl{margin-left:auto; display:flex; align-items:center; gap:20px; font-size:var(--fs-small)}
.themebtn{background:none; border:1px solid var(--rule); border-radius:var(--radius); padding:4px 10px; cursor:pointer;
  display:flex; gap:6px; align-items:center; font-size:var(--fs-small)}
.themebtn:hover{border-color:var(--muted)}
@media (max-width:1000px){
  .top .wrap{gap:4px 20px; padding-top:8px}
  nav.main{order:3; width:100%; gap:20px}
  nav.main a{padding:8px 0 10px}
  .ctl{gap:12px}
  .seg .lbl{display:none}
}

/* ── segmented controls ── */
/* text toggle (top bar, small switches): the active option is underlined in the accent */
.seg{display:flex; gap:2px; align-items:center}
.seg button{background:none; border:0; padding:4px 6px; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{color:var(--ink); border-bottom-color:var(--accent)}
.seg .lbl{color:var(--muted); margin-right:4px}
/* boxed toggle (ranges, views): the active option is filled with ink */
.segbox{display:inline-flex; border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; background:var(--paper)}
.segbox button{background:none; border:0; border-left:1px solid var(--rule); padding:6px 14px; cursor:pointer; font-size:var(--fs-small); white-space:nowrap}
.segbox button:first-child{border-left:0}
.segbox button:hover{background:var(--accent-soft)}
.segbox button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.segbox button:focus-visible{outline-offset:-3px}

/* ── buttons ── */
.btn{background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius); padding:6px 12px; cursor:pointer; font-size:var(--fs-small)}
.btn:hover{border-color:var(--muted)}
.btn.strong{border-color:var(--ink)}
.btn[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.linkbtn{background:none; border:0; padding:0; color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:2px}

/* ── form fields ── */
.field{display:flex; flex-direction:column; gap:4px; font-size:var(--fs-small); min-width:0}
.field > label, .field > .lbl{color:var(--muted)}
.field select, .field input{background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius); padding:6px 8px; min-width:0}
.field select:hover, .field input:hover{border-color:var(--muted)}
.field select option{background:var(--paper); color:var(--ink)}
.field .hint{color:var(--muted); font-size:var(--fs-caption); min-height:1.3em}

/* ── ruled data table ── */
.tablewrap{overflow-x:auto; border-top:1px solid var(--ink); -webkit-overflow-scrolling:touch}
table.data{border-collapse:collapse; width:100%; font-size:var(--fs-small)}
table.data th, table.data td{padding:8px 10px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--rule); vertical-align:middle}
table.data th{font-weight:500; color:var(--muted); font-size:var(--fs-caption); vertical-align:bottom}
table.data th.l, table.data td.l{text-align:left}
table.data th:first-child, table.data td:first-child{padding-left:0}
table.data td .unit{color:var(--muted)}

/* ── sections, captions ── */
section.blk{padding-top:44px}
.sub{color:var(--muted); font-size:var(--fs-small); margin:4px 0 14px}
.caption, .note{color:var(--muted); font-size:var(--fs-caption); margin:2px 0 0}

/* ── quiet map base (Leaflet): the data on top carries the colour ── */
.leaflet-container{background:var(--paper); font-family:var(--font)}
.leaflet-tile-pane{opacity:var(--tiles-op)}
/* The filter goes on each tile. At fractional zoom (zoomSnap .25) scaled tiles leave sub-pixel
   gaps that show as a hairline grid; making every tile half a pixel larger overlaps neighbours
   and closes them. The opacity sits on the pane, so the overlap is never painted twice. */
/* Extra .leaflet-container: leaflet.css loads later and sets plus-lighter on tiles, which would
   brighten the overlap into a light grid. */
.leaflet-container .leaflet-tile-pane img.leaflet-tile{filter:var(--tiles); mix-blend-mode:normal; width:256.5px !important; height:256.5px !important}
.leaflet-control-attribution{background:color-mix(in srgb, var(--paper) 85%, transparent) !important; color:var(--muted) !important; font-size:11px}
.leaflet-control-attribution a{color:var(--muted) !important}
.leaflet-bar{border:1px solid var(--rule) !important; box-shadow:none !important; border-radius:var(--radius) !important}
.leaflet-bar a{background:var(--paper) !important; color:var(--ink) !important; border-color:var(--rule) !important}

/* ── footer ── */
footer.foot{margin-top:64px; border-top:1px solid var(--rule); font-size:var(--fs-small); color:var(--muted)}
footer.foot .wrap{display:flex; flex-wrap:wrap; gap:8px 32px; justify-content:space-between; padding-top:20px; padding-bottom:32px}
footer.foot p{margin:0}
footer.foot .links{display:flex; gap:20px; flex-wrap:wrap}

/* ── motion ── */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{transition:none !important; animation:none !important; scroll-behavior:auto !important}
}