/* UAE Nowcast v3: Weather and Sea panels, model picker and comparison.
   Builds on app.css (.section, .stats/.stat, .seg, .choice, .chart-legend, .footnote, .icon-btn). */

:root,
:root[data-theme="dark"] {
  /* condition symbols (multicolour) */
  --wx-sun: #ffc21a;
  --wx-moon: #e4e1f5;
  --wx-star: #ffd84d;
  --wx-cloud: #dfe4ec;
  --wx-cloud-back: #8e98a9;
  --wx-rain: #3ea6ff;
  --wx-bolt: #ffcc00;
  --wx-dust: #e8a54b;
  --wx-fog: #9aa3b2;
  --wx-snow: #a6dcff;
  /* data colours */
  --wx-tide: #3987e5;
  --wx-tide-low: #199e70;
  --wx-prob: #5aa9ff;
  /* model series (validated categorical slots 1–4, dark surface) */
  --wx-s1: #3987e5;
  --wx-s2: #d95926;
  --wx-s3: #199e70;
  --wx-s4: #c98500;
}

:root[data-theme="light"] {
  --wx-sun: #ffb300;
  --wx-moon: #8d93b8;
  --wx-star: #f5b400;
  --wx-cloud: #b7c0ce;
  --wx-cloud-back: #8d97a8;
  --wx-rain: #1f8bff;
  --wx-bolt: #f7b500;
  --wx-dust: #d68a2a;
  --wx-fog: #8d96a6;
  --wx-snow: #5fb6f0;
  --wx-tide: #2a78d6;
  --wx-tide-low: #1baf7a;
  --wx-prob: #1f74e0;
  --wx-s1: #2a78d6;
  --wx-s2: #eb6834;
  --wx-s3: #1baf7a;
  --wx-s4: #eda100;
}

.wx-icon { width: 24px; height: 24px; flex: none; overflow: visible; }

/* ---------- header ---------- */
.wx-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; margin: 2px -6px 2px 0; }
.wx-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* ---------- hero ---------- */
.wx-hero { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.wx-big {
  font-size: 58px; line-height: 1; font-weight: 300; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; white-space: nowrap; padding-bottom: 2px;
}
.wx-big small { font-size: 24px; font-weight: 300; letter-spacing: 0; color: var(--text-2); }
.wx-hero-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wx-cond { display: flex; align-items: center; gap: 7px; font-size: 19px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.wx-cond .wx-icon { width: 26px; height: 26px; }
.wx-sub { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 13.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.wx-ic-text { display: inline-flex; align-items: center; gap: 4px; }
.wx-ic-text svg { width: 14px; height: 14px; color: var(--text-3); }
.wx-hero-line { margin-top: 10px; font-size: 13.5px; color: var(--text-2); }
.wx-highlight { display: flex; align-items: center; gap: 7px; color: var(--text); font-weight: 550; }
.wx-highlight svg { width: 18px; height: 18px; flex: none; }
.wx-highlight.warn { color: var(--warn); }

/* sea verdicts */
.wx-verdicts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wx-verdict {
  --c: var(--bad);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent);
}
.wx-verdict[data-level="good"] { --c: var(--ok); }
.wx-verdict[data-level="fair"] { --c: var(--warn); }
.wx-verdict svg { width: 16px; height: 16px; }
.wx-reasons { margin-top: 7px; font-size: 12px; color: var(--text-2); }

/* ---------- hourly strip ---------- */
.wx-strip {
  display: flex; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain;
  margin: 0 -18px; padding: 0 18px 2px; scroll-padding: 0 18px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.wx-strip::-webkit-scrollbar { display: none; }
.wx-strip:focus-visible { outline-offset: -2px; }
.wx-hour {
  flex: none; width: 46px; padding: 8px 0 6px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.wx-hour.now { background: var(--surface-3); }
.wx-hour-t { font-size: 12px; font-weight: 500; color: var(--text-2); line-height: 1.2; }
.wx-hour.now .wx-hour-t { font-weight: 700; color: var(--text); }
.wx-hour .wx-icon { width: 24px; height: 24px; }
.wx-hour b { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.wx-prob { font-size: 11px; font-weight: 600; color: var(--wx-prob); line-height: 1.2; font-variant-numeric: tabular-nums; }
.wx-hour .wx-prob { min-height: 13px; }
.wx-arrow { width: 22px; height: 24px; display: grid; place-items: center; color: var(--text); }
.wx-arrow svg { width: 18px; height: 18px; stroke-width: 2.4; }
.wx-kn { font-size: 11px; color: var(--text-3); line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- day rows ---------- */
.wx-days { display: flex; flex-direction: column; }
.wx-day {
  display: grid; grid-template-columns: 50px 26px 34px 32px 1fr 32px; align-items: center; gap: 8px;
  padding: 9px 0; font-variant-numeric: tabular-nums; font-size: 14px;
}
.wx-day + .wx-day { border-top: 1px solid var(--border); }
.wx-day-name { font-weight: 550; }
.wx-day .wx-icon { width: 24px; height: 24px; justify-self: center; }
.wx-lo { color: var(--text-3); text-align: right; }
.wx-hi { text-align: right; font-weight: 550; }
.wx-range { position: relative; height: 6px; border-radius: 3px; background: var(--surface-3); }
.wx-range i { position: absolute; top: 0; bottom: 0; border-radius: 3px; min-width: 6px; }
.wx-sea-day { grid-template-columns: 50px 1fr auto 52px; }
.wx-state { color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-sea-day .wx-hi { min-width: 52px; }

/* ---------- tide ---------- */
.wx-tide-head { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 4px; }
.wx-tide-x, .wx-tide-now { display: flex; flex-direction: column; gap: 1px; font-variant-numeric: tabular-nums; }
.wx-tide-x span { font-size: 12px; color: var(--text-3); }
.wx-tide-x b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.wx-tide-x small, .wx-tide-now small { font-size: 11.5px; color: var(--text-3); }
.wx-tide-now { margin-left: auto; align-items: flex-end; display: grid; grid-template-columns: auto auto; column-gap: 4px; align-content: end; }
.wx-tide-now svg { width: 16px; height: 16px; stroke-width: 2.2; align-self: center; }
.wx-tide-now b { font-size: 15px; font-weight: 600; }
.wx-tide-now small { grid-column: 1 / -1; text-align: right; }

.wx-chart { margin-top: 6px; }
.wx-chart svg { width: 100%; height: auto; overflow: visible; }
.wx-chart .grid { stroke: var(--chart-grid); stroke-width: 1; }
.wx-chart .grid.strong { stroke: var(--border-strong); }
.wx-chart .axis-label { fill: var(--text-3); font-size: 10px; font-variant-numeric: tabular-nums; }
.wx-chart .axis-label.day { fill: var(--text-2); font-weight: 600; }
.wx-chart .now-line { stroke: var(--text); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .55; }
.wx-tide-line { fill: none; stroke: var(--wx-tide); stroke-width: 2; stroke-linejoin: round; }
.wx-tide-pt { stroke: var(--surface-solid); stroke-width: 2; }
.wx-tide-pt.high { fill: var(--wx-tide); }
.wx-tide-pt.low { fill: var(--wx-tide-low); }
.wx-tide-lbl { fill: var(--text-2); font-size: 10px; font-weight: 550; font-variant-numeric: tabular-nums; }
.wx-caption { margin-top: 6px; font-size: 11px; color: var(--text-3); }

/* ---------- footnote / states ---------- */
.wx-foot span { display: block; }
.wx-loading { display: grid; place-items: center; min-height: 110px; }
.wx-loading.tall { min-height: 220px; }
.wx-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--surface-3); border-top-color: var(--text-2);
  animation: spin .9s linear infinite;
}
.wx-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 12px 30px; }
.wx-empty-icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--text-3); }
.wx-empty-icon svg { width: 34px; height: 34px; stroke-width: 1.5; }
.wx-empty b { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.wx-empty span { font-size: 13px; color: var(--text-2); max-width: 280px; text-wrap: pretty; }
.wx-note { padding: 18px 2px; font-size: 13px; color: var(--text-2); }

/* ---------- advanced: models + comparison ---------- */
.wx-adv + .wx-adv { margin-top: 18px; }
.wx-adv-head { margin-bottom: 8px; }
.wx-model b { flex-wrap: wrap; }
.wx-seg { margin-bottom: 10px; }
.wx-compare { margin-top: 4px; }
.wx-line { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; opacity: .85; }
.wx-line.sel { stroke-width: 2.8; opacity: 1; }
.wx-legend { flex-wrap: wrap; gap: 6px 14px; }
.wx-legend span { display: inline-flex; align-items: center; white-space: nowrap; }
.wx-legend i { width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.wx-legend .sel { color: var(--text); font-weight: 600; }
.wx-legend .sel i { height: 4px; }

@media (max-width: 860px) {
  .wx-big { font-size: 54px; }
  .wx-cond { font-size: 18px; }
}