/* ==========================================================================
   /wind — the linkable wind guide (wind program §7.2, display report §3.1)

   Loads *after* main.css and tide.css and deliberately reuses the guide-page
   language wholesale: `.tg-top`, `.tg-card`, `.tg-hero`, `.tg-scroll`,
   `.tg-plot`, `.tg-scrub*`, `.tg-cols`, `.tg-credit` are the tide guide's and
   are not restyled here. Only what is new to wind gets rules: the page nav,
   the layer chips, the observation bracket, the model small multiples, the
   seven-day strip and the skill / discussion / links blocks.

   The one thing this file has to undo, exactly as tide.css does, is
   `body { overflow: hidden }` from main.css: the app shell is a fixed
   viewport, this is a document that scrolls.
   ========================================================================== */

body.wind-page {
  overflow: auto;
  overflow-x: hidden;           /* only the chart scrolls sideways, never the page */
  min-height: 100%;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

/* ---------- page nav (TIDE · WIND, on both guides) ---------- */
.wg-nav { display: flex; align-items: center; gap: 2px; }
.wg-navlink {
  display: inline-block; padding: 6px 10px; border-radius: 7px;
  text-decoration: none; color: var(--dim);
  border: 1px solid var(--line); background: rgba(10,18,32,0.6);
  font-family: var(--disp); font-size: 10.5px; letter-spacing: 2px;
}
.wg-navlink + .wg-navlink { margin-left: -1px; }
.wg-navlink:hover { color: var(--text); border-color: var(--cyan); }
.wg-navlink.is-here { color: #04070d; background: var(--cyan); border-color: var(--cyan); font-weight: 700; }

/* ---------- header sub-line ---------- */
.wg-outage {
  margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  font-family: var(--disp); font-size: 9px; letter-spacing: 2px;
  color: var(--magenta); border: 1px solid rgba(255,45,149,0.5);
}

/* ---------- progressive disclosure (simplify spec §3) ----------
   ONE attribute switches the whole page. `[data-expert]` blocks — the layer
   chips, the six EXPERT sections and the credit paragraph — do not exist for a
   SIMPLE reader, in the layout or in the accessibility tree. */
body.wind-page[data-view="simple"] [data-expert] { display: none !important; }

/* ---------- the verdict card (spec §5.1, §6.1) ----------
   The whole of the Simple page's answer: a headline, one number, one sentence
   and what changes next. One hero number per view (dataviz `marks-and-anatomy`),
   so nothing else on this card is set above 14 px. */
.tg-card.wg-vcard { border-top: 2px solid var(--cyan); }
.wg-vtop {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.wg-vhead {
  margin: 0; min-width: 0;
  font-family: var(--disp); font-weight: 700; font-size: 22px; letter-spacing: 2.4px;
  color: var(--text); text-transform: uppercase;
}
.wg-vline {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--disp); font-size: 18px; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wg-vtag {
  align-self: center; padding: 1px 6px; border-radius: 4px;
  font-size: 9px; letter-spacing: 2px; color: var(--dim); border: 1px solid var(--line);
}
.wg-vnum { font-size: 18px; }
.wg-vdir, .wg-vband { font-size: 12px; color: var(--dim); letter-spacing: 1.2px; }
.wg-vsent { margin: 7px 0 0; font-size: 14px; line-height: 1.55; color: var(--text); max-width: 74ch; }
.wg-vcz { color: var(--magenta); }
.wg-vnext {
  margin: 7px 0 0; font-size: 11.5px; letter-spacing: 1.1px; color: var(--dim);
  font-family: var(--disp);
}

/* ---------- observed (EXPERT) ---------- */
.wg-flag { font-family: var(--disp); font-size: 10px; letter-spacing: 2px; }
.wg-flag.f-agree { color: var(--green); }
.wg-flag.f-mixed { color: var(--amber); }
.wg-flag.f-disagree { color: var(--magenta); }

/* Arrows point where the wind blows TO — the whole product's rule
   (`panels.js` renderWind, `InstrumentRail.tsx`). The compass word is always
   printed beside the glyph, so the rotation is never the only signal. */
.wg-arrow {
  display: inline-block; font-size: 19px; line-height: 1; color: var(--cyan);
  transform: rotate(var(--rot, 0deg));
}

/* The observation bracket: three chips, never blended into one number. */
.wg-obslist { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.wg-obsrow {
  display: grid; grid-template-columns: minmax(0, 1fr) 74px 62px;
  align-items: baseline; gap: 6px;
  font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.wg-obsrow > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-obsname { font-family: var(--disp); font-size: 10px; letter-spacing: 1.4px; color: var(--text); }
.wg-obsval { text-align: right; color: var(--text); }
.wg-obsage { text-align: right; color: var(--dim); font-size: 10.5px; }
/* `sheltered` is greyed AND carries the word — colour is never alone. */
.wg-obsrow.is-sheltered { opacity: 0.5; }
.wg-obsrow.is-stale .wg-obsage { color: var(--amber); }
.wg-obstag {
  margin-left: 5px; padding: 0 4px; border-radius: 3px;
  font-family: var(--disp); font-size: 8px; letter-spacing: 1.2px;
  color: var(--dim); border: 1px solid var(--line);
}
.wg-obsnote { margin-top: 5px; font-size: 11px; color: var(--dim); }

/* ---------- EXPERT sections ----------
   Each is a `<details>` whose open/shut state is remembered under
   `tt.wind.sections`, so a reader who only ever wants the models does not
   scroll past the NWS discussion to reach them. */
.wg-sec > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.wg-sec > summary::-webkit-details-marker { display: none; }
.wg-sec > summary > span:first-child::before { content: '▸ '; color: var(--dim); }
.wg-sec[open] > summary > span:first-child::before { content: '▾ '; color: var(--cyan); }
.wg-sec > summary:hover > span:first-child { color: var(--cyan); }
.wg-sec[open] > summary { margin-bottom: 9px; }

/* ---------- glossary: the `?` beside a word, and the EXPERT block ---------- */
.wg-hint { display: inline-block; margin-left: 5px; vertical-align: baseline; }
.wg-hint > summary {
  cursor: help; list-style: none; display: inline-block;
  width: 14px; height: 14px; line-height: 13px; text-align: center;
  border-radius: 50%; border: 1px solid var(--line); color: var(--dim);
  font-family: var(--disp); font-size: 9px; letter-spacing: 0;
}
.wg-hint > summary::-webkit-details-marker { display: none; }
.wg-hint > summary:hover { color: var(--cyan); border-color: var(--cyan); }
.wg-hint > p {
  position: absolute; z-index: 40; margin: 4px 0 0; max-width: 300px;
  padding: 7px 9px; border-radius: 7px;
  background: #0a1220; border: 1px solid var(--cyan);
  font-family: var(--body, inherit); font-size: 11.5px; line-height: 1.5;
  letter-spacing: 0; color: var(--text); text-transform: none; white-space: normal;
}
.wg-hint > p b { color: var(--cyan); }
.wg-hint > p i { display: block; margin-top: 4px; font-style: normal; font-size: 10.5px; color: var(--dim); }

.wg-gloss { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.wg-gblock h3 {
  margin: 0 0 5px; font-family: var(--disp); font-size: 10px; letter-spacing: 2px; color: var(--cyan);
}
.wg-gblock dl { margin: 0; }
.wg-grow { margin-bottom: 6px; }
.wg-grow dt { font-family: var(--disp); font-size: 10.5px; letter-spacing: 1.4px; color: var(--text); }
.wg-grow dd { margin: 1px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--dim); }
.wg-grow dd i { display: block; font-style: normal; font-size: 10.5px; color: var(--line); }

/* ---------- the footer line under the Simple page ---------- */
.wg-footline { margin: 2px 0 4px; font-size: 11.5px; color: var(--dim); }
.wg-footlink {
  appearance: none; cursor: pointer; padding: 2px 8px; margin-left: 4px; border-radius: 5px;
  background: transparent; border: 1px solid var(--line); color: var(--cyan);
  font-family: var(--disp); font-size: 10px; letter-spacing: 1.8px;
}
.wg-footlink:hover { border-color: var(--cyan); background: rgba(33,230,255,0.08); }

/* ---------- chart card ----------
   `tide.css` positions its own `#tg-svg`; this page's slot needs the same
   rule, or the chart (and the placeholder that stands in for it) sits in
   normal flow and the plot box collapses to the content height. */
#wg-svg { position: absolute; inset: 0; }
#wg-svg > svg { display: block; }

.wg-legend { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 9px; }
.wg-lchip {
  appearance: none; cursor: pointer;
  padding: 3px 8px; border-radius: 5px;
  background: transparent; border: 1px solid var(--line); color: var(--dim);
  font-family: var(--disp); font-size: 9px; letter-spacing: 1.6px;
}
.wg-lchip:hover { color: var(--text); border-color: var(--cyan); }
.wg-lchip[aria-pressed="true"] { color: #04070d; background: var(--cyan); border-color: var(--cyan); font-weight: 700; }
.wg-lchip[aria-pressed="true"].l-tide { background: #78a0be; border-color: #78a0be; }
.wg-lchip:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- windows ----------
   Two nested grids on purpose: the glossary `?` is a `<details>`, which cannot
   live inside a `<button>`, so the label cell sits outside the jump target. */
.wg-wlist { display: flex; flex-direction: column; gap: 4px; }
.wg-wrow {
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr);
  align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 6px;
  background: rgba(6,12,22,0.55);
  border-left: 3px solid var(--green);
  font-variant-numeric: tabular-nums;
}
.wg-wjump {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr) 96px;
  align-items: baseline; gap: 8px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 0; background: none; border: 0; color: inherit; font: inherit;
  font-variant-numeric: tabular-nums;
}
.wg-wjump > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-wrow:hover { background: rgba(33,230,255,0.09); }
.wg-wjump:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }

.wg-wmore {
  appearance: none; cursor: pointer; margin-top: 3px; width: 100%; text-align: left;
  padding: 5px 8px; border-radius: 6px;
  background: transparent; border: 1px dashed var(--line); color: var(--dim);
  font-family: var(--disp); font-size: 10px; letter-spacing: 1.6px;
}
.wg-wmore:hover { color: var(--cyan); border-color: var(--cyan); }
.wg-wmore.is-note { cursor: default; border-style: solid; }
.wg-wrow.k-swell { border-left-color: #3fa7ff; }
.wg-wrow.k-glass { border-left-color: #d7e7f5; }
.wg-wrow.k-parawing { border-left-color: var(--cyan); }
.wg-wrow.k-northerly { border-left-color: var(--amber); }
.wg-wrow.is-past { opacity: 0.45; }
/* `overflow: visible` so the glossary popup is not clipped by its own cell. */
.wg-wkind {
  font-family: var(--disp); font-weight: 700; font-size: 11px; letter-spacing: 1.6px;
  color: var(--green); position: relative; overflow: visible; min-width: 0;
}
.wg-hint { position: relative; }
.wg-wrow.k-swell .wg-wkind { color: #3fa7ff; }
.wg-wrow.k-glass .wg-wkind { color: #d7e7f5; }
.wg-wrow.k-parawing .wg-wkind { color: var(--cyan); }
.wg-wrow.k-northerly .wg-wkind { color: var(--amber); }
.wg-wtime { font-family: var(--disp); font-weight: 700; font-size: 12.5px; color: var(--text); }
.wg-wreason { font-size: 12px; color: var(--text); }
.wg-wscore { text-align: right; font-size: 11px; color: var(--dim); }

/* ---------- model small multiples + table ---------- */
.wg-models { display: flex; flex-direction: column; gap: 8px; }
.wg-mrow {
  display: grid;
  grid-template-columns: minmax(120px, 168px) minmax(0, 1fr) 158px 22px;
  align-items: center; gap: 10px;
  padding: 5px 7px; border-radius: 7px;
  background: rgba(10,18,32,0.5); border: 1px solid rgba(64,224,255,0.09);
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.wg-mrow:hover { border-color: rgba(64,224,255,0.3); }
.wg-mrow.is-stale { opacity: 0.6; }
.wg-mname { font-family: var(--disp); font-weight: 700; font-size: 11px; letter-spacing: 1.5px; color: var(--text); min-width: 0; }
.wg-mname .wg-mbadge { display: inline-block; margin-top: 2px; }
.wg-mkind { display: block; font-family: var(--mono); font-weight: 400; font-size: 9.5px; letter-spacing: 0.5px; color: var(--dim); }
.wg-mchart { min-width: 0; overflow: hidden; }
.wg-mchart svg { display: block; max-width: 100%; }
.wg-mmeta { text-align: right; font-size: 10.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.wg-mexp { font-family: var(--disp); font-size: 11px; color: var(--dim); text-align: center; }
.wg-mrow[aria-expanded="true"] .wg-mexp { color: var(--cyan); }
.wg-mbadge {
  margin-left: 5px; padding: 0 4px; border-radius: 3px;
  font-family: var(--disp); font-size: 8px; letter-spacing: 1.2px;
  border: 1px solid var(--line); color: var(--dim);
}
.wg-mbadge.b-stale { color: var(--amber); border-color: rgba(255,179,71,0.5); }
.wg-mbadge.b-fallback { color: var(--magenta); border-color: rgba(255,45,149,0.45); }
.wg-mbadge.b-undated { color: var(--dim); border-style: dashed; }
.wg-mbadge.b-best { color: var(--green); border-color: rgba(43,255,168,0.5); }

/* The expanded detail row: resolution, cell, run, and the values at
   now / +6 / +12 / +24 that the plan's table asks for. */
.wg-mdetail {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 6px 12px;
  margin-top: 6px; padding-top: 7px; border-top: 1px dashed var(--line);
  font-size: 11.5px; color: var(--text); font-variant-numeric: tabular-nums;
}
.wg-mdetail i { font-style: normal; display: block; font-family: var(--disp); font-size: 8.5px; letter-spacing: 1.6px; color: var(--dim); }

/* ---------- 7-day strip ----------
   In SIMPLE the strip IS the card: a row of seven cells, each carrying its own
   `dayWord`, with an invisible button over each so a reader can ask one day
   for its row. At 390 the row scrolls inside the card, never the page. */
.wg-days { display: flex; flex-direction: column; gap: 4px; position: relative; }
.wg-daystrip { overflow-x: auto; overflow-y: hidden; }
.wg-dayinner { position: relative; }
.wg-daystrip svg { display: block; }
.wg-daytaps {
  display: grid; grid-template-columns: repeat(var(--cells, 7), 1fr);
  width: 100%; margin-top: -4px;
}
.wg-daytap {
  appearance: none; cursor: pointer; height: 10px; padding: 0;
  background: transparent; border: 0; border-top: 2px solid transparent;
}
.wg-daytap:hover { border-top-color: rgba(33,230,255,0.5); }
.wg-daytap.is-open { border-top-color: var(--cyan); }
.wg-daytap:focus-visible { outline: 1px solid var(--cyan); outline-offset: 1px; }
.wg-day {
  display: grid; grid-template-columns: 62px 66px minmax(0, 1fr) 46px;
  align-items: baseline; gap: 8px;
  padding: 5px 7px; border-radius: 6px;
  background: rgba(6,12,22,0.55); border-left: 3px solid var(--dim);
  font-variant-numeric: tabular-nums;
}
.wg-day > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-day.q-calm { border-left-color: rgba(107,130,153,0.7); }
.wg-day.q-marginal { border-left-color: var(--amber); }
.wg-day.q-good { border-left-color: var(--green); }
.wg-day.q-epic { border-left-color: var(--magenta); }
.wg-dayl { font-family: var(--disp); font-weight: 700; font-size: 11px; letter-spacing: 1.6px; color: var(--cyan); }
.wg-daypk { font-family: var(--disp); font-size: 12.5px; color: var(--text); }
.wg-daysum { font-size: 11.5px; color: var(--text); }
.wg-conf { text-align: right; letter-spacing: 1px; font-size: 11px; color: var(--dim); }
.wg-conf b { color: var(--cyan); font-weight: 400; }

/* ---------- skill ---------- */
.wg-skill { font-size: 12.5px; color: var(--text); line-height: 1.6; }
.wg-badge {
  display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 5px;
  font-family: var(--disp); font-size: 10px; letter-spacing: 1.8px;
  color: var(--cyan); border: 1px solid rgba(33,230,255,0.45);
}
.wg-badge.is-prior { color: var(--dim); border-color: var(--line); }

/* ---------- forecast discussion ---------- */
.wg-text { font-size: 12.5px; line-height: 1.62; color: var(--text); }
.wg-per { margin-bottom: 8px; }
.wg-perl { font-family: var(--disp); font-size: 10px; letter-spacing: 2px; color: var(--cyan); margin-right: 7px; }
.wg-afd { margin-top: 6px; border-top: 1px dashed var(--line); padding-top: 8px; }
.wg-afd summary {
  cursor: pointer; list-style: none;
  font-family: var(--disp); font-size: 10px; letter-spacing: 2px; color: var(--dim);
}
.wg-afd summary::-webkit-details-marker { display: none; }
.wg-afd summary::before { content: '▸ '; }
.wg-afd[open] summary::before { content: '▾ '; }
.wg-afd summary:hover { color: var(--text); }
.wg-afd p { margin: 7px 0 0; color: var(--text); }

/* ---------- link-outs ---------- */
.wg-links { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }
.wg-link {
  display: block; text-decoration: none; color: inherit;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(10,18,32,0.5); border: 1px solid rgba(64,224,255,0.09);
}
.wg-link:hover { border-color: var(--cyan); background: rgba(33,230,255,0.07); }
.wg-linkl { font-family: var(--disp); font-size: 11px; letter-spacing: 1.4px; color: var(--text); }
.wg-linkc { display: block; margin-top: 3px; font-size: 10.5px; color: var(--dim); line-height: 1.45; }

/* ---------- narrow: 390 px is the design floor ---------- */
@media (max-width: 900px) {
  .wg-links { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* Four control groups do not fit beside the wordmark at 390: they get their
     own line under the place name rather than being clipped off the right
     edge, where `body { overflow-x: hidden }` would hide the EXPERT switch
     with no scrollbar to say so. */
  .wind-page .tg-prefs {
    order: 4; flex: 1 1 100%; margin-left: 0;
    flex-wrap: wrap; row-gap: 6px; justify-content: flex-start;
  }
  .wg-vhead { font-size: 18px; letter-spacing: 1.8px; }
  .wg-vtop { gap: 6px; }
  .wg-vline { font-size: 16px; flex-wrap: wrap; white-space: normal; }
  .wg-obsrow { grid-template-columns: minmax(0, 1fr) 66px 52px; font-size: 11px; }
  /* One column (spec §5.2): a window's time is the second thing a reader
     needs and must never be the thing that gets an ellipsis. */
  .wg-wrow { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .wg-wjump { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .wg-wjump .wg-wreason { white-space: normal; }
  /* `% likely` is the first thing to go at 390: the row still says what and
     when, and the chart behind it says how confident (wind.css §5.2). */
  .wg-wjump .wg-wscore { display: none; }
  .wg-gloss { grid-template-columns: 1fr; }
  .wg-hint > p { max-width: min(300px, calc(100vw - 60px)); }
  /* Model rows stack: the small multiple gets the full width under its name. */
  .wg-mrow { grid-template-columns: minmax(0, 1fr) 22px; row-gap: 4px; }
  .wg-mrow .wg-mchart { grid-column: 1 / -1; }
  .wg-mrow .wg-mmeta { grid-column: 1 / -1; text-align: left; }
  .wg-day { grid-template-columns: 56px 60px minmax(0, 1fr); row-gap: 2px; }
  .wg-day .wg-conf { grid-column: 1 / -1; text-align: left; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  /* The readout jumps rather than eases; nothing on this page animates by
     itself, and the scrub rule must not glide under a finger. */
  .wind-page *, .wind-page *::before, .wind-page *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- print / e-ink: the MONO theme, on paper ---------- */
@media print {
  body.wind-page { background: #fff; color: #000; }
  .tg-top, .wg-legend, .wg-nav, .tg-picker, .tg-prefs, .tg-scrollnote,
  .wg-footline, .wg-hint, .wg-daytaps { display: none !important; }
  .tg-card, .tg-hcard { background: none; border: 1px solid #999; backdrop-filter: none; }
  .tg-scroll { overflow: visible; background: none; }
  .wg-link, .wg-mrow, .wg-day, .wg-wrow { background: none; border-color: #999; }
  /* Paper has no SIMPLE/EXPERT switch: print everything that was rendered. */
  .wg-sec > summary { list-style: none; }
}