/* thedatabulletin v5 - /states page styles (Phase 4, 2026-08-29). Everything scoped under .page-states,
   every color an atlas token, so html.mode-dark switches the whole page through atlas.css. */

.page-states .section-lede { color: var(--ink-2); max-width: 60ch; margin: 6px 0 18px; text-wrap: pretty; }
.page-states .picker-row { margin: 0; justify-content: flex-end; }
.page-states .picker-row .pill { align-self: end; }
.page-states .chips { min-height: 0; margin: 0 0 10px; padding: 0; list-style: none; }
.page-states .ctl-wrap { align-items: end; }
.page-states #map-hover { min-height: 1.4em; }
.page-states .chips:empty { display: none; }
.page-states .chart.tall { height: 520px; }
@media (max-width: 720px) { .page-states .chart.tall { height: clamp(260px, 66vw, 360px); } .page-states .picker-row { justify-content: flex-start; } }
.page-states #map-readout { min-height: 1.4em; }

/* ---------- the ledger: one block per selected state, side by side when comparing ---------- */
.page-states .ledger { align-items: start; }
.page-states .ledger:not(.compare) { grid-template-columns: 1fr; }
.page-states .ledger .block + .block { margin-top: 0; padding-top: 0; border-top: 0; }
.page-states .ledger .block { min-width: 0; }
.page-states .ledger .state.empty { padding: 14px 16px; background: var(--surface); border: 1px dashed var(--rule); border-radius: var(--r); }
.page-states .ledger .stat-row { grid-template-columns: 1fr; align-items: start; margin-bottom: 12px; }
.page-states .ledger .state-name { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.page-states .ledger .state-name h3 { margin: 0; font-size: 1.3rem; }
.page-states .ledger .state-name .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--blue)); flex: none; }
.page-states .ledger .state-name .closecol { margin-left: auto; }
.page-states .closecol { border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); border-radius: var(--r-pill); padding: 6px 12px; font: inherit; font-size: 0.85rem; cursor: pointer; min-height: 36px; }
.page-states .closecol:hover { color: var(--clay-text); border-color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .page-states .ledger .block.col-enter { animation: ledgerIn 0.4s var(--ease); }
  @keyframes ledgerIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ---------- receipts: the silhouette ---------- */
.page-states .shape-wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.page-states .shape-svg { flex: 1 1 240px; max-width: 320px; }
.page-states .shape-svg svg { width: 100%; height: auto; display: block; }
.page-states .seg-rect { transition: opacity 0.15s ease; }
.page-states .shape-legend { flex: 1 1 220px; list-style: none; margin: 0; padding: 0; }
.page-states .shape-legend li { display: flex; align-items: baseline; gap: 8px; font-size: 0.9rem; padding: 4px 4px; border-radius: var(--r); }
.page-states .shape-legend li:hover { background: var(--rule-soft); }
.page-states .shape-legend .swatch { width: 12px; height: 12px; border-radius: 2px; flex: none; align-self: center; background: var(--c, var(--blue)); }
.page-states .shape-legend .lname { flex: 1; }
.page-states .shape-legend .lpct { font-weight: 600; font-variant-numeric: tabular-nums; }
.page-states .shape-legend .lval { font-size: 0.8rem; color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 6ch; text-align: right; }

/* ---------- the paycheck: one dollar as a bar ---------- */
.page-states .paybar { display: flex; width: 100%; height: 44px; margin-top: 8px; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.page-states .pay-seg { height: 100%; min-width: 3px; background: var(--c, var(--blue)); }
.page-states .pay-seg.pay-keep { background: var(--rule-soft); }
.page-states .paylegend { list-style: none; margin: 10px 0 0; padding: 0; }
.page-states .paylegend li { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; padding: 3px 4px; }
.page-states .paylegend .swatch { width: 12px; height: 12px; border-radius: 2px; flex: none; background: var(--c, var(--blue)); }
.page-states .paylegend .swatch-keep { background: var(--rule-soft); border: 1px solid var(--rule); }
.page-states .paylegend .lname { flex: 1; }
.page-states .paylegend .lpct { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- the tab: stat tiles ---------- */
.page-states .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 18px; }
.page-states .tile { background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--shadow); }
.page-states .tile .tv { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--blue-ink); font-variant-numeric: tabular-nums; }
.page-states .tile .tl { font-size: 0.82rem; color: var(--ink-2); margin-top: 3px; }
.page-states .ledger h4 { font-size: 1rem; margin: 6px 0 2px; }
@media (max-width: 480px) { .page-states .tiles { grid-template-columns: 1fr; } }

/* ---------- about tables for multi-column data ---------- */
.page-states details.about table td:not(:first-child), .page-states details.about table th:not(:first-child) { text-align: right; padding-left: 14px; }

/* three rates side by side, each on its own base (2026-09-05): the bar is a scale, not a
   dollar being divided, so the segments are separated rather than stacked flush. */
.page-states .paybar.rates { display: flex; flex-direction: column; gap: 6px; height: auto; }
.page-states .paybar.rates .pay-seg { height: 14px; border-radius: 3px; background: var(--c); }