/* ==========================================================================
   The homepage — handover §3.3 (desktop 1440) and §3.6 (phone 390).
   Everything drawn, not boxed. Plates on mist, no borders on panels.
   ========================================================================== */

.mdwa-page--home { padding-top: 24px; }
.mdwa-home {
  max-width: 1440px; margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 56px);
  display: grid; gap: 40px;
}
/* Grid items default to min-width: auto, so the week chart's own minimum
   width stretched the whole page to 624px on a 390px phone. Let each section
   shrink; the chart scrolls inside its own plate instead (§ no page scroll). */
.mdwa-home > *, .mdwa-opening > *, .mdwa-instruments > * { min-width: 0; }

/* --- Alerts (§3.3 item 7): above the opening when active ---------------- */
.mdwa-alerts { display: grid; gap: 12px; }
.mdwa-alert {
  position: relative; background: var(--mdwa-plate); border-radius: var(--mdwa-radius-panel);
  padding: 20px 24px 20px 30px; overflow: hidden;
}
.mdwa-alert::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--edge); }
.mdwa-alert--advisory  { --edge: var(--mdwa-sev-advisory);  --text: var(--mdwa-sev-advisory-text); }
.mdwa-alert--watch     { --edge: var(--mdwa-sev-watch);     --text: var(--mdwa-sev-watch-text); }
.mdwa-alert--warning   { --edge: var(--mdwa-sev-warning);   --text: var(--mdwa-sev-warning-text); }
.mdwa-alert--emergency { --edge: var(--mdwa-sev-emergency); --text: var(--mdwa-sev-emergency-text); }
.mdwa-alert-event { font-size: var(--mdwa-size-24); font-weight: 600; color: var(--text); margin: 0; }
.mdwa-alert-meta { color: var(--mdwa-ink-2); font-size: var(--mdwa-size-15); margin: 2px 0 8px; }
.mdwa-alert-summary { margin: 0; max-width: var(--mdwa-measure); }
.mdwa-alert-more { margin: 8px 0 0; font-size: var(--mdwa-size-15); }

/* --- Opening (§3.3 item 2): 0.9 / 1.1, gap 40 --------------------------- */
.mdwa-opening { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: start; }
.mdwa-opening-text { padding-top: 8px; }
.mdwa-edition { margin: 4px 0 0; font-size: var(--mdwa-size-15); font-weight: 600; }
.mdwa-edition a { color: var(--mdwa-teal); text-decoration: none; }
.mdwa-edition a:hover { text-decoration: underline; }
.mdwa-headline {
  font-size: var(--mdwa-size-60); line-height: 1.02; font-weight: 300;
  letter-spacing: var(--mdwa-tracking-display); color: var(--mdwa-deep-water);
  margin: 10px 0 20px; text-wrap: balance;
}

/* Fixed room for the county lines, so swapping counties never moves the page. */
.mdwa-now { min-height: 9.5rem; }
.mdwa-now-where { margin: 0; font-size: var(--mdwa-size-15); font-weight: 600; color: var(--mdwa-ink-2); }
.mdwa-now-reading { display: flex; align-items: baseline; gap: 14px; margin: 2px 0 0; }
.mdwa-now-temp { font-size: var(--mdwa-size-44); font-weight: 300; letter-spacing: var(--mdwa-tracking-display); color: var(--mdwa-ink); font-variant-numeric: tabular-nums; }
.mdwa-now-cond { font-size: var(--mdwa-size-20); color: var(--mdwa-ink-2); }
.mdwa-now-line, .mdwa-now-empty { font-size: 1.1875rem; color: var(--mdwa-ink-2); margin: 6px 0 0; max-width: 25em; }

.mdwa-locate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 18px 0 20px; }
.mdwa-locate-button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px;
  border: 0; border-radius: var(--mdwa-radius-chip); cursor: pointer;
  background: var(--mdwa-plate); color: var(--mdwa-teal);
  box-shadow: inset 0 0 0 1px var(--mdwa-sage-line);
  font: inherit; font-size: var(--mdwa-size-15); font-weight: 600;
  transition: background var(--mdwa-motion-chip) var(--mdwa-ease);
}
.mdwa-locate-button:hover { background: var(--mdwa-sage); }
.mdwa-locate-button[aria-busy="true"] { opacity: .7; cursor: progress; }
.mdwa-locate-or { color: var(--mdwa-ink-3); font-size: var(--mdwa-size-15); }
.mdwa-locate-status { flex-basis: 100%; margin: 0; min-height: 1.4em; font-size: var(--mdwa-size-15); color: var(--mdwa-ink-2); }

.mdwa-regions { display: flex; flex-wrap: wrap; gap: 8px; }
.mdwa-region-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border: 0; border-radius: var(--mdwa-radius-chip); cursor: pointer;
  background: var(--mdwa-sage); color: var(--mdwa-ink);
  font: inherit; font-size: var(--mdwa-size-15); font-weight: 500;
  transition: background var(--mdwa-motion-chip) var(--mdwa-ease), color var(--mdwa-motion-chip) var(--mdwa-ease);
}
.mdwa-region-chip:hover { background: var(--mdwa-sage-line); }
.mdwa-region-chip[aria-pressed="true"] { background: var(--mdwa-teal); color: var(--mdwa-plate); }
.mdwa-region-reading { font-variant-numeric: tabular-nums; font-weight: 600; }

/* --- The map plate ------------------------------------------------------ */
.mdwa-map-plate {
  position: relative; margin: 0; background: var(--mdwa-plate);
  border-radius: var(--mdwa-radius-map); padding: 28px; overflow: hidden;
}
.mdwa-map { display: block; width: 100%; height: auto; overflow: hidden; border-radius: 14px; }
.mdwa-map-water { fill: var(--mdwa-mist); }
/* Three surfaces, one step apart in both themes: water (mist), neighbouring
   land (plate), Maryland (sage). Mixing sage into anything failed one theme or
   the other — too close to Maryland in light, or to the water in dark. */
.mdwa-map-context { fill: var(--mdwa-plate); stroke: none; }
.mdwa-map-current { fill: none; stroke: var(--mdwa-sage-line); stroke-width: 1; stroke-dasharray: 2 5; stroke-linecap: round; }
/* §3.7: the dotted shore — a dotted stroke under every county; land covers
   it wherever two counties meet, so it only shows where land meets water. */
.mdwa-map-shore path { fill: none; stroke: var(--mdwa-teal); stroke-opacity: .55; stroke-width: 4; stroke-dasharray: 0.1 4.5; stroke-linecap: round; }
.mdwa-map-county {
  fill: var(--mdwa-sage); stroke: var(--mdwa-plate); stroke-width: 1.1; stroke-linejoin: round;
  cursor: pointer; outline: none;
  transition: fill var(--mdwa-motion-hover) var(--mdwa-ease);
}
.mdwa-map-county:hover, .mdwa-map-county.is-lifted { fill: var(--mdwa-plate); }
.mdwa-map-county.is-selected { fill: var(--mdwa-yellow); stroke: var(--mdwa-deep-water); stroke-width: 1.6; }
.mdwa-map-county:focus-visible { stroke: var(--mdwa-teal); stroke-width: 3; }
/* §3.3 item 7 — the alert on the map, in the severity colours (alerts only). */
.mdwa-map-alert { fill-opacity: .22; stroke-width: 2; stroke-linejoin: round; }
.mdwa-map-alert--zone { fill-opacity: .16; stroke-width: 1.4; stroke-dasharray: 5 4; }
.mdwa-map-alert--advisory  { fill: var(--mdwa-sev-advisory);  stroke: var(--mdwa-sev-advisory); }
.mdwa-map-alert--watch     { fill: var(--mdwa-sev-watch);     stroke: var(--mdwa-sev-watch); }
.mdwa-map-alert--warning   { fill: var(--mdwa-sev-warning);   stroke: var(--mdwa-sev-warning); }
.mdwa-map-alert--emergency { fill: var(--mdwa-sev-emergency); stroke: var(--mdwa-sev-emergency); fill-opacity: .3; }
.mdwa-map-glow circle:first-child { fill: var(--mdwa-yellow); fill-opacity: .28; }
.mdwa-map-glow circle:last-child { fill: var(--mdwa-yellow); stroke: var(--mdwa-deep-water); stroke-width: 1; }
.mdwa-map-mark { position: absolute; top: 18px; right: 20px; width: 96px; height: 96px; pointer-events: none; }
.mdwa-map-hint { position: absolute; left: 28px; bottom: 20px; font-size: var(--mdwa-size-15); color: var(--mdwa-ink-3); }
.mdwa-map-label {
  position: absolute; left: 0; top: 0; margin: 0; pointer-events: none; white-space: nowrap;
  background: var(--mdwa-plate); color: var(--mdwa-ink); border-radius: 10px; padding: 6px 10px;
  font-size: var(--mdwa-size-13); font-weight: 600; box-shadow: 0 6px 16px -8px rgba(18, 59, 82, .45);
  transform: translate(-50%, calc(-100% - 10px));
}

/* §3.5: the one orchestrated moment — county lines draw in, the selected
   county fills last. Reduced motion: a fade. */
@media (prefers-reduced-motion: no-preference) {
  .mdwa-map-counties .mdwa-map-county { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: mdwa-draw var(--mdwa-motion-draw) var(--mdwa-ease) forwards; }
  .mdwa-map-county.is-selected { animation: mdwa-draw var(--mdwa-motion-draw) var(--mdwa-ease) forwards, mdwa-lit 260ms var(--mdwa-ease) var(--mdwa-motion-draw) both; }
}
@keyframes mdwa-draw { to { stroke-dashoffset: 0; } }
@keyframes mdwa-lit { from { fill: var(--mdwa-sage); } to { fill: var(--mdwa-yellow); } }

/* --- Section rhythm ----------------------------------------------------- */
.mdwa-section-title { font-size: var(--mdwa-size-24); font-weight: 600; color: var(--mdwa-deep-water); margin: 0 0 14px; }
.mdwa-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.mdwa-section-link { font-size: var(--mdwa-size-15); font-weight: 600; }

/* --- Instruments (§3.3 item 3): 1.2 / 1 / 1, gap 18 --------------------- */
.mdwa-instruments { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; }
.mdwa-panel { background: var(--mdwa-plate); border-radius: var(--mdwa-radius-panel); padding: 20px 22px; min-height: 250px; display: grid; align-content: start; }
.mdwa-panel-title { font-size: 1rem; font-weight: 700; color: var(--mdwa-ink); margin: 0 0 10px; }
.mdwa-panel-foot { margin: 10px 0 0; font-size: var(--mdwa-size-15); color: var(--mdwa-ink-2); }
.mdwa-panel svg { display: block; width: 100%; height: auto; max-width: 440px; }
/* A panel spanning a tablet row must not scale its chart (and its labels) up. */
.mdwa-panel--tide svg { max-width: 520px; }
.mdwa-rule { stroke: var(--mdwa-sage-line); stroke-width: 1; }
.mdwa-chart-label text { font-size: 11px; fill: var(--mdwa-ink-3); font-variant-numeric: tabular-nums; }
.mdwa-tide-curve, .mdwa-sun-arc { fill: none; stroke: var(--mdwa-ink-2); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mdwa-tide-night { fill: var(--mdwa-sage); opacity: .55; }
.mdwa-now-dot, .mdwa-sun-dot { fill: var(--mdwa-yellow); stroke: var(--mdwa-deep-water); stroke-width: 1.5; }
.mdwa-sun-gold { fill: none; stroke: var(--mdwa-yellow); stroke-width: 5; stroke-linecap: round; opacity: .85; }
.mdwa-sun-below { fill: none; stroke: var(--mdwa-ink-3); stroke-width: 1.75; }
.mdwa-panel--moon svg { width: 118px; margin: 4px auto 0; }
.mdwa-panel--moon .mdwa-panel-foot { text-align: center; }
.mdwa-moon-disc { fill: var(--mdwa-plate); stroke: var(--mdwa-sage-line); stroke-width: 1.75; }
.mdwa-moon-lit { fill: var(--mdwa-yellow); stroke: var(--mdwa-ink-2); stroke-width: 1.75; stroke-linejoin: round; }

/* --- The week (§3.3 item 4) --------------------------------------------- */
.mdwa-week-plate { background: var(--mdwa-plate); border-radius: var(--mdwa-radius-panel); padding: 22px 24px 14px; overflow-x: auto; }
.mdwa-week-svg { display: block; width: 100%; min-width: 560px; height: auto; color: var(--mdwa-ink-2); }
.mdwa-week-today { stroke: var(--mdwa-teal); stroke-width: 3; stroke-linecap: round; }
.mdwa-week-band { fill: var(--mdwa-sage); }
.mdwa-week-hiline { fill: none; stroke: var(--mdwa-ink-2); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.mdwa-week-loline { fill: none; stroke: var(--mdwa-ink-3); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.mdwa-week-day { font-size: 13px; font-weight: 600; fill: var(--mdwa-ink-2); }
.mdwa-week-hi { font-size: 15px; font-weight: 600; fill: var(--mdwa-ink); font-variant-numeric: tabular-nums; }
.mdwa-week-lo { font-size: 13px; fill: var(--mdwa-ink-3); font-variant-numeric: tabular-nums; }
.mdwa-week-pop { fill: var(--mdwa-teal); }
.mdwa-week-pct, .mdwa-week-note { font-size: 11px; fill: var(--mdwa-ink-3); }
.mdwa-week-note { font-weight: 600; fill: var(--mdwa-ink-2); }

/* --- The wire (§3.3 item 5) ---------------------------------------------- */
.mdwa-wire-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mdwa-wire-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px;
  background: var(--mdwa-plate); border-radius: var(--mdwa-radius-chip); font-size: var(--mdwa-size-15);
}
.mdwa-wire-chip .mdwa-icon { color: var(--mdwa-teal); }
.mdwa-wire-type { font-weight: 600; }
.mdwa-wire-place { color: var(--mdwa-ink-2); }
.mdwa-wire-ago { color: var(--mdwa-ink-3); font-size: var(--mdwa-size-13); }
.mdwa-wire-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 18px 0 0; }
.mdwa-wire-note { color: var(--mdwa-ink-3); font-size: var(--mdwa-size-13); max-width: 28.5em; }
/* §3.3: the only teal-filled element above the fold. */
.mdwa-button {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
  border-radius: var(--mdwa-radius-chip); background: var(--mdwa-teal); color: var(--mdwa-plate);   /* #fff on dark teal is 2.5:1 */
  font-weight: 700; text-decoration: none;
  transition: filter var(--mdwa-motion-chip) var(--mdwa-ease);
}
.mdwa-button:hover { filter: brightness(1.08); text-decoration: none; }

/* --- Seasonal note (§3.3 item 6) ---------------------------------------- */
.mdwa-note { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: start; }
.mdwa-note-mark { padding-top: 4px; }
.mdwa-note-body > * { max-width: var(--mdwa-measure); }
.mdwa-note-kicker { margin: 0; font-size: var(--mdwa-size-13); font-weight: 600; color: var(--mdwa-ink-3); letter-spacing: .02em; }
.mdwa-note-title { font-size: var(--mdwa-size-24); font-weight: 600; color: var(--mdwa-deep-water); margin: 2px 0 8px; text-wrap: balance; }
.mdwa-note-text { font-size: 1.1875rem; margin: 0; }
.mdwa-note-source { font-size: var(--mdwa-size-13); color: var(--mdwa-ink-3); margin: 10px 0 0; }
.mdwa-note-source a { color: inherit; }
.mdwa-note-more { margin: 8px 0 0; font-size: var(--mdwa-size-15); font-weight: 600; }

/* --- From the forecast desk (§3.3 item 8) ------------------------------- */
.mdwa-desk-body { background: var(--mdwa-plate); border-radius: var(--mdwa-radius-panel); padding: 28px clamp(20px, 4vw, 48px); }
.mdwa-desk-body > * { max-width: var(--mdwa-measure); }
.mdwa-desk-headline { font-size: var(--mdwa-size-32); font-weight: 300; letter-spacing: -0.01em; line-height: 1.12; margin: 0 0 14px; text-wrap: balance; }
.mdwa-desk-headline a { color: var(--mdwa-deep-water); text-decoration: none; }
.mdwa-desk-headline a:hover { text-decoration: underline; }
.mdwa-desk-body p { font-size: 1.1875rem; margin: 0 0 14px; }
.mdwa-desk-byline { color: var(--mdwa-ink-3); font-size: var(--mdwa-size-15) !important; }
.mdwa-desk-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-weight: 600; font-size: var(--mdwa-size-17) !important; }

.mdwa-empty { color: var(--mdwa-ink-2); margin: 0; }

/* --- County pages (§3.4) ------------------------------------------------ */
.mdwa-hourly-svg { min-width: 720px; }
.mdwa-hour-label { font-size: 12px; font-weight: 600; fill: var(--mdwa-ink-2); }
.mdwa-hour-temp { font-size: 13px; font-weight: 600; fill: var(--mdwa-ink); font-variant-numeric: tabular-nums; }
.mdwa-nws-plate { background: var(--mdwa-plate); border-radius: var(--mdwa-radius-panel); padding: 8px 24px 18px; }
.mdwa-nws-list { list-style: none; margin: 0; padding: 0; }
.mdwa-nws-period { padding: 14px 0; border-top: 1px solid var(--mdwa-sage-line); display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 4px 24px; }
.mdwa-nws-period:first-child { border-top: 0; }
.mdwa-nws-name { margin: 0; font-weight: 700; color: var(--mdwa-ink); }
.mdwa-nws-temp { display: block; font-weight: 500; color: var(--mdwa-ink-2); font-size: var(--mdwa-size-15); font-variant-numeric: tabular-nums; }
.mdwa-nws-text { margin: 0; max-width: var(--mdwa-measure); }
.mdwa-nws-source { margin: 6px 0 0; font-size: var(--mdwa-size-13); color: var(--mdwa-ink-3); }
.mdwa-inland-line { margin: 0; font-size: 1.1875rem; max-width: 20em; }
.mdwa-neighbour-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mdwa-neighbour-chips .mdwa-chip { text-decoration: none; }
.mdwa-chip--quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--mdwa-sage-line); color: var(--mdwa-teal); }
@media (max-width: 700px) { .mdwa-nws-period { grid-template-columns: 1fr; } }

/* --- The forecast desk (§3.4 Today / Forecast) -------------------------- */
.mdwa-issue {
  display: grid; gap: 40px;
  max-width: 1440px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 56px);   /* the same page frame as the homepage */
}
.mdwa-issue > * { min-width: 0; }
.mdwa-issue-head .mdwa-headline { max-width: 11em; }
.mdwa-ribbon { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.mdwa-ribbon li { display: flex; align-items: baseline; gap: 8px; font-size: var(--mdwa-size-15); color: var(--mdwa-ink-2); }
.mdwa-ribbon b { font-size: var(--mdwa-size-20); font-weight: 600; color: var(--mdwa-ink); font-variant-numeric: tabular-nums; }
.mdwa-ribbon-cond { color: var(--mdwa-ink-3); font-size: var(--mdwa-size-13); }
.mdwa-issue-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: start; }
.mdwa-issue-body { background: var(--mdwa-plate); border-radius: var(--mdwa-radius-panel); padding: 32px clamp(20px, 4vw, 56px); }
.mdwa-issue-body > * { max-width: var(--mdwa-measure); }
.mdwa-issue-body p, .mdwa-issue-body li { font-size: 1.1875rem; line-height: 1.6; }
.mdwa-issue-body h2, .mdwa-issue-body h3 { font-size: var(--mdwa-size-24); margin: 1.6em 0 .4em; }
.mdwa-issue-body strong { color: var(--mdwa-ink); }
.mdwa-issue-body img { max-width: 100%; height: auto; border-radius: 14px; }
/* The issues are the forecast bot's email HTML: inline styles, a 600px frame,
   the odd table. Keep all of it inside the column at any width — the column
   is a grid item, so it must be allowed to shrink (min-width: 0), and wide
   pieces wrap or scroll within it rather than widening the page. */
.mdwa-issue-grid > * { min-width: 0; }
.mdwa-issue-body * { max-width: 100%; box-sizing: border-box; }
.mdwa-issue-body { overflow-wrap: anywhere; }
.mdwa-issue-body table { display: block; overflow-x: auto; }
.mdwa-issue-aside { position: sticky; top: 96px; display: grid; gap: 10px; }
.mdwa-issue-aside .mdwa-map-plate { padding: 14px; border-radius: var(--mdwa-radius-panel); }
.mdwa-issue-aside .mdwa-map-mark, .mdwa-issue-aside .mdwa-map-hint { display: none; }
.mdwa-issue-aside-note { margin: 0; font-size: var(--mdwa-size-13); color: var(--mdwa-ink-3); }
.mdwa-issues-list { list-style: none; margin: 0; padding: 0; background: var(--mdwa-plate); border-radius: var(--mdwa-radius-panel); padding: 6px 24px; }
.mdwa-issues-item { display: grid; grid-template-columns: 24px 15rem minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--mdwa-sage-line); }
.mdwa-issues-item:first-child { border-top: 0; }
.mdwa-issues-date { font-size: var(--mdwa-size-15); color: var(--mdwa-ink-3); font-variant-numeric: tabular-nums; }
.mdwa-issues-title { font-weight: 600; color: var(--mdwa-deep-water); text-decoration: none; }
.mdwa-issues-title:hover { text-decoration: underline; }
.mdwa-issue-date { display: inline-flex; align-items: center; gap: 8px; }
.mdwa-issue-mark { display: inline-block; }

/* --- County index -------------------------------------------------------- */
.mdwa-find { display: grid; gap: 6px; max-width: 420px; margin: 22px 0 0; }
.mdwa-find span { font-size: var(--mdwa-size-15); color: var(--mdwa-ink-2); }
.mdwa-find input {
  height: 48px; padding: 0 14px; font: inherit; color: var(--mdwa-ink);
  background: var(--mdwa-plate); border: 1px solid var(--mdwa-sage-line); border-radius: var(--mdwa-radius-button);
}
.mdwa-find input:focus { border-color: var(--mdwa-teal); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mdwa-teal) 22%, transparent); }
.mdwa-find-none { margin: 8px 0 0; color: var(--mdwa-ink-2); }
.mdwa-your-county { margin: 14px 0 0; font-weight: 600; }
/* Balanced columns: the Eastern Shore has nine counties and the Capital
   Region two, so a grid left one region alone on a row of empty space. */
.mdwa-region-groups { columns: 3 280px; column-gap: 18px; }
.mdwa-region-group { background: var(--mdwa-plate); border-radius: var(--mdwa-radius-panel); padding: 20px 22px; break-inside: avoid; margin: 0 0 18px; }
.mdwa-region-name { font-size: var(--mdwa-size-20); margin: 0 0 12px; display: flex; justify-content: space-between; align-items: baseline; }
.mdwa-region-name .mdwa-region-reading { font-weight: 300; font-size: var(--mdwa-size-32); color: var(--mdwa-ink); }
.mdwa-region-counties { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mdwa-region-counties .mdwa-chip { text-decoration: none; }
.mdwa-region-counties .mdwa-chip.is-yours { background: var(--mdwa-yellow); color: var(--mdwa-on-yellow); }

/* --- Alerts page (§2 item 5) -------------------------------------------- */
.mdwa-alerts-page { max-width: 980px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 56px); display: grid; gap: 28px; }
.mdwa-alerts-page > * { min-width: 0; }
.mdwa-alerts-page select {
  height: 48px; padding: 0 14px; font: inherit; color: var(--mdwa-ink); background: var(--mdwa-plate);
  border: 1px solid var(--mdwa-sage-line); border-radius: var(--mdwa-radius-button);
}
.mdwa-alerts-page select:focus { border-color: var(--mdwa-teal); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mdwa-teal) 22%, transparent); }
.mdwa-alerts-list { display: grid; gap: 14px; }
.mdwa-alerts-status { margin: 0; font-weight: 600; color: var(--mdwa-ink-2); }
.mdwa-alerts-filtered { margin: 0; color: var(--mdwa-ink-2); }
.mdwa-alerts-filtered button { font: inherit; color: var(--mdwa-teal); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.mdwa-alerts-down { background: var(--mdwa-plate); border-radius: var(--mdwa-radius-panel); padding: 20px 24px; }
.mdwa-alerts-down p { margin: 0; }
.mdwa-alert-counties { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.mdwa-alert-counties .mdwa-chip { min-height: 30px; font-size: var(--mdwa-size-13); text-decoration: none; }
.mdwa-alert-parts { margin: 0; display: grid; gap: 8px; }
.mdwa-alert-part { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; }
.mdwa-alert-part dt { font-weight: 700; color: var(--mdwa-ink); }
.mdwa-alert-part dd { margin: 0; }
.mdwa-alert-act { margin: 4px 0 14px; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--edge) 12%, var(--mdwa-plate)); }
.mdwa-alert-act-label { margin: 0 0 4px; font-weight: 700; color: var(--text); }
.mdwa-alert-act p:not(.mdwa-alert-act-label) { margin: 0 0 6px; }
.mdwa-alert-official { margin-top: 14px; border-top: 1px solid var(--mdwa-sage-line); padding-top: 10px; }
.mdwa-alert-official summary { cursor: pointer; font-weight: 600; color: var(--mdwa-teal); list-style-position: outside; }
.mdwa-alert-official summary:focus-visible { outline: 2px solid var(--mdwa-teal); outline-offset: 2px; border-radius: 4px; }
.mdwa-alert-official p, .mdwa-alert-official h3 { max-width: var(--mdwa-measure); }
.mdwa-alert-official h3 { font-size: var(--mdwa-size-17); margin: 14px 0 4px; color: var(--mdwa-ink); }
.mdwa-alert-headline { font-weight: 600; }
.mdwa-alerts-source { margin: 0; font-size: var(--mdwa-size-13); color: var(--mdwa-ink-3); max-width: var(--mdwa-measure); }
@media (max-width: 520px) { .mdwa-alert-part { grid-template-columns: 1fr; gap: 0; } }

/* --- Tides, sun & moon (§3.4) ------------------------------------------- */
.mdwa-strip { background: var(--mdwa-plate); border-radius: var(--mdwa-radius-panel); padding: 14px 18px 6px; overflow-x: auto; }
.mdwa-strip svg { display: block; width: 100%; min-width: 760px; height: auto; }
.mdwa-strip-bay, .mdwa-strip-ocean { fill: none; stroke: var(--mdwa-sage-line); stroke-width: 3; stroke-linecap: round; }
.mdwa-strip-ocean { stroke-dasharray: 2 6; }
.mdwa-strip-ends text { font-size: 12px; fill: var(--mdwa-ink-3); letter-spacing: .02em; }
.mdwa-strip-station circle { fill: var(--mdwa-plate); stroke: var(--mdwa-teal); stroke-width: 2; transition: r var(--mdwa-motion-hover) var(--mdwa-ease); }
.mdwa-strip-station text { font-size: 13px; font-weight: 500; fill: var(--mdwa-ink-2); }
.mdwa-strip-station:hover circle { fill: var(--mdwa-sage); }
.mdwa-strip-station:focus-visible { outline: none; }
.mdwa-strip-station:focus-visible circle { stroke-width: 4; }
.mdwa-strip-station.is-current circle { fill: var(--mdwa-yellow); stroke: var(--mdwa-deep-water); }
.mdwa-strip-station.is-current text { font-weight: 700; fill: var(--mdwa-deep-water); }
.mdwa-station-name { font-size: var(--mdwa-size-32); font-weight: 300; margin: 0; }
.mdwa-station-now { margin: 6px 0 0; font-size: var(--mdwa-size-20); color: var(--mdwa-ink-2); }
.mdwa-flats { margin: 10px 0 0; max-width: var(--mdwa-measure); }
.mdwa-tide-wide .mdwa-panel svg { max-width: none; }
.mdwa-tide-both .mdwa-panel { min-height: 0; }
/* The 48-hour chart is drawn 1000 units wide; on a tablet that shrinks its
   labels by a quarter, so they are drawn larger to land near 11px. */
@media (max-width: 1099px) { .mdwa-tide-wide .mdwa-chart-label text { font-size: 14px; } }
.mdwa-instruments--two { grid-template-columns: 1fr 1fr; }
.mdwa-table-plate { background: var(--mdwa-plate); border-radius: var(--mdwa-radius-panel); padding: 6px 22px; overflow-x: auto; }
.mdwa-table-plate table { width: 100%; border-collapse: collapse; font-size: var(--mdwa-size-15); font-variant-numeric: tabular-nums; }
.mdwa-table-plate th, .mdwa-table-plate td { text-align: left; padding: 12px 14px 12px 0; border-top: 1px solid var(--mdwa-sage-line); vertical-align: top; }
.mdwa-table-plate thead th { border-top: 0; font-size: var(--mdwa-size-13); font-weight: 700; color: var(--mdwa-ink-2); }
.mdwa-table-plate tbody th { font-weight: 600; white-space: nowrap; }
.mdwa-tt-cell { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.mdwa-tt { white-space: nowrap; }
.mdwa-tt b { font-weight: 600; }
.mdwa-tt--low b { color: var(--mdwa-ink-2); }
.mdwa-tt-ft { color: var(--mdwa-ink-3); }
.mdwa-strip-list { display: none; }
.mdwa-tide-narrow { display: none; }
@media (max-width: 999px) {
	.mdwa-strip { padding: 14px; }
	.mdwa-strip svg { display: none; }
	.mdwa-strip-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
	.mdwa-strip-list a { display: block; padding: 8px 14px; border-radius: 999px; background: var(--mdwa-sage); color: var(--mdwa-ink); text-decoration: none; font-size: var(--mdwa-size-15); font-weight: 500; }
	.mdwa-strip-list a[aria-current] { background: var(--mdwa-deep-water); color: var(--mdwa-plate); font-weight: 700; }
	.mdwa-strip-list a:focus-visible { outline: 2px solid var(--mdwa-teal); outline-offset: 2px; }
}
@media (max-width: 699px) {
	.mdwa-tide-wide { display: none; }
	.mdwa-tide-narrow { display: block; }
	.mdwa-table-plate { padding: 0 18px; }
	.mdwa-table-plate thead { display: none; }
	.mdwa-table-plate tr { display: grid; gap: 6px; padding: 14px 0; border-top: 1px solid var(--mdwa-sage-line); }
	.mdwa-table-plate tbody tr:first-child { border-top: 0; }
	.mdwa-table-plate th, .mdwa-table-plate td { border: 0; padding: 0; }
	.mdwa-table-plate td[data-label] { color: var(--mdwa-ink-2); }
	.mdwa-table-plate td[data-label]::before { content: attr(data-label) " · "; font-weight: 600; color: var(--mdwa-ink); }
	.mdwa-tt-cell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
}
.mdwa-table-note { margin: 8px 0 0; font-size: var(--mdwa-size-13); color: var(--mdwa-ink-3); max-width: var(--mdwa-measure); }
@media (max-width: 700px) { .mdwa-instruments--two { grid-template-columns: 1fr; } }

/* --- Tablet and phone --------------------------------------------------- */
@media (max-width: 1100px) {
  .mdwa-issue-grid { grid-template-columns: 1fr; }
  .mdwa-issue-aside { position: static; max-width: 560px; }
  .mdwa-issues-item { grid-template-columns: 24px minmax(0, 1fr); }
  .mdwa-issues-title { grid-column: 2; }
  .mdwa-opening { grid-template-columns: 1fr; gap: 24px; }
  .mdwa-headline { font-size: var(--mdwa-size-44); }
  .mdwa-instruments { grid-template-columns: 1fr 1fr; }
  .mdwa-panel--tide { grid-column: 1 / -1; }
}
/* §3.6: the map plate first at full width, then pill and headline at 40px. */
@media (max-width: 700px) {
  .mdwa-home { gap: 28px; }
  .mdwa-opening { display: flex; flex-direction: column; }
  .mdwa-map-plate { order: -1; padding: 14px; border-radius: var(--mdwa-radius-panel); }
  .mdwa-map-mark { width: 56px; height: 56px; top: 10px; right: 12px; }
  .mdwa-map-mark svg { width: 56px; height: 56px; }
  .mdwa-map-hint { left: 16px; bottom: 10px; font-size: var(--mdwa-size-13); }
  .mdwa-headline { font-size: 2.5rem; }
  .mdwa-now { min-height: 11rem; }
  .mdwa-instruments { grid-template-columns: 1fr; }
  .mdwa-panel { min-height: 0; }
}

/* --- The forecast by email (homepage; the plugin's sign-up, redrawn) ----- */
.mdwa-email {
  background: var(--mdwa-plate); border-radius: var(--mdwa-radius-panel); padding: 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 32px; align-items: center;
}
.mdwa-email-copy { margin: 6px 0 0; color: var(--mdwa-ink-2); max-width: 40rem; }
.mdwa-email-form { display: flex; gap: 8px; flex-wrap: wrap; }
.mdwa-email-form label:first-child { flex: 1 1 220px; }
.mdwa-email-form input[type="email"] {
  width: 100%; height: 48px; padding: 0 14px; font: inherit; color: var(--mdwa-ink); background: var(--mdwa-mist);
  border: 1px solid var(--mdwa-sage-line); border-radius: var(--mdwa-radius-button);
}
.mdwa-email-form input[type="email"]:focus { border-color: var(--mdwa-teal); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mdwa-teal) 22%, transparent); }
.mdwa-email-form .mdwa-button { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.mdwa-email-fine { margin: 8px 0 0; color: var(--mdwa-ink-3); font-size: var(--mdwa-size-13); }
.mdwa-email-status { margin: 0 0 10px; }
.mdwa-email-status--err strong { color: var(--mdwa-sev-warning-text); }
.mdwa-honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 760px) { .mdwa-email { grid-template-columns: minmax(0, 1fr); } }

/* --- Maryland briefing (W8) ---------------------------------------------- */
.mdwa-brief-alerts { margin: 14px 0 0; max-width: 44rem; }
.mdwa-brief-alerts a { color: var(--mdwa-teal); font-weight: 600; }
.mdwa-brief-desk { background: var(--mdwa-plate); border-radius: var(--mdwa-radius-panel); padding: 22px 24px; }
.mdwa-brief-desk h2 { margin: 4px 0 10px; font-size: var(--mdwa-size-24); font-weight: 400; color: var(--mdwa-deep-water); }
.mdwa-brief-desk h2 a { color: inherit; text-decoration: none; }
.mdwa-brief-desk h2 a:hover { text-decoration: underline; }
.mdwa-brief-desk p { max-width: 44rem; margin: 0; }
.mdwa-brief-source { margin: 0; font-size: var(--mdwa-size-13); font-weight: 600; color: var(--mdwa-ink-2); }
.mdwa-brief-regions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1099px) {
  .mdwa-brief-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mdwa-brief-region:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* five regions: 2 + 2 + 1 wide, never one alone and narrow */
}
@media (max-width: 699px) { .mdwa-brief-regions { grid-template-columns: minmax(0, 1fr); } }
.mdwa-brief-region { background: var(--mdwa-plate); border-radius: var(--mdwa-radius-panel); padding: 20px 22px; display: grid; gap: 10px; align-content: start; }
.mdwa-brief-region h2 { margin: 0; font-size: var(--mdwa-size-20); color: var(--mdwa-deep-water); }
.mdwa-brief-now { margin: 4px 0 0; color: var(--mdwa-ink-2); }
.mdwa-brief-temp { font-size: var(--mdwa-size-32, 2rem); font-weight: 300; color: var(--mdwa-ink); margin-right: 4px; }
.mdwa-brief-from { margin: 0; font-size: var(--mdwa-size-13); color: var(--mdwa-ink-3); }
.mdwa-brief-region-alerts { margin: 0; }
.mdwa-brief-region-alerts a { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--mdwa-sage); color: var(--mdwa-ink); font-weight: 600; font-size: var(--mdwa-size-13); text-decoration: none; }
.mdwa-brief-periods { border-top: 1px solid var(--mdwa-sage-line); padding-top: 10px; display: grid; gap: 8px; }
.mdwa-brief-period { margin: 0; font-size: var(--mdwa-size-15); }
.mdwa-brief-counties { margin: 0; font-size: var(--mdwa-size-13); color: var(--mdwa-ink-3); }
.mdwa-brief-counties a { color: var(--mdwa-teal); }

/* --- The Maryland year (/seasons/, W8) ------------------------------------ */
.mdwa-season-jump { margin-top: 18px; }
.mdwa-season-jump .mdwa-chip { text-decoration: none; }
.mdwa-season-jump .mdwa-chip.is-now { background: var(--mdwa-yellow); color: var(--mdwa-on-yellow); }
.mdwa-chapter { background: var(--mdwa-plate); border-radius: var(--mdwa-radius-panel); padding: 22px 24px; scroll-margin-top: 80px; }
.mdwa-chapter.is-now { box-shadow: inset 0 0 0 2px var(--mdwa-yellow); }
.mdwa-chapter > header { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.mdwa-season-mark { width: 56px; height: 56px; flex: none; color: var(--mdwa-teal); }
.mdwa-chapter h2 { margin: 0; font-size: var(--mdwa-size-24); color: var(--mdwa-deep-water); display: flex; align-items: center; gap: 10px; }
.mdwa-season-now { font-size: var(--mdwa-size-13); font-weight: 700; background: var(--mdwa-yellow); color: var(--mdwa-on-yellow); border-radius: 999px; padding: 2px 10px; }
.mdwa-season-range { margin: 2px 0 0; color: var(--mdwa-ink-2); }
.mdwa-season-notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.mdwa-season-notes li { background: var(--mdwa-mist); border-radius: 14px; padding: 14px 16px; }
.mdwa-season-notes h3 { margin: 0 0 6px; font-size: var(--mdwa-size-17); }
.mdwa-season-notes p { margin: 0; }
.mdwa-season-source { margin-top: 8px !important; font-size: var(--mdwa-size-13); color: var(--mdwa-ink-3); }
.mdwa-season-source a { color: var(--mdwa-teal); }

/* --- Right now, and rain in the next 12 hours (homepage, post-launch) ----- */
.mdwa-readings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mdwa-reading { background: var(--mdwa-plate); border-radius: var(--mdwa-radius-panel); padding: 16px 18px; display: grid; align-content: start; gap: 2px; min-width: 0; }
.mdwa-reading-label { margin: 0; font-size: var(--mdwa-size-13); font-weight: 600; color: var(--mdwa-ink-2); }
.mdwa-reading-figure { margin: 2px 0 0; white-space: nowrap; font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem); font-weight: 300; line-height: 1.1; color: var(--mdwa-ink); font-variant-numeric: tabular-nums; }
.mdwa-reading-figure small { font-size: var(--mdwa-size-15); color: var(--mdwa-ink-2); font-weight: 400; }
.mdwa-reading-note { margin: 2px 0 0; font-size: var(--mdwa-size-13); color: var(--mdwa-ink-3); }
.mdwa-reading-with { display: inline-flex; align-items: center; gap: 10px; }
.mdwa-compass { width: 34px; height: 34px; flex: none; }
.mdwa-compass circle { fill: none; stroke: var(--mdwa-sage-line); stroke-width: 1.5; }
.mdwa-compass text { font-size: 7px; font-weight: 700; fill: var(--mdwa-ink-3); font-family: var(--mdwa-font); }
.mdwa-compass path { fill: var(--mdwa-teal); }
.mdwa-spark { width: 100%; height: 22px; margin-top: 6px; overflow: visible; }
.mdwa-spark polyline { fill: none; stroke: var(--mdwa-teal); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.mdwa-rain { min-height: 0; }
.mdwa-rain-line { margin: 0 0 8px; font-size: var(--mdwa-size-17); color: var(--mdwa-ink); }
.mdwa-rain-chart { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 110px; border-bottom: 1px solid var(--mdwa-sage-line); position: relative; padding-bottom: 0; }
.mdwa-rain-hour { display: grid; grid-template-rows: 18px 1fr; height: 100%; position: relative; }
.mdwa-rain-bar { align-self: end; display: block; background: var(--mdwa-sage); border-radius: 4px 4px 0 0; min-height: 3px; }
.mdwa-rain-hour.is-likely .mdwa-rain-bar { background: var(--mdwa-teal); }
.mdwa-rain-pct { font-size: var(--mdwa-size-13); font-weight: 600; color: var(--mdwa-ink-2); text-align: center; white-space: nowrap; }
.mdwa-rain-time { position: absolute; top: calc(100% + 6px); left: 0; font-size: var(--mdwa-size-13); color: var(--mdwa-ink-3); white-space: nowrap; }
.mdwa-rain .mdwa-panel-foot { margin-top: 30px; }
[data-home-part="detail"] { display: grid; gap: 14px; }
@media (max-width: 899px) { .mdwa-readings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }