/* FBLTWX · Models (models.html, assets/np/models.js): the rules only this page uses, moved out of np.css by V-fu1.2
   (Oct. 25, 2026); np.css keeps what /about/, /winter/ and the archive share with it. Every color is a token. */
.np-modelspage{padding:20px 0 30px}
/* tabs under the title (models.js); the active one is underlined 5px red; the bar scrolls sideways if it must */
.mp-tabs{display:flex;margin:18px 0 0;border-bottom:2px solid var(--ink);overflow-x:auto;scrollbar-width:none}
.mp-tabs a:focus-visible{outline-offset:-3px}
.mp-panel:focus-visible{outline-offset:4px}
/* A panel waiting for its data (models.html data-wait, removed by models.js when it draws) keeps the height it has
   once drawn, measured Oct. 7, 2026 at 390 and 1440 (the card, forecast and ensembles again Oct. 20, Round S1 to S3), so
   the footer doesn't jump up the screen and back (CLS was 0.8).
   Without JavaScript the hold lets go after 10 seconds. Remeasure if a panel's content changes a lot.
   Before models.js runs, models-early.js (in the head) has named the tab in html[data-mptab]: the tab bar and only that
   panel show from the first paint. */
html[data-mptab] #mp-tabs[hidden]{display:flex!important}
.mp-panel[data-wait]{animation:mp-unwait 0s 10s forwards}
@keyframes mp-unwait{to{min-height:0}}
#p-card[data-wait]{min-height:1540px}
#p-forecast[data-wait]{min-height:2590px}
#p-ensembles[data-wait]{min-height:1400px}
#p-upperair[data-wait]{min-height:1180px}
#p-outlooks[data-wait]{min-height:740px}
@media (max-width:560px){
  #p-card[data-wait]{min-height:2600px}
  #p-forecast[data-wait]{min-height:3820px}
  #p-ensembles[data-wait]{min-height:2360px}
  #p-upperair[data-wait]{min-height:2130px}
  #p-outlooks[data-wait]{min-height:1190px}
}
/* Round S1 (Models 1): the tabs are named by their questions, so the bar wraps onto more rows instead of scrolling
   sideways, each name on one line; on phones the tabs in a row share its width */
.mp-tabs{flex-wrap:wrap;overflow-x:visible}
.mp-note{margin:6px 0 10px;font-weight:700}
.mp-pill{display:inline-block;margin-left:4px;padding:1px 7px;border:1px solid var(--ink3);border-radius:10px;font-size:12px;font-weight:800;color:var(--ink);background:#fff;white-space:nowrap;vertical-align:1px}
.tc-hint{margin:6px 0 0;font-size:13px;font-weight:700;color:var(--ink2)}   /* how to read the temperature chart */
/* report card: heatmap of average miss (rows = models, columns = lead days), summary bar, three panels */
.rc-controls{display:flex;flex-wrap:wrap;gap:10px 18px;margin:12px 0}
/* Round S1 (Models 11): each button group's visible label, what its buttons change, above them */
.mp-group{display:flex;flex-direction:column;gap:4px}
.mp-glabel{font-size:13px;font-weight:800;color:var(--ink2)}
/* the sub-line under a section bar (Round S1: the bar holds only its name) */
.mp-sub{margin:-4px 0 10px}
.rc-notes{margin:8px 0 0;max-width:900px}
.rc-seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.rc-snap{margin:0 0 8px;font-weight:600;color:var(--ink2);font-size:14px}
.hm{border:1px solid var(--rule);background:#fff}
.hm-table{border-collapse:collapse;width:100%;table-layout:fixed;font-variant-numeric:tabular-nums}
.hm-table col.hm-mc{width:200px}
.hm-table col.hm-ac{width:96px}
/* Round S1 (Models 2): the n most cells share, once, under "Model"; a cell with another n says its own */
.hm-table thead th small.hm-n{display:block;margin-top:2px;font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink2)}
.hm-row{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:4px;align-items:baseline}
.hm-rank{font-weight:900;font-size:15px;color:var(--ink3)}
.hm-nm{font-weight:900;font-size:16px}
.hm-by{grid-column:2;font-size:12.5px;font-weight:600;color:var(--ink2);line-height:1.25}
.hm-c{height:56px;line-height:1.15}
.hm-c small{display:block;font-size:12px;font-weight:600}   /* full opacity: at 90% the n= labels fell to 4.0:1 */
.hm-c.best{box-shadow:inset 0 0 0 4px var(--red)}
.hm-c.snap{background:var(--slate-bg);color:var(--ink2)}   /* under 7 scored days: gray, no color */
.hm-c.none{background:var(--hm-none);color:var(--hm-none-ink)}
.hm-table .hm-avg{border-right:2px solid var(--ink)}   /* Round S1 (Models 14): days 1-2 first, ruled off from the days */
.hm-habit{grid-column:2;margin-top:2px;font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.25}
.hm-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:8px 0 0;font-size:13px;font-weight:700}
.hm-sw{display:inline-flex}
.hm-sw i{display:inline-block;width:18px;height:14px}
.hm-best{display:inline-block;width:18px;height:14px;box-shadow:inset 0 0 0 3px var(--red);background:#fff}
.hm-gray{display:inline-block;width:18px;height:14px;background:var(--hm-none);border:1px solid var(--rule)}
.rc-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.rc-panel{border:1px solid var(--rule);background:#fff;padding:12px 14px}
/* Round S2 (Models 15, 16, 17, 18): the NWS's rows set apart under a rule; "within 2°" and "within 5°" labeled over their
   numbers; the sparklines' scale beside the first and their dates under the last; what a win is */
.pn-apart{margin-top:6px;padding-top:6px;border-top:1px solid var(--ink3)}
.pn-row.pn-close{grid-template-columns:78px minmax(0,1fr) 40px 40px}
.pn-head .pn-val{font-size:12px;font-weight:800;color:var(--ink2);white-space:normal;line-height:1.1}
.pn-row.pn-sparkrow{grid-template-columns:78px 22px minmax(0,1fr) 72px}
.pn-y{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;font-size:12px;line-height:1;color:var(--ink3);text-align:right}
.pn-x{min-height:0}
.pn-x .pn-dates{display:flex;justify-content:space-between;font-size:12px;color:var(--ink3)}
.rc-panel p.pn-win{margin:-4px 0 8px}
.pn-row{display:grid;grid-template-columns:78px minmax(0,1fr) 72px;gap:6px;align-items:center;min-height:26px;font-size:13px}
.pn-val{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pn-div{position:relative;height:14px;background:var(--slate-bg)}
.pn-div::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;border-left:2px solid var(--ink)}
.pn-div i{position:absolute;top:0;bottom:0}
.pn-div i.w{left:50%;background:var(--warm)}
.pn-div i.c{right:50%;background:var(--blue)}
.pn-scale{display:flex;justify-content:space-between;margin:4px 0 0 84px;padding-right:78px;font-size:12px;color:var(--ink3)}
.pn-stack{display:flex;height:14px;background:var(--slate-bg)}
.pn-stack i{display:block;height:100%}
.pn-stack i.c2{background:var(--close2)}
.pn-stack i.c5{background:var(--close5)}
.pn-key{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0 0 8px;font-size:12.5px;font-weight:700}
.pn-key i{display:inline-block;width:14px;height:12px}
.pn-key i.c2{background:var(--close2)}
.pn-key i.c5{background:var(--close5)}
.pn-spark{display:block;width:100%;height:26px;overflow:visible}
.pn-spark .ln{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.pn-spark .ref{stroke:var(--ink3);stroke-width:1;stroke-dasharray:3 3}
@media (max-width:1000px){
  .rc-panels{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .hm-table col.hm-mc{width:82px}
  .hm-table col.hm-ac{width:auto}   /* Round S1: days 1-2 takes a day column's share here */
  .hm-table thead th:first-child{padding-left:6px}
  .hm-table tbody th{padding:4px 2px 4px 6px}
  .hm-row{grid-template-columns:14px minmax(0,1fr);column-gap:2px}
  .hm-rank{font-size:12px}
  .hm-nm{font-size:13px;line-height:1.15}
  .hm-by{display:none}
  .hm-c{height:40px}
  .hm-habit{font-size:12px}
}
/* rain, wind, snow on phones (models.js groupBars()): one table, models down the side in a fixed order, days across */
.gb-tablewrap{display:none;overflow-x:auto}
@media (max-width:699px){
  .gb-tablewrap{display:block}
  .gb>.gb-day{display:none}
}
/* dew point, clouds, gusts (models.js moreCharts()): three compact charts side by side, stacked under 900 px */
.mx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:10px}
.mx-fig{margin:0;min-width:0}
.mx-fig figcaption{font-size:15px;font-weight:900;margin:0 0 4px}
.tc-line.mx-line{stroke-width:2}
@media (max-width:899px){
  .mx-grid{grid-template-columns:minmax(0,1fr)}
}
/* latest runs (models.js latestRuns()): one row of cards, navy top border; late = orange border and a "Late" line */
.lr-strip{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.lr-card{display:grid;gap:2px;align-content:start;padding:8px 10px;background:#fff;border:1px solid var(--rule);border-top:5px solid var(--navy);font-size:13.5px;line-height:1.3}
.lr-card strong{font-size:15px;font-weight:900}
.lr-card.late{border-top-color:#e07b12}
.lr-late{font-weight:800;color:var(--ink)}
/* how the forecast has moved (models.js moved()): the temperature chart's lines, a dot per run, labels at the right */
.mv-dot{stroke:#fff;stroke-width:1.5}
.tc-end.mv-end-s{font-size:13px}
.tc-mid{fill:none;stroke:var(--ink);stroke-width:3.2}                    /* Round S4 (Models 5): the models' middle */
.tc-band{fill:var(--blue);fill-opacity:.18;stroke:none}                /* and their lowest to highest */
.mp-find{margin:6px 0 8px;font-size:16px;font-weight:700;line-height:1.35;max-width:62em}   /* Round S4 (Models 28): a chart's finding */
.mx-fig .mp-find,.rc-panel .mp-find{margin:2px 0 6px;font-size:14px}
.tc-end{font-size:13px;font-weight:900;paint-order:stroke;stroke:#fff;stroke-width:4px}
.tc-nws{fill:#fff;stroke:var(--ink);stroke-width:2}
.tc-nws.hi{fill:var(--ink)}
.tc-rule{stroke:var(--ink);stroke-width:1}
.tc-tip{position:absolute;top:12px;z-index:2;display:grid;gap:2px;padding:8px 10px;background:#fff;border:1px solid var(--ink);font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.15);pointer-events:none}
/* how sure: ensemble bands */
/* Round S3 (Models 8, 7, 30): every ensemble run a dot, its middle 80% a bar under them, the middle run a tick; the scale's
   5° lines through every row and its labels in a row that stays in view; the key is tomorrow's row with its parts named */
.hs-lead{margin:2px 0 10px;max-width:900px;font-size:17px;line-height:1.4}
.hs-key{margin:10px 0 4px}
.hs-row.hs-keyrow{border-bottom:2px solid var(--ink)}
.hs-sub{margin:14px 0 0}
.hs-key svg{display:block;max-width:100%;height:auto;overflow:visible}
.hs-keyt{font-size:12.5px;font-weight:700;fill:var(--ink);font-family:'Libre Franklin','LF Fallback','LF Fallback Roboto',system-ui,sans-serif}
.hs-ldr{stroke:var(--ink3);stroke-width:1}
.hs-grid{stroke:var(--rule);stroke-width:1}
.hs-dot{stroke:none;opacity:.42}
.hs-dot.g{fill:var(--blue)}
.hs-dot.e{fill:var(--t100)}
.hs-bar{stroke-width:4}
.hs-bar.g{stroke:var(--blue)}
.hs-bar.e{stroke:var(--t100)}
.hs-row{display:grid;grid-template-columns:140px minmax(0,1fr);gap:10px;align-items:start;padding:8px 0;border-bottom:1px solid var(--rule)}
.hs-row.hs-axis{position:sticky;top:0;z-index:2;padding:0;border:0;background:var(--paper)}   /* Round S3 (Models 7, #44): the scale stays in view */
.hs-day strong{display:block;font-size:15px}
.hs-day small{font-size:12.5px;color:var(--ink3)}
.hs-main svg{display:block;max-width:100%;height:auto;overflow:visible}
.hs-tick{font-size:13px;fill:var(--ink3);text-anchor:middle;font-family:'Libre Franklin','LF Fallback','LF Fallback Roboto',system-ui,sans-serif}
.hs-med{stroke:var(--ink);stroke-width:3}
.hs-lbl{font-size:13px;font-weight:800;fill:var(--ink);text-anchor:end;font-family:'Libre Franklin','LF Fallback','LF Fallback Roboto',system-ui,sans-serif}
.hs-nws{fill:var(--ink);stroke:#fff;stroke-width:2}
.hs-says{margin:4px 0 0;font-size:14px}
.qc-card.noword{border-top-color:var(--rule)}   /* Round O6: the high's card has no word (confidence.py), so no rating color */
.qc-why{font-size:14px;font-weight:400;color:var(--ink2)}   /* Round O-fu2: the spread the word judged, and whose */
.qc-foot{margin:8px 0 4px}
.hs-calls{margin:14px 0 0;border-top:2px solid var(--ink);padding-top:8px}
.hs-calls-h{margin:0 0 6px;font-size:15px;font-weight:900}
.hs-calls ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.hs-calls li{font-size:15px}
.hs-calls li.frost strong{color:var(--cold)}
.gb-day{border:1px solid var(--rule);background:#fff;padding:10px 12px}
.gb-day h3 small{font-size:12.5px;font-weight:600;color:var(--ink3)}
.gb-row{display:grid;grid-template-columns:44px minmax(0,1fr) 62px;gap:6px;align-items:center;font-size:13px;margin:3px 0}
.gb-name{font-weight:800}
.gb-track{height:12px;background:var(--slate-bg)}
.gb-track i{display:block;height:100%;min-width:2px;background:var(--slate)}
#rn .gb-track i{background:var(--blue)}
#sn .gb-track i{background:var(--cold)}
.gb-val{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
/* model guide: one spec table; grid bar on a 25 km scale, a square per run, range bar on a 16-day scale (days 1-7 shaded) */
.mg-table{width:100%;border-collapse:collapse;margin-top:10px;background:#fff;border:1px solid var(--rule);font-size:14px}
.mg-scale{display:block;font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink3)}
.mg-nm{display:block;font-weight:900;font-size:16px}
.mg-by{display:block;font-size:12.5px;font-weight:600;color:var(--ink2)}
.mg-t{display:block}
.mg-na{color:var(--ink3)}
.mg-bar,.mg-range{position:relative;display:block;height:8px;margin-top:5px;background:var(--slate-bg);max-width:200px}
.mg-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}
.mg-range .wk{position:absolute;left:0;top:0;bottom:0;width:43.75%;background:var(--wk)}   /* days 1-7 of 16 */
.mg-range .bar{position:absolute;left:0;top:2px;bottom:2px;background:var(--ink)}
.mg-range .bar.human{background:var(--red)}
.mg-runs{display:flex;flex-wrap:wrap;gap:2px;margin-top:5px;max-width:200px}
.mg-runs i{display:block;width:6px;height:6px;background:var(--ink)}
.mg-ens th[scope=rowgroup] .mg-scale{display:inline;margin-left:6px}
.ms-list{margin:8px 0 0;padding:0;list-style:none;font-size:18px;line-height:1.45;max-width:62em}   /* Round S5: what the models say, one finding a line */
.ms-list li{margin:0 0 6px}
/* Round S5: yesterday's scoreboard and the worked miss (modelspage.scoreboard, worked_miss) */
.yd-lead{margin:6px 0 4px;font-size:17px;font-weight:800;line-height:1.35;max-width:62em}
.yd-obs{margin:0 0 8px;font-size:16px;line-height:1.4}
.yd-wrap{overflow-x:auto}
.yd-table{max-width:640px}
.wm-text{margin:6px 0 0;font-size:17px;line-height:1.45;max-width:62em}
.mp-credit{margin:0}
@media (max-width:720px){
  .hs-row{grid-template-columns:minmax(0,1fr);gap:4px}
  .hs-row.hs-axis .hs-day{display:none}
  .mg-table td.mg-na{display:none}   /* Round S6: a cell its source doesn't state */
  .mg-table td{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:8px}
  .mg-table td::before{content:attr(data-label);grid-row:1 / span 2;font-weight:800;font-size:12.5px}
  .mg-ens th[scope=rowgroup]{margin:-8px -10px 0;padding:6px 10px}
}
/* ---------- models.html Upper air tab (Round F2) ---------- */
.ua-controls{align-items:center}
.ua-time{display:inline-flex;align-items:stretch;border:2px solid var(--ink);background:#fff}
.ua-time select{font:800 15px 'Libre Franklin','LF Fallback','LF Fallback Roboto',system-ui,sans-serif;color:var(--ink);background:#fff;border:0;border-left:2px solid var(--ink);border-right:2px solid var(--ink);padding:0 8px;min-height:44px}
.ua-step{font:900 22px 'Libre Franklin','LF Fallback','LF Fallback Roboto',system-ui,sans-serif;width:44px;min-height:44px;border:0;background:#fff;color:var(--ink);cursor:pointer}
.ua-step:disabled{color:var(--rule);cursor:default}
.ua-skewt{margin:12px 0 0;max-width:640px;border:1px solid var(--rule);background:#fff;padding:6px}
.ua-skewt svg{display:block;width:100%;height:auto}
.ua-skewt:empty{aspect-ratio:574/560}   /* the skew-T's box (560x546 drawing, 6 px padding, 1 px border) while it loads */
.sk .sk-p,.sk .sk-tl{fill:var(--ink3);font-weight:600}
.sk .sk-p{text-anchor:end}
.sk .sk-tl{text-anchor:middle}
.sk .sk-title{font-weight:900;font-size:max(17px,calc(15px*var(--k,1)))}
.sk .sk-kt{fill:var(--red);font-weight:800}
.sk .sk-kd{fill:var(--blue);font-weight:800}
.sk .sk-kr{fill:var(--ink3)}
.sk-isobar{stroke:var(--rule);stroke-width:1;fill:none}
.sk-iso{stroke:var(--rule);stroke-width:1;stroke-dasharray:4 4;fill:none}
.sk-iso.zero{stroke:var(--blue);stroke-dasharray:none}
.sk-t{stroke:var(--red);stroke-width:3.5;fill:none;stroke-linejoin:round}
.sk-td{stroke:var(--blue);stroke-width:3.5;fill:none;stroke-linejoin:round}
.sk-barb{stroke:var(--ink);stroke-width:2;fill:var(--ink)}
path.sk-barb{fill:var(--ink)}
circle.sk-barb{fill:none}
.ua-body{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:24px;align-items:start;margin-top:12px}
.ua-body .ua-skewt{margin:0}
@media (max-width:899px){
  .ua-body{grid-template-columns:minmax(0,1fr)}
}
.ua-table th[scope="row"]{white-space:normal}
@media (max-width:560px){
  .ua-table th,.ua-table td{padding:6px 3px;font-size:13px}
  .ua-time{width:100%}
  .ua-time select{flex:1}
}
/* ---------- models.html Outlooks tab (Round F4-F6) ---------- */
.co-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}
.co-card{border:1px solid var(--rule);border-top:6px solid var(--ink3);background:#fff;padding:10px 12px}
.co-card .co-d{white-space:nowrap}
.co-card .co-el{margin:6px 0 0;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.co-card .co-cat{margin:2px 0 0;font-size:22px;font-weight:900;line-height:1.15}
.co-card .co-prob{margin:4px 0 0;font-size:14px;font-weight:700}
/* shaded by category, CPC's own scheme: warm or cold for temperature, green or tan for precipitation; text stays ink */
.co-card.temp-above{background:var(--t80);border-top-color:var(--t90)}
.co-card.temp-below{background:var(--t30);border-top-color:var(--blue)}
.co-card.prec-above{background:var(--t50);border-top-color:var(--nbm)}
.co-card.prec-below{background:var(--hm3);border-top-color:var(--warm)}
.co-card.temp-near,.co-card.prec-near{background:var(--hm2)}
.co-card.temp-ec,.co-card.prec-ec{background:#fff}
@media (max-width:899px){
  .co-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.tl-chart{margin-top:12px}
.tl-zero{stroke:var(--ink3)}
.tl-today{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 3}
.so-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.so-card{border:1px solid var(--rule);border-left:10px solid var(--rule);background:#fff;padding:10px 12px}
.so-card .so-cat{margin:4px 0 0;font-size:20px;font-weight:900;line-height:1.15}
.so-card .so-lvl{margin:2px 0 0;font-size:14px;font-weight:700;color:var(--ink3)}
/* SPC's category colors as the card's edge (text stays ink on white for contrast) */
.so-card.so-tstm{border-left-color:var(--t50)}
.so-card.so-mrgl{border-left-color:var(--nbm)}
.so-card.so-slgt{border-left-color:var(--t70)}
.so-card.so-enh{border-left-color:var(--t80)}
.so-card.so-mdt{border-left-color:var(--t90)}
.so-card.so-high{border-left-color:var(--t-10)}
@media (max-width:560px){
  .so-cards{grid-template-columns:minmax(0,1fr)}
}
/* ---------- report card: Rain (Round F7a) ---------- */
.rc-rain{margin-top:14px}
.rc-raintable{margin-top:6px}
.rc-raintable thead th small{display:block;font-size:12px;font-weight:700;color:var(--ink3)}
.rc-raintable td{white-space:nowrap}
@media (max-width:560px){
  .rc-raintable th,.rc-raintable td{padding:6px 3px;font-size:13px}
  .rc-raintable td{white-space:normal}
}
/* the report card's Snow view (I-fu2): the label row over the unranked, temperature-estimated rows */
.hm-est th{padding:6px 8px;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;text-align:left;background:var(--slate-bg);color:var(--ink2)}
@media (max-width:560px){
  .rc-snowtable,.rc-snowtable tbody,.rc-snowtable tr,.rc-snowtable th,.rc-snowtable td{display:block;width:auto;text-align:left}
  .rc-snowtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rc-snowtable tr{padding:8px 0;border-bottom:1px solid var(--rule)}
  .rc-snowtable td{padding:1px 0;border:0}
  .rc-snowtable td::before{content:attr(data-k) ": ";font-weight:800;color:var(--ink2)}
}