/* The long-form guides under /resources (MFN drug pricing, biologic denials, ...): the parts
   every guide shares on top of post.css. A guide's own figures go in css/<slug>.css.

   Figures follow one rule: ONE flat panel (radius 20, a hairline border, no shadow, glow or
   gradient), nothing inside it with its own fill or box, structure from whitespace and
   hairlines, diagrams drawn with thin accent lines and ring nodes, numbers in serif or mono. */

:root,
[data-theme="light"] {
  --fig-line: rgba(107, 66, 156, 0.4);      /* drawn lines, spines, branches */
  --fig-line-soft: rgba(107, 66, 156, 0.22);
  --fig-fill: #CDB8F5;                      /* the light data series */
  --fig-ink: #150E20;                       /* a hub node, the ink data series */
  --fig-node: #FFFFFF;                      /* inside a ring node */
}
[data-theme="dark"] {
  --fig-line: rgba(185, 154, 240, 0.45);
  --fig-line-soft: rgba(185, 154, 240, 0.24);
  --fig-fill: rgba(185, 154, 240, 0.38);
  --fig-ink: #F4F0FA;
  --fig-node: #120B1C;
}

/* Cover: a light render, shown as drawn in light; dark lays the photo shade over it so it
   doesn't glare. */
.post-cover--render { background: var(--surface-2); box-shadow: var(--glass-shadow); }
.post-cover--render img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; }
[data-theme="dark"] .post-cover--render::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(74, 44, 128, 0.16), rgba(24, 12, 44, 0.4));
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* The rail: contents, then a small Contact us card. Below 1200 the contents sit above the
   article as in post.css and the card steps aside (the article closes with its own). */
.post-rail { display: contents; }
.rail-card { display: none; }
@media (min-width: 1200px) {
  .post-rail {
    position: sticky;
    top: calc(var(--nav-h) + 40px);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .post-rail .post-toc { position: static; }
  .rail-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 22px;
    border-radius: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--glass-shadow);
  }
}
.rail-card__title { font-size: 16px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--text-1); }
.rail-card__text { font-size: 14px; line-height: 1.5; color: var(--text-2); }
.rail-card .btn { margin-top: 2px; }

/* Key takeaways as a flat panel (no glass shadow, a plain check), and bold lead-ins. */
.prose > .takeaways {
  margin-top: 10px;
  padding: 32px 32px 28px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: none;
}
.prose > .takeaways li { color: var(--text-soft); }
.prose > .takeaways li .icon { width: 16px; height: 16px; margin-top: 5px; padding: 0; border-radius: 0; background: none; color: var(--accent); }
@media (max-width: 767px) {
  .prose > .takeaways { padding: 24px 20px 22px; border-radius: 18px; }
}
.prose > p strong { font-weight: 600; color: var(--text-1); }

/* Prose extras: a sub-heading, plain lists, an in-text note. */
.prose > h3 {
  margin-top: 10px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-1);
}
.prose > h3 + p { margin-top: -8px; }
.prose-list { max-width: 600px; display: flex; flex-direction: column; gap: 10px; padding-left: 0; list-style: none; }
.prose-list > li {
  position: relative;
  padding-left: 22px;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--text-2);
}
.prose-list > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
}
ol.prose-list { counter-reset: prose-list; }
ol.prose-list > li { counter-increment: prose-list; padding-left: 34px; }
ol.prose-list > li::before {
  content: counter(prose-list, decimal-leading-zero);
  top: 0.34em;
  width: auto;
  height: auto;
  border: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
}
.prose-list strong { font-weight: 500; color: var(--text-1); }
@media (max-width: 767px) {
  .prose-list > li { font-size: 16.5px; }
}

/* Figures ------------------------------------------------------------------- */

.fig {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  margin: 12px 0;
  padding: 32px 32px 28px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
}
/* A figure with no panel (a row that scrolls sideways): caption and content only. */
.fig--open { padding: 0; border: 0; border-radius: 0; background: none; }
.fig__cap { display: flex; flex-direction: column; gap: 10px; }
.fig__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.fig__title { font-size: 21px; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; color: var(--text-1); text-wrap: balance; }
.fig__sub { font-size: 14.5px; line-height: 1.55; color: var(--text-3); }
.fig__foot {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-4);
}
.fig__foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* A note: a 2 px accent rule, never a box. */
.fig-note {
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-soft);
}
.fig-note strong { font-weight: 500; color: var(--text-1); }
/* Small mono labels stand in for chips. */
.fig-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-4); }
.fig-mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Two sides with a hairline between; one column on a phone. */
.fig-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fig-split > * { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fig-split > :first-child { padding-right: 28px; }
.fig-split > * + * { padding-left: 28px; border-left: 1px solid var(--line); }

/* Big numbers in a row, hairlines between; stacked on a phone. */
.fig-nums { display: grid; grid-template-columns: repeat(var(--fig-nums, 3), minmax(0, 1fr)); }
.fig-nums > * { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 4px 22px; }
.fig-nums > :first-child { padding-left: 0; }
.fig-nums > :last-child { padding-right: 0; }
.fig-nums > * + * { border-left: 1px solid var(--line); }
.fig-num {
  font-family: var(--font-serif);
  font-size: clamp(40px, 32px + 1.6vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text-1);
}
.fig-num--accent { color: var(--accent); }
.fig-num__label { font-size: 14px; line-height: 1.5; color: var(--text-2); }

@media (max-width: 559px) {
  .fig { padding: 24px 20px 22px; border-radius: 18px; gap: 18px; }
  .fig--open { padding: 0; }
  .fig__title { font-size: 19px; }
  .fig-split,
  .fig-nums { grid-template-columns: 1fr; }
  .fig-split > :first-child { padding-right: 0; padding-bottom: 24px; }
  .fig-split > * + * { padding-left: 0; padding-top: 24px; border-left: 0; border-top: 1px solid var(--line); }
  .fig-nums > * { padding: 16px 0; }
  .fig-nums > :first-child { padding-top: 0; }
  .fig-nums > :last-child { padding-bottom: 0; }
  .fig-nums > * + * { border-left: 0; border-top: 1px solid var(--line); }
}

/* Tables: one flat panel, hairline rows, mono numbers; scrolls sideways inside on a phone. */
.guide-table {
  overflow-x: auto;
  margin: 12px 0;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  scrollbar-width: thin;
  scrollbar-color: var(--fig-line) transparent;
}
.guide-table table {
  width: 100%;
  min-width: var(--table-min, 600px);
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
  text-align: left;
}
.guide-table caption {
  caption-side: top;
  padding: 18px 18px 6px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.guide-table th,
.guide-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.guide-table th:first-child,
.guide-table td:first-child { padding-left: 18px; }
.guide-table th:last-child,
.guide-table td:last-child { padding-right: 18px; }
.guide-table tbody tr:last-child > * { border-bottom: 0; }
.guide-table thead th {
  padding-top: 12px;
  padding-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  vertical-align: bottom;
}
.guide-table tbody th { font-weight: 500; color: var(--text-1); }
.guide-table .num,
.guide-table .mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.guide-table .num { text-align: right; white-space: nowrap; }
.guide-table .em { color: var(--accent); }
.guide-table + .table-note { margin-top: -6px; font-size: 13px; line-height: 1.55; color: var(--text-4); }

/* A row that scrolls sideways and runs out to the right edge of the window. guide.js sets
   --hrow-bleed (the gap between the column and the window edge) and wires the arrows. */
.hrow { --hrow-bleed: 0px; display: flex; flex-direction: column; gap: 12px; margin-right: calc(-1 * var(--hrow-bleed)); }
.hrow__nav { display: flex; justify-content: flex-end; gap: 8px; padding-right: var(--hrow-bleed); }
.hrow__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s;
}
.hrow__btn--next { border-color: var(--text-1); background: var(--text-1); color: var(--ground); }
.hrow__btn .icon { width: 16px; height: 16px; }
.hrow__btn--prev .icon { transform: scaleX(-1); }
.hrow__btn:disabled { opacity: 0.35; cursor: default; }
.hrow__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hrow__track {
  display: flex;
  margin: 0;
  padding: 6px var(--hrow-bleed) 18px 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--fig-line) transparent;
}
.hrow__track > * { flex: none; scroll-snap-align: start; }

/* Where Medico fits: one flat panel with the network's numbers. */
.fits {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: clamp(32px, 20px + 2.4vw, 44px);
  padding: 32px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  scroll-margin-top: calc(var(--nav-h) + 32px);
}
.fits__head { display: flex; align-items: center; gap: 14px; }
.fits__head .byline__mark { width: 40px; height: 40px; border-radius: 30%; }
.fits h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(24px, 21px + 0.6vw, 28px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--text-1);
}
.fits > p { font-size: 17.5px; line-height: 1.7; color: var(--text-2); text-wrap: pretty; }
.fits__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 16px 0; margin: 6px 0 4px; }
.fits__stat { padding: 2px 16px 2px 20px; border-left: 1px solid var(--line); }
.fits__stat:first-child { padding-left: 0; border-left: 0; }
.fits .fits__value { font-family: var(--font-serif); font-size: 44px; line-height: 1; color: var(--accent); }
.fits .fits__label { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.fits .actions { margin-top: 4px; align-items: center; gap: 14px 24px; }
@media (max-width: 559px) {
  .fits { padding: 24px 20px; border-radius: 18px; }
  .fits > p { font-size: 16.5px; }
  .fits__stat { padding-left: 16px; }
}

/* Questions and answers: one column of hairline rows in the article. */
.qa { display: flex; flex-direction: column; border-top: 1px solid var(--border-strong); }
.qa details { border-bottom: 1px solid var(--border-strong); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  list-style: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--text-1);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary .icon { flex: none; width: 18px; height: 18px; color: var(--accent); transition: transform 0.3s var(--ease-out); }
.qa details[open] summary .icon { transform: rotate(45deg); }
.qa summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.qa p { max-width: 600px; margin: 0 0 22px; font-size: 16.5px; line-height: 1.7; color: var(--text-2); }
@media (max-width: 767px) {
  .qa summary { font-size: 16.5px; padding: 18px 0; }
  .qa p { font-size: 15.5px; }
}

/* Sources under the questions. */
.sources { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.sources > .mono { font-size: 11px; letter-spacing: 0.14em; }
.sources ol { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sources li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.55; color: var(--text-3); }
.sources li > span:first-child { flex: none; width: 22px; padding-top: 1px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-4); }
.sources a {
  color: var(--text-1);
  text-decoration: underline;
  text-decoration-color: var(--accent-fill);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.sources a:hover { color: var(--accent-2); }

/* The close: a dark band with the text left and Contact us right. */
.cta-band--split { text-align: left; }
.cta-band--split .cta-band__inner { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 48px; }
.cta-band__text { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 680px; }
.cta-band--split .lead { margin-inline: 0; }
.cta-band__phone { font-size: 15px; color: var(--text-soft); }
.cta-band__phone:hover { color: var(--text-1); }