/* Maternity Map (desert-map.html). Desktop layout from 1024px; below that the page is the map alone, and the settings, table, notes and footer open in a dialog from the settings summary button under the map. */
.dm-wide { max-width: var(--wrap); padding-top: 16px; }

/* Rural Health Map palette: a single-hue ramp from light blue-gray through BioSTL blue to navy, with one accent for the
   worst class of a measure that has a worse end (body[data-dm-palette="accent"]), five classes for one that has none
   ("plain"), and a categorical set for the nine rurality codes ("cat": blues metro, greens small nonmetro, oranges rural). */
:root {
  --dm-0: #e6edf7;
  --dm-1: #b6cbf4;
  --dm-2: #6c99f9;
  --dm-3: #085cfc;
  --dm-4: #0b235f;
  --dm-5: #f26b1d;
  --dm-6: #fde0b8;
  --dm-7: #f7a65a;
  --dm-8: #ec6a1f;
  --dm-9: #a33c06;
  --dm-ink: #000007;
  --dm-none: #e3e7ee;
  --dm-risk: #f26b1d;
  --dm-fc: #c9a27f;
  --dm-fc-ink: #7a3f17;
}
body[data-dm-palette="cat"] {
  --dm-0: #0b235f;
  --dm-1: #085cfc;
  --dm-2: #9dbcfb;
  --dm-3: #dcefa8;
  --dm-4: #a9c53f;
  --dm-5: #fde0b8;
  --dm-6: #f7a65a;
  --dm-7: #e8601a;
  --dm-8: #8f3405;
}
body[data-dm-palette="accent"] .dm-tile.c5 { color: var(--dm-ink); }
body[data-dm-palette="accent"] .dm-tile.c5 .dm-tu { color: #2b1405; }
body[data-dm-palette="cat"] .dm-tile.c3, body[data-dm-palette="cat"] .dm-tile.c4, body[data-dm-palette="cat"] .dm-tile.c5, body[data-dm-palette="cat"] .dm-tile.c6, body[data-dm-palette="cat"] .dm-tile.c7 { color: var(--dm-ink); }
.dm-tile.c2 .dm-tu { color: var(--dm-ink); }

.dm-select { width: 100%; min-height: 38px; font: inherit; font-size: 14.5px; padding: 7px 34px 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%230b235f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; -webkit-appearance: none; appearance: none; color: var(--navy); cursor: pointer; }
.dm-select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.dm-group[hidden] { display: none; }
.dm-row + .dm-select { margin-top: 7px; }
.dm-tag-award { background: var(--teal-mist); color: var(--navy); }
.dm-tag-award[hidden] { display: none; }
.dm-scale-cat { flex-wrap: wrap; gap: 5px 12px; }
.dm-scale-cat .dm-scale-step { display: inline-flex; align-items: center; gap: 5px; width: auto; }
.dm-scale-cat .dm-scale-step i, .dm-scale-cat .dm-scale-step:first-child i, .dm-scale-cat .dm-scale-step:last-child i { width: 14px; height: 12px; border-width: 1px; border-radius: 3px; }
.dm-key-catch { width: 18px; height: 12px; border-radius: 3px; background: #fff; border: 2px solid var(--dm-ink); }
.dm-hosp { vector-effect: non-scaling-stroke; cursor: pointer; pointer-events: all; }
.dm-hosp.is-acute { fill: var(--dm-ink); stroke: #fff; stroke-width: 1.2; }
.dm-hosp.is-cah { fill: #fff; stroke: var(--dm-ink); stroke-width: 2; }
.dm-hosp:hover, .dm-hosp.is-on, .dm-hosp.is-sel { stroke-width: 2.6; }
.dm-hosp-ring { fill: none; stroke: var(--dm-ink); stroke-width: 2.4; vector-effect: non-scaling-stroke; pointer-events: none; filter: drop-shadow(0 0 1.5px #fff); }
.dm-catch { fill: none; stroke: var(--dm-ink); stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.dm-svg.is-catching .dm-county:not(.is-catch) { opacity: .42; }
.dm-tip-hosps { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.dm-tip-hosps p { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); }
.dm-tip-hosps ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.dm-hosp-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--navy); text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dm-hosp-link:hover { color: var(--teal); }
.dm-this { margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 72ch; }

.dm-illustrative { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0 0 22px; padding: 10px 16px; border: 1px dashed var(--dm-fc); border-radius: var(--radius-sm); background: repeating-linear-gradient(135deg, #fbf3ea 0 12px, #f7ecdf 12px 24px); color: #5c3d22; font-size: 14px; line-height: 1.45; }
.dm-illustrative strong { color: var(--dm-fc-ink); font-weight: 700; letter-spacing: .01em; }
.dm-illustrative[hidden] { display: none; }


.dm-app { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 40px; align-items: start; }

/* Controls: sticky and capped at the viewport so the settings never make the page taller than the map beside them. */
.dm-controls { position: sticky; top: 72px; min-width: 0; max-height: calc(100vh - 84px); overflow-y: auto; scrollbar-width: thin; margin: -3px; padding: 3px; }
.dm-form { display: grid; gap: 0; position: relative; }
.is-gated { cursor: not-allowed; }
.dm-seg label.is-gated span, .dm-seg-more.is-gated select { opacity: .5; color: var(--muted); cursor: not-allowed; }
.dm-seg label.is-gated input, .dm-range.is-gated, .dm-play.is-gated, .dm-table-btn.is-gated, #dm-table-btn.is-gated, #dm-state.is-gated { cursor: not-allowed; }
.dm-seg label.is-gated:hover span { background: transparent; color: var(--muted); }
.dm-range.is-gated, .dm-play.is-gated, #dm-table-btn.is-gated, #dm-state.is-gated { opacity: .5; }
.dm-gate-tip { position: absolute; z-index: 20; padding: 5px 9px; border-radius: var(--radius-sm); background: var(--navy); color: #fff; font-size: 13px; font-weight: 500; line-height: 1.3; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow); }
.dm-gate-tip[hidden] { display: none; }
.dm-group { border: 0; margin: 0; padding: 12px 0; border-top: 1px solid var(--line-soft); min-width: 0; }
.dm-group:first-child { border-top: 0; padding-top: 0; }
.dm-group[hidden] { display: none; }
fieldset.dm-group > legend { float: left; width: 100%; }
fieldset.dm-group > legend + * { clear: both; }
.dm-h { display: block; padding: 0; margin: 0 0 7px; font-family: var(--sans); font-size: 12.5px; font-weight: 650; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.dm-help { margin: 7px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.dm-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dm-row .dm-h { margin-bottom: 0; }
.dm-row .mah-info { margin-right: auto; align-self: center; }
.dm-row .mah-info[hidden] { display: none; }.dm-readout { font-family: var(--serif); font-size: 1.05rem; color: var(--navy); font-weight: 500; }
.dm-readout.is-forecast { color: var(--dm-fc-ink); }

.dm-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.dm-seg-fit { grid-auto-columns: auto; }
.dm-seg label { position: relative; display: block; min-width: 0; cursor: pointer; }
.dm-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dm-seg span { white-space: nowrap; display: flex; align-items: center; justify-content: center; min-height: 32px; padding: 5px 8px; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 1.2; text-align: center; color: var(--ink-soft); transition: background .15s, color .15s; }
.dm-seg-fit span { padding: 5px 5px; font-size: 13.5px; }
.dm-seg label:hover span { background: var(--teal-mist); color: var(--navy); }
.dm-seg input:checked + span { background: var(--navy); color: #fff; font-weight: 600; }
.dm-seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }
.dm-seg-more { position: relative; display: block; min-width: 0; }
.dm-seg-more select { width: 100%; min-height: 32px; padding: 5px 20px 5px 8px; border: 0; border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2312304a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 4px center / 12px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.dm-seg-more.is-on select { background-color: var(--navy); color: #fff; font-weight: 600; }

.dm-range { display: block; height: 30px; margin-top: 4px; }
.dm-ticks { position: relative; height: 16px; margin: 0 14px; font-size: 12px; color: var(--muted); }
.dm-marks { position: relative; height: 7px; margin: -2px 14px 2px; }
.dm-marks i { position: absolute; top: 0; width: 1.5px; height: 7px; margin-left: -.75px; border-radius: 1px; background: var(--muted); opacity: .6; }
.dm-ticks span { position: absolute; top: 0; transform: translateX(-50%); line-height: 1; }
.dm-year { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 6px; }
.dm-year .dm-range { margin-top: 0; }
.dm-year-track { position: relative; min-width: 0; }
/* The forecast years (2027, 2028) are the last two of eighteen steps: hatched on the track, the readout and the card title say "forecast" only while one is selected. */
input[type="range"].dm-range-year::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--teal) 0 min(var(--fill, 0%), var(--dm-fc-at, 88.89%)), var(--line) min(var(--fill, 0%), var(--dm-fc-at, 88.89%)) var(--dm-fc-at, 88.89%), transparent var(--dm-fc-at, 88.89%)), repeating-linear-gradient(135deg, var(--dm-fc) 0 2px, #f3e7d9 2px 5px); }
/* Without forecast figures the slider ends at 2026 and has no hatched end. */
.dm-range-year.no-fc { --dm-fc-at: 100%; }
.dm-play { display: grid; place-items: center; width: 36px; height: 36px; margin-top: -3px; border-radius: 50%; border: 1.5px solid var(--teal); background: #fff; color: var(--teal); cursor: pointer; padding: 0; }
.dm-play:hover { background: var(--teal-mist); color: var(--navy); border-color: var(--navy); }
.dm-play svg { width: 14px; height: 14px; }
.dm-play .i-pause, .dm-play[aria-pressed="true"] .i-play { display: none; }
.dm-play[aria-pressed="true"] .i-pause { display: block; }
.dm-play[aria-pressed="true"] { background: var(--teal); color: #fff; }

.dm-reset-row { margin: 4px 0 0; }
.dm-reset-row:has(> [hidden]) { display: none; }
.dm-link { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dm-link:hover { color: var(--navy); }
.dm-link[hidden] { display: none; }
.dm-intro { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 13.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* Main column */
.dm-main { min-width: 0; padding: 0; }
.dm-card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 22px 14px; }
.dm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap; min-height: 36px; margin-bottom: 10px; }
.dm-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.dm-title h2 { margin: 0; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.dm-title h2:focus { outline: none; }
/* The page question is the h1, first in the reading order, drawn at the card's top right. */
.dm-question { order: 2; margin: 0 0 0 auto; font-size: clamp(.98rem, 1.2vw, 1.3rem); font-weight: 500; line-height: 1.25; color: var(--teal); text-align: right; }
.dm-back { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--teal); cursor: pointer; }
.dm-back svg { width: 16px; height: 16px; }
.dm-back:hover { background: var(--teal-mist); color: var(--navy); border-color: var(--navy); }
.dm-back[hidden] { display: none; }
.dm-statepage { display: inline-flex; align-items: center; padding: 5px 14px; border: 1px solid var(--teal); border-radius: 999px; background: var(--teal); font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; }
.dm-statepage:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.dm-statepage[hidden], .dm-statepage-group[hidden] { display: none; }
.dm-statepage.is-gated { background: #e9e6e0; border-color: var(--line); color: var(--muted); cursor: not-allowed; }
.dm-statepage.is-gated:hover { background: #e9e6e0; color: var(--muted); }
.dm-statepage-group { margin-top: 14px; }
.dm-statepage-group .dm-statepage { margin-top: 6px; }
.dm-tip-foot a { font-weight: 600; }
.dm-tip-foot .is-gated { cursor: not-allowed; }
@media (min-width: 1024px) { .dm-statepage-group { display: none; } }
.dm-pick[hidden] { display: none; }
.dm-pick select { width: 100%; font: inherit; font-size: 14.5px; padding: 7px 34px 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2312304a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; -webkit-appearance: none; appearance: none; color: var(--navy); cursor: pointer; }

.dm-tag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-family: var(--sans); font-size: 12px; font-weight: 650; line-height: 1.35; letter-spacing: .02em; white-space: nowrap; vertical-align: 1px; }
.dm-tag[hidden] { display: none; }
.dm-tag-fc { border: 1px dashed var(--dm-fc); background: #fbf3ea; color: var(--dm-fc-ink); }
.dm-tag-payer { background: var(--teal-mist); color: var(--navy); }
.dm-fc-link { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.dm-fc-link[hidden] { display: none; }

.dm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 14px 0 0; font-size: 13px; color: var(--ink-soft); }
.dm-legend-title { font-weight: 650; color: var(--navy); }
.dm-legend[hidden] { display: none; }
.dm-legend-note { flex: 1 1 100%; font-size: 12px; line-height: 1.3; color: var(--ink-soft); }
.dm-scale { display: flex; align-items: flex-start; }
.dm-scale-step { display: grid; gap: 4px; width: clamp(70px, 6.4vw, 84px); }
.dm-scale-step i { display: block; height: 12px; border: 1px solid rgba(18, 48, 74, .12); border-left-width: 0; }
.dm-scale-step:first-child i { border-left-width: 1px; border-radius: 4px 0 0 4px; }
.dm-scale-step:last-child i { border-radius: 0 4px 4px 0; }
.dm-scale-step span { font-size: 12px; line-height: 1.2; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dm-keyrow { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.dm-key { display: inline-flex; align-items: center; gap: 6px; }
.dm-key svg { width: 18px; height: 18px; flex: none; }
.dm-key-none { width: 18px; height: 12px; border-radius: 3px; background: repeating-linear-gradient(135deg, var(--dm-none) 0 3px, #fff 3px 6px); border: 1px solid var(--line); }
.dm-key-fc { width: 18px; height: 12px; border-radius: 3px; background: var(--dm-2) repeating-linear-gradient(135deg, rgba(255, 255, 255, .45) 0 2px, transparent 2px 5px); outline: 1px dashed rgba(18, 48, 74, .45); outline-offset: -2px; }
/* The count is drawn by CSS so the legend's text reads "Several in a county", not "4Several in a county". */
.dm-key-n { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--navy); background: #fff; }
.dm-key-n::before { content: attr(data-n); font-size: 8.5px; font-weight: 700; line-height: 1; color: var(--navy); }
.dm-key-zero { width: 18px; height: 12px; border-radius: 3px; background: #fff; border: 1px dashed var(--muted); }
.dm-zero-hint { flex-wrap: wrap; color: var(--ink-soft); }
.dm-zero-try { margin-left: 2px; }
.dm-tile.is-zero { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.dm-tile.is-zero .dm-tv { color: var(--muted); }
.dm-county.is-zero { fill: #fff; }
.dm-tip-zero { margin: -4px 0 8px; font-size: 13px; color: var(--ink-soft); }

.dm-stage { position: relative; }
.dm-map { position: relative; min-width: 0; }
.dm-hint { margin: 8px 0 0; font-size: 13px; color: var(--muted); text-wrap: balance; }
.dm-hint:empty { display: none; }

/* National tile grid. The tiles fill the card width; the cap from the viewport height keeps every tile row in view at
   1080px tall (165px covers the site header and the card title). Grid row 1 is the band row: AK, ME and the stat tiles. */
.dm-tilewrap { --dm-gap: 5px; --dm-tmax: clamp(44px, calc((100vh - 165px - 6 * var(--dm-gap)) / 7), 130px); container-type: inline-size; max-width: min(100%, calc(11 * var(--dm-tmax) + 10 * var(--dm-gap))); margin: 0 auto; }
/* The band row may grow a little when a caption wraps; AK and ME stay square at its foot. */
.dm-tiles { --t: calc((100cqi - 10 * var(--dm-gap)) / 11); display: grid; grid-template-columns: repeat(11, var(--t)); grid-template-rows: minmax(var(--t), auto) repeat(6, var(--t)); gap: var(--dm-gap); }
.dm-tile[data-band] { align-self: end; height: var(--t); }
.dm-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: calc(var(--t) * .1) calc(var(--t) * .12) calc(var(--t) * .09); border: 0; border-radius: 7px; font: inherit; text-align: left; cursor: pointer; color: var(--ink); background: var(--dm-0); transition: background-color .35s ease, color .35s ease, box-shadow .15s; overflow: hidden; }
.dm-tile b { font-size: clamp(10.5px, calc(var(--t) * .2), 14px); font-weight: 700; letter-spacing: .03em; line-height: 1.1; }
.dm-tv { margin-top: auto; font-family: var(--serif); font-size: clamp(12.5px, calc(var(--t) * .27), 21px); line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dm-tu { font-size: clamp(11px, calc(var(--t) * .16), 13px); font-weight: 400; line-height: 1.2; color: var(--navy); white-space: nowrap; }
.dm-tile:hover, .dm-tile.is-on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--navy); z-index: 2; }
.dm-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; z-index: 3; }
.dm-tile.c0 { background-color: var(--dm-0); }
.dm-tile.c1 { background-color: var(--dm-1); }
.dm-tile.c2 { background-color: var(--dm-2); }
.dm-tile.c3 { background-color: var(--dm-3); color: #fff; }
.dm-tile.c4 { background-color: var(--dm-4); color: #fff; }
.dm-tile.c5 { background-color: var(--dm-5); color: #fff; }
.dm-tile.c6 { background-color: var(--dm-6); color: #fff; }
.dm-tile.c7 { background-color: var(--dm-7); color: #fff; }
.dm-tile.c8 { background-color: var(--dm-8); color: #fff; }
.dm-tile.c9 { background-color: var(--dm-9); color: #fff; }
.dm-tile.c5 .dm-tu, .dm-tile.c6 .dm-tu, .dm-tile.c7 .dm-tu, .dm-tile.c8 .dm-tu, .dm-tile.c9 .dm-tu { color: #f1e6ee; }
.dm-tile.c3 .dm-tu { color: #e6f2f0; }
.dm-tile.c4 .dm-tu { color: #dbe5ee; }
.dm-tile.cn { background: repeating-linear-gradient(135deg, var(--dm-none) 0 5px, #fff 5px 10px); color: var(--muted); }
/* A state without a county view: a dotted line under its code, and no pointer. */
.dm-tile.no-drill { cursor: default; }
.dm-tile.no-drill b { text-decoration: underline dotted 2px; text-underline-offset: 3px; }
.dm-app.is-forecast .dm-tile:not(.cn) { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .26) 0 2px, transparent 2px 7px); }

/* The band row of the tile grid: the selected measure with its headline sentence (cols 2-7) and the care sites (cols 8-10), between AK and ME. */
.dm-tiles > .dm-band { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; pointer-events: none; }
.dm-band > * { pointer-events: auto; }
.dm-tiles .dm-side { display: contents; }
/* Nationally the measure tile is a small grid: its name across the top, the figure and the headline sentence side by side. */
.dm-tiles .dm-mt { grid-column: 2 / 8; grid-row: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: center; gap: 1px calc(var(--t) * .18); }
.dm-tiles .dm-mt-name { grid-column: 1 / -1; max-width: 100%; }
.dm-tiles .dm-sites { grid-column: 8 / 11; grid-row: 1; }

.dm-mt, .dm-sites { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1px; min-width: 0; padding: calc(var(--t, 64px) * .06) calc(var(--t, 64px) * .16); border-radius: 7px; text-align: left; }
.dm-mt { background: var(--teal-mist); }
.dm-mt-fig { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
/* The headline sentence, beside the figure in the band; it wraps to two or three lines (core SENTENCE_MAX). */
.dm-mt-say { min-width: 0; margin: 0; padding-left: calc(var(--t, 64px) * .18); border-left: 1px solid rgba(18, 48, 74, .14); font-family: var(--serif); font-size: clamp(12px, calc(var(--t, 64px) * .19), 16px); line-height: 1.25; color: var(--ink); text-wrap: pretty; }
.dm-sites { background: var(--sand-2); }
.dm-mt-name, .dm-sites-name { font-size: clamp(11.5px, calc(var(--t, 64px) * .17), 14px); font-weight: 650; line-height: 1.15; color: var(--navy); }
.dm-mt-num, .dm-sites-num { font-family: var(--serif); font-size: clamp(17px, calc(var(--t, 64px) * .34), 30px); line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dm-mt-num.is-none { font-size: clamp(15px, calc(var(--t, 64px) * .26), 21px); color: var(--muted); }
.dm-u { font-family: var(--sans); font-size: .5em; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft); }
.dm-mt-sub, .dm-sites-sub { max-width: 100%; font-size: clamp(11px, calc(var(--t, 64px) * .155), 13px); line-height: 1.2; color: var(--ink-soft); text-wrap: pretty; }
.dm-sites.is-risk .dm-sites-num { color: #8a4522; }

/* State view: the descriptor above the county map, the state list, measures and care sites in a column beside it. */
.dm-stage.is-state { display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 22vw, 310px); grid-template-areas: "map side"; gap: 10px 20px; align-items: start; }
.dm-stage.is-state .dm-band { display: contents; }
.dm-stage.is-state .dm-side { grid-area: side; display: flex; flex-direction: column; gap: 8px; }
.dm-stage.is-state .dm-mt, .dm-stage.is-state .dm-sites { --t: 66px; min-height: 62px; }
.dm-stage.is-state .dm-mt-say { flex: none; font-size: 12px; text-wrap: wrap; padding: 8px 0 0; border-left: 0; border-top: 1px solid rgba(18, 48, 74, .14); }
.dm-stage.is-state #dm-map { grid-area: map; }

/* State county map */
.dm-svg { display: block; width: 100%; height: auto; max-height: max(360px, min(680px, calc(100vh - 230px))); margin: 0 auto; overflow: visible; }
.dm-county { stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .35s ease; }
.dm-county.c0 { fill: var(--dm-0); } .dm-county.c1 { fill: var(--dm-1); } .dm-county.c2 { fill: var(--dm-2); } .dm-county.c3 { fill: var(--dm-3); } .dm-county.c4 { fill: var(--dm-4); } .dm-county.c5 { fill: var(--dm-5); } .dm-county.c6 { fill: var(--dm-6); } .dm-county.c7 { fill: var(--dm-7); } .dm-county.c8 { fill: var(--dm-8); } .dm-county.c9 { fill: var(--dm-9); }
.dm-county:hover, .dm-county.is-on { stroke: var(--navy); stroke-width: 2.5; stroke-dasharray: none; }
.dm-county:focus { outline: none; }
.dm-county:focus-visible { stroke: var(--focus); stroke-width: 3.5; }
.dm-unit { fill: #fff; stroke: var(--navy); stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.dm-unit.is-new { stroke-dasharray: 2 1.6; }
.dm-unit-risk { fill: none; stroke: var(--dm-risk); stroke-width: 2.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.dm-unit-n { fill: var(--navy); font-family: var(--sans); font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.dm-unit.dm-pt { pointer-events: all; cursor: default; }
.dm-tip-list { margin: 6px 0 0; padding-left: 16px; font-size: 13px; line-height: 1.4; }
.dm-tip-list li + li { margin-top: 2px; }
.dm-hit { fill: transparent; pointer-events: all; cursor: pointer; }
.dm-empty { padding: 48px 24px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.dm-empty strong { display: block; font-family: var(--serif); font-size: 1.2rem; font-weight: 500; color: var(--navy); margin-bottom: 4px; }
.dm-empty[role="status"] strong::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; vertical-align: -1px; border: 2px solid var(--line); border-top-color: var(--teal); border-radius: 50%; animation: dm-spin .8s linear infinite; }
@keyframes dm-spin { to { transform: rotate(360deg); } }
@keyframes dm-pulse { 50% { opacity: .55; } }
.dm-retry { margin: 14px 0 0; }

/* Hover card */
.dm-tip { position: absolute; z-index: 20; width: 408px; padding: 14px 16px 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lift); font-size: 13.5px; line-height: 1.4; color: var(--ink); pointer-events: none; }
.dm-tip[hidden] { display: none; }
.dm-tip.is-pinned { pointer-events: auto; }
.dm-tip-place { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.dm-tip-place .dm-tag { font-size: 11px; letter-spacing: .02em; text-transform: none; }
.dm-tip-head { margin: 0; font-family: var(--serif); font-size: 1.55rem; font-weight: 500; line-height: 1.1; color: var(--navy); }
.dm-tip-blank { font-size: 1.25rem; }
.dm-tip-sub { margin: 2px 0 8px; font-size: 13px; color: var(--ink-soft); }
.dm-tip-fc { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: -4px 0 8px; font-size: 13px; color: var(--dm-fc-ink); }
.dm-tip-chg { font-weight: 650; }
.dm-tip dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 12px; margin: 0; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.dm-tip dt { color: var(--muted); white-space: nowrap; }
.dm-tip dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.dm-tip .na, .dm-table .na { color: var(--muted); }
.dm-tip .risk { color: #8a4522; font-weight: 600; }
.dm-tip-close { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.dm-tip-close:hover { background: var(--teal-mist); color: var(--navy); }
.dm-tip-foot { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.dm-mix { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.dm-mix p { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); }
.dm-mix ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.dm-mix li { padding: 6px 8px; border-radius: 8px; background: var(--sand-2); font-size: 13px; line-height: 1.3; color: var(--ink-soft); }
.dm-mix b { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; color: var(--navy); }
.dm-mix span { display: block; font-size: 12.5px; color: var(--ink); }

.dm-below { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 16px; font-size: 14.5px; }

/* Table */
.dm-table-wrap { padding: 32px 0 0; }
.dm-table-wrap[hidden] { display: none; }
.dm-table-h { font-size: 1.5rem; margin-bottom: .2em; }
.dm-table-scroll { overflow-x: auto; margin-top: 12px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: #fff; }
.dm-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.dm-table th, .dm-table td { padding: 8px 12px; border-top: 1px solid var(--line-soft); text-align: right; white-space: nowrap; }
.dm-table th:first-child, .dm-table td:first-child { text-align: left; }
.dm-table thead th { position: sticky; top: 0; background: var(--sand-2); border-top: 0; color: var(--navy); font-weight: 650; padding: 0; }
.dm-table thead th button { display: flex; width: 100%; justify-content: flex-end; align-items: center; gap: 4px; padding: 9px 12px; border: 0; background: none; font: inherit; font-weight: 650; color: inherit; cursor: pointer; white-space: nowrap; }
.dm-table thead th:first-child button { justify-content: flex-start; }
.dm-table thead th button:hover { color: var(--teal); }
.dm-table thead th button::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: 0; }
.dm-table thead th[aria-sort="ascending"] button::after { border-bottom: 5px solid currentColor; opacity: 1; }
.dm-table thead th[aria-sort="descending"] button::after { border-top: 5px solid currentColor; opacity: 1; }
.dm-table tbody th { text-align: left; font-weight: 600; color: var(--navy); }
.dm-table tbody tr:hover { background: var(--teal-mist); }
.dm-table td .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* Sources and method, at the foot of the page: one section, closed until opened */
.dm-sources > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; }
.dm-sources > summary::-webkit-details-marker { display: none; }
.dm-sources > summary::before { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); transition: transform .15s; }
.dm-sources[open] > summary::before { transform: rotate(45deg); }
.dm-sources > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.dm-sources > summary h2 { margin: 0; }
.dm-sources[open] > summary { margin-bottom: .6em; }
.dm-sub-h { margin: 22px 0 .6em; font-size: 1.1rem; }
.dm-mt-say[hidden] { display: none; }
.dm-mt-sub { white-space: pre-line; }
.dm-mt-qual { display: block; font-weight: 500; color: var(--ink-soft); }
.dm-notes { margin-top: 48px; padding: 28px 0 0; border-top: 1px solid var(--line); max-width: 900px; }
.dm-notes h2 { font-size: 1.5rem; margin-bottom: .6em; }
.dm-note-first { margin: 0 0 16px; padding: 10px 16px; border: 1px dashed var(--dm-fc); border-radius: var(--radius-sm); background: repeating-linear-gradient(135deg, #fbf3ea 0 12px, #f7ecdf 12px 24px); font-size: 15px; line-height: 1.55; color: #5c3d22; }
.dm-note-first strong { color: var(--dm-fc-ink); }
.dm-note-first[hidden] { display: none; }
.dm-notes-list { margin: 0; padding: 0 0 0 18px; display: grid; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.dm-notes-list li::marker { color: var(--teal); }
.dm-notes-list strong { color: var(--navy); font-weight: 650; }
.dm-credits { margin-top: 26px; }
.dm-credits h3 { font-size: 1.1rem; margin: 0 0 .6em; }
.dm-credits .dm-notes-list { font-size: 13.5px; }
.dm-notes-foot { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.dm-forecast { margin: 0 0 22px; padding: 18px 22px 8px; border: 1px solid var(--line); border-left: 4px solid var(--dm-fc); border-radius: var(--radius-sm); background: #fff; font-size: 15px; line-height: 1.55; color: var(--ink-soft); scroll-margin-top: 80px; }
.dm-forecast[hidden] { display: none; }
.dm-forecast h3 { margin: 0 0 6px; font-size: 1.3rem; }
.dm-forecast h4 { margin: 16px 0 4px; font-family: var(--sans); font-size: 14.5px; font-weight: 650; letter-spacing: 0; color: var(--navy); }
.dm-forecast p { margin: 0 0 8px; text-wrap: pretty; }
.dm-fc-lede { font-size: 16px; color: var(--ink); }
.dm-fc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.dm-fc-cols ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: 14.5px; }
.dm-fc-cols li::marker { color: var(--dm-fc); }
.dm-fc-cols strong { color: var(--navy); font-weight: 650; }
.dm-fc-when { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: #fbf3ea; font-size: 12px; font-weight: 650; color: var(--dm-fc-ink); white-space: nowrap; }
.dm-fc-fig { font-weight: 650; color: var(--navy); }

.dm-doc { max-width: 760px; padding: 28px 0 0; }
.dm-doc h2 { font-size: 1.6rem; }

@media (prefers-reduced-motion: reduce) {
  .dm-tile, .dm-county { transition: none; }
  .dm-loading .dm-skel { animation: none; }
}

@media (max-width: 1279px) {
  .dm-app { grid-template-columns: 230px minmax(0, 1fr); gap: 24px; }
  .dm-card { padding: 12px 16px 12px; }
  .dm-seg-fit span { padding: 5px 3px; font-size: 13px; letter-spacing: -.01em; }
}

@media (min-width: 1500px) {
  .dm-app { grid-template-columns: 268px minmax(0, 1fr); gap: 48px; }
  .dm-tilewrap { --dm-gap: 6px; }
}

.dm-open, .dm-modal { display: none; }
.dm-skel { display: none; }
.dm-noscript { margin: 12px 0 0; }
.dm-open:focus-visible, .dm-modal-panel .btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.dm-gate-note { margin: 6px 0 0; font-size: 13px; color: var(--navy); font-weight: 600; }

@media (max-width: 1023px) {
  body[data-page="desert-map"] #mah-header, body[data-page="desert-map"] .site-header { display: none; }
  .dm-wide { padding-top: 8px; padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .dm-app { display: block; }
  .dm-card { padding: 10px 10px 12px; }
  .dm-app > .dm-controls, .dm-main > .dm-below, .dm-wide > .dm-table-wrap, .dm-wide > .dm-notes { display: none; }
  .dm-title h2 { font-size: 1.1rem; line-height: 1.3; }
  .dm-title > .dm-statepage { display: none; }
  .dm-open { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 60px; margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--navy); font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.35; text-align: left; cursor: pointer; box-shadow: 0 -4px 16px rgba(18, 48, 74, .12); }
  .dm-open-text { flex: 1 1 auto; min-width: 0; }
  .dm-open-change { display: inline-flex; align-items: center; flex: none; gap: 1px; color: var(--teal); font-weight: 700; white-space: nowrap; }
  .dm-open-change svg { width: 16px; height: 16px; }
  .dm-open:disabled { cursor: default; background: #e9e6e0; }
  body.dm-modal-open .dm-open, body.dm-tip-open .dm-open { display: none; }
  .dm-open:disabled > * { visibility: hidden; }
  #dm-app[data-dm-state="loading"] #dm-place, #dm-app[data-dm-state="loading"] .dm-question { color: transparent; background: #e9e6e0; border-radius: 6px; user-select: none; }
  #dm-app[data-dm-state="loading"] #dm-place { width: 88%; min-height: 1.9em; overflow: hidden; }
  #dm-app[data-dm-state="loading"] .dm-question { display: none; }
  #dm-app:not([data-dm-state="ready"]) .dm-band { display: none; }
  #dm-app[data-dm-state="loading"] .dm-card { min-height: 770px; }
  #dm-app[data-dm-state="error"] .dm-title, #dm-app[data-dm-state="error"] .dm-question { display: none; }
  .dm-loading { padding: 20px 12px 16px; border-style: solid; border-color: transparent; }
  .dm-loading .dm-skel { display: block; aspect-ratio: 11 / 8; width: 100%; margin: 16px 0 0; border-radius: 6px; background-color: #e4e1db; background-image: linear-gradient(to right, transparent calc(100% - 5px), #fff 0), linear-gradient(to bottom, transparent calc(100% - 5px), #fff 0); background-size: calc(100% / 11) 100%, 100% calc(100% / 8); animation: dm-pulse 1.6s ease-in-out infinite; }
  .dm-tip.is-modal { position: fixed; inset: 0; z-index: 110; width: auto; max-width: none; padding: 80px var(--gutter) 40px; border: 0; border-radius: 0; box-shadow: none; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); font-size: 15px; pointer-events: auto; }
  .dm-tip.is-modal .dm-tip-place { position: fixed; top: 0; left: 0; right: 0; z-index: 1; min-height: 68px; margin: 0; padding: 12px 72px 12px var(--gutter); background: var(--paper); border-bottom: 1px solid var(--line-soft); font-size: 15px; letter-spacing: .04em; align-items: center; }
  .dm-tip.is-modal .dm-tip-close { position: fixed; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; background: #fff; border: 1px solid var(--line); font-size: 26px; color: var(--navy); }
  .dm-tip.is-modal .dm-tip-close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  body.dm-tip-open { overflow: hidden; }
  .dm-tip.is-sheet { position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); top: auto; width: auto; max-width: none; max-height: 46vh; padding: 14px var(--gutter) 16px; border-radius: 14px 14px 0 0; overflow-y: auto; z-index: 100; pointer-events: auto; }
  .dm-tip.is-sheet .dm-tip-close { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; }
  .dm-tip.is-sheet .dm-tip-place { padding-right: 48px; }
  .dm-scale { max-width: 100%; }
  .dm-scale-step { flex: 1 1 0; min-width: 0; width: auto; }
  .dm-retry { display: block; margin: 16px auto 0; min-height: 44px; min-width: 120px; }
  #dm-app[data-dm-state="error"] .dm-open { display: none; }
  .dm-modal:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 100; background: var(--paper); overflow-y: auto; overscroll-behavior: contain; }
  .dm-modal-panel { max-width: 640px; margin: 0 auto; }
  .dm-modal-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--gutter); background: var(--paper); border-bottom: 1px solid var(--line-soft); }
  .dm-modal-bar h2 { margin: 0; font-size: 1.15rem; }
  .dm-modal-body { padding: 8px var(--gutter) 32px; }
  .dm-modal-body .dm-controls { position: static; max-height: none; overflow: visible; margin: 0; padding: 0; }
  .dm-modal-body .dm-table-wrap, .dm-modal-body .dm-table-wrap[hidden] { padding-top: 0; }
  .dm-modal-body .dm-table-wrap[hidden] { display: none; }
  body.dm-modal-open { overflow: hidden; }
  /* State view on a phone: the state list on its own row, the county map the full card width, then the measure and care-site tiles. */
  .dm-stage.is-state { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .dm-stage.is-state .dm-side { display: contents; }
  .dm-stage.is-state .dm-pick { order: 1; }
  .dm-stage.is-state #dm-map { order: 2; width: 100%; }
  .dm-stage.is-state .dm-mt { order: 3; }
  .dm-stage.is-state .dm-sites { order: 4; }
  .dm-state-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-height: 582px; aspect-ratio: var(--dm-ar, 1 / 1); padding: 16px; border: 0; border-radius: 6px; background: #e4e1db; animation: dm-pulse 1.6s ease-in-out infinite; }
  .dm-scale { flex: 1 1 100%; }
  .dm-scale-step span { font-size: 11.5px; white-space: normal; padding-right: 3px; overflow-wrap: anywhere; }
}

/* A phone's 11-column tile map: tiles about 27px wide, so the figure is smaller, the padding tighter, and the unit word (in the band above and the spoken label) left out. */
@media (max-width: 480px) {
  .dm-tilewrap { --dm-gap: 3px; }
  .dm-tile { padding: 2px 2px 1px; border-radius: 5px; }
  .dm-tile b { font-size: 10px; letter-spacing: 0; }
  .dm-tv { font-size: 10.5px; letter-spacing: -.02em; }
  .dm-tu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dm-loading .dm-skel { animation: none; }
}
