:root{
  /* Light skin. Every colour on the site is one of these tokens -- the rules below
     point at them, so a palette change is an edit here and nowhere else. */
  --page:#F4F6F8; --surface:#FFFFFF;
  --ink:#151A21; --muted:#5B6675;
  --border:#E4E8ED; --hairline:#EDF0F3;
  --tab-on-bg:#151A21; --tab-on-ink:#FFFFFF; --tab-track:#EAEEF2;
  --flag-bg:#FDF0DC; --flag-ink:#8A5406; --flag-solid:#EF9F27;
  --ok-bg:#E8F2EA; --ok-ink:#2F6B41;
  --link:#1D6FB8;
  /* The old dark names are kept as aliases onto the tokens above, so a rule that was
     never re-pointed by hand still resolves to the light palette rather than a navy. */
  --midnight:var(--page); --col:var(--hairline); --col-line:var(--border);
  --snow:var(--ink); --ridge:var(--muted); --ridge-dim:var(--muted);
  --norwest:var(--flag-ink); --green:var(--ok-ink); --red:var(--flag-ink);
  --disp:"Outfit",system-ui,sans-serif;
  --body:"Manrope",system-ui,sans-serif;
  color-scheme:light;
}
/* Dark skin. Nothing here is a new colour on a rule -- it is the SAME token set
   redefined, so every rule in this stylesheet follows without being touched, and so
   do the old dark-name aliases above (--midnight, --snow, --ridge and friends),
   because each of those is a var() onto a token rather than a literal. The attribute
   is written onto <html> by the theme script in <head> before first paint, so a
   reader never sees the wrong skin flash. */
html[data-theme="dark"]{
  --page:#0F1216; --surface:#171B21;
  --ink:#E7EAEE; --muted:#9AA3AF;
  --border:#262B33; --hairline:#1F242B;
  --tab-on-bg:#E7EAEE; --tab-on-ink:#0F1216; --tab-track:#1B2027;
  --flag-bg:#3A2A0F; --flag-ink:#F3C46B; --flag-solid:#EF9F27;
  --ok-bg:#14301E; --ok-ink:#7CCB94;
  --link:#5FA8E8;
  color-scheme:dark;
}
/* Two things in the picker are NOT tokens and so cannot follow the redefinition: the
   native select's own widget chrome (pinned to light in .mtnsel-sel, or its dropdown
   list opens white over a dark page) and its chevron, which is a literal #1D6FB8
   baked into a data: URL. Both are restated here in the dark palette. This is the one
   place a dark rule names a colour, and only because there was no token to redefine. */
html[data-theme="dark"] .mtnsel-sel{color-scheme:dark;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M1.2 1.4L6.5 6.6l5.3-5.2' fill='none' stroke='%235FA8E8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.hwx *{box-sizing:border-box;margin:0}
.hwx html{background:var(--page)}
.hwx body{font-family:var(--body);color:var(--ink);line-height:1.5;font-size:16px;
  background:var(--page);min-height:100vh}
.hwx b,.hwx strong{font-weight:600}
.hwx a{color:var(--link)}
/* A desktop reader was given a 720-920px column with the rest of a 1600px screen empty.
   The column grows to a comfortable 1160px; body copy does NOT -- every run of prose on
   the page carries its own reading measure (.tag 52ch, .headline 70ch, footer 72ch), so
   widening the frame widens the layout, not the line length. */
.hwx .wrap{max-width:1160px;margin:0 auto;padding:0 20px 80px}
/* ---------- header ---------- */
.hwx header{padding:34px 0 8px}
.hwx .brand{font-family:var(--disp);font-weight:600;font-size:clamp(30px,6vw,44px);
  letter-spacing:-.02em;line-height:1}
.hwx .brand .watch{color:var(--flag-ink)}
.hwx .tag{color:var(--muted);margin-top:8px;max-width:52ch}
.hwx .meta{font-family:var(--body);font-size:12px;color:var(--muted);margin-top:14px;
  display:flex;gap:18px;flex-wrap:wrap}
.hwx .meta .dot{width:7px;height:7px;border-radius:50%;background:var(--ok-ink);display:inline-block;margin-right:6px;vertical-align:1px}
.hwx .meta .dot.stale{background:var(--flag-solid)}
.hwx .tipwrap{display:inline-flex;cursor:help}
.hwx .tipbox{position:fixed;z-index:60;max-width:270px;background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:8px 11px;font-family:var(--body);font-size:12px;line-height:1.45;
  color:var(--ink);pointer-events:none;box-shadow:0 6px 20px rgba(21,26,33,.16)}
.hwx [data-tip]{cursor:help}
.hwx .helpbtn{font-family:var(--disp);font-size:12px;letter-spacing:.04em;padding:6px 12px;
  border:1px solid var(--border);border-radius:999px;background:none;color:var(--link);cursor:pointer}
.hwx .helpbtn:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.hwx .ov[hidden]{display:none}
.hwx .ov{position:fixed;inset:0;background:rgba(21,26,33,.45);display:grid;place-items:center;padding:20px;z-index:50}
.hwx .sheet{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  max-width:480px;width:100%;max-height:85vh;overflow:auto;padding:22px;position:relative}
.hwx .sheet h3{font-family:var(--disp);font-weight:600;font-size:20px;margin-bottom:4px}
.hwx .sheet h4{font-family:var(--disp);font-size:11px;letter-spacing:.1em;color:var(--muted);
  text-transform:uppercase;margin:18px 0 4px}
.hwx .lrow{display:flex;gap:12px;align-items:center;margin-top:10px;color:var(--muted);font-size:14px}
.hwx .lrow .dicon{width:28px;height:28px;flex:0 0 auto}
.hwx .lrow b{color:var(--ink);font-weight:600}
.hwx .lnote{color:var(--muted);font-size:14px;margin-top:8px}
.hwx .lnote b{color:var(--ink);font-weight:600}
.hwx .ovx{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--muted);
  font-size:22px;cursor:pointer;line-height:1;padding:4px}
.hwx .ovx:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.hwx .fb-form textarea{width:100%;min-height:110px;background:var(--surface);border:1px solid var(--border);
  border-radius:8px;color:var(--ink);font-family:var(--body);font-size:14px;padding:10px;resize:vertical}
.hwx .fb-form input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:8px;
  color:var(--ink);font-family:var(--body);font-size:14px;padding:9px 10px;margin-top:10px}
.hwx .fb-form button.send{margin-top:12px;font-family:var(--disp);font-size:13px;padding:9px 18px;
  border-radius:8px;border:1px solid var(--link);background:rgba(29,111,184,.08);color:var(--link);cursor:pointer}
.hwx .fb-note{font-family:var(--body);font-size:11px;color:var(--muted);margin-top:8px}
.hwx .fb-done{color:var(--ok-ink);font-family:var(--body);font-size:14px;padding:10px 0}
.hwx .mw-attr{font-family:var(--body);font-size:11px;color:var(--muted);margin-bottom:12px}
.hwx .mw-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--hairline);font-size:14px}
.hwx .mw-row .k{color:var(--muted)}
.hwx .mw-row .v{color:var(--ink);text-align:right}
/* How the mountain ran today and yesterday (job 711). Two .mw-rows -- the SAME
   label/value row the operator's-report sheet is built from, not a second row
   component with its own spacing and hairline -- sitting at the top of the card body
   where the question a reader actually arrives with gets answered. */
.hwx .dayrows{margin-top:14px;border-top:1px solid var(--hairline)}
.hwx .daysub{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.hwx .mw-sec{font-family:var(--disp);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-top:16px;padding-bottom:4px}
.hwx .mw-quote{margin-top:12px;padding:11px 13px;background:var(--hairline);border-left:3px solid var(--flag-solid);
  border-radius:0 8px 8px 0;font-size:14px;color:var(--ink);font-style:italic}
.hwx .mw-link{margin-top:14px;font-family:var(--body);font-size:13px}
.hwx .mw-link a{color:var(--link)}
/* staleness banner */
.hwx #stale{display:none;background:var(--flag-bg);border:1px solid var(--flag-solid);
  color:var(--flag-ink);border-radius:10px;padding:10px 14px;margin:16px 0 0;
  font-family:var(--body);font-size:13px}
/* horizon divider */
.hwx .horizon{margin:26px 0 22px}
.hwx .horizon svg{display:block;width:100%;height:38px}
.hwx .horizon path{stroke:var(--border);stroke-width:1.5;fill:none}
.hwx .horizon .peak{fill:var(--page);stroke:var(--border)}
/* One-off reader notice, drawn above the picker by renderNotice(). The node only
   exists while a notice is live -- an expired list (or an empty one) leaves no
   element at all, so no border, padding or margin is left sitting above the picker. */
.hwx .notice{background:var(--tab-track);border:1px solid var(--border);color:var(--muted);
  border-radius:10px;padding:11px 14px;margin:14px 0 2px;
  font-family:var(--body);font-size:13px;line-height:1.55}
.hwx .notice b{color:var(--ink)}
.hwx .notice-sub{margin-top:7px;font-size:12px;color:var(--muted)}
/* The mountain picker is one control with two shapes, and never a scroller. A phone gets
   a real <select>: nine long names in a horizontal strip is a fiddly thumb target, and the
   edge fade only hinted there was more. Wider than that the names fit as a wrapping row of
   tabs -- so at no width is an option off-screen sideways. Both shapes call the same
   selectField(), so the URL, the history entry and the view_field ping are identical.
   Only one shape is in the accessibility tree at a time (display:none removes the other),
   so a screen reader is never offered the same nine mountains twice. */
.hwx .tabs{border-bottom:1px solid var(--border);margin:0 0 18px}
.hwx .tabrow{display:none;flex-wrap:wrap;gap:2px}
.hwx .mtnsel{display:flex;align-items:center;gap:10px;padding:2px 0 12px}
.hwx .mtnsel-lab{font-family:var(--disp);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);flex:0 0 auto}
.hwx .mtnsel-sel{flex:1 1 auto;min-width:0;color-scheme:light;
  font-family:var(--body);font-size:14px;color:var(--ink);
  background-color:var(--surface);border:1px solid var(--border);border-radius:9px;
  padding:11px 34px 11px 12px;cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M1.2 1.4L6.5 6.6l5.3-5.2' fill='none' stroke='%231D6FB8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
.hwx .mtnsel-sel:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.hwx .tab{font-family:var(--disp);font-size:12.5px;letter-spacing:.02em;padding:9px 11px;white-space:nowrap;
  background:transparent;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--muted);cursor:pointer}
.hwx .tab.on{color:var(--tab-on-ink);background:var(--tab-on-bg);border-bottom-color:var(--tab-on-bg)}
.hwx .tab:focus-visible{outline:2px solid var(--link);outline-offset:2px}
/* ---------- cards ---------- */
.hwx .grid{display:grid;gap:16px}
.hwx .card{background:var(--surface);
  border:1px solid var(--border);border-radius:14px;padding:20px 20px 18px;
  opacity:0;transform:translateY(10px);animation:up .5s ease forwards}
.hwx .settled .card{animation:none;opacity:1;transform:none}
@keyframes up{to{opacity:1;transform:none}
}
.hwx .card h2{font-family:var(--disp);font-weight:600;font-size:22px;letter-spacing:-.01em}
.hwx .hero .card-head h2{font-size:clamp(26px,4.4vw,34px);letter-spacing:-.02em}
.hwx .card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.hwx .region{font-family:var(--disp);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.hwx .odds{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.hwx .dicon{width:40px;height:40px;flex:0 0 auto;stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hwx .warncard .dicon{stroke:var(--flag-solid)}
.hwx .conf{display:inline-flex;align-items:flex-end;gap:2px;height:12px;margin:0 6px 0 2px;vertical-align:-1px}
.hwx .conf i{width:4px;border-radius:1px;background:var(--border)}
.hwx .conf i:nth-child(1){height:5px}
.hwx .conf i:nth-child(2){height:8px}
.hwx .conf i:nth-child(3){height:12px}
.hwx .conf.c3 i{background:var(--ok-ink)}
.hwx .conf.c2 i:nth-child(-n+2){background:var(--muted)}
.hwx .conf.c1 i:nth-child(1){background:var(--flag-solid)}
/* The confidence score. The glyph is the existing three-bar .conf; what is new is that
   it sits in the card BODY with its reason written out under it, because a phone has no
   hover and a one-word verdict a reader cannot interrogate is worse than none. */
.hwx .confline{display:flex;align-items:center;gap:6px;margin-top:14px;
  font-family:var(--body);font-size:13px;color:var(--muted);flex-wrap:wrap}
.hwx .confline b{color:var(--ink);font-weight:600}
.hwx .confline.c-high b{color:var(--ok-ink)}
.hwx .confline.c-low b{color:var(--flag-ink)}
.hwx .confwhy{font-size:13.5px;color:var(--muted);margin-top:5px;max-width:70ch}
/* A per-field editorial note: something we know about this mountain that its numbers do
   not. Dimmer than the reason line, because it qualifies that line rather than competing
   with it. */
.hwx .fieldnote{font-size:13px;color:var(--muted);margin-top:6px;max-width:70ch}
.hwx .odds .big{font-family:var(--disp);font-weight:600;font-size:clamp(30px,5vw,40px);line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hwx .odds .big.ok{color:var(--ok-ink)}
.hwx .odds .big.warn{color:var(--flag-ink)}
.hwx .odds .pct{font-family:var(--disp);font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.hwx .odds .of{font-size:14px;color:var(--muted)}
/* the band — signature element */
.hwx .band{margin-top:12px}
.hwx .band .rail{position:relative;height:10px;border-radius:5px;background:var(--hairline)}
.hwx .band .fill{position:absolute;top:0;bottom:0;border-radius:5px;background:rgba(91,102,117,.28)}
.hwx .band .pt{position:absolute;top:-3px;width:2px;height:16px;background:var(--ink);border-radius:1px}
.hwx .band .base{position:absolute;top:-2px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--muted);transform:translateX(-5px)}
.hwx .verdict{font-family:var(--body);font-size:13px;margin-top:10px}
.hwx .verdict b{font-weight:600}
.hwx .verdict.better b{color:var(--ok-ink)}
.hwx .verdict.normal b{color:var(--muted)}
.hwx .verdict.worse b{color:var(--flag-ink)}
.hwx .expired{background:var(--flag-bg);border:1px solid var(--flag-solid);color:var(--flag-ink);
  border-radius:10px;padding:10px 13px;margin-top:14px;font-family:var(--body);font-size:13px}
.hwx .stalecard .odds,.hwx .stalecard .band,.hwx .stalecard .verdict{opacity:.45}
.hwx .refreshnote{font-family:var(--body);font-size:12px;color:var(--muted);margin-top:10px}
.hwx .live .stale-age{color:var(--flag-ink)}
.hwx .live .pending{color:var(--ok-ink)}
.hwx .live .muted{color:var(--muted)}
.hwx .early{margin-top:14px;padding:11px 13px;background:var(--tab-track);border:1px solid var(--border);
  border-radius:10px;font-size:14px;color:var(--muted)}
.hwx .early b{color:var(--ink)}
.hwx .early .tag{font-family:var(--disp);font-size:10px;letter-spacing:.08em;color:var(--flag-ink);text-transform:uppercase}
.hwx .drift{margin-top:10px;font-family:var(--body);font-size:13px}
.hwx .drift.up{color:var(--flag-ink)}
.hwx .drift.down{color:var(--ok-ink)}
/* hero = freshest number; the locked call sits under it, permanently, as the scored one */
.hwx .hero-tag{font-family:var(--disp);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--flag-ink);margin-bottom:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hwx .hero-tag .tier{margin:0}
.hwx .hero-q{font-family:var(--disp);font-weight:600;font-size:17px;margin:6px 0 2px;color:var(--ink)}
.hwx .locked{margin-top:12px;padding:9px 0 9px 12px;border-left:2px solid var(--border);font-size:14px;color:var(--muted)}
.hwx .locked b{color:var(--ink);font-family:var(--body)}
.hwx .locked .lk-t{font-family:var(--body);font-size:11px;color:var(--muted);display:block;margin-top:2px}
.hwx .drift-words{margin-top:6px;font-size:14px}
.hwx .drift-words.up{color:var(--flag-ink)}
.hwx .drift-words.down{color:var(--ok-ink)}
.hwx .statsub{font-family:var(--body);font-size:13px;color:var(--muted);margin-top:8px}
.hwx .statsub b{color:var(--ink)}
.hwx .liftwhy{font-family:var(--body);font-size:12px;color:var(--flag-ink);margin-top:6px}
.hwx .scorecard{margin-top:14px;padding:9px 0 9px 12px;border-left:2px solid var(--border);font-size:14px;color:var(--muted)}
.hwx .scorecard b{color:var(--ink);font-family:var(--body)}
.hwx .scorecard .lk-t{font-family:var(--body);font-size:11px;color:var(--muted);display:block;margin-top:2px}
.hwx .outlook{margin-top:12px;font-size:15px;color:var(--ink)}
.hwx .outlook.watch{color:var(--flag-ink)}
.hwx .outlook.risk{color:var(--flag-ink)}
.hwx .eh-tag{font-family:var(--disp);font-size:10px;letter-spacing:.1em;color:var(--flag-ink);text-transform:uppercase;margin-bottom:6px}
.hwx .eh-note{font-family:var(--body);font-size:12px;color:var(--muted);margin-top:8px}
/* Tomorrow's early read is one object, so it is drawn as one box. Left loose, its
   label floated free at the top of the card and the number it labelled sat several
   elements below it -- a heading with nothing attached. Same boxed treatment as
   .early, at hero weight, and nothing it says is repeated outside the border. */
.hwx .earlycard{margin-top:16px;padding:14px 16px;background:var(--tab-track);
  border:1px solid var(--border);border-radius:12px}
.hwx .earlycard .hero-tag{margin-bottom:0}
.hwx .earlycard .hero-q{margin-top:4px}
.hwx .earlycard .odds{margin-top:8px}
.hwx .earlycard .cause{margin-top:8px}
.hwx .earlycard .eh-tier{margin-top:10px}
.hwx .earlycard .eh-note{margin-top:8px}
.hwx .norec{margin-top:10px;padding:8px 10px;border:1px dashed var(--border);border-radius:7px;
  font-size:13px;line-height:1.45;color:var(--muted)}
.hwx .norec b{color:var(--ink)}
.hwx .epilogue{margin-top:12px;font-family:var(--body);font-size:13px;color:var(--muted)}
.hwx .epilogue b{color:var(--ink)}
.hwx .epilogue.verdict{font-size:15px;color:var(--ink)}
/* The operator's own reason, quoted and bordered so a reader can see at a glance that
   the sentence is theirs and not ours. */
.hwx .ownwords{margin-top:8px;padding:8px 12px;border-left:3px solid var(--flag-solid);
  border-radius:0 7px 7px 0;background:var(--hairline);font-family:var(--body);font-size:13px;
  line-height:1.5;color:var(--muted)}
.hwx .ownwords .qt{color:var(--ink)}
.hwx .official{font-family:var(--body);font-size:12px;margin-top:12px}
.hwx .official a{color:var(--link);text-decoration:none;border-bottom:1px solid rgba(29,111,184,.4)}
.hwx .official .check{color:var(--muted)}
.hwx .intraday{background:var(--flag-bg);border:1px solid var(--flag-solid);color:var(--flag-ink);
  border-radius:10px;padding:9px 12px;margin-top:12px;font-family:var(--body);font-size:13px}
.hwx .intraday.good{background:var(--ok-bg);border-color:var(--ok-ink);color:var(--ok-ink)}
.hwx .viewlink{font-family:var(--disp);font-size:12px;letter-spacing:.04em;padding:6px 12px;
  border:1px solid var(--border);border-radius:999px;background:none;color:var(--muted);cursor:pointer}
.hwx .viewlink.on{color:var(--tab-on-ink);background:var(--tab-on-bg);border-color:var(--tab-on-bg)}
.hwx .seg{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--tab-track)}
.hwx .seg button{font-family:var(--disp);font-size:12.5px;letter-spacing:.04em;padding:9px 16px;
  background:transparent;border:none;color:var(--muted);cursor:pointer}
.hwx .seg button.on{background:var(--tab-on-bg);color:var(--tab-on-ink);font-weight:600}
.hwx .hdr-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
.hwx .textlink{font-family:var(--body);font-size:12px;background:none;border:none;cursor:pointer;
  color:var(--link);text-decoration:underline dotted;padding:6px 2px}
.hwx .textlink:hover{color:var(--ink)}
/* Theme toggle. Icon-only, --muted like every other small control in the header, and
   which of its two glyphs is showing is decided by the data-theme attribute rather
   than by script -- so the button is already in the right state at first paint, on the
   same attribute that decided the skin. Only the aria-label needs JS. */
.hwx .themebtn{background:none;border:none;cursor:pointer;padding:6px 2px;line-height:0;
  color:var(--muted);display:inline-flex;align-items:center;vertical-align:middle}
.hwx .themebtn:hover{color:var(--ink)}
.hwx .themebtn:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.hwx .themebtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.hwx .themebtn .i-sun{display:none}
html[data-theme="dark"] .themebtn .i-sun{display:inline}
html[data-theme="dark"] .themebtn .i-moon{display:none}
/* The record is a permanent section under the cards, not a view behind a tab, so it
   needs a heading of its own. Same treatment as the page's other headings (.card h2),
   one step up in size from the mountain names inside it (.rec-field h2). */
.hwx .rec-title{font-family:var(--disp);font-weight:600;font-size:22px;letter-spacing:-.01em;margin-top:38px}
.hwx .rec-field{margin-top:22px}
.hwx .rec-field h2{font-family:var(--disp);font-weight:600;font-size:19px}
.hwx .rec-sub{font-family:var(--disp);font-size:11px;color:var(--muted);margin-top:2px}
/* The season record is a grid and an explainer of that grid, so on a wide screen they
   sit next to each other instead of stacking with the right half of the viewport empty.
   In "all mountains" mode the calendars themselves flow into as many columns as fit. */
.hwx #record{display:grid;gap:24px}
.hwx .rec-cals{display:grid;gap:26px}
.hwx .cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:10px;max-width:330px}
.hwx .cal .wd{font-family:var(--disp);font-size:9px;letter-spacing:.05em;color:var(--muted);text-align:center;padding-bottom:2px}
.hwx .cal .mo{grid-column:1/-1;font-family:var(--disp);font-size:10px;letter-spacing:.08em;color:var(--muted);margin-top:6px}
.hwx .cal .c{aspect-ratio:1;border-radius:7px;background:var(--hairline);border:1px solid var(--border);
  position:relative;display:flex;align-items:center;justify-content:center;min-width:0}
.hwx .cal .c.blank{background:none;border:none}
.hwx .cal .c.open{background:var(--ok-bg);border-color:var(--ok-ink)}
.hwx .cal .c.closed{background:var(--flag-bg);border-color:var(--flag-solid)}
.hwx .cal .c.prog{border-style:dashed;border-color:var(--muted)}
.hwx .cal .c.called{box-shadow:0 0 0 2px var(--page),0 0 0 2.5px var(--ink)}
.hwx .cal .c.flag{box-shadow:0 0 0 2px var(--page),0 0 0 2.5px var(--flag-solid)}
.hwx .cal .c .dn{position:absolute;top:2px;left:4px;font-family:var(--disp);font-size:8px;color:var(--muted);font-variant-numeric:tabular-nums}
.hwx .cal .c .pp{font-family:var(--disp);font-size:10px;color:var(--ink);font-variant-numeric:tabular-nums}
.hwx .rec-legend{font-family:var(--body);font-size:11px;color:var(--muted);margin-top:18px;line-height:1.9}
.hwx .rec-legend .sw{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:4px}
.hwx .cause-sub{font-size:13.5px;color:var(--muted);margin-top:4px}
.hwx .cause .more{display:inline-block;width:14px;height:14px;line-height:14px;text-align:center;border-radius:50%;
  border:1px solid var(--border);color:var(--muted);font-size:10px;vertical-align:1px;cursor:help}
.hwx .scale .mid{color:var(--muted)}
.hwx .scale{display:flex;justify-content:space-between}
.hwx .cause{font-family:var(--body);font-size:12px;color:var(--muted);margin-top:8px}
.hwx .cause b{color:var(--ink);font-weight:600}
.hwx .band .scale{display:flex;justify-content:space-between;font-family:var(--disp);
  font-size:10px;color:var(--muted);margin-top:5px;font-variant-numeric:tabular-nums}
.hwx .band .lab{font-family:var(--body);font-size:11px;color:var(--muted);margin-top:7px}
.hwx .tier{display:inline-block;font-family:var(--disp);font-size:10px;letter-spacing:.1em;
  padding:3px 8px;border-radius:5px;border:1px solid var(--border);color:var(--muted);margin-top:12px}
.hwx .tier.fitted{background:var(--ok-bg);border-color:var(--ok-ink);color:var(--ok-ink)}
.hwx .tier.flag{background:var(--flag-bg);border-color:var(--flag-solid);color:var(--flag-ink)}
.hwx .headline{color:var(--muted);font-size:14px;margin-top:12px;max-width:70ch}
.hwx .hero .headline{color:var(--ink);font-size:15px}
/* live strip */
/* The skeleton holds exactly the space a card takes, so the widget swapping in
   moves nothing. Paired with the js-on rule in the page <head>, which hides the
   baked block before first paint -- the reader never sees the static one flash. */
.hwx .loading{min-height:320px;border-radius:16px;border:1px solid var(--border);
background:var(--surface);
padding:22px 20px;color:var(--muted);font-family:var(--body);font-size:12px;
animation:hwpulse 1.4s ease-in-out infinite}
@keyframes hwpulse{0%,100%{opacity:.55}
.hwx 50%{opacity:.85}
}
.hwx .live{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;padding-top:14px;
  border-top:1px dashed var(--border)}
.hwx .live .item{font-family:var(--body);font-size:12px;color:var(--muted)}
.hwx .live .item b{color:var(--ink);font-weight:600}
.hwx .live .open b{color:var(--ok-ink)}
.hwx .live .closed b{color:var(--flag-ink)}
.hwx .live .age{color:var(--muted)}
.hwx .live .liftsuf{color:var(--flag-ink)}
.hwx .safety{font-size:12px;color:var(--flag-ink);margin-top:8px;font-family:var(--body)}
.hwx footer{margin-top:44px;color:var(--muted);font-size:13px;max-width:72ch}
.hwx footer p+p{margin-top:10px}
.hwx .err{color:var(--flag-ink);font-family:var(--body);padding:30px 0}
@media(min-width:760px){.hwx .mtnsel{display:none}
.hwx .tabrow{display:flex}}
@media(min-width:1024px){.hwx #record{grid-template-columns:minmax(0,1fr) minmax(290px,1fr);gap:40px;align-items:start}
/* The calendar takes the half it is given rather than staying phone-sized in it, and
     its numbers grow with it. The two rules below out-specify the widget's own mount-time
     size bump (.hwx .cal .c .dn), which is why they name the element as well as the class. */
  .hwx .rec-cals .cal{max-width:none}
.hwx .cal .c span.dn{font-size:11px}
.hwx .cal .c span.pp{font-size:13px}
/* The explainer keeps a reading measure of its own -- the frame widens, the prose does not. */
  .hwx .rec-side{max-width:64ch}
.hwx .rec-side .rec-legend{margin-top:0}}
@media(prefers-reduced-motion:reduce){.hwx .card{animation:none;opacity:1;transform:none}}
.hwx{color:var(--snow);font-family:var(--body);line-height:1.5;font-size:16px}.hwx .cal .c .dn{font-size:10px;color:var(--ridge)}.hwx .cal .wd{font-size:11px}.hwx .cal .c .pp{font-size:11px}.hwx [hidden]{display:none!important}