@font-face {
  font-family: "Forma DJR Text";
  src: url("../dashboard/assets/fonts/FormaDJRText-Regular.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: "Forma DJR Text";
  src: url("../dashboard/assets/fonts/FormaDJRText-Bold.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
}

@font-face {
  font-family: "Forma DJR Display";
  src: url("../dashboard/assets/fonts/FormaDJRDisplay-Medium.woff2") format("woff2");
  font-display: swap;
  font-weight: 600;
}

@font-face {
  font-family: "Forma DJR Micro";
  src: url("../dashboard/assets/fonts/FormaDJRMicro-Medium.woff2") format("woff2");
  font-display: swap;
  font-weight: 600;
}

:root {
  color-scheme: light;
  --paper: #fffaf6;
  --surface: #fffdf9;
  --pink: #f5e1e1;
  --pink-soft: #faeeee;
  --burgundy: #4c1a09;
  --burgundy-deep: #351006;
  --orange: #ff520d;
  --blue: #2951fe;
  --green: #1e800f;
  --gold: #f2b101;
  --ink: #18181a;
  --muted: #795343;
  --line: #e4beba;
  --line-strong: #a96052;
  --city-accent: var(--blue);
  --font-body: "Forma DJR Text", "Segoe UI", system-ui, sans-serif;
  --font-display: "Forma DJR Display", "Forma DJR Text", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Forma DJR Micro", "Forma DJR Text", "Segoe UI", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}

body[data-city="SAT"] {
  --city-accent: var(--orange);
}

button,
select {
  font: inherit;
}

button,
select,
a {
  border-radius: 0;
}

button:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 3px solid rgb(255 103 25 / 30%);
  outline-offset: 2px;
}

.skip-link {
  background: var(--burgundy);
  color: white;
  left: 12px;
  padding: 10px 14px;
  position: fixed;
  top: -60px;
  z-index: 1000;
}

.skip-link:focus {
  top: 12px;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(520px, 0.92fr) minmax(600px, 1.08fr);
  min-height: 100vh;
}

.map-stage {
  background: var(--pink);
  border-right: 1px solid var(--line-strong);
  display: grid;
  grid-template-rows: auto auto minmax(400px, 1fr) auto;
  height: 100vh;
  min-width: 0;
  overflow: hidden;
  position: sticky;
  top: 0;
}

.topbar {
  align-items: center;
  background: rgb(255 250 246 / 97%);
  border-bottom: 1px solid var(--line-strong);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  min-height: 82px;
  padding: 14px 22px;
}

.brand-heading {
  align-items: center;
  display: flex;
  gap: 16px;
  min-width: 0;
}

.brand-mark {
  display: inline-flex;
  flex: 0 0 auto;
}

.brand-mark img {
  display: block;
  height: 38px;
  width: auto;
}

.brand-heading > div {
  border-left: 1px solid var(--line);
  min-width: 0;
  padding-left: 15px;
}

.brand-heading p,
.eyebrow,
.selection-bar span,
.selection-bar legend,
.map-controls span,
.map-callout > span,
.detail-label,
.inspector-footer,
.chart-label,
.status-note {
  font-family: var(--font-ui);
  font-size: 0.72rem;
}

.brand-heading p {
  color: var(--orange);
  margin: 0 0 2px;
}

.brand-heading h1 {
  color: var(--burgundy);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  line-height: 1;
  margin: 0;
}

.map-controls {
  align-items: center;
  background: rgb(255 250 246 / 94%);
  border-bottom: 1px solid var(--line-strong);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 14px;
}

.map-controls > div {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.map-controls span {
  color: var(--muted);
  flex: 0 0 auto;
}

.map-layer-controls {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.map-layer-controls button,
.map-controls > button,
.segmented-control button,
.analysis-tabs button,
.chart-toggle button,
.action-button {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--burgundy);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  min-height: 36px;
  padding: 7px 10px;
  white-space: nowrap;
}

.map-layer-controls button + button,
.segmented-control button + button,
.analysis-tabs button + button,
.chart-toggle button + button {
  border-left: 0;
}

.map-layer-controls button[aria-pressed="true"],
.segmented-control button[aria-pressed="true"],
.analysis-tabs button[aria-selected="true"],
.chart-toggle button[aria-pressed="true"] {
  background: var(--burgundy);
  color: white;
}

.map-controls > button {
  align-items: center;
  display: flex;
  font-family: sans-serif;
  font-size: 1.2rem;
  height: 36px;
  justify-content: center;
  padding: 0;
  width: 36px;
}

.city-map {
  background: #eed2d0;
  min-height: 0;
  width: 100%;
  z-index: 1;
}

.leaflet-container {
  font-family: var(--font-body);
}

.leaflet-control-attribution {
  font-size: 9px;
}

.leaflet-control-zoom a {
  border-radius: 0 !important;
  color: var(--burgundy);
}

.leaflet-tooltip.city-tooltip {
  background: var(--surface);
  border: 1px solid var(--burgundy);
  border-radius: 0;
  box-shadow: 5px 5px 0 rgb(83 21 2 / 14%);
  color: var(--burgundy-deep);
  padding: 10px 12px;
}

.city-tooltip strong,
.city-tooltip span {
  display: block;
}

.city-tooltip strong {
  color: var(--burgundy);
  margin-bottom: 4px;
}

.city-tooltip span {
  font-size: 0.76rem;
  line-height: 1.4;
}

.map-caption {
  align-items: center;
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  min-height: 64px;
  padding: 10px 16px;
}

.map-caption > div:first-child {
  min-width: 0;
}

.map-caption strong {
  color: var(--burgundy);
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.map-caption span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  line-height: 1.25;
  margin-top: 2px;
}

.map-legend {
  display: flex;
  flex: 0 0 auto;
}

.map-legend i {
  display: block;
  height: 9px;
  width: 25px;
}

.map-callout {
  background: rgb(255 253 249 / 96%);
  border: 1px solid var(--burgundy);
  bottom: 82px;
  box-shadow: 6px 6px 0 rgb(83 21 2 / 12%);
  left: 16px;
  max-width: 260px;
  padding: 12px 14px;
  pointer-events: none;
  position: absolute;
  z-index: 500;
}

.map-callout > span {
  color: var(--city-accent);
}

.map-callout strong {
  color: var(--burgundy);
  display: block;
  font-size: 0.92rem;
  margin: 4px 0;
}

.map-callout p {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
  margin: 0;
}

.inspector {
  background:
    linear-gradient(90deg, rgb(83 21 2 / 4%) 1px, transparent 1px) 0 0 / 72px 72px,
    var(--paper);
  min-width: 0;
  padding-bottom: 46px;
}

.selection-bar {
  align-items: end;
  background: rgb(255 250 246 / 97%);
  border-bottom: 1px solid var(--line-strong);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(220px, 0.8fr) minmax(320px, 1.2fr);
  padding: 14px clamp(18px, 3vw, 42px);
  position: sticky;
  top: 0;
  z-index: 40;
}

.selection-bar label,
.selection-bar fieldset {
  border: 0;
  display: grid;
  gap: 6px;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.selection-bar span,
.selection-bar legend {
  color: var(--muted);
}

.selection-bar select {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--burgundy);
  cursor: pointer;
  min-height: 42px;
  padding: 8px 36px 8px 11px;
  width: 100%;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.segmented-control button {
  min-height: 42px;
}

.city-profile,
.headline-metrics,
.analysis-tabs,
.analysis-panel,
.inspector-footer {
  margin-left: clamp(18px, 3vw, 42px);
  margin-right: clamp(18px, 3vw, 42px);
}

.city-profile {
  border-bottom: 1px solid var(--line-strong);
  padding: clamp(28px, 4vw, 54px) 0 28px;
}

.eyebrow {
  color: var(--orange);
  font-weight: 600;
  margin: 0 0 8px;
}

.profile-title-row {
  align-items: end;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.profile-title-row h2 {
  color: var(--burgundy);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 5.3rem);
  line-height: 0.85;
  margin: 0;
}

.profile-title-row p {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 9px 0 0;
}

#release-label {
  background: var(--pink);
  color: var(--burgundy);
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-size: 0.66rem;
  padding: 7px 9px;
}

.city-thesis {
  color: var(--burgundy-deep);
  font-size: clamp(1rem, 1.4vw, 1.24rem);
  line-height: 1.42;
  margin: 24px 0 12px;
  max-width: 840px;
}

.city-focus {
  border-left: 4px solid var(--city-accent);
  color: var(--muted);
  font-size: 0.87rem;
  line-height: 1.4;
  margin: 0;
  padding-left: 12px;
}

.city-readout {
  border-block: 1px solid var(--line);
  display: grid;
  gap: 5px 20px;
  grid-template-columns: minmax(150px, 0.38fr) minmax(0, 1fr);
  margin: 20px 0 14px;
  padding: 14px 0;
}

.city-readout > span {
  color: var(--city-accent);
  font-family: var(--font-ui);
  font-size: 0.64rem;
  font-weight: 700;
  grid-column: 1;
  text-transform: uppercase;
}

.city-readout > strong {
  color: var(--burgundy);
  font-family: var(--font-display);
  font-size: 1.2rem;
  grid-column: 1;
}

.city-readout > p {
  align-self: center;
  color: var(--muted);
  font-size: 0.78rem;
  grid-column: 2;
  grid-row: 1 / span 2;
  line-height: 1.45;
  margin: 0;
}

.headline-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
}

.metric-card {
  background: rgb(255 253 249 / 84%);
  border: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) 28px;
  min-height: 154px;
  padding: 16px;
  position: relative;
}

.metric-card:nth-child(3n + 2),
.metric-card:nth-child(3n + 3) {
  border-left: 0;
}

.metric-value {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.metric-value > span {
  color: var(--burgundy);
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.15;
}

.metric-value > strong {
  color: var(--burgundy);
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  line-height: 1;
}

.metric-card .metric-context {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  grid-column: 1 / -1;
  line-height: 1.2;
}

.metric-action {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--burgundy);
  cursor: pointer;
  display: flex;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  height: auto;
  justify-content: center;
  padding: 2px 0;
  width: auto;
}

.metric-action {
  grid-column: 2;
  grid-row: 3;
  margin: 0;
}

.metric-action:hover,
.metric-action:focus-visible {
  background: transparent;
  color: var(--brand-blue);
}

.metric-source {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.62rem;
  grid-column: 1;
  grid-row: 3;
  text-decoration: none;
}

.metric-source:hover,
.metric-source:focus-visible {
  color: var(--brand-blue);
  text-decoration: underline;
}

.analysis-tabs {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(5, minmax(118px, 1fr));
  margin-top: 34px;
  overflow-x: auto;
  scroll-margin-top: 72px;
}

.analysis-tabs button {
  align-content: start;
  background: color-mix(in srgb, var(--pink) 45%, var(--surface));
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  gap: 4px;
  min-height: 86px;
  min-width: 0;
  padding: 11px 10px;
  text-align: left;
  white-space: normal;
}

.analysis-tabs button > span,
.analysis-tabs button > small {
  font-family: var(--font-ui);
  font-size: 0.58rem;
}

.analysis-tabs button > strong {
  color: var(--burgundy);
  font-size: 0.76rem;
  line-height: 1.15;
}

.analysis-tabs button > small {
  line-height: 1.25;
}

.analysis-tabs button[aria-selected="true"] {
  background: var(--surface);
  border-bottom-color: var(--city-accent);
  color: var(--ink);
}

.analysis-tabs button[aria-selected="true"] > span {
  color: var(--city-accent);
}

.analysis-panel {
  border-bottom: 1px solid var(--line-strong);
  min-height: 470px;
  padding: 28px 0 38px;
}

.section-heading {
  align-items: end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 22px;
}

.section-heading h3 {
  color: var(--burgundy);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 0.95;
  margin: 0;
}

.section-heading p {
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
  max-width: 420px;
}

.two-column,
.action-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel-block {
  border-top: 1px solid var(--line);
  min-width: 0;
  padding: 20px 18px 20px 0;
}

.panel-block:nth-child(even) {
  border-left: 1px solid var(--line);
  padding-left: 18px;
  padding-right: 0;
}

.panel-block h4,
.signal-summary h4,
.watchlist h4,
.action-card h4 {
  color: var(--burgundy);
  font-family: var(--font-display);
  font-size: 1.08rem;
  margin: 0 0 9px;
}

.panel-block p,
.signal-summary p,
.action-card p {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 0;
}

.decision-strip {
  background: var(--burgundy);
  color: white;
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr);
  margin-top: 20px;
  padding: 18px 20px;
}

.decision-strip > span {
  color: #ffd34d;
  font-family: var(--font-display);
  font-size: 2rem;
}

.decision-strip strong {
  display: block;
  font-size: 0.78rem;
  margin-bottom: 3px;
}

.decision-strip p {
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0;
}

.evidence-metric-grid span,
.fiscal-hero span,
.local-program > span,
.panel-title-row span {
  color: var(--muted);
  display: block;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  margin-bottom: 5px;
}

.evidence-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}

.evidence-metric-grid article {
  border: 1px solid var(--line);
  min-height: 138px;
  padding: 13px;
}

.evidence-metric-grid article + article {
  border-left: 0;
}

.evidence-metric-grid strong {
  color: var(--burgundy);
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  margin: 10px 0 5px;
}

.evidence-metric-grid p,
.method-note,
.workforce-footer p,
.warn-panel > p {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
  margin: 0;
}

.inline-source {
  color: var(--burgundy);
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  margin-top: 8px;
  text-underline-offset: 2px;
}

.method-note {
  background: var(--pink-soft);
  border-left: 3px solid var(--orange);
  margin-bottom: 18px;
  padding: 10px 12px;
}

.compact-summary {
  margin-top: 20px;
}

.sector-panel,
.warn-panel {
  border-top: 1px solid var(--line-strong);
  margin-top: 22px;
  padding-top: 18px;
}

.sector-panel h4,
.warn-panel h4,
.local-program h4 {
  color: var(--burgundy);
  font-family: var(--font-display);
  margin: 0 0 12px;
}

.sector-row {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(180px, 1.2fr) minmax(120px, 1fr) 54px;
  padding: 9px 0;
}

.sector-row span {
  color: var(--burgundy);
  font-size: 0.78rem;
}

.sector-row i {
  background: var(--city-accent);
  display: block;
  height: 8px;
}

.sector-row > strong {
  color: var(--burgundy);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  text-align: right;
}

.flag-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 24px;
}

.flag-card {
  border: 1px solid var(--line);
  min-height: 184px;
  padding: 14px;
}

.flag-card:nth-child(even) {
  border-left: 0;
}

.flag-card:nth-child(n + 3) {
  border-top: 0;
}

.flag-card.is-triggered {
  background: var(--pink-soft);
  box-shadow: inset 4px 0 0 var(--orange);
}

.flag-card > div {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.flag-card > div span,
.flag-card > div strong,
.flag-card details,
.flag-card p {
  color: var(--muted);
  font-size: 0.72rem;
}

.flag-card > div strong {
  color: var(--burgundy);
  font-family: var(--font-ui);
}

.flag-card h4 {
  color: var(--burgundy);
  font-family: var(--font-display);
  margin: 12px 0 7px;
}

.flag-card p {
  line-height: 1.4;
  margin: 0;
}

.flag-card details {
  margin-top: 8px;
}

.flag-card summary {
  color: var(--burgundy);
  cursor: pointer;
}

.panel-title-row {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.warn-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.warn-list li {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 10px 0;
}

.warn-list li > div strong,
.warn-list li > div span {
  display: block;
}

.warn-list li > div strong,
.warn-list li > strong {
  color: var(--burgundy);
  font-size: 0.8rem;
}

.warn-list li > div span {
  color: var(--muted);
  font-size: 0.7rem;
  margin-top: 2px;
}

.city-system-disclosures {
  border-top: 1px solid var(--line-strong);
}

.city-system-disclosures > details {
  border-bottom: 1px solid var(--line-strong);
}

.city-system-disclosures > details > summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 5px 18px;
  grid-template-columns: minmax(150px, 0.55fr) auto minmax(180px, 1fr) auto;
  list-style: none;
  min-height: 86px;
  padding: 14px 4px;
}

.city-system-disclosures > details > summary::-webkit-details-marker {
  display: none;
}

.city-system-disclosures > details > summary::after {
  border: 1px solid var(--line-strong);
  color: var(--burgundy);
  content: "+";
  font-family: var(--font-ui);
  grid-column: 4;
  grid-row: 1;
  padding: 4px 8px;
}

.city-system-disclosures > details[open] > summary::after {
  content: "−";
}

.city-system-disclosures > details > summary > span {
  color: var(--burgundy);
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.city-system-disclosures > details > summary > strong {
  color: var(--city-accent);
  font-family: var(--font-display);
  font-size: 1.4rem;
}

.city-system-disclosures > details > summary > small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
}

.city-system-disclosures > details > div {
  border-top: 1px solid var(--line);
  padding: 20px 0 28px;
}

.fiscal-hero {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
}

.fiscal-hero > div {
  padding: 18px 18px 18px 0;
}

.fiscal-hero > div + div {
  border-left: 1px solid var(--line);
  padding-left: 18px;
}

.fiscal-hero strong {
  color: var(--burgundy);
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
}

.fiscal-hero p {
  color: var(--muted);
  line-height: 1.4;
  margin: 7px 0 0;
}

.fiscal-stack {
  display: flex;
  height: 30px;
  margin: 20px 0 10px;
  overflow: hidden;
}

.fiscal-stack i {
  display: block;
  min-width: 2px;
}

.fiscal-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 20px;
}

.fiscal-list article {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: 9px minmax(120px, 1fr) auto auto;
  padding: 12px 8px 12px 0;
}

.fiscal-list article:nth-child(even) {
  padding-left: 14px;
}

.fiscal-list article > i {
  height: 9px;
  width: 9px;
}

.fiscal-list article div strong,
.fiscal-list article div span {
  display: block;
}

.fiscal-list article div strong,
.fiscal-list article > strong {
  color: var(--burgundy);
  font-size: 0.78rem;
}

.fiscal-list article div span {
  color: var(--muted);
  font-size: 0.7rem;
}

.workforce-table {
  border: 1px solid var(--line-strong);
}

.workforce-row {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(120px, 1.3fr) repeat(5, minmax(68px, 0.8fr));
  min-height: 54px;
  padding: 9px 12px;
}

.workforce-row:first-child {
  border-top: 0;
}

.workforce-row strong {
  color: var(--burgundy);
}

.workforce-row span {
  color: var(--muted);
  font-size: 0.76rem;
}

.workforce-head {
  background: var(--burgundy);
}

.workforce-head span {
  color: white;
  font-family: var(--font-ui);
  font-size: 0.66rem;
}

.workforce-footer {
  align-items: flex-start;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-top: 12px;
}

.local-program {
  background: var(--pink-soft);
  border-left: 4px solid var(--city-accent);
  margin-top: 22px;
  padding: 16px;
}

.local-program > div {
  display: grid;
  gap: 4px 16px;
  grid-template-columns: repeat(3, auto 1fr);
}

.local-program > div strong {
  color: var(--burgundy);
  font-family: var(--font-display);
  font-size: 1.45rem;
}

.local-program > div span {
  align-self: end;
  color: var(--muted);
  font-size: 0.72rem;
  padding-bottom: 3px;
}

.occupation-list,
.comparison-list,
.watchlist ol,
.action-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.occupation-row {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(170px, 1.2fr) minmax(160px, 1fr) 66px;
  padding: 11px 0;
}

.occupation-row:first-child {
  border-top: 0;
}

.occupation-row > div:first-child strong,
.comparison-row strong,
.watchlist strong {
  color: var(--burgundy);
  display: block;
  font-size: 0.83rem;
}

.occupation-row > div:first-child span,
.comparison-row span,
.watchlist span {
  color: var(--muted);
  display: block;
  font-size: 0.7rem;
  margin-top: 2px;
}

.bar-track {
  align-self: center;
  background: var(--pink);
  height: 11px;
  overflow: hidden;
  position: relative;
}

.bar-fill {
  background: var(--city-accent);
  height: 100%;
}

.occupation-row > strong {
  color: var(--burgundy);
  font-family: var(--font-display);
  font-size: 1rem;
  text-align: right;
}

.exposure-summary {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 22px;
}

.exposure-summary > div {
  padding: 14px 0;
}

.exposure-summary > div + div {
  border-left: 1px solid var(--line);
  padding-left: 18px;
}

.exposure-summary span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
}

.exposure-summary strong {
  color: var(--burgundy);
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  margin-top: 5px;
}

.exposure-summary-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gradient-panel {
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
  padding-bottom: 18px;
}

.gradient-panel h4,
.exposure-map-panel h4 {
  color: var(--burgundy);
  font-family: var(--font-display);
  margin: 0;
}

.gradient-stack {
  display: flex;
  height: 25px;
  margin-top: 14px;
  overflow: hidden;
}

.gradient-stack i {
  display: block;
  min-width: 2px;
}

.gradient-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 9px;
}

.gradient-legend span {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 0.67rem;
  gap: 5px;
}

.gradient-legend span > i {
  height: 8px;
  width: 8px;
}

.gradient-legend strong {
  color: var(--burgundy);
}

.exposure-lens-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
}

.exposure-lens-grid .occupation-row {
  grid-template-columns: minmax(0, 1fr) 58px;
}

.exposure-lens-grid .occupation-row .bar-track {
  display: none;
}

.exposure-lens-grid .occupation-row > div:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.exposure-map-panel {
  min-width: 0;
}

.exposure-map-panel > p {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.4;
  margin: 5px 0 0;
}

.exposure-scatter {
  background: rgb(255 253 249 / 70%);
  height: auto;
  margin-top: 8px;
  overflow: visible;
  width: 100%;
}

.scatter-grid line {
  stroke: var(--line);
  stroke-width: 1;
}

.scatter-grid text,
.axis-label,
.bubble-label,
.quadrant-label {
  fill: var(--muted);
  font-family: var(--font-ui);
  font-size: 10px;
}

.scatter-guide {
  stroke: var(--burgundy);
  stroke-dasharray: 4 5;
  stroke-opacity: 0.55;
}

.quadrant-label {
  fill: var(--burgundy);
  font-size: 9px;
  font-weight: 700;
}

.bubble-label {
  fill: var(--burgundy);
  font-size: 8.5px;
}

.exposure-scatter circle {
  fill-opacity: 0.76;
  stroke: var(--surface);
  stroke-width: 1.5;
}

.chart-toolbar {
  align-items: center;
  display: flex;
  gap: 15px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.chart-toggle {
  display: flex;
}

.signal-chart {
  background: rgb(255 253 249 / 70%);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  height: 250px;
  overflow: visible;
  width: 100%;
}

.signal-chart .grid-line {
  stroke: var(--line);
  stroke-width: 1;
}

.signal-chart .signal-line {
  fill: none;
  stroke: var(--city-accent);
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 3;
}

.signal-chart .signal-area {
  fill: color-mix(in srgb, var(--city-accent) 13%, transparent);
}

.signal-chart .latest-dot {
  fill: var(--orange);
  stroke: var(--surface);
  stroke-width: 3;
}

.signal-chart text {
  fill: var(--muted);
  font-family: var(--font-ui);
  font-size: 10px;
}

.signal-summary {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

.signal-summary > div {
  border-left: 1px solid var(--line);
  padding: 0 15px;
}

.signal-summary > div:first-child {
  border-left: 0;
  padding-left: 0;
}

.signal-summary strong {
  color: var(--burgundy);
  display: block;
  font-family: var(--font-display);
  font-size: 1.65rem;
  margin-bottom: 3px;
}

.comparison-row {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(150px, 1fr) minmax(210px, 1.4fr);
  padding: 13px 0;
}

.comparison-bars {
  display: grid;
  gap: 6px;
}

.comparison-bars div {
  align-items: center;
  display: grid;
  gap: 7px;
  grid-template-columns: 38px minmax(0, 1fr) 52px;
}

.comparison-bars span,
.comparison-bars strong {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  margin: 0;
}

.comparison-bars i {
  background: var(--city-accent);
  display: block;
  height: 8px;
}

.comparison-bars div:last-child i {
  background: var(--burgundy);
}

.watchlist {
  border-left: 4px solid var(--city-accent);
  padding-left: 16px;
}

.watchlist li {
  border-top: 1px solid var(--line);
  padding: 10px 0;
}

.watchlist li:first-child {
  border-top: 0;
}

.action-card {
  border-top: 1px solid var(--line);
  padding: 18px 18px 18px 0;
}

.action-card:nth-child(even) {
  border-left: 1px solid var(--line);
  padding-left: 18px;
  padding-right: 0;
}

.action-card .status-note {
  color: var(--city-accent);
  display: block;
  margin-bottom: 6px;
}

.action-card ul {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 12px 0 0;
  padding-left: 18px;
}

.action-card li + li {
  margin-top: 6px;
}

.source-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.source-links a {
  border: 1px solid var(--line-strong);
  color: var(--burgundy);
  padding: 6px 8px;
  text-decoration: none;
}

.source-links a:hover,
.source-links a:focus-visible {
  background: var(--burgundy);
  color: white;
}

.inspector-footer {
  color: var(--muted);
  padding: 22px 0;
}

.inspector-footer p {
  line-height: 1.4;
  margin: 0 0 12px;
}

.empty-state {
  border-left: 4px solid var(--orange);
  color: var(--muted);
  padding: 12px 14px;
}

/* Unified city workspace */
.app-shell {
  grid-template-columns: minmax(360px, 0.7fr) minmax(680px, 1.3fr);
}

.map-stage {
  grid-template-rows: auto auto minmax(380px, 1fr) auto;
}

.topbar {
  min-height: 62px;
  padding: 10px 18px;
}

.brand-mark img {
  height: 31px;
}

.brand-heading {
  gap: 12px;
}

.brand-heading > div {
  padding-left: 12px;
}

.brand-heading h1 {
  font-size: 1.05rem;
}

.map-controls {
  padding: 8px 10px;
}

.map-caption {
  min-height: 54px;
  padding: 8px 12px;
}

.selection-bar {
  gap: 12px;
  grid-template-columns: minmax(170px, 0.7fr) minmax(230px, 0.9fr) minmax(360px, 1.4fr);
  padding: 10px clamp(18px, 3vw, 40px);
}

.selection-bar select,
.segmented-control button {
  min-height: 36px;
}

.analysis-tabs {
  align-self: end;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  min-width: 0;
  overflow: visible;
}

.analysis-tabs button {
  align-content: center;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  min-height: 36px;
  padding: 7px 5px;
  text-align: center;
}

.analysis-tabs button + button {
  border-left: 0;
}

.analysis-tabs button > strong {
  font-family: var(--font-ui);
  font-size: 0.68rem;
}

.analysis-tabs button[aria-selected="true"] {
  background: transparent;
  border-bottom-color: var(--city-accent);
  color: var(--city-accent);
}

.city-profile,
.headline-metrics,
.analysis-panel,
.inspector-footer {
  margin-left: clamp(18px, 3vw, 40px);
  margin-right: clamp(18px, 3vw, 40px);
}

.city-profile {
  border-bottom: 0;
  padding: clamp(24px, 3vw, 38px) 0 18px;
}

.profile-title-row {
  align-items: center;
}

.profile-title-row h2 {
  font-size: clamp(2.6rem, 4vw, 4rem);
  line-height: 0.9;
}

.city-thesis {
  font-size: 0.98rem;
  line-height: 1.48;
  margin: 18px 0 0;
  max-width: 760px;
}

.city-readout {
  align-items: end;
  border: 0;
  display: grid;
  flex: 0 0 auto;
  gap: 3px;
  grid-template-columns: 1fr;
  margin: 0;
  min-width: 130px;
  padding: 0;
  text-align: right;
}

.city-readout > span,
.city-readout > strong {
  grid-column: 1;
}

.city-readout > span {
  color: var(--muted);
}

.city-readout > strong {
  color: var(--city-accent);
  font-size: 1.05rem;
}

.city-brief-details {
  color: var(--muted);
  font-size: 0.76rem;
  margin-top: 13px;
}

.city-brief-details summary,
.inspector-footer summary {
  color: var(--burgundy);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  list-style: none;
}

.city-brief-details summary::before,
.inspector-footer summary::before {
  content: "+";
  display: inline-block;
  margin-right: 7px;
}

.city-brief-details[open] summary::before,
.inspector-footer details[open] summary::before {
  content: "−";
}

.city-focus {
  border-left-width: 2px;
  font-size: 0.78rem;
  margin-top: 12px;
}

#release-label {
  background: transparent;
  display: inline-block;
  margin-top: 8px;
  padding: 0;
}

.headline-metrics {
  border-bottom: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong);
  margin-top: 0;
}

.metric-card {
  background: transparent;
  border: 0;
  gap: 4px 10px;
  min-height: 112px;
  padding: 14px 14px 14px 0;
}

.metric-card + .metric-card {
  border-left: 1px solid var(--line);
  padding-left: 14px;
}

.metric-value {
  gap: 6px;
}

.metric-value > strong {
  font-size: clamp(1.65rem, 2.4vw, 2.25rem);
}

.metric-card .metric-context {
  font-size: 0.67rem;
  line-height: 1.3;
}

.metric-action {
  margin-top: 34px;
}

.analysis-panel {
  border-bottom: 0;
  min-height: 420px;
  padding: 28px 0 44px;
  scroll-margin-top: 66px;
}

.section-heading {
  align-items: start;
  margin-bottom: 20px;
}

.section-heading h3 {
  font-size: clamp(1.7rem, 2.5vw, 2.45rem);
}

.section-heading p {
  font-size: 0.85rem;
  max-width: 470px;
}

.workforce-verdict,
.signal-readout {
  align-items: center;
  border-block: 1px solid var(--line);
  display: grid;
  gap: 12px 24px;
  grid-template-columns: minmax(210px, 0.7fr) minmax(0, 1.3fr);
  margin-bottom: 24px;
  padding: 18px 0;
}

.workforce-verdict > strong,
.signal-readout > strong {
  color: var(--city-accent);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.5vw, 2.3rem);
  line-height: 1;
}

.workforce-verdict p,
.signal-readout p {
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.signal-readout > span {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.65rem;
  grid-column: 1;
  margin-bottom: -10px;
}

.signal-readout > strong {
  grid-column: 1;
}

.signal-readout > p {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.exposure-lens-grid {
  border-top: 1px solid var(--line);
  gap: 24px;
  grid-template-columns: minmax(0, 1.4fr) minmax(250px, 0.6fr);
  padding-top: 18px;
}

.exposure-map-panel {
  border: 0;
  padding: 0;
}

.exposure-map-panel > p {
  font-size: 0.74rem;
}

.occupation-list {
  border-left: 1px solid var(--line);
  padding-left: 18px;
}

.occupation-row {
  grid-template-columns: minmax(140px, 1fr) 46px;
  padding: 9px 0;
}

.occupation-row .bar-track {
  display: none;
}

.occupation-row > div:first-child span {
  font-size: 0.66rem;
}

.supporting-disclosures {
  border-top: 1px solid var(--line-strong);
  margin-top: 24px;
}

.supporting-disclosures > details {
  border-bottom: 1px solid var(--line-strong);
}

.supporting-disclosures > details > summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.2fr) 28px;
  list-style: none;
  min-height: 58px;
}

.supporting-disclosures > details > summary::-webkit-details-marker {
  display: none;
}

.supporting-disclosures > details > summary::after {
  border: 1px solid var(--line-strong);
  content: "+";
  font-family: var(--font-ui);
  padding: 3px 7px;
}

.supporting-disclosures > details[open] > summary::after {
  content: "−";
}

.supporting-disclosures > details > summary span {
  color: var(--burgundy);
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.supporting-disclosures > details > summary strong {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 400;
}

.disclosure-body {
  border-top: 1px solid var(--line);
  padding: 18px 0 22px;
}

.disclosure-body .method-note {
  background: transparent;
  border-left: 0;
  margin: 0;
  padding: 0;
}

.disclosure-body.sector-panel,
.disclosure-body.warn-panel {
  border-top: 1px solid var(--line);
  margin: 0;
}

.evidence-metric-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hiring-pathways {
  border-top: 1px solid var(--line-strong);
  margin-top: 24px;
  padding-top: 18px;
}

.compact-flag-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-flag {
  border-bottom: 1px solid var(--line);
  padding: 12px 14px 12px 0;
}

.compact-flag:nth-child(even) {
  border-left: 1px solid var(--line);
  padding-left: 14px;
}

.compact-flag > div {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.compact-flag > div strong {
  color: var(--burgundy);
  font-size: 0.78rem;
}

.compact-flag > div span,
.compact-flag small {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.62rem;
}

.compact-flag.is-triggered > div span {
  color: var(--orange);
  font-weight: 700;
}

.compact-flag p {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
  margin: 6px 0;
}

.inspector-footer {
  border-top: 1px solid var(--line-strong);
  padding: 16px 0 28px;
}

.inspector-footer > details > p {
  margin-top: 14px;
}

.source-links {
  margin-top: 12px;
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: minmax(430px, 0.86fr) minmax(520px, 1.14fr);
  }

  .topbar {
    align-items: flex-start;
  }

  .brand-mark img {
    height: 32px;
  }

  .selection-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analysis-tabs {
    grid-column: 1 / -1;
  }

  .headline-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .exposure-lens-grid {
    grid-template-columns: 1fr;
  }

  .metric-card:nth-child(n) {
    border: 0;
  }

  .metric-card + .metric-card {
    border-left: 1px solid var(--line);
  }

  .metric-card:nth-child(n + 3) {
    border-top: 0;
  }

  .occupation-list {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 12px;
  }
}

@media (max-width: 860px) {
  .app-shell {
    display: block;
  }

  .map-stage {
    border-right: 0;
    height: min(74vh, 700px);
    min-height: 570px;
    position: relative;
  }

  .topbar {
    min-height: 74px;
  }

  .selection-bar {
    position: static;
  }

  .analysis-tabs {
    grid-column: 1 / -1;
  }

  .analysis-panel {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .map-stage {
    grid-template-rows: auto auto minmax(320px, 1fr) auto;
    height: 72vh;
    min-height: 540px;
  }

  .topbar {
    align-items: stretch;
    display: grid;
    gap: 10px;
    padding: 12px 14px;
  }

  .brand-heading h1 {
    font-size: 1.12rem;
  }

  .map-controls > div {
    align-items: flex-start;
    display: grid;
    gap: 5px;
  }

  .map-callout {
    bottom: 76px;
    left: 10px;
    max-width: min(245px, calc(100% - 20px));
  }

  .map-caption {
    align-items: flex-start;
    display: grid;
    gap: 6px;
  }

  .selection-bar {
    grid-template-columns: 1fr;
  }

  .profile-title-row {
    align-items: flex-start;
  }

  .profile-title-row h2 {
    font-size: 3.1rem;
  }

  #release-label {
    max-width: 100px;
  }

  .analysis-tabs {
    display: grid;
    grid-column: 1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
  }

  .analysis-tabs button {
    min-width: 0;
    padding-inline: 2px;
  }

  .analysis-tabs button > strong {
    font-size: 0.62rem;
  }

  .workforce-verdict,
  .signal-readout {
    grid-template-columns: 1fr;
  }

  .signal-readout > p {
    grid-column: 1;
    grid-row: auto;
  }

  .compact-flag-list {
    grid-template-columns: 1fr;
  }

  .compact-flag:nth-child(even) {
    border-left: 0;
    padding-left: 0;
  }

  .city-system-disclosures > details > summary {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .city-system-disclosures > details > summary > small {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .city-system-disclosures > details > summary::after {
    grid-column: 3;
  }

  .two-column,
  .action-grid,
  .signal-summary,
  .evidence-metric-grid,
  .flag-grid,
  .fiscal-list {
    grid-template-columns: 1fr;
  }

  .exposure-summary-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exposure-summary-four > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
  }

  .exposure-summary-four > div:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .evidence-metric-grid article + article,
  .flag-card:nth-child(n) {
    border: 1px solid var(--line);
    border-top: 0;
  }

  .evidence-metric-grid article:first-child,
  .flag-card:first-child {
    border-top: 1px solid var(--line);
  }

  .fiscal-list article:nth-child(even) {
    padding-left: 0;
  }

  .workforce-table {
    overflow-x: auto;
  }

  .workforce-row {
    min-width: 650px;
  }

  .local-program > div {
    grid-template-columns: auto 1fr;
  }

  .panel-block:nth-child(even),
  .action-card:nth-child(even) {
    border-left: 0;
    padding-left: 0;
  }

  .signal-summary > div,
  .signal-summary > div:first-child {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 12px 0;
  }

  .section-heading {
    align-items: flex-start;
    display: grid;
  }

  .occupation-row {
    grid-template-columns: minmax(145px, 1fr) 60px;
  }

  .occupation-row .bar-track {
    display: none;
  }

  .comparison-row {
    grid-template-columns: 1fr;
  }
}

/* National-report parity: city profiles use the same command bar, section rail,
   full-width report canvas, and embedded context map as country profiles. */
.cities-page {
  background: var(--paper);
}

.city-workspace-nav {
  align-items: center;
  background: rgb(245 225 225 / 97%);
  border-bottom: 1px solid var(--brand-burgundy);
  display: grid;
  gap: 14px;
  grid-template-columns: auto auto minmax(170px, 0.75fr) minmax(260px, 1fr) auto;
  min-height: 68px;
  padding: 10px clamp(18px, 2.8vw, 42px);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.city-workspace-nav .brand-mark img {
  display: block;
  height: 34px;
  width: auto;
}

.back-to-index,
.city-workspace-actions a {
  align-items: center;
  border: 1px solid var(--brand-burgundy);
  border-radius: 999px;
  color: var(--brand-burgundy);
  display: inline-flex;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  justify-content: center;
  min-height: 36px;
  padding: 7px 13px;
  text-decoration: none;
  white-space: nowrap;
}

.back-to-index:hover,
.back-to-index:focus-visible,
.city-workspace-actions a:hover,
.city-workspace-actions a:focus-visible {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: var(--brand-pink-light);
}

.city-workspace-picker,
.city-geography-picker {
  min-width: 0;
}

.city-workspace-picker > span,
.city-geography-picker legend {
  color: var(--muted);
  display: block;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  margin-bottom: 2px;
}

.city-workspace-picker select {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--brand-burgundy);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  min-height: 28px;
  padding: 0 28px 0 0;
  width: 100%;
}

.city-workspace-picker select:hover,
.city-workspace-picker select:focus-visible {
  border-bottom-color: var(--brand-burgundy);
  outline: 0;
}

.city-geography-picker {
  border: 0;
  margin: 0;
  padding: 0;
}

.city-geography-picker .segmented-control {
  display: flex;
}

.city-geography-picker .segmented-control button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  min-height: 28px;
  padding: 3px 10px;
}

.city-geography-picker .segmented-control button[aria-pressed="true"] {
  background: transparent;
  border-bottom-color: var(--brand-blue);
  color: var(--brand-blue);
}

.city-workspace-actions {
  display: flex;
  gap: 8px;
  justify-content: end;
}

.city-workspace-actions a:first-child {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: var(--brand-black);
}

.city-workspace-actions a:last-child {
  background: var(--brand-black);
  border-color: var(--brand-black);
  color: var(--brand-pink-light);
}

.cities-page .app-shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: calc(100vh - 68px);
}

.city-report-rail {
  align-self: start;
  background: rgb(255 250 246 / 92%);
  border-right: 1px solid var(--line);
  height: calc(100vh - 68px);
  overflow-y: auto;
  padding: 28px 18px;
  position: sticky;
  top: 68px;
}

.city-report-rail-heading {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 4px;
  margin: 0 0 12px;
  padding: 0 8px 18px;
}

.city-report-rail-heading span {
  color: var(--brand-orange);
  font-family: var(--font-ui);
  font-size: 0.62rem;
}

.city-report-rail-heading strong {
  color: var(--brand-burgundy);
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.city-report-rail .analysis-tabs {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  margin: 0 0 28px;
  overflow: visible;
}

.city-report-rail .analysis-tabs button {
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  color: var(--muted);
  min-height: 38px;
  padding: 8px 10px;
  text-align: left;
}

.city-report-rail .analysis-tabs button[aria-selected="true"] {
  background: var(--pink-soft);
  border-left-color: var(--brand-orange);
  color: var(--brand-burgundy);
}

.city-report-rail .analysis-tabs button > strong {
  font-family: var(--font-body);
  font-size: 0.78rem;
}

.city-report-rail .map-controls {
  align-items: stretch;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding: 18px 8px 0;
}

.city-report-rail .map-controls > div {
  align-items: stretch;
  display: grid;
  gap: 8px;
}

.city-report-rail .map-layer-controls {
  display: grid;
  overflow: visible;
}

.city-report-rail .map-layer-controls button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  min-height: 34px;
  padding: 6px 0;
  text-align: left;
}

.city-report-rail .map-layer-controls button[aria-pressed="true"] {
  background: transparent;
  color: var(--brand-blue);
}

.city-report-rail .map-controls > button {
  border-radius: 999px;
  justify-self: start;
}

.cities-page .inspector {
  background:
    linear-gradient(90deg, rgb(83 21 2 / 3%) 1px, transparent 1px) 0 0 / 72px 72px,
    var(--paper);
  min-width: 0;
  padding: 44px clamp(28px, 4vw, 64px) 56px;
}

.city-overview {
  align-items: start;
  display: grid;
  gap: clamp(26px, 4vw, 54px);
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.7fr);
  margin: 0 auto 34px;
  max-width: 1200px;
}

.cities-page .city-profile,
.cities-page .headline-metrics,
.cities-page .analysis-panel,
.cities-page .inspector-footer {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

.cities-page .city-profile {
  border: 0;
  padding: 0;
}

.cities-page .city-profile .eyebrow {
  color: var(--brand-orange);
  font-family: var(--font-ui);
  font-size: 0.66rem;
  margin: 0 0 12px;
}

.cities-page .profile-title-row {
  align-items: start;
}

.cities-page .profile-title-row h1 {
  color: var(--brand-burgundy);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 5rem);
  line-height: 0.9;
  margin: 0;
}

.cities-page .city-thesis {
  color: var(--brand-burgundy);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.55rem);
  font-weight: 600;
  line-height: 1.45;
  margin-top: 28px;
  max-width: 780px;
}

.cities-page .map-stage {
  align-self: start;
  background: var(--pink-soft);
  border: 1px solid var(--brand-burgundy);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(230px, 1fr) auto;
  height: 350px;
  min-width: 0;
  overflow: hidden;
  position: relative;
  top: auto;
}

.cities-page .city-map {
  min-height: 230px;
}

.cities-page .map-caption {
  min-height: 62px;
}

.cities-page .map-callout {
  bottom: auto;
  left: auto;
  max-width: 210px;
  padding: 9px 11px;
  right: 10px;
  top: 10px;
}

.cities-page .map-callout p {
  display: none;
}

.cities-page .headline-metrics {
  background: rgb(255 253 249 / 74%);
}

.cities-page .analysis-panel {
  scroll-margin-top: 88px;
}

@media (max-width: 1080px) {
  .city-workspace-nav {
    grid-template-columns: auto auto minmax(150px, 1fr) auto;
  }

  .city-geography-picker {
    display: none;
  }

  .city-overview {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 0.65fr);
  }
}

@media (max-width: 820px) {
  .city-workspace-nav {
    grid-template-columns: auto minmax(120px, 1fr) auto;
    min-height: 64px;
    padding-inline: 14px;
  }

  .city-workspace-nav .back-to-index {
    display: none;
  }

  .city-workspace-actions a:first-child {
    display: none;
  }

  .cities-page .app-shell {
    grid-template-columns: 1fr;
  }

  .city-report-rail {
    align-items: center;
    border-bottom: 1px solid var(--line);
    border-right: 0;
    display: flex;
    gap: 12px;
    height: auto;
    overflow-x: auto;
    padding: 8px 14px;
    top: 64px;
    z-index: 900;
  }

  .city-report-rail-heading,
  .city-report-rail .map-controls {
    display: none;
  }

  .city-report-rail .analysis-tabs {
    display: flex;
    flex: 1 0 auto;
    margin: 0;
  }

  .city-report-rail .analysis-tabs button {
    border-bottom: 2px solid transparent;
    border-left: 0;
    padding-inline: 12px;
    white-space: nowrap;
  }

  .city-report-rail .analysis-tabs button[aria-selected="true"] {
    border-bottom-color: var(--brand-orange);
  }

  .cities-page .inspector {
    padding: 34px 20px 48px;
  }

  .city-overview {
    grid-template-columns: 1fr;
  }

  .cities-page .map-stage {
    height: 420px;
  }
}

@media (max-width: 540px) {
  .city-workspace-nav .brand-mark img {
    height: 28px;
  }

  .city-workspace-actions a {
    min-height: 32px;
    padding-inline: 10px;
  }

  .cities-page .profile-title-row {
    display: grid;
    gap: 14px;
  }

  .cities-page .city-readout {
    text-align: left;
  }

  .cities-page .map-stage {
    height: 350px;
    min-height: 0;
  }
}

@media (max-width: 420px) {
  .headline-metrics {
    grid-template-columns: 1fr;
  }

  .metric-card:nth-child(n) {
    border: 1px solid var(--line);
    border-top: 0;
  }

  .metric-card:first-child {
    border-top: 1px solid var(--line);
  }

  .exposure-summary {
    grid-template-columns: 1fr;
  }

  .exposure-summary-four > div:nth-child(4) {
    border-left: 0;
    padding-left: 0;
  }

  .exposure-summary > div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
  }

  .fiscal-hero {
    grid-template-columns: 1fr;
  }

  .fiscal-hero > div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
  }

  .sector-row {
    grid-template-columns: minmax(150px, 1fr) 48px;
  }

  .sector-row i {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

.city-index-note {
  align-items: start;
  background: var(--brand-black);
  color: var(--brand-pink-light);
  display: grid;
  gap: 4px 24px;
  grid-template-columns: minmax(130px, 0.34fr) minmax(0, 1fr);
  margin-bottom: 24px;
  padding: 18px 20px;
}

.city-index-note > span {
  color: var(--brand-orange);
  font-family: var(--font-ui);
  font-size: 0.66rem;
  grid-row: 1 / span 2;
}

.city-index-note > strong {
  font-family: var(--font-display);
  font-size: 1rem;
}

.city-index-note > p {
  font-size: 0.76rem;
  line-height: 1.4;
  margin: 0;
  opacity: 0.78;
}

.city-index-matrix {
  border: 1px solid var(--line-strong);
  display: grid;
  grid-template-columns: minmax(180px, 0.72fr) repeat(2, minmax(220px, 1fr));
}

.city-index-corner,
.city-index-lens,
.city-index-domain,
.city-index-cell {
  min-width: 0;
  padding: 16px;
}

.city-index-corner,
.city-index-lens {
  background: var(--brand-burgundy);
  color: var(--brand-pink-light);
}

.city-index-lens + .city-index-lens {
  background: var(--brand-blue);
  border-left: 1px solid rgb(245 225 225 / 34%);
}

.city-index-corner span,
.city-index-domain span,
.city-index-cell > span {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.63rem;
}

.city-index-corner strong,
.city-index-domain strong,
.city-index-lens span,
.city-index-cell > strong {
  display: block;
  font-family: var(--font-display);
}

.city-index-corner strong {
  font-size: 1rem;
  margin-top: 5px;
}

.city-index-lens span {
  color: var(--brand-pink-light);
  font-size: 1.28rem;
}

.city-index-lens p {
  font-size: 0.7rem;
  line-height: 1.35;
  margin: 5px 0 0;
  opacity: 0.74;
}

.city-index-domain,
.city-index-cell {
  border-top: 1px solid var(--line);
}

.city-index-domain {
  background: var(--pink-soft);
}

.city-index-domain span {
  color: var(--brand-orange);
}

.city-index-domain strong {
  color: var(--brand-burgundy);
  font-size: 1.12rem;
  margin-top: 6px;
}

.city-index-domain p,
.city-index-cell p {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.42;
  margin: 7px 0 0;
}

.city-index-cell {
  background: rgb(255 253 249 / 78%);
  border-left: 1px solid var(--line);
  min-height: 138px;
}

.city-index-cell > span {
  color: var(--brand-blue);
}

.city-index-cell > strong {
  color: var(--brand-burgundy);
  font-size: 1.18rem;
  margin-top: 12px;
}

.city-index-cell.is-unavailable {
  background:
    repeating-linear-gradient(-45deg, transparent 0 8px, rgb(76 26 9 / 2.5%) 8px 9px),
    rgb(255 253 249 / 62%);
}

.city-index-cell.is-unavailable > span,
.city-index-cell.is-unavailable > strong {
  color: var(--muted);
}

.city-index-cell-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.city-index-cell-sources a,
.city-index-cell-sources small {
  color: var(--brand-burgundy);
  font-family: var(--font-ui);
  font-size: 0.62rem;
}

.overview-pathways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px;
}

.overview-pathways button {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--brand-burgundy);
  cursor: pointer;
  display: grid;
  gap: 6px 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 100px;
  padding: 15px;
  text-align: left;
}

.overview-pathways button + button {
  border-left: 0;
}

.overview-pathways button:hover,
.overview-pathways button:focus-visible {
  background: var(--pink-soft);
}

.overview-pathways button span {
  color: var(--brand-orange);
  font-family: var(--font-ui);
  font-size: 0.62rem;
}

.overview-pathways button strong {
  font-size: 0.8rem;
  line-height: 1.35;
}

.overview-pathways button b {
  color: var(--brand-orange);
  font-size: 1.2rem;
  grid-column: 2;
  grid-row: 1 / span 2;
}

@media (max-width: 900px) {
  .city-index-matrix {
    grid-template-columns: minmax(150px, 0.65fr) repeat(2, minmax(180px, 1fr));
    overflow-x: auto;
  }
}

@media (max-width: 620px) {
  .city-index-note {
    grid-template-columns: 1fr;
  }

  .city-index-note > span {
    grid-row: auto;
  }

  .city-index-matrix {
    display: block;
  }

  .city-index-corner {
    display: none;
  }

  .city-index-lens {
    border-top: 1px solid var(--line);
  }

  .city-index-lens + .city-index-lens {
    border-left: 0;
  }

  .city-index-domain {
    border-top-color: var(--line-strong);
  }

  .city-index-cell {
    border-left: 0;
  }

  .overview-pathways {
    grid-template-columns: 1fr;
  }

  .overview-pathways button + button {
    border-left: 1px solid var(--line-strong);
    border-top: 0;
  }
}

/* Branded minimalism: quiet copy, unmistakable Windfall surfaces. */
.cities-page {
  --minimal-line: rgb(76 26 9 / 24%);
  --minimal-muted: #795343;
  background: var(--paper);
}

.cities-page .city-workspace-nav {
  background: var(--brand-pink-light);
  overflow: hidden;
}

.cities-page .city-workspace-nav::before {
  background: url("../dashboard/assets/brand/motifs/scattered-dots.svg") center / contain no-repeat;
  content: "";
  height: 74px;
  opacity: 0.52;
  pointer-events: none;
  position: absolute;
  right: clamp(270px, 25vw, 390px);
  top: -4px;
  width: 120px;
}

.cities-page .city-report-rail {
  background: color-mix(in srgb, var(--brand-pink-light) 44%, var(--paper));
}

.cities-page .inspector {
  background:
    linear-gradient(90deg, rgb(76 26 9 / 3%) 1px, transparent 1px) 0 0 / 72px 72px,
    var(--paper);
}

.cities-page .city-workspace-nav,
.cities-page .city-report-rail,
.cities-page .city-report-rail .map-controls,
.cities-page .city-report-rail .map-layer-controls button {
  border-color: var(--minimal-line);
}

.cities-page .back-to-index,
.cities-page .city-workspace-actions a {
  background: transparent;
  border-color: var(--brand-burgundy);
  color: var(--brand-burgundy);
}

.cities-page .city-workspace-actions a:first-child {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: var(--brand-black);
}

.cities-page .city-workspace-actions a:last-child {
  background: var(--brand-black);
  border-color: var(--brand-black);
  color: var(--brand-pink-light);
}

.cities-page .back-to-index:hover,
.cities-page .back-to-index:focus-visible,
.cities-page .city-workspace-actions a:hover,
.cities-page .city-workspace-actions a:focus-visible {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: var(--brand-pink-light);
}

.cities-page .city-report-rail {
  padding-top: 22px;
}

.cities-page .city-report-rail .analysis-tabs button {
  color: var(--minimal-muted);
  min-height: 36px;
}

.cities-page .city-report-rail .analysis-tabs button[aria-selected="true"] {
  background: var(--pink-soft);
  border-left-color: var(--brand-orange);
  color: var(--brand-burgundy);
}

.cities-page .city-report-rail .map-layer-controls button[aria-pressed="true"] {
  color: var(--brand-blue);
  font-weight: 700;
}

.cities-page .inspector {
  padding-top: 38px;
}

.cities-page .city-overview {
  gap: clamp(32px, 5vw, 72px);
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
  margin-bottom: 30px;
}

.cities-page .profile-title-row h1 {
  color: var(--brand-burgundy);
  font-size: clamp(3rem, 6vw, 5.5rem);
  letter-spacing: -0.035em;
}

.cities-page .map-stage {
  background: var(--pink-soft);
  border-color: var(--brand-burgundy);
}

.cities-page .map-caption,
.cities-page .headline-metrics,
.cities-page .metric-card + .metric-card {
  border-color: var(--minimal-line);
}

.cities-page .map-callout[hidden] {
  display: none;
}

.cities-page .headline-metrics {
  background: rgb(255 253 249 / 82%);
}

.cities-page .metric-card {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 128px;
  padding-block: 16px;
}

.cities-page .metric-card:nth-child(1) {
  border-top: 3px solid var(--brand-burgundy);
}

.cities-page .metric-card:nth-child(2) {
  border-top: 3px solid var(--brand-blue);
}

.cities-page .metric-card:nth-child(3) {
  border-top: 3px solid var(--brand-orange);
}

.cities-page .metric-value > span,
.cities-page .metric-value > strong,
.cities-page .metric-action {
  color: var(--brand-burgundy);
}

.cities-page .metric-card .metric-context,
.cities-page .metric-source,
.cities-page .city-index-coverage {
  color: var(--minimal-muted);
}

.cities-page .analysis-panel {
  padding-top: 38px;
}

.cities-page .section-heading {
  border-bottom: 2px solid var(--brand-orange);
  margin-bottom: 18px;
  padding-bottom: 14px;
}

.cities-page .section-heading h3 {
  color: var(--brand-burgundy);
  font-size: clamp(1.7rem, 2.8vw, 2.6rem);
  letter-spacing: -0.025em;
}

.cities-page .city-index-coverage {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  margin: 0 0 12px;
}

.cities-page .city-index-matrix,
.cities-page .city-index-corner,
.cities-page .city-index-lens,
.cities-page .city-index-lens + .city-index-lens,
.cities-page .city-index-domain,
.cities-page .city-index-cell {
  border-color: var(--minimal-line);
}

.cities-page .city-index-corner,
.cities-page .city-index-lens {
  background: var(--brand-burgundy);
  color: var(--brand-pink-light);
}

.cities-page .city-index-lens + .city-index-lens {
  background: var(--brand-blue);
  color: var(--brand-pink-light);
}

.cities-page .city-index-domain {
  background: var(--pink-soft);
}

.cities-page .city-index-cell,
.cities-page .city-index-cell.is-unavailable {
  background: rgb(255 253 249 / 84%);
}

.cities-page .city-index-domain strong,
.cities-page .city-index-cell > strong {
  color: var(--brand-burgundy);
}

.cities-page .city-index-lens span {
  color: var(--brand-pink-light);
}

.cities-page .city-index-cell {
  min-height: 112px;
}

.cities-page .city-index-cell.is-unavailable > span,
.cities-page .city-index-cell.is-unavailable > strong {
  color: #9a938d;
}

@media (max-width: 1080px) {
  .cities-page .city-workspace-nav::before {
    display: none;
  }
}

@media (max-width: 820px) {
  .cities-page .city-report-rail .analysis-tabs button[aria-selected="true"] {
    border-bottom-color: var(--brand-orange);
  }

  .cities-page .city-overview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .cities-page .metric-card:nth-child(n) {
    padding: 18px 14px;
  }
}