/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* * SAFE MODE: PICO DEFAULTS
 * We are leaving this standard to let Pico.css handle 
 * all colors (Blue/Azure) and Dark Mode automatically.
 */

/* Optional: Slight tweak to ensure text contrast if Pico defaults miss something */
@media (prefers-color-scheme: dark) {
  :root {
    --pico-color: #e3e6e8;
    --pico-background-color: #13171f;
  }
}

/* Design tokens: the --bx-* surface/type system lives in one :root block
   beside the tax-calculator rules (search "Tax-calculator surface system").
   Add new tokens THERE, not in a new :root. */

/* 
 * FLASH NOTIFICATIONS & ALERTS 
 * High-contrast styling for Rails Flash and Devise Errors
 */
.flash {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid transparent; /* Border color defined by specific types below */
  border-radius: var(--pico-border-radius);
  /* Fallback */
  background-color: var(--pico-card-background-color);
  box-shadow: var(--pico-card-box-shadow);
}

/* Header for Devise Error Summaries */
.flash header {
  margin-bottom: 0.5rem;
  font-weight: bold;
  opacity: 1;
}

/* List for Devise Error Details */
.flash ul {
  margin-bottom: 0;
  padding-left: 1rem;
}

/* Success / Notice (Green) */
.flash--notice, .flash--success {
  background-color: #d1e7dd; /* Bootstrap Success BG */
  color: #0f5132;            /* Bootstrap Success Text */
  border-color: #badbcc;
  border-left: 0.5rem solid #0f5132;
}

/* Alert / Error (Red) */
.flash--alert, .flash--error, .flash--danger {
  background-color: #f8d7da; /* Bootstrap Danger BG */
  color: #842029;            /* Bootstrap Danger Text */
  border-color: #f5c2c7;
  border-left: 0.5rem solid #842029;
}

/* Warning (Yellow) */
.flash--warning {
  background-color: #fff3cd;
  color: #664d03;
  border-color: #ffecb5;
  border-left: 0.5rem solid #664d03;
}

/* Info (Blue) */
.flash--info {
  background-color: #cff4fc;
  color: #055160;
  border-color: #b6effb;
  border-left: 0.5rem solid #055160;
}


/* Non-filer warning banner (reuses flash--warning palette) */
.non-filer-banner {
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: #fff3cd;
  color: #664d03;
  border: 1px solid #ffecb5;
  border-left: 0.5rem solid #664d03;
  border-radius: var(--pico-border-radius);
}

.non-filer-banner a {
  color: #664d03;
  font-weight: 600;
}

/* Entity year note banners (non-filing, late-filing) */
.entity-year-note-banner {
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: var(--pico-border-radius);
}

.entity-year-note-banner.non-filing {
  background-color: #fff3cd;
  color: #664d03;
  border: 1px solid #ffecb5;
  border-left: 0.5rem solid #664d03;
}

.entity-year-note-banner.non-filing a {
  color: #664d03;
  font-weight: 600;
}

.entity-year-note-banner.late-filing {
  background-color: #fff3cd;
  color: #664d03;
  border: 1px solid #ffecb5;
  border-left: 0.5rem solid #b8860b;
}

/* Data notes section (YoY anomalies, data quality) */
#data-notes h3 {
  margin-bottom: 0.5rem;
}

.entity-year-note {
  margin-bottom: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--pico-border-radius);
  font-size: 0.9em;
}

.entity-year-note.yoy_anomaly {
  background-color: #f8f9fa;
  color: #495057;
  border: 1px solid #dee2e6;
  border-left: 0.5rem solid #6c757d;
}

.entity-year-note.data_quality {
  background-color: #cfe2ff;
  color: #084298;
  border: 1px solid #b6d4fe;
  border-left: 0.5rem solid #084298;
}

/* Blue info callout for comparability notes */
.comparability-callout {
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: #cfe2ff;
  color: #084298;
  border: 1px solid #b6d4fe;
  border-left: 0.5rem solid #084298;
  border-radius: var(--pico-border-radius);
}

@media (prefers-color-scheme: dark) {
  .comparability-callout {
    background-color: #1a2a47;
    color: #93b4e4;
    border-color: #2d4a7a;
    border-left-color: #6d9be0;
  }
}

/* Amber framing note for fiscally dependent school districts (P6) */
.tax-dependency-note {
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: #fff3cd;
  color: #664d03;
  border: 1px solid #ffecb5;
  border-left: 0.5rem solid #997404;
  border-radius: var(--pico-border-radius);
}

@media (prefers-color-scheme: dark) {
  .tax-dependency-note {
    background-color: #332701;
    color: #ffda6a;
    border-color: #5c4708;
    border-left-color: #ffda6a;
  }
}

.tax-snapshot {
  margin-bottom: 1.5rem;
}

.tax-snapshot-caveat {
  margin-bottom: 0.75rem;
  color: #495057;
}

.tax-snapshot-summary {
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.tax-snapshot-table th,
.tax-snapshot-table td {
  vertical-align: top;
}

.tax-snapshot-row--primary-homeowner-proxy {
  background: #eef6ff;
}

.tax-snapshot-row--primary-homeowner-proxy td:first-child strong {
  color: #084298;
}

.tax-snapshot-row--government-revenue-context {
  color: #495057;
  font-size: 0.95rem;
}

.tax-snapshot-context-note {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: #6c757d;
}

.tax-snapshot-status {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: lowercase;
}

.tax-snapshot-status--loaded {
  background: #d1e7dd;
  color: #0f5132;
}

.tax-snapshot-status--source-verified {
  background: #cfe2ff;
  color: #084298;
}

.tax-snapshot-status--rate-missing {
  background: #fff3cd;
  color: #664d03;
}

.tax-snapshot-status--needs-review {
  background: #f8d7da;
  color: #842029;
}

.tax-snapshot-coming-soon {
  margin: 0;
  padding: 0.75rem 1rem;
  border-left: 0.35rem solid #6c757d;
  background: #f8f9fa;
  color: #495057;
}

/*
 * TAX CALCULATOR
 * Keep the public answer first while preserving audit/source detail below.
 */
.tax-calculator-outcome-summary {
  --tax-outcome-bg: #12211f;
  --tax-outcome-panel: rgba(255, 255, 255, 0.12);
  --tax-outcome-panel-strong: rgba(7, 30, 26, 0.58);
  --tax-outcome-panel-border: rgba(232, 255, 247, 0.34);
  --tax-outcome-accent: #b8f0d8;
  --tax-outcome-text: #f5fbf8;
  --tax-outcome-muted: #e4f1ec;
  --tax-outcome-subtle: #c7ddd5;
  --tax-stack-surface: #f6f9ff;
  --tax-stack-row-bg: #ffffff;
  --tax-stack-row-border: #d6e3f5;
  --tax-stack-row-accent: #2f66b3;
  --tax-stack-row-text: #10233f;
  --tax-stack-row-muted: #4a6284;
  --tax-stack-chip-bg: #eef5ff;
  --tax-stack-chip-text: #17365f;
  --tax-stack-chip-warning-bg: #fff3d1;
  --tax-stack-chip-muted-bg: #eef3f8;

  margin: 1.5rem 0;
  padding: clamp(1rem, 3vw, 1.75rem);
  border: 1px solid rgba(143, 216, 189, 0.28);
  border-radius: 1.25rem;
  color: var(--tax-outcome-text);
  background:
    radial-gradient(circle at top left, rgba(143, 216, 189, 0.23), transparent 34rem),
    linear-gradient(135deg, var(--tax-outcome-bg), #182c36 62%, #213627);
  box-shadow: 0 1.25rem 3rem rgba(18, 33, 31, 0.18);
}

.tax-calculator-outcome-summary h2,
.tax-calculator-outcome-summary p {
  color: inherit;
}

.tax-calculator-outcome-summary-copy {
  max-width: 48rem;
  margin-bottom: 1rem;
}

.tax-calculator-address-panel {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--tax-outcome-panel-border);
  border-radius: 1rem;
  background: var(--tax-outcome-panel-strong);
}

.tax-calculator-address-panel h2,
.tax-calculator-jurisdiction-summary h2 {
  font-size: 1rem;
}

.tax-calculator-address-panel dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0;
}

.tax-calculator-address-panel dt {
  color: var(--tax-outcome-muted);
  font-weight: 700;
}

.tax-calculator-address-panel dd {
  margin: 0;
  color: var(--tax-outcome-text);
}

.tax-calculator-metro-source-status {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--tax-outcome-panel-border);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.1);
}

.tax-calculator-metro-source-status h2 {
  font-size: 1rem;
}

.tax-metro-target-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.6rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

.tax-metro-target-card {
  padding: 0.75rem;
  border: 1px solid var(--tax-outcome-panel-border);
  border-radius: 0.8rem;
  background: var(--tax-outcome-panel-strong);
}

.tax-metro-target-card strong,
.tax-metro-target-card span {
  display: block;
}

.tax-metro-target-card span,
.tax-metro-target-card dt {
  color: var(--tax-outcome-muted);
  font-size: 0.78rem;
}

.tax-metro-target-card dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15rem 0.55rem;
  margin: 0.6rem 0;
}

.tax-metro-target-card dd {
  margin: 0;
}

.tax-metro-target-card p {
  margin: 0;
  font-size: 0.85rem;
}

.tax-sales-comparison-income-summary .tax-calculator-eyebrow {
  color: inherit;
}

.tax-calculator-eyebrow {
  margin-bottom: 0.25rem;
  color: var(--tax-outcome-accent, var(--bx-ink-muted));
  font-size: var(--bx-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tax-outcome-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
}

.tax-outcome-card {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--tax-outcome-panel-border);
  border-radius: 1rem;
  background: var(--tax-outcome-panel);
  backdrop-filter: blur(8px);
}

.tax-outcome-card-title {
  margin-bottom: 0.25rem;
  color: var(--tax-outcome-muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
}

.tax-outcome-card-primary {
  margin-bottom: 0.4rem;
  color: var(--tax-outcome-text);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
}

.tax-outcome-card-note {
  margin-bottom: 0;
  color: var(--tax-outcome-subtle);
  font-size: 0.92rem;
}

.tax-calculator-jurisdiction-summary {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--tax-stack-row-border);
  border-radius: 1rem;
  color: var(--tax-stack-row-text);
  background: var(--tax-stack-surface);
  box-shadow: 0 0.75rem 1.75rem rgba(17, 45, 83, 0.14);
}

.tax-calculator-jurisdiction-summary h2 {
  color: var(--tax-stack-row-text);
}

.tax-jurisdiction-summary-table {
  width: 100%;
  margin: 0.7rem 0 0;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.tax-jurisdiction-summary-table th,
.tax-jurisdiction-summary-table td {
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--tax-stack-row-border);
  text-align: left;
  vertical-align: middle;
}

.tax-jurisdiction-summary-table th {
  color: var(--tax-stack-row-muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tax-jurisdiction-summary-table td:first-child {
  width: 12rem;
  color: var(--tax-stack-row-muted);
  font-weight: 800;
}

.tax-jurisdiction-summary-table td:last-child {
  color: var(--tax-stack-row-text);
  font-weight: 750;
}

.tax-jurisdiction-row {
  display: grid;
  grid-template-columns: minmax(12rem, 0.85fr) minmax(0, 1.7fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--tax-stack-row-border);
  border-left: 0.3rem solid var(--tax-stack-row-accent);
  border-radius: 0.7rem;
  background: var(--tax-stack-row-bg);
  box-shadow: 0 0.25rem 0.75rem rgba(17, 45, 83, 0.08);
}

.tax-jurisdiction-layer {
  margin: 0;
  color: var(--tax-stack-row-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tax-jurisdiction-name {
  margin: 0.15rem 0 0;
  color: var(--tax-stack-row-text);
  font-size: 1.02rem;
  font-weight: 750;
  line-height: 1.25;
}

.tax-jurisdiction-tax-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tax-jurisdiction-tax-chip {
  display: inline-flex;
  max-width: 100%;
  padding: 0.16rem 0.45rem;
  border: 1px solid #cadbf1;
  border-radius: 0.55rem;
  color: var(--tax-stack-chip-text);
  background: var(--tax-stack-chip-bg);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
}

.tax-jurisdiction-tax-chip[data-tax-status="rate_missing"],
.tax-jurisdiction-tax-chip[data-tax-status="parcel_required"],
.tax-jurisdiction-tax-chip[data-tax-status="input_required"] {
  background: var(--tax-stack-chip-warning-bg);
}

.tax-jurisdiction-tax-chip[data-tax-status="not_applicable"],
.tax-jurisdiction-tax-chip[data-tax-status="missing"],
.tax-jurisdiction-tax-chip[data-tax-status="ambiguous"] {
  background: var(--tax-stack-chip-muted-bg);
}

.tax-calculator-tax-stack-checks {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #d7e0eb;
  border-radius: 1rem;
  color: var(--bx-ink);
  background:
    linear-gradient(135deg, rgba(252, 254, 255, 0.98), rgba(242, 247, 252, 0.94)),
    #f8fbff;
  box-shadow: 0 0.75rem 1.5rem rgba(30, 49, 84, 0.1);
}

.tax-calculator-tax-stack-checks h2 {
  color: var(--bx-ink);
}

.tax-calculator-tax-stack-checks > p {
  margin-bottom: 0.7rem;
  color: var(--bx-ink-muted);
  font-size: 0.95rem;
}

.tax-stack-check-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.tax-stack-check-table th,
.tax-stack-check-table td {
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--bx-border);
  text-align: left;
  vertical-align: middle;
}

.tax-stack-check-table th {
  color: var(--bx-ink-muted);
  font-size: var(--bx-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tax-stack-check-table td:nth-child(1) {
  color: var(--bx-ink);
  font-weight: 700;
}

.tax-stack-check-table td:nth-child(2) {
  width: 7rem;
  color: #173b2d;
  font-weight: 850;
}

.tax-stack-check-table td:nth-child(3) {
  width: 12rem;
  color: var(--bx-ink);
  font-weight: 700;
}

.tax-stack-check-table td:nth-child(4) {
  color: var(--bx-ink-muted);
}

.tax-calculator-property-tax-burden {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #d7e0eb;
  border-radius: 1rem;
  color: var(--bx-ink);
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.98), rgba(244, 249, 255, 0.94)),
    #f8fbff;
  box-shadow: 0 0.75rem 1.5rem rgba(30, 49, 84, 0.1);
}

.tax-calculator-property-tax-burden h2 {
  color: var(--bx-ink);
}

.tax-calculator-property-tax-burden > p {
  margin-bottom: 0.7rem;
  color: var(--bx-ink-muted);
  font-size: 0.95rem;
}

.tax-property-burden-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem;
}

.tax-property-burden-card {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--bx-border);
  border-radius: 0.85rem;
  background: #ffffff;
  box-shadow: 0 0.35rem 0.9rem rgba(30, 49, 84, 0.08);
}

.tax-property-burden-card h3 {
  margin-bottom: 0.4rem;
  color: var(--bx-ink);
  font-size: 1rem;
}

.tax-property-burden-card-eyebrow {
  margin-bottom: 0.25rem;
  color: var(--bx-ink-muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tax-property-burden-card-primary {
  margin-bottom: 0.35rem;
  color: #173b2d;
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  font-weight: 850;
  line-height: 1.1;
}

.tax-property-burden-card[data-property-tax-burden-status^="hidden"] .tax-property-burden-card-primary {
  color: #5f4a16;
  font-size: 1.05rem;
}

.tax-property-burden-card-detail {
  margin-bottom: 0.55rem;
  color: var(--bx-ink);
  font-size: 0.9rem;
  font-weight: 750;
}

.tax-property-burden-card-note {
  margin-bottom: 0.35rem;
  color: var(--bx-ink-muted);
  font-size: 0.88rem;
}

.tax-property-burden-card-note:last-child {
  margin-bottom: 0;
}

.tax-sales-comparison-income-summary-property-burden {
  display: grid;
  gap: 0.65rem;
  padding: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.12);
}

.tax-sales-comparison-income-summary-property-burden-group {
  display: grid;
  gap: 0.35rem;
}

.tax-sales-comparison-income-summary-property-burden-group--aggregate {
  padding-top: 0.65rem;
  border-top: 1px solid rgba(235, 246, 255, 0.32);
}

.tax-sales-comparison-income-summary-property-burden h5 {
  margin: 0;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tax-sales-comparison-income-summary-property-burden dl {
  display: grid;
  gap: 0.35rem;
  margin: 0;
}

.tax-sales-comparison-income-summary-property-burden dl > div {
  display: grid;
  gap: 0.08rem;
}

.tax-sales-comparison-income-summary-property-burden dt {
  color: #344966;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tax-sales-comparison-income-summary-property-burden dd {
  margin: 0;
  color: inherit;
  font-size: 0.84rem;
  font-weight: 850;
}

.tax-sales-comparison-income-summary-property-burden small {
  display: block;
  margin-top: 0.08rem;
  color: #344966;
  font-size: 0.72rem;
  font-weight: 760;
}

.tax-sales-comparison-income-summary-property-burden-row-note {
  color: #6b4a00;
}

.tax-sales-comparison-income-summary-property-burden-note {
  margin: 0.4rem 0 0;
  color: #40536f;
  font-size: 0.75rem;
  font-weight: 700;
}

.tax-sales-comparison-add-from-address {
  margin-top: 1rem;
}

.tax-sales-comparison-mode-switch {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.tax-sales-comparison-mode-link {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border: 1px solid #c9d8ea;
  border-radius: 999px;
  color: #315c8f;
  background: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
}

.tax-sales-comparison-mode-link--active {
  color: #fff;
  border-color: #234770;
  background: #234770;
}

:root {
  /* Tax-calculator surface system (slice C): one card language for the
     compare/preview surfaces. Prefer these over per-block literals. */
  --bx-ink: #17243c;
  --bx-ink-muted: #51627e;
  --bx-border: #d7e0eb;
  --bx-border-accent: #9db8dc;
  --bx-surface-cool: #f8fbff;
  --bx-gradient-cool: linear-gradient(135deg, #eaf1fd, #f8fbff);
  --bx-gradient-mixed: linear-gradient(135deg, rgba(244, 248, 255, 0.94), rgba(255, 252, 244, 0.9));
  --bx-radius-card: 1rem;
  --bx-radius-inner: 0.75rem;
  --bx-radius-pill: 2rem;
  --bx-shadow-card: 0 0.5rem 1rem rgba(30, 49, 84, 0.08);
  --bx-text-xl: 1.3rem;
  --bx-text-lg: 1.1rem;
  --bx-text-sm: 0.85rem;
  --bx-text-xs: 0.75rem;
  --bx-space-section: 1.75rem;
}

.tax-calculator-tax-stack-checks h2,
.tax-sales-comparison-guidance-request h2 {
  font-size: var(--bx-text-xl);
  line-height: 1.25;
}

.tax-sales-comparison-section-heading h3,
.tax-sales-comparison-manual-property h3,
.tax-sales-comparison-footnotes h3 {
  font-size: var(--bx-text-lg);
  line-height: 1.3;
}

.tax-sales-comparison-input-panel,
.tax-sales-comparison-entity-picker {
  display: grid;
  gap: 0.8rem;
}

.tax-sales-comparison-section-heading {
  display: grid;
  gap: 0.25rem;
}

.tax-sales-comparison-section-heading h3 {
  margin: 0;
  color: var(--bx-ink);
}

.tax-sales-comparison-section-heading p:last-child {
  margin: 0;
  max-width: 46rem;
  color: var(--bx-ink-muted);
}

.tax-sales-comparison-input-panel,
.tax-sales-comparison-income-curve {
  margin: var(--bx-space-section) 0;
  padding: 0.95rem 1rem;
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius-card);
  background: var(--bx-gradient-mixed), #fff;
  box-shadow: var(--bx-shadow-card);
}

.tax-sales-comparison-income-curve-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.tax-sales-comparison-income-curve-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--bx-ink);
}

.tax-sales-comparison-income-curve-range {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--bx-ink-muted);
}

.tax-sales-comparison-income-curve-range select {
  width: auto;
  margin: 0;
  padding: 0.2rem 1.6rem 0.2rem 0.5rem;
  font-size: 0.85rem;
}

.tax-sales-comparison-income-curve-canvas {
  position: relative;
  height: 320px;
}

.tax-sales-comparison-income-curve-note {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: var(--bx-ink-muted);
}

/* Income-curve widget chrome: slider, ranked value cards, announcer.
   Chart internals reuse the income-curve family above. (The class prefix
   predates the standalone explorer's retirement into the compare page.) */
.income-tax-explorer-slider {
  margin: 0.9rem 0 0.4rem;
}

.income-tax-explorer-slider-label {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--bx-ink-muted);
}

.income-tax-explorer-slider-label strong {
  font-size: 1.1rem;
  color: var(--bx-ink);
}

.income-tax-explorer-slider input[type="range"] {
  /* Block display: as an inline-block the line box adds ~8px of baseline
     space under the input, stranding the bounds row far from the track. */
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  margin-bottom: 0;
  /* Fill the track up to the thumb (--bx-slider-fill is kept current by the
     income-curve-chart controller) so the slider reads as a positioned
     control, not a divider. The 50% fallback matches the browser's default
     mid-track thumb before the controller connects. Defined once here; the
     vendor track rules below cannot share a selector list because an unknown
     pseudo-element invalidates the whole list. */
  --bx-slider-track-rest: var(--bx-border);
  --bx-slider-track-bg: linear-gradient(
    to right,
    var(--bx-ink-muted) var(--bx-slider-fill, 50%),
    var(--bx-slider-track-rest) var(--bx-slider-fill, 50%)
  );
}

/* Keep the engaged-state track cue the gradient otherwise drops (Pico swaps
   its track shade on the active/focused slider). */
.income-tax-explorer-slider input[type="range"]:is(:focus, :active) {
  --bx-slider-track-rest: var(--bx-border-accent);
}

.income-tax-explorer-slider input[type="range"]::-webkit-slider-runnable-track {
  background: var(--bx-slider-track-bg);
}

.income-tax-explorer-slider input[type="range"]::-moz-range-track {
  background: var(--bx-slider-track-bg);
}

.income-tax-explorer-slider-bounds {
  display: flex;
  justify-content: space-between;
  margin-top: 0;
  font-size: var(--bx-text-xs);
  line-height: 1;
  color: var(--bx-ink-muted);
}

.income-tax-explorer-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.7rem;
  margin: 0.6rem 0 0.9rem;
}

.income-tax-explorer-card {
  border-left: 4px solid var(--bx-ink-muted);
  border-radius: var(--bx-radius-sm, 6px);
  background: var(--bx-surface-muted, #eef4f9);
  padding: 0.55rem 0.75rem;
}

.income-tax-explorer-card-label {
  font-size: 0.75rem;
  color: var(--bx-ink-muted);
}

.income-tax-explorer-card-value {
  display: block;
  font-size: 1.2rem;
  color: var(--bx-ink);
}

.income-tax-explorer-card-share {
  font-size: 0.72rem;
  color: var(--bx-ink-muted);
}

/* Property widget: per-place slider cards (reuses the income explorer's
   card + slider primitives; only the grid and per-place notes are new). */
.tax-sales-comparison-property-places {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.7rem;
  margin: 0.6rem 0 0.9rem;
}

.tax-sales-comparison-property-place-slider {
  margin: 0.35rem 0;
}

.tax-sales-comparison-property-place-median,
.tax-sales-comparison-property-place-levies {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: var(--bx-ink-muted);
}

/* HTML chart legend: per-place line + median-shape swatches. */
.tax-sales-comparison-curve-legend,
.tax-sales-comparison-curve-marker-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0.5rem 0 0.2rem;
  padding: 0;
  list-style: none;
}

.tax-sales-comparison-curve-legend li,
.tax-sales-comparison-curve-marker-key li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--bx-ink-muted);
}

.tax-sales-comparison-curve-legend-swatch,
.tax-sales-comparison-curve-marker-key-swatch {
  flex: none;
}

/* Marker key (hollow = each place's median home value; filled = the value you
   entered), set just below the per-place series legend. */
.tax-sales-comparison-curve-marker-key {
  margin-top: 0.15rem;
}

/* Assessment-cap callout: warning treatment, not error-red — the claim is a
   factual caution ("new buyers pay more here"), and the icon + bold lead
   carry it without relying on color alone. */
.tax-sales-comparison-property-place-cap,
.tax-sales-comparison-property-place-caveat {
  margin: 0.45rem 0 0;
  padding: 0.35rem 0.55rem;
  border-left: 3px solid #b45309;
  border-radius: 0 4px 4px 0;
  background: rgba(237, 161, 0, 0.13);
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--bx-ink);
}

.tax-sales-comparison-property-place-cap strong {
  color: #b45309;
}

/* The card's own chrome stays de-emphasized, but through TRANSLUCENT COLOR
   rather than `opacity`. Opacity below 1 on the <article> creates a compositing
   group, so a child can never render more opaque than its parent: the verified
   Census median this card now carries would composite at 0.85 together with the
   "No modeled property rate yet" text it exists to correct, while the same
   figure — from the same two helper methods — renders at full opacity in the
   comparison table one section away. Moving the opacity to the children alone
   fixed that but stopped dimming the background and dashed border, so an
   uncovered card's frame read heavier than a covered one's. Mixing toward
   `transparent` reproduces the original compositing on exactly those two
   properties, in light and dark mode both, without the group. Tokens rather
   than the computed literals so the mix follows the surface system; browsers
   without color-mix drop these two declarations and inherit the base card's
   opaque chrome, which is a fallback, not a break. */
.tax-sales-comparison-property-place--uncovered {
  border-left-style: dashed;
  border-left-color: color-mix(in srgb, var(--bx-ink-muted) 85%, transparent);
  background: color-mix(in srgb, var(--bx-surface-muted, #eef4f9) 85%, transparent);
}

/* De-emphasize the GAP statement, never the Census median that corrects it. */
.tax-sales-comparison-property-place--uncovered > :not(.tax-sales-comparison-property-place-reported) {
  opacity: 0.85;
}

/* Census-reported median on an uncovered card: INFORMATIONAL, so deliberately
   not the amber warning treatment above — it reports something we do know,
   where the cap/caveat callouts qualify something we modeled. */
.tax-sales-comparison-property-place-reported {
  margin: 0.45rem 0 0;
  padding: 0.35rem 0.55rem;
  border-left: 3px solid var(--bx-border-accent);
  border-radius: 0 4px 4px 0;
  background: var(--bx-surface-cool);
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--bx-ink);
}

.tax-sales-comparison-property-place-reported-source {
  display: block;
  margin-top: 0.2rem;
  color: var(--bx-ink-muted);
  font-size: var(--bx-text-xs);
}

.tax-sales-comparison-property-curve-lede {
  margin: 0.2rem 0 0;
  font-size: var(--bx-text-sm, 0.85rem);
  color: var(--bx-ink-muted);
}

/* Visually hidden live region: card changes announce here after slider
   input settles, so the re-rendering cards themselves stay non-live. */
.income-tax-explorer-announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tax-sales-comparison-run-form {
  display: grid;
  gap: 0.7rem;
  margin: 0;
}

.tax-sales-comparison-run-inputs {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.tax-sales-comparison-run-input {
  display: grid;
  gap: 0.25rem;
}

.tax-sales-comparison-run-input label {
  color: var(--bx-ink);
  font-size: 0.8rem;
  font-weight: 700;
}

.tax-sales-comparison-run-input--needs-attention select,
.tax-sales-comparison-run-input--needs-attention input {
  border-color: #b45309;
  box-shadow: 0 0 0 0.16rem rgba(180, 83, 9, 0.14);
}

.tax-sales-comparison-field-help {
  margin: 0;
  color: #65758f;
  font-size: 0.78rem;
  line-height: 1.35;
}

.tax-sales-comparison-field-help--prompt {
  color: #8a3c0a;
  font-weight: 800;
}

.tax-sales-comparison-run-note {
  margin: 0;
  color: var(--bx-ink-muted);
  font-size: 0.82rem;
}

.tax-sales-comparison-add-field-help {
  margin: 0.15rem 0 0.35rem;
  color: #65758f;
  font-size: 0.82rem;
}

.tax-sales-comparison-table th span,
.tax-sales-comparison-table th small {
  display: block;
}

.tax-sales-comparison-table th small {
  color: var(--bx-ink-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.tax-sales-comparison-stack-line {
  margin-top: 0.12rem;
  color: #2d4e42;
  font-weight: 700;
}

/* The comparison-state form exists only for its hidden fields; buttons
   elsewhere submit it via their form= attribute. */
.tax-sales-comparison-state-form {
  display: none;
}

/* The fallback and search-reset actions are BUTTON submits of the hidden
   comparison-state form (its fields ride the widget's income sweep) but
   must still read as links. */
button.tax-sales-comparison-address-fallback-link,
button.tax-sales-comparison-search-reset {
  display: inline;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--pico-primary);
  text-decoration: underline;
  cursor: pointer;
}

button.tax-sales-comparison-search-reset {
  display: inline-block;
  margin: 0.6rem 0 0;
}

button.tax-sales-comparison-address-fallback-link {
  font-size: 0.86rem;
  font-weight: 800;
}

/* Pico zeroes button outlines and carries focus on box-shadow, which the
   link-look rule pins to none — restore a visible keyboard focus ring. */
button.tax-sales-comparison-address-fallback-link:focus-visible,
button.tax-sales-comparison-search-reset:focus-visible {
  outline: 2px solid var(--pico-primary);
  outline-offset: 2px;
}

.tax-sales-comparison-add-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 0.75rem;
  align-items: end;
}

.tax-sales-comparison-add-form input::placeholder {
  color: #8a98ad;
}

.tax-sales-comparison-run-input input::placeholder {
  color: #8a98ad;
}

.tax-sales-comparison-entity-picker {
  gap: 0.75rem;
  margin-top: 0.2rem;
}

.tax-sales-comparison-entity-results-form {
  display: grid;
  gap: 0.6rem;
}

.tax-sales-comparison-entity-results-form fieldset {
  margin: 0;
  padding: 0.75rem;
  border: 1px solid #9fb9dd;
  border-radius: 0.8rem;
  background:
    linear-gradient(90deg, rgba(31, 89, 154, 0.12), rgba(31, 89, 154, 0) 7rem),
    #fff;
  box-shadow: 0 0.45rem 1.2rem rgba(23, 36, 60, 0.1);
}

.tax-sales-comparison-entity-results-form legend {
  margin: 0 0 0.35rem;
  padding: 0;
  color: #123d72;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tax-sales-comparison-entity-results-prompt {
  margin: -0.15rem 0 0.6rem;
  color: #3b4f6f;
  font-size: 0.84rem;
  font-weight: 700;
}

.tax-sales-comparison-entity-option {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.55rem;
  row-gap: 0.1rem;
  align-items: start;
  margin: 0;
  padding: 0.5rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.74);
}

.tax-sales-comparison-entity-option + .tax-sales-comparison-entity-option {
  margin-top: 0.2rem;
}

.tax-sales-comparison-entity-option:hover,
.tax-sales-comparison-entity-option:focus-within {
  border-color: #86a9d8;
  background: #f7fbff;
}

.tax-sales-comparison-entity-option input[type="radio"] {
  margin-top: 0.2rem;
}

.tax-sales-comparison-entity-option-title {
  color: var(--bx-ink);
  font-weight: 750;
}

.tax-sales-comparison-entity-option-detail {
  grid-column: 2;
  color: var(--bx-ink-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.tax-sales-comparison-limit,
.tax-sales-comparison-guidance {
  margin: 1rem 0 0;
  color: var(--bx-ink-muted);
}

.tax-sales-comparison-guidance-request {
  display: grid;
  grid-template-columns: minmax(28rem, 1fr) minmax(18rem, 26rem);
  gap: clamp(0.75rem, 1.8vw, 1.25rem);
  align-items: center;
  margin: var(--bx-space-section) 0;
  padding: 1rem;
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius-card);
  background: var(--bx-gradient-mixed), #fff;
  box-shadow: var(--bx-shadow-card);
}

.tax-sales-comparison-guidance-request > div {
  min-width: 0;
}

.tax-sales-comparison-guidance-request-copy {
  max-width: 58rem;
}

.tax-sales-comparison-guidance-request h2 {
  margin: 0.1rem 0 0.35rem;
  color: var(--bx-ink);
}

.tax-sales-comparison-guidance-request p {
  margin: 0;
  max-width: 54rem;
  color: var(--bx-ink-muted);
  line-height: 1.45;
}

.tax-sales-comparison-guidance-request-form {
  justify-self: end;
  width: min(100%, 26rem);
}

.tax-sales-comparison-guidance-request-form label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--bx-ink);
  font-size: 0.82rem;
  font-weight: 800;
}

.tax-sales-comparison-guidance-request-input-row {
  display: grid;
  grid-template-columns: minmax(16ch, 1fr) max-content;
  gap: 0.45rem;
  align-items: stretch;
}

.tax-sales-comparison-guidance-request-input-row input {
  min-width: 0;
  width: 100%;
  margin: 0;
  border-color: #9fb2cb;
  background: #fff;
}

.tax-sales-comparison-guidance-request-input-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: max-content;
  margin: 0;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  background: #17243c;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.tax-sales-comparison-guidance-request-input-row button:hover,
.tax-sales-comparison-guidance-request-input-row button:focus {
  background: #294166;
  color: #fff;
}

.metro-guidance,
.coverage-roadmap {
  display: grid;
  gap: 1.25rem;
}

.metro-guidance-hero,
.coverage-roadmap-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 0.8fr);
  gap: 1.2rem;
  align-items: stretch;
  margin-top: 1rem;
}

.metro-guidance-hero-copy,
.metro-guidance-hero-card,
.metro-guidance-section,
.coverage-roadmap-hero,
.coverage-roadmap-section {
  border: 1px solid var(--bx-border);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0.55rem 1.35rem rgba(23, 36, 60, 0.07);
}

.metro-guidance-hero-copy,
.coverage-roadmap-hero {
  padding: clamp(1.1rem, 3vw, 2rem);
  background:
    linear-gradient(135deg, rgba(231, 243, 255, 0.96), rgba(255, 248, 232, 0.88)),
    #f8fbff;
}

.metro-guidance-hero-copy h1,
.coverage-roadmap-hero h1 {
  margin: 0.15rem 0 0.7rem;
  color: var(--bx-ink);
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -0.045em;
}

.metro-guidance-hero-copy > p,
.metro-guidance-section > p,
.coverage-roadmap-hero > p,
.coverage-roadmap-section > p {
  color: #40536f;
  font-size: 1.02rem;
  line-height: 1.65;
}

.metro-guidance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-top: 1rem;
}

.metro-guidance-secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
}

.metro-guidance-secondary-link {
  border: 1px solid #b9c9dc;
  background: rgba(255, 255, 255, 0.78);
  color: var(--bx-ink);
}

.metro-guidance-hero-card {
  display: grid;
  gap: 0.8rem;
  align-content: center;
  padding: 1.1rem;
  background:
    radial-gradient(circle at top right, rgba(255, 227, 169, 0.42), transparent 45%),
    #17243c;
  color: #fff;
}

.metro-guidance-hero-card strong {
  font-size: 1.1rem;
}

.metro-guidance-hero-card span {
  display: block;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: #e7eef8;
}

.metro-guidance-section,
.coverage-roadmap-section {
  padding: 1.05rem;
}

.metro-guidance-section h2,
.coverage-roadmap-section h2 {
  margin: 0 0 0.8rem;
  color: var(--bx-ink);
  font-size: clamp(1.35rem, 2.8vw, 2rem);
}

.metro-guidance-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.8rem;
}

.metro-guidance-card-grid article {
  padding: 0.9rem;
  border: 1px solid #e1e9f3;
  border-radius: 0.85rem;
  background: #f8fbff;
}

.metro-guidance-card-grid h3 {
  margin: 0 0 0.35rem;
  color: var(--bx-ink);
}

.metro-guidance-card-grid p,
.metro-guidance-steps,
.metro-guidance-input-list,
.coverage-roadmap-list,
.coverage-roadmap-pill-list {
  color: var(--bx-ink-muted);
}

.metro-guidance-principle {
  border-color: #f0d59a;
  background: #fffaf0;
}

.metro-guidance-steps,
.metro-guidance-input-list {
  margin-bottom: 0;
}

.metro-guidance-steps li + li,
.metro-guidance-input-list li + li {
  margin-top: 0.45rem;
}

.metro-guidance-evidence {
  background: #f7faff;
}

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

.coverage-roadmap-interest-form {
  display: grid;
  gap: 0.35rem;
  width: min(100%, 42rem);
  margin-top: 1rem;
}

.metro-guidance-interest-form {
  margin-top: 1rem;
}

.coverage-roadmap-interest-form label {
  color: var(--bx-ink);
  font-size: 0.9rem;
  font-weight: 800;
}

.coverage-roadmap-interest-input-row {
  display: grid;
  grid-template-columns: minmax(30ch, 1fr) max-content;
  gap: 0.45rem;
  align-items: stretch;
}

.coverage-roadmap-interest-input-row input {
  min-width: 0;
  width: 100%;
  margin: 0;
  border-color: #9fb2cb;
  background: #fff;
  /* Forced-light input: pin text + placeholder so the dark theme's
     near-white form tokens never land on this white background */
  color: #111827;
}

.coverage-roadmap-interest-input-row input::placeholder {
  color: #6b7280;
}

.coverage-roadmap-interest-input-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: max-content;
  margin: 0;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  background: #17243c;
  color: #fff;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.coverage-roadmap-interest-input-row button:hover,
.coverage-roadmap-interest-input-row button:focus {
  background: #294166;
  color: #fff;
}

.coverage-roadmap-list,
.coverage-roadmap-pill-list {
  margin-bottom: 0;
}

.coverage-roadmap-list li + li,
.coverage-roadmap-pill-list li + li {
  margin-top: 0.45rem;
}

.coverage-roadmap-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding-left: 0;
  list-style: none;
}

.coverage-roadmap-pill-list li {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--bx-border);
  border-radius: 999px;
  background: #f8fbff;
  color: var(--bx-ink);
  font-weight: 800;
}

.coverage-roadmap-caveat {
  background: #fffaf0;
}

.tax-sales-comparison-results {
  overflow: visible;
}

.tax-sales-comparison-income-summary {
  --tax-income-summary-bg: #16304f;
  --tax-income-summary-bg-strong: #0f6b5a;
  --tax-income-summary-text: #f6fbff;
  --tax-income-summary-muted: #dce8f4;
  --tax-income-summary-card-border: rgba(18, 35, 63, 0.12);
  --tax-income-summary-card-shadow: 0 1rem 2rem rgba(16, 29, 48, 0.14);
  --tax-income-summary-card-gap: 0.65rem;
  --tax-income-summary-card-min: 11.5rem;
  --tax-income-summary-five-column-min: calc((100% - 2.6rem) / 5);

  margin: var(--bx-space-section) 0 1.25rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid rgba(112, 188, 164, 0.32);
  border-radius: 1.25rem;
  color: var(--tax-income-summary-text);
  background:
    radial-gradient(circle at top left, rgba(192, 230, 255, 0.22), transparent 24rem),
    linear-gradient(135deg, var(--tax-income-summary-bg), #214d75 52%, var(--tax-income-summary-bg-strong));
  box-shadow: 0 1.1rem 2.6rem rgba(18, 33, 59, 0.18);
}

.tax-sales-comparison-income-summary h3,
.tax-sales-comparison-income-summary h4,
.tax-sales-comparison-income-summary p,
.tax-sales-comparison-income-summary dt,
.tax-sales-comparison-income-summary dd {
  color: inherit;
}

.tax-sales-comparison-income-summary-header {
  margin-bottom: 1rem;
}

.tax-sales-comparison-income-summary-header > div > p:last-child {
  max-width: 42rem;
  margin-bottom: 0;
  color: var(--tax-income-summary-muted);
}

.tax-sales-comparison-income-summary-scope-note {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.tax-sales-comparison-income-summary-scope-note p {
  margin: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(235, 246, 255, 0.26);
  border-radius: 0.85rem;
  background: rgba(250, 253, 255, 0.12);
  color: var(--tax-income-summary-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.tax-sales-comparison-income-summary-scope-note strong {
  color: var(--tax-income-summary-text);
  font-weight: 850;
}

.tax-sales-comparison-income-summary-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, max(var(--tax-income-summary-card-min), var(--tax-income-summary-five-column-min))), 1fr)
  );
  gap: var(--tax-income-summary-card-gap);
  align-items: stretch;
}

.tax-sales-comparison-income-summary-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--tax-income-summary-card-gap);
  min-height: 100%;
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid var(--tax-income-summary-card-border);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.96);
  color: #11223d;
  box-shadow: var(--tax-income-summary-card-shadow);
}

.tax-sales-comparison-income-summary-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.35rem;
  border-radius: 1rem 0 0 1rem;
  background: #2f66b3;
}

.tax-sales-comparison-income-summary-card--dc::before {
  background: #2f66b3;
}

.tax-sales-comparison-income-summary-card--md::before {
  background: #b66a2f;
}

.tax-sales-comparison-income-summary-card--va::before {
  background: #157a63;
}

@supports (grid-template-rows: subgrid) {
  .tax-sales-comparison-income-summary-card {
    grid-row: span 7;
    grid-template-rows: subgrid;
  }
}

@supports not (grid-template-rows: subgrid) {
  .tax-sales-comparison-income-summary-slot--empty {
    display: none;
  }
}

.tax-sales-comparison-income-summary-card-header {
  display: grid;
  gap: 0.3rem;
}

.tax-sales-comparison-income-summary-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tax-sales-comparison-income-summary-state {
  display: inline-flex;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  padding: 0.24rem 0.5rem;
  border-radius: 999px;
  color: #17365f;
  background: #ebf3ff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  white-space: nowrap;
  text-transform: uppercase;
}

.tax-sales-comparison-income-summary-flag {
  display: inline-flex;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  padding: 0.24rem 0.5rem;
  border-radius: 999px;
  color: #314861;
  background: #eef3f8;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  line-height: 1.1;
  white-space: nowrap;
}

.tax-sales-comparison-income-summary-flag--housing {
  color: #724d16;
  background: #fff0d8;
}

.tax-sales-comparison-income-summary-card h4 {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.2;
}

.tax-sales-comparison-income-summary-card-header p {
  margin: 0;
  color: #4b5f7c;
  font-size: 0.84rem;
  line-height: 1.35;
}

.tax-sales-comparison-income-summary-primary,
.tax-sales-comparison-income-summary-slot {
  min-width: 0;
}

.tax-sales-comparison-income-summary-primary {
  display: grid;
  gap: 0.2rem;
  align-content: start;
}

.tax-sales-comparison-income-summary-label {
  margin: 0;
  color: #4b5f7c;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tax-sales-comparison-income-summary-amount {
  margin: 0;
  color: #0f2749;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
}

.tax-sales-comparison-income-summary .tax-sales-comparison-income-summary-amount--prompt {
  color: #c2410c;
}

.tax-sales-comparison-income-summary-breakdown {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0.65rem;
  border: 1px solid var(--bx-border);
  border-radius: 0.85rem;
  background: #f8fbff;
}

.tax-sales-comparison-income-summary-breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: baseline;
}

.tax-sales-comparison-income-summary-breakdown-row dt,
.tax-sales-comparison-income-summary-breakdown-row dd {
  margin: 0;
}

.tax-sales-comparison-income-summary-breakdown-row dt {
  color: #4b5f7c;
  font-size: 0.76rem;
  font-weight: 800;
}

.tax-sales-comparison-income-summary-breakdown-row dd {
  color: #17365f;
  font-size: 0.86rem;
  font-weight: 850;
}

.tax-sales-comparison-income-summary-breakdown-row--tax dt,
.tax-sales-comparison-income-summary-breakdown-row--tax dd {
  color: #8d2f2a;
}

.tax-sales-comparison-income-summary-breakdown-row--tax dd {
  font-size: 0.98rem;
  font-weight: 900;
}

.tax-sales-comparison-income-summary-breakdown-row--credit dt,
.tax-sales-comparison-income-summary-breakdown-row--credit dd {
  color: #1f6b3f;
}

.tax-sales-comparison-income-summary-breakdown-row--credit dd {
  font-size: 0.98rem;
  font-weight: 900;
}

.tax-sales-comparison-income-summary-breakdown-row--net {
  padding-top: 0.35rem;
  border-top: 1px solid var(--bx-border);
}

.tax-sales-comparison-income-summary-breakdown-row--net dt,
.tax-sales-comparison-income-summary-breakdown-row--net dd {
  color: #0f2749;
}

.tax-sales-comparison-income-summary-breakdown-row--net dd {
  font-size: 1rem;
  font-weight: 900;
}

.tax-sales-comparison-income-summary-credit-notes {
  margin: 0.5rem 0 0;
  padding-left: 1rem;
  color: var(--bx-ink-muted, #51627e);
  font-size: 0.72rem;
}

.tax-sales-comparison-income-summary-credit-notes li {
  margin: 0.15rem 0;
}

.tax-sales-comparison-income-summary-breakdown-row--take-home {
  padding-top: 0.35rem;
  border-top: 1px solid var(--bx-border);
}

.tax-sales-comparison-income-summary-breakdown-row--take-home dt,
.tax-sales-comparison-income-summary-breakdown-row--take-home dd {
  color: #0f2749;
}

.tax-sales-comparison-income-summary-breakdown-row--take-home dd {
  font-size: 1rem;
  font-weight: 900;
}

.tax-sales-comparison-income-summary-secondary {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--bx-border);
  border-radius: 0.8rem;
  background: #f8fbff;
}

.tax-sales-comparison-income-summary-secondary-label {
  margin: 0;
  color: #4b5f7c;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tax-sales-comparison-income-summary-secondary-amount {
  margin: 0;
  color: #17365f;
  font-size: 1.05rem;
  font-weight: 850;
  line-height: 1.15;
}

.tax-sales-comparison-income-summary-housing-costs {
  display: grid;
  grid-template-rows: repeat(3, 2.65rem);
  gap: 0.28rem;
  margin: 0;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--bx-border);
}

.tax-sales-comparison-income-summary-housing-costs div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: baseline;
}

.tax-sales-comparison-income-summary-housing-costs dt,
.tax-sales-comparison-income-summary-housing-costs dd {
  margin: 0;
  color: #17365f;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.25;
}

.tax-sales-comparison-income-summary-housing-costs dt {
  color: #4b5f7c;
}

.tax-sales-comparison-income-summary-housing-costs-total {
  background: linear-gradient(var(--bx-border), var(--bx-border)) top / 100% 1px no-repeat;
}

.tax-sales-comparison-income-summary-housing-costs-total dt,
.tax-sales-comparison-income-summary-housing-costs-total dd {
  color: #0f2749;
  font-weight: 900;
}

.tax-sales-comparison-income-summary-housing-costs-placeholder {
  visibility: hidden;
}

.tax-sales-comparison-income-summary-detail {
  margin: 0;
  color: #324c70;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.4;
}

.tax-sales-comparison-income-summary-meta {
  display: grid;
  gap: 0.55rem;
  margin: 0;
}

.tax-sales-comparison-income-summary-meta div {
  display: grid;
  gap: 0.16rem;
}

.tax-sales-comparison-income-summary-meta dt {
  color: #4b5f7c;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tax-sales-comparison-income-summary-meta dd {
  margin: 0;
  color: #162745;
  font-size: 0.84rem;
  font-weight: 750;
}

.tax-sales-comparison-income-summary-meta small {
  display: block;
  margin-top: 0.1rem;
  color: #4b5f7c;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.35;
}

.tax-sales-comparison-manual-property {
  margin: 0.9rem 0;
  padding: 0.75rem;
  border: 1px solid var(--bx-border);
  border-radius: 0.75rem;
  background: #f7faff;
}

.tax-sales-comparison-manual-property h3 {
  margin-bottom: 0.35rem;
  color: var(--bx-ink);
}

.tax-sales-comparison-manual-property p {
  margin: 0 0 0.65rem;
  color: var(--bx-ink-muted);
  font-size: 0.9rem;
}

.tax-sales-comparison-property-tax-form {
  display: grid;
  gap: 0.7rem;
}

.tax-sales-comparison-property-tax-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.tax-sales-comparison-property-tax-grid label {
  margin-bottom: 0.3rem;
  color: var(--bx-ink);
  font-size: 0.8rem;
  font-weight: 700;
}

.tax-sales-comparison-property-tax-field {
  display: grid;
  gap: 0.6rem;
}

.tax-sales-comparison-property-tax-field fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.tax-sales-comparison-property-tax-field legend {
  margin-bottom: 0.35rem;
  color: var(--bx-ink);
  font-size: 0.8rem;
  font-weight: 800;
}

.tax-sales-comparison-housing-mode-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
}

.tax-sales-comparison-housing-mode-options label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0;
  font-size: 0.82rem;
}

.tax-sales-comparison-housing-input-group {
  display: grid;
  gap: 0.25rem;
}

.tax-sales-comparison-property-tax-link-line,
.tax-sales-comparison-mortgage-note {
  color: var(--bx-ink-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.tax-sales-comparison-property-tax-link-line a {
  font-weight: 750;
}

.tax-sales-comparison-currency-input {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
}

.tax-sales-comparison-currency-input span {
  color: var(--bx-ink-muted);
  font-weight: 700;
}

.tax-sales-comparison-table-wrap {
  --tax-sales-comparison-sticky-deduction-top: 7.25rem;
  height: clamp(36rem, 88vh, 68rem);
  height: clamp(36rem, 88dvh, 68rem);
  overflow: auto;
  border: 1px solid var(--bx-border-accent);
  border-radius: var(--bx-radius-inner);
  background: #fff;
  scrollbar-gutter: stable both-edges;
  scrollbar-color: #5f7ea9 #e0ebfa;
  scrollbar-width: auto;
  -webkit-overflow-scrolling: touch;
}

.tax-sales-comparison-table-wrap::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

.tax-sales-comparison-table-wrap::-webkit-scrollbar-track {
  background: #e0ebfa;
  border-radius: 999px;
}

.tax-sales-comparison-table-wrap::-webkit-scrollbar-thumb {
  background: #5f7ea9;
  border: 2px solid #e0ebfa;
  border-radius: 999px;
}

.tax-sales-comparison-table-wrap::-webkit-scrollbar-thumb:hover {
  background: #44658f;
}

.tax-sales-comparison-scroll-hint {
  margin: 0;
  padding: 0.45rem 0.6rem;
  border: 1px dashed var(--bx-border-accent);
  border-radius: 0.55rem;
  color: #2a4f7e;
  background: #f3f8ff;
  font-size: 0.82rem;
  font-weight: 700;
}

.tax-sales-comparison-detail-section {
  margin: 1rem 0 0;
}

.tax-sales-comparison-detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) fit-content(18rem);
  gap: 0.8rem;
  align-items: start;
  margin-bottom: 0.45rem;
}

.tax-sales-comparison-detail-header > div {
  min-width: 0;
}

.tax-sales-comparison-detail-header > div > p:last-child {
  margin-bottom: 0;
  color: var(--bx-ink-muted);
}

.tax-sales-comparison-detail-header .tax-sales-comparison-scroll-hint {
  justify-self: end;
  max-width: 18rem;
}

@media (max-width: 1180px) {
  .tax-sales-comparison-guidance-request {
    grid-template-columns: 1fr;
  }

  .tax-sales-comparison-guidance-request-form {
    justify-self: start;
    width: min(100%, 32rem);
  }
}

@media (max-width: 980px) {
  .tax-sales-comparison-guidance-request,
  .tax-sales-comparison-detail-header {
    grid-template-columns: 1fr;
  }

  .tax-sales-comparison-detail-header .tax-sales-comparison-scroll-hint {
    justify-self: start;
    max-width: 100%;
  }
}

.tax-sales-comparison-table {
  min-width: 44rem;
  border-collapse: separate;
  border-spacing: 0;
}

.tax-sales-comparison-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f2f6fc;
  box-shadow: inset 0 -1px 0 var(--bx-border);
}

.tax-sales-comparison-table thead th:first-child {
  z-index: 4;
}

.tax-sales-comparison-section-row th {
  padding: 0.55rem 0.75rem;
  text-align: left;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #17243c;
  border-bottom: 1px solid #0f1b2e;
}

.tax-sales-comparison-section-row th small {
  margin-top: 0.12rem;
  color: #d0deef;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.tax-sales-comparison-section-row--resiliency th {
  color: #183127;
  background: #bfe7d3;
  border-bottom: 1px solid #8ec6ac;
}

.tax-sales-comparison-section-row--resiliency th small {
  color: #2d4e42;
}

.tax-sales-comparison-income-status-row th {
  padding: 0.55rem 0.75rem;
  text-align: left;
  color: var(--bx-ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: #e8eef8;
  border-bottom: 1px solid #d1dceb;
}

.tax-sales-comparison-income-status-row--break th {
  border-top: 3px solid #111318;
}

.tax-sales-comparison-table th[scope="row"] {
  width: 15rem;
  color: var(--bx-ink);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.tax-sales-comparison-table tr.tax-sales-comparison-income-status-break th,
.tax-sales-comparison-table tr.tax-sales-comparison-income-status-break td {
  border-top: 3px solid #111318;
}

.tax-sales-comparison-standard-deduction-row th,
.tax-sales-comparison-standard-deduction-row td {
  position: -webkit-sticky;
  position: sticky;
  top: var(--tax-sales-comparison-sticky-deduction-top);
  z-index: 2;
  background:
    linear-gradient(180deg, #fff8d6 0%, #fff2b6 100%);
  border-top: 1px solid #d4b957;
  border-bottom: 1px solid #a8892d;
  box-shadow:
    0 0.3rem 0.6rem rgba(44, 47, 54, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.tax-sales-comparison-standard-deduction-row th {
  color: #3b2d07;
}

.tax-sales-comparison-standard-deduction-row td {
  color: #1f3b2f;
}

.tax-sales-comparison-income-estimate-row th,
.tax-sales-comparison-income-estimate-row td {
  background: linear-gradient(180deg, #eefaf3 0%, #dff4e8 100%);
  border-top: 1px solid #94c9a9;
  border-bottom: 1px solid #78b891;
}

.tax-sales-comparison-income-estimate-row th {
  color: #123728;
  box-shadow: inset 0.35rem 0 0 #0f6b5a;
}

.tax-sales-comparison-income-estimate-row td {
  color: #123728;
}

.tax-sales-comparison-income-estimate-row .tax-sales-comparison-cell-value {
  font-size: 1.02rem;
  font-weight: 900;
}

.tax-sales-comparison-table td {
  min-width: 8rem;
  color: #173b2d;
  font-weight: 850;
  text-align: center;
}

.tax-sales-comparison-cell-value,
.tax-sales-comparison-cell-detail,
.tax-sales-comparison-cell-source-line {
  display: block;
}

.tax-sales-comparison-cell-detail,
.tax-sales-comparison-cell-source-line {
  margin-top: 0.12rem;
  color: #40536f;
  font-size: 0.76rem;
  font-weight: 740;
  line-height: 1.25;
}

.tax-sales-comparison-cell-source-line a {
  font-weight: 750;
}

.tax-sales-comparison-property-lookup-line {
  margin-top: 0.15rem;
  color: var(--bx-ink-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.tax-sales-comparison-property-lookup-line a {
  font-weight: 750;
}

.tax-sales-comparison-footnotes {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bx-border);
}

.tax-sales-comparison-footnotes h3 {
  margin-bottom: 0.4rem;
  color: var(--bx-ink);
}

.tax-sales-comparison-footnotes ol {
  margin-bottom: 0;
  color: var(--bx-ink-muted);
  font-size: 0.9rem;
}

.tax-sales-comparison-disclosure {
  margin: 0.9rem 0 0;
  color: var(--bx-ink-muted);
  font-size: 0.88rem;
}

.tax-calculator-source-details,
details.tax-sales-comparison-rates-sources {
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
}

.tax-calculator-source-details > summary,
details.tax-sales-comparison-rates-sources > summary {
  cursor: pointer;
  font-weight: 700;
}

@media (max-width: 700px) {
  .tax-calculator-address-panel dl,
  .tax-jurisdiction-row,
  .tax-sales-comparison-add-form,
  .tax-sales-comparison-entity-option,
  .tax-sales-comparison-guidance-request,
  .tax-sales-comparison-detail-header {
    grid-template-columns: 1fr;
  }

  .tax-sales-comparison-guidance-request-input-row {
    grid-template-columns: 1fr;
  }

  .coverage-roadmap-interest-input-row {
    grid-template-columns: 1fr;
  }

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

  .tax-sales-comparison-income-summary-scope-note {
    grid-template-columns: 1fr;
  }

  .tax-sales-comparison-income-summary-flags {
    gap: 0.4rem;
  }

  .tax-sales-comparison-income-summary-state,
  .tax-sales-comparison-income-summary-flag {
    padding: 0.22rem 0.45rem;
    font-size: 0.68rem;
  }

  .tax-sales-comparison-entity-option-detail {
    grid-column: 1;
  }

  .tax-jurisdiction-summary-table td:first-child,
  .tax-stack-check-table td:nth-child(2),
  .tax-stack-check-table td:nth-child(3) {
    width: auto;
  }

  .tax-stack-check-table {
    font-size: 0.86rem;
  }

  .tax-stack-check-table th,
  .tax-stack-check-table td {
    padding: 0.4rem 0.35rem;
  }

  .tax-sales-comparison-income-summary-grid {
    grid-template-columns: 1fr;
  }

  .tax-sales-comparison-table-wrap {
    --tax-sales-comparison-sticky-deduction-top: 8rem;
    height: clamp(30rem, 76vh, 52rem);
    height: clamp(30rem, 76dvh, 52rem);
  }
}

@media (max-width: 700px) {
  .tax-sales-comparison-table-wrap {
    height: clamp(24rem, 66vh, 38rem);
    height: clamp(24rem, 66dvh, 38rem);
  }
}

@media (max-height: 560px) {
  .tax-sales-comparison-table-wrap {
    height: min(58vh, 28rem);
    height: min(58dvh, 28rem);
  }
}

@media (prefers-color-scheme: dark) {
  .tax-snapshot-caveat,
  .tax-snapshot-summary {
    color: #a8b5c4;
  }

  .tax-snapshot-context-note {
    color: #8f9cac;
  }

  .tax-snapshot-coming-soon {
    background: #1c2530;
    border-left-color: #6c757d;
    color: #b7c2cd;
  }

  .tax-snapshot-status--loaded {
    background: #1f4b3b;
    color: #d0f1e3;
  }

  .tax-snapshot-status--rate-missing {
    background: #4c4120;
    color: #f3e5b5;
  }

  .tax-snapshot-status--needs-review {
    background: #4b2025;
    color: #ffd8dc;
  }
}

/* Non-filer callout on landing page */
.non-filer-callout {
  text-align: center;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  color: #664d03;
  background-color: rgba(255, 243, 205, 0.5);
  border-radius: var(--pico-border-radius);
}

.non-filer-callout a {
  color: #664d03;
  font-weight: 600;
}

/* Compliance page */
.compliance-overview th,
.compliance-overview td {
  white-space: nowrap;
}

.compliance-never-scored {
  color: var(--pico-muted-color);
  font-size: 0.9em;
  margin-top: 0.5rem;
}

.compliance-never-scored-note {
  font-size: 0.9em;
  margin: 0.5rem 0;
}

/* School district comparison callout on entities index */
.school-district-compare-callout {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: rgba(37, 99, 235, 0.08);
  border-left: 3px solid #2563eb;
  border-radius: var(--pico-border-radius);
  text-align: center;
}

@media (min-width: 576px) {
  .school-district-compare-callout {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* Year range labels below trend charts */
.trend-year-range {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: #94a3b8;
  margin-top: -0.25rem;
  padding: 0 0.125rem;
}

/* Missing years note below trend charts */
.trend-missing-years {
  display: block;
  margin-top: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  color: #664d03;
  background-color: rgba(255, 243, 205, 0.5);
  border-radius: 0.25rem;
}

/* Dissolved entity banner (muted gray - historical, not alarming) */
.dissolved-banner {
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: #e9ecef;
  color: #495057;
  border: 1px solid #ced4da;
  border-left: 0.5rem solid #6c757d;
  border-radius: var(--pico-border-radius);
}

/* Dissolved badge for entity index */
.dissolved-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background-color: #e9ecef;
  color: #495057;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* Non-filer badge for entity index */
.non-filer-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background-color: #fff3cd;
  color: #664d03;
  border: 1px solid #ffecb5;
  border-radius: 0.25rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/*
 * SORTABLE TABLE HEADERS
 * Clickable column headers for sorting tables
 */
.sortable-header {
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

.sortable-header:hover {
  text-decoration: underline;
}

.sortable-header.active {
  font-weight: bold;
}

/*
 * PAGE HEADER LAYOUTS
 * Common pattern: title on left, action buttons on right
 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.page-header--center {
  align-items: center;
}

.page-header hgroup {
  margin-bottom: 0;
}

/*
 * BUTTON GROUPS
 * Horizontal grouping for action buttons
 */
.button-group {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.button-group--end {
  justify-content: flex-end;
}

.button-group--center {
  align-items: center;
}

/*
 * FILTER FORMS
 * Consistent styling for index page filters
 */
.filter-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

/*
 * CONTENT SECTIONS
 * Common spacing patterns
 */
.section-spaced {
  margin-bottom: 1.25rem;
}

.content-block {
  margin-top: 1rem;
}

/*
 * STATUS INDICATORS
 * Visual status badges
 */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.status-indicator--live {
  color: #2ea44f;
}

.status-indicator--live::before {
  content: "●";
}

/*
 * SOURCE TYPE BADGES
 * Document source type visual indicators
 */
.source-type-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.source-type-badge.pdf {
  background-color: #dbeafe;
  color: #1e40af;
}

.source-type-badge.web {
  background-color: #dcfce7;
  color: #166534;
}

/*
 * UTILITY: Text alignment
 */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.align-self-center {
  align-self: center;
}

/*
 * UTILITY: Hidden for JS toggle
 * Use this instead of inline style="display: none"
 */
.hidden {
  display: none;
}

/*
 * DATA INDICATORS
 * Visual indicators for data states
 */
.missing-data {
  background-color: #fff3cd;
  color: #856404;
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-size: 0.85em;
}

.muted {
  color: #6c757d;
}

/*
 * UTILITY: Link styling
 */
.link-plain {
  text-decoration: none;
}

.link-plain:hover {
  text-decoration: underline;
}

/*
 * FINANCIAL TREND CHARTS
 * Sparkline-style area charts for entity dashboard
 */
.trends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.trend-card {
  padding: 0.5rem 0.5rem 0.75rem 0;
  margin: 0;
}

.trend-card header,
.trend-card .trend-latest,
.trend-card .trend-subtitle {
  margin-left: 0.5rem;
}

.trend-card header {
  margin-bottom: 0;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
}

.trend-card header strong {
  font-size: 0.875rem;
}

.trend-latest {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.15rem;
}

.trend-subtitle {
  font-size: 0.7rem;
  color: var(--pico-muted-color);
  margin-bottom: 0.1rem;
}

.trend-latest-year {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--pico-muted-color);
}

.trend-card--revenue {
  background-color: rgba(22, 163, 74, 0.08);
  border-left: 3px solid #16a34a;
}

.trend-card--expenditure {
  background-color: rgba(220, 38, 38, 0.08);
  border-left: 3px solid #dc2626;
}

.trend-card--balance-sheet {
  background-color: rgba(37, 99, 235, 0.08);
  border-left: 3px solid #2563eb;
}

.trend-card--derived {
  background-color: rgba(139, 92, 246, 0.08);
  border-left: 3px solid #8b5cf6;
}

.trend-card--demographic {
  background-color: rgba(13, 148, 136, 0.08);
  border-left: 3px solid #0d9488;
}

/*
 * COMMUNITY PROFILE SNAPSHOT STATS
 * Compact stat bar for derived Census rates (poverty, education, unemployment, homeownership)
 */
.community-snapshot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.community-stat {
  flex: 1 1 140px;
  text-align: center;
  padding: 0.75rem;
  background: var(--pico-card-background-color);
  border-radius: var(--pico-border-radius);
  border-left: 3px solid #0d9488;
}

.community-stat-value {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: #0d9488;
}

.community-stat-label {
  display: block;
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

.community-stat-year {
  display: block;
  font-size: 0.75rem;
  opacity: 0.6;
}

/*
 * CONTAINMENT LINKS ("Part of" breadcrumbs on entity show pages)
 */
.containment-links {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-top: -0.5rem;
}

.containment-links a {
  text-decoration: none;
}

.containment-links a:hover {
  text-decoration: underline;
}

/*
 * STATE LANDING PAGE — Entity Type Breakdown
 */
.entity-type-breakdown {
  margin-top: 1.5rem;
}

.entity-type-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.entity-type-item a {
  display: block;
  padding: 0.5rem 1rem;
  background: var(--pico-card-background-color);
  border-radius: var(--pico-border-radius);
  text-decoration: none;
}

.entity-type-item a:hover {
  text-decoration: underline;
}

/*
 * STATE LANDING PAGE — Top Entities by Population
 */
.top-entities {
  margin-top: 1.5rem;
}

.top-entities-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.top-entity-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--pico-card-background-color);
  border-radius: var(--pico-border-radius);
  text-decoration: none;
}

.top-entity-link:hover {
  text-decoration: underline;
}

.top-entity-kind {
  font-size: 0.85rem;
  opacity: 0.7;
}

.top-entity-pop {
  margin-left: auto;
  font-weight: 600;
  font-size: 0.9rem;
}

/*
 * STATE LANDING PAGE — Demographics section
 */
.state-demographics {
  margin-top: 1.5rem;
}

/*
 * FINANCIAL TRENDS SECTION HEADERS
 * Subsection headers within the financial trends area
 */
#financial-trends h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--pico-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
  padding-bottom: 0.25rem;
}

/*
 * LANDING PAGE
 */
.landing-hero {
  text-align: center;
  padding: 2rem 0 1rem;
}

.landing-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.entity-search {
  position: relative;
  max-width: 620px;
  margin: 1.5rem auto 0;
  text-align: left;
}

.entity-search input[type="search"] {
  margin-bottom: 0;
  font-size: 1.1rem;
  padding: 0.85rem 1rem 0.85rem 2.25rem;
  border: 2px solid var(--pico-primary);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.entity-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--pico-card-background-color, #fff);
  border: 1px solid var(--pico-muted-border-color);
  border-top: none;
  border-radius: 0 0 0.25rem 0.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 400px;
  overflow-y: auto;
}

.entity-search-result {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: var(--pico-color);
  cursor: pointer;
}

.entity-search-result:hover,
.entity-search-result--active {
  background: var(--pico-primary-focus);
}

.entity-search-name {
  font-weight: 500;
}

.entity-search-subtitle {
  font-size: 0.75rem;
  color: var(--pico-muted-color);
  letter-spacing: 0.03em;
}

.entity-search-empty {
  padding: 0.75rem;
  color: var(--pico-muted-color);
  font-style: italic;
}

.landing-stats {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}

.landing-stat {
  text-align: center;
  min-width: 100px;
}

.landing-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  display: block;
}

.landing-stat-label {
  font-size: 0.75rem;
  color: var(--pico-muted-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Hero action buttons: stack on mobile, side-by-side on tablet+ */
.hero-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  margin: 1.5rem 0;
}

.hero-buttons a[role="button"] {
  width: 100%;
  max-width: 280px;
  text-align: center;
}

@media (min-width: 576px) {
  .hero-buttons {
    flex-direction: row;
    justify-content: center;
  }

  .hero-buttons a[role="button"] {
    width: auto;
    max-width: none;
  }
}

/* Landing tiles (Slice 1c-C, Layout A): ONE card system on welcome#index.
   Solid color fills, white text, white CTA with tile-colored label; the SAME
   tiles ride both themes — only the page ground changes (Pico light/dark). */
.landing-hero .landing-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin: 1.5rem 0 2rem;
}

.landing-hero .landing-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 1.2rem 1.3rem;
  border-radius: 0.8rem;
  color: #fff;
  text-align: left;
}

.landing-hero .landing-tile h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #fff;
}

.landing-hero .landing-tile p {
  margin-bottom: 0.9rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.92);
}

.landing-hero .landing-tile-eyebrow {
  margin: 0 0 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

/* White-CTA treatment, defined ONCE for the tile CTAs and the email-band
   submit button (each tile sets --landing-tile-ink; fallback = hero blue
   so an unset variable never yields white-on-white) */
.landing-hero .landing-tile .landing-tile-cta[role="button"],
.landing-hero .landing-tile--email .landing-interest-form button[type="submit"] {
  background: #fff;
  border-color: #fff;
  color: var(--landing-tile-ink, #1d4ed8);
  font-weight: 700;
}

.landing-hero .landing-tile .landing-tile-cta[role="button"] {
  margin-top: auto;
  margin-bottom: 0;
  align-self: flex-start;
}

.landing-hero .landing-tile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-top: 0.65rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
}

.landing-hero .landing-tile-links a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.landing-hero .landing-tile--hero {
  background: linear-gradient(135deg, #1d4ed8, #4338ca);
  --landing-tile-ink: #1d4ed8;
  padding: 1.5rem 1.5rem 1.35rem;
  box-shadow: 0 16px 40px rgba(37, 63, 175, 0.34);
}

.landing-hero .landing-tile--hero h3 {
  font-size: clamp(1.45rem, 2.8vw, 1.85rem);
}

.landing-hero .landing-tile--mcp {
  --landing-tile-ink: #047857;
  background: var(--landing-tile-ink);
}

.landing-hero .landing-tile--ny {
  background: #2563eb;
  --landing-tile-ink: #1d4ed8;
}

.landing-hero .landing-tile--ca {
  --landing-tile-ink: #0f766e;
  background: var(--landing-tile-ink);
}

/* Email band: violet, text + form side by side when the width allows */
.landing-hero .landing-tile--email {
  background: #7c3aed;
  --landing-tile-ink: #6d28d9;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.2rem;
}

.landing-hero .landing-tile-email-text {
  flex: 1 1 260px;
  min-width: 220px;
}

.landing-hero .landing-tile--email h3 {
  margin: 0.1rem 0 0.25rem;
  font-size: 1.15rem;
}

.landing-hero .landing-tile--email p {
  margin-bottom: 0;
  font-size: 0.9rem;
}

.landing-hero .landing-tile--email .landing-interest-form {
  flex: 1 1 300px;
  min-width: 240px;
  width: auto;
  margin-top: 0;
}

.landing-hero .landing-tile--email .landing-interest-form label {
  color: #fff;
}

.landing-hero .landing-tile--email .landing-interest-form input[type="email"] {
  border-color: #fff;
}

@media (min-width: 768px) {
  .landing-hero .landing-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-hero .landing-tile--hero,
  .landing-hero .landing-tile--mcp,
  .landing-hero .landing-tile--email {
    grid-column: 1 / -1;
  }
}

/* Feature cards: state-landing callouts (welcome#index now uses landing tiles) */

.feature-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

@media (min-width: 768px) {
  .feature-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.feature-card {
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--pico-muted-border-color);
}

.feature-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.feature-card p {
  font-size: 0.925rem;
  margin-bottom: 1rem;
}

.feature-card a[role="button"] {
  display: inline-block;
}

.feature-card--nyc {
  border-left: 4px solid var(--pico-primary);
}

.feature-card--ca {
  border-left: 4px solid #2563eb;
}

.feature-card--fl {
  border-left: 4px solid #f97316;
}

.feature-card--nc {
  border-left: 4px solid #0f766e;
}

.state-quick-take {
  margin: 1.5rem 0 2rem;
}

.state-quick-take p {
  margin: 0;
  color: var(--pico-muted-color);
}

/* Rankings grid: 1 col mobile, 2 col tablet, 3 col desktop */
.rankings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

@media (min-width: 768px) {
  .rankings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .rankings-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ranking-card {
  margin: 0;
}

.ranking-card table {
  margin: 0;
  font-size: 0.875rem;
}

.ranking-card td:last-child,
.ranking-card th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ranking-card td:first-child {
  width: 2rem;
  color: var(--pico-muted-color);
}

.ranking-description {
  font-size: 0.8rem;
  color: var(--pico-muted-color);
  margin-bottom: 0.75rem;
}

/* Toggle buttons for Top 10 / Bottom 10 */
.ranking-toggle-group {
  display: flex;
  gap: 0;
}

.ranking-toggle {
  all: unset;
  cursor: pointer;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  border: 1px solid var(--pico-muted-border-color);
  color: var(--pico-muted-color);
  background: transparent;
}

.ranking-toggle:first-child {
  border-radius: var(--pico-border-radius) 0 0 var(--pico-border-radius);
}

.ranking-toggle:last-child {
  border-radius: 0 var(--pico-border-radius) var(--pico-border-radius) 0;
  border-left: none;
}

.ranking-toggle--active {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
  border-color: var(--pico-primary-background);
}

.ranking-toggle--active + .ranking-toggle {
  border-left: 1px solid var(--pico-primary-background);
}

.ranking-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/*
 * ENTITY HERO STATS
 */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

@media (min-width: 768px) {
  .hero-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.hero-stat {
  padding: 1rem;
  background: var(--pico-card-background-color);
  border-radius: var(--pico-border-radius);
}

.hero-stat-value {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
  display: block;
  font-variant-numeric: tabular-nums;
}

.hero-stat-label {
  font-size: 0.75rem;
  color: var(--pico-muted-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
}

.hero-stat-year {
  display: block;
  font-size: 0.7rem;
  color: var(--pico-muted-color);
  opacity: 0.7;
  margin-top: 0.1rem;
}

.hero-stat-sublabel {
  display: block;
  font-size: 0.65rem;
  color: var(--pico-muted-color);
  font-style: italic;
  margin-top: -0.1rem;
}

/* Town villages section */
.town-villages-section {
  margin-bottom: 1.5rem;
}

.town-villages-section h3 {
  margin-bottom: 0.5rem;
}

.town-villages-summary {
  margin-bottom: 0.75rem;
  color: var(--pico-muted-color);
}

.town-villages-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.town-village-item {
  white-space: nowrap;
}

.town-village-pop {
  font-size: 0.85rem;
  color: var(--pico-muted-color);
  margin-left: 0.25rem;
}

/*
 * RESPONSIVE: Page header stacking on mobile
 */
@media (max-width: 576px) {
  .page-header {
    flex-direction: column;
    gap: 1rem;
  }
  .page-header .button-group {
    width: 100%;
    justify-content: flex-start;
  }
}

/*
 * NAVIGATION — Popover API mobile drawer + desktop inline links
 *
 * Desktop: horizontal flex nav with logo + inline links.
 * Mobile: hamburger opens a slide-in drawer via the Popover API
 * (zero JS for toggle/dismiss, light-dismiss on backdrop click, Escape key).
 * SVG icons instead of Unicode for cross-browser reliability.
 */

/* Reset Pico's aggressive nav styles.
 * Pico v2 expects nav > ul > li structure and forces display:flex,
 * justify-content:space-between on <nav>. Since we use a flat div/button
 * structure, we must unset Pico styles on the nav and the specific
 * element types Pico targets (a, button, strong, ul, li).
 * Do NOT use `.site-nav *` — that kills SVG path stroke inheritance. */
.site-nav,
.site-nav a,
.site-nav button,
.site-nav strong,
.site-nav ul,
.site-nav li {
  all: unset;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  gap: 0.5rem;
}

.site-nav .nav-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.nav-logo {
  color: var(--pico-color);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer;
}

.site-nav .nav-logo-state {
  color: var(--pico-muted-color);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: normal;
  cursor: pointer;
}

/* Desktop nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-links a {
  display: block;
  padding: 0.3rem 0.4rem;
  font-size: 0.8rem;
  color: var(--pico-secondary);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--pico-border-radius);
  cursor: pointer;
}

.nav-links a:hover {
  text-decoration: underline;
}

/* Hamburger button — hidden on desktop, needs all:unset to kill Pico's
 * button styles (primary background, big padding) since our button is
 * NOT inside nav > ul > li where Pico's compact override would apply. */
.nav-hamburger {
  all: unset;
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  padding: 0.5rem;
  cursor: pointer;
  color: var(--pico-color);
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
}

.nav-hamburger svg {
  display: block;
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
}

.nav-hamburger:hover {
  border-color: var(--pico-color);
}

/* ---- Mobile: <=768px ---- */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }
}

/* ---- Mobile drawer (Popover API) ---- */
.mobile-nav {
  /* Reset popover defaults */
  inset: unset;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(300px, 85vw);
  margin: 0;
  border: none;
  padding: 0;

  /* Styling */
  background: var(--pico-background-color);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);

  /* Layout */
  display: flex;
  flex-direction: column;

  /* Entry animation */
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.25s ease, transform 0.25s ease,
              display 0.25s allow-discrete;
}

.mobile-nav:popover-open {
  display: flex;
  opacity: 1;
  transform: translateX(0);
}

@starting-style {
  .mobile-nav:popover-open {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* Backdrop — semi-transparent overlay */
.mobile-nav::backdrop {
  background: rgba(0, 0, 0, 0);
  transition: background 0.25s ease, display 0.25s allow-discrete;
}

.mobile-nav:popover-open::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

@starting-style {
  .mobile-nav:popover-open::backdrop {
    background: rgba(0, 0, 0, 0);
  }
}

/* Prevent body scroll when drawer is open */
body:has(.mobile-nav:popover-open) {
  overflow: hidden;
}

/* Drawer header: logo + close button */
.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.mobile-nav-close {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--pico-color);
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--pico-border-radius);
  box-sizing: border-box;
}

.mobile-nav-close svg {
  display: block;
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
}

.mobile-nav-close:hover {
  background: var(--pico-secondary-focus);
}

/* Drawer links */
.mobile-nav > a,
.mobile-nav > span,
.mobile-nav > form {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.25rem;
  color: var(--pico-color);
  text-decoration: none;
  font-size: 1rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.mobile-nav > a:hover,
.mobile-nav > a:focus {
  background: var(--pico-secondary-focus);
}

.mobile-nav > a:last-of-type {
  border-bottom: none;
}

.mobile-nav-divider {
  margin: 0.5rem 1rem;
  border-color: var(--pico-muted-border-color);
}

.mobile-nav-email {
  display: block;
  padding: 0.5rem 1.25rem;
  font-size: 0.8rem;
  color: var(--pico-muted-color);
}

.mobile-nav-signout {
  margin: 0.5rem 1rem 1rem;
  width: calc(100% - 2rem);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mobile-nav::backdrop {
    transition-duration: 0.01s;
  }
}

/*
 * COLLAPSIBLE SECTIONS (details/summary)
 * Styled for clear clickable affordance
 */
details {
  margin-bottom: 1rem;
}

details summary {
  cursor: pointer;
  padding: 0.75rem 1rem;
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

details summary:hover {
  background: var(--pico-secondary-background);
  border-color: var(--pico-primary);
}

details summary:focus-visible {
  outline: 2px solid var(--pico-primary);
  outline-offset: 2px;
}

/* Custom marker styling */
details summary::marker {
  color: var(--pico-primary);
}

/* When open, keep the summary visually connected to content */
details[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
  border-bottom: none;
}

details[open] > *:not(summary) {
  padding: 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-top: none;
  border-bottom-left-radius: var(--pico-border-radius);
  border-bottom-right-radius: var(--pico-border-radius);
}

/* Places manager (Slice 1d-B): always-visible membership chips + inline add
   field in one surface at the top of the compare flow. Sits on the page
   ground above the edit-inputs control, so it carries its own light/dark
   treatment via the shared tokens. */
.tax-sales-comparison-places {
  margin: var(--bx-space-section) 0 0.75rem;
}

.tax-sales-comparison-place-attention {
  display: grid;
  gap: 0.3rem;
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.75rem;
  list-style: none;
  border: 1px dashed #b7791f;
  border-radius: var(--bx-radius-inner);
  background: #fffaf0;
  font-size: 0.84rem;
  color: #6b5518;
}

.tax-sales-comparison-place-attention li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  align-items: baseline;
}

/* Inline (chips-adjacent) presentation of the add panel: the form stands on
   the page ground without the standalone card chrome. */
.tax-sales-comparison-entity-picker--inline {
  margin-top: 0.65rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.tax-sales-comparison-entity-picker--inline label[for="entry_query"] {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bx-ink-muted);
}

.tax-sales-comparison-entity-picker--inline .tax-sales-comparison-add-field-help {
  display: none;
}

.tax-sales-comparison-place-chip-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tax-sales-comparison-place-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.28rem 0.3rem 0.28rem 0.62rem;
  font-size: 0.88rem;
  color: var(--bx-ink);
  background: var(--bx-gradient-cool);
  border: 1px solid var(--bx-border-accent);
  border-radius: var(--bx-radius-pill);
}

.tax-sales-comparison-place-chip--unresolved {
  border-style: dashed;
  opacity: 0.75;
}

.tax-sales-comparison-place-chip-dot {
  flex: none;
  width: 0.62rem;
  height: 0.62rem;
  background: var(--bx-border-accent);
  border-radius: 50%;
}

/* Per-slot dot shapes: the dot's second identity channel alongside color
   (the chart lines carry dashes instead). Near-hue palette pairs — the two
   greens (slots 2/6 as 1-based), pink/red, amber/orange — stay tellable at
   dot size. Slot 0 keeps the base circle.
   PAIRED TABLE: TaxCalculatorIncomeCurveHelper::SLOT_MARKER_STYLES renders
   these same slot shapes as chart markers/legend swatches/glyphs — change a
   slot's shape in BOTH places or a place's chip and chart markers diverge. */
.tax-sales-comparison-place-chip-dot--slot-1 {
  border-radius: 2px;
}

.tax-sales-comparison-place-chip-dot--slot-2 {
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.tax-sales-comparison-place-chip-dot--slot-3 {
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.tax-sales-comparison-place-chip-dot--slot-4 {
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}

.tax-sales-comparison-place-chip-dot--slot-5 {
  border-radius: 0;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.tax-sales-comparison-place-chip-dot--slot-6 {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.tax-sales-comparison-place-chip-dot--slot-7 {
  border-radius: 0;
  clip-path: polygon(
    35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%,
    65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%
  );
}

button.tax-sales-comparison-place-chip-remove {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  padding: 0;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--bx-ink-muted, var(--bx-ink));
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
}

button.tax-sales-comparison-place-chip-remove:hover,
button.tax-sales-comparison-place-chip-remove:focus-visible {
  color: #fff;
  background: var(--pico-primary);
}

.tax-sales-comparison-place-chip-count {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--bx-ink-muted, var(--bx-ink));
}

/* The income widget's exact-income control (typed entry beside the slider,
   which only walks the sampled grid). */
.tax-sales-comparison-income-curve-exact-income {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.tax-sales-comparison-income-curve-exact-income input {
  width: 7.5rem;
}

/* Detailed-table toggle revealing the collapsed rate-schedule rows. */
.tax-sales-comparison-detail-rows-toggle {
  margin-left: 0.75rem;
  padding: 0.2rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pico-primary);
  background: transparent;
  border: 1px solid var(--bx-border-accent);
  border-radius: var(--bx-radius-pill);
  cursor: pointer;
}

.tax-sales-comparison-detail-rows-toggle:hover {
  background: #e2ecfc;
}

/* Remove nested padding for figures/tables inside details */
details[open] > figure {
  margin: 0;
}

details[open] > figure > table {
  margin-bottom: 0;
}

/*
 * SCATTER PLOT COMPARISONS
 * School district comparison charts
 */
.scatter-controls {
  margin-bottom: 1.5rem;
}

.scatter-controls .grid {
  gap: 1rem;
}

.scatter-controls label {
  margin-bottom: 0;
}

/* Year scroller for county comparison charts */
.year-scroller {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.year-scroller-btn {
  width: auto;
  padding: 0.25rem 0.75rem;
  margin: 0;
  font-size: 1.1rem;
  line-height: 1;
}

.year-scroller-label {
  font-size: 1.1rem;
  min-width: 5rem;
  text-align: center;
}

.year-scroller-hint {
  font-size: 0.8rem;
}

.year-scroller-range {
  margin-bottom: 0.5rem;
}

.scatter-chart-wrapper {
  height: 500px;
}

.scatter-chart-container {
  min-height: 500px;
  margin-bottom: 1.5rem;
  background: var(--pico-card-background-color);
  border-radius: var(--pico-border-radius);
  padding: 1rem;
}

.scatter-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--pico-card-background-color);
  border-radius: var(--pico-border-radius);
}

.scatter-legend strong {
  margin-right: 0.5rem;
}

.scatter-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
}

.scatter-legend-color {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.scatter-legend-split {
  gap: 0.2rem;
}

.scatter-legend-color-half {
  display: inline-block;
  width: 6px;
  height: 12px;
}

.scatter-legend-color-half:first-child {
  border-radius: 6px 0 0 6px;
}

.scatter-legend-color-half:last-of-type {
  border-radius: 0 6px 6px 0;
  margin-right: 0.2rem;
}

.scatter-count {
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

/* HTML tooltip for scatter charts — fixed top-right position to avoid
 * the bug where moving toward a tooltip triggers an adjacent dot. */
.scatter-tooltip {
  position: absolute;
  background: var(--pico-card-background-color, #1e293b);
  border: 1px solid var(--pico-muted-border-color, #334155);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 10;
  max-width: 280px;
  font-size: 0.85rem;
  line-height: 1.4;
}

.scatter-tooltip-names a {
  display: block;
  color: var(--pico-primary);
  text-decoration: none;
  padding: 0.15rem 0;
}

.scatter-tooltip-names a:hover {
  text-decoration: underline;
}

/* Close button for pinned tooltips */
.scatter-tooltip-close {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  background: none;
  border: none;
  color: var(--pico-muted-color, #94a3b8);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
  min-width: 24px;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scatter-tooltip-close:hover {
  color: var(--pico-color, #e2e8f0);
  background: rgba(255, 255, 255, 0.1);
}

.scatter-tooltip-scores {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--pico-muted-border-color, #334155);
  color: var(--pico-muted-color, #94a3b8);
  font-size: 0.8rem;
}

.scatter-tooltip-aid {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--pico-muted-color, #94a3b8);
}

.scatter-tooltip-aid-bar {
  height: 6px;
  min-width: 2px;
  max-width: 80px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Click hint below scatter charts — fades after first interaction */
.scatter-click-hint {
  text-align: center;
  font-size: 0.8rem;
  color: var(--pico-muted-color);
  margin: 0.25rem 0 0;
  opacity: 1;
  transition: opacity 0.6s ease;
}

.scatter-click-hint.faded {
  opacity: 0;
}

/* Stress trajectory chart */
.trajectory-chart-wrapper {
  min-height: 450px;
  margin-bottom: 1.5rem;
}

.trajectory-zoom-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.trajectory-zoom-controls small {
  color: var(--pico-muted-color);
}

.trajectory-reset-zoom {
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
}

/* Trajectory thumbnail on entity show */
.trajectory-thumbnail {
  margin-bottom: 1.5rem;
}

.trajectory-thumbnail header {
  padding-bottom: 0.25rem;
}

.trajectory-thumbnail-chart {
  min-height: 200px;
  max-height: 200px;
}

.trajectory-thumbnail footer {
  padding-top: 0.5rem;
  text-align: center;
}

/* Trajectory source attribution */
.trajectory-gap-row {
  color: var(--pico-muted-color);
  font-style: italic;
}

.trajectory-sources {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--pico-card-background-color, #1e293b);
  border-radius: 8px;
  border-left: 4px solid var(--pico-primary, #3b82f6);
}

.trajectory-sources h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.trajectory-sources p {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.trajectory-sources-note {
  color: var(--pico-muted-color, #94a3b8);
  font-size: 0.85rem;
  margin-bottom: 0;
}

/* Print styles for trajectory page */
@media print {
  .button-group,
  .trajectory-zoom-controls,
  nav,
  footer {
    display: none !important;
  }

  .trajectory-chart-wrapper {
    min-height: 350px;
    max-height: 400px;
    break-inside: avoid;
  }

  .scatter-legend {
    break-inside: avoid;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .scatter-legend-color {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Force collapsed details content visible when printing */
  details > summary {
    display: none;
  }
  details:not([open]) > *:not(summary) {
    display: block !important;
  }

  /* Keep tables and sources together */
  .indicator-breakdown {
    break-before: page;
  }

  .indicator-fiscal,
  .indicator-environmental {
    break-inside: avoid;
  }

  .trajectory-sources {
    break-inside: avoid;
  }

  /* Preserve colored indicator score badges */
  .indicator-score {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* White backgrounds for ink savings */
  .non-filer-banner,
  .entity-year-note-banner,
  .entity-year-note {
    background: none;
    border: 1px solid #888;
  }

  /* Compliance page: expand all details for print */
  details {
    open: true;
  }
  details[open] summary {
    margin-bottom: 0.5rem;
  }
  .compliance-overview {
    break-inside: avoid;
  }
}

/* Indicator breakdown tables on stress trajectory page */
.indicator-breakdown {
  margin-top: 2rem;
}

.indicator-breakdown h3 {
  margin-bottom: 0.25rem;
}

.indicator-breakdown-note {
  color: var(--pico-muted-color, #94a3b8);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.indicator-breakdown h4 {
  font-size: 0.95rem;
  margin: 0.75rem 0 0.25rem;
}

.indicator-table {
  font-size: 0.85rem;
}

.indicator-table th,
.indicator-table td {
  padding: 0.35rem 0.5rem;
}

.indicator-year-col,
.indicator-max-col,
.indicator-score-cell {
  text-align: center;
  white-space: nowrap;
}

.indicator-max-col {
  color: var(--pico-muted-color, #94a3b8);
}

.indicator-score {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  min-width: 2rem;
}

.indicator-no-data {
  color: var(--pico-muted-color, #94a3b8);
}

.indicator-gap-year {
  color: var(--pico-muted-color, #94a3b8);
}

.indicator-gap-cell {
  background: var(--pico-muted-border-color, #334155);
}

.indicator-gap-marker {
  display: inline-block;
  width: 100%;
  height: 1.5rem;
  background: var(--pico-muted-border-color, #334155);
  border-radius: 4px;
}

.indicator-gap-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--pico-muted-color, #94a3b8);
  margin-top: 1rem;
}

.indicator-gap-marker-inline {
  display: inline-block;
  width: 1.5rem;
  height: 1rem;
  background: var(--pico-muted-border-color, #334155);
  border-radius: 3px;
}

.indicator-total-row {
  border-top: 2px solid var(--pico-muted-border-color, #334155);
}

.indicator-score-total {
  font-size: 0.85rem;
}

/* Indicator score color preservation handled in main @media print block above */

/* Entity search above scatter charts */
.scatter-search {
  position: relative;
  margin-bottom: 0.75rem;
}

.scatter-search-input {
  margin-bottom: 0;
  max-width: 300px;
}

.scatter-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  width: 300px;
  max-height: 200px;
  overflow-y: auto;
  background: var(--pico-card-background-color, #1e293b);
  border: 1px solid var(--pico-muted-border-color, #334155);
  border-radius: 0 0 6px 6px;
  z-index: 20;
  display: none;
}

.scatter-search-results.active {
  display: block;
}

.scatter-search-results a {
  display: block;
  padding: 0.4rem 0.75rem;
  color: var(--pico-color);
  text-decoration: none;
  font-size: 0.85rem;
}

.scatter-search-results a:hover,
.scatter-search-results a:focus {
  background: var(--pico-primary-focus);
}

.scatter-search-results a mark {
  background: var(--pico-primary);
  color: var(--pico-primary-inverse);
  padding: 0 2px;
  border-radius: 2px;
}

h2 + .fsms-non-filers {
  margin-top: -0.5rem;
}

.fsms-non-filers {
  margin-top: 0;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  background-color: #fff3cd;
  color: #664d03;
  border: 1px solid #ffecb5;
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1.6;
}

.fsms-non-filers a {
  color: #664d03;
}

/*
 * RESPONSIVE: School district comparison controls + scatter charts on mobile
 */
@media (max-width: 576px) {
  .scatter-controls .grid {
    grid-template-columns: 1fr;
  }

  .spacer-mobile-hidden {
    display: none;
  }
  .scatter-chart-wrapper {
    height: 350px;
  }

  .scatter-chart-container {
    min-height: 350px;
  }

  .scatter-search-input {
    max-width: 100%;
  }

  .scatter-search-results {
    width: 100%;
  }

  .year-scroller-hint {
    display: none;
  }
}

/*
 * SCATTER TRAJECTORY HINT
 */
.scatter-trajectory-hint {
  font-size: 0.85rem;
  margin-top: 0;
  margin-bottom: 0.25rem;
}

/*
 * SHARE BUTTONS
 */
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0;
}

.share-btn {
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  margin: 0;
  line-height: 1.4;
}

/* Web Share API button — only show on touch devices */
.share-btn--native {
  display: none;
}

@media (pointer: coarse) {
  .share-btn--native {
    display: inline-block;
  }
}

/*
 * PRINT BRANDING — hidden on screen, visible in print
 */
.print-header,
.print-footer {
  display: none;
}

/*
 * PRINT STYLES
 */
@media print {
  /* Hide non-printable UI */
  .share-buttons,
  .button-group,
  nav,
  footer,
  .trajectory-zoom-controls,
  .scatter-search,
  .year-scroller,
  .year-scroller-range,
  details#governance summary,
  .non-filer-banner a {
    display: none !important;
  }

  .tax-sales-comparison-places,
  .tax-sales-comparison-entity-picker,
  .tax-sales-comparison-manual-property,
  .tax-sales-comparison-input-panel,
  .tax-sales-comparison-income-curve {
    display: none !important;
  }

  .tax-sales-comparison-table-wrap {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
  }

  /* Print branding header */
  .print-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid #334155;
  }

  .print-header-brand {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 0.02em;
  }

  .print-header-url {
    font-size: 0.85rem;
    color: #475569;
  }

  /* Print branding footer */
  .print-footer {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    margin-top: 1rem;
    border-top: 1px solid #94a3b8;
    font-size: 0.75rem;
    color: #64748b;
  }

  /* Expand collapsed details for printing */
  details {
    display: block !important;
  }
  details > * {
    display: block !important;
  }
  details summary {
    display: block !important;
    list-style: none;
  }
  details summary::marker,
  details summary::-webkit-details-marker {
    display: none;
  }

  /* Preserve colors */
  .hero-stats,
  .hero-stat,
  .trend-card,
  .trend-card--revenue,
  .trend-card--expenditure,
  .trend-card--balance-sheet,
  .trend-card--demographic,
  .community-stat,
  .non-filer-banner,
  .entity-year-note-banner,
  .entity-year-note,
  .dissolved-banner,
  .comparability-callout {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Avoid breaking trend cards across pages */
  .trend-card {
    break-inside: avoid;
  }

  /* Keep charts visible */
  .trajectory-chart-wrapper,
  .scatter-chart-wrapper {
    break-inside: avoid;
  }

  /* Keep indicator section heading with its table */
  .indicator-section {
    break-inside: avoid;
  }

  /* Full width */
  .container {
    max-width: 100%;
  }
}

/*
 * RESPONSIVE: Table overflow on mobile
 */
@media (max-width: 768px) {
  figure {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/*
 * CHOROPLETH: Responsive grid — side-by-side on wide screens, stacked on mobile
 */
.choropleth-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1200px) {
  .choropleth-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/*
 * CHOROPLETH: Map notes
 */
.choropleth-note {
  font-size: 0.85rem;
  color: var(--pico-muted-color, #666);
  margin-top: 0.5rem;
  text-align: center;
}