/* ═══════════ QBRs (Dashboards → QBRs) ═══════════
   Nouhaila's "Remodel QBR Engine" interface, ported. Her component styles are kept;
   every class is prefixed `qb-` because FORGE already owns `.btn`, `.card`, `.note`.

   Her tokens (--paper, --card, --ink, --line, --navy, --red …) are mapped onto FORGE's
   dashboard palette, so the dashboards' own light/dark toggle themes this page too:
   `body.dash-board-dark .qb-scope` receives the dark --arl-* values in dashboards.css.
   `.qb-scope` sits on the view AND on the tooltip and sort dialog, which are appended to
   <body> and would otherwise inherit none of it. */

.qb-scope {
  --paper: var(--arl-surface-light);
  --paper-2: var(--arl-surface-alt);
  --paper-3: var(--arl-surface);
  --card: var(--arl-white);
  --card-2: var(--arl-surface-alt);
  --ink: var(--arl-text);
  --ink-2: var(--arl-text-secondary);
  /* Not --arl-text-muted alone: light mode's #999 measured 2.6–2.9:1 behind the stat
     labels and the tab description (small text needs 4.5). Mostly the secondary ink keeps
     a step below --ink-2 and clears 4.5:1 on white, #F5F5F5 and the dark card alike. */
  --muted: color-mix(in srgb, var(--arl-text-secondary) 80%, var(--arl-text-muted));
  --muted-2: var(--muted);
  --line: var(--arl-border);
  --line-2: color-mix(in srgb, var(--arl-border) 65%, var(--arl-text-muted));
  --navy: var(--arl-primary);
  --navy-tint: color-mix(in srgb, var(--arl-primary) 11%, transparent);
  --navy-ink: #FFFFFF;
  --red: var(--arl-error);
  --red-tint: var(--arl-error-light);
  --green: var(--arl-success);
  --green-tint: var(--arl-success-light);
  --amber: var(--arl-warning);
  --amber-tint: var(--arl-warning-light);
  /* The status colours are fills; as SMALL TEXT they measured 3.1–3.3:1 in light mode
     (green, amber) and 4.3:1 in dark (red) — under 4.5. Text reads these inks; fills,
     borders and bars keep the tokens above. */
  --green-ink: color-mix(in srgb, var(--arl-success) 72%, #000);
  --amber-ink: color-mix(in srgb, var(--arl-warning) 72%, #000);
  --red-ink: var(--arl-error);
  --info-ink: var(--arl-primary);
  --shadow: var(--arl-shadow);
  --shadow-lift: var(--arl-shadow-lg);
  --r: 4px;
  --r-lg: 8px;
  --f-display: var(--arl-font-heading);
  --f-body: var(--arl-font-body);
  --f-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  color: var(--ink);
  font-family: var(--f-body);
}
/* Dark: white on the light-blue primary is under 3:1, so buttons flip to dark ink. */
body.dash-board-dark .qb-scope {
  --navy-ink: #06192B;
  --navy-tint: color-mix(in srgb, var(--arl-primary) 20%, transparent);
  /* On the dark card a pill's tint sits under its text: measured 3.56:1 (info) and
     4.39:1 (ok) before these were lightened. */
  --green-ink: color-mix(in srgb, var(--arl-success) 80%, #fff);
  --amber-ink: color-mix(in srgb, var(--arl-warning) 85%, #fff);
  --red-ink: color-mix(in srgb, var(--arl-error) 82%, #fff);
  --info-ink: color-mix(in srgb, var(--arl-primary) 65%, #fff);
}

#dash-qbrs-view { padding: 20px 26px 64px; min-height: calc(100vh - 60px); background: var(--paper); }
#dash-qbrs-view *, .qb-modalback *, .qb-exptip * { box-sizing: border-box; }
/* Native controls take the page's font and ink — at ZERO specificity. Written as
   `#dash-qbrs-view button` it outranked every class rule below (an id beats any number of
   classes), so the current tab lost its accent colour and weight, and every .qb-btn lost
   its own ink, while still parsing and matching. :where() keeps it above the browser's
   defaults and below everything in this file. */
:where(#dash-qbrs-view, .qb-modalback, .qb-exptip) :where(button, input, select) { font: inherit; color: inherit; }

/* ── header + tabs ── */
.qb-topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 14px; }
.qb-topbar h2 { margin: 0; font-family: var(--f-display); font-size: 26px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink); }
.qb-topbar .qb-desc { margin: 4px 0 0; color: var(--muted); font-size: 13px; max-width: 72ch; }
.qb-topbar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.qb-anchor-chip { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 10px; line-height: 1.25; }
.qb-anchor-chip .qb-lbl { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.qb-anchor-chip .qb-val { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--navy); }
.qb-anchor-chip .qb-sm { font-size: 11px; color: var(--muted); }
.qb-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.qb-tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px 9px; cursor: pointer;
  color: var(--ink-2); font-size: 13.5px; display: inline-flex; align-items: baseline; gap: 7px; margin-bottom: -1px;
}
.qb-tabs button .qb-n { font-family: var(--f-mono); font-size: 10px; color: var(--muted-2); }
.qb-tabs button:hover { color: var(--ink); }
.qb-tabs button[aria-current="true"] { color: var(--navy); border-bottom-color: var(--navy); font-weight: 600; }
.qb-tabs .qb-tab-sep { flex: 1; }
.qb-view { display: none; }
.qb-view.qb-on { display: block; }

/* ── primitives ── */
.qb-eyebrow { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.qb-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.qb-pad { padding: 16px 18px; }
.qb-grid { display: grid; gap: 14px; }
.qb-g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.qb-g3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.qb-g4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
h3.qb-sec { font-family: var(--f-display); font-size: 16px; font-weight: 600; letter-spacing: 0.01em; margin: 26px 0 10px; display: flex; align-items: center; gap: 10px; color: var(--ink); }
h3.qb-sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
h3.qb-sec:first-child { margin-top: 0; }

.qb-btn {
  display: inline-flex; align-items: center; gap: 7px; background: var(--navy); color: var(--navy-ink);
  border: 1px solid var(--navy); padding: 7px 14px; border-radius: var(--r); cursor: pointer;
  font-size: 13px; font-weight: 600; transition: filter 0.12s; text-decoration: none;
}
.qb-btn:hover { filter: brightness(1.1); }
.qb-btn:disabled { opacity: 0.42; cursor: not-allowed; filter: none; }
.qb-btn.qb-ghost { background: transparent; color: var(--ink-2); border-color: var(--line-2); font-weight: 500; }
.qb-btn.qb-ghost:hover { background: var(--paper-2); color: var(--ink); }
.qb-btn.qb-danger { background: transparent; color: var(--red-ink); border-color: var(--red); }
.qb-btn.qb-danger:hover { background: var(--red-tint); }
.qb-btn.qb-sm { padding: 4px 9px; font-size: 12px; }
/* A toggle that is ON reads like an active filter (after .qb-ghost: equal specificity). */
.qb-btn[aria-pressed="true"] { background: var(--navy-tint); color: var(--info-ink); border-color: var(--navy); font-weight: 600; }

.qb-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  border: 1px solid transparent; white-space: nowrap;
}
.qb-pill.qb-ok { background: var(--green-tint); color: var(--green-ink); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.qb-pill.qb-warn { background: var(--amber-tint); color: var(--amber-ink); border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.qb-pill.qb-bad { background: var(--red-tint); color: var(--red-ink); border-color: color-mix(in srgb, var(--red) 32%, transparent); }
.qb-pill.qb-info { background: var(--navy-tint); color: var(--info-ink); border-color: color-mix(in srgb, var(--navy) 26%, transparent); }
.qb-pill.qb-mute { background: var(--paper-2); color: var(--muted); border-color: var(--line); }

.qb-kv { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; border-bottom: 1px dotted var(--line); }
.qb-kv:last-child { border-bottom: 0; }
.qb-kv dt { color: var(--muted); font-size: 12.5px; margin: 0; }
.qb-kv dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }

.qb-stat .qb-lbl { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.qb-stat .qb-big { font-family: var(--f-display); font-size: 25px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--ink); }
.qb-stat .qb-sm { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.qb-stat .qb-big.qb-pos { color: var(--green-ink); }
.qb-stat .qb-big.qb-neg { color: var(--red-ink); }
.qb-stat .qb-big.qb-acc { color: var(--navy); }

.qb-note { border-left: 3px solid var(--navy); background: var(--navy-tint); padding: 11px 14px; border-radius: 0 var(--r) var(--r) 0; font-size: 12.5px; color: color-mix(in srgb, var(--ink-2) 70%, var(--ink)); }
.qb-note.qb-warn { border-left-color: var(--amber); background: var(--amber-tint); }
.qb-note.qb-bad { border-left-color: var(--red); background: var(--red-tint); }
.qb-note.qb-ok { border-left-color: var(--green); background: var(--green-tint); }
.qb-note strong { color: var(--ink); }
.qb-mono, .qb-scope code { font-family: var(--f-mono); font-size: 0.9em; }

/* ── source cards (her drop zones) ── */
.qb-dz { border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); background: var(--card); padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; transition: border-color 0.14s, background 0.14s; }
.qb-dz.qb-over { border-color: var(--navy); background: var(--navy-tint); }
.qb-dz.qb-filled { border-style: solid; border-color: var(--line); }
.qb-dz.qb-auto { border-style: solid; border-color: var(--line); background: var(--card-2); }
.qb-dz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.qb-dz-title { font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.qb-dz-key { font-family: var(--f-mono); font-size: 10px; color: var(--muted); margin-top: 2px; }
.qb-dz-body { font-size: 12px; color: var(--muted); }
.qb-dz-stats { display: flex; gap: 14px; flex-wrap: wrap; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.qb-dz-stats b { font-family: var(--f-display); font-weight: 600; }
.qb-dz-files { display: flex; flex-direction: column; gap: 3px; max-height: 150px; overflow-y: auto; }
.qb-dz-file { display: flex; align-items: center; gap: 8px; font-size: 11.5px; padding: 3px 6px; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r); }
.qb-dz-file .qb-rank { font-family: var(--f-mono); font-size: 9.5px; color: var(--navy); font-weight: 600; }
.qb-dz-file .qb-nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-dz-file .qb-dt { font-family: var(--f-mono); font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.qb-dz-file .qb-x { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; }
.qb-dz-file .qb-x:hover { color: var(--red-ink); }
.qb-dz-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#dash-qbrs-view input[type=file] { display: none; }

/* ── tables ── */
.qb-tbl-wrap { overflow: auto; max-height: calc(100vh - 300px); min-height: 180px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.qb-scroll-x { overflow-x: auto; max-width: 100%; }
table.qb-dt { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink); }
table.qb-dt th, table.qb-dt td { padding: 5px 9px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
table.qb-dt th {
  position: sticky; top: 0; z-index: 2; background: var(--paper-2); color: var(--ink-2);
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600; border-bottom: 1px solid var(--line-2); cursor: pointer; user-select: none;
  vertical-align: bottom; padding-top: 9px; padding-bottom: 7px;
}
table.qb-dt th:hover { color: var(--navy); }
table.qb-dt th .qb-arrow { color: var(--navy); font-size: 9px; }
table.qb-dt th.qb-t, table.qb-dt td.qb-t { text-align: left; }
table.qb-dt td.qb-t { max-width: 250px; overflow: hidden; text-overflow: ellipsis; }
table.qb-dt tbody tr:nth-child(even) { background: var(--card-2); }
table.qb-dt tbody tr:hover { background: var(--navy-tint); }
table.qb-dt td.qb-neg { color: var(--red-ink); }
table.qb-dt td.qb-pos { color: var(--green-ink); }
table.qb-dt td.qb-blank { color: var(--muted-2); }
table.qb-dt .qb-sticky { position: sticky; left: 0; z-index: 1; background: var(--card); box-shadow: 1px 0 0 var(--line); }
table.qb-dt thead .qb-sticky { z-index: 3; background: var(--paper-2); }
table.qb-dt tbody tr:nth-child(even) .qb-sticky { background: var(--card-2); }
table.qb-dt tbody tr:hover .qb-sticky { background: color-mix(in srgb, var(--card) 85%, var(--navy)); }
table.qb-dt td.qb-link { cursor: pointer; color: var(--navy); }
table.qb-dt td.qb-link:hover { text-decoration: underline; }
/* The Total row (#311) stays in view at the bottom of the table's own scroll box, as the
   header stays at its top. Its label cell needs the footer's background back: two classes
   (.qb-sticky) outrank `tfoot td`. */
table.qb-dt tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--paper-2); font-weight: 600; border-top: 1px solid var(--line-2); border-bottom: 0; }
table.qb-dt tfoot td.qb-sticky { z-index: 3; background: var(--paper-2); }
.qb-tbl-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 2px 0; font-size: 12px; color: var(--muted); flex-wrap: wrap; }

/* ── filters ── */
.qb-filterbar { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 11px 13px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.qb-fb-top { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.qb-fb-search { flex: 1; min-width: 180px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 10px; font-size: 13px; color: var(--ink); }
.qb-facets { display: flex; gap: 7px; flex-wrap: wrap; }
.qb-facet { position: relative; }
.qb-facet > button { display: inline-flex; align-items: center; gap: 6px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 5px 9px; cursor: pointer; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.qb-facet > button:hover { border-color: var(--line-2); }
.qb-facet.qb-active > button { background: var(--navy-tint); border-color: var(--navy); color: var(--info-ink); font-weight: 600; }
.qb-facet .qb-cnt { font-family: var(--f-mono); font-size: 9.5px; background: var(--navy); color: var(--navy-ink); border-radius: 999px; padding: 0 5px; }
.qb-facet .qb-caret { font-size: 9px; color: var(--muted); }
.qb-facet-pop { position: absolute; top: calc(100% + 5px); left: 0; z-index: 50; width: 280px; max-height: 340px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); display: none; flex-direction: column; overflow: hidden; }
.qb-facet.qb-open .qb-facet-pop { display: flex; }
.qb-facet-pop input.qb-s { border: 0; border-bottom: 1px solid var(--line); padding: 8px 10px; background: var(--card-2); font-size: 12.5px; color: var(--ink); }
.qb-facet-pop .qb-opts { overflow-y: auto; padding: 4px; }
.qb-facet-pop label { display: flex; align-items: center; gap: 8px; padding: 4px 7px; border-radius: var(--r); cursor: pointer; font-size: 12.5px; }
.qb-facet-pop label:hover { background: var(--paper-2); }
.qb-facet-pop label .qb-c { margin-left: auto; font-family: var(--f-mono); font-size: 10px; color: var(--muted); }
.qb-facet-pop .qb-pop-foot { display: flex; gap: 6px; padding: 7px; border-top: 1px solid var(--line); background: var(--card-2); }
.qb-facet.qb-addfacet > button { border-style: dashed; color: var(--muted); }
.qb-facet-pop .qb-rangehead { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 10px 12px 4px; }
.qb-facet-pop .qb-rangerow { display: flex; align-items: center; gap: 7px; padding: 0 12px 8px; font-size: 11.5px; }
.qb-facet-pop .qb-rangerow input.qb-numin { width: 88px; padding: 5px 7px; font-size: 12px; font-family: var(--f-mono); border: 1px solid var(--line-2); border-radius: 6px; background: var(--paper); color: var(--ink); }
.qb-facet-pop .qb-rangehint { padding: 0 12px 10px; font-size: 10.5px; color: var(--muted-2); font-family: var(--f-mono); }
button.qb-dropfacet { background: none; border: 1px dashed var(--line-2); color: var(--muted); border-radius: 999px; padding: 4px 10px; font-size: 11px; cursor: pointer; }
button.qb-dropfacet:hover { color: var(--red-ink); border-color: var(--red); }
.qb-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.qb-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--navy-tint); color: var(--info-ink); border: 1px solid color-mix(in srgb, var(--navy) 26%, transparent); border-radius: 999px; padding: 2px 5px 2px 10px; font-size: 11.5px; }
.qb-chip button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 3px; opacity: 0.65; }
.qb-chip button:hover { opacity: 1; }

/* ── sort levels ── */
.qb-sortbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.qb-sortlbl { font-size: 11.5px; color: var(--muted); font-family: var(--f-mono); }
table.qb-dt th .qb-lvl { display: inline-block; min-width: 13px; height: 13px; line-height: 13px; margin-left: 3px; border-radius: 7px; background: var(--navy); color: var(--navy-ink); font-size: 8.5px; font-weight: 700; text-align: center; vertical-align: top; }
.qb-modalback { position: fixed; inset: 0; z-index: 1200; background: rgba(6, 18, 32, 0.5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.qb-modal { background: var(--card); color: var(--ink); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow-lift); padding: 20px; width: min(620px, 100%); max-height: 82vh; overflow: auto; font-family: var(--f-body); }
.qb-modal h4 { margin: 0 0 4px; font-family: var(--f-display); font-size: 17px; font-weight: 600; }
.qb-modal p.qb-sm { margin: 0 0 14px; color: var(--muted); font-size: 12px; }
.qb-lvlrow { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.qb-lvlrow select { flex: 1; min-width: 0; padding: 5px 7px; font-size: 12px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--paper); color: var(--ink); }
.qb-lvlrow select:last-of-type { flex: 0 0 118px; }
.qb-lvlno { flex: 0 0 56px; font-size: 10.5px; color: var(--muted); font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.qb-lvladd { margin: 10px 0 4px; }
.qb-modalfoot { display: flex; align-items: center; gap: 8px; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }

/* ── formula tooltip ── */
td.qb-has-expl { cursor: help; }
td.qb-has-expl:hover { box-shadow: inset 0 0 0 1.5px var(--navy); }
.qb-exptip { position: fixed; z-index: 1300; max-width: 440px; pointer-events: none; background: var(--card); color: var(--ink); border: 1px solid var(--line-2); border-left: 3px solid var(--navy); border-radius: 9px; box-shadow: var(--shadow-lift); padding: 11px 13px; font-family: var(--f-body); }
.qb-exptip h6 { margin: 0 0 7px; font-family: var(--f-display); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.qb-exptip table { border-collapse: collapse; width: 100%; }
.qb-exptip td { padding: 2px 0; font-size: 11.5px; vertical-align: top; border: 0; }
.qb-exptip td:first-child { color: var(--muted); padding-right: 12px; white-space: nowrap; font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.qb-exptip td:last-child { font-family: var(--f-mono); white-space: pre-wrap; }
.qb-exptip p { margin: 8px 0 0; padding-top: 7px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); line-height: 1.45; }

/* ── rulebook ── */
.qb-doc { max-width: 84ch; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.qb-doc h3 { font-family: var(--f-display); font-size: 18px; font-weight: 600; margin: 34px 0 8px; color: var(--ink); }
.qb-doc h4 { font-family: var(--f-display); font-size: 15px; font-weight: 600; margin: 22px 0 6px; color: var(--navy); }
.qb-doc p { margin: 0 0 10px; }
.qb-doc ul, .qb-doc ol { margin: 0 0 12px; padding-left: 20px; }
.qb-doc li { margin-bottom: 5px; }
.qb-doc table { border-collapse: collapse; width: 100%; font-size: 12.5px; margin: 8px 0 16px; }
.qb-doc table th, .qb-doc table td { border: 1px solid var(--line); padding: 5px 9px; text-align: left; vertical-align: top; }
.qb-doc table th { background: var(--paper-2); font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.qb-doc table td.qb-num { text-align: right; font-variant-numeric: tabular-nums; }
.qb-doc code { background: var(--paper-2); padding: 1px 4px; border-radius: 2px; border: 1px solid var(--line); }
.qb-doc strong { color: var(--ink); }

/* ── misc ── */
.qb-log { display: flex; flex-direction: column; gap: 7px; max-height: 340px; overflow-y: auto; }
.qb-log-item { border-left: 2px solid var(--line-2); padding: 7px 11px; background: var(--card-2); border-radius: 0 var(--r) var(--r) 0; font-size: 12.5px; }
.qb-log-item.qb-ok { border-left-color: var(--green); }
.qb-log-item.qb-warn { border-left-color: var(--amber); }
.qb-log-item.qb-bad { border-left-color: var(--red); }
.qb-log-item .qb-t { font-family: var(--f-mono); font-size: 9.5px; color: var(--muted); letter-spacing: 0.05em; }
.qb-log-item .qb-m { margin-top: 2px; }
.qb-spinner { width: 13px; height: 13px; border: 2px solid var(--line-2); border-top-color: var(--navy); border-radius: 50%; animation: qb-spin 0.7s linear infinite; display: inline-block; vertical-align: -2px; }
@keyframes qb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .qb-spinner { animation-duration: 3s; } }
.qb-empty { padding: 44px 20px; text-align: center; color: var(--muted); }
.qb-empty .qb-big { font-family: var(--f-display); font-size: 17px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.qb-switch { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; color: var(--ink-2); }
.qb-switch input { accent-color: var(--navy); width: 15px; height: 15px; }
.qb-sel { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 8px; font-size: 12.5px; color: var(--ink); }
.qb-bar { height: 5px; background: var(--paper-3); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.qb-bar > i { display: block; height: 100%; background: var(--navy); border-radius: 999px; }
.qb-bar.qb-g > i { background: var(--green); }
.qb-bar.qb-r > i { background: var(--red); }
.qb-bar.qb-a > i { background: var(--amber); }
.qb-hr { height: 1px; background: var(--line); margin: 22px 0; }
.qb-muted { color: var(--muted); }
.qb-small { font-size: 12px; }
.qb-chgscroll { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 9px; }
table.qb-chgtbl td.qb-was { color: var(--muted); text-decoration: line-through; }
table.qb-chgtbl td.qb-now { color: var(--green-ink); font-weight: 600; }
table.qb-chgtbl tr.qb-controw td { border-top: 0; color: var(--muted); }
.qb-chgfoot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.qb-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

@media (max-width: 700px) {
  #dash-qbrs-view { padding: 16px; }
  .qb-topbar h2 { font-size: 22px; }
}