/* /resources/why-biologic-claims-get-denied: the figures of the why biologic claims get denied guide. Shared guide parts are in guide.css. */

:root,
[data-theme="light"] {
  --dn-spine: rgba(107, 66, 156, 0.3);       /* the flow's spine and branch curves */
  --dn-hatch: rgba(21, 14, 32, 0.26);        /* discarded drug, inside a vial */
  --dn-hatch-key: rgba(21, 14, 32, 0.4);
  --dn-vial-edge: rgba(21, 14, 32, 0.24);
}
[data-theme="dark"] {
  --dn-spine: rgba(185, 154, 240, 0.3);
  --dn-hatch: rgba(244, 240, 250, 0.3);
  --dn-hatch-key: rgba(244, 240, 250, 0.45);
  --dn-vial-edge: rgba(255, 255, 255, 0.26);
}

/* Dot-separated items: a small drawn dot between them (no mid-dot character). */
.dn-dots > span:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 7px;
  border-radius: 50%;
  background: var(--fig-line);
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.eyebrow.dn-dots { gap: 0; }
.eyebrow.dn-dots::before { margin-right: 12px; }
.eyebrow.dn-dots > span:not(:last-child)::after { background: currentColor; opacity: 0.6; }

/* Bar widths (the data). */
.dn-w-1000 { width: 100%; }
.dn-w-670 { width: 67%; }
.dn-w-568 { width: 56.8%; }
.dn-w-549 { width: 54.9%; }
.dn-w-499 { width: 49.9%; }
.dn-w-470 { width: 47%; }
.dn-w-430 { width: 43%; }
.dn-w-383 { width: 38.3%; }
.dn-w-199 { width: 19.9%; }
.dn-w-180 { width: 18%; }
.dn-w-151 { width: 15.1%; }
.dn-w-140 { width: 14%; }
.dn-w-120 { width: 12%; }
.dn-w-62 { width: 6.2%; }

/* 01 Two gates: a drawn spine with ring nodes, an ink hub and the accent outcome. */
.dn-flow { margin: 0; padding: 0; list-style: none; }
.dn-row { position: relative; }
.dn-row::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--dn-spine);
}
.dn-row::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 19px;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--fig-node);
}
.dn-row__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 56px;
  padding: 14px 0 16px;
  border-top: 1px solid var(--line);
}
.dn-row--first::before { top: 17px; }
.dn-row--first::after { top: 11px; }
.dn-row--first .dn-row__body { padding-top: 6px; border-top: 0; }
.dn-row--hub::after { left: 3px; top: 18px; width: 14px; height: 14px; border: 0; background: var(--fig-ink); box-shadow: 0 0 0 4px var(--surface); }
.dn-row--end::before { bottom: auto; height: 13px; }
.dn-row--end::after { content: none; }
.dn-row--end .dn-row__body { padding-bottom: 4px; }
.dn-end__arrow { position: absolute; left: 4px; top: 7px; fill: none; stroke: var(--fig-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dn-end__mark { position: absolute; left: 1px; top: 16px; }
.dn-end__mark circle { fill: var(--accent); }
.dn-end__mark path { fill: none; stroke: var(--surface); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.dn-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15.5px; line-height: 22px; color: var(--text-1); }
.dn-name strong { font-weight: 600; }
.dn-name--paid strong { color: var(--accent); }
.dn-gate { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--accent); }
.dn-sub { font-size: 13.5px; line-height: 1.45; color: var(--text-4); }
.dn-checks { display: flex; flex-wrap: wrap; font-size: 14.5px; line-height: 1.6; color: var(--text-soft); }
.dn-checks > span { white-space: nowrap; }
.dn-branch {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 20px;
  color: var(--text-1);
}
.dn-branch::before {
  content: "";
  position: absolute;
  left: -47px;
  top: -24px;
  box-sizing: border-box;
  width: 36px;
  height: 34px;
  border-left: 2px solid var(--dn-spine);
  border-bottom: 2px solid var(--dn-spine);
  border-bottom-left-radius: 12px;
}
.dn-branch__arrow { position: absolute; left: -13px; top: 5px; fill: none; stroke: var(--fig-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dn-branch__q { font-family: var(--font-mono); font-size: 12px; color: var(--text-4); }
.dn-branch__a { font-weight: 500; }

/* 01 Why 48 requests were denied: flat bars, one in accent; then the days to approval. */
.dn-reasons { gap: 24px; }
.dn-bars { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.dn-bar { display: flex; flex-direction: column; gap: 8px; }
.dn-bar__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14.5px; line-height: 1.4; color: var(--text-soft); }
.dn-bar__val { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--text-1); font-variant-numeric: tabular-nums; }
.dn-bar__track { display: block; }
.dn-bar__track i,
.dn-days__track i,
.dn-cellbar__track i { display: block; height: 8px; border-radius: 2px; background: var(--fig-fill); }
.dn-bar--lead .dn-bar__name { font-weight: 500; color: var(--text-1); }
.dn-bar--lead .dn-bar__val { color: var(--accent); }
.dn-bar--lead .dn-bar__track i { background: var(--accent); }

.dn-days { display: flex; flex-direction: column; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); }
.dn-days__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.dn-days__title { font-size: 15px; font-weight: 600; color: var(--text-1); }
.dn-days__key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-2); }
.dn-days__key > span { display: inline-flex; align-items: center; gap: 7px; }
.dn-key { flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--fig-fill); }
.dn-key--with { background: var(--accent); }
.dn-days__site { display: flex; align-items: center; gap: 16px; }
.dn-days__name { flex: none; width: 92px; font-size: 14px; color: var(--text-soft); }
.dn-days__bars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dn-days__row { display: flex; align-items: center; gap: 12px; }
.dn-days__track { flex: 1; min-width: 0; }
.dn-days__row--with .dn-days__track i { background: var(--accent); }
.dn-days__val { flex: none; width: 36px; text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.dn-days__row--with .dn-days__val { color: var(--text-1); }
@media (max-width: 559px) {
  .dn-days__name { width: 76px; font-size: 13.5px; }
  .dn-days__site { gap: 12px; }
}

/* Tables */
.dn-table--reasons { --table-min: 620px; }
.dn-table--reasons thead th:nth-child(1) { width: 34%; }
.dn-table--reasons thead th:nth-child(2) { width: 22%; }
.dn-where { color: var(--text-soft); }
.dn-where .dn-dots { display: inline-flex; flex-wrap: wrap; }
.dn-where .dn-dots > span { white-space: nowrap; }
.dn-where .dn-dots > span:not(:last-child)::after { margin-right: 7px; margin-left: 7px; }
.dn-table--clocks { --table-min: 640px; }
.dn-table--clocks table { font-size: 13.5px; }
.dn-table--clocks thead th:nth-child(1) { width: 18%; }
.dn-table--clocks tbody th { font-weight: 600; }
.dn-table--clocks strong { font-weight: 600; color: var(--text-1); }
.dn-table--metrics { --table-min: 520px; }
.dn-table--metrics thead th:nth-child(2),
.dn-table--metrics thead th:nth-child(3) { width: 32%; }
.dn-table--metrics caption .dn-dots > span:not(:last-child)::after { background: currentColor; opacity: 0.6; }
.dn-table--metrics td { vertical-align: middle; }
.dn-cellbar { display: flex; align-items: center; gap: 10px; }
.dn-cellbar__track { flex: 1; min-width: 0; }
.dn-cellbar--accent .dn-cellbar__track i { background: var(--accent); }
.dn-cellbar__val { flex: none; width: 34px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-1); font-variant-numeric: tabular-nums; }

/* 02 What the policy asks for: one panel, drawn check boxes, a footnote under a hairline. */
.dn-policy { gap: 16px; padding: 28px 30px 24px; }
.dn-policy__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.dn-policy__title { font-size: 16px; font-weight: 600; color: var(--text-1); }
.dn-policy__src { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-4); }
.dn-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 10px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dn-boxes > li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--text-soft); }
.dn-boxes > li::before,
.dn-checklist li::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 6px;
  border: 1.5px solid var(--accent-fill);
}
.dn-policy__foot { padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.55; color: var(--text-2); }
@media (max-width: 559px) {
  .dn-policy { padding: 22px 20px 20px; }
}

/* 03 How the NDC is reported: mono parts with drawn brackets under them. */
.dn-ndc { gap: 28px; }
.dn-ndc__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 28px; }
.dn-ndc__part { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.dn-ndc__part--ndc { flex: 0 1 200px; min-width: 0; }
.dn-ndc__segs { display: flex; gap: 12px; }
.dn-ndc__seg { display: flex; flex-direction: column; gap: 10px; }
.dn-ndc__seg::after {
  content: "";
  order: 1;
  box-sizing: border-box;
  height: 6px;
  border: 1.5px solid var(--fig-line);
  border-top: 0;
}
.dn-ndc__code { font-family: var(--font-mono); font-size: 22px; line-height: 1; letter-spacing: 0.04em; color: var(--text-1); }
.dn-ndc__n { order: 2; height: 10.5px; text-align: center; font-family: var(--font-mono); font-size: 10.5px; line-height: 1; color: var(--accent); }
.dn-ndc__label { font-size: 13px; line-height: 1.45; color: var(--text-2); }

/* 03 Example: two drawn vials, the claim lines beside them. */
.dn-example { gap: 24px; }
.dn-example__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.dn-example__cap .fig-label { letter-spacing: 0.06em; text-transform: none; }
.fig__eyebrow.dn-dots > span:not(:last-child)::after { background: currentColor; opacity: 0.6; }
.dn-example__body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 28px 44px; }
.dn-vials { flex: none; display: flex; align-items: flex-end; gap: 22px; }
.dn-vial { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dn-vial__cap { width: 24px; height: 8px; border-radius: 2px 2px 0 0; background: var(--text-soft); }
.dn-vial__glass {
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
  width: 56px;
  height: 112px;
  margin-top: -10px;
  padding: 3px;
  border-radius: 10px;
  border: 1.5px solid var(--dn-vial-edge);
}
.dn-vial__given { flex: 1; border-radius: 7px; background: var(--accent); }
.dn-vial__waste { flex: 1; border-radius: 7px 7px 1px 1px; background: repeating-linear-gradient(135deg, var(--dn-hatch) 0 1px, transparent 1px 5px); }
.dn-vial__waste + .dn-vial__given { border-radius: 1px 1px 7px 7px; }
.dn-vial__label { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.dn-example__lines { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.dn-example__key { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--text-2); }
.dn-example__key > span { display: flex; align-items: center; gap: 8px; }
.dn-swatch { flex: none; box-sizing: border-box; width: 10px; height: 10px; border-radius: 2px; background: var(--accent); }
.dn-swatch--waste { border: 1px solid var(--dn-vial-edge); background: repeating-linear-gradient(135deg, var(--dn-hatch-key) 0 1px, transparent 1px 3.5px); }
.dn-claim { border-bottom: 1px solid var(--line); }
.dn-claim__line { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 13.5px; color: var(--text-1); }
.dn-claim__note { font-size: 12px; color: var(--text-4); }
.dn-example__note { font-size: 13.5px; line-height: 1.55; color: var(--text-2); }

/* 04 The pre-dose checklist: groups under mono labels, drawn boxes, hairline rows. */
.dn-checklist { gap: 22px; padding: 28px 32px; }
.dn-checklist__group { display: flex; flex-direction: column; gap: 4px; }
.dn-checklist__label { margin-bottom: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.dn-checklist ul { margin: 0; padding: 0; list-style: none; }
.dn-checklist li { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.dn-checklist li:last-child { border-bottom: 0; }
.dn-checklist li::before { width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; }
.dn-checklist strong { font-weight: 600; color: var(--text-1); }
@media (max-width: 559px) {
  .dn-checklist { padding: 22px 20px; }
  .dn-checklist li { font-size: 15px; }
}

/* 05 and 07 Two side-by-side panels. */
.dn-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.dn-pair--nums { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.dn-pair__item { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.dn-pair__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.dn-pair__text { font-size: 15px; line-height: 1.55; color: var(--text-soft); }
.dn-pair__num { font-family: var(--font-serif); font-size: 38px; line-height: 1; color: var(--text-1); }
.dn-pair--nums .dn-pair__text { font-size: 14px; line-height: 1.5; color: var(--text-2); }

/* 05 Letter of medical necessity: numbered hairline rows. */
.dn-outline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.dn-outline > li { display: flex; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--text-soft); }
.dn-outline__n { flex: none; width: 22px; padding-top: 2px; font-family: var(--font-mono); font-size: 12px; color: var(--accent); }

/* 06 What changed: a drawn timeline, the proposed rule in solid accent. */
.dn-timeline { display: flex; flex-direction: column; margin: 4px 0 0; padding: 0; list-style: none; border-left: 2px solid var(--fig-line-soft); }
.dn-timeline > li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 0 0 24px 28px; }
.dn-timeline > li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 3px;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--fig-node);
}
.dn-timeline > .dn-timeline__now { padding-bottom: 4px; }
.dn-timeline > .dn-timeline__now::before { left: -8px; top: 2px; width: 14px; height: 14px; border: 0; background: var(--accent); box-shadow: 0 0 0 4px var(--ground); }
.dn-timeline__date { font-family: var(--font-mono); font-size: 12px; line-height: 18px; letter-spacing: 0.04em; color: var(--text-4); }
.dn-timeline__now .dn-timeline__date { color: var(--accent); }
.dn-timeline__now .dn-timeline__date > span:not(:last-child)::after { background: currentColor; opacity: 0.6; }
.dn-timeline__title { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-1); text-wrap: balance; }
.dn-timeline__text { max-width: 600px; font-size: 16px; line-height: 1.65; color: var(--text-2); text-wrap: pretty; }
@media (max-width: 559px) {
  .dn-timeline > li { padding-left: 22px; }
  .dn-timeline__text { font-size: 15.5px; }
}

/* 07 Few appeal, most win: three numbers, hairlines between, a drawn chevron on each. */
.dn-ma { gap: 28px; }
.dn-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dn-stat { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 4px 24px; }
.dn-stat:first-child { padding-left: 0; }
.dn-stat:last-child { padding-right: 0; }
.dn-stat + .dn-stat { border-left: 1px solid var(--line); }
.dn-stat__arrow { position: absolute; left: -6px; top: 22px; background: var(--surface); fill: none; stroke: var(--fig-line); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 559px) {
  .dn-stats { grid-template-columns: 1fr; }
  .dn-stat { padding: 18px 0; }
  .dn-stat:first-child { padding-top: 0; }
  .dn-stat:last-child { padding-bottom: 0; }
  .dn-stat + .dn-stat { border-left: 0; border-top: 1px solid var(--line); }
  .dn-stat__arrow { left: auto; right: 0; top: -6px; transform: rotate(90deg); }
}