.site-header { position: relative; z-index: var(--z-header); color: var(--ink); background: var(--header-bg); }
.site-header__inner { width: min(100% - (2 * var(--gutter)), var(--content)); min-height: 72px; margin-inline: auto; padding-block: var(--space-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-6); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); font-size: 1.15rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand__logo { flex: 0 0 auto; width: 52px; height: 52px; object-fit: contain; }
.brand__name { display: block; color: var(--ink); font-size: .88rem; font-weight: 800; letter-spacing: .065em; line-height: 1.02; text-transform: uppercase; }
.primary-nav { width: 100%; display: flex; gap: var(--space-6); overflow-x: auto; scrollbar-width: none; }
.primary-nav::-webkit-scrollbar { display: none; }
.primary-nav a, .primary-nav span { flex: 0 0 auto; padding-block: var(--space-2); color: var(--ink); font-size: .84rem; font-weight: 650; text-decoration: none; }
.page--forecast { --page-accent: #f6bd00; }
.page--radar { --page-accent: #1557e8; }
.page--overseas { --page-accent: #ff6b0b; }
.page--enso { --page-accent: #0b9fff; }
.page--visualisations { --page-accent: #173b6c; }
.primary-nav a:hover { color: var(--ink); box-shadow: inset 0 -3px 0 var(--line-strong); }
.primary-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--page-accent, var(--ink)); }
.primary-nav span[aria-disabled="true"] { cursor: default; opacity: .48; }
.forecast-tools { padding-block: var(--space-4); display: grid; gap: var(--space-3); }
.place-search { position: relative; order: 1; min-width: 0; padding-block: var(--space-2); display: grid; gap: var(--space-4); background: var(--surface); }
.warning-summary { order: 2; padding: var(--space-4); display: flex; align-items: flex-start; gap: var(--space-3); border-left: 5px solid var(--ink-soft); background: var(--surface-soft); }
.warning-summary__symbol { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: white; background: var(--ink-soft); font-weight: 900; }
.warning-summary h2 { margin-bottom: var(--space-2); font-size: 1.15rem; }
.warning-summary p { margin-bottom: var(--space-1); }
.warning-summary__local { font-weight: 800; }
.warning-summary__national { margin: var(--space-3) 0; }
.warning-summary__national p { margin-bottom: 0.2rem; }
.warning-summary.is-green { border-left-color: #16834b; background: #e7f5ec; }
.warning-summary.is-yellow { border-left-color: #e8c500; background: #fff8c7; }
.warning-summary.is-orange { border-left-color: #f28c00; background: #fff0d8; }
.warning-summary.is-red { border-left-color: #d7191c; background: #fde7e7; }
.warning-summary.is-green .warning-summary__symbol { background: #16834b; }
.warning-summary.is-yellow .warning-summary__symbol { color: var(--ink); background: #f6d900; }
.warning-summary.is-orange .warning-summary__symbol { background: #f28c00; }
.warning-summary.is-red .warning-summary__symbol { background: #d7191c; }
.search-form { width: 100%; }
.search-form label, .favorites h2 { display: block; margin-bottom: var(--space-2); font-size: .9rem; font-weight: 750; }
.search-form__controls { display: grid; gap: var(--space-2); }
.search-form input { min-width: 0; min-height: 48px; padding: .75rem 1rem; border: 1px solid #83949b; border-radius: var(--radius-sm); color: var(--ink); background: white; }
.search-results { position: absolute; z-index: var(--z-sticky); width: min(100% - (2 * var(--gutter)), 38rem); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.search-results button { width: 100%; padding: var(--space-3) var(--space-4); border: 0; border-bottom: 1px solid var(--line); background: var(--surface); text-align: left; cursor: pointer; }
.search-results button:hover, .search-results button:focus { background: var(--surface-soft); }
.form-status, .data-state, .unit-note, .map-caption { margin: var(--space-2) 0 0; color: var(--ink-soft); font-size: .875rem; }
.favorites { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.favorites h2 { width: auto; margin: 0 var(--space-2) 0 0; }
.favorites .chip { border-radius: var(--radius-sm); }
.weather-warning__level { margin-bottom: var(--space-1); color: var(--warning-ink); font-weight: 800; }
.current-weather { margin-bottom: var(--space-4); padding-block: clamp(1.25rem, 3vw, 2.25rem); background: var(--surface); box-shadow: var(--shadow); }
.current-weather__heading { display: flex; justify-content: space-between; gap: var(--space-4); }
.current-weather__heading h1 { margin-bottom: var(--space-1); font-size: clamp(1.45rem, 3vw, 2rem); }
.weather-symbol { width: clamp(3.5rem, 10vw, 5.5rem); aspect-ratio: 1; color: var(--blue); line-height: 1; }
.weather-icon { display: inline-block; width: 2.25em; height: 2.25em; color: var(--blue); background: currentColor; -webkit-mask: var(--weather-icon) center / contain no-repeat; mask: var(--weather-icon) center / contain no-repeat; vertical-align: middle; }
.weather-icon--clear { color: #f2b705; }
.weather-icon--night { color: #5267c9; }
.weather-icon--cloud { color: #718596; }
.weather-icon--fog { color: #6f8794; }
.weather-icon--partly { color: #f59e0b; }
.weather-icon--drizzle { color: #16a9c4; }
.weather-icon--rain { color: #1e7bea; }
.weather-icon--freezing { color: #3655b3; }
.weather-icon--storm { color: #f97316; }
.weather-icon--hail { color: #e53935; }
.weather-icon--snow { color: #19aee6; }
.weather-icon--current { width: 100%; height: 100%; }
.current-weather__summary { margin-block: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.temperature { margin: 0; line-height: .8; font-variant-numeric: tabular-nums; }
.temperature__value { font-size: clamp(4rem, 13vw, 7.5rem); font-weight: 300; letter-spacing: -.08em; }
.temperature__unit { font-size: clamp(1.5rem, 5vw, 3rem); vertical-align: top; }
.current-weather__text .condition { margin-bottom: var(--space-1); font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 750; }
.next-rain { padding: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); background: var(--blue-light); }
.next-rain p { margin-bottom: 0; }
.next-rain__value { font-size: 1.35rem; font-weight: 800; }
.forecast-scroller { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: var(--blue) var(--surface-soft); }
.hourly-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; background: var(--surface); font-variant-numeric: tabular-nums; }
.hourly-table th, .hourly-table td { min-width: 66px; padding: var(--space-3); border-bottom: 1px solid var(--line); text-align: center; }
.hourly-table thead th { border-top: 1px solid var(--line); color: var(--ink); background: white; font-size: .85rem; }
.hourly-table th:first-child { position: sticky; left: 0; z-index: var(--z-sticky); min-width: 105px; text-align: left; background: var(--surface-soft); }
.hourly-table thead th:first-child { color: var(--ink); background: white; }
.hourly-table tbody tr:first-child td { color: var(--ink); font-size: 1.35rem; }
.hourly-table .rain-row { color: var(--ink); font-weight: 750; }
.hourly-table .hourly-night, .hourly-table td.is-night { background: #f2f5f9; }
.hourly-table .hourly-day, .hourly-table td.is-day { background: white; }
.period-marker { display: block; margin-top: .1rem; color: var(--ink-soft); font-size: .62rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.wind-value { display: grid; place-items: center; min-height: 2rem; }
.wind-arrow { width: 1.55rem; height: 1.55rem; color: var(--blue); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(var(--wind-angle)); }
.hourly-table td small { display: block; margin-top: var(--space-1); white-space: nowrap; }
.daily-forecast { padding-top: var(--space-4); }
.day-grid { display: grid; grid-template-columns: repeat(7, minmax(128px, 1fr)); overflow-x: auto; background: var(--surface); }
.day-card { min-width: 128px; padding: var(--space-4); border-right: 1px solid var(--line); border-top: 4px solid transparent; text-align: center; }
.day-card.is-today { border-top-color: var(--ink); background: var(--surface-soft); }
.day-card:last-child { border-right: 0; }
.day-card p { margin-bottom: var(--space-2); }
.day-card__name { font-weight: 800; }
.day-card__icon { min-height: 3.8rem; margin: 0 auto var(--space-2); display: grid; place-items: center; }
.day-card__icon .weather-icon { width: 2.8rem; height: 2.8rem; }
.day-card strong { font-size: 1.55rem; }
.day-card small { margin-left: .25rem; color: var(--ink-soft); font-size: 1rem; }
.day-card__wind { margin-top: var(--space-3); display: flex; align-items: center; justify-content: center; gap: var(--space-1); color: var(--ink-soft); font-size: .78rem; white-space: nowrap; }
.day-card__wind .wind-value { min-height: auto; }
.day-card__wind .wind-arrow { width: 1.3rem; height: 1.3rem; color: var(--ink); }
.layer-tabs { margin-bottom: var(--space-4); }
.national-map-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); }
.weather-map { margin-top: var(--space-4); }
.weather-map h2, .weather-details h2, .data-freshness h2 { font-size: clamp(1.3rem, 2.5vw, 1.65rem); }
.map-placeholder { position: relative; min-height: 340px; overflow: hidden; border: 1px solid var(--line); background-color: #dce8df; background-image: linear-gradient(30deg, rgb(255 255 255 / 40%) 12%, transparent 12.5%, transparent 87%, rgb(255 255 255 / 40%) 87.5%), linear-gradient(150deg, rgb(255 255 255 / 40%) 12%, transparent 12.5%, transparent 87%, rgb(255 255 255 / 40%) 87.5%); background-size: 80px 140px; }
.map-canvas { position: absolute; inset: 0; z-index: var(--z-map); }
.national-marker-wrap { background: transparent; border: 0; }
.national-weather-marker { position: relative; display: grid; justify-items: center; min-width: 76px; color: var(--ink); text-align: center; filter: drop-shadow(0 2px 3px rgb(11 42 74 / 32%)); }
.national-weather-marker__reading { display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 70px; min-height: 40px; padding: 3px 5px; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: rgb(255 255 255 / 92%); }
.national-weather-marker .weather-icon { flex: 0 0 auto; width: 31px; height: 31px; padding: 0; }
.national-weather-marker strong { color: var(--ink); font-size: 1.08rem; font-weight: 900; line-height: 1; }
.national-weather-marker__place { max-width: 76px; margin-top: -1px; padding: 2px 5px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); color: white; background: rgb(23 59 108 / 88%); font-size: .64rem; font-weight: 800; line-height: 1.2; }
.overseas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)); gap: var(--space-3); }
.overseas-card { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-4); border: 1px solid var(--line); background: var(--surface); }
.overseas-card h3 { margin: 0; font-size: 1.05rem; }
.overseas-card p { margin: 0; }
.overseas-card__territory { color: var(--ink-soft); font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.overseas-card__weather { display: flex; align-items: center; gap: var(--space-1); }
.overseas-card__weather .weather-icon { width: 2.5rem; height: 2.5rem; }
.overseas-card__weather strong { color: var(--ink); font-size: 1.7rem; line-height: 1; }
.overseas-card__details { grid-column: 1 / -1; color: var(--ink-soft); font-size: .78rem; }
.weather-details .detail-panel { background: var(--surface); }
.detail-grid { margin: 0; padding: var(--space-6); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.detail-grid div { min-width: 0; }
.detail-grid dt, .source-list dt { color: var(--ink-soft); font-size: .85rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.detail-grid dd { margin: var(--space-1) 0 0; font-size: 1.25rem; font-weight: 750; }
.data-freshness { display: grid; gap: var(--space-6); }
.source-list { margin: 0; }
.source-list div { padding-block: var(--space-3); }
.source-list dd { margin: var(--space-1) 0 0; }
.status-dot { display: inline-block; width: .7rem; height: .7rem; margin-right: .25rem; border-radius: 50%; background: var(--ink-soft); box-shadow: 0 0 0 2px white, 0 0 0 3px var(--line); }
.status-dot--success { background: #16834b; }
.status-dot--error { background: #d7191c; }
.status-dot--pending { background: var(--ink-soft); }
.site-footer__main { display: none; }
.site-footer { color: var(--ink); background: var(--surface); }
.site-footer__main { padding-block: var(--space-6); }
.site-footer p { margin: 0; }
.site-footer a { color: var(--blue); font-size: .875rem; text-decoration-thickness: 1px; }
.footer-sources { padding-top: 0; }
.footer-sources h2 { font-size: 1.1rem; }
.footer-sources .eyebrow { margin-bottom: var(--space-1); }
.footer-sources .source-list div { padding-block: var(--space-2); }
.footer-sources .source-list dd { font-size: .875rem; }
.site-footer__legalbar { padding-block: var(--space-3); color: var(--ink-soft); background: white; border-top: 1px solid var(--line); font-size: .78rem; }
.site-footer__legalbar .shell { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.legal-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.legal-links a { color: var(--ink-soft); font-size: inherit; }

@media (min-width: 48rem) {
  .search-form__controls { grid-template-columns: minmax(16rem, 1fr) auto auto; }
  .forecast-tools { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .warning-summary { grid-column: 1; padding: var(--space-6); }
  .place-search { grid-column: 1; grid-row: auto; }
  .detail-grid { grid-template-columns: repeat(4, 1fr); }
  .data-freshness { grid-template-columns: minmax(14rem, .5fr) minmax(24rem, 1.5fr); }
  .map-placeholder { min-height: 440px; }
}
@media (min-width: 64rem) {
  .site-header__inner { flex-wrap: nowrap; }
  .primary-nav { width: auto; overflow: visible; }
  .primary-nav a, .primary-nav span { padding-block: var(--space-6); font-size: .94rem; }
  .current-weather__summary { flex-wrap: nowrap; }
}
@media print {
  .site-header, .place-search, .weather-map, .site-footer, .button, .text-button, .star-button { display: none !important; }
  body { background: white; }
  .current-weather { box-shadow: none; }
  .forecast-scroller { overflow: visible; }
}