:root{
  /* The site has no dark theme; without this, some mobile browsers with OS-level
     dark mode enabled auto-repaint native form controls (inputs, autofill,
     scrollbars) with a dark-mode palette they guess at, which can leave typed
     text unreadable (e.g. white-on-white) even though every color here is
     explicitly set. This opts every page out of that guesswork. */
  color-scheme: light;
  --bg: #FFFFFF;
  --bg-2: #F7F9FC;
  --card: #FFFFFF;
  --card-2: #F3F6FA;
  --line: #E7ECF3;
  --line-strong: #D6DEE8;
  --text: #14181F;
  --text-dim: #4B5563;
  --text-mute: #8A94A3;
  --accent: #2563EB;
  --accent-dim: #EAF0FE;
  --teal: #0E9F8E;
  --teal-dim: #E4F7F4;
  --amber: #D97706;
  --amber-dim: #FDF1DF;
  --rain: #2563EB;
  --rain-dim: #EAF0FE;
  --danger: #DC2626;
  --danger-dim: #FDECEC;
  --shadow: 0 1px 2px rgba(20,24,31,0.04), 0 4px 16px rgba(20,24,31,0.05);

  /* ---- Consolidated design-system aliases (Header/Footer/Homepage redesign) ----
     Additive only — existing components keep using the tokens above directly;
     these names just give the same palette/system semantic labels + a few new
     structural values, without renaming anything already in use sitewide. */
  --navy: #0B1E39;
  --navy-2: #122A4D;
  --success: var(--teal);
  --warning: var(--amber);
  --error: var(--danger);
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --container-max: 1120px;
  --container-max-wide: 1360px;
  --header-height: 68px;
  --section-spacing: 64px;

  /* ---- Weather-category identity colors (homepage 15-day donut + calendar
     badges) — distinct from the --teal/--amber/--danger status scale used for
     AQI/suitability above; validated as a set with the dataviz palette
     checker (adjacent-pair mode, all PASS). Rain reuses the existing --rain. */
  --w-sunny: #EB6834;
  --w-cloudy: #1BAF7A;
  --w-storm: #4A3AA7;

  /* ---- Vivid badge tones (homepage activity cards / status chips) ----
     Punchier than --teal/--amber/--danger above on purpose — used only for
     small filled badges/icon-circles/tinted card backgrounds, not body text. */
  --vivid-green: #16A34A;
  --vivid-green-dim: #DCFCE7;
  --vivid-orange: #EA580C;
  --vivid-orange-dim: #FFEDD5;
  --vivid-red: #DC2626;
  --vivid-red-dim: #FEE2E2;
  --violet: #7C6FE8;
  --violet-dim: #EDEBFB;
}
*{box-sizing:border-box; margin:0; padding:0;}

/* ---------- ICON SYSTEM (Lucide, one library site-wide) ---------- */
.tw-icon, svg.lucide{ width:16px; height:16px; stroke-width:2; flex-shrink:0; vertical-align:-3px; }
.tw-nav-trigger-icon{ width:15px; height:15px; opacity:0.75; margin-right:6px; vertical-align:-2px; }
.tw-nav-item-icon{ width:15px; height:15px; opacity:0.65; margin-right:9px; vertical-align:-2px; }
.tw-util-location, .tw-search-current-label, .tw-drawer-location > span:first-child{ display:inline-flex; align-items:center; gap:5px; }
.tw-util-location .tw-icon, .tw-search-current-label .tw-icon{ width:13px; height:13px; }
.tw-lang-btn{ gap:5px; }
.metric-icon, .sunmoon-icon, .highlight-icon{ width:16px; height:16px; vertical-align:-3px; margin-right:5px; opacity:0.8; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
html{ overflow-x:hidden; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
  max-width:100vw;
}
a{ color: inherit; text-decoration:none; }

/* ---------- NAV ---------- */
.nav{
  position: sticky; top:0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 32px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand{
  font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; font-size:21px; letter-spacing:-0.4px;
  display:flex; align-items:center; gap:8px; color: var(--text);
}
.brand .dot{ width:9px; height:9px; border-radius:50%; background: var(--teal); display:inline-block; }
.nav-links{ display:flex; gap:24px; font-size:14px; color: var(--text-dim); }
.nav-links a:hover{ color: var(--text); }
.nav-links a.active{ color: var(--accent); font-weight:600; }
.nav-search{
  display:flex; align-items:center; gap:8px;
  background: var(--bg-2); border:1px solid var(--line);
  padding: 8px 14px; border-radius: 100px; font-size:13px; color: var(--text-mute);
  min-width: 200px;
}
.nav-search input{
  background:transparent; border:none; outline:none; color:var(--text); font-size:13px; width:100%;
  font-family:'Inter', sans-serif;
}
.nav-search input::placeholder{ color: var(--text-mute); }

/* ---------- NAV AUTH ---------- */
.nav-auth{ display:flex; align-items:center; gap:10px; }
.btn-ghost{
  background:transparent; border:1px solid var(--line-strong); color: var(--text-dim);
  padding:8px 16px; border-radius:8px; font-size:13px; cursor:pointer; font-family:'Inter',sans-serif;
  transition:background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn-ghost:hover{ background: var(--bg-2); border-color:var(--text-mute); }
.btn-solid{
  background: var(--accent); border:1px solid var(--accent); color:#fff;
  padding:9px 18px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif;
  transition:background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.btn-solid:hover{ background:#1D4ED8; box-shadow:0 4px 12px rgba(37,99,235,0.25); }
.btn-solid:active, .btn-ghost:active{ transform:translateY(1px); }
.btn-solid:focus-visible, .btn-ghost:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.nav-user{ display:flex; align-items:center; gap:10px; font-size:13px; color: var(--text-dim); cursor:pointer; min-width:0; }
.nav-user .avatar{ width:30px; height:30px; border-radius:50%; background: var(--accent-dim); color: var(--accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex-shrink:0; }
.nav-user-name{ display:inline-block; vertical-align:middle; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- MODAL ---------- */
.tw-modal-overlay{
  display:none; position:fixed; inset:0; background: rgba(20,24,31,0.4); z-index:200;
  align-items:center; justify-content:center;
}
.tw-modal-overlay.open{ display:flex; }
.tw-modal{
  background: #fff; border:1px solid var(--line); border-radius:16px; box-shadow: var(--shadow);
  padding:30px; width:380px; max-width:90vw; position:relative;
}
.tw-modal-close{
  position:absolute; top:16px; right:16px; background:none; border:none; color: var(--text-mute);
  font-size:18px; cursor:pointer;
}
.tw-modal h3{ font-family:'Plus Jakarta Sans', sans-serif; font-size:21px; font-weight:700; margin-bottom:6px; }
.tw-modal .sub{ font-size:13px; color: var(--text-mute); margin-bottom:20px; }
.tw-field{ margin-bottom:14px; }
.tw-field label{ display:block; font-size:12px; color: var(--text-dim); margin-bottom:6px; font-weight:500; }
.tw-field input, .tw-field select{
  width:100%; background: var(--bg-2); border:1px solid var(--line-strong); color: var(--text);
  padding:10px 12px; border-radius:8px; font-size:14px; font-family:'Inter',sans-serif;
}
.tw-field input:focus, .tw-field select:focus{ outline:none; border-color: var(--accent); background:#fff; }
.tw-modal-submit{
  width:100%; background: var(--accent); border:none; color:#fff; font-weight:600;
  padding:11px; border-radius:8px; font-size:14px; cursor:pointer; margin-top:6px;
}
.tw-modal-submit:hover{ background:#1D4ED8; }
.tw-modal-switch{ font-size:13px; color: var(--text-mute); text-align:center; margin-top:16px; }
.tw-modal-switch a{ color: var(--accent); cursor:pointer; font-weight:500; }
.tw-modal-note{ font-size:12px; color: var(--text-mute); margin-top:12px; text-align:center; }
.tw-form-error{ font-size:13px; color: var(--danger); margin-top:8px; display:none; }
.tw-form-success{ font-size:13px; color: var(--teal); margin-top:8px; display:none; font-weight:500; }

/* ---------- HERO ---------- */
.hero{
  padding: 48px 32px 36px;
  max-width: 1120px; margin: 0 auto;
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 44px; align-items:center;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--teal); margin-bottom:14px; display:flex; align-items:center;
}
.location{ font-size:27px; font-weight:700; margin:0 0 4px; font-family:'Plus Jakarta Sans',sans-serif; }
.updated{ font-size:13px; color: var(--text-mute); margin-bottom: 26px; }
.temp-row{ display:flex; align-items:flex-start; gap: 18px; }
.temp-big{
  font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; font-size: 108px; line-height:0.9;
  letter-spacing:-3px; color: var(--text);
}
.temp-unit{ font-size:38px; font-weight:600; color: var(--text-mute); }
.cond-col{ padding-top: 12px; }
.cond-text{ font-size:19px; font-weight:600; margin-bottom:6px; }
.hilo{ font-size:14px; color: var(--text-dim); }
.hilo span{ color: var(--text); font-weight:600; }

.alert-pill{
  display:inline-flex; align-items:center; gap:10px;
  background: var(--accent-dim); border:1px solid #C7D8FC;
  color: #1D4ED8; padding: 9px 16px; border-radius: 10px; font-size:13px; margin-top:24px;
}
.alert-pill b{ color:#1D4ED8; }

.hero-visual{
  background: linear-gradient(160deg, var(--card-2), #fff);
  border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow);
  padding: 26px; height: 300px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.visual-top{ display:flex; justify-content:space-between; font-size:13px; color: var(--text-mute); }
.rain-drop-graphic{ flex:1; display:flex; align-items:center; justify-content:center; }
.visual-caption{ font-size:13px; color: var(--text-dim); text-align:center; }
.visual-caption b{ color: var(--accent); font-weight:600; }

/* ---------- PAGE HERO ---------- */
.page-head{ max-width:1120px; margin:0 auto; padding: 40px 32px 6px; }
.page-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.page-location-controls{ display:flex; gap:8px; flex-wrap:wrap; }
.page-location-controls .btn-ghost{ font-size:12px; padding:8px 14px; }
.page-title{ font-family:'Plus Jakarta Sans', sans-serif; font-size:30px; font-weight:800; margin:0 0 6px; }
.page-sub{ font-size:14px; color: var(--text-mute); }

/* ---------- SECTION SHELL ---------- */
.section{ max-width: 1120px; margin: 0 auto; padding: 32px 32px; }
@media (max-width: 600px){
  .section, .page-head, .weather-layout{ padding-left:16px; padding-right:16px; }
}
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap; }
.section-eyebrow{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--accent); margin-bottom:4px; display:block; }
.section-title{ margin:0; font-family:'Plus Jakarta Sans', sans-serif; font-size:20px; font-weight:800; letter-spacing:-0.2px; }
.section-sub{ font-size:13px; color: var(--text-mute); }
.section-sub a{ color:var(--accent); font-weight:600; text-decoration:none; }
.section-sub a:hover{ text-decoration:underline; }

/* ---------- REUSABLE EMPTY STATE ---------- */
.tw-empty-state{ text-align:center; padding:40px 24px; border:1px dashed var(--line-strong); border-radius:16px; background:var(--bg-2); }
.tw-empty-state-icon{ width:44px; height:44px; border-radius:50%; background:#fff; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; color:var(--text-mute); }
.tw-empty-state-icon .tw-icon{ width:20px; height:20px; }
.tw-empty-state-title{ font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px; }
.tw-empty-state-sub{ font-size:12.5px; color:var(--text-mute); max-width:340px; margin:0 auto; line-height:1.6; }
.tw-empty-state .btn-ghost, .tw-empty-state .btn-solid{ margin-top:14px; display:inline-flex; text-decoration:none; }

/* ---------- HOURLY STRIP ---------- */
.hourly-strip{
  display:flex; gap:0; overflow-x:auto; border:1px solid var(--line); border-radius:16px;
  background: var(--card); box-shadow: var(--shadow);
}
.hour-card{ flex: 0 0 106px; padding: 18px 12px; text-align:center; border-right: 1px solid var(--line); }
.hour-card:last-child{ border-right:none; }
.hour-time{ font-size:12px; color: var(--text-mute); margin-bottom:10px; font-family:'IBM Plex Mono', monospace; }
.hour-temp{ font-size:19px; font-weight:700; margin: 8px 0 6px; }

/* ---------- STAGE D: homepage forecast date selector ---------- */
.date-selector-wrap{ margin-top:20px; }
.date-selector-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.date-selector-label{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-mute); }
.date-selector-nav{ display:flex; gap:6px; }
.date-selector-arrow{ width:28px; height:28px; border-radius:50%; border:1px solid var(--line-strong); background:#fff; color:var(--text-dim); cursor:pointer; font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; }
.date-selector-arrow:hover{ background:var(--bg-2); }
.date-selector-scroller{ display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
.date-chip{
  flex:0 0 auto; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:64px; min-height:44px; padding:8px 12px; border-radius:12px; border:1px solid var(--line-strong);
  background:#fff; color:var(--text-dim); cursor:pointer; font-family:'Inter',sans-serif;
}
.date-chip:hover{ background:var(--bg-2); }
.date-chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.date-chip-label{ font-size:12.5px; font-weight:700; }
.date-chip-date{ font-size:10.5px; opacity:0.8; }

.date-forecast-card{ border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); padding:20px; }
.date-forecast-hero{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.date-forecast-icon{ font-size:40px; line-height:1; }
.date-forecast-hero-text{ min-width:0; }
.date-forecast-cond{ font-size:16px; font-weight:700; }
.date-forecast-hilo{ font-size:13px; color:var(--text-dim); margin-top:3px; }
.date-forecast-tag{ margin-left:auto; }
.date-forecast-metrics{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:18px; }
.date-forecast-metric{ border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; }
.date-forecast-metric-label{ font-size:11px; color:var(--text-mute); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:6px; }
.date-forecast-metric-value{ font-size:15px; font-weight:700; }
.date-forecast-metric-muted{ font-size:12px; font-weight:600; color:var(--text-mute); }
.date-forecast-outdoor{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; }
.date-forecast-outdoor-note{ font-size:12.5px; color:var(--text-mute); }
.date-forecast-hourly-label{ font-size:13px; font-weight:700; margin:18px 0 8px; }
.date-forecast-hourly{ display:flex; gap:0; overflow-x:auto; border:1px solid var(--line); border-radius:14px; }
.date-forecast-hourly .hour-card{ flex:0 0 84px; padding:12px 8px; }
.date-forecast-hourly .hour-time{ font-size:11px; margin-bottom:6px; }
.date-forecast-hourly .hour-icon{ font-size:18px; }
.date-forecast-hourly .hour-temp{ font-size:15px; margin:6px 0 4px; }
.date-forecast-hourly .hour-rain{ font-size:11px; }

@media (max-width: 700px){
  .date-forecast-metrics{ grid-template-columns:repeat(2, 1fr); }
  .date-forecast-icon{ font-size:32px; }
  .date-forecast-tag{ margin-left:0; }
}
.hour-rain{ font-size:12px; color: var(--accent); font-weight:600; }
.hour-icon{ font-size:20px; }

/* ---------- HOURLY LIST ---------- */
.hourly-list{ border:1px solid var(--line); border-radius:16px; background: var(--card); overflow:hidden; box-shadow: var(--shadow); }
.hourly-row{ display:grid; grid-template-columns: 90px 40px 1fr 90px 90px 100px; align-items:center; gap:16px; padding: 13px 22px; border-bottom: 1px solid var(--line); font-size:14px; }
.hourly-row:last-child{ border-bottom:none; }
.hourly-row.now{ background: var(--accent-dim); }
.hr-time{ font-family:'IBM Plex Mono', monospace; color: var(--text-dim); font-size:13px; }
.hr-cond{ color: var(--text-dim); font-size:13px; }
.hr-temp{ font-weight:700; font-size:16px; }
.hr-rain{ color: var(--accent); font-size:13px; font-weight:600; }
.hr-wind{ color: var(--text-mute); font-size:13px; }

/* ---------- MONSOON PULSE ---------- */
.pulse-card{ border:1px solid var(--line); border-radius:16px; background: var(--card); padding: 24px 26px; box-shadow: var(--shadow); }
.pulse-row{ display:flex; align-items:center; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pulse-row:last-child{ border-bottom:none; }
.pulse-day{ width: 90px; font-size:14px; color: var(--text-dim); flex-shrink:0; }
.pulse-track{ flex:1; height: 8px; background: var(--bg-2); border-radius:100px; overflow:hidden; }
.pulse-fill{ height:100%; background: linear-gradient(90deg, var(--accent), var(--teal)); border-radius:100px; }
.pulse-pct{ width: 44px; text-align:right; font-family:'IBM Plex Mono', monospace; font-size:13px; color: var(--accent); font-weight:600; flex-shrink:0; }
.pulse-range{ width: 90px; text-align:right; font-size:13px; color: var(--text-mute); flex-shrink:0; }

/* ---------- DAY GRID ---------- */
.day-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
.day-card{ border:1px solid var(--line); border-radius:14px; background: var(--card); padding: 17px 15px; box-shadow: var(--shadow); }
.day-card .dname{ font-size:14px; font-weight:700; margin-bottom:2px; }
.day-card .ddate{ font-size:12px; color: var(--text-mute); margin-bottom:12px; }
.day-card .dicon{ font-size:21px; margin-bottom:10px; }
.day-card .dtemp{ font-size:24px; font-weight:700; font-family:'Plus Jakarta Sans', sans-serif; }
.day-card .dtemp span{ font-size:14px; color: var(--text-mute); font-family:'Inter', sans-serif; font-weight:400; margin-left:4px;}
.day-card .drain{ font-size:12px; color: var(--accent); margin-top:9px; font-weight:500; }

/* ---------- 10-DAY LIST ---------- */
.tenday-list{ border:1px solid var(--line); border-radius:16px; background: var(--card); overflow:hidden; box-shadow: var(--shadow); }
.tenday-row{ display:grid; grid-template-columns: 120px 36px 1fr 70px 200px 70px; align-items:center; gap:16px; padding: 15px 22px; border-bottom: 1px solid var(--line); }
.tenday-row:last-child{ border-bottom:none; }
.td-day{ font-size:14px; font-weight:600; }
.td-date{ font-size:12px; color: var(--text-mute); }
.td-cond{ font-size:13px; color: var(--text-dim); }
.td-rain{ font-size:13px; color: var(--accent); font-weight:500; }
.td-range{ display:flex; align-items:center; gap:10px; }
.td-lo{ font-size:13px; color: var(--text-mute); width:28px; }
.td-hi{ font-size:13px; color: var(--text); width:28px; text-align:right; }
.td-track{ flex:1; height:5px; border-radius:100px; background: var(--bg-2); position:relative; }
.td-track-fill{ position:absolute; height:100%; border-radius:100px; background: linear-gradient(90deg, var(--accent), var(--amber)); }
.td-temp-now{ font-weight:700; text-align:right; }

/* ---------- METRICS ---------- */
.metric-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
.metric-card{ border:1px solid var(--line); border-radius:14px; background: var(--card); padding:17px 18px; box-shadow: var(--shadow); transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; position:relative; overflow:hidden; }
.metric-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--accent), var(--teal)); opacity:0; transition:opacity 0.15s ease; }
.metric-card:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(20,24,31,0.08); border-color:var(--line-strong); }
.metric-card:hover::before{ opacity:1; }
.metric-label{ font-size:12px; color: var(--text-mute); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:10px; font-weight:600; }
.metric-value{ font-size:27px; font-weight:800; font-family:'Plus Jakarta Sans', sans-serif; }
.metric-note{ font-size:12px; color: var(--text-dim); margin-top:6px; }

/* ---------- DATE PICKER ---------- */
.date-picker-card{ border:1px solid var(--line); border-radius:16px; background: var(--card); padding:24px; box-shadow: var(--shadow); }
.date-picker-card input[type="date"]{
  background: var(--bg-2); border:1px solid var(--line-strong); color:var(--text);
  padding:10px 14px; border-radius:8px; font-size:14px; font-family:'Inter',sans-serif; margin-right:12px;
}
#date-picker-result{ margin-top:20px; }
.date-result-row{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.date-result-temp{ font-family:'Plus Jakarta Sans',sans-serif; font-size:42px; font-weight:800; }
.date-result-meta{ font-size:14px; color:var(--text-dim); }
.date-result-tag{ font-size:12px; background: var(--teal-dim); color:var(--teal); padding:3px 10px; border-radius:100px; font-weight:600; }

/* ---------- RADAR ---------- */
.radar-shell{ border:1px solid var(--line); border-radius:20px; background: var(--card); height: 460px; position:relative; overflow:hidden; box-shadow: var(--shadow); }
#radar-map{ width:100%; height:460px; border-radius:16px; }
.leaflet-control-attribution{ font-size:10px; }
.radar-play-btn{ background: var(--card); border:1px solid var(--line-strong); color: var(--text); padding:8px 16px; border-radius:8px; font-size:13px; cursor:pointer; font-family:'Inter',sans-serif; }
.radar-play-btn:hover{ background: var(--bg-2); }
.radar-controls{ display:flex; justify-content:space-between; align-items:center; }
.radar-top-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:0 4px 10px; }
.radar-local-time{ font-size:13px; color:var(--text-dim); font-family:'IBM Plex Mono',monospace; }
.radar-top-actions{ display:flex; gap:8px; position:relative; }
.radar-layer-menu{ position:relative; }
.radar-layer-panel{ position:absolute; top:calc(100% + 8px); right:0; width:260px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:12px; z-index:60; }
.radar-layer-option{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-dim); padding:7px 4px; }
.radar-layer-disabled{ opacity:0.55; cursor:not-allowed; }
.radar-layer-badge{ margin-left:auto; font-size:9px; text-transform:uppercase; background:var(--bg-2); color:var(--text-mute); padding:2px 6px; border-radius:100px; }
.radar-attribution{ font-size:10.5px; color:var(--text-mute); padding:8px 4px 0; }
.radar-attribution a{ color:var(--text-mute); }
.notify-optin-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; }
.notify-optin-note{ font-size:11.5px; color:var(--text-mute); }
@media (max-width: 768px){
  .radar-shell{ height:auto; }
  #radar-map{ height:320px; }
  .radar-top-bar{ flex-direction:column; align-items:flex-start; }
}
/* ---------- MONTHLY CALENDAR ---------- */
.calendar-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.calendar-month-label{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:20px; }
.calendar-legend{ display:flex; gap:16px; margin-bottom:16px; font-size:12px; color:var(--text-dim); }
.calendar-legend .legend-chip{ background:var(--card); border:1px solid var(--line); padding:6px 12px; border-radius:100px; }
.calendar-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; }
.calendar-weekday{ text-align:center; font-size:11px; font-weight:700; color:var(--text-mute); text-transform:uppercase; padding-bottom:6px; }
.calendar-cell{ border:1px solid var(--line); border-radius:10px; background:var(--card); padding:10px 8px; min-height:96px; position:relative; display:flex; flex-direction:column; gap:2px; }
.calendar-cell-blank{ border:none; background:transparent; min-height:0; }
.calendar-cell-today{ border-color:var(--accent); border-width:2px; }
.calendar-cell-date{ font-size:12px; font-weight:700; color:var(--text-dim); }
.calendar-cell-icon{ font-size:20px; }
.calendar-cell-temp{ font-size:13px; font-weight:700; }
.calendar-cell-rain{ font-size:10.5px; color:var(--text-mute); }
.calendar-cell-badge{ position:absolute; top:8px; right:8px; font-size:9px; font-weight:700; text-transform:uppercase; padding:2px 6px; border-radius:100px; }
.calendar-badge-forecast{ background:var(--accent-dim); color:var(--accent); }
.calendar-badge-historical{ background:var(--bg-2); color:var(--text-mute); }
.calendar-cell-historical{ opacity:0.85; }
.calendar-cell[data-date]{ cursor:pointer; transition:border-color 0.15s ease, transform 0.1s ease; }
.calendar-cell[data-date]:hover, .calendar-cell[data-date]:focus-visible{ border-color:var(--accent); outline:none; }
.calendar-cell[data-date]:active{ transform:scale(0.97); }

/* ---- selected-date detail panel (above the grid) ---- */
.calendar-date-detail{ border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); padding:16px 18px; margin-bottom:16px; }
.calendar-date-detail-head{ display:flex; align-items:center; gap:12px; font-size:24px; }
.calendar-date-detail-title{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:15px; color:var(--text); }
.calendar-date-detail-sub{ font-size:12px; color:var(--text-mute); margin-top:2px; }
.calendar-date-detail-metrics{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px; margin-top:14px; }
.calendar-date-detail-metrics > div{ display:flex; flex-direction:column; gap:2px; }
.cdd-label{ font-size:11px; color:var(--text-mute); text-transform:uppercase; letter-spacing:0.4px; }
.cdd-value{ font-size:15px; font-weight:700; color:var(--text); }
@media (max-width: 768px){
  .calendar-cell{ min-height:76px; padding:6px 5px; }
  .calendar-cell-badge{ display:none; }
}
@media (max-width: 480px){
  .calendar-grid{ gap:3px; }
  .calendar-cell-icon{ font-size:15px; }
  .calendar-cell-temp{ font-size:11px; }
}

.radar-legend{ display:flex; gap:16px; background: var(--card); border:1px solid var(--line); padding:10px 16px; border-radius:10px; font-size:12px; color: var(--text-dim); }
.legend-chip{ display:flex; align-items:center; gap:6px; }
.legend-dot{ width:8px; height:8px; border-radius:50%; }
.radar-time-scrub{ background: var(--card); border:1px solid var(--line); padding:8px 14px; border-radius:10px; font-size:12px; color: var(--text-dim); font-family:'IBM Plex Mono', monospace; }

/* ---------- AQI ---------- */
.aqi-hero{ display:grid; grid-template-columns: 1fr 1fr; gap:32px; align-items:center; border:1px solid var(--line); border-radius:20px; background: var(--card); padding: 32px; box-shadow: var(--shadow); }
.aqi-ring-wrap{ display:flex; justify-content:center; }
.aqi-band{ font-size:16px; font-weight:700; color: var(--amber); margin-top:4px; }
.aqi-desc{ font-size:14px; color: var(--text-dim); margin-top:14px; line-height:1.6; }
.pollutant-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin-top:20px; }
.pollutant-card{ border:1px solid var(--line); border-radius:12px; background: var(--bg-2); padding:14px; text-align:center; transition:background 0.15s ease, border-color 0.15s ease; }
.pollutant-card:hover{ background:#fff; border-color:var(--line-strong); box-shadow:var(--shadow); }
.pollutant-name{ font-size:12px; color: var(--text-mute); margin-bottom:6px; }
.pollutant-val{ font-size:20px; font-weight:700; }
.pollutant-unit{ font-size:10px; color:var(--text-mute); margin-top:2px; }
.pollutant-cat{ font-size:11px; font-weight:700; margin-top:4px; min-height:14px; }
.pollutant-explain-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.advice-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
@media (max-width: 768px){
  .pollutant-explain-grid, .advice-grid{ grid-template-columns:1fr; }
}

/* ---------- AD SLOTS ---------- */
.ad-slot{ width:100%; box-sizing:border-box; border:1px dashed var(--line-strong); border-radius:12px; background: var(--bg-2); display:flex; align-items:center; justify-content:center; color: var(--text-mute); font-size:12px; letter-spacing:0.5px; text-transform:uppercase; overflow:hidden; }
.ad-slot ins.adsbygoogle{ width:100%; display:block; }
.ad-slot-banner{ height:90px; max-width:1120px; margin: 0 auto; }
.ad-slot-inline{ height:100px; }
.ad-slot-footer{ height:250px; }
.ad-slot-rect{ height:250px; }
.ad-slot-incontent{ height:100px; margin:0 auto; }

/* ---------- GUEST POST / BLOG ---------- */
.gp-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.gp-card{ border:1px solid var(--line); border-radius:14px; background: var(--card); padding:20px; box-shadow: var(--shadow); transition:transform 0.15s ease, box-shadow 0.15s ease; }
.gp-card:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(20,24,31,0.09); }

/* ---------- WEATHER UPDATES (external RSS) ---------- */
.updates-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.update-card{ display:block; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); text-decoration:none; overflow:hidden; }
.update-card-img{ width:100%; height:140px; object-fit:cover; display:block; background:var(--bg-2); }
.update-card-img-fallback{ display:flex; align-items:center; justify-content:center; font-size:32px; }
.update-card-body{ padding:14px 16px; }
.update-card-source{ font-size:11px; color:var(--text-mute); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:6px; }
.update-card-title{ font-size:14.5px; font-weight:700; color:var(--text); margin-bottom:6px; line-height:1.4; }
.update-card-excerpt{ font-size:12.5px; color:var(--text-dim); line-height:1.5; margin-bottom:8px; }
.update-card-date{ font-size:11px; color:var(--accent); font-weight:600; }

/* ---------- WEATHER VIDEOS ---------- */
.videos-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.video-card{ border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); overflow:hidden; }
.video-card-thumb-btn{ position:relative; display:block; width:100%; border:none; padding:0; cursor:pointer; background:none; }
.video-card-thumb-btn img{ width:100%; height:180px; object-fit:cover; display:block; }
.video-card-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:36px; color:#fff; background:rgba(0,0,0,0.25); }
.video-card-body{ padding:12px 14px; }
.video-card-title{ font-size:14px; font-weight:700; margin-bottom:4px; line-height:1.4; }
.video-card-meta{ font-size:11.5px; color:var(--text-mute); }

@media (max-width: 860px){
  .updates-grid, .videos-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px){
  .updates-grid, .videos-grid{ grid-template-columns:1fr; }
}
.gp-tag{ font-size:12px; color: var(--accent); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:10px; font-weight:700; }
.gp-title{ font-size:19px; font-weight:700; margin-bottom:10px; line-height:1.35; }
.gp-excerpt{ font-size:14px; color: var(--text-dim); line-height:1.65; margin-bottom:14px; }
.gp-meta{ font-size:12px; color: var(--text-mute); display:flex; justify-content:space-between; }
.gp-cta{ border:1px dashed var(--line-strong); border-radius:14px; padding:20px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:10px; background: var(--bg-2); }
.gp-cta .gp-cta-title{ font-size:16px; font-weight:700; }
.gp-cta .gp-cta-sub{ font-size:13px; color: var(--text-dim); line-height:1.6; }
.gp-cta .gp-cta-contact{ font-size:13px; color: var(--accent); font-weight:500; }

.blog-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.blog-card{ display:block; border:1px solid var(--line); border-radius:16px; background: var(--card); overflow:hidden; box-shadow: var(--shadow); transition:transform 0.15s ease, box-shadow 0.15s ease; }
.blog-card:hover{ border-color: var(--line-strong); transform:translateY(-2px); box-shadow:0 10px 24px rgba(20,24,31,0.09); }
.blog-card-img{ width:100%; height:210px; object-fit:cover; display:block; background: var(--bg-2); }
.blog-card-body{ padding:22px; }
.blog-title{ font-family:'Plus Jakarta Sans', sans-serif; font-size:32px; font-weight:800; margin: 12px 0 8px; line-height:1.25; }
.blog-byline{ font-size:13px; color: var(--text-mute); margin-bottom:22px; }
.blog-hero-img{ width:100%; max-height:420px; object-fit:cover; border-radius:16px; margin-bottom:26px; }
.blog-content p{ font-size:16px; color: var(--text-dim); line-height:1.85; margin-bottom:18px; }

/* ---------- BUSINESS LISTING ---------- */
.biz-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
.biz-card{ display:block; border:1px solid var(--line); border-radius:14px; background: var(--card); padding:16px; text-align:center; box-shadow: var(--shadow); transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.biz-card:hover{ border-color: var(--line-strong); transform:translateY(-2px); box-shadow:0 10px 22px rgba(20,24,31,0.09); }
.biz-icon{ width:44px; height:44px; border-radius:10px; background: var(--amber-dim); color: var(--amber); display:flex; align-items:center; justify-content:center; font-size:20px; margin:0 auto 12px; }
.biz-name{ font-size:14px; font-weight:700; margin-bottom:4px; }
.biz-cat{ font-size:12px; color: var(--text-mute); margin-bottom:8px; }
.biz-badge{ display:inline-block; font-size:11px; background: var(--teal-dim); color: var(--teal); padding:3px 9px; border-radius:100px; font-weight:600; }
.biz-cta{ border:1px dashed var(--line-strong); border-radius:14px; padding:20px; text-align:center; display:flex; flex-direction:column; justify-content:center; gap:10px; background: var(--bg-2); }

.biz-grid-full{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.biz-card-full{ border:1px solid var(--line); border-radius:14px; background: var(--card); padding:22px; box-shadow: var(--shadow); }
.biz-card-full .biz-name{ font-size:16px; margin-bottom:6px; }
.biz-desc{ font-size:13px; color: var(--text-dim); line-height:1.6; margin:10px 0 12px; }
.biz-contact{ font-size:13px; color: var(--text-dim); margin-bottom:10px; }
.biz-thumb{ width:44px; height:44px; border-radius:10px; object-fit:cover; margin:0 auto 12px; display:block; }

/* ---------- PAGINATION (minimal — Phase 5 gives this a full redesign) ---------- */
.pagination{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:24px; }
.page-btn{ border:1px solid var(--line-strong); background:#fff; padding:8px 16px; border-radius:var(--radius-sm); font-size:13px; color:var(--text-dim); transition:background 0.15s ease, border-color 0.15s ease; }
.page-btn:hover{ background:var(--bg-2); border-color:var(--text-mute); }
.page-btn.disabled{ color:var(--text-mute); opacity:0.5; pointer-events:none; }
.page-status{ font-size:13px; color:var(--text-mute); }

/* ---------- BREADCRUMB ---------- */
.breadcrumb{ max-width:1120px; margin:0 auto; padding: 16px 32px 0; font-size:13px; color: var(--text-mute); display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.breadcrumb a{ color: var(--text-mute); }
.breadcrumb a:hover{ color: var(--accent); }
.crumb-sep{ color: var(--line-strong); }
.crumb-current{ color: var(--text-dim); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }

/* ---------- LISTING DETAIL HERO ---------- */
.listing-hero{
  height:220px; border-radius:16px; background-size:cover; background-position:center;
  position:relative; margin-bottom:56px; box-shadow: var(--shadow); background-color: var(--card-2);
}
.listing-hero.no-cover{ background-image: linear-gradient(135deg, var(--accent-dim), var(--teal-dim)); }
.listing-logo{
  width:88px; height:88px; border-radius:16px; object-fit:cover;
  position:absolute; left:24px; bottom:-32px; border:4px solid #fff; box-shadow: var(--shadow); background:#fff;
}
.listing-logo-fallback{ display:flex; align-items:center; justify-content:center; font-size:36px; background: var(--amber-dim); color: var(--amber); }
.listing-header-info{ padding-left:4px; }
.listing-title{ font-family:'Plus Jakarta Sans', sans-serif; font-size:28px; font-weight:800; margin:10px 0 8px; }

/* ---------- SERVICES ---------- */
.service-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; }
.service-card{ border:1px solid var(--line); border-radius:14px; background: var(--card); padding:16px 18px; box-shadow: var(--shadow); }
.service-name{ font-size:14px; font-weight:700; margin-bottom:6px; }
.service-desc{ font-size:13px; color: var(--text-dim); line-height:1.6; }

/* ---------- LISTING BUILDER (services mini-form) ---------- */
.service-builder-row{ display:flex; gap:8px; align-items:flex-start; margin-bottom:10px; }
.service-builder-list{ margin-bottom:12px; }
.service-builder-item{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:8px; background: var(--bg-2); padding:10px 12px; margin-bottom:8px; }
.service-builder-item-text strong{ font-size:13px; display:block; margin-bottom:2px; }
.service-builder-item-text span{ font-size:12px; color: var(--text-mute); }
.service-builder-remove{ background:none; border:none; color: var(--danger); cursor:pointer; font-size:14px; flex-shrink:0; }
.word-counter{ font-size:12px; color: var(--text-mute); text-align:right; margin-top:4px; }
.word-counter.over{ color: var(--danger); font-weight:600; }

/* ---------- LISTING WIZARD ---------- */
.wizard-shell{ max-width:960px; margin:0 auto; }
.wizard-steps{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; border:1px solid var(--line); border-radius:14px; background:var(--card); padding:10px; box-shadow:var(--shadow); }
.wizard-step{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; cursor:pointer; flex:1 1 auto; min-width:0; }
.wizard-step:hover{ background:var(--bg-2); }
.wizard-step-num{ width:22px; height:22px; border-radius:50%; background:var(--bg-2); color:var(--text-mute); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.wizard-step-label{ font-size:12px; color:var(--text-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wizard-step.active{ background:var(--accent-dim); }
.wizard-step.active .wizard-step-num{ background:var(--accent); color:#fff; }
.wizard-step.active .wizard-step-label{ color:var(--accent); font-weight:600; }
.wizard-step.done .wizard-step-num{ background:var(--teal); color:#fff; }
.wizard-step.done .wizard-step-label{ color:var(--text-dim); }

.wizard-banner{ border:1px solid var(--line); border-radius:10px; background:var(--bg-2); padding:12px 16px; font-size:13px; color:var(--text-dim); margin-bottom:16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.wizard-banner.success{ background:var(--teal-dim); color:var(--teal); border-color:transparent; }

.wizard-errors{ border:1px solid var(--danger); background:var(--danger-dim); border-radius:12px; padding:14px 18px; margin-bottom:16px; }
.wizard-errors-title{ font-size:13px; font-weight:700; color:var(--danger); margin-bottom:6px; }
.wizard-error-item{ font-size:13px; color:var(--danger); line-height:1.7; }

.wizard-panel{ border:1px solid var(--line); border-radius:16px; background:var(--card); padding:32px; box-shadow:var(--shadow); margin-bottom:16px; }
.wizard-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.wizard-nav #wiz-draft{ margin-right:auto; }

/* Upload boxes */
.upload-box{ border:1px dashed var(--line-strong); border-radius:12px; background:var(--bg-2); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.upload-box img{ width:100%; height:100%; }
.upload-box-square{ width:160px; height:160px; }
.upload-box-square img{ object-fit:contain; }
.upload-box-wide{ width:100%; aspect-ratio:16/5; }
.upload-box-wide img{ object-fit:cover; }
.upload-box-empty{ color:var(--text-mute); font-size:12px; text-align:center; padding:16px; }
.upload-meta{ font-size:12px; color:var(--text-mute); margin-top:8px; }
.upload-actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }

/* Services / FAQ builder extras */
.service-builder-item-actions{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
.service-builder-move{ background:none; border:1px solid var(--line-strong); border-radius:6px; width:24px; height:24px; font-size:10px; color:var(--text-mute); cursor:pointer; }
.service-builder-move:disabled{ opacity:0.3; cursor:default; }

/* Opening hours */
.hours-actions{ display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.hours-editor{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.hours-row{ display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.hours-row:last-child{ border-bottom:none; }
.hours-day{ width:90px; font-size:13px; font-weight:600; flex-shrink:0; }
.hours-check{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim); flex-shrink:0; }
.hours-row input[type="time"]{ background:var(--bg-2); border:1px solid var(--line-strong); border-radius:6px; padding:6px 8px; font-size:13px; color:var(--text); }
.hours-sep{ color:var(--text-mute); }

/* Review + live preview */
.review-grid{ display:grid; grid-template-columns: 1fr 1.3fr; gap:28px; align-items:start; }
.checklist{ margin-bottom:18px; }
.checklist-item{ font-size:13px; padding:6px 0; border-bottom:1px solid var(--line); }
.checklist-item.ok{ color:var(--teal); }
.checklist-item.missing{ color:var(--danger); }
.preview-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; flex-wrap:wrap; gap:8px; }
.preview-toggle{ display:flex; gap:6px; }
.preview-toggle .btn-ghost{ font-size:12px; padding:6px 10px; }
.preview-toggle .btn-ghost.active{ background:var(--accent-dim); color:var(--accent); border-color:transparent; }
.preview-frame{ border:1px solid var(--line); border-radius:16px; background:var(--bg-2); padding:16px; max-height:640px; overflow-y:auto; }
.preview-frame.preview-mobile{ max-width:375px; margin:0 auto; }
.preview-inner{ background:var(--bg); border-radius:12px; padding:4px; }

@media (max-width: 1024px){
  .review-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 600px){
  .wizard-panel{ padding:20px; }
  .wizard-step-label{ display:none; }
  .wizard-step{ flex:0 0 auto; padding:8px; }
  .upload-box-square{ width:120px; height:120px; }
  .hours-row{ gap:8px; }
  .hours-day{ width:100%; }
  .hours-row input[type="time"]{ flex:1; min-width:0; }
  .wizard-nav{ flex-direction:column; align-items:stretch; }
  .wizard-nav button{ width:100%; }
  .preview-frame{ max-height:480px; }
}

/* ---------- EMAIL OTP VERIFY WIDGET ---------- */
.email-verify-widget{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.email-verify-widget .btn-ghost, .email-verify-widget .btn-solid{ font-size:12px; padding:7px 12px; }
.ev-status{ font-size:12px; color: var(--text-mute); }
.ev-status.success{ color: var(--teal); font-weight:600; }
.ev-status.error{ color: var(--danger); }
.ev-code-row{ display:flex; gap:8px; align-items:center; width:100%; margin-top:6px; }
.ev-code-input{
  width:120px; letter-spacing:3px; font-family:'IBM Plex Mono', monospace; text-align:center;
  background: var(--bg-2); border:1px solid var(--line-strong); color: var(--text);
  padding:8px 10px; border-radius:8px; font-size:14px;
}
.ev-code-input:focus{ outline:none; border-color: var(--accent); background:#fff; }

@media (max-width: 600px){
  .breadcrumb{ padding: 12px 20px 0; font-size:12px; }
  .crumb-current{ max-width:140px; }
  .listing-hero{ height:140px; margin-bottom:48px; }
  .listing-logo{ width:64px; height:64px; left:16px; bottom:-24px; border-width:3px; }
  .listing-title{ font-size:22px; }
  .service-grid{ grid-template-columns: 1fr; }
}

/* ---------- ABOUT / CONTACT / LEGAL ---------- */
.prose-card{ border:1px solid var(--line); border-radius:16px; background: var(--card); padding:32px; box-shadow: var(--shadow); }
.prose-card p{ font-size:14px; color: var(--text-dim); line-height:1.8; margin-bottom:14px; }
.prose-card h3{ font-family:'Plus Jakarta Sans', sans-serif; font-size:18px; font-weight:700; margin: 20px 0 10px; }
.prose-card ul{ margin: 0 0 14px 20px; color: var(--text-dim); font-size:14px; line-height:1.9; }

/* ---------- ABOUT PAGE: platform illustration (hub-and-spoke) ---------- */
.about-illo{
  position:relative; aspect-ratio: 2.3 / 1; min-height:320px;
  background: linear-gradient(160deg, var(--card-2), #fff); border:1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow:hidden;
}
.about-illo-lines{ position:absolute; inset:0; width:100%; height:100%; }
.about-illo-lines line{ stroke: var(--line-strong); stroke-width:0.45; stroke-dasharray:2.2 2.2; }
.about-illo-hub{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:88px; height:88px; display:flex; align-items:center; justify-content:center;
}
.about-illo-hub-ring{
  position:absolute; inset:0; border-radius:50%; border:1px solid var(--accent);
  opacity:0; animation: illo-ping 2.6s cubic-bezier(0.2,0.6,0.4,1) infinite;
}
.about-illo-hub-ring.d2{ animation-delay:0.9s; }
.about-illo-hub-core{
  position:relative; width:56px; height:56px; border-radius:50%;
  background: var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 18px rgba(37,99,235,0.35);
}
.about-illo-hub-core .tw-icon{ width:24px; height:24px; }
.about-illo-node{
  position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:6px; width:118px; text-align:center;
}
.about-illo-node-icon{
  width:42px; height:42px; border-radius:12px; background: var(--accent-dim); color: var(--accent);
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow); flex-shrink:0;
}
.about-illo-node-icon .tw-icon{ width:20px; height:20px; }
.about-illo-node-label{ font-size:11.5px; font-weight:600; color: var(--text-dim); line-height:1.3; }

@keyframes illo-ping{
  0%{ opacity:0.45; transform:scale(0.8); }
  80%, 100%{ opacity:0; transform:scale(1.55); }
}

@media (max-width: 768px){
  .about-illo{ aspect-ratio:auto; min-height:0; padding:24px 16px; }
  .about-illo-lines, .about-illo-hub{ display:none; }
  .about-illo-node{ position:static; transform:none; width:auto; flex-direction:row; text-align:left; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
  .about-illo-node:last-child{ border-bottom:none; }
  .about-illo-node-label{ font-size:13px; }
}
@media (prefers-reduced-motion: reduce){
  .about-illo-hub-ring{ animation:none; opacity:0; }
}

.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; }
.contact-info-card{ border:1px solid var(--line); border-radius:16px; background: var(--card); padding:26px; box-shadow: var(--shadow); }
.contact-row{ display:flex; align-items:flex-start; gap:12px; margin-bottom:18px; }
.contact-row-icon{ width:36px; height:36px; border-radius:8px; background: var(--accent-dim); color: var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-row-label{ font-size:12px; color: var(--text-mute); margin-bottom:2px; }
.contact-row-value{ font-size:14px; color: var(--text); font-weight:500; }
.tw-textarea{ width:100%; background: var(--bg-2); border:1px solid var(--line-strong); color: var(--text); padding:10px 12px; border-radius:8px; font-size:14px; font-family:'Inter',sans-serif; resize:vertical; min-height:110px; }

/* ---------- FORMS (submission pages) ---------- */
.form-card{ border:1px solid var(--line); border-radius:16px; background: var(--card); padding:32px; max-width:640px; box-shadow: var(--shadow); }
.form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.file-drop{ border:1.5px dashed var(--line-strong); border-radius:10px; padding:22px; text-align:center; font-size:13px; color:var(--text-mute); background: var(--bg-2); cursor:pointer; }
.file-drop:hover{ border-color: var(--accent); }

/* ---------- FOOTER ---------- */
.footer-expanded{ max-width:1120px; margin:0 auto; padding: 40px 32px 20px; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:28px; }
.footer-col-title{ font-size:13px; font-weight:700; color: var(--text); margin-bottom:14px; }
.footer-col a{ display:block; font-size:13px; color: var(--text-mute); margin-bottom:10px; }
.footer-col a:hover{ color: var(--text-dim); }
.footer-brand-sub{ font-size:13px; color: var(--text-mute); line-height:1.7; margin-top:10px; max-width:280px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:20px; border-top:1px solid var(--line); font-size:12px; color: var(--text-mute); }

/* ---------- ADMIN DASHBOARD ---------- */
.admin-shell{ display:grid; grid-template-columns:250px 1fr; min-height:100vh; background:var(--bg-2); font-size:15px; }
.admin-sidebar{ background: var(--bg-2); border-right:1px solid var(--line); padding:26px 16px; overflow-y:auto; }
.admin-sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(11,30,57,0.5); z-index:290; }
.admin-sidebar-close, .admin-mobile-toggle{ display:none; background:none; border:none; cursor:pointer; color:var(--text-dim); width:36px; height:36px; align-items:center; justify-content:center; border-radius:8px; }
.admin-sidebar-close:hover, .admin-mobile-toggle:hover{ background:var(--bg-2); }
.admin-nav-section-label{ margin-top:16px; font-size:11.5px; text-transform:uppercase; letter-spacing:0.6px; font-weight:700; color:var(--text-mute); padding:10px 14px 6px; }
.admin-nav-item{ display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:10px; font-size:14.5px; font-weight:500; color: var(--text-dim); cursor:pointer; margin-bottom:2px; min-height:42px; transition:background 0.15s ease, color 0.15s ease; }
.admin-nav-item svg{ width:19px; height:19px; flex-shrink:0; stroke-width:2; }
.admin-nav-item.active, .admin-nav-item:hover{ background:#fff; color: var(--accent); box-shadow: var(--shadow); font-weight:700; }
.admin-main{ padding:28px 34px 48px; max-width:100%; overflow-x:hidden; position:relative; background:var(--bg-2); }

/* Overview header */
.ov-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px 30px; box-shadow:var(--shadow); margin-bottom:24px; }
.ov-header-title{ font-family:'Plus Jakarta Sans',sans-serif; font-size:27px; font-weight:800; }
.ov-header-sub{ font-size:14.5px; color:var(--text-mute); margin-top:5px; }
.ov-header-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ov-updated{ font-size:12.5px; color:var(--text-mute); }
.ov-header-actions .admin-btn{ display:inline-flex; align-items:center; gap:6px; margin-right:0; padding:9px 16px; }
.ov-header-actions svg{ width:15px; height:15px; }

/* KPI cards */
.admin-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.admin-stat-card{ border:1px solid var(--line); border-radius:16px; padding:20px 22px; background:#fff; box-shadow: var(--shadow); cursor:pointer; transition:transform 0.15s ease, box-shadow 0.15s ease; }
.admin-stat-card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(20,24,31,0.12); border-color:var(--line-strong); }
.admin-stat-icon{ width:46px; height:46px; border-radius:12px; background:var(--accent-dim); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.admin-stat-icon svg{ width:22px; height:22px; }
.admin-stat-num{ font-size:31px; font-weight:800; font-family:'Plus Jakarta Sans', sans-serif; line-height:1; }
.admin-stat-label{ font-size:14px; color:var(--text-dim); font-weight:700; margin-top:8px; }
.admin-stat-desc{ font-size:12.5px; color:var(--text-mute); margin-top:3px; }

/* Charts + panels grid */
.ov-charts-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-bottom:24px; }
.ov-secondary-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.ov-panel{ border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow); padding:20px 22px; min-width:0; }
.ov-panel-wide{ grid-column:span 2; }
.ov-panel-title{ font-size:15px; font-weight:700; color:var(--text); margin-bottom:16px; }
.ov-chart-box{ position:relative; height:240px; }
.ov-chart-box-sm{ height:180px; }
.ov-legend{ display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:14px; font-size:12.5px; color:var(--text-dim); }
.ov-legend-item{ display:inline-flex; align-items:center; gap:7px; font-weight:500; }
.ov-legend-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }

/* Ranked lists (Top Cities / Categories) */
.ov-ranked-list{ display:flex; flex-direction:column; gap:11px; }
.ov-ranked-row{ display:grid; grid-template-columns:92px 1fr 32px; align-items:center; gap:10px; font-size:13px; }
.ov-ranked-label{ color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ov-ranked-track{ height:9px; background:var(--bg-2); border-radius:100px; overflow:hidden; }
.ov-ranked-fill{ height:100%; background:var(--accent); border-radius:100px; }
.ov-ranked-count{ text-align:right; font-weight:700; color:var(--text); }

/* Activity feed */
.ov-activity-feed{ display:flex; flex-direction:column; gap:13px; max-height:280px; overflow-y:auto; }
.ov-activity-row{ display:flex; gap:11px; align-items:flex-start; }
.ov-activity-icon{ width:32px; height:32px; border-radius:9px; background:var(--accent-dim); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ov-activity-icon svg{ width:16px; height:16px; }
.ov-activity-text{ font-size:13.5px; color:var(--text-dim); line-height:1.45; }
.ov-activity-time{ font-size:12px; color:var(--text-mute); margin-top:2px; }

/* Secondary panel mini rows */
.admin-table-compact th, .admin-table-compact td{ padding:10px 13px; font-size:13.5px; }
.ov-pending-row{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:var(--bg-2); border:none; border-radius:11px; padding:12px 14px; margin-bottom:8px; cursor:pointer; font-size:13.5px; color:var(--text-dim); transition:background 0.15s ease; }
.ov-pending-row:hover{ background:var(--accent-dim); }
.ov-pending-row svg{ width:17px; height:17px; flex-shrink:0; color:var(--accent); }
.ov-pending-row span{ flex:1; }
.ov-pending-chevron{ opacity:0.5; }
.ov-mini-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.ov-mini-row:last-child{ border-bottom:none; }
.ov-mini-time{ font-size:12px; color:var(--text-mute); white-space:nowrap; }

/* Quick actions */
.ov-quick-actions{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.ov-quick-action{ display:flex; flex-direction:column; align-items:center; gap:9px; padding:18px 12px; border:1px solid var(--line); border-radius:14px; background:var(--bg-2); cursor:pointer; font-size:13px; font-weight:600; color:var(--text-dim); text-align:center; min-height:48px; transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.ov-quick-action:hover{ background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
.ov-quick-action svg{ width:23px; height:23px; }

.admin-table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.admin-table th{ text-align:left; font-size:12.5px; color:var(--text-mute); font-weight:700; text-transform:uppercase; letter-spacing:0.3px; padding:14px 18px; background: var(--bg-2); border-bottom:1px solid var(--line); }
.admin-table td{ padding:14px 18px; font-size:14.5px; border-bottom:1px solid var(--line); vertical-align:top; }
.admin-table tr:last-child td{ border-bottom:none; }
.admin-table tr:hover td{ background:var(--bg-2); }
.badge-pending{ background:var(--vivid-orange-dim); color:var(--vivid-orange); padding:4px 12px; border-radius:100px; font-size:12px; font-weight:700; }
.badge-approved{ background:var(--vivid-green-dim); color:var(--vivid-green); padding:4px 12px; border-radius:100px; font-size:12px; font-weight:700; }
.badge-rejected{ background:var(--vivid-red-dim); color:var(--vivid-red); padding:4px 12px; border-radius:100px; font-size:12px; font-weight:700; }
.badge-paused{ background:var(--bg-2); color:var(--text-mute); padding:4px 12px; border-radius:100px; font-size:12px; font-weight:700; }
.badge-published{ background:var(--vivid-green-dim); color:var(--vivid-green); padding:4px 12px; border-radius:100px; font-size:12px; font-weight:700; }
.badge-draft{ background:var(--bg-2); color:var(--text-mute); padding:4px 12px; border-radius:100px; font-size:12px; font-weight:700; }
.badge-submitted{ background:var(--vivid-orange-dim); color:var(--vivid-orange); padding:4px 12px; border-radius:100px; font-size:12px; font-weight:700; }
.admin-btn{ border:1px solid var(--line-strong); background:#fff; color:var(--text-dim); padding:8px 15px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600; cursor:pointer; margin-right:6px; transition:background 0.15s ease, border-color 0.15s ease; }
.admin-btn:hover{ background:var(--bg-2); border-color:var(--text-mute); }
.admin-btn.approve{ background: var(--vivid-green); color:#fff; border-color:var(--vivid-green); }
.admin-btn.approve:hover{ background:#128a3e; }
.admin-btn.reject{ background: var(--vivid-red); color:#fff; border-color:var(--vivid-red); }
.admin-btn.reject:hover{ background:#B91C1C; }
.admin-login-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg, var(--accent-dim) 0%, var(--bg) 45%, var(--teal-dim) 100%); }

@media (max-width: 1100px){
  .ov-charts-grid, .ov-secondary-grid{ grid-template-columns:repeat(2, 1fr); }
  .ov-panel-wide{ grid-column:span 2; }
  .admin-stat-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 960px){
  .admin-shell{ grid-template-columns:1fr; }
  .admin-sidebar{
    position:fixed; top:0; left:0; bottom:0; width:270px; max-width:82vw; z-index:300;
    transform:translateX(-100%); transition:transform 0.25s ease; box-shadow:var(--shadow);
  }
  .admin-sidebar.open{ transform:translateX(0); }
  .admin-sidebar-overlay.open{ display:block; }
  .admin-sidebar-close{ display:flex; }
  .admin-mobile-toggle{ display:flex; margin-bottom:16px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
  .admin-main{ padding:18px 16px 40px; }
}
@media (max-width: 760px){
  .ov-charts-grid, .ov-secondary-grid{ grid-template-columns:1fr; }
  .ov-panel-wide{ grid-column:span 1; }
  .admin-stat-grid{ grid-template-columns:repeat(2,1fr); }
  .ov-quick-actions{ grid-template-columns:repeat(2, 1fr); }
  .ov-header{ flex-direction:column; }
}

@media (max-width: 860px){
  .hero{ grid-template-columns: 1fr; }
  .day-grid{ grid-template-columns: repeat(2, 1fr); }
  .metric-grid{ grid-template-columns: repeat(2, 1fr); }
  .temp-big{ font-size: 78px; }
  .nav-links{ display:none; }
  .aqi-hero{ grid-template-columns: 1fr; }
  .tenday-row{ grid-template-columns: 90px 30px 1fr 60px; }
  .td-range, .td-temp-now{ display:none; }
  .hourly-row{ grid-template-columns: 70px 30px 1fr 70px; }
  .hr-wind{ display:none; }
  .gp-grid, .blog-grid{ grid-template-columns: 1fr; }
  .biz-grid{ grid-template-columns: repeat(2, 1fr); }
  .biz-grid-full{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .form-row-2{ grid-template-columns: 1fr; }
}

/* ---------- SPONSORED CONTENT ---------- */
.sponsored-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.sponsored-card{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background: var(--card); box-shadow: var(--shadow); transition:transform 0.15s ease, box-shadow 0.15s ease; }
.sponsored-card:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(20,24,31,0.09); }
.sponsored-img-slot{
  height:140px; background: repeating-linear-gradient(45deg, var(--bg-2), var(--bg-2) 10px, #EEF1F6 10px, #EEF1F6 20px);
  display:flex; align-items:center; justify-content:center; color: var(--text-mute); font-size:12px; text-transform:uppercase; letter-spacing:0.5px;
}
.sponsored-body{ padding:14px 16px; }
.sponsored-title{ font-size:14px; font-weight:600; margin-bottom:4px; }
.sponsored-advertiser{ font-size:12px; color: var(--text-mute); }

@media (max-width: 860px){
  .sponsored-grid{ grid-template-columns: 1fr; }
}

/* ---------- TODAY'S HIGHLIGHTS (weather.com style) ---------- */
.highlights-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
.highlight-card{ border:1px solid var(--line); border-radius:14px; background: var(--card); padding:18px; box-shadow: var(--shadow); transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; position:relative; overflow:hidden; }
.highlight-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--accent), var(--teal)); opacity:0; transition:opacity 0.15s ease; }
.highlight-card:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(20,24,31,0.08); border-color:var(--line-strong); }
.highlight-card:hover::before{ opacity:1; }
.highlight-label{ display:flex; align-items:center; gap:8px; font-size:12px; color: var(--text-mute); text-transform:uppercase; letter-spacing:0.5px; font-weight:600; margin-bottom:12px; }
.highlight-value{ font-size:22px; font-weight:800; font-family:'Plus Jakarta Sans', sans-serif; }
.highlight-note{ font-size:12px; color: var(--text-dim); margin-top:4px; }

/* ---------- LIFE INDEX ---------- */
.life-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
.life-card{ border:1px solid var(--line); border-radius:14px; background: var(--card); padding:18px; box-shadow: var(--shadow); border-top:3px solid var(--line-strong); }
.life-title{ font-size:13px; color: var(--text-mute); font-weight:600; margin-bottom:8px; }
.life-label{ font-size:18px; font-weight:800; font-family:'Plus Jakarta Sans', sans-serif; margin-bottom:4px; }
.life-note{ font-size:12px; color: var(--text-dim); }

/* ---------- PHASE 2: favorite star, rain nowcast pill, wear chips, favorites grid ---------- */
.location-row{ display:flex; align-items:center; gap:12px; }
.tw-fav-star{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line-strong); background:#fff;
  color:var(--text-mute); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tw-fav-star:hover{ background:var(--bg-2); }
.tw-fav-star.active{ background:var(--amber-dim); border-color:transparent; color:var(--amber); }

.alert-pill-rain{ background:var(--rain-dim); border-color:#C7D8FC; color:#1D4ED8; margin-top:10px; }

.wear-chip-list{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px; }
.wear-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--text-dim); background:var(--bg-2); border:1px solid var(--line); padding:7px 12px; border-radius:100px; }

.favorites-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
.favorite-card{
  position:relative; display:block; text-align:left; border:1px solid var(--line); border-radius:14px; background:var(--card);
  padding:16px; box-shadow:var(--shadow); transition:transform 0.15s ease, box-shadow 0.15s ease; text-decoration:none;
}
.favorite-card:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(20,24,31,0.08); }
.favorite-card-remove{
  position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%; border:none; background:var(--bg-2);
  color:var(--text-mute); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.favorite-card-remove:hover{ background:var(--danger-dim); color:var(--danger); }
.favorite-card-remove .tw-icon{ width:13px; height:13px; }
.favorite-card-name{ font-size:13px; font-weight:700; margin-bottom:8px; padding-right:20px; }
.favorite-card-temp{ font-size:22px; font-weight:800; font-family:'Plus Jakarta Sans', sans-serif; margin-bottom:2px; }
.favorite-card-cond{ font-size:12px; color:var(--text-mute); }
.favorites-compare-table{ width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--card); box-shadow:var(--shadow); }
.favorites-compare-table th, .favorites-compare-table td{ padding:12px 14px; text-align:left; font-size:13px; border-bottom:1px solid var(--line); }
.favorites-compare-table th{ font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-mute); background:var(--bg-2); }
.favorites-compare-table tr:last-child td{ border-bottom:none; }
@media (max-width: 860px){
  .favorites-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .favorites-grid{ grid-template-columns: 1fr; }
  .favorites-compare-table{ display:block; overflow-x:auto; }
}

/* ---------- PHASE 3: earthquakes / conditions map / travel weather / wildfire ---------- */
.radar-layer-badge-live{ background:var(--teal-dim); color:var(--teal); }
.radar-layer-note{ font-size:11.5px; color:var(--text-mute); padding:8px 4px 2px; line-height:1.5; border-top:1px solid var(--line); margin-top:4px; }
.radar-layer-note a{ color:var(--accent); font-weight:600; }

.quake-controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.quake-controls select{
  background:var(--bg-2); border:1px solid var(--line-strong); color:var(--text); padding:9px 12px;
  border-radius:8px; font-size:13px; font-family:'Inter',sans-serif;
}
.quake-count{ font-size:13px; color:var(--text-mute); margin-left:auto; }
.quake-map-shell{ border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); }
#quake-map, #cond-map, #fire-map{ width:100%; height:460px; }
.quake-legend{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:var(--card); border:1px solid var(--line); padding:10px 16px; border-radius:10px; font-size:12px; color:var(--text-dim); margin-top:14px; }
.quake-attribution{ margin-left:auto; font-size:11px; color:var(--text-mute); }
.quake-attribution a{ color:var(--text-mute); }
.quake-table-wrap{ border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); background:var(--card); }
.quake-mag-pill{ display:inline-block; padding:3px 10px; border-radius:100px; font-size:12px; font-weight:700; }
@media (max-width: 768px){
  #quake-map, #cond-map, #fire-map{ height:320px; }
  .quake-attribution{ margin-left:0; width:100%; }
}

.travel-tabs{ display:flex; gap:6px; flex-wrap:wrap; border:1px solid var(--line); border-radius:14px; background:var(--card); padding:8px; box-shadow:var(--shadow); margin-bottom:0; }
.travel-tab{
  display:inline-flex; align-items:center; gap:7px; flex:1 1 auto; justify-content:center;
  background:none; border:none; padding:10px 14px; border-radius:10px; font-size:13px; font-weight:600;
  color:var(--text-mute); cursor:pointer; font-family:'Inter',sans-serif; transition:background 0.15s ease, color 0.15s ease;
}
.travel-tab:hover{ background:var(--bg-2); }
.travel-tab.active{ background:var(--accent-dim); color:var(--accent); }

.travel-airport-picker, .travel-flight-picker, .travel-road-picker{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; border:1px solid var(--line); border-radius:16px;
  background:var(--card); padding:16px; box-shadow:var(--shadow); margin-bottom:18px;
}
.travel-airport-picker input, .travel-flight-picker input, .travel-road-picker input{
  flex:1 1 200px; background:var(--bg-2); border:1px solid var(--line-strong); color:var(--text);
  padding:10px 12px; border-radius:8px; font-size:13px; font-family:'Inter',sans-serif;
}
.travel-flight-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 700px){
  .travel-flight-cols{ grid-template-columns:1fr; }
  .travel-airport-picker, .travel-flight-picker, .travel-road-picker{ flex-direction:column; align-items:stretch; }
}

.weather-tabs{ display:flex; gap:8px; flex-wrap:wrap; max-width:1120px; margin:0 auto; padding:0 32px 18px; }
.weather-tab{ font-size:13px; font-weight:600; color:var(--text-dim); background:var(--bg-2); border:1px solid var(--line); padding:9px 16px; border-radius:100px; text-decoration:none; }
.weather-tab.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.weather-tab:hover:not(.active){ border-color:var(--line-strong); }

/* ---------- HOMEPAGE MAIN + SIDEBAR LAYOUT (~72/28) ---------- */
.weather-layout{ max-width:1120px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns: 2.6fr 1fr; gap:28px; align-items:start; }
.weather-layout-main{ display:flex; flex-direction:column; gap:44px; min-width:0; }
.weather-layout-side{ display:flex; flex-direction:column; gap:20px; position:sticky; top:88px; }
@media (max-width: 1024px){
  .weather-layout{ grid-template-columns: 1fr; }
  .weather-layout-side{ position:static; }
}

.side-card{ border:1px solid var(--line); border-radius:16px; background:var(--card); padding:20px; box-shadow:var(--shadow); transition:box-shadow 0.15s ease, border-color 0.15s ease; }
.side-card:hover{ box-shadow:0 10px 24px rgba(20,24,31,0.08); border-color:var(--line-strong); }
.side-card-title{ font-size:12px; text-transform:uppercase; letter-spacing:0.6px; font-weight:700; color:var(--text-mute); margin-bottom:14px; }

/* AQI sidebar card */
.aqi-side-value-row{ display:flex; align-items:baseline; gap:10px; margin-bottom:4px; }
.aqi-side-value{ font-size:38px; font-weight:800; font-family:'Plus Jakarta Sans',sans-serif; }
.aqi-side-band{ font-size:14px; font-weight:700; }
.aqi-side-desc{ font-size:12.5px; color:var(--text-dim); line-height:1.6; margin:8px 0 12px; }
.aqi-side-primary{ font-size:12px; color:var(--text-mute); margin-bottom:14px; }

/* Sun & moon sidebar card */
.sunmoon-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
.sunmoon-row:last-child{ border-bottom:none; }
.sunmoon-label{ color:var(--text-mute); display:flex; align-items:center; gap:6px; }
.sunmoon-value{ font-weight:700; color:var(--text); }
.sunmoon-unavailable{ color:var(--text-mute); font-style:italic; font-weight:400; font-size:12px; }

/* Outlook card */
.outlook-card{ border:1px solid var(--line); border-radius:16px; background:var(--card); padding:22px 24px; box-shadow:var(--shadow); font-size:14.5px; line-height:1.7; color:var(--text-dim); }

/* Suitability */
.suitability-badge-row{ display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.suitability-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:100px; font-weight:700; font-size:14px; color:#fff; }
.suitability-timeline{ display:flex; gap:2px; align-items:stretch; height:16px; margin:16px 0 6px; border-radius:100px; overflow:hidden; }
.suitability-bar{ flex:1 1 auto; min-width:2px; cursor:default; }
.suitability-timeline-labels{ display:flex; justify-content:space-between; font-size:10px; color:var(--text-mute); margin-bottom:18px; }
.suitability-recommend{ font-size:13.5px; color:var(--text-dim); background:var(--bg-2); border-radius:10px; padding:12px 14px; margin-bottom:18px; }
.suggestions-list{ list-style:none; display:flex; flex-direction:column; gap:10px; margin:0 0 14px; padding:0; }
.suggestions-list li{ font-size:13.5px; color:var(--text-dim); display:flex; gap:10px; align-items:flex-start; }
.suitability-disclaimer{ font-size:11.5px; color:var(--text-mute); border-top:1px solid var(--line); padding-top:12px; }

/* AI Health / AI Farming advisory (Phase 4) */
.ai-advisory-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-bottom:18px; }
.ai-advisory-card{ border:1px solid var(--line); border-radius:14px; background:var(--card); padding:16px; box-shadow: var(--shadow); }
.ai-advisory-head{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-mute); margin-bottom:8px; }
.ai-advisory-level{ font-size:17px; font-weight:700; margin-bottom:6px; }
.ai-advisory-note{ font-size:12.5px; color:var(--text-dim); line-height:1.5; }
.ai-alert-list{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:10px; }
.ai-alert-item{ display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:12px; font-size:13.5px; line-height:1.5; border:1px solid var(--line); background:var(--bg-2); }
.ai-alert-item.ai-alert-danger{ border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, var(--bg-2)); }
.ai-alert-item.ai-alert-amber{ border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); background: color-mix(in srgb, var(--amber) 8%, var(--bg-2)); }
.ai-alert-item.ai-alert-good{ border-color: color-mix(in srgb, var(--teal) 40%, var(--line)); background: color-mix(in srgb, var(--teal) 8%, var(--bg-2)); }

/* My Weather dashboard tab (Phase 5) */
.myweather-list{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.myweather-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border:1px solid var(--line); border-radius:12px; background:var(--card); padding:12px 14px; }
.myweather-row-name{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:13.5px; }
.myweather-row-actions{ display:flex; align-items:center; gap:10px; }
.myweather-alert-toggle{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-mute); cursor:pointer; }
.myweather-remove{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:var(--bg-2); color:var(--text-mute); cursor:pointer; }
.myweather-remove:hover{ color:var(--danger); border-color:var(--danger); }
.myweather-prefs{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.myweather-pref-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border:1px solid var(--line); border-radius:12px; background:var(--card); padding:12px 14px; font-size:13px; font-weight:600; }
.myweather-pref-btns{ display:flex; gap:6px; }

/* Historical Weather / Climate Charts (Phase 5) */
.climate-controls{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-bottom:20px; }
.climate-tab-group{ display:flex; gap:6px; flex-wrap:wrap; }
.climate-tab{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:100px; border:1px solid var(--line); background:var(--card); color:var(--text-dim); font-size:12.5px; font-weight:600; cursor:pointer; }
.climate-tab.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.climate-chart{ border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow: var(--shadow); padding:24px 16px 12px; margin-bottom:12px; min-height:260px; }
.climate-bars{ display:flex; align-items:flex-end; gap:8px; height:220px; overflow-x:auto; padding-bottom:4px; }
.climate-bar-col{ flex:1 0 42px; display:flex; flex-direction:column; align-items:center; height:100%; min-width:42px; }
.climate-bar-value{ font-size:10.5px; font-weight:700; color:var(--text-dim); margin-bottom:6px; white-space:nowrap; }
.climate-bar-track{ flex:1; width:100%; display:flex; align-items:flex-end; }
.climate-bar{ width:60%; margin:0 auto; border-radius:6px 6px 0 0; background:var(--accent); min-height:4px; }
.climate-bar-rain{ background:#2563EB; }
.climate-bar-humidity{ background:#0E9F8E; }
.climate-bar-label{ font-size:11px; color:var(--text-mute); margin-top:8px; }

/* AI Weather Assistant chat panel (Phase 4) */
/* ---- AI Weather Assistant: selected-location context card ---- */
.ai-context-card{ border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); padding:18px 20px; margin-bottom:16px; }
.ai-context-loc-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ai-context-loc-name{ display:inline-flex; align-items:center; gap:6px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:16px; }
.ai-context-loc-time{ font-size:12.5px; color:var(--text-mute); margin-top:4px; }
.ai-context-metrics{ display:flex; align-items:center; gap:16px; margin-top:14px; }
.ai-context-temp{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:40px; line-height:1; white-space:nowrap; }
.ai-context-cond-col{ min-width:0; }
.ai-context-cond{ font-size:14px; font-weight:600; }
.ai-context-sub{ font-size:12.5px; color:var(--text-mute); margin-top:3px; }
.ai-context-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:12px; color:var(--text-mute); flex-wrap:wrap; }
.ai-context-foot a{ color:var(--accent); font-weight:600; }
.ai-context-refresh{ font-size:12px; padding:6px 12px; }

/* ---- AI Weather Assistant: chat panel ---- */
.ai-chat-panel{ border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow: var(--shadow); display:flex; flex-direction:column; overflow:hidden; margin-bottom:16px; }
.ai-chat-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.ai-chat-panel-title{ display:flex; align-items:center; gap:8px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:15px; }
.ai-chat-reset-btn{ font-size:12.5px; padding:7px 13px; }
.ai-chat-messages{ display:flex; flex-direction:column; gap:12px; padding:20px; max-height:420px; overflow-y:auto; }
.ai-chat-msg{ display:flex; flex-direction:column; }
.ai-chat-msg-user{ align-items:flex-end; }
.ai-chat-msg-bot{ align-items:flex-start; }
.ai-chat-bubble{ max-width:78%; padding:11px 15px; border-radius:14px; font-size:13.5px; line-height:1.55; word-break:break-word; }
.ai-chat-msg-bot .ai-chat-bubble{ background:var(--bg-2); color:var(--text); border-bottom-left-radius:4px; }
.ai-chat-msg-user .ai-chat-bubble{ background:var(--accent); color:#fff; border-bottom-right-radius:4px; }
.ai-chat-msg-meta{ font-size:11px; color:var(--text-mute); margin-top:6px; }
.ai-chat-retry-btn{ display:inline-block; margin-top:8px; font-size:12px; font-weight:700; color:var(--accent); background:none; border:none; cursor:pointer; padding:0; }
.ai-chat-typing{ display:flex; align-items:center; gap:4px; padding:14px 15px; }
.ai-chat-typing span{ width:6px; height:6px; border-radius:50%; background:var(--text-mute); animation:ai-typing-bounce 1.2s ease infinite; }
.ai-chat-typing span:nth-child(2){ animation-delay:0.15s; }
.ai-chat-typing span:nth-child(3){ animation-delay:0.3s; }
@keyframes ai-typing-bounce{ 0%, 60%, 100%{ transform:translateY(0); opacity:0.5; } 30%{ transform:translateY(-4px); opacity:1; } }
.ai-chat-suggestions{ display:flex; flex-wrap:wrap; gap:8px; padding:0 20px 14px; }
.ai-chat-chip{ font-size:12px; font-weight:600; color:var(--accent); background:var(--bg-2); border:1px solid var(--line); padding:7px 13px; border-radius:100px; cursor:pointer; }
.ai-chat-chip:hover{ background:var(--card); border-color:var(--accent); }
.ai-chat-input-row{ display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--line); }
.ai-chat-input-row input{ flex:1; min-width:0; border:1px solid var(--line); border-radius:10px; padding:11px 14px; font-size:13.5px; background:var(--bg-2); color:var(--text); }
.ai-chat-input-row input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.ai-chat-input-row input:disabled{ opacity:0.6; }

/* ---- AI Weather Assistant: unavailable state (no provider key configured) ---- */
.ai-unavailable-card{ border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); padding:40px 24px; text-align:center; margin-bottom:16px; }
.ai-unavailable-icon{ width:56px; height:56px; border-radius:50%; background:var(--bg-2); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:var(--text-mute); }
.ai-unavailable-icon .tw-icon{ width:26px; height:26px; }
.ai-unavailable-title{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:18px; margin-bottom:8px; }
.ai-unavailable-sub{ font-size:13.5px; color:var(--text-mute); max-width:480px; margin:0 auto 20px; line-height:1.6; }
.ai-unavailable-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

@media (max-width: 600px){
  .ai-context-temp{ font-size:32px; }
  .ai-context-metrics{ gap:12px; }
  .ai-chat-bubble{ max-width:88%; }
  .ai-unavailable-card{ padding:28px 18px; }
}

/* ---- shared weather summary bar (Stage C — hourly/16-day/monthly/AQI/radar) ---- */
/* Same container convention as .page-head/.section/.breadcrumb (max-width
   1120px, centered, 32px horizontal gutter) — without this it was a direct
   sibling of .page-head with no width rule of its own, so it stretched to
   the full width of <main> instead of lining up with every other section
   on the page (visible on wide viewports as a card noticeably wider than
   the title/content above and below it). */
.tw-weather-summary{ max-width:1120px; margin:0 auto 20px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); padding:16px 32px; }
.tw-ws-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.tw-ws-loc{ display:inline-flex; align-items:center; gap:6px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:15px; min-width:0; }
.tw-ws-loc span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tw-ws-change{ font-size:12px; padding:6px 12px; display:inline-flex; align-items:center; gap:5px; flex-shrink:0; }
.tw-ws-change .tw-icon{ width:13px; height:13px; }
.tw-ws-time{ font-size:12px; color:var(--text-mute); margin-top:4px; }
.tw-ws-metrics{ display:flex; align-items:center; gap:14px; margin-top:12px; }
.tw-ws-temp{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:32px; line-height:1; white-space:nowrap; }
.tw-ws-cond-col{ min-width:0; }
.tw-ws-cond{ font-size:13.5px; font-weight:600; }
.tw-ws-sub{ font-size:12px; color:var(--text-mute); margin-top:2px; }
.tw-ws-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); font-size:11.5px; color:var(--text-mute); flex-wrap:wrap; }
.tw-ws-refresh{ font-size:11.5px; padding:5px 11px; display:inline-flex; align-items:center; gap:5px; }
.tw-ws-refresh .tw-icon{ width:13px; height:13px; }
.tw-ws-error{ font-size:13px; color:var(--text-dim); text-align:center; padding:6px 0; }
.tw-ws-retry-btn{ background:none; border:none; color:var(--accent); font-weight:700; cursor:pointer; padding:0; font-size:13px; }
@media (max-width: 600px){
  .tw-ws-temp{ font-size:28px; }
}

/* Weather Timeline strip (Phase 5 — Past 7d / Today / Next 8d shortcuts) */
.timeline-strip{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; }
.timeline-chip{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:58px; padding:10px 6px; border-radius:12px; border:1px solid var(--line); background:var(--card); cursor:pointer; }
.timeline-chip:hover{ border-color:var(--accent); }
.timeline-chip.active{ background:var(--accent); border-color:var(--accent); }
.timeline-chip.active .timeline-chip-day, .timeline-chip.active .timeline-chip-date{ color:#fff; }
.timeline-chip-day{ font-size:12px; font-weight:700; color:var(--text); }
.timeline-chip-date{ font-size:11px; color:var(--text-mute); }

/* Nearby Places (Phase 5 — Business Directory Integration via OSM Overpass) */
.nearby-tabs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:16px; }
.nearby-tab{ display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:100px; border:1px solid var(--line); background:var(--card); color:var(--text-dim); font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer; }
.nearby-tab.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.nearby-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-bottom:12px; }
.nearby-card{ border:1px solid var(--line); border-radius:14px; background:var(--card); padding:16px; box-shadow: var(--shadow); }
.nearby-card-name{ font-weight:700; font-size:14px; margin-bottom:4px; }
.nearby-card-address{ font-size:12.5px; color:var(--text-mute); margin-bottom:10px; min-height:16px; }
.nearby-card-map-link{ font-size:12.5px; font-weight:600; color:var(--accent); text-decoration:none; }
.nearby-card-map-link:hover{ text-decoration:underline; }
.nearby-attribution{ font-size:11px; color:var(--text-mute); }

/* Day-card expand (native <details>) */
.day-card-details{ border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); overflow:hidden; }
.day-card-details summary{ list-style:none; cursor:pointer; padding:16px; }
.day-card-details summary::-webkit-details-marker{ display:none; }
.day-card-expanded{ padding:0 16px 16px; font-size:12.5px; color:var(--text-dim); border-top:1px solid var(--line); margin-top:4px; padding-top:12px; display:flex; flex-direction:column; gap:6px; }

/* Hourly current-hour highlight + sunrise/sunset marker */
.hour-card.now{ background:var(--accent); border-color:var(--accent); }
.hour-card.now *{ color:#fff !important; }
.hour-card.marker{ background:var(--bg-2); border-style:dashed; }
.hourly-strip-controls{ display:flex; justify-content:flex-end; gap:8px; margin-bottom:8px; }
.hourly-strip-controls button{ width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:#fff; cursor:pointer; }
.hourly-strip-controls button:hover{ background:var(--bg-2); }

/* ---------- RADAR TEASER ---------- */
.radar-teaser{
  display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap:24px;
  border:1px solid var(--line); border-radius:16px; background: var(--card); padding:26px; box-shadow: var(--shadow);
}
.radar-teaser-visual{
  height:160px; border-radius:12px; position:relative; overflow:hidden;
  background: linear-gradient(160deg, var(--bg-2), #fff);
  background-image:
    radial-gradient(circle at 30% 40%, rgba(37,99,235,0.18), transparent 40%),
    radial-gradient(circle at 65% 60%, rgba(14,159,142,0.15), transparent 35%),
    linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: auto, auto, 24px 24px, 24px 24px;
}
.radar-teaser-live{
  position:absolute; top:12px; left:12px; z-index:500; background:#fff; border:1px solid var(--line);
  padding:4px 10px; border-radius:100px; font-size:11px; font-weight:700; color: var(--danger);
  display:flex; align-items:center; gap:6px; pointer-events:none;
}
.radar-teaser-dot{ width:6px; height:6px; border-radius:50%; background: var(--danger); animation: live-pulse 1.6s ease-in-out infinite; }
/* live-pulse also drives .live-dot (hero eyebrow "live" indicator, index.html) — both previously referenced this animation/class without either being defined. */
@keyframes live-pulse{ 0%, 100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.55; transform:scale(1.35); } }
.live-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--teal); margin-right:7px; vertical-align:1px; animation:live-pulse 1.6s ease-in-out infinite; flex-shrink:0; }
.radar-teaser-title{ font-size:18px; font-weight:700; margin-bottom:8px; }
.radar-teaser-sub{ font-size:13px; color: var(--text-dim); line-height:1.6; margin-bottom:16px; }

@media (max-width: 860px){
  .highlights-grid{ grid-template-columns: repeat(2, 1fr); }
  .life-grid{ grid-template-columns: repeat(2, 1fr); }
  .radar-teaser{ grid-template-columns: 1fr; }
  .ai-advisory-grid{ grid-template-columns: repeat(2, 1fr); }
  .nearby-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px){
  .ai-advisory-grid{ grid-template-columns: 1fr; }
  .nearby-grid{ grid-template-columns: 1fr; }
}

/* ================= BUSINESS DETAIL PAGE (Phase 4) ================= */
.detail-shell{ max-width:1360px; margin:0 auto; padding:16px 32px 48px; }

/* ---- Hero ---- */
.detail-hero-card{ border:1px solid var(--line); border-radius:20px; background:var(--card); box-shadow:var(--shadow); overflow:hidden; margin-bottom:20px; }
.detail-cover{ height:280px; background-size:cover; background-position:center; background-color:var(--card-2); }
.detail-cover.no-cover{ background-image:linear-gradient(135deg, var(--accent-dim), var(--teal-dim)); }
.detail-hero-body{ display:flex; gap:24px; padding:0 32px 28px; margin-top:-64px; align-items:flex-end; flex-wrap:wrap; }
.detail-logo-wrap{ flex-shrink:0; }
.detail-logo{ width:150px; height:150px; border-radius:20px; object-fit:contain; background:#fff; border:5px solid #fff; box-shadow:var(--shadow); }
.detail-logo-fallback{ display:flex; align-items:center; justify-content:center; font-size:56px; background:var(--amber-dim); color:var(--amber); }
.detail-hero-info{ flex:1; min-width:280px; padding-top:16px; }
.detail-title{ font-family:'Plus Jakarta Sans', sans-serif; font-size:30px; font-weight:800; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:8px 0 6px; }
.detail-tagline{ font-size:15px; color:var(--text-dim); margin-bottom:10px; }
.detail-rating-row{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.detail-stars{ color:var(--amber); font-size:16px; letter-spacing:1px; }
.detail-rating-num{ font-weight:700; font-size:14px; }
.detail-review-count{ font-size:13px; color:var(--text-mute); }
.detail-address-line{ font-size:14px; color:var(--text-dim); margin-bottom:18px; }
.detail-hero-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.hero-action-btn{
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong); background:#fff;
  color:var(--text-dim); padding:10px 16px; border-radius:100px; font-size:13px; font-weight:600; cursor:pointer;
  text-decoration:none; font-family:'Inter',sans-serif; transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.hero-action-btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow); background:var(--bg-2); }
.hero-action-primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.hero-action-primary:hover{ background:#1D4ED8; }

/* ---- Sticky sub-nav ---- */
/* top: matches the new premium header's height (utility bar + main row on desktop,
   just the main row once the utility bar hides at <=1024px — see overrides below) */
.detail-subnav-wrap{ position:sticky; top:104px; z-index:40; background:rgba(255,255,255,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); margin-bottom:24px; }
.detail-subnav{ display:flex; gap:4px; overflow-x:auto; padding:10px 2px; scrollbar-width:none; }
.detail-subnav::-webkit-scrollbar{ display:none; }
.detail-subnav a{ flex-shrink:0; font-size:13px; color:var(--text-mute); padding:8px 14px; border-radius:100px; white-space:nowrap; font-weight:500; }
.detail-subnav a:hover{ background:var(--bg-2); color:var(--text); }
.detail-subnav a.active{ background:var(--accent-dim); color:var(--accent); font-weight:700; }

/* ---- Two-column layout ---- */
.detail-layout{ display:grid; grid-template-columns:1fr 0.42fr; gap:24px; align-items:start; }
.detail-main{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.detail-card{ border:1px solid var(--line); border-radius:18px; background:var(--card); padding:28px; box-shadow:var(--shadow); scroll-margin-top:140px; }
.detail-card p{ font-size:14px; color:var(--text-dim); line-height:1.8; margin-bottom:12px; }
.detail-card p:last-child{ margin-bottom:0; }

/* ---- Sidebar ---- */
.detail-sidebar{ display:flex; flex-direction:column; gap:16px; position:sticky; top:157px; min-width:0; }
.sidebar-card{ border:1px solid var(--line); border-radius:16px; background:var(--card); padding:20px; box-shadow:var(--shadow); transition:box-shadow 0.15s ease, border-color 0.15s ease; }
.sidebar-card:hover{ box-shadow:0 10px 22px rgba(20,24,31,0.08); border-color:var(--line-strong); }
.sidebar-card-title{ font-family:'Plus Jakarta Sans', sans-serif; font-size:14px; font-weight:700; margin-bottom:14px; }
.ad-slot-sidebar{ height:200px; padding:0; }

.mini-card-list{ display:flex; flex-direction:column; gap:10px; }
.mini-card{ display:flex; gap:10px; align-items:center; padding:8px; border-radius:10px; }
.mini-card:hover{ background:var(--bg-2); }
.mini-card-logo{ width:44px; height:44px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.mini-card-logo-fallback{ display:flex; align-items:center; justify-content:center; font-size:18px; background:var(--amber-dim); color:var(--amber); }
.mini-card-body{ min-width:0; }
.mini-card-name{ font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-card-meta{ font-size:11px; color:var(--text-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-card-rating{ font-size:11px; color:var(--amber); margin-top:2px; }
.mini-card-rating span{ color:var(--text-mute); }
.mini-card-rating.muted{ color:var(--text-mute); }

/* ---- Services (premium cards + hover) ---- */
.service-card-hover{ transition:transform 0.15s ease, box-shadow 0.15s ease; cursor:default; }
.service-card-hover:hover{ transform:translateY(-3px); box-shadow:0 8px 24px rgba(20,24,31,0.10); }
.service-icon{ width:36px; height:36px; border-radius:10px; background:var(--accent-dim); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:10px; }

/* ---- Gallery ---- */
.gallery-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.gallery-thumb{ border:none; padding:0; border-radius:14px; overflow:hidden; cursor:pointer; aspect-ratio:4/3; background:var(--bg-2); }
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.2s ease; }
.gallery-thumb:hover img{ transform:scale(1.05); }
#lightbox-overlay{ z-index:300; }

/* ---- Why choose ---- */
.why-choose-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
.why-choose-item{ display:flex; gap:12px; align-items:flex-start; }
.why-choose-check{ width:24px; height:24px; border-radius:50%; background:var(--teal-dim); color:var(--teal); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; }
.why-choose-value{ font-size:13px; color:var(--text-mute); margin-top:2px; }

/* ---- Opening hours table ---- */
.open-status-badge{ display:inline-block; font-size:12px; font-weight:700; padding:4px 10px; border-radius:100px; background:var(--bg-2); color:var(--text-mute); margin-left:8px; }
.open-status-badge.is-open{ background:var(--teal-dim); color:var(--teal); }
.open-status-badge.is-closed{ background:var(--danger-dim); color:var(--danger); }
.hours-table{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.hours-table-row{ display:flex; justify-content:space-between; padding:11px 18px; border-bottom:1px solid var(--line); font-size:13px; }
.hours-table-row:last-child{ border-bottom:none; }
.hours-table-day{ font-weight:600; }
.hours-table-time{ color:var(--text-dim); }

/* ---- Location ---- */
.location-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:16px 0; }
.detail-map{ height:320px; border-radius:14px; overflow:hidden; border:1px solid var(--line); }

/* ---- Stage E: location landing page — nearby/parent/child link rows, ad slot label ---- */
.loc-links-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.loc-links-row:last-child{ margin-bottom:0; }
.loc-links-label{ font-size:12px; font-weight:700; color:var(--text-mute); flex-shrink:0; }
.ad-slot-label{ font-size:10px; }

/* ---- FAQ accordion ---- */
.faq-accordion{ display:flex; flex-direction:column; gap:10px; }
.faq-item{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.faq-question{
  width:100%; text-align:left; background:var(--bg-2); border:none; padding:14px 18px; font-size:14px; font-weight:600;
  cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-family:'Inter',sans-serif; color:var(--text);
}
.faq-caret{ transition:transform 0.2s ease; color:var(--text-mute); }
.faq-item.open .faq-caret{ transform:rotate(180deg); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height 0.25s ease, padding 0.25s ease; padding:0 18px; font-size:13px; color:var(--text-dim); line-height:1.7; }
.faq-item.open .faq-answer{ max-height:300px; padding:14px 18px; }

/* ---- Reviews ---- */
.reviews-summary{ display:flex; gap:32px; align-items:center; flex-wrap:wrap; margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.reviews-avg{ text-align:center; flex-shrink:0; }
.reviews-avg-num{ font-family:'Plus Jakarta Sans', sans-serif; font-size:44px; font-weight:800; line-height:1; }
.reviews-breakdown{ flex:1; min-width:200px; display:flex; flex-direction:column; gap:6px; }
.breakdown-row{ display:grid; grid-template-columns:28px 1fr 24px; align-items:center; gap:10px; font-size:12px; color:var(--text-mute); }
.breakdown-track{ height:6px; background:var(--bg-2); border-radius:100px; overflow:hidden; }
.breakdown-fill{ height:100%; background:var(--amber); border-radius:100px; }
.review-write-card{ border:1px solid var(--line); border-radius:14px; background:var(--bg-2); padding:18px; margin-bottom:20px; }
.star-picker{ font-size:26px; color:var(--amber); cursor:pointer; letter-spacing:4px; }
.star-picker span{ cursor:pointer; }
.review-list{ display:flex; flex-direction:column; gap:14px; }
.review-card{ border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.review-card-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.review-date{ font-size:12px; color:var(--text-mute); margin-bottom:8px; }
.review-card p{ margin-bottom:0; }

@media (max-width: 1024px){
  .detail-layout{ grid-template-columns:1fr; }
  .detail-sidebar{ position:static; }
  .detail-subnav-wrap{ top:69px; }
}

@media (max-width: 768px){
  .detail-shell{ padding:12px 20px 40px; }
  .detail-cover{ height:180px; }
  .detail-hero-body{ margin-top:-48px; padding:0 20px 20px; }
  .detail-logo{ width:96px; height:96px; border-width:4px; border-radius:16px; }
  .detail-title{ font-size:22px; }
  .detail-card{ padding:20px; }
  .why-choose-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
  .reviews-summary{ flex-direction:column; align-items:flex-start; gap:16px; }
}

@media (max-width: 600px){
  .detail-hero-actions{ gap:8px; }
  .hero-action-btn{ padding:9px 12px; font-size:12px; }
  .detail-subnav-wrap{ top:69px; }
  .metric-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
  .location-actions{ flex-direction:column; align-items:stretch; }
  .breakdown-row{ grid-template-columns:24px 1fr 20px; }
}

/* ================= BUSINESS DIRECTORY PAGE (Phase 5) ================= */

/* ---- Filter bar ---- */
.directory-filter-bar{ display:flex; flex-wrap:wrap; gap:10px; border:1px solid var(--line); border-radius:16px; background:var(--card); padding:18px; box-shadow:var(--shadow); margin-top:20px; }
.directory-filter-bar input, .directory-filter-bar select{
  background:var(--bg-2); border:1px solid var(--line-strong); color:var(--text); padding:10px 12px;
  border-radius:8px; font-size:13px; font-family:'Inter',sans-serif;
}
.directory-filter-bar input:focus, .directory-filter-bar select:focus{ outline:none; border-color:var(--accent); background:#fff; }
.directory-search{ flex:1 1 240px; min-width:180px; }
.directory-filter-bar select{ flex:1 1 140px; min-width:120px; }
.directory-filter-bar input[name="pin"]{ flex:0 1 120px; min-width:100px; }
.directory-filter-bar .btn-solid, .directory-filter-bar .btn-ghost{ flex-shrink:0; }

/* ---- Directory layout reuses .detail-layout / .detail-sidebar from Phase 4 ---- */
.directory-sidebar{ top:84px; }

/* ---- Directory card grid ---- */
.directory-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; }
.directory-card{
  border:1px solid var(--line); border-radius:18px; background:var(--card); padding:22px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:12px; transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.directory-card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(20,24,31,0.12); }
.dc-top{ display:flex; gap:14px; align-items:flex-start; }
.dc-logo{ width:56px; height:56px; border-radius:12px; object-fit:cover; flex-shrink:0; }
.dc-logo-fallback{ display:flex; align-items:center; justify-content:center; font-size:22px; background:var(--amber-dim); color:var(--amber); }
.dc-top-info{ min-width:0; }
.dc-name{ font-size:15px; font-weight:700; margin-bottom:2px; }
.dc-name .badge-approved{ font-size:10px; vertical-align:middle; }
.dc-cat{ font-size:12px; color:var(--text-mute); margin-bottom:4px; }
.dc-rating{ font-size:12px; color:var(--amber); }
.dc-rating span{ color:var(--text-mute); }
.dc-rating.muted{ color:var(--text-mute); }
.dc-about{ font-size:13px; color:var(--text-dim); line-height:1.6; }
.dc-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.dc-tag{ font-size:11px; background:var(--bg-2); color:var(--text-dim); padding:4px 10px; border-radius:100px; }
.dc-location{ font-size:12px; color:var(--text-mute); }
.dc-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:8px; border-top:1px solid var(--line); }
.dc-btn{
  flex:1 1 auto; text-align:center; font-size:12px; font-weight:600; padding:8px 10px; border-radius:var(--radius-sm);
  border:1px solid var(--line-strong); color:var(--text-dim); text-decoration:none; background:#fff;
  transition:background 0.15s ease, border-color 0.15s ease;
}
.dc-btn:hover{ background:var(--bg-2); border-color:var(--text-mute); }
.dc-btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.dc-btn-primary:hover{ background:#1D4ED8; border-color:#1D4ED8; }

/* ---- Numbered pagination (extends .pagination/.page-btn from Phase 1) ---- */
.pagination{ flex-wrap:wrap; gap:8px; }
.page-num{
  display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm); font-size:13px; color:var(--text-dim); background:#fff;
  transition:background 0.15s ease, border-color 0.15s ease;
}
.page-num:hover{ background:var(--bg-2); border-color:var(--text-mute); }
.page-num.active{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
.page-ellipsis{ color:var(--text-mute); padding:0 4px; }

/* ---- Sidebar chips (categories / cities) ---- */
.chip-list{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; background:var(--bg-2); color:var(--text-dim); padding:7px 12px; border-radius:100px; }
.chip:hover{ background:var(--accent-dim); color:var(--accent); }
.chip span{ color:var(--text-mute); font-size:11px; }

.tips-list{ padding-left:18px; font-size:13px; color:var(--text-dim); line-height:1.9; }

/* ---- Why choose (directory) feature cards ---- */
.why-choose-directory-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.feature-card{ border:1px solid var(--line); border-radius:16px; background:var(--card); padding:22px; box-shadow:var(--shadow); transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.feature-card:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(20,24,31,0.1); border-color:var(--line-strong); }
.feature-icon{
  width:44px; height:44px; border-radius:12px; background:var(--accent-dim); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px;
}
.feature-icon .tw-icon{ width:22px; height:22px; }
.feature-title{ font-size:15px; font-weight:700; margin-bottom:6px; }
.feature-desc{ font-size:13px; color:var(--text-dim); line-height:1.6; }

/* ---- Category / city cards ---- */
.category-cards-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.category-card{ display:block; text-align:center; border:1px solid var(--line); border-radius:16px; background:var(--card); padding:24px 16px; box-shadow:var(--shadow); transition:transform 0.15s ease, box-shadow 0.15s ease; }
.category-card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(20,24,31,0.10); }
.category-card-icon{ font-size:30px; margin-bottom:10px; }
.category-card-icon .tw-icon{ width:26px; height:26px; color:var(--accent); }
.category-card-name{ font-size:14px; font-weight:700; margin-bottom:4px; }
.category-card-count{ font-size:12px; color:var(--text-mute); }

/* ---- Resource cards ---- */
.resource-cards-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.resource-card{ display:block; border:1px solid var(--line); border-radius:14px; background:var(--card); padding:18px; box-shadow:var(--shadow); }
.resource-card:hover{ border-color:var(--line-strong); background:var(--bg-2); }
.resource-card-title{ font-size:14px; font-weight:700; margin-bottom:6px; }
.resource-card-desc{ font-size:12px; color:var(--text-mute); line-height:1.6; }

@media (max-width: 1024px){
  .directory-grid{ grid-template-columns:1fr; }
}

@media (max-width: 860px){
  .why-choose-directory-grid{ grid-template-columns:repeat(2, 1fr); }
  .category-cards-grid{ grid-template-columns:repeat(2, 1fr); }
  .resource-cards-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 600px){
  .directory-filter-bar{ flex-direction:column; align-items:stretch; }
  /* flex-basis values above (240px/140px/120px) are desktop WIDTHs; once
     flex-direction flips to column here the main axis becomes vertical, so
     without resetting flex-basis those same numbers get read as HEIGHTS,
     blowing up each field. `flex:none` + width:100% gives normal auto-height
     full-width fields instead. */
  .directory-filter-bar select, .directory-filter-bar input, .directory-filter-bar .btn-solid, .directory-filter-bar .btn-ghost{ width:100%; flex:none; }
  /* input[name="pin"] has a more specific desktop rule (flex:0 1 120px) that
     otherwise still wins over the general `input` reset above and gets read
     as a 120px HEIGHT here — same bug, needs its own equally-specific override. */
  .directory-filter-bar input[name="pin"]{ flex:none; min-width:0; }
  .why-choose-directory-grid{ grid-template-columns:1fr; }
  .category-cards-grid{ grid-template-columns:1fr; }
  .resource-cards-grid{ grid-template-columns:1fr; }
  .dc-actions{ flex-direction:column; }
}

/* ================= OWNER DASHBOARD + ADMIN CRM (Phase 6) ================= */

.badge-paused{ background:#EEF1F6; color:var(--text-mute); padding:3px 10px; border-radius:100px; font-size:11px; font-weight:700; }

/* ---- Owner dashboard shell (sits within the normal site nav/footer) ---- */
.dashboard-shell{ max-width:1360px; margin:0 auto; padding:16px 32px 48px; display:grid; grid-template-columns:230px 1fr; gap:24px; align-items:start; }
.dashboard-sidebar{ position:sticky; top:118px; display:flex; flex-direction:column; gap:2px; border:1px solid var(--line); border-radius:16px; background:var(--card); padding:14px; box-shadow:var(--shadow); }
.dashboard-main{ min-width:0; border:1px solid var(--line); border-radius:18px; background:var(--card); padding:28px; box-shadow:var(--shadow); }
.dashboard-stat-grid{ grid-template-columns:repeat(4, 1fr); }
.dashboard-toolbar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.dashboard-toolbar input, .dashboard-toolbar select{
  background:var(--bg-2); border:1px solid var(--line-strong); color:var(--text); padding:9px 12px;
  border-radius:8px; font-size:13px; font-family:'Inter',sans-serif;
}
.dashboard-toolbar input[type="text"]{ flex:1 1 220px; min-width:160px; }
.dashboard-actions-cell{ display:flex; flex-wrap:wrap; gap:4px; min-width:220px; }

/* ---- Loading skeletons ---- */
.skeleton-card{ height:84px; border-radius:14px; background:linear-gradient(90deg, var(--bg-2) 25%, var(--card-2) 37%, var(--bg-2) 63%); background-size:400% 100%; animation:skeleton-shimmer 1.4s ease infinite; }
@keyframes skeleton-shimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

/* ---- Activity feed ---- */
.activity-feed{ display:flex; flex-direction:column; gap:2px; }
.activity-item{ display:flex; align-items:flex-start; gap:12px; padding:12px 4px; border-bottom:1px solid var(--line); }
.activity-item:last-child{ border-bottom:none; }
.activity-dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); margin-top:5px; flex-shrink:0; }
.activity-dot.activity-review{ background:var(--amber); }
.activity-dot.activity-quote{ background:var(--teal); }
.activity-dot.activity-report{ background:var(--danger); }
.activity-dot.activity-claim{ background:var(--accent); }
.activity-dot.activity-user{ background:var(--text-mute); }
.activity-label{ font-size:13px; color:var(--text); }
.activity-time{ font-size:12px; color:var(--text-mute); margin-top:2px; }

/* ---- Simple bar charts (no external chart library) ---- */
.bar-chart{ display:flex; align-items:flex-end; gap:6px; height:140px; border-bottom:1px solid var(--line); padding-bottom:4px; overflow-x:auto; }
.bar-chart-col{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; flex:0 0 26px; height:100%; }
.bar-chart-bar{ width:16px; background:var(--accent); border-radius:4px 4px 0 0; min-height:4px; }
.bar-chart-bar-alt{ background:var(--teal); }
.bar-chart-label{ font-size:10px; color:var(--text-mute); margin-top:6px; white-space:nowrap; }

/* ---- Reviews: owner reply ---- */
.review-owner-reply{ margin-top:10px; padding:10px 12px; background:var(--bg-2); border-radius:10px; font-size:13px; color:var(--text-dim); border-left:3px solid var(--accent); }

/* ---- Inline listing preview (owner dashboard) ---- */
.preview-inline-card{ border:1px solid var(--line); border-radius:14px; padding:16px; margin-top:14px; background:var(--bg-2); }

/* ---- Admin: bulk action bar ---- */
.bulk-action-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--accent-dim); border-radius:10px; padding:10px 14px; margin-bottom:14px; font-size:13px; color:var(--accent); }

/* ---- Admin: media manager ---- */
.media-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px; }
.media-card{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); box-shadow:var(--shadow); }
.media-card img{ width:100%; height:100px; object-fit:cover; display:block; background:var(--bg-2); }
.media-card-meta{ font-size:11px; color:var(--text-mute); padding:8px 10px 0; }
.media-card .admin-btn{ margin:8px 10px 10px; width:calc(100% - 20px); }
.media-card-unused{ border-color:var(--danger); }

@media (max-width: 1024px){
  .dashboard-shell{ grid-template-columns:1fr; }
  .dashboard-sidebar{ position:static; flex-direction:row; flex-wrap:wrap; }
  .dashboard-stat-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 600px){
  .dashboard-shell{ padding:12px 16px 32px; }
  .dashboard-main{ padding:18px; }
  .dashboard-toolbar input[type="text"]{ flex:1 1 100%; }
  .dashboard-actions-cell{ flex-direction:column; }
  .media-grid{ grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ================= BLOG + GUEST POST CMS (Phases 1-3) ================= */

/* ---- extra status badges (draft/submitted/.../trashed) — same visual language as badge-pending/approved/rejected above ---- */
.badge-draft{ background:#EEF1F6; color:var(--text-mute); padding:3px 10px; border-radius:100px; font-size:11px; font-weight:700; text-transform:capitalize; }
.badge-submitted{ background:var(--amber-dim); color:var(--amber); padding:3px 10px; border-radius:100px; font-size:11px; font-weight:700; text-transform:capitalize; }
.badge-under_review{ background:var(--amber-dim); color:var(--amber); padding:3px 10px; border-radius:100px; font-size:11px; font-weight:700; text-transform:capitalize; }
.badge-changes_requested{ background:var(--danger-dim); color:var(--danger); padding:3px 10px; border-radius:100px; font-size:11px; font-weight:700; text-transform:capitalize; }
.badge-scheduled{ background:var(--accent-dim); color:var(--accent); padding:3px 10px; border-radius:100px; font-size:11px; font-weight:700; text-transform:capitalize; }
.badge-published{ background:var(--teal-dim); color:var(--teal); padding:3px 10px; border-radius:100px; font-size:11px; font-weight:700; text-transform:capitalize; }
.badge-archived{ background:#EEF1F6; color:var(--text-mute); padding:3px 10px; border-radius:100px; font-size:11px; font-weight:700; text-transform:capitalize; }
.badge-trashed{ background:var(--danger-dim); color:var(--danger); padding:3px 10px; border-radius:100px; font-size:11px; font-weight:700; text-transform:capitalize; }

/* ---- Blog editor shell (Quill + meta sidebar) ---- */
.blog-editor-shell{ display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:start; }
.blog-editor-main{ min-width:0; }
.blog-editor-side{ display:flex; flex-direction:column; gap:16px; position:sticky; top:134px; }
.blog-editor-side .sidebar-card{ margin-bottom:0; }

.slug-preview{ font-size:12px; color:var(--text-mute); font-family:'IBM Plex Mono', monospace; margin-top:6px; word-break:break-all; }

.cover-uploader{ border:1px dashed var(--line-strong); border-radius:12px; cursor:pointer; overflow:hidden; background:var(--bg-2); min-height:120px; display:flex; align-items:center; justify-content:center; }
.cover-uploader-empty{ font-size:13px; color:var(--text-mute); padding:30px 16px; text-align:center; }
.cover-uploader #be-cover-preview{ width:100%; max-height:220px; object-fit:cover; display:block; }

.tw-quill{ background:#fff; border:1px solid var(--line-strong); border-radius:10px 10px 0 0; border-bottom:none; }
.tw-quill .ql-toolbar{ border:none; border-bottom:1px solid var(--line); border-radius:10px 10px 0 0; flex-wrap:wrap; }
#be-quill-editor{ min-height:340px; background:#fff; border:1px solid var(--line-strong); border-top:none; border-radius:0 0 10px 10px; font-family:'Inter', sans-serif; font-size:15px; }
#be-quill-editor .ql-editor{ min-height:340px; }
#be-quill-editor .ql-editor h2{ font-family:'Plus Jakarta Sans', sans-serif; }
#be-quill-editor .ql-editor .callout{ background:var(--accent-dim); border-left:3px solid var(--accent); padding:12px 16px; border-radius:8px; margin:10px 0; }
#be-quill-editor .ql-editor hr{ border:none; border-top:1px solid var(--line-strong); margin:16px 0; }
#be-quill-editor .ql-editor table{ border-collapse:collapse; width:100%; }
#be-quill-editor .ql-editor table td{ border:1px solid var(--line-strong); padding:6px 10px; }

.editor-meta-row{ font-size:12px; color:var(--text-mute); margin-top:8px; }
.editor-saved-indicator{ font-size:12px; color:var(--teal); margin-top:8px; }
.editor-saved-indicator-dirty{ color:var(--amber); }

.editorial-guidelines-box{ background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-top:18px; }
.editorial-guidelines-title{ font-weight:700; font-size:14px; margin-bottom:8px; }
.editorial-guidelines-box ul{ padding-left:18px; font-size:12px; color:var(--text-dim); line-height:1.8; margin-bottom:10px; }
.editorial-check-row{ display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--text-dim); margin-top:6px; }

.char-counter{ font-size:11px; color:var(--text-mute); font-weight:400; text-transform:none; letter-spacing:0; }
.char-counter.over-limit{ color:var(--danger); font-weight:700; }

.seo-preview-card{ border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-top:10px; background:var(--bg-2); }
.seo-preview-title{ color:#1a0dab; font-size:15px; font-weight:500; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seo-preview-url{ color:var(--teal); font-size:12px; margin-bottom:4px; word-break:break-all; }
.seo-preview-desc{ color:var(--text-dim); font-size:12px; line-height:1.5; }

.tag-chip-list{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.tag-chip{ background:var(--accent-dim); color:var(--accent); }

/* ---- Responsive tables -> mobile cards for the two new blog post tables ---- */
.blog-mobile-cards{ display:none; }
.blog-mobile-card{ border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:10px; background:var(--card); box-shadow:var(--shadow); }
.blog-mobile-card-top{ display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.blog-mobile-card-top img{ width:56px; height:40px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.blog-mobile-card-noimg{ width:56px; height:40px; border-radius:6px; background:var(--bg-2); flex-shrink:0; }
.blog-mobile-card-meta{ font-size:12px; color:var(--text-mute); margin-bottom:8px; }

@media (max-width: 1024px){
  .blog-editor-shell{ grid-template-columns:1fr; }
  .blog-editor-side{ position:static; }
}

@media (max-width: 768px){
  .blog-desktop-table{ display:none; }
  .blog-mobile-cards{ display:block; }
}

@media (max-width: 600px){
  .tw-quill .ql-toolbar .ql-formats{ margin-right:6px; }
  .seo-preview-title{ white-space:normal; }
}

/* ================= PUBLIC BLOG: Archive, Category/Tag/Author, Single Post (Phases 4-6) ================= */
/* Reuses .detail-shell/.detail-layout/.sidebar-card/.mini-card/.pagination/.faq-accordion/.category-cards-grid
   from the Business Listing detail + directory pages above — same container width, same components. */

/* ---- accessibility: visible keyboard focus ring (site-wide, invisible until keyboard-focused) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;
}

/* ---- filter chips ---- */
.active-filter-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.active-filter-chip{ background:var(--accent-dim); color:var(--accent); }

/* ---- archive results grid ---- */
.archive-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; }
.archive-grid-compact{ grid-template-columns:repeat(2, 1fr); gap:20px; margin-top:0; }
.archive-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; background:var(--card); overflow:hidden; box-shadow:var(--shadow); transition:transform 0.15s ease, box-shadow 0.15s ease; }
.archive-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(20,24,31,0.09); }
.archive-card-media{ display:block; }
.archive-card-img{ width:100%; height:220px; object-fit:cover; display:block; background:var(--bg-2); }
.archive-card-img-fallback{ width:100%; height:220px; display:flex; align-items:center; justify-content:center; font-size:40px; background:linear-gradient(135deg, var(--accent-dim), var(--teal-dim)); }
.archive-card-body{ padding:22px; display:flex; flex-direction:column; gap:9px; flex:1; }
.archive-card-title{ font-family:'Plus Jakarta Sans', sans-serif; font-size:20px; font-weight:700; line-height:1.35; }
.archive-card-title a:hover{ color:var(--accent); }
.archive-card-excerpt{ font-size:14px; color:var(--text-dim); line-height:1.65; flex:1; }
.archive-card-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-size:12px; color:var(--text-mute); }
.archive-card-avatar{ width:20px; height:20px; border-radius:50%; object-fit:cover; }
.archive-card-avatar-fallback{ width:20px; height:20px; border-radius:50%; background:var(--accent-dim); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; }
.archive-card-author-link{ display:inline-flex; align-items:center; gap:6px; color:var(--text-mute); }
.archive-card-author-link:hover{ color:var(--accent); }
.archive-card-tags{ margin-top:2px; }
.archive-card-readmore{ font-size:13px; font-weight:600; color:var(--accent); margin-top:4px; }
.archive-card-readmore:hover{ text-decoration:underline; }

/* ---- empty state ---- */
.archive-empty-state{ text-align:center; padding:56px 24px; border:1px dashed var(--line-strong); border-radius:16px; background:var(--bg-2); }
.archive-empty-icon{ font-size:36px; margin-bottom:10px; }
.archive-empty-title{ font-family:'Plus Jakarta Sans', sans-serif; font-size:17px; font-weight:700; margin-bottom:6px; }
.archive-empty-sub{ font-size:13px; color:var(--text-mute); margin-bottom:18px; }

/* ---- blog hero ---- */
.blog-hero-section{ margin-bottom:8px; }
.blog-hero-banner{
  padding:48px 32px; border-radius:0 0 24px 24px;
  background:linear-gradient(135deg, var(--accent-dim) 0%, var(--teal-dim) 100%);
}
.blog-hero-intro{ max-width:1120px; margin:0 auto; text-align:center; }
.blog-hero-intro .page-title{ font-size:36px; }
.blog-hero-intro .page-sub{ max-width:620px; margin:8px auto 22px; }
.blog-hero-search{ display:flex; gap:10px; max-width:520px; margin:0 auto; }
.blog-hero-search input{ flex:1; background:#fff; border:1px solid var(--line-strong); border-radius:100px; padding:12px 18px; font-size:14px; font-family:'Inter',sans-serif; }
.blog-hero-search .btn-solid{ border-radius:100px; padding:12px 22px; }

.featured-grid{ max-width:1360px; margin:24px auto 0; padding:0 32px; display:grid; grid-template-columns:1.3fr 1fr; gap:20px; align-items:stretch; }
.featured-post-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:18px; background:var(--card); overflow:hidden; box-shadow:var(--shadow); }
.featured-post-main{ display:grid; grid-template-rows:260px auto; }
.featured-post-main img, .featured-post-main .featured-post-img-fallback{ height:260px; }
.featured-post-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.featured-post-img-fallback{ width:100%; display:flex; align-items:center; justify-content:center; font-size:40px; background:linear-gradient(135deg, var(--accent-dim), var(--teal-dim)); }
.featured-post-body{ padding:20px; display:flex; flex-direction:column; gap:6px; }
.featured-post-title{ font-family:'Plus Jakarta Sans', sans-serif; font-size:22px; font-weight:800; line-height:1.3; }
.featured-post-main .featured-post-title{ font-size:26px; }
.featured-post-title a:hover{ color:var(--accent); }
.featured-post-excerpt{ font-size:14px; color:var(--text-dim); line-height:1.7; }
.featured-secondary-list{ display:flex; flex-direction:column; gap:16px; }
.featured-post-secondary{ flex-direction:row; }
.featured-post-secondary .featured-post-media{ flex-shrink:0; width:120px; }
.featured-post-secondary img, .featured-post-secondary .featured-post-img-fallback{ width:120px; height:100%; min-height:110px; }
.featured-post-secondary .featured-post-body{ padding:14px 16px; gap:4px; }
.featured-post-secondary .featured-post-title{ font-size:15px; }

/* ---- blog sidebar ---- */
.blog-sidebar-search{ display:flex; gap:8px; }
.blog-sidebar-search input{ flex:1; background:var(--bg-2); border:1px solid var(--line-strong); border-radius:8px; padding:9px 12px; font-size:13px; font-family:'Inter',sans-serif; }
.blog-category-list{ list-style:none; display:flex; flex-direction:column; gap:2px; }
.blog-category-list a{ display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--text-dim); padding:8px 6px; border-radius:8px; }
.blog-category-list a:hover{ background:var(--bg-2); }
.blog-category-list a.active{ background:var(--accent-dim); color:var(--accent); font-weight:700; }
.blog-category-list a span{ color:var(--text-mute); font-size:11px; }

.category-page-desc{ font-size:14px; color:var(--text-dim); line-height:1.8; max-width:760px; }
.blog-category-cover{ width:100%; max-height:220px; object-fit:cover; border-radius:16px; margin-bottom:14px; }

/* ---- author page ---- */
.author-page-card{ display:flex; gap:20px; align-items:center; border:1px solid var(--line); border-radius:18px; background:var(--card); padding:24px; box-shadow:var(--shadow); flex-wrap:wrap; }
.author-page-avatar{ width:88px; height:88px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.author-page-avatar-fallback{ width:88px; height:88px; border-radius:50%; background:var(--accent-dim); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:800; flex-shrink:0; }
.author-page-info{ min-width:240px; flex:1; }
.author-page-name{ font-family:'Plus Jakarta Sans', sans-serif; font-size:22px; font-weight:800; margin-bottom:6px; }
.author-page-bio{ font-size:14px; color:var(--text-dim); line-height:1.7; margin-bottom:10px; }
.author-page-links{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.author-page-count{ font-size:12px; color:var(--text-mute); }

/* ---- reading progress ---- */
.reading-progress-track{ position:sticky; top:104px; height:3px; background:transparent; z-index:60; }
.reading-progress-bar{ height:100%; width:0%; background:var(--accent); transition:width 0.1s linear; }

/* ---- table of contents ---- */
.toc-card{ position:sticky; top:134px; }
.toc-toggle{ cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
.toc-caret{ transition:transform 0.2s ease; color:var(--text-mute); }
.toc-toggle[aria-expanded="false"] .toc-caret{ transform:rotate(-90deg); }
.toc-list{ list-style:none; display:flex; flex-direction:column; gap:2px; font-size:13px; }
.toc-list li a{ display:block; padding:5px 8px; border-radius:6px; color:var(--text-dim); border-left:2px solid transparent; }
.toc-list li a:hover{ background:var(--bg-2); color:var(--text); }
.toc-list li a.active{ border-left-color:var(--accent); color:var(--accent); font-weight:700; background:var(--accent-dim); }
.toc-list .toc-level-3 a{ padding-left:20px; font-size:12px; }

/* ---- single article shell/header ---- */
.article-shell{ scroll-margin-top:80px; }
.article-header{ max-width:900px; margin:0 auto 20px; text-align:left; }
.article-title{ font-family:'Plus Jakarta Sans', sans-serif; font-size:38px; font-weight:800; line-height:1.2; margin:10px 0 12px; }
.article-excerpt{ font-size:16px; color:var(--text-dim); line-height:1.6; margin-bottom:14px; }
.article-byline{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; color:var(--text-mute); margin-bottom:14px; }
.article-author-avatar{ width:26px; height:26px; border-radius:50%; object-fit:cover; }
.article-author-avatar-fallback{ width:26px; height:26px; border-radius:50%; background:var(--accent-dim); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.article-share{ display:flex; flex-wrap:wrap; gap:8px; }
.share-btn{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line-strong); background:#fff; font-size:15px; cursor:pointer; text-decoration:none;
}
.share-btn:hover{ background:var(--bg-2); }

.article-cover-img{ width:100%; max-height:460px; object-fit:cover; border-radius:20px; margin-bottom:28px; }
.article-cover-fallback{ display:flex; align-items:center; justify-content:center; font-size:48px; height:280px; background:linear-gradient(135deg, var(--accent-dim), var(--teal-dim)); }

/* ---- article content typography ---- */
.article-content{ font-size:16px; color:var(--text-dim); line-height:1.85; }
.article-content h2{ font-family:'Plus Jakarta Sans', sans-serif; font-size:24px; font-weight:800; color:var(--text); margin:30px 0 12px; scroll-margin-top:134px; }
.article-content h3{ font-family:'Plus Jakarta Sans', sans-serif; font-size:20px; font-weight:700; color:var(--text); margin:24px 0 10px; scroll-margin-top:134px; }
.article-content h4{ font-family:'Plus Jakarta Sans', sans-serif; font-size:16px; font-weight:700; color:var(--text); margin:20px 0 8px; }
.article-content p{ margin-bottom:18px; }
.article-content ul, .article-content ol{ margin:0 0 18px 22px; }
.article-content li{ margin-bottom:8px; }
.article-content blockquote{ border-left:3px solid var(--accent); background:var(--bg-2); padding:14px 18px; border-radius:0 10px 10px 0; margin:20px 0; font-style:italic; color:var(--text); }
.article-content a{ color:var(--accent); text-decoration:underline; }
.article-content img{ max-width:100%; height:auto; border-radius:12px; margin:16px 0; display:block; }
.article-content figure{ margin:16px 0; }
.article-content figcaption{ font-size:12px; color:var(--text-mute); text-align:center; margin-top:6px; }
.article-content hr{ border:none; border-top:1px solid var(--line-strong); margin:28px 0; }
.article-content .callout{ background:var(--accent-dim); border-left:3px solid var(--accent); padding:14px 18px; border-radius:0 10px 10px 0; margin:20px 0; }
.article-content pre{ background:#14181F; color:#e7ecf3; padding:16px; border-radius:10px; overflow-x:auto; font-family:'IBM Plex Mono', monospace; font-size:13px; margin:18px 0; }
.article-content code{ font-family:'IBM Plex Mono', monospace; font-size:0.9em; background:var(--bg-2); padding:2px 6px; border-radius:4px; }
.article-content pre code{ background:none; padding:0; }
.article-content table{ display:block; overflow-x:auto; border-collapse:collapse; width:100%; margin:18px 0; }
.article-content table td, .article-content table th{ border:1px solid var(--line-strong); padding:8px 12px; font-size:14px; }
.article-content table th{ background:var(--bg-2); font-weight:700; }

/* ---- author box / related / prev-next ---- */
.article-author-box{ display:flex; gap:16px; align-items:flex-start; }
.article-author-box-name{ font-family:'Plus Jakarta Sans', sans-serif; font-size:16px; font-weight:700; margin-bottom:6px; }
.article-author-box-bio{ font-size:13px; color:var(--text-dim); line-height:1.7; margin-bottom:10px; }
.article-author-box-links{ display:flex; flex-wrap:wrap; gap:8px; }
.article-prevnext{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.article-prevnext-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-mute); font-weight:700; margin-bottom:8px; }

@media (max-width: 1024px){
  .featured-grid{ grid-template-columns:1fr; }
  .archive-grid, .archive-grid-compact{ grid-template-columns:1fr; }
  .toc-card{ position:static; }
  .article-prevnext{ grid-template-columns:1fr; }
  .reading-progress-track{ top:69px; }
}

@media (max-width: 768px){
  .article-title{ font-size:28px; }
  .article-cover-img{ max-height:260px; }
  .blog-hero-banner{ padding:32px 20px; }
  .blog-hero-intro .page-title{ font-size:26px; }
  .featured-post-secondary{ flex-direction:column; }
  .featured-post-secondary .featured-post-media, .featured-post-secondary img, .featured-post-secondary .featured-post-img-fallback{ width:100%; height:140px; }
  .author-page-card{ text-align:center; justify-content:center; }
  .author-page-links{ justify-content:center; }
}

@media (max-width: 600px){
  .archive-card-img, .archive-card-img-fallback{ height:200px; }
  .article-title{ font-size:23px; }
  .article-content{ font-size:15px; }
  .reading-progress-track{ top:69px; }
}

/* ================= GLOBAL PREMIUM HEADER + FOOTER + HOMEPAGE ================= */

/* ---- previously-referenced-but-unstyled hooks (skeleton loading + error banner) ---- */
.skel{ position:relative; color:transparent !important; background:linear-gradient(90deg, var(--bg-2) 25%, var(--card-2) 37%, var(--bg-2) 63%); background-size:400% 100%; animation:skeleton-shimmer 1.4s ease infinite; border-radius:8px; }
/* Generic shimmering block for list-row / grid-cell loading states (hourly, tenday, calendar, radar map, AQI ring) — set a height via inline style or a modifier below. */
.skel-block{ border-radius:10px; background:linear-gradient(90deg, var(--bg-2) 25%, var(--card-2) 37%, var(--bg-2) 63%); background-size:400% 100%; animation:skeleton-shimmer 1.4s ease infinite; }
.skel-block-row{ height:54px; margin-bottom:1px; border-radius:0; }
.skel-block-row:first-child{ border-radius:16px 16px 0 0; }
.skel-block-row:last-child{ border-radius:0 0 16px 16px; margin-bottom:0; }
.skel-block-cell{ height:96px; border-radius:10px; }
.tw-error-inner{
  display:none; max-width:var(--container-max-wide); margin:0 auto; padding:12px 32px;
}
.tw-error-inner:not(:empty){
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--danger-dim); color:var(--danger); border-radius:var(--radius-sm); font-size:13px;
  margin:12px 32px; padding:12px 16px; width:calc(100% - 64px);
}
.tw-error-retry{ border:1px solid var(--danger); background:#fff; color:var(--danger); padding:6px 14px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; flex-shrink:0; font-family:'Inter',sans-serif; }
.tw-error-retry:hover{ background:var(--danger-dim); }

/* ---- skip link ---- */
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:1000; font-size:13px; font-weight:600; }
.skip-link:focus-visible{ left:0; }

/* Standard accessible-hiding pattern (content stays in the DOM/accessibility
   tree, just visually clipped) — used for the homepage's static <h1>, which
   sits alongside the large dynamic location heading that briefly reads "--"
   before JS resolves the visitor's location. */
.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; }

/* ---- brand logo (light + dark variants share this markup) ---- */
.brand-logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; text-decoration:none; }
.brand-logo-img{ display:block; width:210px; height:48px; object-fit:contain; }
.brand-logo-text{ display:none; align-items:center; gap:8px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:21px; letter-spacing:-0.4px; color:var(--text); white-space:nowrap; }
.brand-logo-text .dot{ width:9px; height:9px; border-radius:50%; background:var(--teal); display:inline-block; }
.brand-logo.logo-fallback .brand-logo-img{ display:none; }
.brand-logo.logo-fallback .brand-logo-text{ display:flex; }
.site-footer .brand-logo-text{ color:#fff; }

/* ---- site header shell (works with zero JS: minimal fallback nav from layout.js) ---- */
.site-header{ position:sticky; top:0; z-index:200; background:rgba(255,255,255,0.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.site-header.scrolled{ box-shadow:0 2px 14px rgba(20,24,31,0.07); }
.site-header-inner{ max-width:var(--container-max-wide); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 32px; min-height:var(--header-height); }
.nav-links-fallback{ display:flex; gap:20px; font-size:14px; color:var(--text-dim); flex-wrap:wrap; }
.nav-links-fallback a:hover{ color:var(--text); }
.nav-links-fallback a.active{ color:var(--accent); font-weight:600; }

/* ---- utility bar ---- */
.tw-util-bar{ background:var(--bg-2); border-bottom:1px solid var(--line); }
.tw-util-bar-inner{ max-width:var(--container-max-wide); margin:0 auto; padding:7px 32px; display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--text-mute); font-size:12px; }
.tw-util-left{ display:flex; align-items:center; gap:10px; }
.tw-util-condition{ font-weight:600; color:var(--text-dim); }
.tw-util-right{ display:flex; gap:18px; }
.tw-util-right a{ color:var(--text-mute); }
.tw-util-right a:hover{ color:var(--accent); }

/* ---- main header row (JS-enhanced) ---- */
.tw-main-header-inner{ max-width:var(--container-max-wide); margin:0 auto; padding:10px 32px; display:flex; align-items:center; gap:24px; min-height:var(--header-height); }
.tw-hamburger{ display:none; flex-direction:column; justify-content:center; align-items:center; gap:4px; width:44px; height:44px; background:none; border:none; cursor:pointer; border-radius:8px; flex-shrink:0; }
.tw-hamburger:hover{ background:var(--bg-2); }
.tw-hamburger span{ display:block; width:20px; height:2px; background:var(--text); border-radius:2px; }
.tw-primary-nav{ display:flex; align-items:center; gap:4px; flex:1; }

.tw-nav-item{ position:relative; }
.tw-nav-trigger{ display:flex; align-items:center; gap:4px; background:none; border:none; font-family:'Inter',sans-serif; font-size:14px; color:var(--text-dim); padding:9px 12px; border-radius:var(--radius-sm); cursor:pointer; }
.tw-nav-trigger:hover{ background:var(--bg-2); color:var(--text); }
.tw-nav-item.open .tw-nav-trigger{ background:var(--bg-2); color:var(--text); }
.tw-nav-trigger.active{ color:var(--accent); font-weight:600; }
.tw-caret{ font-size:10px; transition:transform 0.15s ease; }
.tw-nav-item.open .tw-caret{ transform:rotate(180deg); }
.tw-dropdown-panel{ display:none; position:absolute; top:calc(100% + 8px); left:0; min-width:230px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:8px; z-index:210; }
.tw-nav-item.open .tw-dropdown-panel{ display:block; }
.tw-dropdown-panel a{ display:block; padding:10px 12px; border-radius:var(--radius-sm); font-size:13px; color:var(--text-dim); }
.tw-dropdown-panel a:hover{ background:var(--bg-2); color:var(--text); }
.tw-dropdown-panel a.active{ color:var(--accent); font-weight:600; background:var(--accent-dim); }

/* ---- desktop inline header search (no popup for ordinary typed search —
   the full #tw-search-overlay panel is reserved for mobile, see below) ---- */
.tw-header-search{ position:relative; margin-left:auto; width:240px; max-width:26vw; flex-shrink:1; min-width:0; }
.tw-header-search-field{ width:100%; }
.tw-header-search-field input{ min-width:0; }
.tw-header-search-listbox{ position:absolute; top:calc(100% + 6px); left:0; right:0; width:auto; background:#fff; box-shadow:var(--shadow); z-index:220; }
.tw-header-search-status{ position:absolute; top:calc(100% + 4px); left:2px; font-size:11.5px; }
.tw-header-search-status:empty{ display:none; }

.tw-header-right{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
/* Mobile search icon (opens the full-panel modal) is only needed once the
   inline header search above is hidden by the 1024px breakpoint. */
@media (min-width: 1025px){
  #tw-search-btn{ display:none; }
}
.tw-icon-btn{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); background:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; flex-shrink:0; }
.tw-icon-btn:hover{ background:var(--bg-2); }
.tw-lang-wrap{ position:relative; }
.tw-lang-btn{ font-size:12.5px; font-weight:700; border-radius:var(--radius-sm); width:auto; padding:0 12px; }
.tw-lang-btn .tw-caret{ transition:transform 0.15s ease; }
.tw-lang-btn[aria-expanded="true"] .tw-caret{ transform:rotate(180deg); }
.tw-lang-panel{ position:absolute; top:calc(100% + 10px); right:0; min-width:190px; max-width:calc(100vw - 24px); background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:6px; z-index:250; display:flex; flex-direction:column; }
/* The [hidden] attribute and a same-specificity class rule that sets
   `display` conflict by cascade order, not semantics — without this, the
   `display:flex` above silently wins and the panel renders open regardless
   of the `hidden` attribute JS toggles. Higher-specificity override fixes it. */
.tw-lang-panel[hidden]{ display:none; }
.tw-lang-option{ display:flex; align-items:center; gap:10px; text-align:left; background:none; border:none; padding:10px 12px; font-size:13px; color:var(--text-dim); border-radius:8px; cursor:pointer; font-family:'Inter',sans-serif; min-height:44px; width:100%; }
.tw-lang-option:hover{ background:var(--bg-2); }
.tw-lang-option.active{ color:var(--accent); font-weight:600; background:var(--accent-dim); }
.tw-lang-check{ width:16px; height:16px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--accent); }
.tw-lang-check .tw-icon{ width:15px; height:15px; }
.tw-drawer-lang{ margin-bottom:20px; display:flex; flex-direction:column; gap:10px; }
.tw-drawer-lang .tw-lang-wrap{ width:100%; }
.tw-drawer-lang .tw-lang-btn{ width:100%; justify-content:flex-start; min-height:44px; padding:10px 12px; border-radius:var(--radius-sm); }
.tw-drawer-lang .tw-lang-btn span:nth-child(2){ flex:1; text-align:left; }
.tw-drawer-lang .tw-lang-panel{ position:static; box-shadow:none; border:1px solid var(--line); margin-top:6px; width:100%; max-width:none; }
/* ---- desktop profile dropdown (signed-in header state) ---- */
.tw-profile-wrap{ position:relative; }
.tw-profile-trigger{ display:flex; align-items:center; gap:8px; background:none; border:1px solid var(--line-strong); border-radius:100px; padding:4px 12px 4px 4px; cursor:pointer; min-height:44px; font-family:'Inter',sans-serif; }
.tw-profile-trigger:hover{ background:var(--bg-2); }
.tw-profile-trigger .tw-caret{ transition:transform 0.15s ease; }
.tw-profile-trigger[aria-expanded="true"] .tw-caret{ transform:rotate(180deg); }
.tw-profile-panel{ position:absolute; top:calc(100% + 10px); right:0; min-width:190px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:6px; z-index:250; display:flex; flex-direction:column; }
.tw-profile-panel[hidden]{ display:none; }
.tw-profile-item{ display:flex; align-items:center; gap:10px; text-align:left; background:none; border:none; padding:10px 12px; font-size:13px; color:var(--text-dim); border-radius:8px; cursor:pointer; font-family:'Inter',sans-serif; min-height:44px; width:100%; }
.tw-profile-item:hover{ background:var(--bg-2); color:var(--text); }
.tw-notify-wrap{ position:relative; }
.tw-notify-badge{ position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; padding:0 3px; border-radius:100px; background:var(--danger); color:#fff; font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.tw-notify-panel{ position:absolute; top:calc(100% + 10px); right:0; width:340px; max-width:88vw; max-height:420px; overflow-y:auto; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:14px; z-index:250; }
.alert-card{ border:1px solid var(--line); border-left:4px solid var(--amber); border-radius:8px; padding:10px 12px; margin-bottom:10px; font-size:12.5px; }
.alert-card:last-child{ margin-bottom:0; }
.alert-card.severity-extreme, .alert-card.severity-severe{ border-left-color:var(--danger); }
.alert-card.severity-moderate{ border-left-color:var(--amber); }
.alert-card.severity-minor{ border-left-color:var(--teal); }
.alert-card-head{ display:flex; justify-content:space-between; gap:8px; font-weight:700; margin-bottom:4px; }
.alert-card-severity{ text-transform:uppercase; font-size:10px; color:var(--text-mute); }
.alert-card-area{ color:var(--text-mute); font-size:11px; margin-bottom:4px; }
.alert-card-time{ color:var(--text-mute); font-size:10.5px; margin-bottom:6px; }
.alert-card-summary{ color:var(--text-dim); line-height:1.5; }
.alert-card-instruction{ margin-top:6px; padding-top:6px; border-top:1px dashed var(--line); color:var(--text-dim); }

/* ---------- COOKIE CONSENT ---------- */
.tw-cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:400; max-width:900px; margin:0 auto;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:18px 20px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.tw-cookie-banner-text{ flex:1 1 320px; font-size:13px; color:var(--text-dim); line-height:1.6; }
.tw-cookie-banner-text a{ color:var(--accent); }
.tw-cookie-banner-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.tw-cookie-cat-row{ padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; color:var(--text-dim); }
.tw-cookie-cat-row:last-of-type{ border-bottom:none; }
.tw-cookie-cat-row label{ display:flex; align-items:center; gap:10px; }
@media (max-width: 600px){
  .tw-cookie-banner{ flex-direction:column; align-items:stretch; left:8px; right:8px; bottom:8px; padding:16px; }
  .tw-cookie-banner-actions{ justify-content:stretch; }
  .tw-cookie-banner-actions button{ flex:1; }
}

/* ---- search modal ----
   z-index is intentionally far above Leaflet's own stacking (map panes up to
   700, zoom/layer controls at 1000) so the search panel and mobile drawer
   below always cover a Leaflet map (radar, conditions map, earthquakes,
   wildfire) instead of the map's controls/popups bleeding through on top of
   them — see TW.suppressActiveMap()/registerActiveMap() in app.js, which
   also disables map drag/zoom interaction for the same reason. */
.tw-search-overlay{ display:none; position:fixed; inset:0; background:rgba(11,30,57,0.55); z-index:9993; align-items:flex-start; justify-content:center; padding:12vh 16px 16px; }
.tw-search-overlay.open{ display:flex; }
.tw-search-modal{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow); width:520px; max-width:100%; padding:22px; max-height:80vh; overflow-y:auto; }
.tw-search-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:12px; }
.tw-search-title{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:17px; color:var(--text); }
.tw-search-close{ background:none; border:none; font-size:16px; color:var(--text-mute); cursor:pointer; flex-shrink:0; width:32px; height:32px; }
.tw-search-current-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:14px; }
.tw-search-current-label{ font-size:13px; color:var(--text-dim); }
.tw-search-current-btn{ font-size:12px; padding:7px 12px; white-space:nowrap; }
.nav-search.modal-search-field{ background:var(--bg-2); border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:11px 14px; display:flex; align-items:center; gap:8px; position:relative; }
.nav-search.modal-search-field input{ flex:1; background:transparent; border:none; outline:none; font-size:14px; font-family:'Inter',sans-serif; color:var(--text); min-width:0; padding-right:22px; }
.tw-search-clear-btn{ background:none; border:none; color:var(--text-mute); cursor:pointer; font-size:13px; width:22px; height:22px; flex-shrink:0; }
.tw-search-clear-btn:hover{ color:var(--text); }
.tw-search-mic-btn{ background:var(--card); border:1px solid var(--line-strong); color:var(--text-dim); cursor:pointer; width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.tw-search-mic-btn:hover{ color:var(--accent); border-color:var(--accent); }
.tw-search-mic-btn.listening{ background:var(--accent); border-color:var(--accent); color:#fff; animation:tw-mic-pulse 1.4s ease-in-out infinite; }
@keyframes tw-mic-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(37,99,235,0.35); } 50%{ box-shadow:0 0 0 8px rgba(37,99,235,0); } }
.tw-search-status{ font-size:12px; color:var(--text-mute); min-height:16px; margin-top:8px; }
.tw-search-listbox{ list-style:none; margin:4px 0 0; padding:4px 0; border:1px solid var(--line); border-radius:var(--radius-sm); max-height:280px; overflow-y:auto; }
.tw-search-option{ padding:10px 12px; cursor:pointer; display:flex; flex-direction:column; gap:2px; border-radius:8px; }
.tw-search-option:hover, .tw-search-option.active{ background:var(--accent-dim); }
.tw-search-option-city{ font-size:14px; font-weight:600; color:var(--text); }
.tw-search-option-meta{ font-size:12px; color:var(--text-mute); }
.tw-search-lists{ margin-top:16px; display:flex; flex-direction:column; gap:16px; }
.tw-recent-searches{ margin-top:16px; }
.tw-recent-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-mute); margin-bottom:8px; font-weight:700; }
.tw-recent-chip, .tw-loc-chip{ border:none; cursor:pointer; font-family:'Inter',sans-serif; }

/* ---- mobile drawer (z-index: see search-modal comment above — same reason) ---- */
.tw-drawer-overlay{ display:none; position:fixed; inset:0; background:rgba(11,30,57,0.5); z-index:9990; }
.tw-drawer-overlay.open{ display:block; }
.tw-drawer{
  position:fixed; top:0; left:0; bottom:0; height:100vh; height:100dvh; width:320px; max-width:86vw; background:#fff; z-index:9991;
  transform:translateX(-100%); transition:transform 0.25s ease; display:flex; flex-direction:column;
  box-shadow:var(--shadow); overscroll-behavior:contain;
}
.tw-drawer.open{ transform:translateX(0); }
.tw-drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-shrink:0;
  padding:16px 20px; border-bottom:1px solid var(--line);
}
.tw-drawer-head .brand-logo-img{ width:150px; height:36px; }
.tw-drawer-close{ background:none; border:none; font-size:18px; color:var(--text-mute); cursor:pointer; width:44px; height:44px; flex-shrink:0; }
.tw-drawer-body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 20px 24px; }
.tw-drawer-location{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:13px; color:var(--text-dim); background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:16px; min-height:44px;
  cursor:pointer; font-family:'Inter',sans-serif; word-break:break-word; text-align:left;
}
.tw-drawer-location span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.tw-drawer-location-change{ flex-shrink:0; color:var(--accent); font-weight:700; font-size:12px; }
.tw-drawer-nav{ display:flex; flex-direction:column; gap:2px; margin-bottom:20px; }
.tw-drawer-group-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:none; border:none; padding:13px 8px; min-height:44px; font-size:15px; font-weight:600;
  color:var(--text); cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; text-align:left;
}
.tw-drawer-group-trigger.active{ color:var(--accent); }
.tw-drawer-group-trigger > span:first-child{ word-break:break-word; }
.tw-drawer-submenu{ display:flex; flex-direction:column; padding-left:14px; margin-bottom:4px; }
.tw-drawer-submenu a{ padding:12px 8px; min-height:44px; display:flex; align-items:center; font-size:14px; color:var(--text-dim); border-radius:var(--radius-sm); word-break:break-word; }
.tw-drawer-submenu a:hover{ background:var(--bg-2); }
.tw-drawer-submenu a.active{ color:var(--accent); font-weight:600; }
.tw-drawer-ctas{ display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.tw-drawer-ctas a{ text-decoration:none; text-align:center; min-height:44px; display:flex; align-items:center; justify-content:center; }
.tw-drawer-auth{ display:flex; flex-direction:column; gap:8px; padding-top:16px; border-top:1px solid var(--line); }
.tw-drawer-auth a, .tw-drawer-auth button{ width:100%; text-align:center; text-decoration:none; min-height:44px; }
body.tw-scroll-lock{ overflow:hidden; }
/* Leaflet's zoom/layer controls are keyboard-focusable and sit at z-index
   1000 by default — hiding them (not just covering them) while the drawer
   or search panel is open keeps them out of the tab order too, so focus
   can't silently leave the open menu. TW.suppressActiveMap() disables the
   underlying map interaction itself; this is the visual half of that. */
body.tw-scroll-lock .leaflet-control-container{ visibility:hidden; }

@media (max-width: 1024px){
  .tw-primary-nav{ display:none; }
  .tw-hamburger{ display:flex; }
  .tw-util-bar{ display:none; }
  .tw-header-right .tw-lang-wrap{ display:none; }
  /* Sign in/up or account+logout is already rendered in the mobile drawer
     (its own .tw-drawer-auth slot) — showing it a second time in the header
     just crowds the middle logo column into clipping on narrow phones.
     Hide the header's copy on mobile only. */
  #nav-auth-slot{ display:none; }
  /* `1fr`/`auto` grid tracks have an implicit min-content floor and won't
     shrink below it — on narrow phones that pushed the auth buttons off
     the right edge (horizontal overflow) instead of letting the logo
     column give up space. minmax(0, ...) removes that floor. */
  .tw-main-header-inner{ display:grid; grid-template-columns:40px minmax(0,1fr) minmax(0,max-content); align-items:center; gap:6px; padding:10px 16px; }
  .tw-main-header-inner .brand-logo{ justify-content:center; min-width:0; overflow:hidden; }
  .tw-header-right{ gap:6px; min-width:0; }
  .site-header-inner{ padding:10px 20px; flex-wrap:wrap; }
  /* Compact, fixed-height (44px = min touch target) auth buttons so both
     Sign in and Sign up fit and stay tappable at 360-390px widths. */
  .nav-auth{ gap:6px; flex-wrap:nowrap; min-width:0; }
  .nav-auth .btn-ghost, .nav-auth .btn-solid{
    height:44px; min-height:44px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center;
    font-size:12.5px; white-space:nowrap; flex-shrink:0;
  }
  .nav-user{ min-height:44px; }
}
@media (max-width: 600px){
  .brand-logo-img{ width:130px; height:34px; }
  .tw-header-right{ gap:6px; }
  .nav-user-name{ max-width:70px; }
  .nav-auth .btn-ghost, .nav-auth .btn-solid{ padding:0 10px; font-size:12px; }
}
@media (max-width: 360px){
  .brand-logo-img{ width:108px; height:30px; }
  .nav-user-name{ max-width:44px; }
  .nav-auth{ gap:5px; }
  .nav-auth .btn-ghost, .nav-auth .btn-solid{ padding:0 8px; font-size:11.5px; }
  .tw-header-right{ gap:5px; }
}

/* ================= PREMIUM FOOTER ================= */
.site-footer{ background:linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); color:#D7E1F0; }
.footer-top-cta{ border-bottom:1px solid rgba(255,255,255,0.1); }
.footer-top-cta-inner{
  max-width:var(--container-max-wide); margin:0 auto; padding:22px 32px; display:flex; align-items:center;
  justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.footer-top-cta-text{ font-size:14px; color:#fff; font-weight:500; }
.footer-top-cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.footer-cta-ghost{ border-color:rgba(255,255,255,0.3); color:#fff; }
.footer-cta-ghost:hover{ background:rgba(255,255,255,0.1); }

.footer-expanded{ max-width:var(--container-max-wide); margin:0 auto; padding:44px 32px 24px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:28px; margin-bottom:32px; }
.footer-brand-col .brand-logo-img{ width:260px; height:60px; }
.footer-brand-col .brand-logo-text{ font-size:26px; }
.footer-brand-sub{ font-size:13px; color:#9FB0CB; line-height:1.7; margin-top:12px; max-width:280px; }
.footer-col-title{ font-size:12px; text-transform:uppercase; letter-spacing:0.8px; color:#7E92B3; font-weight:700; margin-bottom:16px; }
.footer-col a{ display:block; font-size:13px; color:#C7D3E8; padding:6px 0; transition:color 0.15s ease; }
.footer-col a:hover{ color:#fff; }

.footer-locations-row{
  /* auto-fit (not auto-fill): with only a couple of short groups (e.g.
     "Popular Countries" + "Popular Cities") auto-fill still reserves as many
     empty column tracks as the row's full width allows, leaving a big dead
     zone to their right; auto-fit collapses unused tracks instead so the row
     only takes up as much width as it actually has content for. */
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 200px)); gap:20px 28px;
  padding-top:20px; margin-bottom:8px; border-top:1px solid rgba(255,255,255,0.08);
}
.footer-locations-row:empty{ display:none; }
.footer-col-wide{ grid-column:1 / -1; }
.footer-col-multilist{ column-width:170px; column-gap:24px; }
.footer-col-multilist a{ break-inside:avoid; }
@media (max-width: 700px){
  .footer-locations-row{ grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:16px 20px; }
  .footer-col-multilist{ column-width:140px; column-gap:16px; }
}
@media (max-width: 420px){
  .footer-locations-row{ grid-template-columns:1fr 1fr; }
  .footer-col-multilist{ column-count:2; column-width:auto; }
}
.footer-newsletter-row{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius); padding:20px 24px;
}
.footer-newsletter-sub{ font-size:13px; color:#9FB0CB; margin-top:4px; }
.footer-newsletter-form{ display:flex; gap:10px; flex-wrap:wrap; }
.footer-newsletter-form .nl-email-input{ background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); color:#fff; padding:10px 14px; border-radius:var(--radius-sm); font-size:13px; min-width:220px; font-family:'Inter',sans-serif; }
.footer-newsletter-form .nl-email-input::placeholder{ color:#8195B5; }
.footer-newsletter-row .nl-error{ width:100%; }
.footer-newsletter-row .nl-success{ width:100%; }

.footer-bottom{
  max-width:var(--container-max-wide); margin:0 auto; padding:20px 32px; border-top:1px solid rgba(255,255,255,0.1);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; color:#8195B5; position:relative;
}
.footer-links{ display:flex; gap:16px; flex-wrap:wrap; }
.footer-links a{ color:#8195B5; }
.footer-links a:hover{ color:#fff; }
.back-to-top{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,0.25); background:rgba(255,255,255,0.08);
  color:#fff; font-size:16px; cursor:pointer; align-items:center; justify-content:center;
}
.back-to-top:hover{ background:rgba(255,255,255,0.16); }

@media (max-width: 1024px){
  .footer-grid{ grid-template-columns:1fr 1fr 1fr; }
  .footer-brand-col{ grid-column:1 / -1; }
}
@media (max-width: 768px){
  .footer-top-cta-inner{ flex-direction:column; align-items:flex-start; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-newsletter-row{ flex-direction:column; align-items:stretch; }
  .footer-newsletter-form{ flex-direction:column; }
  .footer-newsletter-form .nl-email-input{ min-width:0; }
}
@media (max-width: 600px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:20px; }
  .footer-expanded{ padding:32px 20px 16px; }
  .footer-bottom{ padding:16px 20px; flex-direction:column; align-items:flex-start; }
}

/* ================= PREMIUM HOMEPAGE ================= */
.hero-premium{ position:relative; overflow:hidden; }
.hero-premium::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(160deg, var(--accent-dim) 0%, #fff 45%, var(--teal-dim) 100%);
  opacity:0.6; transition:background 0.4s ease;
}
.hero-premium[data-condition="clear"]::before{ background:linear-gradient(160deg, #FFE9A8 0%, #fff 45%, var(--accent-dim) 100%); }
.hero-premium[data-condition="cloudy"]::before{ background:linear-gradient(160deg, #DCE3ED 0%, #fff 45%, var(--bg-2) 100%); }
.hero-premium[data-condition="fog"]::before{ background:linear-gradient(160deg, #E4E7EC 0%, #fff 50%, #E4E7EC 100%); }
.hero-premium[data-condition="rain"]::before{ background:linear-gradient(160deg, #C7D6EE 0%, #fff 45%, var(--accent-dim) 100%); }
.hero-premium[data-condition="snow"]::before{ background:linear-gradient(160deg, #EAF1FB 0%, #fff 50%, #EAF1FB 100%); }
.hero-premium[data-condition="storm"]::before{ background:linear-gradient(160deg, #C9CEDA 0%, #fff 40%, var(--danger-dim, #FBD8D3) 100%); }
.hero-actions-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.hero-geo-btn{ display:inline-flex; align-items:center; gap:6px; }
.hero-summary-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:16px; font-size:13px; color:var(--text-dim); }
.hero-summary-item{ display:flex; align-items:center; gap:6px; background:var(--bg-2); border-radius:100px; padding:7px 14px; }

.hourly-strip-wrap{ position:relative; }
.hourly-strip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.popular-cities-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.popular-city-card{ display:block; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:18px; box-shadow:var(--shadow); text-decoration:none; transition:transform 0.15s ease, box-shadow 0.15s ease; }
.popular-city-card:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(20,24,31,0.09); }
.popular-city-icon{ font-size:22px; margin-bottom:8px; }
.popular-city-name{ font-size:15px; font-weight:700; margin-bottom:2px; }
.popular-city-state{ font-size:12px; color:var(--text-mute); }
.popular-city-rank{ font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:0.4px; font-weight:700; margin-top:6px; }

.why-tw-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }

.homepage-newsletter-card{ border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(135deg, var(--accent-dim), var(--teal-dim)); padding:32px; text-align:center; }
.homepage-newsletter-card .footer-newsletter-form{ justify-content:center; margin-top:16px; }
.homepage-newsletter-card .nl-email-input{ background:#fff; border:1px solid var(--line-strong); color:var(--text); min-width:260px; }
.homepage-newsletter-consent{ font-size:11px; color:var(--text-mute); margin-top:10px; }

.tooltip-label{ border-bottom:1px dotted var(--text-mute); cursor:help; }

@media (max-width: 1024px){
  .popular-cities-grid{ grid-template-columns:repeat(2, 1fr); }
  .why-tw-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px){
  .popular-cities-grid{ grid-template-columns:1fr 1fr; }
  .why-tw-grid{ grid-template-columns:1fr; }
  .hero-summary-row{ gap:8px; }
  .hero-summary-item{ padding:6px 10px; font-size:12px; }
  .homepage-newsletter-card{ padding:22px; }
  .homepage-newsletter-card .nl-email-input{ min-width:0; width:100%; }
}

/* ================= PREMIUM HOMEPAGE v2 (hero metrics, hourly, suitability,
   activities, AQI+suggestions, monthly) — homepage-only classes, none of
   these are referenced by any other page. ================= */

/* ---- Hero: two-column premium card, metric tile grid replaces the old
   single decorative icon panel ---- */
/* minmax(0, ...) on both tracks is load-bearing: a bare `1.15fr`/`0.85fr`
   has an implicit min-content floor, so once the left column's content
   (location name, temp, date-selector chips) or the right column's metric
   tiles got wide enough, neither track could shrink below that floor and
   the grid overflowed its 1120px container — with page-wide overflow-x:hidden,
   that overflow doesn't scroll, it just gets silently clipped (the right-side
   metric cards visibly cut off mid-word). minmax(0, ...) removes the floor
   so both columns actually respect the available width. */
.hero-premium{ padding:40px 32px; max-width:1120px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); gap:40px; align-items:center; border-radius:24px; }
.hero-premium > *:not(.hero-icon-watermark){ position:relative; z-index:1; min-width:0; }
.hero-icon-watermark{ position:absolute; top:-10px; right:-10px; width:180px; height:180px; opacity:0.08; z-index:0; pointer-events:none; }
.hero-icon-watermark svg{ width:100%; height:100%; stroke-width:1.2; }
.feels-like-line{ font-size:13.5px; color:var(--text-dim); margin-top:6px; }
.feels-like-line b{ color:var(--text); font-weight:700; }

.hero-metrics-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; min-width:0; }
.hero-metric-tile{
  background:rgba(255,255,255,0.7); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px; min-width:0;
}
.hero-metric-icon-row{ display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-mute); }
.hero-metric-icon-row .tw-icon{ width:14px; height:14px; color:var(--accent); flex-shrink:0; }
.hero-metric-value{ font-size:19px; font-weight:800; font-family:'Plus Jakarta Sans', sans-serif; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Hourly forecast: premium horizontal cards ---- */
.hourly-strip{ padding:6px 0; }
.hour-card{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.hour-card .hour-date{ font-size:10px; color:var(--text-mute); text-transform:uppercase; letter-spacing:0.4px; }
.hour-card .hour-time{ font-size:13px; font-weight:700; color:var(--text); }
.hour-card .hour-icon{ margin:4px 0; color:var(--accent); }
.hour-card .hour-icon .tw-icon{ width:26px; height:26px; }
.hour-card .hour-temp{ font-size:17px; font-weight:800; font-family:'Plus Jakarta Sans', sans-serif; }
.hour-card .hour-rain{ font-size:11.5px; color:var(--accent); font-weight:600; display:flex; align-items:center; gap:3px; }
.hour-card .hour-rain .tw-icon{ width:11px; height:11px; }
.hour-card.now .hour-icon, .hour-card.now .hour-rain{ color:#fff; }
.hour-card.marker .hour-icon{ color:var(--amber); }

/* ---- Outdoor suitability: legend + "you are here" marker + summary stat row ---- */
.suit-legend{ display:flex; flex-wrap:wrap; gap:14px; }
.suit-legend-item{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim); font-weight:600; }
.suit-legend-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.suitability-timeline-wrap{ position:relative; }
.suit-you-are-here{ position:absolute; left:6px; top:-30px; display:flex; flex-direction:column; align-items:center; font-size:11px; font-weight:700; color:#fff; white-space:nowrap; background:var(--text); padding:4px 10px; border-radius:6px; }
.suit-you-are-here::after{ content:""; width:2px; height:22px; background:var(--text); opacity:0.6; display:block; position:absolute; top:100%; left:50%; transform:translateX(-50%); }
.suit-stats-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin:24px 0 18px; }
.suit-stat-tile{ padding:0 14px 0 0; border-right:1px solid var(--line); }
.suit-stat-tile:last-child{ border-right:none; }
.suit-stat-label{ font-size:11.5px; color:var(--text-mute); font-weight:600; margin-bottom:6px; display:flex; align-items:center; gap:5px; }
.suit-stat-label .tw-icon{ width:13px; height:13px; }
.suit-stat-value{ font-size:16px; font-weight:800; color:var(--text); font-family:'Plus Jakarta Sans', sans-serif; }
.suit-stat-value .suit-stat-status{ font-weight:800; margin-left:4px; }

/* ---- Recommended activities: 3-column grid (2 rows for the 6 activities)
   on desktop/tablet, where all cards fit without scrolling; drops back to
   the original horizontal-scroll strip only on narrow phones, where 3
   columns would be too cramped — the prev/next buttons (reusing the same
   working hourly-strip-controls pattern/JS) are only shown in that mode. ---- */
.activity-strip{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; padding:6px 2px 12px; }
.activity-strip-controls{ display:none; }
.activity-card{
  border:1px solid transparent; border-radius:16px; box-shadow:var(--shadow); min-width:0;
  padding:16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
}
@media (max-width: 640px){
  .activity-strip{ display:flex; gap:14px; overflow-x:auto; scroll-behavior:smooth; }
  .activity-card{ flex:0 0 168px; }
  .activity-strip-controls{ display:flex; }
}
.activity-card-head{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.activity-card-icon{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.activity-card-icon .tw-icon{ width:22px; height:22px; color:#fff; }
.activity-card-title{ font-size:14px; font-weight:700; }
.activity-card-status{ display:inline-flex; padding:3px 12px; border-radius:100px; font-size:11px; font-weight:700; color:#fff; }
.activity-card-time{ font-size:11.5px; color:var(--text-dim); display:flex; align-items:center; gap:5px; }
.activity-card-time .tw-icon{ width:12px; height:12px; }
.activity-card-note{ font-size:11.5px; color:var(--text-mute); line-height:1.4; }

/* ---- AQI + Today's suggestions ---- */
.aqi-suggestions-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.aqi-ring-card, .suggestions-card{ border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); padding:24px; }
.aqi-ring-wrap{ position:relative; display:inline-flex; align-items:center; justify-content:center; margin-bottom:6px; flex-shrink:0; }
.aqi-ring-center{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.aqi-ring-center-icon{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.aqi-ring-center-icon .tw-icon{ width:18px; height:18px; color:#fff; }
.aqi-ring-value{ font-size:34px; font-weight:800; font-family:'Plus Jakarta Sans', sans-serif; line-height:1; }
.aqi-ring-band{ font-size:14px; font-weight:700; margin-top:4px; }
.aqi-ring-head{ display:flex; align-items:center; gap:22px; margin-bottom:14px; }
.aqi-scale-bar{ display:flex; gap:2px; height:8px; border-radius:100px; overflow:hidden; margin-bottom:5px; }
.aqi-scale-labels{ display:flex; font-size:9.5px; color:var(--text-mute); margin-bottom:6px; }
.aqi-scale-labels span{ flex:1; text-align:center; }
.aqi-pollutant-block{ margin-top:12px; }
.aqi-pollutant-row{ display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:6px; }
.aqi-pollutant-name{ color:var(--text-mute); }
.aqi-pollutant-value{ font-weight:700; color:var(--text); }
.aqi-pollutant-bar-track{ height:6px; border-radius:100px; background:var(--bg-2); overflow:hidden; }
.aqi-pollutant-bar-fill{ height:100%; border-radius:100px; }
.suggestion-row{ display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.suggestion-row:last-child{ border-bottom:none; }
.suggestion-icon{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--bg-2); }
.suggestion-icon .tw-icon{ width:18px; height:18px; color:#fff; }
.suggestion-title{ font-size:13px; font-weight:700; margin-bottom:2px; }
.suggestion-text{ font-size:12.5px; color:var(--text-dim); line-height:1.5; }

/* ---- Today vs last year ---- */
.year-compare-card{ display:flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); padding:24px; }
.year-compare-col{ flex:1; text-align:center; }
.year-compare-label{ font-size:12px; color:var(--text-mute); text-transform:uppercase; letter-spacing:0.4px; font-weight:700; margin-bottom:8px; }
.year-compare-temp{ font-size:26px; font-weight:800; font-family:'Plus Jakarta Sans', sans-serif; }
.year-compare-rain{ display:flex; align-items:center; justify-content:center; gap:5px; font-size:13px; color:var(--text-dim); margin-top:6px; }
.year-compare-cond{ font-size:12px; color:var(--text-mute); margin-top:4px; }
.year-compare-delta{ display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--text-mute); flex-shrink:0; }
.year-compare-delta-text{ font-size:12.5px; font-weight:700; text-align:center; max-width:120px; }
@media (max-width: 600px){
  .year-compare-card{ flex-direction:column; }
  .year-compare-delta{ flex-direction:row; }
}

/* ---- Travel impact strip: always-on plain-language summary from data
   already fetched for the hero/suitability (no extra API calls) ---- */
.travel-impact-strip{ display:flex; align-items:center; gap:16px; border-radius:14px; padding:16px 20px; }
.travel-impact-icon{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.travel-impact-icon .tw-icon{ width:20px; height:20px; color:#fff; }
.travel-impact-title{ font-size:14px; font-weight:700; color:var(--text); }
.travel-impact-text{ font-size:13px; color:var(--text-dim); margin-top:2px; }

/* ---- 7-day trend chart: one axis (rain %), temp shown as direct labels ---- */
.trend-chart-card{ border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); padding:24px 20px 16px; display:flex; justify-content:space-between; gap:6px; }
.trend-col{ display:flex; flex-direction:column; align-items:center; flex:1; gap:6px; }
.trend-hi{ font-size:14px; font-weight:800; color:var(--text); }
.trend-track{ width:20px; height:100px; background:var(--bg-2); border-radius:100px; display:flex; align-items:flex-end; overflow:hidden; }
.trend-fill{ width:100%; border-radius:100px; position:relative; }
.trend-pct{ font-size:10px; font-weight:700; color:var(--accent); }
.trend-lo{ font-size:12px; color:var(--text-mute); }
.trend-day{ font-size:12px; font-weight:700; color:var(--text-dim); margin-top:2px; }
.trend-date{ font-size:10.5px; color:var(--text-mute); }
@media (max-width: 700px){
  .trend-chart-card{ overflow-x:auto; }
  .trend-col{ flex:0 0 60px; }
}

/* ---- Monthly weather section ---- */
.monthly-outlook-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:20px; align-items:start; }
.home-calendar-card{ border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); padding:22px; }
.home-calendar-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.home-calendar-head-title{ font-size:15px; font-weight:700; }
.home-calendar-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:5px; }
.home-calendar-weekday{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.3px; color:var(--text-mute); text-align:center; padding-bottom:6px; font-weight:700; }
.home-calendar-cell{ aspect-ratio:1/1; border-radius:10px; background:var(--bg-2); border:1px solid var(--line); padding:6px 5px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:10.5px; }
.home-calendar-cell.has-data{ background:var(--card); cursor:pointer; transition:background 0.15s ease, border-color 0.15s ease, transform 0.1s ease; }
.home-calendar-cell.has-data:hover, .home-calendar-cell.has-data:focus-visible{ background:var(--accent-dim); border-color:var(--accent); outline:none; }
.home-calendar-cell.has-data:active{ transform:scale(0.96); }
.home-calendar-cell.today{ border:1.5px solid var(--accent); }
.home-calendar-cell .hc-date{ font-weight:700; font-size:11px; }
.home-calendar-cell .hc-icon{ color:var(--accent); }
.home-calendar-cell .hc-icon .tw-icon{ width:14px; height:14px; }
.home-calendar-cell .hc-temp{ font-size:9.5px; color:var(--text-dim); }
.home-calendar-cell.no-data{ color:var(--text-mute); }
.home-calendar-cell-blank{ background:transparent; border:none; }
.outlook-donut-card{ border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); padding:22px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.outlook-donut-title{ font-size:14px; font-weight:700; align-self:flex-start; }
.outlook-donut-legend{ width:100%; display:flex; flex-direction:column; gap:8px; }
.outlook-legend-row{ display:flex; align-items:center; justify-content:space-between; font-size:13px; }
.outlook-legend-label{ display:flex; align-items:center; gap:8px; color:var(--text-dim); }
.outlook-legend-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.outlook-legend-count{ font-weight:700; color:var(--text); }

@media (max-width: 1024px){
  .aqi-suggestions-grid{ grid-template-columns:1fr; }
  .monthly-outlook-grid{ grid-template-columns:1fr; }
}
@media (max-width: 860px){
  .hero-premium{ grid-template-columns:1fr; }
  .hero-metrics-grid{ grid-template-columns:repeat(4, 1fr); }
  .suit-stats-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 600px){
  .hero-metrics-grid{ grid-template-columns:repeat(2, 1fr); }
  .home-calendar-cell{ font-size:9px; }
  .home-calendar-cell .hc-temp{ display:none; }
}

/* ================= HOMEPAGE SCALE-UP ================= (scoped to
   body.homepage — set only on index.html's <body> — so none of this
   touches any other page's shared classes.) */
body.homepage{ --container-max: 1320px; }
body.homepage .hero-premium, body.homepage .weather-layout, body.homepage .section{ max-width: var(--container-max); }

/* -- Bigger type across homepage headings/values/labels -- */
body.homepage .section-title{ font-size:23px; }
body.homepage .section-sub{ font-size:14.5px; }
body.homepage .section-eyebrow{ font-size:12.5px; }
body.homepage .location{ font-size:30px; }
body.homepage .cond-text{ font-size:21px; }
body.homepage .temp-big{ font-size:116px; }
body.homepage .hilo, body.homepage .feels-like-line{ font-size:15px; }

/* ================= LARGE / 4K SCREENS =================
   Everything above is already large-screen-safe by construction: a solid
   full-bleed body background plus centered max-width content columns means
   nothing stretches or breaks edge-to-edge at any viewport width, and the
   logo/icons are all SVG (crisp at any size). The one real improvement for
   very wide monitors/TVs (1600px+ — covers 1920/2560/4K) is that the fixed
   1120/1360/1320px columns start looking narrow with a lot of dead space on
   either side, so widen (not remove) the cap — content stays centered and
   readable, just uses more of the available width. */
@media (min-width: 1600px){
  :root{ --container-max: 1280px; --container-max-wide: 1560px; }
  body.homepage{ --container-max: 1480px; }
  /* Most page-content wrappers hardcode 1120px (predates the --container-max
     token) rather than referencing the variable, so widen them directly here
     too — every page (city/locality, blog, business listings, static pages),
     not just the homepage, gets the wider column on large screens. */
  .hero, .page-head, .section, .breadcrumb, .weather-tabs, .weather-layout,
  .tw-weather-summary, .blog-hero-intro, .hero-premium{ max-width: 1280px; }
}
@media (min-width: 2200px){
  :root{ --container-max: 1440px; --container-max-wide: 1760px; }
  body.homepage{ --container-max: 1680px; }
  .hero, .page-head, .section, .breadcrumb, .weather-tabs, .weather-layout,
  .tw-weather-summary, .blog-hero-intro, .hero-premium{ max-width: 1440px; }
}

/* ================= RTL (Arabic) =================
   Set on <body> by TW.applyI18n() (i18n.js) when the selected language is
   Arabic. Most of the site is flexbox/grid-based, which browsers already
   mirror automatically under dir="rtl" — this block only needs to flip the
   explicit left-oriented declarations (auto-margins used to push an element
   to one side, fixed left padding/margins, and text-align:left) so nothing
   visually collides with the mirrored layout. A good-faith first pass, not
   exhaustively checked in a real browser (not available in this environment)
   — worth a manual look afterward. */
[dir="rtl"]{ text-align: right; }
/* Leaflet isn't RTL-aware: it positions tiles/markers/the zoom-animation
   proxy element with inline `left`/`transform` math that assumes an LTR
   ancestor. Under body[dir=rtl] that math comes out wrong — reproduced live
   (Playwright, RTL, homepage radar teaser): the zoom-anim proxy landed at
   x=23439, ballooning document.documentElement.scrollWidth to ~10,400px on
   a 390px viewport, which is what actually caused the "blank/broken screen,
   menu doesn't respond" report — the whole page was laid out 25x wider than
   the viewport, not a drawer bug. Forcing every Leaflet map's own container
   back to ltr isolates its internal math from the page's direction; this
   covers every map on the site (home radar teaser, /radar.html,
   /conditions-map.html, /earthquakes.html, /wildfire.html, listing maps)
   since Leaflet always names its root container "leaflet-container". */
.leaflet-container{ direction: ltr; }
[dir="rtl"] .date-forecast-tag,
[dir="rtl"] .radar-layer-badge,
[dir="rtl"] .quake-count,
[dir="rtl"] .quake-attribution,
[dir="rtl"] .tw-header-search,
[dir="rtl"] .suit-legend-item{ margin-left: 0; margin-right: auto; }
[dir="rtl"] .day-card .dtemp span,
[dir="rtl"] .open-status-badge,
[dir="rtl"] .suit-stat-value .suit-stat-status{ margin-left: 0; margin-right: 4px; }
[dir="rtl"] .section, [dir="rtl"] .page-head, [dir="rtl"] .weather-layout,
[dir="rtl"] .listing-header-info,
[dir="rtl"] .tips-list, [dir="rtl"] .editorial-guidelines-box ul,
[dir="rtl"] .toc-list .toc-level-3 a, [dir="rtl"] .tw-drawer-submenu{ padding-left: 0; }
[dir="rtl"] .about-illo-node, [dir="rtl"] .ov-pending-row, [dir="rtl"] .admin-table th,
[dir="rtl"] .favorites-compare-table th, [dir="rtl"] .favorites-compare-table td,
[dir="rtl"] .tw-lang-option, [dir="rtl"] .tw-drawer-lang .tw-lang-btn span:nth-child(2),
[dir="rtl"] .tw-profile-item, [dir="rtl"] .article-header{ text-align: right; }
[dir="rtl"] .breadcrumb .crumb-sep{ transform: scaleX(-1); }

body.homepage .hero-metric-value{ font-size:22px; }
body.homepage .hero-metric-icon-row{ font-size:12.5px; }
body.homepage .hero-metric-icon-row .tw-icon{ width:16px; height:16px; }
body.homepage .hero-metric-tile{ padding:18px 20px; }

body.homepage .hour-card{ flex-basis:118px; }
body.homepage .hour-time{ font-size:15px; }
body.homepage .hour-temp{ font-size:19px; }
body.homepage .hour-rain{ font-size:13px; }
body.homepage .hour-icon .tw-icon{ width:30px; height:30px; }

body.homepage .suit-stat-value{ font-size:19px; }
body.homepage .suit-stat-label{ font-size:13px; }
body.homepage .suit-legend-item{ font-size:13px; }

body.homepage .activity-card{ flex-basis:222px; padding:22px 18px; gap:10px; }
body.homepage .activity-card-icon{ width:60px; height:60px; }
body.homepage .activity-card-icon .tw-icon{ width:28px; height:28px; }
body.homepage .activity-card-title{ font-size:17px; }
body.homepage .activity-card-status{ font-size:13px; padding:4px 14px; }
body.homepage .activity-card-time{ font-size:13px; }
body.homepage .activity-card-note{ font-size:13px; }

body.homepage .aqi-ring-value{ font-size:37px; }
body.homepage .aqi-ring-band{ font-size:16px; }
body.homepage .aqi-ring-center-icon{ width:42px; height:42px; }
body.homepage .aqi-ring-center-icon .tw-icon{ width:21px; height:21px; }
body.homepage .aqi-pollutant-name, body.homepage .aqi-pollutant-value{ font-size:15px; }
body.homepage .side-card-title{ font-size:14px; }

body.homepage .suggestion-icon{ width:42px; height:42px; }
body.homepage .suggestion-icon .tw-icon{ width:21px; height:21px; }
body.homepage .suggestion-title{ font-size:15px; }
body.homepage .suggestion-text{ font-size:14px; }

body.homepage .dtemp{ font-size:27px; }
body.homepage .dname{ font-size:15px; }
body.homepage .drain{ font-size:13px; }
body.homepage .dicon .tw-icon{ width:26px !important; height:26px !important; }

body.homepage .outlook-donut-title{ font-size:16px; }
body.homepage .home-calendar-head-title{ font-size:17px; }
body.homepage .radar-teaser-visual{ height:230px; }

@media (max-width: 1400px){
  body.homepage{ --container-max: 1180px; }
}
@media (max-width: 860px){
  body.homepage .activity-card{ flex-basis:190px; }
  body.homepage .temp-big{ font-size:96px; }
}