/* The Atlas — interactive map app styles.
   Echoes Mainline design tokens (website/css/tokens.css) so the app shares the
   brand's colour, type and spacing. The cartography palette (Atlas Verdigris,
   Atlas Sandstone) is added for the seven-state map standard and is used only
   for map / data-viz colour. Do not introduce ad-hoc colour or type values. */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;1,8..60,400&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* Mainline locked palette (mirror of tokens.css) */
  --mainline-navy:           #0A2540;
  --mainline-ink:            #0E1A2B;
  --mainline-rail-grey:      #4A5568;
  --mainline-steel:          #E2E5EA;
  --mainline-paper:          #F7F5F0;
  --mainline-white:          #FFFFFF;
  --mainline-saffron:        #C97B2E;
  --mainline-saffron-shadow: #9A5E22;
  /* Cartography-only additions */
  --atlas-verdigris:         #3E5A56;
  --atlas-sandstone:         #A18866;

  --font-display: "Source Serif 4", "Tiempos Headline", Cambria, Georgia, serif;
  --font-body:    "Inter", Calibri, -apple-system, "Segoe UI", sans-serif;

  --type-h1:       clamp(28px, 3vw, 40px);
  --type-h2:       clamp(22px, 2.2vw, 28px);
  --type-body:     16px;
  --type-caption:  13px;
  --type-eyebrow:  12px;

  --space-1: 8px;  --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 48px; --space-6: 64px; --space-7: 96px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--mainline-paper);
  color: var(--mainline-ink);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.modal-open { overflow: hidden; }

.tabular { font-variant-numeric: tabular-nums; }

.shell { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-4); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; color: var(--mainline-navy); margin: 0 0 var(--space-2); }
h2 { font-size: var(--type-h2); line-height: 1.2; }
h3 { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--mainline-ink); margin: 0 0 var(--space-2); }
p { margin: 0 0 var(--space-2); }

a { color: var(--mainline-navy); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 120ms ease; }
a:hover, a:focus-visible { border-bottom-color: var(--mainline-saffron); }

:focus-visible { outline: 2px solid var(--mainline-saffron); outline-offset: 2px; }

.eyebrow {
  font-family: var(--font-body); font-weight: 700; font-size: var(--type-eyebrow);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mainline-saffron-shadow);
  margin: 0 0 var(--space-2); display: inline-block;
}
.caption { font-size: var(--type-caption); line-height: 1.35; color: var(--mainline-rail-grey); }
.muted { color: var(--mainline-rail-grey); }

.skip { position: absolute; left: -9999px; top: auto; background: var(--mainline-navy); color: var(--mainline-paper); padding: 8px 12px; z-index: 1000; }
.skip:focus { left: 16px; top: 16px; }

/* ---------- Header ---------- */
.site-header { background: var(--mainline-navy); color: var(--mainline-paper); }
.site-header .shell { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.wordmark {
  position: relative; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 0.95; letter-spacing: -0.025em;
  color: var(--mainline-paper); border-bottom: none; padding-left: 16px;
}
.wordmark::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--mainline-saffron); }
.wordmark:hover { border-bottom: none; }
.header-right { display: flex; align-items: center; gap: var(--space-3); }
.atlas-tag { font-family: var(--font-display); font-size: 20px; color: var(--mainline-saffron); }
.header-unlock {
  font-family: var(--font-body); font-weight: 600; font-size: 14px; cursor: pointer;
  color: var(--mainline-navy); background: var(--mainline-paper); border: 1px solid var(--mainline-paper);
  padding: 9px 16px;
}
.header-unlock:hover { border-color: var(--mainline-saffron); }
.header-unlock.is-unlocked { background: transparent; color: var(--mainline-saffron); border-color: var(--mainline-saffron); cursor: default; }

/* ---------- Boot ---------- */
.boot-status { padding: var(--space-7) var(--space-4); text-align: center; color: var(--mainline-rail-grey); }
.boot-error { max-width: 600px; margin: 0 auto; color: var(--mainline-ink); }
.boot-error code { background: var(--mainline-steel); padding: 2px 6px; }

/* ---------- Controls bar ---------- */
.atlas-controls { background: var(--mainline-white); border-bottom: 1px solid var(--mainline-steel); padding: var(--space-3) 0; position: sticky; top: 0; z-index: 50; }
.breadcrumb-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.crumb { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--mainline-navy); background: none; border: none; border-bottom: 1px solid transparent; cursor: pointer; padding: 2px 0; }
.crumb:hover { border-bottom-color: var(--mainline-saffron); }
.crumb--current { color: var(--mainline-rail-grey); font-weight: 500; cursor: default; }
.crumb-sep { color: var(--mainline-rail-grey); }

.ctl-btn { font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; background: var(--mainline-paper); color: var(--mainline-navy); border: 1px solid var(--mainline-steel); padding: 7px 12px; }
.ctl-btn:hover { border-color: var(--mainline-saffron); }
.ctl-btn:disabled { opacity: .45; cursor: not-allowed; }
.ctl-btn--export { background: var(--mainline-navy); color: var(--mainline-paper); border-color: var(--mainline-navy); }
.ctl-btn--export:hover { border-color: var(--mainline-saffron); }

.controls-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); }
.as-of { font-size: var(--type-caption); color: var(--mainline-rail-grey); font-style: italic; }

/* ---------- Filter bar ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.filter-group { display: flex; flex-direction: column; gap: 4px; }
.filter-group label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mainline-rail-grey); }
.filter-search { flex: 1 1 220px; }
.filter-bar input, .filter-bar select {
  font-family: var(--font-body); font-size: 14px; color: var(--mainline-ink);
  background: var(--mainline-paper); border: 1px solid var(--mainline-steel);
  border-bottom: 1px solid var(--mainline-rail-grey); padding: 9px 12px; border-radius: 0;
  appearance: none; -webkit-appearance: none; min-width: 160px; width: 100%;
}
.filter-bar input:focus, .filter-bar select:focus { outline: 2px solid var(--mainline-saffron); outline-offset: 1px; border-color: var(--mainline-navy); }
.filter-reset { align-self: flex-end; font-size: 13px; font-weight: 600; cursor: pointer; background: none; border: none; color: var(--mainline-saffron-shadow); border-bottom: 1px solid var(--mainline-saffron-shadow); padding: 4px 0; }

/* ---------- Layout ---------- */
.atlas-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-4); padding-top: var(--space-4); padding-bottom: var(--space-6); }
@media (min-width: 920px) {
  .atlas-layout { grid-template-columns: minmax(380px, 46%) 1fr; gap: var(--space-5); align-items: start; }
}

/* ---------- Map ---------- */
.map-pane { position: relative; background: var(--mainline-white); border: 1px solid var(--mainline-steel); padding: var(--space-2); }
@media (min-width: 920px) { .map-pane { position: sticky; top: 150px; } }
#india-map { width: 100%; height: auto; display: block; max-height: 78vh; }

.state { transition: fill-opacity 160ms ease, opacity 160ms ease; }
.state--live, .state--in_progress { cursor: pointer; }
.state--live:hover, .state--in_progress:hover { fill-opacity: 0.9; }
.state.is-active { stroke: var(--mainline-saffron); stroke-width: 1.6 !important; }
.state.dim { opacity: 0.25; }
.state:focus-visible { outline: none; stroke: var(--mainline-saffron); stroke-width: 1.8 !important; }

.pin-circle { fill: var(--mainline-saffron); stroke: var(--mainline-white); stroke-width: 1.5; }
.pin-label { font-family: var(--font-body); font-size: 11px; font-weight: 600; fill: var(--mainline-ink); paint-order: stroke; stroke: var(--mainline-paper); stroke-width: 3px; }
.pin { cursor: pointer; }
.pin.dim { opacity: 0.25; }
.pin:focus-visible .pin-circle { stroke: var(--mainline-navy); stroke-width: 2.5; }

/* legend / north / scalebar */
.map-legend { position: absolute; left: var(--space-2); bottom: var(--space-2); background: rgba(255,255,255,0.94); border: 1px solid var(--mainline-steel); padding: 8px 12px 10px; font-size: 11px; line-height: 1.4; max-width: 230px; }
.legend-toggle { display: none; width: 100%; text-align: left; background: none; border: none; font-family: var(--font-body); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mainline-rail-grey); cursor: pointer; padding: 2px 0; }
.legend-caret { float: right; transition: transform 150ms ease; }
.map-legend.collapsed .legend-toggle { display: block; }
.map-legend.collapsed .legend-body { display: none; }
.map-legend.collapsed { max-width: none; }
.map-legend.collapsed .legend-caret { transform: rotate(-90deg); }
/* When not collapsed, still show the toggle so users can hide it manually. */
.map-legend:not(.collapsed) .legend-toggle { display: block; margin-bottom: 6px; border-bottom: 1px solid var(--mainline-steel); padding-bottom: 5px; }
.legend-block + .legend-block { margin-top: 8px; border-top: 1px solid var(--mainline-steel); padding-top: 8px; }
.legend-title { font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mainline-rail-grey); margin: 0 0 5px; }
.legend-row { display: flex; align-items: center; gap: 7px; color: var(--mainline-ink); margin-bottom: 3px; }
.legend-foot { margin: 4px 0 0; font-size: 10px; font-style: italic; color: var(--mainline-rail-grey); }
.swatch { width: 13px; height: 13px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,0.12); display: inline-block; }
.swatch--none { background: var(--mainline-steel); }
.swatch--pin { border-radius: 50%; background: var(--mainline-saffron); border-color: var(--mainline-white); width: 12px; height: 12px; }
.legend-block.north { display: flex; justify-content: flex-end; }

.map-scalebar { position: absolute; right: var(--space-2); bottom: var(--space-2); background: rgba(255,255,255,0.9); padding: 5px 8px; border: 1px solid var(--mainline-steel); font-size: 11px; color: var(--mainline-ink); display: flex; align-items: center; gap: 8px; }
.scalebar-rule { display: inline-block; width: 120px; height: 0; border-bottom: 3px solid var(--mainline-navy); }

.map-tooltip { position: fixed; z-index: 200; pointer-events: none; background: var(--mainline-ink); color: var(--mainline-paper); padding: 8px 11px; max-width: 280px; font-size: 12px; line-height: 1.4; box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.map-tooltip strong { display: block; font-family: var(--font-display); font-size: 15px; margin-bottom: 3px; }
.map-tooltip .tt-headline { display: block; color: rgba(247,245,240,0.85); margin-bottom: 4px; }
.map-tooltip .tt-counts, .map-tooltip .tt-band { display: block; color: var(--mainline-saffron); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Panel ---------- */
.info-pane { min-width: 0; }
.panel:focus { outline: none; }
.panel-section > h2 { font-size: var(--type-h1); line-height: 1.1; }
.headline { font-size: 17px; line-height: 1.5; color: var(--mainline-ink); max-width: 64ch; }
.pipeline-band { font-family: var(--font-display); font-size: 20px; color: var(--mainline-saffron-shadow); margin: var(--space-2) 0; font-variant-numeric: tabular-nums; }
.short-name { font-weight: 600; color: var(--mainline-rail-grey); margin-top: -8px; }

.subsec { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--mainline-steel); }
.subsec > h3 { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mainline-rail-grey); display: flex; align-items: center; gap: 8px; }
.count-pill { font-family: var(--font-body); font-size: 11px; font-weight: 700; background: var(--mainline-steel); color: var(--mainline-navy); padding: 1px 8px; border-radius: 10px; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-2) 0; }
.chip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 12px; cursor: pointer; line-height: 1.3; }
.chip--scaleup { background: transparent; color: var(--mainline-navy); border: 1px solid var(--mainline-steel); }
.chip--scaleup:hover { border-color: var(--mainline-saffron); }
.chip--modality { color: var(--mainline-white); background: var(--chip-color, var(--mainline-rail-grey)); border: 1px solid transparent; }

/* counts grid */
.count-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin: var(--space-3) 0; }
@media (min-width: 560px) { .count-grid { grid-template-columns: repeat(4, 1fr); } }
.count { border-top: 2px solid var(--mainline-navy); padding-top: 6px; }
.count-num { display: block; font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--mainline-navy); }
.count-label { font-size: 11px; color: var(--mainline-rail-grey); }

/* facts + sources */
.fact { margin: var(--space-2) 0; }
.fact-head { display: flex; align-items: baseline; gap: 8px; }
.fact-value { font-family: var(--font-display); font-size: 22px; color: var(--mainline-navy); }
.fact-label { font-size: 13px; color: var(--mainline-rail-grey); margin: 2px 0 4px; }
.fact-cross { font-size: 12px; color: var(--mainline-rail-grey); font-style: italic; margin: 2px 0; }
.source-lines { margin-top: 4px; }
.src { font-size: 12px; line-height: 1.4; color: var(--mainline-rail-grey); margin: 2px 0; display: flex; align-items: baseline; gap: 6px; }
.src a { color: var(--mainline-rail-grey); border-bottom: 1px solid rgba(74,85,104,0.4); }
.src a:hover { color: var(--mainline-navy); border-bottom-color: var(--mainline-saffron); }
.src-dates { color: var(--mainline-rail-grey); opacity: 0.8; }
.tier-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: inline-block; transform: translateY(1px); }
.tier-primary { background: var(--mainline-navy); }
.tier-secondary { background: transparent; border: 1.5px solid var(--mainline-rail-grey); }

.flag-caveat { font-size: 12px; color: var(--mainline-saffron-shadow); background: rgba(201,123,46,0.08); border-left: 2px solid var(--mainline-saffron); padding: 5px 9px; margin: 6px 0; }

/* gated blocks */
.gated-block { position: relative; margin: var(--space-3) 0; border: 1px dashed var(--mainline-steel); padding: var(--space-3); background: var(--mainline-white); }
.gated-title { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mainline-rail-grey); margin: 0 0 var(--space-2); display: flex; align-items: center; gap: 8px; }
.lock-pill { font-size: 10px; font-weight: 700; background: var(--mainline-steel); color: var(--mainline-navy); padding: 1px 7px; border-radius: 9px; letter-spacing: 0; text-transform: none; }
.gated-block.is-locked .gated-content { filter: blur(5px); user-select: none; pointer-events: none; opacity: 0.55; min-height: 40px; }
.gated-block.is-locked .gated-content * { color: var(--mainline-rail-grey) !important; }
body.atlas-unlocked .gated-block .gated-content { filter: none; opacity: 1; pointer-events: auto; user-select: auto; }
.gate-affordance { position: absolute; inset: 0; margin: auto; height: fit-content; width: fit-content; max-width: 90%; display: flex; align-items: center; gap: 8px; background: var(--mainline-navy); color: var(--mainline-paper); border: none; font-family: var(--font-body); font-weight: 600; font-size: 13px; padding: 11px 16px; cursor: pointer; box-shadow: 0 4px 16px rgba(10,37,64,0.25); }
.gate-affordance:hover { background: var(--mainline-ink); outline: 2px solid var(--mainline-saffron); }
.gate-lock { font-size: 15px; }

.gfield { margin: var(--space-2) 0; }
.gfield-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mainline-rail-grey); display: block; margin-bottom: 3px; }
.gfield-text { font-size: 14px; color: var(--mainline-ink); margin: 0; }
.gfield-list { margin: 0; padding-left: 1.1em; font-size: 14px; }
.gfield-list li { margin-bottom: 3px; word-break: break-word; }
.kd-key { color: var(--mainline-rail-grey); }

/* data cards */
.card-list { display: grid; grid-template-columns: 1fr; gap: var(--space-2); margin-top: var(--space-2); }
@media (min-width: 640px) { .card-list { grid-template-columns: 1fr 1fr; } }
.data-card { text-align: left; background: var(--mainline-white); border: 1px solid var(--mainline-steel); border-top: 2px solid var(--mainline-navy); padding: var(--space-2); cursor: pointer; display: flex; flex-direction: column; gap: 4px; font-family: var(--font-body); }
.data-card:hover { border-color: var(--mainline-saffron); border-top-color: var(--mainline-navy); }
.data-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.data-card-name { font-family: var(--font-display); font-size: 17px; color: var(--mainline-navy); }
.mini-flag { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: var(--mainline-saffron); color: var(--mainline-white); padding: 1px 6px; border-radius: 8px; }
.data-card-type { font-size: 11px; color: var(--mainline-rail-grey); text-transform: capitalize; }
.data-card-mandate { font-size: 13px; color: var(--mainline-ink); line-height: 1.45; }

.filter-note { font-size: 13px; line-height: 1.5; color: var(--mainline-ink); background: rgba(201,123,46,0.08); border-left: 2px solid var(--mainline-saffron); padding: 8px 12px; margin: var(--space-2) 0; }

/* pin list (city rows in state panel) */
.pin-list { display: flex; flex-direction: column; gap: 0; margin-top: var(--space-2); }
.pin-row { display: flex; align-items: flex-start; gap: 10px; text-align: left; background: none; border: none; border-bottom: 1px solid var(--mainline-steel); padding: var(--space-2) 0; cursor: pointer; font-family: var(--font-body); width: 100%; }
.pin-row:hover .pin-name { border-bottom: 1px solid var(--mainline-saffron); }
.pin-row .pin-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mainline-saffron); border: 2px solid var(--mainline-white); box-shadow: 0 0 0 1px var(--mainline-steel); margin-top: 5px; flex: 0 0 auto; }
.pin-body { display: flex; flex-direction: column; }
.pin-name { font-family: var(--font-display); font-size: 17px; color: var(--mainline-navy); }
.pin-meta { font-size: 12px; color: var(--mainline-rail-grey); }

/* tender table */
.tender-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: var(--space-2); }
.tender-table thead th { background: var(--mainline-steel); text-align: left; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mainline-ink); padding: 8px; font-weight: 600; }
.tender-table tbody td { padding: 9px 8px; border-bottom: 1px solid var(--mainline-steel); vertical-align: top; }
.tender-row { cursor: pointer; }
.tender-row:hover { background: rgba(201,123,46,0.06); }
.tender-row:focus-visible { outline: 2px solid var(--mainline-saffron); outline-offset: -2px; }
.t-scope { min-width: 160px; }
.t-value { white-space: nowrap; font-variant-numeric: tabular-nums; }
.status-pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 9px; text-transform: capitalize; background: var(--mainline-steel); color: var(--mainline-navy); white-space: nowrap; }
.status-open, .status-shortlist-bids-submitted { background: rgba(62,90,86,0.16); color: var(--atlas-verdigris); }
.status-awarded { background: rgba(10,37,64,0.10); color: var(--mainline-navy); }

.kavach-flag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--mainline-white); background: var(--chip-color, var(--mainline-saffron)); padding: 3px 10px; border-radius: 11px; margin: var(--space-1) 0; }

/* ---------- Slide-over ---------- */
.slideover-backdrop { position: fixed; inset: 0; background: rgba(14,26,43,0.45); opacity: 0; visibility: hidden; transition: opacity 200ms ease; z-index: 300; }
.slideover-backdrop.open { opacity: 1; visibility: visible; }
.slideover { position: fixed; top: 0; right: 0; height: 100%; width: min(520px, 94vw); background: var(--mainline-paper); border-left: 3px solid var(--mainline-saffron); transform: translateX(100%); transition: transform 240ms ease; z-index: 310; overflow-y: auto; box-shadow: -8px 0 30px rgba(0,0,0,0.18); }
.slideover.open { transform: translateX(0); }
.slideover-close { position: absolute; top: 12px; right: 14px; font-size: 28px; line-height: 1; background: none; border: none; color: var(--mainline-rail-grey); cursor: pointer; }
.slideover-close:hover { color: var(--mainline-navy); }
.slideover-inner { padding: var(--space-5) var(--space-4) var(--space-6); }
.slideover-inner > h2 { font-size: var(--type-h2); }
.link-btn { background: none; border: none; border-bottom: 1px solid var(--mainline-navy); color: var(--mainline-navy); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.link-btn:hover { border-bottom-color: var(--mainline-saffron); }

/* ---------- Gate modal ---------- */
.gate-modal-overlay { position: fixed; inset: 0; background: rgba(14,26,43,0.55); display: flex; align-items: center; justify-content: center; z-index: 400; padding: var(--space-3); }
.gate-modal-overlay[hidden] { display: none; }
.gate-modal { position: relative; background: var(--mainline-paper); max-width: 460px; width: 100%; padding: var(--space-5) var(--space-4) var(--space-4); border-top: 3px solid var(--mainline-saffron); }
.gate-close { position: absolute; top: 8px; right: 12px; font-size: 26px; background: none; border: none; color: var(--mainline-rail-grey); cursor: pointer; }
.gate-copy { font-size: 14px; line-height: 1.55; color: var(--mainline-ink); }
.gate-form { display: flex; flex-direction: column; gap: 8px; margin-top: var(--space-2); }
.gate-form label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mainline-rail-grey); }
.gate-form input { font-family: var(--font-body); font-size: 15px; padding: 12px 14px; border: 1px solid var(--mainline-steel); border-bottom: 1px solid var(--mainline-rail-grey); background: var(--mainline-white); }
.gate-form input:focus { outline: 2px solid var(--mainline-saffron); outline-offset: 1px; }
.cta-primary { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--mainline-paper); background: var(--mainline-navy); padding: 13px 20px; border: 1px solid var(--mainline-navy); cursor: pointer; text-align: center; }
.cta-primary:hover { background: var(--mainline-ink); border-color: var(--mainline-saffron); }
.gate-submit { margin-top: 4px; }
.gate-error { color: #9b2226; font-size: 13px; margin: 0; }
.gate-fineprint { margin: 4px 0 0; }

/* ---------- Notify form (in-progress regions) ---------- */
.notify-form { margin: var(--space-3) 0; }
.notify-form label { font-size: 12px; font-weight: 600; color: var(--mainline-rail-grey); display: block; margin-bottom: 6px; }
.notify-row { display: flex; gap: 8px; flex-wrap: wrap; }
.notify-row input { flex: 1 1 200px; font-family: var(--font-body); font-size: 15px; padding: 11px 14px; border: 1px solid var(--mainline-steel); border-bottom: 1px solid var(--mainline-rail-grey); background: var(--mainline-white); }
.notify-row input:focus { outline: 2px solid var(--mainline-saffron); outline-offset: 1px; }
.notify-thanks { color: var(--mainline-saffron-shadow); font-weight: 600; }
.next-list { margin-top: var(--space-3); }

/* ---------- Mobile region list ---------- */
.mobile-regions { display: none; margin-bottom: var(--space-4); }
.mobile-regions-title { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mainline-rail-grey); margin: 0 0 var(--space-2); }
.mobile-region { display: flex; align-items: center; justify-content: space-between; width: 100%; background: var(--mainline-white); border: 1px solid var(--mainline-steel); border-left: 3px solid var(--mainline-navy); padding: 12px 14px; margin-bottom: 8px; cursor: pointer; font-family: var(--font-display); font-size: 17px; color: var(--mainline-navy); }
.mobile-region-status { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 9px; }
.mobile-region-status.status-live { background: rgba(62,90,86,0.16); color: var(--atlas-verdigris); }
.mobile-region-status.status-in_progress { background: var(--mainline-steel); color: var(--mainline-rail-grey); }

@media (max-width: 919px) {
  /* On narrow screens the cartography degrades to a searchable state list. */
  .map-pane { display: none; }
  .mobile-regions { display: block; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--mainline-navy); color: var(--mainline-paper); padding: var(--space-5) 0; margin-top: var(--space-5); }
.site-footer .positioning { font-family: var(--font-display); font-style: italic; font-size: clamp(16px, 2vw, 20px); color: var(--mainline-paper); margin: 0 0 var(--space-2); }
.site-footer .positioning .mark { color: var(--mainline-saffron); }
.site-footer .meta { font-size: 12px; color: rgba(247,245,240,0.65); margin: 0; max-width: 70ch; }