/* Layout visibility */
[data-layout="01-meteobridge"] .dash--unified {
  display: none !important;
}

:not([data-layout="01-meteobridge"]) .dash--meteobridge {
  display: none !important;
}

/* Split row children participate in parent grid */
.dash-grid > .widget-split {
  display: contents;
}

/* Base unified grid — layouts override template */
.dash-grid {
  display: grid;
  gap: var(--dash-gap);
}

.dash-grid > [data-widget] {
  min-width: 0;
}

/* ── Layout 02: Home Assistant Classic ── */
[data-layout="02-ha-classic"] {
  --dash-accent: #3d8bfd;
}

[data-layout="02-ha-classic"] .dash-grid {
  grid-template-columns: 1fr 1.2fr;
  grid-template-areas:
    "conditions radar"
    "conditions radar"
    "charts charts"
    "cameras cameras"
    "keys keys"
    "outages resources"
    "shelters shelters"
    "contacts contacts";
}

[data-layout="02-ha-classic"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="02-ha-classic"] [data-widget="radar"] { grid-area: radar; }
[data-layout="02-ha-classic"] [data-widget="charts"] { grid-area: charts; }
[data-layout="02-ha-classic"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="02-ha-classic"] [data-widget="keys"] { grid-area: keys; }
[data-layout="02-ha-classic"] [data-widget="outages"] { grid-area: outages; }
[data-layout="02-ha-classic"] [data-widget="resources"] { grid-area: resources; }
[data-layout="02-ha-classic"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="02-ha-classic"] [data-widget="contacts"] { grid-area: contacts; }

/* ── Layout 03: Radar First ── */
[data-layout="03-radar-first"] .dash-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "radar radar"
    "conditions charts"
    "cameras cameras"
    "keys keys"
    "outages resources"
    "shelters shelters"
    "contacts contacts";
}

[data-layout="03-radar-first"] [data-widget="radar"] .radar-frame--tall {
  min-height: 420px;
}

[data-layout="03-radar-first"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="03-radar-first"] [data-widget="radar"] { grid-area: radar; }
[data-layout="03-radar-first"] [data-widget="charts"] { grid-area: charts; }
[data-layout="03-radar-first"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="03-radar-first"] [data-widget="keys"] { grid-area: keys; }
[data-layout="03-radar-first"] [data-widget="outages"] { grid-area: outages; }
[data-layout="03-radar-first"] [data-widget="resources"] { grid-area: resources; }
[data-layout="03-radar-first"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="03-radar-first"] [data-widget="contacts"] { grid-area: contacts; }

/* ── Layout 04: Command Center ── */
[data-layout="04-command-center"] .dash-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "cameras radar"
    "conditions charts"
    "keys keys"
    "outages resources"
    "shelters shelters"
    "contacts contacts";
}

[data-layout="04-command-center"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="04-command-center"] [data-widget="radar"] { grid-area: radar; }
[data-layout="04-command-center"] [data-widget="charts"] { grid-area: charts; }
[data-layout="04-command-center"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="04-command-center"] [data-widget="keys"] { grid-area: keys; }
[data-layout="04-command-center"] [data-widget="outages"] { grid-area: outages; }
[data-layout="04-command-center"] [data-widget="resources"] { grid-area: resources; }
[data-layout="04-command-center"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="04-command-center"] [data-widget="contacts"] { grid-area: contacts; }

/* ── Layout 05: Camera Wall ── */
[data-layout="05-camera-wall"] .dash-grid {
  grid-template-columns: 280px 1fr;
  grid-template-areas:
    "conditions cameras"
    "charts cameras"
    "radar cameras"
    "keys keys"
    "outages resources"
    "shelters shelters"
    "contacts contacts";
}

[data-layout="05-camera-wall"] [data-widget="cameras"] .camera-frame {
  min-height: 360px;
}

[data-layout="05-camera-wall"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="05-camera-wall"] [data-widget="radar"] { grid-area: radar; }
[data-layout="05-camera-wall"] [data-widget="charts"] { grid-area: charts; }
[data-layout="05-camera-wall"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="05-camera-wall"] [data-widget="keys"] { grid-area: keys; }
[data-layout="05-camera-wall"] [data-widget="outages"] { grid-area: outages; }
[data-layout="05-camera-wall"] [data-widget="resources"] { grid-area: resources; }
[data-layout="05-camera-wall"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="05-camera-wall"] [data-widget="contacts"] { grid-area: contacts; }

/* ── Layout 06: Emergency Ops ── */
[data-layout="06-emergency-ops"] {
  --dash-accent: #ef4444;
  --dash-gap: 0.5rem;
}

[data-layout="06-emergency-ops"] .dash-grid {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "keys keys keys"
    "shelters shelters shelters"
    "radar radar conditions"
    "charts charts charts"
    "cameras cameras cameras"
    "outages resources resources"
    "contacts contacts contacts";
}

[data-layout="06-emergency-ops"] [data-widget="keys"] { grid-area: keys; }
[data-layout="06-emergency-ops"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="06-emergency-ops"] [data-widget="radar"] { grid-area: radar; }
[data-layout="06-emergency-ops"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="06-emergency-ops"] [data-widget="charts"] { grid-area: charts; }
[data-layout="06-emergency-ops"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="06-emergency-ops"] [data-widget="outages"] { grid-area: outages; }
[data-layout="06-emergency-ops"] [data-widget="resources"] { grid-area: resources; }
[data-layout="06-emergency-ops"] [data-widget="contacts"] { grid-area: contacts; }

/* ── Layout 07: Bento ── */
[data-layout="07-bento"] {
  --dash-accent: #f0a030;
}

[data-layout="07-bento"] .dash-grid {
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "conditions conditions radar radar"
    "conditions charts charts radar"
    "cameras cameras keys keys"
    "outages outages resources resources"
    "shelters shelters shelters contacts"
    "shelters shelters shelters contacts";
}

[data-layout="07-bento"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="07-bento"] [data-widget="radar"] { grid-area: radar; }
[data-layout="07-bento"] [data-widget="charts"] { grid-area: charts; }
[data-layout="07-bento"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="07-bento"] [data-widget="keys"] { grid-area: keys; }
[data-layout="07-bento"] [data-widget="outages"] { grid-area: outages; }
[data-layout="07-bento"] [data-widget="resources"] { grid-area: resources; }
[data-layout="07-bento"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="07-bento"] [data-widget="contacts"] { grid-area: contacts; }

/* ── Layout 08: Newspaper ── */
[data-layout="08-newspaper"] .dash-shell {
  max-width: 720px;
}

[data-layout="08-newspaper"] .widget,
[data-layout="08-newspaper"] .ha-hero,
[data-layout="08-newspaper"] .ha-map,
[data-layout="08-newspaper"] .ha-charts,
[data-layout="08-newspaper"] .ha-cameras {
  border-radius: 4px;
  box-shadow: none;
}

[data-layout="08-newspaper"] .dash-grid {
  grid-template-columns: 1fr;
  grid-template-areas:
    "conditions"
    "radar"
    "charts"
    "cameras"
    "keys"
    "outages"
    "resources"
    "shelters"
    "contacts";
}

[data-layout="08-newspaper"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="08-newspaper"] [data-widget="radar"] { grid-area: radar; }
[data-layout="08-newspaper"] [data-widget="charts"] { grid-area: charts; }
[data-layout="08-newspaper"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="08-newspaper"] [data-widget="keys"] { grid-area: keys; }
[data-layout="08-newspaper"] [data-widget="outages"] { grid-area: outages; }
[data-layout="08-newspaper"] [data-widget="resources"] { grid-area: resources; }
[data-layout="08-newspaper"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="08-newspaper"] [data-widget="contacts"] { grid-area: contacts; }

/* ── Layout 09: Wide Masonry ── */
[data-layout="09-wide-masonry"] .dash-shell {
  width: min(1600px, 98vw);
}

[data-layout="09-wide-masonry"] .dash-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "conditions radar charts"
    "cameras cameras keys"
    "outages resources resources"
    "shelters shelters contacts";
}

[data-layout="09-wide-masonry"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="09-wide-masonry"] [data-widget="radar"] { grid-area: radar; }
[data-layout="09-wide-masonry"] [data-widget="charts"] { grid-area: charts; }
[data-layout="09-wide-masonry"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="09-wide-masonry"] [data-widget="keys"] { grid-area: keys; }
[data-layout="09-wide-masonry"] [data-widget="outages"] { grid-area: outages; }
[data-layout="09-wide-masonry"] [data-widget="resources"] { grid-area: resources; }
[data-layout="09-wide-masonry"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="09-wide-masonry"] [data-widget="contacts"] { grid-area: contacts; }

/* ── Layout 10: Split Focus ── */
[data-layout="10-split-focus"] .dash-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "conditions radar"
    "charts radar"
    "charts cameras"
    "keys keys"
    "outages resources"
    "shelters shelters"
    "contacts contacts";
}

[data-layout="10-split-focus"] [data-widget="radar"],
[data-layout="10-split-focus"] [data-widget="cameras"] {
  position: sticky;
  top: 0.5rem;
  align-self: start;
}

[data-layout="10-split-focus"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="10-split-focus"] [data-widget="radar"] { grid-area: radar; }
[data-layout="10-split-focus"] [data-widget="charts"] { grid-area: charts; }
[data-layout="10-split-focus"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="10-split-focus"] [data-widget="keys"] { grid-area: keys; }
[data-layout="10-split-focus"] [data-widget="outages"] { grid-area: outages; }
[data-layout="10-split-focus"] [data-widget="resources"] { grid-area: resources; }
[data-layout="10-split-focus"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="10-split-focus"] [data-widget="contacts"] { grid-area: contacts; }

/* ── Layout 11: Compact ── */
[data-layout="11-compact"] {
  --dash-accent: #4ecdc4;
  --dash-gap: 0.45rem;
  font-size: 0.875rem;
}

[data-layout="11-compact"] .ha-hero__temp {
  font-size: 2rem;
}

[data-layout="11-compact"] .dash-grid {
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "conditions conditions radar radar charts charts"
    "cameras cameras cameras keys keys keys"
    "outages outages resources resources shelters shelters"
    "contacts contacts contacts contacts contacts contacts";
}

[data-layout="11-compact"] .ha-charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.35rem;
}

[data-layout="11-compact"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="11-compact"] [data-widget="radar"] { grid-area: radar; }
[data-layout="11-compact"] [data-widget="charts"] { grid-area: charts; }
[data-layout="11-compact"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="11-compact"] [data-widget="keys"] { grid-area: keys; }
[data-layout="11-compact"] [data-widget="outages"] { grid-area: outages; }
[data-layout="11-compact"] [data-widget="resources"] { grid-area: resources; }
[data-layout="11-compact"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="11-compact"] [data-widget="contacts"] { grid-area: contacts; }

/* ── Layout 12: TV Mode ── */
[data-layout="12-tv-mode"] {
  --dash-accent: #ffffff;
  --dash-text: #ffffff;
  --dash-bg: #000000;
  --dash-surface: #0a0a0a;
  --dash-border: #333;
}

[data-layout="12-tv-mode"] .ha-hero__temp {
  font-size: 4.5rem;
}

[data-layout="12-tv-mode"] .dash-grid {
  grid-template-columns: 1fr 1.5fr;
  grid-template-areas:
    "conditions radar"
    "charts radar"
    "cameras cameras"
    "keys keys";
}

[data-layout="12-tv-mode"] [data-widget="shelters"],
[data-layout="12-tv-mode"] [data-widget="contacts"],
[data-layout="12-tv-mode"] [data-widget="outages"],
[data-layout="12-tv-mode"] [data-widget="resources"] {
  display: none;
}

[data-layout="12-tv-mode"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="12-tv-mode"] [data-widget="radar"] { grid-area: radar; }
[data-layout="12-tv-mode"] [data-widget="charts"] { grid-area: charts; }
[data-layout="12-tv-mode"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="12-tv-mode"] [data-widget="keys"] { grid-area: keys; }

/* ── Layout 13: Ops Desk ── */
[data-layout="13-ops-desk"] .dash-grid {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "keys outages outages"
    "radar radar conditions"
    "charts charts cameras"
    "resources resources resources"
    "shelters shelters contacts";
}

[data-layout="13-ops-desk"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="13-ops-desk"] [data-widget="radar"] { grid-area: radar; }
[data-layout="13-ops-desk"] [data-widget="charts"] { grid-area: charts; }
[data-layout="13-ops-desk"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="13-ops-desk"] [data-widget="keys"] { grid-area: keys; }
[data-layout="13-ops-desk"] [data-widget="outages"] { grid-area: outages; }
[data-layout="13-ops-desk"] [data-widget="resources"] { grid-area: resources; }
[data-layout="13-ops-desk"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="13-ops-desk"] [data-widget="contacts"] { grid-area: contacts; }

/* ── Layout 14: Forecast Led ── */
[data-layout="14-forecast-led"] {
  --dash-accent: #a78bfa;
}

[data-layout="14-forecast-led"] .ha-forecast-strip {
  margin-top: 0.5rem;
}

[data-layout="14-forecast-led"] .ha-forecast-day {
  min-width: 80px;
  padding: 0.65rem 0.35rem;
}

[data-layout="14-forecast-led"] .dash-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "conditions conditions"
    "radar charts"
    "cameras cameras"
    "keys keys"
    "outages resources"
    "shelters contacts";
}

[data-layout="14-forecast-led"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="14-forecast-led"] [data-widget="radar"] { grid-area: radar; }
[data-layout="14-forecast-led"] [data-widget="charts"] { grid-area: charts; }
[data-layout="14-forecast-led"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="14-forecast-led"] [data-widget="keys"] { grid-area: keys; }
[data-layout="14-forecast-led"] [data-widget="outages"] { grid-area: outages; }
[data-layout="14-forecast-led"] [data-widget="resources"] { grid-area: resources; }
[data-layout="14-forecast-led"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="14-forecast-led"] [data-widget="contacts"] { grid-area: contacts; }

/* ── Layout 15: Dual Maps ── */
[data-layout="15-dual-maps"] .dash-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "radar outages"
    "conditions charts"
    "cameras cameras"
    "keys resources"
    "shelters shelters"
    "contacts contacts";
}

[data-layout="15-dual-maps"] [data-widget="radar"] .radar-frame--tall,
[data-layout="15-dual-maps"] [data-widget="outages"] .ha-outage-map {
  min-height: 320px;
  aspect-ratio: auto;
}

[data-layout="15-dual-maps"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="15-dual-maps"] [data-widget="radar"] { grid-area: radar; }
[data-layout="15-dual-maps"] [data-widget="charts"] { grid-area: charts; }
[data-layout="15-dual-maps"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="15-dual-maps"] [data-widget="keys"] { grid-area: keys; }
[data-layout="15-dual-maps"] [data-widget="outages"] { grid-area: outages; }
[data-layout="15-dual-maps"] [data-widget="resources"] { grid-area: resources; }
[data-layout="15-dual-maps"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="15-dual-maps"] [data-widget="contacts"] { grid-area: contacts; }

/* ── Layout 16: Metrics Heavy ── */
[data-layout="16-metrics-heavy"] .dash-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "conditions charts"
    "conditions charts"
    "radar cameras"
    "keys keys"
    "outages resources"
    "shelters contacts";
}

[data-layout="16-metrics-heavy"] [data-widget="conditions"] .ha-temp-chart {
  min-height: 120px;
}

[data-layout="16-metrics-heavy"] [data-widget="conditions"] .ha-chart-wrap {
  height: 100px;
}

[data-layout="16-metrics-heavy"] [data-widget="radar"] .radar-frame,
[data-layout="16-metrics-heavy"] [data-widget="cameras"] .camera-frame {
  max-height: 220px;
}

[data-layout="16-metrics-heavy"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="16-metrics-heavy"] [data-widget="radar"] { grid-area: radar; }
[data-layout="16-metrics-heavy"] [data-widget="charts"] { grid-area: charts; }
[data-layout="16-metrics-heavy"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="16-metrics-heavy"] [data-widget="keys"] { grid-area: keys; }
[data-layout="16-metrics-heavy"] [data-widget="outages"] { grid-area: outages; }
[data-layout="16-metrics-heavy"] [data-widget="resources"] { grid-area: resources; }
[data-layout="16-metrics-heavy"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="16-metrics-heavy"] [data-widget="contacts"] { grid-area: contacts; }

/* ── Layout 17: Sidebar ── */
[data-layout="17-sidebar"] .dash-grid {
  grid-template-columns: 260px 1fr;
  grid-template-areas:
    "conditions radar"
    "conditions charts"
    "conditions cameras"
    "conditions keys"
    "conditions outages"
    "conditions resources"
    "shelters shelters"
    "contacts contacts";
}

[data-layout="17-sidebar"] [data-widget="conditions"] {
  grid-area: conditions;
  position: sticky;
  top: 0.5rem;
  align-self: start;
  max-height: calc(100vh - 1rem);
  overflow-y: auto;
}

[data-layout="17-sidebar"] [data-widget="radar"] { grid-area: radar; }
[data-layout="17-sidebar"] [data-widget="charts"] { grid-area: charts; }
[data-layout="17-sidebar"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="17-sidebar"] [data-widget="keys"] { grid-area: keys; }
[data-layout="17-sidebar"] [data-widget="outages"] { grid-area: outages; }
[data-layout="17-sidebar"] [data-widget="resources"] { grid-area: resources; }
[data-layout="17-sidebar"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="17-sidebar"] [data-widget="contacts"] { grid-area: contacts; }

/* ── Layout 18: Minimal ── */
[data-layout="18-minimal"] .dash-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "conditions radar"
    "charts cameras"
    "keys keys"
    "outages resources"
    "shelters contacts";
}

[data-layout="18-minimal"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="18-minimal"] [data-widget="radar"] { grid-area: radar; }
[data-layout="18-minimal"] [data-widget="charts"] { grid-area: charts; }
[data-layout="18-minimal"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="18-minimal"] [data-widget="keys"] { grid-area: keys; }
[data-layout="18-minimal"] [data-widget="outages"] { grid-area: outages; }
[data-layout="18-minimal"] [data-widget="resources"] { grid-area: resources; }
[data-layout="18-minimal"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="18-minimal"] [data-widget="contacts"] { grid-area: contacts; }

/* ── Layout 19: Morning Brief ── */
[data-layout="19-morning-brief"] .ha-hero__temp {
  font-size: 3.5rem;
}

[data-layout="19-morning-brief"] .ha-forecast-strip {
  margin-top: 1.25rem;
}

[data-layout="19-morning-brief"] .dash-grid {
  grid-template-columns: 1.4fr 1fr;
  grid-template-areas:
    "conditions conditions"
    "radar charts"
    "cameras keys"
    "outages resources"
    "shelters contacts";
}

[data-layout="19-morning-brief"] [data-widget="resources"] {
  opacity: 0.75;
}

[data-layout="19-morning-brief"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="19-morning-brief"] [data-widget="radar"] { grid-area: radar; }
[data-layout="19-morning-brief"] [data-widget="charts"] { grid-area: charts; }
[data-layout="19-morning-brief"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="19-morning-brief"] [data-widget="keys"] { grid-area: keys; }
[data-layout="19-morning-brief"] [data-widget="outages"] { grid-area: outages; }
[data-layout="19-morning-brief"] [data-widget="resources"] { grid-area: resources; }
[data-layout="19-morning-brief"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="19-morning-brief"] [data-widget="contacts"] { grid-area: contacts; }

/* ── Layout 20: Night Watch ── */
[data-layout="20-night-watch"] {
  --dash-accent: #5cb85c;
  --dash-bg: #0a120a;
  --dash-surface: #121a12;
  --dash-border: #1e2e1e;
}

[data-layout="20-night-watch"] .dash-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "radar cameras"
    "radar cameras"
    "conditions charts"
    "keys keys"
    "outages shelters"
    "resources contacts";
}

[data-layout="20-night-watch"] [data-widget="radar"] .radar-frame--tall,
[data-layout="20-night-watch"] [data-widget="cameras"] .camera-frame {
  min-height: 300px;
}

[data-layout="20-night-watch"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="20-night-watch"] [data-widget="radar"] { grid-area: radar; }
[data-layout="20-night-watch"] [data-widget="charts"] { grid-area: charts; }
[data-layout="20-night-watch"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="20-night-watch"] [data-widget="keys"] { grid-area: keys; }
[data-layout="20-night-watch"] [data-widget="outages"] { grid-area: outages; }
[data-layout="20-night-watch"] [data-widget="resources"] { grid-area: resources; }
[data-layout="20-night-watch"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="20-night-watch"] [data-widget="contacts"] { grid-area: contacts; }

/* ── Layouts 21–40: Camera Wall family ── */

/* 21: Mirror — cameras left, metrics right */
[data-layout="21-camera-mirror"] .dash-grid {
  grid-template-columns: 1fr 280px;
  grid-template-areas:
    "cameras conditions"
    "cameras charts"
    "cameras radar"
    "keys keys"
    "outages resources"
    "shelters shelters"
    "contacts contacts";
}

[data-layout="21-camera-mirror"] [data-widget="cameras"] .camera-frame {
  min-height: 360px;
}

[data-layout="21-camera-mirror"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="21-camera-mirror"] [data-widget="radar"] { grid-area: radar; }
[data-layout="21-camera-mirror"] [data-widget="charts"] { grid-area: charts; }
[data-layout="21-camera-mirror"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="21-camera-mirror"] [data-widget="keys"] { grid-area: keys; }
[data-layout="21-camera-mirror"] [data-widget="outages"] { grid-area: outages; }
[data-layout="21-camera-mirror"] [data-widget="resources"] { grid-area: resources; }
[data-layout="21-camera-mirror"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="21-camera-mirror"] [data-widget="contacts"] { grid-area: contacts; }

/* 22: Banner — full-width cameras on top */
[data-layout="22-camera-banner"] .dash-grid {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "cameras cameras cameras"
    "conditions charts radar"
    "keys keys keys"
    "outages resources shelters"
    "contacts contacts contacts";
}

[data-layout="22-camera-banner"] [data-widget="cameras"] .camera-frame {
  min-height: 320px;
}

[data-layout="22-camera-banner"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="22-camera-banner"] [data-widget="radar"] { grid-area: radar; }
[data-layout="22-camera-banner"] [data-widget="charts"] { grid-area: charts; }
[data-layout="22-camera-banner"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="22-camera-banner"] [data-widget="keys"] { grid-area: keys; }
[data-layout="22-camera-banner"] [data-widget="outages"] { grid-area: outages; }
[data-layout="22-camera-banner"] [data-widget="resources"] { grid-area: resources; }
[data-layout="22-camera-banner"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="22-camera-banner"] [data-widget="contacts"] { grid-area: contacts; }

/* 23: Theater — cameras dominate ~70% */
[data-layout="23-camera-theater"] {
  --dash-gap: 0.65rem;
}

[data-layout="23-camera-theater"] .dash-grid {
  grid-template-columns: 220px 1.8fr;
  grid-template-areas:
    "conditions cameras"
    "radar cameras"
    "charts cameras"
    "keys keys"
    "outages resources"
    "shelters shelters"
    "contacts contacts";
}

[data-layout="23-camera-theater"] [data-widget="cameras"] .camera-frame {
  min-height: 420px;
}

[data-layout="23-camera-theater"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="23-camera-theater"] [data-widget="radar"] { grid-area: radar; }
[data-layout="23-camera-theater"] [data-widget="charts"] { grid-area: charts; }
[data-layout="23-camera-theater"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="23-camera-theater"] [data-widget="keys"] { grid-area: keys; }
[data-layout="23-camera-theater"] [data-widget="outages"] { grid-area: outages; }
[data-layout="23-camera-theater"] [data-widget="resources"] { grid-area: resources; }
[data-layout="23-camera-theater"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="23-camera-theater"] [data-widget="contacts"] { grid-area: contacts; }

/* 24: Rail — cameras right with keys tucked under sidebar */
[data-layout="24-camera-rail"] .dash-grid {
  grid-template-columns: 260px 1fr 300px;
  grid-template-areas:
    "conditions cameras cameras"
    "charts cameras cameras"
    "radar keys cameras"
    "outages resources shelters"
    "contacts contacts contacts";
}

[data-layout="24-camera-rail"] [data-widget="cameras"] .camera-frame {
  min-height: 380px;
}

[data-layout="24-camera-rail"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="24-camera-rail"] [data-widget="radar"] { grid-area: radar; }
[data-layout="24-camera-rail"] [data-widget="charts"] { grid-area: charts; }
[data-layout="24-camera-rail"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="24-camera-rail"] [data-widget="keys"] { grid-area: keys; }
[data-layout="24-camera-rail"] [data-widget="outages"] { grid-area: outages; }
[data-layout="24-camera-rail"] [data-widget="resources"] { grid-area: resources; }
[data-layout="24-camera-rail"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="24-camera-rail"] [data-widget="contacts"] { grid-area: contacts; }

/* 25: Gallery — hero cameras, three columns below */
[data-layout="25-camera-gallery"] .dash-grid {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "cameras cameras cameras"
    "conditions radar charts"
    "keys keys keys"
    "outages resources shelters"
    "contacts contacts contacts";
}

[data-layout="25-camera-gallery"] [data-widget="cameras"] .camera-frame {
  min-height: 340px;
}

[data-layout="25-camera-gallery"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="25-camera-gallery"] [data-widget="radar"] { grid-area: radar; }
[data-layout="25-camera-gallery"] [data-widget="charts"] { grid-area: charts; }
[data-layout="25-camera-gallery"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="25-camera-gallery"] [data-widget="keys"] { grid-area: keys; }
[data-layout="25-camera-gallery"] [data-widget="outages"] { grid-area: outages; }
[data-layout="25-camera-gallery"] [data-widget="resources"] { grid-area: resources; }
[data-layout="25-camera-gallery"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="25-camera-gallery"] [data-widget="contacts"] { grid-area: contacts; }

/* 26: Split — top row cameras + conditions */
[data-layout="26-camera-split"] .dash-grid {
  grid-template-columns: 1fr 1.4fr;
  grid-template-areas:
    "conditions cameras"
    "charts cameras"
    "radar radar"
    "keys keys"
    "outages resources"
    "shelters shelters"
    "contacts contacts";
}

[data-layout="26-camera-split"] [data-widget="cameras"] .camera-frame {
  min-height: 300px;
}

[data-layout="26-camera-split"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="26-camera-split"] [data-widget="radar"] { grid-area: radar; }
[data-layout="26-camera-split"] [data-widget="charts"] { grid-area: charts; }
[data-layout="26-camera-split"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="26-camera-split"] [data-widget="keys"] { grid-area: keys; }
[data-layout="26-camera-split"] [data-widget="outages"] { grid-area: outages; }
[data-layout="26-camera-split"] [data-widget="resources"] { grid-area: resources; }
[data-layout="26-camera-split"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="26-camera-split"] [data-widget="contacts"] { grid-area: contacts; }

/* 27: Tower — cameras upper-right spanning rows */
[data-layout="27-camera-tower"] .dash-grid {
  grid-template-columns: 1fr 1fr 1.3fr;
  grid-template-areas:
    "conditions charts cameras"
    "radar keys cameras"
    "outages resources cameras"
    "shelters shelters shelters"
    "contacts contacts contacts";
}

[data-layout="27-camera-tower"] [data-widget="cameras"] .camera-frame {
  min-height: 400px;
}

[data-layout="27-camera-tower"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="27-camera-tower"] [data-widget="radar"] { grid-area: radar; }
[data-layout="27-camera-tower"] [data-widget="charts"] { grid-area: charts; }
[data-layout="27-camera-tower"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="27-camera-tower"] [data-widget="keys"] { grid-area: keys; }
[data-layout="27-camera-tower"] [data-widget="outages"] { grid-area: outages; }
[data-layout="27-camera-tower"] [data-widget="resources"] { grid-area: resources; }
[data-layout="27-camera-tower"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="27-camera-tower"] [data-widget="contacts"] { grid-area: contacts; }

/* 28: Storm — temps left, center stack, keys right */
[data-layout="28-camera-storm"] {
  --dash-accent: #f59e0b;
  --dash-gap: 0.5rem;
}

[data-layout="28-camera-storm"] .dash-grid {
  grid-template-columns: 280px 1fr 260px;
  grid-template-areas:
    "outages outages outages"
    "conditions cameras keys"
    "charts radar keys"
    "resources shelters keys"
    "contacts contacts contacts";
}

/* 29: Horizon — wide camera strip, radar peek */
[data-layout="29-camera-horizon"] .dash-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "cameras cameras"
    "conditions radar"
    "charts charts"
    "keys keys"
    "outages resources"
    "shelters shelters"
    "contacts contacts";
}

[data-layout="29-camera-horizon"] [data-widget="cameras"] .camera-frame {
  min-height: 280px;
}

[data-layout="29-camera-horizon"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="29-camera-horizon"] [data-widget="radar"] { grid-area: radar; }
[data-layout="29-camera-horizon"] [data-widget="charts"] { grid-area: charts; }
[data-layout="29-camera-horizon"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="29-camera-horizon"] [data-widget="keys"] { grid-area: keys; }
[data-layout="29-camera-horizon"] [data-widget="outages"] { grid-area: outages; }
[data-layout="29-camera-horizon"] [data-widget="resources"] { grid-area: resources; }
[data-layout="29-camera-horizon"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="29-camera-horizon"] [data-widget="contacts"] { grid-area: contacts; }

/* 30: Studio — cyan accent, extra-tall feed */
[data-layout="30-camera-studio"] {
  --dash-accent: #22d3ee;
}

[data-layout="30-camera-studio"] .dash-grid {
  grid-template-columns: 260px 1fr;
  grid-template-areas:
    "conditions cameras"
    "charts cameras"
    "radar cameras"
    "keys keys"
    "outages resources"
    "shelters shelters"
    "contacts contacts";
}

[data-layout="30-camera-studio"] [data-widget="cameras"] .camera-frame {
  min-height: 440px;
}

[data-layout="30-camera-studio"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="30-camera-studio"] [data-widget="radar"] { grid-area: radar; }
[data-layout="30-camera-studio"] [data-widget="charts"] { grid-area: charts; }
[data-layout="30-camera-studio"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="30-camera-studio"] [data-widget="keys"] { grid-area: keys; }
[data-layout="30-camera-studio"] [data-widget="outages"] { grid-area: outages; }
[data-layout="30-camera-studio"] [data-widget="resources"] { grid-area: resources; }
[data-layout="30-camera-studio"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="30-camera-studio"] [data-widget="contacts"] { grid-area: contacts; }

/* 31: Brief — slim sidebar, radar in bottom band */
[data-layout="31-camera-brief"] .dash-grid {
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "conditions cameras"
    "charts cameras"
    "keys cameras"
    "radar radar"
    "outages resources"
    "shelters shelters"
    "contacts contacts";
}

[data-layout="31-camera-brief"] [data-widget="cameras"] .camera-frame {
  min-height: 340px;
}

[data-layout="31-camera-brief"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="31-camera-brief"] [data-widget="radar"] { grid-area: radar; }
[data-layout="31-camera-brief"] [data-widget="charts"] { grid-area: charts; }
[data-layout="31-camera-brief"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="31-camera-brief"] [data-widget="keys"] { grid-area: keys; }
[data-layout="31-camera-brief"] [data-widget="outages"] { grid-area: outages; }
[data-layout="31-camera-brief"] [data-widget="resources"] { grid-area: resources; }
[data-layout="31-camera-brief"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="31-camera-brief"] [data-widget="contacts"] { grid-area: contacts; }

/* 32: Command — keys column beside cameras */
[data-layout="32-camera-command"] .dash-grid {
  grid-template-columns: 300px 1fr 280px;
  grid-template-areas:
    "keys cameras conditions"
    "keys cameras charts"
    "keys cameras radar"
    "outages resources shelters"
    "contacts contacts contacts";
}

[data-layout="32-camera-command"] [data-widget="cameras"] .camera-frame {
  min-height: 380px;
}

[data-layout="32-camera-command"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="32-camera-command"] [data-widget="radar"] { grid-area: radar; }
[data-layout="32-camera-command"] [data-widget="charts"] { grid-area: charts; }
[data-layout="32-camera-command"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="32-camera-command"] [data-widget="keys"] { grid-area: keys; }
[data-layout="32-camera-command"] [data-widget="outages"] { grid-area: outages; }
[data-layout="32-camera-command"] [data-widget="resources"] { grid-area: resources; }
[data-layout="32-camera-command"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="32-camera-command"] [data-widget="contacts"] { grid-area: contacts; }

/* 33: Dawn — warm accent, forecast sidebar */
[data-layout="33-camera-dawn"] {
  --dash-accent: #eab308;
}

[data-layout="33-camera-dawn"] .dash-grid {
  grid-template-columns: 300px 1fr;
  grid-template-areas:
    "conditions cameras"
    "charts cameras"
    "radar cameras"
    "keys keys"
    "outages resources"
    "shelters shelters"
    "contacts contacts";
}

[data-layout="33-camera-dawn"] [data-widget="conditions"] .ha-forecast-strip {
  margin-top: 0.5rem;
}

[data-layout="33-camera-dawn"] [data-widget="cameras"] .camera-frame {
  min-height: 360px;
}

[data-layout="33-camera-dawn"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="33-camera-dawn"] [data-widget="radar"] { grid-area: radar; }
[data-layout="33-camera-dawn"] [data-widget="charts"] { grid-area: charts; }
[data-layout="33-camera-dawn"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="33-camera-dawn"] [data-widget="keys"] { grid-area: keys; }
[data-layout="33-camera-dawn"] [data-widget="outages"] { grid-area: outages; }
[data-layout="33-camera-dawn"] [data-widget="resources"] { grid-area: resources; }
[data-layout="33-camera-dawn"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="33-camera-dawn"] [data-widget="contacts"] { grid-area: contacts; }

/* 34: Grid — wider sidebar, charts span two rows */
[data-layout="34-camera-grid"] .dash-grid {
  grid-template-columns: 320px 1fr;
  grid-template-areas:
    "conditions cameras"
    "charts cameras"
    "charts radar"
    "keys keys"
    "outages resources"
    "shelters shelters"
    "contacts contacts";
}

[data-layout="34-camera-grid"] [data-widget="cameras"] .camera-frame {
  min-height: 350px;
}

[data-layout="34-camera-grid"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="34-camera-grid"] [data-widget="radar"] { grid-area: radar; }
[data-layout="34-camera-grid"] [data-widget="charts"] { grid-area: charts; }
[data-layout="34-camera-grid"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="34-camera-grid"] [data-widget="keys"] { grid-area: keys; }
[data-layout="34-camera-grid"] [data-widget="outages"] { grid-area: outages; }
[data-layout="34-camera-grid"] [data-widget="resources"] { grid-area: resources; }
[data-layout="34-camera-grid"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="34-camera-grid"] [data-widget="contacts"] { grid-area: contacts; }

/* 35: Peek — cameras center column flanked */
[data-layout="35-camera-peek"] .dash-grid {
  grid-template-columns: 1fr 1.4fr 1fr;
  grid-template-areas:
    "conditions cameras radar"
    "charts cameras keys"
    "outages cameras resources"
    "shelters shelters shelters"
    "contacts contacts contacts";
}

[data-layout="35-camera-peek"] [data-widget="cameras"] .camera-frame {
  min-height: 400px;
}

[data-layout="35-camera-peek"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="35-camera-peek"] [data-widget="radar"] { grid-area: radar; }
[data-layout="35-camera-peek"] [data-widget="charts"] { grid-area: charts; }
[data-layout="35-camera-peek"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="35-camera-peek"] [data-widget="keys"] { grid-area: keys; }
[data-layout="35-camera-peek"] [data-widget="outages"] { grid-area: outages; }
[data-layout="35-camera-peek"] [data-widget="resources"] { grid-area: resources; }
[data-layout="35-camera-peek"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="35-camera-peek"] [data-widget="contacts"] { grid-area: contacts; }

/* 36: Monitor — cameras top-right, radar below metrics */
[data-layout="36-camera-monitor"] .dash-grid {
  grid-template-columns: 280px 1fr;
  grid-template-areas:
    "conditions cameras"
    "charts radar"
    "keys keys"
    "outages resources"
    "shelters shelters"
    "contacts contacts";
}

[data-layout="36-camera-monitor"] [data-widget="cameras"] .camera-frame {
  min-height: 280px;
}

[data-layout="36-camera-monitor"] [data-widget="radar"] .radar-frame--tall {
  min-height: 240px;
}

[data-layout="36-camera-monitor"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="36-camera-monitor"] [data-widget="radar"] { grid-area: radar; }
[data-layout="36-camera-monitor"] [data-widget="charts"] { grid-area: charts; }
[data-layout="36-camera-monitor"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="36-camera-monitor"] [data-widget="keys"] { grid-area: keys; }
[data-layout="36-camera-monitor"] [data-widget="outages"] { grid-area: outages; }
[data-layout="36-camera-monitor"] [data-widget="resources"] { grid-area: resources; }
[data-layout="36-camera-monitor"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="36-camera-monitor"] [data-widget="contacts"] { grid-area: contacts; }

/* 37: Compact — tight camera wall */
[data-layout="37-camera-compact"] {
  --dash-gap: 0.4rem;
  font-size: 0.9375rem;
}

[data-layout="37-camera-compact"] .dash-grid {
  grid-template-columns: 220px 1fr;
  grid-template-areas:
    "conditions cameras"
    "charts cameras"
    "radar cameras"
    "keys keys"
    "outages resources"
    "shelters shelters"
    "contacts contacts";
}

[data-layout="37-camera-compact"] [data-widget="cameras"] .camera-frame {
  min-height: 300px;
}

[data-layout="37-camera-compact"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="37-camera-compact"] [data-widget="radar"] { grid-area: radar; }
[data-layout="37-camera-compact"] [data-widget="charts"] { grid-area: charts; }
[data-layout="37-camera-compact"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="37-camera-compact"] [data-widget="keys"] { grid-area: keys; }
[data-layout="37-camera-compact"] [data-widget="outages"] { grid-area: outages; }
[data-layout="37-camera-compact"] [data-widget="resources"] { grid-area: resources; }
[data-layout="37-camera-compact"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="37-camera-compact"] [data-widget="contacts"] { grid-area: contacts; }

/* 38: Night — muted green, cameras + radar right */
[data-layout="38-camera-night"] {
  --dash-accent: #4ade80;
}

[data-layout="38-camera-night"] .dash-grid {
  grid-template-columns: 260px 1fr 1fr;
  grid-template-areas:
    "conditions cameras cameras"
    "charts radar radar"
    "keys keys keys"
    "outages resources shelters"
    "contacts contacts contacts";
}

[data-layout="38-camera-night"] [data-widget="cameras"] .camera-frame {
  min-height: 340px;
}

[data-layout="38-camera-night"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="38-camera-night"] [data-widget="radar"] { grid-area: radar; }
[data-layout="38-camera-night"] [data-widget="charts"] { grid-area: charts; }
[data-layout="38-camera-night"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="38-camera-night"] [data-widget="keys"] { grid-area: keys; }
[data-layout="38-camera-night"] [data-widget="outages"] { grid-area: outages; }
[data-layout="38-camera-night"] [data-widget="resources"] { grid-area: resources; }
[data-layout="38-camera-night"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="38-camera-night"] [data-widget="contacts"] { grid-area: contacts; }

/* 39: Chronicle — cameras left column, narrow feel */
[data-layout="39-camera-chronicle"] .dash-shell {
  max-width: 1100px;
}

[data-layout="39-camera-chronicle"] .dash-grid {
  grid-template-columns: 1.2fr 300px;
  grid-template-areas:
    "cameras conditions"
    "cameras charts"
    "cameras radar"
    "keys keys"
    "outages resources"
    "shelters shelters"
    "contacts contacts";
}

[data-layout="39-camera-chronicle"] [data-widget="cameras"] .camera-frame {
  min-height: 400px;
}

[data-layout="39-camera-chronicle"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="39-camera-chronicle"] [data-widget="radar"] { grid-area: radar; }
[data-layout="39-camera-chronicle"] [data-widget="charts"] { grid-area: charts; }
[data-layout="39-camera-chronicle"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="39-camera-chronicle"] [data-widget="keys"] { grid-area: keys; }
[data-layout="39-camera-chronicle"] [data-widget="outages"] { grid-area: outages; }
[data-layout="39-camera-chronicle"] [data-widget="resources"] { grid-area: resources; }
[data-layout="39-camera-chronicle"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="39-camera-chronicle"] [data-widget="contacts"] { grid-area: contacts; }

/* 40: Prime — refined camera wall, purple accent */
[data-layout="40-camera-prime"] {
  --dash-accent: #a78bfa;
}

[data-layout="40-camera-prime"] .dash-grid {
  grid-template-columns: 300px 1fr;
  grid-template-areas:
    "conditions cameras"
    "charts cameras"
    "radar cameras"
    "keys keys"
    "outages resources"
    "shelters shelters"
    "contacts contacts";
}

[data-layout="40-camera-prime"] [data-widget="cameras"] .camera-frame {
  min-height: 380px;
}

[data-layout="40-camera-prime"] [data-widget="conditions"] { grid-area: conditions; }
[data-layout="40-camera-prime"] [data-widget="radar"] { grid-area: radar; }
[data-layout="40-camera-prime"] [data-widget="charts"] { grid-area: charts; }
[data-layout="40-camera-prime"] [data-widget="cameras"] { grid-area: cameras; }
[data-layout="40-camera-prime"] [data-widget="keys"] { grid-area: keys; }
[data-layout="40-camera-prime"] [data-widget="outages"] { grid-area: outages; }
[data-layout="40-camera-prime"] [data-widget="resources"] { grid-area: resources; }
[data-layout="40-camera-prime"] [data-widget="shelters"] { grid-area: shelters; }
[data-layout="40-camera-prime"] [data-widget="contacts"] { grid-area: contacts; }

/* ── Storm Center family (28, 41–60): temps left · center stack · keys right ── */

:is(
  [data-layout="28-camera-storm"],
  [data-layout="41-storm-center"],
  [data-layout="42-storm-outages-foot"],
  [data-layout="43-storm-outages-block"],
  [data-layout="44-storm-radar-first"],
  [data-layout="45-storm-shelters-mid"],
  [data-layout="46-storm-wide-core"],
  [data-layout="47-storm-tight-wings"],
  [data-layout="48-storm-red"],
  [data-layout="49-storm-amber"],
  [data-layout="50-storm-green"],
  [data-layout="51-storm-resources-stack"],
  [data-layout="52-storm-outages-flank"],
  [data-layout="53-storm-balanced"],
  [data-layout="54-storm-forecast-tall"],
  [data-layout="55-storm-monitor"],
  [data-layout="56-storm-compact"],
  [data-layout="57-storm-contacts-lite"],
  [data-layout="58-storm-dawn"],
  [data-layout="59-storm-night"],
  [data-layout="60-storm-prime"]
) [data-widget="outages"] {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--dash-accent) 70%, var(--dash-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dash-accent) 20%, transparent);
}

:is(
  [data-layout="28-camera-storm"],
  [data-layout="41-storm-center"],
  [data-layout="42-storm-outages-foot"],
  [data-layout="43-storm-outages-block"],
  [data-layout="44-storm-radar-first"],
  [data-layout="45-storm-shelters-mid"],
  [data-layout="46-storm-wide-core"],
  [data-layout="47-storm-tight-wings"],
  [data-layout="48-storm-red"],
  [data-layout="49-storm-amber"],
  [data-layout="50-storm-green"],
  [data-layout="51-storm-resources-stack"],
  [data-layout="52-storm-outages-flank"],
  [data-layout="53-storm-balanced"],
  [data-layout="54-storm-forecast-tall"],
  [data-layout="55-storm-monitor"],
  [data-layout="56-storm-compact"],
  [data-layout="57-storm-contacts-lite"],
  [data-layout="58-storm-dawn"],
  [data-layout="59-storm-night"],
  [data-layout="60-storm-prime"]
) [data-widget="outages"] .ha-widget__title {
  color: var(--dash-accent);
  font-size: 1rem;
}

:is(
  [data-layout="28-camera-storm"],
  [data-layout="41-storm-center"],
  [data-layout="42-storm-outages-foot"],
  [data-layout="43-storm-outages-block"],
  [data-layout="44-storm-radar-first"],
  [data-layout="45-storm-shelters-mid"],
  [data-layout="46-storm-wide-core"],
  [data-layout="47-storm-tight-wings"],
  [data-layout="48-storm-red"],
  [data-layout="49-storm-amber"],
  [data-layout="50-storm-green"],
  [data-layout="51-storm-resources-stack"],
  [data-layout="52-storm-outages-flank"],
  [data-layout="53-storm-balanced"],
  [data-layout="54-storm-forecast-tall"],
  [data-layout="55-storm-monitor"],
  [data-layout="56-storm-compact"],
  [data-layout="57-storm-contacts-lite"],
  [data-layout="58-storm-dawn"],
  [data-layout="59-storm-night"],
  [data-layout="60-storm-prime"]
) [data-widget="outages"] .ha-outage-map {
  min-height: 220px;
}

:is(
  [data-layout="28-camera-storm"],
  [data-layout="41-storm-center"],
  [data-layout="42-storm-outages-foot"],
  [data-layout="43-storm-outages-block"],
  [data-layout="44-storm-radar-first"],
  [data-layout="45-storm-shelters-mid"],
  [data-layout="46-storm-wide-core"],
  [data-layout="47-storm-tight-wings"],
  [data-layout="48-storm-red"],
  [data-layout="49-storm-amber"],
  [data-layout="50-storm-green"],
  [data-layout="51-storm-resources-stack"],
  [data-layout="52-storm-outages-flank"],
  [data-layout="53-storm-balanced"],
  [data-layout="54-storm-forecast-tall"],
  [data-layout="55-storm-monitor"],
  [data-layout="56-storm-compact"],
  [data-layout="57-storm-contacts-lite"],
  [data-layout="58-storm-dawn"],
  [data-layout="59-storm-night"],
  [data-layout="60-storm-prime"]
) [data-widget="cameras"] .camera-frame {
  min-height: 280px;
}

:is(
  [data-layout="28-camera-storm"],
  [data-layout="41-storm-center"],
  [data-layout="42-storm-outages-foot"],
  [data-layout="43-storm-outages-block"],
  [data-layout="44-storm-radar-first"],
  [data-layout="45-storm-shelters-mid"],
  [data-layout="46-storm-wide-core"],
  [data-layout="47-storm-tight-wings"],
  [data-layout="48-storm-red"],
  [data-layout="49-storm-amber"],
  [data-layout="50-storm-green"],
  [data-layout="51-storm-resources-stack"],
  [data-layout="52-storm-outages-flank"],
  [data-layout="53-storm-balanced"],
  [data-layout="54-storm-forecast-tall"],
  [data-layout="55-storm-monitor"],
  [data-layout="56-storm-compact"],
  [data-layout="57-storm-contacts-lite"],
  [data-layout="58-storm-dawn"],
  [data-layout="59-storm-night"],
  [data-layout="60-storm-prime"]
) [data-widget="radar"] .radar-frame--tall {
  min-height: 200px;
}

:is(
  [data-layout="28-camera-storm"],
  [data-layout="41-storm-center"],
  [data-layout="42-storm-outages-foot"],
  [data-layout="43-storm-outages-block"],
  [data-layout="44-storm-radar-first"],
  [data-layout="45-storm-shelters-mid"],
  [data-layout="46-storm-wide-core"],
  [data-layout="47-storm-tight-wings"],
  [data-layout="48-storm-red"],
  [data-layout="49-storm-amber"],
  [data-layout="50-storm-green"],
  [data-layout="51-storm-resources-stack"],
  [data-layout="52-storm-outages-flank"],
  [data-layout="53-storm-balanced"],
  [data-layout="54-storm-forecast-tall"],
  [data-layout="55-storm-monitor"],
  [data-layout="56-storm-compact"],
  [data-layout="57-storm-contacts-lite"],
  [data-layout="58-storm-dawn"],
  [data-layout="59-storm-night"],
  [data-layout="60-storm-prime"]
) [data-widget="shelters"] {
  max-height: 420px;
  overflow-y: auto;
}

/* Grid-area assignments — storm center family */
:is(
  [data-layout="28-camera-storm"],
  [data-layout="41-storm-center"],
  [data-layout="46-storm-wide-core"],
  [data-layout="48-storm-red"],
  [data-layout="49-storm-amber"],
  [data-layout="50-storm-green"],
  [data-layout="55-storm-monitor"],
  [data-layout="56-storm-compact"],
  [data-layout="58-storm-dawn"],
  [data-layout="59-storm-night"],
  [data-layout="60-storm-prime"]
) .dash-grid {
  grid-template-columns: 280px 1fr 260px;
  grid-template-areas:
    "outages outages outages"
    "conditions cameras keys"
    "charts radar keys"
    "resources shelters keys"
    "contacts contacts contacts";
}

[data-layout="46-storm-wide-core"] .dash-grid {
  grid-template-columns: 260px 1.5fr 260px;
}

[data-layout="47-storm-tight-wings"] {
  --dash-gap: 0.4rem;
}

[data-layout="47-storm-tight-wings"] .dash-grid {
  grid-template-columns: 200px 1fr 200px;
  grid-template-areas:
    "outages outages outages"
    "conditions cameras keys"
    "charts radar keys"
    "resources shelters keys"
    "contacts contacts contacts";
}

[data-layout="48-storm-red"] {
  --dash-accent: #ef4444;
}

[data-layout="49-storm-amber"] {
  --dash-accent: #f59e0b;
}

[data-layout="50-storm-green"] {
  --dash-accent: #4ade80;
}

[data-layout="55-storm-monitor"] [data-widget="cameras"] .camera-frame {
  min-height: 340px;
}

[data-layout="55-storm-monitor"] [data-widget="radar"] .radar-frame--tall {
  min-height: 260px;
}

[data-layout="55-storm-monitor"] [data-widget="outages"] .ha-outage-map {
  min-height: 260px;
}

[data-layout="56-storm-compact"] {
  --dash-gap: 0.35rem;
  font-size: 0.9375rem;
}

[data-layout="57-storm-contacts-lite"] [data-widget="contacts"] {
  opacity: 0.85;
  font-size: 0.9rem;
}

[data-layout="58-storm-dawn"] {
  --dash-accent: #eab308;
}

[data-layout="59-storm-night"] {
  --dash-accent: #4ade80;
}

[data-layout="60-storm-prime"] {
  --dash-accent: #a78bfa;
}

[data-layout="42-storm-outages-foot"] .dash-grid {
  grid-template-columns: 280px 1fr 260px;
  grid-template-areas:
    "conditions cameras keys"
    "charts radar keys"
    "resources shelters keys"
    "outages outages outages"
    "contacts contacts contacts";
}

[data-layout="42-storm-outages-foot"] [data-widget="outages"] .ha-outage-map {
  min-height: 280px;
}

[data-layout="43-storm-outages-block"] .dash-grid {
  grid-template-columns: 280px 1fr 260px;
  grid-template-areas:
    "outages outages keys"
    "outages outages keys"
    "conditions cameras keys"
    "charts radar keys"
    "resources shelters keys"
    "contacts contacts contacts";
}

[data-layout="43-storm-outages-block"] [data-widget="outages"] .ha-outage-map {
  min-height: 300px;
}

[data-layout="44-storm-radar-first"] .dash-grid {
  grid-template-columns: 280px 1fr 260px;
  grid-template-areas:
    "outages outages outages"
    "conditions radar keys"
    "charts cameras keys"
    "resources shelters keys"
    "contacts contacts contacts";
}

[data-layout="45-storm-shelters-mid"] .dash-grid {
  grid-template-columns: 280px 1fr 260px;
  grid-template-areas:
    "outages outages outages"
    "conditions cameras keys"
    "charts shelters keys"
    "resources radar keys"
    "contacts contacts contacts";
}

[data-layout="51-storm-resources-stack"] .dash-grid {
  grid-template-columns: 280px 1fr 260px;
  grid-template-areas:
    "outages outages outages"
    "conditions cameras keys"
    "charts radar keys"
    "shelters resources keys"
    "contacts contacts contacts";
}

[data-layout="52-storm-outages-flank"] .dash-grid {
  grid-template-columns: 280px 1fr 260px;
  grid-template-areas:
    "conditions cameras keys"
    "charts radar keys"
    "resources shelters keys"
    "outages outages keys"
    "contacts contacts contacts";
}

[data-layout="52-storm-outages-flank"] [data-widget="outages"] .ha-outage-map {
  min-height: 260px;
}

[data-layout="53-storm-balanced"] .dash-grid {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "outages outages outages"
    "conditions cameras keys"
    "charts radar keys"
    "resources shelters keys"
    "contacts contacts contacts";
}

[data-layout="54-storm-forecast-tall"] .dash-grid {
  grid-template-columns: 300px 1fr 260px;
  grid-template-areas:
    "outages outages outages"
    "conditions cameras keys"
    "conditions radar keys"
    "charts shelters keys"
    "resources resources keys"
    "contacts contacts contacts";
}

[data-layout="54-storm-forecast-tall"] [data-widget="conditions"] .ha-forecast-strip {
  margin-top: 0.35rem;
}

/* Per-widget grid-area — all storm center layouts */
:is(
  [data-layout="28-camera-storm"],
  [data-layout="41-storm-center"],
  [data-layout="42-storm-outages-foot"],
  [data-layout="43-storm-outages-block"],
  [data-layout="44-storm-radar-first"],
  [data-layout="45-storm-shelters-mid"],
  [data-layout="46-storm-wide-core"],
  [data-layout="47-storm-tight-wings"],
  [data-layout="48-storm-red"],
  [data-layout="49-storm-amber"],
  [data-layout="50-storm-green"],
  [data-layout="51-storm-resources-stack"],
  [data-layout="52-storm-outages-flank"],
  [data-layout="53-storm-balanced"],
  [data-layout="54-storm-forecast-tall"],
  [data-layout="55-storm-monitor"],
  [data-layout="56-storm-compact"],
  [data-layout="57-storm-contacts-lite"],
  [data-layout="58-storm-dawn"],
  [data-layout="59-storm-night"],
  [data-layout="60-storm-prime"]
) [data-widget="conditions"] { grid-area: conditions; }

:is(
  [data-layout="28-camera-storm"],
  [data-layout="41-storm-center"],
  [data-layout="42-storm-outages-foot"],
  [data-layout="43-storm-outages-block"],
  [data-layout="44-storm-radar-first"],
  [data-layout="45-storm-shelters-mid"],
  [data-layout="46-storm-wide-core"],
  [data-layout="47-storm-tight-wings"],
  [data-layout="48-storm-red"],
  [data-layout="49-storm-amber"],
  [data-layout="50-storm-green"],
  [data-layout="51-storm-resources-stack"],
  [data-layout="52-storm-outages-flank"],
  [data-layout="53-storm-balanced"],
  [data-layout="54-storm-forecast-tall"],
  [data-layout="55-storm-monitor"],
  [data-layout="56-storm-compact"],
  [data-layout="57-storm-contacts-lite"],
  [data-layout="58-storm-dawn"],
  [data-layout="59-storm-night"],
  [data-layout="60-storm-prime"]
) [data-widget="radar"] { grid-area: radar; }

:is(
  [data-layout="28-camera-storm"],
  [data-layout="41-storm-center"],
  [data-layout="42-storm-outages-foot"],
  [data-layout="43-storm-outages-block"],
  [data-layout="44-storm-radar-first"],
  [data-layout="45-storm-shelters-mid"],
  [data-layout="46-storm-wide-core"],
  [data-layout="47-storm-tight-wings"],
  [data-layout="48-storm-red"],
  [data-layout="49-storm-amber"],
  [data-layout="50-storm-green"],
  [data-layout="51-storm-resources-stack"],
  [data-layout="52-storm-outages-flank"],
  [data-layout="53-storm-balanced"],
  [data-layout="54-storm-forecast-tall"],
  [data-layout="55-storm-monitor"],
  [data-layout="56-storm-compact"],
  [data-layout="57-storm-contacts-lite"],
  [data-layout="58-storm-dawn"],
  [data-layout="59-storm-night"],
  [data-layout="60-storm-prime"]
) [data-widget="charts"] { grid-area: charts; }

:is(
  [data-layout="28-camera-storm"],
  [data-layout="41-storm-center"],
  [data-layout="42-storm-outages-foot"],
  [data-layout="43-storm-outages-block"],
  [data-layout="44-storm-radar-first"],
  [data-layout="45-storm-shelters-mid"],
  [data-layout="46-storm-wide-core"],
  [data-layout="47-storm-tight-wings"],
  [data-layout="48-storm-red"],
  [data-layout="49-storm-amber"],
  [data-layout="50-storm-green"],
  [data-layout="51-storm-resources-stack"],
  [data-layout="52-storm-outages-flank"],
  [data-layout="53-storm-balanced"],
  [data-layout="54-storm-forecast-tall"],
  [data-layout="55-storm-monitor"],
  [data-layout="56-storm-compact"],
  [data-layout="57-storm-contacts-lite"],
  [data-layout="58-storm-dawn"],
  [data-layout="59-storm-night"],
  [data-layout="60-storm-prime"]
) [data-widget="cameras"] { grid-area: cameras; }

:is(
  [data-layout="28-camera-storm"],
  [data-layout="41-storm-center"],
  [data-layout="42-storm-outages-foot"],
  [data-layout="43-storm-outages-block"],
  [data-layout="44-storm-radar-first"],
  [data-layout="45-storm-shelters-mid"],
  [data-layout="46-storm-wide-core"],
  [data-layout="47-storm-tight-wings"],
  [data-layout="48-storm-red"],
  [data-layout="49-storm-amber"],
  [data-layout="50-storm-green"],
  [data-layout="51-storm-resources-stack"],
  [data-layout="52-storm-outages-flank"],
  [data-layout="53-storm-balanced"],
  [data-layout="54-storm-forecast-tall"],
  [data-layout="55-storm-monitor"],
  [data-layout="56-storm-compact"],
  [data-layout="57-storm-contacts-lite"],
  [data-layout="58-storm-dawn"],
  [data-layout="59-storm-night"],
  [data-layout="60-storm-prime"]
) [data-widget="keys"] { grid-area: keys; }

:is(
  [data-layout="28-camera-storm"],
  [data-layout="41-storm-center"],
  [data-layout="42-storm-outages-foot"],
  [data-layout="43-storm-outages-block"],
  [data-layout="44-storm-radar-first"],
  [data-layout="45-storm-shelters-mid"],
  [data-layout="46-storm-wide-core"],
  [data-layout="47-storm-tight-wings"],
  [data-layout="48-storm-red"],
  [data-layout="49-storm-amber"],
  [data-layout="50-storm-green"],
  [data-layout="51-storm-resources-stack"],
  [data-layout="52-storm-outages-flank"],
  [data-layout="53-storm-balanced"],
  [data-layout="54-storm-forecast-tall"],
  [data-layout="55-storm-monitor"],
  [data-layout="56-storm-compact"],
  [data-layout="57-storm-contacts-lite"],
  [data-layout="58-storm-dawn"],
  [data-layout="59-storm-night"],
  [data-layout="60-storm-prime"]
) [data-widget="outages"] { grid-area: outages; }

:is(
  [data-layout="28-camera-storm"],
  [data-layout="41-storm-center"],
  [data-layout="42-storm-outages-foot"],
  [data-layout="43-storm-outages-block"],
  [data-layout="44-storm-radar-first"],
  [data-layout="45-storm-shelters-mid"],
  [data-layout="46-storm-wide-core"],
  [data-layout="47-storm-tight-wings"],
  [data-layout="48-storm-red"],
  [data-layout="49-storm-amber"],
  [data-layout="50-storm-green"],
  [data-layout="51-storm-resources-stack"],
  [data-layout="52-storm-outages-flank"],
  [data-layout="53-storm-balanced"],
  [data-layout="54-storm-forecast-tall"],
  [data-layout="55-storm-monitor"],
  [data-layout="56-storm-compact"],
  [data-layout="57-storm-contacts-lite"],
  [data-layout="58-storm-dawn"],
  [data-layout="59-storm-night"],
  [data-layout="60-storm-prime"]
) [data-widget="resources"] { grid-area: resources; }

:is(
  [data-layout="28-camera-storm"],
  [data-layout="41-storm-center"],
  [data-layout="42-storm-outages-foot"],
  [data-layout="43-storm-outages-block"],
  [data-layout="44-storm-radar-first"],
  [data-layout="45-storm-shelters-mid"],
  [data-layout="46-storm-wide-core"],
  [data-layout="47-storm-tight-wings"],
  [data-layout="48-storm-red"],
  [data-layout="49-storm-amber"],
  [data-layout="50-storm-green"],
  [data-layout="51-storm-resources-stack"],
  [data-layout="52-storm-outages-flank"],
  [data-layout="53-storm-balanced"],
  [data-layout="54-storm-forecast-tall"],
  [data-layout="55-storm-monitor"],
  [data-layout="56-storm-compact"],
  [data-layout="57-storm-contacts-lite"],
  [data-layout="58-storm-dawn"],
  [data-layout="59-storm-night"],
  [data-layout="60-storm-prime"]
) [data-widget="shelters"] { grid-area: shelters; }

:is(
  [data-layout="28-camera-storm"],
  [data-layout="41-storm-center"],
  [data-layout="42-storm-outages-foot"],
  [data-layout="43-storm-outages-block"],
  [data-layout="44-storm-radar-first"],
  [data-layout="45-storm-shelters-mid"],
  [data-layout="46-storm-wide-core"],
  [data-layout="47-storm-tight-wings"],
  [data-layout="48-storm-red"],
  [data-layout="49-storm-amber"],
  [data-layout="50-storm-green"],
  [data-layout="51-storm-resources-stack"],
  [data-layout="52-storm-outages-flank"],
  [data-layout="53-storm-balanced"],
  [data-layout="54-storm-forecast-tall"],
  [data-layout="55-storm-monitor"],
  [data-layout="56-storm-compact"],
  [data-layout="57-storm-contacts-lite"],
  [data-layout="58-storm-dawn"],
  [data-layout="59-storm-night"],
  [data-layout="60-storm-prime"]
) [data-widget="contacts"] { grid-area: contacts; }

/* ── Layout 61: Tribune Desktop ── */
[data-layout="61-tribune-desktop"] {
  --dash-accent: #3d8bfd;
}

/* Column wrappers — transparent on most layouts; flex stacks on Tribune desktop */
.dash-left-col,
.dash-center-col {
  display: contents;
}

[data-layout="61-tribune-desktop"] .dash-grid {
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr) minmax(0, 300px);
  grid-template-areas: "left center right";
  align-items: start;
}

[data-layout="61-tribune-desktop"] .dash-left-col,
[data-layout="61-tribune-desktop"] .dash-center-col {
  display: flex;
  flex-direction: column;
  gap: var(--dash-gap);
  min-width: 0;
  width: 100%;
}

[data-layout="61-tribune-desktop"] .dash-left-col > *,
[data-layout="61-tribune-desktop"] .dash-center-col > * {
  min-width: 0;
  max-width: 100%;
}

[data-layout="61-tribune-desktop"] [data-widget="left-col"] { grid-area: left; }
[data-layout="61-tribune-desktop"] [data-widget="center-col"] { grid-area: center; }

[data-layout="61-tribune-desktop"] [data-widget="charts"] {
  display: none;
}

[data-layout="61-tribune-desktop"] [data-widget="right-rail"] {
  grid-area: right;
  display: flex;
  flex-direction: column;
  gap: var(--dash-gap);
  align-self: start;
  min-width: 0;
  width: 100%;
}

[data-layout="61-tribune-desktop"] [data-widget="right-rail"] > * {
  min-width: 0;
  max-width: 100%;
}

[data-layout="61-tribune-desktop"] [data-widget="right-rail"] [data-widget="keys"] {
  overflow: visible;
  max-height: none;
}

[data-layout="61-tribune-desktop"] [data-widget="right-rail"] [data-widget="ad-right"] {
  flex-shrink: 0;
}

html:not([data-layout="61-tribune-desktop"]) .dash-right-rail {
  display: contents;
}

html:not([data-layout="61-tribune-desktop"]) [data-widget="ad-right"],
html:not([data-layout="61-tribune-desktop"]) [data-widget="ad-left"],
html:not([data-layout="61-tribune-desktop"]) [data-widget="ad-leaderboard"] {
  display: none;
}

[data-layout="61-tribune-desktop"] .ha-keys-contacts-details[open] .ha-contact-list {
  max-height: min(55vh, 520px);
  overflow-y: auto;
  margin-top: 0.5rem;
  padding-right: 0.25rem;
}

[data-layout="61-tribune-desktop"] .ha-contact-group-cards {
  grid-template-columns: 1fr;
}

[data-layout="61-tribune-desktop"] [data-widget="outages"] .ha-outage-map {
  min-height: clamp(220px, 30vh, 480px);
  max-height: min(60vh, 560px);
}

/* Narrow desktop: slim side rails so the center column keeps room for embeds */
@media (max-width: 1200px) and (min-width: 901px) {
  [data-layout="61-tribune-desktop"] .dash-grid {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr) minmax(0, 260px);
  }
}

/* ── Responsive: stack all unified layouts on narrow screens ── */
@media (max-width: 900px) {
  [data-layout]:not([data-layout="01-meteobridge"]):not([data-layout="61-tribune-desktop"]) .dash-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "conditions"
      "radar"
      "charts"
      "cameras"
      "keys"
      "outages"
      "resources"
      "shelters"
      "ad-left"
      "ad-right"
      "contacts" !important;
  }

  [data-layout] [data-widget] {
    grid-area: auto !important;
    position: static !important;
    max-height: none !important;
  }

  [data-layout="12-tv-mode"] [data-widget="shelters"],
  [data-layout="12-tv-mode"] [data-widget="contacts"],
  [data-layout="12-tv-mode"] [data-widget="outages"],
  [data-layout="12-tv-mode"] [data-widget="resources"] {
    display: block;
  }

  :is(
    [data-layout="28-camera-storm"],
    [data-layout="41-storm-center"],
    [data-layout="42-storm-outages-foot"],
    [data-layout="43-storm-outages-block"],
    [data-layout="44-storm-radar-first"],
    [data-layout="45-storm-shelters-mid"],
    [data-layout="46-storm-wide-core"],
    [data-layout="47-storm-tight-wings"],
    [data-layout="48-storm-red"],
    [data-layout="49-storm-amber"],
    [data-layout="50-storm-green"],
    [data-layout="51-storm-resources-stack"],
    [data-layout="52-storm-outages-flank"],
    [data-layout="53-storm-balanced"],
    [data-layout="54-storm-forecast-tall"],
    [data-layout="55-storm-monitor"],
    [data-layout="56-storm-compact"],
    [data-layout="57-storm-contacts-lite"],
    [data-layout="58-storm-dawn"],
    [data-layout="59-storm-night"],
    [data-layout="60-storm-prime"]
  ) .dash-grid {
    grid-template-areas:
      "outages"
      "conditions"
      "cameras"
      "radar"
      "keys"
      "shelters"
      "charts"
      "resources"
      "contacts" !important;
  }
}

/* ── Layout 61: mobile polish ── */
@media (max-width: 900px) {
  /* Show the collapsible forecast/details toggle on phones. */
  [data-layout="61-tribune-desktop"] .ha-conditions-more__toggle {
    display: flex;
  }

  /* Single column — flatten column wrappers so widget order works reliably. */
  [data-layout="61-tribune-desktop"] .dash-grid {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: var(--dash-gap);
    width: 100%;
  }

  [data-layout="61-tribune-desktop"] .dash-left-col,
  [data-layout="61-tribune-desktop"] .dash-center-col,
  [data-layout="61-tribune-desktop"] .dash-right-rail {
    display: contents;
  }

  [data-layout="61-tribune-desktop"] [data-widget="left-col"],
  [data-layout="61-tribune-desktop"] [data-widget="center-col"] {
    grid-area: unset;
  }

  [data-layout="61-tribune-desktop"] [data-widget="charts"] {
    display: none !important;
  }

  [data-layout="61-tribune-desktop"] .dash-grid [data-widget] {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  [data-layout="61-tribune-desktop"] [data-widget="cameras"] { order: 1; }
  [data-layout="61-tribune-desktop"] [data-widget="ad-right"] { order: 2; }
  [data-layout="61-tribune-desktop"] [data-widget="radar"] { order: 3; }
  [data-layout="61-tribune-desktop"] [data-widget="conditions"] { order: 4; }
  [data-layout="61-tribune-desktop"] [data-widget="keys"] { order: 5; }
  [data-layout="61-tribune-desktop"] [data-widget="outages"] { order: 6; }
  [data-layout="61-tribune-desktop"] [data-widget="shelters"] { order: 7; }
  [data-layout="61-tribune-desktop"] [data-widget="resources"] { order: 8; }

  [data-layout="61-tribune-desktop"] .ha-jump-nav__list li:has([href="#section-live"]) { order: 1; }
  [data-layout="61-tribune-desktop"] .ha-jump-nav__list li:has([href="#section-radar"]) { order: 2; }
  [data-layout="61-tribune-desktop"] .ha-jump-nav__list li:has([href="#section-conditions"]) { order: 3; }
  [data-layout="61-tribune-desktop"] .ha-jump-nav__list li:has([href="#section-key-numbers"]) { order: 4; }
  [data-layout="61-tribune-desktop"] .ha-jump-nav__list li:has([href="#section-outages"]) { order: 5; }
  [data-layout="61-tribune-desktop"] .ha-jump-nav__list li:has([href="#section-shelters"]) { order: 6; }
  [data-layout="61-tribune-desktop"] .ha-jump-nav__list li:has([href="#section-weather"]) { order: 7; }

  [data-layout="61-tribune-desktop"] [data-widget="ad-left"] {
    display: none !important;
  }
}

/* Safari ≤15: display:contents is unreliable — stack the three columns instead. */
@supports not (display: contents) {
  @media (max-width: 900px) {
    [data-layout="61-tribune-desktop"] .dash-left-col,
    [data-layout="61-tribune-desktop"] .dash-center-col,
    [data-layout="61-tribune-desktop"] .dash-right-rail {
      display: flex;
      flex-direction: column;
      gap: var(--dash-gap);
      width: 100%;
      min-width: 0;
    }

    [data-layout="61-tribune-desktop"] .dash-left-col { order: 1; }
    [data-layout="61-tribune-desktop"] .dash-center-col { order: 2; }
    [data-layout="61-tribune-desktop"] .dash-right-rail { order: 3; }

    [data-layout="61-tribune-desktop"] .dash-grid [data-widget] {
      order: unset;
    }
  }
}

/* Keep camera shells at 16:9 — layout min-heights caused black letterboxing above feeds. */
[data-widget="cameras"] .camera-frame {
  min-height: 0;
}

/* Keep radar shells sized by aspect ratio — min-height/flex stretch caused black gaps. */
[data-widget="radar"] .radar-frame,
[data-widget="radar"] .radar-frame--tall {
  min-height: 0;
  height: auto;
}