/* Breakdown report (/dental, Sam 2026-10-14: "as you scroll down you see the full report"). An invented
   patient's full benefits breakdown, drawn as the printed form (apps/dental/print Breakdown.svelte) on white
   paper: the plan table beside the procedures, then the notes. The tables are the content, real tables a
   screen reader walks; the stage, the bar and the stamp are decoration.

   section.brk[data-brk] > .mo-section__head + .brk__track > .brk__stage (the reading line, pinned)
     + .brk__column > .brk__bar (legend, progress) + figure.brk__doc > .brk__paper x 2 + .brk__foot (the PDF).

   breakdown-scroll.js adds .is-live and fills each row ([data-brk-unit] gets .is-filled) as its middle passes
   the reading line, --brk-read-line of the window: its value types in, its source tag follows, a box the
   payer left blank shows Not stated. The stage pins while the sheet scrolls under it at the page's own speed
   (no script moves the sheet); when every row is in, .is-done fills the Verified rows and lands the stamp.
   Without the script, under reduced motion or motion off, the report is filled, still and in the flow. */

.brk { padding: var(--spacing-2xl) var(--page-margin); }
.brk__track { position: relative; isolation: isolate; display: grid; max-inline-size: var(--brk-width); margin-inline: auto; }
.brk__stage, .brk__column { grid-area: 1 / 1; min-inline-size: 0; }
.brk__stage { display: none; }

/* The stage: one window tall, pinned while the track passes. The reading line shows only while it is pinned,
   where it meets the line the rows fill at; the sheet fades into the ground at the window's foot. */
html.js .brk__stage { display: block; position: sticky; top: 0; align-self: start; block-size: var(--screen-height-small); z-index: var(--layer-raised); pointer-events: none; }
html.js .brk__stage::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; block-size: var(--brk-fade); background: linear-gradient(var(--surface-clear), var(--background)); }
.brk__line { position: absolute; inset-inline: 0; top: calc(var(--percent-100) * var(--brk-read-line)); block-size: var(--brk-line-height); background: var(--highlight); box-shadow: 0 0 var(--brk-line-glow) var(--highlight); opacity: var(--hidden-opacity); transition: opacity var(--motion-normal) var(--motion-ease-fade); }
.brk.is-live.is-pinned .brk__line { opacity: var(--shown-opacity); }
html.js .brk__column { padding-bottom: calc(var(--screen-height-small) * var(--brk-end-room)); }

/* The bar: what the sheet is, the source key and how much of it is in. It sticks under the nav. */
.brk__bar { position: relative; z-index: var(--layer-above); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-2xs) var(--spacing-md); padding-block: var(--spacing-sm); background: var(--background); }
html.js .brk__bar { position: sticky; top: var(--header-vis, var(--header-height)); }
/* under the banner too, where the page carries one (home-announcement.css puts the nav under it) */
html.js body[data-announcement] .brk__bar { top: calc(var(--announcement-height) + var(--header-vis, var(--header-height))); }
html.js .brk__bar::after { content: ""; position: absolute; inset-inline: 0; top: var(--percent-100); block-size: var(--spacing-md); background: linear-gradient(var(--background), var(--surface-clear)); pointer-events: none; }
.brk__legend { display: flex; flex-wrap: wrap; gap: var(--spacing-2xs) var(--spacing-sm); }
.brk__legend li { display: inline-flex; align-items: center; gap: var(--spacing-3xs); }
.brk__legend .brk__src { font-size: inherit; }
.brk__progress { position: absolute; inset-inline: 0; bottom: 0; block-size: var(--hairline); background: currentColor; transform-origin: 0 50%; transform: scaleX(var(--brk-progress, 1)); transition: transform var(--motion-quick) var(--motion-ease-ui); }

/* The paper: two sheets, the form's own type and rules. */
.brk__doc { display: grid; gap: var(--spacing-md); }
.brk__paper { position: relative; padding: var(--spacing-lg); background: var(--surface-card); color: var(--surface-card-foreground); font-size: var(--brk-text-size); line-height: var(--brk-text-leading); letter-spacing: var(--type-small-tracking); }
.brk__mast { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--spacing-xs) var(--spacing-md); margin-bottom: var(--spacing-md); }
.brk__brand { display: flex; align-items: flex-end; gap: var(--spacing-xs); }
.brk__mark { block-size: var(--brk-mark-height); inline-size: auto; flex: none; stroke-width: var(--icon-stroke); }
.brk__mark path { vector-effect: non-scaling-stroke; }
.brk__names { display: grid; }
.brk__org, .brk__doc-title { font-size: var(--type-h7-size); line-height: var(--type-h7-leading); letter-spacing: var(--type-h7-tracking); white-space: nowrap; }
.brk__org { font-weight: var(--type-weight-bold); }
.brk__aside { display: grid; justify-items: end; text-align: end; }
.brk__payer { font-weight: var(--type-weight-semibold); }
.brk__verified { color: var(--foreground-muted-mix); }

.brk__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-sm); align-items: start; }
@media (min-width: 80em) { .brk__cols { grid-template-columns: var(--brk-columns); } }

.brk__table { inline-size: var(--percent-100); border-collapse: collapse; table-layout: fixed; border: var(--brk-rule-strong) var(--line-style-solid) var(--surface-card-foreground); }
.brk__table :is(th, td) { padding: var(--spacing-3xs) var(--spacing-2xs); border: var(--hairline) var(--line-style-solid) var(--border); text-align: start; vertical-align: top; font-weight: var(--type-weight); overflow-wrap: anywhere; }
.brk__table--procs { font-size: var(--brk-text-size-dense); }
.brk__table--procs :is(th, td) { padding: var(--brk-cell-padding-y-dense) var(--brk-cell-padding-x-dense); }
.brk__col-key { width: var(--brk-col-key); }
.brk__col-mid { width: var(--brk-col-mid); }
.brk__col-code { width: var(--brk-col-code); }
.brk__col-name { width: var(--brk-col-name); }
.brk__col-cov { width: var(--brk-col-cov); }
.brk__col-freq { width: var(--brk-col-freq); }
/* Bands, headings and the boxes a row does not ask are the form's ground; a black rule closes each band and heading. */
.brk__band > th, .brk__head-row > th, .brk__caption { background: var(--surface-canvas); font-weight: var(--type-weight-bold); }
.brk__band > th, .brk__head-row > th { border-bottom: var(--brk-rule-strong) var(--line-style-solid) var(--surface-card-foreground); }
.brk__caption { padding: var(--brk-cell-padding-y-dense) var(--brk-cell-padding-x-dense); border: var(--brk-rule-strong) var(--line-style-solid) var(--surface-card-foreground); border-bottom: 0; text-align: start; }
.brk__caption--block { padding: var(--spacing-3xs) var(--spacing-2xs); border-bottom: var(--brk-rule-strong) var(--line-style-solid) var(--surface-card-foreground); }
.brk__table .is-none, .brk__table .is-cat > * { background: var(--surface-canvas); }
.brk__table .is-cat > :is(th, td) { font-weight: var(--type-weight-bold); }
.brk__code, .is-q > th { color: var(--foreground-muted-mix); }

/* A box: its words, then its source tag, pushed to the box's end (onto its own line when the words fill it). */
.brk__cell { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--spacing-2xs); }
.brk__v { min-inline-size: 0; }
.brk__short { display: none; }
.brk__src { display: inline-flex; align-items: center; gap: var(--spacing-3xs); margin-inline-start: auto; color: var(--foreground-muted-mix); font-size: var(--brk-tag-size); line-height: var(--type-label-leading); letter-spacing: var(--type-label-tracking); font-weight: var(--type-weight-medium); text-transform: uppercase; white-space: nowrap; }
.brk__src::before { content: ""; flex: none; inline-size: var(--brk-tag-dot); block-size: var(--brk-tag-dot); background: currentColor; border-radius: var(--round-radius); }
.brk__src[data-kind='doc']::before { border-radius: 0; }
.brk__src[data-kind='office']::before { background: var(--surface-clear); box-shadow: inset 0 0 0 var(--hairline) currentColor; }
.brk__src[data-kind='marzy']::before { background: var(--accent); }
/* Not stated: the payer said nothing, so the box stays blank with this, never a guess. */
.brk__ns { display: inline-block; padding-inline: var(--spacing-3xs); border: var(--hairline) var(--line-style-dashed) currentColor; border-radius: var(--radius); color: var(--foreground-muted-mix); font-style: italic; }

/* The notes sheet. */
.brk__notes { columns: 2; column-gap: 0; column-rule: var(--hairline) var(--line-style-solid) var(--border); border: var(--brk-rule-strong) var(--line-style-solid) var(--surface-card-foreground); border-top: 0; }
.brk__notes li { break-inside: avoid; padding: var(--spacing-3xs) var(--spacing-2xs); border-bottom: var(--hairline) var(--line-style-solid) var(--border); }
.brk__comments { margin-top: var(--spacing-md); }
.brk__blank { block-size: var(--brk-blank-height); border: var(--brk-rule-strong) var(--line-style-solid) var(--surface-card-foreground); border-top: 0; }
.brk__stamp { position: absolute; right: var(--brk-stamp-inset); bottom: var(--brk-stamp-inset); display: grid; justify-items: center; gap: var(--spacing-3xs); padding: var(--spacing-xs) var(--spacing-sm); border: var(--ring-width) var(--line-style-solid) currentColor; border-radius: var(--radius); color: var(--accent); text-transform: uppercase; transform: rotate(calc(var(--brk-stamp-tilt) * -1)); }
.brk__stamp-title { font-size: var(--type-h6-size); line-height: var(--type-h6-leading); letter-spacing: var(--type-label-tracking); font-weight: var(--type-weight-bold); }

.brk__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--spacing-xs) var(--spacing-md); padding-top: var(--spacing-md); }
.brk__foot a { scroll-margin-block: var(--brk-fade); }

/* Live: a row is blank until it passes the reading line. Its words type in (a wipe), its tag follows, the
   boxes it filled flash the selection acid; Coverage, Frequency and Age go one beat apart. */
.brk.is-live [data-brk-unit] :is(.brk__v, .brk__src, .brk__ns) { opacity: var(--hidden-opacity); transition: opacity var(--motion-quick) var(--motion-ease-fade), clip-path var(--motion-normal) var(--motion-ease-ui); }
.brk.is-live [data-brk-unit] .brk__v { clip-path: inset(0 var(--percent-100) 0 0); }
.brk.is-live [data-brk-unit].is-filled :is(.brk__v, .brk__src, .brk__ns) { opacity: var(--shown-opacity); clip-path: inset(0); }
.brk.is-live [data-brk-unit].is-filled .brk__src { transition-delay: var(--motion-fast); }
.brk.is-live .brk__table tr > td:nth-child(4) :is(.brk__v, .brk__ns) { transition-delay: var(--motion-stagger); }
.brk.is-live .brk__table tr > td:nth-child(5) :is(.brk__v, .brk__ns) { transition-delay: calc(var(--motion-stagger) * 2); }
.brk.is-live .brk__table tr.is-filled > td:has(> .brk__cell, > .brk__ns), .brk.is-live .brk__notes li.is-filled { animation: brk-flash var(--motion-beat) var(--motion-ease-fade); }
.brk.is-live .brk__stamp { opacity: var(--hidden-opacity); }
.brk.is-live.is-done .brk__stamp { opacity: var(--shown-opacity); animation: brk-stamp var(--motion-land) var(--motion-ease-land) both; }
@keyframes brk-flash { from { background-color: var(--selection); } }
@keyframes brk-stamp {
  from { opacity: var(--hidden-opacity); transform: rotate(calc(var(--brk-stamp-tilt) * -1)) scale(var(--brk-stamp-from)); }
  to { opacity: var(--shown-opacity); transform: rotate(calc(var(--brk-stamp-tilt) * -1)); }
}

@media (max-width: 767.98px) {
  .brk__bar > p { display: none; }
  .brk__paper { padding: var(--spacing-xs); font-size: var(--brk-text-size-mobile); }
  .brk__table--procs { font-size: inherit; }
  .brk__table :is(th, td), .brk__table--procs :is(th, td) { padding: var(--brk-cell-padding-y-dense) var(--spacing-3xs); hyphens: auto; overflow-wrap: break-word; }
  .brk__col-code { width: var(--brk-col-code-mobile); }
  .brk__table .brk__code { overflow-wrap: normal; hyphens: manual; } /* a code range breaks at its dash, never inside a code */
  .brk__col-cov { width: var(--brk-col-cov-mobile); }
  /* Coverage and Frequency say Cov. and Freq.; the full word is still the column's name to a screen reader */
  .brk__long { position: absolute; width: var(--hairline); height: var(--hairline); margin: calc(var(--hairline) * -1); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .brk__short { display: inline; }
  /* the tag is a pin in the box's top corner, its mark alone; its word is still read out (.sr-only) */
  .brk__cell { position: relative; padding-inline-end: calc(var(--brk-tag-dot) + var(--spacing-3xs)); }
  .brk__src { position: absolute; top: calc((var(--brk-text-leading) * var(--em-1) - var(--brk-tag-dot)) / 2); right: 0; }
  .brk__mark { block-size: var(--brk-mark-height-mobile); }
  .brk__org, .brk__doc-title { font-size: var(--type-small-size); line-height: var(--type-small-leading); letter-spacing: var(--type-small-tracking); }
  .brk__aside { justify-items: start; text-align: start; }
  .brk__word { display: none; }
  .brk__legend .brk__src { position: static; }
  .brk__notes { columns: 1; }
  .brk__stamp { right: var(--spacing-sm); bottom: var(--spacing-lg); }
  .brk__stamp-title { font-size: var(--type-h7-size); line-height: var(--type-h7-leading); }
}

/* Still: reduced motion or motion off shows the report filled, in the flow, with nothing pinned. */
@media (prefers-reduced-motion: reduce) {
  html.js .brk__stage { display: none; }
  html.js .brk__column { padding-bottom: 0; }
  html.js .brk__bar, html.js body[data-announcement] .brk__bar { position: relative; top: auto; }
  html.js .brk__bar::after { content: none; }
}
html.js[data-motion='off'] .brk__stage { display: none; }
html.js[data-motion='off'] .brk__column { padding-bottom: 0; }
html.js[data-motion='off'] .brk__bar, html.js[data-motion='off'] body[data-announcement] .brk__bar { position: relative; top: auto; }
html.js[data-motion='off'] .brk__bar::after { content: none; }