/* Aeronautical chart, not a dashboard. The palette is sectional-chart stock: a cool grey-green
     paper, ink with a green cast rather than blue-black, and ONE signal colour. In a cockpit
     colour means alert; if everything is coloured nothing is. So magenta is reserved for firing
     and live state, and chart blue appears only inside bidirectional anomaly bars where "cold"
     genuinely needs its own sign — never as chrome.

     The old token names (--amber, --cyan, --bg, --panel) are kept as aliases at the bottom because
     153 classes reference them; renaming would be a thousand-line diff for no visual gain. */
  :root{
    --paper:#e8e9e4;          /* chart stock */
    --paper-2:#f1f2ee;        /* panel field, one step up */
    --paper-3:#dee0d9;        /* recessed: table headers, inactive */
    --ink:#1a1d1c;            /* near-black, green cast */
    --ink-2:#5a625f;
    --ink-3:#8e9692;
    --rule:#c9cdc6;           /* hairline */
    --rule-2:#b3b8af;         /* emphatic hairline */
    --signal:#c2185b;         /* sectional magenta — firing / live ONLY */
    --signal-bg:rgba(194,24,91,.07);
    --cold:#2c5f8a;           /* anomaly bars only */
    --cold-bg:rgba(44,95,138,.07);
    --warm:#b4531f;           /* anomaly bars only */
    --ok:#3f6b46;
    --sans:'IBM Plex Sans Condensed','IBM Plex Sans',system-ui,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,monospace;

    /* aliases so existing rules keep resolving */
    --bg:var(--paper);
    --bg-grad-1:var(--paper);
    --bg-grad-2:var(--paper);
    --panel:var(--paper-2);
    --panel-2:var(--paper-3);
    --line:var(--rule);
    --line-bright:var(--rule-2);
    --ink-dim:var(--ink-2);
    --ink-faint:var(--ink-3);
    --amber:var(--signal);
    --amber-glow:var(--signal);
    --amber-bg:var(--signal-bg);
    --cyan:var(--cold);
    --cyan-glow:var(--cold);
    --cyan-bg:var(--cold-bg);
    --rose:var(--signal);
    --rose-bg:var(--signal-bg);
    --green:var(--ok);
    --red:var(--warm);
    --yellow:var(--warm);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  [hidden]{display:none !important}
  html,body{
    background:var(--paper);color:var(--ink);
    font-family:var(--sans);
    font-size:15px;line-height:1.45;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum","calt";
  }
  /* Numerals are the content: tabular and mono everywhere they are read as data. */
  .stat-val,.tile-temp,.clock,.pp-grid,.rg-grid,.ms-grid,.taf-grid,.hourly-table,
  .actuals-list,.bucket-grid,.telemetry,.raw-metar,.lede-now,.lede-proj{
    font-family:var(--mono);font-variant-numeric:tabular-nums;
  }
  /* Flat stock. The CRT vignette and the two radial glows are gone: they were the loudest
     "hobby terminal" signal on the page and they cost legibility on every dense table. */
  body{
    min-height:100vh;
    background:var(--paper);
    position:relative;
    overflow-x:hidden;
  }
  ::selection{background:var(--signal);color:#fff}

  .topbar{
    position:sticky;top:0;z-index:50;
    background:var(--paper);
    border-bottom:1px solid var(--rule-2);
    display:flex;align-items:stretch;
    height:46px;
  }
  .brand{
    display:flex;align-items:center;gap:10px;
    padding:0 22px;
    border-right:1px solid var(--line);
  }
  .brand-logo{
    font-family:var(--sans);
    font-size:28px;letter-spacing:1px;
    color:var(--amber);
  }
  .brand-tag{
    font-size:10px;letter-spacing:2px;
    color:var(--ink-faint);
    text-transform:none;
  }
  .topbar-spacer{flex:1}
  .brand-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
  .brand-link:hover .brand-logo{}
  .topbar-crumbs{
    display:flex;align-items:center;gap:8px;
    padding:0 18px;border-left:1px solid var(--line);
    font-size:12px;letter-spacing:2px;text-transform:none;
    color:var(--ink-dim);
  }
  .topbar-crumbs:empty{padding:0;border-left:none}
  .topbar-crumbs a{
    color:var(--cyan);text-decoration:none;
    font-family:var(--mono);
  }
  .topbar-crumbs a:hover{}
  .topbar-crumbs .sep{color:var(--ink-faint)}
  .topbar-crumbs .city{color:var(--amber);font-family:var(--sans);
    font-style:normal;font-size:15px;letter-spacing:0}
  .topbar-right{
    display:flex;align-items:center;gap:14px;
    padding:0 22px;
    border-left:1px solid var(--line);
    font-size:12px;
  }
  .clock{font-family:var(--sans);font-size:22px;color:var(--cyan);letter-spacing:1px}
  .bd-notice{
    border:1px solid var(--rule-2);border-left:3px solid var(--signal);
    background:var(--paper-2);padding:11px 15px;margin:0 0 24px;
    font-size:12.5px;line-height:1.55;color:var(--ink-2);max-width:72ch;
  }
  .bd-notice a{color:var(--signal)}
  .signup-list{
    margin:10px 0 14px;padding-left:20px;font-size:14px;line-height:1.6;color:var(--ink-2);
  }
  .signup-list li{margin-bottom:5px}
  .bd-section{margin-bottom:34px}
  .bd-title{
    font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);
    margin:0 0 3px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  }
  .bd-title em{font-style:normal;font-size:12px;font-weight:400;color:var(--ink-3)}
  /* Settled stations are reference, not action: present but visibly quieter. */
  .bd-row.done{opacity:.72}
  .bd-row.done .bd-state{font-style:italic}
  .bd-head,.bd-row{
    display:grid;grid-template-columns:minmax(0,1fr) 78px 82px 70px 116px;
    gap:12px;align-items:center;
  }
  .bd-head{
    font-size:11.5px;color:var(--ink-3);padding-bottom:6px;
    border-bottom:1px solid var(--ink);margin-bottom:2px;
  }
  .bd-row{
    padding:9px 0;border-bottom:1px solid var(--rule);
    text-decoration:none;color:var(--ink-2);font-size:13.5px;
  }
  .bd-row:hover{background:var(--paper-2)}
  .bd-city{font-weight:600;color:var(--ink);min-width:0}
  .bd-city i{
    display:block;font-style:normal;font-family:var(--mono);
    font-size:10.5px;color:var(--ink-3);font-weight:400;margin-top:1px;
  }
  .bd-now,.bd-dev,.bd-z{font-family:var(--mono);text-align:right}
  .bd-state{font-size:11.5px;color:var(--ink-3);text-align:right}
  .bd-row.hot .bd-dev{color:var(--warm)}
  .bd-row.cold .bd-dev{color:var(--cold)}
  .bd-row.strong .bd-dev{font-weight:700}
  .bd-row.strong .bd-city{position:relative}
  /* The 3-degree line is the one that is measured, so it is the one the eye should catch. */
  .bd-row.strong{background:linear-gradient(90deg,var(--paper-2),transparent 70%)}
  @media (max-width:620px){
    .bd-head{display:none}
    .bd-row{grid-template-columns:minmax(0,1fr) 62px 66px;row-gap:2px}
    .bd-z,.bd-state{display:none}
  }
  .mv-min{
    font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.04em;
    color:var(--paper);background:var(--ink-3);border-radius:2px;
    padding:1px 4px;margin-left:7px;vertical-align:1px;
  }
  .built{
    font-family:var(--mono);font-size:11px;color:var(--ink-3);
    margin-left:10px;white-space:nowrap;
  }
  .built.is-stale{color:var(--warm);font-weight:600}
  .live-dot.is-stale{background:var(--warm);animation:none}
  /* Full width, above everything, and it states the consequence rather than just a timestamp --
     "stale" means nothing to a reader; "the forecast beside the live reading is frozen" does. */
  .stale-banner{
    background:var(--warm);color:#fff;
    padding:11px 20px;font-size:13.5px;line-height:1.5;
    position:sticky;top:0;z-index:60;
  }
  .stale-banner b{font-weight:700}
  @media (max-width:560px){ .stale-banner{padding:10px 15px;font-size:12.5px} }
  .live-dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--amber);
    animation:pulse 2s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:.95}
    50%{opacity:.45}
  }
  /* SVG NOW marker on charts — only animates in the active view to keep
     hidden city views from burning CPU. */
  .now-pulse{transform-origin:center;transform-box:fill-box}
  .view.active .now-pulse{
    animation:nowpulse 1.5s ease-in-out infinite;
  }
  @keyframes nowpulse{
    0%,100%{opacity:.4;transform:scale(1)}
    50%{opacity:0;transform:scale(2)}
  }

  main{position:relative;z-index:5;padding:24px 28px 80px}
  .page-head{
    display:flex;align-items:flex-end;justify-content:space-between;
    margin-bottom:24px;border-bottom:1px solid var(--line);padding-bottom:18px;
  }
  .page-title{
    font-family:var(--sans);
    font-size:34px;font-weight:600;font-style:normal;
    color:var(--ink);
    letter-spacing:-.5px;
  }
  .page-title em{
    font-style:normal;
    font-family:var(--mono);
    font-size:16px;font-weight:400;
    color:var(--ink-dim);
    margin-left:12px;letter-spacing:0;
    vertical-align:8px;
  }
  .page-sub{
    font-size:11px;letter-spacing:2px;color:var(--ink-faint);
    text-transform:none;margin-top:4px;
  }
  .page-meta{
    text-align:right;font-size:10px;letter-spacing:1.5px;color:var(--ink-faint);
    text-transform:none;
  }
  .page-meta .big{
    font-family:var(--sans);
    font-size:24px;color:var(--ink);
    letter-spacing:1px;display:block;margin-bottom:2px;
  }

  .section-label{
    font-size:13px;letter-spacing:3px;text-transform:none;
    color:var(--ink-dim);
    margin:36px 0 16px;
    display:flex;align-items:center;gap:12px;
  }
  .section-label::before{
    content:"";
    display:inline-block;
    width:3px;height:16px;
    background:var(--amber);
  }
  .section-label .count{
    margin-left:auto;
    font-family:var(--sans);font-size:16px;
    color:var(--ink-dim);
    letter-spacing:.5px;
  }

  .feature-row{
    display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  }
  .feature{
    position:relative;
    background:linear-gradient(135deg,var(--panel) 0%,var(--panel-2) 100%);
    border:1px solid var(--line);
    padding:18px 20px 16px;
    cursor:pointer;
    transition:border-color .2s,transform .2s;
    overflow:hidden;
    animation:reveal .5s ease-out backwards;
    display:block;
  }
  @keyframes reveal{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
  }
  .feature:nth-child(1){animation-delay:.05s}
  .feature:nth-child(2){animation-delay:.15s}
  .feature:nth-child(3){animation-delay:.25s}
  .feature:hover{border-color:var(--line-bright);transform:translateY(-2px)}
  .feature.hot{border-color:rgba(245,165,36,.3)}
  .feature.hot:hover{border-color:var(--amber);box-shadow:0 0 32px rgba(245,165,36,.12)}
  .feature.cool{border-color:rgba(95,214,232,.3)}
  .feature.cool:hover{border-color:var(--cyan);box-shadow:0 0 32px rgba(95,214,232,.12)}
  .feature::before{
    content:"";
    position:absolute;top:0;right:0;
    width:14px;height:14px;
    border-left:1px solid currentColor;
    border-bottom:1px solid currentColor;
    color:var(--line-bright);
    transform:translate(7px,-7px) rotate(45deg);
  }
  .feat-head{
    display:flex;justify-content:space-between;align-items:flex-start;
    margin-bottom:14px;
  }
  .feat-city{
    font-family:var(--sans);
    font-size:26px;font-weight:600;
    color:var(--ink);letter-spacing:-.3px;
  }
  .feat-city .region{
    display:block;font-family:var(--mono);
    font-size:11px;letter-spacing:2px;color:var(--ink-faint);
    text-transform:none;font-weight:400;
    margin-top:3px;
  }
  .feat-badge{
    font-family:var(--sans);font-size:16px;letter-spacing:1px;
    padding:3px 10px;border:1px solid;
    text-transform:none;
  }
  .feat-badge.hot{color:var(--amber);border-color:var(--amber);background:var(--amber-bg)}
  .feat-badge.cool{color:var(--cyan);border-color:var(--cyan);background:var(--cyan-bg)}
  .feat-badge.crit{color:var(--rose);border-color:var(--rose);background:var(--rose-bg)}
  .feat-badge.b2{color:var(--green);border-color:var(--green);background:rgba(136,184,136,.10)}
  .feat-stats{
    display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;
    margin-bottom:14px;
  }
  .stat{display:flex;flex-direction:column;gap:2px}
  .stat-label{font-size:10px;letter-spacing:2px;color:var(--ink-faint);text-transform:none}
  .stat-val{
    font-family:var(--mono);font-weight:500;
    font-size:20px;color:var(--ink);
  }
  .stat-val.hot{color:var(--amber)}
  .stat-val.cool{color:var(--cyan)}
  .stat-val.dim{color:var(--ink-dim)}
  .stat-sub{font-size:11px;color:var(--ink-faint)}
  .feat-spark{
    height:36px;
    margin-top:6px;
    border-top:1px solid var(--line);
    padding-top:8px;
    position:relative;
  }
  .feat-spark svg{display:block;width:100%;height:100%}

  .filter-bar{
    display:flex;align-items:center;gap:8px;
    margin:8px 0 16px;
    font-size:11px;
  }
  .pill{
    padding:6px 14px;border:1px solid var(--line);
    color:var(--ink-dim);cursor:pointer;
    text-transform:none;letter-spacing:1.5px;
    font-size:11px;
    background:transparent;
    transition:all .15s;
    font-family:inherit;
  }
  .pill:hover{border-color:var(--line-bright);color:var(--ink)}
  .pill.active{border-color:var(--amber);color:var(--amber);background:var(--amber-bg)}
  .filter-bar .spacer{flex:1}
  .filter-search{
    background:transparent;border:1px solid var(--line);
    padding:5px 10px;color:var(--ink);
    font-family:inherit;font-size:11px;
    width:160px;
  }
  .filter-search:focus{outline:none;border-color:var(--amber);color:var(--amber)}

  .city-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .city-tile{
    background:var(--paper-2);
    padding:10px 11px;
    cursor:pointer;
    transition:background .15s,box-shadow .15s;
    position:relative;
    animation:reveal .4s ease-out backwards;
    display:block;
  }
  .city-tile:hover{
    background:var(--panel-2);
    z-index:5;
    box-shadow:inset 0 0 0 1px var(--line-bright);
  }
  /* OSM tiles are light; invert them for the dark theme. hue-rotate(180) undoes the colour
     inversion that invert() causes, so water stays blue-ish rather than orange. Applied to the
     tile pane ONLY -- markers, arrows and labels sit in other panes and keep their true colours. */
  .leaflet-tile-pane{filter:saturate(.3) contrast(.86) brightness(1.04)}
  .leaflet-container{background:var(--paper-3)}
  .city-tile.alert-hot{background:linear-gradient(135deg,var(--panel) 0%,rgba(245,165,36,.04) 100%)}
  .city-tile.alert-hot:hover{box-shadow:inset 0 0 0 1px var(--amber),0 0 16px rgba(245,165,36,.1)}
  .city-tile.alert-cool{background:linear-gradient(135deg,var(--panel) 0%,rgba(95,214,232,.04) 100%)}
  .city-tile.alert-cool:hover{box-shadow:inset 0 0 0 1px var(--cyan),0 0 16px rgba(95,214,232,.1)}
  .tile-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
  .tile-city{
    font-family:var(--sans);font-size:19px;font-weight:600;
    letter-spacing:-.3px;color:var(--ink);
  }
  .tile-flag{font-size:13px;color:var(--ink-faint)}
  .tile-time{font-family:var(--mono);font-size:11px;color:var(--ink-faint);font-weight:400;margin-left:6px}
  .tile-icao{margin-left:6px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);font-weight:400;letter-spacing:.02em}
  .tile-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:2px}
  .tile-row .lab{color:var(--ink-3);letter-spacing:0;font-size:11px}
  .tile-row .v{color:var(--ink);font-weight:500}
  .tile-row .v.hot{color:var(--amber)}
  .tile-row .v.cool{color:var(--cyan)}
  .tile-row .v.dim{color:var(--ink-dim)}
  .tile-alert{
    margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);
    font-family:var(--sans);font-size:15px;letter-spacing:1px;
  }
  .tile-alert.hot{color:var(--amber)}
  .tile-alert.cool{color:var(--cyan)}
  .tile-alert .sym{margin-right:4px}

  .view{display:none}
  .view.active{display:block}
  .breadcrumbs{
    display:flex;align-items:center;gap:8px;
    font-size:10px;letter-spacing:2px;text-transform:none;
    color:var(--ink-faint);margin-bottom:8px;
  }
  .breadcrumbs a{color:var(--cyan);text-decoration:none}
  .breadcrumbs a:hover{}
  .breadcrumbs .sep{color:var(--ink-faint)}

  .city-hero{
    display:grid;grid-template-columns:auto 1fr auto;
    align-items:end;gap:24px;
    margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:18px;
  }
  .hero-mid{
    align-self:stretch;
    display:flex;align-items:center;justify-content:center;
    padding:0 18px;
  }
  .hero-summary{
    border-left:3px solid var(--green);
    background:linear-gradient(90deg,rgba(136,184,136,.08),rgba(136,184,136,.02));
    padding:10px 14px;
    width:100%;
    font-family:var(--mono);font-size:12px;
    line-height:1.55;
  }
  .hero-summary .hs-date{
    color:var(--ink);font-weight:600;font-size:13px;
    letter-spacing:1px;margin-bottom:6px;
  }
  .hero-summary .hs-row{
    display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  }
  .hero-summary .hs-lab{
    color:var(--ink-faint);font-size:10px;letter-spacing:1.5px;
    text-transform:none;min-width:120px;
  }
  .hero-summary .hs-val{
    color:var(--ink);font-weight:500;font-size:13px;
  }
  .hero-summary .hs-sub{
    color:var(--ink-faint);font-size:11px;
  }
  .city-hero-name{
    font-family:var(--sans);
    font-size:64px;font-weight:600;font-style:normal;
    line-height:1;letter-spacing:-2px;
    color:var(--ink);
  }
  .city-hero-name em{
    font-style:normal;font-family:var(--mono);
    font-size:18px;font-weight:400;color:var(--ink-dim);
    margin-left:16px;letter-spacing:3px;
    vertical-align:18px;
  }
  .city-hero-clock{
    display:flex;align-items:baseline;gap:10px;
    margin-top:14px;
  }
  .city-hero-clock .live-dot{align-self:center;margin-bottom:4px}
  .city-hero-clock .hour{
    font-family:var(--mono);
    font-size:32px;font-weight:500;
    color:var(--cyan);
    letter-spacing:1px;
    line-height:1;
  }
  .city-hero-clock .label{
    font-size:11px;letter-spacing:3px;color:var(--ink-faint);
    text-transform:none;
  }
  .hero-meta-run i{font-style:normal;margin-left:16px;color:var(--ink-3)}
  .city-hero-meta{
    margin-top:8px;font-size:11px;letter-spacing:2px;color:var(--ink-faint);
    text-transform:none;
  }
  .city-hero-meta .wu-link{
    color:var(--ink-faint);text-decoration:none;border-bottom:1px dotted var(--ink-faint);
  }
  .city-hero-meta .wu-link:hover{color:var(--cyan);border-bottom-color:var(--cyan);}
  .city-hero-now{
    text-align:right;
    display:flex;align-items:flex-start;gap:36px;
  }
  .city-hero-now .now-block,.city-hero-now .high-block{text-align:right}
  .city-hero-now .high-block .now-label{color:var(--ink-faint)}
  .city-hero-now .high-temp{
    font-family:var(--sans);
    font-size:54px;line-height:1;color:var(--cyan);
    letter-spacing:-1px;font-weight:600;font-style:normal;
    margin-top:8px;
  }
  .city-header-sticky{
    position:sticky;top:48px;z-index:30;
    background:var(--paper);
    margin:0 -28px 16px;
    padding:14px 28px 4px;
    border-bottom:1px solid var(--line);
  }
  .city-header-sticky .city-hero{margin-bottom:10px;border-bottom:none;padding-bottom:0}
  .city-header-sticky .city-hero-name{font-size:48px}
  .city-header-sticky .city-hero-name em{font-size:15px;vertical-align:14px}
  .city-header-sticky .city-hero-clock{margin-top:8px}
  .city-header-sticky .city-hero-clock .hour{font-size:24px}
  .city-header-sticky .city-hero-meta{margin-top:4px}
  .city-header-sticky .city-hero-now .now-temp{font-size:64px}
  .city-header-sticky .city-hero-now .high-temp{font-size:42px;margin-top:4px}
  .city-header-sticky .city-hero-now .now-label{font-size:9px}
  .city-header-sticky .city-hero-now .now-time{font-size:10px}
  .city-header-sticky .pm-link{margin-top:6px;padding:5px 10px;font-size:10px}
  .city-header-sticky .summary-banner{margin-bottom:10px;padding:10px 16px;font-size:14px}
  .city-header-sticky .stat-strip{margin-bottom:0}
  .city-header-sticky .strip-cell{padding:11px 14px}
  .city-header-sticky .strip-cell .lab{margin-bottom:5px}
  .city-header-sticky .strip-cell .val{font-size:18px}
  .pm-link{
    display:inline-flex;align-items:center;gap:8px;
    margin-top:10px;
    padding:7px 14px;
    border:1px solid var(--line-bright);
    background:var(--panel);
    color:var(--ink-dim);
    text-decoration:none;
    font-family:var(--mono);
    font-size:11px;letter-spacing:1.5px;text-transform:none;
    transition:all .15s;
  }
  .pm-link:hover{
    border-color:var(--amber);color:var(--amber);
    background:var(--amber-bg);
  }
  .pm-link .arrow{font-size:13px;line-height:1}
  .city-hero-now .now-label{
    font-size:9px;letter-spacing:3px;color:var(--ink-faint);
    text-transform:none;
  }
  .city-hero-now .now-temp{
    font-family:var(--sans);
    font-size:88px;line-height:1;color:var(--amber);
    letter-spacing:-2px;font-weight:600;font-style:normal;
  }
  .city-hero-now .now-time{
    font-size:11px;color:var(--ink-dim);letter-spacing:1px;margin-top:4px;
  }

  .stat-strip{
    display:grid;grid-template-columns:repeat(5,1fr);
    border:1px solid var(--line);
    background:var(--panel);
    margin-bottom:20px;
  }
  .strip-cell{
    padding:16px 18px;
    border-right:1px solid var(--line);
    position:relative;
  }
  .strip-cell:last-child{border-right:none}
  .strip-cell .lab{
    font-size:10px;letter-spacing:2px;color:var(--ink-faint);
    text-transform:none;margin-bottom:8px;
  }
  .strip-cell .val{
    font-family:var(--mono);font-size:22px;font-weight:500;
    color:var(--ink);
  }
  .strip-cell .val.hot{color:var(--amber)}
  .strip-cell .val.cool{color:var(--cyan)}
  .strip-cell .sub{font-size:11px;color:var(--ink-dim);margin-top:3px}

  .detail-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:14px;
    margin-bottom:20px;
  }
  /* Rules, not cards. A panel is a field on the chart delimited by a hairline above its heading,
     not a floating object — no radius, no shadow, no gradient fill. Twelve identical rounded
     cards per city is the SaaS default and it flattens hierarchy exactly where this page needs
     it most. The heading rule is the emphatic hairline; everything inside uses the light one. */
  .panel{
    background:transparent;
    border:0;border-top:1px solid var(--rule-2);
    position:relative;
  }
  .panel-head{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:9px 0 7px;
    border-bottom:1px solid var(--rule);
    background:none;
  }
  .panel-head .title{
    font-size:14px;font-weight:600;letter-spacing:0;color:var(--ink);
  }
  /* The generator writes titles as "wind regime <em>SON anomaly</em>". The em is the
     qualifier, so it reads as one phrase at lower contrast rather than a second colour. */
  .panel-head .title em{
    font-style:normal;color:var(--ink-3);font-weight:400;letter-spacing:0;
  }
  .panel-head .ctl{
    font-size:12px;letter-spacing:0;color:var(--ink-3);
    font-family:var(--mono);white-space:nowrap;
  }
  .panel-head .ctl.amd{color:var(--signal);font-weight:600}
  /* A panel's control text is nowrap so it sits on one line beside the title; on a phone that
     forces the header wider than the screen. Let it wrap and fall under the title instead. */
  @media (max-width:620px){
    .panel-head{flex-wrap:wrap;row-gap:2px}
    .panel-head .ctl{white-space:normal;font-size:11px}
  }
  .panel-body{padding:14px 0}

  .chart-wrap{padding:10px 14px 14px;position:relative}
  .chart-controls{
    display:flex;gap:6px;justify-content:flex-end;
    margin-bottom:6px;
  }
  .chart-btn{
    padding:4px 12px;border:1px solid var(--line);
    background:transparent;color:var(--ink-dim);
    font-family:inherit;font-size:11px;letter-spacing:1.5px;text-transform:none;
    cursor:pointer;transition:all .15s;
  }
  .chart-btn:hover{color:var(--ink);border-color:var(--line-bright)}
  .chart-btn.active{color:var(--amber);border-color:var(--amber);background:var(--amber-bg)}
  .chart-stage{position:relative;height:420px}
  .chart-pane{display:none;width:100%;height:100%;cursor:crosshair}
  .chart-pane.active{display:block}
  .chart-pane svg{display:block;width:100%;height:100%;overflow:visible}
  .chart-tip{
    position:absolute;
    pointer-events:none;
    background:rgba(10,14,20,.95);
    border:1px solid var(--line-bright);
    padding:8px 11px;font-size:12px;
    line-height:1.55;color:var(--ink);
    opacity:0;transition:opacity .12s;
    transform:translate(-50%,-100%);
    margin-top:-12px;white-space:nowrap;
    z-index:10;
  }
  .chart-tip.show{opacity:1}
  .chart-tip .row{display:flex;gap:14px;justify-content:space-between}
  .chart-tip .row .lab{color:var(--ink-faint);font-size:10px;letter-spacing:1.5px;text-transform:none}
  .chart-tip .row .v{font-family:var(--mono);font-weight:500}
  .chart-tip .row .v.amber{color:var(--amber)}
  .chart-tip .row .v.green{color:var(--green)}
  .chart-tip .row .v.dim{color:var(--ink-dim)}
  .chart-tip .head{
    color:var(--cyan);font-size:11px;letter-spacing:1.5px;
    text-transform:none;margin-bottom:4px;font-weight:500;
  }
  .chart-now-pulse{
    position:absolute;top:50%;left:50%;
    width:10px;height:10px;border-radius:50%;
    background:var(--amber);
    box-shadow:0 0 12px var(--amber);
    animation:pulse 1.5s infinite;
    pointer-events:none;
  }
  .chart-legend{
    display:flex;gap:16px;justify-content:center;font-size:10px;
    padding:6px 12px;border-top:1px solid var(--line);
    color:var(--ink-faint);letter-spacing:1.5px;text-transform:none;
  }
  .legend-swatch{display:inline-block;width:14px;height:2px;margin-right:6px;vertical-align:3px}

  .telemetry{font-size:14px}
  .tele-metar{
    background:var(--bg);
    border-bottom:1px solid var(--line);
    padding:14px 18px 16px;
    color:var(--cyan);font-family:var(--mono);font-size:14px;
    letter-spacing:.5px;
    word-spacing:2px;
    position:relative;
  }
  .tele-metar::before{
    content:"LATEST";
    position:absolute;top:7px;right:14px;
    font-family:var(--sans);font-size:13px;
    color:var(--amber);letter-spacing:2px;
  }
  .tele-stream{
    max-height:340px;overflow-y:auto;
  }
  .tele-stream::-webkit-scrollbar{width:6px}
  .tele-stream::-webkit-scrollbar-track{background:var(--bg)}
  .tele-stream::-webkit-scrollbar-thumb{background:var(--line-bright)}
  /* Phone: the telemetry table is six fixed columns totalling ~398px and will not fit a 390px
     screen, so it was the one grid still pushing the page sideways. Dew point and wind are the
     two a temperature reader can lose — time, temperature and the conditions are what the panel
     is for. Hidden by position rather than class because the header row uses bare spans. */
  @media (max-width:620px){
    .tele-row{grid-template-columns:52px 52px 84px minmax(0,1fr);gap:8px;font-size:11.5px}
    .tele-row > :nth-child(3), .tele-row > :nth-child(4){display:none}
  }
  /* Anything mono and unwrappable scrolls inside its own box rather than dragging the page with
     it. There were no overflow-x guards at all, which is the usual cause of a phone page that
     slides left when you scroll it. */
  .raw-metar,.metar-line,.taf-raw{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tele-row{
    display:grid;
    grid-template-columns:66px 58px 58px 80px 96px 1fr;
    gap:8px;
    padding:9px 18px;
    border-bottom:1px dashed var(--line);
    font-size:14px;
    align-items:center;
  }
  .tele-row.hdr{
    position:sticky;top:0;
    background:var(--panel-2);
    color:var(--ink-dim);font-size:11px;letter-spacing:1.5px;text-transform:none;
    border-bottom:1px solid var(--line);
  }
  .tele-row .time{color:var(--cyan);font-weight:500}
  .tele-row .temp{color:var(--ink);font-weight:500}
  .tele-row .dew{color:var(--ink-dim)}
  .tele-row .wind{color:var(--ink-dim);font-size:13px}
  .tele-row .cloud.clear{color:var(--green)}
  .tele-row .cloud.few{color:var(--ink)}
  .tele-row .cloud.sct{color:var(--ink-dim)}
  .tele-row .cloud.bkn,.tele-row .cloud.ovc{color:var(--red)}
  .tele-row .cloud.cb{color:var(--rose);font-weight:600}
  .tele-row .wx{color:var(--ink-dim);font-size:13px}
  .tele-row .wx.heavy{color:var(--red);font-weight:600}
  .tele-row.now{background:var(--amber-bg);box-shadow:inset 3px 0 0 var(--amber)}
  .tele-row.now .time{color:var(--amber)}
  .tele-row.now .temp{color:var(--amber)}

  .bucket-tabs{
    display:flex;gap:0;
    border:1px solid var(--line);border-bottom:none;
    background:var(--panel-2);
  }
  .bucket-tab{
    padding:10px 18px;
    font-size:12px;letter-spacing:2px;text-transform:none;
    color:var(--ink-faint);cursor:pointer;
    border:none;border-right:1px solid var(--line);
    background:transparent;font-family:inherit;
    transition:all .15s;
  }
  .bucket-tab:hover{color:var(--ink)}
  .bucket-tab.active{color:var(--amber);background:var(--amber-bg)}
  .bucket-tab .dim{color:var(--ink-faint);font-size:10px;margin-left:6px;letter-spacing:1px}
  .bucket-tab.active .dim{color:var(--amber);opacity:.7}
  .bucket-pane{display:none}
  .bucket-pane.active{display:grid}
  .bucket-grid{
    grid-template-columns:repeat(auto-fill,minmax(135px,1fr));
    gap:1px;background:var(--line);border:1px solid var(--line);
  }
  .bucket-state-grid.bs-solo{grid-template-columns:1fr}
  .bucket-state-grid{
    display:grid;grid-template-columns:1.4fr 1fr;
    gap:18px;margin-bottom:24px;
  }
  .pws-panel{margin-bottom:24px}
  .pws-map{
    height:540px;width:100%;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .pws-map.empty{
    display:flex;align-items:center;justify-content:center;
    color:var(--ink-faint);font-size:13px;
    background:repeating-linear-gradient(
      45deg, var(--panel) 0 12px, var(--panel-2) 12px 24px
    );
  }
  .leaflet-container{font-family:var(--mono);font-size:12px}
  .leaflet-popup-content-wrapper{
    background:var(--panel);color:var(--ink);
    border:1px solid var(--line-bright);border-radius:0;
    box-shadow:none;
  }
  .leaflet-popup-content{margin:8px 12px;line-height:1.5}
  .leaflet-popup-content b{color:var(--amber)}
  .leaflet-popup-tip{background:var(--panel);border:1px solid var(--line-bright)}
  .leaflet-control-attribution{
    background:rgba(10,14,20,.85)!important;
    color:var(--ink-faint)!important;font-size:9px!important;
  }
  .leaflet-control-attribution a{color:var(--cyan)!important}
  .leaflet-control-zoom a{
    background:var(--panel)!important;color:var(--ink)!important;
    border:1px solid var(--line-bright)!important;
  }
  .pws-airport-pin{
    position:relative;
    background:var(--signal);width:24px;height:24px;border-radius:50%;
    border:3px solid #fff;
    box-shadow:0 0 0 3px rgba(194,24,91,.18);
  }
  .pws-airport-pin::before{
    content:"";
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:8px;height:8px;border-radius:50%;background:#fff;
  }
  .pws-airport-pin::after{
    content:"AIRPORT";
    position:absolute;top:30px;left:50%;transform:translateX(-50%);
    font-family:var(--sans);font-size:14px;letter-spacing:1.5px;
    color:var(--signal);
    
    white-space:nowrap;font-weight:700;
  }
  .pws-station-pin{
    width:36px;height:36px;display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:11px;font-weight:700;
    color:var(--ink);border-radius:50%;
    border:2px solid rgba(255,255,255,.9);
    box-shadow:0 1px 2px rgba(0,0,0,.18);
  }
  .pws-wind-arrow{
    pointer-events:none;
    stroke:var(--ink);stroke-width:2;
    fill:var(--ink);opacity:.9;
    filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #000);
  }
  .pws-interpretation{
    padding:14px 18px;
    background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);
    border-top:1px solid var(--line);
    font-size:13px;line-height:1.6;color:var(--ink);
  }
  .pws-interpretation .lead{
    font-family:var(--sans);font-style:normal;
    font-size:16px;color:var(--ink);margin-bottom:8px;
  }
  .pws-interpretation .lead em{
    font-style:normal;color:var(--amber);
    font-family:var(--mono);font-weight:500;
  }
  .pws-interpretation .lead em.cool{color:var(--cyan)}
  .pws-interpretation .lead em.warn{color:var(--rose)}
  .pws-interpretation .stats{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:14px 24px;
    font-size:12px;color:var(--ink-dim);margin-top:10px;
  }
  .pws-interpretation .stats .lab{
    display:block;font-size:10px;letter-spacing:1.5px;color:var(--ink-faint);
    text-transform:none;margin-bottom:2px;
  }
  .pws-interpretation .stats .v{
    font-family:var(--mono);color:var(--ink);font-weight:500;font-size:14px;
  }
  .pws-interpretation .stats .v.amber{color:var(--amber)}
  .pws-interpretation .stats .v.cyan{color:var(--cyan)}
  .pws-interpretation .stats .v.warn{color:var(--rose)}
  .pws-interpretation .hint{
    margin-top:12px;padding:10px 14px;
    background:rgba(255,255,255,.025);
    border-left:3px solid var(--cyan);
    font-size:12px;color:var(--ink-dim);line-height:1.6;
  }
  .pws-interpretation .hint b{color:var(--cyan);font-weight:600;margin-right:4px}
  .pws-legend{
    display:flex;align-items:center;gap:12px;
    padding:8px 14px;font-size:11px;color:var(--ink-faint);
  }
  .pws-legend .bar{
    height:8px;width:120px;
    background:linear-gradient(90deg,var(--cold) 0%,var(--paper-3) 50%,var(--warm) 100%);
    border:1px solid var(--line);
  }
  .pws-legend .cool-end{color:var(--cold)}
  .pws-legend .hot-end{color:var(--warm)}
  .pws-legend .legend-note{margin-left:auto;font-size:10px;letter-spacing:1px;text-transform:none}
  .bucket-state-grid .section-label{margin-top:0}
  .bs-state .state-grid{grid-template-columns:1fr}
  .bucket{
    background:var(--panel);padding:11px 12px;
    position:relative;
  }
  .bucket.fire{
    background:linear-gradient(135deg,var(--panel) 0%,var(--amber-bg) 100%);
    box-shadow:inset 3px 0 0 var(--amber);
  }
  .bucket.fire-cool{
    background:linear-gradient(135deg,var(--panel) 0%,var(--cyan-bg) 100%);
    box-shadow:inset 3px 0 0 var(--cyan);
  }
  .bucket.skip{opacity:.55}
  .b-head{
    display:flex;justify-content:space-between;align-items:baseline;
    margin-bottom:8px;
  }
  .b-name{
    font-family:var(--sans);font-size:18px;font-weight:600;
    letter-spacing:-.3px;color:var(--ink);
  }
  .b-tag{
    font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:1px;
    color:var(--amber);
    border:1px solid var(--amber);
    padding:1px 5px;
  }
  .b-tag.cool{color:var(--cyan);border-color:var(--cyan)}
  .b-row{
    display:flex;justify-content:space-between;
    font-size:11px;color:var(--ink-dim);
    padding:2px 0;
  }
  .b-row .lab{letter-spacing:1.5px;text-transform:none}
  .b-row .v{color:var(--ink);font-weight:500}
  .b-row .v.pos{color:var(--green)}
  .b-row .v.neg{color:var(--red)}

  .summary-banner{
    background:linear-gradient(90deg,rgba(136,184,136,.06),rgba(136,184,136,.02));
    border:1px solid rgba(136,184,136,.22);
    border-left:3px solid var(--green);
    padding:14px 20px;
    margin-bottom:20px;
    color:var(--ink);
    font-family:var(--sans);
    font-size:16px;font-style:normal;
    line-height:1.6;
  }
  .summary-banner b{
    font-weight:600;color:var(--ink);font-style:normal;
    font-family:var(--mono);font-size:14px;
    letter-spacing:.3px;
  }
  .summary-banner .sep{color:var(--ink-faint);margin:0 10px;font-style:normal}
  .summary-banner .city-tag{
    color:var(--green);font-weight:600;font-style:normal;
    font-family:var(--sans);font-size:17px;
  }

  .state-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:14px;
    margin-bottom:20px;
  }
  .state-list{padding:14px 18px}
  .state-row{
    display:flex;gap:12px;
    padding:8px 0;
    border-bottom:1px dashed var(--line);
    font-size:14px;line-height:1.5;
  }
  .state-row:last-child{border-bottom:none}
  .state-row .ico{
    flex-shrink:0;width:18px;
    color:var(--ink-faint);
    font-family:var(--mono);
    font-weight:500;font-size:13px;
    margin-top:1px;
  }
  .state-row.ok .ico{color:var(--green)}
  .state-row.warn .ico{color:var(--amber)}
  .state-row.cool .ico{color:var(--cyan)}
  .state-row.crit .ico{color:var(--rose)}
  .state-row .body{color:var(--ink);flex:1}
  .state-row .body b{color:var(--ink);font-weight:500}
  .state-row .body em{
    font-style:normal;color:var(--cyan);
    font-family:var(--mono);font-size:13px;
  }
  .state-row .body em.hot{color:var(--amber)}
  .state-row .body em.cool{color:var(--cyan)}
  .state-row .body em.warn{color:var(--rose)}
  .state-row .body small{
    display:block;color:var(--ink-faint);font-size:12px;
    margin-top:2px;
  }

  .alert-card.hot{border-color:rgba(217,150,85,.3)}
  .alert-card.cool{border-color:rgba(123,195,208,.3)}
  .alert-banner{
    padding:12px 18px;
    background:var(--amber-bg);
    border-bottom:1px solid var(--line);
    display:flex;align-items:center;gap:14px;
  }
  .alert-banner.cool{background:var(--cyan-bg)}
  .alert-banner .sym{
    font-family:var(--sans);font-size:28px;font-weight:600;font-style:normal;
    color:var(--amber);line-height:1;
  }
  .alert-banner.cool .sym{color:var(--cyan)}
  .alert-banner .label{
    font-size:11px;letter-spacing:2px;color:var(--ink-dim);
    text-transform:none;
  }
  .alert-banner .stamp{
    font-size:14px;color:var(--ink);font-weight:500;
  }
  .alert-banner .stamp em{
    font-style:normal;color:var(--amber);
  }
  .alert-banner.cool .stamp em{color:var(--cyan)}
  .alert-banner .right{margin-left:auto;text-align:right}
  .alert-banner .ev{
    font-family:var(--mono);font-weight:500;
    font-size:18px;color:var(--green);
  }
  .alert-banner .ev-lab{
    font-size:10px;letter-spacing:2px;color:var(--ink-faint);
    text-transform:none;
  }

  .clima-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1.4fr;
    gap:14px;
    margin-bottom:20px;
  }
  .clima-box .panel-body{padding:18px 20px}
  .clima-row{
    display:flex;justify-content:space-between;align-items:baseline;
    padding:9px 0;border-bottom:1px dashed var(--line);
  }
  .clima-row:last-child{border-bottom:none}
  .clima-row .lab{
    font-size:13px;letter-spacing:1.5px;color:var(--ink-dim);
    text-transform:none;
  }
  .clima-row .v{
    font-family:var(--mono);font-size:17px;font-weight:500;
    color:var(--ink);
  }
  .clima-row .v.hot{color:var(--amber)}
  .clima-row .v.cool{color:var(--cyan)}
  .clima-row .v .sub{color:var(--ink-faint);font-size:13px;margin-left:6px;font-weight:400}
  .clima-big{
    font-family:var(--sans);font-size:48px;line-height:1;font-weight:600;
    color:var(--amber);
    letter-spacing:-1px;
  }
  .clima-big.cool{color:var(--cyan)}
  .clima-big-label{font-size:12px;letter-spacing:2px;color:var(--ink-faint);text-transform:none;margin-top:10px}

  .hourly-table{width:100%;border-collapse:collapse;font-size:14px}
  .hourly-table th{
    background:var(--panel-2);
    color:var(--ink-dim);font-size:11px;letter-spacing:1.5px;
    text-transform:none;font-weight:400;
    padding:10px 14px;text-align:right;
    border-bottom:1px solid var(--line);
    position:sticky;top:0;
  }
  .hourly-table th:first-child{text-align:left}
  .hourly-table td{
    padding:7px 14px;text-align:right;
    border-bottom:1px dashed var(--line);
    font-family:var(--mono);
    color:var(--ink);
  }
  .hourly-table td:first-child{text-align:left;color:var(--cyan);font-weight:500}
  .hourly-table tr.peak td{background:var(--amber-bg);color:var(--amber)}
  .hourly-table tr.peak td:first-child{color:var(--amber)}
  .hourly-wrap{max-height:380px;overflow-y:auto}
  .hourly-wrap::-webkit-scrollbar{width:6px}
  .hourly-wrap::-webkit-scrollbar-track{background:var(--bg)}
  .hourly-wrap::-webkit-scrollbar-thumb{background:var(--line-bright)}

  .actuals-list{padding:6px 0}
  .actuals-row{
    display:grid;grid-template-columns:96px 64px 64px 1fr;
    gap:12px;padding:9px 18px;
    border-bottom:1px dashed var(--line);font-size:14px;
    align-items:center;
  }
  .actuals-row:last-child{border-bottom:none}
  .actuals-row .date{color:var(--cyan);font-weight:500}
  .actuals-row .high{color:var(--amber);font-weight:500;font-size:15px}
  .actuals-row .low{color:var(--ink-dim)}
  .actuals-row .bar{position:relative;height:6px;background:var(--bg);border:1px solid var(--line)}
  .actuals-row .bar-fill{
    position:absolute;top:0;bottom:0;
    background:linear-gradient(90deg,var(--cyan),var(--amber));
    opacity:.6;
  }

  .cheat{
    margin-top:32px;
    background:var(--panel);
    border:1px solid var(--line);
  }
  .cheat-tabs{
    display:flex;border-bottom:1px solid var(--line);
  }
  .cheat-tab{
    padding:12px 20px;
    font-size:12px;letter-spacing:2px;text-transform:none;
    color:var(--ink-faint);cursor:pointer;
    border-right:1px solid var(--line);
    background:none;border-top:none;border-bottom:none;border-left:none;
    font-family:inherit;
  }
  .cheat-tab.active{color:var(--amber);background:var(--amber-bg)}
  .cheat-body{padding:20px 24px;font-size:13px;color:var(--ink-dim);line-height:1.75}
  .cheat-body strong{color:var(--ink);font-weight:500}
  .cheat-body em{
    font-style:normal;color:var(--cyan);
    font-family:var(--mono);
  }
  .cheat-body .grp{
    display:grid;grid-template-columns:80px 1fr;
    gap:0 18px;padding:3px 0;
  }
  .cheat-body .grp code{
    color:var(--amber);font-family:var(--mono);
  }

  @media (max-width:1180px){
    .city-hero{grid-template-columns:1fr 1fr;}
    .hero-mid{grid-column:1/-1;padding:0}
    .bucket-state-grid{grid-template-columns:1fr}
  }
  @media (max-width:900px){
    .feature-row{grid-template-columns:1fr}
    .stat-strip{grid-template-columns:repeat(2,1fr)}
    .strip-cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
    .detail-grid{grid-template-columns:1fr}
    .city-hero{grid-template-columns:1fr}
    .city-hero-now{text-align:left}
    .city-hero-name{font-size:42px}
  }

  /* ==================================================================
     Aeronautical chart layer. Appended last so it wins at equal
     specificity without having to raise specificity anywhere — the
     cancellation trap in a 1,000-line sheet.
     ================================================================== */

  /* --- chrome ------------------------------------------------------ */
  .brand{padding:0 18px;border-right:1px solid var(--rule)}
  .brand-logo{
    font-family:var(--sans);font-size:19px;font-weight:700;
    letter-spacing:-.01em;color:var(--ink);
  }
  .brand-tag{font-size:11px;letter-spacing:0;color:var(--ink-3)}
  .topbar-crumbs{
    padding:0 16px;border-left:1px solid var(--rule);
    font-size:13px;letter-spacing:0;color:var(--ink-2);
  }
  .topbar-crumbs a{color:var(--ink-2);font-family:var(--sans);text-decoration:none}
  .topbar-crumbs a:hover{color:var(--signal)}
  .topbar-crumbs .sep{color:var(--rule-2)}
  .topbar-crumbs .city{
    color:var(--ink);font-family:var(--sans);font-style:normal;
    font-size:15px;font-weight:600;letter-spacing:0;
  }
  .topbar-right{padding:0 18px;border-left:1px solid var(--rule);font-size:13px}
  .clock{font-size:15px;color:var(--ink);letter-spacing:0;font-weight:500}
  /* The pulsing dot was decoration on a page that regenerates every 30 minutes. A static
     mark is honest; motion here would claim a liveness the build cadence does not have. */
  .live-dot{width:6px;height:6px;border-radius:50%;background:var(--signal);animation:none}

  .speci-badge{
    display:inline-block;margin-left:8px;padding:1px 5px;cursor:help;
    background:var(--signal);color:#fff;
    font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;
  }

  /* --- the hour spine ---------------------------------------------- */
  /* The one bold element. Every question this page answers is "what will the max be and how
     much of the day is left", so the day itself is drawn once, full width, and the panels
     below inherit its reading. */
  .spine{
    border-top:1px solid var(--ink);
    border-bottom:1px solid var(--rule-2);
    padding:18px 0 14px;margin-bottom:2px;
  }
  .spine-lede{
    display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 30px;margin-bottom:18px;
  }
  .lede-now{
    font-family:var(--mono);font-size:46px;font-weight:500;line-height:1;
    letter-spacing:-.02em;color:var(--ink);
  }
  .lede-now .u{font-size:22px;color:var(--ink-3);font-weight:400}
  .lede-item{display:flex;flex-direction:column;gap:3px}
  .lede-item .k{font-size:12px;color:var(--ink-3)}
  .lede-item .v{font-family:var(--mono);font-size:19px;font-weight:500;color:var(--ink)}
  .lede-item .k2{font-size:11px;color:var(--ink-3);margin-top:1px}
  .lede-item.quiet .v{color:var(--ink-2);font-weight:400}
  .lede-item.proj{margin-right:8px}
  .lede-item.proj .k{font-size:13px;color:var(--ink-2)}
  /* the forecast is the spine's anchor now, so it carries the weight the live reading had */
  .lede-item.proj .v{
    color:var(--signal);font-size:46px;font-weight:500;line-height:1.05;letter-spacing:-.02em;
  }
  .lede-meta{
    font-family:var(--mono);font-size:12px;color:var(--ink-3);
    margin-left:auto;text-align:right;line-height:1.7;
  }
  .spine-axis{position:relative;height:72px}
  .spine-track{
    position:absolute;left:0;right:0;top:20px;height:14px;
    background:var(--paper-3);border:1px solid var(--rule);
  }
  .spine-fill{position:absolute;top:0;bottom:0;background:var(--rule-2)}
  .spine-peak{
    position:absolute;top:-1px;bottom:-1px;
    background:var(--signal-bg);border-left:1px solid var(--signal);
    border-right:1px solid var(--signal);
  }
  .spine-now{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--signal)}
  .spine-mark{
    position:absolute;top:38px;font-family:var(--mono);font-size:11px;color:var(--ink-3);
    transform:translateX(-50%);white-space:nowrap;
  }
  .spine-mark.is-now{color:var(--signal);font-weight:600}
  /* climatology marks sit below the live one so they never share a baseline with it */
  .spine-mark.row2{top:54px}
  .spine-tick{position:absolute;top:6px;width:1px;height:8px;background:var(--rule-2)}
  .spine-hour{
    position:absolute;top:0;font-family:var(--mono);font-size:11px;color:var(--ink-3);
    transform:translateX(-50%);
  }

  /* --- heating passport -------------------------------------------- */
  .pp-lead{
    display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;
    padding:12px 0;border-bottom:1px solid var(--rule);
    font-family:var(--mono);font-size:14px;color:var(--ink-2);
  }
  .pp-lead strong{color:var(--ink);font-weight:600}
  .pp-lead .pp-now{color:var(--ink);font-weight:600;font-size:16px}
  .pp-lead .pp-proj strong{color:var(--signal)}
  .pp-lead.spent .pp-passed strong{color:var(--ink)}
  .pp-grid{padding-top:8px}
  .pp-head,.pp-row{
    display:grid;grid-template-columns:34px 46px 1fr 56px 46px;
    gap:10px;align-items:center;
  }
  .pp-head{
    font-family:var(--sans);font-size:11px;color:var(--ink-3);
    padding-bottom:5px;border-bottom:1px solid var(--rule);margin-bottom:3px;
  }
  .pp-row{font-size:12.5px;color:var(--ink-2);padding:2px 0}
  .pp-row .t,.pp-row .c,.pp-row .pk{text-align:right}
  .pp-row .bar{height:9px;background:var(--paper-3);position:relative}
  .pp-row .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--rule-2)}
  .pp-row.now{color:var(--ink);font-weight:600}
  .pp-row.now .bar i{background:var(--signal)}
  .pp-row.now .h{color:var(--signal)}
  .pp-row.past-peak{color:var(--ink-3)}
  .pp-row.past-peak .bar i{background:var(--rule)}

  /* --- wind regime -------------------------------------------------- */
  /* The only place two hues are allowed: an anomaly is signed, and one colour cannot carry a
     sign. Warm and cold read from a shared centre line rather than a common baseline. */
  /* Wind + cloud regime rows. ONE grammar for both: they answer the same shape of question and
     sit in the same pane, so a reader learns one layout rather than two.

     The row is a SPREAD, not a bar of the mean. The old version drew a solid bar proportional to
     the mean and tinted today's row, which made it loudest exactly where it had least to say --
     a sector whose 95% interval spans zero got a full bar and a "this is you" highlight. Showing
     p25-p75 against a centred zero line puts the uncertainty in the shape, so the reader sees
     that the regimes shift the distribution without determining the day. */
  .rg-now{
    display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:baseline;
    padding:9px 10px;margin:2px 0 4px;border-radius:3px;
    background:var(--paper-3);border-left:3px solid var(--rule-2);
  }
  .rg-now-k{
    font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-3);
  }
  .rg-now-v{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink)}
  .rg-now-s{font-size:12px;color:var(--ink-2);line-height:1.45}
  .rg-now.is-signal{border-left-color:var(--signal);background:var(--signal-bg)}
  .rg-now.is-signal .rg-now-v{color:var(--signal)}
  .rg-now.is-weak,.rg-now.is-none{border-left-color:var(--rule-2)}
  .rg-now.is-weak .rg-now-v,.rg-now.is-none .rg-now-v{color:var(--ink-2)}
  .rg-axis{
    display:grid;grid-template-columns:76px 1fr 52px 48px;gap:10px;
    font-family:var(--sans);font-size:10px;color:var(--ink-3);padding-bottom:3px;
  }
  .rg-axis-scale{display:flex;justify-content:space-between}
  .rg-axis-scale i{font-style:normal}
  .rg-grid{padding-top:2px}
  .rg-row{
    display:grid;grid-template-columns:76px 1fr 52px 48px;gap:10px;
    align-items:center;font-size:12.5px;color:var(--ink-2);padding:3px 0;
  }
  .rg-k{font-family:var(--mono);font-weight:600;color:var(--ink)}
  .rg-a{text-align:right;font-family:var(--mono)}
  .rg-n{text-align:right;font-size:11px;color:var(--ink-3)}
  .rg-track{position:relative;height:13px;background:var(--paper-3)}
  .rg-track i{position:absolute}
  /* the centre line IS this station's normal; it has to read as the reference, not as data */
  .rg-zero{left:50%;top:-1px;bottom:-1px;width:1px;background:var(--ink-3);opacity:.55}
  .rg-span{top:3px;bottom:3px;border-radius:1px;opacity:.85}
  .rg-span.warm{background:var(--warm)}
  .rg-span.cold{background:var(--cold)}
  .rg-mean{top:0;bottom:0;width:2px;margin-left:-1px;background:var(--ink);opacity:.8}
  /* a cell whose interval spans zero is not separable from normal: keep it legible, stop it
     competing for attention with the cells that carry something */
  .rg-row.is-weak .rg-span{opacity:.3}
  .rg-row.is-weak .rg-mean{opacity:.35}
  .rg-row.is-weak .rg-k,.rg-row.is-weak .rg-a{color:var(--ink-3);font-weight:400}
  .rg-row.is-current{background:var(--signal-bg);box-shadow:inset 2px 0 0 var(--signal)}
  .rg-row.is-current .rg-k{color:var(--signal)}
  /* The X link sits in the masthead beside the clock, so it has to look deliberate rather than
     like a sixth nav tab -- boxed, and it keeps its colour on hover. */
  .x-link{
    border:1px solid var(--rule-2);border-radius:3px;padding:2px 8px;margin-right:14px;
    font-size:12px;color:var(--ink-2);text-decoration:none;white-space:nowrap;
  }
  .x-link:hover{border-color:var(--ink-3);color:var(--ink)}
  .site-foot .x-link{border:0;padding:0;margin:0}
  @media (max-width:560px){ .x-link{display:none} }

  .rg-foot{
    font-size:11.5px;color:var(--ink-3);padding-top:9px;margin-top:7px;
    border-top:1px solid var(--rule);max-width:62ch;line-height:1.5;
  }
  @media (max-width:560px){
    .rg-row,.rg-axis{grid-template-columns:62px 1fr 46px 34px;gap:7px;font-size:12px}
    .rg-now{grid-template-columns:auto 1fr;row-gap:2px}
    .rg-now-s{grid-column:1 / -1}
  }

  /* --- model skill --------------------------------------------------- */
  .ms-head,.ms-row{
    display:grid;grid-template-columns:1fr 84px 52px 52px 44px;gap:10px;align-items:center;
  }
  .ms-head{
    font-family:var(--sans);font-size:11px;color:var(--ink-3);
    padding-bottom:5px;border-bottom:1px solid var(--rule);margin:8px 0 3px;
  }
  .ms-row{font-size:12.5px;color:var(--ink-2);padding:2.5px 0}
  .ms-row .m{font-family:var(--mono);color:var(--ink)}
  .ms-row .mae,.ms-row .bias,.ms-row .hit{text-align:right;font-family:var(--mono)}
  .ms-row .track{height:9px;background:var(--paper-3)}
  .ms-row .track i{display:block;height:100%;background:var(--rule-2)}
  .ms-row.ours .m{color:var(--signal);font-weight:600}
  .ms-row.ours .track i{background:var(--signal)}

  .ms-foot{
    font-size:11.5px;line-height:1.6;color:var(--ink-3);max-width:78ch;
    padding-top:9px;margin-top:7px;border-top:1px solid var(--rule);
  }
  .ms-foot b{color:var(--ink-2);font-weight:600}
  /* a hint that these headers carry an explanation on hover */
  .ms-head [title]{border-bottom:1px dotted var(--rule-2);cursor:help}

  /* --- TAF ----------------------------------------------------------- */
  .taf-tx{
    display:flex;align-items:baseline;gap:8px 18px;flex-wrap:wrap;
    padding:11px 0;border-bottom:1px solid var(--rule);
  }
  .taf-tx .lbl{font-size:12px;color:var(--ink-3)}
  .taf-tx .val{font-family:var(--mono);font-size:26px;font-weight:500;color:var(--signal)}
  .taf-tx .at,.taf-tx .min{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
  .taf-tx .src{font-size:11.5px;color:var(--ink-3);margin-left:auto}
  .taf-grid{padding-top:8px}
  .taf-row{
    display:grid;grid-template-columns:88px 38px 124px minmax(0,1fr);gap:12px;
    font-size:12.5px;color:var(--ink-2);padding:3px 0;align-items:baseline;
  }
  .taf-row .lbl{font-family:var(--sans);color:var(--ink);font-weight:600}
  .taf-row .prob{font-family:var(--mono);color:var(--signal);font-size:11.5px}
  .taf-row .per{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap}
  .taf-row[data-type="TEMPO"] .lbl,.taf-row[data-type="PROB"] .lbl{color:var(--ink-2);font-weight:400}
  .taf-raw{
    font-family:var(--mono);font-size:11px;color:var(--ink-3);line-height:1.6;
    padding-top:9px;margin-top:8px;border-top:1px solid var(--rule);
    word-break:break-word;
  }

  .iem-panels{display:grid;gap:0}

  .feed-state{display:block;margin-top:3px;color:var(--signal);font-size:11.5px}
  .sub-note{display:block;color:var(--ink-3);font-size:11px;margin-top:1px}
  .na{font-style:normal;color:var(--ink-3);font-size:12px}
  .low-badge{
    display:inline-block;margin-left:5px;padding:0 4px;
    background:var(--ink-3);color:var(--paper);
    font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.04em;
    vertical-align:1px;cursor:help;
  }
  .meta-sub{font-size:11.5px;color:var(--ink-3)}
  .ms-row .m .slug{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3)}

  .clima-summary{padding:4px 0 14px}

  /* --- city tabs ------------------------------------------------------ */
  .city-tabs{
    display:flex;gap:0;flex-wrap:wrap;
    border-bottom:1px solid var(--ink);margin-bottom:2px;
    position:sticky;top:46px;z-index:20;background:var(--paper);
  }
  /* Two lines: the name, and the ANSWER this section holds for this station -- not a list of
     what is inside it. A contents line tells you what you would find; a finding tells you
     whether to look. The tab stays a fixed width so four of them hold a row and a long answer
     wraps inside its own tab instead of pushing the others onto a new line. */
  .city-tab{
    appearance:none;border:0;background:none;cursor:pointer;text-align:left;
    font-family:var(--sans);font-size:15px;color:var(--ink-2);
    padding:10px 18px 9px;border-bottom:2px solid transparent;margin-bottom:-1px;
    flex:1 1 0;min-width:0;max-width:26ch;
  }
  .city-tab i{
    display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);
    margin-top:2px;font-weight:400;line-height:1.35;
    overflow-wrap:break-word;hyphens:auto;
  }
  .city-tab.active i{color:var(--ink-2)}
  .city-tab:hover{color:var(--ink);background:var(--paper-2)}
  .city-tab.active{color:var(--ink);font-weight:600;border-bottom-color:var(--signal)}
  .city-tab:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
  /* The worked example. It reuses .prose so it inherits the Sources page's measure and rhythm;
     only the lede and the key box need their own treatment, because the key box is the single
     thing on the site a first-time reader most needs to not skim past. */
  .guide-lede{font-size:15px;line-height:1.65;color:var(--ink-2);max-width:66ch}
  .guide-key{
    border-left:3px solid var(--signal);background:var(--paper-2);
    padding:16px 20px;margin:26px 0;max-width:68ch;
  }
  .guide-key h3{
    margin:0 0 10px;font-size:13px;font-weight:600;color:var(--signal);
    font-family:var(--sans);
  }
  .guide-key p{margin:0 0 10px}
  .guide-key p:last-child{margin-bottom:0}
  .guide-caveat{font-size:12.5px;color:var(--ink-3)}
  @media (max-width:560px){ .guide-key{padding:13px 15px;margin:20px 0} }
  .city-pane{display:none}
  .city-pane.active{display:block}
  .pane-empty{font-size:14px;color:var(--ink-3);padding:26px 0}
  @media (max-width:860px){
    .city-tabs{top:46px}
    /* Two per row rather than four squeezed ones: an answer needs the width to stay readable. */
    .city-tab{padding:9px 12px;font-size:13.5px;flex:1 1 44%;max-width:none;text-align:left}
    .city-tab i{font-size:11px}
  }

  /* --- what each model says ----------------------------------------- */
  .mf-head,.mf-row{
    display:grid;grid-template-columns:minmax(0,1fr) 62px 70px 78px 118px;
    gap:10px;align-items:baseline;
  }
  .mf-head{
    font-size:11.5px;color:var(--ink-3);padding-bottom:5px;
    border-bottom:1px solid var(--rule);margin:6px 0 3px;
  }
  .mf-head [title]{border-bottom:1px dotted var(--rule-2);cursor:help}
  .mf-row{font-size:13px;color:var(--ink-2);padding:3.5px 0}
  .mf-row .m{font-family:var(--mono);color:var(--ink)}
  .mf-row .t,.mf-row .tm,.mf-row .mae{text-align:right;font-family:var(--mono)}
  .mf-row .t{color:var(--ink);font-weight:600}
  .mf-row .tm,.mf-row .mae{color:var(--ink-2)}
  .mf-row .note{font-size:11px;color:var(--ink-3)}
  /* the station's most accurate model is the one the reader should start from */
  .mf-row.best .m,.mf-row.best .t{color:var(--signal)}
  .mf-row.best .note{color:var(--signal)}
  .mf-row.ours .m::after{content:"";}
  .mf-spread{
    display:flex;align-items:baseline;gap:8px;padding:10px 0;
    border-bottom:1px solid var(--rule);
  }
  .mf-spread .k{font-size:12px;color:var(--ink-3)}
  .mf-spread .v{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--ink)}
  .mf-foot{
    font-size:11.5px;line-height:1.6;color:var(--ink-3);max-width:80ch;
    padding-top:9px;margin-top:7px;border-top:1px solid var(--rule);
  }
  .mf-foot b{color:var(--ink-2);font-weight:600}
  @media (max-width:860px){
    .mf-head,.mf-row{grid-template-columns:minmax(0,1fr) 52px 56px 56px;gap:7px}
    .mf-head .note,.mf-row .note{display:none}
  }

  /* --- market vs climatology --------------------------------------- */
  /* Two paired bars per row rather than one diverging bar: the reader is comparing two
     independent estimates of the same quantity, not reading a signed difference. A diverging
     bar would imply the gap is the point, and the gap is exactly what we are NOT claiming. */
  .mc-head,.mc-row{
    display:grid;grid-template-columns:70px minmax(0,1fr) 54px 58px 56px;
    gap:10px;align-items:center;
  }
  .mc-head{
    font-size:11.5px;color:var(--ink-3);padding-bottom:5px;
    border-bottom:1px solid var(--rule);margin:8px 0 4px;
  }
  .mc-head .key{display:inline-block;width:9px;height:9px;margin-right:3px;vertical-align:-1px}
  .mc-head .key.mk{background:var(--signal)}
  .mc-head .key.cl{background:var(--ink-3)}
  .mc-row{font-size:12.5px;color:var(--ink-2);padding:3px 0}
  .mc-row .b{font-family:var(--mono);color:var(--ink);font-weight:500}
  .mc-row .mkv,.mc-row .clv,.mc-row .n{text-align:right;font-family:var(--mono)}
  .mc-row .mkv{color:var(--signal);font-weight:600}
  .mc-row .clv{color:var(--ink)}
  .mc-row .n{color:var(--ink-3);font-size:11px}
  .mc-row .bars{display:flex;flex-direction:column;gap:2px;min-width:0}
  .mc-row .bars i{display:block;height:6px;min-width:1px}
  .mc-row .bars i.mk{background:var(--signal)}
  .mc-row .bars i.cl{background:var(--ink-3);opacity:.55}
  .mc-foot{
    font-size:11.5px;line-height:1.6;color:var(--ink-3);max-width:80ch;
    padding-top:9px;margin-top:7px;border-top:1px solid var(--rule);
  }
  .mc-foot b{color:var(--ink-2);font-weight:600}
  @media (max-width:860px){
    .mc-head,.mc-row{grid-template-columns:54px minmax(0,1fr) 42px 44px;gap:7px}
    .mc-head .n,.mc-row .n{display:none}
  }

  /* --- quality floor -------------------------------------------------- */
  a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
    outline:2px solid var(--signal);outline-offset:2px;
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  }
  @media (max-width:860px){
    .spine-lede{gap:8px 18px}
    .lede-now{font-size:36px}
    .lede-meta{margin-left:0;text-align:left;width:100%}
    .pp-head,.pp-row{grid-template-columns:28px 40px 1fr 48px 40px;gap:7px}
    .ms-head,.ms-row{grid-template-columns:1fr 56px 46px 46px 40px;gap:7px}
    .taf-row{grid-template-columns:1fr;gap:1px;padding:6px 0;border-bottom:1px solid var(--rule)}
    .taf-tx .src{margin-left:0;width:100%}
  }

  /* ================= sections, landing, footer ================= */

  .topnav{display:flex;align-items:stretch;border-right:1px solid var(--rule)}
  .topnav .nav-link{
    display:flex;align-items:center;padding:0 15px;
    font-size:13.5px;color:var(--ink-2);text-decoration:none;
    border-right:1px solid var(--rule);
  }
  .topnav .nav-link:first-child{border-left:1px solid var(--rule)}
  .topnav .nav-link:hover{color:var(--ink);background:var(--paper-2)}
  /* The active section is marked by a rule along the top edge, the way a chart marks the sheet
     you are on -- not by a pill or a fill. */
  .topnav .nav-link.on{
    color:var(--ink);font-weight:600;
    box-shadow:inset 0 2px 0 var(--signal);
  }

  /* --- hero ---------------------------------------------------- */
  .hero{
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:52px;align-items:start;
    padding:58px 0 46px;border-bottom:1px solid var(--ink);
  }
  .hero-eyebrow{
    font-family:var(--mono);font-size:12px;color:var(--ink-3);
    margin-bottom:14px;letter-spacing:.02em;
  }
  .hero-title{
    font-size:46px;line-height:1.06;font-weight:600;letter-spacing:-.022em;
    color:var(--ink);max-width:17ch;
  }
  .hero-lede{
    margin-top:18px;font-size:17px;line-height:1.55;color:var(--ink-2);max-width:52ch;
  }
  .hero-actions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
  .btn{
    display:inline-block;padding:9px 17px;
    border:1px solid var(--rule-2);background:transparent;
    font-family:var(--sans);font-size:14px;color:var(--ink);text-decoration:none;
  }
  .btn:hover{background:var(--paper-2);border-color:var(--ink-3)}
  .btn-primary{background:var(--signal);border-color:var(--signal);color:#fff}
  .btn-primary:hover{background:#a8134e;border-color:#a8134e;color:#fff}

  /* The live board. The one place on the landing page where the numbers move. */
  .hero-board{border-top:1px solid var(--ink);padding-top:0}
  .lb-head{
    display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    padding:9px 0 7px;border-bottom:1px solid var(--rule);
    font-size:14px;font-weight:600;color:var(--ink);
  }
  .lb-note{font-size:12px;font-weight:400;color:var(--ink-3)}
  .lb-row{
    display:grid;grid-template-columns:52px minmax(0,1fr) 46px 60px 52px auto;
    gap:9px;align-items:baseline;padding:6px 0;
    border-bottom:1px solid var(--rule);
    text-decoration:none;color:var(--ink-2);font-size:13px;
  }
  .lb-row:hover{background:var(--paper-2)}
  .lb-st{font-family:var(--mono);font-weight:600;color:var(--ink)}
  .lb-city{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lb-time,.lb-t,.lb-climb{font-family:var(--mono);text-align:right}
  .lb-time{color:var(--ink-3);font-size:12px}
  .lb-t{color:var(--ink);font-weight:500}
  .lb-climb{color:var(--signal);font-weight:600}
  .lb-k{font-size:12px;color:var(--ink-3)}
  .lb-done{font-size:12px;color:var(--ink-3);grid-column:5/-1}

  /* --- station search ------------------------------------------------- */
  .jump{position:relative;margin-top:26px;max-width:min(460px,100%)}
  .jump input{
    width:100%;font-family:var(--sans);font-size:17px;color:var(--ink);
    background:var(--paper-2);border:1px solid var(--rule-2);
    padding:13px 15px;
  }
  .jump input:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
  .jump input::-webkit-search-cancel-button{-webkit-appearance:none}
  .jump-list{
    position:absolute;z-index:40;left:0;right:0;top:calc(100% - 1px);
    list-style:none;margin:0;padding:0;
    background:var(--paper);border:1px solid var(--ink);
    max-height:320px;overflow-y:auto;
  }
  .jump-list li{
    display:grid;grid-template-columns:58px 1fr auto auto;gap:10px;align-items:baseline;
    padding:9px 14px;cursor:pointer;border-bottom:1px solid var(--rule);
  }
  .jump-list li:last-child{border-bottom:0}
  .jump-list li.on{background:var(--signal-bg)}
  .jump-list .ic{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
  .jump-list li.on .ic{color:var(--signal)}
  .jump-list .nm{font-size:15px;color:var(--ink)}
  .jump-list .rg{font-size:11.5px;color:var(--ink-3)}
  .jump-list .lw{
    font-family:var(--mono);font-size:9.5px;font-weight:600;
    background:var(--ink-3);color:var(--paper);padding:0 4px;
  }
  .jump-hint{margin-top:9px;font-size:12.5px;color:var(--ink-3)}
  .jump-hint button{
    appearance:none;background:none;border:0;padding:0;cursor:pointer;
    font-family:var(--mono);font-size:12.5px;color:var(--ink-2);
    border-bottom:1px dotted var(--rule-2);
  }
  .jump-hint button:hover{color:var(--signal)}
  .hero-actions{margin-top:18px}

  /* --- Pro signup ----------------------------------------------------- */
  /* Centred and given its own ground: this is the one thing on the page asking for something
     back, so it should read as a deliberate stop rather than another band of prose. */
  .band-signup{
    border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
    background:var(--paper-2);padding:52px 22px;text-align:center;
  }
  .signup-wrap{max-width:62ch;margin:0 auto}
  .signup-head{font-size:30px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
  .signup-lede{
    font-size:16px;line-height:1.6;color:var(--ink-2);margin:12px auto 0;max-width:58ch;
  }
  .signup-fine{font-size:12.5px;color:var(--ink-3);margin-top:14px}
  .signup-msg{font-size:14px;color:var(--ink-2);min-height:1.2em;margin-top:12px}
  .signup{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:24px;
    justify-content:center}
  .signup input{
    font-family:var(--sans);font-size:16px;color:var(--ink);
    background:var(--paper-2);border:1px solid var(--rule-2);
    padding:11px 14px;min-width:min(340px,100%);text-align:center;
  }
  .signup input:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
  .signup input[aria-invalid="true"]{border-color:var(--signal)}
  .signup-msg{font-size:13.5px;color:var(--ink-2)}
  .signup-msg.ok{color:var(--ok);font-weight:600}
  .signup-msg.err{color:var(--signal)}
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  @media (max-width:860px){
    .signup input{min-width:100%}
    .signup .btn{width:100%}
  }

  /* --- bands --------------------------------------------------- */
  .band{padding:44px 0;border-bottom:1px solid var(--rule-2)}
  .band-quiet{background:var(--paper-2);padding-left:22px;padding-right:22px}
  .band-title{font-size:13px;font-weight:600;color:var(--ink-3);margin-bottom:22px}
  .band-lede{font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:72ch;margin-bottom:20px}
  .feature-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
    gap:34px 40px;
  }
  .feature h3{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:8px}
  .feature h3::before{
    content:"";display:block;width:26px;height:2px;background:var(--signal);margin-bottom:11px;
  }
  .feature p{font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:46ch}

  /* --- models view --------------------------------------------- */
  .mv-head,.mv-row{
    display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 74px 84px 74px;
    gap:10px;align-items:baseline;
  }
  .mv-head{
    font-size:11.5px;color:var(--ink-3);padding-bottom:5px;
    border-bottom:1px solid var(--rule);margin:8px 0 2px;
  }
  .mv-row{
    font-size:13px;color:var(--ink-2);padding:4px 0;text-decoration:none;
    border-bottom:1px solid var(--rule);
  }
  .mv-row:hover{background:var(--paper-2)}
  .mv-row .c{color:var(--ink);font-weight:500}
  .mv-row .b{font-family:var(--mono);color:var(--signal)}
  .mv-row .v,.mv-row .w,.mv-row .h{font-family:var(--mono);text-align:right}
  .mv-row .w{color:var(--ink-3)}
  .foot-note{
    font-size:12.5px;line-height:1.6;color:var(--ink-3);max-width:74ch;padding:18px 0 4px;
  }

  /* --- prose (sources) ------------------------------------------ */
  .prose{max-width:70ch;padding-bottom:20px}
  .prose h2{
    font-size:17px;font-weight:600;color:var(--ink);
    margin:30px 0 9px;padding-top:15px;border-top:1px solid var(--rule);
  }
  .prose h2:first-child{border-top:0;padding-top:0;margin-top:4px}
  .prose p{font-size:15px;line-height:1.68;color:var(--ink-2);margin-bottom:13px}
  .prose a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
  .prose a:hover{color:var(--signal)}

  /* --- footer ---------------------------------------------------- */
  .site-foot{
    display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
    margin-top:54px;padding:20px 22px 40px;
    border-top:1px solid var(--ink);
    font-size:12.5px;color:var(--ink-3);
  }
  .site-foot a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
  .site-foot a:hover{color:var(--signal)}

  @media (max-width:900px){
    .hero{grid-template-columns:1fr;gap:34px;padding:34px 0 30px}
    .hero-title{font-size:38px;max-width:none}
    .topnav .nav-link{padding:0 11px;font-size:13px}
    .mv-head,.mv-row{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 60px 60px;gap:8px}
    .mv-head .h,.mv-row .h{display:none}
    .lb-row{grid-template-columns:48px minmax(0,1fr) 54px 48px auto;gap:7px}
    .lb-row .lb-time{display:none}
  }

  /* --- live range odds and the forecast record (2026-11-10, scripts/tt_panels.py) --- */
  .odds-panel{margin:0 0 22px}
  /* rows stretched across a desktop put the market price a screen-width from its range */
  .odds-head,.odds-rows,.rec-head,.rec-rows{max-width:760px}
  .odds-head,.odds-row{display:grid;grid-template-columns:minmax(66px,auto) minmax(0,1fr) 52px 46px;
    gap:10px;align-items:center;padding:5px 0}
  .odds-head{font-size:11px;color:var(--ink-3);border-bottom:1px solid var(--rule)}
  .odds-row{border-bottom:1px dashed var(--rule);font-family:var(--mono);font-size:13px}
  .odds-row[hidden]{display:none}
  .odds-row .bar{height:10px;background:var(--paper-3);position:relative}
  .odds-row .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--signal)}
  .odds-row .p{text-align:right;font-weight:600;color:var(--ink)}
  .odds-row .m{text-align:right;color:var(--ink-3)}
  .odds-head .p,.odds-head .m{text-align:right}
  .odds-foot{font-size:12px;line-height:1.6;color:var(--ink-3);padding:10px 0 4px;max-width:90ch}
  .odds-foot b{color:var(--ink-2);font-weight:600}
  .odds-none{font-size:13px;color:var(--ink-3);padding:8px 0}
  .rec-panel{margin:0 0 22px}
  .rec-head,.rec-row{display:grid;grid-template-columns:46px minmax(0,1fr) 46px 46px 56px;gap:8px;
    padding:5px 0;align-items:center}
  .rec-head{font-size:11px;color:var(--ink-3);border-bottom:1px solid var(--rule)}
  .rec-row{border-bottom:1px dashed var(--rule);font-family:var(--mono);font-size:13px}
  .rec-row .mdl{font-family:var(--sans);font-size:12px;color:var(--ink-2);overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .rec-row .v,.rec-row .miss,.rec-head .v,.rec-head .miss{text-align:right}
  .rec-row .miss.warm{color:var(--warm)}
  .rec-row .miss.cold{color:var(--cold)}

  /* ================= phone layout (2026-11-10) =================
     Before this block every page was 745-877px wide on a 390px phone (tools/tt_phone_check.js), so
     the whole page slid sideways and about 3 in 4 visits are phones. Three causes:
       - the masthead is one row: brand + five links + crumbs + clock come to ~880px;
       - a 1fr grid column grows to its widest child, so one raw METAR line made both panels of
         the row 462px wide (minmax(0,1fr) lets the column stay at the screen width);
       - the chart stage was a fixed 420px tall around an SVG drawn at 520x300, so on a phone the
         chart sat in a band of empty space (the stage now keeps the drawing's own shape).
     Appended last so it wins at equal specificity, as the chart layer above does.
     The masthead needs ~1,260px in one row, so it is not only a phone problem: tablets and small
     laptops (768-1024px) were 1,040-1,170px wide too. Below 1,280 the crumbs and the UTC clock go
     (the station name is the page's own heading; "updated 3m ago" stays as the freshness signal),
     and below 1,100 the links move to a second row. */
  @media (max-width:1279px){
    .topbar-crumbs{display:none}
    .topbar-right .clock{display:none}
    .topnav .nav-link{white-space:nowrap}
  }
  @media (max-width:1100px){
    .topbar{flex-wrap:wrap;height:auto}
    .brand{height:44px;padding:0 14px;border-right:0}
    .topbar-right{padding:0 14px;border-left:0;gap:8px}
    .topnav{order:3;flex:1 0 100%;height:40px;overflow-x:auto;border-right:0;
            border-top:1px solid var(--rule);scrollbar-width:none}
    .topnav::-webkit-scrollbar{display:none}
    .topnav .nav-link{flex:0 0 auto;padding:0 13px}
    .topnav .nav-link:first-child{border-left:0}
    /* the hero was sticky at top:48px, under a one-row masthead */
    .city-header-sticky{top:85px}
  }
  /* "usually warmest" and "sunset" are 2-3 hours apart in winter, which is 40px on a phone, so they
     printed on top of each other. Sunset has its own row at every width. */
  .spine-axis{height:90px}
  .spine-mark.sun{top:70px}
  /* the hour ticks ran through the hour digits ("0|4"); they now sit between the digits and the bar */
  .spine-tick{top:14px;height:6px}
  @media (max-width:620px){
    .brand-tag{display:none}
    /* a sticky hero under a two-row masthead would cover a third of a phone screen */
    .city-header-sticky{position:static}
    .detail-grid,.clima-grid{grid-template-columns:minmax(0,1fr)}
    .panel{min-width:0}
    .chart-stage{height:auto;aspect-ratio:520/300}
    .cheat-tabs{overflow-x:auto}
    .cheat-tab{flex:0 0 auto;padding:12px 14px;letter-spacing:.5px}
    .filter-bar{flex-wrap:wrap}
    .filter-search{width:100%}
  }
  /* the LATEST tag sat on top of the report's first line whenever the report was long */
  .tele-metar{padding-top:30px}
  .tele-metar::before{top:9px;font-size:11px}