/* Geometry mirrors LocationSheetHourlyForecastLinearSection; tune these tokens live. */
:root {
  color-scheme: dark;
  --background: #10111a;
  --text: #fff;
  --safe: #21a896;
  --danger: #ff3263;
  --night: #e339ff;
  --rain: color(display-p3 .22745098 .6 .74509804);
  --row-height: 30px;
  --row-gap: 4px;
  --header-height: 34px;
  --table-width: 982px;
  --side-padding: 20px;
  --table-right-padding: 16px;
  --problem-column-gap: 8px;
  --numeric-font-size: 14px;
  --numeric-letter-spacing: -.04em;
  --numeric-font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--background); }
body { min-height: 100vh; min-height: 100dvh; margin: 0; background: var(--background); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; }
main { width: 100%; min-height: 100vh; min-height: 100dvh; max-width: 1100px; margin: 0 auto; padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); padding-left: env(safe-area-inset-left); padding-bottom: max(40px, env(safe-area-inset-bottom)); }
button, input { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:focus-visible, input:focus-visible, .table-scroll:focus-visible { outline: 2px solid var(--safe); outline-offset: 3px; }
.prototype-controls { padding: 18px var(--side-padding) 0; position: relative; }
#search-form { display: flex; background: #ffffff09; border: 1px solid #ffffff17; border-radius: 12px; min-height: 44px; }
#city-input { flex: 1; width: 0; border: 0; outline: none; color:var(--label-primary,#fff); background: none; padding: 10px 12px; font-size: 16px; }
.search-button { background: none; border: 0; color:var(--label-secondary,#ffffffb8); width: 44px; display: grid; place-items: center; }
.search-results { position: absolute; z-index: 5; top: 65px; left: 20px; right: 20px; padding: 4px; background: #20212e; border: 1px solid #ffffff24; border-radius: 12px; box-shadow: 0 12px 32px #0008; }
.search-results button { display: block; padding: 12px; width: 100%; text-align: left; background: none; color:var(--label-primary,#fff); border: 0; border-radius: 8px; font-size: 16px; }
.search-results button:hover { background: #ffffff0c; }
.search-results small { display: block; margin-top: 3px; font-size: 13px; color:var(--label-secondary,#ffffff80); }
.search-results p { padding: 8px 12px; }
#status { color:var(--label-secondary,#ffffff80); font-size: 13px; line-height: 1.45; min-height: 19px; margin: 9px 0 12px; }
#status.error { color: var(--danger); }
.day-picker { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px 0; padding: 0 20px 16px; }
.day-picker::-webkit-scrollbar, .table-scroll::-webkit-scrollbar { display: none; }
.day-picker button { white-space: nowrap; background: #ffffff07; border: 1px solid #ffffff0b; color:var(--label-secondary,#ffffff80); padding: 7px 10px; border-radius: 8px; font-size: 13px; min-height: 36px; }
.day-picker button[aria-current="date"] { color:var(--label-primary,#fff); background: #ffffff12; border-color: #ffffff22; }
.day-heading { padding: 18px 96px 0 var(--side-padding); }
.day-heading h1 { font-size: 28px; font-weight: 600; letter-spacing: -.45px; line-height: 1.2; margin: 0; }
.day-heading p { color:var(--label-secondary,#ffffff80); font-size: 18px; font-weight: 600; margin: 4px 0 0; }
.table-wrap { position: relative; margin-top: 28px; }
.table-scroll { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
#forecast-table { width: calc(var(--table-width) + var(--side-padding) + var(--table-right-padding)); font-family: var(--numeric-font-family); padding: 0 var(--table-right-padding) 0 var(--side-padding); }
.forecast-row, .forecast-header { display: flex; align-items: center; width: var(--table-width); }
.forecast-row { height: var(--row-height); margin-bottom: var(--row-gap); font-size: var(--numeric-font-size); font-weight: 700; font-variant-numeric: tabular-nums; }
.forecast-header { height: var(--header-height); }
.cell { position: relative; flex-shrink: 0; display: flex; align-items: center; height: 100%; white-space: nowrap; }
.status-cell { width: 24px; justify-content: center; }
.status-cell .icon { overflow: visible; mask: none; clip-path: none; }
.time-cell { width: 22px; }
.condition-cell { width: 16px; margin-left: 10px; justify-content: center; }
.temperature-cell { width: 38px; margin-left: 6px; }
.wind-cell { width: 172px; margin-left: 4px; }
.precipitation-cell { width: 90px; margin-left: 4px; }
.visibility-cell { width: 52px; justify-content: flex-end; }
.cloud-base-cell { width: 52px; justify-content: flex-end; }
.cloud-cover-cell { width: 56px; justify-content: flex-end; padding-left: 12px; }
.uv-cell { width: 30px; justify-content: flex-end; }
.humidity-cell { width: 44px; justify-content: flex-end; }
.kp-cell { width: 42px; padding-left: 12px; justify-content: flex-end; }
.altitude-cell { width: 300px; padding-left: 4px; margin-left: 20px; }
.header-symbol { display: flex; flex-direction: column; align-items: center; gap: 2px; color:var(--label-secondary,#ffffffb8); width: 100%; font-size: 12px; font-weight: 700; }
.header-symbol .icon { width: 12px; height: 12px; }
.header-symbol small { height: 10px; font-size: 8px; font-weight: 600; color:var(--label-secondary,#ffffff7a); line-height: 10px; }
/* Header icons and units share the leading edge of their column content. */
.header-left, .time-cell .header-symbol, .temperature-cell .header-symbol, .wind-cell .header-symbol { align-items: flex-start; text-align: left; }
.icon { width: 16px; height: 16px; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.condition-cell .icon { width: 15px; height: 15px; }
.direction { width: 18px; display: flex; justify-content: center; flex-shrink: 0; opacity: .92; }
.direction .icon { width: 14px; height: 14px; }
.wind-bearing { width: 40px; margin-right: 2px; flex-shrink: 0; text-align: left; font: inherit; font-family: system-ui; font-stretch: condensed; font-width: condensed; }
.wind-speed { margin-left: 2px; width: 28px; flex-shrink: 0; }
.wind-bars { position: relative; width: 82px; height: 30px; transform: translateX(-2px); flex-shrink: 0; }
.wind-bar { position: absolute; left: 0; top: 11.5px; height: 7px; border-radius: 5px; }
.gust-value { position: absolute; top: 0; height: 30px; display: flex; align-items: center; width: 26px; }
.amount { width: 40px; justify-content: flex-end; }
.probability { width: 42px; margin-left: 8px; justify-content: flex-end; }
.value { position: relative; isolation: isolate; }
.risk-badge:before, .problem-window::before { content: ""; position: absolute; background: var(--badge-color); border-radius: 8px; z-index: -1; }
.risk-badge:before { inset: -4px -6px; border-radius: 999px; background:linear-gradient(var(--badge-color),var(--badge-color)) var(--background); box-shadow:0 0 0 2px color-mix(in srgb,var(--background) 50%,transparent); }
.altitude-pair { display: flex; align-items: center; width: 44px; flex-shrink: 0; }
.altitude-pair + .altitude-pair { margin-left: 4px; }
.altitude-speed { width: 28px; margin-left: 2px; }
.altitude-bars { width: 60px; margin-left: 8px; display: flex; flex-direction: column; gap: 2px; }
.altitude-bars i { height: 3px; border-radius: 3px; display: block; opacity: .28; }
.sun-event { height: 42.667px; padding-top: 8px; padding-bottom: 10.667px; margin-bottom: 4px; display: flex; align-items: center; gap: 5px; color: #e339fff0; padding-left: 2px; font-size: 14px; font-weight: 700; }
.sun-event .icon { width: 14px; height: 14px; }
.sun-event .line { height: 1px; flex: 1; background: #e339ff61; }
#hidden-risks { position: absolute; top: var(--header-height); right: 10px; pointer-events: none; transition: opacity 120ms; }
.risk-dots { height: 30px; margin-bottom: 4px; width: 4px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.risk-dots i { width: 4px; height: 4px; border-radius: 50%; }
.event-dots-gap { height: 42.667px; margin-bottom: 4px; }
footer { padding: 22px 20px 0; color:var(--label-secondary,#ffffff59); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
footer a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (min-width: 700px) { .prototype-controls { max-width: 560px; } }

.visibility-cell .header-symbol, .cloud-base-cell .header-symbol, .cloud-cover-cell .header-symbol, .uv-cell .header-symbol, .humidity-cell .header-symbol, .kp-cell .header-symbol { align-items: flex-end; text-align: right; }
.precipitation-cell .header-symbol { align-items: flex-end; }
footer button { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; }

/* Hourly problems stay on one line; swipe right into the full forecast table. */
:root { --summary-width: 100vw; }
.forecast-views { display: flex; gap: 16px; padding: 16px var(--side-padding) 0; }
.forecast-views button { padding: 3px 0 5px; border: 0; border-bottom: 1px solid transparent; background: none; color:var(--label-secondary,#ffffff66); font-size: 13px; font-weight: 600; }
.summary-variants { display: flex; gap: 12px; margin-left: auto; padding-left: 16px; border-left: 1px solid #ffffff17; }
.forecast-views button[aria-pressed="true"] { border-bottom-color: #ffffff80; color:var(--label-secondary,#ffffffdb); }
.forecast-views + .table-wrap { margin-top: 16px; }
.table-scroll { scroll-snap-type: x proximity; }
#forecast-table { width: calc(var(--summary-width) + var(--table-width) + var(--side-padding) + var(--table-right-padding)); padding: 0; }
.forecast-pages-header, .forecast-line, .forecast-event { display: flex; flex-wrap: nowrap; width: 100%; }
.forecast-pages-header { align-items: center; height: var(--header-height); }
.problem-header { display: flex; align-items: center; width: var(--summary-width); height: 100%; padding: 0 var(--table-right-padding) 0 var(--side-padding); flex-shrink: 0; scroll-snap-align: start; }
.summary-hour-header { display: flex; align-items: center; width: 22px; margin-left: 24px; flex-shrink: 0; color:var(--label-secondary,#ffffffb8); }
.summary-hour-header .icon { width: 12px; height: 12px; }
.summary-wind-header { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 110px; margin-left: 4px; flex-shrink: 0; color:var(--label-secondary,#ffffffb8); }
.summary-wind-header .icon { width: 14px; height: 14px; }
.summary-wind-header small { height: 10px; font-size: 8px; font-weight: 600; line-height: 10px; color:var(--label-secondary,#ffffff7a); }
.summary-title { margin-left: auto; padding-left: 9px; flex-shrink: 0; white-space: nowrap; text-align: right; color:var(--label-secondary,#ffffff7a); font-size: 12px; font-weight: 600; }
.detail-pane { width: calc(var(--table-width) + var(--side-padding) + var(--table-right-padding)); padding: 0 var(--table-right-padding) 0 var(--side-padding); flex-shrink: 0; }
.forecast-pages-header > .detail-pane { scroll-snap-align: start; }
.forecast-line { align-items: center; margin-bottom: var(--row-gap); }
/* The same unsafe-hour hatch as the horizontal and daily timelines. */
#daily-view[data-orientation="vertical"] .forecast-line:has(> .problem-row[data-unsafe="true"]) { background-image: repeating-linear-gradient(135deg,rgba(255,50,99,.12) 0 1px,transparent 1px 5.333333px); }
.forecast-line .forecast-row { margin-bottom: 0; }
.problem-row { position: relative; isolation: isolate; display: flex; flex-wrap: nowrap; align-items: center; width: var(--summary-width); height: var(--row-height); padding: 0 var(--table-right-padding) 0 var(--side-padding); flex-shrink: 0; white-space: nowrap; font-size: var(--numeric-font-size); font-weight: 700; font-variant-numeric: tabular-nums; }
.problem-window { position: relative; isolation: isolate; width: 100%; margin-bottom: var(--row-gap); }
/* Move only the grouped backdrop; the status and numeric cells keep their coordinates. */
.problem-window::before { content: none; top: 0; bottom: 0; left: 20px; width: calc(var(--summary-width) - 28px); border-radius: 12px; pointer-events: none; }
.problem-window > .forecast-line:last-child { margin-bottom: 0; }
.problem-window > .forecast-event:last-child .sun-event { margin-bottom: 0; }
.problem-row > .status-cell, .problem-row > .time-cell { height: 30px; }
.summary-wind-cell { width: 110px; margin-left: 4px; }
.summary-wind-cell .wind-speed { margin-left: 0; }
.problem-chips { display: grid; flex: 1 0 auto; min-width: max(0px, calc(var(--problem-grid-width) + (var(--problem-column-count) - 1) * var(--problem-column-gap))); grid-template-columns: var(--problem-grid-template); justify-content: end; align-items: center; gap: var(--problem-column-gap); margin-left: 9px; }
.problem-chips:empty { min-width: 0; margin-left: 0; }
.problem-slot { display: flex; justify-content: center; align-items: center; min-width: 0; height: 30px; }
.problem-slot[data-active="false"]::after { content: ""; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .2; }
.problem-chip-icon { display: flex; align-items: center; width: 100%; height: 16px; }
.problem-chip-icon .icon { width: 100%; height: 16px; }
.forecast-event { align-items: center; }
.problem-event-pane { width: var(--summary-width); padding: 0 var(--table-right-padding) 0 var(--side-padding); flex-shrink: 0; }
.forecast-event .sun-event { margin-bottom: var(--row-gap); }
#hidden-risks { display: none; }

/* Numeric experiment: the header and rows share one day-wide grid. */
.problem-legend .problem-slot { height: var(--header-height); }
.problem-legend .header-symbol { align-items: center; }
.problem-number-slot { gap: 16px; padding: 0 6px; font-size: calc(var(--numeric-font-size) - 2px); }
.problem-number-value { display: flex; justify-content: center; flex: 1; min-width: 0; }
.problem-number-slot .value { flex-shrink: 0; }
.problem-number-slot[data-active="false"]::after { content: none; }

/* Values starts at the left scaffold; only excess width shifts under fixed time. */
#forecast-table[data-summary-variant="values"] .problem-header { position: relative; isolation: isolate; }
#forecast-table[data-summary-variant="values"] .problem-row > .status-cell,
#forecast-table[data-summary-variant="values"] .problem-row > .time-cell,
#forecast-table[data-summary-variant="values"] .summary-hour-header { z-index: 1; }
.summary-flow-viewport {
  position: absolute;
  inset: 0 var(--table-right-padding) 0 66px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0px, #000 var(--flow-fade-left, 0px), #000 calc(100% - var(--flow-fade-right, 0px)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0px, #000 var(--flow-fade-left, 0px), #000 calc(100% - var(--flow-fade-right, 0px)), transparent 100%);
}
.summary-flow-viewport::-webkit-scrollbar { display: none; }
#forecast-table[data-flow-hidden-left="true"] { --flow-fade-left: 8px; }
#forecast-table[data-flow-hidden-right="true"] { --flow-fade-right: 8px; }
.summary-flow {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  min-width: 100%;
  height: 100%;
  white-space: nowrap;
}
.summary-flow .problem-chips { flex: 1 0 auto; margin-left: 5px; }
.summary-flow .problem-chips:empty { margin-left: 0; }
.summary-flow .summary-wind-cell,
.summary-flow .summary-wind-header { width: 110px; }
.summary-flow .wind-bars { width: 82px; }

/* One shared affordance; the hours themselves remain fixed. */
.summary-scroll-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: calc(100% - 82px);
  margin: 0 16px 2px 66px;
  padding: 3px 0;
  min-height: 24px;
  border: 0;
  background: transparent;
  color:var(--label-secondary,#ffffff80);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.summary-scroll-hint[hidden] { display: none; }
.summary-scroll-track { position: relative; width: 48px; height: 3px; border-radius: 2px; background: #ffffff1a; flex-shrink: 0; }
.summary-scroll-track > span { position: absolute; top: 0; left: var(--scroll-thumb-left, 0%); width: var(--scroll-thumb-width, 100%); height: 100%; border-radius: inherit; background: #ffffff66; }

/* Reversible, Values-only 90-degree wind chart experiment. */
.wind-experiment { display: flex; align-items: center; gap: 12px; padding: 8px var(--side-padding) 0; color:var(--label-secondary,#ffffff66); font-size: 11px; }
.wind-experiment[hidden] { display: none; }
.wind-experiment button { padding: 3px 0; border: 0; border-bottom: 1px solid transparent; background: none; color:var(--label-secondary,#ffffff66); font: inherit; }
.wind-experiment button[aria-pressed="true"] { color:var(--label-secondary,#ffffffdb); border-bottom-color: #ffffff80; }
.wind-experiment + .table-wrap { margin-top: 10px; }
.wind-experiment[hidden] + .table-wrap { margin-top: 16px; }
#forecast-table { position: relative; }
.wind-curve-slot { display: block; width: 110px; height: 30px; flex-shrink: 0; }
.wind-curve-number { font-family: var(--numeric-font-family); font-size: var(--numeric-font-size); font-weight: 700; font-variant-numeric: tabular-nums; paint-order: stroke fill; stroke: var(--background); stroke-width: 5px; stroke-linejoin: round; }
.wind-curve-overlay {
  position: absolute;
  inset: 0 var(--table-right-padding) 0 66px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  -webkit-mask-image: linear-gradient(to right, transparent 0px, #000 var(--flow-fade-left, 0px), #000 calc(100% - var(--flow-fade-right, 0px)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0px, #000 var(--flow-fade-left, 0px), #000 calc(100% - var(--flow-fade-right, 0px)), transparent 100%);
}
.wind-vertical-chart { position: absolute; top: 0; left: var(--wind-chart-origin); transform: translateX(calc(-1 * var(--wind-chart-scroll, 0px))); overflow: visible; }

.wind-curve-zero-label { font-family: var(--numeric-font-family); font-size: 10px; font-weight: 700; paint-order: stroke fill; stroke: var(--background); stroke-width: 3px; stroke-linejoin: round; }

#forecast-table[data-summary-variant="values"][data-wind-display="curve"] .summary-wind-header small { margin-left: 16px; }

/* Curve 2 uses Bars' numeric styling, beside the zero/curve rather than on it. */
.wind-curve-number-offset { stroke: none; paint-order: normal; }
#forecast-table[data-summary-variant="values"]:is([data-wind-display="curve2"],[data-wind-display="curve30"],[data-wind-display="curve4"]) .summary-wind-header small { margin-left: 46px; }

/* Shared four-height wind chart, left of the three arrow/value columns. */
.altitude-curve-slot { position: relative; display: block; width: 156px; height: 30px; flex-shrink: 0; }
.altitude-header { align-items: center; }
.altitude-plot-header { position: relative; display: block; width: 156px; height: 34px; flex-shrink: 0; color:var(--label-secondary,#ffffffb8); }
.altitude-plot-header .icon { position: absolute; left: 84px; top: 5px; width: 12px; height: 12px; }
.altitude-surface-heading { position: absolute; right: 80px; top: 9px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.altitude-wind-unit { position: absolute; left: 100px; top: 20px; font-size: 8px; color:var(--label-secondary,#ffffff7a); }
.altitude-level-header { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 44px; height: 34px; flex-shrink: 0; }
.altitude-level-header + .altitude-level-header { margin-left: 4px; }
.altitude-level-header i { width: 14px; height: 2px; border-radius: 2px; background: currentColor; }
.altitude-level-header small { font-size: 9px; line-height: 10px; font-weight: 700; }
.altitude-curve-overlay { position: absolute; top: 0; width: 156px; pointer-events: none; z-index: 2; }
.altitude-vertical-chart { display: block; overflow: visible; }

/* Curve 30 keeps Curve 2, with graph-sized bare problem numbers. */
#forecast-table[data-summary-variant="values"]:is([data-wind-display="curve30"],[data-wind-display="curve4"]) .problem-number-slot { font-size: var(--numeric-font-size); }

/* Surface direction beside the 10 m speed, before the shared zero guide. */
.altitude-surface-direction { position: absolute; left: 0; top: 0; height: 30px; display: flex; align-items: center; z-index: 3; }
.altitude-surface-bearing { width: 32px; flex-shrink: 0; font-family: system-ui; font-size: 12px; font-weight: 700; }
.altitude-surface-direction .direction { width: 16px; }
.altitude-pair .direction { width: 14px; }
.altitude-pair .direction .icon { width: 12px; height: 12px; }

/* Separate the whole height-wind section from Kp, across ordinary hour rows. */
.altitude-cell::before { content: ""; position: absolute; left: -4px; top: -2px; bottom: -2px; width: 1px; background: #ffffff33; pointer-events: none; }
.altitude-header::before { top: 0; }

/* Curve 4 measures the bare text, then draws it with the problem curve. */
#forecast-table[data-summary-variant="values"][data-wind-display="curve4"] .problem-number-slot .value { visibility: hidden; }
.problem-curve-overlay { position: absolute; left: 66px; top: 0; bottom: 0; width: calc(var(--summary-width) - 82px); overflow: hidden; pointer-events: none; z-index: 2; -webkit-mask-image: linear-gradient(to right, transparent 0px, #000 var(--flow-fade-left, 0px), #000 calc(100% - var(--flow-fade-right, 0px)), transparent 100%); mask-image: linear-gradient(to right, transparent 0px, #000 var(--flow-fade-left, 0px), #000 calc(100% - var(--flow-fade-right, 0px)), transparent 100%); }
.problem-vertical-chart { position: absolute; top: 0; transform: translateX(calc(-1 * var(--wind-chart-scroll, 0px))); overflow: visible; }

/* Independent transposed experiment; the original measurable table stays intact. */
.forecast-orientation { display:flex; flex-wrap:wrap; gap:6px; padding:14px var(--side-padding) 0; }
.forecast-orientation button { border:1px solid #ffffff17; border-radius:8px; padding:6px 11px; background:#ffffff07; color:var(--label-secondary,#ffffff80); font-size:12px; }
.forecast-orientation button[aria-pressed="true"] { background:#ffffff16; color:var(--label-primary,#ffffffed); border-color:#ffffff33; }
#daily-view:is([data-orientation="horizontal"],[data-orientation="day"],[data-orientation="week"],[data-orientation="cards"]) #table-scroll { position:absolute; top:0; left:0; width:100%; height:0; overflow:hidden; visibility:hidden; pointer-events:none; }
/* Solar events retain a curve break but no extra hourly column. */
#daily-view:is([data-orientation="horizontal"],[data-orientation="day"],[data-orientation="week"],[data-orientation="cards"]) #forecast-table .forecast-event { height:0; overflow:hidden; }
#daily-view:is([data-orientation="horizontal"],[data-orientation="day"],[data-orientation="week"],[data-orientation="cards"]) #forecast-table .problem-window:has(> .forecast-event:last-child) { margin-bottom:0; }
.horizontal-scroll[hidden] { display:none; }
.horizontal-scroll { overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#ffffff44 transparent; padding-bottom:8px; }
.horizontal-scroll:focus-visible { outline:2px solid var(--safe); outline-offset:-2px; }
.horizontal-forecast { width:calc(var(--legend-width,44px) + var(--timeline-width) + 12px); font-family:var(--numeric-font-family); font-size:var(--numeric-font-size); font-weight:700; font-variant-numeric:tabular-nums; }
.horizontal-metric-row { display:flex; position:relative; border:0; z-index:1; }
.horizontal-row-label { position:sticky; left:0; width:var(--legend-width,44px); flex:0 0 var(--legend-width,44px); z-index:3; background:var(--background); display:flex; align-items:center; justify-content:center; border-right:1px solid #ffffff12; box-shadow:5px 0 8px -5px #000; }
.horizontal-row-label .header-symbol { align-items:center; text-align:center; }
/* The two leading rows explain themselves through their hourly contents. */
.horizontal-metric-row:is([data-metric="time"],[data-metric="weather"],[data-metric="conditions"]) .horizontal-row-label .header-symbol { visibility:hidden; }
.horizontal-row-label .header-symbol small { font-size:9px; }
.horizontal-forecast[data-span="hourly"][data-chart-labels="compact"] .horizontal-row-label .header-symbol small { font-weight:800; position:relative; top:2px; }
.horizontal-row-track { position:relative; width:var(--timeline-width); flex:0 0 var(--timeline-width); overflow:hidden; }
.horizontal-hour-cell { position:absolute; top:0; width:var(--hour-width,36px); height:100%; display:flex; align-items:center; justify-content:center; gap:1px; white-space:nowrap; }
.horizontal-hour-cell .icon { width:15px; height:15px; }
.horizontal-hour-cell .value { font-size:var(--numeric-font-size); }
.horizontal-forecast:not([data-wind-display="curve30"]):not([data-wind-display="curve4"]) .horizontal-section[data-view="summary"] .problem-number-value .value { font-size:calc(var(--numeric-font-size) - 2px); }
.horizontal-hour-cell .problem-number-value { flex:none; }
/* Problems shows risk values; Details reveals every hourly scalar value. */
.horizontal-forecast[data-view="summary"] .horizontal-scalar-value[data-risk="false"] { visibility:hidden; }
/* Numeric rows leave room for both the legend glyph and its lowered unit. */
.horizontal-metric-row:has(.horizontal-scalar-value) .header-symbol small { flex-shrink:0; }
.horizontal-scalar-value .risk-badge::before { inset:-3px -3px; }
.horizontal-hour-cell .problem-chip-icon { justify-content:center; }
.horizontal-hour-cell .problem-chip-icon .icon { width:16px; }
.horizontal-hour-cell .altitude-speed { width:auto; margin:0; }
.horizontal-bearing { display:flex; flex-direction:column; align-items:center; gap:0; font-family:system-ui; font-size:10px; line-height:11px; }
.horizontal-bearing .direction { width:12px; height:10px; }
.horizontal-bearing .direction .icon { width:10px; height:10px; }
.horizontal-series-svg { display:block; position:absolute; top:0; left:0; overflow:hidden; pointer-events:none; }
.horizontal-section { position:relative; isolation:isolate; }
/* Opaque glyph-shaped underlay prevents hatching showing through translucent captions. */
.horizontal-forecast { text-shadow:0 0 0 var(--background); }
.horizontal-timeline-backdrop { position:absolute; top:0; bottom:0; left:var(--legend-width,44px); width:var(--timeline-width); z-index:0; pointer-events:none; }
.horizontal-section:has(.horizontal-event-footer) .horizontal-timeline-backdrop { bottom:26px; }
.horizontal-unsafe-hour { position:absolute; top:0; bottom:0; width:var(--hour-width,36px); background:repeating-linear-gradient(135deg,rgba(255,50,99,.12) 0 1px,transparent 1px 5.333333px); background-size:var(--timeline-width) 100%; background-repeat:no-repeat; }
.horizontal-sun-line { position:absolute; top:0; bottom:0; width:1px; transform:translateX(-.5px); background:#e339ff33; }
.horizontal-event-footer { position:relative; z-index:1; margin-left:var(--legend-width,44px); width:var(--timeline-width); height:26px; color:#e339ffcc; font-family:system-ui; font-size:10px; font-weight:600; line-height:14px; }
.horizontal-sun-label { position:absolute; top:7px; transform:translateX(-50%); white-space:nowrap; }
.horizontal-wind-bars { position:absolute; bottom:20px; height:42px; width:12px; }
.horizontal-wind-bars i { position:absolute; bottom:0; width:7px; border-radius:4px; left:3px; }
.horizontal-wind-number { position:absolute; bottom:5px; }
.horizontal-gust-number { position:absolute; }

/* Keep altitude arrows and three-digit speeds inside the compact hourly column. */
.horizontal-metric-row:is([data-metric="altitude-80"],[data-metric="altitude-120"],[data-metric="altitude-180"]) .horizontal-hour-cell { flex-direction:column; gap:0; }
.horizontal-metric-row:is([data-metric="altitude-80"],[data-metric="altitude-120"],[data-metric="altitude-180"]) .direction { width:12px; height:10px; }
.horizontal-metric-row:is([data-metric="altitude-80"],[data-metric="altitude-120"],[data-metric="altitude-180"]) .direction .icon { width:10px; height:10px; }

/* Each hour owns its status; weather owns its temperature. */
.horizontal-heading-pair { display:flex; align-items:center; justify-content:center; gap:3px; }
.horizontal-time-group { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; line-height:18px; height:30px; }
.horizontal-time-group .horizontal-group-first { display:grid; place-items:center; width:12px; height:12px; flex-shrink:0; }
.horizontal-time-group .icon { max-width:12px; max-height:12px; }
.horizontal-time-group .horizontal-group-second { display:block; }
.horizontal-weather-group { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; height:30px; }
.horizontal-weather-group .horizontal-group-first { display:grid; place-items:center; height:14px; line-height:14px; }
.horizontal-weather-group .icon { max-width:14px; max-height:14px; }
.horizontal-weather-group .horizontal-group-second { display:flex; align-items:center; justify-content:center; height:16px; line-height:16px; }
.horizontal-heading-pair + small:empty { display:none; }

/* Give the linked header groups a little air, without spreading every metric. */
.horizontal-metric-row:is([data-metric="time"],[data-metric="weather"]) { margin-bottom:3px; }
.horizontal-metric-row[data-near-ceiling="true"] { margin-top:4px; }
.horizontal-weather-group .horizontal-group-second { transform:translateX(2px); }
/* Details already labels temperature on its curve. */
.horizontal-forecast[data-view="details"][data-temperature-plot="true"] .horizontal-weather-group .horizontal-group-second,
.horizontal-forecast[data-view="details"][data-temperature-plot="true"] [data-metric="weather"] .horizontal-heading-pair > :last-child,
.horizontal-forecast[data-view="details"][data-temperature-plot="true"] [data-metric="weather"] .header-symbol > small { display:none; }

.value-percent { font-size:0.666667em; font-weight:800; }
span.percent-value { display:inline-flex; align-items:flex-end; line-height:1; }
span.percent-value > span { line-height:1; }

/* Details inserts the missing rows into the same timeline without rebuilding plots. */
.horizontal-details-reveal { position:relative; z-index:1; display:grid; grid-template-rows:1fr; opacity:1; }
/* Clip the animated reveal without intercepting sticky side legends. */
.horizontal-details-clip { min-height:0; overflow:clip; }
.horizontal-forecast[data-view="summary"] .horizontal-details-reveal { grid-template-rows:0fr; opacity:0; }
.horizontal-forecast[data-reveal-ready="true"] .horizontal-details-reveal { transition:grid-template-rows 320ms cubic-bezier(.25,.1,.25,1), opacity 240ms ease; }
@media (prefers-reduced-motion:reduce) {
  .horizontal-forecast[data-reveal-ready="true"] .horizontal-details-reveal { transition:none; }
}
.horizontal-detail-number { font-family:var(--numeric-font-family); font-size:var(--numeric-font-size); font-weight:700; }
.horizontal-detail-zero-label { font-family:system-ui; font-weight:500; }
.horizontal-altitude-label { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; line-height:17px; }
.horizontal-altitude-bearing { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; height:22px; font-family:system-ui; font-size:9px; line-height:10px; }
.horizontal-altitude-compass { display:block; height:10px; }
.horizontal-altitude-bearing .direction { width:10px; height:10px; }
.horizontal-altitude-bearing .direction .icon { width:10px; height:10px; }
.horizontal-metric-row[data-metric="altitude-180"] { margin-top:10px; }
/* Separate each upper-height speed from the following row or shared plot. */
.horizontal-metric-row:is([data-metric="altitude-180"],[data-metric="altitude-120"],[data-metric="altitude-80"]) { margin-bottom:4px; }

/* Day overview shares the plots but fits every supplied local-day hour. */
.horizontal-forecast[data-span="day"] { width:100%; padding:0 var(--chart-right-gutter,20px) 0 var(--chart-left-gutter,20px); }
.horizontal-forecast[data-span="day"] .horizontal-row-label { display:none; }
.horizontal-forecast[data-span="day"] .horizontal-time-group .horizontal-group-second { font-size:11px; font-weight:600; }
.horizontal-forecast[data-span="day"] .horizontal-time-group .icon { max-width:9px; max-height:9px; }
.horizontal-forecast[data-span="day"] .horizontal-weather-group .icon,
.horizontal-forecast[data-span="day"] [data-metric="conditions"] .horizontal-hour-cell .icon { max-width:11px; max-height:11px; }
.horizontal-bar-bearing { position:absolute; left:50%; width:10px; height:10px; margin-left:-5px; }
.horizontal-bar-bearing .direction, .horizontal-bar-bearing .icon { display:block; width:10px; height:10px; }
.horizontal-wind-arrow { overflow:visible; }

/* A single matching legend glyph identifies the strongest labeled day problem. */
.day-problem-peak-icon { position:absolute; width:12px; height:12px; pointer-events:none; }

/* Actual curve miniatures share the native day navigator and its selection lens. */
.week-problems { margin:18px 20px 0; }
.week-problems[hidden] { display:none; }
.week-problems-heading { margin:0 0 8px; color:var(--label-secondary,#ffffff80); font-size:12px; font-weight:600; }
.week-problems-card { position:relative; height:var(--week-card-height,49px); background:#ffffff06; border-radius:16px; }
.week-problems-unsafe { position:absolute; top:0; left:22px; width:calc(100% - 30px); height:100%; border-radius:inherit; overflow:hidden; pointer-events:none; }
.week-problems-unsafe-band { fill:var(--danger); fill-opacity:.04; }
.week-problems-base,.week-problems-focus { position:absolute; inset:0; pointer-events:none; }
.week-problems-base { opacity:1; }
.week-problems-svg { position:absolute; top:12px; left:22px; width:calc(100% - 30px); height:var(--week-plot-height,29px); overflow:visible; }
 .week-problems-focus { inset:0 8px 0 22px; clip-path:inset(0 calc((6 - var(--week-selected)) * 100% / 7) 0 calc(var(--week-selected) * 100% / 7) round 16px); transition:clip-path .55s ease; }
.week-problems-focus .week-problems-svg { left:0; width:100%; }
.week-problems-lens { position:absolute; top:0; left:22px; width:calc((100% - 30px) / 7); height:var(--week-card-height,49px); border:1px solid #ffffff25; border-radius:16px; background:#ffffff08; transform:translateX(calc(var(--week-selected) * 100%)); transition:transform .55s ease; pointer-events:none; }
.week-problems[data-has-selection="false"] :is(.week-problems-focus,.week-problems-lens) { visibility:hidden; }
.week-problems-slider { position:absolute; inset:0 8px 0 22px; margin:0; padding:0; width:calc(100% - 30px); height:var(--week-card-height,49px); opacity:0; cursor:ew-resize; }
.week-problems-card:has(.week-problems-slider:focus-visible) { outline:2px solid var(--safe); outline-offset:3px; }
.week-problems-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:0; margin:5px 8px 0 22px; }
.week-problems-days button { min-width:0; padding:0 2px; border:0; background:none; color:var(--label-secondary,#ffffff99); }
.week-problems-days button[aria-current="date"] { color:var(--label-primary,#fff); }
.week-problems-days button:disabled { opacity:.4; }
.week-problems-weekday { display:block; height:18px; font-size:13px; line-height:18px; font-weight:700; }
.week-problems-days button:first-child .week-problems-weekday { font-size:11px; }
.week-problems-icons { display:flex; align-items:center; justify-content:center; height:10px; margin-top:2px; }
.week-problems-glyph { display:inline-flex; align-items:center; position:relative; }
.week-problems-glyph .icon { width:10px; height:10px; }
.week-problems-missing { color:var(--label-secondary,#8e8e93); }
.week-problems-missing small { font-size:8px; line-height:10px; margin-left:1px; }
.week-problems-empty { color:var(--label-secondary,#8e8e93); }
@media (prefers-reduced-motion:reduce) {
  .week-problems-focus,.week-problems-lens { transition:none; }
}

.week-problems-legend { position:absolute; top:12px; left:5px; width:12px; height:var(--week-plot-height,29px); pointer-events:none; }
.week-problems-row-icon { position:absolute; left:0; width:10px; height:10px; }
.week-problems-row-icon .icon { width:10px; height:10px; }

/* Shared comparison hours make the fitted height-wind block readable. */
.horizontal-altitude-hour { position:absolute; top:2px; left:50%; transform:translateX(-50%); font-size:9px; line-height:10px; font-weight:600; color:var(--label-secondary,#ffffff88); }
.horizontal-forecast[data-span="day"] [data-metric="altitude-180"] .horizontal-hour-cell { padding-top:12px; }


/* Hourly temperatures travel between the weather pair and the expanded curve. */
.horizontal-forecast[data-span="hourly"] { position:relative; }
.horizontal-forecast[data-span="hourly"] .horizontal-weather-group { gap:3px; height:33px; }
.horizontal-forecast[data-span="hourly"] .horizontal-weather-group > span { flex-shrink:0; }
.horizontal-forecast[data-span="hourly"][data-view="details"][data-temperature-plot="true"] .horizontal-weather-group .horizontal-group-second { display:flex; visibility:hidden; }
.horizontal-forecast[data-temperature-moving="true"] .horizontal-weather-group .horizontal-group-second,
.horizontal-forecast[data-temperature-moving="true"] [data-metric="temperature"] .horizontal-series-svg text[data-hour] { visibility:hidden !important; }
.horizontal-temperature-motion { position:absolute; inset:0; pointer-events:none; z-index:4; }
.horizontal-temperature-ghost { position:absolute; display:flex; align-items:center; justify-content:center; white-space:nowrap; line-height:1; transform-origin:0 0; }

/* Tighten numeric captions while preserving compass and control text. */
.value, .time-cell, .wind-speed, .gust-value, .altitude-speed,
.wind-curve-number, .wind-curve-zero-label,
.horizontal-wind-number, .horizontal-gust-number,
.horizontal-detail-number, .horizontal-detail-zero-label,
.horizontal-altitude-label > span:last-child,
.horizontal-time-group .horizontal-group-second,
.horizontal-altitude-hour, .horizontal-sun-label,
.horizontal-temperature-ghost { letter-spacing:var(--numeric-letter-spacing); }

/* Optional small gray headings describe their graphs. */
.chart-label-experiment { display:flex; align-items:center; gap:12px; padding:8px var(--side-padding) 0; color:var(--label-secondary,#ffffff66); font-size:11px; }
.chart-label-experiment[hidden] { display:none; }
.chart-label-experiment button { padding:3px 0; border:0; border-bottom:1px solid transparent; background:none; color:inherit; font:inherit; }
.chart-label-experiment button[aria-pressed="true"] { color:var(--label-secondary,#ffffffdb); border-bottom-color:#ffffff80; }
.horizontal-chart-title { display:none; position:sticky; left:calc(var(--legend-width,44px) + var(--chart-left-gutter,0px)); width:max-content; max-width:var(--chart-title-width); height:16px; margin:8px 0 0 var(--legend-width,44px); align-items:center; gap:5px; color:var(--label-secondary,#ffffff70); font-family:system-ui; font-size:11px; line-height:14px; font-weight:400; white-space:nowrap; z-index:1; }
/* Match the hourly curves' visible inset within their first hour cell. */
.horizontal-forecast[data-span="hourly"] .horizontal-chart-title { padding-left:4px; }
.horizontal-chart-title .icon { width:12px; height:12px; }
.horizontal-chart-title > span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.horizontal-forecast[data-chart-labels="titles"] .horizontal-chart-title { display:flex; }
/* Preserve the same 2 px reduction where a row supplies the gap itself. */
.horizontal-forecast[data-chart-labels="titles"] .horizontal-chart-title + .horizontal-metric-row[data-near-ceiling="true"] { margin-top:2px; }
.horizontal-forecast[data-chart-labels="titles"] .horizontal-chart-title + .horizontal-metric-row[data-metric="altitude-180"] { margin-top:8px; }
/* Content gutters scroll with the timeline; no fixed sidebar is restored. */
.horizontal-forecast[data-chart-labels="titles"] { width:calc(var(--timeline-width) + var(--chart-left-gutter) + var(--chart-right-gutter)); padding:0 var(--chart-right-gutter) 0 var(--chart-left-gutter); }
.horizontal-forecast[data-chart-labels="titles"][data-span="day"] { width:100%; }

.horizontal-forecast[data-chart-labels="titles"] .horizontal-row-label { display:none; }
.horizontal-forecast[data-chart-labels="titles"] .day-problem-peak-icon { display:none; }



/* Seven fitted Daily Problems cards form a separate vertical week experiment. */
.week-cards { display:grid; gap:12px; margin:0 12px; min-width:0; }
.week-cards[hidden], .day-picker[hidden], .forecast-views[hidden] { display:none; }
#daily-view:is([data-orientation="week"],[data-orientation="cards"]) .table-wrap { margin-top:18px; }
.week-daily-card { min-width:0; border:1px solid #ffffff0d; border-radius:20px; background:#ffffff05; padding:12px 0 10px; overflow:clip; }
.week-card-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:0 12px; margin-bottom:10px; }
.week-card-heading h2 { margin:0; font-size:14px; line-height:18px; font-weight:600; }
.week-card-heading > span { color:var(--label-secondary,#ffffff80); font-size:12px; line-height:18px; }
.week-card-chart { min-width:0; width:100%; overflow:hidden; }
.week-card-empty { margin:8px 12px; color:var(--label-secondary,#ffffff80); font-size:12px; }


/* Native scroll snapping keeps the same Daily cards in a horizontal carousel. */
.week-cards[data-layout="slider"] { display:flex; align-items:flex-start; gap:12px; margin:0; padding:0 12px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:12px; scrollbar-width:none; height:var(--week-slider-height,auto); transition:height 200ms ease; }
.week-cards[data-layout="slider"]::-webkit-scrollbar { display:none; }
.week-cards[data-layout="slider"] .week-daily-card { flex:0 0 calc(100% - 16px); scroll-snap-align:start; scroll-snap-stop:always; }
.week-cards[data-layout="slider"]::after { content:""; flex:0 0 4px; }
.week-cards[data-layout="slider"]:focus-visible { outline:2px solid var(--safe); outline-offset:-2px; }
.week-card-pages { display:flex; justify-content:center; margin-top:8px; }
.week-card-pages[hidden] { display:none; }
.week-card-pages button { display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; background:none; }
.week-card-pages button span { width:6px; height:6px; border-radius:999px; background:#ffffff40; transition:width 180ms ease,background 180ms ease; }
.week-card-pages button[aria-current="true"] span { width:18px; background:#ffffffcc; }
@media (prefers-reduced-motion:reduce) {
  .week-cards[data-layout="slider"], .week-card-pages button span { transition:none; }
}


/* Auto removes the sidebar and adds headings only when Details is open. */
.summary-variants[hidden] { display:none; }
.horizontal-forecast[data-chart-labels="auto"] { width:calc(var(--timeline-width) + var(--chart-left-gutter) + var(--chart-right-gutter)); padding:0 var(--chart-right-gutter) 0 var(--chart-left-gutter); }
.horizontal-forecast[data-chart-labels="auto"][data-span="day"] { width:100%; }
.horizontal-forecast[data-chart-labels="auto"] .horizontal-row-label,
.horizontal-forecast[data-chart-labels="auto"] .day-problem-peak-icon { display:none; }
.horizontal-forecast[data-chart-labels="auto"][data-view="details"] .horizontal-chart-title { display:flex; }
.horizontal-forecast[data-chart-labels="auto"][data-view="details"] .horizontal-chart-title + .horizontal-metric-row[data-near-ceiling="true"] { margin-top:2px; }
.horizontal-forecast[data-chart-labels="auto"][data-view="details"] .horizontal-chart-title + .horizontal-metric-row[data-metric="altitude-180"] { margin-top:8px; }
.horizontal-forecast[data-chart-labels="auto"][data-view="summary"] .problem-curve-number[data-risk="false"] { visibility:hidden; }
.horizontal-forecast[data-auto-measuring="true"] .problem-curve-number[data-risk="false"],
.horizontal-forecast[data-auto-measuring="true"] .horizontal-scalar-value { visibility:visible !important; }


/* Snapshot rows move on the compositor; live grid/slider sizes commit once. */
/* Residual chrome also transitions instead of swapping underneath the rows. */
@media (prefers-reduced-motion:reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation:none !important; }
}

/* Moving temperature snapshots need a local origin in fitted Daily cards too. */
.horizontal-forecast { position:relative; }


/* Only decorative card shells scale; graph and text units keep their size. */
.week-daily-card { position:relative; }
.week-card-motion-frame { position:absolute; inset:-1px; border:1px solid #ffffff0d; border-radius:20px; background:#ffffff05; pointer-events:none; z-index:0; }
.week-card-heading, .week-card-chart { position:relative; z-index:1; }
/* Keep conditions anchored while only their temperature moves to its curve. */
.horizontal-forecast[data-view="details"][data-temperature-plot="true"] .horizontal-weather-group .horizontal-group-second { display:flex; visibility:hidden; }


/* Collapsed fitted Auto days share Compact's line-start identifiers. */
.horizontal-forecast[data-chart-labels="auto"][data-span="day"][data-view="summary"] .day-problem-peak-icon { display:block; }


/* One Vertical Bars table widens; its values never move into a second pane. */
#forecast-table[data-vertical-bars="true"] { width:calc(var(--vertical-bars-width) + 36px); padding:0 16px 0 20px; }
#forecast-table[data-vertical-bars="true"] :is(.forecast-line,.forecast-row,.forecast-header,.forecast-event) { width:var(--vertical-bars-width); }
#forecast-table[data-vertical-bars="true"] [data-v-column] { width:var(--v-full-width); margin-left:var(--v-full-margin); }
#forecast-table[data-vertical-bars="true"][data-view="summary"] [data-v-column] { width:var(--v-summary-width); margin-left:var(--v-summary-margin); }
#forecast-table[data-vertical-bars="true"] .vertical-bars-unavailable-column,
#forecast-table[data-vertical-bars="true"][data-view="summary"] .vertical-bars-extra-column { display:none; }
#forecast-table[data-vertical-bars="true"] .vertical-bars-scalar .value { font-size:calc(var(--numeric-font-size) - 2px); }
#forecast-table[data-vertical-bars="true"] .risk-badge.percent-value > .value-percent,
.forecast-motion-copy.risk-badge.percent-value[data-vertical-risk="true"] > .value-percent,
.forecast-motion-copy .risk-badge.percent-value[data-vertical-risk="true"] > .value-percent { display:none; }
#forecast-table[data-vertical-bars="true"][data-view="summary"] .vertical-bars-scalar { padding-left:0; justify-content:center; }
#forecast-table[data-vertical-bars="true"][data-view="summary"] .vertical-bars-scalar .value[data-vertical-risk="false"] { visibility:hidden; }
#forecast-table[data-vertical-bars="true"][data-view="summary"] .wind-cell > :is(.wind-bearing,.direction) { display:none; }
#forecast-table[data-vertical-bars="true"][data-view="summary"] .wind-speed { margin-left:0; }
#forecast-table[data-vertical-bars="true"][data-view="summary"] .precipitation-cell .amount { width:100%; justify-content:center; }
#forecast-table[data-vertical-bars="true"][data-view="summary"] .precipitation-cell .probability { display:none; }
#forecast-table[data-vertical-bars="true"] :is(.status-cell,.time-cell) { position:sticky; z-index:5; background:var(--background); }
#forecast-table[data-vertical-bars="true"] .status-cell { left:20px; }
#forecast-table[data-vertical-bars="true"] .time-cell { left:44px; box-shadow:6px 0 8px -5px #000; }
#forecast-table[data-vertical-bars="true"] .status-cell::before { content:""; position:absolute; left:-20px; top:0; bottom:0; width:20px; background:var(--background); }
#forecast-table[data-vertical-bars="true"] .forecast-line:has(> .vertical-bars-row[data-unsafe="true"]) { background-image:repeating-linear-gradient(135deg,rgba(255,50,99,.12) 0 1px,transparent 1px 5.333333px); }
#forecast-table[data-vertical-bars="true"] .vertical-bars-row[data-unsafe="true"] :is(.status-cell,.time-cell) { background-image:repeating-linear-gradient(135deg,rgba(255,50,99,.12) 0 1px,transparent 1px 5.333333px); }
#table-scroll:has(> [data-vertical-bars="true"]) { scroll-snap-type:none; }

#forecast-table[data-vertical-bars="true"] .forecast-event > .sun-event { width:100%; }

/* Keep controls responsive through every native snapshot layer. */
/* Every surface shares the same layout clock; newly inserted titles follow it. */
@keyframes forecast-surface-in { from { opacity:0; } to { opacity:1; } }
@keyframes forecast-surface-out { from { opacity:1; } to { opacity:0; } }
@keyframes forecast-caption-in { from { opacity:0; } to { opacity:1; } }
.vertical-bars-motion-background { position:absolute; inset:0; pointer-events:none; z-index:0; }
#forecast-table[data-vertical-bars="true"] .forecast-line { position:relative; }

/* The live forecast uses Web Animations: layout commits once, then only
   compositor transforms/opacity run. Copies exist solely for exiting content. */
html[data-forecast-motion="compositor"] .horizontal-details-reveal,
html[data-forecast-motion="compositor"] .week-cards[data-layout="slider"] { transition:none !important; }
html[data-forecast-motion="compositor"] .week-daily-card:has(.week-card-motion-frame) { background:transparent; border-color:transparent; }
html[data-forecast-motion="compositor"] .forecast-line:has(> .vertical-bars-motion-background) { background-image:none !important; }
.forecast-motion-overlay { position:fixed; inset:0; pointer-events:none; z-index:20; overflow:hidden; contain:layout paint; }
.forecast-motion-exit { position:absolute; left:0; top:0; transform-origin:0 0; pointer-events:none; }
.forecast-motion-copy { pointer-events:none; }

.forecast-plot-motion-unit { position:absolute; pointer-events:none; }
.horizontal-caption-motion { position:absolute; inset:0; pointer-events:none; z-index:4; }
.forecast-caption-ghost { position:absolute; overflow:hidden; pointer-events:none; }
html[data-forecast-motion="compositor"] .horizontal-row-track,
html[data-forecast-motion="compositor"] .week-card-chart,
html[data-forecast-motion="compositor"] .week-daily-card { overflow:visible; }

#forecast-table[data-vertical-bars="true"] { position:relative; }
.vertical-altitude-motion-unit { position:absolute; top:0; height:100%; pointer-events:none; overflow:hidden; }

.day-problem-peak-icon > .icon { display:block; width:100%; height:100%; }

#week-cards[hidden] { display:none !important; }

/* Problems keep the scalar grid at the right edge of the viewport. */
#forecast-table[data-vertical-bars="true"][data-view="summary"] [data-v-column="wind"] { margin-right:auto; }

#forecast-table[data-vertical-bars="true"][data-view="summary"] .vertical-altitude-motion-unit { display:none; }

/* Intrinsic headings retain glyph positions while the column widens. */
#forecast-table[data-vertical-bars="true"] .header-symbol { gap:0; }
.vertical-bars-heading { display:flex; flex-direction:column; align-items:inherit; gap:2px; width:max-content; }
/* Translate a cover: preserve hatch angle and density through the reveal. */
.vertical-bars-motion-background { right:auto; overflow:hidden; }
.vertical-bars-motion-cover { position:absolute; inset:0; background:var(--background); }
.vertical-bars-motion-overflow { position:absolute; left:0; top:0; height:1px; pointer-events:none; }
.vertical-bars-motion-exits { position:absolute; inset:0; pointer-events:none; }

/* Rank problem columns by duration; Details retains canonical order. */
#forecast-table[data-vertical-bars="true"] [data-v-column] { order:var(--v-full-order); }
#forecast-table[data-vertical-bars="true"][data-view="summary"] [data-v-column] { order:var(--v-summary-order); }


/* Match the left number gap for one- and two-digit vertical wind speeds. */
#forecast-table[data-vertical-bars="true"] .wind-bar { height:9px; top:10.5px; }
#forecast-table[data-vertical-bars="true"] .wind-speed { text-align:right; padding-right:7px; }


/* Vertical Problems: move a column legend to the empty hour before onset. */
#forecast-table[data-vertical-onset-icons="true"] :is(.problem-number-slot,.problem-legend .problem-slot) { position:relative; }
.vertical-problem-onset-icon { position:absolute; inset:0; display:flex; flex-direction:column; gap:3px; align-items:center; justify-content:center; pointer-events:none; visibility:hidden; }
.vertical-problem-onset-icon > .icon { display:block; width:14px; height:14px; }
.vertical-problem-onset-unit { font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif; font-size:9px; font-weight:800; line-height:11px; letter-spacing:0; color:inherit; }
.vertical-onset-header-icon { bottom:auto; height:30px; }
#forecast-table[data-vertical-onset-icons="true"][data-vertical-onset-view="summary"] .vertical-problem-onset-icon { visibility:visible; }
#forecast-table[data-vertical-onset-icons="true"][data-vertical-onset-view="summary"] .vertical-onset-column-header .header-symbol :is(.icon,small) { visibility:hidden; }
.vertical-problem-onset-curve-icon { visibility:hidden; }
#forecast-table[data-vertical-onset-icons="true"][data-vertical-onset-view="summary"] .vertical-problem-onset-curve-icon { visibility:visible; }
#forecast-table[data-vertical-onset-icons="true"][data-wind-display="curve4"] .problem-number-slot > .vertical-problem-onset-icon { visibility:hidden; }

/* Optional joined panels for the original Vertical / Values / Bars table. */
.problem-group-experiment { display:flex; flex-wrap:wrap; align-items:center; gap:0 16px; min-height:44px; margin:0 var(--side-padding); color:var(--label-secondary,#ffffffb8); font-size:12px; font-weight:500; }
.problem-group-experiment label { display:flex; align-items:center; gap:7px; min-height:44px; cursor:pointer; }
.problem-group-experiment[hidden] { display:none; }
.problem-group-experiment input { width:16px; height:16px; margin:0; accent-color:var(--safe); }
.problem-group-experiment label:has(input:disabled) { opacity:.45; cursor:default; }
.vertical-group-cell { isolation:isolate; }
/* Travelling panels share a row background plane below every live number. */
html[data-forecast-motion="compositor"] #forecast-table[data-vertical-bars="true"] .vertical-bars-row { isolation:isolate; }
html[data-forecast-motion="compositor"] #forecast-table[data-vertical-bars="true"] .vertical-group-cell { isolation:auto; }
.vertical-group-badge { box-sizing:border-box; position:absolute; left:1px; right:1px; top:-2px; bottom:-2px; background:linear-gradient(var(--group-fill),var(--group-fill)) var(--background); border:0; border-radius:0; z-index:-1; visibility:hidden; pointer-events:none; }
.vertical-group-badge[data-group-start="true"] { top:-2px; border-top-left-radius:999px; border-top-right-radius:999px; }
.vertical-group-badge[data-group-end="true"] { bottom:-2px; border-bottom-left-radius:999px; border-bottom-right-radius:999px; }
/* Extend only the opaque backing; no cross-hour strokes inside a joined group. */
.vertical-group-badge::after { content:""; box-sizing:border-box; position:absolute; inset:0 -2px; border:solid color-mix(in srgb,var(--background) 50%,transparent); border-width:0 2px; border-radius:inherit; pointer-events:none; }
.vertical-group-badge[data-group-start="true"]::after { top:-2px; border-top-width:2px; }
.vertical-group-badge[data-group-end="true"]::after { bottom:-2px; border-bottom-width:2px; }
#forecast-table[data-vertical-bars="true"][data-group-values="true"] .vertical-group-badge { visibility:visible; }
#forecast-table[data-vertical-bars="true"][data-group-values="true"][data-view="summary"] .vertical-group-badge[data-group-details-only="true"] { visibility:hidden; }
#forecast-table[data-vertical-bars="true"][data-view="details"] .vertical-group-badge { left:auto; right:-5px; width:var(--v-group-width); }
#forecast-table[data-vertical-bars="true"][data-view="details"] .vertical-group-badge[data-group-metric="temperature"] { left:-5px; right:auto; }
/* Keep intrinsic text widths for measurement; center within the existing panel. */
#forecast-table[data-vertical-bars="true"][data-group-values="true"][data-view="details"] .vertical-group-cell > .risk-badge { position:absolute; width:max-content; top:50%; left:calc(100% + 5px - var(--v-group-width) / 2); transform:translate(-50%,-50%); }
#forecast-table[data-vertical-bars="true"][data-group-values="true"][data-view="details"] .temperature-cell.vertical-group-cell > .risk-badge { left:calc(var(--v-group-width) / 2 - 5px); }
#forecast-table[data-vertical-bars="true"][data-group-values="true"] .vertical-group-cell .risk-badge::before { transition:opacity 420ms cubic-bezier(.25,.1,.25,1); }
#forecast-table[data-vertical-bars="true"][data-group-values="true"] .vertical-group-cell .risk-badge::before,
.forecast-grouped-value-copy::before { opacity:0 !important; }
#forecast-table[data-vertical-bars="true"][data-group-values="true"][data-view="summary"] .vertical-group-cell[data-group-details-only="true"] .risk-badge::before { opacity:1 !important; }
@media(prefers-reduced-motion:reduce) { #forecast-table .vertical-group-cell .risk-badge::before { transition:none; } }

/* Compact lanes affect Problems only; Details keeps its canonical flex columns. */
#forecast-table[data-vertical-bars="true"][data-free-placement="true"][data-view="summary"] :is(.vertical-bars-row,.vertical-bars-header) { position:relative; }
#forecast-table[data-vertical-bars="true"][data-free-placement="true"][data-view="summary"] .vertical-bars-scalar {
  position:absolute; top:0; right:var(--v-packed-right,0px); width:var(--v-packed-width,var(--v-summary-width)); margin-left:0;
}

/* Weekly Forecast: one inset grouped panel, using Apple Design Web list tokens. */
#weekly-forecast[hidden], #daily-view > .table-wrap[hidden], .day-heading[hidden] { display:none !important; }
#daily-view[data-orientation="weekly"] #table-scroll { display:none; }
.weekly-forecast {
  --weekly-font:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --weekly-label:#fff;
  --weekly-label-secondary:rgba(235,235,245,.6);
  --weekly-plot-width:clamp(88px,32vw,124.425px);
  --weekly-day-width:40px;
  --weekly-group-surface:#1a1b23;
  --weekly-group-separator:rgba(235,235,245,.10);
  --weekly-group-radius:16px;
  margin:16px 16px 0;
  padding:12px 16px 8px;
  border-radius:var(--weekly-group-radius);
  background-color:var(--weekly-group-surface);
  background-color:color-mix(in srgb,var(--background) 96%,white);
  overflow:hidden;
  font-family:var(--weekly-font);
}
.weekly-forecast-heading { margin:0; padding-bottom:10px; border-bottom:.5px solid var(--weekly-group-separator); }
.weekly-forecast-heading h2 { display:flex; align-items:center; gap:6px; margin:0; color:var(--weekly-label-secondary); font-size:13px; font-weight:500; line-height:18px; letter-spacing:0; text-transform:uppercase; }
.weekly-forecast-heading-icon { display:block; flex:0 0 14px; width:14px; height:14px; }
.weekly-forecast-heading p { display:none; }
.weekly-forecast-list { display:grid; grid-template-columns:var(--weekly-day-width) minmax(max-content,1fr) minmax(44px,var(--weekly-plot-width)); gap:var(--row-gap) 4px; }
.weekly-forecast-day {
  position:relative; display:grid; grid-column:1 / -1;
  grid-template-columns:var(--weekly-day-width) minmax(max-content,1fr) minmax(44px,var(--weekly-plot-width));
  grid-template-columns:subgrid;
  grid-template-rows:minmax(0,1fr); column-gap:inherit; align-items:center;
  width:100%; height:calc(var(--row-height) * 2 + var(--row-gap)); min-width:0;
  padding:0; border:0; border-radius:0; background:none;
  color:var(--weekly-label); text-align:left;
  -webkit-tap-highlight-color:transparent;
}
.weekly-forecast-day + .weekly-forecast-day::before { content:""; position:absolute; inset-inline:0; top:calc(var(--row-gap) / -2); height:.5px; background:var(--weekly-group-separator); pointer-events:none; }
.weekly-forecast-day:active { opacity:.65; }
.weekly-forecast-day:focus-visible { outline-offset:-2px; border-radius:8px; }
.weekly-forecast-card-heading,
.weekly-forecast-card-body { display:contents; }
.weekly-forecast-day-label { grid-area:1 / 1; display:flex; flex-direction:column; min-width:0; gap:1px; }
.weekly-forecast-day-title { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:17px; font-weight:500; line-height:22px; letter-spacing:-.43px; }
.weekly-forecast-day-date { font-size:12px; line-height:16px; font-weight:400; color:var(--weekly-label-secondary); white-space:nowrap; }
.weekly-forecast-value { grid-area:1 / 2; padding-inline-end:4px; display:grid; grid-template-columns:max-content max-content; justify-content:space-between; column-gap:6px; align-items:center; min-width:0; }
.weekly-forecast-risk-icons { grid-column:1; margin-inline-start:6px; display:flex; flex-wrap:nowrap; justify-content:flex-start; align-items:center; gap:8px; }
.weekly-forecast-problem-icon { display:block; flex:0 0 16px; width:16px; height:16px; }
.weekly-forecast-problem-icon .icon { display:block; width:16px; height:16px; }
.weekly-forecast-range { grid-column:2; font-family:var(--weekly-font); font-size:20px; font-weight:500; line-height:24px; font-variant-numeric:tabular-nums; letter-spacing:-.4px; color:var(--weekly-label); white-space:nowrap; }
.weekly-forecast-units { display:none; font-size:10px; line-height:12px; font-weight:600; letter-spacing:0; color:var(--weekly-label-secondary); white-space:nowrap; }
.weekly-forecast-plot { position:relative; transform:translateY(5px); grid-area:1 / 3; display:flex; justify-content:flex-end; align-items:center; min-width:0; width:100%; height:63px; }
.weekly-forecast-unsafe { position:absolute; inset:8px 0; overflow:hidden; pointer-events:none; }
.weekly-forecast-unsafe-band { position:absolute; top:0; bottom:0; background-image:repeating-linear-gradient(135deg,rgba(255,50,99,.12) 0 1px,transparent 1px 4.25px); }
.weekly-forecast-chart { position:relative; z-index:1; display:block; flex-shrink:0; width:100%; height:63px; overflow:visible; }
.weekly-forecast-chart :is(.weekly-wind-curve-line,.weekly-wind-zero,.weekly-risk-interval) { vector-effect:non-scaling-stroke; }
.weekly-forecast-empty { color:var(--weekly-label-secondary); font-size:15px; }
@media(max-width:359px) {
  .weekly-forecast { margin-inline:12px; padding-inline:12px; }
}
@media(prefers-contrast:more) { .weekly-forecast { --weekly-label-secondary:rgba(235,235,245,.8); --weekly-group-separator:rgba(235,235,245,.24); } }