/* The batch results page (2026-10-08, branch batchview): shared by the customer portal and the
   console (served at /app/viewer.css and /ops/viewer.css). It uses the page's own colour tokens
   (--panel, --ink, --muted, --line, --accent), so it follows the page's light and dark themes.
   Left: the map of every line and the selected line's section. Right: the ranked targets, the
   metadata, then the page's own block (downloads or review). One column below 1000 px. */
.bv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 1000px) {
  .bv { grid-template-columns: minmax(0, 1fr) minmax(340px, 36%); }
}
.bv-main, .bv-side { display: grid; gap: 14px; min-width: 0; }
.bv-card { background: var(--panel, #fff); border: 1px solid var(--line, #d8ddd8); border-radius: 8px; padding: 12px; min-width: 0; }
.bv-h { font-size: 14px; margin: 0 0 6px; }
.bv-hint, .bv-empty { font-size: 12.5px; color: var(--muted, #5c6862); margin: 0 0 8px; }
.bv-map { height: clamp(260px, 46vh, 520px); border-radius: 6px; border: 1px solid var(--line, #d8ddd8); background: var(--soft, var(--bg, #eef1ec)); }
@media (max-width: 720px) { .bv-map { height: 300px; } }
.bv-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.bv-chip { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line, #d8ddd8);
  background: var(--panel, #fff); color: var(--ink, #1b2420); cursor: pointer; }
.bv-chip.on { background: #e8590c; border-color: #e8590c; color: #fff; font-weight: 600; }
.bv-others { font-size: 12px; color: var(--muted, #5c6862); }
.bv-figscroll { overflow-x: auto; border-radius: 6px; }
.bv-fig { position: relative; border: 1px solid var(--line, #d8ddd8); border-radius: 6px; background: #fff; min-height: 60px; }
/* on a phone the section keeps a readable width and scrolls sideways in its own box */
@media (max-width: 720px) { .bv-fig { min-width: 640px; } }
.bv-fig img { display: block; width: 100%; height: auto; }
.bv-fig svg.rv-over { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bv-opinion { font-size: 13px; margin: 8px 0 0; padding: 6px 8px; border-left: 3px solid var(--accent, #1d6b5a);
  background: var(--soft, var(--bg, #eef1ec)); min-height: 1.5em; }
.bv-rank { max-height: min(52vh, 460px); overflow: auto; border: 1px solid var(--line, #d8ddd8); border-radius: 6px; }
.bv-rank table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bv-rank th, .bv-rank td { padding: 4px 5px; border-bottom: 1px solid var(--line, #d8ddd8); text-align: left; white-space: nowrap; }
.bv-rank th { position: sticky; top: 0; background: var(--panel, #fff); z-index: 1; }
.bv-rank td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bv-rank tbody tr { cursor: pointer; }
.bv-rank tbody tr:hover, .bv-rank tbody tr:focus-visible { background: color-mix(in srgb, var(--accent, #1d6b5a) 10%, transparent); }
/* a11y lane (2026-10-08): a keyboard focus ring, not only a tint (was outline: none) */
.bv-rank tbody tr:focus-visible { outline: 2px solid var(--accent, #1d6b5a); outline-offset: -2px; }
.bv-chip:focus-visible, .bv-sort:focus-visible { outline: 2px solid var(--accent, #1d6b5a); outline-offset: 2px; }
.bv-rank tbody tr.sel { background: color-mix(in srgb, #ffd60a 38%, transparent); }
.bv-sort { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; font-size: 12px; color: var(--muted, #5c6862); cursor: pointer; }
.bv-sort.on { color: var(--ink, #1b2420); }
.bv-no { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px;
  background: #c0392b; color: #fff; font-size: 11px; font-weight: 700; }
.bv-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13px; }
.bv-meta dt { color: var(--muted, #5c6862); }
.bv-meta dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) { .bv-meta { grid-template-columns: minmax(0, 1fr); } .bv-meta dd { margin-bottom: 4px; } }
.bv-extra { display: grid; gap: 14px; }
.bv-extra:empty { display: none; }
/* the numbered map pins (Leaflet divIcon) */
.bv-pin { background: none; border: 0; }
.bv-pin-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #c0392b; color: #fff;
  border: 2px solid #fff; font: 700 11px/1 system-ui, sans-serif; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
/* the other lines' targets: small dots, no number (the tooltip gives the rank) */
.bv-pin.dim .bv-pin-n { width: 10px; height: 10px; margin: 7px; border-width: 1.5px; font-size: 0; opacity: .85; }
.bv-pin.sel .bv-pin-n { background: #ffd60a; color: #111; border-color: #111; transform: scale(1.25); }
/* the page's blocks in the right column */
.bv-files { display: grid; gap: 6px; }
.bv-files .bv-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.bv-files .bv-line strong { min-width: 64px; }
.bv-files button, .bv-gate button { font-size: 12.5px; }
.bv-gate { display: grid; gap: 8px; font-size: 13px; }
.bv-gate ul { margin: 0; padding-left: 18px; }
.bv-gate .warn { color: var(--warn, #9a5b00); }
.bv-gate .ok { color: var(--ok, #1d7a46); }
.bv-gate label { display: flex; flex-direction: row; gap: 6px; align-items: flex-start; color: var(--ink, #1b2420); font-size: 13.5px; }
.bv-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.bv-top h2 { margin: 0; }
/* a11y lane (2026-10-10): words only a screen reader reads (the section figure's description,
   the sort announcement), for pages that load this sheet without their own .sr-only. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Former inline style attributes of viewer.js (2026-10-11, lane assets2; runbook 49): the
   pages' CSPs allow no inline style. !important keeps an inline style's precedence. */
.s-pad12 { padding: 12px !important; } .s-mb6 { margin-bottom: 6px !important; }