/* BPM & Delay Calculator (/tools/bpm-delay-calculator/), 2026-11-06.
   Only what ft-tool-20261106.css lacks: the tempo row, clickable values in tables, the selected-value
   readout, the small SVG figures, the panels under "More from this tempo" and the printed tempo sheet.
   Tokens only. Breakpoints: 56rem (two columns), 40rem (phone), 25rem and 22.5rem (small phones). */

/* Layout ---------------------------------------------------------------------------------------
   The panels come in the order a phone shows them: tempo, results, selected value. From 56rem the
   tempo and the selected value stack on the left and the results fill the right. */
@media (min-width: 56rem) {
  .bpm-workspace { grid-template-areas: "tempo results" "selected results"; grid-template-rows: auto 1fr; }
  .bpm-tempo-panel { grid-area: tempo; }
  .bpm-results { grid-area: results; }
  .bpm-selected { grid-area: selected; }
}

/* Tempo panel ---------------------------------------------------------------------------------- */
.bpm-tempo-row { display: flex; flex-wrap: wrap; gap: var(--ft-space-2); align-items: stretch; }
.bpm-tempo-group { flex: 1 1 9rem; }
/* Line height 1.2 keeps the field at its minimum height, so the thicker border of an invalid value changes no size. */
.bpm-tempo-input { min-height: 3.25rem; padding-block: 0.25rem; font-size: var(--ft-text-2xl); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.bpm-tap { flex: 0 0 auto; min-height: 3.25rem; min-width: 8.5rem; touch-action: manipulation; }
.bpm-nudge { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ft-space-2); margin-top: var(--ft-space-1); }
.bpm-nudge__btn { padding-inline: var(--ft-space-2); font-variant-numeric: tabular-nums; touch-action: manipulation; }

/* A hint and the error that can take its place share one cell, sized for both from the first paint,
   so a message that appears after typing moves nothing below it. */
.bpm-msg { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.bpm-msg > * { grid-area: 1 / 1; }
.bpm-msg > .ft-error[hidden] { display: flex !important; visibility: hidden; }
.bpm-msg.is-error > .ft-hint { visibility: hidden; }
/* Both fields of a pair wrong: one message with both ranges takes the place of the two (see paintBox). */
.bpm-msg.is-both > .bpm-errs > .ft-error { display: none !important; }
.bpm-msg > .bpm-both[hidden] { display: none !important; }
/* The custom sample rate has its message box only while its field is shown. */
.bpm-sr-custom[hidden] + .bpm-sr-msg { display: none; }
/* "Read as 0.125 ms.": how the page read what was typed. It takes the place of the hint. */
.bpm-read { color: var(--ft-ink); font-weight: 600; font-variant-numeric: tabular-nums; visibility: hidden; }
.bpm-msg.is-note > .bpm-read { visibility: visible; }
.bpm-msg.is-note > .ft-hint:not(.bpm-read) { visibility: hidden; }
/* A number that can be read two ways ("1,000"): the question and its two answers take the place of hint and
   messages. The box keeps the height of that row from the first paint, so a question on one row moves nothing.
   Two very long answers on a small phone need a second row even without the words: then the box grows by that
   row (is-tall, set by fitAsk) and what follows moves down, so the answers never lie over the next line. */
.bpm-msg--ask { min-height: 2.25rem; }
.bpm-ask { position: absolute; inset: 0 0 auto 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ft-space-1) 0.4em; min-height: 100%; background: var(--ft-surface); color: var(--ft-ink); font-size: var(--ft-text-sm); }
.bpm-ask[hidden] { display: none; }
.bpm-ask__btn { min-height: 2.25rem; padding: 0 0.625rem; font-variant-numeric: tabular-nums; }
.bpm-ask__last { display: inline-flex; align-items: center; gap: 0.1em; white-space: nowrap; }
.bpm-ask.is-tall { position: static; }
.bpm-ask.is-tight .bpm-ask__q { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bpm-msg.is-asking > :not(.bpm-ask) { visibility: hidden; }
/* Two fields, one line of messages: room for a message of two lines. */
.bpm-errs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; align-content: start; min-height: calc(2 * var(--ft-leading) * var(--ft-text-sm)); }

/* The line that counts the taps takes the place of the tempo hint while someone taps. Two lines are kept for it. */
.bpm-tapstatus { min-height: calc(2 * 1.45em); color: var(--ft-ink); font-weight: 600; visibility: hidden; }
.bpm-msg.is-tapping > .bpm-tapstatus { visibility: visible; }
.bpm-msg.is-tapping > #bpm-hint, .bpm-msg.is-error > .bpm-tapstatus { visibility: hidden; }
.bpm-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--ft-space-3); align-items: start; }
.bpm-sig { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--ft-space-1); }
.bpm-sig .ft-select { padding-left: 0.5rem; padding-right: 1.5rem; background-position: right 0.75rem center, right 0.4rem center; }
.bpm-sig__slash { color: var(--ft-ink-2); font-size: var(--ft-text-lg); }
.bpm-sr-custom { margin-top: var(--ft-space-2); }
.bpm-short { max-width: 13rem; }

.bpm-key { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ft-space-2); }
.ft-stat.bpm-stat { padding: 0; }
.bpm-stat .ft-stat__unit { margin-left: 0; white-space: nowrap; }
.bpm-stat__btn {
  display: grid;
  align-content: start;
  gap: 2px;
  width: 100%;
  height: 100%;
  min-height: var(--ft-target);
  padding: var(--ft-space-3) var(--ft-space-4);
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bpm-stat__btn:hover { background: var(--ft-accent-soft); }
.bpm-stat__btn:focus-visible { outline: 3px solid var(--ft-focus); outline-offset: 2px; }

.bpm-undo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ft-space-1) var(--ft-space-3); padding: var(--ft-space-1) var(--ft-space-1) var(--ft-space-1) var(--ft-space-3); border: 1px dashed var(--ft-line-strong); border-radius: var(--ft-radius); background: var(--ft-surface-2); }
.bpm-undo .ft-hint { color: var(--ft-ink); }
/* On a wide screen the page scrolls the undo into view when it is below the edge of the window (see showUndo):
   it then keeps a little air under it. */
.bpm-undo { scroll-margin-block: var(--ft-space-4); }
/* After Try an example on a phone the undo moves to the top of the tables, where the page has scrolled to. */
.bpm-results > .bpm-undo { margin-bottom: var(--ft-space-3); }

/* Results panel -------------------------------------------------------------------------------- */
.bpm-tablist.ft-tabs__list { flex-wrap: nowrap; }
.bpm-tablebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ft-space-2) var(--ft-space-4); margin-bottom: var(--ft-space-3); }
.bpm-tablebar .ft-segmented__legend { float: left; margin: 0 var(--ft-space-3) 0 0; line-height: var(--ft-target); }
.bpm-clickhint { flex: 1 1 14rem; max-width: 22rem; margin: 0; }
.bpm-panelnote { margin: 0 0 var(--ft-space-3); }
.bpm-scrollhint { margin: var(--ft-space-1) 0 0; }
.bpm-actions { margin-top: var(--ft-space-4); }
.bpm-actions__hint { margin-top: var(--ft-space-2); min-height: calc(2 * 1.45em); }

/* Tables with clickable values */
.bpm-table caption { padding: var(--ft-space-2) var(--ft-space-3); }
.bpm-table thead th { vertical-align: bottom; }
.bpm-th-unit { display: block; color: var(--ft-ink-2); font-size: var(--ft-text-xs); font-weight: 500; }
.bpm-table tbody th { padding: 0.35rem 0.75rem; vertical-align: middle; white-space: nowrap; }
.bpm-note { font-weight: 650; font-variant-numeric: tabular-nums; }
.bpm-note__name { margin-left: 0.45em; color: var(--ft-ink-2); font-size: var(--ft-text-xs); font-weight: 400; }
#reverb-table .bpm-note__name, .bpm-table--small .bpm-note__name { display: block; margin-left: 0; white-space: normal; }
.bpm-table--small tbody th { white-space: normal; }
.bpm-table--small td { vertical-align: middle; }
/* The rows in bars are a second group under the note values. */
.bpm-table tr.bpm-row--bars > * { border-top: 2px solid var(--ft-line); }
.ft-table td.bpm-cell { padding: 2px 3px; vertical-align: middle; }
.bpm-val, .bpm-blank {
  display: block;
  width: 100%;
  min-height: 2.25rem;
  padding: 0 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--ft-radius-s);
  background: transparent;
  color: var(--ft-ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.bpm-val { cursor: pointer; }
.bpm-blank { color: var(--ft-ink-2); line-height: calc(2.25rem - 2px); }
.bpm-val:hover { border-color: var(--ft-line-strong); background: var(--ft-accent-soft); }
.bpm-val:focus-visible { outline: 3px solid var(--ft-focus); outline-offset: -3px; }
.bpm-val.is-selected { border-color: var(--ft-accent); background: var(--ft-accent-soft); font-weight: 700; }
.bpm-val.is-playing::before { content: ""; display: inline-block; width: 0.45em; height: 0.45em; margin-right: 0.4em; border-radius: 50%; background: var(--ft-accent); vertical-align: 0.1em; }
.bpm-val__unit { color: var(--ft-ink-2); font-size: var(--ft-text-xs); }
.ft-table td.bpm-usecell { width: 1%; padding: 2px 3px; text-align: right; }
/* Block-level, so a row with a Use button is exactly as tall as a row without one. */
.bpm-use, .bpm-use-ghost { display: flex; width: fit-content; min-height: 2.25rem; margin-left: auto; padding: 0 0.75rem; }
/* Stands in for a Use button while there is no tempo to use, so the columns keep their widths. */
.bpm-use-ghost { visibility: hidden; }
/* Two short lines at most, so a row whose tempo is out of range is no taller than a row with a Use button. */
.bpm-out { display: inline-block; color: var(--ft-ink-2); font-size: var(--ft-text-xs); line-height: 1.25; white-space: normal; text-align: right; }
/* The delay-time table has fixed column widths: its numbers come and go while a delay time is typed or needs
   fixing, and nothing in it may move when they do. */
[data-bpm-scroll="rev-cap"] > .bpm-table { table-layout: fixed; }
[data-bpm-scroll="rev-cap"] thead th:nth-child(1) { width: 48%; }
[data-bpm-scroll="rev-cap"] thead th:nth-child(2) { width: 27%; }
[data-bpm-scroll="rev-cap"] thead th:nth-child(3) { width: 25%; }
/* Room for two lines: the caption names the delay time, which can be long or (while it needs fixing) absent. */
#rev-cap { height: calc(2 * 1.4em + 2 * var(--ft-space-2)); }
.bpm-placeholder { color: var(--ft-ink-2); font-size: var(--ft-text-sm); }

/* Selected value ------------------------------------------------------------------------------- */
.bpm-playrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ft-space-1) var(--ft-space-2); margin-left: auto; }
.bpm-play { min-width: 6.5rem; }
.bpm-play .bpm-icon-stop, .bpm-play.is-playing .bpm-icon-play { display: none; }
.bpm-play.is-playing .bpm-icon-stop { display: block; }
.bpm-play.is-playing { border-color: var(--ft-accent); background: var(--ft-accent-soft); }
.bpm-readout__title { margin: calc(-1 * var(--ft-space-2)) 0 0; color: var(--ft-ink); font-size: var(--ft-text-md); font-weight: 650; line-height: 1.35; }
/* Two rows reserved, so switching tabs moves nothing below. */
.bpm-readout__chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--ft-space-2); margin: var(--ft-space-3) 0 0; padding: 0; list-style: none; min-height: calc(5rem + var(--ft-space-2)); }
.bpm-chip, .bpm-inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: center;
  column-gap: 0.25em;
  min-height: 2.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--ft-line-strong);
  border-radius: var(--ft-radius);
  background: var(--ft-surface);
  color: var(--ft-ink);
  font: inherit;
  font-size: var(--ft-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.bpm-chip:hover, .bpm-inline:hover { border-color: var(--ft-accent); background: var(--ft-accent-soft); }
.bpm-chip:focus-visible, .bpm-inline:focus-visible { outline: 3px solid var(--ft-focus); outline-offset: 2px; }
.bpm-chip__v { font-weight: 700; }
.bpm-chip__u { color: var(--ft-ink-2); }
.bpm-chip__n { color: var(--ft-ink-2); font-size: var(--ft-text-xs); }
.bpm-chip__n::before { content: ""; margin-left: 0.15em; }
.bpm-inline { min-height: 2.25rem; padding: 0.2rem 0.55rem; font-size: var(--ft-text-md); font-weight: 700; vertical-align: baseline; }
/* The line next to Play: two lines reserved, so a long "Playing …" sentence moves nothing. */
.bpm-playstatus { min-height: calc(2 * var(--ft-leading) * 1em); margin: var(--ft-space-3) 0 0; color: var(--ft-ink); }
.bpm-soundset { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ft-space-2); min-width: 0; margin: var(--ft-space-3) 0 0; padding: var(--ft-space-4) 0 0; border: 0; border-top: 1px solid var(--ft-line); }
/* The legend is floated so that it is one more row of the grid. No width: Safari kept "width: 100%" at the old
   value when the window got narrower (a phone turned back upright), and the page then scrolled sideways. */
.bpm-soundset > legend { float: left; margin: 0 0 var(--ft-space-1); padding: 0; }

/* Figures (inline SVG; colours from the chart tokens) ----------------------------------------- */
.bpm-fig { margin: var(--ft-space-4) 0 0; }
.bpm-fig__frame { position: relative; height: 84px; overflow: hidden; border: 1px solid var(--ft-line); border-radius: var(--ft-radius); background: var(--ft-plot-surface); }
.bpm-fig__frame--tall { height: 100px; }
.bpm-fig__frame > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.bpm-svg__bg { fill: var(--ft-plot-surface); }
.bpm-svg__grid { stroke: var(--ft-plot-grid); stroke-width: 1; }
.bpm-svg__fine { stroke: var(--ft-plot-grid); stroke-width: 1; stroke-dasharray: 2 3; }
.bpm-svg__bar, .bpm-svg__axis { stroke: var(--ft-plot-axis); stroke-width: 1.5; }
.bpm-svg__label { fill: var(--ft-plot-ink-2); font-family: var(--ft-font); font-size: 12px; }
.bpm-svg__src { fill: var(--ft-plot-ink); }
.bpm-svg__echo { fill: var(--ft-plot-1); stroke: var(--ft-plot-surface); stroke-width: 2; }
.bpm-svg__echo.is-onbeat { stroke: var(--ft-plot-ink); }
.bpm-svg__dot { fill: none; stroke: var(--ft-plot-axis); stroke-width: 2; }
.bpm-svg__shift { fill: none; stroke: var(--ft-plot-2); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 3 3; }
.bpm-svg__area { fill: var(--ft-plot-1); fill-opacity: 0.16; }
.bpm-svg__line, .bpm-svg__wave { fill: none; stroke: var(--ft-plot-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* More from this tempo ------------------------------------------------------------------------ */
.bpm-more { margin-top: var(--ft-space-4); }
.bpm-more__heading { margin: 0 0 var(--ft-space-1); }
.bpm-more__hint { margin: 0 0 var(--ft-space-3); }
.bpm-more__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--ft-space-4); align-items: start; }
/* Three columns of about the same height: delay time to BPM and compressor, tempo change and distance, video. */
.bpm-more__col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ft-space-4); align-content: start; min-width: 0; }
.bpm-more__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ft-space-4); align-content: start; }
.bpm-more__item > .ft-panel__title { margin-bottom: calc(-1 * var(--ft-space-1)); }
.bpm-dl { display: grid; gap: var(--ft-space-3); margin: 0; }
.bpm-dl dt { color: var(--ft-ink-2); font-size: var(--ft-text-xs); font-weight: 650; }
.bpm-dl dd { margin: 2px 0 0; color: var(--ft-ink); font-variant-numeric: tabular-nums; }
/* An answer keeps the height of the value button it shows, also while a placeholder stands in for it. */
.bpm-answer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em; min-height: 2.25rem; margin: 0; color: var(--ft-ink); font-variant-numeric: tabular-nums; }
.bpm-answer > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35em; min-height: 2.25rem; }
.bpm-sub { margin: 0; color: var(--ft-ink-2); font-size: var(--ft-text-sm); }
.bpm-fitlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ft-space-2); margin: var(--ft-space-1) 0 0; padding: 0; list-style: none; }
.bpm-fitlist li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.35em; color: var(--ft-ink); }
.bpm-fitlist .bpm-dl__k { flex: 0 0 100%; }
.bpm-dl__k { color: var(--ft-ink-2); font-size: var(--ft-text-sm); }
.bpm-fitrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ft-space-3); align-items: start; }
.bpm-swingbar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--ft-space-3) var(--ft-space-5); }
.bpm-swingbar .ft-field { flex: 0 1 15rem; }

/* The printed tempo sheet exists on paper only. */
.bpm-sheet { display: none; }

/* Touch: every value is a 44 px target; keyboard-only tips are left out. */
@media (pointer: coarse) {
  .bpm-val, .bpm-blank, .bpm-use, .bpm-use-ghost { min-height: var(--ft-target); }
  .bpm-blank { line-height: calc(var(--ft-target) - 2px); }
  .bpm-chip, .bpm-inline { min-height: var(--ft-target); }
  .bpm-inline { min-width: var(--ft-target); justify-content: center; }
  .bpm-msg--ask, .bpm-ask__btn { min-height: var(--ft-target); }
  .bpm-answer, .bpm-answer > span { min-height: var(--ft-target); }
  .bpm-readout__chips { min-height: calc(2 * var(--ft-target) + var(--ft-space-2)); }
  .bpm-kbd { display: none; }
}

/* Phones ---------------------------------------------------------------------------------------- */
@media (max-width: 40rem) {
  /* The two tiles in samples repeat what the Samples unit shows; on a phone the table comes sooner without them. */
  .bpm-stat--samples { display: none; }
  .bpm-stat__btn { padding: var(--ft-space-2) var(--ft-space-3); }
  .bpm-stat .ft-stat__value { font-size: var(--ft-text-lg); }
  .bpm-tablist .ft-tab { flex: 1 1 auto; justify-content: center; padding-inline: clamp(0.25rem, 2vw, 1rem); }
  /* Unit choice, then the table; the tips follow the table. Reading order in the page stays tip first. */
  .bpm-tabpanel:not([hidden]) { display: flex; flex-direction: column; gap: var(--ft-space-3); }
  .bpm-tabpanel > * { margin-block: 0; }
  .bpm-tablebar { display: contents; }
  .bpm-tablebar .ft-segmented__legend { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; float: none; }
  .bpm-tablebar .ft-segmented__option span { padding-inline: clamp(0.375rem, 2.6vw, 0.875rem); }
  .bpm-tablewrap { order: 1; }
  .bpm-scrollhint { order: 2; margin: calc(-1 * var(--ft-space-2)) 0 0; }
  .bpm-clickhint, .bpm-panelnote { order: 3; flex: none; max-width: none; }
  .bpm-fig { order: 4; }
  .bpm-actions .ft-btn { flex: 1 1 auto; }
  .bpm-table tbody th { padding: 0.3rem 0.5rem; }
  .bpm-val, .bpm-blank { padding: 0 0.4rem; }
  .bpm-note__name { display: block; margin-left: 0; }
}
/* Small phones (up to 400 px): the four columns of a table fit without scrolling. */
@media (max-width: 25rem) {
  .bpm-table { font-size: var(--ft-text-xs); }
  .bpm-table caption { padding-inline: var(--ft-space-2); font-size: var(--ft-text-xs); }
  .bpm-table thead th, .bpm-table tbody th, .bpm-table--small td { padding-inline: 0.375rem; }
  .ft-table td.bpm-cell, .ft-table td.bpm-usecell { padding: 1px; }
  .bpm-val, .bpm-blank { padding: 0 0.25rem; }
  .bpm-use, .bpm-use-ghost { padding: 0 0.5rem; }
  #reverb-table tbody th { white-space: normal; }
  .bpm-chip { padding: 0.4rem 0.45rem; font-size: var(--ft-text-xs); }
}
@media (max-width: 22.4rem) {
  .bpm-fields, .bpm-key { grid-template-columns: minmax(0, 1fr); }
  .bpm-tap { flex: 1 1 auto; }
  .bpm-tablebar .ft-segmented__option span { padding-inline: 0.3125rem; }
  /* 320 px: the numbers keep their size; the space around them goes. */
  .bpm-table thead th, .bpm-table tbody th, .bpm-table--small td { padding-inline: 0.25rem; }
  .bpm-val, .bpm-blank { padding: 0 1px; }
  .ft-table td.bpm-cell, .ft-table td.bpm-usecell { padding: 1px 0; }
  /* The spoken names under 1/4, 1/8 … and an unbroken "Pre-delay" heading cost the last few pixels. */
  #delay-table .bpm-note__name, #lfo-table .bpm-note__name { display: none; }
  #reverb-table thead th { white-space: normal; }
}

/* Forced colours: the selected value was marked by a fill and bold type only. */
@media (forced-colors: active) {
  .bpm-val.is-selected { forced-color-adjust: none; border-color: Highlight; background: Highlight; color: HighlightText; }
  .bpm-val.is-selected:focus-visible { outline-color: HighlightText; }
  .bpm-val.is-playing::before { background: currentColor; }
  .bpm-play.is-playing { border-color: Highlight; }
  .bpm-fig__frame { forced-color-adjust: none; }
}

/* Print: one page (A4 or Letter), the tempo sheet. Everything interactive and the help text stay on screen. */
@page { margin: 12mm; }
@media print {
  .bpm-workspace, .bpm-more, #bpm-link-note, #how-to-use, #worked-example, #how-it-works, #faq,
  .ft-toolhead__outcome, .ft-toolhead .ft-privacy, .ft-updated { display: none !important; }
  .ft-main { padding-bottom: 0; }
  .ft-toolhead { padding-block: 0 3pt; }
  .ft-toolhead__title { font-size: 12pt; letter-spacing: 0; }
  .bpm-sheet { display: block; color: #000; font-size: 9pt; line-height: 1.25; }
  .bpm-sheet__h { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bpm-sheet__title { margin: 0; font-size: 18pt; font-weight: 700; line-height: 1.15; }
  .bpm-sheet__sub { margin: 2pt 0 7pt; font-size: 9.5pt; }
  .bpm-sheet__table { width: 100%; margin: 0 0 8pt; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  .bpm-sheet__table caption { padding: 0 0 2pt; font-size: 10pt; font-weight: 700; text-align: left; }
  .bpm-sheet__table th, .bpm-sheet__table td { padding: 1.8pt 6pt; border-bottom: 0.5pt solid #999; font-weight: 400; text-align: right; white-space: nowrap; }
  .bpm-sheet__table thead th { border-bottom: 1pt solid #000; font-weight: 700; }
  .bpm-sheet__table th:first-child { padding-left: 0; font-weight: 700; text-align: left; white-space: normal; }
  .bpm-sheet__table td:nth-child(2n + 3) { color: #333; }
  .bpm-sheet__table tr { break-inside: avoid; }
  .bpm-sheet__pair { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 16pt; align-items: start; }
  .bpm-sheet__pair td:nth-child(n) { color: #000; }
  .bpm-sheet__foot { margin: 0; color: #333; font-size: 8pt; }
}