/* FBLTWX · daily archive pages (/archive/..., written by server/app/archive_pages.py). Loaded after np.css and uses
   only its variables, fonts and building blocks (np-rulehead, np-tiles, rc-table, tc-svg, np-daybar, moon-*);
   this file adds the pieces np.css has no equivalent for. A temperature prints in ink with its bands.css color as a small
   swatch beside it, never as the number's background (Round T2). */
/* ---------- from np.css (V-fu1.2, Oct. 25, 2026): the rules only this page uses ---------- */
.np-skyh{margin:0;font-size:15px;font-weight:800}   /* the archive day's moon cell label (archive_pages) */
.np-moonrow{display:flex;align-items:center;gap:14px;margin-top:4px}   /* the archive day's moon: drawing, phase, % lit */
.np-legend{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;font-weight:600}
/* standings table (archive day pages' Report Card and storm tables use these); model names stay put while the numbers
   scroll sideways on phones */
.mp-leader{margin:10px 0;font-size:17px}
.rc-wrap{overflow-x:auto;border:1px solid var(--rule);background:#fff}
.rc-table{border-collapse:collapse;width:100%;min-width:720px;font-size:15px;font-variant-numeric:tabular-nums}
.rc-table thead th:first-child{background:var(--slate-bg)}
@media (max-width:720px){
  .rc-table .rc-dot{display:none}
  .rc-table .rc-src{display:block;font-size:12.5px;font-weight:600;color:var(--ink2)}
}
.rc-table tr.lead th,.rc-table tr.lead td:nth-last-child(-n+2){background:var(--t70)}
.np-archive{padding:20px 0 30px}
.ar-crumbs{margin:0 0 8px;font-size:13px;font-weight:700}
.ar-head .mp-title{margin-top:4px}
.ar-sum{margin:8px 0 0;font-size:19px;font-weight:700}
.ar-badge{display:inline-block;margin-top:10px;padding:5px 12px;font-size:14px;font-weight:800;line-height:1.3;border:2px solid var(--c);color:var(--ink)}
.ar-badge.warn{--c:var(--red);background:var(--red);color:#fff}
.ar-badge.watch{--c:var(--t80);background:color-mix(in srgb,var(--t80) 25%,#fff)}
.ar-badge.spc{--c:var(--navy);background:#fff}
.ar-badge.rain{--c:var(--blue);background:#fff}   /* Round G8: 1.00 in.+ on Stage IV, not a storm log day */
.ar-banner{margin:16px 0 0;padding:8px 12px;border:1px dashed var(--ink3);background:var(--cream);font-size:14px;font-weight:700}
.ar-quiet{margin:8px 0 0;font-size:14px;color:var(--ink3)}   /* missing data or a quiet day: one gray line, never a hole */
.ar-sec{margin-top:30px}
.ar-sec .np-secbar{margin-top:0}   /* Round T2: the section's green bar (np.css); the section keeps its own top margin */
.ar-secsub{margin:-4px 0 10px}   /* the subtitle under the bar: nothing smaller sits in it */
.ar-src{margin:6px 0 0}
.ar-credit{flex-basis:100%;margin:4px 0 0}

/* video players: the home page's 16:9 cam frame, native controls */
.ar-video{margin:0}
.ar-frame video{object-fit:contain;cursor:auto}
.ar-strip{position:relative;height:24px;margin-top:6px;background:var(--t70);border:1px solid var(--rule)}
.ar-strip span{position:absolute;top:0;bottom:0}
.ar-strip .day{background:var(--t70)}
.ar-strip .night{background:var(--navy);overflow:hidden}
.ar-strip .night i{display:block;padding:0 6px;font-style:normal;font-size:12px;font-weight:700;line-height:22px;color:#fff;white-space:nowrap}
.ar-strip .tick{width:2px;margin-left:-1px;background:var(--ink)}
.ar-strip .tick b{position:absolute;top:26px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;white-space:nowrap}
.ar-strip .pos{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1px;background:var(--red);border:1px solid #fff}
.ar-strip-ends{display:flex;justify-content:space-between;margin-top:22px;font-size:12px;color:var(--ink3)}

/* day summary tiles: values wrap instead of cutting off */
.ar-tiles .np-tile b,.ar-tiles .np-tile .sub{white-space:normal;overflow:visible}
/* Round T2 (M-fu2's map-key fix): the number in ink on paper, its band a small swatch beside it with an ink edge */
.ar-t{display:inline-flex;align-items:center;gap:4px;color:var(--ink);font-weight:800;white-space:nowrap}
.ar-t i{display:inline-block;flex:none;width:.75em;height:.75em;border:1px solid var(--ink)}
.ar-na{font-size:14px;font-weight:700;color:var(--ink3)}

/* forecast vs. actual: the Report Card table, five columns */
.ar-rc{position:relative}   /* holds the table's .sr-only caption inside the scroll box (it widened the page at 390 px) */
.ar-rc .rc-table{min-width:0}
.ar-rc .rc-table th,.ar-rc .rc-table td{white-space:normal}

/* 24-hour chart: two widths are written, one shows */
.ar-chart{border:1px solid var(--rule);background:#fff}
.ar-chart.narrow{display:none}
.ar-chart .ar-temp{fill:none;stroke-width:3.5;stroke-linecap:round}
.ar-chart .ar-temp-edge{fill:none;stroke:var(--ink);stroke-width:6;stroke-linejoin:round;stroke-linecap:round}
.ar-chart .ar-dew{fill:none;stroke:var(--blue);stroke-width:2;stroke-dasharray:6 4}
.ar-chart .ar-wind{fill:var(--slate)}
.ar-chart .ar-gust{fill:var(--red)}
.ar-chart .ar-pres{fill:none;stroke:var(--navy);stroke-width:2}
.ar-chart .ar-panel{font-size:12.5px;font-weight:800;fill:var(--ink)}
.ar-chart .ar-panel.na{font-weight:600;fill:var(--ink3)}
.ar-chart .ar-xl{text-anchor:middle}
.ar-key .k::before{content:"";display:inline-block;width:18px;height:4px;vertical-align:middle}
.ar-key .temp::before{height:6px;background:linear-gradient(90deg,var(--t40),var(--t60),var(--t80));outline:1px solid var(--ink)}
.ar-key .dew::before{background:repeating-linear-gradient(90deg,var(--blue) 0 6px,transparent 6px 9px)}
.ar-key .wind::before{height:12px;width:8px;background:var(--slate)}
.ar-key .gust::before{width:8px;height:8px;border-radius:50%;background:var(--red)}
.ar-key .pres::before{background:var(--navy)}

/* sky and sun */
.ar-sky{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ar-cell{border:1px solid var(--rule);background:#fff;padding:10px 16px}
.ar-cell.np-sun{border-bottom:1px solid var(--rule)}
.ar-moonname{margin:0;font-size:17px;font-weight:700}
.ar-cell .np-small{margin:0}
.ar-aurora{margin:10px 0 0;font-size:15px}

/* alerts, storm reports, readings */
.ar-alerts,.ar-readings,.ar-past,.ar-storms{list-style:none;margin:0;padding:0}
.ar-al{margin-top:6px;padding:8px 12px;border:1px solid var(--rule);border-left:6px solid var(--c);background:#fff}
.ar-al.warn{--c:var(--red)}
.ar-al.watch{--c:var(--t80)}
.ar-al.adv{--c:var(--slate)}
.ar-al.spc{--c:var(--navy)}
.ar-al.lsr{--c:var(--ink)}
.ar-al a{font-size:13px;font-weight:700}
.ar-readings li{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--rule)}
.ar-readings li > span:last-child{flex-basis:100%}
.ar-readings .ar-quiet{margin:0}
.ar-past li{padding:4px 0}
.ar-past a{font-weight:800;margin-right:8px}

/* previous / month / next */
.ar-pn{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:baseline;margin-top:34px;padding-top:10px;border-top:4px solid var(--ink);font-weight:800}
.ar-pn .next{text-align:right}
.ar-mnav{margin-top:16px}

/* month calendar */
.ar-cal{margin-top:12px;border:1px solid var(--rule);background:#fff}
.ar-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.ar-wd span{padding:6px 4px;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;text-align:center;background:var(--slate-bg);border-bottom:1px solid var(--rule)}
.ar-wd abbr{text-decoration:none}
.ar-day{position:relative;min-height:92px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);color:var(--ink);min-width:0}
/* Round T2: the cell (role=cell) holds the day's link, which fills it */
.ar-dl,.ar-day.none,.ar-day.blank{display:flex;flex-direction:column;gap:4px;padding:6px}
.ar-dl{box-sizing:border-box;height:100%;color:var(--ink);text-decoration:none}
.ar-row .ar-day:nth-child(7n){border-right:0}
.ar-day:has(>.ar-dl:hover){background:var(--cream)}
.ar-day.none .n{color:var(--ink3);font-weight:600}
.ar-day.blank{background:#f6f4ee}
.ar-day.today{box-shadow:inset 0 0 0 3px var(--blue)}
.ar-day .n{font-size:15px;font-weight:900}
.ar-day .hl{display:flex;flex-wrap:wrap;gap:2px;align-items:center;font-size:13px}
.ar-day .hl .sep{color:var(--ink3)}
.ar-day .ar-t{gap:3px}
.ar-day .dots{position:absolute;top:8px;right:6px;display:flex;gap:3px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:-1px}
.dot.rain{background:var(--blue)}
.dot.warn{background:var(--red)}
.ar-day .th{display:none;position:absolute;z-index:2;top:100%;left:50%;width:192px;height:auto;transform:translateX(-50%);border:2px solid var(--ink);background:#20242b}
@media (hover:hover){ .ar-dl:hover .th,.ar-dl:focus-visible .th{display:block} }
.ar-calkey{margin-top:8px}
.ar-calkey .dot{margin:0 2px 0 8px}
.ar-calkey .dot:first-child{margin-left:0}

/* storm days */
.ar-storm{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.ar-storm .pic img{display:block;width:100%;height:auto;border:1px solid var(--rule);background:#20242b}
.ar-storm p{margin:4px 0 0}
.ar-storm .links{font-weight:700;font-size:14px}

@media (max-width:620px){
  .ar-chart.wide{display:none}
  .ar-chart.narrow{display:block}
  .ar-sky{grid-template-columns:minmax(0,1fr)}
  .ar-storm{grid-template-columns:minmax(0,1fr)}
  .ar-pn{grid-template-columns:1fr 1fr}
  .ar-pn .mon{grid-row:2;grid-column:1 / -1;text-align:center}
  .ar-day{min-height:64px}
  .ar-dl,.ar-day.none,.ar-day.blank{padding:4px 3px}
  .ar-day .n{font-size:13px}
  .ar-day .hl{flex-direction:column;align-items:flex-start;font-size:12px}
  .ar-day .hl .sep{display:none}
  .ar-day .ar-t{gap:2px}
  .ar-day .dots{top:5px;right:3px}
  .dot{width:8px;height:8px}
  .ar-wd span{font-size:12px;padding:5px 1px}
  .ar-sum{font-size:17px}
}
.ar-tiles .np-tile b.ar-t{display:inline-flex}   /* np.css .np-tile b is a block; the number and its swatch size to the number */

/* rain gauges: KFBL and the CoCoRaHS observer side by side (two columns), snow tiles only when there is snow */
.ar-gauges .np-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.ar-gauges .np-tile:nth-child(3n){border-right:1px solid var(--rule)}
.ar-gauges .np-tile:nth-child(2n){border-right:0}
.ar-gauges .np-tile span,.ar-gauges .np-tile .sub{white-space:normal}
.ar-disagree{margin:8px 0 0;font-size:15px;font-weight:800}

/* storm capture, inside Alerts and Storms */
.ar-storm-cap{margin-top:16px;padding-top:10px;border-top:1px solid var(--rule)}
.ar-storm-cap .rc-wrap{margin-top:10px}