/*
 * Policy Analytics, LLC — Design Tokens
 * Colors + typography CSS variables (base + semantic).
 * Source: PALLC_Style_Guide_2025.pdf + PALLC_portable-color-palette.html
 */

/* Segoe UI is the brand's primary typeface. Segoe UI is a Microsoft system
 * font — no webfont license is freely distributable. We fall back through
 * system fonts where available and to Google Fonts "Open Sans" as the closest
 * humanist-sans match when Segoe is absent. FLAG: substitute font — please
 * provide licensed Segoe UI webfont files if you need pixel-exact match. */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Primary (use first) */
  --pa-cerulean:      #007EA7;   /* Cerulean Blue  — hero brand color */
  --pa-pigment:       #469D49;   /* Pigment Green  */
  --pa-robin:         #3FC0C1;   /* Robin Egg Blue */
  --pa-pumpkin:       #ED7D31;   /* Pumpkin Orange — emphasis */

  /* Secondary (use in charts/graphics with >4 series) */
  --pa-charcoal:      #44546A;   /* Charcoal Blue */
  --pa-jasper:        #DB504A;   /* Jasper Red    */
  --pa-xanthous:      #FFC759;   /* Xanthous Gold */
  --pa-hunter:        #3E6541;   /* Hunter Green  */

  /* Neutrals derived from charcoal-blue & off-white for clean data viz */
  --pa-ink:           #1F2937;   /* body text */
  --pa-ink-muted:     #4B5766;   /* muted text, labels */
  --pa-ink-subtle:    #8A94A3;   /* captions, axis labels */
  --pa-line:          #E2E6EC;   /* hairline dividers */
  --pa-line-strong:   #C7CED8;
  --pa-surface:       #FFFFFF;
  --pa-surface-alt:   #F5F7FA;   /* page bg / table stripes */
  --pa-surface-deep:  #EDF0F5;

  /* ---------- CATEGORICAL CHART PALETTE ----------
   * Per style guide: primary colors first; secondaries added when >4 series. */
  --pa-chart-1: var(--pa-cerulean);
  --pa-chart-2: var(--pa-pigment);
  --pa-chart-3: var(--pa-robin);
  --pa-chart-4: var(--pa-pumpkin);
  --pa-chart-5: var(--pa-charcoal);
  --pa-chart-6: var(--pa-jasper);
  --pa-chart-7: var(--pa-xanthous);
  --pa-chart-8: var(--pa-hunter);

  /* ---------- SEMANTIC ROLES ---------- */
  --pa-fg-1:          var(--pa-ink);
  --pa-fg-2:          var(--pa-ink-muted);
  --pa-fg-3:          var(--pa-ink-subtle);
  --pa-fg-on-brand:   #FFFFFF;
  --pa-bg-1:          var(--pa-surface);
  --pa-bg-2:          var(--pa-surface-alt);
  --pa-bg-3:          var(--pa-surface-deep);
  --pa-brand:         var(--pa-cerulean);
  --pa-brand-alt:     var(--pa-pigment);
  --pa-accent:        var(--pa-pumpkin);
  --pa-success:       var(--pa-pigment);
  --pa-warning:       var(--pa-xanthous);
  --pa-danger:        var(--pa-jasper);
  --pa-info:          var(--pa-robin);
  --pa-border:        var(--pa-line);
  --pa-border-strong: var(--pa-line-strong);
  --pa-focus-ring:    color-mix(in srgb, var(--pa-cerulean) 45%, transparent);

  /* ---------- TYPOGRAPHY ---------- */
  --pa-font-sans: "Segoe UI", "Open Sans", -apple-system, BlinkMacSystemFont,
                  "Helvetica Neue", Arial, sans-serif;
  --pa-font-display: "Segoe UI", "Open Sans", -apple-system, BlinkMacSystemFont,
                     "Helvetica Neue", Arial, sans-serif;
  --pa-font-mono: "JetBrains Mono", "Consolas", "SF Mono", ui-monospace, monospace;

  /* Weights mapped from the style guide (Light/Regular/Semibold/Bold) */
  --pa-w-light:    300;
  --pa-w-regular:  400;
  --pa-w-semibold: 600;
  --pa-w-bold:     700;

  /* Type scale — optimized for analytics reports, slides, and UI */
  --pa-fs-cover:      56px;   /* Cover titles (Segoe UI Bold)     */
  --pa-fs-page-title: 36px;   /* Page titles (Segoe UI Semibold)  */
  --pa-fs-section:    24px;   /* Section titles (Semibold/Regular)*/
  --pa-fs-subtitle:   20px;
  --pa-fs-body-lg:    18px;
  --pa-fs-body:       16px;   /* Body (Regular)                   */
  --pa-fs-body-sm:    14px;
  --pa-fs-caption:    12px;   /* Charts/maps labels (Light)       */

  --pa-lh-tight:  1.15;
  --pa-lh-snug:   1.3;
  --pa-lh-normal: 1.5;
  --pa-lh-loose:  1.65;

  --pa-ls-tight:   -0.01em;
  --pa-ls-normal:   0;
  --pa-ls-wide:     0.04em;
  --pa-ls-eyebrow:  0.12em;  /* section eyebrows, used sparingly */

  /* ---------- SPACING (4px base) ---------- */
  --pa-sp-1:  4px;
  --pa-sp-2:  8px;
  --pa-sp-3:  12px;
  --pa-sp-4:  16px;
  --pa-sp-5:  24px;
  --pa-sp-6:  32px;
  --pa-sp-7:  48px;
  --pa-sp-8:  64px;
  --pa-sp-9:  96px;

  /* ---------- RADII ---------- */
  --pa-r-sm: 4px;
  --pa-r-md: 8px;
  --pa-r-lg: 12px;
  --pa-r-xl: 20px;
  --pa-r-pill: 999px;

  /* ---------- ELEVATION (soft, report-friendly) ---------- */
  --pa-shadow-xs: 0 1px 2px rgba(31, 41, 55, 0.06);
  --pa-shadow-sm: 0 1px 3px rgba(31, 41, 55, 0.08), 0 1px 2px rgba(31, 41, 55, 0.04);
  --pa-shadow-md: 0 4px 10px rgba(31, 41, 55, 0.08), 0 2px 4px rgba(31, 41, 55, 0.04);
  --pa-shadow-lg: 0 12px 28px rgba(31, 41, 55, 0.10), 0 4px 10px rgba(31, 41, 55, 0.05);

  /* ---------- MOTION ---------- */
  --pa-ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
  --pa-ease-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pa-dur-fast:    120ms;
  --pa-dur-med:     220ms;
  --pa-dur-slow:    360ms;
}

/* ---------- SEMANTIC HTML DEFAULTS ---------- */
html, body {
  font-family: var(--pa-font-sans);
  color: var(--pa-fg-1);
  background: var(--pa-bg-1);
  font-size: var(--pa-fs-body);
  line-height: var(--pa-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .pa-h1 {
  font-family: var(--pa-font-display);
  font-size: var(--pa-fs-page-title);
  font-weight: var(--pa-w-semibold);
  line-height: var(--pa-lh-tight);
  letter-spacing: var(--pa-ls-tight);
  color: var(--pa-fg-1);
  margin: 0 0 var(--pa-sp-4);
}
h2, .pa-h2 {
  font-family: var(--pa-font-display);
  font-size: var(--pa-fs-section);
  font-weight: var(--pa-w-semibold);
  line-height: var(--pa-lh-snug);
  color: var(--pa-fg-1);
  margin: 0 0 var(--pa-sp-3);
}
h3, .pa-h3 {
  font-size: var(--pa-fs-subtitle);
  font-weight: var(--pa-w-semibold);
  line-height: var(--pa-lh-snug);
  color: var(--pa-fg-1);
  margin: 0 0 var(--pa-sp-2);
}
h4, .pa-h4 {
  font-size: var(--pa-fs-body-lg);
  font-weight: var(--pa-w-semibold);
  color: var(--pa-fg-1);
  margin: 0 0 var(--pa-sp-2);
}
p, .pa-p {
  font-size: var(--pa-fs-body);
  font-weight: var(--pa-w-regular);
  line-height: var(--pa-lh-normal);
  color: var(--pa-fg-1);
  margin: 0 0 var(--pa-sp-4);
}
small, .pa-caption {
  font-size: var(--pa-fs-caption);
  font-weight: var(--pa-w-light);
  color: var(--pa-fg-3);
  letter-spacing: var(--pa-ls-wide);
}
.pa-eyebrow {
  font-size: var(--pa-fs-caption);
  font-weight: var(--pa-w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--pa-ls-eyebrow);
  color: var(--pa-brand);
}
.pa-cover-title {
  font-family: var(--pa-font-display);
  font-size: var(--pa-fs-cover);
  font-weight: var(--pa-w-bold);
  line-height: var(--pa-lh-tight);
  letter-spacing: var(--pa-ls-tight);
  color: var(--pa-fg-1);
}
code, pre, .pa-mono {
  font-family: var(--pa-font-mono);
  font-size: 0.92em;
}

a {
  color: var(--pa-brand);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--pa-dur-fast) var(--pa-ease-standard),
              color var(--pa-dur-fast) var(--pa-ease-standard);
}
a:hover { border-bottom-color: currentColor; }
a:focus-visible {
  outline: 2px solid var(--pa-focus-ring);
  outline-offset: 2px;
  border-radius: var(--pa-r-sm);
}

/* ── AUTH / ADMIN ── */
.auth-page,
.admin-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--pa-sp-7) var(--pa-sp-5);
}

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.auth-panel {
  width: min(440px, 100%);
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-r-md);
  box-shadow: var(--pa-shadow-md);
  padding: var(--pa-sp-6);
}

.auth-logo {
  display: block;
  width: 220px;
  height: auto;
  margin-bottom: var(--pa-sp-5);
}

.auth-panel h1,
.admin-header h1 {
  font-size: 24px;
  margin: 0 0 var(--pa-sp-3);
}

.auth-panel p {
  color: var(--pa-fg-2);
  margin-bottom: var(--pa-sp-5);
}

.auth-form,
.admin-form {
  display: grid;
  gap: var(--pa-sp-4);
}

.auth-form label,
.form-field label {
  display: block;
  font-weight: var(--pa-w-semibold);
  color: var(--pa-fg-2);
  margin-bottom: var(--pa-sp-2);
}

.auth-form input:not([type="submit"]),
.form-field input,
.form-field select {
  width: 100%;
  height: 40px;
  border: 1px solid var(--pa-border-strong);
  border-radius: var(--pa-r-sm);
  padding: 0 var(--pa-sp-3);
  font: inherit;
  background: #fff;
}

.auth-user {
  color: var(--pa-fg-2);
  font-size: 12px;
}

.admin-topbar {
  background: var(--pa-surface);
  border-bottom: 1px solid var(--pa-border);
  min-height: 56px;
  padding: 0 var(--pa-sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pa-sp-4);
  position: sticky;
  top: 0;
  z-index: 200;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: var(--pa-sp-3);
  color: var(--pa-fg-1);
  border-bottom: 0;
}

.admin-brand-logo {
  width: 32px;
  height: 32px;
}

.admin-brand span {
  display: grid;
}

.admin-brand-eyebrow {
  color: var(--pa-brand);
  font-size: 10px;
  font-weight: var(--pa-w-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.admin-brand-title {
  color: var(--pa-fg-1);
  font-size: 14px;
  font-weight: var(--pa-w-semibold);
  line-height: 1.2;
}

.admin-nav {
  display: flex;
  align-items: center;
  gap: var(--pa-sp-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--pa-sp-4);
  margin-bottom: var(--pa-sp-5);
}

.admin-header .btn-primary,
.admin-header .btn-secondary,
.admin-nav .btn-ghost,
.admin-link-row .btn-secondary {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.admin-eyebrow {
  color: var(--pa-brand);
  font-size: 11px;
  font-weight: var(--pa-w-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 var(--pa-sp-1);
}

.admin-table-wrap,
.admin-form,
.admin-link-panel {
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-r-md);
  box-shadow: var(--pa-shadow-sm);
}

.admin-form {
  padding: var(--pa-sp-5);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-link-panel {
  display: grid;
  gap: var(--pa-sp-4);
  margin-bottom: var(--pa-sp-5);
  padding: var(--pa-sp-5);
}

.admin-link-panel h2 {
  font-size: 18px;
  margin: 0 0 var(--pa-sp-2);
}

.admin-link-panel p {
  color: var(--pa-fg-2);
  margin: 0;
}

.admin-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pa-sp-3);
  align-items: center;
}

.admin-link-row input {
  min-width: 0;
  height: 40px;
  border: 1px solid var(--pa-border-strong);
  border-radius: var(--pa-r-sm);
  padding: 0 var(--pa-sp-3);
  font-family: var(--pa-font-mono);
  font-size: 12px;
  color: var(--pa-fg-1);
  background: var(--pa-bg-2);
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: var(--pa-sp-3);
  border-bottom: 1px solid var(--pa-border);
  vertical-align: top;
}

.admin-table th {
  color: var(--pa-fg-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-actions {
  display: flex;
  align-items: center;
  gap: var(--pa-sp-3);
  white-space: nowrap;
}

.link-button {
  border: 0;
  background: none;
  color: var(--pa-brand);
  font: inherit;
  cursor: pointer;
  padding: 0;
}

.link-button.danger {
  color: var(--pa-danger);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pa-sp-4);
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: var(--pa-sp-2);
}

.form-errors {
  border: 1px solid color-mix(in srgb, var(--pa-danger) 35%, var(--pa-border));
  background: color-mix(in srgb, var(--pa-danger) 8%, #fff);
  color: var(--pa-danger);
  border-radius: var(--pa-r-sm);
  padding: var(--pa-sp-3);
}

.form-errors ul {
  margin: var(--pa-sp-2) 0 0 var(--pa-sp-4);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
}

.flash-stack {
  position: fixed;
  top: 68px;
  right: var(--pa-sp-5);
  display: grid;
  gap: var(--pa-sp-2);
  z-index: 500;
  width: min(420px, calc(100vw - 32px));
}

.flash {
  border-radius: var(--pa-r-md);
  box-shadow: var(--pa-shadow-md);
  padding: var(--pa-sp-3) var(--pa-sp-4);
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  color: var(--pa-fg-1);
}

.flash-notice {
  border-color: color-mix(in srgb, var(--pa-success) 45%, var(--pa-border));
}

.flash-alert {
  border-color: color-mix(in srgb, var(--pa-danger) 45%, var(--pa-border));
}
/*
 * Indiana LIT Distribution Model — application styles
 */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--pa-font-sans);
  font-size: 13px;
  background: var(--pa-bg-2);
  color: var(--pa-fg-1);
  min-height: 100vh;
}

/* ── PAGE CONTAINER ── */
.page-wrap {
  max-width: 1584px;
  margin: 0 auto;
}

/* ── HEADER ── */
#site-header {
  background: var(--pa-surface);
  border-bottom: 1px solid var(--pa-border);
  padding: 0 var(--pa-sp-5);
  height: 56px;
  display: flex;
  align-items: center;
  gap: var(--pa-sp-3);
  position: sticky;
  top: 0;
  z-index: 200;
}
.header-brand {
  display: flex;
  align-items: center;
  gap: var(--pa-sp-3);
  text-decoration: none;
  border: none;
}
.header-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.header-titles .eyebrow {
  font-size: 11px;
  font-weight: var(--pa-w-semibold);
  color: var(--pa-brand);
  text-transform: uppercase;
  letter-spacing: var(--pa-ls-eyebrow);
  line-height: 1;
}
.header-titles .title {
  font-size: 15px;
  font-weight: var(--pa-w-semibold);
  color: var(--pa-fg-1);
  line-height: 1.2;
  margin-top: 2px;
}
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--pa-sp-3);
}
#county-badge {
  font-size: 11px;
  font-weight: var(--pa-w-semibold);
  color: var(--pa-fg-2);
  background: var(--pa-bg-2);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-r-pill);
  padding: 4px 12px;
  white-space: nowrap;
}
.btn-ghost {
  background: transparent;
  border: 1px solid var(--pa-border-strong);
  border-radius: var(--pa-r-sm);
  padding: 5px 12px;
  font-size: 12px;
  font-family: var(--pa-font-sans);
  font-weight: var(--pa-w-semibold);
  color: var(--pa-fg-2);
  cursor: pointer;
  transition: background-color var(--pa-dur-fast) var(--pa-ease-standard),
              border-color var(--pa-dur-fast) var(--pa-ease-standard);
}
.btn-ghost:hover { background: var(--pa-bg-2); border-color: var(--pa-border-strong); }
.btn-ghost:focus-visible { outline: 2px solid var(--pa-focus-ring); outline-offset: 2px; }

/* ── WORKSPACE ── */
.workspace {
  display: flex;
  gap: var(--pa-sp-3);
  padding: var(--pa-sp-3);
  align-items: flex-start;
}
@media (max-width: 1100px) {
  .workspace { flex-direction: column; }
  .left-rail { width: 100% !important; position: static !important; }
}

/* ── LEFT RAIL ── */
.left-rail {
  width: 320px;
  flex-shrink: 0;
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-r-md);
  box-shadow: var(--pa-shadow-sm);
  padding: var(--pa-sp-5);
  position: sticky;
  top: calc(56px + var(--pa-sp-5));
}
.rail-section { padding: var(--pa-sp-4) 0; }
.rail-section:first-child { padding-top: 0; }
.rail-section:last-child { padding-bottom: 0; }
.rail-section + .rail-section { border-top: 1px solid var(--pa-border); }
.rail-label {
  font-size: 11px;
  font-weight: var(--pa-w-semibold);
  color: var(--pa-fg-2);
  text-transform: uppercase;
  letter-spacing: var(--pa-ls-eyebrow);
  margin-bottom: var(--pa-sp-2);
  display: block;
}

/* County select */
.select-wrap {
  position: relative;
}
.select-wrap::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--pa-fg-3);
  pointer-events: none;
}
#county-select {
  width: 100%;
  padding: 9px 32px 9px 12px;
  font-size: 14px;
  font-family: var(--pa-font-sans);
  border: 1px solid var(--pa-border-strong);
  border-radius: var(--pa-r-sm);
  background: var(--pa-surface);
  color: var(--pa-fg-1);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--pa-dur-fast) var(--pa-ease-standard),
              box-shadow var(--pa-dur-fast) var(--pa-ease-standard);
}
#county-select:focus {
  outline: none;
  border-color: var(--pa-brand);
  box-shadow: 0 0 0 3px var(--pa-focus-ring);
}
#county-select:focus-visible { outline: 2px solid var(--pa-focus-ring); outline-offset: 2px; }

/* Mini data strip */
.mini-strip {
  margin-top: var(--pa-sp-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pa-sp-1) var(--pa-sp-3);
}
.mini-strip dt {
  font-size: 11px;
  color: var(--pa-fg-3);
  font-variant-numeric: tabular-nums;
}
.mini-strip dd {
  font-size: 11px;
  font-family: var(--pa-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--pa-fg-1);
  text-align: right;
}

/* Rate controls */
.rate-rows { display: flex; flex-direction: column; gap: var(--pa-sp-4); }
.rate-row {}
.rate-row.rate-row--error .rate-caption {
  color: var(--pa-jasper);
  font-weight: var(--pa-w-semibold);
}
.rate-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--pa-sp-2);
}
.rate-row-label {
  font-size: 13px;
  font-weight: var(--pa-w-semibold);
  color: var(--pa-fg-1);
}
.rate-field {
  display: flex;
  align-items: center;
  gap: 3px;
}
.rate-field input[type="number"] {
  width: 76px;
  padding: 4px 6px;
  font-size: 12px;
  font-family: var(--pa-font-mono);
  text-align: right;
  border: 1px solid var(--pa-border-strong);
  border-radius: var(--pa-r-sm);
  background: var(--pa-surface);
  color: var(--pa-fg-1);
  transition: border-color var(--pa-dur-fast) var(--pa-ease-standard),
              box-shadow var(--pa-dur-fast) var(--pa-ease-standard);
  -moz-appearance: textfield;
}
.rate-field input[type="number"]::-webkit-inner-spin-button,
.rate-field input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.rate-field input[type="number"]:focus {
  outline: none;
  border-color: var(--pa-brand);
  box-shadow: 0 0 0 3px var(--pa-focus-ring);
}
.rate-field input[type="number"]:focus-visible { outline: 2px solid var(--pa-focus-ring); outline-offset: 2px; }
.rate-field input[type="number"].rate-error {
  border-color: var(--pa-jasper) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-jasper) 28%, transparent) !important;
  transition: border-color var(--pa-dur-fast), box-shadow var(--pa-dur-fast),
              opacity var(--pa-dur-slow);
}

/* Rate-exceeded toast */
.rate-toast {
  position: fixed;
  top: calc(56px + var(--pa-sp-3));
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  opacity: 0;
  background: color-mix(in srgb, var(--pa-jasper) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--pa-jasper) 38%, var(--pa-border));
  border-left: 3px solid var(--pa-jasper);
  border-radius: var(--pa-r-sm);
  padding: var(--pa-sp-3) var(--pa-sp-4);
  font-size: 13px;
  color: var(--pa-fg-1);
  display: flex;
  align-items: center;
  gap: var(--pa-sp-2);
  box-shadow: var(--pa-shadow-md);
  transition: opacity var(--pa-dur-med) var(--pa-ease-standard),
              transform var(--pa-dur-med) var(--pa-ease-standard);
  z-index: 500;
  pointer-events: none;
  min-width: 280px;
  max-width: 460px;
  white-space: nowrap;
}
.rate-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.rate-toast [data-lucide] { flex-shrink: 0; color: var(--pa-jasper); }
.rate-suffix {
  font-size: 11px;
  color: var(--pa-fg-3);
}

.rate-caption {
  font-size: 11px;
  color: var(--pa-fg-3);
  margin-top: 4px;
}
.rate-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--pa-sp-4);
  padding-top: var(--pa-sp-3);
  border-top: 1px solid var(--pa-border);
}
.rate-total-label {
  font-size: 12px;
  font-weight: var(--pa-w-semibold);
  color: var(--pa-fg-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rate-total-value {
  font-size: 15px;
  font-weight: var(--pa-w-semibold);
  font-family: var(--pa-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--pa-fg-1);
}

/* Rate comparison panel */
.rate-comparison {
  margin-top: var(--pa-sp-3);
  padding-top: var(--pa-sp-3);
  border-top: 1px dashed var(--pa-border);
}
.rate-comparison.hidden { display: none; }
.rate-cmp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 0;
}
.rate-cmp-row--diff {
  margin-top: var(--pa-sp-2);
  padding-top: var(--pa-sp-2);
  border-top: 1px solid var(--pa-border);
  font-weight: var(--pa-w-semibold);
}
.rate-cmp-label {
  font-size: 11px;
  color: var(--pa-fg-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rate-cmp-value {
  font-size: 13px;
  font-family: var(--pa-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--pa-fg-1);
}
.cmp-diff--over  { color: var(--pa-danger); }
.cmp-diff--under { color: var(--pa-success); }
.cmp-diff--zero  { color: var(--pa-fg-2); }

/* Calculate button */
.btn-primary {
  width: 100%;
  padding: 9px 14px;
  font-size: 13px;
  font-family: var(--pa-font-sans);
  font-weight: var(--pa-w-semibold);
  color: #fff;
  background: var(--pa-brand);
  border: 1px solid var(--pa-brand);
  border-radius: var(--pa-r-sm);
  cursor: pointer;
  transition: background-color var(--pa-dur-fast) var(--pa-ease-standard),
              opacity var(--pa-dur-fast) var(--pa-ease-standard);
}
.btn-primary:hover { background: color-mix(in srgb, var(--pa-brand) 85%, #000); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary:focus-visible { outline: 2px solid var(--pa-focus-ring); outline-offset: 2px; }

/* Reset button */
.btn-secondary {
  width: 100%;
  padding: 8px 14px;
  font-size: 13px;
  font-family: var(--pa-font-sans);
  font-weight: var(--pa-w-semibold);
  color: var(--pa-fg-2);
  background: var(--pa-surface);
  border: 1px solid var(--pa-border-strong);
  border-radius: var(--pa-r-sm);
  cursor: pointer;
  transition: background-color var(--pa-dur-fast) var(--pa-ease-standard),
              border-color var(--pa-dur-fast) var(--pa-ease-standard);
}
.btn-secondary:hover { background: var(--pa-bg-2); }
.btn-secondary:focus-visible { outline: 2px solid var(--pa-focus-ring); outline-offset: 2px; }

/* ── MAIN COLUMN ── */
.main-col { flex: 1; min-width: 0; }

/* ── KPI STRIP ── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--pa-sp-3);
  margin-bottom: var(--pa-sp-5);
}
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
.kpi-card {
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  border-radius: 0;
  padding: var(--pa-sp-4) var(--pa-sp-4) var(--pa-sp-3);
  border-top: 3px solid var(--pa-border);
  position: relative;
}
.kpi-card--taxbase  { border-top-color: var(--pa-charcoal); }
.kpi-card--county   { border-top-color: var(--pa-cerulean); }
.kpi-card--smallmuni{ border-top-color: var(--pa-pigment); }
.kpi-card--nonmun   { border-top-color: var(--pa-robin); }
.kpi-card--fire     { border-top-color: var(--pa-pumpkin); }
.kpi-card--total    { border-top-color: var(--pa-charcoal); background: var(--pa-bg-2); }
.kpi-label {
  font-size: 10px;
  color: var(--pa-fg-3);
  font-weight: var(--pa-w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--pa-ls-eyebrow);
  line-height: 1.2;
  margin-bottom: var(--pa-sp-2);
}
@media (min-width: 1201px) {
  .kpi-label { min-height: 3.6em; }
}
.kpi-value {
  font-size: 17px;
  font-weight: var(--pa-w-semibold);
  color: var(--pa-fg-1);
  font-family: var(--pa-font-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kpi-card--total .kpi-value { font-size: 18px; }
.kpi-value--muted { color: var(--pa-fg-3); }

/* ── TOOLBAR ── */
#toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--pa-sp-3);
  gap: var(--pa-sp-3);
  flex-wrap: wrap;
}
.toolbar-info {
  display: flex;
  align-items: center;
  gap: var(--pa-sp-2);
  font-size: 12px;
  color: var(--pa-fg-2);
}
.toolbar-info [data-lucide] { flex-shrink: 0; color: var(--pa-fg-3); }
.btn-toggle {
  background: var(--pa-surface);
  border: 1px solid var(--pa-border-strong);
  border-radius: var(--pa-r-sm);
  padding: 5px 12px;
  font-size: 12px;
  font-family: var(--pa-font-sans);
  font-weight: var(--pa-w-semibold);
  color: var(--pa-fg-2);
  cursor: pointer;
  transition: background-color var(--pa-dur-fast) var(--pa-ease-standard),
              color var(--pa-dur-fast) var(--pa-ease-standard),
              border-color var(--pa-dur-fast) var(--pa-ease-standard);
}
.btn-toggle:hover { background: var(--pa-bg-2); }
.btn-toggle.active {
  background: var(--pa-brand);
  color: #fff;
  border-color: var(--pa-brand);
}
.btn-toggle:focus-visible { outline: 2px solid var(--pa-focus-ring); outline-offset: 2px; }

/* ── TABLE ── */
.table-card {
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-r-md);
  overflow: clip;
  box-shadow: var(--pa-shadow-sm);
}
.table-wrap {
  overflow: auto;
  max-height: 72vh;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
thead th {
  background: var(--pa-bg-2);
  color: var(--pa-fg-2);
  font-size: 11px;
  font-weight: var(--pa-w-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid var(--pa-line-strong);
  position: sticky;
  top: 0;
  z-index: 2;
}
thead th.right { text-align: right; }
thead th.center { text-align: center; }

tbody tr { border-bottom: 1px solid var(--pa-border); }
tbody tr:hover { background: var(--pa-bg-2) !important; }
tbody td {
  padding: 9px 12px;
  vertical-align: middle;
}
tbody td.right {
  text-align: right;
  font-family: var(--pa-font-mono);
  font-variant-numeric: tabular-nums;
}
tbody td.center { text-align: center; }

/* County row */
tr.row-county {
  background: color-mix(in srgb, var(--pa-cerulean) 8%, #fff) !important;
  border-left: 3px solid var(--pa-cerulean);
}
tr.row-county td:first-child { font-weight: var(--pa-w-semibold); font-size: 14px; }

/* Totals row */
tr.row-totals {
  background: var(--pa-bg-2) !important;
  border-top: 2px solid var(--pa-charcoal);
  font-weight: var(--pa-w-bold);
  position: sticky;
  bottom: 0;
  z-index: 1;
}

/* Delta cell markers */
td.has-pos { position: relative; }
td.has-neg { position: relative; }
td.has-pos::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--pa-success);
}
td.has-neg::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--pa-danger);
}

/* Change colors */
.pos-change { color: var(--pa-success); }
.neg-change { color: var(--pa-danger); }
.zero-change { color: var(--pa-fg-3); }

/* Type badges */
.type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--pa-r-pill);
  font-size: 10px;
  font-weight: var(--pa-w-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.type-1 { background: color-mix(in srgb, var(--pa-cerulean) 14%, #fff);  color: var(--pa-cerulean); }
.type-2 { background: color-mix(in srgb, var(--pa-charcoal) 10%, #fff);  color: var(--pa-charcoal); }
.type-3 { background: color-mix(in srgb, var(--pa-pigment)  14%, #fff);  color: var(--pa-pigment);  }
.type-4 { background: color-mix(in srgb, var(--pa-pumpkin)  16%, #fff);  color: #8a4a18; }
.type-5 { background: color-mix(in srgb, var(--pa-robin)    18%, #fff);  color: #0e6f70; }
.type-6 { background: color-mix(in srgb, var(--pa-xanthous) 24%, #fff);  color: #6d4a00; }

/* Small tag */
.pill-muted {
  display: inline-block;
  padding: 1px 5px;
  border-radius: var(--pa-r-pill);
  font-size: 9px;
  font-weight: var(--pa-w-semibold);
  background: var(--pa-bg-3);
  color: var(--pa-fg-3);
  letter-spacing: 0.03em;
  margin-left: 4px;
  vertical-align: middle;
}
.pill-pool {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--pa-r-pill);
  font-size: 10px;
  font-weight: var(--pa-w-semibold);
  text-transform: uppercase;
  background: var(--pa-bg-3);
  color: var(--pa-fg-2);
  letter-spacing: 0.03em;
}

/* Opt-in checkbox */
.opt-in-cb {
  width: 16px;
  height: 16px;
  accent-color: var(--pa-brand);
  cursor: pointer;
  border: 1px solid var(--pa-border-strong);
  border-radius: var(--pa-r-sm);
}
.opt-in-cb:focus-visible { outline: 2px solid var(--pa-focus-ring); outline-offset: 2px; }

/* In-table rate input */
.rate-input {
  width: 92px;
  border: 1px solid var(--pa-border-strong);
  border-radius: var(--pa-r-sm);
  padding: 4px 8px;
  font-size: 12px;
  font-family: var(--pa-font-mono);
  text-align: right;
  background: var(--pa-surface);
  color: var(--pa-fg-1);
  -moz-appearance: textfield;
}
.rate-input::-webkit-inner-spin-button,
.rate-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.rate-input:focus {
  outline: none;
  border-color: var(--pa-brand);
  box-shadow: 0 0 0 2px var(--pa-focus-ring);
}
.rate-input:focus-visible { outline: 2px solid var(--pa-focus-ring); outline-offset: 2px; }
.rate-input-wrap { display: inline-flex; align-items: center; gap: 3px; }
.rate-input-suffix { font-size: 10px; color: var(--pa-fg-3); }

/* Fire allocation column */
.fire-alloc-input { width: 60px; }
.fire-alloc-input:disabled { opacity: 0.35; cursor: not-allowed; }
.fire-alloc-sum--ok   { color: var(--pa-pigment); font-weight: var(--pa-w-semibold); }
.fire-alloc-sum--warn { color: var(--pa-pumpkin); font-weight: var(--pa-w-semibold); }

/* Row expand toggle */
.expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 6px 0 0;
  color: var(--pa-fg-3);
  vertical-align: middle;
  line-height: 1;
}
.expand-btn:hover { color: var(--pa-brand); }
.expand-btn [data-lucide] { display: block; }

/* Detail sub-row */
.detail-row td {
  background: color-mix(in srgb, var(--pa-cerulean) 5%, var(--pa-bg-2));
  border-bottom: 1px solid var(--pa-border);
  padding: 0;
}
.detail-panel {
  display: flex;
  gap: var(--pa-sp-5);
  padding: var(--pa-sp-3) var(--pa-sp-4) var(--pa-sp-3) 2.5rem;
  flex-wrap: wrap;
}
.detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}
.detail-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pa-fg-3);
  font-weight: var(--pa-w-semibold);
}
.detail-amount {
  font-size: 13px;
  font-family: var(--pa-font-mono);
  color: var(--pa-fg-1);
  font-weight: var(--pa-w-semibold);
}
.detail-amount--zero { color: var(--pa-fg-3); font-weight: normal; }

/* Auto tag */
.auto-tag {
  font-size: 10px;
  color: var(--pa-fg-3);
  font-style: italic;
}

/* Fire note / Nonmun note */
#fire-note, #nonmun-note {
  margin-top: var(--pa-sp-4);
  padding: var(--pa-sp-3) var(--pa-sp-4);
  background: color-mix(in srgb, var(--pa-xanthous) 18%, #fff);
  border: 1px solid color-mix(in srgb, var(--pa-xanthous) 55%, var(--pa-border));
  border-left: 3px solid var(--pa-xanthous);
  border-radius: var(--pa-r-sm);
  color: var(--pa-fg-1);
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: var(--pa-sp-2);
}
#fire-note [data-lucide], #nonmun-note [data-lucide] { flex-shrink: 0; margin-top: 1px; color: #a0620a; }
#fire-note strong, #nonmun-note strong { color: #6d4a00; }
#fire-note.hidden, #nonmun-note.hidden { display: none; }

/* Placeholder / empty state */
.results-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--pa-sp-8) var(--pa-sp-5);
  color: var(--pa-fg-3);
  font-size: 13px;
  gap: var(--pa-sp-3);
  min-height: 200px;
}
.results-placeholder [data-lucide] { color: var(--pa-fg-3); }

/* Error banner */
.error-banner {
  margin-bottom: var(--pa-sp-4);
  padding: var(--pa-sp-3) var(--pa-sp-4);
  background: color-mix(in srgb, var(--pa-jasper) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--pa-jasper) 40%, var(--pa-border));
  border-left: 3px solid var(--pa-jasper);
  border-radius: var(--pa-r-sm);
  color: var(--pa-fg-1);
  font-size: 13px;
  display: none;
}
.error-banner.visible { display: block; }

/* Footer */
footer {
  padding: var(--pa-sp-5) var(--pa-sp-5);
  border-top: 1px solid var(--pa-border);
  font-size: 11px;
  color: var(--pa-fg-3);
  letter-spacing: var(--pa-ls-wide);
  margin-top: 0;
}
footer p { margin-bottom: var(--pa-sp-2); }
footer p:last-child { margin-bottom: 0; }

/* ── PRINT ── (browser print disabled; use Export PDF button) */
@media print {
  body { display: none; }
}