/* ============================================================
   TravlFun · weather.css · v1.0 · © Luxa Grid LLC
   Composition for weather.html (wx- prefix). Loads after
   search.css and the design system.
   ============================================================ */

:root {
  --wxc-hi: #FF6B5E;   /* highs line — validated vs light surface */
  --wxc-lo: #176BFF;   /* lows line */
  --wxc-rain: #12B8A6; /* rain bars (sequential single hue) */
}
@media (prefers-color-scheme: dark) {
  :root { --wxc-hi: #E85D50; --wxc-lo: #4D8DFF; --wxc-rain: #2CCBB9; }
}
:root[data-theme="dark"] { --wxc-hi: #E85D50; --wxc-lo: #4D8DFF; --wxc-rain: #2CCBB9; }
:root[data-theme="light"] { --wxc-hi: #FF6B5E; --wxc-lo: #176BFF; --wxc-rain: #12B8A6; }

body { margin: 0; }

.wx-main { max-width: 1140px; margin-inline: auto; padding: 24px 24px 90px; display: flex; flex-direction: column; gap: 22px; }

/* Head */
.wx-head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.wx-head h1 { font: var(--tf-text-h1); margin: 0 0 2px; }
.wx-head .sub { font: var(--tf-text-body-s); color: var(--tf-ink-2); }
.wx-units { margin-left: auto; display: flex; background: var(--tf-surface-2); border-radius: var(--tf-r-pill); padding: 3px; }
.wx-units button { font: 600 12.5px var(--tf-font-display); color: var(--tf-ink-3); border: 0; background: none;
  cursor: pointer; border-radius: var(--tf-r-pill); padding: 7px 14px; }
.wx-units button.is-on { background: var(--tf-surface); color: var(--tf-ink); box-shadow: var(--tf-shadow-1); }

/* Sections */
.wx-sec .tf-card__body { padding: 22px; gap: 14px; }
.wx-sec h2 { font: var(--tf-text-h3); font-size: 18px; margin: 0; display: flex; align-items: center; gap: 9px; }
.wx-sec h2 svg { width: 18px; height: 18px; color: var(--tf-color-primary); flex: none; }
.wx-sec h2 .hint { margin-left: auto; font: 400 12px var(--tf-font-body); color: var(--tf-ink-3); }

/* Forecast strip */
.wx-cast { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
@media (max-width: 900px) { .wx-cast { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .wx-cast { grid-template-columns: repeat(2, 1fr); } }
.wx-day { border: 1px solid var(--tf-border); border-radius: 14px; padding: 12px 8px; text-align: center;
  display: grid; gap: 5px; justify-items: center; }
.wx-day.today { border-color: var(--tf-color-primary); background: var(--tf-color-primary-soft); }
.wx-day .d { font: 600 11px var(--tf-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--tf-ink-3); }
.wx-day svg { width: 26px; height: 26px; }
.wx-day .t { font: 700 15px var(--tf-font-display); font-variant-numeric: tabular-nums; }
.wx-day .t small { font: 500 12px var(--tf-font-body); color: var(--tf-ink-3); }
.wx-day .r { font: 500 11px var(--tf-font-body); color: var(--tf-ink-3); display: inline-flex; gap: 4px; align-items: center; }
.wx-day .r svg { width: 11px; height: 11px; color: var(--wxc-lo); }

/* Charts */
.wx-chart { position: relative; }
.wx-chart svg { width: 100%; height: auto; display: block; }
.wx-chart .grid line { stroke: var(--tf-border); stroke-width: 1; }
.wx-chart .axis { font: 500 10.5px Inter, sans-serif; fill: var(--tf-ink-3); }
.wx-chart .serieslabel { font: 600 11px Inter, sans-serif; }
.wx-legend { display: flex; gap: 16px; font: 500 12.5px var(--tf-font-body); color: var(--tf-ink-2); }
.wx-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.wx-tip { position: absolute; z-index: 20; pointer-events: none; display: none;
  background: var(--tf-raw-navy-700); color: #EAF3FB; border-radius: 10px; padding: 8px 11px;
  font: 500 12px var(--tf-font-body); box-shadow: var(--tf-shadow-2); white-space: nowrap; }
.wx-tip b { font-variant-numeric: tabular-nums; }
.wx-tip.is-on { display: block; }

/* Best months strip */
.wx-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; }
@media (max-width: 900px) { .wx-months { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 540px) { .wx-months { grid-template-columns: repeat(4, 1fr); } }
.wx-m { border-radius: 12px; padding: 10px 4px; text-align: center; display: grid; gap: 3px;
  border: 1.5px solid transparent; background: var(--tf-surface); box-shadow: var(--tf-shadow-1); cursor: pointer; }
.wx-m .m { font: 600 11px var(--tf-font-body); letter-spacing: .06em; color: var(--tf-ink-3); text-transform: uppercase; }
.wx-m .t { font: 600 13px var(--tf-font-display); font-variant-numeric: tabular-nums; }
.wx-m .lo { font: 500 11px var(--tf-font-body); color: var(--tf-ink-3); font-variant-numeric: tabular-nums; }
.wx-m--great { border-color: var(--tf-color-secondary); }
.wx-m--good { border-color: var(--tf-raw-blue-300); }
.wx-m--poor { opacity: .55; }
.wx-m .star { font-size: 10px; color: var(--tf-color-secondary-active); font-weight: 700; }
.wx-m.is-sel { outline: 3px solid var(--tf-color-primary); outline-offset: 1px; }

/* Month verdict panel */
.wx-verdict { display: flex; gap: 14px; align-items: flex-start; background: var(--tf-surface-2);
  border-radius: 14px; padding: 14px 16px; }
.wx-verdict svg { width: 20px; height: 20px; flex: none; color: var(--tf-color-secondary-active); margin-top: 2px; }
.wx-verdict .body { font: var(--tf-text-body-s); color: var(--tf-ink-2); }
.wx-verdict b { color: var(--tf-ink); }

/* Season cards */
.wx-seasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px) { .wx-seasons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wx-seasons { grid-template-columns: 1fr; } }
.wx-season { padding: 18px; display: flex; flex-direction: column; gap: 9px; }
.wx-season .name { font: 600 15px var(--tf-font-display); display: flex; align-items: center; gap: 8px; }
.wx-season .range { font: 500 11px var(--tf-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--tf-ink-3); }
.wx-season .stats { font: var(--tf-text-body-s); color: var(--tf-ink-2); font-variant-numeric: tabular-nums; }
.wx-season ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px;
  font: 400 12.5px/1.5 var(--tf-font-body); color: var(--tf-ink-2); }
.wx-season li { display: flex; gap: 8px; }
.wx-season li svg { width: 13px; height: 13px; flex: none; color: var(--tf-color-secondary-active); margin-top: 2px; }

@media (max-width: 639px) { .wx-main { padding: 16px 16px 70px; } }