:root {
  --ink: #092857;
  --blue: #0757bd;
  --muted: #63728c;
  --line: rgba(18, 62, 116, .16);
  --glass: rgba(255, 255, 255, .94);
  --shadow: 0 10px 30px rgba(7, 35, 72, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #d9e9f6; font-family: "Arial Narrow", "Roboto Condensed", Inter, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
button, select, input { font: 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; }

.weather-dashboard { width: 100%; min-height: 100vh; overflow: hidden; background: linear-gradient(#d7e9f7, #7eb5d6 58%, #2e724d); }
.site-header { position: relative; z-index: 1000; display: grid; grid-template-columns: auto minmax(200px, 290px) minmax(260px, 1fr) auto auto; align-items: center; gap: 12px; margin: 12px 14px 0; min-height: 58px; padding: 8px 14px; border: 1px solid rgba(255,255,255,.9); border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: var(--shadow); }
.brand { display: flex; align-items: center; gap: 8px; color: #0b4fa8; font-size: clamp(20px, 2vw, 31px); font-weight: 900; letter-spacing: -1.5px; white-space: nowrap; }
.brand small { font-size: .58em; letter-spacing: -.5px; }
.brand-sun { color: #f4a800; font-size: 1.35em; font-weight: 400; }
.header-control, .header-search, .favorite-button { min-height: 42px; border: 1px solid #d4deeb; border-radius: 20px; background: #fff; }
.header-control { display: flex; align-items: center; gap: 6px; padding: 0 10px; }
.header-control select { min-width: 0; height: 38px; border: 0; outline: 0; color: #101a2a; background: transparent; font-weight: 700; }
.location-control select { width: 100%; }
.header-search { display: flex; align-items: center; gap: 12px; padding: 0 14px; color: #71809a; }
.header-search b { margin-left: auto; color: #071c44; font-size: 25px; }
.design-control label { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.design-control select { max-width: 185px; }
.favorite-button { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 0 18px; color: #101827; font-weight: 800; }
.favorite-button span { color: #f0a400; font-size: 22px; }
.trip-button span { color: #0757bd; }
.examples-list { display: flex; align-items: center; gap: 8px; }
.examples-list ul { margin: 0; padding: 0; list-style: none; }
.examples-label { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

.hero-stage { position: relative; height: clamp(580px, 63vw, 770px); min-height: 580px; overflow: hidden; }
#weather-map { position: absolute; inset: 0; z-index: 1; background: #8eb1c4; }
#weather-map::after { content: ""; position: absolute; inset: 0; z-index: 400; pointer-events: none; background: linear-gradient(90deg, rgba(235,248,255,.4), transparent 25%, transparent 72%, rgba(15,38,63,.08)); }
.leaflet-control-attribution { font-size: 8px !important; opacity: .72; }
.leaflet-control-zoom { margin-top: 22px !important; }
.maplibregl-map { font: inherit; }
.maplibregl-canvas { outline: none; }
.maplibregl-ctrl-top-left { top: 14px; }
.maplibregl-ctrl-attrib { font-size: 8px; opacity: .82; }
.tmw-maplibre-pin { position: relative; border: 1px solid rgba(7,71,147,.25); cursor: pointer; font: inherit; }
.tmw-map-pin { display: grid; place-items: center; width: 112px; min-height: 70px; padding: 8px; transform: translate(-40px,-58px); border: 1px solid rgba(7,71,147,.25); border-radius: 16px; background: rgba(255,255,255,.92); box-shadow: var(--shadow); color: var(--ink); text-align: center; }
.tmw-maplibre-pin.tmw-map-pin { transform: none; }
.tmw-map-pin::after { content: ""; position: absolute; bottom: -13px; border: 7px solid transparent; border-top-color: rgba(255,255,255,.94); }
.tmw-map-pin b { display: block; font-size: 13px; }
.tmw-map-pin small { display: block; font-size: 11px; color: var(--muted); }

.current-orb { position: absolute; z-index: 500; top: 8%; left: 4%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: clamp(250px, 28vw, 370px); aspect-ratio: 1; padding: 34px; border: 4px solid rgba(255,255,255,.86); border-radius: 50%; background: radial-gradient(circle at 42% 35%, #fff 0 42%, rgba(244,250,255,.92) 66%, rgba(218,235,246,.9) 100%); box-shadow: 0 10px 45px rgba(2,33,68,.28), inset 0 0 26px rgba(52,142,210,.15); text-align: center; }
.current-orb .current-icon { position: absolute; left: -8%; top: 5%; font-size: clamp(55px, 7vw, 105px); filter: drop-shadow(0 12px 12px rgba(1,38,75,.18)); }
.current-orb p { margin: 0 0 4px; font-size: clamp(14px, 1.4vw, 22px); }
.current-orb h1 { margin: 0; font-size: clamp(24px, 2.3vw, 37px); }
.current-orb > strong { margin: -4px 0 -8px; font-size: clamp(85px, 11vw, 152px); line-height: 1; letter-spacing: -9px; }
.current-orb > strong sup { font-size: .48em; vertical-align: top; letter-spacing: -3px; }
.current-orb h2 { margin: 0; font-size: clamp(19px, 2.1vw, 31px); }
.feels { color: #0759bc; font-size: clamp(16px, 1.5vw, 23px); }
.high-low { display: flex; gap: 8px; margin-top: 6px; font-size: clamp(14px, 1.3vw, 20px); }
.high-low span:first-child { color: #d82e17; }
.high-low span:last-child { color: #0759bc; }

.weather-wall { position: absolute; z-index: 520; top: 3%; right: 1.5%; width: min(33%, 520px); padding: 12px; border: 2px solid rgba(255,255,255,.95); border-radius: 20px; background: rgba(251,253,255,.94); box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.weather-wall > header { display: flex; align-items: center; gap: 10px; padding: 0 4px 10px; }
.weather-wall > header h2 { margin: 0; font-size: clamp(15px, 1.5vw, 22px); text-transform: uppercase; }
.weather-wall > header p { margin: 0; color: var(--muted); font-size: 11px; }
.weather-wall > header small { margin-left: auto; color: #394d70; }
.wall-mark { font-size: 31px; }
.wall-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wall-tile { position: relative; min-height: 145px; padding: 12px 10px; overflow: hidden; border: 1px solid rgba(16,82,153,.22); border-radius: 14px; background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(219,239,253,.95)); box-shadow: inset 0 1px #fff, 0 4px 10px rgba(12,52,96,.09); }
.wall-tile::after { content: ""; position: absolute; inset: 36px -25px auto; height: 62px; opacity: .35; border-radius: 50%; background: repeating-radial-gradient(ellipse, currentColor 0 4px, transparent 5px 12px); transform: rotate(-8deg); }
.wall-tile > * { position: relative; z-index: 1; display: block; }
.wall-tile > span { color: #00579b; font-size: 13px; font-weight: 900; text-transform: uppercase; }
.wall-tile > b { margin-top: 59px; font-size: clamp(23px, 2.3vw, 38px); line-height: .9; }
.wall-tile > b small { font-size: 11px; font-weight: 500; }
.wall-tile > em { margin-top: 4px; font-size: 11px; font-style: normal; }
.wall-tile.pressure { color: #063ba6; background: linear-gradient(155deg,#f6f9ff,#d8e6ff 57%,#0c68c8 58%,#0754b3); }
.wall-tile.pressure > b, .wall-tile.pressure > em { color: white; }
.wall-tile.humidity, .wall-tile.air { color: #3f7b13; background: linear-gradient(155deg,#f8fbf1,#e3efc9); }
.wall-tile.rain { color: #0872bb; }
.wall-tile.uv { color: #df5c08; background: linear-gradient(155deg,#fffaf2,#ffe7d5); }
.storm-energy { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 10px 16px; border: 1px solid #d7c8f0; border-radius: 14px; background: linear-gradient(90deg,#f6f0ff,#fff); }
.storm-energy > span { font-size: 36px; }
.storm-energy > span:last-child { margin-left: auto; }
.storm-energy small { display: block; color: #47348e; text-transform: uppercase; }
.storm-energy b { font-size: 22px; color: #5336a3; }
.storm-energy p { display: inline; margin: 0 0 0 8px; font-size: 11px; color: var(--muted); }

.map-note, .partner-pin { position: absolute; z-index: 510; padding: 10px 14px; border: 1px solid rgba(9,70,137,.18); border-radius: 13px; background: rgba(255,255,255,.9); box-shadow: var(--shadow); }
.map-note { left: 30%; top: 7%; }
.map-note b, .map-note span { display: block; }
.map-note b { font-size: 12px; text-transform: uppercase; }
.map-note span { color: var(--muted); font-size: 11px; }
.partner-pin { left: 4%; bottom: 5%; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; }
.partner-pin > span { grid-row: 1 / 3; color: #148941; font-size: 24px; }
.partner-pin small { color: var(--muted); text-transform: uppercase; }
.partner-pin b { font-size: 13px; }
.state-identity { position: absolute; z-index: 510; left: 1.5%; top: 49%; text-shadow: 0 2px 4px white; }
.state-identity h1 { margin: 0; font-size: clamp(42px, 5vw, 74px); letter-spacing: -3px; }
.state-identity p { margin: 0; font-size: 17px; }

.dashboard-row { position: relative; z-index: 600; display: grid; gap: 10px; margin: -8px 16px 0; }
.primary-cards { grid-template-columns: 2.2fr 1.5fr 1fr 1.25fr 1.1fr; }
.secondary-cards { grid-template-columns: 1.05fr 2.2fr 1.2fr; margin-top: 10px; padding-bottom: 12px; }
.dashboard-card { min-width: 0; min-height: 176px; padding: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.92); border-radius: 16px; background: var(--glass); box-shadow: var(--shadow); }
.dashboard-card > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.dashboard-card > header h2 { margin: 0; color: #09264d; font-size: 15px; text-transform: uppercase; }
.dashboard-card > header a, .dashboard-card > header span { color: #0762c8; font-size: 10px; }
.hourly-strip, .daily-strip { display: flex; gap: 4px; height: 125px; padding-top: 8px; overflow-x: auto; }
.hourly-strip > div, .daily-strip > div { display: flex; flex: 1 0 54px; flex-direction: column; align-items: center; justify-content: space-between; min-width: 54px; text-align: center; }
.hourly-strip span, .daily-strip span { font-size: 25px; }
.hourly-strip b, .daily-strip b { font-size: 17px; }
.hourly-strip em { color: #075fbd; font-size: 9px; font-style: normal; }
.status-card > .status-icon { display: block; margin: 12px 0 4px; font-size: 34px; }
.status-card > b { color: #0d60bd; font-size: 22px; }
.status-card p { margin: 4px 0; font-size: 12px; }
.status-card > small { color: var(--muted); font-size: 9px; }
.outdoor-card > b { display: block; margin-top: 10px; color: #388326; font-size: 28px; }
.outdoor-card p { margin: 0; color: var(--muted); font-size: 11px; }
.outdoor-card ul { margin: 8px 0 0; padding: 0; list-style: none; font-size: 10px; }
.outdoor-card li { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding: 3px 0; }
.sun-card { text-align: center; }
.sun-glyph { display: block; margin-top: 8px; font-size: 48px; line-height: 1; }
.sun-card > div { display: flex; justify-content: space-around; border-top: 1px solid var(--line); padding-top: 4px; }
.sun-card > small { color: var(--muted); }
.clear-alert, .active-alert { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px; border-radius: 12px; background: #eef8ee; }
.active-alert { background: #fff2d9; }
.clear-alert > span, .active-alert > span { font-size: 26px; }
.clear-alert b, .active-alert b { font-size: 13px; }
.clear-alert p, .active-alert p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.partner-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 10px; }
.partner-list a { min-height: 95px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.partner-list b, .partner-list small { display: block; }
.partner-list b { font-size: 12px; }
.partner-list small { margin-top: 6px; color: var(--muted); font-size: 10px; }
.details-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 10px 0 0; }
.details-card dl > div { padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.details-card dt { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.details-card dd { margin: 2px 0 0; font-size: 14px; font-weight: 800; }
/* ---------- sponsorship surfaces ----------
   Slots render in one of two states: a sold sponsor credit, or an open slot
   showing its asking price. The open state is deliberately legible — a live
   page doubles as the rate card during a sales conversation. */
.town-banner { position: relative; z-index: 900; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 14px 0; padding: 8px 16px; border: 1px solid rgba(255,255,255,.9); border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); font-size: 13px; }
.town-banner b { font-weight: 900; }
.town-banner > a { margin-left: auto; color: #0757bd; font-size: 12px; font-weight: 800; white-space: nowrap; }
.town-banner.is-open { border-style: dashed; border-color: #7fae87; background: rgba(240,251,243,.95); }

.sponsor-mark { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px; background: #0757bd; color: #fff; font-size: 12px; font-weight: 900; }

.sponsor-credit { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.sponsor-credit small { display: block; color: var(--muted); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.sponsor-credit b { display: block; font-size: 12px; line-height: 1.2; }
.sponsor-credit.is-open { color: #17693f; }
.sponsor-credit.is-open b { color: #0757bd; }
.sponsor-open-dot { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border: 1px dashed #7fae87; border-radius: 8px; color: #17693f; font-size: 13px; font-weight: 900; }

.wall-sponsor .sponsor-credit { margin-top: 8px; padding: 6px 4px 0; }
/* Stacked above the partner pin: the map's right edge is already taken by the
   layer controls, so both sponsor surfaces share the left gutter. */
.map-sponsor { position: absolute; z-index: 510; left: 4%; bottom: 13%; display: flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid rgba(9,70,137,.18); border-radius: 13px; background: rgba(255,255,255,.92); box-shadow: var(--shadow); }
.map-sponsor small { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.map-sponsor b { display: block; font-size: 12px; }
.partner-pin b { line-height: 1.15; }

.listing-flag { display: inline-block; margin-top: 6px; padding: 1px 7px; border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.listing-flag.tier-featured { background: #e8f1fd; color: #1a4f95; }
.listing-flag.tier-partner { background: #fdf0e2; color: #96551a; }
.listing-upsell { display: block; margin-top: 8px; padding: 8px 10px; border: 1px dashed #7fae87; border-radius: 10px; background: #f2fbf5; color: #17693f; font-size: 11px; font-weight: 800; text-align: center; }
.event-list { display: grid; gap: 6px; padding-top: 10px; }
.event-list a { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.event-list b { display: block; font-size: 12px; }
.event-list small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }

.community-partners { position: relative; z-index: 600; margin: 12px 16px 0; padding: 12px 16px; border: 1px solid rgba(255,255,255,.92); border-radius: 16px; background: var(--glass); box-shadow: var(--shadow); }
.cp-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cp-label { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.cp-chip { display: flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; }
.cp-chip.cp-open { padding-left: 11px; border-style: dashed; border-color: #7fae87; color: #17693f; }
.cp-links { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.cp-links a { color: #0757bd; font-size: 11px; font-weight: 800; text-decoration: underline; }
.biz-link span { color: #148941; }

footer { display: flex; justify-content: space-between; gap: 20px; padding: 12px 20px 24px; color: rgba(255,255,255,.94); font-size: 11px; text-shadow: 0 1px 2px #173a2b; }
footer p { margin: 0; }
footer a { text-decoration: underline; }

.design-city-relief #weather-map::after { background: linear-gradient(90deg, rgba(233,245,255,.5), transparent 30%, rgba(51,100,45,.1)); }
.design-state .hero-stage { height: clamp(620px, 55vw, 760px); }
.design-state .current-orb { top: 23%; left: 1%; width: clamp(220px, 22vw, 320px); }
.design-state .current-orb .current-icon { left: -5%; top: 14%; font-size: clamp(50px, 5vw, 78px); }
.design-state .current-orb > strong { font-size: clamp(72px, 8vw, 118px); }
.design-state .current-orb h2 { font-size: clamp(17px, 1.6vw, 25px); }
.design-state .weather-wall { width: min(24%, 420px); }
.design-state .wall-tile { min-height: 125px; padding: 9px; }
.design-state .wall-tile > b { margin-top: 43px; }
.design-state .map-note { left: 19%; top: 2%; }
.design-state .partner-pin { left: 22%; bottom: 12%; }
.design-state .map-sponsor { left: 22%; bottom: 20%; }
.design-state .state-identity { top: 66%; }
.design-state .primary-cards { grid-template-columns: 1.2fr 1.5fr 1.15fr 1.2fr 1.1fr; }

@media (max-width: 1180px) {
  .site-header { grid-template-columns: auto 1fr auto; }
  .header-search { display: none; }
  .design-control { grid-column: 2; grid-row: 2; }
  .examples-list { grid-column: 3; grid-row: 1 / 3; }
  .hero-stage { height: 780px; }
  .weather-wall { top: 43%; width: 52%; }
  .primary-cards { grid-template-columns: repeat(3, 1fr); }
  .hourly-card { grid-column: span 2; }
  .secondary-cards { grid-template-columns: 1fr 2fr; }
  .details-card { grid-column: span 2; }
  .design-state .weather-wall { width: 42%; }
}

@media (max-width: 760px) {
  .site-header { grid-template-columns: 1fr auto; margin: 6px; padding: 8px; border-radius: 16px; }
  .brand { font-size: 22px; }
  .location-control { grid-column: 1 / 3; grid-row: 2; }
  .design-control { grid-column: 1 / 3; grid-row: 3; }
  .examples-list { grid-column: 2; grid-row: 1; }
  .examples-label { display: none; }
  .favorite-button { min-height: 36px; padding: 0 10px; font-size: 0; }
  .favorite-button span { font-size: 20px; }
  .hero-stage, .design-state .hero-stage { height: auto; min-height: 0; padding: 10px 8px; background: linear-gradient(#92c0dc,#7ba782); }
  #weather-map { position: relative; inset: auto; height: 340px; border-radius: 18px; }
  .current-orb, .design-state .current-orb { position: relative; inset: auto; z-index: 510; width: min(88vw, 330px); margin: -100px auto 12px; }
  .weather-wall, .design-state .weather-wall { position: relative; inset: auto; z-index: 520; width: 100%; }
  .wall-tile, .design-state .wall-tile { min-height: 125px; }
  .wall-tiles { grid-template-columns: repeat(2, 1fr); }
  .wall-tile > b, .design-state .wall-tile > b { margin-top: 42px; }
  .map-note, .partner-pin, .state-identity, .map-sponsor { display: none; }
  .dashboard-row, .design-state .primary-cards { grid-template-columns: 1fr; margin: 8px; }
  .hourly-card, .details-card { grid-column: auto; }
  .partner-list { grid-template-columns: 1fr; }
  .town-banner, .community-partners { margin-inline: 8px; }
  .town-banner > a { margin-left: 0; }
  footer { flex-direction: column; }
}

/* ---- Full-detail sections (parity with the legacy dashboard) ---- */
.detail-nav { position: relative; z-index: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 16px 0; padding: 8px 12px; border: 1px solid rgba(255,255,255,.9); border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.detail-nav > span { margin-right: 4px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.detail-nav a { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: #f4f8fd; color: #0757bd; font-size: 11px; font-weight: 700; }
.detail-nav a:hover { background: #e4eefb; }
.detail-disclaimer, .detail-refresh { position: relative; z-index: 600; margin: 10px 16px 0; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.9); color: #24405e; font-size: 11px; line-height: 1.5; }
.detail-refresh { border-left: 4px solid #f0a400; }
.detail-section { position: relative; z-index: 600; margin: 14px 16px 0; }
.detail-section > h2 { display: inline-block; margin: 0 0 8px; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.9); color: #09264d; font-size: 15px; text-transform: uppercase; }
.detail-section > .detail-note { margin: -4px 0 10px; padding: 0 2px; color: #14355c; font-weight: 600; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 10px; }
.detail-card { min-width: 0; padding: 14px; border: 1px solid rgba(255,255,255,.92); border-radius: 16px; background: var(--glass); box-shadow: var(--shadow); }
.detail-card h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; color: #09264d; font-size: 14px; text-transform: uppercase; }
.detail-card h3 span { color: var(--muted); font-size: 10px; font-weight: 500; text-transform: none; }
.detail-card-ok { border-left: 4px solid #2f8f4e; }
.detail-card-alert { border-left: 4px solid #f0a400; }
.detail-card-alert.severe { border-left-color: #d82e17; }
.detail-headline { margin: 0 0 8px; color: #09264d; font-size: 13px; font-weight: 700; }
.detail-note { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.detail-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 6px; }
.detail-value { padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #f7fafd; }
.detail-value b { display: block; font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
.detail-value span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.detail-snapshot { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 6px; margin: 10px 0; }
.detail-snap { padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #f7fafd; }
.detail-snap span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.detail-snap b { display: block; margin: 2px 0; font-size: 13px; overflow-wrap: anywhere; }
.detail-snap small { display: block; color: var(--muted); font-size: 9px; line-height: 1.35; }
.detail-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.detail-row { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.detail-row strong { display: block; font-size: 12px; }
.detail-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.detail-row em { font-style: normal; }
.detail-row a { color: #0757bd; text-decoration: underline; }
.detail-strip { display: flex; gap: 6px; padding: 12px; overflow-x: auto; border: 1px solid rgba(255,255,255,.92); border-radius: 16px; background: var(--glass); box-shadow: var(--shadow); }
.detail-hour { flex: 0 0 92px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #f7fafd; text-align: center; }
.detail-hour strong { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.detail-hour b { display: block; margin: 4px 0; font-size: 20px; }
.detail-hour small { display: block; color: var(--muted); font-size: 9px; line-height: 1.35; }
.detail-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 5px; margin-top: 8px; }
.detail-tcell { padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: #f7fafd; text-align: center; }
.detail-tcell strong { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.detail-tcell b { display: block; font-size: 12px; }
.detail-tcell span { display: block; color: #0757bd; font-size: 10px; }
.detail-links { display: flex; flex-direction: column; gap: 6px; }
.detail-links a { padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: #f7fafd; color: #0757bd; font-size: 12px; font-weight: 700; }
.detail-links a:hover { background: #e9f2fd; }
.detail-source-links { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.detail-source-links a { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.detail-source-links a:hover { border-color: rgba(7,87,189,.4); background: #f4f9ff; }
.detail-source-links strong { font-size: 12px; }
.detail-source-links small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.detail-source-links em { color: var(--muted); font-size: 9px; font-style: normal; text-transform: uppercase; white-space: nowrap; }
.status-pulse { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #2f8f4e; }
.detail-source-links .status-pulse { display: block; }
.status-pulse.pulse-muted { background: #9aa8bd; }
.detail-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.detail-pills span { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: #f4f8fd; font-size: 11px; font-weight: 700; }
.detail-button { margin-top: 10px; padding: 9px 12px; border: 1px solid rgba(7,87,189,.3); border-radius: 10px; background: #eef5ff; color: #0757bd; font-size: 12px; font-weight: 700; cursor: pointer; }
.detail-button:hover { background: #e2eefd; }
.detail-status { margin: 0; color: #24405e; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.tmw-layer-panel { position: absolute; z-index: 530; right: 1.5%; bottom: 5%; min-width: 168px; padding: 8px 10px; border: 1px solid rgba(9,70,137,.18); border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); color: var(--ink); font-size: 11px; }
.tmw-layer-panel b { display: block; margin-bottom: 5px; font-size: 10px; text-transform: uppercase; }
.tmw-layer-panel label { display: flex; align-items: center; gap: 6px; padding: 2px 0; cursor: pointer; }
.leaflet-control-layers { font-size: 11px; }

@media (max-width: 760px) {
  .detail-nav, .detail-disclaimer, .detail-refresh, .detail-section { margin-left: 8px; margin-right: 8px; }
  .tmw-layer-panel { position: relative; inset: auto; width: 100%; margin-top: 10px; }
  .detail-grid { grid-template-columns: 1fr; }
}

.tmw-layer-panel .tmw-base-select { width: 100%; margin-bottom: 6px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; background: #f7fafd; color: var(--ink); font-size: 11px; font-weight: 700; }
.tmw-radar-bar { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.tmw-radar-bar button { padding: 4px 8px; border: 1px solid rgba(7,87,189,.3); border-radius: 8px; background: #eef5ff; color: #0757bd; font-size: 11px; font-weight: 700; cursor: pointer; }
.tmw-radar-bar span { color: var(--muted); font-size: 10px; }
.tmw-legend-toggle { width: 100%; margin-top: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: #f7fafd; color: var(--ink); font-size: 11px; font-weight: 700; cursor: pointer; }
.tmw-legend { display: none; max-height: 180px; margin-top: 6px; overflow-y: auto; }
.tmw-layer-panel.legend-open .tmw-legend { display: block; }
.tmw-legend-head { margin: 6px 0 3px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.tmw-legend-row { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 6px; padding: 2px 0; font-size: 10px; line-height: 1.35; }
.tmw-legend-row i { display: block; width: 16px; height: 10px; border-radius: 2px; }