/* ============================================================
   HealthFees Insights — hi-fi shared components
   Every class here maps to a Figma component (noted per block).
   ============================================================ */

/* ---------- App chrome / MasterNav  →  Figma: Nav/MasterNav ---------- */
.masternav {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: 0 var(--sp-8);
  height: 56px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
}
.logo { display: flex; align-items: center; gap: 9px; font-weight: var(--w-semi); font-size: var(--fs-16); letter-spacing: -0.02em; }
.logo .mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: var(--w-semi); font-family: var(--font-data);
}

/* Product tab  →  Figma: Nav/ProductTab (state: default|active|locked) */
.mn-tabs { display: flex; gap: var(--sp-1); margin-left: var(--sp-3); }
.mn-tab {
  padding: 7px 14px; border-radius: var(--r-sm); font-size: var(--fs-14);
  color: var(--text-2); background: none; border: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.15s, color 0.15s;
}
.mn-tab:hover { background: var(--surface-2); color: var(--text); }
.mn-tab.active { background: var(--accent-bg); color: var(--accent); font-weight: var(--w-med); }
.mn-tab.active:hover { background: var(--accent-bg-2); }
.mn-tab.locked { color: var(--muted); }
.mn-tab .lock-ic { font-size: 10px; opacity: 0.75; position: relative; top: -0.5px; }

.mn-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); color: var(--text-2); }
.icon-btn {
  width: 32px; height: 32px; border-radius: var(--r-sm); border: none; background: none;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-2);
  transition: background 0.15s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.avatar {
  width: 28px; height: 28px; border-radius: var(--r-full);
  background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-11); font-weight: var(--w-semi); margin-left: var(--sp-2);
}

/* Badge  →  Figma: Badge (variant: locked|tier|neutral) */
.badge {
  font-size: var(--fs-11); font-weight: var(--w-med); line-height: 1;
  border-radius: var(--r-sm); padding: 3px 7px;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.badge-locked { color: var(--muted); border: 1px solid var(--border-strong); background: var(--surface); }
.badge-accent { color: var(--accent); border: 1px solid var(--accent-border); background: var(--accent-bg); }
.badge .lock { font-size: 9px; position: relative; top: -0.5px; }

/* Sub-nav  →  Figma: Nav/SubTab (state: default|active) */
.subnav {
  display: flex; gap: var(--sp-6); padding: 0 var(--sp-8);
  background: var(--card); border-bottom: 1px solid var(--border);
  position: sticky; top: 56px; z-index: 39;
}
.sn-item {
  padding: 13px 2px 11px; font-size: var(--fs-14); color: var(--text-2);
  border: none; background: none; border-bottom: 2px solid transparent;
  transition: color 0.15s;
}
.sn-item:hover { color: var(--text); }
.sn-item.active { color: var(--text); font-weight: var(--w-med); border-bottom-color: var(--accent); }

/* Filter chips  →  Figma: Chip (variant: filter|gated; state: default|hover) */
.filterbar { display: flex; gap: var(--sp-2); padding: var(--sp-4) var(--sp-8) 0; flex-wrap: wrap; max-width: 1264px; margin: 0 auto; width: 100%; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--r-full); font-size: var(--fs-13);
  background: var(--card); border: 1px solid var(--border); color: var(--text-2);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, color 0.15s;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip .x { color: var(--muted); font-size: var(--fs-11); cursor: pointer; }
.chip .x:hover { color: var(--danger); }
.chip-gated {
  border: 1.5px dashed var(--accent); color: var(--accent);
  background: var(--accent-bg); font-weight: var(--w-med); cursor: pointer;
}
.chip-gated:hover { background: var(--accent-bg-2); border-color: var(--accent-hover); color: var(--accent-hover); }

/* ---------- Layout ---------- */
.page { max-width: 1264px; margin: 0 auto; padding: var(--sp-5) var(--sp-8) var(--sp-16); display: grid; gap: var(--sp-4); width: 100%; }

/* Card  →  Figma: Card */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.card h2 { font-size: var(--fs-16); margin-bottom: 2px; }
.card .sub { color: var(--text-2); font-size: var(--fs-13); }
.note { color: var(--muted); font-size: var(--fs-12); }

/* Basis strip  →  Figma: Banner/Basis */
.basis-strip {
  background: var(--accent-bg); border: 1px solid var(--accent-border);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-13); color: var(--text);
  display: flex; align-items: center; gap: 10px;
}
.basis-strip .i {
  width: 18px; height: 18px; border-radius: var(--r-full); flex: none;
  background: var(--accent); color: var(--on-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: var(--w-semi); font-style: normal;
}

/* Gated banner  →  Figma: Banner/Gated */
.gated-banner {
  border: 1.5px dashed var(--accent-border); border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6); display: flex; align-items: center; gap: var(--sp-4);
  background: linear-gradient(90deg, var(--accent-bg) 0%, transparent 65%);
  transition: border-color 0.15s;
}
.gated-banner:hover { border-color: var(--accent); }
.gated-banner .grow { flex: 1; }
.gated-banner strong { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-14); }

/* Buttons  →  Figma: Button (variant: primary|secondary|quiet; state: default|hover) */
.btn {
  padding: 8px 16px; border-radius: var(--r-sm); border: 1px solid var(--border-strong);
  background: var(--card); color: var(--text); font-size: var(--fs-14); font-weight: var(--w-med);
  box-shadow: var(--shadow-sm);
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.btn:hover { background: var(--surface-2); border-color: var(--muted); }
.btn:active { transform: translateY(0.5px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-quiet { border-color: transparent; background: none; box-shadow: none; color: var(--text-2); }
.btn-quiet:hover { background: var(--surface-2); border-color: transparent; color: var(--text); }

/* Legend  →  Figma: Chart/Legend */
.legend { display: flex; gap: var(--sp-4); font-size: var(--fs-12); color: var(--text-2); align-items: center; flex-wrap: wrap; }
.dot { width: 9px; height: 9px; border-radius: var(--r-full); display: inline-block; margin-right: 5px; vertical-align: baseline; }
.dot-low { background: var(--low); } .dot-mid { background: var(--mid); }
.dot-high { background: var(--high); } .dot-you { background: var(--accent); }

/* KPI stat  →  Figma: KPI/Stat */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.kpi {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow-sm);
  transition: border-color 0.15s;
}
.kpi:hover { border-color: var(--border-strong); }
.kpi .v { font-size: 24px; font-weight: var(--w-med); font-family: var(--font-data); font-feature-settings: "tnum"; letter-spacing: -0.03em; }
.kpi .l { font-size: var(--fs-12); color: var(--text-2); margin-top: 2px; }

/* Facility row  →  Figma: Facility/Row (state: default|hover|current) */
.facility-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: var(--fs-13); background: var(--card);
  cursor: pointer; text-align: left; width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.facility-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.facility-row.current { border-color: var(--accent-border); background: var(--accent-bg); }
.facility-row.current:hover { border-color: var(--accent); }
.facility-row .meta { color: var(--text-2); font-size: var(--fs-12); }
.facility-row .rate { margin-left: auto; font-weight: var(--w-med); text-align: right; font-family: var(--font-data); font-feature-settings: "tnum"; }
.facility-row .save { color: var(--success); font-size: var(--fs-12); font-weight: var(--w-reg); font-family: var(--font-ui); }
.facility-row .save.bad { color: var(--danger); }

/* Tool card  →  Figma: Card/Tool */
.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.tool {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-sm); cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  text-align: left;
}
.tool:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tool h3 { font-size: var(--fs-14); margin: 10px 0 3px; }
.tool p { font-size: var(--fs-12); color: var(--text-2); }
.tool .glyph {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: var(--accent-bg); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-13);
}

/* ---------- Onboarding  →  Figma: Onboarding/* ---------- */
.ob-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: var(--sp-12) var(--sp-6); }
.ob-brand { display: flex; align-items: center; gap: 9px; font-weight: var(--w-semi); font-size: var(--fs-16); margin-bottom: var(--sp-3); letter-spacing: -0.02em; }
.ob-steps { color: var(--muted); font-size: var(--fs-12); margin-bottom: var(--sp-2); }
.ob-dots { display: flex; gap: 6px; margin-bottom: var(--sp-8); }
.ob-dots span { width: 24px; height: 4px; border-radius: var(--r-full); background: var(--border); }
.ob-dots span.done { background: var(--accent); }
.ob-card {
  width: 560px; max-width: 100%;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-10);
  box-shadow: var(--shadow-md);
}
.ob-card h1 { font-size: var(--fs-20); margin-bottom: var(--sp-2); letter-spacing: -0.015em; }
.ob-card .lede { color: var(--text-2); font-size: var(--fs-14); margin-bottom: var(--sp-6); }
.ob-actions { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-6); }

/* Field  →  Figma: Input (variant: editable|prefilled) */
.field { margin-bottom: var(--sp-4); }
.field label { display: block; font-size: var(--fs-12); font-weight: var(--w-med); color: var(--text-2); margin-bottom: 6px; }
.field input, .field .fake-input {
  width: 100%; padding: 10px 12px; font-size: var(--fs-14);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--card); color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:hover { border-color: var(--muted); }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.field .fake-input { background: var(--surface); display: flex; align-items: center; gap: 8px; }
.field .fake-input .check { color: var(--success); font-size: var(--fs-12); }
.divider { display: flex; align-items: center; gap: var(--sp-3); color: var(--muted); font-size: var(--fs-12); margin: var(--sp-5) 0; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }

/* Sharpen rung  →  Figma: Onboarding/Rung (state: active|default|locked) */
.rung {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-4); display: flex; gap: var(--sp-3); align-items: flex-start;
  background: var(--card); transition: border-color 0.15s;
}
.rung:hover { border-color: var(--border-strong); }
.rung.active { border-color: var(--accent-border); background: var(--accent-bg); }
.rung.locked { opacity: 0.65; }
.rung h3 { font-size: var(--fs-14); }
.rung p { font-size: var(--fs-12); color: var(--text-2); margin-top: 2px; }
.rung .tag { margin-left: auto; white-space: nowrap; flex: none; }

/* ---------- Overlays  →  Figma: Overlay/* ---------- */
.overlay-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(21, 21, 17, 0.45);
  backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center; padding: var(--sp-6);
}
.overlay-backdrop.open { display: flex; animation: fadeIn 0.18s ease-out; }
.modal {
  width: 560px; max-width: 100%;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-8);
  box-shadow: var(--shadow-lg);
  animation: riseIn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.modal h2 { font-size: var(--fs-20); letter-spacing: -0.015em; display: flex; align-items: center; gap: 10px; }
.modal .sub { color: var(--text-2); font-size: var(--fs-14); margin-top: var(--sp-2); }
.modal .modal-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }
.modal .close-x {
  float: right; margin: -12px -12px 0 0;
}
@keyframes fadeIn { from { opacity: 0; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } }

.upsell-list { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); font-size: var(--fs-13); }
.upsell-list div { display: flex; gap: 9px; align-items: baseline; }
.upsell-list .tick { color: var(--success); font-weight: var(--w-semi); font-size: var(--fs-12); }

/* Theme toggle */
.theme-btn { font-size: var(--fs-13); }

/* Scope line (read-only report scope, replaces filter chips)  →  Figma: plain text */
.scope-line {
  max-width: 1264px; margin: 0 auto; width: 100%;
  padding: var(--sp-4) var(--sp-8) 0;
  font-size: var(--fs-13); color: var(--text-2);
}
.scope-line .k { color: var(--muted); }

/* Muted inline lock (subtle gating, no tier text)  →  Figma: text + 🔒 */
.lock-muted {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; padding: 0;
  font-size: var(--fs-13); color: var(--muted); cursor: pointer;
}
.lock-muted:hover { color: var(--text-2); text-decoration: underline; }
.lock-muted .lock-ic { font-size: 10px; opacity: 0.75; }

/* Export & share compact cluster  →  Figma: ExportCluster */
.export-cluster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

/* Action card  →  Figma: Card/Action */
.action-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6); box-shadow: var(--shadow-sm);
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-6);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.action-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.action-card h3 { font-size: var(--fs-16); letter-spacing: -0.01em; }
.action-card .why { font-size: var(--fs-13); color: var(--text-2); max-width: 640px; }
.action-card .impact {
  font-family: var(--font-data); font-feature-settings: "tnum";
  font-size: var(--fs-28); font-weight: var(--w-med); letter-spacing: -0.03em;
  text-align: right; grid-row: span 2; align-self: center;
}
.action-card .impact .per { display: block; font-size: var(--fs-12); color: var(--muted); font-family: var(--font-ui); font-weight: var(--w-reg); }
.action-card .foot { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-2); flex-wrap: wrap; }
.cat-tag {
  font-size: var(--fs-11); font-weight: var(--w-med); color: var(--accent);
  background: var(--accent-bg); border: 1px solid var(--accent-border);
  border-radius: var(--r-full); padding: 3px 10px;
}
.effort { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--text-2); }
.effort .pips { display: inline-flex; gap: 3px; }
.effort .pip { width: 6px; height: 6px; border-radius: 999px; background: var(--border-strong); }
.effort .pip.on { background: var(--accent); }
.action-card .foot .btn { margin-left: auto; }

/* Fiduciary document outline  →  Figma: Fiduciary/OutlineRow */
.doc-outline { display: grid; gap: var(--sp-2); }
.doc-row {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--card);
}
.doc-row .idx {
  width: 26px; height: 26px; border-radius: var(--r-sm); flex: none;
  background: var(--surface-2); color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-data); font-size: var(--fs-12);
}
.doc-row h3 { font-size: var(--fs-14); }
.doc-row p { font-size: var(--fs-12); color: var(--text-2); margin-top: 1px; }
.cadence-strip {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-12); color: var(--text-2);
}
.cadence-strip .py { font-weight: var(--w-med); color: var(--text); }
.cadence-strip .rev { font-family: var(--font-data); }
.cadence-strip .rev.cur { color: var(--accent); font-weight: var(--w-med); }

/* Utility */
.grow { flex: 1; }
.mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }