/* The sample sheets on /dental (Sam 2026-10-14: "as you scroll down you see the full report"; then "marijn meant
   THE REPORT, the one which lists issues, open claims etc"). Two tabs over one stage: the morning report first (an
   invented office's insurance brief, drawn as apps/dental/print Report.svelte prints it: the issues to settle before
   each visit, the ortho and Humana patients, the open claims), then the breakdown behind one patient (Breakdown.svelte:
   the plan table beside the procedures, then the notes). The tables and lists are the content, real ones a screen
   reader walks; the stage, the bar and the stamps are decoration.

   section.brk > .mo-section__head + .brk__switch[data-caps] > .caps__tabs.brk__tabs[role=tablist] (a.js initCaps: the
     tabs, the arrow keys, the indicator) + .brk__panel[role=tabpanel][data-brk] x 2, each: .brk__track > .brk__stage
     (the reading line, pinned) + .brk__column > .brk__bar (what it is, the key, progress) + figure.brk__doc
     (.brk__paper sheets) + .brk__foot (the PDF).

   breakdown-scroll.js adds .is-live to the shown panel and fills each row ([data-brk-unit] gets .is-filled) as its
   middle passes the reading line, --brk-read-line of the window: its words type in, a source tag follows, a status
   word pops. The stage pins while the sheets scroll under it at the page's own speed (no script moves them); when
   every row is in, .is-done fills the end rows and lands the stamp. Without the script both panels show, one after
   the other, filled and still; under reduced motion or motion off the tabs still switch and each sheet is filled,
   still and in the flow. */

.brk { padding: var(--spacing-2xl) var(--page-margin); }

/* The switcher: the system's tab rail (a.css .caps__tabs), the panels under it. */
.brk__switch { max-inline-size: var(--brk-width); margin-inline: auto; }
.brk__tabs { gap: var(--brk-tab-gap); margin-block-end: var(--spacing-xs); }
html:not(.js) .brk__tabs { display: none; }
html.js .brk__panel:not(.is-active) { display: none; }
html:not(.js) .brk__panel + .brk__panel { margin-block-start: var(--spacing-2xl); }
.brk__panel:focus-visible { outline: var(--ring-width) var(--line-style-solid) currentColor; outline-offset: var(--ring-offset); }
html.js .brk__panel.is-active { animation: brk-panel-in var(--motion-normal) var(--motion-ease-fade); }
@keyframes brk-panel-in { from { opacity: var(--hidden-opacity); } }

.brk__track { position: relative; isolation: isolate; display: grid; max-inline-size: var(--brk-width); margin-inline: auto; }
.brk__track--report { max-inline-size: var(--rpt-width); }
.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__panel.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, its key and how much of it is in. It sticks under the fixed chrome (nav.js
   --header-vis counts the banner too, on a page that carries one). */
.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)); }
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: white 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-line { white-space: nowrap; }
.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); }

.rpt__rest { display: none; flex-basis: var(--percent-100); }
.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); }

/* The morning report: a section a sheet, each under the masthead (the brand and the section, the office and the
   days it covers), the legal lines at its foot. Status is a coloured word, never a chip: red for what must be
   settled before the visit (and a claim never sent or over 90 days), amber for a claim over 30 days, grey under. */
.brk [data-status='destructive'] { --rpt-status: var(--rpt-destructive); }
.brk [data-status='warning'] { --rpt-status: var(--rpt-warning); }
.brk [data-status='success'] { --rpt-status: var(--rpt-success); }
.brk [data-status='neutral'] { --rpt-status: var(--rpt-neutral); }
.rpt__dot { display: inline-block; flex: none; inline-size: var(--brk-tag-dot); block-size: var(--brk-tag-dot); border-radius: var(--round-radius); background: var(--rpt-status); }
.rpt { font-variant-numeric: tabular-nums; text-wrap: pretty; }
.rpt .brk__v { display: block; } /* a box's words are a block, so the wipe has a box to clip (the visit is two lines) */
.rpt__sheet { display: flex; flex-direction: column; font-size: var(--rpt-text-size); line-height: var(--rpt-text-leading); }

/* The boxed note: what the office does about every issue below it. */
.rpt__callout { display: grid; gap: var(--spacing-3xs); align-self: flex-start; inline-size: var(--rpt-callout-width); margin-block-end: var(--spacing-md); padding: var(--spacing-xs) var(--spacing-sm); border: var(--hairline) var(--line-style-solid) var(--surface-card-foreground); }
.rpt__callout-title { display: flex; align-items: center; gap: var(--spacing-2xs); font-weight: var(--type-weight-bold); }
.rpt__mark { flex: none; inline-size: var(--rpt-callout-mark); block-size: var(--rpt-callout-mark); color: var(--rpt-status); fill: currentColor; stroke: currentColor; stroke-linejoin: round; }

/* The issues: a line each, no box. When (the day over the time), who, the issue in its colour, what to do. A thin
   black rule between lines, none above or below. */
.rpt__issues { display: grid; grid-template-columns: var(--rpt-col-visit) var(--rpt-col-patient) auto minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.rpt__issue { position: relative; display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; border-block-end: var(--hairline) var(--line-style-solid) var(--surface-card-foreground); }
.rpt__issue:last-child { border-block-end: 0; }
.rpt__issue > :not(.sr-only) { padding: var(--spacing-2xs) var(--brk-cell-padding-x-dense); }
.rpt__issue:first-child > :not(.sr-only) { padding-block-start: 0; }
.rpt__issue:last-child > :not(.sr-only) { padding-block-end: 0; }
.rpt__visit { display: grid; }
.rpt__who, .rpt__what { font-weight: var(--type-weight-semibold); }
.rpt__what { justify-self: start; color: var(--rpt-status); white-space: nowrap; transform-origin: 0 50%; }

/* The tables: the form's rules, a grey header row closed by a black rule; figures never wrap. */
.rpt__table { inline-size: var(--percent-100); border-collapse: collapse; border: var(--hairline) var(--line-style-solid) var(--surface-card-foreground); }
.rpt__table :is(th, td) { padding: var(--brk-cell-padding-y-dense) var(--brk-cell-padding-x-dense); border: var(--hairline) var(--line-style-solid) var(--border); text-align: start; vertical-align: top; font-weight: var(--type-weight); }
.rpt__table thead th { background: var(--surface-canvas); border-block-end-color: var(--surface-card-foreground); }
.rpt__table :is(.rpt__visit-cell, .rpt__num, .rpt__code) { white-space: nowrap; }
.rpt__line { display: block; }
.rpt__code > .brk__v { color: var(--rpt-neutral); }
.rpt__age { display: inline-block; color: var(--rpt-status); transform-origin: 0 50%; }
/* A patient's claims are one group: the name (bold) and the visit once, no grey rule inside it, a black rule
   closing it (a cell's own rule would win over its group's, so the closing cells carry it). */
.rpt__table .rpt__patient { font-weight: var(--type-weight-bold); }
.rpt__group tr:not(:last-child) > td:not([rowspan]) { border-block-end-color: var(--surface-clear); }
.rpt__group tr:last-child > *, .rpt__group [rowspan] { border-block-end-color: var(--surface-card-foreground); }

.rpt__end { display: flex; justify-content: flex-end; margin-block-start: var(--spacing-md); }
.rpt__end .brk__stamp { position: static; }
.rpt__foot { display: grid; margin-block-start: auto; padding-block-start: var(--spacing-lg); color: var(--rpt-neutral); font-size: var(--rpt-small-size); }

/* Live: a row is blank until it passes the reading line. Its words type in (a wipe), its tag follows, a status word
   pops in its colour, the boxes it filled flash the selection acid; later boxes go a beat after the first. */
.brk__panel.is-live [data-brk-unit] :is(.brk__v, .brk__src, .brk__ns, .rpt__what, .rpt__age, .rpt__mark) { opacity: var(--hidden-opacity); transition: opacity var(--motion-quick) var(--motion-ease-fade), clip-path var(--motion-normal) var(--motion-ease-ui); }
.brk__panel.is-live [data-brk-unit] .brk__v { clip-path: inset(0 var(--percent-100) 0 0); }
.brk__panel.is-live [data-brk-unit].is-filled :is(.brk__v, .brk__src, .brk__ns, .rpt__what, .rpt__age, .rpt__mark) { opacity: var(--shown-opacity); clip-path: inset(0); }
.brk__panel.is-live [data-brk-unit].is-filled .brk__src { transition-delay: var(--motion-fast); }
.brk__panel.is-live .brk__table tr > td:nth-child(4) :is(.brk__v, .brk__ns) { transition-delay: var(--motion-stagger); }
.brk__panel.is-live .brk__table tr > td:nth-child(5) :is(.brk__v, .brk__ns) { transition-delay: calc(var(--motion-stagger) * 2); }
.brk__panel.is-live :is(.rpt__text, .rpt__table td:nth-child(n+3) .brk__v) { transition-delay: var(--motion-stagger); }
.brk__panel.is-live [data-brk-unit].is-filled :is(.rpt__what, .rpt__age, .rpt__mark) { animation: rpt-pop var(--motion-land) var(--motion-ease-land) var(--motion-fast) both; }
.brk__panel.is-live .brk__table tr.is-filled > td:has(> .brk__cell, > .brk__ns), .brk__panel.is-live .brk__notes li.is-filled,
.brk__panel.is-live .rpt__issue.is-filled, .brk__panel.is-live .rpt__callout.is-filled, .brk__panel.is-live .rpt__table tr.is-filled > :is(td, th):not(:empty) { animation: brk-flash var(--motion-beat) var(--motion-ease-fade); }
.brk__panel.is-live .brk__stamp { opacity: var(--hidden-opacity); }
.brk__panel.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 rpt-pop { from { opacity: var(--hidden-opacity); transform: scale(var(--rpt-pop-from)); } }
@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 { padding-block-end: var(--spacing-xl); }
  /* the PDF link a tap tall in its own box: the note wrapped under it would otherwise take the lower part of its
     tap area (it was 37px to aim at) */
  .brk__foot .link-btn { min-block-size: var(--touch-target); }
  /* Phones read the first sheet, the patients who need a person, and get the rest as the PDF (Sam, 2026-10-14):
     the report was six screens of a sixteen-screen page. */
  .brk__track--report .rpt__sheet:not(:first-of-type) { display: none; }
  .rpt__rest { display: block; }
  .brk__bar > p { display: none; }
  .brk__legend { gap: var(--spacing-3xs) var(--spacing-xs); }
  /* progress reads as progress: the reading line's acid, as thick as it (a hairline looked like a stray rule) */
  .brk__progress { block-size: var(--brk-line-height); background: var(--highlight); }
  .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); }
  /* a coverage stays whole (100%, Not stated) or breaks at its dash (50%–80%); a procedure's name breaks where the
     sheet says it may (its soft hyphens), not where a dictionary guesses */
  .brk__table--procs td:nth-child(3) { overflow-wrap: normal; hyphens: manual; }
  .brk__table--procs th[scope='row'] { hyphens: manual; }
  /* 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); }

  /* The report on a phone: a size up from the breakdown, a little more air in the sheet; the legal lines once, on
     the last sheet. An issue is its patient over its word, the day and time beside, what to do under. A table row
     is a card: the patient and the visit on top, every other box a line with its column's name beside it (an
     empty box says nothing, so it is left out). */
  .rpt__sheet { padding: var(--spacing-sm); font-size: var(--rpt-text-size-mobile); }
  .rpt__foot { font-size: var(--rpt-small-size-mobile); }
  .rpt__foot:not(.rpt__foot--last) { display: none; }
  .rpt__callout { inline-size: auto; }
  .rpt__end { margin-block-start: var(--spacing-sm); }
  .rpt__issues { display: block; }
  .rpt__issue { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who when" "what when" "text text"; column-gap: var(--spacing-sm); row-gap: var(--spacing-3xs); padding-block: var(--spacing-xs); }
  .rpt__issue:first-child { padding-block-start: 0; }
  .rpt__issue:last-child { padding-block-end: 0; }
  .rpt__issue > :not(.sr-only) { padding: 0; }
  .rpt__when { grid-area: when; text-align: end; }
  .rpt__who { grid-area: who; }
  .rpt__what { grid-area: what; }
  .rpt__text { grid-area: text; }
  .rpt__table, .rpt__table tbody { display: block; border: 0; }
  .rpt__table thead { position: absolute; width: var(--hairline); height: var(--hairline); margin: calc(var(--hairline) * -1); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rpt__table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--spacing-sm); row-gap: var(--spacing-3xs); padding-block: var(--spacing-xs); border-block-end: var(--hairline) var(--line-style-solid) var(--border); }
  .rpt__table tbody:last-child tr:last-child { border-block-end: 0; padding-block-end: 0; }
  .rpt__table :is(th, td) { display: block; padding: 0; border: 0; }
  .rpt__table th:is([scope='row'], [scope='rowgroup']) { grid-column: 1; grid-row: 1; }
  .rpt__table th[scope='row'] { font-weight: var(--type-weight-semibold); }
  .rpt__table .rpt__visit-cell { grid-column: 2; grid-row: 1; text-align: end; }
  .rpt__table td:not(.rpt__visit-cell) { grid-column: 1 / -1; display: grid; grid-template-columns: var(--rpt-key-mobile) minmax(0, 1fr); column-gap: var(--spacing-xs); }
  .rpt__table td:not(.rpt__visit-cell)::before { content: attr(data-label); color: var(--rpt-neutral); }
  .rpt__table td:empty { display: none; }
  .rpt__table :is(.rpt__num, .rpt__code) { white-space: normal; }
  .rpt__table .rpt__age { justify-self: start; }
  /* claims: a patient's group closes on the black rule; its claims sit apart by air alone, as on the sheet */
  .rpt__group { border-block-end: var(--hairline) var(--line-style-solid) var(--surface-card-foreground); }
  .rpt__group:last-child { border-block-end: 0; }
  .rpt__group tr { border-block-end: 0; }
}
/* Under 360 wide: a narrower code column, so the age column holds its ≤18; a procedure's name is too long for its
   column there, so it hyphenates rather than splits bare. */
@media (max-width: 359.98px) {
  .brk__col-code { width: var(--brk-col-code-narrow); }
  .brk__table--procs th[scope='row'] { hyphens: auto; }
}

/* Still: reduced motion or motion off shows each sheet 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 { position: relative; top: auto; }
  html.js .brk__bar::after { content: none; }
  html.js .brk__panel.is-active { animation: 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 { position: relative; top: auto; }
html.js[data-motion='off'] .brk__bar::after { content: none; }
html.js[data-motion='off'] .brk__panel.is-active { animation: none; }