/* SOHA Weather — uses the existing v1.2 terminal tokens and palette. */
.page--weather { display: none; overflow-y: auto; overflow-x: hidden; align-content: start; background: var(--color-bg); }
.page--weather.page--active { display: block; }
.weather-dashboard { width: min(100%, 1080px); margin: 0 auto; padding: var(--space-6) var(--space-8) var(--space-10); color: var(--color-text); }
.weather-dashboard *, .weather-dashboard *::before, .weather-dashboard *::after, .weather-market-modal *, .weather-market-modal *::before, .weather-market-modal *::after { box-sizing: border-box; }
.weather-dashboard button, .weather-market-modal button { font: inherit; }
.weather-mono, .weather-temp-value, .weather-strike-label, .weather-price, .weather-modal__sheet { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.weather-conditions-strip { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); margin-bottom: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.weather-condition-cell { min-height: 92px; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; justify-content: center; gap: var(--space-1); border-right: 1px solid var(--color-border-subtle); }
.weather-condition-cell:last-child { border-right: 0; }
.weather-condition-cell--dual { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
.weather-reading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); min-height: 132px; padding: var(--space-4) var(--space-5); align-content: start; }
.weather-reading + .weather-reading { border-left: 1px solid var(--color-border-subtle); }
.weather-reading__top { display: grid; gap: var(--space-1); min-width: 0; }
.weather-reading__top > span { color: var(--color-text-faint); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.weather-reading__value { align-self: center; color: var(--color-primary); font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; line-height: 1; letter-spacing: -.06em; }
.weather-reading--ow .weather-reading__value { color: #3d9fff; }
.weather-reading__detail { grid-column: 1 / -1; color: var(--color-text-muted); font-size: var(--text-xs); }
.weather-reading__conditions { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-4); color: var(--color-text-muted); font-size: var(--text-xs); flex-wrap: wrap; }
.weather-reading__conditions .wc-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.weather-reading__conditions .wc-icon { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; color: var(--color-text-muted); }
.weather-reading__conditions .wc-icon svg { width: 100%; height: 100%; }
.weather-reading__conditions .wc-value { color: var(--color-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.weather-reading__conditions .wc-sub { color: var(--color-text-faint); font-size: var(--text-2xs); }
.weather-reading--wethr .weather-reading__conditions .wc-icon { color: var(--color-primary); }
.weather-reading--ow .weather-reading__conditions .wc-icon { color: #3d9fff; }
.weather-reading__refresh { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, max-content); gap: var(--space-1) var(--space-3); color: var(--color-text-faint); font-size: var(--text-2xs); }
.weather-reading__refresh > span:last-child { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }
.weather-reading__refresh b { color: var(--color-text); font-weight: 600; }
.weather-refresh-bar { display: inline-flex; width: 58px; height: 4px; overflow: hidden; border-radius: var(--radius-full); background: var(--color-surface-3); }
.weather-refresh-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); transition: width 1s linear; }
.weather-reading--ow .weather-refresh-bar > i { background: #3d9fff; }
.weather-eyebrow, .weather-section-kicker, .weather-event-label { color: var(--color-text-faint); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.weather-condition-cell strong:not(.weather-temp-value) { font-size: var(--text-lg); color: var(--color-text); }
.weather-hilo-times { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--color-text-faint); font-size: var(--text-2xs); }
.weather-delta.is-positive { color: var(--color-up); }.weather-delta.is-negative { color: var(--color-down); }.weather-delta.is-muted { color: var(--color-text-muted); }
.weather-card { position: relative; margin-bottom: var(--space-5); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.weather-card__summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }.weather-card__title-group { display: grid; gap: var(--space-1); }.weather-card h2 { margin: 0; color: var(--color-text); font-size: var(--text-lg); font-weight: 600; letter-spacing: -.02em; }.weather-card__series { color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.weather-live-status { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 28px; padding: 0 var(--space-3); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-full); color: var(--color-text-muted); font: 500 var(--text-2xs) var(--font-mono); white-space: nowrap; }.weather-live-status i { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-up); box-shadow: 0 0 6px var(--color-up); }.weather-live-status.is-stale i { background: var(--color-down); box-shadow: none; }
.weather-event-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-subtle); }.weather-event-head > div { display: grid; gap: var(--space-1); min-width: 0; }.weather-event-head strong { overflow: hidden; color: var(--color-text); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }.weather-resolution { color: var(--color-text-muted); font: 500 var(--text-xs) var(--font-mono); text-align: right; }
.weather-event-tabs { display: flex; gap: var(--space-2); padding: var(--space-3) 0; }.weather-event-tab { min-height: 32px; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: transparent; color: var(--color-text-muted); font: 500 var(--text-xs) var(--font-mono); }.weather-event-tab[aria-selected="true"] { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-dim); }
.weather-chart-panel { position: relative; margin: var(--space-2) 0 var(--space-4); padding: var(--space-4); background: var(--color-surface-2); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); }.weather-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }.weather-chart-head h3 { margin: 0; color: var(--color-text); font-size: var(--text-sm); font-weight: 600; }.weather-chart-note { color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }.weather-chart { display: block; width: 100%; height: auto; min-height: 250px; border-radius: var(--radius-sm); background: var(--color-bg); touch-action: none; cursor: crosshair; }
.weather-chart-tooltip { position: absolute; z-index: 3; top: var(--space-8); width: 164px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: var(--shadow-md); color: var(--color-text); font: 500 var(--text-xs) / 1.5 var(--font-mono); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 100ms ease, transform 100ms ease; }.weather-chart-tooltip.is-visible { opacity: 1; transform: translateY(0); }.weather-chart-tooltip strong { display: block; padding-bottom: var(--space-1); margin-bottom: var(--space-1); border-bottom: 1px solid var(--color-border-subtle); }.weather-chart-tooltip span { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: var(--space-2); }.weather-chart-tooltip i { width: 7px; height: 7px; border-radius: var(--radius-full); }.weather-chart-tooltip b { font-weight: 600; }
.weather-legend { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }.weather-legend button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text-muted); font: 500 var(--text-xs) var(--font-mono); }.weather-legend button.is-hidden { opacity: .48; text-decoration: line-through; }.weather-legend i { width: 8px; height: 8px; border-radius: var(--radius-full); display: block; }
.weather-metar-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); color: var(--color-text-faint); font: 500 var(--text-xs) var(--font-mono); }
.weather-metar-key__hint { color: var(--color-text-muted); }
.weather-metar-key__item { display: inline-flex; align-items: center; gap: 6px; }
.weather-metar-key__item svg { display: block; }
.weather-metar-lists { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-4) 0 var(--space-2); }
.weather-metar-list { background: var(--color-surface-2); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.weather-metar-list__title { margin: 0 0 var(--space-3); color: var(--color-text-muted); font: 600 var(--text-xs) var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.weather-metar-list__body { display: grid; row-gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text); }
.weather-metar-row { display: grid; grid-template-columns: minmax(64px, 1fr) auto; align-items: baseline; gap: var(--space-3); }
.weather-metar-row__label { color: var(--color-text-muted); font-size: var(--text-xs); }
.weather-metar-row__value { color: var(--color-text); font-weight: 600; }
@media (max-width: 600px) { .weather-metar-lists { grid-template-columns: 1fr; gap: var(--space-2); }.weather-metar-list { padding: var(--space-3); } }
.weather-strike-list { display: grid; gap: var(--space-1); }.weather-strike-row { display: grid; grid-template-columns: minmax(122px, 1fr) minmax(215px, 1.35fr); gap: var(--space-3); align-items: center; width: 100%; min-height: 54px; padding: var(--space-1) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); text-align: left; }.weather-strike-row:hover, .weather-strike-row:focus-visible { border-color: var(--color-border); background: var(--color-surface-2); }.weather-strike-row.is-likely .weather-strike-label { color: var(--color-primary); }.weather-strike-label { font-size: var(--text-sm); }
.weather-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }.weather-price { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 var(--space-2); min-width: 0; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }.weather-price--yes { background: rgba(76, 175, 80, .08); }.weather-price--no { background: rgba(224, 82, 82, .08); }.weather-price__label { color: var(--color-text-muted); font-size: var(--text-2xs); text-transform: uppercase; }.weather-price__ask { color: var(--color-primary); font-size: 1rem; font-weight: 600; text-align: right; }.weather-price__bid { grid-column: 1 / -1; color: var(--color-text-muted); font-size: .75rem; }
.weather-empty { display: block; padding: var(--space-4); color: var(--color-text-muted); font: 500 var(--text-xs) var(--font-mono); text-align: center; }.weather-footer { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-2) 0; color: var(--color-text-faint); font: 500 var(--text-xs) var(--font-mono); }.weather-footer a { color: var(--color-text-muted); text-underline-offset: 3px; }

.weather-market-modal[hidden] { display: none; }.weather-market-modal { position: fixed; inset: 0; z-index: 1000; display: grid; overflow-y: auto; padding: var(--space-6); background: rgba(8, 6, 15, .72); backdrop-filter: blur(4px); opacity: 0; transition: opacity 200ms ease; }.weather-market-modal.is-open { opacity: 1; }.weather-modal__sheet { width: min(100%, 1120px); min-height: 100%; margin: auto; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-lg); animation: weather-sheet-in 250ms var(--ease) both; }.weather-modal__head { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--color-border-subtle); }.weather-modal__close { width: 34px; height: 34px; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text); font-size: 1.5rem; line-height: 1; }.weather-modal__head div { display: grid; gap: var(--space-1); min-width: 0; }.weather-modal__head strong { overflow: hidden; font-size: var(--text-base); text-overflow: ellipsis; white-space: nowrap; }.weather-modal__head span { color: var(--color-text-muted); font-size: var(--text-xs); }.weather-modal__prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-5); border-bottom: 1px solid var(--color-border-subtle); }.weather-modal-price { display: grid; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgba(76, 175, 80, .08); text-align: left; }.weather-modal-price--no { background: rgba(224, 82, 82, .08); }.weather-modal-price.is-active { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }.weather-modal-price > span { color: var(--color-text-muted); font-size: var(--text-xs); text-transform: uppercase; }.weather-modal-price > strong { color: var(--color-primary); font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1; }.weather-modal-price small { color: var(--color-text-muted); font-size: var(--text-xs); }.weather-modal__history { position: relative; padding: var(--space-5); border-bottom: 1px solid var(--color-border-subtle); }.weather-modal-tabs { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }.weather-modal-tabs button { min-height: 30px; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text-muted); font-size: var(--text-xs); }.weather-modal-tabs button.is-active { border-color: var(--color-primary); color: var(--color-primary); }.weather-modal-tabs span { margin-left: auto; color: var(--color-text-muted); font-size: var(--text-xs); }.weather-modal__history canvas { display: block; width: 100%; min-height: 220px; border-radius: var(--radius-sm); background: var(--color-surface-2); }.weather-modal__data { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-5); padding: var(--space-5); }.weather-modal__data h3 { margin: 0 0 var(--space-3); color: var(--color-text); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em; }.weather-modal__data h3 small { color: var(--color-text-muted); font-size: var(--text-2xs); font-weight: 400; }.weather-modal-loading { padding: var(--space-3); color: var(--color-text-muted); font-size: var(--text-xs); text-align: center; }.weather-orderbook-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }.weather-book-side { display: grid; gap: var(--space-1); }.weather-book-side > strong { padding-bottom: var(--space-1); color: var(--color-text-muted); font-size: var(--text-2xs); text-transform: uppercase; }.weather-book-side span, .weather-trades-table span { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); }.weather-book-side span b { color: var(--color-primary); }.weather-book-side span i { text-align: right; font-style: normal; }.weather-trades-table { display: grid; gap: var(--space-1); }.weather-trades-table span { grid-template-columns: 1.25fr .55fr .55fr .8fr .8fr; align-items: center; padding: var(--space-1) 0; border-bottom: 1px solid var(--color-border-subtle); }.weather-trades-table time, .weather-trades-table i, .weather-trades-table em, .weather-trades-table small { font-style: normal; }.weather-trades-table .is-yes { color: #4caf50; }.weather-trades-table .is-no { color: #e05252; }.weather-trades-table small { text-align: right; color: var(--color-text); }
body.weather-modal-open { overflow: hidden; }
@keyframes weather-sheet-in { from { transform: translateY(16px); } to { transform: translateY(0); } }

@media (max-width: 900px) { .page--weather { overflow-y: auto; }.weather-dashboard { padding: var(--space-4) var(--space-4) var(--space-8); }.weather-market-modal { padding: 0; }.weather-modal__sheet { width: 100%; min-height: 100%; border-radius: 0; } }
@media (max-width: 600px) { .weather-dashboard { padding: var(--space-3) var(--space-3) var(--space-6); }.weather-conditions-strip { grid-template-columns: 1fr 1fr; }.weather-condition-cell { min-height: 78px; padding: var(--space-3); }.weather-condition-cell:last-child { grid-column: 1 / -1; border-top: 1px solid var(--color-border-subtle); border-right: 0; }.weather-condition-cell--dual { grid-template-columns: 1fr; padding: 0; }.weather-reading { min-height: 120px; }.weather-reading + .weather-reading { border-top: 1px solid var(--color-border-subtle); border-left: 0; }.weather-reading__refresh { grid-template-columns: 1fr; }.weather-card { padding: var(--space-4); }.weather-card__summary { margin-bottom: var(--space-4); }.weather-live-status { min-height: 30px; padding: 0 var(--space-2); }.weather-event-head { align-items: flex-start; flex-direction: column; }.weather-resolution { text-align: left; }.weather-chart-panel { padding: var(--space-3); }.weather-chart { min-height: 220px; }.weather-chart-tooltip { top: 42px; left: 50% !important; transform: translate(-50%, 4px); }.weather-chart-tooltip.is-visible { transform: translate(-50%, 0); }.weather-strike-row { grid-template-columns: minmax(78px, .72fr) minmax(0, 1.28fr); gap: var(--space-2); padding: var(--space-1) var(--space-2); }.weather-price { padding: var(--space-1); }.weather-price__ask { font-size: .95rem; }.weather-modal__head, .weather-modal__prices, .weather-modal__history, .weather-modal__data { padding: var(--space-4); }.weather-modal__data { grid-template-columns: 1fr; gap: var(--space-5); }.weather-trades-table span { grid-template-columns: 1.2fr .5fr .5fr .7fr .7fr; font-size: var(--text-2xs); }.weather-modal-tabs span { display: none; } }