/* ============================================================================
   Benchmark Review — the whole visual system for /benchmark and /benchmark/*

   Self-contained on purpose. These two pages load nothing else: the review
   surface was designed from the ground up and inheriting the old shell would
   have meant fighting it rule by rule, while any change here would have
   leaked onto the valuation pages that used to share it. Those pages were
   removed on 2026-09-17 and styles.css now dresses only the landing card, but
   the property stands — this file carries everything the benchmark markup
   uses, the app chrome, the login and loading screens, buttons, tabs, tables
   and toasts, alongside the `bm-` components.

   The register is an institutional finance tool: paper-light by default, navy
   ink, one restrained blue doing the work a neon accent used to do, hairline
   rules instead of glows, and numerals set in tabular figures everywhere a
   column of them has to be scanned. Nothing here fluoresces. The earlier
   "terminal" treatment — near-black ground, engineering grid, gradient
   monogram, glowing tab underline, monospaced money — was read as high-tech
   rather than professional and has been taken out deliberately. Please don't
   put it back.

   Two themes, both fully specified. **Dark is the default** (reviewer call,
   2026-09-17 — it was light until then); light is the one the design was
   first drawn for and remains a complete, equally-finished alternative, not
   an afterthought. The system preference is not consulted: the header toggle
   writes an explicit choice, and that is the only thing that selects light.
   Every colour is a token — there is no hard-coded hex below the token block,
   so a third theme is a third `[data-theme]` rule and nothing else.

   Signal hierarchy is the one thing here that is not a style choice. Conflict
   is the primary review signal and owns the loudest colour. Restated is a
   deliberately quieter second tier (D11/D21 — roughly half are fiscal-year
   shifts) and must never compete with it. Duplicate-ingestion flags are
   quieter still. Confidence rides along on every sourced value as a mark, not
   a colour alone, so it survives greyscale and colour-blindness.
   ========================================================================= */

/* ── Tokens ───────────────────────────────────────────────────────────────
   Dark is the base palette (reviewer call, 2026-09-17), so a viewer with no
   stored choice lands on it whatever the operating system prefers. The light
   palette is a token override once below, for the explicit choice the header
   toggle writes. There is deliberately no `prefers-color-scheme` arm: a
   default that the OS could quietly overrule is not a default.

   The blue is the only chromatic accent in the chrome. Everything else that
   carries colour is carrying *meaning* — a conflict, a confidence, a scale
   warning — which is why the accent has to stay quiet enough never to be
   mistaken for one of them.
   ------------------------------------------------------------------------ */
:root {
    color-scheme: dark;

    /* Slate-navy rather than near-black: it belongs to the same family as
       the light palette, reads as the lights-down version of the same tool,
       and keeps every signal colour at the same rank. */
    --bg:            #0f151f;
    --surface:       #151d29;
    --surface-2:     #1a2331;
    --surface-3:     #202b3b;
    --surface-hover: #1d2836;

    --line:          #2a3546;
    --line-soft:     #202a38;
    --line-strong:   #3a4860;

    --text:          #e5ecf5;
    --text-dim:      #a4b2c6;
    --text-mute:     #7e8ea5;
    --text-faint:    #56657a;

    --acc:           #6ea7e8;
    --acc-soft:      rgba(110, 167, 232, 0.13);
    --acc-line:      rgba(110, 167, 232, 0.34);
    --acc-2:         #4ebdb2;
    --acc-2-soft:    rgba(78, 189, 178, 0.13);

    /* Signals. Order of loudness is the review hierarchy, not taste. */
    --conflict:      #ec6b78;
    --conflict-soft: rgba(236, 107, 120, 0.14);
    --conflict-line: rgba(236, 107, 120, 0.36);
    --restated:      #a794ee;
    --restated-soft: rgba(167, 148, 238, 0.13);
    --computed-soft: rgba(150, 168, 190, 0.13);  /* ADR-0054 computed cell */
    --revised:       #e0a63c;
    --revised-soft:  rgba(224, 166, 60, 0.13);
    --warn:          #e4ad46;
    --warn-soft:     rgba(228, 173, 70, 0.12);
    --warn-line:     rgba(228, 173, 70, 0.32);
    --ok:            #4ec48c;
    --ok-soft:       rgba(78, 196, 140, 0.13);
    --dupe:          #7e8ea5;
    --dupe-soft:     rgba(126, 142, 165, 0.14);

    /* Chart series (S11, the reviewer's pick of three candidates,
       2026-09-25): the dataviz reference hues S5-S9 used (blue / orange /
       green-teal), re-stepped where they were weak. Revenue keeps the
       reference blue; EBITDA is a deeper, more amber orange, 13.0 from
       --conflict (was 9.6); the margin is darker and a touch bluer, 16.6
       from --ok (was 11.8). Validated all-pairs for this surface
       (scripts/validate_palette.js --pairs all: CVD ΔE ≥ 12.2, normal
       ≥ 17.7, all ≥ 3:1 on --surface). Identity, never status: the chart
       cards draw no status colour, so the 13.0 holds by placement. Fixed
       order; a chart never repaints them. (S5-S9: #3987e5 / #d95926 /
       #199e70; S10's tonal #256bb1 / #46a0c4 / #cb6440.) */
    --chart-1:       #3987e5;
    --chart-2:       #c3610d;
    --chart-3:       #0a8e7a;

    --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md:     0 10px 28px -16px rgba(0, 0, 0, 0.65);
    --shadow-lg:     0 26px 60px -24px rgba(0, 0, 0, 0.75);
    --edge:          inset 0 1px 0 rgba(255, 255, 255, 0.035);


    --r-sm: 3px;
    --r:    5px;
    --r-lg: 8px;

    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
    /* Mono is for machine strings only — entity ids, file paths, cited pages,
       dates, the verbatim line quoted out of a PDF. Money and counts are set
       in the text face with tabular figures, which is what a financial table
       looks like; setting them in mono was half of what read as a terminal. */
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
            Consolas, monospace;

    --header-h: 54px;

    /* Column geometry for the two financial grids. Declared here so the table
       width and the <col> widths are arithmetic on the same numbers — see
       .bm-rev-table for why the width cannot be left to `auto`. */
    --bm-rev-label-w: 190px;
    --bm-rev-col-w:   118px;
    --bm-rev-sep-w:    14px;
    --bm-fin-label-w: 150px;
    --bm-fin-col-w:   108px;

    /* Column geometry for the two company tables (Company metrics, Entry /
       exit): one width per metric kind. The server emits how many columns of
       each kind a table has as --bm-co-<kind>, and .bm-company-table's width
       is arithmetic on the same tokens. */
    --bm-co-company-w: 230px;
    --bm-co-money-w:   118px;
    --bm-co-ratio-w:    88px;
    --bm-co-date-w:    100px;
    --bm-co-text-w:    168px;
    --bm-co-bool-w:     88px;
    --bm-co-num-w:      76px;
    --bm-co-src-w:     128px;

    /* Column geometry for the summary table (S2), the same arithmetic: one
       width per column kind, the server emits the counts as --bm-sum-<kind>,
       and .bm-sum-table's width is computed from both. Ratio and percentage
       columns are wide enough for a figure plus two badges on the line below
       (`FY` `FY2023`); widen a token, never a cell. */
    --bm-sum-company-w: 220px;
    --bm-sum-exclude-w:  62px;
    --bm-sum-pct-w:      82px;
    --bm-sum-ratio-w:    82px;
    --bm-sum-money-w:    92px;
    --bm-sum-count-w:    82px;
    --bm-sum-sentiment-w: 96px;
}

/* The light palette: paper-light ground, navy ink, the design as it was first
   drawn. It is the explicit choice only — the header toggle sets
   data-theme="light" and the <head> script replays it before first paint. */
:root[data-theme="light"] {
    color-scheme: light;

    --bg:            #eef1f6;
    --surface:       #ffffff;
    --surface-2:     #f6f8fb;
    --surface-3:     #edf1f7;
    --surface-hover: #f3f7fc;

    --line:          #d7dee9;
    --line-soft:     #e7ecf3;
    --line-strong:   #b6c2d2;

    --text:          #0f1c2e;
    --text-dim:      #42536b;
    --text-mute:     #6b7d95;
    --text-faint:    #9aa8bb;

    --acc:           #1a4f8a;
    --acc-soft:      rgba(26, 79, 138, 0.08);
    --acc-line:      rgba(26, 79, 138, 0.32);
    --acc-2:         #146b68;
    --acc-2-soft:    rgba(20, 107, 104, 0.10);

    --conflict:      #b0263a;
    --conflict-soft: rgba(176, 38, 58, 0.09);
    --conflict-line: rgba(176, 38, 58, 0.32);
    --restated:      #6a54ad;
    --restated-soft: rgba(106, 84, 173, 0.10);
    --computed-soft: rgba(90, 108, 130, 0.10);
    --revised:       #a3650d;
    --revised-soft:  rgba(163, 101, 13, 0.11);
    --warn:          #96610c;
    --warn-soft:     rgba(150, 97, 12, 0.10);
    --warn-line:     rgba(150, 97, 12, 0.28);
    --ok:            #0f6b48;
    --ok-soft:       rgba(15, 107, 72, 0.10);
    --dupe:          #67788e;
    --dupe-soft:     rgba(103, 120, 142, 0.11);

    /* Chart series, light steps of the same three (all-pairs CVD ΔE ≥ 12.4,
       normal ≥ 17.4, all ≥ 3:1 on white). The margin clears 3:1 now (3.60;
       S5-S9's #1baf7a was 2.82); nearest status is revenue, 11.7 from
       --restated, held by placement. (S5-S9: #2a78d6 / #eb6834 / #1baf7a;
       S10's tonal #165695 / #489bcd / #c45e39.) */
    --chart-1:       #2a78d6;
    --chart-2:       #e8651d;
    --chart-3:       #049886;

    /* Barely there on purpose: on a paper-light surface a card reads from its
       rule, not from a drop shadow. */
    --shadow-sm:     0 1px 1px rgba(16, 32, 56, 0.04);
    --shadow-md:     0 10px 26px -18px rgba(16, 32, 56, 0.35);
    --shadow-lg:     0 26px 60px -28px rgba(16, 32, 56, 0.40);
    /* A no-op shadow rather than `none`: it is composed with --shadow-* in a
       single box-shadow list, and `none` inside a list invalidates the lot. */
    --edge:          inset 0 0 0 0 rgba(0, 0, 0, 0);
}

/* ── Reset + page ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body.bm-app {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    /* Flat ground. The previous design laid a faint engineering grid over
       the page; it was the single loudest "technical instrument" cue and the
       first thing to go. */
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: hidden;
}

.bm-app h1, .bm-app h2, .bm-app h3, .bm-app h4 {
    font-weight: 600;
    letter-spacing: -0.014em;
    line-height: 1.25;
}

/* Every number in this module is read down a column, so tabular figures are
   the default and proportional ones the exception. */
.bm-app { font-variant-numeric: tabular-nums; }

.bm-app a { color: var(--acc); text-decoration: none; }
.bm-app a:hover { text-decoration: underline; }

.bm-app code {
    font-family: var(--mono);
    font-size: 0.86em;
    color: var(--text-dim);
}

.bm-app :focus-visible {
    outline: 2px solid var(--acc);
    outline-offset: 2px;
    border-radius: 3px;
}

.bm-app ::selection { background: var(--acc-soft); }

/* Scrollbars, so the dark theme does not sprout a bright white gutter. */
.bm-app * { scrollbar-color: var(--line) transparent; scrollbar-width: thin; }
.bm-app *::-webkit-scrollbar { width: 10px; height: 10px; }
.bm-app *::-webkit-scrollbar-track { background: transparent; }
.bm-app *::-webkit-scrollbar-thumb {
    background: var(--line);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 6px;
}
.bm-app *::-webkit-scrollbar-thumb:hover { background-color: var(--text-faint); }

/* ── Utilities the shared JS emits ────────────────────────────────────────── */
.hidden      { display: none !important; }
.text-center { text-align: center; }
.text-muted  { color: var(--text-mute); }
.mt-1        { margin-top: 1rem; }
.mb-1        { margin-bottom: 1rem; }

/* ── App chrome ───────────────────────────────────────────────────────────── */
.header {
    position: sticky;
    top: 0;
    z-index: 60;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.5rem;
    /* Opaque and plainly ruled. The frosted, saturating bar and the gradient
       hairline under it were the chrome's two most decorative moments; a
       finance tool wants a masthead, not a HUD. */
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

.header-left  { display: flex; align-items: center; gap: 1.5rem; min-width: 0; }
.header-right { display: flex; align-items: center; gap: 0.5rem; }

.header-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 650;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text);
}

.header-brand:hover { text-decoration: none; color: var(--text); }

/* The mark: one solid block of the house blue, set square. It was a rotated
   gradient diamond with a glow, which is a startup logo, not a masthead. */
.header-brand::before {
    content: "";
    width: 4px;
    height: 15px;
    border-radius: 1px;
    background: var(--acc);
}

/* A rule between the wordmark and the sections, the way a masthead separates
   a title from its navigation. */
.header-nav {
    display: flex;
    gap: 0.15rem;
    padding-left: 1.35rem;
    border-left: 1px solid var(--line);
}

.nav-link {
    position: relative;
    padding: 0.32rem 0.7rem;
    border-radius: var(--r-sm);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-mute);
    white-space: nowrap;
    transition: color 0.14s ease, background 0.14s ease;
}

.nav-link:hover { color: var(--text); background: var(--surface-3); text-decoration: none; }

.nav-link.active { color: var(--text); background: var(--surface-3); }

.nav-link.active::after {
    content: "";
    position: absolute;
    left: 0.7rem; right: 0.7rem; bottom: -1px;
    height: 2px;
    background: var(--acc);
}

.user-badge {
    font-size: 0.73rem;
    color: var(--text-dim);
    padding: 0.18rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.container {
    max-width: none;
    padding: 1.35rem 1.5rem 3.5rem;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.85rem;
    border: 1px solid var(--acc);
    border-radius: var(--r-sm);
    background: var(--acc);
    color: var(--surface);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease;
}

.btn:hover  { background: color-mix(in srgb, var(--acc) 84%, var(--text)); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-sm { padding: 0.28rem 0.55rem; font-size: 0.74rem; }

.btn-ghost {
    background: var(--surface);
    border-color: var(--line);
    color: var(--text-dim);
}

.btn-ghost:hover { background: var(--surface-3); color: var(--text); }

.btn-logout {
    background: transparent;
    border-color: var(--line);
    color: var(--text-mute);
    font-weight: 500;
    padding: 0.28rem 0.65rem;
    font-size: 0.76rem;
}

.btn-logout:hover { background: var(--surface-3); color: var(--text); }

/* The icon is the phone form; see the 760px block. */
.btn-logout i { display: none; }

.btn-microsoft {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--text);
    padding: 0.65rem 1.15rem;
    font-size: 0.88rem;
    gap: 0.7rem;
}

.btn-microsoft:hover { background: var(--surface-hover); }

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-mute);
    font-size: 0.78rem;
    cursor: pointer;
    transition: color 0.14s ease, border-color 0.14s ease;
}

.btn-icon:hover { color: var(--acc); border-color: var(--acc-line); text-decoration: none; }

/* Theme switch. Two states, one control — the icon swap lives in the JS. */
.bm-theme-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-dim);
    font-size: 0.8rem;
    cursor: pointer;
}

.bm-theme-btn:hover { color: var(--acc); border-color: var(--acc-line); }

/* ── Loading / login screens ──────────────────────────────────────────────── */
.loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    color: var(--text-mute);
}

.spinner {
    width: 34px;
    height: 34px;
    border: 2px solid var(--line);
    border-top-color: var(--acc);
    border-radius: 50%;
    animation: bm-spin 0.8s linear infinite;
}

.spinner-small {
    width: 14px;
    height: 14px;
    border-width: 2px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.45rem;
}

@keyframes bm-spin { to { transform: rotate(360deg); } }

.login-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
}

.login-card {
    position: relative;
    width: min(400px, 100%);
    padding: 2.5rem 2.25rem;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg), var(--edge);
    overflow: hidden;
}

.login-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--acc);
}

.login-card h1 {
    font-size: 1.1rem;
    letter-spacing: 0.065em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.login-card p { color: var(--text-mute); font-size: 0.85rem; margin-bottom: 1.75rem; }

.auth-error {
    max-width: 560px;
    margin: 3rem auto;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid var(--conflict-line);
    background: var(--conflict-soft);
    border-radius: var(--r);
}

.auth-error h3 { color: var(--conflict); margin-bottom: 0.5rem; }
.auth-error p  { color: var(--text-dim); margin-bottom: 1rem; }

/* ── Toasts ───────────────────────────────────────────────────────────────── */
.toast-container {
    position: fixed;
    top: calc(var(--header-h) + 0.75rem);
    right: 1rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast {
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem 0.6rem 0.85rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--ok);
    border-radius: var(--r);
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.82rem;
    box-shadow: var(--shadow-md);
    transition: opacity 0.3s;
}

.toast.error   { border-left-color: var(--conflict); }
.toast.warning { border-left-color: var(--warn); }

.table-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 0.25rem;
    color: var(--text-mute);
    font-size: 0.82rem;
}

.empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--text-mute);
    border: 1px dashed var(--line);
    border-radius: var(--r);
    background: var(--surface);
}

.empty-state i { font-size: 1.8rem; color: var(--text-faint); margin-bottom: 0.7rem; }
.empty-state h3 { font-size: 0.95rem; color: var(--text-dim); margin-bottom: 0.35rem; }
.empty-state p  { font-size: 0.82rem; }

.viewer-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-faint);
}

.viewer-placeholder i { font-size: 1.6rem; }
.viewer-placeholder p { font-size: 0.8rem; max-width: 24ch; line-height: 1.5; }

/* HTMX indicators. Declared after .table-loading deliberately: the fund page's
   tab spinner carries both classes, and at equal specificity the later rule
   wins — with these first, every tab body sat under a permanent blank band. */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-flex; align-items: center; }

/* ── Page titles ──────────────────────────────────────────────────────────── */
.page-title {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.022em;
}

.page-subtitle {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: var(--text-mute);
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm), var(--edge);
    margin-bottom: 1.25rem;
    padding: 1rem;
}

.bm-card-flush { padding: 0; overflow: hidden; }

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.tab-bar {
    display: flex;
    gap: 0.15rem;
    padding: 0.35rem 0.5rem 0;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
}

.tab-bar::-webkit-scrollbar { display: none; }

.tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border: 0;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    background: transparent;
    color: var(--text-mute);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 550;
    letter-spacing: 0.005em;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.14s ease, background 0.14s ease;
}

.tab:hover { color: var(--text); background: var(--surface-2); }

.tab.active { color: var(--text); }

.tab.active::after {
    content: "";
    position: absolute;
    left: 0.5rem; right: 0.5rem; bottom: -1px;
    height: 2px;
    background: var(--acc);
}

.tab-count {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.05rem 0.38rem;
    border-radius: var(--r-sm);
    background: var(--surface-3);
    color: var(--text-mute);
}

.tab.active .tab-count { background: var(--acc-soft); color: var(--acc); }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table-wrapper { width: 100%; overflow-x: auto; }

.val-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.val-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.55rem 0.7rem;
    text-align: left;
    font-size: 0.67rem;
    font-weight: 650;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: var(--text-mute);
    background: var(--surface-2);
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
}

.val-table td {
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: top;
}

.val-table tbody tr { transition: background 0.1s ease; }
.val-table tbody tr:hover { background: var(--surface-hover); }

.fund-link { font-weight: 600; color: var(--text); }
.fund-link:visited { color: var(--text); }
.fund-link:hover { color: var(--acc); text-decoration: none; }

.bm-num { text-align: right; font-variant-numeric: tabular-nums; }
.bm-col-secondary { color: var(--text-mute); }
.bm-no-rows { text-align: center; padding: 2.5rem; color: var(--text-mute); }

/* ── Overview header + stat tiles ─────────────────────────────────────────── */
.bm-overview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.bm-stat-row {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--shadow-sm), var(--edge);
    overflow: hidden;
}

/* One compartment of the panel. No border of its own — the hairline between
   figures does that job — and its signal colour rules the top of the
   compartment, so the four read as one strip of figures rather than four
   cards that happen to sit together. */
.bm-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 146px;
    padding: 0.75rem 1rem 0.7rem;
    border-left: 1px solid var(--line);
    background: transparent;
    cursor: help;
    overflow: hidden;
}

.bm-stat:first-child { border-left: 0; }

.bm-stat::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: var(--dupe);
}

/* Set in the text face with tabular figures — a financial figure, not a
   terminal readout. */
.bm-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.028em;
    font-variant-numeric: tabular-nums;
}

.bm-stat-label {
    font-size: 0.67rem;
    font-weight: 650;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: 0.3rem;
}

.bm-stat-sub { font-size: 0.7rem; color: var(--text-mute); }

.bm-stat-primary::before { background: var(--conflict); }
.bm-stat-primary .bm-stat-value { color: var(--conflict); }
.bm-stat-warn::before { background: var(--warn); }
.bm-stat-warn .bm-stat-value { color: var(--warn); }
.bm-stat-muted::before { background: var(--dupe); }
.bm-stat-muted .bm-stat-value { color: var(--text-dim); }

/* ── Filter bar + search ──────────────────────────────────────────────────── */
.bm-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface);
    flex-wrap: wrap;
}

.bm-search { position: relative; display: flex; align-items: center; }

.bm-search i {
    position: absolute;
    left: 0.65rem;
    font-size: 0.75rem;
    color: var(--text-faint);
    pointer-events: none;
}

.bm-search input {
    width: min(360px, 60vw);
    padding: 0.45rem 0.7rem 0.45rem 2rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
    font-family: inherit;
    font-size: 0.82rem;
}

.bm-search input::placeholder { color: var(--text-faint); }

.bm-search input:focus {
    outline: none;
    border-color: var(--acc-line);
    box-shadow: 0 0 0 3px var(--acc-soft);
}

.bm-hint { font-size: 0.76rem; }

.bm-result-count {
    padding: 0.45rem 0.9rem;
    font-size: 0.75rem;
    color: var(--text-mute);
    border-bottom: 1px solid var(--line-soft);
}

.bm-result-count strong { color: var(--text-dim); font-weight: 600; }

/* Live-ish readout for the mirror watermark + its refresh control. */
.bm-refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.12rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 0.72rem;
    cursor: pointer;
}

.bm-refresh:hover { color: var(--acc); border-color: var(--acc-line); }

/* ── Legend ───────────────────────────────────────────────────────────────── */
.bm-legend { border-bottom: 1px solid var(--line-soft); background: var(--surface); }

.bm-legend > summary {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-mute);
    list-style: none;
}

.bm-legend > summary::-webkit-details-marker { display: none; }
.bm-legend > summary:hover { color: var(--acc); }

.bm-legend-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.9rem 1.5rem;
    padding: 0.25rem 0.85rem 1rem;
}

.bm-legend-body h4 {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 0.3rem;
}

.bm-legend-body p { font-size: 0.75rem; line-height: 1.55; color: var(--text-mute); }
.bm-legend-body code { color: var(--acc); }
.bm-legend-chips { list-style: none; margin-top: 0.3rem; }
.bm-legend-chips li { font-size: 0.73rem; line-height: 1.5; color: var(--text-mute); }
.bm-legend-chips .bm-chip { cursor: default; margin-right: 0.35rem; }

/* ── Sortable headers ─────────────────────────────────────────────────────── */
.bm-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
}

.bm-sort-btn:hover { color: var(--acc); }
.bm-fund-table th.bm-sorted { color: var(--acc); }
.bm-fund-table th.bm-sorted .bm-sort-btn { font-weight: 800; }

/* ── Fund list ────────────────────────────────────────────────────────────── */
.bm-fund-table .bm-col-fund     { min-width: 260px; }
.bm-fund-table .bm-col-period   { white-space: nowrap; font-family: var(--mono); font-size: 0.73rem; color: var(--text-dim); }
.bm-fund-table .bm-col-identity { min-width: 180px; }

/* The currency / vintage line under a fund's name in the overview table.
   Named apart from .bm-fund-meta on the fund page on purpose — they used to
   share a class, and the fund page's rule (declared second) was applying
   `display: flex` and a bottom margin to all 712 rows of this table. */
.bm-fund-sub {
    display: block;
    margin-top: 1px;
    font-size: 0.71rem;
    color: var(--text-mute);
}

.bm-count-primary { color: var(--conflict); font-weight: 700; }
.bm-count-muted   { margin-left: 0.3rem; font-size: 0.74rem; color: var(--dupe); }
.bm-count-zero    { color: var(--text-faint); }

/* ── Chips + tags ─────────────────────────────────────────────────────────── */
.bm-chip {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    margin: 1px 2px 1px 0;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: help;
}

.bm-chip-stale      { background: var(--warn-soft);      color: var(--warn);      border-color: var(--warn-line); }
.bm-chip-llm        { background: var(--acc-2-soft);     color: var(--acc-2);     border-color: rgba(123,147,255,0.3); }
.bm-chip-mint       { background: var(--ok-soft);        color: var(--ok);        border-color: rgba(61,220,151,0.28); }
.bm-chip-pend       { background: var(--dupe-soft);      color: var(--dupe);      border-color: var(--line); }
.bm-chip-pending    { background: var(--dupe-soft);      color: var(--dupe);      border-color: var(--line); }
.bm-chip-drop       { background: var(--conflict-soft);  color: var(--conflict);  border-color: var(--conflict-line); }
.bm-chip-dropped    { background: var(--conflict-soft);  color: var(--conflict);  border-color: var(--conflict-line); }
.bm-chip-legacy     { background: var(--restated-soft);  color: var(--restated);  border-color: rgba(177,140,255,0.28); }
.bm-chip-xwalk      { background: var(--surface-3);      color: var(--text-dim);  border-color: var(--line); }
.bm-chip-efront     { background: var(--acc-soft);       color: var(--acc);       border-color: var(--acc-line); }
.bm-chip-unresolved { background: var(--dupe-soft);      color: var(--dupe);      border-color: var(--line); }

/* A6: a report key naming this fund, still held for review. The warn tone
   rather than the company crosswalk's grey, because this one holds back every
   document filed under the key, not one holding's values. */
.bm-chip-heldkey    { background: var(--warn-soft);      color: var(--warn);      border-color: var(--warn-line); }

/* A6: report-key decisions the reviewer has recorded on this fund. Dotted,
   because the chip counts what was decided, not what moved: the held count
   beside it is the mirror's, and it falls on its own once fabric's E3 has
   applied a decision to the crosswalk. */
.bm-chip-decided    { background: var(--surface-3);      color: var(--text-dim);  border-color: var(--line); border-style: dotted; }

/* A search hit reached through a portfolio company rather than the fund's own
   name. A link, because it opens the fund's Company metrics tab. */
.bm-chip-via {
    margin-left: 0.3rem;
    background: var(--acc-soft);
    color: var(--acc);
    border-color: var(--acc-line);
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
}
.bm-chip-via:hover { text-decoration: underline; }

.bm-tag {
    display: inline-block;
    padding: 0 0.35rem;
    border-radius: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: help;
}

.bm-tag-historical { background: var(--dupe-soft); color: var(--dupe); }
.bm-tag-reviewed   { background: var(--ok-soft);   color: var(--ok); }

/* The one money value not in the fund's currency: the legacy workbook's fund
   size (and the contributed capital derived from it) is Preqin's USD figure
   whatever the fund reports in. Quiet, but it has to be said next to the
   number. */
.bm-unit-tag {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0 0.35rem;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--warn);
    background: var(--warn-soft);
    border: 1px solid var(--warn-line);
    vertical-align: middle;
    cursor: help;
}

/* ── Fund page header ─────────────────────────────────────────────────────── */
.bm-fund-header {
    padding: 0 0 0.85rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.9rem;
}

.bm-fund-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.back-link:hover { color: var(--acc); text-decoration: none; }

.period-selector { display: flex; align-items: center; gap: 0.45rem; }

.period-selector label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.065em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.period-selector select {
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.76rem;
    cursor: pointer;
}

.period-selector select:focus {
    outline: none;
    border-color: var(--acc-line);
    box-shadow: 0 0 0 3px var(--acc-soft);
}

.bm-fund-title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.026em;
    margin-bottom: 0.45rem;
}

.bm-fund-meta { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.5rem; }

.meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.12rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: 0.73rem;
    color: var(--text-dim);
}

.meta-tag i { color: var(--acc); font-size: 0.72rem; }

.bm-entity-id { font-family: var(--mono); font-size: 0.68rem; color: var(--text-faint); }

.bm-xwalk-strip { display: flex; gap: 1.4rem; flex-wrap: wrap; }

.bm-xwalk-group { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }

.bm-xwalk-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-faint);
    cursor: help;
}

/* ── Fund page layout: main + drawer ──────────────────────────────────────── */
.bm-fund-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0;
    align-items: start;
    transition: grid-template-columns 0.18s ease;
}

.bm-fund-body.drawer-open { grid-template-columns: minmax(0, 1fr) 430px; }

.bm-fund-main { min-width: 0; }

.bm-tab-meta {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    flex-wrap: wrap;
    padding: 0.6rem 0 0.7rem;
    font-size: 0.73rem;
    color: var(--text-mute);
}

.bm-tab-meta code {
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--acc);
    font-size: 0.7rem;
}

.bm-note {
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.85rem;
    border: 1px solid var(--line);
    border-left: 2px solid var(--acc);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: 0.77rem;
    line-height: 1.6;
    color: var(--text-dim);
}

.bm-note i { color: var(--acc); margin-right: 0.3rem; }
.bm-note strong { color: var(--text); }

/* ── Value cells ──────────────────────────────────────────────────────────── */
.bm-scroll-x { overflow-x: auto; }

.bm-cell {
    position: relative;
    text-align: right;
    white-space: nowrap;
}

.bm-cell-money, .bm-cell-ratio, .bm-cell-fraction,
.bm-cell-year, .bm-cell-int { font-variant-numeric: tabular-nums; }

.bm-cell-text, .bm-cell-bool, .bm-cell-date { text-align: left; }

.bm-cell-text {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bm-cell-date { font-family: var(--mono); font-size: 0.74rem; }

.bm-cell-empty { color: var(--text-faint); text-align: right; }

/* Sourced cells are the clickable ones. The affordance is a hairline that
   firms up on hover — a button per cell would make a 20-column grid
   unreadable. */
.bm-cell-sourced {
    cursor: pointer;
    box-shadow: inset 0 -1px 0 var(--line);
}

.bm-cell-sourced:hover {
    background: var(--acc-soft);
    box-shadow: inset 0 -2px 0 var(--acc);
}

.bm-cell-unsourced { color: var(--text-mute); }

.bm-cell-conflict {
    background: var(--conflict-soft);
    box-shadow: inset 0 -2px 0 var(--conflict);
}

.bm-cell-conflict:hover { background: color-mix(in srgb, var(--conflict) 20%, transparent); }

.bm-cell-restated { background: var(--restated-soft); }

.bm-cell-conflict.bm-cell-restated {
    background: linear-gradient(
        180deg, var(--restated-soft) 0 50%, var(--conflict-soft) 50% 100%);
}

.bm-cell-revised { background: var(--revised-soft); }

/* ADR-0054 — a value this pipeline COMPUTED across documents, that no report
   printed. (Not `.bm-cell-derived` above: that one is a value recovered from
   the bronze extraction rows, which IS reported, just not via the mirror.)
   Read-only — no drawer, no correction affordance, because a correction would
   be overwritten by the next recompute — so it carries a mark as well as a
   tint: colour alone disappears for anyone who cannot see it, and in print.
   `-weak` is the disclosure the CP-4 ruling came with: a rule whose values
   land within 10% of printed truth less than half the time reads differently
   from one at 90%, on the cell itself rather than only in the tooltip. */
.bm-cell-computed {
    background: var(--computed-soft);
    color: var(--text-mute);
    cursor: default;
}

.bm-cell-computed .bm-computed-mark {
    margin-left: 0.25em;
    font-size: 0.85em;
    opacity: 0.75;
}

.bm-cell-computed-weak {
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--warn) 70%, transparent);
}

/* The cell the drawer is describing. An outline, so it reads on top of any of
   the conflict / restated / revised fills. */
.bm-cell-selected { outline: 2px solid var(--acc); outline-offset: -2px; }

/* Confidence tint on the left edge, reinforcing the inline mark. Kept at
   partial alpha: the mark carries the level, and at full saturation twenty of
   these across a wide row read as column rules rather than as provenance. */
.bm-conf-high  { border-left: 1px solid color-mix(in srgb, var(--ok) 55%, transparent); }
.bm-conf-med   { border-left: 1px solid color-mix(in srgb, var(--warn) 60%, transparent); }
.bm-conf-low   { border-left: 1px solid color-mix(in srgb, var(--conflict) 70%, transparent); }
.bm-conf-calc  { border-left: 1px dotted color-mix(in srgb, var(--dupe) 70%, transparent); }
.bm-conf-none  { color: var(--text-mute); }

.bm-cell-value { font-variant-numeric: tabular-nums; }

/* The provenance strip and any badges after a value, as one group. Inline
   here; the company tables stack it under the value — see there. */
.bm-cell-meta { display: inline; }

/* A value recovered from the bronze extraction rows rather than read off a
   mirrored fact table — dashed underline, because it is real but it did not
   come the usual way and the drawer cannot explain it. */
.bm-cell-derived {
    box-shadow: none;
    border-bottom: 1px dashed var(--acc-2);
}

/* A value read off a mirrored dimension (dim_investment's entry date) rather
   than a fact row. Authoritative, so no underline — but inert, because no
   observation stands behind it for the drawer to show. The conflict tint
   still applies where the documents disagree with it. */
.bm-cell-dim { box-shadow: none; }

.bm-holding-open { color: var(--acc); font-weight: 700; margin-left: 1px; }

/* ── Inline provenance strip ──────────────────────────────────────────────────
   The reviewer's complaint this answers: provenance existed, but only in
   tooltips and behind a click, so a screen of numbers looked like a screen of
   numbers. Every sourced cell now carries its confidence, its cited page and
   its document count inline. Small, monospaced and dimmed, so it reads as
   marginalia beside the value rather than competing with it.
   ------------------------------------------------------------------------- */
.bm-prov {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 0.35rem;
    font-family: var(--mono);
    font-size: 0.6rem;
    line-height: 1;
    vertical-align: middle;
    opacity: 0.82;
}

.bm-prov-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 11px;
    height: 11px;
    border-radius: 2px;
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--bg);
}

.bm-prov-high { background: var(--ok); }
.bm-prov-med  { background: var(--warn); }
.bm-prov-low  { background: var(--conflict); }
.bm-prov-calc { background: var(--dupe); }
.bm-prov-none { background: var(--text-faint); }

.bm-prov-page,
.bm-prov-docs,
.bm-prov-derived,
.bm-prov-dim {
    padding: 0 3px;
    border-radius: 2px;
    background: var(--surface-3);
    color: var(--text-mute);
}

.bm-prov-derived { background: var(--acc-2-soft); color: var(--acc-2); }
.bm-prov-dim     { background: var(--acc-soft);   color: var(--acc); }

/* Named confidence, for the tables with room to spell it out. */
.bm-prov-cell { text-align: center; white-space: nowrap; }

.bm-prov-chip {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: 1px solid transparent;
    cursor: help;
}

.bm-prov-chip.bm-prov-high { background: var(--ok-soft);       color: var(--ok);         border-color: var(--ok); }
.bm-prov-chip.bm-prov-med  { background: var(--warn-soft);     color: var(--warn);       border-color: var(--warn-line); }
.bm-prov-chip.bm-prov-low  { background: var(--conflict-soft); color: var(--conflict);   border-color: var(--conflict-line); }
.bm-prov-chip.bm-prov-calc { background: var(--dupe-soft);     color: var(--dupe);       border-color: var(--line); }
.bm-prov-chip.bm-prov-none { background: var(--surface-2);     color: var(--text-faint); border-color: var(--line); }

/* The verbatim line the extractor read the value off the PDF. */
.bm-evidence-cell { max-width: 340px; }

.bm-evidence {
    display: block;
    font-family: var(--mono);
    font-size: 0.7rem;
    line-height: 1.45;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
}

.bm-evidence-derived { color: var(--text-mute); font-style: italic; }
.bm-evidence-derived i { color: var(--acc-2); margin-right: 0.2rem; }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.bm-badge {
    display: inline-block;
    min-width: 15px;
    margin-left: 0.3rem;
    padding: 0 4px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.55;
    text-align: center;
    vertical-align: middle;
    cursor: help;
}

.bm-badge-conflict { background: var(--conflict); color: var(--bg); }
.bm-badge-restated { background: var(--restated); color: var(--bg); }
.bm-badge-revised  { background: var(--revised);  color: var(--bg); }
.bm-badge-dupe     { background: var(--dupe-soft); color: var(--dupe);
                     border: 1px solid var(--line); }

/* ── Fund-metric table ────────────────────────────────────────────────────── */
.bm-metric-table { max-width: 1180px; }

.bm-metric-table .bm-metric-label {
    text-align: left;
    font-size: 0.79rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    background: transparent;
    white-space: nowrap;
    cursor: help;
    position: static;
}

.bm-cell-wide { min-width: 140px; font-weight: 650; }

/* ── Company tables ───────────────────────────────────────────────────────────
   Company metrics and Entry / exit share this. Declared geometry, like the
   review grid: fixed layout, one <col> width per metric kind, and a table
   width computed from the kind counts the server emits — so a paragraph-long
   valuation methodology or a wide provenance strip is clipped to its column
   (the full text is in the tooltip) rather than re-sizing every column around
   it, which is what the auto layout did. `100%` and `auto` are both traps
   here; see .bm-rev-table. */
.bm-company-table {
    width: calc(var(--bm-co-company-w) + var(--bm-co-src-w)
                + var(--bm-co-money, 0) * var(--bm-co-money-w)
                + var(--bm-co-ratio, 0) * var(--bm-co-ratio-w)
                + var(--bm-co-date, 0)  * var(--bm-co-date-w)
                + var(--bm-co-text, 0)  * var(--bm-co-text-w)
                + var(--bm-co-bool, 0)  * var(--bm-co-bool-w)
                + var(--bm-co-num, 0)   * var(--bm-co-num-w));
    table-layout: fixed;
    font-size: 0.78rem;
}

.bm-co-col-company { width: var(--bm-co-company-w); }
.bm-co-col-money   { width: var(--bm-co-money-w); }
.bm-co-col-ratio   { width: var(--bm-co-ratio-w); }
.bm-co-col-date    { width: var(--bm-co-date-w); }
.bm-co-col-text    { width: var(--bm-co-text-w); }
.bm-co-col-bool    { width: var(--bm-co-bool-w); }
.bm-co-col-num     { width: var(--bm-co-num-w); }
.bm-co-col-src     { width: var(--bm-co-src-w); }

/* Under fixed layout the <col> sets the width; a cell that does not fit is
   clipped with an ellipsis and keeps its full text in the tooltip. */
.bm-company-table .bm-cell { overflow: hidden; text-overflow: ellipsis; }

/* The provenance strip and badges sit on their own line under the value,
   aligned with it, so the declared widths hold: a mono date plus `dim ≠doc`,
   or a figure plus `H p12 3d`, is wider than the column on one line and was
   being clipped. Two lines per sourced cell, every row the same height. */
.bm-company-table .bm-cell .bm-cell-meta {
    display: flex;
    flex-wrap: wrap;          /* a badge after a full strip drops a line rather than clipping */
    justify-content: flex-end;
    align-items: center;
    gap: 2px 0.3rem;
    margin-top: 2px;
}
.bm-company-table .bm-cell .bm-cell-meta .bm-prov,
.bm-company-table .bm-cell .bm-cell-meta .bm-badge { margin-left: 0; }
.bm-company-table .bm-cell-text .bm-cell-meta,
.bm-company-table .bm-cell-date .bm-cell-meta,
.bm-company-table .bm-cell-bool .bm-cell-meta { justify-content: flex-start; }
.bm-company-table .bm-cell-text { max-width: none; }
.bm-company-table thead tr:not(.bm-group-row) th {
    white-space: normal;
    line-height: 1.2;
    overflow: hidden;
}
.bm-company-table .bm-source-cell { white-space: normal; }

.bm-company-table th.bm-company-cell {
    position: sticky;
    left: 0;
    z-index: 3;
    text-align: left;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    background: var(--surface);
    border-right: 1px solid var(--line);
}

.bm-company-table thead th.bm-company-cell { z-index: 4; background: var(--surface-2); }
.bm-company-table tbody tr:hover th.bm-company-cell { background: var(--surface-hover); }

.bm-group-row th {
    top: 0;
    text-align: center;
    font-size: 0.62rem;
    letter-spacing: 0.07em;
    color: var(--text-faint);
    background: var(--surface-3);
    border-bottom: 1px solid var(--line);
    cursor: help;
}

.bm-company-table thead tr:not(.bm-group-row) th { top: 26px; }

.bm-group-head { background: var(--surface-3); }

.bm-col-exit    { background: color-mix(in srgb, var(--restated) 5%, transparent); }
.bm-col-holding { background: color-mix(in srgb, var(--acc-2) 6%, transparent); }

.bm-group-row .bm-col-exit    { background: color-mix(in srgb, var(--restated) 10%, transparent); }
.bm-group-row .bm-col-holding { background: color-mix(in srgb, var(--acc-2) 12%, transparent); }

.bm-company-name { font-weight: 650; color: var(--text); }

.bm-company-meta {
    display: block;
    margin-top: 1px;
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--text-faint);
}

.bm-source-cell { white-space: nowrap; }

/* ── PDF buttons ──────────────────────────────────────────────────────────── */
.bm-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    margin: 1px;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-mute);
    font-family: inherit;
    font-size: 0.7rem;
    cursor: pointer;
}

.bm-pdf-btn:hover { border-color: var(--conflict-line); color: var(--conflict); }
.bm-pdf-btn i { color: var(--conflict); }
.bm-pdf-btn-compact { min-width: 22px; justify-content: center; font-family: var(--mono); }

.bm-pdf-name {
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-page-tag {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0 0.3rem;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface-3);
    font-family: var(--mono);
    font-size: 0.64rem;
    color: var(--text-dim);
}

/* ── Unmapped report keys ─────────────────────────────────────────────────── */
.bm-unmapped {
    margin-bottom: 0.85rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--warn-line);
    border-radius: var(--r);
    background: var(--warn-soft);
    font-size: 0.79rem;
}

.bm-unmapped > summary {
    cursor: pointer;
    color: var(--warn);
    font-weight: 600;
    list-style: none;
}

.bm-unmapped > summary::-webkit-details-marker { display: none; }
.bm-unmapped > summary i { margin-right: 0.35rem; }
.bm-unmapped ul { list-style: none; margin-top: 0.5rem; }

.bm-unmapped li {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
    padding: 0.35rem 0;
    border-top: 1px solid var(--warn-line);
}

.bm-unmapped-name  { font-weight: 650; color: var(--text); }
.bm-unmapped-class { font-family: var(--mono); font-size: 0.68rem; color: var(--text-mute); }
.bm-unmapped-note  { flex: 1 1 100%; font-size: 0.73rem; color: var(--text-mute); }

/* ── Layout switch ────────────────────────────────────────────────────────── */
.bm-viewswitch {
    display: inline-flex;
    margin-bottom: 0.7rem;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface-2);
}

.bm-viewswitch-btn {
    padding: 0.28rem 0.8rem;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-mute);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.14s ease, background 0.14s ease;
}

.bm-viewswitch-btn:hover { color: var(--text); }

.bm-viewswitch-btn.active {
    background: var(--acc-soft);
    color: var(--acc);
    box-shadow: inset 0 0 0 1px var(--acc-line);
}

/* ── Review grid ──────────────────────────────────────────────────────────────
   One table for the whole fund, laid out like review_financials.xlsx: metric
   families down, four period groups across, one banded header row per company.

   `table-layout: fixed` plus an explicit <colgroup> is the point of the whole
   thing — it is what makes every company block share one column geometry
   instead of each sizing itself to its own digits. The `width: auto` below is
   load-bearing: under `table-layout: fixed` a `width: 100%` turns the declared
   <col> widths into *ratios* and stretches them, which is how the same column
   once came out 283px wide in a 4-column grid and 134px in a 10-column one.
   ------------------------------------------------------------------------- */
.bm-rev-table {
    /* Declared, not inferred. `width: auto` is not enough: Chrome computes an
       auto table's width from its content even under `table-layout: fixed`,
       then distributes the surplus across the declared <col> widths as
       ratios — so one cell of unusually wide content silently re-sized every
       column in that block. The server emits the column counts as --bm-cols /
       --bm-seps and the width is arithmetic on the same tokens the <col>s
       use, which makes the geometry independent of what lands in the cells.
       The e2e suite asserts one distinct width across every value column. */
    width: calc(var(--bm-rev-label-w)
                + var(--bm-cols, 0) * var(--bm-rev-col-w)
                + var(--bm-seps, 0) * var(--bm-rev-sep-w));
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.77rem;
}

.bm-rev-col-label { width: var(--bm-rev-label-w); }
.bm-rev-col       { width: var(--bm-rev-col-w); }
.bm-rev-col-sep   { width: var(--bm-rev-sep-w); }

.bm-rev-table thead .bm-rev-group {
    top: 0;
    padding: 0.3rem 0.4rem;
    text-align: center;
    font-size: 0.62rem;
    letter-spacing: 0.07em;
    color: var(--text-dim);
    background: var(--surface-3);
    border-bottom: 1px solid var(--line);
    border-left: 1px solid var(--line-soft);
}

.bm-rev-table thead tr:not(.bm-rev-grouprow) th { top: 24px; }

.bm-rev-head {
    padding: 0.3rem 0.5rem !important;
    text-align: right;
    vertical-align: bottom;
    line-height: 1.25;
}

/* Workbook label above, the concrete period or year below it — the relative
   label is the convention the team reads, the date is the fact. */
.bm-rev-collabel {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
}

.bm-rev-colsub {
    display: block;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-faint);
}

.bm-rev-label {
    position: sticky;
    left: 0;
    z-index: 3;
    text-align: left !important;
    background: var(--surface);
    border-right: 1px solid var(--line);
}

.bm-rev-table thead .bm-rev-label { z-index: 5; background: var(--surface-2); }

.bm-rev-table .bm-rev-metric {
    padding-left: 1.4rem;
    font-size: 0.77rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: var(--text-dim);
    cursor: help;
}

/* Group gutters: whitespace with a column index, exactly as in the workbook. */
.bm-rev-sep {
    padding: 0 !important;
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

.bm-rev-company > .bm-rev-company-cell {
    position: sticky;
    left: 0;
    padding: 0.45rem 0.7rem;
    text-align: left;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    background: var(--surface-3);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.bm-rev-company-name {
    margin-right: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
}

.bm-rev-table tbody tr.bm-rev-company:hover { background: var(--surface-3); }

/* How the block is denominated: currency, in millions. One quiet label — every
   money column has been on absolute units since the upstream rescale
   (ADR-0050, 2026-09-03), so the legacy / mixed-units variants this used to
   carry are gone. */
.bm-rev-scale {
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--surface-2);
    color: var(--text-mute);
    border: 1px solid var(--line);
    cursor: help;
}

/* Which fiscal years a block's FY-3 … FY slots hold. The FY columns resolve
   per company — companies in one fund do not share a year-end — so the header
   cannot name a year and the band does it. A block ending at a different year
   from most of the page is marked in the accent, not a warning colour: it is
   information the reader needs, not a defect. */
.bm-rev-fy {
    margin-left: 0.35rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 500;
    white-space: nowrap;
    background: var(--surface-2);
    color: var(--text-mute);
    border: 1px solid var(--line);
    cursor: help;
}

.bm-rev-fy-offset {
    background: var(--acc-soft);
    color: var(--acc);
    border-color: var(--acc-line);
}

.bm-rev-footnote { margin-top: 0.5rem; font-size: 0.71rem; }

/* ── Full-series grids ────────────────────────────────────────────────────── */
.bm-fin-block {
    margin-bottom: 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--edge);
}

.bm-fin-block > summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.8rem;
    border-radius: var(--r);
    background: var(--surface-2);
    cursor: pointer;
    list-style: none;
}

.bm-fin-block > summary::-webkit-details-marker { display: none; }

.bm-fin-block[open] > summary {
    border-bottom: 1px solid var(--line);
    border-radius: var(--r) var(--r) 0 0;
}

.bm-fin-company { font-weight: 650; color: var(--text); }
.bm-fin-summary-meta { margin-left: auto; font-size: 0.71rem; }

.bm-grid { padding: 0.6rem 0.8rem 0.85rem; }

.bm-grid-title {
    margin-bottom: 0.4rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.065em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.bm-grid-title .text-muted { letter-spacing: 0; text-transform: none; font-weight: 400; }
.bm-grid-empty { padding: 0.5rem 0.8rem; font-size: 0.76rem; }

/* Shared column geometry, same declared-width reason as the review grid. */
.bm-fin-col-label { width: var(--bm-fin-label-w); }
.bm-fin-col       { width: var(--bm-fin-col-w); }

.bm-fin-table {
    width: calc(var(--bm-fin-label-w) + var(--bm-cols, 0) * var(--bm-fin-col-w));
    table-layout: fixed;
    font-size: 0.76rem;
}

.bm-fin-table .bm-metric-label {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 130px;
    text-align: left;
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-dim);
    white-space: nowrap;
    background: var(--surface);
    border-right: 1px solid var(--line-soft);
}

.bm-fin-table thead .bm-metric-label { z-index: 3; background: var(--surface-2); }
.bm-fin-table th.bm-num { white-space: nowrap; font-family: var(--mono); font-size: 0.68rem; }

/* ── Qualitative cards ────────────────────────────────────────────────────── */
.bm-qual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.7rem;
}

.bm-qual-card {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--edge);
}

.bm-qual-card header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--line-soft);
}

.bm-sentiment {
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.bm-sentiment-positive { background: var(--ok-soft);       color: var(--ok); }
.bm-sentiment-negative { background: var(--conflict-soft); color: var(--conflict); }
.bm-sentiment-neutral  { background: var(--dupe-soft);     color: var(--dupe); }

.bm-qual-field { margin-bottom: 0.6rem; }

.bm-qual-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.2rem;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.065em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.bm-qual-sources {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0 0.35rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-mute);
    font-family: inherit;
    font-size: 0.62rem;
    cursor: pointer;
}

.bm-qual-sources:hover { border-color: var(--acc-line); color: var(--acc); }

.bm-qual-text {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-dim);
    white-space: pre-wrap;
}

/* ── Observation drawer ───────────────────────────────────────────────────── */
.bm-drawer {
    position: sticky;
    top: calc(var(--header-h) + 0.5rem);
    display: none;
    flex-direction: column;
    max-height: calc(100vh - var(--header-h) - 1.5rem);
    margin-left: 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-md), var(--edge);
    overflow: hidden;
}

.bm-fund-body.drawer-open .bm-drawer { display: flex; }

.bm-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.75rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}

.bm-drawer-head h3 {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.bm-drawer-head i { margin-right: 0.35rem; color: var(--acc); }

.bm-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 0.65rem 0.75rem; }

.bm-drawer-summary {
    padding-bottom: 0.55rem;
    margin-bottom: 0.65rem;
    border-bottom: 1px solid var(--line-soft);
}

.bm-drawer-context {
    font-family: var(--mono);
    font-size: 0.7rem;
    line-height: 1.55;
    color: var(--text-mute);
    word-break: break-word;
}

.bm-drawer-context strong { color: var(--text); }

.bm-drawer-stats {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: var(--text-dim);
}

.bm-drawer-stats > span:not(.bm-badge) {
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.bm-drawer-note, .bm-drawer-footer {
    margin-top: 0.45rem;
    font-size: 0.71rem;
    line-height: 1.55;
    color: var(--text-mute);
}

.bm-drawer-note i { margin-right: 0.25rem; color: var(--acc); }

.bm-drawer-footer { padding-top: 0.55rem; border-top: 1px solid var(--line-soft); }

.bm-obs-list { display: flex; flex-direction: column; gap: 0.5rem; }

.bm-obs {
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.bm-obs-winner {
    border-left-color: var(--ok);
    background: color-mix(in srgb, var(--ok) 6%, var(--surface-2));
}

.bm-obs-head { display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }

.bm-obs-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

.bm-obs-currency { font-size: 0.7rem; color: var(--text-faint); }

/* The exact figure in units behind a millions value — a machine string, so
   it takes the mono face like the other quoted-from-the-document text. */
.bm-obs-units {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
}

.bm-obs-flag {
    margin-left: auto;
    padding: 0 0.4rem;
    border-radius: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.bm-obs-flag-winner { background: var(--ok-soft);   color: var(--ok); }
.bm-obs-flag-loser  { background: var(--dupe-soft); color: var(--dupe); }

/* A document an override takes out of the recompute (package D). Its reading
   is still on the mirror and may still be winning the cell, so it is struck
   rather than dropped: the reviewer needs to see what is about to change. */
.bm-obs-flag-excluded {
    background: var(--conflict-soft);
    color: var(--conflict);
}

.bm-obs-excluded .bm-obs-value {
    text-decoration: line-through;
    color: var(--text-dim);
}

.bm-obs-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
    font-family: var(--mono);
    font-size: 0.67rem;
    color: var(--text-mute);
}

.bm-obs-meta i { margin-right: 0.2rem; opacity: 0.65; }
.bm-obs-meta .bm-conf-high { color: var(--ok);       border: none; font-weight: 700; }
.bm-obs-meta .bm-conf-med  { color: var(--warn);     border: none; font-weight: 700; }
.bm-obs-meta .bm-conf-low  { color: var(--conflict); border: none; font-weight: 700; }
.bm-obs-meta .bm-conf-calc { color: var(--dupe);     border: none; }

/* The evidence block — what the extractor actually saw, and why it concluded
   what it did. Quoted verbatim from the PDF where there is a line to quote. */
.bm-obs-evidence {
    margin-top: 0.5rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: var(--bg);
}

.bm-obs-evidence-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.065em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.bm-obs-quote {
    border-left: 2px solid var(--acc-line);
    padding-left: 0.55rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--text-dim);
    word-break: break-word;
}

.bm-obs-rationale { margin-top: 0.4rem; }

.bm-obs-rationale > summary {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-mute);
    cursor: pointer;
    list-style: none;
}

.bm-obs-rationale > summary::-webkit-details-marker { display: none; }
.bm-obs-rationale > summary:hover { color: var(--acc); }

/* A border triangle rather than a glyph: neither Inter nor JetBrains Mono
   carries U+25B8, and the fallback rendered as tofu. */
.bm-obs-rationale > summary::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 0.35rem;
    vertical-align: 1px;
    border-left: 4px solid currentColor;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    transition: transform 0.14s ease;
}

.bm-obs-rationale[open] > summary::before { transform: rotate(90deg); }

.bm-obs-rationale p {
    margin-top: 0.3rem;
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--text-mute);
}

.bm-obs-file {
    margin-top: 0.35rem;
    font-family: var(--mono);
    font-size: 0.67rem;
    color: var(--text-mute);
    word-break: break-word;
    cursor: help;
}

.bm-obs-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.5rem; }

/* ── PDF viewer, inside the drawer under the observation list ─────────────── */
.bm-viewer {
    display: flex;
    flex-direction: column;
    flex: 1 1 55%;
    min-height: 260px;
    border-top: 1px solid var(--line);
}

.bm-viewer[hidden] { display: none; }

.bm-viewer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line-soft);
}

.bm-viewer-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--text-mute);
}

.bm-viewer-actions { display: flex; gap: 0.25rem; flex: 0 0 auto; }

.bm-viewer iframe {
    flex: 1 1 auto;
    width: 100%;
    min-height: 240px;
    border: none;
    background: var(--surface-3);
}

/* ── Narrow screens: the drawer becomes a bottom sheet ────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
   Write path — the verbs on a cell, and the modal a form renders into

   Colour discipline holds here too: the modal is chrome, so it is paper,
   hairlines and the one accent. The only colour that carries meaning is the
   scale warning (--warn) on a preview that will not parse, and the dry-run
   strip, which has to be impossible to overlook — a reviewer must never have
   to wonder whether their decision was stored.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Drawer footer: set a value, suppress the cell ────────────────────────── */
.bm-drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bm-drawer-verbs {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.bm-drawer-fineprint {
    font-size: 0.68rem;
    line-height: 1.5;
}

/* Pinning a source is a per-document verb, so it sits with that document's
   PDF button rather than in the footer. Quieter than the PDF button: reading
   the evidence comes before ruling on it. */
.bm-obs-pick { font-family: var(--font); }

/* ── Package G1: a correction to one document's reading ──────────────────────

   Deliberately quieter than the cell-level decision block above the list. A
   G1 correction changes what one report is taken to say and lets the
   recompute's ladder run again; the ruling that overrides the cell's answer is
   the one at the top of the drawer, and it keeps the louder frame. */
.bm-obs-correct,
.bm-obs-undo { font-family: var(--font); }

.bm-obs-reading {
    margin-top: 0.5rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--acc-line);
    border-left: 3px solid var(--acc);
    border-radius: var(--r-sm);
    background: var(--acc-soft);
}

/* Recorded, and nothing upstream reads the table — so the frame is dotted,
   the same greyscale grammar the pending panel's unread rows use. */
/* The ladder state, the way the panel row carries it (the panel row's per-state rules):
   fabric's PR-RC1 reads review_corrections, so a reading is pending until
   the next rebuild, recomputed until the mirror refresh, applied after it,
   bounced with 04b's reason. `unread` kept for a row whose state is missing. */
.bm-obs-reading-pending { border-left-style: dashed; }
.bm-obs-reading-recomputed { border-left-color: var(--acc-2); }
.bm-obs-reading-applied { border-left-color: var(--line-strong); }
.bm-obs-reading-bounced { border-left-color: var(--conflict); background: var(--conflict-soft); }
.bm-obs-reading-unread { border-left-style: dotted; }

.bm-obs-reading-head {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
}

.bm-obs-reading-head > i { color: var(--acc); font-size: 0.72rem; }
.bm-obs-reading-head strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.bm-obs-reading-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.065em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.bm-obs-reading-meta {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.2rem;
    font-size: 0.67rem;
    color: var(--text-mute);
}

/* The document's own reading, kept beside the corrected one: a correction that
   hid what the report actually said would be unauditable. */
.bm-obs-was {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-dim);
}

.bm-obs-flag-corrected { background: var(--acc-soft); color: var(--acc); }

/* The value is not struck here, unlike an excluded document's: the reading is
   corrected, not withdrawn. */
.bm-obs-has-reading { border-color: var(--acc-line); }

/* A cell the reviewer has recorded a decision against in this session. Added
   by benchmark.js on bmCellChanged, never by the server — the server-rendered
   overlay that shows a correction *applying* is a different mark. */
.bm-cell-recorded {
    box-shadow: inset 3px 0 0 0 var(--acc);
}

/* ── The overlay: a cell the reviewer has ruled on (B3) ───────────────────────
   Server-rendered from the active seed rows, distinct from .bm-cell-recorded
   (the session mark). The pen badge carries the state in its title; the cell
   itself gets a quiet accent frame so a ruled-on value reads as such at a
   glance without competing with the conflict / restated fills. A suppressed
   value is struck, not removed: a blank would read as a gap. */
.bm-cell-reviewed {
    box-shadow: inset 0 0 0 1px var(--acc-line);
}

.bm-cell-reviewed .bm-cell-value { color: var(--acc); }

/* The state, on the frame: pending is dashed (nothing has read it yet),
   recomputed solid in the second accent, applied the plain frame with the
   value back in ink, bounced in the conflict colour. */
.bm-cell-reviewed-pending { box-shadow: none; outline: 1px dashed var(--acc); outline-offset: -1px; }
.bm-cell-reviewed-recomputed { box-shadow: inset 0 0 0 1px var(--acc-2); }
.bm-cell-reviewed-applied .bm-cell-value { color: var(--text); }
.bm-cell-reviewed-bounced { box-shadow: inset 0 0 0 1px var(--conflict-line); }

.bm-cell-suppressed .bm-cell-value,
.bm-cell-suppressed s {
    color: var(--text-mute);
    text-decoration-color: var(--conflict);
}

.bm-badge-reviewed { background: var(--acc); color: var(--bg); }
.bm-badge-reviewed-pending { background: var(--acc); }
.bm-badge-reviewed-recomputed { background: var(--acc-2); color: var(--bg); }
.bm-badge-reviewed-applied { background: var(--acc-soft); color: var(--acc); }
/* `unread`: recorded, and the recompute has no reader for its table yet, so
   the dashboard is the only thing applying it. Outlined rather than filled —
   the decision is real, its journey upstream has not started. */
.bm-badge-reviewed-unread {
    background: transparent;
    color: var(--acc);
    box-shadow: inset 0 0 0 1px var(--acc);
}
.bm-badge-bounced  { background: var(--conflict); color: var(--bg); }

/* ── Provisional: what the next recompute will publish ────────────────────────
   A corrected reading on the winning document, or a withdrawn document's slot
   re-laddered (db.get_provisional). Not a ruling on the cell, so not the
   reviewed frame: a dotted frame in the second accent, the value in it, and
   the mirror's own value in the tooltip. A slot no other document reports
   reads as a muted dash. */
.bm-cell-provisional {
    outline: 1px dotted var(--acc-2);
    outline-offset: -1px;
}
.bm-cell-provisional .bm-cell-value { color: var(--acc-2); }
.bm-cell-withdrawn .bm-cell-value { color: var(--text-mute); }
.bm-drawer-provisional i { color: var(--acc-2); }
.bm-badge-provisional {
    background: transparent;
    color: var(--acc-2);
    box-shadow: inset 0 0 0 1px var(--acc-2);
}

/* Commentary under a Suppress: the whole paragraph is the value. */
.bm-qual-suppressed {
    text-decoration: line-through;
    text-decoration-color: var(--conflict);
    color: var(--text-mute);
}

/* The decision block at the top of the drawer. */
.bm-decision {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.5rem 0;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--acc-line);
    border-left-width: 3px;
    border-radius: var(--r-sm);
    background: var(--acc-soft);
    font-size: 0.75rem;
}

.bm-decision-pending { border-left-style: dashed; }
.bm-decision-recomputed { border-left-color: var(--acc-2); }
.bm-decision-applied { background: var(--surface); }
.bm-decision-bounced {
    border-color: var(--conflict-line);
    background: var(--conflict-soft);
}

.bm-decision-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.bm-decision-head strong { color: var(--text); }

.bm-decision-state {
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text-dim);
    font-size: 0.68rem;
    white-space: nowrap;
}

.bm-decision-undo { margin-left: auto; font-family: var(--font); }

.bm-decision-meta {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 0.68rem;
}

.bm-decision-note {
    font-family: var(--font);
    font-style: italic;
    color: var(--text-mute);
}

.bm-decision-bounce {
    margin: 0;
    color: var(--conflict);
    font-size: 0.71rem;
    line-height: 1.45;
}

.bm-decision-bounce i { margin-right: 0.3rem; }

/* ── The header badge and its slide-out (B7) ─────────────────────────────────
   Recorded decisions are pipeline bookkeeping, so they live behind a small
   control beside the period selector and slide in from the right on the
   drawer's pattern. The count bubble is pending + bounced only — the two
   states a reviewer can act on; recomputed and applied are readable inside
   and never shout from the header. */
.bm-fund-header-tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bm-pending-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-dim);
    font-family: var(--font);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.14s ease, border-color 0.14s ease;
}

.bm-pending-btn:hover { color: var(--acc); border-color: var(--acc-line); }

.bm-pending-btn i { color: var(--acc); }

.bm-pending-bubble {
    min-width: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--acc);
    color: var(--bg);
    font-family: var(--mono);
    font-size: 0.64rem;
    line-height: 1.6;
    text-align: center;
    letter-spacing: 0;
}

.bm-pending-bubble-bounced { background: var(--conflict); }

/* The badge before its count has landed (11b). The shell ships the control
   without reading the six pending populations, so for a moment there is no
   bubble and no statement about whether there should be one: a hairline dot
   in place of the count, and the marker on the button that the suites read.
   Deliberately not a bubble shape - an empty bubble would read as a zero. */
.bm-pending-btn[data-pending="loading"] { color: var(--text-faint); }

.bm-pending-wait {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--line-strong);
    animation: bm-pending-wait 1.1s ease-in-out infinite;
}

@keyframes bm-pending-wait {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
    .bm-pending-wait { animation: none; opacity: 0.5; }
}

/* The panel while it is fetching itself, inside the slide-out the badge
   opens. The reviewer can open the slide-out before the fetch lands, so it
   has to say what it is doing rather than look empty. */
.bm-pending-deferred { padding: 1rem 0; }

.bm-slideout-backdrop {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    display: none;
    background: rgba(15, 24, 40, 0.28);
    z-index: 44;
}

.bm-slideout-backdrop.open { display: block; }

.bm-slideout {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    width: min(560px, 92vw);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateX(102%);
    /* Hidden as well as off-screen, so a closed slide-out is out of the tab
       order and reads as not visible — the transform alone leaves it
       focusable and "visible" to tooling. Visibility flips after the slide
       on close and before it on open. */
    visibility: hidden;
    transition: transform 0.18s ease, visibility 0s linear 0.18s;
    z-index: 45;
}

.bm-slideout.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.18s ease;
}

.bm-slideout-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.9rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}

.bm-slideout-head h3 {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.bm-slideout-head h3 i { margin-right: 0.35rem; color: var(--acc); }

.bm-slideout-body { flex: 1 1 auto; overflow-y: auto; padding: 0.75rem 0.9rem; }

/* ── The pending panel (B5, inside the slide-out since B7) ──────────────────
   Recorded decisions with their pipeline state and Undo. The held report keys
   that used to be its second section are on the identity strip's chips only. */
.bm-pending {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 0.75rem;
}

.bm-pending[hidden] { display: none; }

.bm-pending-group { display: flex; flex-direction: column; gap: 0.45rem; }

.bm-pending-head {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--line-soft);
}

.bm-pending-title {
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.01em;
}

.bm-pending-count { font-variant-numeric: tabular-nums; white-space: nowrap; }

.bm-pending-count-pending { color: var(--acc); }
.bm-pending-count-recomputed { color: var(--acc-2); }
.bm-pending-count-bounced { color: var(--conflict); font-weight: 600; }
.bm-pending-count-applied { color: var(--text-mute); }
.bm-pending-count-unread { color: var(--acc); }

.bm-pending-list { display: flex; flex-direction: column; gap: 0.3rem; }

.bm-pending-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--acc);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.bm-pending-row-pending { border-left-style: dashed; }
.bm-pending-row-recomputed { border-left-color: var(--acc-2); }
.bm-pending-row-applied { border-left-color: var(--line-strong); }
.bm-pending-row-bounced { border-left-color: var(--conflict); background: var(--conflict-soft); }
.bm-pending-row-unread { border-left-style: dotted; }
.bm-pending-row-op .bm-pending-where,
.bm-pending-row-reading .bm-pending-where,
.bm-pending-row-doc .bm-pending-where { color: var(--text-mute); }

.bm-pending-row > .bm-badge { margin-top: 0.15rem; }

.bm-pending-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }

.bm-pending-what { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: baseline; }

.bm-pending-what strong { color: var(--text); }

.bm-pending-where {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--text-dim);
    overflow-wrap: anywhere;
}

.bm-pending-meta {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--text-dim);
}

.bm-pending-actions { display: flex; gap: 0.3rem; flex-shrink: 0; }

.bm-pending-cell,
.bm-pending-undo { font-family: var(--font); }

.bm-pending-applied summary {
    cursor: pointer;
    color: var(--text-mute);
    font-size: 0.71rem;
}

.bm-pending-applied[open] summary { margin-bottom: 0.3rem; }

.bm-pending-empty,
.bm-pending-fineprint { margin: 0; font-size: 0.68rem; line-height: 1.5; }

/* ── Merge (C1) ───────────────────────────────────────────────────────────────
   The one verb on a company row, the relabel a recorded merge puts on the
   folded row and its survivor, and the form. The chip's frame follows the
   pending panel's convention: dashed while pending, solid once recomputed,
   quiet when applied. */
.bm-company-verb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 0.3rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-faint);
    font-size: 0.66rem;
    vertical-align: middle;
    cursor: pointer;
    transition: color 0.14s ease, border-color 0.14s ease;
}

.bm-company-verb:hover {
    color: var(--acc);
    border-color: var(--acc-line);
    background: var(--surface-2);
}

.bm-chip-merge,
.bm-chip-merge-into {
    background: var(--acc-soft);
    color: var(--acc);
    border-color: var(--acc-line);
    text-transform: none;
    letter-spacing: 0;
}

.bm-chip-merge-pending { border-style: dashed; }
.bm-chip-merge-unread { border-style: dotted; }
.bm-chip-merge-recomputed { border-color: var(--acc-2); color: var(--acc-2); background: var(--acc-2-soft); }
.bm-chip-merge-applied { background: var(--surface-3); color: var(--text-dim); border-color: var(--line); }
.bm-chip-merge-bounced { background: var(--conflict-soft); color: var(--conflict); border-color: var(--conflict-line); }

.bm-chip-merge-into { background: var(--surface-3); color: var(--text-dim); border-color: var(--line); }

/* ── A figure a reviewer added by hand (package G2's read side) ─────────────
   `extraction.review_additions`: the document states a number the extraction
   never recorded, so a reviewer typed it into the review workbook. The
   recompute reads the `vw_review_*` views, which carry those rows, so the
   value usually *is* on the mirror and reads like any extracted one — the
   mark is the only thing that says otherwise. A second accent rather than a
   warning colour: the figure is sound, it simply did not come out of the
   PDF by machine. The `+` badge carries the same thing in greyscale. */
.bm-cell-added { background: var(--acc-2-soft); }

/* The state suffix, carried the way the overlay's reviewed marks carry
   theirs (see .bm-cell-reviewed above and its per-state rules). The
   recompute reads review_additions (fabric PR-RC1), so an addition takes
   the same four ladder states; `unread` is kept for a row whose state is
   missing. */
.bm-cell-added-pending { box-shadow: none; outline: 1px dashed var(--acc-2); outline-offset: -1px; }
.bm-cell-added-recomputed { box-shadow: inset 0 0 0 1px var(--acc-2); }
.bm-cell-added-applied { box-shadow: none; }
.bm-cell-added-bounced { box-shadow: inset 0 0 0 1px var(--conflict-line); }
.bm-cell-added-unread { box-shadow: inset 0 0 0 1px var(--acc-2); }

.bm-badge-added {
    background: var(--surface-3);
    color: var(--acc-2);
    border: 1px solid var(--acc-2);
}

.bm-pending-row-addition { border-left-color: var(--acc-2); }
.bm-pending-row-addition .bm-pending-where { color: var(--text-mute); }

/* ── An empty cell that can take an addition (package G2's write side) ──────
   Genuinely empty: no fact row, no observation, no drawer of its own. Where
   the write contract's allowlist admits the table and metric, the dash
   becomes an affordance that opens the additions drawer — the fund's
   documents that could supply the figure. It stays a dash until hovered: a
   plus on every gap would shout across a grid that is mostly gaps, and the
   tab note says what the hover mark means. */
.bm-cell-addable { cursor: pointer; }

.bm-cell-addable::after {
    content: "+";
    position: absolute;
    top: 0.05rem;
    right: 0.2rem;
    font-size: 0.6rem;
    line-height: 1;
    font-weight: 700;
    color: var(--acc-2);
    opacity: 0;
    transition: opacity 0.12s ease;
}

.bm-cell-addable:hover {
    background: var(--acc-2-soft);
    box-shadow: inset 0 -2px 0 var(--acc-2);
}

.bm-cell-addable:hover::after,
.bm-cell-addable.bm-cell-selected::after { opacity: 1; }

/* The additions drawer: one row per document the figure could come from.
   Same grammar as an observation row (head, meta, actions) so the two
   drawers read as one surface; the second accent on the left edge, since
   this is the accent an added figure carries on the grid. */
.bm-add-doc-list { display: flex; flex-direction: column; gap: 0.5rem; }

.bm-add-doc-list details > summary {
    cursor: pointer;
    font-size: 0.71rem;
    padding: 0.2rem 0;
}

.bm-add-doc-list details > .bm-add-doc { margin-top: 0.5rem; }

.bm-add-doc {
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.bm-add-doc-named { border-left-color: var(--acc-2); }

.bm-add-doc-name {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text);
    word-break: break-word;
}

/* Struck like an excluded observation: the document is still on the page
   because the reviewer may want to restore it, but nothing is offered on it. */
.bm-add-doc-excluded { opacity: 0.78; }
.bm-add-doc-excluded .bm-add-doc-name {
    text-decoration: line-through;
    color: var(--text-dim);
}

/* The control that opens the add-row form. Same weight as the observation
   row's verbs; the second accent on the icon says it adds rather than rules. */
.bm-add-doc-verb i { color: var(--acc-2); }

/* The add-row form (G2, 8f). The modal's grammar throughout; three things are
   its own. The reference line names the nearest reported value the magnitude
   guard compares with — or says there is none — in the current-value slot,
   muted when there is nothing to compare with. The name select carries the
   report's spellings in groups. The currency box is short: three letters. */
.bm-add-doc-form .bm-add-doc-reference { flex-wrap: wrap; }
.bm-add-doc-form .bm-add-doc-reference.text-muted strong { color: var(--text-dim); }

.bm-add-doc-select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.4rem 0.55rem;
    font: inherit;
    font-size: 0.8rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
}

.bm-add-doc-select:focus {
    outline: none;
    border-color: var(--acc);
    box-shadow: 0 0 0 3px var(--acc-soft);
}

.bm-add-doc-form input.bm-add-doc-currency {
    flex: 0 0 6rem;
    font-family: var(--mono);
    text-transform: uppercase;
}

/* ── Set value… on a blank cell (P3, S2b) ────────────────────────────────────
   A cell with no fact row that can take a value. The addable cell's grammar
   — a dash until hovered — in the primary accent, not the second: this
   rules on the cell, as Set value does, rather than adding a document's
   reading. A cell carrying such a value reads as any reviewed cell (the
   pen, the frame by state); `bm-cell-minted` only italicises the figure, so
   "no document says this" survives a greyscale print beside the tooltip. */
.bm-cell-settable { cursor: pointer; position: relative; }

.bm-cell-settable::after {
    content: "\270E";
    position: absolute;
    top: 0.05rem;
    right: 0.2rem;
    font-size: 0.6rem;
    line-height: 1;
    color: var(--acc);
    opacity: 0;
    transition: opacity 0.12s ease;
}

.bm-cell-settable:hover {
    background: var(--acc-soft);
    box-shadow: inset 0 -2px 0 var(--acc);
}

.bm-cell-settable:hover::after,
.bm-cell-settable.bm-cell-selected::after { opacity: 1; }

.bm-cell-minted .bm-cell-value { font-style: italic; }

.bm-blank-note { margin-bottom: 0.6rem; }
.bm-blank-metrics { max-width: 34rem; }

/* "not on the mirror" — a plain outlined chip, the state the cell is in. */
.bm-blank-chip {
    display: inline-block;
    padding: 0.02rem 0.4rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-sm);
    font-size: 0.66rem;
    color: var(--text-dim);
    white-space: nowrap;
}

.bm-blank-minted { border-left: 2px solid var(--acc-line); padding-left: 0.5rem; }

/* The additions drawer's Set value… row, between the lead and the list. */
.bm-blank-verbs {
    margin: 0.2rem 0 0.7rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
.bm-blank-verbs p { margin: 0.35rem 0 0; font-size: 0.72rem; }

/* The form: the modal's grammar, plus the lead, the reference, the date and
   the currency box with its origin line and warnings. */
.bm-blank-form .bm-blank-reference { flex-wrap: wrap; }
.bm-blank-form .bm-blank-reference.text-muted strong { color: var(--text-dim); }
.bm-blank-lead { font-size: 0.76rem; color: var(--text-dim); margin: 0 0 0.5rem; }
.bm-blank-lead .bm-blank-chip { margin-right: 0.35rem; }
.bm-blank-form input.bm-blank-date { flex: 0 0 8rem; }
.bm-blank-form input.bm-blank-currency {
    flex: 0 0 6rem;
    text-transform: uppercase;
}
.bm-blank-origin { font-size: 0.7rem; margin: -0.2rem 0 0.4rem; }

.bm-blank-warn {
    margin: 0 0 0.5rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--warn-line);
    border-radius: var(--r-sm);
    background: var(--warn-soft);
    color: var(--text);
    font-size: 0.72rem;
}
.bm-blank-warn i { color: var(--warn); margin-right: 0.25rem; }

/* A slot the merge fold filled from the absorbed entity, because the survivor
   reported nothing there. The accent, not a warning colour: the value is
   sound and comes from a real mirror row, it simply is not this entity's own
   reading. The `m` badge carries the same thing in greyscale. */
.bm-cell-folded { background: var(--acc-soft); }
.bm-badge-folded {
    background: var(--surface-3);
    color: var(--acc);
    border: 1px solid var(--acc-line);
}

.bm-company-merged .bm-company-name,
.bm-company-merged .bm-rev-company-name,
.bm-company-merged .bm-fin-company { color: var(--text-dim); font-style: italic; }

.bm-note-merge { border-left-color: var(--acc-2); }
.bm-note-merge i { color: var(--acc-2); }

.bm-merge-form { max-height: min(80vh, 760px); overflow-y: auto; }

.bm-merge-lead {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.55;
    color: var(--text-dim);
}

.bm-merge-list { display: flex; flex-direction: column; gap: 0.25rem; }

.bm-merge-row {
    display: grid;
    grid-template-columns: 3.2rem 3.6rem minmax(0, 1fr);
    align-items: start;
    gap: 0.4rem;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.bm-merge-headrow {
    padding: 0 0.45rem;
    border: none;
    background: transparent;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.bm-merge-row-merged { opacity: 0.6; }

.bm-merge-col-tick {
    display: flex;
    justify-content: center;
    padding-top: 0.15rem;
    cursor: pointer;
}

.bm-merge-col-tick input { accent-color: var(--acc); cursor: pointer; }

.bm-merge-entity { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.bm-merge-name { font-weight: 650; color: var(--text); }

.bm-merge-facts,
.bm-merge-id {
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--text-dim);
    overflow-wrap: anywhere;
}

.bm-merge-id { color: var(--text-faint); }

.bm-merge-noresult { padding: 0.2rem 0.45rem; }

.bm-merge-others summary {
    cursor: pointer;
    font-size: 0.71rem;
    color: var(--text-mute);
}

.bm-merge-others[open] summary { margin-bottom: 0.3rem; }

.bm-merge-search-row input[type="search"] {
    flex: 1 1 auto;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.78rem;
}

.bm-merge-search-row input[type="search"]:focus {
    outline: none;
    border-color: var(--acc-line);
    box-shadow: 0 0 0 3px var(--acc-soft);
}

.bm-merge-warning {
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--warn-line);
    border-radius: var(--r-sm);
    background: var(--warn-soft);
    color: var(--warn);
}

.bm-merge-warning i { margin-right: 0.25rem; }
.bm-merge-warning strong { color: inherit; }
.bm-merge-warning code { color: inherit; }

.bm-tag-raw { background: var(--acc-soft); color: var(--acc); }

/* ── Dry run ──────────────────────────────────────────────────────────────── */
.bm-dry-run {
    padding: 0.35rem 0.5rem;
    border: 1px dashed var(--warn-line);
    border-radius: var(--r-sm);
    background: var(--warn-soft);
    color: var(--warn);
}

.bm-dry-run i { color: var(--warn); }

/* ── Modal ────────────────────────────────────────────────────────────────── */

/* Empty until the forms endpoint fills it, and emptied again out of band by
   every successful write. An empty host must lay out as nothing at all. */
.bm-modal-host:empty { display: none; }

.bm-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(16, 32, 56, 0.32);
}

.bm-modal {
    position: fixed;
    z-index: 61;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(30rem, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.bm-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.bm-modal-head h3 {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
}

.bm-modal-head h3 i { margin-right: 0.35rem; color: var(--acc); }

.bm-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.9rem;
}

.bm-modal-context {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--text-mute);
    word-break: break-word;
}

.bm-modal-current {
    font-size: 0.76rem;
    color: var(--text-dim);
}

.bm-modal-current strong {
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.bm-modal-units {
    margin-left: 0.35rem;
    font-family: var(--mono);
    font-size: 0.67rem;
    color: var(--text-mute);
}

.bm-modal-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.bm-modal-row label {
    flex: 0 0 100%;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.065em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.bm-modal-row input[type="text"] {
    flex: 1 1 10rem;
    min-width: 0;
    padding: 0.34rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.bm-modal-row input[type="text"]::placeholder { color: var(--text-faint); }

.bm-modal-row select {
    padding: 0.34rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.76rem;
    cursor: pointer;
}

.bm-modal-row input[type="text"]:focus,
.bm-modal-row select:focus {
    outline: none;
    border-color: var(--acc-line);
    box-shadow: 0 0 0 3px var(--acc-soft);
}

/* What will actually be stored, in absolute units. The whole reason the form
   has a scale select at all, so it gets its own line and reserves its height
   rather than shifting the buttons as the reviewer types. */
.bm-modal-preview {
    min-height: 1.1rem;
    font-family: var(--mono);
    font-size: 0.71rem;
    font-variant-numeric: tabular-nums;
    color: var(--acc);
}

.bm-modal-preview-bad { color: var(--warn); }

.bm-modal-check {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.71rem;
    line-height: 1.45;
    color: var(--text-dim);
    cursor: pointer;
}

.bm-modal-check input { margin-top: 0.15rem; accent-color: var(--acc); }

.bm-modal-fineprint {
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--text-mute);
}

.bm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    padding-top: 0.2rem;
    border-top: 1px solid var(--line-soft);
    margin-top: 0.1rem;
}

@media (max-width: 1200px) {
    .bm-fund-body.drawer-open { grid-template-columns: minmax(0, 1fr); }

    .bm-fund-body.drawer-open .bm-drawer {
        position: fixed;
        inset: auto 0 0 0;
        max-height: 72vh;
        margin: 0;
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        box-shadow: var(--shadow-lg);
        z-index: 40;
    }
}

@media (max-width: 760px) {
    /* The header at phone width (housekeeping item 7). At 390 px it has 366 px
       and needed ~510: the nav ran under the toggle and Sign out, and the page
       scrolled to 412 px. The wordmark folds to its mark, which is still the
       home link and keeps its name for assistive tech; the rule before the
       nav goes; the links tighten; Sign out becomes its icon. That fits all
       three links at 390 px with room to spare. Below ~360 px the nav scrolls
       inside itself, like the tab bar, so the page never does. */
    .header { padding: 0 0.75rem; gap: 0.5rem; }
    .header-right { flex-shrink: 0; }
    .header-brand { font-size: 0; gap: 0; padding: 0.55rem 0.35rem; margin-left: -0.35rem; }
    .header-nav {
        min-width: 0;
        padding: 2px 0;
        border-left: none;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .header-nav::-webkit-scrollbar { display: none; }
    .nav-link { padding: 0.32rem 0.45rem; }
    .nav-link.active::after { left: 0.45rem; right: 0.45rem; }
    .btn-logout { padding: 0.28rem 0.5rem; }
    .btn-logout i { display: inline; }
    .btn-logout-text { display: none; }
    .bm-modal { width: calc(100vw - 1.5rem); }
    .bm-modal-row select { flex: 1 1 100%; }
    .header-left { gap: 0.75rem; }
    .user-badge { display: none; }
    .container { padding: 0.9rem 0.75rem 3rem; }
    .bm-stat { min-width: 108px; flex: 1 1 108px; }
    .bm-stat-value { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bm-app *, .bm-app *::before, .bm-app *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ── Documents tab (package D) ────────────────────────────────────────────────
   One row per document behind the fund's facts, with the two override verbs.
   The register is the same as the rest of the module: hairlines, tabular
   figures, and colour only where it carries meaning — here, that a document
   is a capital account (which makes its figures one investor's share) or that
   an override has taken it out of the recompute. */

.bm-doc-filters { margin-bottom: 0.55rem; }

.bm-viewswitch-count {
    margin-left: 0.35rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 500;
    opacity: 0.72;
}

.bm-viewswitch-btn[disabled] { opacity: 0.4; cursor: default; }
.bm-viewswitch-btn[disabled]:hover { color: var(--text-mute); }

.bm-doc-table { width: 100%; }
.bm-doc-table td { vertical-align: top; }
.bm-doc-row { transition: background 0.14s ease; }
.bm-doc-row:hover { background: var(--surface-2); }

.bm-doc-pdf { width: 34px; }
.bm-doc-date { white-space: nowrap; font-family: var(--mono); font-size: 0.72rem; }

.bm-doc-name { min-width: 15rem; }

.bm-doc-filename {
    display: block;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.bm-doc-fund {
    display: block;
    font-size: 0.7rem;
    line-height: 1.4;
}

.bm-doc-type { min-width: 13rem; }
.bm-doc-tables { font-size: 0.7rem; max-width: 12rem; overflow-wrap: anywhere; }
.bm-doc-status, .bm-doc-actions { white-space: nowrap; }

.bm-chip-subtype { text-transform: none; letter-spacing: 0; }

/* The one subtype that changes what a number means. */
.bm-chip-capital {
    background: var(--warn-soft);
    color: var(--warn);
    border-color: var(--warn-line);
}

.bm-chip-warn {
    background: var(--warn-soft);
    color: var(--warn);
    border-color: var(--warn-line);
    text-transform: none;
    letter-spacing: 0;
}

.bm-chip-quiet {
    background: var(--surface-3);
    color: var(--text-dim);
    border-color: var(--line);
    text-transform: none;
    letter-spacing: 0;
}

.bm-chip-excluded {
    background: var(--conflict-soft);
    color: var(--conflict);
    border-color: var(--conflict-line);
    text-transform: none;
    letter-spacing: 0;
}

/* A document an override has taken out of the recompute. Struck, not hidden:
   the values it contributed are still on the other tabs until the rebuild, so
   the reviewer needs to see that this one is on its way out. */
.bm-doc-excluded .bm-doc-filename {
    color: var(--text-dim);
    text-decoration: line-through;
}

.bm-doc-excluded td { opacity: 0.78; }

/* G3 — the Reviewed column. `who · when` off the latest review_approvals row
   for the document; plain when every source row it contributes on this fund
   carries a mark, dashed when the review stopped short (or the document has
   grown rows since). The ok tone, because a review mark is the one chip in
   this table that says something is finished rather than wrong. */
.bm-doc-review { white-space: nowrap; }

.bm-chip-reviewed,
.bm-chip-reviewed-partial {
    background: var(--ok-soft);
    color: var(--ok);
    border-color: var(--ok);
    text-transform: none;
    letter-spacing: 0;
}

.bm-chip-reviewed-partial { border-style: dashed; }

.bm-chip-reviewed .fa-solid,
.bm-chip-reviewed-partial .fa-solid { font-size: 0.6rem; margin-right: 0.15rem; }

.bm-doc-review-rows {
    display: block;
    font-size: 0.68rem;
    line-height: 1.5;
    margin-top: 0.15rem;
}

.bm-doc-unreviewed { display: inline-block; min-width: 1.5rem; text-align: center; }

.bm-doc-verb {
    padding: 0.2rem 0.5rem;
    margin-right: 0.25rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.14s ease, border-color 0.14s ease;
}

.bm-doc-verb:hover {
    color: var(--acc);
    border-color: var(--acc-line);
}

/* G3: Mark reviewed is the tab's own verb, so it reads as ink rather than
   as one more grey control; the icon is the same check the chip wears. */
.bm-doc-verb-review { color: var(--text); }
.bm-doc-verb-review .fa-solid { font-size: 0.65rem; margin-right: 0.1rem; }

/* The mark-reviewed form: the row count is the point of the form, so it
   leads; a prior mark sits under it, quieter. */
.bm-doc-review-count strong { font-variant-numeric: tabular-nums; }
.bm-doc-review-prior { color: var(--text-dim); font-size: 0.8rem; }


/* ── Report-key verbs (C2, 9b) ───────────────────────────────────────────────
   Each `.bm-chip-xwalk` on the identity strip carries its verbs — Re-point /
   Drop on a committed key, Confirm / Mint on a pending one — as small text
   buttons in the chip's own type size, so the strip reads as a row of keys
   with quiet controls rather than a toolbar. The form reuses the merge form's
   list, row and search styling; only what is new to it is here. */
.bm-xwalk-key {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-right: 0.35rem;
}

.bm-xwalk-verbs { display: inline-flex; gap: 0.1rem; }

.bm-xwalk-verb {
    padding: 0.05rem 0.35rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-faint);
    font-family: inherit;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.bm-xwalk-verb:hover {
    color: var(--acc);
    border-color: var(--acc-line);
    background: var(--surface-2);
}

.bm-xwalk-form-key {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text);
}

.bm-xwalk-docs { display: flex; flex-direction: column; gap: 0.3rem; }

.bm-xwalk-doc-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-height: 11rem;
    overflow-y: auto;
}

.bm-xwalk-doc {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--line-soft);
    border-left-width: 3px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.bm-xwalk-doc-name {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* Where the document's values go today: this fund, another fund (a stale
   crosswalk, the one worth a second look), or nowhere (a held key). */
.bm-xwalk-doc-here      { border-left-color: var(--acc); }
.bm-xwalk-doc-elsewhere { border-left-color: var(--conflict); }
.bm-xwalk-doc-none      { border-left-color: var(--line); }

.bm-xwalk-target {
    display: grid;
    grid-template-columns: 1.4rem minmax(0, 1fr);
    align-items: start;
    gap: 0.4rem;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    cursor: pointer;
}

.bm-xwalk-target:hover { border-color: var(--acc-line); }

.bm-xwalk-target input { margin-top: 0.2rem; accent-color: var(--acc); cursor: pointer; }

/* The confirm form's fine print is information, not a warning: the key is
   released from review, nothing moves. The mint form's says Fabric derives
   the id and creates the fund. */
.bm-xwalk-confirm { color: var(--text-dim); }
.bm-xwalk-mint strong { color: var(--text); }

/* ── C2 (9c): the decision standing on a report key ────────────────────────
   The chip says what the crosswalk thinks; this says what the reviewer
   decided. Quiet by construction — a decision is not a conflict or a
   warning, and fabric's E3 applies it to the crosswalk at the next
   corrections run. The state word is the panel's own ladder label, set
   smaller than the decision itself. */
.bm-xwalk-key-decided { align-items: center; }

.bm-xwalk-decision {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.06rem 0.34rem;
    border: 1px dashed var(--acc-line);
    border-radius: var(--r-sm);
    background: var(--acc-soft);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--acc);
    white-space: nowrap;
}

/* A drop is the one decision that takes the key away from every fund, so it
   is the one that reads as a subtraction rather than a move. */
.bm-xwalk-decision-drop {
    border-color: var(--line);
    background: transparent;
    color: var(--text-dim);
}

.bm-xwalk-decision-state {
    font-weight: 400;
    font-size: 0.64rem;
    color: var(--text-dim);
}

/* An applied mint's link to the fund Fabric created, on its row in the
   Decisions panel — the one decision whose effect lives on another fund's
   page. */
.bm-xwalk-minted {
    margin-left: 0.25rem;
    color: var(--acc);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.bm-xwalk-minted:hover { text-decoration: underline; }
.bm-xwalk-minted i { font-size: 0.66rem; margin-right: 0.15rem; }

/* The panel's line under an applied row: its Undo changes nothing upstream
   (fabric ruling 3). Information, not a warning — nothing is wrong. */
.bm-xwalk-undo-inert {
    margin-top: 0.2rem;
    font-size: 0.7rem;
}

.bm-xwalk-undo-inert i { margin-right: 0.3rem; }

/* The Documents tab's mark. Not the struck treatment an excluded document
   gets: nothing about the document has been judged — its report key has. */
.bm-doc-xwalk {
    margin-top: 0.15rem;
    border-style: dashed;
}

.bm-doc-xwalk-moving  { border-color: var(--acc-line); color: var(--acc); }
.bm-doc-xwalk-dropped { border-color: var(--line); color: var(--text-dim); }
.bm-doc-xwalk-held    { border-color: var(--line); color: var(--text-dim); }

.bm-note-xwalk { border-left-color: var(--acc-line); }

.bm-pending-row-xwalk .bm-pending-where { font-family: var(--mono); }

/* The border says how solid the other end is: a re-point names a fund that
   exists, a mint names one that does not exist yet and will not until a
   reader and a recompute create it. */
.bm-xwalk-decision-redirect { border-style: dashed; }
.bm-xwalk-decision-mint     { border-style: dotted; }

/* ── C2 (b): report company keys on a company row, and their verb ──────────
   The company column is sticky at 230px and wraps, so the keys sit on their
   own line under the name and meta, the way `.bm-company-meta` already does.
   A key is elided in the chip (the full one is in the title) rather than
   allowed to widen a column whose geometry is declared. */
.bm-cokeys {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 3px;
}

.bm-cokey {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    max-width: 100%;
}

.bm-chip-cokey {
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--text-mute);
    background: var(--surface-2);
    border: 1px solid var(--line);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-cokey-decided .bm-chip-cokey { border-style: dashed; }

.bm-cokey-verb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: none;
    color: var(--text-faint);
    font-size: 0.62rem;
    cursor: pointer;
}

.bm-cokey-verb:hover {
    color: var(--acc);
    border-color: var(--acc-line);
    background: var(--surface-2);
}

/* In the unresolved panel the verb is named, not an icon alone: the row has
   the width for it and it is the panel's only action. */
.bm-unmapped-verb {
    height: 18px;
    padding: 0 0.4rem;
    color: var(--warn);
    border-color: var(--warn-line);
}

.bm-unmapped-verb:hover {
    color: var(--acc);
    border-color: var(--acc-line);
    background: var(--surface);
}

/* The row the verb and the decision mark hang on. `.bm-unmapped li` already
   lays it out; this carries the gap the verb needs and is the hook the
   decided state keys off. */
.bm-unmapped-row { row-gap: 0.3rem; }

.bm-unmapped-decided .bm-unmapped-name { color: var(--acc); }

/* ── C2 (c): the company key's second verb, and what a drop leaves behind ──
   A drop is a subtraction, so it reads as one everywhere: the chip's button
   picks up the warning colour on hover where the re-point picks up the
   accent, the dropped rows leave the table for a collapsed section under it,
   and nothing in either is tinted as a conflict — nothing is wrong on the
   mirror; the key is decided, and the next runner pass carries it out. */
.bm-cokey-verb-repoint:hover { color: var(--acc); border-color: var(--acc-line); }

.bm-cokey-verb-drop:hover {
    color: var(--warn);
    border-color: var(--warn-line);
    background: var(--surface-2);
}

.bm-unmapped-verb.bm-cokey-verb-drop { color: var(--text-dim); }

/* The sibling spellings, ticked. A drop keys on one normalized spelling, so
   this list is the difference between 37 decisions and 30 intents on the
   named case — it is the form's substance, not a footnote, and it is sized
   to be read and unticked rather than skimmed past. */
.bm-xwalk-alsokeys > label { margin-bottom: 0.15rem; }

.bm-xwalk-alsokey-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-height: 9.5rem;
    overflow-y: auto;
    padding: 0.35rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.bm-xwalk-alsokey {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.72rem;
}

.bm-xwalk-alsokey input { accent-color: var(--acc); cursor: pointer; }

.bm-xwalk-alsokey code {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* The two notes that are information rather than warning: what a per-key
   drop cannot reach, and when the platform picker is read at all. */
.bm-xwalk-spellgap,
.bm-xwalk-platform-note { color: var(--text-dim); }

/* The one warning on the form, and the only place a drop is discouraged:
   this key is the entity's last route to the fund and it holds a position
   leg, so the drop would leave that leg reached by no spelling at all. */
.bm-xwalk-orphan {
    border-left: 2px solid var(--warn-line);
    padding-left: 0.5rem;
    color: var(--text);
}

.bm-xwalk-orphan > i { color: var(--warn); }

/* Dropped companies, out of the way and still on the page. */
.bm-co-dropped {
    margin-top: 0.85rem;
    border-top: 1px solid var(--line-soft);
    padding-top: 0.6rem;
}

.bm-co-dropped > summary {
    cursor: pointer;
    font-size: 0.76rem;
    color: var(--text-dim);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
}

.bm-co-dropped > summary > i { color: var(--text-faint); }

.bm-co-dropped > summary:hover { color: var(--text); }

.bm-co-dropped .table-wrapper { margin-top: 0.5rem; }

.bm-company-dropped .bm-company-name {
    color: var(--text-dim);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* ── Summary table (S2) ───────────────────────────────────────────────────────
   /summary/{fund}: the investment team's summary sheet. Declared geometry
   like the company tables — fixed layout, one <col> per column kind, and a
   width computed from the counts the server emits as --bm-sum-<kind> — so a
   badge or a status word is clipped or wrapped inside its column instead of
   re-sizing the table around it.

   The five badges are substitutions the table made, not review signals, so
   they are quiet: a letter that survives greyscale, a tint well under the
   conflict colour, and the badge's words in the tooltip. `ccy` is the one
   worth noticing (a currency mislabel shows up there first), so its tint is
   applied last and wins where a cell carries several. */
.bm-sum-title-tag {
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-mute);
    vertical-align: middle;
}

.bm-sum-note { margin-bottom: 0.8rem; }

.bm-sum-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    margin-top: 0.45rem;
    font-size: 0.74rem;
    color: var(--text-mute);
}

.bm-sum-legend-item .bm-badge { margin-left: 0; margin-right: 0.2rem; }

.bm-sum-table {
    width: calc(var(--bm-sum-company-w)
                + var(--bm-sum-exclude, 0) * var(--bm-sum-exclude-w)
                + var(--bm-sum-pct, 0)     * var(--bm-sum-pct-w)
                + var(--bm-sum-ratio, 0)   * var(--bm-sum-ratio-w)
                + var(--bm-sum-money, 0)   * var(--bm-sum-money-w)
                + var(--bm-sum-count, 0)   * var(--bm-sum-count-w)
                + var(--bm-sum-sentiment, 0) * var(--bm-sum-sentiment-w));
    table-layout: fixed;
    font-size: 0.78rem;
}

.bm-sum-col-company { width: var(--bm-sum-company-w); }
.bm-sum-col-exclude { width: var(--bm-sum-exclude-w); }
.bm-sum-col-pct     { width: var(--bm-sum-pct-w); }
.bm-sum-col-ratio   { width: var(--bm-sum-ratio-w); }
.bm-sum-col-money   { width: var(--bm-sum-money-w); }
.bm-sum-col-count   { width: var(--bm-sum-count-w); }
.bm-sum-col-sentiment { width: var(--bm-sum-sentiment-w); }
/* S8: time_series' Sentiment band, the word as recorded and toned. */
.bm-sum-sentiment-cell { text-align: center; }

.bm-sum-table td,
.bm-sum-table th { padding: 0.42rem 0.5rem; }

.bm-sum-table thead tr:not(.bm-group-row) th {
    white-space: normal;
    line-height: 1.2;
    overflow: hidden;
    vertical-align: bottom;
}

.bm-sum-table .bm-group-row th { overflow: hidden; text-overflow: ellipsis; }
.bm-sum-table thead th.bm-sum-th { text-align: center; }

/* The company column stays put while the thirty others scroll under it. */
.bm-sum-table th.bm-company-cell {
    position: sticky;
    left: 0;
    z-index: 3;
    text-align: left;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    background: var(--surface);
    border-right: 1px solid var(--line);
}

.bm-sum-table thead th.bm-company-cell { z-index: 4; background: var(--surface-2); }
.bm-sum-table .bm-group-row th.bm-company-cell { background: var(--surface-3); }
.bm-sum-table tbody tr:hover th.bm-company-cell { background: var(--surface-hover); }

/* Each band after the first opens on a rule, all the way down. */
.bm-sum-group-start { border-left: 1px solid var(--line); }

.bm-sum-cell { overflow: hidden; text-overflow: ellipsis; }
.bm-sum-cell .bm-cell-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px 0.25rem;
    margin-top: 2px;
}
.bm-sum-cell .bm-cell-meta .bm-badge { margin-left: 0; }

.bm-sum-linked { cursor: pointer; }
.bm-sum-linked:hover .bm-cell-value { color: var(--acc); }

/* A blank with a reason: the reason, small, and allowed to wrap. */
.bm-sum-blank {
    font-size: 0.66rem;
    font-style: italic;
    color: var(--text-faint);
    white-space: normal;
    line-height: 1.2;
}
.bm-sum-refused { color: var(--warn); }
.bm-sum-norate  { color: var(--warn); }
.bm-sum-unsourced { color: var(--text-faint); }
.bm-sum-noccy   { color: var(--warn); }

/* S3: money in two views. Both are in the markup; #bm-sum-view[data-ccy]
   picks one, so the toggle is a class flip and never a request. EUR is the
   default, so only the reporting view needs an attribute to show. */
.bm-money-rep { display: none; }
#bm-sum-view[data-ccy="reporting"] .bm-money-rep { display: inline; }
#bm-sum-view[data-ccy="reporting"] .bm-money-eur { display: none; }

.bm-sum-ccy-toggle {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}
.bm-sum-ccy-option {
    padding: 0.28rem 0.6rem;
    font: inherit;
    font-size: 0.74rem;
    color: var(--text-mute);
    background: var(--surface);
    border: 0;
    cursor: pointer;
}
.bm-sum-ccy-option + .bm-sum-ccy-option { border-left: 1px solid var(--line); }
.bm-sum-ccy-option:hover { color: var(--acc); }
.bm-sum-ccy-option[aria-pressed="true"] {
    color: var(--text);
    background: var(--surface-3);
    font-weight: 600;
}

.bm-sum-money .bm-cell-value { font-variant-numeric: tabular-nums; }

/* ── The summary as a dashboard (S7) ────────────────────────────────────
   The first screen is the fund's name with a quiet identity line, a row of
   stat tiles, one reading line (the rest behind *How to read this*), then
   the table, which is still the primary artefact. The tiles' figures stand
   alone, so they keep the font's proportional figures (tabular digits look
   loose at display size); the table keeps tabular. #bm-sum-totals is the
   swap target for Exclude and holds three of the tiles, so it steps out of
   the way of the grid. */
.bm-sum-titleblock { min-width: 0; }
.bm-sum-header .bm-fund-title { margin-bottom: 0.15rem; }
.bm-sum-ident {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 1.1rem;
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-mute);
}
.bm-sum-ident strong { color: var(--text-dim); font-weight: 600; }
.bm-sum-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.5rem;
    margin-top: 0.2rem;
}
.bm-sum-totals { display: contents; }
.bm-sum-tile {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.55rem 0.75rem 0.6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
.bm-sum-tile-label {
    font-size: 0.72rem;
    color: var(--text-mute);
}
.bm-sum-tile-value {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text);
    overflow-wrap: anywhere;
}
/* Money keeps its code and figure on one line; a sum that left a company
   out puts its "n of m" under the figure rather than beside it. */
.bm-sum-nav .bm-sum-tile-value,
.bm-sum-total .bm-sum-tile-value { white-space: nowrap; }
.bm-sum-tile-value .bm-sum-partial {
    display: block;
    font-size: 0.66rem;
    letter-spacing: 0;
    white-space: normal;
}
.bm-sum-ident-part { white-space: nowrap; }
.bm-sum-tile-value .bm-sum-blank { font-size: 0.9rem; font-weight: 500; }
@media (max-width: 760px) {
    .bm-sum-kpis { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0.35rem; }
    .bm-sum-tile { padding: 0.35rem 0.5rem 0.4rem; gap: 0.05rem; }
    .bm-sum-tile-value { font-size: 1.02rem; }
}

/* One reading line above the table; the long notes and the badge legend
   open under it. The workbook's lead stays on the line: it changes what a
   click on a figure does. */
.bm-sum-readbar { padding: 0; margin-bottom: 0.8rem; }
.bm-sum-readbar > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1.2rem;
    padding: 0.5rem 0.8rem;
    list-style: none;
    cursor: pointer;
}
.bm-sum-readbar > summary::-webkit-details-marker { display: none; }
.bm-sum-readbar-line { color: var(--text-dim); }
.bm-sum-readbar-line i,
.bm-sum-workbook-note i { margin-right: 0.3rem; }
.bm-sum-readbar-cue {
    margin-left: auto;
    color: var(--acc);
    font-size: 0.76rem;
    white-space: nowrap;
}
.bm-sum-readbar-cue i { font-size: 0.66rem; margin-left: 0.2rem; transition: transform 0.15s; }
.bm-sum-readbar[open] .bm-sum-readbar-cue i { transform: rotate(180deg); }
.bm-sum-howto {
    padding: 0.1rem 0.8rem 0.6rem;
    border-top: 1px solid var(--line-soft);
}
.bm-sum-howto p { margin: 0.5rem 0 0; }
/* A sum that left a company out for want of a rate says how many it has. */
.bm-sum-partial {
    font-size: 0.66rem;
    font-weight: 500;
    color: var(--warn);
    margin-left: 0.2rem;
}

.bm-sum-unsourced-note {
    display: block;
    margin-top: 2px;
    font-size: 0.58rem;
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text-faint);
}

.bm-sum-col-unsourced,
.bm-sum-band-unsourced { color: var(--text-faint); }

/* Badges: letter + quiet tint. */
.bm-badge-sum      { font-size: 0.58rem; padding: 0 3px; }
.bm-badge-sum-fy,
.bm-badge-sum-year { background: var(--revised-soft); color: var(--revised);
                     border: 1px solid color-mix(in srgb, var(--revised) 35%, transparent); }
.bm-badge-sum-est,
.bm-badge-sum-impl { background: var(--acc-2-soft); color: var(--acc-2);
                     border: 1px solid color-mix(in srgb, var(--acc-2) 35%, transparent); }
.bm-badge-sum-impl { border-style: dashed; }
.bm-badge-sum-ccy  { background: var(--warn-soft); color: var(--warn);
                     border: 1px solid var(--warn-line); }

.bm-sum-tint-fy,
.bm-sum-tint-year { background: color-mix(in srgb, var(--revised) 6%, transparent); }
.bm-sum-tint-est,
.bm-sum-tint-impl { background: color-mix(in srgb, var(--acc-2) 6%, transparent); }
.bm-sum-tint-ccy  { background: color-mix(in srgb, var(--warn) 8%, transparent); }

/* The fund total: the table's answer, at the foot behind a gap (S2b), with
   a double rule over it — the ledger's mark for a total — so it cannot be
   read as one more company. */
.bm-sum-gap td {
    height: 1.1rem;
    padding: 0;
    border: 0;
    background: var(--bg);
}
.bm-sum-fund-row td,
.bm-sum-fund-row th {
    border-top: 3px double var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
.bm-sum-fund-row .bm-cell-value { font-weight: 700; color: var(--text); }
.bm-sum-fund-row th.bm-company-cell { background: var(--surface-2); }
.bm-sum-fund-row .bm-company-name {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Exclude: a checkbox, then a greyed row and a struck FMV % — at 0 ms, from
   the click, before the server has answered. */
.bm-sum-exclude-cell { text-align: center; }
.bm-sum-exclude { width: 15px; height: 15px; accent-color: var(--acc); cursor: pointer; }
.bm-sum-row-excluded td:not(.bm-sum-exclude-cell),
.bm-sum-row-excluded th.bm-company-cell .bm-company-name { opacity: 0.45; }
.bm-sum-struck .bm-cell-value {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    color: var(--text-mute);
}

/* Realised or written off: folded at the foot. */
.bm-sum-realised-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-dim);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.bm-sum-realised-toggle i { font-size: 0.7rem; transition: transform 0.15s ease; }
.bm-sum-realised-open i { transform: rotate(90deg); }
.bm-sum-realised-toggle:hover { color: var(--acc); }
.bm-sum-realised-note { color: var(--text-faint); font-size: 0.74rem; white-space: normal; }
.bm-sum-row-realised td { color: var(--text-mute); }

.bm-sum-wrapper { margin-bottom: 1rem; }
.bm-sum-company .bm-chip { margin-left: 0.3rem; }
.bm-sum-row th.bm-company-cell,
.bm-sum-fund-row th.bm-company-cell { font-size: 0.8rem; }
.bm-sum-fmv .bm-cell-value { font-weight: 600; }
.bm-sum-live tr:last-child td,
.bm-sum-live tr:last-child th { border-bottom: 1px solid var(--line); }
.bm-sum-realised-head th,
.bm-sum-realised-head td { background: var(--surface-2); }
.bm-sum-realised tr:hover td { background: var(--surface-hover); }
.bm-sum-fund td { background: color-mix(in srgb, var(--acc) 4%, transparent); }
.bm-summary-link i,
.bm-sum-export i { margin-right: 0.3rem; }
.bm-sum-export:disabled { cursor: progress; }

/* ── Summary S2b: the picker, the workbook mark, the derivation drawer ──── */

.bm-sum-picker { position: relative; max-width: 760px; margin: 0 0 1rem; }
.bm-sum-picker-box { width: 100%; }
.bm-sum-picker-box input { width: 100%; }
.bm-sum-results {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: min(60vh, 520px);
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
}
.bm-sum-results .bm-result-count {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    border-bottom: 1px solid var(--line-soft);
}
.bm-sum-pick-list { display: flex; flex-direction: column; }
.bm-sum-pick {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.45rem 0.75rem;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--line-soft);
}
.bm-sum-pick:last-child { border-bottom: 0; }
.bm-sum-pick:hover,
.bm-sum-pick:focus { background: var(--surface-hover); outline: none; }
.bm-sum-pick:focus { box-shadow: inset 2px 0 0 var(--acc); }
.bm-sum-pick-name { font-weight: 600; }
.bm-sum-pick-name .bm-tag,
.bm-sum-pick-name .bm-chip { margin-left: 0.35rem; }

.bm-sum-empty-row {
    padding: 2.5rem 1rem !important;
    text-align: center;
    color: var(--text-faint);
}

/* A figure no document stands behind — the workbook's (S2b, item 2). */
.bm-sum-workbook .bm-cell-value { color: var(--text-mute); }
.bm-sum-workbook-note i { color: var(--text-mute); }

/* A figure computed from several inputs opens how (item 4). */
.bm-sum-derivation .bm-cell-value {
    text-decoration: underline dotted var(--text-faint);
    text-underline-offset: 3px;
}

.bm-sum-deriv-result {
    font-size: 1.5rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    margin: 0.3rem 0 0.2rem;
}
.bm-sum-deriv-formula { font-variant-numeric: tabular-nums; }
.bm-sum-deriv-badges {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    font-size: 0.78rem;
    color: var(--text-dim);
}
.bm-sum-deriv-badges li { margin: 0.15rem 0; }
.bm-sum-deriv-list { padding: 0 1rem; overflow-wrap: anywhere; }
.bm-sum-deriv-input {
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--line-soft);
}
.bm-sum-deriv-part {
    margin: 0.4rem 0 0 0.4rem;
    padding: 0.4rem 0 0.2rem 0.75rem;
    border-bottom: 0;
    border-left: 2px solid var(--line);
}
.bm-sum-deriv-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.2rem 0.75rem;
    align-items: baseline;
}
.bm-sum-deriv-input .bm-obs-meta { overflow-wrap: anywhere; }
.bm-sum-deriv-label { font-weight: 600; }
.bm-sum-deriv-value {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.bm-sum-deriv-action { margin-top: 0.35rem; }
.bm-sum-deriv-open i { margin-right: 0.3rem; }
.bm-sum-deriv-why { font-size: 0.78rem; }

/* ── Summary charts (S5) ─────────────────────────────────────────────────
   Server-rendered SVG under the table. The money plots are drawn once per
   currency view in the .bm-money-eur / .bm-money-rep groups above, so the
   toggle flips them with the table; the margin strip and the fund growth are
   ratios, drawn once. One y-scale per plot, hairline solid grid, thin bars
   with a rounded data end, a 2px line with ringed markers. */
.bm-sum-charts { margin-top: 0; }
/* S9: the band is closed by default behind one quiet bar, dressed as the
   reading line above it is: what the band holds, and Show / Hide. It is a
   <details>, so the weights response's out-of-band targets inside it stay
   in the DOM while it is closed. */
.bm-sum-band > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1.2rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--line);
    border-left: 2px solid var(--acc);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: 0.77rem;
    line-height: 1.6;
    list-style: none;
    cursor: pointer;
}
.bm-sum-band > summary::-webkit-details-marker { display: none; }
.bm-sum-band > summary:hover .bm-sum-band-cue { text-decoration: underline; }
.bm-sum-band-label { color: var(--text); font-weight: 600; }
.bm-sum-band-label i { color: var(--acc); margin-right: 0.3rem; }
.bm-sum-band-contents { color: var(--text-dim); }
.bm-sum-band-cue {
    margin-left: auto;
    color: var(--acc);
    font-size: 0.76rem;
    white-space: nowrap;
}
.bm-sum-band-cue i { font-size: 0.66rem; margin-left: 0.2rem; transition: transform 0.15s; }
.bm-sum-band[open] .bm-sum-band-cue i { transform: rotate(180deg); }
.bm-sum-band-hide,
.bm-sum-band[open] .bm-sum-band-show { display: none; }
.bm-sum-band[open] .bm-sum-band-hide { display: inline; }
.bm-sum-band[open] > .bm-sum-fundgrid { margin-top: 0.8rem; }
@media (max-width: 600px) {
    .bm-sum-band-contents { display: none; }
}
/* S8: time_series' band, three columns (the reviewer's layout, 2026-09-25):
   Fund over time at about two thirds of its S8-draft width, the scatter with
   the fund growth chart directly under it, and the five largest holdings on
   the right. The row stretches, so the middle column and the holdings card
   run to the block's height; the scatter's viewBox (720 x 460) is set so
   that the pair lands there at 1600px. The holdings' grid does not stretch
   with its card (S12): its rows keep their natural height, so one holding
   is one ordinary card and the space left falls at the card's foot. Below
   1440px the holdings drop under the first two as one strip of six, and
   below 1200px everything stacks - the 720-wide viewBoxes would shrink
   their text under 9px in a narrower column. */
.bm-sum-fundgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.4rem;
}
@media (min-width: 1200px) {
    .bm-sum-fundgrid { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
    .bm-sum-fundgrid > .bm-sum-band-hold { grid-column: 1 / -1; }
    .bm-sum-band-hold > .bm-sum-chart-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}
@media (min-width: 1440px) {
    .bm-sum-fundgrid { grid-template-columns: minmax(0, 32fr) minmax(0, 36fr) minmax(0, 30fr); }
    .bm-sum-fundgrid > .bm-sum-band-hold { grid-column: auto; }
    .bm-sum-band-hold > .bm-sum-chart-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
    }
}
.bm-sum-fundgrid > .bm-sum-chart-card {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}
.bm-sum-band-mid {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
}
.bm-sum-band-mid > .bm-sum-chart-card { margin-bottom: 0; display: flex; flex-direction: column; }
/* The scatter takes what the column has left, its Details at the foot. */
.bm-sum-band-mid > .bm-sum-scatter { flex: 1; }
.bm-sum-scatter > .bm-scatter-details,
.bm-sum-overtime-card .bm-sum-ot-about,
.bm-sum-band-hold > .bm-sum-hold-about { margin-top: auto; padding-top: 0.3rem; }
.bm-sum-overtime { display: flex; flex-direction: column; flex: 1; }
/* A small multiple in the band keeps its chart at the foot of its cell, so
   a row of two reads on one baseline when the cells stretch. */
.bm-sum-band-hold .bm-sum-chart { display: flex; flex-direction: column; }
.bm-sum-band-hold .bm-sum-chart > .bm-chart-svg { margin-top: auto; }
.bm-sum-band-hold .bm-chart-tick,
.bm-sum-band-hold .bm-chart-xlabel { font-size: 11px; }
/* A small multiple drawn narrower than ~420px (two across in the band,
   six across in the strip, three at 900px, one on a phone) folds its minor
   x labels, which would collide at its 11-slot width. */
.bm-sum-chart { container-type: inline-size; }
@container (max-width: 420px) {
    .bm-chart-xminor { display: none; }
}
/* The band's SVGs are 720 units wide drawn at 500-850px, so their ticks
   are set a step larger in viewBox units to land at ~9-12px on screen. */
.bm-sum-fundgrid .bm-scatter-svg .bm-chart-tick,
.bm-sum-fundgrid .bm-scatter-svg .bm-chart-xlabel,
.bm-sum-fundcard .bm-chart-tick,
.bm-sum-fundcard .bm-chart-xlabel { font-size: 12.5px; }
.bm-sum-fundcard #bm-sum-chart-fund { display: flex; flex-direction: column; flex: 1; }
.bm-sum-fundcard #bm-sum-chart-fund > .bm-sum-chart-table { margin-top: auto; }
.bm-sum-charts-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    margin-bottom: 0.6rem;
}
.bm-sum-charts-head h3 { font-size: 1rem; }
.bm-sum-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    font-size: 0.76rem;
    color: var(--text-dim);
}
.bm-sum-chart-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.bm-chart-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.bm-chart-key-revenue { background: var(--chart-1); }
.bm-chart-key-ebitda  { background: var(--chart-2); }
.bm-chart-key-margin  { width: 14px; height: 2px; border-radius: 1px; background: var(--chart-3); }

.bm-sum-chart-card,
.bm-sum-chart {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 0.7rem 0.8rem 0.4rem;
    min-width: 0;
}
.bm-sum-chart-card { margin-bottom: 0.8rem; }
.bm-sum-chart-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.1rem 0.6rem;
    margin-bottom: 0.3rem;
}
.bm-sum-chart-name {
    font-weight: 600;
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}
.bm-sum-chart-meta {
    font-size: 0.72rem;
    color: var(--text-mute);
    margin: 0;
}
.bm-sum-chart-note,
.bm-sum-chart-none {
    font-size: 0.76rem;
    color: var(--text-mute);
    margin: 0.3rem 0 0.6rem;
}
.bm-sum-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.8rem;
}
.bm-sum-chart { margin: 0; }
/* S12: the holdings six to a page, paged in the browser. A page is a grid
   (data-page), so the hidden attribute needs saying again. */
.bm-sum-chart-grid[data-page][hidden] { display: none; }
.bm-sum-chart-grid[data-page] { scroll-margin-top: calc(var(--header-h) + 0.8rem); }
.bm-sum-pager {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
/* In the card head it takes the right-hand end, wrapping under the title
   when the head runs out of room. */
.bm-sum-pager-head { margin-left: auto; }
.bm-sum-pager-count { min-width: 5.6rem; text-align: center; }
.bm-sum-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--text);
    font-size: 0.7rem;
    cursor: pointer;
}
.bm-sum-pager-btn:hover:not(:disabled) { border-color: var(--acc-line); color: var(--acc); }
.bm-sum-pager-btn:focus-visible { outline: 2px solid var(--acc-line); outline-offset: 1px; }
.bm-sum-pager-btn:disabled { color: var(--text-faint); cursor: default; opacity: 0.6; }
/* The foot copy is for a phone, where a page of six runs long. */
.bm-sum-pager-foot { display: none; }
@media (max-width: 600px) {
    .bm-sum-pager-foot { display: flex; justify-content: center; margin: 0.6rem 0 0; }
}
.bm-sum-table-head { font-size: 1rem; margin: 1.6rem 0 0.6rem; }

/* Fund over time (S8): time_series' quarterly block, one column per quarter
   oldest first, the chosen quarter last and marked. It scrolls inside its
   own box when the quarters outrun the card, its labels pinned. */
.bm-sum-overtime-card { min-width: 0; }
.bm-sum-ot-group:first-of-type .bm-sum-ot-grouphead th { padding-top: 0.3rem; }
.bm-sum-overtime { min-height: 12rem; }
.bm-sum-ot-scroll { flex: none; }
.bm-sum-ot-scroll { overflow-x: auto; max-width: 100%; margin-top: 0.3rem; }
.bm-sum-ot-table {
    width: 100%;
    min-width: calc(11rem + var(--bm-sum-ot-n, 4) * 4.4rem);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    border-collapse: separate;
    border-spacing: 0;
}
.bm-sum-ot-table th, .bm-sum-ot-table td {
    padding: 0.2rem 0.5rem;
    border-bottom: 1px solid var(--line-soft);
    white-space: nowrap;
}
.bm-sum-ot-table thead th { color: var(--text-dim); font-weight: 600; }
.bm-sum-ot-label {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
    text-align: left;
    font-weight: 500;
    color: var(--text-dim);
    width: 11rem;
}
.bm-sum-ot-table .bm-sum-ot-label {
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-dim);
    background: var(--surface);
    padding: 0.2rem 0.5rem;
    border-bottom: 1px solid var(--line-soft);
}
.bm-sum-ot-table .bm-sum-ot-grouphead th,
.bm-sum-ot-table .bm-sum-ot-grouphead td {
    padding-top: 0.6rem;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-mute);
    border-bottom-color: var(--line);
}
.bm-sum-ot-table .bm-sum-ot-chosen { background: var(--acc-soft); color: var(--text); font-weight: 600; }
/* Right-aligned, under the chosen quarter, where the block opens scrolled
   to on a phone. */
.bm-sum-ot-unsourced { text-align: right; }
.bm-sum-chart-out { display: none; color: var(--text-dim); font-weight: 600; }
.bm-sum-chart-excluded { opacity: 0.5; }
.bm-sum-chart-excluded .bm-sum-chart-out { display: inline; }

.bm-chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.bm-chart-fund { max-width: 900px; }
.bm-chart-grid { stroke: var(--line-soft); stroke-width: 1; }
.bm-chart-zero { stroke: var(--line-strong); stroke-width: 1; }
.bm-chart-sep  { stroke: var(--line); stroke-width: 1; }
.bm-chart-tick,
.bm-chart-xlabel {
    fill: var(--text-mute);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}
.bm-chart-empty { fill: var(--text-faint); font-size: 11px; font-style: italic; }
.bm-chart-revenue { fill: var(--chart-1); }
.bm-chart-ebitda  { fill: var(--chart-2); }
.bm-chart-line {
    fill: none;
    stroke: var(--chart-3);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.bm-chart-dot { fill: var(--chart-3); stroke: var(--surface); stroke-width: 2; }
/* The slot's hit band carries the hover for every series, the margin's too. */
.bm-chart-line, .bm-chart-dot, .bm-chart-bar { pointer-events: none; }
.bm-chart-hit { fill: transparent; pointer-events: all; }
/* S10: the hovered or keyed slot, highlighted as a column over every series
   at it, the margin dot ringed in text ink. */
.bm-chart-hit:hover,
.bm-chart-hit.bm-chart-hit-on { fill: var(--acc-soft); }
.bm-chart-focus { fill: none; stroke: var(--text-dim); stroke-width: 1.5; pointer-events: none; }
.bm-chart-svg[tabindex]:focus { outline: none; }
.bm-chart-svg[tabindex]:focus-visible {
    outline: 2px solid var(--acc-line);
    outline-offset: 2px;
    border-radius: var(--r);
}
/* The tip is the card's, so the small multiples, narrower than it, place it
   inside the holdings card. */
.bm-sum-band-hold, .bm-sum-fundcard { position: relative; }

.bm-sum-chart-table { margin-top: 0.3rem; font-size: 0.76rem; }
.bm-sum-chart-table summary { cursor: pointer; color: var(--text-mute); }
.bm-sum-chart-table table { margin-top: 0.4rem; width: auto; }
.bm-sum-chart-n { color: var(--text-faint); font-size: 0.68rem; }

/* The benchmark scatter (S6). Emphasis form: the population is small grey
   dots, this fund-quarter the one --chart-1 dot with a 2px surface ring and a
   direct label in text ink, the fund's other quarters hollow rings in the
   same hue. The chosen dot lives in an overlay <svg> with the same viewBox,
   which Exclude replaces; the hover is one nearest-point hit rect under it. */
.bm-sum-scatter { scroll-margin-top: 4rem; }
.bm-scatter-figure { position: relative; max-width: 900px; }
.bm-scatter-svg { touch-action: pan-y; }
.bm-scatter-overlay { overflow: visible; }
.bm-scatter-data,
.bm-chart-data { display: none; }
.bm-scatter-state { max-width: 60ch; }
.bm-scatter-layer { position: absolute; inset: 0; pointer-events: none; }
.bm-scatter-layer svg { width: 100%; height: 100%; }
.bm-scatter-bench circle { fill: var(--text-faint); opacity: 0.55; }
.bm-scatter-trail circle {
    fill: var(--surface);
    stroke: var(--chart-1);
    stroke-width: 1.5;
}
.bm-scatter-chosen { fill: var(--chart-1); stroke: var(--surface); stroke-width: 2; }
.bm-scatter-focus { fill: none; stroke: var(--text-dim); stroke-width: 1.5; pointer-events: none; }
.bm-scatter-label {
    fill: var(--text);
    font-size: 11px;
    font-weight: 600;
    paint-order: stroke;
    stroke: var(--surface);
    stroke-width: 3px;
    stroke-linejoin: round;
}
.bm-scatter-cap { stroke: var(--line-strong); stroke-width: 1; }
.bm-scatter-cap-label { fill: var(--text-mute); }
.bm-scatter-axis { fill: var(--text-dim); }
.bm-scatter-bench, .bm-scatter-trail { pointer-events: none; }
.bm-scatter-hit { fill: transparent; pointer-events: all; cursor: pointer; }
/* S8: a click's selection. The picked dot gets a ring in text ink and its
   fund's other quarters thinner rings, both neutral so they never read as
   the page's own fund (--chart-1). The pinned tip takes the pointer, for
   its Open link. */
.bm-scatter-selection { pointer-events: none; }
.bm-scatter-howto { margin-bottom: 0.2rem; }
.bm-scatter-picked { fill: none; stroke: var(--text); stroke-width: 2; }
.bm-scatter-picked-trail { fill: none; stroke: var(--text-dim); stroke-width: 1.5; }
.bm-scatter-tip.bm-scatter-tip-pinned { pointer-events: auto; border-color: var(--line-strong); }
.bm-scatter-tip-foot { margin-top: 0.3rem; color: var(--text-mute); }
.bm-scatter-open { color: var(--acc); font-weight: 600; text-decoration: none; }
.bm-scatter-open:hover, .bm-scatter-open:focus-visible { text-decoration: underline; }
.bm-scatter-tip,
.bm-chart-tip {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    max-width: 260px;
    padding: 0.4rem 0.55rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    font-size: 0.74rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.bm-scatter-tip[hidden],
.bm-chart-tip[hidden] { display: none; }
.bm-scatter-tip strong,
.bm-chart-tip strong { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.bm-scatter-tip b,
.bm-chart-tip b { color: var(--text); font-weight: 600; }
/* S10: values lead, labels follow, each row keyed by a short stroke of its
   series colour; the change on the slot before right-aligned, the exact
   figure and its conversion under the row. */
.bm-chart-tip { min-width: 200px; max-width: 300px; }
.bm-chart-tip strong { margin-bottom: 0.15rem; }
.bm-chart-tip-row { display: flex; align-items: baseline; gap: 0.35rem; }
.bm-chart-tip-key {
    flex: none;
    align-self: center;
    width: 12px;
    height: 2px;
    border-radius: 1px;
}
.bm-chart-tip-key-revenue { background: var(--chart-1); }
.bm-chart-tip-key-ebitda  { background: var(--chart-2); }
.bm-chart-tip-key-margin  { background: var(--chart-3); }
.bm-chart-tip-change { margin-left: auto; padding-left: 0.6rem; color: var(--text-mute); white-space: nowrap; }
.bm-chart-tip-sub {
    padding-left: calc(12px + 0.35rem);
    color: var(--text-mute);
    font-size: 0.68rem;
    overflow-wrap: anywhere;
}
.bm-chart-tip-foot { margin-top: 0.3rem; color: var(--text-mute); }
.bm-scatter-key {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}
.bm-scatter-key-chosen { background: var(--chart-1); }
.bm-scatter-key-trail { border: 1.5px solid var(--chart-1); background: var(--surface); }
.bm-scatter-key-bench { width: 6px; height: 6px; background: var(--text-faint); }
/* Six columns do not fit a phone: the table scrolls in its own box rather
   than widening the card. */
#bm-sum-scatter-table { overflow-x: auto; max-width: 100%; }
.bm-scatter-table { margin-bottom: 0.5rem; }
.bm-scatter-row-chosen th, .bm-scatter-row-chosen td { font-weight: 600; color: var(--text); }
.bm-scatter-index { font-variant-numeric: tabular-nums; }

/* S8: at phone width the two fund-level SVGs (720-unit viewBoxes drawn at
   ~340px) set their text larger in viewBox units, so it lands near 10px on
   screen rather than S7's ~5px. */
@media (max-width: 600px) {
    .bm-sum-fundgrid .bm-scatter-svg .bm-chart-tick,
    .bm-sum-fundgrid .bm-scatter-svg .bm-chart-xlabel { font-size: 18px; }
    .bm-sum-fundcard .bm-chart-tick,
    .bm-sum-fundcard .bm-chart-xlabel { font-size: 16px; }
    .bm-sum-fundcard .bm-chart-xminor,
    .bm-sum-fundcard .bm-chart-xlong { display: none; }
    .bm-sum-band-hold .bm-chart-tick,
    .bm-sum-band-hold .bm-chart-xlabel { font-size: 9.5px; }
    .bm-scatter-label { font-size: 17px; }
    /* The legend names the y axis, and every other x tick makes room. */
    .bm-scatter-axis-y, .bm-scatter-xminor { display: none; }
    .bm-sum-ot-label { width: 8.5rem; }
    .bm-sum-ot-table { min-width: calc(8.5rem + var(--bm-sum-ot-n, 4) * 4.2rem); }
}

/* ── Landing (/) ──────────────────────────────────────────────────────────
   The index page's card list, from /api/dashboard. It used to carry its own
   inline hex palette over styles.css; it now sits in this system like every
   other page, so it follows the theme toggle. */
.bm-landing {
    max-width: 760px;
    margin: 2.5rem auto;
}
.bm-landing-head { margin-bottom: 1.5rem; }
.bm-landing-list {
    display: grid;
    gap: 0.75rem;
}
.bm-landing-card {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 0;
    padding: 1.1rem 1.25rem;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.14s ease, background 0.14s ease;
}
.bm-app .bm-landing-card:hover {
    text-decoration: none;
    border-color: var(--acc-line);
    background: var(--surface-hover);
}
.bm-landing-card:focus-visible {
    outline: 2px solid var(--acc);
    outline-offset: 2px;
}
.bm-landing-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--r);
    background: var(--acc-soft);
    color: var(--acc);
    font-size: 0.9rem;
}
.bm-landing-body { flex: 1; min-width: 0; }
.bm-landing-body strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.2rem;
}
.bm-landing-body span {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-mute);
}
.bm-landing-go {
    flex: none;
    align-self: center;
    color: var(--text-faint);
    font-size: 0.8rem;
    transition: color 0.14s ease, transform 0.14s ease;
}
.bm-landing-card:hover .bm-landing-go {
    color: var(--acc);
    transform: translateX(2px);
}
@media (max-width: 600px) {
    .bm-landing { margin: 1.25rem auto; }
}