/* ============================================================================
   WELLFIT · Design System — components.css
   Layer 3: components built ENTIRELY from semantic tokens (tokens.css).
   BEM naming, matching the reference system so the two stay coherent.
   Atoms: button · input · select · check/radio · switch · badge
   Molecules: field · stat · alert · segmented · card
   ========================================================================== */

/* ---- BUTTON ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-semibold);line-height:1;
  padding:10px 16px;border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;white-space:nowrap;
  text-decoration:none;transition:background var(--dur),border-color var(--dur),color var(--dur),box-shadow var(--dur);
}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:var(--opacity-disabled,.5);cursor:not-allowed}
.btn svg{width:16px;height:16px}

.btn--primary{background:var(--accent);color:var(--accent-contrast)}
.btn--primary:hover:not(:disabled){background:var(--accent-hover)}
.btn--money{background:var(--money-fill);color:var(--money-contrast)}   /* positive / collect / enroll — deep money green, white AA 4.64 */
.btn--money:hover:not(:disabled){background:var(--money-fill-hover)}
.btn--secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn--secondary:hover:not(:disabled){background:var(--surface-2);border-color:var(--slate-400)}
.btn--ghost{background:transparent;color:var(--accent-ink)}
.btn--ghost:hover:not(:disabled){background:var(--accent-soft)}
.btn--danger{background:var(--danger);color:#fff}
.btn--danger:hover:not(:disabled){filter:brightness(.95)}

.btn--sm{padding:7px 12px;font-size:var(--text-xs);border-radius:var(--radius-sm)}
.btn--lg{padding:13px 22px;font-size:var(--text-base)}
.btn--icon{padding:10px}
.btn--block{width:100%}

/* ---- INPUT / SELECT --------------------------------------------------- */
.input,.select{
  display:block;width:100%;font:inherit;font-size:var(--text-sm);color:var(--text);background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:10px 12px;line-height:1.4;
  transition:border-color var(--dur),box-shadow var(--dur);
}
.input::placeholder{color:var(--text-subtle)}
.input:focus,.select:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
.input:disabled,.select:disabled{background:var(--surface-2);color:var(--text-subtle);cursor:not-allowed}
.input--invalid{border-color:var(--danger)}
.input--invalid:focus{box-shadow:0 0 0 3px var(--danger-soft)}
.input--sm{padding:7px 10px;font-size:var(--text-xs)}
.input--lg{padding:13px 14px;font-size:var(--text-base)}
.select{
  appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23626B6B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;
}

/* ---- CHECKBOX / RADIO ------------------------------------------------- */
.check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--text-sm);color:var(--text)}
.check input{position:absolute;width:1px;height:1px;opacity:0}
.check__box{width:20px;height:20px;flex:none;border:1.5px solid var(--border-strong);border-radius:6px;background:var(--surface);
  display:grid;place-items:center;transition:background var(--dur),border-color var(--dur)}
.check--radio .check__box{border-radius:50%}
.check input:checked + .check__box{background:var(--accent);border-color:var(--accent)}
.check:not(.check--radio) input:checked + .check__box::after{
  content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-2px}
.check--radio input:checked + .check__box{background:var(--surface);border-color:var(--accent)}
.check--radio input:checked + .check__box::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}
.check input:focus-visible + .check__box{box-shadow:var(--focus-ring)}

/* ---- SWITCH ----------------------------------------------------------- */
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--text-sm);color:var(--text)}
.switch input{position:absolute;width:1px;height:1px;opacity:0}
.switch__track{width:40px;height:23px;flex:none;border-radius:var(--radius-pill);background:var(--slate-300);position:relative;transition:background var(--dur)}
.switch__track::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--dur)}
.switch input:checked + .switch__track{background:var(--accent)}
.switch input:checked + .switch__track::after{transform:translateX(17px)}
.switch input:focus-visible + .switch__track{box-shadow:var(--focus-ring)}

/* ---- BADGE ------------------------------------------------------------ */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);font-weight:var(--weight-semibold);
  line-height:1.4;padding:3px 9px;border-radius:var(--radius-pill);border:1px solid transparent}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--neutral{background:var(--surface-2);color:var(--text-muted);border-color:var(--border)}
.badge--success{background:var(--success-soft);color:var(--success-ink)}
.badge--info{background:var(--info-soft);color:var(--info-ink)}
.badge--warning{background:var(--warning-soft);color:var(--warning-ink)}
.badge--danger{background:var(--danger-soft);color:var(--danger-ink)}
.badge--money{background:var(--money-soft);color:var(--money-ink)}

/* ---- FIELD (molecule: label + control + hint/error) ------------------- */
.field{display:flex;flex-direction:column;gap:7px}
.field__label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text)}
.field__label .req{color:var(--danger);margin-left:2px}
.field__hint{font-size:var(--text-xs);color:var(--text-muted)}
.field__error{font-size:var(--text-xs);color:var(--danger-ink);display:flex;align-items:center;gap:5px}

/* ---- STAT (molecule) -------------------------------------------------- */
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4)}
.stat__value{font-size:var(--text-2xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight);line-height:1;color:var(--text)}
.stat__value.is-money{color:var(--money-ink)}
.stat__label{font-size:var(--text-xs);color:var(--text-muted);margin-top:8px}
.stat__trend{font-size:var(--text-xs);font-weight:var(--weight-semibold);margin-top:6px}
.stat__trend.up{color:var(--success-ink)}
.stat__trend.down{color:var(--danger-ink)}

/* ---- ALERT (molecule) ------------------------------------------------- */
.alert{display:flex;gap:11px;align-items:flex-start;border:1px solid;border-radius:var(--radius-md);padding:13px 15px;
  font-size:var(--text-sm);line-height:1.5}
.alert svg{width:18px;height:18px;flex:none;margin-top:1px}
.alert b{font-weight:var(--weight-semibold)}
.alert--info{background:var(--info-soft);border-color:var(--info-border);color:var(--info-ink)}
.alert--success{background:var(--success-soft);border-color:var(--success-border);color:var(--success-ink)}
.alert--warning{background:var(--warning-soft);border-color:var(--warning-border);color:var(--warning-ink)}
.alert--danger{background:var(--danger-soft);border-color:var(--danger-border);color:var(--danger-ink)}

/* ---- SEGMENTED CONTROL (molecule) ------------------------------------- */
.segmented{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:3px;gap:2px}
.segmented button{border:none;background:transparent;font:inherit;font-size:var(--text-sm);font-weight:var(--weight-semibold);
  color:var(--text-muted);padding:6px 14px;border-radius:7px;cursor:pointer;transition:background var(--dur),color var(--dur)}
.segmented button:hover{color:var(--text)}
.segmented button.is-active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}

/* ---- CARD (molecule) -------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.card__body{padding:var(--space-5)}
.card__title{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text)}
.card__text{font-size:var(--text-sm);color:var(--text-muted);margin-top:6px;line-height:1.5}

/* ============================================================================
   ATOMS — avatars, tags, indicators
   ========================================================================== */

/* ---- AVATAR ----------------------------------------------------------- */
.avatar{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;
  background:var(--brand-soft);color:var(--brand-ink);font-size:var(--text-sm);font-weight:var(--weight-semibold);
  overflow:hidden;user-select:none}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar--sm{width:28px;height:28px;font-size:var(--text-xs)}
.avatar--lg{width:56px;height:56px;font-size:var(--text-lg)}
.avatar--provider{background:var(--money-soft);color:var(--money-ink)}   /* providers in green */
.avatar-stack{display:inline-flex}
.avatar-stack .avatar{box-shadow:0 0 0 2px var(--surface);margin-left:-10px}
.avatar-stack .avatar:first-child{margin-left:0}

/* ---- TAG (removable) -------------------------------------------------- */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);font-weight:var(--weight-medium);
  color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 9px}
.tag__x{display:inline-grid;place-items:center;width:15px;height:15px;border:none;border-radius:50%;background:transparent;
  color:var(--text-subtle);cursor:pointer;padding:0}
.tag__x:hover{background:var(--border);color:var(--text)}

/* ---- TOOLTIP (CSS hover) ---------------------------------------------- */
.tooltip{position:relative;display:inline-flex}
.tooltip__bubble{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);background:var(--slate-900);
  color:#fff;font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:1.3;padding:6px 10px;border-radius:var(--radius-sm);
  white-space:nowrap;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:opacity var(--dur)}
.tooltip__bubble::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--slate-900)}
.tooltip:hover .tooltip__bubble,.tooltip:focus-within .tooltip__bubble{opacity:1}

/* ---- SPINNER ---------------------------------------------------------- */
.spinner{display:inline-block;width:20px;height:20px;border:2.5px solid var(--border);border-top-color:var(--accent);
  border-radius:50%;animation:wf-spin .7s linear infinite}
.spinner--sm{width:14px;height:14px;border-width:2px}
.spinner--lg{width:30px;height:30px;border-width:3px}
@keyframes wf-spin{to{transform:rotate(360deg)}}

/* ---- PROGRESS (linear + ring) ----------------------------------------- */
.progress{height:8px;background:var(--surface-sunken);border-radius:var(--radius-pill);overflow:hidden}
.progress__bar{height:100%;background:var(--accent);border-radius:var(--radius-pill);transition:width var(--dur)}
.progress--money .progress__bar{background:var(--money)}
.progress-ring{position:relative;width:48px;height:48px;border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--val,0)*1%), var(--surface-sunken) 0)}
.progress-ring__inner{position:absolute;inset:6px;background:var(--surface);border-radius:50%;display:grid;place-items:center;
  font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text)}

/* ---- SKELETON --------------------------------------------------------- */
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-sunken) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:wf-shimmer 1.4s ease infinite;border-radius:var(--radius-sm)}
.skeleton--text{height:10px;border-radius:4px}
.skeleton--circle{border-radius:50%}
@keyframes wf-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ============================================================================
   MOLECULES — tabs, steppers, table, empty state
   ========================================================================== */

/* ---- TABS ------------------------------------------------------------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border)}
.tab{appearance:none;background:none;border:none;font:inherit;font-size:var(--text-sm);font-weight:var(--weight-semibold);
  color:var(--text-muted);padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--dur),border-color var(--dur)}
.tab:hover{color:var(--text)}
.tab.is-active{color:var(--accent-ink);border-bottom-color:var(--accent)}

/* ---- STEPPER (horizontal) + CHECKLIST (vertical) ---------------------- */
.stepper{display:flex;align-items:center}
.stepper__step{display:flex;align-items:center;gap:9px;font-size:var(--text-sm);color:var(--text-muted)}
.stepper__dot{width:26px;height:26px;flex:none;border-radius:50%;border:2px solid var(--border-strong);background:var(--surface);
  color:var(--text-subtle);display:grid;place-items:center;font-size:var(--text-xs);font-weight:var(--weight-semibold)}
.stepper__line{flex:1;min-width:26px;height:2px;background:var(--border);margin:0 10px}
.stepper__line.is-done{background:var(--success)}
.stepper__step.is-done{color:var(--text)}
.stepper__step.is-done .stepper__dot{background:var(--success);border-color:var(--success);color:#fff}
.stepper__step.is-active{color:var(--text);font-weight:var(--weight-semibold)}
.stepper__step.is-active .stepper__dot{border-color:var(--accent);color:var(--accent-ink)}

.checklist{display:flex;flex-direction:column}
.checklist__item{display:flex;align-items:center;gap:11px;padding:10px 0;font-size:var(--text-sm);color:var(--text-muted)}
.checklist__item + .checklist__item{border-top:1px solid var(--border)}
.checklist__dot{width:22px;height:22px;flex:none;border-radius:50%;border:2px solid var(--border-strong);background:var(--surface);
  display:grid;place-items:center;color:#fff}
.checklist__item.is-done{color:var(--text)}
.checklist__item.is-done .checklist__dot{background:var(--success);border-color:var(--success)}
.checklist__item.is-active{color:var(--text);font-weight:var(--weight-semibold)}
.checklist__item.is-active .checklist__dot{border-color:var(--accent)}
.checklist__item.is-active .checklist__dot::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* ---- TABLE ------------------------------------------------------------ */
.table-wrap{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.table th{text-align:left;font-size:var(--text-xs);font-weight:var(--weight-semibold);text-transform:uppercase;
  letter-spacing:var(--tracking-caps);color:var(--text-subtle);padding:11px 16px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.table td{padding:12px 16px;border-bottom:1px solid var(--border);color:var(--text)}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:var(--surface-2)}
.table .num{text-align:right;font-variant-numeric:tabular-nums}

/* ---- EMPTY STATE ------------------------------------------------------ */
.empty{text-align:center;padding:var(--space-12) var(--space-6);border:1px dashed var(--border-strong);
  border-radius:var(--radius-lg);background:var(--surface)}
.empty__icon{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:var(--radius-lg);
  background:var(--surface-2);color:var(--text-subtle);margin-bottom:var(--space-3)}
.empty__title{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text)}
.empty__text{font-size:var(--text-sm);color:var(--text-muted);margin:6px auto 0;max-width:38ch;line-height:1.5}
.empty__action{margin-top:var(--space-4)}

/* ============================================================================
   OVERLAYS — toast, modal, drawer (shown statically in docs)
   ========================================================================== */

/* ---- TOAST ------------------------------------------------------------ */
.toast{display:flex;align-items:flex-start;gap:11px;max-width:380px;background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:13px 15px;font-size:var(--text-sm)}
.toast svg{flex:none;margin-top:1px}
.toast--success{border-left-color:var(--success)}
.toast--warning{border-left-color:var(--warning)}
.toast--danger{border-left-color:var(--danger)}
.toast__title{font-weight:var(--weight-semibold);color:var(--text)}
.toast__text{color:var(--text-muted);margin-top:2px;line-height:1.45}
.toast__close{margin-left:auto;border:none;background:none;color:var(--text-subtle);cursor:pointer;padding:0;display:grid;place-items:center}

/* ---- MODAL ------------------------------------------------------------ */
.modal-scrim{background:rgba(31,37,36,.5);border-radius:var(--radius-lg);padding:var(--space-10);display:grid;place-items:center}
.modal{width:100%;max-width:400px;background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden}
.modal__body{padding:var(--space-6)}
.modal__title{font-size:var(--text-lg);font-weight:var(--weight-bold);letter-spacing:var(--tracking-snug)}
.modal__text{font-size:var(--text-sm);color:var(--text-muted);margin-top:8px;line-height:1.5}
.modal__actions{display:flex;justify-content:flex-end;gap:8px;padding:var(--space-4) var(--space-6);
  border-top:1px solid var(--border);background:var(--surface-2)}

/* ---- DRAWER ----------------------------------------------------------- */
.drawer-demo{position:relative;height:300px;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-2)}
.drawer-demo__scrim{position:absolute;inset:0 300px 0 0;background:rgba(31,37,36,.32)}
.drawer{position:absolute;top:0;right:0;bottom:0;width:300px;background:var(--surface);border-left:1px solid var(--border);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);border-bottom:1px solid var(--border)}
.drawer__title{font-weight:var(--weight-semibold)}
.drawer__close{border:none;background:none;color:var(--text-subtle);cursor:pointer;display:grid;place-items:center}
.drawer__body{padding:var(--space-4);font-size:var(--text-sm);color:var(--text-muted);line-height:1.55}

/* ============================================================================
   WELLFIT PATTERNS — affordability option, schedule row, trust primitives
   ========================================================================== */

/* ---- AFFORDABILITY OPTION (the Chairside three-button pattern) -------- */
.option{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:172px;
  background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);
  cursor:pointer;font:inherit;transition:border-color var(--dur),box-shadow var(--dur),transform var(--dur)}
.option:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.option--recommended{border-color:var(--money);box-shadow:0 8px 22px rgba(98,167,68,.15)}
.option--recommended:hover{border-color:var(--money)}
.option__ribbon{position:absolute;top:-9px;left:16px;background:var(--money-fill);color:var(--money-contrast);font-size:var(--text-xs);
  font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;padding:3px 9px;border-radius:var(--radius-sm)}
.option__value{font-size:var(--text-2xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight);line-height:1;margin-top:6px;color:var(--text)}
.option__value small{font-size:var(--text-sm);color:var(--text-muted);font-weight:var(--weight-medium)}
.option__desc{font-size:var(--text-sm);color:var(--text-muted);margin-top:8px}
.option__note{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--money-ink);margin-top:5px}
.option__cta{margin-top:var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--accent-ink);
  display:inline-flex;align-items:center;gap:5px}
.option--recommended .option__cta{color:var(--money-ink)}

/* ---- SCHEDULE / APPOINTMENT ROW -------------------------------------- */
.appt{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--radius-md);cursor:pointer;transition:background var(--dur)}
.appt:hover{background:var(--surface-2)}
.appt.is-selected{background:var(--accent-soft)}
.appt.is-selected::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.appt__time{width:50px;flex:none;font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--text-muted);font-variant-numeric:tabular-nums}
.appt__who{flex:1;min-width:0}
.appt__name{font-size:var(--text-sm);font-weight:var(--weight-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appt__meta{font-size:var(--text-xs);color:var(--text-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appt__right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.appt__prod{font-size:var(--text-sm);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}

/* ---- TRUST PRIMITIVES — "as of" freshness + confidence ---------------- */
.asof{display:inline-flex;align-items:center;gap:5px;font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--text-muted);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-pill);padding:3px 9px}
.asof svg{width:12px;height:12px}
.asof--stale{color:var(--warning-ink);background:var(--warning-soft);border-color:var(--warning-border)}
.confidence{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--text-muted)}
.confidence__bars{display:inline-flex;gap:2px;align-items:flex-end}
.confidence__bars i{width:4px;border-radius:1px;background:var(--border-strong)}
.confidence__bars i:nth-child(1){height:7px}.confidence__bars i:nth-child(2){height:10px}.confidence__bars i:nth-child(3){height:13px}
.confidence--high .confidence__bars i{background:var(--success)}
.confidence--med .confidence__bars i:nth-child(-n+2){background:var(--warning)}
.confidence--low .confidence__bars i:nth-child(1){background:var(--danger)}

/* ---- NUM utility — tabular figures for money & data ------------------- */
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ============================================================================
   WELLFIT PATTERNS · MONEY LAYER — the vocabulary from ux-discovery/03.
   Rules: amounts are tabular; green means money-in/savings ONLY; red is never
   a mere debit (only failures/disputes); every estimate wears ≈ + an as-of.
   ========================================================================== */

/* ---- AMOUNT — money typography ---------------------------------------- */
.amount{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-weight:var(--weight-semibold);color:var(--text)}
.amount--in{color:var(--money-ink)}          /* money in / savings only */
.amount--muted{color:var(--text-muted);font-weight:var(--weight-medium)}  /* demoted lump sums */
.amount--lg{font-size:var(--text-2xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight)}
.amount--xl{font-size:var(--text-3xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight);line-height:1}
.amount small{font-size:.55em;color:var(--text-muted);font-weight:var(--weight-medium)}
/* superior currency symbol — display-size money ONLY (2xl/xl/lg: .amount--lg/--xl,
   .stat__value, .option__value, .kpi__value, .chart-card__value, .donut-center b).
   text-md money (brief facts, action-card amounts) and all rows/tables keep the
   inline $ — at 16px a superior symbol is fuss, not hierarchy.
   Baseline-relative raise from measured Hanken ink metrics: digit cap = .700em,
   $ S-body = .700em ($'s vertical stroke overshoots to .745 — we align the S,
   not the stroke). raise = (.700 - .700 x .55) / .55 = .573 of the symbol's em. */
.amount__cur{font-size:.55em;font-weight:var(--weight-semibold);margin-right:1px;position:relative;vertical-align:baseline;top:-.573em;line-height:0;display:inline-block}

/* ---- ESTIMATE marker — pairs with .asof; actuals never wear it -------- */
.est{color:var(--text-muted);border-bottom:1.5px dotted var(--border-strong);cursor:help}
.est::before{content:"≈ ";color:var(--text-subtle)}

/* ---- LIVE dot — "this stream is live" ---------------------------------- */
.live{display:inline-flex;align-items:center;gap:7px;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--success-ink)}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--success);animation:wf-pulse 1.6s var(--ease) infinite}
@keyframes wf-pulse{0%,100%{box-shadow:0 0 0 0 var(--success-soft)}50%{box-shadow:0 0 0 5px var(--success-soft)}}

/* ---- ROUTE chip — which product money rides (label, not status) ------- */
.route{display:inline-flex;align-items:center;gap:5px;font-size:var(--text-xs);font-weight:var(--weight-semibold);
  padding:2px 8px;border-radius:var(--radius-pill);border:1px solid transparent;white-space:nowrap}
.route--payment{background:var(--route-payment-soft);color:var(--route-payment)}
.route--financing{background:var(--route-financing-soft);color:var(--route-financing)}
.route--arrangement{background:var(--route-arrangement-soft);color:var(--route-arrangement)}
.route--plan{background:var(--route-plan-soft);color:var(--route-plan)}

/* ---- TXN — money timeline row (payments, deposits, disputes, drafts) -- */
.txn{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--radius-md);transition:background var(--dur)}
.txn:hover{background:var(--surface-2)}
.txn__time{width:46px;flex:none;font-size:var(--text-xs);color:var(--text-muted);font-variant-numeric:tabular-nums}
.txn__who{flex:1;min-width:0}
.txn__desc{font-size:var(--text-sm);font-weight:var(--weight-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txn__meta{font-size:var(--text-xs);color:var(--text-muted);margin-top:1px}
.txn__amount{flex:none;text-align:right;font-size:var(--text-sm)}
.txn__state{flex:none;min-width:92px;display:flex;justify-content:flex-end}
.txn--attention::before,.txn--dispute::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.txn--attention::before{background:var(--warning)}
.txn--dispute::before{background:var(--danger)}

/* ---- PIPELINE — money in motion, stage counts (In Flight) -------------- */
.pipeline{display:flex;align-items:stretch;gap:8px}
.pipeline__stage{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:10px 14px;position:relative;transition:border-color var(--dur)}
.pipeline__stage.is-active{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.pipeline__count{font-size:var(--text-xl);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums;line-height:1.1}
.pipeline__label{font-size:var(--text-xs);color:var(--text-muted);margin-top:3px}
.pipeline__sum{font-size:var(--text-xs);color:var(--money-ink);font-weight:var(--weight-semibold);margin-top:5px;font-variant-numeric:tabular-nums}

/* ---- OFFER MATH — the composed estimate (fee − ins − mem + financing) -- */
.offer-math{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);font-size:var(--text-sm)}
.offer-math__row{display:flex;align-items:baseline;gap:10px;padding:6px 0}
.offer-math__row + .offer-math__row{border-top:1px dashed var(--border)}
.offer-math__label{flex:1;color:var(--text)}
.offer-math__src{font-size:var(--text-xs);color:var(--text-subtle)}
.offer-math__val{font-variant-numeric:tabular-nums;font-weight:var(--weight-semibold);text-align:right;min-width:84px}
.offer-math__row.is-deduct .offer-math__val{color:var(--money-ink)}
.offer-math__row.is-total{border-top:1.5px solid var(--border-strong);margin-top:4px;padding-top:10px}
.offer-math__row.is-total .offer-math__label{font-weight:var(--weight-semibold)}
.offer-math__row.is-total .offer-math__val{font-size:var(--text-md);font-weight:var(--weight-bold)}

/* ---- BRIEF — the patient Money Brief header ---------------------------- */
.brief{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.brief__id{display:flex;align-items:center;gap:12px;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border)}
.brief__name{font-size:var(--text-md);font-weight:var(--weight-bold);letter-spacing:var(--tracking-snug)}
.brief__meta{font-size:var(--text-xs);color:var(--text-muted);margin-top:1px}
.brief__id .asof{margin-left:auto}
.brief__facts{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface)}
.brief__fact{padding:12px var(--space-5)}
.brief__fact + .brief__fact{border-left:1px solid var(--border)}
.brief__fact-label{font-size:var(--text-xs);color:var(--text-subtle);text-transform:uppercase;letter-spacing:var(--tracking-caps);font-weight:var(--weight-semibold)}
.brief__fact-value{font-size:var(--text-md);font-weight:var(--weight-semibold);margin-top:3px;font-variant-numeric:tabular-nums}
.brief__fact-sub{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px}

/* ---- ACTION CARD — patient-led pre-staged work (one card, one action) --- */
.action-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-xs)}
.action-card--urgent::before,.action-card--critical::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}
.action-card--urgent::before{background:var(--warning)}
.action-card--critical::before{background:var(--critical)}   /* reserved: overdue/today only */
.action-card__patient{display:flex;align-items:center;gap:11px}
.action-card__name{font-size:var(--text-base);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-snug)}
.action-card__patient-meta{font-size:var(--text-xs);color:var(--text-subtle);margin-top:1px}
.action-card__amount{margin-left:auto;font-size:var(--text-md);font-weight:var(--weight-bold);
  font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-tight)}
.action-card__kicker{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px}
.action-card__due{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:var(--weight-bold);
  text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted)}
.action-card--urgent .action-card__due{color:var(--warning-ink)}
.action-card--critical .action-card__due{color:var(--critical)}
.action-card__title{font-size:var(--text-sm);font-weight:var(--weight-semibold);margin-top:4px}
.action-card__why{font-size:var(--text-xs);color:var(--text-muted);margin-top:9px;line-height:1.5}
.action-card__script{margin-top:10px;background:var(--brand-soft);border-radius:var(--radius-md);padding:9px 12px;
  font-size:var(--text-sm);color:var(--brand-ink);font-style:italic;line-height:1.45}
.action-card__script::before{content:"“"}.action-card__script::after{content:"”"}
.action-card__actions{display:flex;gap:8px;margin-top:13px}

/* ---- NUDGE — quiet-collections queue row (approve, never improvise) ---- */
.nudge{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:var(--radius-md)}
.nudge + .nudge{border-top:1px solid var(--border)}
.nudge__body{flex:1;min-width:0}
.nudge__who{font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.nudge__who .amount{margin-left:6px}
.nudge__draft{font-size:var(--text-xs);color:var(--text-muted);margin-top:3px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nudge__actions{display:flex;align-items:center;gap:8px;flex:none}
.nudge.is-sent{opacity:.62}

/* ---- KPI — goal-aware stat tile (Pulse) -------------------------------- */
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);min-width:180px}
.kpi__label{font-size:var(--text-xs);color:var(--text-muted)}
.kpi__value{font-size:var(--text-2xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight);line-height:1.05;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi__value.is-money{color:var(--money-ink)}
.kpi__delta{font-size:var(--text-xs);font-weight:var(--weight-semibold);margin-top:5px}
.kpi__delta.up{color:var(--success-ink)}.kpi__delta.down{color:var(--danger-ink)}
.kpi__spark{display:flex;align-items:flex-end;gap:3px;height:26px;margin-top:10px}
.kpi__spark i{flex:1;background:var(--accent-soft);border-radius:2px 2px 0 0;min-height:3px}
.kpi__spark i.hot{background:var(--accent)}
.kpi__pace{margin-top:10px}
.kpi__pace .progress{height:6px}
.kpi__pace-label{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--text-muted);margin-top:5px}

/* ---- METHOD — payment method row (card · ACH · terminal · wallet) ------ */
.method{display:flex;align-items:center;gap:12px;width:100%;background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius-md);padding:11px 14px;cursor:pointer;font:inherit;text-align:left;transition:border-color var(--dur),background var(--dur)}
.method:hover{border-color:var(--border-strong)}
.method.is-selected{border-color:var(--accent);background:var(--accent-soft)}
.method__icon{width:34px;height:34px;flex:none;border-radius:var(--radius-sm);background:var(--surface-2);display:grid;place-items:center;color:var(--text-muted)}
.method.is-selected .method__icon{background:var(--surface);color:var(--accent-ink)}
.method__label{font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.method__meta{font-size:var(--text-xs);color:var(--text-muted);margin-top:1px;font-variant-numeric:tabular-nums}
.method__check{margin-left:auto;color:var(--accent-ink);opacity:0;transition:opacity var(--dur)}
.method.is-selected .method__check{opacity:1}

/* ============================================================================
   HOST CONTEXTS — the same vocabulary projected into phone & overlay hosts
   ========================================================================== */

/* ---- PHONE frame + SHEET (tap-to-accept, bill-pay) --------------------- */
.phone{width:var(--phone-w);background:var(--surface);border:1px solid var(--border-strong);border-radius:34px;
  box-shadow:var(--shadow-lg);padding:14px;flex:none}
.phone__screen{background:var(--bg);border-radius:24px;overflow:hidden;border:1px solid var(--border)}
.sheet{background:var(--surface);padding:var(--space-5)}
.sheet__brand{display:flex;align-items:center;gap:9px;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-muted)}
.sheet__brand .dot{width:18px;height:18px;border-radius:6px;background:var(--accent)}
.sheet__title{font-size:var(--text-md);font-weight:var(--weight-bold);margin-top:var(--space-4);letter-spacing:var(--tracking-snug)}
.sheet__amount{margin-top:var(--space-3)}
.sheet__terms{font-size:var(--text-xs);color:var(--text-muted);margin-top:6px;line-height:1.5}
.sheet__consent{font-size:var(--text-xs);color:var(--text-subtle);margin-top:var(--space-4);line-height:1.55;
  border-top:1px solid var(--border);padding-top:var(--space-3)}
.sheet .btn--block{margin-top:var(--space-4)}

/* ---- RAIL — the ≤360px overlay beside a PMS (Schedule Bridge) ---------- */
.rail{width:var(--rail-w);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);overflow:hidden;flex:none}
.rail__head{display:flex;align-items:center;gap:9px;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.rail__badge{width:20px;height:20px;border-radius:6px;background:var(--brand);color:var(--brand-contrast);
  display:grid;place-items:center;font-size:11px;font-weight:var(--weight-bold)}
.rail__title{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-muted)}
.rail__host{margin-left:auto;font-size:10px;color:var(--text-subtle);text-transform:uppercase;letter-spacing:var(--tracking-caps)}
.rail__body{padding:var(--space-3)}
.rail__body > * + *{margin-top:var(--space-3)}

/* ============================================================================
   DENSITY — data-density="compact" on any container steps the ergonomics
   down for ops tables and the overlay rail. Comfortable stays the default.
   ========================================================================== */
[data-density="compact"]{font-size:var(--text-sm)}
[data-density="compact"] .table th{padding:7px 12px}
[data-density="compact"] .table td{padding:8px 12px;font-size:var(--text-xs)}
[data-density="compact"] .appt,[data-density="compact"] .txn{padding:7px 10px;gap:9px}
[data-density="compact"] .btn{padding:7px 12px;font-size:var(--text-xs)}
[data-density="compact"] .stat,[data-density="compact"] .kpi{padding:var(--space-3)}
[data-density="compact"] .kpi__value,[data-density="compact"] .stat__value{font-size:var(--text-xl)}
[data-density="compact"] .badge{padding:2px 7px}

/* ============================================================================
   CHARTS & DATA VIZ — license-free, CSS/SVG-native (no Kendo, no chart libs).
   Rules: color carries meaning (routes/status/money — never decoration);
   the label leads; a chart is never the only way to read the number.
   Categorical series = route hues · sequential = blue ramp · money-in = green.
   ========================================================================== */

/* ---- CHART CARD — the standard dashboard tile frame -------------------- */
.chart-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;box-shadow:var(--shadow-xs)}
.chart-card__head{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-4) var(--space-5) 0}
.chart-card__kpi{min-width:0}
.chart-card__title{font-size:var(--text-sm);color:var(--text-muted);font-weight:var(--weight-medium)}
.chart-card__value{font-size:var(--text-2xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight);line-height:1;margin-top:5px;font-variant-numeric:tabular-nums}
.chart-card__value.is-money{color:var(--money-ink)}
.chart-card__delta{font-size:var(--text-xs);font-weight:var(--weight-semibold);display:inline-flex;align-items:center;gap:4px;margin-top:6px}
.chart-card__delta.up{color:var(--success-ink)}
.chart-card__delta.down{color:var(--danger-ink)}
.chart-card__period{margin-left:auto}
.chart-card__body{padding:var(--space-4) var(--space-5) var(--space-5)}
.chart-card__foot{display:flex;align-items:center;gap:7px;padding:var(--space-3) var(--space-5);border-top:1px solid var(--border);
  background:var(--surface-2);font-size:var(--text-xs);color:var(--text-subtle)}

/* ---- LEGEND ------------------------------------------------------------ */
.legend{display:flex;flex-wrap:wrap;gap:var(--space-4);font-size:var(--text-xs);color:var(--text-muted)}
.legend__item{display:inline-flex;align-items:center;gap:6px}
.legend__swatch{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}

/* ---- SPARKLINES — word-sized: line/area via svg.spark, bars via spans -- */
.spark{display:block;overflow:visible}
.spark polyline,.spark path.line{stroke:var(--accent);fill:none}
.spark path.fill{fill:var(--accent-soft)}
.spark .dot{fill:var(--accent)}
.sparkbars{display:inline-flex;gap:2px;align-items:flex-end;height:26px}
.sparkbars i{width:5px;background:var(--accent-soft);border-radius:2px 2px 0 0;min-height:2px}
.sparkbars i.hot{background:var(--accent)}
.sparkbars--money i{background:var(--money-soft)}
.sparkbars--money i.hot{background:var(--money-fill)}

/* ---- BAR CHART — vertical columns; group for period-over-period -------- */
.barchart{display:flex;align-items:flex-end;gap:var(--space-3);height:150px}
.barchart__col,.barchart__group{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.barchart__group{flex-direction:row;align-items:flex-end;gap:3px}
.barchart__group .barchart__bar{max-width:18px}
.barchart__bar{width:100%;max-width:38px;background:var(--accent);border-radius:5px 5px 0 0;min-height:3px;transition:height var(--dur)}
.barchart__bar.is-muted{background:var(--border-strong)}
.barchart__bar.is-money{background:var(--money-fill)}
.barchart__label{font-size:var(--text-xs);color:var(--text-subtle)}
.barchart__val{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);font-variant-numeric:tabular-nums}

/* ---- H-BAR — horizontal ranking; fills can carry route hues ------------ */
.hbarchart{display:flex;flex-direction:column;gap:10px}
.hbar{display:grid;grid-template-columns:minmax(120px,1fr) 2.2fr auto;align-items:center;gap:var(--space-3);font-size:var(--text-sm)}
.hbar__label{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar__track{height:12px;background:var(--surface-sunken);border-radius:var(--radius-pill);overflow:hidden}
.hbar__fill{display:block;height:100%;background:var(--accent);border-radius:var(--radius-pill)}
.hbar__fill.is-payment{background:var(--route-payment-fill)}
.hbar__fill.is-financing{background:var(--route-financing-fill)}
.hbar__fill.is-arrangement{background:var(--route-arrangement-fill)}
.hbar__fill.is-plan{background:var(--route-plan-fill)}
.hbar__val{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);font-variant-numeric:tabular-nums}

/* ---- METER — 100% stacked strip (composition in one bar) --------------- */
.meter{display:flex;gap:2px;height:14px;border-radius:var(--radius-pill);overflow:hidden;background:var(--surface-sunken)}
.meter span{display:block;height:100%}
.meter .seg-payment{background:var(--route-payment-fill)}
.meter .seg-financing{background:var(--route-financing-fill)}
.meter .seg-arrangement{background:var(--route-arrangement-fill)}
.meter .seg-plan{background:var(--route-plan-fill)}

/* ---- STACKED COLUMNS — composition over time --------------------------- */
.stackchart{display:flex;align-items:flex-end;gap:var(--space-4);height:150px}
.stackcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.stackcol__bar{width:100%;max-width:40px;display:flex;flex-direction:column-reverse;border-radius:5px 5px 0 0;overflow:hidden}
.stackcol__bar span{display:block;width:100%}
.stackcol__label{font-size:var(--text-xs);color:var(--text-subtle)}

/* ---- BULLET — actual vs target (goal pace) ------------------------------ */
.bullet{position:relative;height:14px;background:var(--surface-sunken);border-radius:var(--radius-pill)}
.bullet__zone{position:absolute;inset:0 auto 0 0;background:var(--surface-2);border-radius:var(--radius-pill)}
.bullet__measure{position:absolute;top:3px;bottom:3px;left:0;background:var(--money-fill);border-radius:var(--radius-pill)}
.bullet__measure.is-under{background:var(--warning)}
.bullet__target{position:absolute;top:-3px;bottom:-3px;width:2.5px;background:var(--text);border-radius:2px}

/* ---- DONUT & RING — svg stroke-dasharray; center holds the number ------ */
.donut-wrap{position:relative;display:inline-grid;place-items:center}
.donut{transform:rotate(-90deg)}
.donut .track{stroke:var(--surface-sunken);fill:none}
.donut .val{fill:none}
.donut--seams .track{stroke:var(--surface)}
.donut-center{position:absolute;text-align:center;line-height:1;transform:translateY(3px)}
.donut-center b{display:block;font-size:var(--text-lg);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums}
.donut-center small{display:block;font-size:var(--text-xs);color:var(--text-subtle);margin-top:3px}

/* ---- FUNNEL / PIPELINE (viz form of In Flight) -------------------------- */
.funnel{display:flex;flex-direction:column;gap:5px}
.funnel__row{display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:var(--text-sm);
  font-weight:var(--weight-semibold);padding:8px 14px;border-radius:var(--radius-sm);min-width:130px}
.funnel__row .n{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:var(--weight-medium)}

/* ---- HISTOGRAM ---------------------------------------------------------- */
.histo{display:flex;align-items:flex-end;gap:3px;height:120px}
.histo i{flex:1;background:var(--accent-soft);border-top:2.5px solid var(--accent);border-radius:3px 3px 0 0;min-height:3px}

/* ---- CHART STATES ------------------------------------------------------- */
.chart-skeleton{display:flex;align-items:flex-end;gap:6px;height:110px}
.chart-skeleton i{flex:1;border-radius:4px 4px 0 0}
.chart-empty{display:grid;place-items:center;min-height:110px;text-align:center;color:var(--text-muted);
  font-size:var(--text-sm);padding:var(--space-5)}
.chart-empty svg{width:22px;height:22px;color:var(--text-subtle);margin:0 auto 8px}

/* grid lines inside chart SVGs */
.viz-grid{stroke:var(--border)}
.viz-ghost{stroke:var(--border-strong)}

/* ---- SEARCHBOX — input with a leading magnifier (a search that looks like one) */
.searchbox{position:relative;display:block}
.searchbox>svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-subtle);pointer-events:none}
.searchbox .input{padding-left:38px}