/* /resources/mfn-drug-pricing: the figures of the MFN drug pricing guide. Shared guide parts are in guide.css. */

:root,
[data-theme="light"] {
  --mfn-ring-muted: rgba(104, 94, 124, 0.5);   /* a blocked or not-final step */
  --mfn-line-muted: rgba(21, 14, 32, 0.1);     /* the timeline before 2025 */
  --mfn-rule: rgba(21, 14, 32, 0.5);           /* the ink rule above a total */
}
[data-theme="dark"] {
  --mfn-ring-muted: rgba(141, 130, 160, 0.6);
  --mfn-line-muted: rgba(255, 255, 255, 0.12);
  --mfn-rule: rgba(244, 240, 250, 0.45);
}

.mfn-label--accent { color: var(--accent); }

/* Two sides of one idea (01: trade and drugs; 04: GLOBE and GUARD). */
.mfn-pair .fig-label { letter-spacing: 0.12em; }
.mfn-pair .fig-split > * { gap: 10px; }
.mfn-pair__text { font-size: 16px; line-height: 1.6; color: var(--text-soft); }
@media (min-width: 560px) {
  .mfn-pair { padding: 28px 32px; }
}
.mfn-models .fig-split > * { gap: 12px; }
.mfn-models .fig-label { letter-spacing: 0.14em; }
.mfn-model__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.mfn-model__name { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; color: var(--text-1); }
.mfn-model__full { font-size: 13px; line-height: 1.45; color: var(--text-4); }
.mfn-model__text { font-size: 15px; line-height: 1.55; color: var(--text-soft); }
.mfn-model__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--text-2); }

/* The programs table: the one row that changes payment carries the accent. */
.mfn-programs__key th { font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.mfn-programs__key .em { font-weight: 600; }

/* Timeline (a sideways row) ----------------------------------------------- */

.mfn-timeline { gap: 18px; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--text-2); }
.tl-legend > span { display: flex; align-items: center; gap: 8px; }
.tl-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent); background: var(--fig-node); }
.tl-dot--force { width: 10px; height: 10px; margin: 0 1px; border: 0; background: var(--fig-ink); }
.tl-dot--blocked { border-color: var(--mfn-ring-muted); }
.tl-dot--today { border: 0; background: var(--accent); box-shadow: 0 0 0 3px var(--ground), 0 0 0 4.5px var(--fig-line); }

.tl__item { flex: 0 0 212px; display: flex; flex-direction: column; gap: 10px; padding-right: 24px; }
.tl__mark { display: flex; align-items: center; height: 20px; }
.tl__line { flex: 1; height: 1.5px; margin: 0 -16px 0 8px; background: var(--fig-line-soft); }
.tl__item--early .tl__line { background: var(--mfn-line-muted); }
.tl__item:last-child .tl__line { display: none; }
.tl__date { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--text-4); }
.tl__text { font-size: 14.5px; line-height: 1.55; color: var(--text-soft); }
.tl__text strong { font-weight: 600; }
.tl__item--blocked .tl__text { color: var(--text-4); }
.tl__item--today .tl__date { font-weight: 500; color: var(--accent); }
.tl__today {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.tl__dash { width: 14px; height: 2px; border-radius: 1px; background: var(--accent); }

/* 02: the 2020 model's numbers and its note. */
.mfn-nums { padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mfn-nums .fig-num { font-size: 44px; white-space: nowrap; }
.mfn-note { display: flex; flex-direction: column; gap: 6px; }

/* Cards: what the deals mean (03) and what to watch (06). */
.mfn-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.mfn-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.mfn-card--key { border-color: var(--fig-line); }
.mfn-card .fig__eyebrow { font-size: 10.5px; letter-spacing: 0.12em; }
.mfn-card__title { font-size: 16.5px; font-weight: 600; line-height: 1.35; color: var(--text-1); }
.mfn-card .fig__eyebrow + .mfn-card__title { font-size: 17px; }
.mfn-card__text { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }

/* 04: GLOBE, row by row, then the rule's own words. */
.mfn-dl { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mfn-dl > div { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.mfn-dl dt { flex: 0 0 120px; font-size: 15px; font-weight: 600; line-height: 1.6; color: var(--text-1); }
.mfn-dl dd { flex: 1 1 380px; margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.mfn-quote { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; padding: 6px 0 6px 26px; border-left: 3px solid var(--accent-fill); }
.mfn-quote p { font-family: var(--font-serif); font-size: clamp(21px, 18px + 0.7vw, 25px); line-height: 1.4; color: var(--text-quote); text-wrap: pretty; }
.mfn-quote cite { font-style: normal; font-size: 14px; color: var(--text-4); }

/* 05: the two payment rules side by side. */
.mfn-rate__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.mfn-rate__side { display: flex; flex-direction: column; gap: 4px; }
.mfn-rate__label { font-size: 13px; color: var(--text-4); }
.mfn-rate__value { font-family: var(--font-serif); font-size: 40px; line-height: 1; color: var(--text-1); white-space: nowrap; }
.mfn-rate__value--accent { color: var(--accent); }
.mfn-rate__arrow { flex: none; width: 28px; height: 28px; fill: none; stroke: var(--fig-line); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mfn-rate .fig__foot { padding-top: 16px; }
@media (min-width: 560px) {
  .mfn-rate { padding: 28px 32px; gap: 24px; }
}

/* 05: who pays what for one dose (flat stacked bars). */
.mfn-pay { gap: 24px; }
.mfn-pay__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.mfn-pay__aside { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-4); }
.mfn-pay__legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 4px; font-size: 13px; color: var(--text-2); }
.mfn-pay__legend > span { display: flex; align-items: center; gap: 8px; }
.mfn-key { width: 10px; height: 10px; border-radius: 2px; }
.mfn-key--medicare { background: var(--accent); }
.mfn-key--patient { background: var(--fig-fill); }
.mfn-pay__row { display: flex; flex-direction: column; gap: 12px; padding: 16px 0 18px; border-top: 1px solid var(--line); }
.mfn-pay__row:last-child { padding-bottom: 6px; }
.mfn-pay__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.mfn-pay__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.mfn-pay__case { font-size: 15.5px; font-weight: 600; line-height: 22px; color: var(--text-1); }
.mfn-pay__note { font-size: 13.5px; line-height: 1.45; color: var(--text-4); }
.mfn-pay__total { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--text-1); }
.mfn-pay__bar { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.mfn-pay__row--lower .mfn-pay__bar { width: 90%; }
.mfn-pay__segs { display: flex; gap: 2px; height: 10px; }
.mfn-pay__seg--medicare { border-radius: 2px 0 0 2px; background: var(--accent); }
.mfn-pay__seg--patient { border-radius: 0 2px 2px 0; background: var(--fig-fill); }
.mfn-pay__row--today .mfn-pay__seg--medicare { flex: 848; }
.mfn-pay__row--today .mfn-pay__seg--patient { flex: 212; }
.mfn-pay__row--globe .mfn-pay__seg--medicare { flex: 954; }
.mfn-pay__row--globe .mfn-pay__seg--patient { flex: 106; }
.mfn-pay__row--lower .mfn-pay__seg--medicare { flex: 763.2; }
.mfn-pay__row--lower .mfn-pay__seg--patient { flex: 190.8; }
.mfn-pay__vals { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.mfn-pay__val--patient { color: var(--text-4); }

/* Tables ------------------------------------------------------------------- */

.mfn-deals th:first-child { width: 18%; }
.mfn-deals th:last-child { width: 34%; }
.mfn-deals td.mono { font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--text-1); white-space: nowrap; }

.mfn-dose thead th {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-1);
}
.mfn-dose tbody { font-variant-numeric: tabular-nums; }
.mfn-dose tbody tr:nth-last-child(2) > * { border-bottom-color: var(--mfn-rule); }
.mfn-dose__total > * { font-weight: 600; color: var(--text-1); }
.mfn-dose__total th { font-weight: 600; }

.mfn-bills th:first-child { width: 34%; }
.mfn-bills th:nth-child(2) { width: 26%; }
.mfn-bills__also { font-weight: 400; color: var(--text-4); }

/* 06: the steps, numbered rows between hairlines. */
.mfn-steps { margin-top: 4px; border-top: 1px solid var(--line); }
.mfn-steps li { display: flex; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; line-height: 1.6; color: var(--text-2); }
.mfn-steps__n { flex: none; width: 22px; font-family: var(--font-mono); font-size: 12px; line-height: 26px; letter-spacing: 0.06em; color: var(--accent); }
.mfn-steps strong { font-weight: 600; color: var(--text-1); }
.mfn-steps a {
  color: var(--text-1);
  text-decoration: underline;
  text-decoration-color: var(--accent-fill);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.mfn-steps a:hover { color: var(--accent-2); }

@media (max-width: 767px) {
  .mfn-steps li { font-size: 15.5px; gap: 14px; }
  .mfn-dl dd { font-size: 15.5px; }
}
@media (max-width: 559px) {
  .mfn-nums .fig-num { font-size: 40px; }
  .mfn-rate__value { font-size: 34px; }
  .mfn-model__name { font-size: 22px; }
}