/* ===== BOOK MOVEMENT - how did each company's book move? ======================
   Prefix .bm-*.

   THE COLOURS ARE THE HOUSE'S AND NONE IS NEW.
     * ok / bad mean STATE here - a book that grew, a book that shrank - and each
       is always beside a word, a sign or an arrow, never alone.
     * --s1 / --s2 are the two series of the monthly chart (the base book and the
       SCI Dignity programme), each with a name in the legend and on the tooltip.
     * gold is chrome: the active tab, a selected radio, a link, the single-series
       bars. The lead band paints exactly ONE gold figure (.bm-bk.is-lead .bm-bk-v);
       scripts/lib/band-gold.js reads this file and enforces it.
   Every ink below sits on a token with a value in both themes, so nothing here is
   declared twice EXCEPT the band: it is dark in both themes, and its three
   band-local colours are the dark theme's own ok / bad / warn.

   THE BAND IS NOT IN base.css'S SHARED LIST (that file is not this page's), so
   its ground, wash, lift and brand-artwork swap are declared here - the same
   declarations the other eight bands share, in the same order. If base.css
   adds .bm-band to its lists, the block under "THE LEAD BAND" can go.
   =========================================================================== */

.bm-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ============================ THE TWO VIEWS ============================== */
/* The state is one class, `is-board`, added by the module. The chooser is
   emptied (not just hidden) when a book opens, so no grid is ever laid out
   inside a display:none ancestor. */
.bm-root .bm-boardview { display: none; }
.bm-root.is-board .bm-boardview { display: block; }
.bm-root.is-board .bm-chooser { display: none; }

.bm-bookbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 0 0 .85rem; }
.bm-back {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .3rem .7rem .3rem .55rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text-soft); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.bm-back:hover { background: var(--accent-weak); border-color: var(--accent-line); color: var(--text); }
.bm-back:focus-visible, .bm-co:focus-visible, .bm-seg-b:focus-visible, .bm-tab:focus-visible, .bm-by-b:focus-visible,
.bm-link:focus-visible, .bm-bk:focus-visible, .bm-wf-col:focus-visible, .bm-wf-col.is-static:focus-visible, .bm-cut-open:focus-visible,
.bm-cut-filter:focus-visible, .bm-pool-b:focus-visible, .bm-tier:focus-visible, .bm-band-chip:focus-visible,
.bm-tr-col:focus-visible, .bm-se-col:focus-visible, .bm-ew-col:focus-visible, .bm-m3:focus-visible, .bm-open:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* The company rail: one click to another book without going back through the
   question. A company this page does not measure is still a button (it says why
   when it opens) and is drawn dashed so it does not read as a measured book. */
.bm-corail { display: inline-flex; gap: .4rem; margin-left: auto; flex-wrap: wrap; }
.bm-co {
  display: inline-flex; align-items: center; margin: 0; padding: .28rem .65rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  transition: background .14s ease, border-color .14s ease;
}
.bm-co:hover { background: var(--surface-2); }
.bm-co.on { border-color: var(--accent); background: var(--accent-weak); }
.bm-co.is-na { border-style: dashed; }

/* ============================== THE LEAD BAND ============================ */
.bm-band {
  /* THE GROUND, THE GOLD WASH, THE DARK-THEME LIFT AND THE LOGO SWAP ARE base.css's (the shared dark band); what stays is this page's spacing and
     the dark theme's own ok / bad / warn, measured on #141310 and #1E1C17 - the band stays dark in both themes, so a light-theme --ok would be 3:1. */
  margin: 0 0 .85rem; padding: 1.1rem 1.35rem 1.15rem;
  --bm-up: #5BC27E; --bm-dn: #EE7C70; --bm-warn: #E4BC6C;
}

.bm-band-top { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.bm-band-fresh {
  margin-left: auto; display: inline-flex; align-items: center; gap: .35rem;
  padding: .16rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--shell-line);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: rgba(255, 255, 255, .72); cursor: help; white-space: nowrap;
}
.bm-band-fresh .bi { font-size: var(--fs-xs); opacity: .85; }
/* WHAT KIND OF MONEY THE BAND COUNTS, in words: earnings, sales or volume. Earnings is a solid pill; sales and volume are outlined
   (dashed for volume), so the three differ by SHAPE as well as by word and a reader never has to read the colour. */
.bm-kind {
  display: inline-flex; align-items: center; padding: .16rem .6rem; border-radius: 999px; cursor: help; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .01em; color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
}
.bm-kind.is-sales { background: transparent; border-color: rgba(255, 255, 255, .42); }
.bm-kind.is-volume, .bm-kind.is-expected { background: transparent; border-style: dashed; border-color: rgba(255, 255, 255, .42); }
.bm-kind:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; }
.bm-open > .bm-kind { margin-right: .5rem; font-size: var(--fs-xs); vertical-align: 1px; }
.bm-band-fresh.is-late { background: rgba(228, 188, 108, .13); border-color: rgba(228, 188, 108, .42); color: var(--bm-warn); }

.bm-band-body {
  display: grid; align-items: start; gap: 1.2rem 2.2rem;
  grid-template-columns: minmax(16rem, 30rem) minmax(0, 1fr);
}
.bm-lead { min-width: 0; }
.bm-kpis {
  display: grid; gap: .9rem 1.3rem; align-content: start; min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* The figures. A <button> where the figure opens its rows, a <div> where it
   does not; both read the same. */
.bm-bk {
  display: block; min-width: 0; margin: 0; padding: 0; border: 0; background: none;
  text-align: left; color: inherit; font: inherit; cursor: help; border-radius: 10px;
}
button.bm-bk { cursor: pointer; padding: .25rem .5rem; margin: -.25rem -.5rem; transition: background .14s ease; }
button.bm-bk:hover { background: rgba(255, 255, 255, .07); }
.bm-band .bm-bk:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; }
.bm-bk-v {
  display: block; font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.22;
  letter-spacing: -.015em; font-variant-numeric: tabular-nums; color: #FFFFFF; white-space: nowrap;
}
/* ONE figure is gold. A second would leave the band with no focal point. */
.bm-bk.is-lead .bm-bk-v { font-size: var(--fs-5xl); color: var(--gold-300); }
.bm-bk-l { display: block; margin-top: .18rem; font-size: var(--fs-xs); line-height: 1.35; color: rgba(255, 255, 255, .72); }
.bm-bk.is-lead .bm-bk-l { font-size: var(--fs-md); font-weight: var(--fw-medium); color: rgba(255, 255, 255, .86); }
.bm-bk-s { display: block; margin-top: .12rem; font-size: var(--fs-2xs); line-height: 1.4; color: rgba(255, 255, 255, .62); font-variant-numeric: tabular-nums; }
.bm-bk-s b { color: rgba(255, 255, 255, .88); font-weight: var(--fw-bold); }
.bm-bk.is-lead .bm-bk-s { font-size: var(--fs-xs); }

.bm-headline { margin: .85rem 0 0; max-width: 62ch; font-size: var(--fs-sm); line-height: 1.5; color: rgba(255, 255, 255, .78); cursor: help; }
.bm-open { margin: .6rem 0 0; max-width: 62ch; font-size: var(--fs-sm); line-height: 1.5; color: rgba(255, 255, 255, .72); cursor: help; }
.bm-open b { color: #FFFFFF; }
/* The note under the Messenger headline: it says what the sentence above counts that the page does not. */
.bm-headline-x { margin-top: .45rem; font-size: var(--fs-xs); color: rgba(255, 255, 255, .66); cursor: default; }

/* THE EXPRESS BAND, FOLDED. On the Claims tab the band is one line (the lead figure, its basis and the way
   back), so the first claims panel is on screen at 1366x768 without scrolling. The state is ONE class,
   `is-compact`, toggled by the module on the band itself - never a repaint, so nothing re-enters. The line is
   in the markup all the time and hidden otherwise; the figure in it is white because the one gold figure is
   the big one, which is hidden while the line shows. */
.bm-band-line { display: none; align-items: baseline; flex-wrap: wrap; gap: .25rem 1rem; }
.bm-band.is-compact .bm-band-line { display: flex; }
.bm-band.is-compact .bm-band-body, .bm-band.is-compact .bm-band-note { display: none; }
.bm-band.is-compact { padding-block: .8rem .9rem; }
.bm-band.is-compact .bm-band-top { margin-bottom: .55rem; }
.bm-band-line-v { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -.015em; font-variant-numeric: tabular-nums; color: #FFFFFF; }
.bm-band-line-t { font-size: var(--fs-sm); color: rgba(255, 255, 255, .78); font-variant-numeric: tabular-nums; }
.bm-band-line-t b { color: rgba(255, 255, 255, .92); font-weight: var(--fw-bold); }
/* A link on the dark band: the page's --accent-ink is a dark ink on a light ground and would vanish here. */
.bm-band .bm-band-line-b { margin-left: auto; color: rgba(255, 255, 255, .86); font-size: var(--fs-sm); }
.bm-band .bm-band-line-b:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; }
.bm-band .bm-chg.is-up { color: var(--bm-up); }
.bm-band .bm-chg.is-down { color: var(--bm-dn); }
.bm-band .bm-chg.is-flat { color: rgba(255, 255, 255, .72); }

.bm-band-note {
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 1rem 0 0; padding-top: .75rem;
  border-top: 1px solid var(--shell-line); font-size: var(--fs-xs); line-height: 1.55; color: rgba(255, 255, 255, .66);
}
.bm-band-src .bi { margin-right: .35rem; }
.bm-band-feed.is-late { color: var(--bm-warn); }
.bm-band-off { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1rem; border: 1px dashed var(--shell-line); border-radius: 10px; }
.bm-band-off > i { font-size: var(--fs-2xl); color: rgba(255, 255, 255, .72); }
.bm-band-off b { display: block; color: #FFFFFF; font-size: var(--fs-lg); }
.bm-band-off span { display: block; margin-top: .15rem; max-width: 70ch; font-size: var(--fs-sm); line-height: 1.5; color: rgba(255, 255, 255, .78); }

/* Express: the two bases side by side, inside the band. */
.bm-bases-w { margin-top: .9rem; }
.bm-band .bm-tbl { color: rgba(255, 255, 255, .86); }
.bm-band .bm-tbl th, .bm-band .bm-tbl td { border-bottom-color: var(--shell-line); }
.bm-band .bm-tbl thead th { color: rgba(255, 255, 255, .62); }
.bm-band .bm-tbl tbody th { color: rgba(255, 255, 255, .88); }
.bm-headline b { color: rgba(255, 255, 255, .92); }
.bm-band .bm-tbl tr.is-on th, .bm-band .bm-tbl tr.is-on td { background: rgba(255, 255, 255, .06); }
.bm-band .bm-tbl em { color: rgba(255, 255, 255, .62); }

/* ============================= TABS + TOOLBAR ============================ */
.bm-tabs { display: flex; gap: .2rem; margin: 0 0 .8rem; border-bottom: 1px solid var(--border); }
.bm-tab {
  margin: 0 0 -1px; padding: .5rem .95rem; border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--text-soft); font: inherit; font-size: var(--fs-md); font-weight: var(--fw-medium); cursor: pointer;
}
.bm-tab:hover { color: var(--text); }
.bm-tab.on { color: var(--text); border-bottom-color: var(--accent); font-weight: var(--fw-bold); }

.bm-toolbar { margin: 0 0 .85rem; }
.bm-tb { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem; }
.bm-tb-l { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-soft); }
.bm-win { width: auto; min-width: 14rem; }
.bm-tb-hint { margin-left: auto; font-size: var(--fs-xs); color: var(--text-soft); cursor: help; }
.bm-tb-hint .bi { margin-right: .25rem; }
.bm-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.bm-seg-b {
  margin: 0; padding: .3rem .8rem; border: 0; background: none; color: var(--text-soft);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer;
  transition: background .14s ease;
}
.bm-seg-b + .bm-seg-b { border-left: 1px solid var(--border); }
.bm-seg-b:hover { background: var(--surface-2); color: var(--text); }
.bm-seg-b.on { background: var(--accent-weak); color: var(--accent-ink); font-weight: var(--fw-bold); }
/* The volume views of Express sit beside the fee, quieter until chosen: they are for comparison, never the headline. */
.bm-seg-b.is-vol:not(.on) { font-weight: var(--fw-normal); }
#bmFilters:not(:empty) { margin-top: .6rem; }

/* ================================= PANELS ================================ */
.bm-body { padding: 1rem 1.1rem 1.05rem; }
.bm-lede { margin: 0 0 .9rem; max-width: 78ch; font-size: var(--fs-md); line-height: 1.5; color: var(--text-soft); }
.bm-fine { margin: .7rem 0 0; max-width: 78ch; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-soft); }
.bm-h { margin: 1rem 0 .4rem; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.bm-h:first-child { margin-top: 0; }
.bm-empty { margin: .6rem 0; padding: .9rem 1rem; border: 1px dashed var(--border); border-radius: 10px; font-size: var(--fs-md); color: var(--text-soft); }
.bm-empty-d { margin: 1rem; }
.bm-link {
  margin: 0; padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left;
}
.bm-link:hover { text-decoration-thickness: 2px; }
.bm-more { display: block; margin: .6rem 0 0; font-size: var(--fs-sm); }
.bm-warn { color: var(--bad-ink); }
.bm-na-p { margin: 0 0 .9rem; max-width: 70ch; font-size: var(--fs-lg); line-height: 1.55; color: var(--text); }
.bm-na { padding: 1.3rem 1.4rem; }

/* A change as a word and a sign, never a colour alone. */
.bm-chg { display: inline-flex; align-items: center; gap: .2rem; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bm-chg .bi { font-size: var(--fs-xs); }
.bm-chg.is-up { color: var(--ok-ink); }
.bm-chg.is-down { color: var(--bad-ink); }
.bm-chg.is-flat { color: var(--text-soft); }

/* Where it comes from and how fresh it is, under every panel. */
.bm-prov {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .9rem; margin: 1rem 0 0; padding-top: .6rem;
  border-top: 1px solid var(--border-soft); font-size: var(--fs-xs); line-height: 1.5; color: var(--text-soft); cursor: help;
}
.bm-prov .bi { margin-right: .3rem; }
.bm-prov-b { font-weight: var(--fw-medium); }
.bm-prov-a.is-late { color: var(--warn-ink); font-weight: var(--fw-bold); }

/* A figure that is not built yet: grey, with the sentence, never a zero. */
.bm-off {
  display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1rem; border: 1px dashed var(--border);
  border-radius: 10px; background: var(--inset); color: var(--text-soft);
}
.bm-off > i { font-size: var(--fs-2xl); }
.bm-off b { display: block; color: var(--text); font-size: var(--fs-lg); }
.bm-off span { display: block; margin-top: .15rem; max-width: 70ch; font-size: var(--fs-md); line-height: 1.5; }

/* ================================ THE BRIDGE ============================= */
.bm-wf { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; align-items: stretch; }
.bm-wf-col {
  display: flex; flex-direction: column; align-items: stretch; min-width: 0; margin: 0; padding: .3rem .2rem .4rem;
  border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: center;
}
button.bm-wf-col { cursor: pointer; transition: background .14s ease; }
button.bm-wf-col:hover { background: var(--accent-weak); }
.bm-wf-col.is-static { cursor: help; }
.bm-wf-val { display: block; min-height: 1.5em; font-size: var(--fs-lg); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.bm-wf-val.is-up { color: var(--ok-ink); }
.bm-wf-val.is-down { color: var(--bad-ink); }
.bm-wf-plot { --run: 0%; position: relative; display: block; height: 11rem; margin: .3rem 0 .5rem; border-bottom: 1px solid var(--border); }
/* The Messenger bridge sits beside the taller programme panel. Its card stretches to that height, so the
   bars take the extra height instead of leaving a band of white under the chart (the plot only ever grows
   past 11rem; it never shrinks below it). */
.bm-panel.h-100 { display: flex; flex-direction: column; }
.bm-panel.h-100 > .bm-body { flex: 1 1 auto; }
#bmMBridge { display: flex; flex-direction: column; }
#bmMBridge .bm-wf { flex: 1 1 auto; }
#bmMBridge .bm-wf-plot { flex: 1 1 11rem; height: auto; min-height: 11rem; }
/* One zero line runs through the middle of the plot; gains grow up from it and losses grow down from it. */
.bm-wf-plot { border-bottom: 0; }
.bm-wf-plot::before { content: ''; position: absolute; left: -.15rem; right: -.15rem; top: 50%; border-top: 2px solid var(--text-dim); pointer-events: none; }
.bm-wf-bar { position: absolute; left: 18%; right: 18%; display: block; min-height: 3px; transform-origin: 50% 100%; }
.bm-wf-bar.is-up { background: var(--ok); border-radius: 5px 5px 0 0; }
.bm-wf-bar.is-down { background: var(--bad); border-radius: 0 0 5px 5px; transform-origin: 50% 0; }
.bm-wf-val.is-total { font-size: var(--fs-xl); }
.bm-wf-net { margin: .7rem 0 0; font-size: var(--fs-md); color: var(--text-soft); }
.bm-wf-net b { color: var(--text); }
.bm-wf-net .is-up { color: var(--ok-ink); font-weight: var(--fw-bold); }
.bm-wf-net .is-down { color: var(--bad-ink); font-weight: var(--fw-bold); }
.bm-wf-name { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text); }
.bm-wf-n { display: block; margin-top: .1rem; font-size: var(--fs-xs); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.bm-wf-note { margin: .8rem 0 0; font-size: var(--fs-sm); color: var(--text-soft); }

.bm-gx .bm-wf-bar { animation: bm-grow .55s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
.bm-gx .bm-tr-seg { animation: bm-grow .5s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 14ms); }
.bm-gx .bm-ew-bar { animation: bm-grow .55s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.bm-cut-fill.bm-gx { animation: bm-grow-x .45s var(--ease-out) backwards; transform-origin: 0 50%; }
@keyframes bm-grow { from { transform: scaleY(0); } }
@keyframes bm-grow-x { from { transform: scaleX(0); } }

/* the same numbers as a table, for a screen reader and for anyone who wants them */
.bm-data { margin: .9rem 0 0; font-size: var(--fs-sm); }
.bm-data > summary { width: fit-content; color: var(--accent-ink); cursor: pointer; }
.bm-data > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bm-data .bm-tbl { margin-top: .6rem; }

.bm-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.bm-tbl th, .bm-tbl td { padding: .38rem .55rem; border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: baseline; font-weight: var(--fw-normal); }
.bm-tbl thead th { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .03em; color: var(--text-soft); white-space: nowrap; }
.bm-tbl tbody th { font-weight: var(--fw-medium); color: var(--text); }
.bm-tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bm-tbl em { font-style: normal; color: var(--text-soft); font-size: var(--fs-xs); }
.bm-tbl button.bm-link { font-variant-numeric: tabular-nums; }

/* =============================== THE PROGRAMME =========================== */
.bm-pg { margin: 0 0 .7rem; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.bm-pg.is-on { border-color: var(--accent); background: var(--accent-weak); }
.bm-pg-h { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; font-size: var(--fs-md); }
.bm-pg-v { margin-top: .15rem; font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: -.015em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.bm-pg-s { font-size: var(--fs-sm); color: var(--text-soft); }
.bm-pg-m { display: flex; flex-wrap: wrap; gap: .15rem .9rem; margin-top: .45rem; font-size: var(--fs-xs); color: var(--text-soft); }
.bm-pg-m b { color: var(--text); font-variant-numeric: tabular-nums; }
.bm-pg-reset { margin: 0 0 .7rem; font-size: var(--fs-sm); }
.bm-m3 { margin: .2rem 0 0; padding: .7rem .85rem; border-left: 3px solid var(--accent); background: var(--inset); border-radius: 0 10px 10px 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-soft); cursor: help; }
.bm-m3 b { color: var(--text); }
.bm-slice { margin: .2rem 0 .7rem; }
.bm-slice b { color: var(--text); }
.bm-ramp-note { margin-top: .6rem; }

/* ================================== THE CUTS ============================= */
.bm-by { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .8rem; }
.bm-by-b {
  margin: 0; padding: .28rem .8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text-soft); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer;
}
.bm-by-b:hover { background: var(--surface-2); color: var(--text); }
.bm-by-b.on { background: var(--accent-weak); border-color: var(--accent); color: var(--accent-ink); font-weight: var(--fw-bold); }
.bm-cut-head, .bm-cut-row {
  display: grid; align-items: center; gap: .4rem .9rem; padding: .3rem .5rem;
  grid-template-columns: minmax(9rem, 1.1fr) minmax(10rem, 2.6fr) 6rem 5rem 5.5rem 2.2rem;
}
.bm-cut-head { border-bottom: 1px solid var(--border); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .03em; color: var(--text-soft); }
.bm-cut-head > span:nth-child(n+3):not(:last-child) { text-align: right; }
.bm-cut-row { border-bottom: 1px solid var(--border-soft); }
.bm-cut-row.is-on { background: var(--accent-weak); }
.bm-cut-c { min-width: 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.bm-cut-n { overflow: hidden; }
.bm-cut-open {
  display: block; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; color: var(--text);
  font: inherit; font-weight: var(--fw-medium); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bm-cut-open:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.bm-cut-bar { display: grid; grid-template-columns: minmax(0, 1fr) 5.4rem; align-items: center; gap: .5rem; }
.bm-cut-bar b { font-weight: var(--fw-bold); text-align: right; }
.bm-cut-fill { display: block; height: .62rem; border-radius: 999px; background: var(--accent); min-width: 2px; }
.bm-cut-chg, .bm-cut-nrr, .bm-cut-loc { text-align: right; }
.bm-cut-f { text-align: center; }
.bm-cut-filter {
  display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; margin: 0; padding: 0; border: 1px solid transparent;
  border-radius: 8px; background: none; color: var(--text-soft); cursor: pointer; transition: background .14s ease, color .14s ease;
}
.bm-cut-filter:hover { background: var(--accent-weak); color: var(--accent-ink); }
.bm-cut-filter.on { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-weak); }

/* ================================ THE TREND ============================== */
.bm-tr-legend, .bm-ch-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 0 0 .6rem; font-size: var(--fs-xs); color: var(--text-soft); }
.bm-tr-legend span, .bm-ch-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.bm-sw { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; }
.bm-sw.is-base { background: var(--s1); }
.bm-sw.is-prog { background: var(--s2); }
.bm-sw.is-part { background: var(--s1); background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .6) 0 2px, transparent 2px 4px); }
.bm-sw.is-new { background: var(--accent); }
.bm-sw.is-mig { background: var(--text-dim); }
.bm-tr { display: flex; align-items: stretch; gap: 3px; height: 13.5rem; padding-bottom: .1rem; border-bottom: 1px solid var(--border); }
.bm-tr-col { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; height: 100%; border-radius: 4px; cursor: help; }
.bm-tr-col:hover { background: var(--accent-weak); }
.bm-tr-plot { display: flex; flex-direction: column-reverse; justify-content: flex-start; flex: 1 1 auto; min-height: 0; }
.bm-tr-seg { display: block; width: 100%; transform-origin: 50% 100%; min-height: 0; }
.bm-tr-seg.is-base { background: var(--s1); }
.bm-tr-seg.is-prog { background: var(--s2); border-radius: 3px 3px 0 0; }
.bm-tr-col.is-part .bm-tr-seg { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .6) 0 2px, transparent 2px 4px); }
.bm-tr-x { position: relative; display: block; height: 1.5rem; margin-top: .25rem; font-size: var(--fs-2xs); line-height: 1.2; color: var(--text-soft); text-align: center; white-space: nowrap; overflow: visible; }
/* The year on the axis ('23) is a label people read: --text-dim measures 3.76:1 on the card in light mode, --text-soft clears AA. */
.bm-tr-x em { font-style: normal; color: var(--text-soft); margin-left: .1rem; }
.bm-tr { margin-bottom: 1.9rem; }

/* ============================ THE SHAPE OF THE YEAR ====================== */
.bm-se { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .15rem; }
.bm-se-col { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: .2rem 0 .3rem; border-radius: 6px; cursor: help; }
.bm-se-col:hover { background: var(--accent-weak); }
.bm-se-plot { position: relative; display: block; width: 100%; height: 7.5rem; }
.bm-se-plot::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--border); }
.bm-se-bar { position: absolute; left: 22%; right: 22%; display: block; min-height: 2px; background: var(--accent); }
.bm-se-bar.is-up { bottom: 50%; border-radius: 3px 3px 0 0; }
.bm-se-bar.is-down { top: 50%; border-radius: 0 0 3px 3px; }
.bm-se-v { display: block; margin-top: .25rem; font-size: var(--fs-2xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--text); }
.bm-se-m { display: block; font-size: var(--fs-2xs); color: var(--text-soft); }
.bm-se-col.is-peak .bm-se-m, .bm-se-col.is-low .bm-se-m { font-weight: var(--fw-bold); color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

/* ================================ WHO TO CALL ============================ */
.bm-pools { display: grid; gap: .8rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 1.1rem; }
.bm-pool { min-width: 0; padding: .8rem .9rem .85rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.bm-pool-b { display: block; width: 100%; margin: 0; padding: .1rem; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bm-pool-b:hover { background: var(--accent-weak); }
.bm-pool-v { display: block; font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: -.015em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.bm-pool-l { display: block; margin-top: .1rem; font-size: var(--fs-md); font-weight: var(--fw-bold); }
.bm-pool-s { display: block; margin-top: .15rem; font-size: var(--fs-xs); line-height: 1.45; color: var(--text-soft); }
.bm-pool-s b { color: var(--text); }
.bm-pool-r { margin: .5rem 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-soft); }
.bm-pool-flat { padding: .5rem .6rem; border: 1px solid var(--border); background: var(--surface-2); }
/* A tile whose OWN source is not built: dashed and grey, with that source's sentence; the others stay drawn. */
.bm-pool.is-off { border-style: dashed; background: transparent; }
.bm-pool.is-off .bm-pool-v { color: var(--text-dim); }
.bm-pool-lists { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bm-mini { margin: 0; padding: 0; list-style: none; }
.bm-mini li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .05rem .8rem; padding: .4rem 0; border-bottom: 1px solid var(--border-soft); }
.bm-mini .bm-nm { grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-mini b { grid-column: 2; grid-row: 1; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.bm-mini-m { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--text-soft); }
.bm-nm { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text); text-decoration: none; }
a.bm-nm:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.bm-cd { display: block; font-size: var(--fs-xs); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.bm-bands { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .5rem; }
.bm-band-chip { margin: 0; padding: .2rem .65rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-soft); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.bm-band-chip:hover { background: var(--accent-weak); }
.bm-band-chip.on { background: var(--accent-weak); border-color: var(--accent); color: var(--accent-ink); font-weight: var(--fw-bold); }
.bm-band-chip b { font-variant-numeric: tabular-nums; }
.bm-tiers { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .3rem; }
.bm-tier { display: inline-flex; flex-direction: column; align-items: flex-start; margin: 0; padding: .35rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; text-align: left; }
.bm-tier:hover { background: var(--accent-weak); border-color: var(--accent-line); }
.bm-tier-m { font-size: var(--fs-xs); color: var(--text-soft); }
.bm-tier b { font-size: var(--fs-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: 1.2; }
.bm-tier-a { font-size: var(--fs-2xs); color: var(--text-soft); }

/* ============================== NEW CUSTOMERS ============================ */
.bm-ch { max-width: 62rem; margin: 0 0 1rem; }
.bm-ch-row { display: grid; align-items: center; gap: .3rem 1rem; padding: .3rem 0; border-bottom: 1px solid var(--border-soft); grid-template-columns: 6.5rem minmax(8rem, 18rem) repeat(3, minmax(6.5rem, 9rem)); }
.bm-ch-y { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.bm-ch-y em { font-style: normal; font-weight: var(--fw-normal); color: var(--text-soft); font-size: var(--fs-xs); }
.bm-ch-bar { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bm-ch-new, .bm-ch-mig { display: block; height: .5rem; border-radius: 999px; min-width: 2px; }
.bm-ch-new { background: var(--accent); }
.bm-ch-mig { background: var(--text-dim); }
.bm-ch-n { font-size: var(--fs-xs); color: var(--text-soft); font-variant-numeric: tabular-nums; text-align: right; cursor: help; }
.bm-ch-n b { color: var(--text); font-size: var(--fs-sm); }
.bm-coh { margin-top: .4rem; }

/* ================================= EXPRESS =============================== */
.bm-ew { display: flex; align-items: stretch; gap: .5rem; height: 12.5rem; margin: 0 0 1rem; }
.bm-ew-col { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; text-align: center; border-radius: 8px; cursor: help; }
.bm-ew-col:hover { background: var(--accent-weak); }
.bm-ew-v { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bm-ew-plot { position: relative; display: flex; flex: 1 1 auto; align-items: flex-end; justify-content: center; min-height: 0; margin: .25rem 0; border-bottom: 1px solid var(--border); }
.bm-ew-bar { display: block; width: 62%; border-radius: 4px 4px 0 0; background: var(--text-dim); transform-origin: 50% 100%; min-height: 2px; }
.bm-ew-bar.is-now { background: var(--accent); }
.bm-ew-x { display: block; font-size: var(--fs-xs); color: var(--text-soft); }
.bm-fn-wrap { overflow-x: auto; }
.bm-fn { min-width: 40rem; }

/* ============================== THE DRILL DIALOG ========================= */
.bm-wide { max-width: min(78rem, calc(100vw - 2rem)); }
.bm-drill-h { align-items: flex-start; }
.bm-drill-hd { min-width: 0; }
.bm-drill-what { margin-top: .25rem; max-width: 80ch; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-soft); }
.bm-drill-bar { padding: .6rem 1rem; border-bottom: 1px solid var(--border-soft); }
.bm-drill-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.bm-drill-tools .form-select { width: auto; }
.bm-drill-n { margin-left: auto; font-size: var(--fs-sm); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.bm-dt-wrap { overflow-x: auto; }
.bm-dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.bm-dt th, .bm-dt td { padding: .45rem .7rem; border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: top; }
.bm-dt thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .03em; color: var(--text-soft); white-space: nowrap; border-bottom: 1px solid var(--border); }
.bm-dt .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bm-dt td { font-variant-numeric: tabular-nums; }
.bm-nmc { min-width: 14rem; max-width: 24rem; }
.bm-dt mark, .bm-nm mark { background: var(--accent-weak); color: inherit; border-radius: 3px; }
.bm-drill-foot { padding: .7rem 1rem .9rem; border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-soft); }
.bm-drill-sum b { color: var(--text); }
.bm-drill-rec { margin-top: .4rem; }
.bm-rec { display: inline-flex; align-items: center; gap: .35rem; }
.bm-rec.is-ok { color: var(--ok-ink); }
.bm-rec.is-bad { padding: .35rem .6rem; border-radius: 8px; background: var(--bad-weak); color: var(--bad-ink); }
.bm-drill-pg { margin-top: .5rem; }
.bm-pager { display: inline-flex; align-items: center; gap: .6rem; }
.bm-pager-n { font-variant-numeric: tabular-nums; }

/* ================================ RESPONSIVE ============================= */
@media (max-width: 1199.98px) {
  .bm-band-body { grid-template-columns: minmax(0, 1fr); }
  .bm-kpis { grid-template-columns: repeat(auto-fit, minmax(9.2rem, 1fr)); }
  .bm-pools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899.98px) {
  .bm-pool-lists { grid-template-columns: minmax(0, 1fr); }
  .bm-ch-row { grid-template-columns: 6.5rem minmax(6rem, 1fr); }
  .bm-ch-row .bm-ch-n { grid-column: 2; text-align: left; }
  .bm-cut-head, .bm-cut-row { grid-template-columns: minmax(7rem, 1fr) minmax(6rem, 1.4fr) 5rem 2rem; }
  .bm-cut-nrr, .bm-cut-loc, .bm-cut-head > span:nth-child(4), .bm-cut-head > span:nth-child(5) { display: none; }
}

/* ============================== REDUCED MOTION =========================== */
/* Every animation here is an entrance, and none of these elements rests at
   opacity 0, so there is nothing to force visible - the state, without the
   travel. */
@media (prefers-reduced-motion: reduce) {
  .bm-gx .bm-wf-bar, .bm-gx .bm-tr-seg, .bm-gx .bm-ew-bar, .bm-cut-fill.bm-gx { animation: none; }
  .bm-back, .bm-co, .bm-seg-b, .bm-wf-col, .bm-bk, .bm-cut-filter { transition: none; }
}

/* the panels, the table that holds the two bases, the cut table and the window span:
   each is a class the script emits, so each carries the one declaration it needs. */
.bm-panel { min-width: 0; }
.bm-bases { margin-bottom: 0; }
/* The first column of the band's three views holds a full name ("Volume advanced on closed claims"): it must not wrap to a sliver. */
.bm-bases tbody th { min-width: 8.5rem; }
.bm-undated { cursor: help; }
.bm-cut { margin-top: .2rem; }
.bm-prov-w { font-weight: var(--fw-medium); }

/* ===== EXPORT ===== */
/* A list's own download: a quiet text button beside its heading, and a real button in the
   dialog's toolbar. Both are Tab stops with the app's tooltip saying what the file holds. */
.bm-exp-s {
  margin-left: .7rem; padding: .1rem .5rem; border: 1px solid var(--border-soft); border-radius: 6px;
  background: transparent; color: var(--text-soft); font-size: var(--fs-xs); font-weight: var(--fw-medium);
  letter-spacing: 0; text-transform: none; cursor: pointer;
}
.bm-exp-s:hover { background: var(--accent-weak); color: var(--text); border-color: var(--accent-line); }
.bm-exp-s:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bm-exp { margin-left: auto; }