/* Reusable components: fields, chips, badges, profile rows, legend, dialog. */

.field { margin-bottom: 0.9rem; }
.field > label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.3rem;
}
.field select, .field input[type="search"] {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--ink);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 500;
}
.btn:hover { background: var(--bg-hover); }
.btn[aria-pressed="true"] { background: var(--bg-inset); border-color: var(--ink-faint); font-weight: 600; }
.btn-sm { padding: 0.22rem 0.55rem; font-size: 0.78rem; }
.btn svg { width: 1em; height: 1em; }

/* domain chips */
.domain-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.domain-chips .btn { border-left: 3px solid var(--chip, var(--line)); }
.domain-chips .btn[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--chip, var(--line)); }

/* indicator list */
.indicator-list { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.indicator-list button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.35rem 0.5rem;
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 0.88rem;
}
.indicator-list button:hover { background: var(--bg-hover); color: var(--ink); }
.indicator-list button[aria-pressed="true"] {
  background: var(--bg-inset);
  color: var(--ink);
  font-weight: 600;
}
.indicator-list .cov { float: right; color: var(--ink-faint); font-size: 0.74rem; }

/* status badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.45rem;
  border-radius: 99px;
  border: 1px solid currentColor;
  vertical-align: middle;
  white-space: nowrap;
}
.badge-survey_estimate, .badge-administrative, .badge-derived, .badge-measured { color: var(--badge-measured); }
.badge-modeled_estimate { color: var(--badge-modeled); }
.badge-proxy { color: var(--badge-proxy); }
.badge-crosswalked { color: var(--badge-crosswalk); }
.badge-county_level { color: var(--badge-proxy); }
.badge-missing, .badge-suppressed, .badge-unreliable, .badge-not_available, .badge-not_significant,
.badge-source_unavailable, .badge-incompatible_geography { color: var(--badge-missing); }

/* profile */
.profile-head { margin-bottom: 0.75rem; }
.profile-head h3 { margin-bottom: 0.1rem; }
.profile-head .geo-path { font-size: 0.8rem; color: var(--ink-soft); }
.coverage-note {
  font-size: 0.78rem;
  color: var(--ink-soft);
  background: var(--bg-inset);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  margin: 0.6rem 0 1rem;
}
.domain-section { margin-bottom: 1.2rem; }
.domain-section > h4 {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  border-bottom: 2px solid var(--accent, var(--line));
  padding-bottom: 0.25rem;
  margin-bottom: 0.4rem;
}
.domain-section > h4 .domain-sub { font-family: var(--font-sans); font-weight: 400; font-size: 0.72rem; color: var(--ink-faint); }
.ind-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 0.75rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.ind-row:last-child { border-bottom: 0; }
.ind-row .ind-label { font-size: 0.85rem; color: var(--ink-soft); }
.ind-row .ind-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.ind-row .ind-value.is-null { color: var(--ink-faint); font-weight: 400; font-style: italic; }
.ind-row .ind-context {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.ind-row .moe { color: var(--ink-faint); font-weight: 400; font-size: 0.78rem; }
.ind-row .unit, .compare-row .unit { color: var(--ink-faint); font-weight: 400; font-size: 0.74rem;
  white-space: normal; overflow-wrap: anywhere; }

/* quartile strip (inline SVG) */
.qstrip { flex: 0 0 auto; }
.qstrip rect { fill: var(--bg-inset); stroke: var(--line); }
.qstrip .iqr { fill: var(--line); stroke: none; }
.qstrip .median { stroke: var(--ink-faint); }
.qstrip .marker { fill: var(--select); stroke: none; }

/* legend */
.legend-title { font-weight: 600; margin-bottom: 0.3rem; }
.legend-ramp { position: relative; display: flex; height: 10px; border-radius: 3px; overflow: visible; margin: 0.3rem 0 0.15rem; }
.legend-ramp span:first-child { border-radius: 3px 0 0 3px; }
.legend-ramp span:last-of-type { border-radius: 0 3px 3px 0; }
.legend-zero { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); }
.legend-ramp span { flex: 1; }
.legend-scale { display: flex; justify-content: space-between; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.legend-nodata { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; color: var(--ink-soft); }
.legend-nodata .swatch {
  width: 14px; height: 14px;
  border-radius: 3px;
  background: var(--map-nodata);   /* flat, exactly as the map paints it */
  border: 1px solid var(--line);
}
.legend-water { margin-top: 0.25rem; }
.legend-water .swatch { background: var(--map-water); }
.legend-status { margin-top: 0.45rem; }

/* dialog / methods panel */
.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg-panel);
  z-index: 2;
}
.dialog-body { padding: 1rem 1.25rem 1.5rem; overflow-y: auto; max-height: calc(88vh - 7rem); }
.dialog-tabs { display: flex; gap: 0.2rem; padding: 0.4rem 1.25rem 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.dialog-tabs button {
  border: 0;
  background: none;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  font-size: 0.88rem;
}
.dialog-tabs button[aria-selected="true"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--economic);
}

/* map popup */
.maplibregl-popup-content {
  background: var(--bg-panel) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  font-family: var(--font-sans);
  padding: 0.5rem 0.75rem !important;
  font-size: 0.82rem;
}
.maplibregl-popup-tip { display: none; }

/* compare cards */
.pick-card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1rem;
}
.compare-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 88px 88px;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.86rem;
}
.compare-row .a, .compare-row .b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.compare-row .a.is-null, .compare-row .b.is-null { color: var(--ink-faint); font-weight: 400; font-style: italic; }
.compare-legend { display: flex; gap: 1.25rem; font-size: 0.8rem; color: var(--ink-soft); margin: 0.4rem 0 0.8rem; }
.compare-legend .key-a::before, .compare-legend .key-b::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 0.35rem;
}
.compare-legend .key-a::before { background: var(--formal); border-radius: 50%; }
.compare-legend .key-b::before { background: var(--civic); border-radius: 0; }

/* stats readout (relationships) */
.stat-cards { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; }
.stat-card {
  background: var(--bg-inset);
  border-radius: var(--radius);
  padding: 0.5rem 0.8rem;
  min-width: 100px;
}
.stat-card .stat-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
.stat-card .stat-label .stat-sym { text-transform: none; }
/* Plain-language reading of a correlation: more legible than the muted
   source-note it precedes, so non-specialists read it first. */
.exp-plain { color: var(--ink); font-size: 0.9rem; line-height: 1.5;
  margin-bottom: 0.7rem; }
.exp-plain strong { color: var(--accent, var(--ink)); }
/* Thesis annotation must break to its own line outside .orient too
   (the methods dialog renders the same thesis + <small> structure). */
.thesis small { display: block; font-family: var(--font-sans); margin-top: 0.5rem; }
.stat-card .stat-value { font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums; }

.callout {
  border-left: 3px solid var(--outcomes);
  background: var(--bg-inset);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0.75rem 0;
}
.callout.warn { border-left-color: var(--civic); }

/* accessible data table region */
.data-table-wrap { max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); margin-top: 0.75rem; }
.data-table-wrap table { font-size: 0.82rem; }
.data-table-wrap thead th { position: sticky; top: 0; background: var(--bg-panel); z-index: 1; }

/* panel loading + error states */
.panel-loading {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 1.1rem 0.2rem; color: var(--ink-soft); font-size: 0.9rem;
}
.panel-loading-spinner {
  width: 0.85rem; height: 0.85rem; flex: none;
  border: 2px solid var(--line);
  border-top-color: var(--ink-soft);
  border-radius: 50%;
  animation: panel-spin 0.7s linear infinite;
}
@keyframes panel-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .panel-loading-spinner { animation-duration: 2.4s; }
}
.panel-error {
  border: 1px solid var(--line);
  border-left: 3px solid var(--civic);
  border-radius: var(--radius);
  background: var(--bg-inset);
  padding: 0.8rem 0.9rem;
  margin: 0.5rem 0;
}
.panel-error-msg { margin: 0 0 0.6rem; font-size: 0.9rem; }

/* domain accent helpers */
.acc-formal { --accent: var(--formal); --chip: var(--formal); }
.acc-institutional { --accent: var(--institutional); --chip: var(--institutional); }
.acc-economic { --accent: var(--economic); --chip: var(--economic); }
.acc-relational { --accent: var(--relational); --chip: var(--relational); }
.acc-civic { --accent: var(--civic); --chip: var(--civic); }
.acc-ecological { --accent: var(--ecological); --chip: var(--ecological); }
.acc-outcomes { --accent: var(--outcomes); --chip: var(--outcomes); }
.acc-context { --accent: var(--context); --chip: var(--context); }

/* concept-chain flow (framework panel) */
.concept-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.4rem;
  margin: 0.6rem 0 0.4rem;
}
.concept-chain .step {
  flex: 1 1 130px;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.6rem;
}
.concept-chain .step .step-label { font-weight: 650; font-size: 0.88rem; }
.concept-chain .step .step-detail { font-size: 0.74rem; color: var(--ink-faint); }
.concept-chain .arrow {
  align-self: center;
  color: var(--ink-faint);
  font-size: 1.1rem;
  flex: 0 0 auto;
}
.concept-chain .step.is-habitat { border-color: var(--economic); border-width: 2px; }

.framing-block { border-left: 3px solid var(--relational); padding: 0.1rem 0 0.1rem 0.7rem; margin: 0.6rem 0; }
.framing-block h4 { margin: 0 0 0.2rem; font-family: var(--font-sans); font-size: 0.9rem; }
.framing-block p { margin: 0 0 0.3rem; }
/* institutional vs associational tag on indicator labels — a kind, not a grade */
.order-kind { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px; padding: 0 0.4em; vertical-align: 0.1em; white-space: nowrap; }

.source-note { font-size: 0.74rem; color: var(--ink-faint); }
details.ind-detail { font-size: 0.8rem; margin-top: 0.2rem; }
details.ind-detail summary { cursor: pointer; color: var(--link); font-size: 0.76rem; }
details.ind-detail .detail-body { background: var(--bg-inset); border-radius: var(--radius); padding: 0.5rem 0.7rem; margin-top: 0.3rem; }

/* ---- Shareable tract card (card.js) ---- */
.type-line { font-size: 0.82rem; margin: 0 0 0.8rem; }
.card-empty { max-width: 34rem; }
.tract-card {
  max-width: 820px;
  margin: 0 auto;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem 1.4rem 1rem;
}
.card-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.card-kicker {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.15rem;
}
.card-head {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start;
  border-bottom: 1px solid var(--line); padding-bottom: 0.8rem; margin-bottom: 0.9rem;
}
.card-head h2 { margin: 0 0 0.2rem; }
.card-head .geo-path { font-size: 0.82rem; color: var(--ink-soft); margin: 0; }
.card-locator { width: 150px; height: auto; max-height: 190px; }
.card-locator .loc-other { fill: var(--bg-inset); stroke: var(--line); stroke-width: 0.6; }
.card-locator .loc-target { fill: var(--select); fill-opacity: 0.55; stroke: var(--select); stroke-width: 1.4; }
.card-type { margin-bottom: 0.9rem; }
.card-typename { margin: 0 0 0.25rem; }
.card-type > p { margin: 0 0 0.35rem; }
.card-similar { display: inline-block; vertical-align: top; width: 49%; min-width: 15rem; margin-top: 0.4rem; }
.card-similar h4, .card-standout h4, .card-subhead { font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; margin: 0 0 0.25rem; }
.card-similar ul, .card-standout ul { margin: 0; padding-left: 1.1rem; font-size: 0.82rem; }
.card-standout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  background: var(--bg-inset); border-radius: 8px; padding: 0.6rem 0.8rem; margin-bottom: 1rem;
}
.card-standout .card-p { color: var(--ink-faint); }
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.4rem; }
.card-order > h3 {
  display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.95rem;
  border-bottom: 2px solid var(--accent, var(--line)); padding-bottom: 0.2rem; margin: 0 0 0.4rem;
}
.card-order .domain-sub { font-family: var(--font-sans); font-weight: 400; font-size: 0.7rem; color: var(--ink-faint); }
.card-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 5.6rem; gap: 0.6rem;
  align-items: baseline; padding: 0.22rem 0; border-bottom: 1px solid var(--line-soft);
  font-size: 0.8rem;
}
.card-label { color: var(--ink-soft); }
.card-status { color: var(--ink-faint); font-size: 0.7rem; }
.card-val { font-weight: 600; text-align: right; white-space: nowrap; }
.card-val .is-null { font-weight: 400; color: var(--ink-faint); }
.card-unit { font-weight: 400; font-size: 0.68rem; color: var(--ink-faint); }
.card-pos { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ink-faint); }
.card-pnum { font-variant-numeric: tabular-nums; min-width: 1.6rem; text-align: right; font-size: 0.74rem; }
.card-key { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--ink-faint); margin: 0 0 0.6rem; }
.pbar { width: 3.4rem; height: 8px; flex: none; }
.pbar-track { fill: var(--line); }
.pbar-mid { stroke: var(--ink-faint); stroke-width: 1; }
.pbar-dot { fill: var(--accent, var(--ink)); }
.card-outcomes { margin-top: 1rem; }
.card-foot { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 0.6rem; font-size: 0.74rem; color: var(--ink-soft); }
.card-foot p { margin: 0 0 0.35rem; }
.card-credits, .card-url { color: var(--ink-faint); word-break: break-all; }
@media (max-width: 640px) {
  .tract-card { padding: 1rem 0.9rem; }
  .card-head { grid-template-columns: 1fr; }
  .card-locator { width: 120px; }
  .card-grid, .card-standout { grid-template-columns: 1fr; }
  .card-similar { width: 100%; }
}
.card-habitat { font-size: 0.82rem; color: var(--ink-soft); }

/* ---- Find a place ---- */
.place-row { display: flex; gap: 0.35rem; }
.place-row input { flex: 1; min-width: 0; font: inherit; padding: 0.35rem 0.5rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-panel); color: var(--ink); }
.place-search .source-note { margin: 0.3rem 0 0; }
.place-list { list-style: none; margin: 0.35rem 0 0; padding: 0; font-size: 0.85rem; }
.place-list li { margin: 0.2rem 0; color: var(--ink-soft); }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--link);
  text-decoration: underline; cursor: pointer; }
.btn-comparison { border-style: dashed; }

/* ---- reading aids: key measures first, plain-language guides ---- */
.indicator-list .list-kicker { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-faint); padding: 0.2rem 0.5rem 0.1rem; }
details.more-measures { margin-top: 0.3rem; }
details.more-measures > summary { cursor: pointer; color: var(--link); font-size: 0.82rem;
  padding: 0.35rem 0.5rem; }
details.more-measures > .indicator-list { margin-top: 0.1rem; }
.domain-section details.more-measures > summary { padding-left: 0; }
details.how-to-read, details.why-careful { margin: 0.4rem 0 0.8rem; font-size: 0.86rem; }
details.how-to-read > summary, details.why-careful > summary { cursor: pointer; color: var(--link); }
details.how-to-read[open], details.why-careful[open] { background: var(--bg-inset);
  border-radius: var(--radius); padding: 0.5rem 0.75rem; }
details.how-to-read p, details.why-careful p { margin: 0.4rem 0; }
.how-kicker { font-weight: 600; margin-top: 0.6rem !important; }
dl.plain-stats { margin: 0.4rem 0 0; }
dl.plain-stats dt { font-weight: 600; margin-top: 0.5rem; }
dl.plain-stats dd { margin: 0.1rem 0 0; color: var(--ink-soft); line-height: 1.45; }
.stat-card .stat-sub { font-size: 0.74rem; color: var(--ink-soft); }
.exp-kinds { margin: 0.4rem 0 0.6rem; }

/* Relationships: pre-chosen questions, strongest link first */
.exp-start { margin: 1rem 0 1.25rem; }
.exp-start h3 { margin-bottom: 0.2rem; }
.exp-start-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.exp-start-item { display: grid; gap: 0.2rem; width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.6rem 0.75rem; color: var(--ink); font: inherit; }
.exp-start-item:hover { border-color: var(--ink-faint); }
.exp-start-item[aria-pressed="true"] { border-color: var(--ink-soft); box-shadow: inset 3px 0 0 var(--ink-soft); }
.exp-start-item .q { font-weight: 600; }
.exp-start-item .a { font-size: 0.9rem; }
.exp-start-item .rnum { color: var(--ink-faint); font-size: 0.8rem; white-space: nowrap; }
.exp-start-item .c { color: var(--ink-soft); font-size: 0.8rem; }
@media (min-width: 900px) { .exp-start-list { grid-template-columns: 1fr 1fr; } }
.exp-start-more { grid-column: 1 / -1; }
.exp-start-more .exp-start-list { margin-top: 0.4rem; }

/* ---- "At a glance": key positions beside similar places ---- */
.glance { margin: 0.9rem 0 1rem; padding: 0.75rem 0.85rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg-inset); }
.glance > h3 { margin: 0 0 0.2rem; }
.glance-key { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%;
  vertical-align: -0.05rem; margin-left: 0.15rem; }
.glance-key-here { background: var(--ink); }
.glance-key-peer { border: 2px solid var(--ink-soft); }
.glance-gaps { margin: 0.6rem 0 0.8rem; }
.glance-gaps-h { font-weight: 650; margin: 0 0 0.35rem; }
.glance-gaps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.glance-gaps li { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem; align-items: start;
  border-left: 3px solid var(--accent); padding: 0.15rem 0 0.15rem 0.55rem; font-size: 0.88rem; }
.gap-dir { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 0.05rem 0.45rem;
  margin-top: 0.1rem; }
.glance-lanes { display: grid; gap: 0.3rem; margin-top: 0.5rem; }
.glance-lane { display: grid; grid-template-columns: minmax(8rem, 42%) 1fr; gap: 0.6rem; align-items: center;
  font-size: 0.8rem; }
.glance-label { color: var(--ink-soft); border-left: 3px solid var(--accent); padding-left: 0.4rem;
  line-height: 1.2; }
.glance-track { position: relative; height: 1rem; }
.glance-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  margin-top: -1px; background: var(--line); border-radius: 2px; }
.glance-track::after { content: ""; position: absolute; left: 50%; top: 15%; bottom: 15%; width: 1px;
  background: var(--ink-faint); opacity: 0.6; }
.glance-track i { position: absolute; top: 50%; left: var(--x); width: 0.8rem; height: 0.8rem;
  margin: -0.4rem 0 0 -0.4rem; border-radius: 50%; animation: glance-in 0.7s ease-out both; }
.glance-peer { border: 2px solid var(--ink-soft); background: var(--bg-inset); z-index: 1; }
.glance-here { background: var(--accent); box-shadow: 0 0 0 2px var(--bg-inset); z-index: 2; }
.glance-none { font-size: 0.72rem; color: var(--ink-faint); position: absolute; left: 0; top: 0; }
@keyframes glance-in { from { left: 50%; opacity: 0; } to { left: var(--x); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .glance-track i { animation: none; } }
.exp-mine { margin: 0.2rem 0 0.6rem; padding: 0.4rem 0.6rem; border: 1px dashed var(--ink-faint);
  border-radius: var(--radius); color: var(--ink); }

/* ---- icon counts ("3 in 10 …") ---- */
.icon-counts { margin: 0.8rem 0; display: grid; gap: 0.45rem; }
.icon-count { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: center; }
.icon-row { display: inline-flex; gap: 1px; }
.icon-row svg { width: 1.05rem; height: 1.05rem; }
.icon-row .icon-on { fill: var(--accent); }
.icon-row .icon-off { fill: var(--line); }
.icon-text { font-size: 0.86rem; line-height: 1.3; }
.icon-exact { color: var(--ink-faint); font-size: 0.78rem; white-space: nowrap; }
@media (max-width: 420px) { .icon-count { grid-template-columns: 1fr; gap: 0.15rem; } }

/* ---- then and now (slope charts) ---- */
.then-now { margin: 0.9rem 0 1rem; }
.then-now > h3 { margin: 0 0 0.2rem; }
.slopes { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.6rem; margin-top: 0.5rem; }
.slope { margin: 0; padding: 0.45rem 0.5rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-inset); }
.slope-title { font-size: 0.78rem; font-weight: 650; line-height: 1.25; min-height: 2.5em; }
.slope-svg { width: 100%; height: auto; display: block; overflow: visible; }
.slope-axis { stroke: var(--line); stroke-width: 1; }
.slope-moe { stroke: var(--ink-faint); stroke-width: 5; stroke-linecap: round; opacity: 0.35; }
.slope-line { stroke: var(--accent); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; animation: slope-draw 0.9s 0.15s ease-out forwards; }
.slope-line.is-flat { stroke: var(--ink-faint); stroke-dasharray: 4 4; stroke-dashoffset: 0; animation: none;
  opacity: 0; animation: slope-fade 0.6s 0.15s ease-out forwards; }
.slope-dot { fill: var(--accent); }
.slope-end { opacity: 0; animation: slope-fade 0.3s 0.95s ease-out forwards; }
.slope-dot.is-flat { fill: var(--ink-faint); }
.slope-val { font-size: 10px; fill: var(--ink); font-variant-numeric: tabular-nums; }
.slope-year { font-size: 9px; fill: var(--ink-faint); }
.slope-verdict { font-size: 0.76rem; margin: 0.15rem 0 0; color: var(--ink-soft); }
.slope-verdict.is-flat { font-style: italic; }
@keyframes slope-draw { to { stroke-dashoffset: 0; } }
@keyframes slope-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .slope-line, .slope-line.is-flat, .slope-end { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .slope-line.is-flat { stroke-dasharray: 4 4; }
}

/* ---- Relationships: like with like, and the deeper look ---- */
.exp-check { display: flex; gap: 0.45rem; align-items: flex-start; text-transform: none;
  letter-spacing: 0; font-size: 0.9rem; color: var(--ink); font-weight: 600; cursor: pointer; }
.exp-check input { margin-top: 0.2rem; width: 1rem; height: 1rem; accent-color: var(--ink-soft); }
.exp-deeper { margin: 1.4rem 0 0.8rem; }
.exp-deeper > h3 { margin-bottom: 0.2rem; }
.dl-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.dl-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem 0.75rem;
  background: var(--bg-inset); }
.dl-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; margin: 0 0 0.3rem; padding: 0.05rem 0.45rem; border-radius: 999px;
  border: 1px solid var(--ink-faint); color: var(--ink-soft); }
.dl-rank-0 .dl-tag { border-color: var(--relational); color: var(--relational); }
.dl-rank-1 .dl-tag, .dl-rank-2 .dl-tag { border-color: var(--civic); color: var(--civic); }
.dl-title { font-weight: 650; margin: 0 0 0.25rem; }
.dl-sentence { font-size: 0.88rem; margin: 0 0 0.45rem; line-height: 1.45; }
.dl-ranges { display: grid; gap: 0.25rem; }
.dl-range { display: grid; grid-template-columns: 7.5rem 1fr 3.4rem; gap: 0.5rem; align-items: center;
  font-size: 0.76rem; color: var(--ink-soft); }
.dl-range.is-home { color: var(--ink); font-weight: 600; }
.dl-num { text-align: right; font-variant-numeric: tabular-nums; }
.dl-track { position: relative; height: 0.9rem; }
.dl-track i { position: absolute; top: 50%; }
.dl-zero { width: 1px; height: 100%; top: 0 !important; background: var(--ink-faint); }
.dl-bar { height: 4px; margin-top: -2px; border-radius: 2px; background: var(--ink-faint); opacity: 0.55; }
.dl-dot { width: 0.6rem; height: 0.6rem; margin: -0.3rem 0 0 -0.3rem; border-radius: 50%; background: var(--ink-soft); }
.dl-range.is-home .dl-dot { background: var(--ink); }
.dl-range.is-home .dl-bar { background: var(--ink-soft); }
@media (max-width: 420px) { .dl-range { grid-template-columns: 5.6rem 1fr 3rem; } }

/* a button that reads as an inline link (footer) */
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--link);
  text-decoration: underline; cursor: pointer; }
.link-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.print-only { display: none; }
/* a long status badge in a narrow value cell wraps instead of widening the page */
.compare-row .a, .compare-row .b { min-width: 0; overflow-wrap: anywhere; }
.compare-row .badge { white-space: normal; text-align: left; }
/* shown when an outside service (map library, basemap, chart library) is down */
.map-notice { position: relative; z-index: 2; margin: 0.5rem; padding: 0.5rem 0.75rem; background: var(--bg-panel);
  border: 1px solid var(--line); border-radius: var(--radius-lg, 8px); font-size: 0.85rem; color: var(--ink); }
#map .map-notice { position: absolute; top: 0; left: 0; right: 3rem; }