:root {
  --bg: #f4f5f6;
  --surface: #ffffff;
  --surface-2: #eef0f2;
  --surface-3: #e5e8ea;
  --text: #1d1f21;
  --muted: #687078;
  --border: #a8b0b7;
  --accent: #277455;
  --accent-2: #1c5c41;
  --sun: #e5a827;
  --rain: #3f91b4;
  --cloud: #7c8791;
  --storm: #8069ad;
  --hot: #d96c3b;
  --cold: #4f9db8;
  --danger: #ae3838;
  --warn: #a76500;
  --shadow: 0 18px 50px rgba(20,24,28,.08);
  --radius: 18px;
  --header-h: 72px;
  --max: 1260px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light dark;
}
html[data-resolved-theme="dark"] {
  --bg: #181a1b;
  --surface: #202224;
  --surface-2: #272a2d;
  --surface-3: #303337;
  --text: #f1f2f3;
  --muted: #aeb4ba;
  --border: #393d40;
  --accent: #76b58f;
  --accent-2: #9bceb0;
  --sun: #f2bd46;
  --rain: #69b2cf;
  --cloud: #a5adb5;
  --storm: #a995d1;
  --hot: #ed8e5a;
  --cold: #70bed8;
  --danger: #ff9c9c;
  --warn: #efc56f;
  --shadow: 0 18px 50px rgba(0,0,0,.24);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); scroll-behavior: smooth; }
body { margin: 0; min-width: 280px; background: var(--bg); color: var(--text); }
body.menu-open { overflow: hidden; }
button,input { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.skip-link { position:fixed;left:12px;top:8px;z-index:9999;padding:10px 14px;background:var(--text);color:var(--bg);border-radius:10px;transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.site-header { position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--border); }
.header-inner { max-width:var(--max);height:var(--header-h);margin:auto;padding:0 24px;display:grid;grid-template-columns:auto minmax(260px,1fr) auto auto;gap:20px;align-items:center; }
.brand { display:flex;align-items:center;gap:10px;font-size:1.15rem;font-weight:760;letter-spacing:-.02em; }
.brand-mark { display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--border);background:var(--surface);border-radius:10px;font-size:.93rem;box-shadow:var(--shadow); }
.desktop-nav { display:flex;gap:20px;font-size:.9rem;color:var(--muted); }
.desktop-nav a:hover { color:var(--text); }
.global-search { position:relative;width:100%;max-width:520px;justify-self:center; }
.search-box { display:flex;align-items:center;gap:9px;height:42px;padding:0 10px 0 13px;background:var(--surface);border:1px solid var(--border);border-radius:12px; }
.search-box:focus-within { border-color:color-mix(in srgb,var(--accent) 65%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent); }
.search-box input { min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--text); }
.search-box input::placeholder { color:var(--muted); }
kbd { font-size:.72rem;border:1px solid var(--border);background:var(--surface-2);border-radius:6px;padding:2px 6px;color:var(--muted); }
.search-results { position:absolute;left:0;right:0;top:calc(100% + 8px);max-height:min(420px,65vh);overflow:auto;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);z-index:130; }
.search-result { display:grid;grid-template-columns:1fr auto;gap:10px;width:100%;text-align:left;padding:11px 12px;border:0;background:transparent;border-radius:9px;cursor:pointer; }
.search-result:hover,.search-result[aria-selected="true"] { background:var(--surface-2); }
.search-result strong { display:block;font-size:.92rem; }
.search-result span { font-size:.78rem;color:var(--muted); }
.header-actions { display:flex;align-items:center;gap:10px; }
.theme-switcher { display:flex;padding:3px;border:1px solid var(--border);border-radius:10px;background:var(--surface); }
.theme-switcher button { border:0;background:transparent;min-width:32px;height:30px;border-radius:7px;cursor:pointer;font-size:.78rem; }
.theme-switcher button.is-active { background:var(--surface-3);font-weight:700; }
.menu-button { display:none;width:42px;height:42px;border:1px solid var(--border);border-radius:11px;background:var(--surface);padding:10px;cursor:pointer; }
.menu-button span { display:block;height:2px;background:var(--text);margin:4px 0;border-radius:99px; }
.mobile-menu { position:fixed;inset:var(--header-h) 0 0;z-index:90;background:var(--bg);overflow:hidden; }
.mobile-menu-inner { height:100%;overflow-y:auto;padding:18px 20px 40px;scrollbar-gutter:stable; }
.mobile-menu nav { max-width:720px;margin:0 auto; }
.mobile-menu details { border-bottom:1px solid var(--border); }
.mobile-menu summary { list-style:none;display:grid;grid-template-columns:1fr 34px;align-items:center;min-height:62px;font-weight:700;cursor:pointer; }
.mobile-menu summary::-webkit-details-marker { display:none; }
.disclosure { display:grid;place-items:center;width:34px;height:34px;transition:transform .18s; }
.mobile-menu details[open] .disclosure { transform:rotate(180deg); }
.mobile-links { display:grid;padding:0 0 14px; }
.mobile-links a { padding:10px 4px;color:var(--muted); }
.mobile-search-slot { margin:0 auto 16px;max-width:720px; }
.home-page,.weather-app { max-width:var(--max);margin:0 auto;padding:48px 24px 88px; }
.weather-app { max-width:1180px; }
.home-hero { max-width:820px;padding:24px 0 48px; }
.eyebrow { text-transform:uppercase;letter-spacing:.13em;font-size:.73rem;font-weight:760;color:var(--accent);margin:0 0 10px; }
.home-hero h1 { font-size:clamp(2.55rem,7vw,5.6rem);line-height:.95;letter-spacing:-.055em;margin:0;max-width:900px; }
.hero-copy { font-size:clamp(1rem,2.3vw,1.24rem);line-height:1.6;color:var(--muted);max-width:720px;margin:22px 0 0; }
.hero-search { max-width:640px;margin-top:28px; }
.hero-search .global-search { max-width:none; }
.hero-search .search-box { height:52px;border-radius:14px; }
.section-heading { display:flex;justify-content:space-between;gap:28px;align-items:end;margin-bottom:20px; }
.section-heading h2 { font-size:clamp(1.7rem,4vw,2.45rem);letter-spacing:-.035em;margin:0; }
.section-heading>p { color:var(--muted);max-width:480px;margin:0;line-height:1.55; }
.australia-layout { display:grid;grid-template-columns:minmax(0,1.45fr) minmax(290px,.55fr);gap:18px;align-items:start; }
.australia-map-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;min-height:520px;display:flex;flex-direction:column;box-shadow:var(--shadow);overflow:hidden; }
.australia-map { width:100%;height:auto;display:block;min-height:430px; }
.map-land { fill:var(--surface-2);stroke:color-mix(in srgb,var(--border) 75%,var(--muted));stroke-width:2.2;vector-effect:non-scaling-stroke; }
.map-city { cursor:pointer; }
.map-city .marker { fill:var(--surface);stroke-width:3.5; }
.map-city text { fill:var(--text);font-size:13px;font-weight:760;paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round; }
.map-city .temp { font-size:17px; }
.map-city:hover text { fill:var(--accent-2); }
.map-city:hover .marker { stroke-width:5; }
.map-legend { display:flex;justify-content:space-between;gap:14px;color:var(--muted);font-size:.78rem;border-top:1px solid var(--border);padding-top:11px; }
.legend-dot { display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:5px; }
.major-grid { display:grid;grid-template-columns:1fr;gap:9px;align-content:start; }
.city-card { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-height:72px;padding:12px 14px;border:1px solid var(--border);background:var(--surface);border-radius:14px;transition:transform .16s,border-color .16s; }
.city-card:hover { transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); }
.city-card .weather-icon { width:34px;height:34px; }
.city-card h3 { font-size:.92rem;margin:0 0 2px; }
.city-card p { font-size:.76rem;color:var(--muted);margin:0; }
.city-card .temperature { font-size:1.45rem;font-weight:760;letter-spacing:-.04em; }
.search-section { padding-top:70px; }
.search-callout { display:grid;grid-template-columns:1fr 1fr;gap:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px; }
.search-callout>div:last-child { border-left:1px solid var(--border);padding-left:26px; }
.search-callout p { color:var(--muted);line-height:1.55; }
.info-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-top:72px; }
.info-grid article { padding:26px;border-top:1px solid var(--border); }
.info-grid h2 { margin:0 0 10px;font-size:1.5rem; }
.info-grid p:last-child { color:var(--muted);line-height:1.65; }
.breadcrumbs { display:flex;gap:8px;flex-wrap:wrap;font-size:.8rem;color:var(--muted);margin-bottom:22px; }
.location-heading { display:flex;justify-content:space-between;gap:20px;align-items:start; }
.location-heading h1 { font-size:clamp(2.15rem,6vw,4.35rem);line-height:1;letter-spacing:-.052em;margin:0; }
.location-subtitle { font-size:1rem;color:var(--muted);margin:12px 0 0; }
.icon-button { width:44px;height:44px;border:1px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer;font-size:1.4rem; }
.view-tabs { display:flex;gap:2px;margin:28px 0 20px;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid var(--border);scrollbar-width:none;-ms-overflow-style:none; }
.view-tabs::-webkit-scrollbar { display:none;width:0;height:0; }
.view-tab { flex:0 0 auto;border:0;background:transparent;padding:11px 14px;color:var(--muted);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px; }
.view-tab.is-active { color:var(--text);border-bottom-color:var(--accent);font-weight:720; }
.weather-view { min-height:400px; }
.weather-loading { display:flex;align-items:center;gap:14px;padding:24px;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius); }
.weather-loading span { display:block;color:var(--muted);margin-top:3px; }
.loading-pulse { width:16px;height:16px;border-radius:50%;background:var(--accent);animation:pulse 1.1s infinite; }
@keyframes pulse { 50% { opacity:.3;transform:scale(.72); } }
.weather-summary { display:grid;grid-template-columns:minmax(320px,.95fr) minmax(360px,1.05fr);gap:16px;max-width:1030px; }
.now-card,.rain-card,.detail-card,.forecast-card,.notice-card,.hourly-section,.daily-section,.table-card,.radar-card,.warning-card,.observation-summary { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); }
.now-card { padding:24px; }
.now-top { display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:start; }
.current-weather-icon { width:72px;height:72px;align-self:center; }
.current-temp { font-size:clamp(3.8rem,10vw,6.7rem);line-height:.86;letter-spacing:-.075em;font-weight:760; }
.condition { font-size:1.08rem;margin:13px 0 4px;font-weight:650; }
.muted { color:var(--muted); }
.today-range { font-size:1.2rem;font-weight:680;text-align:right; }
.summary-side { display:grid;gap:12px; }
.rain-card { padding:20px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--rain) 10%,var(--surface)),var(--surface) 58%); }
.rain-card h2 { margin:0 0 7px;font-size:1.26rem; }
.rain-numbers { display:flex;flex-wrap:wrap;gap:14px;margin-top:14px; }
.rain-number { display:grid;gap:2px; }
.rain-number strong { font-size:1.08rem; }
.rain-number span { color:var(--muted);font-size:.72rem; }
.metric-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:10px; }
.detail-card { padding:15px; }
.detail-card span { display:block;font-size:.72rem;color:var(--muted);margin-bottom:6px; }
.detail-card strong { font-size:.93rem; }
.weather-icon { display:block;width:42px;height:42px;flex:0 0 auto; }
.icon-sun { color:var(--sun); }
.icon-rain { color:var(--rain); }
.icon-cloud { color:var(--cloud); }
.icon-storm { color:var(--storm); }
.hourly-section,.daily-section { margin-top:16px;padding:20px 22px;max-width:1030px; }
.hourly-section h2,.daily-section h2,.table-card h2,.radar-card h2,.observation-summary h2 { margin:0 0 14px;font-size:1.12rem; }
.hourly-strip { display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin;scrollbar-color:var(--border) transparent; }
.hour { flex:0 0 88px;display:grid;justify-items:center;gap:5px;padding:10px 8px;border-radius:12px;background:var(--surface-2);font-size:.8rem; }
.hour:first-child { background:color-mix(in srgb,var(--accent) 12%,var(--surface-2)); }
.hour .weather-icon { width:30px;height:30px; }
.hour span { color:var(--muted);font-size:.72rem; }
.hour strong { font-size:.98rem; }
.hour .rain-mm { color:var(--rain);font-size:.7rem;font-weight:700; }
.daily-list { display:grid;max-width:760px; }
.day-row { display:grid;grid-template-columns:minmax(105px,1.1fr) 38px minmax(90px,.8fr) 42px 42px;align-items:center;gap:10px;min-height:47px;border-bottom:1px solid var(--border);font-size:.9rem; }
.day-row:last-child { border-bottom:0; }
.day-row .weather-icon { width:29px;height:29px; }
.day-row .rain { color:var(--rain); }
.view-heading { display:flex;align-items:end;justify-content:space-between;gap:20px;margin:0 0 18px;max-width:1030px; }
.view-heading h2 { margin:0;font-size:1.45rem; }
.view-heading p { margin:4px 0 0;color:var(--muted);font-size:.86rem; }
.table-card { overflow:hidden;max-width:1030px; }
.table-scroll { overflow:auto;max-height:none; }
.weather-table { width:100%;border-collapse:collapse;font-size:.82rem;min-width:780px; }
.weather-table th { position:sticky;top:0;background:var(--surface);z-index:1;text-align:left;color:var(--muted);font-size:.69rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700; }
.weather-table th,.weather-table td { padding:9px 12px;border-bottom:1px solid var(--border);white-space:nowrap; }
.weather-table tbody tr:hover { background:var(--surface-2); }
.weather-table .time-cell { font-weight:700; }
.weather-table .condition-cell { display:flex;align-items:center;gap:8px; }
.weather-table .condition-cell .weather-icon { width:27px;height:27px; }
.weather-table .rain-cell { color:var(--rain);font-weight:700; }
.forecast-days { display:grid;gap:16px; }
.forecast-day-title { font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:18px 0 8px; }
.observation-summary { padding:18px 20px;max-width:1030px;margin-bottom:14px; }
.observation-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:12px; }
.observation-stats div { display:grid;gap:4px; }
.observation-stats span { color:var(--muted);font-size:.72rem; }
.observation-stats strong { font-size:1.02rem; }
.radar-card { padding:20px;max-width:1030px; }
.radar-prototype { position:relative;min-height:460px;border-radius:14px;overflow:hidden;background:radial-gradient(circle at 48% 48%,color-mix(in srgb,var(--rain) 17%,transparent) 0 8%,transparent 9% 15%,color-mix(in srgb,var(--rain) 10%,transparent) 16% 23%,transparent 24%),linear-gradient(var(--surface-2),var(--surface-2));border:1px solid var(--border); }
.radar-prototype::before,.radar-prototype::after { content:"";position:absolute;inset:50% auto auto 50%;border:1px solid color-mix(in srgb,var(--rain) 45%,transparent);border-radius:50%;transform:translate(-50%,-50%); }
.radar-prototype::before { width:240px;height:240px; }
.radar-prototype::after { width:410px;height:410px; }
.radar-cross-x,.radar-cross-y { position:absolute;background:color-mix(in srgb,var(--border) 70%,transparent); }
.radar-cross-x { height:1px;left:8%;right:8%;top:50%; }
.radar-cross-y { width:1px;top:8%;bottom:8%;left:50%; }
.radar-pin { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:13px;height:13px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 5px color-mix(in srgb,var(--danger) 20%,transparent); }
.radar-rain { position:absolute;border-radius:50%;filter:blur(8px);opacity:.65;background:var(--rain); }
.radar-rain.one { width:110px;height:65px;left:28%;top:29%;transform:rotate(-18deg); }
.radar-rain.two { width:150px;height:75px;right:18%;bottom:24%;transform:rotate(24deg);background:color-mix(in srgb,var(--rain) 65%,var(--storm)); }
.radar-note { display:flex;justify-content:space-between;gap:12px;margin-top:12px;color:var(--muted);font-size:.78rem; }
.warning-list { display:grid;gap:12px;max-width:1030px; }
.warning-card { padding:18px 20px;border-left:4px solid var(--warn); }
.warning-card.none { border-left-color:var(--accent); }
.warning-card h3 { margin:0 0 7px;font-size:1.05rem; }
.warning-card p { margin:0;color:var(--muted);line-height:1.55; }
.notice-card { padding:18px 20px;max-width:1030px; }
.location-list { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:28px; }
.location-list-row { display:flex;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-size:.82rem; }
.location-list-row span { color:var(--muted); }
.site-footer { border-top:1px solid var(--border);max-width:var(--max);margin:0 auto;padding:26px 24px 50px;display:flex;justify-content:space-between;gap:30px;color:var(--muted);font-size:.78rem; }
.site-footer>div { display:grid;gap:4px; }
.site-footer p { max-width:620px;margin:0;text-align:right;line-height:1.5; }
.forecast-summary{margin-bottom:16px}.secondary-observation-stats{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.radar-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}.radar-toolbar button,.radar-toolbar select{border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:9px;padding:8px 11px}.radar-toolbar button{cursor:pointer;font-weight:700}.radar-toolbar label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.8rem}.radar-toolbar [data-radar-time]{margin-left:auto;font-weight:750}.radar-rain.one{transform:translateX(var(--radar-shift,0px)) rotate(-18deg)}.radar-rain.two{transform:translateX(calc(var(--radar-shift,0px) * -1)) rotate(24deg)}.radar-timeline{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-top:12px;color:var(--muted);font-size:.72rem}.radar-timeline input{width:100%}
.warning-banner{display:grid;gap:4px;max-width:1030px;margin-bottom:14px;padding:13px 16px;border:1px solid color-mix(in srgb,var(--warn) 45%,var(--border));border-left:4px solid var(--warn);border-radius:12px;background:color-mix(in srgb,var(--warn) 8%,var(--surface))}.warning-banner span{color:var(--muted);font-size:.82rem}.warning-meta{display:flex;justify-content:space-between;gap:12px;color:var(--warn);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:750;margin-bottom:8px}.warning-source{margin-top:12px;padding-top:10px;border-top:1px solid var(--border);color:var(--muted);font-size:.73rem}

@media (max-width: 1050px) {
  .header-inner { grid-template-columns:auto minmax(220px,1fr) auto; }
  .desktop-nav { display:none; }
  .menu-button { display:block; }
  .australia-layout { grid-template-columns:1fr; }
  .major-grid { grid-template-columns:repeat(4,1fr); }
  .city-card { grid-template-columns:auto 1fr; }
  .city-card .temperature { grid-column:2; }
  .weather-summary { grid-template-columns:1fr;max-width:900px; }
  .hourly-section,.daily-section,.table-card,.view-heading,.radar-card,.observation-summary,.warning-list { max-width:900px; }
  .location-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  :root { --header-h:64px;--radius:15px; }
  .header-inner { height:var(--header-h);grid-template-columns:auto 1fr auto;padding:0 16px;gap:10px; }
  .header-inner>.global-search { display:none; }
  .theme-switcher { display:none; }
  .menu-button { display:block;justify-self:end; }
  .home-page,.weather-app { padding:30px 16px 64px; }
  .home-hero { padding:16px 0 38px; }
  .section-heading { display:block; }
  .section-heading>p { margin-top:8px; }
  .australia-map-card { min-height:0;padding:10px; }
  .australia-map { min-height:0; }
  .major-grid { grid-template-columns:1fr 1fr; }
  .search-callout,.info-grid { grid-template-columns:1fr; }
  .search-callout>div:last-child { border-left:0;border-top:1px solid var(--border);padding-left:0;padding-top:20px; }
  .info-grid { padding-top:52px; }
  .location-heading h1 { font-size:clamp(2.15rem,11vw,3.5rem); }
  .view-tabs { margin-top:22px; }
  .view-tab { padding:10px 12px; }
  .weather-summary { grid-template-columns:1fr; }
  .now-card { padding:20px; }
  .now-top { grid-template-columns:62px 1fr auto;gap:12px; }
  .current-weather-icon { width:58px;height:58px; }
  .current-temp { font-size:clamp(3.3rem,19vw,5.3rem); }
  .metric-grid { grid-template-columns:1fr 1fr; }
  .hourly-section,.daily-section { padding:17px 16px; }
  .day-row { grid-template-columns:minmax(78px,1fr) 30px minmax(70px,.7fr) 34px 34px;gap:7px;font-size:.82rem; }
  .observation-stats { grid-template-columns:1fr 1fr; }
  .radar-prototype { min-height:360px; }
  .location-list { grid-template-columns:1fr; }
  .site-footer { display:block;padding:24px 16px 38px; }
  .site-footer p { text-align:left;margin-top:14px; }
}
@media (max-width: 480px) {
  .brand-mark { width:31px;height:31px; }
  .home-page,.weather-app { padding-left:12px;padding-right:12px; }
  .home-hero h1 { font-size:clamp(2.35rem,15vw,3.7rem); }
  .major-grid { grid-template-columns:1fr; }
  .city-card { grid-template-columns:auto 1fr auto; }
  .city-card .temperature { grid-column:auto; }
  .map-legend { display:block; }
  .map-legend span { display:block;margin-top:4px; }
  .location-heading { gap:10px; }
  .location-heading h1 { font-size:2.45rem; }
  .location-subtitle { font-size:.9rem; }
  .icon-button { width:40px;height:40px; }
  .now-top { grid-template-columns:54px 1fr auto; }
  .current-weather-icon { width:50px;height:50px; }
  .current-temp { font-size:3.6rem; }
  .today-range { font-size:1rem; }
  .rain-card { padding:18px; }
  .metric-grid { gap:8px; }
  .detail-card { padding:13px; }
  .hour { flex-basis:80px; }
  .day-row { grid-template-columns:minmax(72px,1fr) 28px minmax(58px,.7fr) 31px 31px;font-size:.77rem; }
  .weather-table th,.weather-table td { padding:8px 9px; }
  .radar-prototype { min-height:300px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important; }
}


/* Product-polish pass */
.weather-summary { align-items:start; }
.now-card { align-self:start; }
.daily-section { max-width:820px; margin-left:auto; margin-right:auto; width:100%; }
.daily-list { max-width:none; }
.hourly-strip { scrollbar-width:auto; scrollbar-color:var(--muted) transparent; padding-bottom:12px; }
.hourly-strip::-webkit-scrollbar { height:11px; }
.hourly-strip::-webkit-scrollbar-track { background:var(--surface-2); border-radius:999px; }
.hourly-strip::-webkit-scrollbar-thumb { background:var(--muted); border-radius:999px; border:2px solid var(--surface-2); }
.forecast-days,.forecast-days>section,.table-card,.table-scroll { min-width:0; max-width:100%; width:100%; }
.table-scroll { overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; }
.search-callout-single { grid-template-columns:minmax(0,760px); justify-content:center; text-align:center; }
.search-callout-single>div:last-child { border:0; padding:0; }

.state-heading { max-width:820px; margin-bottom:28px; }
.state-heading h1 { margin:0; font-size:clamp(2.3rem,6vw,4.5rem); letter-spacing:-.05em; }
.state-overview-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,.5fr); gap:18px; align-items:start; margin-bottom:48px; }
.state-map-card,.state-featured { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.state-map-card { padding:18px; min-width:0; }
.state-map-title { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:8px; }
.state-map-title h2,.state-featured h2 { margin:0; font-size:1.12rem; }
.state-map-title span { color:var(--muted); font-size:.76rem; }
.state-map { display:block; width:100%; height:auto; min-height:340px; }
.state-map-land { fill:var(--surface-2); stroke:var(--border); stroke-width:2; }
.state-map-place text { fill:var(--text); font-size:12px; font-weight:700; paint-order:stroke; stroke:var(--surface); stroke-width:3px; }
.state-map-place:hover text { fill:var(--accent-2); }
.state-featured { padding:18px; display:grid; gap:6px; }
.state-featured h2 { margin-bottom:6px; }
.state-featured-place { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); font-size:.82rem; }
.state-featured-place:last-child { border-bottom:0; }
.state-featured-place span { color:var(--muted); }
.state-featured-place:hover span { color:var(--accent-2); }
.state-all { margin-top:18px; }

@media (max-width:1050px) {
  .state-overview-grid { grid-template-columns:1fr; }
  .state-featured { grid-template-columns:repeat(3,1fr); }
  .state-featured h2 { grid-column:1/-1; }
}
@media (max-width:760px) {
  .header-inner { display:flex; align-items:center; }
  .header-actions { margin-left:auto; flex:0 0 auto; }
  .menu-button { margin-left:auto; }
  .weather-view,.forecast-days,.forecast-days>section { max-width:100%; min-width:0; overflow:visible; }
  .table-card { overflow:hidden; }
  .table-scroll { overflow-x:auto; }
  .state-featured { grid-template-columns:1fr 1fr; }
  .state-map { min-height:280px; }
}
@media (max-width:480px) {
  .state-featured { grid-template-columns:1fr; }
  .state-map-card { padding:12px; }
  .state-map { min-height:230px; }
}


/* Storm refinement pass */
.desktop-nav { align-items:center; }
.desktop-states { position:relative; }
.desktop-states>summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px; color:var(--muted); }
.desktop-states>summary::-webkit-details-marker { display:none; }
.desktop-states>summary:hover,.desktop-states[open]>summary { color:var(--text); }
.desktop-states-menu { position:absolute; top:calc(100% + 14px); right:0; width:250px; padding:8px; border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); z-index:30; display:grid; }
.desktop-states-menu a { padding:9px 10px; border-radius:8px; color:var(--text); font-size:.82rem; }
.desktop-states-menu a:hover { background:var(--surface-2); }

.daily-section { max-width:720px; margin:16px auto 0; }
.daily-list { max-width:610px; margin:0 auto; }
.day-row { grid-template-columns:110px 34px 150px 44px 44px; justify-content:center; }
.day-row .rain { white-space:nowrap; }

.state-map-land { vector-effect:non-scaling-stroke; }
.state-all .section-heading { align-items:end; }
.paged-location-list { min-height:548px; }
.location-pagination { display:flex; align-items:center; justify-content:center; gap:16px; margin:20px auto 0; }
.location-pagination button { border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:9px; padding:9px 13px; font:inherit; cursor:pointer; }
.location-pagination button:hover:not(:disabled) { background:var(--surface-2); }
.location-pagination button:disabled { opacity:.4; cursor:default; }
.location-pagination span { color:var(--muted); font-size:.8rem; min-width:90px; text-align:center; }

.home-page .section-heading>div:only-child { width:100%; }
.australia-overview .section-heading { margin-bottom:16px; }
.site-footer { justify-content:flex-start; }

@media (max-width:760px) {
  .daily-section { max-width:100%; }
  .daily-list { max-width:100%; }
  .day-row { grid-template-columns:minmax(80px,1fr) 30px minmax(88px,1.15fr) 36px 36px; gap:6px; }
  .paged-location-list { min-height:0; grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
  .paged-location-list { grid-template-columns:1fr; }
  .day-row { grid-template-columns:minmax(74px,1fr) 28px minmax(80px,1fr) 34px 34px; font-size:.82rem; }
}

/* Storm usability refinement */
.state-map-land { stroke-linejoin:round; stroke-linecap:round; shape-rendering:geometricPrecision; }
.daily-section { width:min(100%,640px); max-width:640px; justify-self:center; margin-left:auto !important; margin-right:auto !important; }
.daily-list { width:min(100%,530px); max-width:530px; }
.day-row { grid-template-columns:96px 30px 128px 38px 38px; column-gap:10px; }
.location-pagination { flex-wrap:wrap; }
.page-jump { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:.82rem; }
.page-jump input { width:68px; padding:8px 8px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font:inherit; text-align:center; }
.desktop-states>summary { line-height:1; }
.desktop-states>summary span { display:inline-flex; align-items:center; line-height:1; transform:translateY(-1px); }
.desktop-nav>a,.desktop-states>summary { min-height:38px; display:flex; align-items:center; }
.mobile-top-link { display:block; padding:12px 0; font-weight:700; }
.favourites-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; max-width:900px; }
.favourite-location-card { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.favourite-location-card div { display:grid; gap:3px; }
.favourite-location-card span { color:var(--muted); font-size:.8rem; }
.favourite-location-card:hover { border-color:var(--accent); }
.favourites-empty { max-width:600px; }
.live-radar-card { max-width:780px; }
.live-radar-card .radar-toolbar { display:flex; justify-content:space-between; gap:16px; align-items:center; flex-wrap:wrap; }
.bom-radar-wrap { margin-top:16px; display:grid; justify-items:center; gap:8px; }
.bom-radar-image { display:block; width:min(100%,640px); height:auto; border-radius:12px; background:#111; }
.radar-location-note { color:var(--muted); font-size:.78rem; }
.bom-source-link { align-self:end; font-size:.82rem; }
.breadcrumbs a:hover { color:var(--accent-2); }
@media(max-width:760px){
  .favourites-grid{grid-template-columns:1fr 1fr}
  .daily-section{width:100%;max-width:100%}
  .daily-list{width:100%;max-width:100%}
}
@media(max-width:480px){.favourites-grid{grid-template-columns:1fr}.location-pagination{gap:9px}.day-row{grid-template-columns:82px 28px 110px 34px 34px}}
.hourly-section { width:min(100%,1030px); margin-left:auto; margin-right:auto; }
.daily-section { width:min(100%,600px); max-width:600px; }
.daily-list { width:min(100%,500px); max-width:500px; }

/* Storm bug-fix pass */
.weather-summary { margin-left:auto; margin-right:auto; width:min(100%,1030px); }
.hourly-section { margin-left:auto !important; margin-right:auto !important; }
.view-heading,.observation-summary,.forecast-days,.table-card,.radar-card,.warning-list { margin-left:auto; margin-right:auto; }
.forecast-days { width:min(100%,1030px); }
.forecast-summary,.observation-summary { width:min(100%,1030px); }
.page-jump [data-page-total] { min-width:0; width:auto; text-align:left; margin-left:-2px; }
.page-jump { gap:6px; white-space:nowrap; }
html:not([data-resolved-theme="dark"]) .now-card,
html:not([data-resolved-theme="dark"]) .rain-card,
html:not([data-resolved-theme="dark"]) .detail-card,
html:not([data-resolved-theme="dark"]) .hourly-section,
html:not([data-resolved-theme="dark"]) .daily-section,
html:not([data-resolved-theme="dark"]) .table-card,
html:not([data-resolved-theme="dark"]) .observation-summary,
html:not([data-resolved-theme="dark"]) .state-map-card,
html:not([data-resolved-theme="dark"]) .state-featured,
html:not([data-resolved-theme="dark"]) .location-list-row { border-color:#bcc3c8; }
@media(max-width:760px){
  .weather-summary,.hourly-section,.forecast-days,.view-heading,.observation-summary,.table-card,.radar-card,.warning-list { width:100%; max-width:100%; }
}


/* Radar, warnings and map-weather refinement */
.button-link,
.inline-action-link {
  color:var(--accent-2);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  font-weight:700;
}
.button-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:9px 13px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  text-decoration:none;
}
.button-link:hover,.button-link:focus-visible {
  border-color:var(--accent);
  background:var(--surface-2);
}
.feed-status-note {
  margin-bottom:12px;
  padding:12px 14px;
  border:1px solid color-mix(in srgb,var(--warn) 50%,var(--border));
  border-radius:12px;
  background:color-mix(in srgb,var(--warn) 8%,var(--surface));
  line-height:1.45;
}
.warning-list a { color:var(--accent-2); }
.radar-layer-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:16px 16px 0;
}
.radar-layer {
  min-height:40px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  cursor:pointer;
}
.radar-layer:hover,.radar-layer:focus-visible { border-color:var(--accent); }
.radar-layer.is-active {
  background:color-mix(in srgb,var(--rain) 14%,var(--surface));
  border-color:var(--rain);
  color:var(--text);
}
.bom-radar-loop-wrap {
  width:100%;
  padding:16px;
}
.bom-radar-loop {
  display:block;
  width:100%;
  min-height:660px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2);
}
.radar-status {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  padding:0 16px 16px;
  color:var(--muted);
  font-size:.78rem;
}
.status-dot {
  width:8px;height:8px;border-radius:50%;
  background:var(--rain);
  margin-right:3px;
}
.map-weather-glyph { pointer-events:none; }
.map-weather-glyph.icon-sun { color:var(--sun); }
.map-weather-glyph.icon-rain { color:var(--rain); }
.map-weather-glyph.icon-cloud { color:var(--cloud); }
.map-weather-glyph.icon-storm { color:var(--storm); }
.map-weather-glyph.icon-fog { color:var(--cloud); }
.map-city:hover .map-weather-glyph,
.state-map-place:hover .map-weather-glyph { filter:brightness(1.15); }
.map-city .marker { display:none; }
.state-map-place text { stroke-width:4px; }
html:not([data-resolved-theme="dark"]) .now-card,
html:not([data-resolved-theme="dark"]) .rain-card,
html:not([data-resolved-theme="dark"]) .detail-card,
html:not([data-resolved-theme="dark"]) .hourly-section,
html:not([data-resolved-theme="dark"]) .daily-section,
html:not([data-resolved-theme="dark"]) .table-card,
html:not([data-resolved-theme="dark"]) .observation-summary,
html:not([data-resolved-theme="dark"]) .state-map-card,
html:not([data-resolved-theme="dark"]) .state-featured,
html:not([data-resolved-theme="dark"]) .location-list-row,
html:not([data-resolved-theme="dark"]) .city-card,
html:not([data-resolved-theme="dark"]) .warning-card,
html:not([data-resolved-theme="dark"]) .radar-card {
  border-color:#a8b0b7;
}
@media(max-width:760px){
  .warning-heading { align-items:flex-start; gap:12px; }
  .button-link { width:100%; }
  .bom-radar-loop { min-height:560px; }
}
@media(max-width:480px){
  .radar-layer-tabs { display:grid; grid-template-columns:1fr 1fr; }
  .bom-radar-loop { min-height:500px; }
}


/* Native radar, specialist weather and accessibility depth */
.native-radar-card { width:min(100%,860px); overflow:hidden; }
.radar-stage {
  position:relative;
  display:grid;
  place-items:center;
  min-height:520px;
  margin:14px 16px 0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:#111;
}
.radar-frame {
  display:block;
  max-width:100%;
  max-height:680px;
  width:auto;
  height:auto;
}
.radar-frame-loading {
  position:absolute;
  inset:auto 16px 16px;
  width:max-content;
  max-width:calc(100% - 32px);
  padding:8px 11px;
  border-radius:8px;
  background:rgba(0,0,0,.72);
  color:#fff;
  font-size:.78rem;
}
.radar-player {
  display:grid;
  grid-template-columns:auto auto auto minmax(120px,1fr) auto;
  align-items:center;
  gap:8px;
  padding:12px 16px;
}
.radar-control {
  min-height:40px;
  min-width:42px;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  cursor:pointer;
}
.radar-control:hover,.radar-control:focus-visible { border-color:var(--rain); }
.radar-scrubber { width:100%; accent-color:var(--rain); }
.radar-time { min-width:76px; text-align:right; color:var(--muted); font-size:.78rem; }
.state-map-place { cursor:default; }
.state-map-place .state-weather-marker,
.state-map-place .map-weather-glyph { pointer-events:none; cursor:default; }
.map-city .map-weather-glyph { pointer-events:none; }
.state-map-name-link:focus-visible text,
.map-city:focus-visible .map-weather-glyph { outline:none; filter:drop-shadow(0 0 3px var(--accent)); }
.state-map-name-link { cursor:pointer; }
:focus-visible {
  outline:3px solid color-mix(in srgb,var(--accent) 78%,white);
  outline-offset:3px;
}
.view-tab:focus-visible,.radar-layer:focus-visible,.radar-control:focus-visible {
  outline-offset:1px;
}
.warning-card .warning-meta { flex-wrap:wrap; }
@media(max-width:760px){
  .radar-stage { min-height:380px; margin:12px 12px 0; }
  .radar-player { grid-template-columns:auto auto auto 1fr; }
  .radar-time { grid-column:1/-1; text-align:left; min-width:0; }
  .specialist-grid { grid-template-columns:1fr; }
}
@media(max-width:480px){
  .radar-stage { min-height:300px; }
  .radar-player { grid-template-columns:repeat(3,auto); }
  .radar-scrubber { grid-column:1/-1; }
}
@media(prefers-reduced-motion:reduce){
  .radar-frame { transition:none!important; }
}

.warning-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; }
.warning-card[role="alert"] { border-left:4px solid var(--warn); }

.radar-control:disabled,.radar-scrubber:disabled { opacity:.48; cursor:not-allowed; }
.radar-frame[hidden] { display:none; }
.radar-frame-loading[hidden] { display:none; }
.state-weather-marker { pointer-events:none; }


/* Radar layer composition + state-map cleanup */
.state-map-place .icon-sun circle { fill:currentColor; stroke:none; }
.radar-stage {
  position:relative;
  width:min(100%,640px);
  aspect-ratio:1/1;
  min-height:0;
  margin:14px auto 0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface-2);
}
.radar-map-layer {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}
.radar-background { z-index:0; }
.radar-topography { z-index:1; }
.radar-frame { z-index:2; }
.radar-range { z-index:3; }
.radar-locations { z-index:4; }
.radar-frame-loading { z-index:5; }
.radar-player.is-static .radar-control,
.radar-player.is-static .radar-scrubber { opacity:.45; }


/* Storm-native BOM WMTS radar */
.wmts-radar-card { width:min(100%,980px); overflow:hidden; }
.storm-radar-map { width:100%; height:clamp(430px,58vw,650px); background:var(--surface-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.storm-radar-map .leaflet-container { font:inherit; }
.storm-radar-map .leaflet-control-zoom a { color:#1d1f21; }
.storm-radar-map .leaflet-control-attribution { font-size:10px; }
.storm-radar-map .leaflet-tile-pane { filter:none; }
.radar-load-error { min-height:360px; display:grid; place-items:center; color:var(--muted); }
.radar-legend { margin:0 16px 14px; padding:11px 12px; border:1px solid var(--border); border-radius:11px; background:var(--surface); }
.radar-legend-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:7px; font-size:.78rem; }
.radar-legend-head span { color:var(--muted); }
.radar-gradient { height:12px; border-radius:999px; background:linear-gradient(90deg,#f5f5ff,#7878ff,#1414ff,#00d8c3,#009690,#006666,#ffff00,#ffc800,#ff6400,#ff0000,#780000,#280000); }
.wmts-player { padding-top:14px; }
@media(max-width:760px){.storm-radar-map{height:480px}.wmts-player{grid-template-columns:auto auto auto 1fr}.radar-time{grid-column:1/-1;text-align:left}.radar-legend-head{align-items:flex-start;flex-direction:column;gap:2px}}
@media(max-width:480px){.storm-radar-map{height:400px}}


/* WMTS radar polish */
.wmts-radar-card .radar-layer-tabs {
  position:relative;
  z-index:2;
  padding:16px;
  margin:0;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.wmts-radar-card .storm-radar-map {
  width:calc(100% - 32px);
  margin:14px 16px 0;
  border:1px solid #a8b0b7;
  border-radius:12px;
  overflow:hidden;
  background:#eef0f2;
}
html[data-resolved-theme="dark"] .wmts-radar-card .storm-radar-map {
  background:#eef0f2;
  border-color:#a8b0b7;
}
html[data-resolved-theme="dark"] .storm-radar-map .leaflet-control-attribution,
html[data-resolved-theme="dark"] .storm-radar-map .leaflet-control-zoom a {
  color:#1d1f21;
}
@media(max-width:480px){
  .wmts-radar-card .storm-radar-map { width:calc(100% - 20px); margin:10px 10px 0; }
}


/* Radar overzoom and locality labels */
.radar-place-label {
  width:auto !important;
  height:auto !important;
  border:0 !important;
  background:transparent !important;
}
.radar-place-label span,
.radar-selected-label {
  display:inline-block;
  white-space:nowrap;
  padding:2px 5px;
  border-radius:5px;
  background:rgba(255,255,255,.88);
  color:#202224;
  font:600 11px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  text-shadow:none;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
}
.radar-selected-label {
  border:1px solid rgba(0,0,0,.2);
  font-weight:800;
}
.storm-radar-map .leaflet-tooltip.radar-selected-label::before {
  border-top-color:rgba(255,255,255,.88);
}


/* Clickable Storm locality targets over cartographic radar labels */
.radar-locality-hit {
  width:34px !important;
  height:34px !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  cursor:pointer;
}
.radar-locality-hit span {
  display:block;
  width:100%;
  height:100%;
  border:1px solid transparent;
  border-radius:50%;
}
.radar-locality-hit:hover span,
.radar-locality-hit:focus span {
  border-color:rgba(39,116,85,.6);
  background:rgba(255,255,255,.12);
}
.storm-radar-popup .leaflet-popup-content-wrapper {
  border:1px solid #a8b0b7;
  border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.2);
}
.storm-radar-popup .leaflet-popup-content {
  margin:12px 14px;
}
.radar-locality-popup {
  display:grid;
  gap:4px;
  min-width:150px;
  color:#1d1f21;
}
.radar-locality-popup strong { font-size:.95rem; }
.radar-locality-popup span { color:#687078; font-size:.76rem; }
.radar-locality-popup a {
  margin-top:5px;
  color:#1c5c41;
  font-weight:750;
  text-decoration:underline;
  text-underline-offset:3px;
}