/* Payer intelligence — the payer profile, the compare panel and the
   methodology page. Ledger grammar: hairlines, tabular figures, ink
   for the mark, green only where a figure means something. Every
   colour is a token so light and dark both hold. */

/* ---------- profile head ---------- */
.pi-head { display: flex; align-items: flex-start; gap: 18px; margin: 0 0 var(--s-5); flex-wrap: wrap; }
.pi-mark {
  width: 56px; height: 56px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--page); font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em;
}
.pi-head h1 { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.01em; margin: 0; line-height: 1.05; }
.pi-where { color: var(--muted); font-size: 13px; margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pi-where .chip { font-weight: 500; }
.pi-head-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pi-score { display: flex; align-items: center; gap: 12px; }
.pi-score .score-ring { width: 64px; height: 64px; }
.pi-score-text { font-size: 12px; color: var(--muted); max-width: 22ch; line-height: 1.4; }
.pi-score-text b { color: var(--ink); font-family: var(--font-display); }
.pi-links { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- kpis ---------- */
.pi-kpis { margin: 0 0 var(--s-5); }
.pi-kpis .k-value { font-size: clamp(1.5rem, 2.2vw, 2.1rem); }

/* ---------- tabs ---------- */
.pi-tabs { position: sticky; top: 0; background: var(--page); z-index: 2; padding-top: 4px; }
.pi-panel { padding: var(--s-5); }
.pi-panel + .pi-panel { margin-top: var(--s-4); }
.pi-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: start; }
.pi-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); align-items: start; }
@media (max-width: 900px) { .pi-grid-2, .pi-grid-3 { grid-template-columns: 1fr; } }

/* ---------- facts list ---------- */
.pi-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: 13px; }
.pi-facts dt { color: var(--muted); }
.pi-facts dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ---------- bars ---------- */
.pi-bars { display: flex; flex-direction: column; gap: 6px; }
.pi-bar { display: grid; grid-template-columns: 9ch 1fr 7ch; gap: 10px; align-items: center; font-size: 12.5px; }
.pi-bar .lbl { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-bar .track { height: 10px; background: var(--wash-deep); position: relative; }
.pi-bar .track i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); }
.pi-bar .track i.pos { background: var(--sage); }
.pi-bar .val { text-align: right; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.pi-bar.wide { grid-template-columns: 22ch 1fr 7ch; }

/* the restatement bar: negotiated vs republished, the visible methodology */
.pi-basis { display: flex; height: 18px; width: 100%; background: var(--wash-deep); margin: 10px 0 8px; }
.pi-basis i { display: block; height: 100%; }
.pi-basis .own { background: var(--sage); }
.pi-basis .shared { background: var(--sage-light); opacity: .7; }
.pi-basis .rep { background: var(--line-strong); }
.pi-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.pi-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; background: var(--line-strong); }
.pi-legend .own::before { background: var(--sage); }
.pi-legend .shared::before { background: var(--sage-light); opacity: .7; }

/* ---------- ratio figures ---------- */
.ratio { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ratio.hi { color: var(--flag); }
.ratio.lo { color: var(--sage); }
.pi-band { font-size: 11px; color: var(--muted); }
.pi-warn { color: var(--flag); font-size: 11px; }

/* ---------- tables ---------- */
.pi-table-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: var(--s-3); }
.pi-table-tools .fs-input { max-width: 320px; }
.pi-table-tools select { padding: 8px 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; }
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable.on::after { content: " ▾"; color: var(--muted); }
table.data th.sortable.on.asc::after { content: " ▴"; }
table.data td .lbl { color: var(--muted); font-size: 12px; display: block; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-note { font-size: 12.5px; color: var(--muted); margin-top: var(--s-3); max-width: 78ch; line-height: 1.5; }
.pi-empty { color: var(--muted); font-size: 13px; padding: var(--s-4) 0; }

/* ---------- code detail drawer (the hospital rows for one code) ---------- */
.pi-code-detail { border-top: 1px solid var(--line); margin-top: var(--s-4); padding-top: var(--s-4); }
.pi-code-detail h3 { font-family: var(--font-display); font-size: 15px; margin: 0 0 4px; }

/* ---------- compare panel ---------- */
.pi-compare-pick { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--s-3); }
.cmp-field { display: flex; flex-direction: column; gap: 5px; }
.cmp-field > span { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cmp-field > span i { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; }
.pi-compare-pick select { min-width: 180px; padding: 8px 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; }
.pi-cmp-grid { display: grid; gap: 1px; background: var(--line); border: 1.5px solid var(--ink); }
.pi-cmp-cell { background: var(--pane-strong); padding: 12px 14px; font-size: 13px; }
.pi-cmp-cell.head { font-family: var(--font-display); font-weight: 700; }
.pi-cmp-cell.row-label { color: var(--muted); font-size: 12px; }
.pi-cmp-cell .k { font-family: var(--font-display); font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pi-cmp-cell .s { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.pi-h2h { margin-top: var(--s-4); }

/* ---------- payer-rates additions ---------- */
.pr-filters { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 12px; margin-top: var(--s-4); }
@media (max-width: 900px) { .pr-filters { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pr-filters { grid-template-columns: 1fr; } } /* a search field needs the width on a phone */
.pr-filters label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; letter-spacing: .04em; text-transform: uppercase; }
.pr-filters select { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; }
.pr-filter-note { font-size: 12px; color: var(--muted); margin-top: 8px; }
/* one hospital (?hospital=), and the way back to all of them */
.pr-hosp-all { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pr-hosp-all:hover { color: var(--accent); }
.pr-payer-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: var(--s-3); }
.pr-payer { background: var(--surface); padding: 12px 14px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.pr-payer a { color: var(--ink); font-weight: 600; text-decoration: none; }
.pr-payer a:hover { text-decoration: underline; }
.pr-payer .m { color: var(--muted); font-size: 12px; }
.pr-payer .grade { font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--line-strong); padding: 1px 6px; align-self: flex-start; }

/* ---------- methodology ---------- */
.meth { max-width: 84ch; }
.meth h2 { font-family: var(--font-title); font-weight: 400; font-size: 1.6rem; margin: var(--s-6) 0 var(--s-3); scroll-margin-top: 20px; }
.meth h3 { font-family: var(--font-display); font-size: 15px; margin: var(--s-4) 0 8px; scroll-margin-top: 20px; }
.meth p, .meth li { font-size: 14px; line-height: 1.65; color: var(--text); }
.meth p b, .meth li b { color: var(--ink); }
.meth code { font-family: var(--font-mono); font-size: 12.5px; background: var(--wash); padding: 1px 5px; }
.meth .callout { border-left: 3px solid var(--sage); padding: 10px 16px; background: var(--wash); margin: var(--s-4) 0; }
.meth-toc { display: flex; gap: 8px 16px; flex-wrap: wrap; font-size: 13px; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); margin-bottom: var(--s-3); }
.meth-toc a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.meth-toc a:hover { border-bottom-color: var(--ink); }
.glossary { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; font-size: 13.5px; }
.glossary dt { color: var(--ink); font-weight: 600; font-family: var(--font-display); scroll-margin-top: 20px; }
.glossary dd { margin: 0; color: var(--text); line-height: 1.55; }
.glossary-search { margin: var(--s-3) 0; }
@media (max-width: 700px) { .glossary, .pi-facts { grid-template-columns: 1fr; } .glossary dd { margin-bottom: 8px; } }