/* ═══════════════════════════════════════════════════════════════════════════
   Page stylesheet — /providers (the register) and /providers/:identity (detail)
   Consumes the Institution tokens in /style.css. Defines no tokens, restates no
   shared component: page-specific layout only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── "Seraphim vs the field" — the compact comparison module (BRIEF §2.9) ──── */
.field { margin: 0 0 var(--s6); }
.field .sec-head { margin-top: var(--s6); }
.field-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 0; overflow: hidden;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-2);
}
.fx {
  padding: var(--s5) var(--s5) var(--s4);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.fx-k {
  margin: 0 0 var(--s3);
  font-family: var(--font-text); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.fx-k span {
  display: block; margin-top: .3rem;
  font-size: 0.78rem; font-weight: 400; letter-spacing: .01em;
  text-transform: none; color: var(--ink-4);
}
.fx-fig {
  margin: 0 0 var(--s4);
  display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap;
  font-family: var(--font-display); font-weight: 600; line-height: .95;
  font-size: clamp(2.1rem, 3.6vw, 2.75rem); letter-spacing: -0.03em;
  color: var(--ink); font-variant-numeric: tabular-nums lining-nums;
}
.fx-fig .fx-n { display: inline-flex; align-items: baseline; gap: .05em; }
.fx-fig .of {
  font-family: var(--font-text); font-size: 0.82rem; font-weight: 500;
  letter-spacing: .01em; color: var(--ink-3);
}
/* the rank scale carries three statements; it never lets them collide */
.fx .rank-scale {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: baseline; gap: .2rem var(--s3);
}
.fx .rank-scale > :nth-child(1) { grid-column: 1; grid-row: 1; }
.fx .rank-scale .rank-pct { grid-column: 2; grid-row: 1; text-align: center; }
.fx .rank-scale > :nth-child(3) { grid-column: 3; grid-row: 1; text-align: right; }

/* our figure against the two reference points a delegator actually compares to.
   The bar is a magnitude rule on a shared domain; the figure is always printed. */
.fx-cmp { margin: var(--s5) 0 0; display: grid; gap: 1px; }
.fx-cmp > div {
  display: grid; grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr);
  align-items: center; gap: var(--s3);
  padding: .42rem .5rem .42rem 0;
  border-top: 1px solid var(--rule);
}
.fx-cmp dt {
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.fx-cmp dd {
  margin: 0; display: flex; align-items: center; gap: var(--s3);
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
  color: var(--ink-2); font-variant-numeric: tabular-nums lining-nums;
}
.fx-bar {
  flex: 1 1 auto; min-width: 40px; height: 6px;
  background: var(--paper-sunk); border-radius: 1px; overflow: hidden;
}
.fx-bar i { display: block; height: 100%; background: var(--accent-bright); }
.fx-v {
  flex: none; min-width: 4.8rem; text-align: right;
  font-weight: 600; color: inherit; letter-spacing: -0.01em;
}
/* our own line is marked exactly like our own table row: tint, flag, never re-ordered */
.fx-cmp .is-ours {
  background: var(--accent-tint);
  box-shadow: inset 3px 0 0 var(--accent);
  padding-left: var(--s3);
  border-top-color: var(--accent-hair);
}
.fx-cmp .is-ours dt { color: var(--accent-deep); font-weight: 700; }
.fx-cmp .is-ours dd { color: var(--ink); }
.fx-cmp .is-ours .fx-bar i { background: var(--accent-deep); }
html.dark .fx-cmp .is-ours dt { color: var(--accent); }

.fx-scale {
  margin: var(--s3) 0 0; font-size: 0.72rem; color: var(--ink-4);
}
.field-note {
  margin: var(--s4) 0 0; max-width: 74ch;
  font-size: 0.9rem; color: var(--ink-3);
}
.field-note a { white-space: nowrap; }

/* the closing legend entry runs the full width, so the plate ends on a flush rule
   instead of a ragged row of empty cells whatever the entry count */
.legend dl > div:last-child { grid-column: 1 / -1; }

/* ── the register: the whole field must be evidently reachable ─────────────── */
/* the rank device on provider detail reuses the register's own field-axis plate;
   with a single axis in the grid its cell hairlines have nothing to divide */
.prov-rank { margin: 0 0 var(--s6); }
.prov-rank .fx { border-right: none; border-bottom: none; }
.prov-rank .fx-scale { max-width: 70ch; }

/* the register frame is the shared `.framed` pane + `.frame-*` status strip
   (style.css); only our own row's tick on the rail is register-specific */
.reg-us {
  position: absolute; top: -3px; bottom: -3px; width: 3px;
  background: var(--accent-deep); transform: translateX(-1.5px);
}
html.dark .reg-us { background: var(--accent); }

/* an anomaly pill stays a flag even where cell pills are demoted to metadata */
td .pill.flag-bad { color: var(--neg); font-weight: 700; }

/* the field median, drawn once into every Primary magnitude rule: the same
   reference line on all 100 bars turns a column of bars into a comparison.
   The value is printed in the legend and in the module above — never colour alone. */
.has-median td.meter-cell::after {
  content: ""; position: absolute;
  left: calc(.8rem + (100% - 1.6rem) * var(--band-median));
  bottom: calc(.42rem - 2px); height: 7px; width: 1px;
  background: var(--ink-3);
}
.has-median tr.is-us td.meter-cell::after { background: var(--accent-deep); }

/* ── provider detail ──────────────────────────────────────────────────────── */
.prov-head h1 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.prov-logo { width: 30px; height: 30px; border-radius: 3px; box-shadow: 0 0 0 1px var(--rule); }
.prov-flags {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin: 0 0 var(--s3);
}
.prov-flags .pill { margin-left: 0; }
.prov-site {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.prov-site:hover { color: var(--accent-deep); }

/* a card carries its figure, its label, and the one line that says what the
   figure means — including when the figure is the unflattering one. No rule between
   the label and its own caption: the three pages that run this pattern set the
   caption off with space, and a hairline inside a cell reads as a cell division. */
.card-note {
  margin-top: var(--s2);
  font-size: 0.76rem; line-height: 1.45; color: var(--ink-4);
}
.card-note.ok { color: var(--pos); }
.card-note.warn { color: var(--caution); }
.card-note.bad { color: var(--neg); }
.card .v.bad { color: var(--neg); }
/* six figures read as two ruled rows of three, never as five plus an orphan */
.prov-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prov-cards .card { display: flex; flex-direction: column; }
.prov-cards .card .card-note { margin-top: auto; }
.reward-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.reward-cards .card .v .unit {
  margin-left: .35rem; font-family: var(--font-text);
  font-size: 0.72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4);
}
@media (max-width: 900px) {
  .prov-cards, .reward-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the six standing figures each carry a note, so they stack one-up on a phone;
   the four reward figures are short and stay two-up (see the 760px block) */
@media (max-width: 440px) {
  .prov-cards { grid-template-columns: minmax(0, 1fr); }
}

/* trends — a sparkline is unreadable without the scale it was drawn on */
.trend-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--s4); margin: var(--s5) 0;
}
.trend {
  margin: 0; padding: var(--s4) var(--s5) var(--s3);
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius);
  display: flex; flex-direction: column;
}
.trend-k {
  font-family: var(--font-text); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.trend-k span {
  display: block; margin-top: .28rem;
  font-size: 0.76rem; font-weight: 400; letter-spacing: .01em;
  text-transform: none; color: var(--ink-4);
}
.spark { color: var(--accent); margin: var(--s3) 0 var(--s2); }
.spark svg { width: 100%; height: auto; }
/* "no change" is a rule at mid-height, not a line lying on the floor of the box */
.spark-flat { display: flex; align-items: center; height: 46px; }
.spark-flat span {
  display: block; width: 100%; height: 0;
  border-top: 1.8px solid currentColor; border-radius: 1px;
}
.trend-scale {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s2); margin: 0; padding-top: var(--s2);
  border-top: 1px solid var(--rule);
}
.trend-scale dt {
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4);
}
.trend-scale dd {
  margin: .1rem 0 0; font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.01em;
}
.trend-scale > div:nth-child(2) { text-align: center; }
.trend-scale > div:nth-child(3) { text-align: right; }
.trend-scale .is-last dd { color: var(--ink); }
.trend-scale .is-last dt { color: var(--accent-deep); }
html.dark .trend-scale .is-last dt { color: var(--accent); }
.trend figcaption {
  margin-top: var(--s3); padding-top: var(--s2);
  border-top: 1px solid var(--rule);
  font-size: 0.72rem; line-height: 1.5; color: var(--ink-4);
}
.trend figcaption b {
  display: inline-block; margin-right: .45rem;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4);
}

.elig-wrap { max-height: none; max-width: 100%; }
.elig-wrap th:first-child, .elig-wrap td:first-child { text-align: left; }

/* long hex strings get room to breathe instead of fighting a table cell edge */
.addr-list { margin: var(--s5) 0 0; display: grid; gap: 1px; }
.addr-list > div {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--s4); align-items: baseline;
  padding: var(--s3) 0; border-top: 1px solid var(--rule);
}
.addr-list > div:last-child { border-bottom: 1px solid var(--rule); }
.addr-list dt {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
.addr-list dd { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.addr-list code { font-size: 0.78rem; word-break: break-all; }

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .fx { padding: var(--s4); }
  .fx .rank-scale { grid-template-columns: auto 1fr; }
  .fx .rank-scale > :nth-child(3) { grid-column: 2; }
  .fx .rank-scale .rank-pct { grid-column: 1 / -1; grid-row: 2; text-align: left; }
  .fx-cmp > div { grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr); gap: var(--s2); }
  .fx-cmp dd { font-size: .96rem; }
  .reward-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .addr-list > div { grid-template-columns: 1fr; gap: var(--s2); }
}