/* pg-classify chrome — the same VS Code-for-detailers shell qind wears.
   Every colour, radius and density value comes from tokens.css, copied verbatim
   from the frontend, so this bench and the product cannot drift apart.
   There is no literal colour in this file: if a hue is missing, add it to the
   frontend's tokens and re-copy, don't invent one here. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  color: var(--text);
  background: var(--bg);
}
html[data-theme='light'] {
  color-scheme: light;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;
  background-color: color-mix(in srgb, var(--muted) 42%, transparent);
}
*::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--muted) 70%, transparent);
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}

/* ---------- top bar ---------- */
.topbar {
  flex: none;
  height: var(--chrome-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 12px;
  color: var(--text-h);
  letter-spacing: 0.2px;
}
.brand svg {
  width: 15px;
  height: 15px;
  color: var(--accent-2);
}
.brand span {
  color: var(--muted);
  font-weight: 500;
}
.topbar__spacer {
  flex: 1;
  min-width: 4px;
}
.chip {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30vw;
}
.chip b {
  color: var(--text-h);
  font-weight: 600;
}
.chip--run {
  border-color: var(--accent-border);
  color: var(--text);
}

/* ---------- layout ---------- */
.shell {
  flex: 1;
  display: flex;
  min-height: 0;
}

.panel {
  position: relative;
  flex: none;
  width: 268px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.panel__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--chrome-h);
  padding: 0 10px 0 12px;
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.panel__body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 12px;
}

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
/* A flex column, not a scroller: the results table owns the only vertical
   scrollbar so its sticky header has something to stick to. Before this the
   page scrolled and the header slid away on any run longer than a screen. */
.main__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 14px 18px 16px;
}
.view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- sections in the files panel ---------- */
.sec__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 5px;
  background: var(--surface);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
}
.sec__head[data-g] {
  cursor: pointer;
}
.sec__head[data-g]:hover {
  color: var(--text-h);
}
.sec__head.is-on {
  color: var(--accent-2);
}
.sec__head.is-flag {
  color: var(--warn-2);
}
.sec__count {
  margin-left: auto;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0;
}
.row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 14px;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.row:hover {
  background: var(--surface-2);
}
.row__num {
  flex: none;
  width: 26px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.row__id {
  flex: none;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-h);
  min-width: 52px;
}
.row__title {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row__ms {
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  color: color-mix(in srgb, var(--muted) 75%, transparent);
  font-variant-numeric: tabular-nums;
}

/* Tones — one hue per bucket, carried by the left rule and the sheet id. */
.t-steel {
  border-left-color: var(--cv-beam);
}
.t-notes {
  border-left-color: var(--cv-level);
}
.t-review {
  border-left-color: var(--cv-column);
}
.t-unreadable {
  border-left-color: var(--warn-2);
}
.t-filtered {
  border-left-color: color-mix(in srgb, var(--muted) 50%, transparent);
}
.t-filtered .row__id,
.t-unreadable .row__id {
  color: var(--muted);
}

/* ---------- drop zone ---------- */
.drop {
  flex: none;
  display: grid;
  place-items: center;
  gap: 14px;
  max-width: 560px;
  width: 100%;
  margin: auto;
  padding: 40px 32px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
}
.drop h1 {
  margin: 0;
  font-family: var(--heading);
  font-size: 17px;
  font-weight: 650;
  color: var(--text-h);
  text-wrap: balance;
}
.drop p {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 12.5px;
}

/* A whole-window drop target: a PDF dropped outside the card used to be opened
   by the browser, throwing away a run in progress. */
.dropveil {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border: 2px dashed var(--accent);
  font-size: 15px;
  font-weight: 650;
  color: var(--text-h);
  pointer-events: none;
}
.dropveil.is-over {
  display: grid;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 14px;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-navy);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.16s ease,
    transform 0.16s ease;
}
.btn:hover {
  background: var(--accent-3);
}
.btn:active {
  transform: scale(0.98);
}
.btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn--ghost:hover {
  background: var(--surface-2);
  color: var(--text-h);
}
.btn--sm {
  height: 21px;
  padding: 0 8px;
  font-size: 10.5px;
  font-weight: 600;
}
.btn--danger:hover {
  color: var(--warn-2);
  border-color: var(--warn-2);
}

.field {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}
.field input {
  width: 56px;
  height: 24px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-family: var(--mono);
  font-size: 11.5px;
  text-align: right;
}

/* ---------- stat strip ---------- */
.stats {
  flex: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 12px;
}
.stat {
  padding: 9px 13px;
  border-right: 1px solid var(--border);
  min-width: 0;
}
.stat:last-child {
  border-right: 0;
}
.stat__k {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.stat__v {
  display: block;
  font-family: var(--mono);
  font-size: 17px;
  color: var(--text-h);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  white-space: nowrap;
}
.stat__v small {
  font-size: 11px;
  color: var(--muted);
  margin-left: 2px;
}

/* ---------- progress ---------- */
.bar {
  flex: none;
  height: 3px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 12px;
}
.bar__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.25s ease;
}
/* A finished run that never reached every page must not read as complete. */
.bar__fill--short {
  background: var(--warn-2);
}

/* ---------- toolbar: filters, search, counts ---------- */
.toolbar {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.toolbar__spacer {
  flex: 1;
  min-width: 4px;
}
.toolbar__title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.toolbar__note {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.chipbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-left-color: transparent;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.3px;
  cursor: pointer;
  white-space: nowrap;
}
.chipbtn span {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--text-h);
  font-variant-numeric: tabular-nums;
}
.chipbtn:hover {
  background: var(--surface-2);
  color: var(--text-h);
}
.chipbtn.is-on {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--text-h);
}
.chipbtn.is-static {
  cursor: default;
}
/* Restated at chipbtn specificity: the .t-* tones are declared for the files
   panel above, and the shorthand border-left-color here would otherwise win. */
.chipbtn.t-notes {
  border-left-color: var(--cv-level);
}
.chipbtn.t-steel {
  border-left-color: var(--cv-beam);
}
.chipbtn.t-review {
  border-left-color: var(--cv-column);
}
.chipbtn.t-unreadable {
  border-left-color: var(--warn-2);
}
.chipbtn.t-filtered {
  border-left-color: color-mix(in srgb, var(--muted) 50%, transparent);
}
.chipbtn--warn {
  border-left-color: var(--warn-2);
  color: var(--warn-2);
}

.search {
  height: 22px;
  width: 190px;
  max-width: 40vw;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
}
.search::placeholder {
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.toggle input {
  accent-color: var(--accent);
  margin: 0;
}
.toggle:hover {
  color: var(--text-h);
}

/* ---------- results table ---------- */
.tablewrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
th.sortable {
  cursor: pointer;
  user-select: none;
}
th.sortable:hover {
  color: var(--text-h);
}
th.sortable::after {
  content: '';
  display: inline-block;
  width: 9px;
  text-align: right;
  color: var(--accent-2);
}
th[data-dir='asc']::after {
  content: '\2191';
}
th[data-dir='desc']::after {
  content: '\2193';
}
th[data-dir='asc'],
th[data-dir='desc'] {
  color: var(--text-h);
}
td {
  padding: 5px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  vertical-align: middle;
}
tbody tr:last-child td {
  border-bottom: 0;
}
tbody tr:hover {
  background: var(--surface-2);
}
td.num,
th.num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
td.mono {
  font-family: var(--mono);
  color: var(--text-h);
  white-space: nowrap;
}
td.title {
  min-width: 18ch;
}
td.note {
  color: var(--muted);
  font-size: 11px;
  max-width: 32ch;
}
td.note.is-failtext {
  color: var(--warn-2);
}
td.nowrap {
  white-space: nowrap;
}
td.dim,
.dim {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}

/* Missing data has to be louder than a dash you skim past. Restated under `td `
   so it outranks td.mono's colour. */
.miss,
td .miss {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 650;
  color: var(--warn-2);
  letter-spacing: 0.2px;
}

/* Row severity, read from the left edge: a failed call, then a page parked for
   review or unreadable, then a page that merely lost a field. */
.prow.is-failed > td:first-child {
  box-shadow: inset 3px 0 0 var(--warn-2);
}
.prow.is-failed {
  background: color-mix(in srgb, var(--warn-2) 9%, transparent);
}
.prow.is-bad > td:first-child {
  box-shadow: inset 3px 0 0 var(--cv-column);
}
.prow.is-warn > td:first-child {
  box-shadow: inset 3px 0 0 var(--warn-1);
}
.prow.is-open {
  background: var(--surface-2);
}
.prow.is-open > td {
  border-bottom-color: transparent;
}
.prow.is-hit {
  animation: hit 1.4s ease-out;
}
@keyframes hit {
  from {
    background: var(--accent-bg);
  }
  to {
    background: transparent;
  }
}
tr.is-current > td {
  background: var(--accent-bg);
}

.pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.2px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.p-required {
  color: var(--cv-beam);
}
.p-excluded {
  color: var(--muted);
}
.p-review {
  color: var(--cv-column);
}
.p-unreadable {
  color: var(--warn-2);
}

.empty {
  padding: 26px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
.err {
  flex: none;
  padding: 10px 14px;
  border: 1px solid var(--warn-2);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn-2) 12%, transparent);
  color: var(--text-h);
  font-size: 12.5px;
  margin-bottom: 12px;
}
.hidden {
  display: none !important;
}

/* ---------- raw model output ---------- */
.rawrow > td {
  background: var(--bg);
  padding: 0;
  box-shadow: inset 3px 0 0 var(--accent);
}
.rawrow:hover {
  background: transparent;
}
.rawbox {
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rawhead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.rawhead__spacer {
  flex: 1;
}
.rawlbl {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
.rawhead .rawlbl {
  margin-top: 0;
  color: var(--text-h);
}
.rawmeta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
}
.rawwarn {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 650;
  color: var(--warn-2);
  border: 1px solid var(--warn-2);
  border-radius: var(--radius);
  padding: 1px 7px;
}
.rawbox pre {
  margin: 0;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 11px;
  line-height: 1.5;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--text);
}
.rawjson {
  max-height: 420px;
}
/* One entry per block, so the page you clicked can be picked out of the batch
   its call answered. */
.jent {
  display: block;
  border-left: 2px solid transparent;
  padding-left: 4px;
  margin-left: -6px;
  color: var(--muted);
}
.jent--hit {
  border-left-color: var(--accent-2);
  background: var(--accent-bg);
  color: var(--text-h);
}
/* The prompt and the system text are the same on every row of a batch; folded
   away so the answer — the thing you are comparing — is what you see first. */
.rawdet > summary {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 0;
}
.rawdet > summary:hover {
  color: var(--text-h);
}
.rawbtn {
  height: 20px;
  padding: 0 8px;
  font-size: 10.5px;
}

/* ---------- narrow windows ---------- */
@media (max-width: 1100px) {
  .brand span,
  .chip--run {
    display: none;
  }
}
@media (max-width: 860px) {
  .panel {
    display: none;
  }
  .chip {
    max-width: 40vw;
  }
  .main__body {
    padding: 12px 12px 12px;
  }
}
@media (max-width: 640px) {
  .field,
  #chipProvider {
    display: none;
  }
}

/* ---------- which pass decided a page ---------- */
.pass2 {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--muted);
}
/* A changed verdict is the one worth finding, so it takes the accent; a kept
   one stays quiet. */
.pass2.is-changed {
  color: var(--accent-2);
}
.row__p2 {
  flex: none;
  font-family: var(--mono);
  font-size: 9px;
  padding: 0 4px;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  color: var(--accent-2);
}

/* ---------- per-phase progress ----------
   Four bars, not one. A run waits on four different things and they fail
   differently — the upload depends on the user's connection, the read on the
   PDF, the two model passes on the provider. One combined bar hides which. */
.phases {
  flex: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
  margin-bottom: 14px;
}
.phases:empty {
  display: none;
}
.ph__top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.ph__label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
}
.ph__note {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph--run .ph__label,
.ph--run .ph__note {
  color: var(--text-h);
}
.ph__bar {
  height: 3px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}
.ph__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.18s ease;
}
.ph--done .ph__fill {
  background: var(--accent);
  width: 100%;
}
/* No count to show yet — the server is working and has not said how much work
   there is. An indeterminate sweep is honest; a fake percentage is not. */
.ph__fill.is-wait {
  width: 35%;
  animation: ph-sweep 1.1s ease-in-out infinite;
}
@keyframes ph-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(320%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ph__fill.is-wait {
    animation: none;
    width: 100%;
    opacity: 0.4;
  }
}

/* ---------- one block per pass in the raw panel ---------- */
.passblock {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
}
.passblock + .passblock {
  border-top: 1px solid var(--border);
}
/* Pass 2 is the one that promotes a page on a quote, so it reads as the
   consequential half of the panel rather than an appendix. */
.pass--2 .rawlbl:first-child {
  color: var(--accent-2);
}

.quote {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  padding: 5px 9px;
  border-left: 2px solid currentColor;
  background: var(--surface);
  overflow-wrap: anywhere;
}
/* Found verbatim in the page — the verdict stands on something real. */
.quote.is-ok {
  color: var(--cv-brace);
}
/* Not found. The model cited text that is not on the page; the verdict rests on
   nothing, and this is the loudest thing the panel can say. */
.quote.is-bad {
  color: var(--warn-2);
  background: color-mix(in srgb, var(--warn-2) 10%, transparent);
}

/* ---------- sheet viewer ----------
   The point of the bench is judging a verdict, and a verdict about a drawing
   cannot be judged from a row of text. The sheet sits beside the table so the
   answer and the evidence are on screen together. */
.split {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 12px;
}
.split > .tablewrap {
  flex: 1;
  min-width: 0;
}
.viewer {
  flex: none;
  width: 46%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.viewer__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.viewer__title {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-h);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.viewer__frame {
  flex: 1;
  width: 100%;
  border: 0;
  /* Drawings are black on white; the dark chrome around them stays dark. */
  background: #fff;
}
/* Below this the two panes are unusable side by side, so the viewer takes the
   whole area and the table waits its turn. */
@media (max-width: 1000px) {
  .split {
    flex-direction: column;
  }
  .viewer {
    width: auto;
    min-height: 55vh;
  }
}
tr.prow.is-viewing > td {
  background: var(--accent-bg);
}