/* ============================================================
   EnhancedDx — Eligibility Check
   Tokens mirror the EnhancedDx design system ("The Clinical
   Ledger" — editorial, spacious, meticulous). The system is
   light-only by design; surfaces are painted explicitly rather
   than inherited.
   ============================================================ */

/* Self-hosted so the page makes no third-party request while showing PHI,
   and so typography survives networks that block font CDNs. All four faces
   are SIL Open Font License. */
@font-face { font-family:"Raleway"; src:url("fonts/Raleway-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Raleway"; src:url("fonts/Raleway-SemiBold.ttf") format("truetype");
  font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Quicksand"; src:url("fonts/Quicksand-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"DM Mono"; src:url("fonts/DMMono-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap; }

:root {
  /* Brand */
  --primary: #41034d;
  --on-primary: #ffffff;
  --primary-container: #f3ecf6;
  --primary-accent: #2a9cb3;

  --secondary: #2a9cb3;
  --secondary-container: #c9f0f8;
  --on-secondary-container: #0e5a69;

  --tertiary: #8a6a8f;
  --tertiary-container: #f0dff3;
  --on-tertiary-container: #4a2f4f;

  /* Semantic */
  --success: #2e8f6b;
  --success-container: #c9efdd;
  --on-success-container: #0e4a33;
  --warning: #b97a15;
  --warning-container: #fbe6bc;
  --on-warning-container: #5a3a02;
  --error: #b3261e;
  --error-container: #f9dedc;
  --on-error-container: #601410;

  /* Surfaces */
  --surface: #fafaf7;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f4f3ef;
  --surface-container: #eeece7;
  --surface-container-high: #e7e4dd;
  --surface-container-highest: #dfdbd2;

  --on-surface: #1f1a1f;
  --on-surface-variant: #6a6560;
  --outline: #8a857e;
  --outline-variant: #c7c2b9;

  --gradient-primary: linear-gradient(165deg, #f4e5fa 0%, #d9efff 100%);
  --gradient-lavender-glass: linear-gradient(160deg, rgba(231,211,240,.55) 0%, rgba(201,240,248,.35) 100%);

  --shadow-ambient: 0 12px 32px rgba(31,26,31,.06);
  --shadow-ambient-sm: 0 6px 16px rgba(31,26,31,.05);
  --shadow-floating: 0 20px 48px rgba(31,26,31,.10);

  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px;
  --radius-lg: 20px; --radius-full: 9999px;

  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 72px;

  --font-display: "Raleway", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Quicksand", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --tracking-tight: -.02em;
  --tracking-wide: .08em;
  --tracking-widest: .14em;

  --ease-standard: cubic-bezier(.2,0,0,1);
  --dur-fast: 120ms; --dur-med: 200ms;

  /* Chart tokens — categorical pair validated against --surface:
     deutan ΔE 14.4, normal ΔE 24.3, both ≥3:1 on surface. */
  --series-in: #2a9cb3;
  --series-out: #8b46c9;
  --series-in-track: #d7eef3;
  --series-out-track: #ece0f7;
  --grid: #e7e4dd;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.375rem; letter-spacing: 0; }
h4 { font-size: 1.0625rem; letter-spacing: 0; }

a { color: var(--primary); text-underline-offset: 3px; }

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

/* ---- Chrome ------------------------------------------------ */
.masthead {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250,250,247,.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(199,194,185,.5);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); padding: var(--space-md) 0;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.125rem;
  letter-spacing: var(--tracking-tight); color: var(--primary);
  text-decoration: none;
}
.wordmark__mark { width: 26px; height: 26px; flex: none; }
.wordmark__dx { color: var(--primary-accent); }
.masthead__tag {
  font-family: var(--font-mono); font-size: .6875rem; text-transform: uppercase;
  letter-spacing: var(--tracking-widest); color: var(--on-surface-variant);
}

.footer {
  margin-top: var(--space-3xl); padding: var(--space-xl) 0 var(--space-2xl);
  border-top: 1px solid rgba(199,194,185,.5);
  font-size: .8125rem; color: var(--on-surface-variant);
}
.footer p { margin: 0 0 var(--space-xs); }

/* ---- Landing ----------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--gradient-primary);
  padding: var(--space-3xl) var(--space-2xl);
  margin-top: var(--space-xl);
}
.hero__eyebrow {
  font-family: var(--font-mono); font-size: .6875rem; text-transform: uppercase;
  letter-spacing: var(--tracking-widest); color: var(--on-secondary-container);
  margin: 0 0 var(--space-md);
}
.hero h1 { color: var(--primary); max-width: 18ch; }
.hero__lede {
  margin: var(--space-md) 0 0; max-width: 52ch;
  font-size: 1.0625rem; color: #3b3540;
}
.hero__motif {
  position: absolute; right: -30px; bottom: -20px; width: 260px;
  opacity: .13; pointer-events: none;
}
@media (max-width: 760px) { .hero__motif { display: none; } }

.assurances {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  margin-top: var(--space-xl); padding: 0; list-style: none;
}
.assurance {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  background: rgba(255,255,255,.72); border: 1px solid rgba(199,194,185,.6);
  border-radius: var(--radius-full); padding: 6px 14px;
  font-size: .8125rem; color: #3b3540;
}
.assurance svg { width: 15px; height: 15px; flex: none; color: var(--secondary); }

.hero__demo-btn {
  margin-top: var(--space-lg); background: rgba(255,255,255,.85);
  font-size: .875rem; padding: 10px 18px;
}
.hero__demo-btn svg { color: var(--primary); }

/* Demo credentials modal */
.demo-modal {
  border: 0; border-radius: var(--radius-lg); padding: 0;
  width: min(480px, calc(100vw - 48px));
  box-shadow: var(--shadow-floating);
}
.demo-modal::backdrop { background: rgba(31,26,31,.5); backdrop-filter: blur(2px); }
.demo-modal[open] { animation: demo-modal-in var(--dur-med) var(--ease-standard); }
@keyframes demo-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.demo-modal__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-lg) var(--space-lg) 0;
}
.demo-modal__title { font-size: 1.25rem; }
.demo-modal__close {
  background: none; border: 0; cursor: pointer; color: var(--on-surface-variant);
  padding: 4px; border-radius: var(--radius-xs); flex: none;
}
.demo-modal__close:hover { background: var(--surface-container-low); color: var(--on-surface); }
.demo-modal__lede {
  padding: var(--space-md) var(--space-lg) 0; margin: 0;
  font-size: .9375rem; color: #3b3540; line-height: 1.55;
}
.demo-modal__fields {
  margin: var(--space-lg) var(--space-lg) 0; padding: var(--space-md);
  background: var(--surface-container-low); border-radius: var(--radius-sm);
  display: grid; gap: var(--space-sm);
}
.demo-modal__field { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); }
.demo-modal__field dt { font-size: .8125rem; color: var(--on-surface-variant); }
.demo-modal__field dd {
  margin: 0; font-weight: 600; font-family: var(--font-mono); font-size: .9375rem;
  text-align: right;
}
.demo-modal__note {
  padding: var(--space-md) var(--space-lg) 0; margin: 0;
  font-size: .8125rem; color: var(--on-surface-variant); line-height: 1.55;
}
.demo-modal__actions {
  display: flex; gap: var(--space-sm); flex-wrap: wrap;
  padding: var(--space-lg);
}
.demo-modal__copied {
  margin: calc(var(--space-lg) * -1 + var(--space-xs)) var(--space-lg) var(--space-lg);
  font-size: .8125rem; color: var(--on-success-container);
  background: var(--success-container); border-radius: var(--radius-xs);
  padding: 6px 10px; display: inline-block;
}
.demo-modal__copied[hidden] { display: none; }

/* ---- Form -------------------------------------------------- */
.panel {
  background: var(--surface-container-lowest);
  border: 1px solid rgba(199,194,185,.45);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-ambient-sm);
  padding: var(--space-xl);
}
.form-card { margin-top: calc(var(--space-2xl) * -1 + -8px); position: relative; z-index: 2; }

.fieldset { border: 0; margin: 0 0 var(--space-xl); padding: 0; }
.fieldset:last-of-type { margin-bottom: var(--space-lg); }
.fieldset__legend {
  font-family: var(--font-mono); font-size: .6875rem; text-transform: uppercase;
  letter-spacing: var(--tracking-widest); color: var(--on-surface-variant);
  padding: 0 0 var(--space-md); width: 100%;
  border-bottom: 1px solid rgba(199,194,185,.45); margin-bottom: var(--space-lg);
}
.grid { display: grid; gap: var(--space-md) var(--space-lg); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .8125rem; font-weight: 600; color: #3b3540; }
.field__hint { font-size: .75rem; color: var(--on-surface-variant); }
.field input, .field select {
  font-family: var(--font-body); font-size: 1rem; color: var(--on-surface);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm); padding: 11px 13px;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(42,156,179,.18);
}
.field input::placeholder { color: #a9a49d; }
.field--error input { border-color: var(--error); }

/* Payer search combobox */
.combobox { position: relative; }
.combobox__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10;
  margin: 0; padding: 6px; list-style: none; max-height: 280px; overflow-y: auto;
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-floating);
}
.combobox__list li {
  padding: 9px 11px; border-radius: var(--radius-xs); font-size: .9375rem;
  cursor: pointer; scroll-margin-block: 6px;
}
.combobox__list li:hover, .combobox__list li[aria-selected="true"] {
  background: var(--primary-container); color: var(--on-primary-container);
}

.chip-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip--pick {
  font-family: var(--font-body); font-size: .8125rem; cursor: pointer;
  background: var(--surface-container-low); color: #3b3540;
  border: 1px solid var(--outline-variant); border-radius: var(--radius-full);
  padding: 5px 12px; transition: background var(--dur-fast) var(--ease-standard);
}
.chip--pick:hover { background: var(--secondary-container); border-color: transparent; }

/* Service-type checkbox groups */
.stc-groups { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.stc-group__title {
  font-family: var(--font-mono); font-size: .6875rem; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--on-surface-variant); margin: 0 0 10px;
}
.stc-group__options { display: flex; flex-direction: column; gap: 9px; }
.stc-check {
  display: flex; align-items: flex-start; gap: 9px; font-size: .9375rem;
  color: #3b3540; cursor: pointer; line-height: 1.35;
}
.stc-check input {
  margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--primary);
}

/* Insurance-card upload */
.card-upload {
  background: var(--gradient-lavender-glass);
  border: 1px solid rgba(199,194,185,.5);
  border-radius: var(--radius-md);
  padding: var(--space-lg); margin: var(--space-xl) 0;
}
.card-upload__prompt { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.card-upload__prompt svg { color: var(--primary); flex: none; }
.card-upload__prompt > div { flex: 1; min-width: 200px; }
.card-upload__title { font-weight: 600; font-size: .9375rem; margin: 0; }
.card-upload__hint { font-size: .8125rem; color: var(--on-surface-variant); margin: 2px 0 0; }
.card-upload__button { flex: none; cursor: pointer; }

.card-upload__busy {
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: .875rem; color: var(--on-surface-variant); padding-top: var(--space-md);
}
.card-upload__busy[hidden] { display: none; }
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--outline-variant); border-top-color: var(--primary);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.card-upload__result { padding-top: var(--space-md); }
.card-upload__banner {
  display: flex; gap: var(--space-sm); align-items: flex-start;
  border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md);
  font-size: .875rem;
}
.card-upload__banner--ok { background: var(--success-container); color: var(--on-success-container); }
.card-upload__banner--warn { background: var(--warning-container); color: var(--on-warning-container); }
.card-upload__banner svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }

/* Phone verification gate */
.phone-gate {
  background: var(--primary-container);
  border: 1px solid rgba(65,3,77,.15);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.phone-gate__row {
  display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
}
.phone-gate__row[hidden] { display: none; }
.phone-gate__row svg { color: var(--primary); flex: none; }
.phone-gate__text { flex: 1; min-width: 200px; }
.phone-gate__title { font-weight: 600; font-size: .9375rem; margin: 0; color: var(--on-primary-container); }
.phone-gate__hint { font-size: .8125rem; color: #5a3f60; margin: 2px 0 0; }
.phone-gate__input-row { display: flex; gap: var(--space-xs); flex: none; }
.phone-gate__input-row input {
  font-family: var(--font-body); font-size: 1rem; color: var(--on-surface);
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant); border-radius: var(--radius-sm);
  padding: 10px 12px; width: 170px;
}
.phone-gate__input-row input:focus {
  outline: none; border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(42,156,179,.18);
}
#phone_code_input { width: 110px; letter-spacing: .2em; font-family: var(--font-mono); }
.phone-gate__verified {
  display: flex; align-items: center; gap: var(--space-xs);
  color: var(--on-success-container); font-weight: 600; font-size: .9375rem;
}
.phone-gate__verified[hidden] { display: none; }
.phone-gate__verified svg { color: var(--success); }
.phone-gate__error {
  margin-top: var(--space-sm); background: var(--error-container); color: var(--on-error-container);
  border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); font-size: .875rem;
}
.linklike {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; color: var(--primary); text-decoration: underline;
}

/* Locked state for everything gated behind phone verification */
.gated-content { position: relative; }
.gated-content.is-locked > *:not(.gated-content__overlay-note) { opacity: .45; pointer-events: none; }
.gated-content__overlay-note {
  display: none; align-items: center; gap: var(--space-xs);
  font-size: .8125rem; color: var(--on-surface-variant); margin-bottom: var(--space-md);
}
.gated-content.is-locked .gated-content__overlay-note { display: flex; }

.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  padding: 13px 26px; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-med) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { box-shadow: var(--shadow-floating); transform: translateY(-1px); }
.btn--primary:disabled { background: var(--outline); cursor: progress; transform: none; }
.btn--ghost {
  background: transparent; color: var(--primary);
  border-color: var(--outline-variant);
}
.btn--ghost:hover { background: var(--primary-container); }
.form-actions {
  display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
  padding-top: var(--space-md); border-top: 1px solid rgba(199,194,185,.45);
}
.form-actions__note { font-size: .8125rem; color: var(--on-surface-variant); }

.alert {
  display: flex; gap: var(--space-sm); align-items: flex-start;
  border-radius: var(--radius-sm); padding: var(--space-md);
  margin-bottom: var(--space-lg); font-size: .9375rem;
}
.alert--error { background: var(--error-container); color: var(--on-error-container); }
.alert--warn { background: var(--warning-container); color: var(--on-warning-container); }
.alert svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.alert ul { margin: var(--space-xs) 0 0; padding-left: 1.1rem; }
.alert code { font-family: var(--font-mono); font-size: .8125rem; }

/* ---- Results ----------------------------------------------- */
.result-head {
  display: flex; flex-wrap: wrap; gap: var(--space-lg);
  align-items: flex-start; justify-content: space-between;
  padding: var(--space-xl) 0 var(--space-lg);
}
.status-hero { display: flex; align-items: center; gap: var(--space-md); }
.status-hero__dot {
  width: 52px; height: 52px; border-radius: var(--radius-full); flex: none;
  display: grid; place-items: center;
}
.status-hero__dot svg { width: 26px; height: 26px; }
.status-hero__dot--active { background: var(--success-container); color: var(--on-success-container); }
.status-hero__dot--inactive { background: var(--error-container); color: var(--on-error-container); }
.status-hero__label {
  font-family: var(--font-mono); font-size: .6875rem; text-transform: uppercase;
  letter-spacing: var(--tracking-widest); color: var(--on-surface-variant);
  margin: 0 0 2px;
}
/* Hero figure: the one number the view leads with. Sans, not display. */
.status-hero__value {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.1;
  letter-spacing: var(--tracking-tight); margin: 0;
}
.result-head__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

.mode-flag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--warning-container); color: var(--on-warning-container);
  border-radius: var(--radius-full); padding: 5px 12px;
  font-family: var(--font-mono); font-size: .6875rem;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}

/* KPI row */
.kpis {
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: var(--space-2xl);
}
.kpi {
  background: var(--surface-container-lowest);
  border: 1px solid rgba(199,194,185,.45);
  border-radius: var(--radius-sm); padding: var(--space-md) var(--space-lg);
}
.kpi__label {
  font-family: var(--font-mono); font-size: .6875rem; text-transform: uppercase;
  letter-spacing: var(--tracking-widest); color: var(--on-surface-variant);
  margin: 0 0 6px;
}
.kpi__value {
  font-weight: 600; font-size: 1.0625rem; margin: 0; line-height: 1.3;
  overflow-wrap: break-word; hyphens: auto; text-wrap: balance;
}
.kpi__sub { font-size: .8125rem; color: var(--on-surface-variant); margin: 4px 0 0; }

.section { margin-bottom: var(--space-3xl); }
.section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg);
}
.section__title { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; margin: 0; }
.section__note { font-size: .875rem; color: var(--on-surface-variant); margin: 0; max-width: 60ch; }

/* Legend — always present for 2 series */
.legend { display: flex; gap: var(--space-lg); flex-wrap: wrap; margin: 0 0 var(--space-lg); padding: 0; list-style: none; }
.legend li { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: .8125rem; color: #3b3540; }
.legend__swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }

/* Meters */
.meters { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
@media (min-width: 900px) { .meters { grid-template-columns: repeat(2, 1fr); } }
.meter {
  background: var(--surface-container-lowest);
  border: 1px solid rgba(199,194,185,.45);
  border-radius: var(--radius-sm); padding: var(--space-lg);
}
.meter__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); }
.meter__title { font-weight: 600; font-size: 1.0625rem; margin: 0; }
.meter__scope {
  font-family: var(--font-mono); font-size: .6875rem; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--on-surface-variant); margin: 3px 0 0;
}
.chip {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  border-radius: var(--radius-full); padding: 4px 11px;
  font-family: var(--font-mono); font-size: .6875rem;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.chip--met { background: var(--success-container); color: var(--on-success-container); }
.chip--open { background: var(--surface-container); color: var(--on-surface-variant); }
.chip--in { background: var(--secondary-container); color: var(--on-secondary-container); }
.chip--out { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.chip svg { width: 12px; height: 12px; }

/* Track is a lighter step of the fill's own ramp, so state reads across the bar */
.meter__track {
  position: relative; height: 14px; border-radius: var(--radius-full);
  overflow: hidden; margin-bottom: var(--space-sm);
}
.meter__track--in { background: var(--series-in-track); }
.meter__track--out { background: var(--series-out-track); }
.meter__fill {
  position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-full);
  transition: width var(--dur-med) var(--ease-standard);
}
.meter__fill--in { background: var(--series-in); }
.meter__fill--out { background: var(--series-out); }
.meter__fill--met { background: var(--success); }

.meter__figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); align-items: end; }
.meter__figure { flex: 1; }
.meter__figure dt {
  font-family: var(--font-mono); font-size: .625rem; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--on-surface-variant);
  margin: 0 0 3px; white-space: nowrap;
}
.meter__figure dd {
  margin: 0; font-weight: 600; font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
}
.meter__figure--remaining dd { color: var(--primary); }
.meter__figure:last-child { text-align: right; }
.meter__notes {
  margin: var(--space-md) 0 0; padding-top: var(--space-sm);
  border-top: 1px solid rgba(199,194,185,.4);
  font-size: .75rem; color: var(--on-surface-variant);
}

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid rgba(199,194,185,.45); border-radius: var(--radius-sm); background: var(--surface-container-lowest); }
table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: .9375rem; }
thead th {
  text-align: left; font-family: var(--font-mono); font-weight: 400;
  font-size: .625rem; text-transform: uppercase; letter-spacing: var(--tracking-widest);
  color: var(--on-surface-variant); padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--outline-variant); white-space: nowrap;
}
tbody td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid rgba(199,194,185,.35); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-container-low); }
td.num { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.stc {
  font-family: var(--font-mono); font-size: .75rem;
  background: var(--surface-container); color: #3b3540;
  border-radius: var(--radius-xs); padding: 2px 7px; white-space: nowrap;
}
.muted { color: var(--on-surface-variant); }
.net-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); margin-right: 7px; vertical-align: 1px; }
.net-dot--in { background: var(--series-in); }
.net-dot--out { background: var(--series-out); }
.net-dot--any { background: var(--outline); }

/* Service-type cards */
.stc-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.stc-card {
  background: var(--surface-container-lowest);
  border: 1px solid rgba(199,194,185,.45);
  border-radius: var(--radius-sm); padding: var(--space-lg);
}
.stc-card__codes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-sm); }
.stc-card__name { font-weight: 600; font-size: 1.0625rem; margin: 0 0 var(--space-sm); }
.stc-card__kinds { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.stc-card__kinds li { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: .8125rem; }
.stc-card__kinds .muted { font-variant-numeric: tabular-nums; }

.notes-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-sm); }
.notes-list li {
  background: var(--surface-container-lowest);
  border: 1px solid rgba(199,194,185,.45);
  border-left: 3px solid var(--tertiary);
  border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); font-size: .875rem;
}

.empty {
  background: var(--surface-container-low); border: 1px dashed var(--outline-variant);
  border-radius: var(--radius-sm); padding: var(--space-lg);
  color: var(--on-surface-variant); font-size: .875rem; text-align: center;
}

.provenance {
  margin-top: var(--space-lg); font-family: var(--font-mono);
  font-size: .6875rem; color: var(--on-surface-variant);
  display: flex; gap: var(--space-lg); flex-wrap: wrap;
}

@media (max-width: 640px) {
  .hero { padding: var(--space-2xl) var(--space-lg); }
  .panel { padding: var(--space-lg); }
  .form-card { margin-top: var(--space-lg); }
  .result-head { padding-bottom: var(--space-md); }
}

@media print {
  .masthead, .result-head__actions, .footer { display: none; }
  .panel, .meter, .kpi, .stc-card, .table-wrap { box-shadow: none; break-inside: avoid; }
}