/* ===================================================================== Campaigns screen (:is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet)) — opened from the menu. Approved prototype, 2 Oct 2026 (ui-review/menu-prototype.html): [‹] Campaigns [✕] [ 2026 2H Blade External Inspection [⌄] ] picker, one 52px row ┌ Today 02 OCT 26 [📅] ┐ same counts as map bar │ 1 Done │ 1 In progress │ 0 Incomplete │ ┌ Next nearby FKW-45B · 10.2 km [+] ┐ ROAD distance, collapsed ┌ Whole campaign 103 of 210 · 49% ┐ │ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ │ │ ✓ Completed 103 › │ every status, adds up │ … │ │ Total WTGs 210 │ │ ▣ Open Tracker [›] │ Tokens only: no hex, no px font sizes, no !important. ===================================================================== */ :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) { 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); line-height: var(--hx-leading-body); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet)[open] { display: flex; flex-direction: column; gap: var(--hx-space-2); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet)::backdrop { background: var(--hx-scrim); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet)::before { content: ""; flex: none; align-self: center; width: var(--hx-space-5); height: var(--hx-space-1); border-radius: var(--hx-radius-chip); background: var(--hx-hairline); } @media (min-width: 761px) { :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) { 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); /* No grab handle on wide screens: 16px above the ✕ square, the same as beside it (12px padding + 4px title inset). */ padding-top: calc(var(--hx-space-3) + var(--hx-space-1)); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet)::before { display: none; } } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) > *, :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-body > * { flex-shrink: 0; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-body { display: flex; flex-direction: column; gap: var(--hx-space-2); } /* ---------- Title: [‹] Campaigns [✕], equal 52px squares ------------- */ :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-title { display: flex; align-items: center; gap: var(--hx-space-2); padding: 0 var(--hx-space-1); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-title 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); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-square-button { box-sizing: border-box; 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; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-square-button svg { width: var(--hx-icon-size); height: var(--hx-icon-size); } /* ---------- Shared parts --------------------------------------------- */ :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) button { font-family: var(--hx-font); } :is(:is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet), #weather-home, #selected-card) .ch-square { 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-ink); } :is(:is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet), #weather-home, #selected-card) .ch-square svg { width: calc(var(--hx-icon-size) * .75); height: calc(var(--hx-icon-size) * .75); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-ghost { visibility: hidden; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-dim { margin-left: var(--hx-space-2); color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-dim b { color: var(--hx-ink); font-weight: var(--hx-weight-strong); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-note, :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-empty { margin: 0; padding: var(--hx-space-3) 0; color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); } /* Status chips: mark + word. Not started is the only outlined chip. */ :is(:is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet), #weather-home, #selected-card, .hx-pop) .hx-chip { display: inline-flex; align-items: center; gap: var(--hx-space-1); padding: calc(2px + var(--hx-chip-nudge)) var(--hx-space-2) calc(2px - var(--hx-chip-nudge)) 6px; border: 2px solid transparent; border-radius: var(--hx-radius-chip); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); white-space: nowrap; } :is(:is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet), #weather-home, #selected-card, .hx-pop) .hx-chip svg { width: 12px; height: 12px; flex: none; margin-top: calc(-2 * var(--hx-chip-nudge)); } :is(:is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet), #weather-home, #selected-card, .hx-pop) .hx-chip[data-status="completed"] { background: var(--hx-good-tint); color: var(--hx-good); } :is(:is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet), #weather-home, #selected-card, .hx-pop) .hx-chip[data-status="in_progress"] { background: var(--hx-info-solid); color: var(--hx-on-dark); } :is(:is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet), #weather-home, #selected-card, .hx-pop) .hx-chip[data-status="incomplete"] { background: var(--hx-warn-tint); color: var(--hx-warn); } :is(:is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet), #weather-home, #selected-card, .hx-pop) .hx-chip[data-status="maintenance"] { background: var(--hx-tone-grey-bg); color: var(--hx-tone-grey-ink); } :is(:is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet), #weather-home, #selected-card, .hx-pop) .hx-chip[data-status="not_started"] { background: var(--hx-card); border-color: var(--hx-muted); color: var(--hx-neutral); } :is(:is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet), #weather-home, #selected-card, .hx-pop) .hx-chip[data-status="reopened"] { background: var(--hx-reopened-tint); color: var(--hx-reopened); } /* ---------- Picker ---------------------------------------------------- */ :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-picker { display: flex; align-items: center; gap: var(--hx-space-2); width: 100%; 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); text-align: left; cursor: pointer; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-picker-name { flex: 1; min-width: 0; overflow: hidden; font-size: var(--hx-text-label); font-weight: var(--hx-weight-strong); text-overflow: ellipsis; white-space: nowrap; } /* ---------- Section cards with one title row -------------------------- */ :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-card { padding: 0 var(--hx-space-3); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-head { display: flex; align-items: center; justify-content: space-between; gap: var(--hx-space-2); width: 100%; min-height: var(--hx-target-icon); margin: 0; padding: var(--hx-space-1) 0; border: 0; background: none; color: var(--hx-ink); text-align: left; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-head h3 { margin: 0; font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); white-space: nowrap; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-toggle { cursor: pointer; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-toggle .ch-peek { margin-left: auto; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); white-space: nowrap; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-toggle .ch-peek b { color: var(--hx-ink); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-toggle h3 + .ch-square { margin-left: auto; } /* Today: three columns split by hairlines, number coloured by status, zero greyed */ :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--hx-space-3); padding-top: var(--hx-space-2); border-top: 1px solid var(--hx-hairline); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-cell { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hx-space-1); min-width: 0; min-height: var(--hx-target-icon); margin: 0; padding: var(--hx-space-1) var(--hx-space-2); border: 0; background: none; color: var(--hx-ink); text-align: left; cursor: pointer; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-cell:first-child { padding-left: 0; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-cell + .ch-cell { border-left: 1px solid var(--hx-hairline); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-cell strong { font-size: var(--hx-text-value-m); font-weight: var(--hx-weight-action); line-height: 1; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-cell-name { display: flex; align-items: center; gap: var(--hx-space-1); color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); white-space: nowrap; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-cell-name svg { width: 13px; height: 13px; flex: none; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-cell[data-status="completed"] :is(strong, svg) { color: var(--hx-good); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-cell[data-status="in_progress"] :is(strong, svg) { color: var(--hx-info); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-cell[data-status="incomplete"] :is(strong, svg) { color: var(--hx-warn); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-cell[data-zero] :is(strong, svg) { color: var(--hx-muted); } /* Rows (Next nearby, statuses, Tracker) */ :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-row { display: flex; align-items: center; gap: var(--hx-space-3); width: 100%; min-height: var(--hx-target-action); margin: 0; padding: 0; border: 0; border-top: 1px solid var(--hx-hairline); background: none; color: var(--hx-ink); font-size: var(--hx-text-body); text-align: left; cursor: pointer; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-row strong { flex: none; font-weight: var(--hx-weight-strong); white-space: nowrap; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-km { margin-left: auto; font-weight: var(--hx-weight-action); white-space: nowrap; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-farm-done { display: flex; align-items: center; gap: var(--hx-space-2); min-height: var(--hx-target-icon); margin: 0; border-top: 1px solid var(--hx-hairline); color: var(--hx-good); font-size: var(--hx-text-label); font-weight: var(--hx-weight-strong); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-farm-done svg { width: 14px; height: 14px; padding: 5px; border-radius: 50%; background: var(--hx-good-tint); box-sizing: content-box; } /* Whole campaign: bar, count rows (small › after the number), total, tracker */ :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-strip { display: flex; height: var(--hx-space-2); margin: var(--hx-space-1) 0 var(--hx-space-2); overflow: hidden; border-radius: var(--hx-space-1); background: var(--hx-track); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-strip i { display: block; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-strip i[data-status="completed"] { background: var(--hx-good); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-strip i[data-status="in_progress"] { background: var(--hx-info); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-strip i[data-status="incomplete"] { background: var(--hx-warn); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-strip i[data-status="maintenance"] { background: var(--hx-tone-grey-ink); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-strip i[data-status="reopened"] { background: var(--hx-reopened); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-count .ch-num { margin-left: auto; min-width: 3ch; font-size: var(--hx-text-title); font-weight: var(--hx-weight-action); text-align: right; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-count .ch-square { width: var(--hx-space-3); background: none; color: var(--hx-muted); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-tracker { border-top: 0; font-weight: var(--hx-weight-strong); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-tracker .ch-square { margin-left: auto; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-icon { display: grid; place-items: center; width: var(--hx-badge-size); height: var(--hx-badge-size); border-radius: var(--hx-radius-badge); background: var(--hx-tone-violet-bg); color: var(--hx-tone-violet-ink); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-icon svg { width: calc(var(--hx-icon-size) * .75); height: calc(var(--hx-icon-size) * .75); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) :is(.ch-row, .ch-cell, .ch-picker):active { background: var(--hx-page); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) :focus { outline: none; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) :focus-visible { outline: 3px solid var(--hx-focus); outline-offset: 2px; } /* Status list (#campaign-list): title + count/campaign line, rows with farm and chip */ :is(#campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #assistant-sheet) .ch-titles { flex: 1; min-width: 0; } :is(#campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #assistant-sheet) .ch-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); } :is(#campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #assistant-sheet) .ch-sub { margin: var(--hx-space-1) 0 0; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; 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; } /* WTG · campaign wraps to two lines, not "…" (full check, 5 Oct 2026) */ #campaign-list .ch-card .ch-row:first-child { border-top: 0; } #campaign-list .ch-meta { color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); } #campaign-list .ch-meta + .hx-chip { margin-left: auto; } #campaign-list .ch-row:disabled { color: var(--hx-disabled-ink); cursor: default; } /* Section title buttons (calendar): the same 32px square as + / ⌄, on the same right edge; 48px tap area. */ :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-head-button { display: grid; place-items: center end; flex: none; width: var(--hx-target-icon); height: var(--hx-target-icon); margin: 0; padding: 0; border: 0; background: none; color: var(--hx-ink); cursor: pointer; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-tracker-card { padding: 0 var(--hx-space-3); } /* Small chips in section titles (date, progress): same rounded label style as the status chips. */ :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-chip { display: inline-flex; align-items: center; margin-left: var(--hx-space-2); 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); color: var(--hx-ink); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); white-space: nowrap; vertical-align: middle; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-chip-good { margin-left: auto; background: var(--hx-good-tint); color: var(--hx-good); } /* Section icons before card titles (Next nearby, Whole campaign, Open Tracker): 32px rounded squares, tone per section. */ :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-toggle { justify-content: flex-start; gap: var(--hx-space-3); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-toggle .ch-icon { flex: none; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-icon[data-tone="blue"] { background: var(--hx-tone-blue-bg); color: var(--hx-tone-blue-ink); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-icon[data-tone="teal"] { background: var(--hx-tone-teal-bg); color: var(--hx-tone-teal-ink); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-icon[data-tone="green"] { background: var(--hx-tone-green-bg); color: var(--hx-tone-green-ink); } /* Every section title row: icon, title, then chip / square on the right; 12px apart; a long title shortens first. */ :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-today .ch-head { justify-content: flex-start; gap: var(--hx-space-3); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-today .ch-head .ch-head-button { margin-left: auto; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) :is(.ch-toggle, .ch-today .ch-head) h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) :is(.ch-toggle, .ch-today .ch-head) :is(.ch-icon, .ch-chip, .ch-square, .ch-head-button) { flex: none; } /* Narrow phones: the progress chip drops the percent so "Whole campaign" stays whole. */ @media (max-width: 380px) { :is(#campaign-home) .ch-pct { display: none; } } /* ---------- Tracker (#campaign-tracker) -------------------------------- [‹] Tracker 210 WTGs · All farms [✕] [ 2026 2H Blade External Inspection [⌄] ] ┌ ▥ Progress 105/210 · 50% ┐ bar = every status [ 🔍 Find a WTG ] [≡] same 52px height 1–15 of 210 WTGs · Remaining ┌ FKW-01B ○ Not started › [📍]┐ row = visits, square = map │ Not visited │ [ ‹ Previous ] [ Next › ] ┌ ↻ Refresh [›] ┐ admins: new, settings, Excel ===================================================================== */ #campaign-tracker .ct-message:empty, #campaign-tracker .ct-message[hidden] { display: none; } #campaign-tracker .ch-title .ct-reload[hidden] { display: none; } /* shown to inspectors only (admins refresh from their card) */ #campaign-tracker .ct-message { padding: 0 var(--hx-space-1); } #campaign-tracker .ct-progress .ch-head { justify-content: flex-start; gap: var(--hx-space-3); } #campaign-tracker .ct-progress .ch-head :is(.ch-icon, .ch-chip) { flex: none; } #campaign-tracker .ct-progress .ch-strip { margin: 0 0 var(--hx-space-3); } #campaign-tracker .ct-find { display: flex; gap: var(--hx-space-2); } #campaign-tracker .ct-find > .ct-share { flex: none; width: var(--hx-target-action); min-width: var(--hx-target-action); padding: 0; } /* a square beside the filter (review item 11) */ :is(#campaign-tracker, #campaign-map-filter) .ct-search { display: flex; flex: 1; align-items: center; gap: var(--hx-space-2); min-width: 0; min-height: var(--hx-target-action); 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-muted); } :is(#campaign-tracker, #campaign-map-filter) .ct-search:focus-within { outline: 3px solid var(--hx-focus); outline-offset: 2px; } :is(#campaign-tracker, #campaign-map-filter) .ct-search-icon { display: grid; flex: none; } :is(#campaign-tracker, #campaign-map-filter) .ct-search-icon svg { width: calc(var(--hx-icon-size) * .75); height: calc(var(--hx-icon-size) * .75); } :is(#campaign-tracker, #campaign-map-filter) .ct-search input { flex: 1; min-width: 0; height: auto; min-height: 0; margin: 0; padding: 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); font-weight: var(--hx-weight-action); outline: none; } :is(#campaign-tracker, #campaign-map-filter) .ct-search input::placeholder { color: var(--hx-muted); } #campaign-tracker .ct-filter[data-on] { border-color: var(--hx-info); background: var(--hx-tone-blue-bg); color: var(--hx-tone-blue-ink); } #campaign-tracker .ct-results { display: flex; flex-direction: column; gap: var(--hx-space-2); } #campaign-tracker .ct-list { padding: 0 0 0 var(--hx-space-3); } #campaign-tracker .ct-row { display: flex; align-items: stretch; border-top: 1px solid var(--hx-hairline); } #campaign-tracker .ct-row:first-child { border-top: 0; } #campaign-tracker .ct-main { display: flex; flex: 1; align-items: center; gap: var(--hx-space-2); min-width: 0; min-height: var(--hx-target-action); margin: 0; /* The status chip stands above the name's capitals: 2px more above, 2px less below, so the chip edge and the date sit the same distance from the lines. */ padding: calc(var(--hx-space-2) + 2px) 0 calc(var(--hx-space-2) - 2px); border: 0; background: none; color: var(--hx-ink); text-align: left; cursor: pointer; } :is(#campaign-tracker, #campaign-choose, #campaign-visits, #campaign-day, #campaign-map-filter) .ct-text { display: flex; flex: 1; flex-direction: column; gap: var(--hx-space-1); min-width: 0; } :is(#campaign-tracker, #campaign-day) .ct-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hx-space-1) var(--hx-space-2); } :is(#campaign-tracker, #campaign-day) .ct-top strong { font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); white-space: nowrap; } :is(#campaign-tracker, #campaign-choose, #campaign-visits, #campaign-day, #campaign-map-filter) .ct-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; } #campaign-tracker .ct-meta:empty { display: none; } #campaign-visits .ch-card > .wh-action { width: 100%; margin-top: var(--hx-space-2); } /* the empty Visits sheet's Check in (review item 15) */ /* a WTG with no visits shows its status chip only (review item 11, 6 Oct 2026) */ #campaign-tracker .ct-main .ch-square { width: var(--hx-space-3); background: none; color: var(--hx-muted); } #campaign-tracker .ct-map { display: grid; place-items: center; flex: none; width: calc(var(--hx-target-action) + var(--hx-space-2)); margin: 0; padding: 0; border: 0; background: none; cursor: pointer; } #campaign-tracker .ct-map:disabled { cursor: default; opacity: .4; } #campaign-tracker :is(.ct-main, .ct-map):active { background: var(--hx-page); } #campaign-tracker .ct-manage .ch-row:first-child { border-top: 0; } #campaign-tracker .ch-icon[data-tone="grey"] { background: var(--hx-tone-grey-bg); color: var(--hx-tone-grey-ink); } #campaign-tracker .ct-manage .ch-row .ch-square { margin-left: auto; } /* ---------- Choose campaign (#campaign-choose): name, "210 WTGs · 105/210 done · 50%", tick square on the chosen one */ :is(#campaign-choose, #campaign-map-filter) .cc-row:first-child { border-top: 0; } :is(#campaign-choose, #campaign-map-filter) .cc-row { padding: var(--hx-space-2) 0; } :is(#campaign-choose, #campaign-map-filter) .cc-name { font-weight: var(--hx-weight-strong); overflow-wrap: anywhere; } /* wraps: the full name shows when choosing (was cut by 2 px at 360 px) */ :is(#campaign-choose, #campaign-map-filter) .cc-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); } :is(#campaign-choose, #campaign-map-filter) .cc-tick.on { background: var(--hx-good-solid); } :is(#campaign-choose, #campaign-map-filter) .cc-tick svg { width: calc(var(--hx-icon-size) * .75); height: calc(var(--hx-icon-size) * .75); } /* ---------- Filters (#campaign-filters): one card per choice, even option grid, chosen = the segmented "on" tile (5 Oct 2026; was blue) ---------- */ :is(#campaign-filters, #campaign-share, #campaign-visits, #campaign-visit-form, #campaign-period, #campaign-status-change, #campaign-map-filter, #weather-report) .cf-card { padding: var(--hx-space-3); } :is(#campaign-filters, #campaign-share, #campaign-visits, #campaign-visit-form, #campaign-period, #campaign-status-change, #campaign-map-filter, #weather-report) .cf-card h3 { margin: 0 0 var(--hx-space-2); font-size: var(--hx-text-label); font-weight: var(--hx-weight-strong); } :is(#campaign-filters, #campaign-share, #campaign-visits, #campaign-visit-form, #campaign-period, #campaign-status-change, #campaign-map-filter, #weather-report) .cf-grid { display: grid; grid-template-columns: repeat(var(--cf-cols), minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--hx-space-2); } :is(#campaign-filters, #campaign-share, #campaign-visits, #campaign-visit-form, #campaign-period, #campaign-status-change, #campaign-map-filter, #weather-report) .cf-grid.cf-lead > :first-child { grid-column: 1 / -1; } /* 'All' on its own full row so the rest stay even */ :is(#campaign-filters, #campaign-share, #campaign-visits, #campaign-visit-form, #campaign-period, #campaign-status-change, #campaign-map-filter, #weather-report) .cf-opt { display: flex; align-items: center; justify-content: center; gap: var(--hx-space-1); min-width: 0; min-height: var(--hx-target-icon); margin: 0; padding: 0 var(--hx-space-2); 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-label); font-weight: var(--hx-weight-action); cursor: pointer; } :is(#campaign-filters, #campaign-share, #campaign-visits, #campaign-visit-form, #campaign-period, #campaign-status-change, #campaign-map-filter, #weather-report) .cf-opt[aria-pressed="true"] { border-color: var(--hx-segment-ink); background: var(--hx-segment-on); color: var(--hx-segment-ink); box-shadow: inset 0 0 0 1px var(--hx-segment-ink); font-weight: var(--hx-weight-strong); } /* One segmented control (UI audit, 6 Oct 2026): a one-row choice (Status, Sort by, WTGs per page, Result, Today / Yesterday / Last 7 days) sits on the track; a grid of two or more rows (All + six farms, Remaining) keeps separate tiles with the same chosen look. */ :is(#campaign-filters, #campaign-visit-form, #campaign-period, #campaign-status-change, #campaign-map-filter, #weather-report) .cf-grid.cf-row { gap: var(--hx-space-1); padding: var(--hx-space-1); border-radius: var(--hx-radius-segment); background: var(--hx-track); } :is(#campaign-filters, #campaign-visit-form, #campaign-period, #campaign-status-change, #campaign-map-filter, #weather-report) .cf-grid.cf-row .cf-opt { min-height: var(--hx-icon-button); border: 0; border-radius: calc(var(--hx-radius-segment) - 2px); background: none; color: var(--hx-muted); } :is(#campaign-filters, #campaign-visit-form, #campaign-period, #campaign-status-change, #campaign-map-filter, #weather-report) .cf-grid.cf-row .cf-opt[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); } :is(#campaign-filters, #campaign-share, #campaign-visits, #campaign-visit-form, #campaign-period, #campaign-status-change, #campaign-map-filter, #weather-report) .cf-mark { display: grid; flex: none; } :is(#campaign-filters, #campaign-share, #campaign-visits, #campaign-visit-form, #campaign-period, #campaign-status-change, #campaign-map-filter, #weather-report) .cf-mark svg { width: 13px; height: 13px; } :is(#campaign-filters, #campaign-share, #campaign-visits, #campaign-visit-form, #campaign-period, #campaign-status-change, #campaign-map-filter, #weather-report) .cf-mark[data-status="completed"] { color: var(--hx-good); } :is(#campaign-filters, #campaign-share, #campaign-visits, #campaign-visit-form, #campaign-period, #campaign-status-change, #campaign-map-filter, #weather-report) .cf-mark[data-status="in_progress"] { color: var(--hx-info); } :is(#campaign-filters, #campaign-share, #campaign-visits, #campaign-visit-form, #campaign-period, #campaign-status-change, #campaign-map-filter, #weather-report) .cf-mark[data-status="incomplete"] { color: var(--hx-warn); } :is(#campaign-filters, #campaign-share, #campaign-visits, #campaign-visit-form, #campaign-period, #campaign-status-change, #campaign-map-filter, #weather-report) .cf-mark[data-status="maintenance"] { color: var(--hx-tone-grey-ink); } :is(#campaign-filters, #campaign-share, #campaign-visits, #campaign-visit-form, #campaign-period, #campaign-status-change, #campaign-map-filter, #weather-report) .cf-mark[data-status="reopened"] { color: var(--hx-reopened); } :is(#campaign-filters, #campaign-share, #campaign-visits, #campaign-visit-form, #campaign-period, #campaign-status-change, #campaign-map-filter, #weather-report) .cf-opt[aria-pressed="true"] .cf-mark { color: inherit; } :is(#campaign-filters, #campaign-share, #campaign-visits, #campaign-visit-form, #campaign-period, #campaign-status-change, #campaign-map-filter, #weather-report) .wh-action.cf-primary { border-color: var(--hx-solid); background: var(--hx-solid); color: var(--hx-solid-ink); font-weight: var(--hx-weight-strong); box-shadow: var(--hx-glow-main); } /* ---------- Visits (#campaign-visits) and Photo (#campaign-photo) ---------- [‹] Visits WTB-034 · 1 visit [✕] ┌ ◷ 02 OCT 26 ✓ Completed ┐ │ Time 10:38 – 11:17 · 39 min │ fact rows, value right │ Checked in by Somchai │ │ Note … │ │ ▣ Photo 1 Taken 02 OCT 26, 10:50 › │ ┌ ▤ Activity 4 ┐ newest first ===================================================================== */ :is(#campaign-visits, #campaign-photo) .ch-card .ch-head { justify-content: flex-start; gap: var(--hx-space-3); } :is(#campaign-visits, #campaign-photo) .ch-card .ch-head :is(.ch-icon, .hx-chip, .ch-chip) { flex: none; } #campaign-visits .ch-card .ch-head .hx-chip { margin-left: auto; } #campaign-visits .ch-card .ch-head .ch-chip { margin-left: 0; } :is(#campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-map-filter) .cv-fact { display: flex; align-items: center; justify-content: space-between; gap: var(--hx-space-3); min-height: calc(var(--hx-target-icon) - var(--hx-space-2)); border-top: 1px solid var(--hx-hairline); color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); } :is(#campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-map-filter) .ch-card > .cv-fact:first-child { border-top: 0; } :is(#campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-map-filter) .cv-fact span { flex: none; } :is(#campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-map-filter) .cv-fact b { min-width: 0; color: var(--hx-ink); font-weight: var(--hx-weight-strong); text-align: right; overflow-wrap: anywhere; } #campaign-visits .cv-note { display: flex; flex-direction: column; gap: var(--hx-space-1); padding: var(--hx-space-2) 0 var(--hx-space-3); border-top: 1px solid var(--hx-hairline); } #campaign-visits .cv-note span { color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); } #campaign-visits .cv-note p { margin: 0; color: var(--hx-ink); font-size: var(--hx-text-body); line-height: var(--hx-leading-body); overflow-wrap: anywhere; white-space: pre-line; } #campaign-visits .cv-photo { padding: var(--hx-space-2) 0; } #campaign-visits .cv-photo .ch-square { margin-left: auto; } #campaign-visits .cv-photo .ct-text { flex: 1; } #campaign-visits .cv-act { display: flex; padding: var(--hx-space-2) 0; border-top: 1px solid var(--hx-hairline); } #campaign-visits .cv-act strong { font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); } #campaign-visits .cv-detail { color: var(--hx-ink); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); overflow-wrap: anywhere; } #campaign-visits .cv-act .ct-meta { white-space: normal; } #campaign-photo .cv-frame { display: grid; place-items: center; min-height: calc(var(--hx-target-action) * 3); padding: var(--hx-space-3); } #campaign-photo .cv-image { display: block; width: 100%; height: auto; border-radius: var(--hx-radius-badge); } /* ---------- Check in / Check out (#campaign-visit-form) ---------- */ :is(#campaign-visit-form, #campaign-status-change, #weather-report) .cf-card h3 { display: flex; align-items: baseline; } #campaign-visit-form textarea, #campaign-status-change textarea, #weather-report textarea { box-sizing: border-box; display: block; width: 100%; min-height: calc(var(--hx-target-action) * 2); margin: 0; padding: var(--hx-space-2) var(--hx-space-3); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-badge); background: var(--hx-page); color: var(--hx-ink); font-family: var(--hx-font); font-size: var(--hx-text-body); line-height: var(--hx-leading-body); resize: vertical; } #campaign-visit-form textarea::placeholder, #campaign-status-change textarea::placeholder, #weather-report textarea::placeholder { color: var(--hx-muted); } #campaign-visit-form textarea:focus-visible, #campaign-status-change textarea:focus-visible, #weather-report textarea:focus-visible { outline: 3px solid var(--hx-focus); outline-offset: 2px; } #campaign-visit-form .cv-pick { position: relative; width: 100%; box-sizing: border-box; } #campaign-visit-form .cv-pick:focus-within { outline: 3px solid var(--hx-focus); outline-offset: 2px; } #campaign-visit-form .cv-file { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } :is(#campaign-visit-form, #campaign-period, #campaign-status-change, #weather-report) .cv-msg:empty { display: none; } /* ---------- Choose dates (#campaign-period), day list (#campaign-day), Reopen / Maintenance (#campaign-status-change) ---------- */ #campaign-period .cp-row { display: flex; align-items: center; justify-content: space-between; gap: var(--hx-space-3); min-height: var(--hx-target-action); border-top: 1px solid var(--hx-hairline); color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); } #campaign-period .cp-row:last-child { margin-bottom: calc(-1 * var(--hx-space-2)); } #campaign-period .cp-row input { box-sizing: border-box; min-width: 0; min-height: var(--hx-target-icon); margin: 0; padding: 0 var(--hx-space-3); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-badge); background: var(--hx-page); color: var(--hx-ink); font-family: var(--hx-font); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); } #campaign-period .cp-row input:focus-visible { outline: 3px solid var(--hx-focus); outline-offset: 2px; } #campaign-day .cd-list { padding: 0 var(--hx-space-3); } #campaign-day .cd-row { padding: calc(var(--hx-space-2) + 2px) 0 calc(var(--hx-space-2) - 2px); } #campaign-day .cd-row:first-child { border-top: 0; } #campaign-day .cd-row .ct-text { flex: 1; } #campaign-day .cd-row:disabled { color: var(--hx-disabled-ink); cursor: default; } #campaign-status-change .ch-card .ch-head .hx-chip { margin-left: auto; } /* ---------- Show on map (#campaign-map-filter): step bar, then the step's cards ---------- */ #campaign-map-filter .mf-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hx-space-1); padding: 0 var(--hx-space-1); } #campaign-map-filter .mf-steps i { height: var(--hx-space-1); border-radius: var(--hx-space-1); background: var(--hx-track); } #campaign-map-filter .mf-steps i[data-on] { background: var(--hx-ink); } #campaign-map-filter .mf-total { justify-content: space-between; } #campaign-map-filter .mf-total strong { font-size: var(--hx-text-value-m); font-weight: var(--hx-weight-strong); line-height: 1; } #campaign-map-filter .cc-row { padding: var(--hx-space-1) 0; } /* ---------- Weather warning Details (#weather-warning-detail) ---------- Weather warning [✕] ┌ [⚠] Rain or showers possible. ┐ amber; stop = red │ Forecast warning │ ┌ Forecast for WTB farm centre · 02 Oct, 13:15 ┐ │ Rain is possible near this farm. … │ [ Open Weather Watch ] ===================================================================== */ #weather-warning-detail .ch-title h2 { flex: 1; margin: 0; font-size: var(--hx-text-display); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); } #weather-warning-detail .wd-status { display: flex; align-items: flex-start; gap: var(--hx-space-3); padding: var(--hx-space-3); border-color: var(--hx-warn); background: var(--hx-warn-tint); } #weather-warning-detail .wd-status[hidden], #weather-warning-detail .wd-facts[hidden], #weather-warning-detail [hidden] { display: none; } #weather-warning-detail .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-card); color: var(--hx-warn); } #weather-warning-detail .ww-icon svg { width: calc(var(--hx-icon-size) * .75); height: calc(var(--hx-icon-size) * .75); } #weather-warning-detail .wd-status[data-severity="stop"] { border-color: var(--hx-danger); background: var(--hx-danger-tint); } #weather-warning-detail .wd-status[data-severity="stop"] .ww-icon { background: var(--hx-danger-solid); color: var(--hx-on-dark); } #weather-warning-detail .wd-status[data-severity="inactive"] { border-color: var(--hx-hairline); background: var(--hx-card); } #weather-warning-detail .wd-status[data-severity="inactive"] .ww-icon { background: var(--hx-page); color: var(--hx-muted); } #weather-warning-detail .wd-text { display: flex; flex-direction: column; gap: var(--hx-space-1); min-width: 0; } #weather-warning-detail .weather-detail-hazard { color: var(--hx-ink); font-size: var(--hx-text-title); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); } #weather-warning-detail .weather-detail-state { margin: 0; color: var(--hx-ink); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); } #weather-warning-detail .wd-facts, #weather-warning-detail .wd-expired { display: flex; flex-direction: column; padding: var(--hx-space-1) var(--hx-space-3); } #weather-warning-detail .wd-facts > p, #weather-warning-detail .wd-expired > p { margin: 0; padding: var(--hx-space-2) 0; color: var(--hx-ink); font-size: var(--hx-text-body); line-height: var(--hx-leading-body); } #weather-warning-detail .wd-facts > p + p, #weather-warning-detail .wd-expired > p + p { border-top: 1px solid var(--hx-hairline); } #weather-warning-detail .weather-detail-meta, #weather-warning-detail .weather-expired-time { color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); } #weather-warning-detail .wd-head { display: flex; align-items: center; gap: var(--hx-space-3); min-height: var(--hx-target-action); font-size: var(--hx-text-body); } #weather-warning-detail .ch-icon[data-tone="grey"] { background: var(--hx-tone-grey-bg); color: var(--hx-tone-grey-ink); } #weather-warning-detail .weather-warning-detail-actions { display: grid; } #weather-warning-detail .wh-action.cf-primary { border-color: var(--hx-solid); background: var(--hx-solid); color: var(--hx-solid-ink); font-weight: var(--hx-weight-strong); box-shadow: var(--hx-glow-main); } /* ---------- Report weather (#weather-report) ---------- Report weather [✕] ┌ Where did you see it? [ WTB-023 (selected WTG) ⌄ ] ┐ ┌ What do you see? [☔ Rain or shower] [≡ Fog hides blades] … one per row ┐ ┌ Details · optional [ ] ┐ [ Cancel ] [ Send report ] ===================================================================== */ #weather-report .ch-title h2 { flex: 1; margin: 0; font-size: var(--hx-text-display); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); } #weather-report form.ch-body { margin: 0; padding: 0; } #weather-report .wr-select { box-sizing: border-box; width: 100%; 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-badge); background: var(--hx-page); color: var(--hx-ink); font-family: var(--hx-font); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); } #weather-report .wr-select:focus-visible { outline: 3px solid var(--hx-focus); outline-offset: 2px; } #weather-report .wr-kind { justify-content: flex-start; gap: var(--hx-space-2); min-height: var(--hx-target-action); padding: 0 var(--hx-space-2); text-align: left; } #weather-report .wr-kind .ch-icon { flex: none; width: 28px; height: 28px; } #weather-report .ch-icon[data-tone="blue"] { background: var(--hx-tone-blue-bg); color: var(--hx-tone-blue-ink); } #weather-report .ch-icon[data-tone="grey"] { background: var(--hx-tone-grey-bg); color: var(--hx-tone-grey-ink); } #weather-report .ch-icon[data-tone="amber"] { background: var(--hx-tone-amber-bg); color: var(--hx-tone-amber-ink); } #weather-report .ch-icon[data-tone="green"] { background: var(--hx-tone-green-bg); color: var(--hx-tone-green-ink); } #weather-report [hidden] { display: none; } /* ---------- Bookmarks (#places-dialog) ---------- Bookmarks [✕] [ 🔍 Search bookmarks ] [ Nearby ] same 52px height ┌ Nearby services: Offices · Police · Hospitals · Fire · Gas (rows) ┐ only when Nearby is open Nearest first · by road ┌ ร้านข้าวดาวเรือง 100 เมนู watabak 30.1 km ┐ name · road distance │ Shared │ │ [▲] [G] [✎] [🕑] four even squares │ │ Details › │ ===================================================================== */ /* Old #places-dialog sizing (width min(480px…), centred text) is more specific than the shared sheet rule. */ #places-dialog[data-hx] { width: 100%; max-width: 100%; border: 0; padding: var(--hx-space-2) var(--hx-space-3) calc(var(--hx-space-3) + env(safe-area-inset-bottom, 0px)); text-align: left; } @media (min-width: 761px) { #places-dialog[data-hx] { width: min(var(--hx-dialog-width), calc(100% - 2 * var(--hx-gutter))); padding-top: calc(var(--hx-space-3) + var(--hx-space-1)); } } #places-dialog[data-hx] .ui-dialog-heading { display: flex; align-items: center; gap: var(--hx-space-2); min-height: var(--hx-target-action); margin: 0; padding: 0 var(--hx-space-1); border: 0; background: none; color: var(--hx-ink); position: static; } #places-dialog[data-hx] .ui-dialog-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); } #places-dialog[data-hx] #places-close { display: grid; place-items: center; flex: none; width: var(--hx-target-action); height: var(--hx-target-action); min-width: 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); } #places-dialog[data-hx] #places-close svg { width: var(--hx-icon-size); height: var(--hx-icon-size); } #places-dialog[data-hx] #places-note { margin: 0; padding: 0 var(--hx-space-1); color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #places-dialog[data-hx] #places-note:empty { display: none; } #places-dialog[data-hx] .bookmark-toolbar { display: flex; gap: var(--hx-space-2); margin: 0; padding: 0; } #places-dialog[data-hx] label.bookmark-search { display: flex; flex: 1; align-items: center; min-width: 0; height: var(--hx-target-action); margin: 0; padding: 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); } #places-dialog[data-hx] label.bookmark-search:focus-within { outline: 3px solid var(--hx-focus); outline-offset: 2px; } #places-dialog[data-hx] #place-filter { 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); } #places-dialog[data-hx] #place-filter::placeholder { color: var(--hx-muted); opacity: 1; } #places-dialog[data-hx] .places-more { flex: none; margin: 0; padding: 0; border: 0; background: none; } #places-dialog[data-hx] .places-more > summary { display: grid; place-items: center; box-sizing: border-box; min-width: calc(var(--hx-target-action) * 1.75); height: var(--hx-target-action); 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-label); font-weight: var(--hx-weight-strong); list-style: none; cursor: pointer; } #places-dialog[data-hx] .places-more > summary::-webkit-details-marker { display: none; } #places-dialog[data-hx] .bookmark-toolbar .places-more[open] { position: static; width: auto; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; } #places-dialog[data-hx] .places-more[open] > summary { border-color: var(--hx-info); background: var(--hx-tone-blue-bg); color: var(--hx-tone-blue-ink); } #places-dialog[data-hx] .service-shortcuts.bookmark-nearby { display: flex; flex-direction: column; grid-template-columns: none; grid-auto-rows: auto; gap: 0; margin: 0; padding: 0 var(--hx-space-3); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); } #places-dialog[data-hx] .service-shortcuts.bookmark-nearby[hidden] { display: none; } #places-dialog[data-hx] .service-shortcuts.bookmark-nearby button { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--hx-space-3); width: 100%; height: auto; min-height: var(--hx-target-action); margin: 0; padding: 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; grid-column: auto; } #places-dialog[data-hx] .service-shortcuts.bookmark-nearby button:first-child { border-top: 0; } #places-dialog[data-hx] .service-shortcuts.bookmark-nearby button svg { box-sizing: content-box; flex: none; width: calc(var(--hx-icon-size) * .75); height: calc(var(--hx-icon-size) * .75); padding: 6px; border-radius: var(--hx-radius-badge); background: var(--hx-tone-blue-bg); color: var(--hx-tone-blue-ink); } #places-dialog[data-hx] .service-shortcuts.bookmark-nearby button span { flex: 1; text-align: left; font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); } #places-dialog[data-hx] .service-shortcuts.bookmark-nearby button::after { content: '›'; color: var(--hx-muted); font-size: var(--hx-text-title); font-weight: var(--hx-weight-action); } #places-dialog[data-hx] #place-list { display: flex; flex-direction: column; gap: var(--hx-space-2); margin: 0; padding: 0; } #places-dialog[data-hx] #place-list > .bookmark-distance { margin: 0; padding: 0 var(--hx-space-1); color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #places-dialog[data-hx] #place-list .bookmark-list-card { display: flex; flex-direction: column; align-items: stretch; gap: var(--hx-space-2); text-align: left; margin: 0; padding: var(--hx-space-3); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); box-shadow: none; } #places-dialog[data-hx] #place-list .bookmark-list-heading { display: flex; align-items: flex-start; gap: var(--hx-space-3); margin: 0; padding: 0; } #places-dialog[data-hx] #place-list .bookmark-title { flex: 1; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--hx-ink); font-family: var(--hx-font); text-align: left; cursor: pointer; } #places-dialog[data-hx] #place-list .bookmark-title strong { display: block; font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); overflow-wrap: anywhere; } #places-dialog[data-hx] #place-list .bookmark-list-distance { flex: none; margin: 0; padding: 0; border: 0; background: none; color: var(--hx-ink); font-size: var(--hx-text-title); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); white-space: nowrap; } #places-dialog[data-hx] #place-list .bookmark-summary { display: flex; flex-direction: column; gap: var(--hx-space-1); margin: 0; padding: 0; border: 0; background: none; } #places-dialog[data-hx] #place-list .bookmark-summary .bookmark-distance { margin: 0; padding: 0; background: none; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #places-dialog[data-hx] #place-list .bookmark-description { margin: 0; color: var(--hx-ink); font-size: var(--hx-text-label); } #places-dialog[data-hx] #place-list .place-navigation-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hx-space-2); margin: 0; padding: 0; } #places-dialog[data-hx] #place-list .place-navigation-actions > * { display: grid; place-items: center; box-sizing: border-box; min-width: 0; width: auto; height: var(--hx-target-icon); min-height: var(--hx-target-icon); 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; } #places-dialog[data-hx] #place-list .place-navigation-actions > :first-child { border-color: var(--hx-solid); background: var(--hx-solid); color: var(--hx-solid-ink); box-shadow: var(--hx-glow-main); } #places-dialog[data-hx] #place-list .place-navigation-actions > :disabled { border-color: var(--hx-hairline); background: var(--hx-page); color: var(--hx-disabled-ink); cursor: default; } #places-dialog[data-hx] #place-list .place-navigation-actions svg { width: calc(var(--hx-icon-size) * .85); height: calc(var(--hx-icon-size) * .85); } #places-dialog[data-hx] #place-list .bookmark-provenance-details { margin: 0; padding: 0; border-top: 1px solid var(--hx-hairline); } #places-dialog[data-hx] #place-list .bookmark-provenance-details > summary { display: flex; align-items: center; min-height: var(--hx-target-icon); margin-bottom: calc(-1 * var(--hx-space-3)); color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); text-decoration: none; list-style: none; cursor: pointer; } #places-dialog[data-hx] #place-list .bookmark-provenance-details > summary::-webkit-details-marker { display: none; } #places-dialog[data-hx] #place-list .bookmark-provenance-details > summary::after { content: '⌄'; margin-left: auto; font-size: var(--hx-text-title); } #places-dialog[data-hx] #place-list .bookmark-provenance-details[open] > summary { margin-bottom: 0; } #places-dialog[data-hx] #place-list .bookmark-provenance-details[open] > summary::after { content: '⌃'; } /* ⌄ / ⌃ = expands in place; › = opens another screen (UI audit, 6 Oct 2026) */ #places-dialog[data-hx] #place-list .bookmark-attribution { display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; background: none; } #places-dialog[data-hx] #place-list .bookmark-attribution-row { display: flex; align-items: center; justify-content: space-between; gap: var(--hx-space-3); min-height: calc(var(--hx-target-icon) - var(--hx-space-2)); border-top: 1px solid var(--hx-hairline); color: var(--hx-muted); font-size: var(--hx-text-label); } #places-dialog[data-hx] #place-list .bookmark-attribution-row > :last-child { color: var(--hx-ink); font-weight: var(--hx-weight-strong); } #places-dialog[data-hx] #place-list .bookmark-creator { min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--hx-tone-blue-ink); font-family: var(--hx-font); font-size: var(--hx-text-label); font-weight: var(--hx-weight-strong); text-decoration: underline; } #places-dialog[data-hx] :is(.places-more > summary, .bookmark-title, .place-navigation-actions > *, .service-shortcuts button):focus-visible { outline: 3px solid var(--hx-focus); outline-offset: 2px; } /* Editor (new / edit bookmark): plain fields and an even Save | Cancel pair */ #places-dialog[data-hx] #place-editor:not([hidden]) { display: flex; flex-direction: column; gap: var(--hx-space-2); margin: 0; padding: var(--hx-space-3); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); } #places-dialog[data-hx] #place-editor label { display: flex; flex-direction: column; gap: var(--hx-space-1); color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-strong); } #places-dialog[data-hx] #place-editor :is(input:not([type="checkbox"]), select, textarea) { box-sizing: border-box; width: 100%; min-height: var(--hx-target-icon); margin: 0; padding: var(--hx-space-2) var(--hx-space-3); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-badge); background: var(--hx-page); color: var(--hx-ink); font-family: var(--hx-font); font-size: var(--hx-text-body); } #places-dialog[data-hx] #place-editor .place-editor-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hx-space-2); } #places-dialog[data-hx] #place-editor .place-editor-actions button { min-height: var(--hx-target-action); margin: 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); } #places-dialog[data-hx] #place-editor .place-editor-actions .ui-action--primary { border-color: var(--hx-solid); background: var(--hx-solid); color: var(--hx-solid-ink); font-weight: var(--hx-weight-strong); box-shadow: var(--hx-glow-main); } #places-dialog[data-hx] #place-editor #place-delete { grid-column: 1 / -1; border-color: var(--hx-danger); color: var(--hx-danger); } #places-dialog[data-hx] #place-editor #place-delete[hidden] { display: none; } /* Bookmark actions (review item 14, 6 Oct 2026): icon with its word under it — Navigate, Google, Edit, History — never icon-only */ #places-dialog .place-navigation-actions .place-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--hx-target-action); padding: var(--hx-space-1) 0; } #places-dialog .place-navigation-actions .place-action svg { width: 20px; height: 20px; } #places-dialog .place-navigation-actions .place-action { text-decoration: none; } #places-dialog .place-action-label { font-family: var(--hx-font); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); line-height: var(--hx-leading-head); } /* Nearby services page (Bookmarks → Nearby → Hospitals …): back square + title, even choice buttons, one card per place — name, road distance, Navigate | Google Maps (even), phone rows with a green call square. */ #places-dialog[data-hx].service-page > :not(.service-results) { display: none; } #places-dialog[data-hx] .service-results:not([hidden]) { display: flex; flex-direction: column; gap: var(--hx-space-2); margin: 0; padding: 0; border: 0; background: none; } #places-dialog[data-hx] .service-results .service-page-head { display: flex; align-items: center; gap: var(--hx-space-2); min-height: var(--hx-target-action); margin: 0; padding: 0; border: 0; background: none; color: var(--hx-ink); position: static; } #places-dialog[data-hx] .service-results .service-page-head h3 { 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); } #places-dialog[data-hx] .service-results .service-back { display: grid; place-items: center; flex: none; width: var(--hx-target-action); height: var(--hx-target-action); min-width: 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); } #places-dialog[data-hx] .service-results .service-back svg { width: var(--hx-icon-size); height: var(--hx-icon-size); } #places-dialog[data-hx] .service-results :is(.service-tabs, .office-filters, .fuel-filters) { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--hx-space-2); margin: 0; padding: 0; border: 0; background: none; } #places-dialog[data-hx] .service-results :is(.service-tabs, .office-filters, .fuel-filters) > button { box-shadow: none; display: flex; align-items: center; justify-content: center; gap: var(--hx-space-1); min-width: 0; min-height: var(--hx-target-icon); margin: 0; padding: 0 var(--hx-space-2); 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-label); font-weight: var(--hx-weight-action); } #places-dialog[data-hx] .service-results :is(.service-tabs, .office-filters, .fuel-filters) > button[aria-pressed="true"] { border-color: var(--hx-segment-ink); background: var(--hx-segment-on); color: var(--hx-segment-ink); box-shadow: inset 0 0 0 1px var(--hx-segment-ink); font-weight: var(--hx-weight-strong); } #places-dialog[data-hx] .service-results > p { margin: 0; padding: 0 var(--hx-space-1); color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #places-dialog[data-hx] .service-results > p:empty { display: none; } #places-dialog[data-hx] .service-results .service-result-list { display: flex; flex-direction: column; gap: var(--hx-space-2); margin: 0; padding: 0; } #places-dialog[data-hx] .service-results .service-result-list article { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hx-space-2); margin: 0; padding: var(--hx-space-3); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); box-shadow: none; text-align: left; } #places-dialog[data-hx] .service-results .service-result-list article > strong { grid-column: 1 / -1; margin: 0; color: var(--hx-ink); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); } #places-dialog[data-hx] .service-results .service-result-list article > small { grid-column: 1 / -1; margin: calc(-1 * var(--hx-space-1)) 0 0; padding: 0; border: 0; background: none; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #places-dialog[data-hx] .service-results .service-result-list article > a { display: grid; place-items: center; box-sizing: border-box; min-width: 0; height: var(--hx-target-icon); 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; } #places-dialog[data-hx] .service-results .service-result-list article > a.service-map-link { border-color: var(--hx-solid); background: var(--hx-solid); color: var(--hx-solid-ink); box-shadow: var(--hx-glow-main); } #places-dialog[data-hx] .service-results .service-result-list article > a svg { width: calc(var(--hx-icon-size) * .85); height: calc(var(--hx-icon-size) * .85); } #places-dialog[data-hx] .service-results .service-result-list article > :only-of-type:is(a) { grid-column: 1 / -1; } #places-dialog[data-hx] .service-results .service-phones { grid-column: 1 / -1; display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; background: none; } #places-dialog[data-hx] .service-results .service-phone-row { display: flex; align-items: center; justify-content: space-between; gap: var(--hx-space-3); min-height: var(--hx-target-action); margin: 0; padding: 0; border-top: 1px solid var(--hx-hairline); background: none; } #places-dialog[data-hx] .service-results .service-phone-row > strong { color: var(--hx-ink); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); } #places-dialog[data-hx] .service-results .service-phone-row > button { display: grid; place-items: center; flex: none; width: var(--hx-target-icon); height: var(--hx-target-icon); min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: var(--hx-radius-card); background: var(--hx-good-solid); color: var(--hx-on-dark); } #places-dialog[data-hx] .service-results .service-phone-row > button span { display: grid; place-items: center; color: inherit; } #places-dialog[data-hx] .service-results .service-phone-row > button svg { width: calc(var(--hx-icon-size) * .85); height: calc(var(--hx-icon-size) * .85); color: inherit; } /* Older general rules move these parts around (order / grid areas); keep the reading order: name, distance, Navigate | Google Maps, phones. */ #places-dialog[data-hx] .service-results .service-result-list article > * { order: 0; grid-row: auto; grid-area: auto; position: static; } #places-dialog[data-hx] .service-results .service-result-list article > :is(strong, small, .service-phones) { grid-column: 1 / -1; } #places-dialog[data-hx] .service-results .service-result-list article > a { grid-column: auto; width: auto; } /* ---------- Navigation message (#navigation-error): "Location access needed" / "Cannot start guidance" ---------- Navigation [✕] ┌ [⚠] Location access needed ┐ amber card ┌ Allow location access to show your position. ┐ [ OK ] [ Open settings ] even pair; OK alone fills the row */ /* Old dialog sizing and body spacing for #navigation-error are more specific than the shared sheet rule. */ #navigation-error[data-hx] { width: 100%; max-width: 100%; border: 0; padding: var(--hx-space-2) var(--hx-space-3) calc(var(--hx-space-3) + env(safe-area-inset-bottom, 0px)); text-align: left; } @media (min-width: 761px) { #navigation-error[data-hx] { width: min(var(--hx-dialog-width), calc(100% - 2 * var(--hx-gutter))); padding-top: calc(var(--hx-space-3) + var(--hx-space-1)); } } #navigation-error[data-hx] .navigation-error-body { margin: 0; padding: 0; border: 0; background: none; } #navigation-error[data-hx] .navigation-error-actions { margin: 0; padding: 0; border: 0; } #navigation-error .ch-title h2 { flex: 1; margin: 0; font-size: var(--hx-text-display); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); } #navigation-error .ne-status { display: flex; align-items: center; gap: var(--hx-space-3); padding: var(--hx-space-3); border-color: var(--hx-warn); background: var(--hx-warn-tint); } #navigation-error .ne-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-card); color: var(--hx-warn); } #navigation-error .ne-icon svg { width: calc(var(--hx-icon-size) * .75); height: calc(var(--hx-icon-size) * .75); } #navigation-error .navigation-error-heading { color: var(--hx-ink); font-size: var(--hx-text-title); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); } #navigation-error .ne-facts { padding: var(--hx-space-3); } #navigation-error .ne-facts p { margin: 0; color: var(--hx-ink); font-size: var(--hx-text-body); line-height: var(--hx-leading-body); } #navigation-error .navigation-error-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--hx-space-2); margin: 0; padding: 0; border: 0; } #navigation-error .navigation-error-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); box-shadow: none; font-family: var(--hx-font); font-size: var(--hx-text-body); font-weight: var(--hx-weight-action); } #navigation-error .navigation-error-actions .ui-action--primary { border-color: var(--hx-solid); background: var(--hx-solid); color: var(--hx-solid-ink); font-weight: var(--hx-weight-strong); box-shadow: var(--hx-glow-main); } #navigation-error .navigation-error-actions .permission-shortcut { order: 2; } /* ---------- Weather Watch (#weather-panel) — approved proposal, ui-review/weather-watch-proposal.html ---------- Weather Watch Updated 14:30 · Thailand time [↻] [✕] [ ◎ My location · GPS ±8 m ⌄ ] place picker ┌ Rain 15 % ┐ ┌ Gusts 6.2 m/s ┐ Rain first ┌ Thundery 31 °C ┐ ┌ Next hour Storm ┐ ┌ ◷ Next 2 hours: 15:00 · 14% rain · gust 7.7 · Storm possible … ┐ [ Report ] [ Lightning ] / [ Find WTG ] [ All farms ] even 2 × 2 ┌ Rain maps + │ Stop if you see + │ Next 12 hours + │ Next 3 days + ┐ ===================================================================== */ #weather-panel[data-hx] { text-align: left; } #weather-panel[data-hx] > :is(.menu-heading, .weather-location-step, .weather-workspace) { margin: 0; } #weather-panel .ww-titles { flex: 1; min-width: 0; } #weather-panel .ww-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); } #weather-panel .ww-titles [role="status"] { margin: var(--hx-space-1) 0 0; padding: 0; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #weather-panel .weather-heading-actions { display: flex; flex: none; gap: var(--hx-space-2); } #weather-panel .weather-heading-actions svg { width: var(--hx-icon-size); height: var(--hx-icon-size); } #weather-panel .weather-workspace, #weather-panel .weather-overview, #weather-panel .weather-near-term, #weather-panel .weather-alternatives, #weather-panel .weather-location-step { display: flex; flex-direction: column; gap: var(--hx-space-2); margin: 0; padding: 0; border: 0; background: none; } #weather-panel :is(.weather-workspace, .weather-location-step, .weather-alternatives, .weather-near-term)[hidden], #weather-panel [hidden] { display: none; } #weather-panel .ww-place { display: flex; align-items: center; gap: var(--hx-space-3); width: 100%; 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); text-align: left; cursor: pointer; } #weather-panel .ww-place .weather-location { flex: 1; min-width: 0; margin: 0; overflow: hidden; color: var(--hx-ink); font-size: var(--hx-text-label); font-weight: var(--hx-weight-strong); text-overflow: ellipsis; white-space: nowrap; } #weather-panel .ch-square { 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-ink); } #weather-panel .ch-square svg { width: calc(var(--hx-icon-size) * .75); height: calc(var(--hx-icon-size) * .75); } #weather-panel .weather-now-next { margin: 0; padding: 0; border: 0; background: none; color: var(--hx-muted); font-size: var(--hx-text-label); } #weather-panel .ww-head { display: flex; align-items: center; gap: var(--hx-space-3); min-height: var(--hx-target-icon); } #weather-panel .ww-head h3, #weather-panel .lightning-panel > h3, #weather-panel .weather-compare-body > h3 { margin: 0; color: var(--hx-ink); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); } #weather-panel .weather-12hour-grid, #weather-panel .daily-cards, #weather-panel .weather-compare-slots { display: flex; flex-direction: column; margin: 0; padding: 0; gap: 0; } /* Hour rows: time · rain · gust, then the condition line */ #weather-panel .ww-hour { display: grid; grid-template-columns: calc(var(--hx-target-action) + var(--hx-space-1)) minmax(0, 1fr) auto; align-items: baseline; gap: var(--hx-space-1) var(--hx-space-3); padding: var(--hx-space-2) 0; border-top: 1px solid var(--hx-hairline); } #weather-panel .ww-time { color: var(--hx-ink); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); } #weather-panel .ww-rain { color: var(--hx-ink); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); } #weather-panel .ww-rain small { color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #weather-panel .ww-rain[data-level="warn"] { color: var(--hx-warn); } /* rain: amber from 50 %, red from 80 % (the limits) */ #weather-panel .ww-rain[data-level="danger"] { color: var(--hx-danger); } #weather-panel .ww-gust { color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); text-align: right; white-space: nowrap; } #weather-panel .ww-gust[data-level="warn"] { color: var(--hx-warn); font-weight: var(--hx-weight-strong); } #weather-panel .ww-gust[data-level="danger"] { color: var(--hx-danger); font-weight: var(--hx-weight-strong); } #weather-panel .ww-cond { display: flex; grid-column: 2 / -1; align-items: center; gap: var(--hx-space-1); min-width: 0; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #weather-panel .ww-icon { display: grid; flex: none; } #weather-panel .ww-icon svg { width: 16px; height: 16px; } #weather-panel .weather-safety-note { margin: 0; padding: var(--hx-space-2) 0 var(--hx-space-3); border-top: 1px solid var(--hx-hairline); color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } /* Next 12 hours · 3 days: one row, a 12 hours | 3 days switch inside */ #weather-panel .ww-seg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hx-space-1); margin: 0 0 var(--hx-space-2); padding: var(--hx-space-1); border-radius: var(--hx-radius-segment); background: var(--hx-track); } #weather-panel .ww-seg button { min-height: var(--hx-target-icon); margin: 0; padding: var(--hx-chip-nudge) 0 0; 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); } #weather-panel .ww-seg button[aria-selected="true"] { background: var(--hx-segment-on); color: var(--hx-segment-ink); box-shadow: var(--hx-shadow-raised); font-weight: var(--hx-weight-strong); } /* Actions: four even buttons */ #weather-panel .weather-primary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hx-space-2); margin: 0; padding: 0; border: 0; } #weather-panel :is(.weather-primary-actions > button, .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); box-shadow: none; color: var(--hx-ink); font-family: var(--hx-font); font-size: var(--hx-text-body); font-weight: var(--hx-weight-action); cursor: pointer; } #weather-panel :is(.weather-primary-actions > button, .wh-action):disabled { background: var(--hx-disabled-bg); color: var(--hx-disabled-ink); cursor: default; } #weather-panel .weather-primary-actions > button[hidden] { display: none; } /* Lightning check card */ #weather-panel .lightning-panel { display: flex; flex-direction: column; gap: var(--hx-space-2); margin: 0; padding: var(--hx-space-3); } #weather-panel .lightning-panel > .wh-badge { display: none; } #weather-panel .lightning-panel > p, #weather-panel .lightning-panel > small, #weather-panel .lightning-results > p, #weather-panel .lightning-check-time { margin: 0; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } /* Links out of the app (data sources): one link row, label + ↗, like the WTG card's Google Maps rows (UI audit, 6 Oct 2026) */ #weather-panel .lightning-panel > a, #weather-panel > a { display: inline-flex; align-items: center; gap: var(--hx-space-1); color: var(--hx-tone-blue-ink); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); text-decoration: none; } #weather-panel .lightning-panel > a:not(:has(svg))::after, #weather-panel > a:not(:has(svg))::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v6H4V6h6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v6H4V6h6'/%3E%3C/svg%3E") center / contain no-repeat; } #weather-panel .lightning-results { display: flex; flex-direction: column; gap: var(--hx-space-2); color: var(--hx-ink); font-size: var(--hx-text-label); } #weather-panel .lightning-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--hx-space-2); } #weather-panel .lightning-card { display: flex; flex-direction: column; gap: var(--hx-space-1); 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); } #weather-panel .lightning-card.activity { border-color: var(--hx-warn); background: var(--hx-warn-tint); } #weather-panel .lightning-card-title { display: flex; align-items: center; gap: var(--hx-space-2); color: var(--hx-muted); } #weather-panel .lightning-card-title svg { width: 16px; height: 16px; flex: none; } #weather-panel .lightning-card-title h4 { margin: 0; font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #weather-panel .lightning-number { color: var(--hx-ink); font-size: var(--hx-text-value-m); font-weight: var(--hx-weight-strong); line-height: 1; } #weather-panel :is(.lightning-short, .lightning-period) { color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } /* Collapsible rows: Rain maps · Stop if you see · Next 12 hours · Next 3 days */ #weather-panel .ww-more { padding: 0 var(--hx-space-3); } #weather-panel .ww-more #weather-forecast-view, #weather-panel .ww-more .forecast-content { margin: 0; padding: 0; border: 0; background: none; } #weather-panel .ww-more details { margin: 0; padding: 0; border: 0; border-top: 1px solid var(--hx-hairline); background: none; } #weather-panel .ww-more > details:first-child { border-top: 0; } #weather-panel .ww-more summary { display: flex; align-items: center; justify-content: space-between; gap: var(--hx-space-3); min-height: var(--hx-target-action); margin: 0; padding: 0; border: 0; background: none; color: var(--hx-ink); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); list-style: none; cursor: pointer; } #weather-panel .ww-more summary::-webkit-details-marker { display: none; } #weather-panel .ww-more summary::after { content: '⌄'; 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-ink); font-size: var(--hx-text-title); font-weight: var(--hx-weight-action); line-height: 1; } #weather-panel .ww-more details[open] > summary::after { content: '⌃'; } /* ⌄ / ⌃ = expands in place (UI audit, 6 Oct 2026; was + / −) */ #weather-panel .ww-more details > :not(summary) { margin: 0 0 var(--hx-space-3); } #weather-panel .weather-site-check ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } #weather-panel .weather-site-check li { display: flex; align-items: center; gap: var(--hx-space-3); min-height: var(--hx-target-icon); border-top: 1px solid var(--hx-hairline); color: var(--hx-ink); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); } #weather-panel .weather-site-check li > span:first-child { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--hx-warn-tint); color: var(--hx-warn); } #weather-panel .weather-site-check li svg { width: 16px; height: 16px; } /* Rain radar maps (inside the flip card .wr) */ #weather-panel article.weather-radar-source { display: flex; flex-direction: column; gap: var(--hx-space-2); margin: 0; padding: var(--hx-space-2); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-badge); background: var(--hx-page); } #weather-panel .weather-host-art { position: relative; overflow: hidden; height: calc(var(--hx-target-action) * 4); border-radius: var(--hx-radius-badge); background: var(--hx-track); } #weather-panel .weather-host-art :is(iframe, img) { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; } #weather-panel :is(.weather-radar-state, .weather-xweather-state) { position: absolute; inset: auto var(--hx-space-2) var(--hx-space-2) var(--hx-space-2); color: var(--hx-muted); font-size: var(--hx-text-meta); } #weather-panel .weather-radar-enlarge { position: absolute; top: var(--hx-space-2); right: var(--hx-space-2); min-height: var(--hx-target-icon); 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-label); font-weight: var(--hx-weight-strong); } #weather-panel .weather-xweather-load { min-height: var(--hx-target-icon); margin: 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-label); font-weight: var(--hx-weight-action); } /* Choose a place */ #weather-panel .ww-places, #weather-panel .nearby-wtgs { padding: 0 var(--hx-space-3); } #weather-panel .nearby-wtgs:empty { display: none; } #weather-panel .ww-places > .ch-row:first-child, #weather-panel .ww-places > [hidden] + .ch-row { border-top: 0; } #weather-panel .ww-row-text { flex: 1; min-width: 0; font-weight: var(--hx-weight-strong); } #weather-panel .ch-row .ch-square { margin-left: auto; } #weather-panel .ww-places .wh-badge { width: var(--hx-badge-size); height: var(--hx-badge-size); border-radius: var(--hx-radius-badge); } #weather-panel .nearby-wtgs h4 { display: flex; align-items: center; min-height: var(--hx-target-icon); margin: 0; color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-strong); } #weather-panel .nearby-wtgs button { display: flex; align-items: center; width: 100%; min-height: var(--hx-target-action); margin: 0; padding: 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; } #weather-panel .nearby-wtgs p { margin: 0 0 var(--hx-space-2); color: var(--hx-warn); font-size: var(--hx-text-meta); } /* Nearby WTGs view */ #weather-panel .ww-back { min-height: var(--hx-target-action); padding: 0 var(--hx-space-3); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); } #weather-panel .ww-back .ch-square { margin-left: 0; } #weather-panel .ww-compare { display: flex; flex-direction: column; gap: var(--hx-space-2); padding: var(--hx-space-3); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); } #weather-panel .weather-recommend-status, #weather-panel .ww-compare > .weather-safety-note { margin: 0; padding: 0; border: 0; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #weather-panel .weather-recommend-list { display: flex; flex-direction: column; } #weather-panel .weather-recommend-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--hx-space-1) var(--hx-space-3); align-items: center; margin: 0; padding: var(--hx-space-2) 0; border: 0; border-top: 1px solid var(--hx-hairline); border-radius: 0; background: none; } #weather-panel .weather-recommend-row > strong { display: flex; flex-direction: column; color: var(--hx-ink); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); } #weather-panel .ww-road { color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #weather-panel .weather-recommend-row > span { justify-self: end; 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); color: var(--hx-ink); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-strong); white-space: nowrap; } #weather-panel .weather-recommend-candidate > span { background: var(--hx-good-tint); color: var(--hx-good); } #weather-panel .weather-recommend-hazard > span { background: var(--hx-danger-tint); color: var(--hx-danger); } #weather-panel .weather-recommend-row > p { grid-column: 1 / -1; margin: 0; color: var(--hx-muted); font-size: var(--hx-text-meta); } #weather-panel .weather-recommend-row > button, #weather-panel .weather-view-wtg, #weather-panel .weather-compare-list > button { grid-column: 1 / -1; min-height: var(--hx-target-icon); margin: 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-label); font-weight: var(--hx-weight-strong); } #weather-panel .weather-manual-choice { border-top: 1px solid var(--hx-hairline); } #weather-panel .weather-manual-choice summary { display: flex; align-items: center; min-height: var(--hx-target-icon); color: var(--hx-ink); font-size: var(--hx-text-label); font-weight: var(--hx-weight-strong); } #weather-panel .weather-manual-choice label { display: flex; flex-direction: column; gap: var(--hx-space-1); color: var(--hx-muted); font-size: var(--hx-text-label); } #weather-panel .weather-compare-search { box-sizing: border-box; width: 100%; min-height: var(--hx-target-icon); margin: 0; padding: 0 var(--hx-space-3); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-badge); background: var(--hx-page); color: var(--hx-ink); font-family: var(--hx-font); font-size: var(--hx-text-body); } #weather-panel .weather-compare-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hx-space-2); margin-top: var(--hx-space-2); } #weather-panel > a { padding: 0 var(--hx-space-1); } /* Older .menu-heading rules give this title a dark green bar; the reference title row is plain. */ #weather-panel[data-hx] > .menu-heading { position: static; display: flex; align-items: center; gap: var(--hx-space-2); min-height: var(--hx-target-action); margin: 0; padding: 0 var(--hx-space-1); border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--hx-ink); } #weather-panel[data-hx] > .menu-heading h2 { color: var(--hx-ink); } /* Refresh only matters once a place is chosen. */ #weather-panel:has(.weather-workspace[hidden]) .weather-refresh { display: none; } /* No WTG near you: a plain caption, not a card. */ #weather-panel .nearby-wtgs:not(:has(button)) { padding: 0 var(--hx-space-1); border: 0; background: none; } #weather-panel .nearby-wtgs:not(:has(button)) h4 { min-height: 0; font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #weather-panel .lightning-card { align-items: flex-start; text-align: left; } #weather-panel .weather-check-lightning[aria-expanded="true"] { border-color: var(--hx-info); background: var(--hx-tone-blue-bg); color: var(--hx-tone-blue-ink); font-weight: var(--hx-weight-strong); } #weather-panel .weather-recommend-row > strong { gap: 2px; } #weather-panel .weather-recommend-row > button { min-height: var(--hx-target-icon); box-shadow: none; } /* ---------- Weather Watch sub-screens: Choose WTG (#weather-wtg-picker), Rain radar (#weather-radar), All farms (#weather-overview-panel) ---------- */ :is(#weather-wtg-picker, #weather-radar, #weather-overview-panel)[data-hx] { text-align: left; } :is(#weather-wtg-picker, #weather-radar, #weather-overview-panel)[data-hx] > :is(.picker-heading, .weather-radar-heading, .menu-heading) { position: static; display: flex; align-items: center; gap: var(--hx-space-2); min-height: var(--hx-target-action); margin: 0; padding: 0 var(--hx-space-1); border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--hx-ink); } :is(#weather-wtg-picker, #weather-radar, #weather-overview-panel) :is(.picker-heading, .weather-radar-heading, .menu-heading) :is(h2, h3) { 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); } :is(#weather-wtg-picker, #weather-radar, #weather-overview-panel) .menu-heading > div { display: flex; gap: var(--hx-space-2); } :is(#weather-wtg-picker, #weather-radar, #weather-overview-panel) .ui-header-icon { display: grid; place-items: center; flex: none; width: var(--hx-target-action); height: var(--hx-target-action); min-width: var(--hx-target-action); margin: 0; padding: 0; border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); box-shadow: none; color: var(--hx-ink); } :is(#weather-wtg-picker, #weather-radar, #weather-overview-panel) .ui-header-icon svg { width: var(--hx-icon-size); height: var(--hx-icon-size); } /* Choose WTG: farm list, search, WTG rows */ #weather-wtg-picker > label { margin: 0; padding: 0 var(--hx-space-1); color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #weather-wtg-picker > :is(select, input) { box-sizing: border-box; width: 100%; 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); box-shadow: none; color: var(--hx-ink); font-family: var(--hx-font); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); } #weather-wtg-picker > input { font-weight: var(--hx-weight-action); } #weather-wtg-picker > :is(select, input):focus-visible { outline: 3px solid var(--hx-focus); outline-offset: 2px; } #weather-wtg-picker .picker-list { 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); color: var(--hx-muted); font-size: var(--hx-text-label); } #weather-wtg-picker .picker-list button { display: flex; align-items: center; width: 100%; 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-strong); text-align: left; } #weather-wtg-picker .picker-list button:first-child { border-top: 0; } #weather-wtg-picker .picker-list button::after { content: '›'; margin-left: auto; color: var(--hx-muted); font-size: var(--hx-text-title); } /* Rain radar: place line, then the map as large as the sheet allows */ #weather-radar .weather-radar-body { display: flex; flex-direction: column; gap: var(--hx-space-2); margin: 0; padding: 0; } #weather-radar .weather-radar-location { margin: 0; padding: 0 var(--hx-space-1); color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); } #weather-radar .wr-titles { display: flex; flex: 1; flex-direction: column; gap: var(--hx-space-1); min-width: 0; } /* title + place, as the other sheets' title + subtitle */ #weather-radar .wr-titles .weather-radar-location { padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #weather-radar .weather-radar-large { position: relative; overflow: hidden; height: 62dvh; border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-track); } #weather-radar .weather-radar-large :is(iframe, img) { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; } #weather-radar .weather-radar-large [hidden] { display: none; } #weather-radar .weather-radar-large .weather-radar-source { position: absolute; left: var(--hx-space-2); bottom: var(--hx-space-2); padding: 2px var(--hx-space-2); border-radius: var(--hx-radius-chip); background: var(--hx-card); color: var(--hx-tone-blue-ink); font-size: var(--hx-text-meta); } /* All farms: one card per farm — Now row (rain first), Next 2 hours, warning line, actions */ #weather-overview-panel .weather-overview-body { display: flex; flex-direction: column; gap: var(--hx-space-2); margin: 0; padding: 0; border: 0; background: none; } #weather-overview-panel .weather-overview-body > p { margin: 0; padding: 0 var(--hx-space-1); color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #weather-overview-panel .weather-overview-body > p:empty { display: none; } #weather-overview-panel .farm-weather-grid { display: flex; flex-direction: column; gap: var(--hx-space-2); margin: 0; padding: 0; } #weather-overview-panel .farm-weather-card { display: flex; flex-direction: column; margin: 0; padding: 0 var(--hx-space-3) var(--hx-space-3); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); box-shadow: none; } #weather-overview-panel .farm-weather-card > h3 { display: flex; align-items: center; min-height: var(--hx-target-icon); margin: 0; color: var(--hx-ink); font-size: var(--hx-text-title); font-weight: var(--hx-weight-strong); } #weather-overview-panel .farm-weather-content { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--hx-muted); font-size: var(--hx-text-label); } #weather-overview-panel .farm-weather-content > p { margin: 0; padding: var(--hx-space-2) 0; border-top: 1px solid var(--hx-hairline); color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #weather-overview-panel .farm-weather-warning { color: var(--hx-ink); font-weight: var(--hx-weight-strong); } #weather-overview-panel .farm-weather-warning[data-severity="stop"] { color: var(--hx-danger); } #weather-overview-panel .farm-weather-warning[data-severity="prepare"] { color: var(--hx-warn); } #weather-overview-panel .farm-weather-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--hx-space-2); margin: var(--hx-space-1) 0 0; padding: 0; border: 0; } #weather-overview-panel .farm-weather-actions button { min-width: 0; min-height: var(--hx-target-action); margin: 0; padding: 0 var(--hx-space-2); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-action); background: var(--hx-card); box-shadow: none; color: var(--hx-ink); font-family: var(--hx-font); font-size: var(--hx-button-label-size); font-weight: var(--hx-weight-action); } /* full-size action: 52px, button label size, 600 (pre-build review) */ #weather-overview-panel .farm-weather-actions button:first-child { border-color: var(--hx-solid); background: var(--hx-solid); color: var(--hx-solid-ink); box-shadow: var(--hx-glow-main); } /* Hour rows are shared with Weather Watch */ #weather-overview-panel .ww-hour { display: grid; grid-template-columns: calc(var(--hx-target-action) + var(--hx-space-1)) minmax(0, 1fr) auto; align-items: baseline; gap: var(--hx-space-1) var(--hx-space-3); padding: var(--hx-space-2) 0; border-top: 1px solid var(--hx-hairline); } #weather-overview-panel .farm-weather-content > .ww-hour:first-child { border-top: 0; } #weather-overview-panel :is(.ww-time, .ww-rain) { color: var(--hx-ink); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); } #weather-overview-panel .ww-rain small { color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #weather-overview-panel .ww-rain[data-level="warn"] { color: var(--hx-warn); } #weather-overview-panel .ww-rain[data-level="danger"] { color: var(--hx-danger); } #weather-overview-panel .ww-gust { color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); text-align: right; white-space: nowrap; } #weather-overview-panel .ww-gust[data-level="warn"] { color: var(--hx-warn); font-weight: var(--hx-weight-strong); } #weather-overview-panel .ww-gust[data-level="danger"] { color: var(--hx-danger); font-weight: var(--hx-weight-strong); } #weather-overview-panel .ww-cond { display: flex; grid-column: 2 / -1; align-items: center; gap: var(--hx-space-1); min-width: 0; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #weather-overview-panel .ww-icon { display: grid; flex: none; } #weather-overview-panel .ww-icon svg { width: 16px; height: 16px; } :is(#weather-wtg-picker, #weather-radar, #weather-overview-panel) :is(.picker-heading, .weather-radar-heading, .menu-heading) :is(h2, h3) { text-transform: none; } /* ---------- Small sheets: Compass check, GPS Status, Help ---------- Title [✕] ┌ status (coloured by state) ┐ then text cards */ :is(#compass-help, #gps-status-dialog, #guide)[data-hx] { text-align: left; } :is(#compass-help, #gps-status-dialog, #guide)[data-hx] > .ui-dialog-heading { position: static; display: flex; align-items: center; gap: var(--hx-space-2); min-height: var(--hx-target-action); margin: 0; padding: 0 var(--hx-space-1); border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--hx-ink); } :is(#compass-help, #gps-status-dialog, #guide) .ui-dialog-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); text-transform: none; } :is(#compass-help, #gps-status-dialog, #guide) .ui-dialog-heading button { display: grid; place-items: center; flex: none; width: var(--hx-target-action); height: var(--hx-target-action); min-width: var(--hx-target-action); margin: 0; padding: 0; border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); box-shadow: none; color: var(--hx-ink); } :is(#compass-help, #gps-status-dialog, #guide) .ui-dialog-heading button svg { width: var(--hx-icon-size); height: var(--hx-icon-size); } /* Status line as a card: amber while waiting or weak, green when good */ :is(#compass-quality, #gps-status-dialog .gps-status-copy) { margin: 0; padding: var(--hx-space-3); border: 1px solid var(--hx-warn); border-radius: var(--hx-radius-card); background: var(--hx-warn-tint); color: var(--hx-ink); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-body); } #gps-status-dialog .gps-status-copy[data-state="active"], #compass-quality[data-state="good"] { border-color: var(--hx-good); background: var(--hx-good-tint); } #gps-status-dialog .gps-status-copy[data-state="idle"] { border-color: var(--hx-hairline); background: var(--hx-card); } #compass-help > p:not(#compass-quality) { margin: 0; padding: 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-size: var(--hx-text-body); line-height: var(--hx-leading-body); } /* Help: one card, sections split by hairlines */ #guide .guide-body { display: flex; flex-direction: column; margin: 0; padding: 0 var(--hx-space-3) 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-size: var(--hx-text-body); line-height: var(--hx-leading-body); } #guide .guide-body h3 { margin: var(--hx-space-3) 0 var(--hx-space-1); padding-top: var(--hx-space-3); border-top: 1px solid var(--hx-hairline); color: var(--hx-ink); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); } #guide .guide-body h3:first-child { margin-top: 0; border-top: 0; } #guide .guide-body :is(p, ol, ul) { margin: 0 0 var(--hx-space-2); color: var(--hx-ink); font-size: var(--hx-text-label); } #guide .guide-body :is(ol, ul) { padding-left: var(--hx-space-5); } #guide .guide-body li + li { margin-top: var(--hx-space-1); } #guide .guide-body a { color: var(--hx-tone-blue-ink); font-size: var(--hx-text-meta); } #weather-overview-panel .farm-weather-content > .wt { margin: 0 0 var(--hx-space-2); } /* My location row: name, then the GPS line ("Finding your position…" / "GPS ±8 m · …"); greyed until a position is found. */ #weather-panel .ww-row-two { display: flex; flex-direction: column; gap: 2px; } #weather-panel .ww-row-two .ww-row-meta { margin: 0; padding: 0; border: 0; background: none; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #weather-panel .ww-places .continue-gps { padding: var(--hx-space-1) 0; } #weather-panel .ww-places .continue-gps:disabled { cursor: default; } #weather-panel .ww-places .continue-gps:disabled :is(.wh-badge, .ch-square) { opacity: .45; } #weather-panel .ww-places .continue-gps:disabled .ww-row-two { color: var(--hx-muted); } /* Next 2 hours: collapsed by default; the peek shows each hour's rain chance */ #weather-panel .ww-more summary.ww-summary-icon { justify-content: flex-start; gap: var(--hx-space-3); } #weather-panel .ww-more summary.ww-summary-icon::after { margin-left: auto; } #weather-panel .ww-summary-icon .wh-badge { width: var(--hx-badge-size); height: var(--hx-badge-size); border-radius: var(--hx-radius-badge); } /* All farms: warning state as a chip and the update time beside the farm name (no repeated lines) */ #weather-overview-panel .farm-weather-card > h3 { gap: var(--hx-space-2); } #weather-overview-panel .farm-weather-age { margin-left: auto; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #weather-overview-panel .farm-weather-chip { 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); color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); white-space: nowrap; } #weather-overview-panel .farm-weather-chip[data-kind="clear"] { background: var(--hx-good-tint); color: var(--hx-good); } #weather-overview-panel .farm-weather-chip[data-kind="none"] { background: var(--hx-tone-grey-bg); color: var(--hx-tone-grey-ink); } /* no reports: plain, not an "all clear" */ #weather-overview-panel .farm-weather-chip[data-kind="prepare"] { background: var(--hx-warn-tint); color: var(--hx-warn); } #weather-overview-panel .farm-weather-chip[data-kind="stop"] { background: var(--hx-danger-solid); color: var(--hx-on-dark); } /* Compact rows (user, 4 Oct 2026): every farm is one short row — name, warning, rain · gusts · wind now; tap for the full card. ┌ FKW [No warning] ⌄ ┐ │ Rain 27% Gusts 6.5 Wind 1.5 m/s │ amber / red at the card's limits (rain 50/80 %, wind and gusts 9/12 m/s) */ #weather-overview-panel .farm-weather-card > h3 { display: block; min-height: 0; } #weather-overview-panel .farm-weather-card:not(.is-open) { padding-bottom: 0; } #weather-overview-panel .farm-weather-toggle { display: grid; gap: var(--hx-space-1); width: 100%; min-height: var(--hx-target-action); margin: 0; padding: var(--hx-space-2) 0; border: 0; background: none; color: var(--hx-ink); font: inherit; text-align: left; cursor: pointer; } #weather-overview-panel .fw-top { display: flex; align-items: center; gap: var(--hx-space-2); } #weather-overview-panel .fw-name { font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); } #weather-overview-panel .fw-top .farm-weather-chip { margin-left: auto; } #weather-overview-panel .fw-chev { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; } #weather-overview-panel .farm-weather-toggle[aria-expanded="true"] .fw-chev { transform: rotate(180deg); } #weather-overview-panel .fw-glance { display: flex; flex-wrap: wrap; gap: var(--hx-space-1) var(--hx-space-4); color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); } #weather-overview-panel .fw-cell b { color: var(--hx-ink); font-weight: var(--hx-weight-strong); } #weather-overview-panel .fw-glance { align-items: center; } #weather-overview-panel .fw-now { display: inline-flex; align-items: center; gap: 6px; 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-header); color: var(--hx-on-dark); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-strong); letter-spacing: var(--hx-tracking-caps); text-transform: uppercase; } #weather-overview-panel .fw-now::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hx-sky-live); } /* the same live dot as the tile's NOW strip */ #weather-overview-panel .fw-town { flex-basis: 100%; order: 9; color: var(--hx-muted); font-size: var(--hx-text-meta); } /* says the numbers are for now (and which town, once the server sends it) */ #weather-overview-panel .fw-cell[data-level="warn"] b { color: var(--hx-warn); } #weather-overview-panel .fw-cell[data-level="danger"] b { color: var(--hx-danger); } #weather-overview-panel .farm-weather-content[hidden] { display: none; } /* "Within 16 km" is already in the lightning result note */ #weather-panel .lightning-panel > .lightning-target + p { display: none; } #weather-overview-panel .farm-weather-chip { margin-left: auto; } #weather-overview-panel .farm-weather-age + .farm-weather-chip { margin-left: 0; } /* Rain radar: one flip card (user review, 3 Oct 2026) — strip: map name + time, dots, play/pause, enlarge; map fills the card; TMD link last */ #weather-panel .wr { overflow: hidden; border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); } #weather-panel .wr-strip { position: relative; display: flex; align-items: center; height: 44px; background: var(--hx-good-solid); color: var(--hx-sky-ink); } #weather-panel .wr-turn { flex: 1; container-type: inline-size; display: flex; align-items: center; gap: var(--hx-space-2); min-width: 0; min-height: 0; height: 44px; margin: 0; padding: var(--hx-chip-nudge) 0 0 var(--hx-space-4); border: 0; background: none; color: inherit; font-family: var(--hx-font); text-align: left; } #weather-panel .wr-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); text-transform: uppercase; letter-spacing: var(--hx-tracking-caps); } #weather-panel .wr-turn .wt-dots { margin-top: calc(var(--hx-chip-nudge) * -1); } @container (max-width: 14.5em) { #weather-panel .wr-turn .wt-dots { display: none; } } /* a narrow strip drops the page dots before the name is cut ("Khon Kaen" at 360 px) */ #weather-panel .wr-play { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; min-width: 0; min-height: 0; height: 44px; margin: 0; padding: 0 var(--hx-space-1) 0 0; border: 0; background: none; color: var(--hx-sky-ink); } #weather-panel .wr-play svg { width: 9px; height: 9px; fill: currentColor; } #weather-panel :is(.wr-turn, .wr-play, .wr-big):focus-visible { outline: 3px solid var(--hx-sky-ink); outline-offset: -6px; border-radius: var(--hx-radius-action); } #weather-panel .wr-stage { display: grid; transform-origin: 50% 50%; } #weather-panel .wr article.weather-radar-source { grid-area: 1 / 1; position: relative; display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; } #weather-panel .wr article.weather-radar-source:not(.on) { visibility: hidden; } #weather-panel .wr .weather-host-art { height: calc(var(--hx-tile-height) - 44px - 64px); border-radius: 0; } /* radar card total = weather card total (strip 44 + map + status 64 + its line) */ /* radar card total = weather card total */ #weather-panel .wr .weather-xweather-load { position: absolute; top: 50%; left: 50%; transform: translate(-50%, var(--hx-space-1)); padding: 0 var(--hx-space-4); } /* No map on a face: say why in the middle (above the retry button, if any), not behind the colour key; hide the key */ #weather-panel .wr :is(.weather-xweather-state, .weather-radar-state) { position: absolute; top: 50%; left: var(--hx-space-4); right: var(--hx-space-4); bottom: auto; transform: translateY(calc(-100% - var(--hx-space-1))); color: var(--hx-ink); font-size: var(--hx-text-label); font-weight: var(--hx-weight-strong); text-align: center; } #weather-panel .wr .weather-radar-state, #weather-panel .wr article:has(> .weather-xweather-load[hidden]) .weather-xweather-state { transform: translateY(-50%); } /* no button: message in the middle */ #weather-panel .wr :is(.weather-xweather-preview, .weather-radar-embed)[hidden] ~ .wr-key { display: none; } #weather-panel .wr-mark { display: grid; flex: none; } #weather-panel .wr-strip.wr-plain { gap: var(--hx-space-2); padding: var(--hx-chip-nudge) var(--hx-space-4) 0; } #weather-panel .wr-strip.wr-plain .wr-time { margin-left: auto; } #weather-panel .wr-mark svg { width: 16px; height: 16px; } #weather-panel .wr-time { flex: none; font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); opacity: .9; white-space: nowrap; } #weather-panel .wr-big { flex: none; display: grid; place-items: center; width: 44px; height: 44px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--hx-sky-ink); } #weather-panel .wr-big svg { width: 18px; height: 18px; } /* 3-day rows: room for "Wed 30 Sep" on one line */ #weather-panel .ww-hour.ww-day { grid-template-columns: calc(var(--hx-text-body) * 6) minmax(0, 1fr) auto; } #weather-panel .ww-day .ww-time { white-space: nowrap; } /* WTG pin on the radar maps (restored from the original design, 3 Oct 2026): red dot with a white edge and dark ring; the short name sits above it, clear of Windy's timeline at the bottom. In the enlarged view Windy draws its own pin instead (it follows Windy's pan and zoom); Xweather's pin sits in the zoom layer. */ :is(#weather-panel, #weather-radar) .weather-radar-target { position: absolute; left: 50%; top: 50%; z-index: 3; box-sizing: border-box; width: 18px; height: 18px; border: 3px solid var(--hx-card); border-radius: 50%; background: var(--hx-danger); box-shadow: 0 0 0 3px var(--hx-ink); transform: translate(-50%, -50%) scale(calc(1 / var(--wz-s, 1))); pointer-events: none; } :is(#weather-panel, #weather-radar) .weather-radar-target-label { position: absolute; left: 50%; top: 50%; z-index: 3; max-width: 80%; padding: 2px var(--hx-space-2) 0; border-radius: var(--hx-radius-chip); background: var(--hx-map-label-ink); color: var(--hx-map-label); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-strong); line-height: 1.5; white-space: nowrap; transform: translate(-50%, calc(-100% - 16px)) scale(calc(1 / var(--wz-s, 1))); transform-origin: 50% calc(100% + 16px); pointer-events: none; } :is(#weather-panel, #weather-radar) :is(.weather-radar-target, .weather-radar-target-label)[hidden] { display: none; } /* Enlarged radar: the whole screen, map as big as it can be (user, 3 Oct 2026) */ #weather-radar[data-hx][open] { inset: 0; display: flex; flex-direction: column; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: calc(var(--hx-space-3) + env(safe-area-inset-top, 0px)) var(--hx-space-3) calc(var(--hx-space-3) + env(safe-area-inset-bottom, 0px)); border-radius: 0; overflow: hidden; } #weather-radar[data-hx][open] .weather-radar-body { flex: 1; min-height: 0; } #weather-radar[data-hx][open] .weather-radar-large { flex: 1; height: auto; min-height: 0; touch-action: none; } #weather-radar .wz { position: absolute; inset: 0; transform-origin: 0 0; } #weather-radar .wz[hidden] { display: none; } #weather-radar .wz { cursor: grab; user-select: none; } /* tells mouse users the zoomed picture can be dragged (user, 5 Oct 2026) */ #weather-radar .wz:active { cursor: grabbing; } #weather-radar .wz img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; } /* Small card maps are view-only (user, 3 Oct 2026): panning Windy inside the card moved the map away from our fixed WTG pin. A tap opens the full-screen map, where Windy's own pin (or Xweather's zoom layer) keeps the WTG in the right place. */ #weather-panel .wr .weather-radar-embed { pointer-events: none; } /* Windy's own buttons (menu, + / −, play, timeline) do nothing in the view-only card (user, 3 Oct 2026): the map is drawn larger and the edges are cropped evenly, so the WTG stays exactly under our centre pin. Windy is credited in the corner instead of its cropped logo. */ #weather-panel .wr .weather-radar-embed { position: absolute; top: -100px; left: -44px; width: calc(100% + 88px); height: calc(100% + 200px); max-width: none; } #weather-panel .wr .wr-credit { position: absolute; left: var(--hx-space-2); top: var(--hx-space-2); z-index: 2; padding: 2px var(--hx-space-2) 0; border-radius: var(--hx-radius-chip); background: var(--hx-card); color: var(--hx-muted); font-size: max(var(--hx-text-min), calc(var(--hx-text-meta) * .85)); font-weight: var(--hx-weight-action); pointer-events: none; } #weather-panel .wr .wr-credit[hidden] { display: none; } /* no chip until the picture's time is known */ #weather-panel .wr .weather-host-art { cursor: zoom-in; } /* Xweather's picture is drawn at zoom 8 like Windy: show it at its true size (cropped to the card), not shrunk, so both maps share one scale. */ #weather-panel .wr .weather-xweather-preview { object-fit: none; } /* Rain radar card — colour key on the map, status panel under it (user, 3 Oct 2026) */ #weather-panel .wr-key { position: absolute; left: var(--hx-space-2); right: var(--hx-space-2); bottom: var(--hx-space-2); z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--hx-space-2); padding: calc(6px + var(--hx-chip-nudge)) var(--hx-space-3) 6px; border-radius: var(--hx-radius-chip); background: var(--hx-card); color: var(--hx-ink); font-size: max(var(--hx-text-min), calc(var(--hx-text-meta) * .85)); font-weight: var(--hx-weight-action); white-space: nowrap; flex-wrap: wrap; row-gap: 2px; pointer-events: none; } /* wraps at 360 px / 120 % ("Very heavy" ran off the card) */ #weather-panel .wr-key-title { color: var(--hx-muted); } #weather-panel .wr-key-item { display: inline-flex; align-items: center; gap: 4px; } #weather-panel .wr-key i { width: 10px; height: 10px; margin-top: calc(var(--hx-chip-nudge) * -1); border-radius: 3px; } #weather-panel .wr-key[data-src="windy"] .l { background: var(--hx-rain-windy-l); } #weather-panel .wr-key[data-src="windy"] .m { background: var(--hx-rain-windy-m); } #weather-panel .wr-key[data-src="windy"] .h { background: var(--hx-rain-windy-h); } #weather-panel .wr-key[data-src="windy"] .v { background: var(--hx-rain-windy-v); } #weather-panel .wr-key[data-src="xweather"] .l { background: var(--hx-rain-xw-l); } #weather-panel .wr-key[data-src="xweather"] .m { background: var(--hx-rain-xw-m); } #weather-panel .wr-key[data-src="xweather"] .h { background: var(--hx-rain-xw-h); } #weather-panel .wr-key[data-src="xweather"] .v { background: var(--hx-rain-xw-v); } #weather-panel .wr-key[data-src="thai"] .l { background: var(--hx-rain-thai-l); } #weather-panel .wr-key[data-src="thai"] .m { background: var(--hx-rain-thai-m); } #weather-panel .wr-key[data-src="thai"] .h { background: var(--hx-rain-thai-h); } #weather-panel .wr-key[data-src="thai"] .v { background: var(--hx-rain-thai-v); } /* Thai radar pages (5 Oct 2026): the picture at 1.3×, moved so the place sits under the centre pin (weather.js sets its size and offset) */ #weather-panel .wr-thai .weather-host-art img { position: absolute; max-width: none; object-fit: fill; } #weather-panel .wr-thai .weather-radar-state[hidden] { display: none; } /* Rain now · trial (admins): each radar source for this farm, side by side */ /* one row per radar: name and reading, then dBZ · nearby · picture time; a Thai radar row shows its picture (6 Oct 2026) */ /* Radar history in the enlarged view (5 Oct 2026): play, a slider over the last 2 hours, the picture time; then the trend in words */ /* Radar switch in the enlarged view (5 Oct 2026): equal buttons, the shown radar pressed */ /* Radar sources: one segmented control (UI audit, 6 Oct 2026; were primary-coloured buttons) */ #weather-radar .wr-switch { display: flex; gap: var(--hx-space-1); margin: 0 0 var(--hx-space-2); padding: var(--hx-space-1); border-radius: var(--hx-radius-segment); background: var(--hx-track); } #weather-radar .wr-switch button { flex: 1 1 0; min-width: 0; min-height: var(--hx-icon-button); padding: 0 var(--hx-space-2); 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); cursor: pointer; line-height: var(--hx-leading-head); overflow-wrap: anywhere; } /* wraps rather than cutting "Khon Kaen" at 320 px / 120 % */ #weather-radar .wr-switch button[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); cursor: default; } #weather-radar .wr-history { display: flex; align-items: center; gap: var(--hx-space-3); margin-top: var(--hx-space-2); } #weather-radar .wr-history[hidden], #weather-radar .wr-trend[hidden] { display: none; } #weather-radar .wr-h-play { display: grid; place-items: center; flex: none; width: var(--hx-target-icon); height: var(--hx-target-icon); padding: 0; border: 0; border-radius: 50%; background: var(--hx-primary-bg); color: var(--hx-primary-ink); cursor: pointer; } #weather-radar .wr-h-play svg { width: 18px; height: 18px; fill: currentColor; } #weather-radar .wr-h-range { flex: 1; min-width: 0; min-height: var(--hx-target-icon); margin: 0; accent-color: var(--hx-primary-bg); } #weather-radar .wr-h-time { flex: none; min-width: 6.5em; color: var(--hx-ink); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); font-variant-numeric: tabular-nums; text-align: right; } /* Trend card above the map (5 Oct 2026): arrow, short word and minutes in bold, then the sentence; amber when rain builds or gets heavier */ #weather-radar .wr-trend { display: flex; align-items: flex-start; gap: var(--hx-space-3); margin: 0 0 var(--hx-space-2); padding: var(--hx-space-3); border-radius: var(--hx-radius-card); background: var(--hx-card); color: var(--hx-ink); } #weather-radar .wr-trend svg { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } #weather-radar .wr-trend p { margin: 0; font-size: var(--hx-text-body); line-height: var(--hx-leading-body); } #weather-radar .wr-trend b { font-weight: var(--hx-weight-strong); } #weather-radar .wr-trend:is([data-kind="building"], [data-kind="increasing"]) { background: var(--hx-warn-tint); color: var(--hx-warn); } #weather-radar .wr-trend:is([data-kind="easing"], [data-kind="passed"]) svg { color: var(--hx-good); } /* Loading / unavailable over the map while switching radar */ #weather-radar .wr-loading { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--hx-space-3); background: color-mix(in srgb, var(--hx-page) 82%, transparent); color: var(--hx-ink); font-size: var(--hx-text-body); font-weight: var(--hx-weight-action); text-align: center; } #weather-radar .wr-loading[hidden] { display: none; } #weather-radar .wr-loading button { min-height: var(--hx-target-icon); padding: 0 var(--hx-space-4); border: 0; border-radius: var(--hx-radius-action); background: var(--hx-primary-bg); color: var(--hx-primary-ink); font-family: var(--hx-font); font-size: var(--hx-text-label); font-weight: var(--hx-weight-strong); cursor: pointer; } #weather-radar .wr-spin { width: var(--hx-space-5); height: var(--hx-space-5); border: 3px solid var(--hx-hairline); border-top-color: var(--hx-primary-bg); border-radius: 50%; animation: wr-spin .9s linear infinite; } @keyframes wr-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #weather-radar .wr-spin { animation-duration: 3s; } } #weather-panel .wr-status { display: flex; align-items: center; gap: var(--hx-space-2); min-height: 64px; padding: var(--hx-space-2) var(--hx-space-4); border-top: 1px solid var(--hx-hairline); background: var(--hx-good-tint); } #weather-panel .wr-status[data-level="warn"] { background: var(--hx-warn-tint); } #weather-panel .wr-status[data-level="danger"] { background: var(--hx-danger-tint); } /* heavy rain now: red, never green (review, 5 Oct 2026) */ #weather-panel .wr-status[data-level="danger"] .wr-st-mark { background: var(--hx-danger-solid); color: var(--hx-on-dark); } #weather-panel .wr-status[data-level="ok"] { background: var(--hx-card); } /* nothing passes a level: plain, not a green "all clear" */ #weather-panel .wr-status[data-level="ok"] .wr-st-mark { background: var(--hx-tone-grey-bg); color: var(--hx-tone-grey-ink); } #weather-panel .wr-st-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); } #weather-panel .wr-status[data-level="warn"] .wr-st-mark { background: var(--hx-tone-amber-bg); color: var(--hx-tone-amber-ink); } #weather-panel .wr-status[data-level="neutral"] { background: var(--hx-card); } /* no rain now, but rain likely soon: no green "all clear" */ #weather-panel .wr-status[data-level="neutral"] .wr-st-mark { background: var(--hx-tone-grey-bg); color: var(--hx-tone-grey-ink); } #weather-panel .wr-st-mark svg { width: 20px; height: 20px; } /* same mark as the weather card's banner */ #weather-panel .wr-st-main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; padding-top: var(--hx-chip-nudge); } #weather-panel .wr-st-main span:empty { display: none; } /* no second line when only the title applies */ #weather-panel .wr-st-main b { color: var(--hx-ink); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); overflow-wrap: anywhere; } #weather-panel .wr-st-main span, #weather-panel .wr-st-next span { color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); overflow-wrap: anywhere; } /* wrap, never "…" ("RainViewer 23:40 · Steady" was cut at 360 px) */ #weather-panel .wr-st-next { display: flex; flex: none; flex-direction: column; gap: 2px; padding: var(--hx-chip-nudge) 0 0 var(--hx-space-3); border-left: 1px solid var(--hx-sky-rule); } #weather-panel .wr-st-next b { color: var(--hx-ink); font-size: var(--hx-text-label); font-weight: var(--hx-weight-strong); white-space: nowrap; } #weather-panel .wr-st-next[data-level="warn"] b { color: var(--hx-warn); } #weather-panel .wr-st-next[data-level="danger"] b { color: var(--hx-danger); } /* TMD website link, now in the full-screen radar view */ #weather-radar .wr-link { display: flex; align-items: center; justify-content: space-between; gap: var(--hx-space-2); min-height: var(--hx-target-icon); padding: 0 var(--hx-space-1); color: var(--hx-tone-blue-ink); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); text-decoration: none; } #weather-radar .wr-link svg { flex: none; width: 16px; height: 16px; } /* WeatherNext rain-chance map (3 Oct 2026): entry on All wind farms, full-screen map of 11 km squares, 48-hour timeline */ #weather-overview-panel .overview-rain-map { display: flex; align-items: center; gap: var(--hx-space-3); min-height: 64px; 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; } #weather-overview-panel .overview-rain-map > i { 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-info-tint); color: var(--hx-info); } #weather-overview-panel .overview-rain-map svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #weather-overview-panel .overview-rain-map > span { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; padding-top: var(--hx-chip-nudge); } #weather-overview-panel .overview-rain-map b { font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); } #weather-overview-panel .overview-rain-map small { color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #weather-overview-panel .overview-rain-map .chev { flex: none; color: var(--hx-muted); } #weathernext-map[data-hx][open] { box-sizing: border-box; position: fixed; inset: 0; display: flex; flex-direction: column; gap: var(--hx-space-2); width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: calc(var(--hx-space-3) + env(safe-area-inset-top, 0px)) var(--hx-space-3) calc(var(--hx-space-3) + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 0; background: var(--hx-page); color: var(--hx-ink); font-family: var(--hx-font); overflow: hidden; } #weathernext-map .wnm-head { display: flex; align-items: center; gap: var(--hx-space-3); } #weathernext-map .wnm-titles { flex: 1; min-width: 0; } #weathernext-map h2 { margin: 0; font-size: var(--hx-text-title); font-weight: var(--hx-weight-strong); } #weathernext-map .wnm-sub { margin: 2px 0 0; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #weathernext-map .wnm-chip { flex: none; padding: calc(4px + var(--hx-chip-nudge)) var(--hx-space-2) 4px; border-radius: var(--hx-radius-chip); background: var(--hx-tone-violet-bg); color: var(--hx-tone-violet-ink); font-size: max(var(--hx-text-min), calc(var(--hx-text-meta) * .9)); font-weight: var(--hx-weight-strong); } #weathernext-map .wnm-close, #weathernext-map .wnm-play { display: grid; place-items: center; flex: none; width: var(--hx-target-action); height: var(--hx-target-action); padding: 0; border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); color: var(--hx-ink); } #weathernext-map .wnm-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } #weathernext-map .wnm-frame { position: relative; flex: 1; min-height: 0; overflow: hidden; border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); } #weathernext-map .wnm-map { position: absolute; inset: 0; background: var(--hx-map-ground); } /* the base map has no ground layer: a fixed map colour, the same in both themes */ #weathernext-map .wnm-status { position: absolute; top: var(--hx-space-2); left: 50%; z-index: 2; max-width: calc(100% - 2 * var(--hx-space-3)); margin: 0; padding: calc(6px + var(--hx-chip-nudge)) var(--hx-space-3) 6px; border-radius: var(--hx-radius-chip); background: var(--hx-map-label-ink); color: var(--hx-map-label); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); text-align: center; transform: translateX(-50%); } #weathernext-map .wnm-status[hidden] { display: none; } #weathernext-map .wnm-farm { padding: 2px var(--hx-space-2) 0; border-radius: var(--hx-radius-chip); background: var(--hx-map-label); color: var(--hx-map-label-ink); box-shadow: 0 0 0 1px var(--hx-map-label-edge); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-strong); white-space: nowrap; pointer-events: none; } #weathernext-map .wnm-legend { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--hx-space-1) var(--hx-space-3); padding: 0 var(--hx-space-1); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #weathernext-map .wnm-legend-title { flex: none; color: var(--hx-muted); } #weathernext-map .wnm-bars { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; } #weathernext-map .wnm-scale { height: 12px; border-radius: 3px; } #weathernext-map .wnm-ticks { display: flex; color: var(--hx-muted); font-size: max(var(--hx-text-min), calc(var(--hx-text-meta) * .85)); } #weathernext-map .wnm-ticks span { flex: 1; text-align: center; } #weathernext-map .wnm-info { display: flex; flex-direction: column; gap: 2px; min-height: calc(var(--hx-text-label) * 2.9); margin: 0; padding: 0 var(--hx-space-1); color: var(--hx-ink); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); line-height: 1.4; } #weathernext-map .wnm-info b { font-weight: var(--hx-weight-strong); } #weathernext-map .wnm-info > b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--hx-space-1); font-weight: var(--hx-weight-action); } #weathernext-map .wnm-info-lead { margin-right: var(--hx-space-2); color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-strong); } #weathernext-map .wnm-info .wnm-v { margin-right: var(--hx-space-2); } #weathernext-map .wnm-info .wnm-v[data-level="warn"] { color: var(--hx-warn); } #weathernext-map .wnm-info .wnm-v[data-level="danger"] { color: var(--hx-danger); } #weathernext-map .wnm-info > span { color: var(--hx-muted); font-size: var(--hx-text-meta); } /* Overview (zoomed out, user 4 Oct 2026): farm areas in solid colour with the name in the middle; WTG icons and IDs come back when zoomed in */ html body #weathernext-map.wnm-far .horus-turbine-marker { display: none; } #weathernext-map.wnm-far .wnm-farm { cursor: pointer; } #weathernext-map.wnm-far .wnm-aim { display: none; } /* overview: no aim pointer */ #weathernext-map:not(.wnm-far) .wnm-farm { display: none; } #weathernext-map .wnm-pinkey { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hx-space-1) var(--hx-space-3); padding: 0 var(--hx-space-1); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #weathernext-map .wnm-pinkey[hidden] { display: none; } #weathernext-map .wnm-pinkey-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } #weathernext-map .wnm-pinkey-pin.horus-turbine-marker { display: grid; place-items: center; box-sizing: border-box; width: 20px; height: 20px; border: 1.5px solid var(--pin-border); border-radius: 50%; background: var(--pin-bg); color: var(--pin-ink); } #weathernext-map .wnm-pinkey-pin svg { width: 15px; height: 15px; } html body #weathernext-map .horus-turbine-marker:not([data-campaign-status]) .turbine-pin, #weathernext-map .wnm-pinkey-pin:not([data-campaign-status]) { opacity: .5; } #weathernext-map:not(.wnm-keys) :is(.wnm-legend, .wnm-pinkey) { display: none; } /* Farms panel on the rain forecast (user, 4 Oct 2026): each farm's rain chance for the timeline's hour; tap to aim at it; ‹ hides it */ #weathernext-map .wnm-farms, #weathernext-map .wnm-farms-tab { position: absolute; z-index: 2; top: var(--hx-space-2); left: var(--hx-space-2); box-sizing: border-box; border: 1px solid var(--hx-map-edge); border-radius: var(--hx-radius-card); background: var(--hx-map-panel); color: var(--hx-ink); box-shadow: var(--hx-map-lift); } #weathernext-map .wnm-farms { width: calc(var(--hx-card-width) * .57); overflow: hidden; } /* compact: fits a phone (user, 4 Oct 2026) */ #weathernext-map :is(.wnm-farms, .wnm-farms-tab)[hidden] { display: none; } #weathernext-map .wnm-farms-head { display: block; min-height: 36px; padding: 0 var(--hx-space-1) 0 var(--hx-space-3); border-bottom: 1px solid var(--hx-map-panel-line); color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-strong); } #weathernext-map :is(.wnm-farms-hide, .wnm-farms-tab, .wnm-farm-row) { font-family: inherit; cursor: pointer; } #weathernext-map .wnm-farms-hide { display: grid; place-items: center; width: calc(var(--hx-target-icon) - var(--hx-space-2)); height: calc(var(--hx-target-icon) - var(--hx-space-2)); margin: 0; padding: 0; border: 0; background: none; color: var(--hx-ink); } #weathernext-map .wnm-farms-tab { display: flex; align-items: center; gap: var(--hx-space-1); min-height: calc(var(--hx-target-icon) - var(--hx-space-1)); margin: 0; padding: 0 var(--hx-space-2) 0 var(--hx-space-3); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-strong); } #weathernext-map :is(.wnm-farms, .wnm-farms-tab) svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } #weathernext-map .wnm-farm-row { display: grid; grid-template-columns: auto 1fr 40px 52px; align-items: center; gap: var(--hx-space-2); width: 100%; min-height: calc(var(--hx-target-icon) - var(--hx-space-1)); margin: 0; padding: 0 var(--hx-space-3); border: 0; border-top: 1px solid var(--hx-map-panel-line); background: none; color: var(--hx-ink); font-size: var(--hx-text-meta); text-align: left; } #weathernext-map .wnm-farm-row:first-child { border-top: 0; } #weathernext-map .wnm-farm-row i { width: 12px; height: 12px; border-radius: 3px; background: var(--hx-map-panel-track); box-shadow: 0 0 0 2px var(--hx-on-dark); } #weathernext-map .wnm-farm { box-shadow: 0 0 0 2px var(--farm, var(--hx-hairline)); } /* name label in the farm's outline colour */ #weathernext-map .wnm-farms-head .wnm-col { text-align: left; font-size: max(var(--hx-text-min), calc(var(--hx-text-meta) * .85)); line-height: 1.1; } #weathernext-map .wnm-farms-cols .wnm-col { color: var(--hx-muted); font-size: max(var(--hx-text-min), calc(var(--hx-text-meta) * .85)); font-weight: var(--hx-weight-strong); line-height: 1.15; white-space: nowrap; } #weathernext-map .wnm-farms-cols .wnm-col small { display: block; font-size: max(var(--hx-text-min), calc(var(--hx-text-meta) * .75)); font-weight: var(--hx-weight-action); } #weathernext-map .wnm-farms-head { padding-bottom: var(--hx-space-1); } #weathernext-map .wnm-farms-top { display: flex; align-items: center; justify-content: space-between; gap: var(--hx-space-2); } #weathernext-map .wnm-farms-when { display: flex; flex-wrap: wrap; gap: var(--hx-space-1); padding: var(--hx-space-1) 0; } #weathernext-map .wnm-farms-when > span { padding: calc(1px + var(--hx-chip-nudge)) 6px calc(1px - var(--hx-chip-nudge)); border-radius: var(--hx-radius-chip); background: var(--hx-map-panel-track); color: var(--hx-ink); font-size: max(var(--hx-text-min), calc(var(--hx-text-meta) * .85)); font-weight: var(--hx-weight-strong); white-space: nowrap; } /* date and time: two sharp chips in different colours (user, 4 Oct 2026) */ #weathernext-map .wnm-farms-top .wnm-farms-when { flex: 1; flex-wrap: nowrap; min-width: 0; } /* the two chips share the row (user, 4 Oct 2026): wider, centred, a little larger */ #weathernext-map .wnm-farms-when > :is(.wnm-chip-date, .wnm-chip-time) { flex: 1 1 0; min-width: 0; padding-top: calc(3px + var(--hx-chip-nudge)); padding-bottom: calc(3px - var(--hx-chip-nudge)); text-align: center; font-size: var(--hx-text-meta); } #weathernext-map .wnm-farms-when > .wnm-chip-date { flex-grow: 1.5; } #weathernext-map .wnm-farms-when > .wnm-chip-date { background: var(--hx-map-button); color: var(--hx-on-dark); } #weathernext-map .wnm-farms-when > .wnm-chip-time { background: var(--hx-map-pick); color: var(--hx-on-dark); } #weathernext-map .wnm-chip-now { display: inline-flex; align-items: center; gap: 5px; background: var(--hx-header); color: var(--hx-on-dark); text-transform: uppercase; letter-spacing: var(--hx-tracking-caps); } #weathernext-map .wnm-farms-when > .wnm-chip-now { background: var(--hx-header); color: var(--hx-on-dark); } #weathernext-map .wnm-chip-now::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hx-sky-live); } /* a chosen farm: other farms' WTGs fade back, no IDs (as on the main map) */ #weathernext-map .horus-turbine-marker { z-index: 2; } #weathernext-map .horus-turbine-marker.wnm-other { z-index: 1; filter: var(--hx-map-dim); } /* the chosen farm's WTGs always on top */ #weathernext-map .horus-turbine-marker.wnm-other :is(.turbine-bubble, .turbine-connector) { visibility: hidden; } /* column titles use the same grid and inset as the rows, so each title sits over its values */ #weathernext-map .wnm-farms-cols { display: grid; grid-template-columns: auto 1fr 40px 52px; align-items: start; gap: var(--hx-space-2); margin: 0 calc(-1 * var(--hx-space-1)) 0 calc(-1 * var(--hx-space-3)); padding: 0 var(--hx-space-3); } #weathernext-map .wnm-farms-cols i { width: 12px; } #weathernext-map .wnm-farm-row .wnm-v { text-align: left; font-size: var(--hx-text-meta); font-weight: var(--hx-weight-strong); } /* easier to read (user, 4 Oct 2026): units on the values, taller rows, light stripes, the chosen farm in the main map's teal */ #weathernext-map .wnm-farm-row { min-height: calc(var(--hx-target-icon) - var(--hx-space-1)); } /* 44 px touch target (review, 5 Oct 2026; was 32) */ #weathernext-map .wnm-farm-row b { font-size: var(--hx-text-meta); } #weathernext-map .wnm-farm-row:nth-child(even) { background: color-mix(in srgb, var(--hx-ink) 4%, transparent); } /* a token, so the stripe also shows in Dark */ #weathernext-map .wnm-farm-row.is-aimed { background: var(--hx-map-pick); color: var(--hx-on-dark); } #weathernext-map .wnm-farm-row.is-aimed .wnm-v[data-level] { color: var(--hx-on-dark); } #weathernext-map .wnm-farm-row .wnm-v[data-level="warn"] { color: var(--hx-warn); } #weathernext-map .wnm-farm-row .wnm-v[data-level="danger"] { color: var(--hx-danger); } @media (hover: hover) { #weathernext-map :is(.wnm-farm-row, .wnm-farms-hide, .wnm-farms-tab):hover { background: var(--hx-good-tint); } } #weathernext-map .wnm-keybtn { position: absolute; bottom: var(--hx-space-2); left: var(--hx-space-2); z-index: 2; min-height: calc(var(--hx-target-icon) - var(--hx-space-2)); margin: 0; padding: calc(4px + var(--hx-chip-nudge)) var(--hx-space-3) 4px; border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-chip); background: var(--hx-card); color: var(--hx-ink); box-shadow: var(--hx-shadow-raised); font-family: var(--hx-font); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-strong); } #weathernext-map .wnm-aim { position: absolute; top: 50%; left: 50%; z-index: 1; width: 48px; height: 48px; transform: translate(-50%, -50%); pointer-events: none; } #weathernext-map .wnm-aim svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--hx-ink); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 1.5px var(--hx-on-dark)) drop-shadow(0 0 1.5px var(--hx-on-dark)); } #weathernext-map .wnm-aim .dot { fill: var(--hx-ink); stroke: none; } #weathernext-map .wnm-time { display: flex; align-items: center; gap: var(--hx-space-3); padding: var(--hx-space-1) var(--hx-space-2); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); } #weathernext-map .wnm-play { width: 40px; height: 40px; border: 0; border-radius: var(--hx-radius-badge); background: var(--hx-solid); color: var(--hx-solid-ink); box-shadow: var(--hx-glow-main); } #weathernext-map .wnm-play svg { width: 18px; height: 18px; fill: currentColor; } #weathernext-map .wnm-range { flex: 1; min-width: 0; height: 40px; margin: 0; accent-color: var(--hx-ink); } #weathernext-map .wnm-when { flex: none; min-width: 6.5em; color: var(--hx-ink); font-size: var(--hx-text-label); font-weight: var(--hx-weight-strong); text-align: right; white-space: nowrap; } #weathernext-map .wnm-foot { margin: 0; padding: 0 var(--hx-space-1); color: var(--hx-muted); font-size: max(var(--hx-text-min), calc(var(--hx-text-meta) * .9)); font-weight: var(--hx-weight-body); line-height: 1.4; } /* Background map choice on the web map (4 Oct 2026): Online map / Horus map (self-hosted) */ /* the map buttons draw their icons as masks (the inline svg is hidden), like the buttons above it: two stacked layers */ body:not(.driving) .map-actions .base-map-button::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%209%205-9%205-9-5z%22%2F%3E%3Cpath%20d%3D%22m3%2013%209%205%209-5%22%2F%3E%3C%2Fsvg%3E"); } .base-map-pop[data-hx] { position: fixed; top: 0; right: 0; z-index: 1000; /* placed beside the button when opened */ display: flex; flex-direction: column; gap: var(--hx-space-1); width: min(280px, calc(100vw - var(--hx-target-action) - var(--hx-space-3) * 4)); padding: var(--hx-space-2); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); box-shadow: var(--hx-shadow-float); font-family: var(--hx-font); } .base-map-pop[hidden] { display: none; } .base-map-pop button { display: flex; align-items: center; gap: var(--hx-space-3); min-height: var(--hx-target-action); margin: 0; padding: var(--hx-space-2); border: 0; border-radius: var(--hx-radius-card); background: none; color: var(--hx-ink); font-family: inherit; text-align: left; } .base-map-pop button[aria-checked="true"] { background: var(--hx-good-tint); } .base-map-pop button i { flex: none; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid var(--hx-muted); border-radius: 50%; } .base-map-pop button[aria-checked="true"] i { border: 5px solid var(--hx-good); } .base-map-pop button span { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: var(--hx-chip-nudge); } .base-map-pop b { font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); } .base-map-pop small { color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } .base-map-status[data-hx] { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 150px); left: 50%; z-index: 1000; display: flex; flex-direction: column; gap: var(--hx-space-2); width: min(320px, calc(100vw - var(--hx-space-3) * 2)); box-sizing: border-box; padding: var(--hx-space-3); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); box-shadow: var(--hx-shadow-float); color: var(--hx-ink); font-family: var(--hx-font); transform: translateX(-50%); } .base-map-status[hidden] { display: none; } .base-map-status p { margin: 0; font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); line-height: 1.4; text-align: center; } .base-map-status[role="status"] { width: max-content; max-width: min(320px, calc(100vw - var(--hx-space-3) * 2)); padding: calc(6px + var(--hx-chip-nudge)) var(--hx-space-3) 6px; border-radius: var(--hx-radius-chip); background: var(--hx-map-label-ink); color: var(--hx-map-label); } .base-map-status[role="status"] p { font-size: var(--hx-text-meta); } .base-map-status-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hx-space-2); } .base-map-status-actions[hidden] { display: none; } .base-map-status-actions button { min-height: var(--hx-target-action); margin: 0; padding: var(--hx-chip-nudge) var(--hx-space-2) 0; border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); color: var(--hx-ink); font-family: inherit; font-size: var(--hx-text-label); font-weight: var(--hx-weight-strong); } .base-map-status-actions button:last-child { border-color: var(--hx-solid); background: var(--hx-solid); color: var(--hx-solid-ink); box-shadow: var(--hx-glow-main); } /* Location button: busy while finding a fix; the GPS dot pulses when the map moves to it (4 Oct 2026) */ @keyframes hx-locating { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } @keyframes hx-gps-pulse { 0% { box-shadow: 0 0 0 0 var(--hx-info-tint); } 100% { box-shadow: 0 0 0 22px transparent; } } body:not(.driving) .map-actions #locate.is-locating::before { animation: hx-locating 1s ease-in-out infinite; } .gps-marker.gps-pulse { border-radius: 50%; animation: hx-gps-pulse .8s ease-out 2; } @media (prefers-reduced-motion: reduce) { body:not(.driving) .map-actions #locate.is-locating::before { animation: none; opacity: .5; } .gps-marker.gps-pulse { animation: none; } } /* No farms shown (audit 4 Oct 2026): a note under the campaign bar with one tap to show them */ .farm-hint[data-hx] { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 150px); left: var(--hx-space-3); z-index: 25; display: flex; align-items: center; gap: var(--hx-space-3); width: max-content; max-width: calc(100vw - var(--hx-target-action) - var(--hx-space-3) * 3); /* clear of the map button column */ box-sizing: border-box; padding: var(--hx-space-2) var(--hx-space-2) var(--hx-space-2) var(--hx-space-3); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); box-shadow: var(--hx-shadow-float); color: var(--hx-ink); font-family: var(--hx-font); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); } .farm-hint[hidden] { display: none; } .farm-hint button { flex: none; min-height: var(--hx-target-icon); margin: 0; padding: var(--hx-chip-nudge) var(--hx-space-3) 0; border: 1px solid var(--hx-ink); border-radius: var(--hx-radius-card); background: var(--hx-solid); color: var(--hx-solid-ink); font-family: inherit; font-size: var(--hx-text-label); font-weight: var(--hx-weight-strong); box-shadow: var(--hx-glow-main); } #weathernext-map .wnm-rows-wait { margin: 0; padding: var(--hx-space-2) var(--hx-space-3); color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } /* until the first squares arrive */ /* Weather warning: the forecast behind it (5 Oct 2026) — peak and time, when it starts, and the next 6 hours as small bars */ #weather-warning-detail .wd-forecast { display: grid; gap: var(--hx-space-3); padding: var(--hx-space-3); } #weather-warning-detail .wd-fc-wait { margin: 0; color: var(--hx-muted); font-size: var(--hx-text-meta); } #weather-warning-detail .wd-fc-head { display: grid; gap: var(--hx-space-1); } #weather-warning-detail .wd-fc-head strong { color: var(--hx-ink); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); } #weather-warning-detail .wd-fc-head span { color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); } #weather-warning-detail .wd-fc-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--hx-space-2); margin: 0; padding: 0; list-style: none; } #weather-warning-detail .wd-fc-strip li { display: grid; grid-template-rows: auto 56px auto; justify-items: center; gap: var(--hx-space-1); } #weather-warning-detail .wd-fc-strip b { color: var(--hx-ink); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-strong); } #weather-warning-detail .wd-fc-strip i { position: relative; width: 100%; max-width: 28px; border-radius: 6px; background: var(--hx-track); overflow: hidden; } #weather-warning-detail .wd-fc-strip i::after { content: ''; position: absolute; inset: auto 0 0; height: calc(var(--fill) * 100%); border-radius: inherit; background: var(--hx-info); } #weather-warning-detail .wd-fc-strip li[data-level=warn] :is(b) { color: var(--hx-warn); } #weather-warning-detail .wd-fc-strip li[data-level=warn] i::after { background: var(--hx-warn); } #weather-warning-detail .wd-fc-strip li[data-level=danger] :is(b) { color: var(--hx-danger); } #weather-warning-detail .wd-fc-strip li[data-level=danger] i::after { background: var(--hx-danger); } #weather-warning-detail .wd-fc-strip small { color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #weather-warning-detail .wd-fc-note { margin: 0; color: var(--hx-muted); font-size: var(--hx-text-meta); } /* ---------- Message cards on the notification design (5 Oct 2026, user: "check all card, to match with this design"): cream panel, map edge, an 8 px left edge in the level's colour, a round badge, dark text ---------- */ #weather-warning-detail .wd-status, #navigation-error .ne-status { border: 1px solid var(--hx-map-edge); border-left: 8px solid var(--hx-alert-caution); border-radius: var(--hx-radius-card); background: var(--hx-map-panel); color: var(--hx-ink); } #weather-warning-detail .wd-status .ww-icon, #navigation-error .ne-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--hx-alert-caution); color: var(--hx-alert-caution-ink); } #weather-warning-detail .wd-status[data-severity="stop"] { border-color: var(--hx-map-edge); border-left-color: var(--hx-alert-stop); background: var(--hx-map-panel); } #weather-warning-detail .wd-status[data-severity="stop"] .ww-icon { background: var(--hx-alert-stop); color: var(--hx-on-dark); } #weather-warning-detail .wd-status[data-severity="inactive"] { border-left-color: var(--hx-muted); background: var(--hx-map-panel); } #weather-warning-detail .wd-status[data-severity="inactive"] .ww-icon { background: var(--hx-muted-solid); color: var(--hx-on-dark); } /* All wind farms (user, 5 Oct 2026: "details should collapse by default"): a folded farm is one line — name, warning chip, ⌄. The Now values and the full card show when it is opened. */ #weather-overview-panel .farm-weather-toggle[aria-expanded="false"] .fw-glance { display: none; } /* Date and time pickers (user, 5 Oct 2026): the same two chips, now tappable, with a small ⌄. The select fills the chip. */ /* 5 Oct 2026 (user): flatter — about 34 px tall with soft corners, not round pills */ #weathernext-map .wnm-farms-when > .wnm-pick { position: relative; display: flex; align-items: center; padding: 0; border-radius: var(--hx-radius-segment); font-size: var(--hx-text-meta); white-space: nowrap; cursor: pointer; } #weathernext-map .wnm-pick select { appearance: none; box-sizing: border-box; width: 100%; min-height: calc(var(--hx-target-icon) * .7); margin: 0; padding: 0 calc(var(--hx-space-1) + 14px) 0 var(--hx-space-2); border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; font-weight: var(--hx-weight-strong); text-align: center; text-align-last: center; cursor: pointer; } #weathernext-map .wnm-pick select:focus-visible { outline: 3px solid var(--hx-focus); outline-offset: 2px; } #weathernext-map .wnm-pick select option { background: var(--hx-card); color: var(--hx-ink); } #weathernext-map .wnm-pick::after { content: ""; position: absolute; right: calc(var(--hx-space-1) + 3px); width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); pointer-events: none; } #weathernext-map .wnm-farms-when > .wnm-pick { flex: 1 0 auto; } /* each picker at least as wide as its text and ⌄ */ /* One sheet colour (5 Oct 2026, user: "why are Menu and Bookmarks different? standardise all cards"): every sheet is the page colour and its cards the card colour. Bookmarks kept an older off-white sheet (mobile-ui.css loads later at the same strength). */ #places-dialog[data-hx] { background: var(--hx-page); } /* Tap targets (full UI check, 5 Oct 2026). Same look; the area you can tap is 40 px. */ #weather-panel > a, #weather-lightning-view > a { display: inline-flex; align-items: center; min-height: var(--hx-icon-button); } /* data source links (18 px) */ #places-dialog[data-hx] #place-list .bookmark-title { padding-block: 11px; margin-block: -11px; } /* the bookmark name (18 px tall) */ #places-dialog[data-hx] #place-list .bookmark-creator { padding: 9px var(--hx-space-1); margin: -9px calc(-1 * var(--hx-space-1)); } /* who added it (32 x 22) */ /* Admin check (5 Oct 2026): older tool sheets (Route Approvals, Team Operations, Road Review ...) and the team panel kept the Light header bar green in Dark. Dark: the sheet colour with a line under it, like the newer sheets. Light is unchanged. */ /* One shell (UI audit, 6 Oct 2026, owner: "do what you suggest"). The older tool dialogs (Lite Mode, App Log, Recorded Trips, Route Approvals, Road review, Campaign settings, New campaign, WTG picker, Choose a route, Arrival ...), the Exit navigation dialog, the Workers panel and the map editor kept a green title bar in the Field theme and square 44 px buttons. Now, in both themes: the sheet colour with a hairline under the title, ink title, 52 px card-coloured Back/Close like every newer sheet. The older stylesheets read these colours through --lg-* variables, so the variables are re-pointed here instead of fighting their !important rules. */ :is(.horus-tool-dialog .tool-heading, .team-overlay > .team-section-head, .map-edit-panel > .map-edit-heading, #exit-navigation-dialog > .ui-dialog-heading) { --lg-b-234f40: var(--hx-card); --lg-t-ffffff: var(--hx-ink); --lg-t-183d39: var(--hx-ink); --lg-b-e8ebe8: var(--hx-card); --lg-l-62765a: var(--hx-hairline); --hx-target-icon: var(--hx-target-action); border-bottom: 1px solid var(--hx-hairline); } /* On a phone every one of them is a bottom sheet (the newer sheets' shape): full width, 20 px top corners, no border, the sheet shadow. */ @media (max-width: 760px) { html body dialog.horus-tool-dialog:is(*, #hx-keep-specificity), html body #exit-navigation-dialog:is(*, #hx-keep-specificity) { 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; border: 0; border-radius: var(--hx-radius-sheet) var(--hx-radius-sheet) 0 0; box-shadow: var(--hx-shadow-sheet); } html:root body dialog.horus-tool-dialog.campaign-dialog[open]:is(*, #hx-keep-specificity) { border-radius: var(--hx-radius-sheet) var(--hx-radius-sheet) 0 0; max-height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--hx-space-2)); } html body .map-area .team-overlay:is(*, #hx-keep-specificity) { top: auto; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 75dvh; border: 0; border-radius: var(--hx-radius-sheet) var(--hx-radius-sheet) 0 0; box-shadow: var(--hx-shadow-sheet); padding: 0 var(--hx-space-3) calc(var(--hx-space-3) + env(safe-area-inset-bottom, 0px)); } html body .map-area .team-overlay > .team-section-head:is(*, #hx-keep-specificity) { position: sticky; top: 0; z-index: 1; margin: 0 calc(-1 * var(--hx-space-3)) var(--hx-space-3); padding-inline: var(--hx-space-4); background: var(--hx-card); } } :is(.horus-tool-dialog, #exit-navigation-dialog, #farm-picker, dialog.contact-card, .team-overlay)::backdrop { background: var(--hx-scrim); } /* Exit navigation: a small confirm sheet, the two choices side by side like Cancel | Save elsewhere. */ #exit-navigation-dialog#exit-navigation-dialog:is(*, #hx-keep-specificity) { margin: 0; max-width: 100%; } #exit-navigation-dialog .exit-navigation-actions { flex-direction: row; } #exit-navigation-dialog .exit-navigation-actions > button { flex: 1 1 0; min-width: 0; } /* Source after a name, "Rain Forecast (Google DeepMind)": 60% of the name's size (user, 5 Oct 2026), never under the 11 px minimum. */ .hx-by { font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); white-space: nowrap; } /* Text people type (Enter / Shift+Enter) keeps its line breaks wherever it is shown again (5 Oct 2026, user). Visit notes already do (#campaign-visits .cv-note p); these are the Activity reason, the weather report details and the bookmark description. */ :is(#campaign-visits .cv-detail, .weather-detail-note, .bookmark-description) { white-space: pre-line; overflow-wrap: anywhere; } /* Bookmark card: the line under the name ("Shared", distance) follows the name directly, the notification rhythm (5 Oct 2026). */ #places-dialog[data-hx] #place-list .bookmark-list-card > .bookmark-summary { margin-top: calc(-1 * var(--hx-space-2)); } /* Warning details, status card: the notification rhythm (5 Oct 2026): the state line follows the hazard directly, the icon is centred on both lines, even space above and below. */ #weather-warning-detail .wd-status { align-items: center; } #weather-warning-detail .wd-status .wd-text { gap: 0; } #weather-warning-detail .wd-status .weather-detail-state { line-height: var(--hx-leading-body); } #weather-warning-detail .wd-fc-strip li { margin: 0; } /* an older list rule added 12 px under each bar: the note now follows by the card's own gap */ #weather-warning-detail .weather-detail-when { display: block; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); line-height: var(--hx-leading-body); white-space: nowrap; } /* Type standard (5 Oct 2026): Campaign settings field names and the WTG picker count are labels, like every other field name. */ html body :is(.campaign-content .campaign-field > span, .campaign-selection-count):is(*, #hx-keep-specificity) { font-size: var(--hx-text-label); } /* Share list (Tracker, 5 Oct 2026): the message preview as a card, then a status line, then Copy | Share. */ #campaign-share .cs-preview { max-height: 40vh; margin: 0; padding: var(--hx-space-3); overflow: auto; 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-label); font-weight: var(--hx-weight-body); line-height: var(--hx-leading-body); white-space: pre-wrap; overflow-wrap: anywhere; } #campaign-share .cs-status { margin: 0; color: var(--hx-muted); font-size: var(--hx-text-label); line-height: var(--hx-leading-body); } #campaign-share .cs-status:empty { display: none; } #campaign-tracker .ct-share { width: 100%; } /* Ask as a chat, after LINE (user, 5 Oct 2026). Ask on the left: avatar, name, a card-coloured bubble with a tail, its buttons inside the bubble (as LINE rich messages), and the time + Read aloud under it. Your questions on the right in the main colour with the time beside them. "Typing" dots while the Hub is searched; quick-reply chips above the text box until the first question. Typed line breaks are kept (Enter sends, Shift+Enter is a new line). */ #assistant-sheet .ask-log { display: flex; flex-direction: column; gap: var(--hx-space-3); padding-bottom: var(--hx-space-2); } #assistant-sheet .ask-day { align-self: center; margin: 0; padding: var(--hx-space-1) var(--hx-space-3); border-radius: var(--hx-radius-chip); background: var(--hx-card); color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); line-height: var(--hx-leading-head); } #assistant-sheet .ask-row { display: flex; align-items: flex-start; gap: var(--hx-space-2); } #assistant-sheet .ask-row-me { justify-content: flex-end; align-items: flex-end; padding: 0 var(--hx-space-2) 0 15%; } /* right padding: room for the tail */ #assistant-sheet .ask-row-bot { padding-right: var(--hx-space-5); } #assistant-sheet .ask-avatar { display: grid; place-items: center; flex: none; width: var(--hx-badge-size); height: var(--hx-badge-size); border-radius: 50%; background: var(--hx-tone-teal-bg); color: var(--hx-tone-teal-ink); } #assistant-sheet .ask-avatar svg { width: 20px; height: 20px; } #assistant-sheet .ask-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hx-space-1); min-width: 0; } #assistant-sheet .ask-name { margin: 0; color: var(--hx-muted); font-size: var(--hx-text-meta); line-height: var(--hx-leading-head); } #assistant-sheet .ask-bubble { position: relative; box-sizing: border-box; max-width: 100%; margin: 0; padding: var(--hx-space-2) var(--hx-space-3); border-radius: var(--hx-radius-card); font-size: var(--hx-text-body); line-height: var(--hx-leading-body); overflow-wrap: anywhere; } #assistant-sheet .ask-bubble::before { content: ''; position: absolute; top: 0; width: var(--hx-space-2); height: var(--hx-space-3); background: inherit; } #assistant-sheet .ask-a { border-top-left-radius: var(--hx-space-1); background: var(--hx-card); color: var(--hx-ink); box-shadow: var(--hx-shadow-raised); } #assistant-sheet .ask-a::before { left: calc(-1 * var(--hx-space-2) + 1px); clip-path: polygon(0 0, 100% 0, 100% 100%); } #assistant-sheet .ask-q { border-top-right-radius: var(--hx-space-1); background: var(--hx-chat-me-bg); color: var(--hx-ink); white-space: pre-line; } /* a tint, not the solid button colour */ #assistant-sheet .ask-q::before { right: calc(-1 * var(--hx-space-2) + 1px); clip-path: polygon(0 0, 100% 0, 0 100%); } #assistant-sheet .ask-text { margin: 0; color: inherit; font-size: var(--hx-text-body); line-height: var(--hx-leading-body); white-space: pre-line; overflow-wrap: anywhere; } #assistant-sheet .ask-from { margin: var(--hx-space-2) 0 0; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #assistant-sheet .ask-time { flex: none; color: var(--hx-muted); font-size: var(--hx-text-meta); line-height: var(--hx-leading-head); font-variant-numeric: tabular-nums; } #assistant-sheet .ask-meta { display: flex; align-items: center; gap: var(--hx-space-1); } #assistant-sheet .ask-speak { display: grid; place-items: center; width: var(--hx-target-icon); height: var(--hx-target-icon); margin: calc(-1 * var(--hx-space-3)) 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--hx-muted); cursor: pointer; } #assistant-sheet .ask-speak svg { width: 20px; height: 20px; } /* buttons inside Ask's bubble: one per row, full width, Navigate / Review in the main colour, Show on map outlined */ #assistant-sheet :is(.ask-navigate, .ask-review, .ask-show) { display: flex; align-items: center; justify-content: center; gap: var(--hx-space-2); box-sizing: border-box; width: 100%; min-height: var(--hx-target-icon); margin-top: var(--hx-space-3); padding: 0 var(--hx-space-3); border-radius: var(--hx-radius-action); font-family: var(--hx-font); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); cursor: pointer; } #assistant-sheet :is(.ask-navigate, .ask-review) { border: 0; background: var(--hx-primary-bg); color: var(--hx-primary-ink); box-shadow: var(--hx-glow-main); } #assistant-sheet .ask-show { border: 1px solid var(--hx-hairline); background: var(--hx-card); color: var(--hx-ink); font-size: var(--hx-text-label); } /* "Show FKW-01B on the map" fits one line */ #assistant-sheet .ask-show svg { width: 18px; height: 18px; } #assistant-sheet .ask-draft { margin-top: var(--hx-space-3); padding-top: var(--hx-space-3); border-top: 1px solid var(--hx-hairline); } /* a divider, not a box in the bubble: even padding */ #assistant-sheet .ask-draft-title { margin: 0; color: var(--hx-ink); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-head); } #assistant-sheet .ask-draft-note { margin: var(--hx-space-1) 0 0; color: var(--hx-muted); font-size: var(--hx-text-label); line-height: var(--hx-leading-body); white-space: pre-line; overflow-wrap: anywhere; } #assistant-sheet .ask-problem { background: var(--hx-danger-tint, var(--hx-card)); color: var(--hx-danger); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); } #assistant-sheet .ask-draft .ask-problem, #assistant-sheet .ask-a > .ask-problem { margin: var(--hx-space-2) 0 0; padding: var(--hx-space-2) var(--hx-space-3); border-radius: var(--hx-radius-action); } /* "typing" dots */ #assistant-sheet .ask-typing { display: flex; align-items: center; gap: var(--hx-space-1); min-height: calc(var(--hx-text-body) * 1.6); } #assistant-sheet .ask-dot { width: var(--hx-space-2); height: var(--hx-space-2); border-radius: 50%; background: var(--hx-muted); opacity: .35; animation: ask-dot 1.2s ease-in-out infinite; } #assistant-sheet .ask-dot:nth-child(2) { animation-delay: .15s; } #assistant-sheet .ask-dot:nth-child(3) { animation-delay: .3s; } @keyframes ask-dot { 30% { opacity: 1; transform: translateY(calc(-1 * var(--hx-space-1))); } } #assistant-sheet .ask-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* quick replies above the text box, one swipeable row */ #assistant-sheet .ask-quick { display: flex; gap: var(--hx-space-2); margin: 0; padding: var(--hx-space-1) 0; overflow-x: auto; scrollbar-width: none; } #assistant-sheet .ask-quick[hidden] { display: none; } #assistant-sheet .ask-quick::-webkit-scrollbar { display: none; } #assistant-sheet .ask-chip { flex: none; min-height: var(--hx-icon-button); padding: var(--hx-chip-nudge) var(--hx-space-3) 0; border: 1px solid var(--hx-primary-bg); border-radius: var(--hx-radius-chip); background: var(--hx-card); color: var(--hx-ink); font-family: var(--hx-font); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); white-space: nowrap; cursor: pointer; } /* the text box: a rounded field with the mic / Send beside it */ #assistant-sheet .ask-bar { position: sticky; bottom: 0; display: flex; align-items: flex-end; gap: var(--hx-space-2); margin: 0; padding-top: var(--hx-space-2); border-top: 1px solid var(--hx-hairline); background: var(--hx-page); box-shadow: 0 var(--hx-space-3) 0 var(--hx-page); } /* the shadow covers the sheet's bottom padding, so messages do not show under the box */ #assistant-sheet .ask-input { flex: 1; box-sizing: border-box; min-width: 0; min-height: var(--hx-target-icon); margin: 0; padding: var(--hx-space-2) var(--hx-space-4); border: 1px solid var(--hx-hairline); border-radius: calc(var(--hx-target-icon) / 2); background: var(--hx-card); color: var(--hx-ink); font-family: var(--hx-font); font-size: var(--hx-text-input); line-height: var(--hx-leading-body); resize: none; } #assistant-sheet .ask-input:focus-visible { outline: 2px solid var(--hx-field-focus, var(--hx-info)); outline-offset: 1px; } #assistant-sheet .ask-send { display: grid; place-items: center; flex: none; width: var(--hx-target-icon); height: var(--hx-target-icon); padding: 0; border: 0; border-radius: 50%; background: var(--hx-primary-bg); color: var(--hx-primary-ink); box-shadow: var(--hx-glow-main); cursor: pointer; } #assistant-sheet .ask-send:disabled { opacity: .5; } #assistant-sheet .ask-send svg { width: 22px; height: 22px; } /* Ask voice (5 Oct 2026): the mic in place of Send while the box is empty (hold to talk; red while listening; no language button — Whisper detects it). */ #assistant-sheet .ask-send.is-mic { touch-action: none; -webkit-user-select: none; user-select: none; } #assistant-sheet.is-listening .ask-send { background: var(--hx-danger-solid); color: var(--hx-on-dark); box-shadow: 0 0 0 6px var(--hx-danger-tint, transparent); animation: ask-listen 1.2s ease-in-out infinite; } @keyframes ask-listen { 50% { box-shadow: 0 0 0 10px var(--hx-danger-tint, transparent); } } @media (prefers-reduced-motion: reduce) { #assistant-sheet.is-listening .ask-send, #assistant-sheet .ask-dot { animation: none; } #assistant-sheet .ask-dot { opacity: .7; } } /* #1214 (owner, 14 Oct 2026): words beside the dots while Ask works ("Looking it up…", "Still working…", "Almost there…") */ #assistant-sheet .ask-typing .ask-wait:not(.ask-sr) { flex: 0 1 auto; min-width: 0; margin-left: var(--hx-space-1); color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); line-height: var(--hx-leading-head); } /* #1213 (owner, 14 Oct 2026): administrators choose the Ask model — one compact segmented control (track + the chosen white tile, as the radar sources) on the line "Admin trial · 28 left today", at its right end; 28 px to see, 44 px to tap */ #assistant-sheet .ch-titles:has(> .ask-model) { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--hx-space-2); } #assistant-sheet .ch-titles:has(> .ask-model) > h2 { flex: 1 0 100%; } #assistant-sheet .ch-titles:has(> .ask-model) > .ch-sub { flex: 1 1 0; min-width: 0; } #assistant-sheet .ask-model { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; flex: none; gap: 2px; margin: 0 0 0 auto; padding: 2px; border-radius: var(--hx-radius-segment); background: var(--hx-track); } #assistant-sheet .ask-model button { position: relative; box-sizing: border-box; min-width: 0; height: 28px; min-height: 0; margin: 0; padding: var(--hx-chip-nudge) 10px 0; 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-meta); font-weight: var(--hx-weight-action); line-height: 1; white-space: nowrap; cursor: pointer; } #assistant-sheet .ask-model button::after { content: ''; position: absolute; inset: -8px -1px; } /* 44 px tap height, the two halves never overlap */ #assistant-sheet .ask-model button[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); cursor: default; } #assistant-sheet .ask-model button:focus-visible { outline: 2px solid var(--hx-field-focus, var(--hx-info)); outline-offset: 1px; } /* Ask on different screens (user, 5 Oct 2026). Bubbles stop at a readable width on big screens. Wide screens (tablet, Fold open, desktop, phone on its side) get a wider chat with a steady height. Short screens (phone on its side) drop the extra labels so the messages keep the room. */ #assistant-sheet .ch-title { position: sticky; top: 0; z-index: 1; padding-top: var(--hx-space-1); background: var(--hx-page); box-shadow: 0 calc(-1 * var(--hx-space-3)) 0 var(--hx-page); } /* the header stays, as in LINE; the shadow covers the padding above it */ #assistant-sheet .ask-stack, #assistant-sheet .ask-q { max-width: 32em; } /* about 60–65 characters a line */ @media (min-width: 761px) { #assistant-sheet[data-hx] { width: min(var(--hx-chat-width), calc(100% - 2 * var(--hx-gutter))); height: min(var(--hx-chat-height), calc(100dvh - 2 * var(--hx-gutter))); } #assistant-sheet .ch-body { flex: 1; } } @media (max-height: 500px) { #assistant-sheet[data-hx] { height: calc(100dvh - 2 * var(--hx-space-1)); max-height: none; padding-top: var(--hx-space-2); } #assistant-sheet[data-hx]::before, #assistant-sheet .ch-sub, #assistant-sheet .ask-name, #assistant-sheet .ask-day { display: none; } #assistant-sheet .ask-log { gap: var(--hx-space-2); } } :is(#campaign-visit-form) .cv-draft { margin: 0; padding: var(--hx-space-3); font-size: var(--hx-text-label); line-height: var(--hx-leading-body); border-radius: var(--hx-radius-card); background: var(--hx-info-tint); color: var(--hx-info); font-weight: var(--hx-weight-action); } /* ---- Weather Watch redesign (user, 6 Oct 2026; mockup docs/previews/weather-watch-redesign-2026-10-06.html) ---- */ #weather-panel .ww-replaced[hidden], #weather-panel :is(.ww-now, .ww-hours)[hidden] { display: none; } #weather-panel .ww-now { margin-top: var(--hx-space-2); } /* 16 px under the place row; every card below is 8 px apart (the column gap; spacing check, 6 Oct 2026) */ #weather-panel .ww-body { display: grid; gap: var(--hx-space-4); padding: var(--hx-space-4); } /* one 16 px rhythm: strip → Warning → tiles → advice (spacing check, 6 Oct 2026) */ #weather-panel .ww-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hx-space-2) var(--hx-space-3); } #weather-panel .ww-state-mark { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--hx-radius-badge); background: var(--hx-good-solid); color: var(--hx-on-dark); } #weather-panel .ww-state[data-level="warn"] .ww-state-mark { background: var(--hx-tone-amber-bg); color: var(--hx-tone-amber-ink); } #weather-panel .ww-state[data-level="danger"] .ww-state-mark { background: var(--hx-danger-solid); color: var(--hx-on-dark); } #weather-panel .ww-state-mark svg { width: 22px; height: 22px; } #weather-panel .ww-state h3 { margin: 0; color: var(--hx-ink); font-size: var(--hx-text-title); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-head); } #weather-panel .ww-subject { flex-basis: 100%; order: 2; margin-top: calc(var(--hx-space-2) * -1); color: var(--hx-ink); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); line-height: var(--hx-leading-body); } /* the warning's subject, its own line under the word (review item 5, 6 Oct 2026) */ #weather-panel .ww-state[data-level="warn"] h3 { color: var(--hx-warn); } #weather-panel .ww-state[data-level="danger"] h3 { color: var(--hx-danger); } #weather-panel :is(.ww-badge, .ww-chip) { flex: none; margin-left: auto; padding: 2px var(--hx-space-2) 0; border-radius: var(--hx-radius-chip); background: var(--hx-card); color: var(--hx-ink); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-strong); white-space: nowrap; } #weather-panel .ww-badge { background: var(--hx-warn-tint); color: var(--hx-warn); } :is(#weather-panel, #weather-overview-panel) .ww-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--hx-space-2); } /* all four tiles the same height (the bottom row has no dots) */ :is(#weather-panel, #weather-overview-panel) .ww-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; margin: 0; padding: var(--hx-space-3); border: 0; border-top: 4px solid var(--hx-hairline); border-radius: var(--hx-radius-action); background: var(--hx-track); color: var(--hx-ink); font-family: var(--hx-font); text-align: left; cursor: pointer; } #weather-panel .ww-tile[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--hx-muted); } /* open: a quiet ring that does not fight the level colour */ :is(#weather-panel, #weather-overview-panel) .ww-tile[data-level="warn"] { border-top-color: var(--hx-warn); } :is(#weather-panel, #weather-overview-panel) .ww-tile[data-level="danger"] { border-top-color: var(--hx-danger); } :is(#weather-panel, #weather-overview-panel) .ww-tl { display: flex; align-items: center; gap: var(--hx-space-1); margin-bottom: var(--hx-space-1); color: var(--hx-ink); font-size: var(--hx-text-label); font-weight: var(--hx-weight-strong); letter-spacing: var(--hx-tracking-caps); text-transform: uppercase; } :is(#weather-panel, #weather-overview-panel) .ww-tl svg { width: 18px; height: 18px; } :is(#weather-panel, #weather-overview-panel) .ww-tile small { color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } :is(#weather-panel, #weather-overview-panel) .ww-tile b { color: var(--hx-ink); font-size: var(--hx-text-title); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-head); overflow-wrap: anywhere; } :is(#weather-panel, #weather-overview-panel) .ww-tile[data-level="warn"] b { color: var(--hx-warn); } :is(#weather-panel, #weather-overview-panel) .ww-tile[data-level="danger"] b { color: var(--hx-danger); } :is(#weather-panel, #weather-overview-panel) .ww-agree { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hx-space-1); margin-top: var(--hx-space-1); color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } :is(#weather-panel, #weather-overview-panel) .ww-dots { display: flex; gap: 3px; } :is(#weather-panel, #weather-overview-panel) .ww-agree i { width: 9px; height: 9px; border-radius: 50%; background: var(--hx-hairline); } :is(#weather-panel, #weather-overview-panel) .ww-agree i.on { background: var(--hx-warn); } #weather-panel .ww-part { display: grid; gap: var(--hx-space-2); padding-top: var(--hx-space-3); border-top: 1px solid var(--hx-hairline); } #weather-panel .ww-part h4 { margin: 0; color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-strong); letter-spacing: var(--hx-tracking-caps); text-transform: uppercase; } #weather-panel .ww-rows { display: grid; overflow: hidden; border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-action); background: var(--hx-card); } /* card colour: red / amber values keep 4.5 : 1 */ #weather-panel .ww-row { display: grid; grid-template-columns: minmax(min-content, 1fr) auto auto; align-items: center; gap: var(--hx-space-2); width: 100%; min-height: 52px; margin: 0; padding: var(--hx-space-2) var(--hx-space-3); border: 0; border-radius: 0; background: none; color: var(--hx-ink); font-family: var(--hx-font); text-align: left; } #weather-panel .ww-row + .ww-row { border-top: 1px solid var(--hx-hairline); } #weather-panel button.ww-row { cursor: pointer; } #weather-panel .ww-nm { min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: none; font-size: var(--hx-text-body); font-weight: var(--hx-weight-action); line-height: var(--hx-leading-head); } #weather-panel .ww-nm em { display: block; color: var(--hx-muted); font-size: var(--hx-text-meta); font-style: normal; font-weight: var(--hx-weight-body); } #weather-panel .ww-vl { text-align: right; color: var(--hx-ink); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); font-variant-numeric: tabular-nums; } #weather-panel .ww-vl[data-level="warn"] { color: var(--hx-warn); } #weather-panel .ww-vl[data-level="danger"] { color: var(--hx-danger); } #weather-panel .ww-vl[data-level="none"] { color: var(--hx-muted); } #weather-panel .ww-go:empty { display: none; } /* rows without › give the space to the name ("OpenWeather" split mid-word at 320 px / 120 %) */ #weather-panel .ww-go { min-width: 12px; color: var(--hx-muted); font-size: var(--hx-text-title); line-height: 1; } #weather-panel .ww-fn { margin: 0; color: var(--hx-muted); font-size: var(--hx-text-meta); line-height: var(--hx-leading-body); } #weather-panel .ww-now .wt-banner { border-top: 1px solid var(--hx-hairline); } #weather-panel .wt-banner-points li { margin: 0; padding: 0; white-space: normal; } #weather-panel .wt-banner-points { display: grid; gap: 2px; min-width: 0; margin: 0; padding: var(--hx-chip-nudge) 0 0 1.1em; font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-body); overflow-wrap: anywhere; } /* Next 3 hours */ #weather-panel .ww-table { width: 100%; table-layout: fixed; border-collapse: collapse; color: var(--hx-ink); font-size: var(--hx-text-body); } #weather-panel .ww-table th { padding: var(--hx-space-2) var(--hx-space-2) var(--hx-space-1); color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); text-align: left; } #weather-panel .ww-table th:nth-child(1) { width: 24%; } #weather-panel .ww-table th:nth-child(2) { width: 28%; } #weather-panel .ww-table td { padding: var(--hx-space-2); border-top: 1px solid var(--hx-hairline); font-weight: var(--hx-weight-action); font-variant-numeric: tabular-nums; vertical-align: top; overflow-wrap: anywhere; } #weather-panel .ww-table :is(th, td):first-child { padding-left: var(--hx-space-4); } #weather-panel .ww-table :is(th, td):last-child { padding-right: var(--hx-space-4); } #weather-panel .ww-table td small { display: block; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-body); } #weather-panel .ww-table td[data-level="warn"] { color: var(--hx-warn); } #weather-panel .ww-table td[data-level="danger"] { color: var(--hx-danger); } #weather-panel .ww-table tr.now td:first-child { font-weight: var(--hx-weight-strong); box-shadow: inset 4px 0 var(--hx-good-solid); } /* marked, not tinted: red / amber keep 4.5 : 1 */ #weather-panel .ww-foot { margin: 0; padding: var(--hx-space-2) var(--hx-space-4) var(--hx-space-3); border-top: 1px solid var(--hx-hairline); color: var(--hx-muted); font-size: var(--hx-text-meta); line-height: var(--hx-leading-body); } /* Rain radar: one tab per radar with its reading; no automatic turning */ #weather-panel .ww-radar :is(.wt-dots, .wr-play) { display: none; } #weather-panel .ww-tabs { display: flex; gap: var(--hx-space-2); overflow-x: auto; padding: var(--hx-space-4) var(--hx-space-4) var(--hx-space-2); scrollbar-width: none; } #weather-panel .ww-tab { flex: none; min-width: 96px; min-height: 52px; margin: 0; padding: var(--hx-space-1) var(--hx-space-3); border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-action); background: var(--hx-track); color: var(--hx-ink); font-family: var(--hx-font); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); line-height: var(--hx-leading-head); text-align: left; cursor: pointer; } #weather-panel .ww-tab span { display: block; font-size: var(--hx-text-meta); font-weight: var(--hx-weight-strong); } #weather-panel .ww-tab span[data-level="warn"] { color: var(--hx-warn); } #weather-panel .ww-tab span[data-level="danger"] { color: var(--hx-danger); } #weather-panel .ww-tab span[data-level="none"] { color: var(--hx-muted); } #weather-panel .ww-tab[aria-pressed="true"] { border-color: var(--hx-primary-bg); background: var(--hx-primary-bg); color: var(--hx-primary-ink); } #weather-panel .ww-tab[aria-pressed="true"] span { color: inherit; } /* Two layers (user, 6 Oct 2026): the answer first; a tap opens sources, the hourly table or the radar pictures */ #weather-panel .ww-expand { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--hx-space-2); padding: 2px var(--hx-space-2) 0; border-radius: var(--hx-radius-chip); background: var(--hx-card); color: var(--hx-ink); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); white-space: nowrap; } #weather-panel .ww-expand::after { content: "▾"; } #weather-panel [aria-expanded="true"] > .ww-expand::after { content: "▴"; } #weather-panel .ww-part[hidden], #weather-panel .ww-fold-body[hidden], #weather-panel .ww-radar .wr-big[hidden] { display: none; } #weather-panel .ww-fold { display: flex; align-items: center; justify-content: space-between; gap: var(--hx-space-3); width: 100%; min-height: 56px; margin: 0; padding: var(--hx-space-3) var(--hx-space-4); border: 0; border-radius: 0; background: none; color: var(--hx-ink); font-family: var(--hx-font); text-align: left; cursor: pointer; } #weather-panel .ww-fold .ww-expand { flex: none; margin-top: 0; background: var(--hx-track); } #weather-panel .ww-sum { min-width: 0; font-size: var(--hx-text-body); font-weight: var(--hx-weight-action); line-height: var(--hx-leading-head); } #weather-panel .ww-sum[data-level="warn"] { color: var(--hx-warn); } #weather-panel .ww-sum[data-level="danger"] { color: var(--hx-danger); } #weather-panel .ww-fold-body { border-top: 1px solid var(--hx-hairline); } :is(#weather-panel, #weather-overview-panel) .ww-tile .ww-expand { margin-top: auto; } /* both tiles' "5 sources" sit on the same line at the bottom */ :is(#weather-panel, #weather-overview-panel) .ww-tile .ww-agree { margin-bottom: var(--hx-space-2); } #weather-panel .ww-now .wt-banner-mark { width: 40px; height: 40px; } /* same as the Warning mark: the advice lines up under the heading */ #weather-panel .ww-now .wt-banner-points { gap: var(--hx-space-1); padding-left: 14px; list-style: none; } /* user, 6 Oct 2026: a point's own lines close together, a little more between points */ #weather-panel .ww-now .wt-banner-points li { position: relative; line-height: var(--hx-leading-head); } #weather-panel .ww-now .wt-banner-points li::before { content: ""; position: absolute; left: -14px; top: calc((1lh - 5px) / 2); width: 5px; height: 5px; border-radius: 50%; background: currentColor; } /* the dot lines up with "Warning", 12 px clear of the icon */ /* Dashboard (option B) with the timeline chart (option C) as the Next hours detail (user, 6 Oct 2026) */ #weather-panel .ww-hours[hidden], #weather-panel .ww-radar[hidden] { display: none; } #weather-panel .ww-chart-box { padding: var(--hx-space-4) var(--hx-space-4) 0; } #weather-panel .ww-chart { display: block; width: 100%; height: auto; overflow: visible; } #weather-panel .ww-chart .bars rect { fill: var(--hx-tone-blue-ink); opacity: .8; } #weather-panel .ww-chart .limit { stroke: var(--hx-danger); stroke-width: 1.5; stroke-dasharray: 5 4; } #weather-panel .ww-chart .limit-label { fill: var(--hx-danger); font-size: var(--hx-text-min); font-weight: var(--hx-weight-action); text-anchor: end; } #weather-panel .ww-chart .gust { fill: none; stroke: var(--hx-warn); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; } #weather-panel .ww-chart .dots circle { fill: var(--hx-ink); } #weather-panel .ww-chart .dots .near { fill: var(--hx-warn); } #weather-panel .ww-chart .dots .over { fill: var(--hx-danger); } #weather-panel .ww-chart .labels text { fill: var(--hx-muted); font-size: var(--hx-text-min); font-weight: var(--hx-weight-action); text-anchor: middle; } #weather-panel .ww-legend { display: flex; flex-wrap: wrap; gap: var(--hx-space-1) var(--hx-space-3); margin: 0; padding: var(--hx-space-1) var(--hx-space-4) var(--hx-space-3); color: var(--hx-muted); font-size: var(--hx-text-meta); } #weather-panel .ww-legend i { display: inline-block; width: 14px; height: 4px; margin-right: var(--hx-space-1); border-radius: 2px; vertical-align: middle; } #weather-panel .ww-legend i.g { background: var(--hx-warn); } #weather-panel .ww-legend i.r { background: var(--hx-tone-blue-ink); } #weather-panel .ww-legend-note { color: var(--hx-danger); font-weight: var(--hx-weight-action); } #weather-panel .ww-legend-note:empty { display: none; } #weather-panel .ww-chart .bars .pct { fill: var(--hx-tone-blue-ink); opacity: 1; font-size: var(--hx-text-min); font-weight: var(--hx-weight-action); text-anchor: middle; } /* Very narrow tiles (320 px phone at 120 %): a smaller big value so "until 11:00" and "14.0 m/s" stay on one line */ :is(#weather-panel, #weather-overview-panel) .ww-tiles { container-type: inline-size; } @container (max-width: 300px) { :is(#weather-panel, #weather-overview-panel) .ww-tile b { font-size: calc(var(--hx-text-title) * .8); } #weather-panel .ww-tl { letter-spacing: 0; } } #weather-overview-panel .fw-tiles { margin: 0 0 var(--hx-space-3); grid-auto-rows: auto; } /* All wind farms: the same Rain and Wind tiles (read-only) */ #weather-overview-panel .fw-tiles .ww-tile { cursor: default; } /* ===================================================================== One sheet language, from the map home (Apple Maps style, owner 6 Oct 2026: "use the skill to redesign all other pages"). Every sheet, the Menu, the WTG card and the older tool dialogs: mostly opaque glass, a 24 px corner, floating 8 px from the screen edges on phones; cards inside are the 12 % tint without an outline; header buttons are circles. The sheets read their colours from --hx-page and --hx-card, so the change is made by re-pointing those two inside them. ===================================================================== */ :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet, #app-menu, #selected-card, dialog.horus-tool-dialog, #exit-navigation-dialog, #farm-picker, dialog.contact-card, .team-overlay) { --hs-radius: calc(var(--hx-radius-sheet) + var(--hx-space-1)); --hx-page: var(--hx-sheet-ground, var(--hx-glass)); --hx-card: var(--hx-sheet-row); background: var(--hx-sheet-ground, var(--hx-glass)); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet, #app-menu, #selected-card, dialog.horus-tool-dialog, #exit-navigation-dialog, #farm-picker, dialog.contact-card, .team-overlay) { --hx-page: var(--hx-map-panel); background: var(--hx-map-panel); } } @media (max-width: 760px) { :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet, #app-menu, #selected-card, dialog.horus-tool-dialog, #exit-navigation-dialog, #farm-picker, dialog.contact-card, .team-overlay):is(*, #hx-keep-specificity) { inset: auto var(--hx-space-2) max(var(--hx-space-2), env(safe-area-inset-bottom, 0px)) var(--hx-space-2); width: auto; max-width: none; max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 2 * var(--hx-space-2)); border: 1px solid var(--hx-map-edge); border-radius: var(--hs-radius); } #selected-card:is(*, #hx-keep-specificity) { max-height: min(78%, calc(100% - 2 * var(--hx-space-2))); } } @media (min-width: 761px) { :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet, #app-menu):is(*, #hx-keep-specificity) { border: 1px solid var(--hx-map-edge); border-radius: var(--hs-radius); } } /* cards: the tint carries the shape, no outline (Apple grouped rows) */ :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet, #app-menu, #selected-card) :is(.ch-card, .wh-card, .menu-tile, .menu-me, .bookmark-list-card) { border-color: transparent; } /* header buttons: circles on the tint */ :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) .ch-title .ch-square-button, #selected-card .card-head :is(button.ch-square-button, #close-card) { border: 0; border-radius: 50%; background: var(--hx-sheet-row); } :root :is(dialog.horus-tool-dialog .tool-heading, #exit-navigation-dialog > .ui-dialog-heading) { --hx-radius-card: 50%; --lg-b-234f40: transparent; border-bottom-color: transparent; } dialog.horus-tool-dialog > .tool-body { --ui-card: transparent; } /* the older dialog body painted its own solid colour over the glass */ /* ===================================================================== Apple Maps redesign — shared page pieces (owner, 6 Oct 2026; mockup docs/ui-proposals/apple-maps-pages/). Section header with a link (.ch-sec / .ch-link), grouped rows (.ch-group), cells with an UPPERCASE label (.ch-cells), the hero (.ch-hero with a progress ring), status dots (.ch-dot) and pills (.ch-pill). ===================================================================== */ :is(#campaign-home, #campaign-tracker, #campaign-visits, #campaign-visit-form, #places-dialog, #weather-panel) .ch-sec { display: flex; align-items: baseline; justify-content: space-between; gap: var(--hx-space-2); margin: var(--hx-space-2) var(--hx-space-1) calc(-1 * var(--hx-space-1)); } :is(#campaign-home, #campaign-tracker, #campaign-visits, #campaign-visit-form, #places-dialog, #weather-panel) .ch-sec h3 { margin: 0; font-size: var(--hx-text-label); font-weight: var(--hx-weight-strong); color: var(--hx-ink); } :is(#campaign-home, #campaign-tracker, #campaign-visits, #campaign-visit-form, #places-dialog, #weather-panel) .ch-link { min-height: var(--hx-target-icon); margin: calc(-1 * var(--hx-space-3)) 0; padding: 0 var(--hx-space-1); border: 0; background: none; color: var(--hx-focus); font-family: inherit; font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); cursor: pointer; } :is(#campaign-home, #campaign-tracker, #campaign-visits, #campaign-visit-form, #places-dialog, #weather-panel) .ch-group { display: grid; overflow: hidden; border-radius: var(--hx-radius-card); background: var(--hx-card); } :is(#campaign-home, #campaign-tracker, #campaign-visits, #campaign-visit-form, #places-dialog, #weather-panel) .ch-group > .ch-row { min-height: var(--hx-target-action); margin: 0; padding: var(--hx-space-1) var(--hx-space-3); border: 0; border-radius: 0; background: none; } :is(#campaign-home, #campaign-tracker, #campaign-visits, #campaign-visit-form, #places-dialog, #weather-panel) .ch-group > .ch-row + .ch-row { border-top: 1px solid var(--hx-hairline); } :is(#campaign-home, #campaign-tracker, #campaign-visits, #campaign-visit-form, #places-dialog, #weather-panel) .ch-group > .ch-note { margin: 0; padding: var(--hx-space-3); } :is(#campaign-home, #campaign-tracker, #campaign-visits, #campaign-visit-form, #places-dialog, #weather-panel) .ch-row-text { display: grid; flex: 1; min-width: 0; text-align: left; line-height: var(--hx-leading-tight); } :is(#campaign-home, #campaign-tracker, #campaign-visits, #campaign-visit-form, #places-dialog, #weather-panel) .ch-row-text small { color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } :is(#campaign-home, #campaign-tracker) .ch-dot { flex: none; width: 12px; height: 12px; border: 2px solid var(--hx-muted); border-radius: 50%; } :is(#campaign-home, #campaign-tracker) .ch-dot[data-status="completed"] { border-color: var(--hx-good); background: var(--hx-good); } :is(#campaign-home, #campaign-tracker) .ch-dot[data-status="in_progress"] { border-color: var(--hx-info); background: var(--hx-info); } :is(#campaign-home, #campaign-tracker) .ch-dot[data-status="incomplete"] { border-color: var(--hx-warn); } :is(#campaign-home, #campaign-tracker) .ch-dot[data-status="maintenance"] { border-color: var(--hx-muted); background: var(--hx-muted); } #campaign-home .ch-hero { display: flex; align-items: center; gap: var(--hx-space-4); width: 100%; margin: 0; padding: var(--hx-space-3); border: 0; border-radius: var(--hx-radius-card); background: var(--hx-card); color: var(--hx-ink); font-family: inherit; text-align: left; cursor: pointer; } #campaign-home .ch-ring { display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(var(--hx-good) 0 var(--pct, 0%), var(--hx-track) var(--pct, 0%) 100%); } #campaign-home .ch-ring b { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--hx-card); font-size: var(--hx-text-body); font-weight: var(--hx-weight-strong); } #campaign-home .ch-hero-text { display: grid; gap: 2px; flex: 1; min-width: 0; } #campaign-home .ch-hero-text strong { font-size: var(--hx-text-title); font-weight: var(--hx-weight-strong); line-height: var(--hx-leading-tight); } #campaign-home .ch-hero-text .ch-dim { color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #campaign-home .ch-pills { display: flex; flex-wrap: wrap; gap: var(--hx-space-1); margin-top: var(--hx-space-1); } #campaign-home .ch-pill { padding: 2px var(--hx-space-2); border-radius: var(--hx-radius-chip); background: var(--hx-track); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-strong); } #campaign-home .ch-pill[data-status="in_progress"] { background: var(--hx-info-tint); color: var(--hx-info); } #campaign-home .ch-pill[data-status="incomplete"] { background: var(--hx-warn-tint); color: var(--hx-warn); } #campaign-home .ch-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hx-space-2); } #campaign-home .ch-cells > .ch-cell { display: grid; justify-items: start; gap: var(--hx-space-1); min-height: var(--hx-target-action); padding: var(--hx-space-2) var(--hx-space-3); border: 0; border-radius: var(--hx-radius-card); background: var(--hx-card); color: var(--hx-ink); text-align: left; } #campaign-home .ch-cells .ch-cell-name { color: var(--hx-muted); font-size: var(--hx-text-min); font-weight: var(--hx-weight-strong); letter-spacing: .02em; text-transform: uppercase; } #campaign-home .ch-cells strong { font-size: var(--hx-text-title); line-height: var(--hx-leading-tight); } #campaign-home .ch-cells [data-status="completed"] strong { color: var(--hx-good); } #campaign-home .ch-cells [data-status="in_progress"] strong { color: var(--hx-info); } #campaign-home .ch-cells [data-status="incomplete"] strong { color: var(--hx-warn); } #campaign-home .ch-group .ch-km { color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); } :is(#campaign-home, #campaign-tracker, #campaign-visits, #campaign-visit-form, #places-dialog, #weather-panel) :is(.ch-group, .ch-hero) .ch-square { background: none; color: var(--hx-muted); } /* Tracker (Apple Maps redesign, page 3 of the mockup): filter pills on the list, rows grouped by farm with a status dot */ #campaign-tracker .ct-pills { display: flex; gap: var(--hx-space-2); margin: 0 calc(-1 * var(--hx-space-3)); padding: 0 var(--hx-space-3); overflow-x: auto; scrollbar-width: none; } #campaign-tracker .ct-pills::-webkit-scrollbar { display: none; } #campaign-tracker .ct-pill { flex: none; min-height: calc(var(--hx-target-icon) - var(--hx-space-2)); margin: 0; padding: 0 var(--hx-space-3); border: 0; border-radius: var(--hx-radius-chip); background: var(--hx-card); color: var(--hx-ink); font-family: inherit; font-size: var(--hx-text-label); font-weight: var(--hx-weight-strong); white-space: nowrap; cursor: pointer; } #campaign-tracker .ct-pill[aria-pressed="true"] { background: var(--hx-ink); color: var(--hx-page-solid, var(--hx-card)); } :root[data-theme="dark"] #campaign-tracker .ct-pill[aria-pressed="true"] { color: var(--hx-primary-ink); } #campaign-tracker .ct-pill[data-more]::after { content: " ⌄"; } #campaign-tracker .ct-list { padding: 0; border: 0; } #campaign-tracker .ct-list .ct-main { gap: var(--hx-space-3); } #campaign-tracker .ct-row + .ct-row { border-top: 1px solid var(--hx-hairline); } #campaign-tracker .ct-main .ch-square { background: none; color: var(--hx-muted); } #campaign-tracker .ct-list .ct-row { padding-left: var(--hx-space-3); } #campaign-tracker .ch-title .ct-share { width: var(--hx-icon-button); min-width: var(--hx-icon-button); height: var(--hx-icon-button); min-height: var(--hx-icon-button); } /* Back (‹) only where a sheet was opened from another sheet (Tracker → Campaigns, Visits → Tracker …). First-level screens (Campaigns, Ask, GPS, Weather) had "Back to menu": ✕ and the ☰ Menu already do that (owner, 6 Oct 2026: "is this button still needed?"). */ .ch-title > [aria-label^="Back"]:is(*, #hx-keep-specificity) { display: none; } /* owner, 6 Oct 2026: no ‹ at all — ✕ goes up one layer (home-sheet.js) */ /* ===================================================================== Buttons, one system from Apple's HIG (owner, 6 Oct 2026: "standardise all these buttons"). Recorded in the UI skill. Icon-only buttons (close ✕, share, refresh, size, mic, ☰): a 44 pt circle, the 12 % tint, no outline, the glyph in ink. ===================================================================== */ :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet) :is(.ch-title, .ww-head, .ui-dialog-heading) > :is(button, .ch-square-button):is(*, #hx-keep-specificity), #app-menu > .menu-heading > button:is(*, #hx-keep-specificity), #selected-card .destination-head :is(.card-size, #close-card):is(*, #hx-keep-specificity), body .sidebar[data-hx] #close-map-search:is(*, #hx-keep-specificity) { width: var(--hx-icon-button); min-width: var(--hx-icon-button); height: var(--hx-icon-button); min-height: var(--hx-icon-button); padding: 0; border: 0; border-radius: 50%; background: var(--hx-sheet-row); color: var(--hx-ink); box-shadow: none; } /* the older tool dialogs read their header button size and corner from variables (their rules use !important) */ :root :is(dialog.horus-tool-dialog .tool-heading, #exit-navigation-dialog > .ui-dialog-heading, .team-overlay > .team-section-head, .map-edit-panel > .map-edit-heading) { --hx-target-icon: var(--hx-icon-button); --hx-radius-card: 50%; --lg-b-e8ebe8: var(--hx-sheet-row); --lg-l-62765a: transparent; --hx-hairline: transparent; } /* Bookmarks (Apple Maps redesign, page 6): each place is one row — star · name and "Shared · 1 m" · a green Navigate circle. Google, Edit and History show when the place's Details are open. */ #places-dialog[data-hx] #place-list .bookmark-list-card:is(*, #hx-keep-specificity) { position: relative; display: grid; gap: 2px; padding: var(--hx-space-2) calc(var(--hx-icon-button) + 2 * var(--hx-space-3)) var(--hx-space-2) calc(32px + 2 * var(--hx-space-3)); border: 0; } #places-dialog[data-hx] #place-list .bookmark-list-card::before { content: ""; position: absolute; left: var(--hx-space-3); top: var(--hx-space-3); width: 32px; height: 32px; border-radius: 50%; background: var(--hx-tone-amber-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3C/svg%3E"); opacity: .9; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16'/%3E%3Cpath fill='white' d='m16 7 2.8 5.8 6.3.9-4.6 4.5 1.1 6.3L16 21.5l-5.6 3 1.1-6.3-4.6-4.5 6.3-.9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 0a16 16 0 1 1 0 32 16 16 0 0 1 0-32Zm0 7-2.8 5.8-6.3.9 4.6 4.5-1.1 6.3 5.6-3 5.6 3-1.1-6.3 4.6-4.5-6.3-.9z' fill-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat; } #places-dialog[data-hx] #place-list .bookmark-list-card .bookmark-list-heading:is(*, #hx-keep-specificity) { display: flex; align-items: baseline; gap: var(--hx-space-2); margin: 0; } #places-dialog[data-hx] #place-list .bookmark-list-card .bookmark-list-distance { margin-left: auto; color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); } #places-dialog[data-hx] #place-list .bookmark-list-card > .bookmark-summary:is(*, #hx-keep-specificity) { margin: 0; color: var(--hx-muted); font-size: var(--hx-text-meta); } #places-dialog[data-hx] #place-list .bookmark-list-card .place-navigation-actions:is(*, #hx-keep-specificity) { display: none; margin-top: var(--hx-space-2); } #places-dialog[data-hx] #place-list .bookmark-list-card:has(> details[open]) .place-navigation-actions:is(*, #hx-keep-specificity) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hx-space-2); } #places-dialog[data-hx] #place-list .bookmark-list-card .place-navigation-actions > .place-action:first-child:is(*, #hx-keep-specificity) { display: grid; place-items: center; position: absolute; right: var(--hx-space-3); top: 50%; translate: 0 -50%; width: var(--hx-icon-button); min-width: var(--hx-icon-button); height: var(--hx-icon-button); min-height: var(--hx-icon-button); padding: 0; border: 0; border-radius: 50%; background: var(--hx-primary-bg); color: var(--hx-primary-ink); } #places-dialog[data-hx] #place-list .bookmark-list-card .place-navigation-actions > .place-action:first-child .place-action-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } #places-dialog[data-hx] #place-list .bookmark-list-card:has(> details[open]) .place-navigation-actions > .place-action:first-child:is(*, #hx-keep-specificity) { top: var(--hx-space-3); translate: none; } #places-dialog[data-hx] #place-list .bookmark-list-card .place-navigation-actions > .place-action:not(:first-child):is(*, #hx-keep-specificity) { min-height: var(--hx-target-action); border: 0; border-radius: var(--hx-radius-card); background: var(--hx-glass-field); color: var(--hx-ink); } #places-dialog[data-hx] #place-list .bookmark-list-card > .bookmark-provenance-details:is(*, #hx-keep-specificity) { margin: 0; border: 0; padding: 0; } #places-dialog[data-hx] #place-list .bookmark-list-card > .bookmark-provenance-details > summary:is(*, #hx-keep-specificity) { min-height: 0; padding: 0; color: var(--hx-focus); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } #places-dialog[data-hx] #place-list .bookmark-list-card:is(*, #hx-keep-specificity) { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-template-rows: none; align-items: start; } #places-dialog[data-hx] #place-list .bookmark-list-card > *:is(*, #hx-keep-specificity) { grid-column: 1 / -1; grid-row: auto; min-width: 0; } #places-dialog[data-hx] #place-list .bookmark-list-card .place-navigation-actions:is(*, #hx-keep-specificity) { display: contents; } #places-dialog[data-hx] #place-list .bookmark-list-card .place-navigation-actions > .place-action:not(:first-child):is(*, #hx-keep-specificity) { display: none; } #places-dialog[data-hx] #place-list .bookmark-list-card:has(> details[open]) .place-navigation-actions:is(*, #hx-keep-specificity) { display: grid; } #places-dialog[data-hx] #place-list .bookmark-list-card:has(> details[open]) .place-navigation-actions > .place-action:not(:first-child):is(*, #hx-keep-specificity) { display: grid; place-items: center; } #places-dialog[data-hx] #place-list .bookmark-list-card .bookmark-title:is(*, #hx-keep-specificity) { min-width: 0; padding: 0; margin: 0; text-align: left; } #places-dialog[data-hx] #place-list .bookmark-list-card > .bookmark-provenance-details:is(*, #hx-keep-specificity) { display: block; } #places-dialog[data-hx] #place-list .bookmark-list-card > .bookmark-provenance-details > summary:is(*, #hx-keep-specificity) { display: inline-flex; gap: var(--hx-space-1); } /* Check in / Check out (Apple Maps redesign, page 8): facts as rows first, each section's name as a small label above its field, the note field on the tint, Cancel | the green action at the bottom (one third | two thirds). */ #campaign-visit-form .cv-facts { padding: 0 var(--hx-space-3); } #campaign-visit-form .cf-card { padding: var(--hx-space-3); } #campaign-visit-form .cf-card h3 { color: var(--hx-muted); font-size: var(--hx-text-min); letter-spacing: .02em; text-transform: uppercase; } #campaign-visit-form .cf-card h3 .ch-dim { text-transform: none; letter-spacing: 0; } #campaign-visit-form textarea { border: 0; border-radius: var(--hx-radius-card); background: var(--hx-glass-field); color: var(--hx-ink); } #campaign-visit-form .cv-pick { border: 0; background: var(--hx-glass-field); } #campaign-visit-form .wh-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } #campaign-visit-form .wh-pair > .wh-action:not(.cf-primary) { border: 0; background: var(--hx-card); } /* Tools (Apple Maps redesign, page 9): the same floating glass sheet; iOS Settings-style groups — the section name is a small label above its group, rows on the tint with plain chevrons, switches inline. */ #map-tools[data-hx]:is(*, #hx-keep-specificity) { --hs-radius: calc(var(--hx-radius-sheet) + var(--hx-space-1)); --hx-page: var(--hx-glass); --hx-card: var(--hx-sheet-row); background: var(--hx-glass); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); } @media (max-width: 760px) { #map-tools[data-hx]:is(*, #hx-keep-specificity) { inset: auto var(--hx-space-2) max(var(--hx-space-2), env(safe-area-inset-bottom, 0px)) var(--hx-space-2); width: auto; max-width: none; border: 1px solid var(--hx-map-edge); border-radius: var(--hs-radius); } } #map-tools[data-hx] > .menu-heading > button:is(*, #hx-keep-specificity) { width: var(--hx-icon-button); min-width: var(--hx-icon-button); height: var(--hx-icon-button); min-height: var(--hx-icon-button); padding: 0; border: 0; border-radius: 50%; background: var(--hx-sheet-row); color: var(--hx-ink); } #map-tools[data-hx] .inspection-tool-group:is(*, #hx-keep-specificity) { padding: 0; border: 0; background: none; box-shadow: none; } #map-tools[data-hx] .inspection-tool-group > h3:is(*, #hx-keep-specificity) { margin: var(--hx-space-2) var(--hx-space-1) var(--hx-space-1); padding: 0; color: var(--hx-muted); font-size: var(--hx-text-min); letter-spacing: .02em; text-transform: uppercase; } #map-tools[data-hx] .inspection-tool-buttons:is(*, #hx-keep-specificity) { overflow: hidden; border-radius: var(--hx-radius-card); background: var(--hx-sheet-row); } #map-tools[data-hx] .hx-tool-row:is(*, #hx-keep-specificity) { border-color: var(--hx-hairline); background: none; } #map-tools[data-hx] .hx-tool-end:is(*, #hx-keep-specificity) { background: none; color: var(--hx-muted); } /* Weather Watch (Apple Maps redesign, page 7): one hero with the answer, modules on the tint, the rest as rows. "Right now" is a small label instead of a green bar; a warning's state block becomes the tinted hero; the four actions (Report, Lightning, Find WTG, All farms) are one grouped list with icons and chevrons. */ #weather-panel .ww-now:is(*, #hx-keep-specificity) { padding: 0; border: 0; background: none; box-shadow: none; } #weather-panel .ww-now > .wr-strip:is(*, #hx-keep-specificity) { min-height: 0; margin: 0 var(--hx-space-1) var(--hx-space-1); padding: 0; border: 0; background: none; color: var(--hx-muted); font-size: var(--hx-text-min); letter-spacing: .02em; text-transform: uppercase; } #weather-panel .ww-now > .wr-strip .wr-mark { display: none; } #weather-panel .ww-now > .ww-body:is(*, #hx-keep-specificity) { padding: 0; gap: var(--hx-space-2); } #weather-panel .ww-state:is(*, #hx-keep-specificity) { padding: var(--hx-space-3); border-radius: var(--hx-radius-card); background: var(--hx-sheet-row); } #weather-panel .ww-state:is([data-level="warn"], [data-level="danger"]):is(*, #hx-keep-specificity) { border: 1px solid color-mix(in srgb, var(--hx-warn) 45%, transparent); background: color-mix(in srgb, var(--hx-warn) 16%, var(--hx-sheet-row)); } #weather-panel .ww-state[data-level="danger"]:is(*, #hx-keep-specificity) { border-color: color-mix(in srgb, var(--hx-danger) 50%, transparent); background: color-mix(in srgb, var(--hx-danger) 16%, var(--hx-sheet-row)); } #weather-panel .ww-tile:is(*, #hx-keep-specificity) { border-color: transparent; background: var(--hx-sheet-row); } #weather-panel .weather-primary-actions:is(*, #hx-keep-specificity) { grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; border-radius: var(--hx-radius-card); background: var(--hx-sheet-row); } #weather-panel .weather-primary-actions > button:is(*, #hx-keep-specificity) { display: flex; align-items: center; justify-content: flex-start; gap: var(--hx-space-3); min-height: var(--hx-target-action); margin: 0; padding: 0 var(--hx-space-3); border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--hx-ink); font-size: var(--hx-text-body); text-align: left; } #weather-panel .weather-primary-actions > button + button:is(*, #hx-keep-specificity) { border-top: 1px solid var(--hx-hairline); } #weather-panel .weather-primary-actions > button::before { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--hx-glass-field); } #weather-panel .weather-primary-actions > button::after { content: "›"; margin-left: auto; color: var(--hx-muted); font-size: var(--hx-text-title); } #weather-panel .weather-primary-actions > button::before { width: 22px; height: 22px; border-radius: 0; background: var(--hx-focus); -webkit-mask: var(--ww-icon) center / contain no-repeat; mask: var(--ww-icon) center / contain no-repeat; } #weather-panel .weather-primary-actions > .weather-report-launch { --ww-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5M12 16.5h.01'/%3E%3C/svg%3E"); } #weather-panel .weather-primary-actions > .weather-check-lightning { --ww-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); } #weather-panel .weather-primary-actions > .weather-open-nearby { --ww-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); } #weather-panel .weather-primary-actions > .weather-farms-quick { --ww-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); } /* ===================================================================== One list row for every list (owner, 6 Oct 2026: "these two pages have a similar list, but the designs are different"). Apple Maps row: 56 px tall · 32 px round leading icon · 17 px title (600) over a 13 px muted subtitle · trailing value · a plain chevron OR one 44 px round action · separators start under the text, not at the edge. Same in Tracker, Search, Campaigns, Menu, Tools, Bookmarks and Weather Watch. Recorded in the UI skill. ===================================================================== */ :root { --row-h: 56px; --row-pad: var(--hx-space-3); --row-lead: 32px; --row-gap: var(--hx-space-3); --row-sep: linear-gradient(var(--hx-hairline), var(--hx-hairline)) no-repeat calc(var(--row-pad) + var(--row-lead) + var(--row-gap)) 0 / 100% 1px; --row-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); } /* rows: height, padding, gap, inset separators */ :is(#campaign-tracker .ct-row, body.hs.map-search-visible #turbines .turbine-row, #campaign-home .ch-group > .ch-row, #app-menu .menu-items > .menu-tile, #map-tools[data-hx] .hx-tool-row, #weather-panel .weather-primary-actions > button):is(*, #hx-keep-specificity) { display: flex; align-items: center; gap: var(--row-gap); min-height: var(--row-h); margin: 0; padding: var(--hx-space-1) var(--row-pad); border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--hx-ink); text-align: left; } :is(#campaign-tracker .ct-row + .ct-row, body.hs.map-search-visible #turbines .turbine-row + .turbine-row, #campaign-home .ch-group > .ch-row + .ch-row, #app-menu .menu-items > .menu-tile + .menu-tile, #map-tools[data-hx] .hx-tool-row + .hx-tool-row, #weather-panel .weather-primary-actions > button + button):is(*, #hx-keep-specificity) { border-top: 0; box-shadow: none; background: var(--row-sep); } #campaign-tracker .ct-row > .ct-main:is(*, #hx-keep-specificity) { display: flex; align-items: center; gap: var(--row-gap); flex: 1; min-width: 0; min-height: calc(var(--row-h) - 2 * var(--hx-space-1)); margin: 0; padding: 0; border: 0; background: none; } #campaign-tracker .ct-list .ct-row:is(*, #hx-keep-specificity) { padding-left: var(--row-pad); } /* leading: one 32 px circle */ :is(#campaign-tracker, #campaign-home) .ch-dot:is(*, #hx-keep-specificity) { position: relative; flex: none; width: var(--row-lead); height: var(--row-lead); border: 0; border-radius: 50%; background: var(--hx-glass-field); } :is(#campaign-tracker, #campaign-home) .ch-dot::after { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid var(--hx-muted); border-radius: 50%; } :is(#campaign-tracker, #campaign-home) .ch-dot[data-status="completed"] { background: var(--hx-good-tint); } :is(#campaign-tracker, #campaign-home) .ch-dot[data-status="completed"]::after { border-color: var(--hx-good); background: var(--hx-good); } :is(#campaign-tracker, #campaign-home) .ch-dot[data-status="in_progress"] { background: var(--hx-info-tint); } :is(#campaign-tracker, #campaign-home) .ch-dot[data-status="in_progress"]::after { border-color: var(--hx-info); background: var(--hx-info); } :is(#campaign-tracker, #campaign-home) .ch-dot[data-status="incomplete"] { background: var(--hx-warn-tint); } :is(#campaign-tracker, #campaign-home) .ch-dot[data-status="incomplete"]::after { border-color: var(--hx-warn); } body.hs.map-search-visible #turbines .turbine-symbol:is(*, #hx-keep-specificity), #app-menu .menu-items > .menu-tile > .menu-icon:is(*, #hx-keep-specificity), #map-tools[data-hx] .hx-tool-badge:is(*, #hx-keep-specificity) { display: grid; place-items: center; flex: none; width: var(--row-lead); min-width: var(--row-lead); height: var(--row-lead); margin: 0; border-radius: 50%; } body.hs.map-search-visible #turbines .turbine-symbol:is(*, #hx-keep-specificity) { background: var(--hx-glass-field); color: var(--hx-ink); font-size: var(--hx-text-body); } #map-tools[data-hx] .hx-tool-badge svg, #app-menu .menu-items > .menu-tile > .menu-icon svg { width: 18px; height: 18px; } /* text: 17 px title over a 13 px muted subtitle */ :is(#campaign-tracker .ct-top strong, body.hs.map-search-visible #turbines .row-title, #campaign-home .ch-group .ch-row-text strong, #app-menu .menu-items .menu-name, #map-tools[data-hx] .hx-tool-name, #weather-panel .weather-primary-actions > button):is(*, #hx-keep-specificity) { font-size: var(--hx-text-body); font-weight: var(--hx-weight-action); line-height: var(--hx-leading-tight); } :is(#campaign-tracker .ct-meta, body.hs.map-search-visible #turbines .row-sub, #campaign-home .ch-group .ch-row-text small):is(*, #hx-keep-specificity) { display: block; margin: 2px 0 0; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } body.hs.map-search-visible #turbines .turbine-row > span:nth-child(2) { display: grid; flex: 1; min-width: 0; } /* trailing: a plain chevron (opens), or one 44 px round action instead */ :is(#campaign-tracker .ct-main > .ch-square, #campaign-home .ch-group .ch-square, #map-tools[data-hx] .hx-tool-end, body.hs.map-search-visible #turbines .row-arrow):is(*, #hx-keep-specificity) { display: grid; place-items: center; flex: none; width: 16px; height: 16px; margin-left: auto; padding: 0; border: 0; background: none; color: var(--hx-muted); } :is(#campaign-tracker .ct-main > .ch-square, #campaign-home .ch-group .ch-square, #map-tools[data-hx] .hx-tool-end, body.hs.map-search-visible #turbines .row-arrow) svg { width: 16px; height: 16px; } #campaign-tracker .ct-row:has(> .ct-map) .ct-main > .ch-square:is(*, #hx-keep-specificity) { display: none; } #campaign-tracker .ct-row > .ct-map:is(*, #hx-keep-specificity) { display: grid; place-items: center; flex: none; width: var(--hx-icon-button); min-width: var(--hx-icon-button); height: var(--hx-icon-button); min-height: var(--hx-icon-button); margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--hx-glass-field); } #campaign-tracker .ct-row > .ct-map .ch-icon:is(*, #hx-keep-specificity) { width: auto; height: auto; background: none; color: var(--hx-info); } /* Bookmarks: the Navigate action is a true 44 px circle (the old 52 px minimum height made it an oval) */ #places-dialog[data-hx] #place-list .bookmark-list-card .place-navigation-actions > .place-action:first-child:is(*, #hx-keep-specificity) { --hx-place-action-min: var(--hx-icon-button); --hx-place-action-h: var(--hx-icon-button); height: var(--hx-icon-button); aspect-ratio: 1; } #places-dialog[data-hx] #place-list .bookmark-list-card .place-navigation-actions > .place-action:first-child svg { width: 20px; height: 20px; } #weather-panel .weather-primary-actions > button::before { content: none; } #weather-panel .weather-primary-actions > button::after { content: ""; width: 16px; height: 16px; margin-left: auto; background: var(--hx-muted); -webkit-mask: var(--row-chev) center / contain no-repeat; mask: var(--row-chev) center / contain no-repeat; font-size: 0; } #weather-panel .weather-primary-actions .hs-row-ic { display: grid; place-items: center; flex: none; width: var(--row-lead); height: var(--row-lead); border-radius: 50%; background: var(--hx-glass-field); color: var(--hx-focus); } #weather-panel .weather-primary-actions .hs-row-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Bookmarks: one grouped list like Tracker and Search (owner, 6 Oct 2026), not a stack of separate cards. The rows share one tinted card; lines start under the text. */ #places-dialog[data-hx] #place-list:is(*, #hx-keep-specificity) { gap: 0; } #places-dialog[data-hx] #place-list > .bookmark-distance { margin: 0 var(--hx-space-1) var(--hx-space-2); } #places-dialog[data-hx] #place-list > .bookmark-list-card:is(*, #hx-keep-specificity) { border-radius: 0; background: var(--hx-sheet-row); } #places-dialog[data-hx] #place-list > .bookmark-list-card + .bookmark-list-card:is(*, #hx-keep-specificity) { background: var(--row-sep), var(--hx-sheet-row); } #places-dialog[data-hx] #place-list > :not(.bookmark-list-card) + .bookmark-list-card:is(*, #hx-keep-specificity), #places-dialog[data-hx] #place-list > .bookmark-list-card:first-child:is(*, #hx-keep-specificity) { border-top-left-radius: var(--hx-radius-card); border-top-right-radius: var(--hx-radius-card); } #places-dialog[data-hx] #place-list > .bookmark-list-card:not(:has(~ .bookmark-list-card)):is(*, #hx-keep-specificity) { border-bottom-left-radius: var(--hx-radius-card); border-bottom-right-radius: var(--hx-radius-card); } /* the Bookmarks field gets the same magnifier as Tracker and Search */ #places-dialog[data-hx] .bookmark-search:is(*, #hx-keep-specificity) { display: flex; align-items: center; gap: var(--hx-space-2); } #places-dialog[data-hx] .bookmark-search::before { content: ""; flex: none; width: 18px; height: 18px; background: var(--hx-muted); -webkit-mask: var(--hx-find-icon) center / contain no-repeat; mask: var(--hx-find-icon) center / contain no-repeat; } #places-dialog[data-hx] .bookmark-search #place-filter { flex: 1; min-width: 0; } :root { --hx-find-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E"); } /* One section heading (owner, 6 Oct 2026: same structure on every page). Campaigns and Tracker already use it: 15 px bold, normal ink, sentence case; any extra words after it are muted. Same in Search, Bookmarks, Weather Watch, Check in. */ :is(#places-dialog[data-hx] #place-list > .bookmark-distance, #weather-panel .ww-now > .wr-strip .wr-title, #campaign-visit-form .cf-card > h3):is(*, #hx-keep-specificity) { color: var(--hx-ink); font-size: var(--hx-text-label); font-weight: var(--hx-weight-strong); letter-spacing: 0; text-transform: none; } #campaign-visit-form .cf-card > h3 > *:is(*, #hx-keep-specificity) { color: var(--hx-muted); font-size: inherit; font-weight: var(--hx-weight-action); text-transform: none; letter-spacing: 0; } /* the leading icon in a Campaigns list row is the same 32 px circle as every other row */ #campaign-home .ch-group > .ch-row > .ch-icon:is(*, #hx-keep-specificity) { width: var(--row-lead); height: var(--row-lead); border-radius: 50%; } /* ===================================================================== One look inside every sheet (owner, 6 Oct 2026: "some pages have a green outline in dark, some don't; font style, weight"). Audit of all nine pages: the sheets matched, but fields, pickers and tiles had a 1 px outline on some pages only, and two green buttons had a glow ring. Apple Maps style: inside a sheet nothing has an outline. Fields, pickers and tiles are the 12 % tint only; lines are hairline separators; only warning and SOS cards keep a coloured edge. Fonts: list title 17/600 · subtitle and trailing value 13/600 muted · tile label 11/600 capitals · tile value 24/600 · button label 17/600. ===================================================================== */ :is(#campaign-home, #campaign-tracker, #campaign-visit-form, #places-dialog, #app-menu, #weather-panel, #selected-card, body.hs .sidebar[data-hx]) { --hx-glow-main: none; } :is(#campaign-home .ch-picker, #campaign-tracker .ch-picker, #campaign-tracker .ct-search, #campaign-tracker .wh-action, #selected-card.pc .metric, #selected-card.pc .destination-distance, body.hs .sidebar[data-hx] #turbines, #places-dialog[data-hx] .bookmark-search, #places-dialog[data-hx] summary, #campaign-visit-form .cv-pick, #campaign-visit-form .wh-action.cf-primary, #app-menu .rearrange-menu, #weather-panel .ww-place):is(*, #hx-keep-specificity) { border-color: transparent; box-shadow: none; } #places-dialog[data-hx] #place-list .place-navigation-actions > .place-action:is(*, #hx-keep-specificity) { box-shadow: none; } /* Bookmarks rows read like every other list */ #places-dialog[data-hx] #place-list { --hx-bm-text: var(--hx-text-meta); --hx-bm-leading: var(--hx-leading-tight); } #places-dialog[data-hx] #place-list .bookmark-title strong:is(*, #hx-keep-specificity) { font-size: var(--hx-text-body); font-weight: var(--hx-weight-action); } #places-dialog[data-hx] #place-list :is(.bookmark-summary .bookmark-distance, .bookmark-list-distance):is(*, #hx-keep-specificity) { color: var(--hx-muted); font-weight: var(--hx-weight-action); } #places-dialog[data-hx] #place-list > .bookmark-distance:is(*, #hx-keep-specificity) { --hx-bm-text: var(--hx-text-label); } /* tile labels and values */ :is(#selected-card.pc .metric-name, #selected-card.pc .metric-k, #weather-panel .ww-tile .ww-tl, #campaign-home .ch-cell-name):is(*, #hx-keep-specificity) { font-size: var(--hx-text-min); font-weight: var(--hx-weight-action); letter-spacing: .02em; text-transform: uppercase; } :is(#selected-card.pc .metric-v, #selected-card.pc .destination-distance strong, #campaign-home .ch-cells strong, #weather-panel .ww-tile > b):is(*, #hx-keep-specificity) { font-size: var(--hx-text-title); font-weight: var(--hx-weight-action); } /* 600: an older !important rule sets 600 inside every button */ /* button labels: 17 px semibold everywhere (the green one is not bolder than the grey one) */ :is(#campaign-visit-form, #campaign-tracker, #places-dialog, #weather-panel, #app-menu) .wh-action:is(*, #hx-keep-specificity) { font-weight: var(--hx-weight-action); } #campaign-tracker .ch-row strong:is(*, #hx-keep-specificity), #weather-panel :is(.weather-safety-guide, .weather-12hour-details) > summary:is(*, #hx-keep-specificity) { font-size: var(--hx-text-body); font-weight: var(--hx-weight-action); } /* Tracker's Manage list, like every list title */ #weather-panel .ww-hour > .ww-time:is(*, #hx-keep-specificity) { font-weight: var(--hx-weight-action); } /* the hour list reads like a list: 600 title */ #weather-panel .ww-hour > .ww-rain:is(*, #hx-keep-specificity) { color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); } /* From the full-size screenshots (owner, 6 Oct 2026): header buttons are 44 px on every sheet (Weather Watch had 52); no line under a section heading (Campaigns "Today" had one); the Search list lines up with the Tracker list; the Search field has no ring when it takes focus on open (Apple Maps shows only the caret). */ #weather-panel .ch-title button:is(*, #hx-keep-specificity) { width: var(--hx-icon-button); min-width: var(--hx-icon-button); height: var(--hx-icon-button); min-height: var(--hx-icon-button); } #campaign-home .ch-sec + .ch-cells:is(*, #hx-keep-specificity) { border-top: 0; } body.hs .sidebar[data-hx] #turbines:not([hidden]):is(*, #hx-keep-specificity), body.hs .sidebar[data-hx] #map-search-results:not([hidden]):is(*, #hx-keep-specificity) { margin: var(--hx-space-2) 0 0; } body.hs .sidebar[data-hx] #mobile-search-panel .search:is(*, #hx-keep-specificity), body.hs .sidebar[data-hx] #mobile-search-panel .search:focus-within:is(*, #hx-keep-specificity) { border-color: transparent; outline: 0; box-shadow: none; } body.hs .sidebar[data-hx] #mobile-search-panel .search { --hx-field-focus: transparent; } /* the older ring rule (!important) reads this colour */ /* Search lines up with Tracker: field, pills and list span the same width; the title sits 4 px in, like every sheet title */ body.hs .sidebar[data-hx] .sidebar-top:is(*, #hx-keep-specificity) { padding-left: 0; padding-right: 0; } body.hs .sidebar[data-hx] .search-panel-heading:is(*, #hx-keep-specificity) { padding-left: var(--hx-space-1); padding-right: 0; } body.hs .sidebar[data-hx] #turbines:not([hidden]):is(*, #hx-keep-specificity) { padding-left: 0; padding-right: 0; } body.hs .sidebar[data-hx] .search-panel-heading h2:is(*, #hx-keep-specificity) { margin-left: var(--hx-space-1); } /* ===================================================================== One spacing standard for every sheet (owner, 6 Oct 2026: "check empty space and alignment, and table list style"). Measured on the phone: header row 44 px, 21 px from the sheet top · text 4 px inside the cards · 8 px between cards · 16 px above a section heading, 4 px under it. Bookmarks (52 px header), Menu (68 px), Search (header at the top edge, indented count, 12 px list gap), Tracker (count flush with the card edge) and Weather Watch (banner touching the tiles, indented "5 sources") were off; Check in's ✕ sat in the middle of a two-line title. ===================================================================== */ #places-dialog[data-hx] .ui-dialog-heading:is(*, #hx-keep-specificity), #app-menu .menu-heading:is(*, #hx-keep-specificity) { min-height: var(--hx-icon-button); } body.hs .sidebar[data-hx] .search-panel-heading:is(*, #hx-keep-specificity) { min-height: var(--hx-icon-button); margin-top: calc(var(--hx-space-4) + var(--hx-space-1)); padding-top: 0; padding-bottom: 0; } body.hs .sidebar[data-hx] .list-heading:is(*, #hx-keep-specificity) { margin: var(--hx-space-4) 0 var(--hx-space-1); padding: 0; } /* its parent already adds the 4 px */ body.hs .sidebar[data-hx] #turbines:not([hidden]):is(*, #hx-keep-specificity) { margin-top: 0; } #campaign-tracker .wh-cap:is(*, #hx-keep-specificity) { padding-left: var(--hx-space-1); padding-right: var(--hx-space-1); } #places-dialog[data-hx] #place-list > .bookmark-distance:is(*, #hx-keep-specificity) { margin: var(--hx-space-2) var(--hx-space-1) var(--hx-space-1); } /* the toolbar above already ends with 8 px */ #places-dialog[data-hx] #place-list summary:is(*, #hx-keep-specificity) { display: inline-flex; align-items: center; gap: var(--hx-space-1); } #weather-panel .ww-tile .ww-expand:is(*, #hx-keep-specificity) { padding-left: 0; padding-right: 0; } #weather-panel .ww-tile + .ww-part, #weather-panel .ww-tiles + .ww-part, #weather-panel .ww-part:is(*, #hx-keep-specificity) { margin-top: var(--hx-space-2); } #campaign-visit-form .ch-title:is(*, #hx-keep-specificity) { align-items: flex-start; } #places-dialog[data-hx] #place-list > .bookmark-distance:is(*, #hx-keep-specificity) { padding: 0; } /* text 4 px in, like every heading */ #weather-panel .ww-now > .wt-banner:is(*, #hx-keep-specificity) { margin-top: var(--hx-space-2); border-radius: var(--hx-radius-card); } /* 8 px under the tiles, its own card */ body.hs .sidebar[data-hx] #search-submit:is(*, #hx-keep-specificity) { align-self: center; margin-right: var(--hx-space-1); } /* centred in the field, 4 px from its edge */ /* 120 % on a 368 px screen cut the campaign name ("2026 2H Blade External I…"); it wraps to two lines instead */ :is(#campaign-home, #campaign-tracker) .ch-picker-name:is(*, #hx-keep-specificity) { overflow: visible; white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; } #campaign-home .ch-hero-text > .ch-dim:is(*, #hx-keep-specificity) { margin-left: 0; } /* lines up with "117 of 210" and the pills */ /* "Right now" was a 44 px strip with the words in the middle: 29 px above and 16 px below the words, where every other section heading has 16 px above and 4 px below (owner, 6 Oct 2026). The strip is now as tall as its text. */ #weather-panel .wr-strip.wr-plain:is(*, #hx-keep-specificity) { height: auto; min-height: 0; margin: 0 var(--hx-space-1) var(--hx-space-1); padding: 0; align-items: baseline; } /* Campaigns: the "Change" link made the Today heading taller than its text, and the three Today tiles carried 8 px above and 12 px below, so "Today" had 20 / 15 px and "Next nearby" 28 px above. Now 16 px above and 4 px below, like every heading. */ #campaign-home .ch-sec > .ch-link:is(*, #hx-keep-specificity) { margin-top: calc(var(--hx-space-4) * -1); margin-bottom: calc(var(--hx-space-4) * -1); } #campaign-home .ch-sec + .ch-cells:is(*, #hx-keep-specificity) { padding-top: 0; margin-bottom: 0; } /* Bookmarks tap targets (UI auto check, 6 Oct 2026; inspectors wear gloves, 44 px minimum): the place name opens the place, so the whole row is its tap area (Apple list rows); Navigate, Details and the creator sit above it. Details and the creator name get 44 px tap areas; negative margins keep the layout where it was. */ #places-dialog[data-hx] #place-list .bookmark-title::after { content: ""; position: absolute; inset: 0; } #places-dialog[data-hx] #place-list .bookmark-list-card :is(.place-navigation-actions, details, summary, .bookmark-creator, .bookmark-attribution):is(*, #hx-keep-specificity) { position: relative; z-index: 1; } #places-dialog[data-hx] #place-list .bookmark-list-card .place-navigation-actions:is(*, #hx-keep-specificity) { position: absolute; } #places-dialog[data-hx] #place-list .bookmark-list-card > .bookmark-provenance-details > summary:is(*, #hx-keep-specificity) { padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -22px; } /* an older rule pins min-height to 0 */ #places-dialog[data-hx] #place-list .bookmark-creator:is(*, #hx-keep-specificity) { min-width: var(--hx-icon-button); padding-top: 11px; padding-bottom: 11px; margin-top: -11px; margin-bottom: -11px; text-align: center; } /* Menu at 120 %: the item names had a 1.15 line height with clipping on, so 3 px of descenders ("g") were cut (UI auto check) */ #app-menu#app-menu .menu-items .menu-name:is(*, #hx-keep-specificity) { line-height: var(--hx-leading-body); } /* #app-menu twice: the shared row rule wraps a stronger selector in :is() */ /* ===================================================================== No outlines on any sheet, extended to every screen (owner, 6 Oct 2026: "extend the check to the other pages and states"). The UI auto check found 1 px borders on the shared pieces in the other screens: option buttons (.cf-opt), actions (.wh-action, .ui-action), radar tabs (.ww-tab), text fields, pickers and panels. They lose the border; fields are the tint. Where the border colour was the only sign of the chosen option, the chosen one is filled instead, like the pills. ===================================================================== */ :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet, #app-menu, #selected-card, dialog.horus-tool-dialog, #exit-navigation-dialog, #farm-picker, dialog.contact-card, .team-overlay, body.hs .sidebar[data-hx]) :is(button, select, input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, label.campaign-field, pre, .ww-rows, .farm-options, section.wr, #map-search-results):not(.weather-warning *, .ww-state, .menu-sos):is(*, #hx-keep-specificity) { border-color: transparent; box-shadow: none; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet, #app-menu, #selected-card, dialog.horus-tool-dialog, #exit-navigation-dialog, #farm-picker, dialog.contact-card, .team-overlay, body.hs .sidebar[data-hx]) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select):is(*, #hx-keep-specificity) { background-color: var(--hx-glass-field); } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet, #app-menu, #selected-card, dialog.horus-tool-dialog, #exit-navigation-dialog, #farm-picker, dialog.contact-card, .team-overlay, body.hs .sidebar[data-hx]) :is(.cf-opt, .ww-tab, .pc-camp)[aria-pressed="true"]:is(*, #hx-keep-specificity) { background: var(--hx-ink); color: var(--hx-page-solid, var(--hx-primary-ink)); } /* same as the chosen pill; white-on-white in Light otherwise */ :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet, #app-menu, #selected-card, dialog.horus-tool-dialog, #exit-navigation-dialog, #farm-picker, dialog.contact-card, .team-overlay, body.hs .sidebar[data-hx]) :is(.cf-opt, .ww-tab)[aria-pressed="true"] :is(*):is(*, #hx-keep-specificity) { color: inherit; } /* Older tool dialogs draw control outlines with legacy colour variables, some through !important (cream-ui.css). Inside sheets the two that outline controls (62765a, c8d6c3: only ever used in four-sided `border:`) are re-pointed to transparent. */ :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet, #app-menu, #selected-card, dialog.horus-tool-dialog, #exit-navigation-dialog, #farm-picker, dialog.contact-card, .team-overlay, body.hs .sidebar[data-hx]) { --lg-l-62765a: transparent; --lg-l-c8d6c3: transparent; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet, #app-menu, #selected-card, dialog.horus-tool-dialog, #exit-navigation-dialog, #farm-picker, dialog.contact-card, .team-overlay, body.hs .sidebar[data-hx]) :is(a.ui-action--standard, .contact-identity, .contact-details, .wh-card, #place-editor, #place-correction, .hx-chip):is(*, #hx-keep-specificity) { border-color: transparent; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet, #app-menu, #selected-card, dialog.horus-tool-dialog, #exit-navigation-dialog, #farm-picker, dialog.contact-card, .team-overlay, body.hs .sidebar[data-hx]) .hx-chip:is(*, #hx-keep-specificity) { background: var(--hx-glass-field); } /* Older dialogs: the sheet outline comes from --ui-shell-border / --ui-card-outline through !important rules (ui-system.css); re-pointed to transparent like every other sheet. Road review's content made the sheet 9 px wider than the screen. */ :is(dialog.horus-tool-dialog, #farm-picker, dialog.contact-card) { --ui-shell-border: transparent; --ui-card-outline: transparent; } dialog.horus-tool-dialog.road-review-dialog:is(*, #hx-keep-specificity) { max-width: calc(100vw - 2 * var(--hx-space-2)); min-width: 0; } dialog.horus-tool-dialog.road-review-dialog :is(.tool-body, .tool-body > *):is(*, #hx-keep-specificity) { min-width: 0; max-width: 100%; } @media (max-width: 760px) { dialog.horus-tool-dialog.road-review-dialog:is(*, #hx-keep-specificity):is(*, #hx-keep-specificity) { width: calc(100% - 2 * var(--hx-space-2)); max-width: calc(100% - 2 * var(--hx-space-2)); } dialog.horus-tool-dialog.road-review-dialog > :is(.tool-heading, .tool-body):is(*, #hx-keep-specificity) { width: auto; min-width: 0; } } /* 44 px tap targets on the other screens (UI auto check; the option rows, radar switch, data links and Ask chips were 40 px): option tiles (.cf-opt) in Filters, Period and Share, the Ask suggestion chips, worker names, and "more" disclosure lines. Negative margins keep the disclosure lines where they were. */ :is(.cf-opt, .ask-chip):is(*, #hx-keep-specificity) { min-height: var(--hx-icon-button); } .team-overlay { --hx-team-name-min: var(--hx-icon-button); --hx-team-name-pad: 8px 0; } /* team-ui.css pins the names with !important; it reads these */ .team-overlay .team-name:is(*, #hx-keep-specificity) { min-width: var(--hx-icon-button); margin-top: -8px; margin-bottom: -8px; } :is(#campaign-import-rules, .campaign-dialog details, #place-correction) > summary:is(*, #hx-keep-specificity) { padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px; } .hx-pop[data-hx]:is(*, #hx-keep-specificity) { border-color: transparent; } /* the map options pop-up: no outline, like every panel */ /* Weather Watch: "Next hours" is a card header (coloured strip, white text), not a section heading; only "Right now" is. Hour table words wrap between words, never inside one ("Moderat / e"). */ #weather-panel .ww-hour :is(*):is(*, #hx-keep-specificity) { overflow-wrap: normal; word-break: normal; hyphens: auto; } .team-overlay .team-options-menu:is(*, #hx-keep-specificity) { border-color: transparent; } /* the Workers options pop-up: no outline */ #weather-panel :is(td, th):is(*, #hx-keep-specificity) { overflow-wrap: normal; word-break: normal; hyphens: auto; } #weather-panel :is(td, th):first-child:is(*, #hx-keep-specificity) { white-space: nowrap; } /* "19:00" split at 120 % */ /* option tiles fall to fewer per row when a word would not fit ("Completed" split at 120 %); words never break inside */ :is(#campaign-filters, #campaign-period, #campaign-share, #campaign-status-change, #campaign-map-filter, #weather-report) .cf-grid.cf-row:is(*, #hx-keep-specificity) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.4em), 1fr)); } :is(.cf-opt):is(*, #hx-keep-specificity) { overflow-wrap: normal; word-break: normal; } /* Workers sat under the weather chip, the notice and the home sheet (z-index 9 under 32–33); like every sheet it now sits above the map controls. The Me card's ✕ was a 14 px-corner square; header buttons are 44 px circles. (Owner, 6 Oct 2026, screenshots) */ body.hs .team-overlay.is-workers:is(*, #hx-keep-specificity) { z-index: 40; } :is(dialog.contact-card .ui-header-icon, #farm-picker .icon-btn):is(*, #hx-keep-specificity) { width: var(--hx-icon-button); min-width: var(--hx-icon-button); height: var(--hx-icon-button); min-height: var(--hx-icon-button); border-radius: 50%; } /* Remaining states at 100 % (owner, 6 Oct 2026: "check all the remaining items"): route choice, driving, road editor, large radar */ :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet, #app-menu, #selected-card, dialog.horus-tool-dialog, #exit-navigation-dialog, #farm-picker, dialog.contact-card, .team-overlay, body.hs .sidebar[data-hx]) :is(.route-option, .weather-radar-large, .maplibregl-map):is(*, #hx-keep-specificity) { border-color: transparent; } .route-option small:is(*, #hx-keep-specificity) { color: var(--hx-muted); } /* was 3.2:1 */ :is(#driving-panel #drive-exit, #driving-panel .drive-map-buttons, .map-edit-panel button):is(*, #hx-keep-specificity) { border-color: transparent; box-shadow: none; } .map-edit-panel button[aria-pressed="true"]:is(*, #hx-keep-specificity) { background: var(--hx-ink); color: var(--hx-primary-ink); } #weather-radar .ui-header-icon:is(*, #hx-keep-specificity), dialog:has(.weather-radar-large) .ui-header-icon:is(*, #hx-keep-specificity) { width: var(--hx-icon-button); min-width: var(--hx-icon-button); height: var(--hx-icon-button); min-height: var(--hx-icon-button); border-radius: 50%; } .weather-radar-source:is(*, #hx-keep-specificity) { display: inline-flex; align-items: center; min-height: var(--hx-icon-button); } /* Older !important outlines read these variables; re-pointed on the elements themselves (route options, driving, road editor) */ .route-choice-dialog .route-option { --lg-l-62765a: transparent; --hx-hairline: transparent; } .route-choice-dialog .route-option[aria-pressed="true"] :is(.route-option-details, .route-option-details *):is(*, #hx-keep-specificity) { color: var(--hx-segment-ink); } /* "Uses main roads…" was dark on the green fill */ #driving-panel #drive-exit { --lg-l-62765a: transparent; --hx-hairline: transparent; } #driving-panel .drive-map-buttons { --lg-l-62765a: transparent; } #driving-panel .drive-map-buttons > * { --lg-l-62765a: var(--hx-hairline); } /* keep the thin dividers between the stacked map buttons */ .map-edit-panel button { --lg-l-62765a: transparent; } .route-choice-dialog .maplibregl-map { --lg-l-688377: transparent; } /* the route map's inline frame reads this */ /* Swipe down to close (sheet-swipe.js): the header belongs to the gesture, not to page scrolling, on phones */ @media (max-width: 760px) { :is(dialog[open], .team-overlay) :is(.ch-title, .ui-dialog-heading, .menu-heading, .tool-heading, .picker-heading):is(*, #hx-keep-specificity), body.map-search-visible .sidebar[data-hx] .search-panel-heading:is(*, #hx-keep-specificity) { touch-action: none; } } /* Press state (Apple HIG, Buttons: "always include a press state"). Many controls had none: the home sheet, the WTG card actions, list rows, pills, option tiles. One rule: a pressed control dims in Light and brightens in Dark (--hx-press). */ :is(dialog, .team-overlay, .hs-sheet, .hs-top, .map-actions, #selected-card, .sidebar, .mh-notices) :is(button, a[href], [role=button], summary, label.wh-action):not(:disabled):active { filter: var(--hx-press); } @media (prefers-reduced-motion: no-preference) { :is(dialog, .team-overlay, .hs-sheet, .hs-top, .map-actions, #selected-card, .sidebar, .mh-notices) :is(button, a[href], [role=button], summary) { transition: filter .08s ease-out; } } /* Wide screens (Fold inner screen, tablet, desktop; UI auto check at 882 px): the same 24 px corner and no outline as on phones. The older wide-screen outline reads --lg-l-688377 on the sheet; children keep their own value (initial = the rule's fallback). */ @media (min-width: 761px) { :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet, #app-menu, #selected-card, dialog.horus-tool-dialog, #exit-navigation-dialog, #farm-picker, dialog.contact-card, .team-overlay, body.hs .sidebar[data-hx], #selected-card, .team-overlay, .map-edit-panel):is(*, #hx-keep-specificity) { border-radius: var(--hs-radius); } } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet, #app-menu, #selected-card, dialog.horus-tool-dialog, #exit-navigation-dialog, #farm-picker, dialog.contact-card, .team-overlay, body.hs .sidebar[data-hx], .team-overlay, .map-edit-panel) { --lg-l-688377: transparent; --ui-shell-border: transparent; --ui-card-outline: transparent; } :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet, #app-menu, #selected-card, dialog.horus-tool-dialog, #exit-navigation-dialog, #farm-picker, dialog.contact-card, .team-overlay, body.hs .sidebar[data-hx], .team-overlay, .map-edit-panel) > * { --lg-l-688377: initial; } #place-delete:is(*, #hx-keep-specificity) { border-color: transparent; } /* destructive = red text, no outline (HIG) */ /* 8 px between neighbouring buttons (HIG; gloves): the radar title and its Enlarge button, the radar picker */ #weather-panel .wr-turn + .wr-big:is(*, #hx-keep-specificity), #weather-overview-panel .wr-turn + .wr-big:is(*, #hx-keep-specificity) { margin-left: var(--hx-space-2); } #weather-radar .wr-switch:is(*, #hx-keep-specificity) { gap: var(--hx-space-2); } /* A text field inside a tinted field box (search fields in Bookmarks, Search, Tracker, Workers) is transparent; the box is the field. The input tint rule above had drawn a second, darker box inside (seen on the wide layout, 6 Oct 2026). */ :is(#campaign-home, #campaign-list, #campaign-tracker, #campaign-choose, #campaign-filters, #campaign-share, #campaign-visits, #campaign-photo, #campaign-visit-form, #campaign-period, #campaign-day, #campaign-status-change, #campaign-map-filter, #weather-warning-detail, #weather-report, #places-dialog, #navigation-error, #weather-panel, #weather-wtg-picker, #weather-radar, #weather-overview-panel, #compass-help, #gps-status-dialog, #guide, #weather-home, #gps-home, #assistant-sheet, #app-menu, #selected-card, dialog.horus-tool-dialog, #exit-navigation-dialog, #farm-picker, dialog.contact-card, .team-overlay, body.hs .sidebar[data-hx], .team-overlay, .map-edit-panel) :is(label.search, .search, .ct-search, .bookmark-search, .team-search) > :is(input, textarea):not([type=checkbox]):not([type=radio]):not([type=range]):is(*, #hx-keep-specificity):is(*, #hx-keep-specificity) { background-color: transparent; } /* A bottom "Cancel" next to the sheet's ✕ is hidden (sheet-swipe.js marks it); the main action fills the row */ [data-hx-dup-cancel]:is(*, #hx-keep-specificity):is(*, #hx-keep-specificity):is(*, #hx-keep-specificity) { display: none; } /* weight: sheet rules set display: flex through :is(#id, …) */ :has(> [data-hx-dup-cancel]):is(*, #hx-keep-specificity):is(*, #hx-keep-specificity):is(*, #hx-keep-specificity) { grid-template-columns: minmax(0, 1fr); } :has(> [data-hx-dup-cancel]) > :not([data-hx-dup-cancel]):is(button, a):is(*, #hx-keep-specificity):is(*, #hx-keep-specificity):is(*, #hx-keep-specificity) { flex: 1 1 auto; grid-column: 1 / -1; width: auto; max-width: none; } /* Fold 6 cover screen check (owner, 6 Oct 2026). SOS: looks only, never its words or the slider. It floats 8 px like every sheet with the 24 px corner; the ✕ is a 44 px circle; grey outlines go. The red edges on the slider and its instruction stay: they are the safety signal. Ask: the question box is one field, not a tinted box inside a tinted box. */ @media (max-width: 760px) { #sos-dialog:is(*, #hx-keep-specificity):is(*, #hx-keep-specificity) { inset: auto var(--hx-space-2) max(var(--hx-space-2), env(safe-area-inset-bottom, 0px)) var(--hx-space-2); width: auto; max-width: none; margin: 0; } } #sos-dialog:is(*, #hx-keep-specificity):is(*, #hx-keep-specificity) { border-radius: var(--hs-radius); --ui-shell-border: transparent; --ui-card-outline: transparent; } #sos-dialog .hx-sos-close:is(*, #hx-keep-specificity) { width: var(--hx-icon-button); min-width: var(--hx-icon-button); height: var(--hx-icon-button); min-height: var(--hx-icon-button); border-radius: 50%; border-color: transparent; } #sos-dialog :is(.hx-sos-contact, .sos-cancel):is(*, #hx-keep-specificity) { border-color: transparent; } #assistant-sheet .ask-input:is(*, #hx-keep-specificity):is(*, #hx-keep-specificity) { background-color: transparent; } /* ===================================================================== Fold 6 cover screen (368 × 765), by-eye review of every state, 6 Oct 2026 ===================================================================== */ /* Tools switch: the shared row rule had shrunk its track to a 16 px chevron slot */ #map-tools[data-hx] .hx-tool-end.hx-switch:is(*, #hx-keep-specificity):is(*, #hx-keep-specificity) { width: calc(var(--hx-badge-size) * 1.6); height: var(--hx-badge-size); border-radius: var(--hx-radius-chip); background: var(--hx-track); } #map-tools[data-hx] .hx-tool-end.hx-switch.on:is(*, #hx-keep-specificity):is(*, #hx-keep-specificity) { background: var(--hx-good-solid); } /* Bookmark details open: its actions sit in a row under the place, not on top of the name */ #places-dialog[data-hx] #place-list .bookmark-list-card:has(details[open]) .place-navigation-actions:is(*, #hx-keep-specificity):is(*, #hx-keep-specificity) { position: static; translate: none; grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--hx-space-2); margin-top: var(--hx-space-2); } #places-dialog[data-hx] #place-list .bookmark-list-card:has(details[open]) .place-navigation-actions > .place-action:first-child:is(*, #hx-keep-specificity):is(*, #hx-keep-specificity) { position: static; translate: none; } /* Workers, Team history and Route Approvals: the shared sheet colours (an older !important rule paints dialogs with --ui-card) */ :is(.team-overlay, dialog.operations-admin, dialog.horus-tool-dialog) { --ui-card: var(--hx-sheet-ground, var(--hx-glass)); } :is(.team-overlay, dialog.operations-admin, dialog.horus-tool-dialog) > * { --ui-card: transparent; } .team-overlay .team-section-head:is(*, #hx-keep-specificity) { background: transparent; } /* Team history: worker choices are rows on the card tint; the tick shows the choice */ .team-overlay .team-check:is(*, #hx-keep-specificity):is(*, #hx-keep-specificity) { display: flex; align-items: center; justify-content: space-between; gap: var(--hx-space-3); min-height: var(--hx-icon-button); padding: 0 var(--hx-space-3); border-color: transparent; background: var(--hx-sheet-row); color: var(--hx-ink); text-align: left; } /* Filters: options stay on one line when they fit ("All" sat alone on a second line) */ :is(#campaign-filters, #campaign-period, #campaign-share, #campaign-status-change, #campaign-map-filter, #weather-report) .cf-grid.cf-row:is(*, #hx-keep-specificity):is(*, #hx-keep-specificity) { display: flex; flex-wrap: wrap; } :is(#campaign-filters, #campaign-period, #campaign-share, #campaign-status-change, #campaign-map-filter, #weather-report) .cf-grid.cf-row > .cf-opt:is(*, #hx-keep-specificity):is(*, #hx-keep-specificity) { flex: 1 1 auto; min-width: max-content; } /* Search, Places & roads: the hint box uses the card tint, not solid green */ body.hs .sidebar[data-hx] #map-search-results:is(*, #hx-keep-specificity):is(*, #hx-keep-specificity) { background: var(--hx-sheet-row); } /* the map options pop-up sits above the weather notice */ .team-map-options.hx-pop:is(*, #hx-keep-specificity) { z-index: 40; } /* Team history and Workers: older !important rules read legacy colours; re-pointed so the choices are card-tint rows with a green tick (the tick shows the choice) and the header has no band. Names wrap between words, not inside them. */ .team-overlay .team-compare { --lg-b-e8ebe8: var(--hx-sheet-row); --lg-pb-234f40: var(--hx-sheet-row); --lg-t-183d39: var(--hx-ink); --lg-pt-ffffff: var(--hx-ink); --lg-l-62765a: transparent; } .team-overlay .team-compare > .team-check > input:is(*, #hx-keep-specificity):is(*, #hx-keep-specificity) { accent-color: var(--hx-good-solid); } .team-overlay .team-compare > .team-check > span:is(*, #hx-keep-specificity) { overflow-wrap: normal; } .team-overlay > .team-section-head { --lg-b-234f40: transparent; --hx-card: transparent; --ui-card: transparent; } .team-overlay > .team-section-head > * { --hx-card: var(--hx-sheet-row); } /* its buttons keep the tinted circle */ /* Choose campaign: the name wraps instead of running under the tick */ #campaign-choose .cc-row .cc-name:is(*, #hx-keep-specificity):is(*, #hx-keep-specificity) { white-space: normal; overflow-wrap: normal; } /* Bookmark details: Google, Edit and History are 44 px wide too */ #places-dialog[data-hx] #place-list .bookmark-list-card:has(details[open]) .place-navigation-actions > *:is(*, #hx-keep-specificity):is(*, #hx-keep-specificity) { min-width: var(--hx-icon-button); } .team-overlay .team-compare:is(*, #hx-keep-specificity):is(*, #hx-keep-specificity) { grid-template-columns: minmax(0, 1fr); } /* one worker per row, like an Apple list ("Toma (Development)" ran out of a half-width tile) */ body.hx-options-open :is(.mh-notices, .hs-top):is(*, #hx-keep-specificity) { visibility: hidden; } /* the notice covered the map options pop-up (sheet-swipe.js marks the body) */