/* =====================================================================
   Mini cards for menu screens (#weather-home, #gps-home): titles, even
   card grid, badge/name row, big value, short line, button pairs.
   First built for the Weather screen (below); GPS reuses it.
   Weather screen (#weather-home) — opened from the menu.
   Approved prototype, 2 Oct 2026. Sheet, title, rows: hx-sheets.css.

     [‹]  Weather  T4-006 · updated 09:30     [✕]
     [ Patchy rain  29 °C ][ Rain     16 %     ]   rain before gusts
     [ Wind 2.8 m/s       ][ Low        ▮▮▯▯  ]
     [ Gusts   2.9 m/s    ][ Next hour Showers ]
     [ Limit 12    ▮▮▮▮   ][ Rain chance 22%   ]   next hour: one word
     [ ⚠ Team warnings · Prepare            › ]
     [ Rain maps ][ Report ]  [ Find WTG ][ All farms ]

   Tokens only: no hex, no px font sizes, no !important.
   ===================================================================== */

/* One even 8px gap between every block: cards, caption, Team warnings, button rows. */
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-body { display: flex; flex-direction: column; gap: var(--hx-space-2); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-body > * { flex-shrink: 0; margin: 0; }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-titles { flex: 1; min-width: 0; }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-titles h2 { margin: 0; font-size: var(--hx-text-display); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-sub { margin: var(--hx-space-1) 0 0; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); }

/* Weather card — one card instead of four (user reference, 3 Oct 2026). Turns Now → +1 hour → +3 hours with a vertical roll.
   Green strip (dot, label, time, dots, play/pause); a sky that follows the weather; hero (picture + sky word | rain chance);
   three cells; a banner. Same total height as the rain radar card. */
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt { position: relative; overflow: hidden; border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-tile { position: relative; min-height: var(--hx-tile-height); color: var(--hx-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-tile.still { cursor: default; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-tile:focus-visible { outline: 3px solid var(--hx-info); outline-offset: -3px; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-roll { position: relative; height: calc(var(--hx-tile-height) - 64px); overflow: hidden; }   /* the faces turn above the banner; the banner grows below them when its message needs a third line (6 Oct 2026) */
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-tile > .wt-banner { position: relative; }   /* one banner; it does not turn (user, 5 Oct 2026) */
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-face { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--hx-sky-cloud); visibility: hidden; will-change: transform, opacity; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-face.show { visibility: visible; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-face[data-sky="rain"] { background: var(--hx-sky-rain); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-face[data-sky="sun"] { background: var(--hx-sky-sun); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-face.wt-empty { position: absolute; justify-content: center; gap: var(--hx-space-1); padding: var(--hx-space-4); font-size: var(--hx-text-label); font-weight: var(--hx-weight-body); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-face.wt-empty strong { font-size: var(--hx-text-title); font-weight: var(--hx-weight-strong); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-hold { position: absolute; left: var(--hx-space-4); right: var(--hx-space-4); bottom: calc(64px + 4px);   /* the turn timer stays with the turning faces, above the fixed banner */
  z-index: 3; height: 3px; border-radius: 2px; background: var(--hx-ink); opacity: .45; transform: scaleX(0); transform-origin: left; pointer-events: none; }
/* Strip */
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-when { display: flex; flex: none; align-items: center; gap: var(--hx-space-2); height: 44px; padding: 0 var(--hx-space-4); background: var(--hx-good-solid); color: var(--hx-sky-ink); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt.has-open .wt-when { padding-right: 48px; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt.has-play .wt-when { padding-right: calc(var(--hx-space-4) + 9px + var(--hx-space-3)); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt.has-play.has-open .wt-when { padding-right: calc(44px + var(--hx-space-1) + 9px + var(--hx-space-3)); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-tag { display: inline-flex; align-items: baseline; gap: var(--hx-space-2); padding-top: var(--hx-chip-nudge); white-space: nowrap; }   /* label and time on one text line (user, 5 Oct 2026: the time sat 2 px high) */
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-tag-word { font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); text-transform: uppercase; letter-spacing: var(--hx-tracking-caps); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-tag time { font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); opacity: .9; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-live { position: relative; align-self: center; width: 9px; height: 9px; margin-top: calc(var(--hx-chip-nudge) * -1); border-radius: 50%; background: var(--hx-sky-live); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-dots { margin-left: auto; display: flex; gap: var(--hx-space-1); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--hx-sky-ink); opacity: .4; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-dots i.on { opacity: 1; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-play { position: absolute; top: 0; right: 0; z-index: 4; display: flex; align-items: center; justify-content: flex-end; width: 44px; height: 44px; min-width: 0; min-height: 0; padding: 0 var(--hx-space-4) 0 0; border: 0; background: none; color: var(--hx-sky-ink); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt.has-open .wt-play { right: 44px; padding-right: var(--hx-space-1); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-play svg { width: 9px; height: 9px; fill: currentColor; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-open { position: absolute; top: 0; right: 0; z-index: 4; display: grid; place-items: center; width: 44px; height: 44px; min-width: 0; min-height: 0; padding: 0; border: 0; background: none; color: var(--hx-sky-ink); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-open svg { width: 20px; height: 20px; }
:is(#weather-home, #weather-panel, #weather-overview-panel) :is(.wt-play, .wt-open):focus-visible { outline: 3px solid var(--hx-sky-ink); outline-offset: -6px; border-radius: var(--hx-radius-action); }
/* Body: hero, rule, cells, banner — equal room between them */
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; padding: var(--hx-space-3) var(--hx-space-4) var(--hx-space-3); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-lbl { display: inline-flex; align-items: center; gap: 6px; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-lbl svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-hero { display: grid; grid-template-columns: 42% minmax(0, 1fr); grid-template-rows: repeat(5, auto); gap: 4px var(--hx-space-3); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-hero > :not(.wt-art, .wt-word) { grid-column: 2; min-width: 0; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-art { position: relative; grid-column: 1; grid-row: 1 / 4; min-width: 0; }   /* rows: Rain chance · number · bar */
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-art-svg { position: absolute; top: calc(4.7px + (100% - 4.7px) * .125); left: 50%; width: auto; max-width: 100%; height: calc((100% - 4.7px) * .75); transform: translateX(-50%); filter: drop-shadow(0 4px 6px rgb(24 61 57 / .18)); }   /* 75 % of the band from the top of "Rain chance" to the bottom of the bar, centred in it (user, 3 Oct 2026) */
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-art-svg .s-cloud-hi { stop-color: var(--hx-art-cloud-hi); } :is(#weather-home, #weather-panel, #weather-overview-panel) .wt-art-svg .s-cloud-lo { stop-color: var(--hx-art-cloud-lo); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-art-svg .s-rain-hi { stop-color: var(--hx-art-rain-hi); } :is(#weather-home, #weather-panel, #weather-overview-panel) .wt-art-svg .s-rain-lo { stop-color: var(--hx-art-rain-lo); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-art-svg .s-sun-hi { stop-color: var(--hx-art-sun-hi); } :is(#weather-home, #weather-panel, #weather-overview-panel) .wt-art-svg .s-sun-lo { stop-color: var(--hx-art-sun-lo); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-art-svg .f-cloud-hi { fill: var(--hx-art-cloud-hi); } :is(#weather-home, #weather-panel, #weather-overview-panel) .wt-art-svg .f-drop { fill: var(--hx-art-drop); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-art-svg .k-ray { stroke: var(--hx-art-ray); stroke-width: 4; stroke-linecap: round; }
/* Night (user, 4 Oct 2026): clear at night shows a moon and stars on a cooler evening sky */
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-face[data-sky="sun"][data-night] { background: var(--hx-sky-night); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-art-svg .s-moon-hi { stop-color: var(--hx-art-moon-hi); } :is(#weather-home, #weather-panel, #weather-overview-panel) .wt-art-svg .s-moon-lo { stop-color: var(--hx-art-moon-lo); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-art-svg .f-star { fill: var(--hx-art-star); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-word { grid-column: 1; grid-row: 4 / 6; align-self: end; justify-self: center; text-align: center; color: var(--hx-ink); font-size: var(--hx-text-title); font-weight: var(--hx-weight-strong); line-height: 1.1; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-face[data-sky="rain"] .wt-word { color: var(--hx-sky-ink); text-shadow: var(--hx-sky-shadow); }   /* white only on the dark rain sky */
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-top { display: flex; align-items: center; justify-content: space-between; gap: var(--hx-space-2); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-top .wt-lbl { color: var(--hx-ink); font-weight: var(--hx-weight-action); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-pct { font-size: var(--hx-text-value); font-weight: var(--hx-weight-action); line-height: 1; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-pct small { font-size: var(--hx-text-title); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-bar { position: relative; align-self: end; height: 8px; margin: 2px 0 0; border-radius: 4px; background: var(--hx-sky-track); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-bar b { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--hx-info); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-bar b[data-level="warn"] { background: var(--hx-warn); }   /* 50–79 %: amber */
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-bar b[data-level="danger"] { background: var(--hx-danger); }   /* 80 %+: red */
:is(#weather-home, #weather-panel, #weather-overview-panel) :is(.wt-outlook, .wt-hum) { font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); line-height: 1.35; overflow-wrap: anywhere; }   /* wraps, never "…" (5 Oct 2026: "Rain possible from 00:00" was cut at 360 px / 120 %) */
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-hum b { font-weight: var(--hx-weight-strong); }
/* Dark rain sky: the hero text is white */
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-face[data-sky="rain"] .wt-hero > :not(.wt-art, .wt-word), :is(#weather-home, #weather-panel, #weather-overview-panel) .wt-face[data-sky="rain"] .wt-top .wt-lbl { color: var(--hx-sky-ink); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-rule { flex: none; height: 1px; background: var(--hx-sky-rule); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 var(--hx-space-2); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-cell:first-child { padding-left: 0; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-cell:last-child { padding-right: 0; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-cell + .wt-cell { border-left: 1px solid var(--hx-sky-rule); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-cell .wt-lbl { color: var(--hx-ink); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-v { font-size: var(--hx-text-value-m); font-weight: var(--hx-weight-action); line-height: 1.1; white-space: nowrap; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-v em { font-style: normal; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-line { color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); line-height: var(--hx-leading-body); overflow-wrap: anywhere; }   /* wraps instead of "…" ("From ENE" at 120% on 360 px, full check 5 Oct 2026) */
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-delta { min-height: 1.3em; color: var(--hx-danger); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-strong); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt :is(.wt-v, .wt-line)[data-level="warn"] { color: var(--hx-warn); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt :is(.wt-v, .wt-line)[data-level="danger"] { color: var(--hx-danger); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-face:not([data-sky="rain"]) .wt-pct[data-level="danger"] { color: var(--hx-danger); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-arrow { display: inline-grid; width: 13px; height: 13px; margin-right: 3px; vertical-align: -1px; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-arrow svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* Banner: same style as the radar card's status panel (user, 3 Oct 2026) — 36 px round mark with a 20 px icon, bold body text.
   Green tick for the ground-level note; amber warning when something gets worse; red when over a limit. */
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-banner { display: flex; flex: none; align-items: center; gap: var(--hx-space-3); min-height: 64px; padding: var(--hx-space-2) var(--hx-space-4); border-top: 1px solid var(--hx-hairline); background: var(--hx-good-tint); color: var(--hx-ink); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); white-space: nowrap; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-banner > span { padding-top: var(--hx-chip-nudge); min-width: 0; overflow-wrap: anywhere; }
/* points, rain first (user, 6 Oct 2026: "use point form. Rain first, other later") */
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-banner-points { display: grid; gap: 2px; min-width: 0; margin: 0; padding: var(--hx-chip-nudge) 0 0 1.1em; line-height: var(--hx-leading-body); overflow-wrap: anywhere; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-banner[data-level="warn"] { background: var(--hx-warn-tint); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-banner[data-level="danger"] { background: var(--hx-danger-tint); color: var(--hx-danger); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-banner-mark { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--hx-radius-badge); background: var(--hx-good-solid); color: var(--hx-on-dark); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-banner[data-level="warn"] .wt-banner-mark { background: var(--hx-tone-amber-bg); color: var(--hx-tone-amber-ink); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-banner[data-level="danger"] .wt-banner-mark { background: var(--hx-danger-solid); color: var(--hx-on-dark); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-banner-mark svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-banner[data-level="ok"] .wt-banner-mark svg { stroke-width: 2.8; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-banner[data-level="neutral"] { background: var(--hx-card); }   /* "Rain possible" (30-49 %): no green tick */
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-banner[data-level="neutral"] .wt-banner-mark { background: var(--hx-tone-grey-bg); color: var(--hx-tone-grey-ink); }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-banner:not([data-level="ok"]) .wt-banner-mark svg { stroke-width: 2.2; }

/* Four even mini cards: name row, one big number, one short line */
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--hx-space-2); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: var(--hx-space-2) var(--hx-space-3);
  border: 1px solid var(--hx-hairline);
  border-radius: var(--hx-radius-card);
  background: var(--hx-card);
  color: var(--hx-ink);
  font-family: var(--hx-font);
  text-align: left;
  cursor: pointer;
}
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-card:active { background: var(--hx-page); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-label { display: flex; align-items: center; gap: var(--hx-space-2); min-width: 0; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-go { margin-left: auto; display: grid; color: var(--hx-muted); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-go svg { width: 16px; height: 16px; }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
}
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-badge svg { width: 15px; height: 15px; }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-badge[data-tone="blue"]   { background: var(--hx-tone-blue-bg);   color: var(--hx-tone-blue-ink); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-badge[data-tone="amber"]  { background: var(--hx-tone-amber-bg);  color: var(--hx-tone-amber-ink); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-badge[data-tone="grey"]   { background: var(--hx-tone-grey-bg);   color: var(--hx-tone-grey-ink); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-badge[data-tone="teal"]   { background: var(--hx-tone-teal-bg);   color: var(--hx-tone-teal-ink); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-badge[data-tone="violet"] { background: var(--hx-tone-violet-bg); color: var(--hx-tone-violet-ink); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-badge[data-tone="green"]  { background: var(--hx-tone-green-bg);  color: var(--hx-tone-green-ink); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-badge[data-tone="red"]    { background: var(--hx-danger-tint);    color: var(--hx-danger); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-value { margin: var(--hx-space-2) 0; font-size: var(--hx-text-value-m); font-weight: var(--hx-weight-strong); line-height: 1; white-space: nowrap; }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-value small { color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-line { display: flow-root; margin-top: auto; color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); line-height: 20px; white-space: nowrap; }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-line b { color: var(--hx-ink); font-weight: var(--hx-weight-strong); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-card.warn :is(.wh-value, .wh-line, .wh-line b) { color: var(--hx-warn); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-card.danger { border-color: var(--hx-danger); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-card.danger :is(.wh-value, .wh-line, .wh-line b) { color: var(--hx-danger); }

/* Now → next 3 h bars at the end of the short line */

:is(#weather-home, #gps-home, #campaign-tracker, #campaign-filters, #campaign-share, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #weather-panel) .wh-cap { margin: 0; padding: 0 var(--hx-space-1); color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); }
:is(#weather-home, #gps-home, #campaign-tracker, #campaign-filters, #campaign-share, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #weather-panel) .wh-cap.stale { color: var(--hx-warn); }

/* Team warnings row */
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-team { border-top: 0; }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-team .wh-badge { width: var(--hx-badge-size); height: var(--hx-badge-size); border-radius: var(--hx-radius-badge); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-team-text { display: flex; flex-direction: column; min-width: 0; }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-team-text .wh-meta { overflow: hidden; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); text-overflow: ellipsis; white-space: nowrap; }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-chip { margin-left: auto; padding: calc(2px + var(--hx-chip-nudge)) var(--hx-space-2) calc(2px - var(--hx-chip-nudge)); border-radius: var(--hx-radius-chip); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-strong); white-space: nowrap; }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-chip[data-kind="clear"]   { background: var(--hx-good-tint); color: var(--hx-good); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-chip[data-kind="prepare"] { background: var(--hx-warn-tint); color: var(--hx-warn); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-chip[data-kind="stop"]    { background: var(--hx-danger-solid); color: var(--hx-on-dark); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-chip[data-kind="unknown"] { background: var(--hx-track); color: var(--hx-muted); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-team .ch-square { margin-left: 0; }

/* Actions: two even pairs */
:is(#weather-home, #gps-home, #campaign-tracker, #campaign-filters, #campaign-share, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #weather-panel) .wh-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hx-space-2); }
:is(#weather-home, #gps-home, #campaign-tracker, #campaign-filters, #campaign-share, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #weather-panel) .wh-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hx-space-2);
  min-width: 0;
  min-height: var(--hx-target-action);
  margin: 0;
  padding: 0 var(--hx-space-3);
  border: 1px solid var(--hx-hairline);
  border-radius: var(--hx-radius-card);
  background: var(--hx-card);
  color: var(--hx-ink);
  font-family: var(--hx-font);
  font-size: var(--hx-text-body);
  font-weight: var(--hx-weight-action);
  cursor: pointer;
}
:is(#weather-home, #gps-home, #campaign-tracker, #campaign-filters, #campaign-share, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #weather-panel) .wh-action svg { width: 20px; height: 20px; flex: none; }
:is(#weather-home, #gps-home, #campaign-tracker, #campaign-filters, #campaign-share, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #weather-panel) .wh-action:active { background: var(--hx-page); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-empty { display: flex; flex-direction: column; gap: var(--hx-space-3); padding: var(--hx-space-3); }
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-empty p { margin: 0; color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); }

/* ---------- GPS screen (#gps-home) ----------------------------------- */
:is(#weather-home, #gps-home, #weather-panel, #weather-overview-panel) .wh-card.good .wh-value { color: var(--hx-good); }
:is(#weather-home, #gps-home, #campaign-tracker, #campaign-filters, #campaign-share, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #weather-panel) .wh-action:disabled { background: var(--hx-disabled-bg); color: var(--hx-disabled-ink); cursor: default; }
#gps-home .gh-facts { padding: 0 var(--hx-space-3); }
#gps-home .gh-fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hx-space-3);
  min-height: var(--hx-target-icon);
  color: var(--hx-muted);
  font-size: var(--hx-text-label);
  font-weight: var(--hx-weight-action);
}
#gps-home .gh-fact + .gh-fact { border-top: 1px solid var(--hx-hairline); }
#gps-home .gh-fact b { color: var(--hx-ink); font-weight: var(--hx-weight-action); text-align: right; }

/* ---------- Tools screen (#map-tools[data-hx]) -------------------------
   The app's own Tools rows, dressed by tools-home.js: grouped cards,
   icon badge + name + › (or tick) square, Text size − value +. */
#map-tools[data-hx] {
  box-sizing: border-box;
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--hx-space-2));
  margin: 0;
  padding: var(--hx-space-2) var(--hx-space-3) calc(var(--hx-space-3) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: var(--hx-radius-sheet) var(--hx-radius-sheet) 0 0;
  background: var(--hx-page);
  box-shadow: var(--hx-shadow-sheet);
  color: var(--hx-ink);
  font-family: var(--hx-font);
  font-size: var(--hx-text-body);
}
#map-tools[data-hx][open] { display: flex; flex-direction: column; gap: var(--hx-space-2); }
#map-tools[data-hx]::backdrop { background: var(--hx-scrim); }
#map-tools[data-hx] > * { flex-shrink: 0; margin: 0; }
@media (min-width: 761px) {
  #map-tools[data-hx] { inset: 0; width: min(var(--hx-dialog-width), calc(100% - 2 * var(--hx-gutter))); height: fit-content; margin: auto; border-radius: var(--hx-radius-sheet); }
}
#map-tools[data-hx] > .menu-heading { display: flex; align-items: center; gap: var(--hx-space-2); padding: 0 var(--hx-space-1); border: 0; background: none; color: var(--hx-ink); }
/* The header stays at the top while the list scrolls (user, 6 Oct 2026); its background runs to the sheet edges, same spacing as before */
#map-tools[data-hx] > .menu-heading { position: sticky; top: calc(-1 * var(--hx-space-2)); z-index: 1;
  margin: calc(-1 * var(--hx-space-2)) calc(-1 * var(--hx-space-3)) calc(-1 * var(--hx-space-2));
  padding: var(--hx-space-2) calc(var(--hx-space-3) + var(--hx-space-1)); background: var(--hx-page); }
#map-tools[data-hx] > .menu-heading h2 { flex: 1; margin: 0; color: var(--hx-ink); font-size: var(--hx-text-display); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); }
#map-tools[data-hx] > .menu-heading > button {
  display: grid; place-items: center; flex: none;
  width: var(--hx-target-action); min-width: var(--hx-target-action); height: var(--hx-target-action); min-height: var(--hx-target-action);
  margin: 0; padding: 0; border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); color: var(--hx-ink); cursor: pointer;
}
#map-tools[data-hx] > .menu-heading > button svg { width: var(--hx-icon-size); height: var(--hx-icon-size); }
#map-tools[data-hx] .tool-actions { display: flex; flex-direction: column; gap: var(--hx-space-2); margin: 0; padding: 0; border: 0; background: none; }
/* Each group is one white card with a small title row */
#map-tools[data-hx] .inspection-tool-group { margin: 0; padding: 0 var(--hx-space-3); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); }
#map-tools[data-hx] .inspection-tool-group:not(:has(.inspection-tool-buttons > :not([hidden]))) { display: none; }
#map-tools[data-hx] .inspection-tool-group h3 { display: flex; align-items: center; min-height: var(--hx-target-icon); margin: 0; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-strong); }
#map-tools[data-hx] .inspection-tool-buttons { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; }
#map-tools[data-hx] :is(.hx-tool-row, .inspection-tool-buttons > button, .inspection-tool-buttons > a) {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--hx-space-3);
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: var(--hx-target-action);
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--hx-hairline);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--hx-ink);
  font-family: var(--hx-font);
  font-size: var(--hx-text-body);
  font-weight: var(--hx-weight-action);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
#map-tools[data-hx] :is(.hx-tool-row, .inspection-tool-buttons > button, .inspection-tool-buttons > a):active { background: var(--hx-page); }
#map-tools[data-hx] .hx-stepper-row { cursor: default; }
#map-tools[data-hx] .hx-stepper-row:active { background: none; }
#map-tools[data-hx] .hx-tool-badge { display: grid; place-items: center; flex: none; width: var(--hx-badge-size); height: var(--hx-badge-size); border-radius: var(--hx-radius-badge); }
#map-tools[data-hx] .hx-tool-badge svg { width: calc(var(--hx-icon-size) * .75); height: calc(var(--hx-icon-size) * .75); }
#map-tools[data-hx] .hx-tool-badge[data-tone="green"]  { background: var(--hx-tone-green-bg);  color: var(--hx-tone-green-ink); }
#map-tools[data-hx] .hx-tool-badge[data-tone="blue"]   { background: var(--hx-tone-blue-bg);   color: var(--hx-tone-blue-ink); }
#map-tools[data-hx] .hx-tool-badge[data-tone="amber"]  { background: var(--hx-tone-amber-bg);  color: var(--hx-tone-amber-ink); }
#map-tools[data-hx] .hx-tool-badge[data-tone="violet"] { background: var(--hx-tone-violet-bg); color: var(--hx-tone-violet-ink); }
#map-tools[data-hx] .hx-tool-badge[data-tone="grey"]   { background: var(--hx-tone-grey-bg);   color: var(--hx-tone-grey-ink); }
#map-tools[data-hx] .hx-tool-name { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: var(--hx-leading-head); }   /* wraps instead of "…" on small phones with large text (6 Oct 2026) */
#map-tools[data-hx] :is(.hx-tool-end, .hx-step) {
  display: grid; place-items: center; flex: none;
  width: var(--hx-badge-size); height: var(--hx-badge-size);
  margin: 0; padding: 0; border: 0; border-radius: var(--hx-radius-badge);
  background: var(--hx-page); color: var(--hx-ink);
}
#map-tools[data-hx] :is(.hx-tool-end, .hx-step) svg { width: calc(var(--hx-icon-size) * .75); height: calc(var(--hx-icon-size) * .75); }
#map-tools[data-hx] .hx-tool-end.on { background: var(--hx-good-solid); color: var(--hx-on-dark); }
#map-tools[data-hx] .hx-stepper { display: flex; align-items: center; gap: var(--hx-space-2); }
/* − / + the size of the arrow buttons (user, 6 Oct 2026); an invisible 48 px tap area keeps them easy to hit */
#map-tools[data-hx] .hx-step { position: relative; min-height: 0; cursor: pointer; }
#map-tools[data-hx] .hx-step::after { content: ""; position: absolute; inset: calc((var(--hx-badge-size) - var(--hx-target-icon)) / 2); }
#map-tools[data-hx] .hx-step:disabled { color: var(--hx-disabled-ink); cursor: default; }
#map-tools[data-hx] .hx-step-value { min-width: 4ch; text-align: center; font-weight: var(--hx-weight-strong); }
/* Theme: Dark | Light, two even segments on the track (5 Oct 2026) */
/* On/off switches (user, 6 Oct 2026): Site roads only and Dark mode, as tall as the arrow buttons; the whole row flips them */
#map-tools[data-hx] .hx-tool-end.hx-switch { position: relative; display: block; width: calc(var(--hx-badge-size) * 1.6); border-radius: var(--hx-radius-chip); background: var(--hx-track); box-shadow: inset 0 0 0 1px var(--hx-hairline); transition: background .2s; }
#map-tools[data-hx] .hx-switch-knob { position: absolute; top: 3px; left: 3px; width: calc(var(--hx-badge-size) - 6px); height: calc(var(--hx-badge-size) - 6px); border-radius: 50%; background: var(--hx-on-dark); box-shadow: var(--hx-shadow-raised); transition: transform .2s; }
#map-tools[data-hx] .hx-tool-end.hx-switch.on { background: var(--hx-good-solid); }
#map-tools[data-hx] .hx-switch.on .hx-switch-knob { transform: translateX(calc(var(--hx-badge-size) * .6)); }
#map-tools[data-hx] .hx-switch-row { cursor: pointer; }
#map-tools[data-hx] .hx-switch-row:active { background: var(--hx-good-tint); }
#map-tools[data-hx] .hx-switch-row[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { #map-tools[data-hx] :is(.hx-switch, .hx-switch-knob) { transition: none; } }
#map-tools[data-hx] :is(.tools-note, .tools-version) { margin: 0; padding: 0 var(--hx-space-1); color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); text-align: center; }
#map-tools[data-hx] .tools-note:empty { display: none; }

/* ---------- SOS / call screen (#sos-dialog[data-hx]) -----------------
   Approved prototype: title + Close square, contact card, red-tint note,
   60px slide bar (56px handle, no vertical inset, 2px outline), Cancel.
   The slide-and-hold logic is sos.js's own; only the look changes. */
#sos-dialog[data-hx] {
  box-sizing: border-box;
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: var(--hx-space-3) var(--hx-space-3) calc(var(--hx-space-3) + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-radius: var(--hx-radius-sheet) var(--hx-radius-sheet) 0 0;
  background: var(--hx-page);
  box-shadow: var(--hx-shadow-sheet);
  color: var(--hx-ink);
  font-family: var(--hx-font);
  font-size: var(--hx-text-body);
}
#sos-dialog[data-hx][open] { display: flex; flex-direction: column; gap: var(--hx-space-2); }
#sos-dialog[data-hx] > * { flex-shrink: 0; margin: 0; }
#sos-dialog[data-hx]::backdrop { background: var(--hx-scrim); }
@media (min-width: 761px) {
  #sos-dialog[data-hx] { inset: 0; width: min(var(--hx-dialog-width), calc(100% - 2 * var(--hx-gutter))); height: fit-content; margin: auto; border-radius: var(--hx-radius-sheet); }
}
#sos-dialog[data-hx] .hx-sos-title { display: flex; align-items: center; gap: var(--hx-space-2); padding: 0 var(--hx-space-1); }
#sos-dialog[data-hx] .hx-sos-title > div { flex: 1; min-width: 0; }
#sos-dialog[data-hx] h2 { margin: 0; color: var(--hx-ink); font-size: var(--hx-text-display); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); }
#sos-dialog[data-hx] .hx-sos-sub { margin: var(--hx-space-1) 0 0; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); }
#sos-dialog[data-hx] .hx-sos-sub:empty { display: none; }
#sos-dialog[data-hx] .hx-sos-close {
  display: grid; place-items: center; flex: none;
  width: var(--hx-target-action); min-width: var(--hx-target-action); height: var(--hx-target-action); min-height: var(--hx-target-action);
  margin: 0; padding: 0; border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); color: var(--hx-ink); cursor: pointer;
}
#sos-dialog[data-hx] .hx-sos-close svg { width: var(--hx-icon-size); height: var(--hx-icon-size); }
#sos-dialog[data-hx] .hx-sos-contact {
  display: flex; align-items: center; gap: var(--hx-space-3);
  min-height: calc(var(--hx-target-action) + var(--hx-space-3)); padding: var(--hx-space-3);   /* 12 px all round, the notification rhythm (5 Oct 2026) */
  border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card);
}
#sos-dialog[data-hx] .hx-sos-badge { display: grid; place-items: center; flex: none; width: var(--hx-badge-size); height: var(--hx-badge-size); border-radius: var(--hx-radius-badge); background: var(--hx-danger-tint); color: var(--hx-danger); }
#sos-dialog[data-hx] .hx-sos-badge svg { width: calc(var(--hx-icon-size) * .75); height: calc(var(--hx-icon-size) * .75); }
#sos-dialog[data-hx] .sos-contact-name { display: block; font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-head); }
#sos-dialog[data-hx] .sos-number { display: block; margin: 0; color: var(--hx-ink); font-size: var(--hx-text-title); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); letter-spacing: var(--hx-tracking-display); }   /* straight under the name */
#sos-dialog[data-hx] .hx-sos-note { padding: var(--hx-space-3); border-radius: var(--hx-radius-card); background: var(--hx-danger-tint); color: var(--hx-danger); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); line-height: var(--hx-leading-body); }
/* Slide bar: 60px, red, white handle filling the 56px inner height; the hold fills darker from the left. */
#sos-dialog[data-hx] .sos-track {
  position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  height: 60px; margin: 0; padding: 0;
  border: 2px solid var(--hx-sos-bg); border-radius: var(--hx-radius-card);
  background: linear-gradient(to right, var(--hx-sos-hold) var(--hold, 0%), var(--hx-sos-bg) var(--hold, 0%));
  user-select: none; touch-action: none;
}
#sos-dialog[data-hx] .sos-track > span { padding-left: var(--hx-target-action); color: var(--hx-on-dark); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); }
#sos-dialog[data-hx] .sos-track > .sos-handle {
  position: absolute; top: 0; left: 0; box-sizing: border-box;
  width: 56px; height: 56px; min-height: 56px; margin: 0; padding: 0;
  border: 0; border-radius: calc(var(--hx-radius-card) - 2px);
  background: var(--hx-sos-handle); color: var(--hx-sos-bg);
  font-size: var(--hx-text-title); font-weight: var(--hx-weight-strong); cursor: grab;
}
#sos-dialog[data-hx] .sos-status { color: var(--hx-ink); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); text-align: center; }
#sos-dialog[data-hx] .sos-status:empty { display: none; }
#sos-dialog[data-hx] .sos-cancel {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--hx-target-action); margin: 0; padding: 0;
  border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); color: var(--hx-ink);
  font-family: var(--hx-font); font-size: var(--hx-text-body); font-weight: var(--hx-weight-action); cursor: pointer;
}

/* ---------- Farms screen (#farm-picker[data-hx]) ----------------------
   The app's own multi-select picker, dressed by farms-home.js: one card of
   rows (icon, name, "WEH · N turbines", tick square), count line, Show on map. */
#farm-picker[data-hx] {
  box-sizing: border-box; position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--hx-space-2));
  margin: 0; padding: var(--hx-space-3) var(--hx-space-3) calc(var(--hx-space-3) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain; border: 0;
  border-radius: var(--hx-radius-sheet) var(--hx-radius-sheet) 0 0; background: var(--hx-page); box-shadow: var(--hx-shadow-sheet);
  color: var(--hx-ink); font-family: var(--hx-font); font-size: var(--hx-text-body);
}
#farm-picker[data-hx][open] { display: flex; flex-direction: column; gap: var(--hx-space-2); }
#farm-picker[data-hx] > * { flex-shrink: 0; margin: 0; }
#farm-picker[data-hx]::backdrop { background: var(--hx-scrim); }
@media (min-width: 761px) {
  #farm-picker[data-hx] { inset: 0; width: min(var(--hx-dialog-width), calc(100% - 2 * var(--hx-gutter))); height: fit-content; margin: auto; border-radius: var(--hx-radius-sheet); }
}
#farm-picker[data-hx] > .ui-dialog-heading { display: flex; align-items: center; gap: var(--hx-space-2); padding: 0 var(--hx-space-1); border: 0; background: none; color: var(--hx-ink); }
#farm-picker[data-hx] .hx-farm-titles { flex: 1; min-width: 0; }
#farm-picker[data-hx] .hx-farm-titles h2 { margin: 0; color: var(--hx-ink); font-size: var(--hx-text-display); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); }
#farm-picker[data-hx] .hx-farm-sub { margin: var(--hx-space-1) 0 0; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); }
#farm-picker[data-hx] > .ui-dialog-heading > button {
  display: grid; place-items: center; flex: none;
  width: var(--hx-target-action); min-width: var(--hx-target-action); height: var(--hx-target-action); min-height: var(--hx-target-action);
  margin: 0; padding: 0; border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); color: var(--hx-ink); cursor: pointer;
}
#farm-picker[data-hx] > .ui-dialog-heading > button svg { width: var(--hx-icon-size); height: var(--hx-icon-size); }
#farm-picker[data-hx] .farm-options { display: flex; flex-direction: column; margin: 0; padding: 0 var(--hx-space-3); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); }
#farm-picker[data-hx] .farm-options > button {
  box-sizing: border-box; display: flex; align-items: center; gap: var(--hx-space-3);
  width: 100%; min-width: 0; max-width: none; min-height: var(--hx-target-action);
  margin: 0; padding: var(--hx-space-1) 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--hx-ink); font-family: var(--hx-font); font-size: var(--hx-text-body); text-align: left; cursor: pointer;
}
#farm-picker[data-hx] .farm-options > button + button { border-top: 1px solid var(--hx-hairline); }
#farm-picker[data-hx] .farm-options > button:active { background: var(--hx-page); }
#farm-picker[data-hx] .hx-farm-badge { display: grid; place-items: center; flex: none; width: var(--hx-badge-size); height: var(--hx-badge-size); border-radius: var(--hx-radius-badge); background: var(--hx-tone-green-bg); color: var(--hx-tone-green-ink); }
#farm-picker[data-hx] .hx-farm-badge svg { width: calc(var(--hx-icon-size) * .75); height: calc(var(--hx-icon-size) * .75); }
#farm-picker[data-hx] .hx-farm-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
#farm-picker[data-hx] .hx-farm-text b { font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); }
#farm-picker[data-hx] .hx-farm-meta { color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); }
#farm-picker[data-hx] .hx-farm-tick { display: grid; place-items: center; flex: none; width: var(--hx-badge-size); height: var(--hx-badge-size); border-radius: var(--hx-radius-badge); background: var(--hx-page); color: var(--hx-on-dark); }
#farm-picker[data-hx] .hx-farm-tick svg { width: calc(var(--hx-icon-size) * .75); height: calc(var(--hx-icon-size) * .75); }
#farm-picker[data-hx] .hx-farm-tick.on { background: var(--hx-good-solid); }
#farm-picker[data-hx] .hx-farm-cap { padding: 0 var(--hx-space-1); color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); }
#farm-picker[data-hx] .hx-farm-show {
  display: flex; align-items: center; justify-content: center; gap: var(--hx-space-2);
  width: 100%; min-height: var(--hx-target-action); margin: 0; padding: 0 var(--hx-space-3);
  border: 0; border-radius: var(--hx-radius-card); background: var(--hx-primary-bg); color: var(--hx-primary-ink); box-shadow: var(--hx-glow-main);
  font-family: var(--hx-font); font-size: var(--hx-text-body); font-weight: var(--hx-weight-action); cursor: pointer;
}
#farm-picker[data-hx] .hx-farm-show svg { width: 20px; height: 20px; }

/* ---------- Weather warning on the map (.weather-warning[data-hx]) ----------
     ┌ [⚠] Rain or showers possible.            [✕] ┐   amber; stop = red + "Stop now"
     │     Forecast for WTB farm centre             │
     │ [ Details ]          [ Report weather ]      │   even pair; I understand above for stop
   ===================================================================== */
.weather-warning[data-hx] {
  position: fixed;
  z-index: 10020;
  left: var(--hx-space-3);
  right: var(--hx-space-3);
  bottom: calc(var(--hx-space-3) + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--hx-space-2);
  max-width: var(--hx-dialog-width);
  max-height: calc(100dvh - 2 * var(--hx-space-3));
  margin: 0 auto;
  padding: var(--hx-space-3);
  overflow: auto;
  border: 1px solid var(--hx-warn);
  border-radius: var(--hx-radius-card);
  background: var(--hx-card);
  box-shadow: var(--hx-shadow-sheet);
  color: var(--hx-ink);
  font-family: var(--hx-font);
}
.weather-warning[data-hx][hidden] { display: none; }
.weather-warning[data-hx] .ww-head { display: flex; align-items: flex-start; gap: var(--hx-space-3); }
.weather-warning[data-hx] .ww-icon { display: grid; place-items: center; flex: none; width: var(--hx-badge-size); height: var(--hx-badge-size); border-radius: var(--hx-radius-badge); background: var(--hx-warn-tint); color: var(--hx-warn); }
.weather-warning[data-hx] .ww-icon svg { width: calc(var(--hx-icon-size) * .75); height: calc(var(--hx-icon-size) * .75); }
.weather-warning[data-hx] .weather-warning-heading { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--hx-space-1); min-width: 0; }
.weather-warning[data-hx] .weather-warning-level { padding: calc(2px + var(--hx-chip-nudge)) var(--hx-space-2) calc(2px - var(--hx-chip-nudge)); border-radius: var(--hx-radius-chip); background: var(--hx-danger-solid); color: var(--hx-on-dark); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); }
.weather-warning[data-hx] .weather-warning-level[hidden] { display: none; }
.weather-warning[data-hx] .weather-warning-title { margin: 0; color: var(--hx-ink); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); }
/* Notification spacing (5 Oct 2026, user reference: iOS notifications). One line rhythm: the title (1.3) and the place line
   follow each other with no extra gap; the icon is centred on the whole text block; the close button sits on the title's line;
   the same left edge and 12 px padding all round in the full and the one-line warning. */
.weather-warning[data-hx] .ww-head { align-items: center; }
.weather-warning[data-hx] .weather-warning-heading { gap: 0; }
.weather-warning[data-hx] .weather-warning-title { line-height: var(--hx-leading-head); }
.weather-warning[data-hx] .weather-warning-location { line-height: var(--hx-leading-body); }
.weather-warning[data-hx] .ww-head > .weather-hide { align-self: flex-start; }
.weather-warning[data-hx] { gap: var(--hx-space-3); }   /* text to buttons = the 12 px padding, so every edge in the box is the same */
.weather-warning[data-hx] .weather-warning-location { margin: 0; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); }
.weather-warning[data-hx] .weather-warning-action { margin: 0; color: var(--hx-ink); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); }
.weather-warning[data-hx] .weather-warning-action[hidden] { display: none; }
.weather-warning[data-hx] .weather-hide { display: grid; place-items: center; flex: none; width: var(--hx-target-icon); height: var(--hx-target-icon); margin: calc((var(--hx-text-body) * var(--hx-leading-head) - var(--hx-target-icon)) / 2) calc(-1 * var(--hx-space-2)) 0 0; padding: 0; border: 0; border-radius: var(--hx-radius-card); background: none; color: var(--hx-muted); cursor: pointer; }
.weather-warning[data-hx] .weather-hide svg { width: calc(var(--hx-icon-size) * .85); height: calc(var(--hx-icon-size) * .85); }
.weather-warning[data-hx] .weather-warning-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hx-space-2); }
.weather-warning[data-hx] .weather-warning-actions button {
  min-width: 0;
  min-height: var(--hx-target-action);
  margin: 0;
  padding: 0 var(--hx-space-3);
  border: 1px solid var(--hx-hairline);
  border-radius: var(--hx-radius-card);
  background: var(--hx-card);
  color: var(--hx-ink);
  font-family: var(--hx-font);
  font-size: var(--hx-text-body);
  font-weight: var(--hx-weight-action);
  cursor: pointer;
}
.weather-warning[data-hx] .weather-warning-actions button[hidden] { display: none; }
.weather-warning[data-hx] .weather-warning-actions .weather-ack { grid-column: 1 / -1; border-color: var(--hx-danger-solid); background: var(--hx-danger-solid); color: var(--hx-on-dark); font-weight: var(--hx-weight-strong); }
.weather-warning[data-hx] :is(.weather-warning-actions button, .weather-hide):active { background: var(--hx-page); }
.weather-warning[data-hx] :is(button):focus-visible { outline: 3px solid var(--hx-focus); outline-offset: 2px; }
.weather-warning[data-hx][data-severity="stop"] { border-color: var(--hx-danger); }
.weather-warning[data-hx][data-severity="stop"] .ww-icon { background: var(--hx-danger-solid); color: var(--hx-on-dark); }

/* ---------- Map pop-ups (.hx-pop): campaign dropdown and Map options ----------
     ┌ 2026 2H Blade External Inspection    [✓] ┐   tick square on the chosen one
     │ Show all WTGs                         [ ] │
     ┌ [▦] Choose farms and WTGs              ›  ┐   icon square · name · ›
     │ [◇] Map layers                         ›  │   layers: tick squares
     │ [▤] Map legend                         ›  │   legend: line samples + status chips
   ===================================================================== */
.hx-pop[data-hx] {
  position: absolute;
  z-index: 30;
  top: calc(100% + var(--hx-space-2));
  /* The map bar has a 1px border: line the pop-up up with its outer edge, not its padding box. */
  left: -1px;
  right: -1px;
  box-sizing: border-box;
  max-height: 60dvh;
  margin: 0;
  padding: 0 var(--hx-space-3);
  overflow: auto;
  border: 1px solid var(--hx-hairline);
  border-radius: var(--hx-radius-card);
  background: var(--hx-card);
  box-shadow: var(--hx-shadow-sheet);
  color: var(--hx-ink);
  font-family: var(--hx-font);
}
.hx-pop[data-hx][hidden] { display: none; }
.hx-pop[data-hx] .hx-pop-row {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--hx-space-3);
  width: 100%;
  min-height: var(--hx-target-action);
  margin: 0;
  padding: var(--hx-space-1) 0;
  border: 0;
  border-top: 1px solid var(--hx-hairline);
  border-radius: 0;
  background: none;
  color: var(--hx-ink);
  font-family: var(--hx-font);
  font-size: var(--hx-text-body);
  font-weight: var(--hx-weight-strong);
  text-align: left;
  cursor: pointer;
}
.hx-pop[data-hx] .team-campaign-options { display: block; }
.hx-pop[data-hx] .hx-pop-head + .hx-pop-row, .hx-pop[data-hx] .hx-pop-head + .hx-pop-legend { border-top: 1px solid var(--hx-hairline); }
.hx-pop[data-hx] .team-campaign-options > .hx-pop-row:first-child, .hx-pop[data-hx] > .hx-pop-row:first-child { border-top: 0; }
.hx-pop[data-hx] .hx-pop-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hx-pop[data-hx] .hx-pop-icon, .hx-pop[data-hx] .hx-pop-tick { display: grid; place-items: center; flex: none; width: var(--hx-badge-size); height: var(--hx-badge-size); border-radius: var(--hx-radius-badge); }
.hx-pop[data-hx] :is(.hx-pop-icon, .hx-pop-tick, .hx-pop-go) svg { width: calc(var(--hx-icon-size) * .75); height: calc(var(--hx-icon-size) * .75); }
.hx-pop[data-hx] .hx-pop-icon[data-tone="violet"] { background: var(--hx-tone-violet-bg); color: var(--hx-tone-violet-ink); }
.hx-pop[data-hx] .hx-pop-icon[data-tone="green"] { background: var(--hx-tone-green-bg); color: var(--hx-tone-green-ink); }
.hx-pop[data-hx] .hx-pop-icon[data-tone="blue"] { background: var(--hx-tone-blue-bg); color: var(--hx-tone-blue-ink); }
.hx-pop[data-hx] .hx-pop-icon[data-tone="grey"] { background: var(--hx-tone-grey-bg); color: var(--hx-tone-grey-ink); }
.hx-pop[data-hx] .hx-pop-tick { background: var(--hx-page); color: var(--hx-on-dark); }
.hx-pop[data-hx] .hx-pop-tick.on { background: var(--hx-good-solid); }
.hx-pop[data-hx] .hx-pop-go { display: grid; flex: none; color: var(--hx-muted); }
.hx-pop[data-hx] .hx-pop-head { display: flex; align-items: center; gap: var(--hx-space-2); min-height: var(--hx-target-action); }
.hx-pop[data-hx] .hx-pop-back { display: grid; place-items: center; flex: none; width: var(--hx-target-icon); height: var(--hx-target-icon); margin: 0 0 0 calc(-1 * var(--hx-space-2)); padding: 0; border: 0; border-radius: var(--hx-radius-card); background: none; color: var(--hx-ink); cursor: pointer; }
.hx-pop[data-hx] .hx-pop-back svg { width: calc(var(--hx-icon-size) * .85); height: calc(var(--hx-icon-size) * .85); }
.hx-pop[data-hx] h3 { margin: 0; color: var(--hx-ink); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); }
.hx-pop[data-hx] > h3 { padding: var(--hx-space-3) 0 var(--hx-space-1); border-top: 1px solid var(--hx-hairline); color: var(--hx-muted); font-size: var(--hx-text-label); }
.hx-pop[data-hx] .hx-pop-legend { display: flex; align-items: center; gap: var(--hx-space-3); min-height: calc(var(--hx-target-icon) - var(--hx-space-2)); margin: 0; color: var(--hx-ink); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); }
.hx-pop[data-hx] .hx-pop-line { display: block; flex: none; width: var(--hx-badge-size); height: 4px; border-radius: 2px; }
.hx-pop[data-hx] .hx-pop-line.osm { background: var(--hx-muted); }
.hx-pop[data-hx] .hx-pop-line.site { background: var(--hx-good); }
.hx-pop[data-hx] .hx-pop-line:is(.area, .chosen) { height: calc(var(--hx-badge-size) * .6); border-radius: var(--hx-radius-badge); }
.hx-pop[data-hx] .hx-pop-line.area { border: 2px solid var(--hx-farm-T4); background: linear-gradient(90deg, var(--hx-farm-FKW), var(--hx-farm-T1), var(--hx-farm-T4), var(--hx-farm-NKS)); opacity: .75; }
.hx-pop[data-hx] .hx-pop-line.chosen { border: 3px solid var(--hx-map-select); box-shadow: 0 0 0 1.5px var(--hx-ink); background: none; }
.hx-pop[data-hx] .hx-pop-legend:last-child { margin-bottom: var(--hx-space-2); }
.hx-pop[data-hx] .team-campaign-empty { margin: var(--hx-space-3) 0; color: var(--hx-muted); font-size: var(--hx-text-label); }
.hx-pop[data-hx] :is(.hx-pop-row, .hx-pop-back):active { background: var(--hx-page); }
.hx-pop[data-hx] :is(.hx-pop-row, .hx-pop-back):focus-visible { outline: 3px solid var(--hx-focus); outline-offset: -3px; }

/* ---------- Map Today bar (.campaign-map-status[data-hx]) — same as the Campaigns Today card ----------
     ┌ Today      │ 4        │ 0           │ 1          ┐   four even cells
     │ 02 OCT 26  │ ✓ Done   │ ◑ In progress│ ⚠ Incomplete│   numbers coloured by status, zero grey
   Hidden while a WTG card, search or driving is on screen. */
.campaign-map-status[data-hx] {
  position: absolute;
  z-index: 5;
  left: var(--hx-space-3);
  right: var(--hx-space-3);
  bottom: calc(var(--hx-space-2) + env(safe-area-inset-bottom, 0px));
  max-width: var(--hx-dialog-width);
  margin-inline: auto;
  color: var(--hx-ink);
  font-family: var(--hx-font);
}
html body.driving .campaign-map-status, html body.map-search-visible .campaign-map-status, html body .map-area:has(#selected-card:not([hidden])) .campaign-map-status { display: none; }
.campaign-map-status[data-hx] .ms-card { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); box-shadow: var(--hx-shadow-sheet); }
.campaign-map-status[data-hx] .ms-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--hx-space-1);
  min-width: 0;
  min-height: calc(var(--hx-target-action) + var(--hx-space-3));
  margin: 0;
  padding: var(--hx-space-2);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--hx-ink);
  font-family: var(--hx-font);
  text-align: left;
  cursor: pointer;
}
.campaign-map-status[data-hx] .ms-cell + .ms-cell { border-left: 1px solid var(--hx-hairline); }
.campaign-map-status[data-hx] .ms-cell:first-child { border-radius: var(--hx-radius-card) 0 0 var(--hx-radius-card); }
.campaign-map-status[data-hx] .ms-cell:last-child { border-radius: 0 var(--hx-radius-card) var(--hx-radius-card) 0; }
.campaign-map-status[data-hx] .ms-num { font-size: var(--hx-text-value-m); font-weight: var(--hx-weight-strong); line-height: 1; }
.campaign-map-status[data-hx] .ms-date { padding: calc(2px + var(--hx-chip-nudge)) var(--hx-space-2) calc(2px - var(--hx-chip-nudge)); border-radius: var(--hx-radius-chip); background: var(--hx-track); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); white-space: nowrap; }
.campaign-map-status[data-hx] .ms-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); white-space: nowrap; }
.campaign-map-status[data-hx] .ms-top { display: flex; align-items: center; gap: var(--hx-space-1); }
.campaign-map-status[data-hx] .ms-top svg { flex: none; width: 16px; height: 16px; }
.campaign-map-status[data-hx] .ms-cell[data-status="completed"] :is(.ms-num, svg) { color: var(--hx-good); }
.campaign-map-status[data-hx] .ms-cell[data-status="in_progress"] :is(.ms-num, svg) { color: var(--hx-info); }
.campaign-map-status[data-hx] .ms-cell[data-status="incomplete"] :is(.ms-num, svg) { color: var(--hx-warn); }
.campaign-map-status[data-hx] .ms-cell[data-zero] :is(.ms-num, svg) { color: var(--hx-muted); }
.campaign-map-status[data-hx] .ms-cell[aria-pressed="true"] { background: var(--hx-page); }
.campaign-map-status[data-hx] .ms-cell:active { background: var(--hx-page); }
.campaign-map-status[data-hx] .ms-cell:focus-visible { outline: 3px solid var(--hx-focus); outline-offset: -3px; }
.campaign-map-status[data-hx] :is(.ms-empty, .ms-error) { margin: 0; padding: var(--hx-space-3); color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); }
.campaign-map-status[data-hx] .ms-error { margin-top: var(--hx-space-1); padding: var(--hx-space-1) var(--hx-space-2); border-radius: var(--hx-radius-badge); background: var(--hx-warn-tint); color: var(--hx-warn); }
.campaign-map-status[data-hx] .ms-card > .ms-empty { grid-column: 1 / -1; }
/* Search owns the screen while open; the warning comes back when search closes. */
body.map-search-visible .weather-warning[data-hx] { display: none; }
/* WTG card or team panel open (team panel added 5 Oct 2026): one line under the map bar (top/right set from the real bar and map buttons); tap opens Details. */
body:has(#selected-card:not([hidden]), .team-overlay:not([hidden])) .weather-warning[data-hx] { top: var(--hx-warning-top, calc(var(--hx-target-action) * 3)); bottom: auto; right: var(--hx-warning-right, calc(var(--hx-target-action) + var(--hx-space-5))); margin: 0; padding: var(--hx-space-3); }
body:has(#selected-card:not([hidden]), .team-overlay:not([hidden])) .weather-warning[data-hx] :is(.weather-warning-location, .weather-warning-action, .weather-warning-actions) { display: none; }
body:has(#selected-card:not([hidden]), .team-overlay:not([hidden])) .weather-warning[data-hx] .ww-head { align-items: center; }
body:has(#selected-card:not([hidden]), .team-overlay:not([hidden])) .weather-warning[data-hx] .ww-head > .weather-hide { align-self: center; }
body:has(#selected-card:not([hidden]), .team-overlay:not([hidden])) .weather-warning[data-hx] .weather-warning-heading { cursor: pointer; }
body:has(#selected-card:not([hidden]), .team-overlay:not([hidden])) .weather-warning[data-hx] .weather-warning-title { overflow: hidden; font-size: var(--hx-text-label); text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
body:has(#selected-card:not([hidden]), .team-overlay:not([hidden])) .weather-warning[data-hx] .weather-hide { margin: calc(-1 * var(--hx-space-2)) calc(-1 * var(--hx-space-2)) calc(-1 * var(--hx-space-2)) 0; }

/* ---------- Search on phones (.sidebar[data-hx], only while Search is open) ----------
     Search                                        [✕]
     [ WTG ] [ Places & roads ] [ Plus Code ]          one-tap modes, even
     [ 🔍 Find a turbine                       ] [→]   same 52px height
     210 turbines · By road · first 8 results
     ┌ FKW-01B                                  › ┐   rows: name, "15.4 km by road"
   The panel's own position and size stay as they were. */
.hx-search-modes, .hx-search-icon { display: none; }
.sidebar[data-hx] { font-family: var(--hx-font); color: var(--hx-ink); }
.sidebar[data-hx] .search-panel-heading { display: flex; align-items: center; gap: var(--hx-space-2); min-height: calc(var(--hx-target-action) + var(--hx-space-2)); margin: 0; padding: var(--hx-space-1) var(--hx-space-2) 0 var(--hx-space-3); border: 0; background: none; color: var(--hx-ink); }
.sidebar[data-hx] .search-panel-heading h2 { flex: 1; margin: 0; color: var(--hx-ink); font-size: var(--hx-text-display); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); }
.sidebar[data-hx] #close-map-search { position: static; display: grid; place-items: center; flex: none; width: var(--hx-target-action); height: var(--hx-target-action); margin: 0; padding: 0; border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); color: var(--hx-ink); box-shadow: none; }
.sidebar[data-hx] #close-map-search svg { width: var(--hx-icon-size); height: var(--hx-icon-size); }
.sidebar[data-hx] .sidebar-top { display: flex; flex-direction: column; align-items: stretch; gap: var(--hx-space-2); margin: 0; padding: var(--hx-space-2) var(--hx-space-3) 0; border: 0; background: none; }
.sidebar[data-hx] #mobile-search-panel { display: flex; flex-direction: column; gap: var(--hx-space-2); margin: 0; padding: 0; }
.sidebar[data-hx] #search-mode { display: none; }
.sidebar[data-hx] .hx-search-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hx-space-1); padding: var(--hx-space-1); border-radius: var(--hx-radius-segment); background: var(--hx-track); }   /* one segmented control everywhere (UI audit, 6 Oct 2026) */
.sidebar[data-hx] .hx-search-mode { min-width: 0; min-height: calc(var(--hx-target-icon) - var(--hx-space-2)); margin: 0; padding: 0 var(--hx-space-1); border: 0; border-radius: calc(var(--hx-radius-segment) - 2px); background: none; color: var(--hx-muted); font-family: var(--hx-font); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); line-height: var(--hx-leading-tight); cursor: pointer; }
.sidebar[data-hx] .hx-search-mode[aria-pressed="true"] { background: var(--hx-segment-on); color: var(--hx-segment-ink); box-shadow: var(--hx-shadow-raised); font-weight: var(--hx-weight-strong); }
.sidebar[data-hx] #mobile-search-panel .search { display: flex; align-items: center; gap: var(--hx-space-2); width: 100%; height: var(--hx-target-action); min-height: var(--hx-target-action); margin: 0; padding: 0 0 0 var(--hx-space-3); box-sizing: border-box; border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); color: var(--hx-muted); overflow: hidden; }
.sidebar[data-hx] #mobile-search-panel .search:focus-within { outline: 3px solid var(--hx-focus); outline-offset: 2px; }
.sidebar[data-hx] .hx-search-icon { display: grid; flex: none; }
.sidebar[data-hx] #mobile-search-panel .search > span:not(.hx-search-icon) { display: none; }
.sidebar[data-hx] .hx-search-icon svg { width: calc(var(--hx-icon-size) * .75); height: calc(var(--hx-icon-size) * .75); }
.sidebar[data-hx] #mobile-search-panel #search { flex: 1; min-width: 0; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: none; color: var(--hx-ink); font-family: var(--hx-font); font-size: var(--hx-text-body); font-weight: var(--hx-weight-action); }
.sidebar[data-hx] #mobile-search-panel #search::placeholder { color: var(--hx-muted); opacity: 1; }
.sidebar[data-hx] #mobile-search-panel #search-submit { display: grid; place-items: center; flex: 0 0 var(--hx-target-action); align-self: stretch; width: var(--hx-target-action); min-width: var(--hx-target-action); height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--hx-hairline); border-radius: 0; background: var(--hx-page); color: var(--hx-ink); font-size: var(--hx-text-title); font-weight: var(--hx-weight-strong); }
.sidebar[data-hx] .list-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--hx-space-2); margin: 0; padding: 0 var(--hx-space-1); border: 0; background: none; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); }
.sidebar[data-hx] .list-heading :is(#result-count, #search-distance-hint) { margin: 0; padding: 0; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); }
.sidebar[data-hx] .list-heading #result-count { color: var(--hx-ink); font-weight: var(--hx-weight-strong); }
.sidebar[data-hx] :is(#turbines, #map-search-results):not([hidden]) { display: block; flex: 1 1 auto; min-height: 0; max-height: none; margin: var(--hx-space-2) var(--hx-space-3) var(--hx-space-3); padding: 0 var(--hx-space-3); overflow: auto; border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); }
.sidebar[data-hx] :is(#turbines .turbine-row, #map-search-results .map-result-go) { box-sizing: border-box; display: flex; align-items: center; gap: var(--hx-space-3); width: 100%; min-height: var(--hx-target-action); margin: 0; padding: var(--hx-space-2) 0; border: 0; border-top: 1px solid var(--hx-hairline); border-radius: 0; background: none; box-shadow: none; color: var(--hx-ink); font-family: var(--hx-font); text-align: left; cursor: pointer; }
.sidebar[data-hx] :is(#turbines, #map-search-results) > :is(.turbine-row, .map-result-go):first-of-type { border-top: 0; }
.sidebar[data-hx] .turbine-row > span:has(> .row-title) { display: flex; flex: 1; flex-direction: column; gap: 0; min-width: 0; }   /* name and farm read as one item (user, 6 Oct 2026: line spacing too big) */
.sidebar[data-hx] #turbines .turbine-symbol { display: none; }
.sidebar[data-hx] #turbines .row-sub { display: block; }
.sidebar[data-hx] #turbines .row-arrow { display: grid; }
.sidebar[data-hx] #map-search-results .map-result-go { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
.sidebar[data-hx] #map-search-results .map-result-go small { margin: 0; }
.sidebar[data-hx] :is(.row-title, .map-result-go strong) { color: var(--hx-ink); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-head); }
.sidebar[data-hx] :is(.row-sub, .map-result-go small) { color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); line-height: var(--hx-leading-head); }
.sidebar[data-hx] .row-arrow { display: grid; flex: none; color: var(--hx-muted); }
.sidebar[data-hx] .row-arrow svg { width: calc(var(--hx-icon-size) * .75); height: calc(var(--hx-icon-size) * .75); }
.sidebar[data-hx] #map-search-results .map-search-note { margin: 0; padding: var(--hx-space-2) 0; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); }
.sidebar[data-hx] :is(.turbine-row, .map-result-go, .hx-search-mode, #close-map-search, #search-submit):active { background: var(--hx-page); }
.sidebar[data-hx] :is(.turbine-row, .map-result-go, .hx-search-mode, #close-map-search, #search-submit):focus-visible { outline: 3px solid var(--hx-focus); outline-offset: -3px; }
/* SOS note on the notification design: cream, red edge (5 Oct 2026) */
#sos-dialog[data-hx] .hx-sos-note { border: 1px solid var(--hx-map-edge); border-left: 8px solid var(--hx-alert-stop); background: var(--hx-map-panel); color: var(--hx-ink); }
/* Dark: the old style.css fills that used the text colour (--ink) as a background keep light text readable */
:root[data-theme="dark"] :is(.primary, .farm.active, .wtg-marker.is-selected):not(:where([data-hx], [data-hx] *)) { border-color: var(--hx-solid); background: var(--hx-solid); color: var(--hx-solid-ink); }
/* Dark: a button the app never styled shows the browser's own colour, which turns mid-grey under color-scheme: dark (Light shows
   the browser's light grey). Give those the Dark track colour instead. Zero specificity: any rule the app sets still wins. */
:where(:root[data-theme="dark"]) :where(button) { background-color: var(--hx-track); }
/* Map zoom buttons (route preview, Team and admin maps): the dark button fill hid their dark + / − icons (user, 6 Oct 2026) */
.maplibregl-ctrl.maplibregl-ctrl-group > button { background-color: var(--hx-map-control); }
/* The fixed banner can carry a later warning with its time ("Rain likely. Gusts increasing at 14:00"): up to two lines, never cut. */
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-tile > .wt-banner { white-space: normal; }
:is(#weather-home, #weather-panel, #weather-overview-panel) .wt-tile > .wt-banner > span { display: block; line-height: var(--hx-leading-body); }   /* the whole message, never cut (6 Oct 2026: the source and time were lost to "…") */   /* body leading: tight leading clipped the bottom of "y" and "g" at 120 % (5 Oct 2026) */

/* Type standard (5 Oct 2026): the map's "Loading your work area…" line had no size of its own (15 px from the page). */
#map-placeholder { font-size: var(--hx-text-label); }
/* WTG card By road / Drive line: "Finding your location…" wraps instead of running past the tile (all-weather review, 6 Oct 2026) */
#selected-card :is(#destination-distance-label, #destination-arrival) { white-space: normal; overflow-wrap: anywhere; }