/* v89 DESIGN ROUND: page layer (receive), per DESIGN-V89.md section 7. Tokens only; components come from next-v89.css.
   Receive, Certificates, the certificate page, the Receive a lot form, and the Request a document and signature dialogs.
   next-v89-receive.js sets the classes used here (v89-intake, v89-deliv, v89-rchecks, v89-rlog, v89-certs, v89-req, v89-sigin). */

/* =============================================================== RECEIVE */
/* day one: the four-step strip over the form looked like tabs and never stepped; the purpose line says what happens */
.v89-intake form[data-form="intake"] .prog { display: none; }
/* v90 (fix round, D): the card is the drop zone. No dashed box nested inside it: the way in is the card's first line, a
   plain 20px icon and "Drop certificates anywhere on this card, or choose files"; a file dragged over the card marks the
   whole card. */
.v89-intake label.drop.rdrop { border: 0; border-radius: 0; background: none; padding: 0; min-height: 0; cursor: pointer; }
.v89-intake label.drop.rdrop:hover, .v89-intake label.drop.rdrop.over, .v89-intake label.drop.rdrop:focus-within { border: 0; background: none; }
.v89-intake label.drop.rdrop:focus-within { box-shadow: var(--focus-ring); border-radius: var(--r-ctl); }
.v89-intake label.drop.rdrop > svg.i { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--gray-500); }
.v89-intake label.drop.rdrop b { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-medium); color: var(--gray-900); }
.v89-intake label.drop.rdrop span { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v89-intake label.drop.rdrop b .v89-pick { display: inline; margin: 0; font-size: inherit; line-height: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.v89-intake label.drop.rdrop:hover b .v89-pick { text-decoration-color: currentColor; }
section.card.v89-intake { transition: border-color var(--d-hover, 120ms) var(--ease, ease), background-color var(--d-hover, 120ms) var(--ease, ease); }
section.card.v89-intake.v89-over, section.card.v89-intake:has(label.drop.rdrop.over) { border-color: var(--accent); border-style: dashed; background: var(--accent-tint); }
form.v83c label.drop.rdrop.v83slim {
  gap: var(--s-3); padding: 0; border: 0; border-radius: 0;
  background: none; align-items: center;
}
form.v83c label.drop.rdrop.v83slim:hover, form.v83c label.drop.rdrop.v83slim.over, form.v83c label.drop.rdrop.v83slim:focus-within {
  border: 0; background: none;
}
form.v83c label.drop.rdrop.v83slim > svg.i { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--gray-500); }
form.v83c label.drop.rdrop.v83slim b { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-medium); color: var(--gray-900); }
form.v83c label.drop.rdrop.v83slim span { margin: 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
/* the form's own 16px gap spaces its parts */
.v89-intake form[data-form="intake"] { gap: var(--s-4); }
details.v83more { margin-top: 0; padding-top: 0; border-top: 1px solid var(--gray-100); }
details.v83more > summary { padding: var(--s-3) 0 0; gap: var(--s-2); }
details.v83more > summary b { font-weight: var(--w-medium); }
details.v83more > summary span { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v89-intake form[data-form="intake"] .db > div:last-child { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: 0; }
.v89-intake form[data-form="intake"] .db > div:last-child > .muted { margin: 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
/* the fetch row sits inside the card's body edge, under a divider */
.card > form[data-form="intake"] + .v87fetch, .v89-intake > .v87fetch { margin: 0 var(--s-5) var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--gray-100); }
.v87fetch-h b { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-medium); color: var(--gray-900); }
.v87fetch-h span { margin-top: 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v87fetch-r { gap: var(--s-2); margin-top: var(--s-3); }
.v87fetch-r select, .v87fetch-r input { border: 1px solid var(--gray-300); border-radius: var(--r-ctl); font-size: var(--t-body-size); color: var(--gray-900); background-color: var(--gray-0); }
/* the ways in: one line each */
.v87ways .v87way { padding: var(--s-3) var(--s-5); }
@media (min-width: 700px) { .v87ways .v87way > div { grid-template-columns: minmax(160px, 200px) minmax(0, 1fr) auto; } }
.v87ways .v87way b { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-medium); }
.v87ways .v87way span { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v87ways .v87way span b { font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); color: var(--gray-700); }
.v87ways .v87way > svg { width: 16px; height: 16px; color: var(--gray-500); }
/* Recently read: the file name is an identifier; the date is quiet and tabular */
#view .v89-recent .slrow .tx > b.v89-id { font-weight: var(--w-medium); }
#view .v89-recent .slrow .tx > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
#view .v89-recent .slrow .when { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); font-variant-numeric: tabular-nums; }

/* Receive a lot: a stepper, not a second row of tabs. Numbered circles joined by a line; the current step is blue, a
   finished step is a quiet check-coloured circle, a later one an outline. */
#view form[data-form="receive"] .v85steps {
  display: flex; align-items: center; gap: var(--s-3); padding: 0 0 var(--s-4); margin: 0;
  background: none; border: 0; border-bottom: 1px solid var(--gray-100); border-radius: 0; box-shadow: none; height: auto;
}
#view form[data-form="receive"] .v85steps button {
  flex: 0 1 auto; display: inline-flex; align-items: center; gap: var(--s-2); height: 24px; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: var(--gray-500); font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-regular); cursor: pointer;
}
#view form[data-form="receive"] .v85steps button + button::before { content: ""; width: 32px; height: 1px; background: var(--gray-300); margin-right: var(--s-1); flex: none; }
#view form[data-form="receive"] .v85steps button .n {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--gray-0); color: var(--gray-500); border: 1px solid var(--gray-300); box-shadow: none;
  font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-semibold);
}
#view form[data-form="receive"] .v85steps button[aria-selected="true"] { background: none; box-shadow: none; color: var(--gray-900); font-weight: var(--w-medium); }
#view form[data-form="receive"] .v85steps button[aria-selected="true"] .n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#view form[data-form="receive"] .v85steps button:has(~ button[aria-selected="true"]) { color: var(--gray-700); }
#view form[data-form="receive"] .v85steps button:has(~ button[aria-selected="true"]) .n { background: var(--positive-bg); border-color: var(--positive-bd); color: var(--positive-fg); }
#view form[data-form="receive"] .v85steps button:hover:not([aria-selected="true"]) { color: var(--gray-900); }
#view form[data-form="receive"] .v85steps button .t { font-weight: inherit; }
#view form[data-form="receive"][data-step="all"] .v85steps button .n { background: var(--gray-0); border-color: var(--gray-300); color: var(--gray-500); }
/* the three part heads, as they show when every part is open at once */
#view form[data-form="receive"] .v85fs { font-family: var(--font); gap: var(--s-3); padding: var(--s-4) 0 0; margin: 0; border-top: 1px solid var(--gray-100); }
#view form[data-form="receive"] .v85fs:first-child, #view form[data-form="receive"] .form > .v85fs:first-child { border-top: 0; padding-top: 0; }
#view form[data-form="receive"] .v85fs .n {
  width: 24px; height: 24px; border-radius: 50%; background: var(--gray-100); color: var(--gray-700); font-family: var(--font);
  font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-semibold);
}
#view form[data-form="receive"] .v85fs b { font-family: var(--font); font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-semibold); color: var(--gray-900); }
#view form[data-form="receive"] .v85fs span:not(.n) { font-family: var(--font); margin: 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
#view form[data-form="receive"] .help { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
#view form[data-form="receive"] .v85stepnav { margin-top: var(--s-2); }
.v89-deliv .v85submit .muted { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
/* the receiving checks beside the form: a plain list, each check named once */
.v89-rchecks > .slist > div { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-5); }
.v89-rchecks > .slist > div + div { border-top: 1px solid var(--gray-100); }
.v89-rchecks .stepno {
  width: 20px; height: 20px; min-width: 20px; border-radius: 50%; display: inline-grid; place-items: center; margin-top: 0;
  background: var(--gray-100); color: var(--gray-700); font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium);
}
.v89-rchecks .tx b { display: block; font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-medium); color: var(--gray-900); }
.v89-rchecks .tx span { display: block; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }

/* Stopped at receiving: the reason a lot was stopped is read in full, on one line where it fits */
@media (min-width: 700px) {
  #view .v85rq table.v84q th:nth-child(2) { width: 22%; }
  #view .v85rq table.v84q td.why > span.w { white-space: normal; overflow: visible; text-overflow: clip; }
}
#view .v85rq .tfoot { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }

/* the receiving log: set column widths, so the last one is never cut */
@media (min-width: 700px) {
  #view table.v89-rlog { table-layout: fixed; width: 100%; }
  #view table.v89-rlog th:nth-child(1) { width: 20%; }
  #view table.v89-rlog th:nth-child(2) { width: 18%; }
  #view table.v89-rlog th:nth-child(3) { width: 17%; }
  #view table.v89-rlog th:nth-child(4) { width: 10%; text-align: right; }
  #view table.v89-rlog th:nth-child(6) { width: 11%; }
  #view table.v89-rlog td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
  #view table.v89-rlog td { white-space: normal; overflow-wrap: break-word; }
}
#view table.v89-rlog .v89-check { font-size: var(--t-small-size); line-height: var(--t-small-lh); }

/* =============================================================== CERTIFICATES */
#view .lib.v89-lib { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1500px) { #view .lib.v89-lib { grid-template-columns: 216px minmax(0, 1fr); } }
#view .lib.v89-lib > aside.card.panel { display: none; }
#view #recTable.v89-certs { table-layout: fixed; width: 100%; }
#view #recTable.v89-certs tbody tr { cursor: pointer; }
/* between a phone and a desk the six columns scroll inside their card rather than crush the open question */
@media (min-width: 700px) and (max-width: 1179px) { #view #recTable.v89-certs { min-width: 880px; } }
#view #recTable.v89-certs th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the header cells carry the widths too: an older rule sized them 29% / 28% / 72px, which beat the columns */
#view #recTable.v89-certs th:nth-child(1) { width: 26%; }
#view #recTable.v89-certs th:nth-child(2) { width: 17%; }
#view #recTable.v89-certs th:nth-child(3) { width: 136px; }
#view #recTable.v89-certs th:nth-child(4) { width: 168px; }
#view #recTable.v89-certs td.v89-vc { white-space: nowrap; overflow-wrap: normal; }
#view #recTable.v89-certs td.v89-vc > .v89-check, #view #recTable.v89-certs td.v89-vc > .chip { vertical-align: middle; }
#view #recTable.v89-certs th:nth-child(5) { width: auto; }
#view #recTable.v89-certs th:nth-child(6) { width: 88px; }
#view #recTable.v89-certs td { height: 60px; white-space: normal; overflow-wrap: anywhere; }
#view #recTable.v89-certs td.two > b.v89-id { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; font-weight: var(--w-medium); color: var(--gray-900); }
/* v90 (fix round, D): the document leads. The lot id is a quiet second column (400, gray-700), never heavier than the file
   name in the first. */
#view #recTable.v89-certs td.v89-lotc .v89-id { font-weight: var(--w-regular); color: var(--gray-700); }
/* one state on every row: the chip adds nothing, so the column goes */
#view #recTable.v89-certs.v89-onestate th:nth-child(4), #view #recTable.v89-certs.v89-onestate td:nth-child(4) { width: 0; padding: 0; overflow: hidden; }
#view #recTable.v89-certs.v89-onestate td:nth-child(4) > * { display: none; }
#view #recTable.v89-certs td.two > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view #recTable.v89-certs td.v89-sup { color: var(--gray-700); }
#view #recTable.v89-certs td:nth-child(3), #view #recTable.v89-certs td:nth-child(6) { white-space: nowrap; overflow-wrap: normal; }
#view #recTable.v89-certs .v89-oq { color: var(--gray-900); }
#view #recTable.v89-certs .v89-check { font-size: var(--t-body-size); }
/* the verdict is one chip: no count line and no bar under it */
#view #recTable.v89-certs .recseg, #view #recTable.v89-certs .vsub { display: none; }
/* with no preview beside it, the selected row is not marked: every row opens its own page */
#view #recTable.v89-certs tr[aria-selected="true"] td { background: none; box-shadow: none; }
#view #recTable.v89-certs tbody tr:hover td { background: var(--gray-50); }
/* the strip cells that filter show when they are on */
#view .v89-strip > .v89-cell.on { background: var(--gray-50); box-shadow: inset 0 -2px 0 var(--accent); }
/* More: Export and Build a packet (the menu keeps the class the packet dialog listens inside) */
#view .v89-certmore .v84menu.qa { display: flex; flex-direction: column; grid-template-columns: none; gap: 0; border-top: 1px solid var(--gray-200); }
#view .v89-certmore .v84menu.qa a.btn.mi { display: flex; align-items: center; gap: var(--s-2); min-height: 0; padding: 0 var(--s-2); border: 0; box-shadow: none; }
@media (max-width: 699px) {
  #view #recTable.v89-certs { table-layout: auto; }
  #view #recTable.v89-certs colgroup, #view #recTable.v89-certs thead { display: none; }
  #view #recTable.v89-certs, #view #recTable.v89-certs tbody { display: block; width: 100%; }
  #view #recTable.v89-certs tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "doc read" "verdict verdict" "oq oq" "meta lot";
    gap: var(--s-1) var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--gray-100);
  }
  #view #recTable.v89-certs td { display: block; height: auto; padding: 0; border: 0; width: auto; }
  #view #recTable.v89-certs td::before { content: none; display: none; }
  #view #recTable.v89-certs td:nth-child(1) { grid-area: doc; }
  #view #recTable.v89-certs td:nth-child(6) { grid-area: read; text-align: right; }
  #view #recTable.v89-certs td:nth-child(4) { grid-area: verdict; margin-top: var(--s-1); }
  #view #recTable.v89-certs td:nth-child(5) { grid-area: oq; font-size: var(--t-small-size); line-height: var(--t-small-lh); }
  #view #recTable.v89-certs td:nth-child(2) { grid-area: meta; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
  #view #recTable.v89-certs td:nth-child(3) { grid-area: lot; text-align: right; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-700); }
  #view #recTable.v89-certs td:nth-child(2)::after { content: none; }
}

/* =============================================================== THE CERTIFICATE PAGE */
section.card.rhead .v89-lotst { color: var(--gray-500); }
section.card.rhead .v87prov { display: flex; align-items: center; gap: var(--s-1); padding: 0; }
section.card.rhead .v87prov svg.i { width: 14px; height: 14px; margin: 0; color: var(--gray-400); flex: none; }
/* the verdict's mark is a status glyph in its tone, not a tinted icon tile; the heading stays in the text colour */
#view .rsplit .vx-mark { width: 20px; height: 20px; margin-top: 2px; border-radius: 0; background: none; }
#view .rsplit .vx-mark svg { width: 20px; height: 20px; }
#view .rsplit .vx-top { gap: var(--s-3); }
#view .rsplit .vx-head h2 { color: var(--gray-900); }
section.card.rhead .idline .v89-id { white-space: nowrap; }
/* citations are quiet links: no pills */
#view .rsplit .vx-against > div, #view .rsplit .vx-rules { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
#view .rsplit .vx-rule, #view .rsplit a.vx-rule {
  display: inline-flex; align-items: center; gap: var(--s-1); height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-regular); color: var(--gray-700); white-space: normal;
}
#view .rsplit a.vx-rule { text-decoration: underline; text-decoration-color: var(--gray-300); text-underline-offset: 3px; }
#view .rsplit a.vx-rule:hover { color: var(--accent); text-decoration-color: currentColor; border: 0; }
#view .rsplit .vx-rule.off { color: var(--gray-500); border: 0; background: none; opacity: 1; }
#view .rsplit .vx-rule svg { width: 12px; height: 12px; color: var(--gray-400); opacity: 1; }
#view .rsplit .vx-rule::before { content: none; display: none; }
#view .rsplit .vx-against > span { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
/* the law a question stands on: an inner group, a grey fill at radius 8, no side rule */
#view .rsplit .vx-law { border: 0; border-left: 0; border-radius: var(--r-ctl); background: var(--gray-50); padding: var(--s-3) var(--s-4); }
#view .rsplit .vx-law .vx-rules { margin: 0 0 var(--s-2); }
#view .rsplit .vx-law p { margin: 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-700); }
/* one chip per question, at the right of its title */
#view .rsplit .vx-sec > summary .vx-chips { display: flex; justify-content: flex-end; flex: none; }
#view .rsplit .vx-sec > summary .vx-chips .v89-check { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
/* the certificate: one white sheet in its card, no grey frame round it */
#view .rsplit .rs-doc .viewer { background: var(--gray-0); padding: 0; border-radius: 0 0 var(--r-card) var(--r-card); }
#view .rsplit .rs-doc .viewer .sheet { box-shadow: none; border: 0; border-top: 1px solid var(--gray-200); max-width: none; min-height: 0; margin: 0; padding: var(--s-6) var(--s-6) var(--s-8); background: var(--gray-0); }
#view .rsplit .rs-doc .sheet .lh { padding-bottom: var(--s-3); margin-bottom: var(--s-5); }
#view .rsplit .rs-doc .sheet h3 { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-semibold); margin: 0 0 var(--s-3); }
#view .rsplit .rs-doc .sheet .stamp { margin-top: var(--s-5); font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
#view .rsplit .rs-doc .viewer .orig, #view .rsplit .rs-doc .viewer .origtext { background: var(--gray-0); box-shadow: none; }
/* the transcript's key: each mark in its tone (an older rule painted every square blue) */
#view .rs-doc .rs-legend { gap: var(--s-2) var(--s-4); padding: var(--s-2) var(--s-4); font-size: var(--t-label-size); line-height: var(--t-label-lh); color: var(--gray-500); }
#view .rs-doc .rs-legend span:not(.sp)::before { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
#view .rs-doc .rs-legend span.r::before { background: var(--critical-dot); }
#view .rs-doc .rs-legend span.a::before { background: var(--attention-dot); }
#view .rs-doc .rs-legend span.g::before { background: var(--positive-dot); }
#view .rs-doc .rs-legend span.u::before { background: var(--gray-300); }
/* "Make the calls" brings the calls into view: their tint fades once */
@keyframes v89flash { from { box-shadow: 0 0 0 2px var(--accent); } to { box-shadow: 0 0 0 2px transparent; } }
#view .vx-todo.v89-flash { animation: v89flash var(--d-fade) var(--ease) 2; }
@media (prefers-reduced-motion: reduce) { #view .vx-todo.v89-flash { animation: none; } }

/* =============================================================== DIALOGS */
/* Request a document: the email field first, then the asks as plain lines (no "Asked" and no "Your call" on each row) */
.v89-req .db { gap: 0; }
.v89-req .db > * + * { margin-top: var(--s-4); }
.v89-req .db > .v87lead { margin: 0; font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-700); }
.v89-req .db > .form { row-gap: var(--s-2); }
.v89-req .db > #v87out:empty { display: none; }
.v89-req .db > .form > .v87send, .v89-req .db > .form > .v88sendhelp { grid-column: 1 / -1; }
.v89-req .db > .v87h + * { margin-top: var(--s-2); }
.v89-req .v87h, .v89-req .v87h:first-of-type { margin: var(--s-6) 0 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); color: var(--gray-700); letter-spacing: 0; }
.v89-req .v87asks { border: 0; border-radius: 0; border-top: 1px solid var(--gray-100); }
.v89-req .v87asks li { border: 0; }
.v89-req .v87asks li + li { border-top: 1px solid var(--gray-100); }
.v89-req .v87asks label, .v89-req .v87asks li.v88fixed label { gap: var(--s-3); padding: var(--s-2) 0; font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-900); }
.v89-req .v87asks input { margin-top: 2px; }
.v89-req .v87asks b.a { display: none; }
.v89-req .v87asks b.r { display: block; margin: 0; font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); color: var(--critical-fg); }
.v89-req .v87asks li.muted { padding: var(--s-2) 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v89-req .v87send { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-1) 0 0; font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-regular); color: var(--gray-900); }
.v89-req .v88sendhelp { margin: 0; }
.v89-req .v88sendhelp:empty { display: none; }
.v89-req .v88sendhelp { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }

/* the signature: one framed group. What will be recorded, then the name with the Draw/Type toggle on its line, the mark,
   the attestation. */
.signblock { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); border: 1px solid var(--gray-200); border-radius: var(--r-card); background: var(--gray-0); box-shadow: none; }
.signblock .sb-h { margin: 0 0 var(--s-3); gap: var(--s-2); }
.signblock .sb-h b { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-semibold); color: var(--gray-900); }
.signblock .sb-h span { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.signblock .sb-h svg.i { width: 16px; height: 16px; color: var(--gray-500); }
.signblock > .sig.v89-sigin { margin: 0 0 var(--s-4); padding: 0 0 var(--s-4); border: 0; border-bottom: 1px solid var(--gray-100); border-radius: 0; background: none; box-shadow: none; }
.signblock > .sig.v89-sigin h4 { margin: 0 0 var(--s-1); font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); color: var(--gray-500); }
.signblock > .sig.v89-sigin dl { margin: 0; row-gap: var(--s-1); column-gap: var(--s-3); grid-template-columns: 112px minmax(0, 1fr); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.signblock > .sig.v89-sigin dt { color: var(--gray-500); }
.signblock > .sig.v89-sigin dd { color: var(--gray-900); }
.signblock .sb-grid { align-items: start; gap: var(--s-4); }
/* the toggle sits on the name field's line: the control centred in a row as tall as the 40px field */
.signblock .sb-grid > .fg:last-child { display: grid; grid-template-rows: auto 40px; align-items: center; justify-items: start; }
.signblock .sb-pad { margin-top: var(--s-3); border: 1px dashed var(--gray-300); border-radius: var(--r-ctl); background: var(--gray-0); }
.signblock .sb-hint { font-size: var(--t-label-size); line-height: var(--t-label-lh); color: var(--gray-500); }
.signblock .sb-clear { font-size: var(--t-small-size); line-height: var(--t-small-lh); border-radius: var(--r-ctl); background: var(--gray-50); color: var(--gray-700); }
.signblock .sb-legal { margin: var(--s-3) 0 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
@media (max-width: 699px) {
  .signblock { padding: var(--s-4); }
}
/* the chosen mode shows as chosen (the system's segmented rule lists aria-pressed; this control marks aria-selected) */
.signblock .sb-modes button[aria-selected="true"] { background: var(--gray-0); color: var(--gray-900); box-shadow: 0 0 0 1px var(--gray-200); }

/* =============================================================== v90 FIX ROUND (C): the certificate page */
/* the header: the title with one chip, then one meta line; where the file came from is the meta line's last part */
section.card.rhead .idline .v87prov.v89-prov { display: inline; margin: 0; padding: 0; font: inherit; color: inherit; }
section.card.rhead .idline .v87prov.v89-prov > svg { display: none; }
section.card.rhead .idline .v87prov.v89-prov > span { font: inherit; color: inherit; }
section.card.rhead .idline .v87prov.v89-prov::before { content: " · "; }
section.card.rhead .titleline > [data-v89chip] { flex: none; }
/* the seller note, now in the verdict under its title */
#view .verdict.vx .vx-band > .v88sup { margin: var(--s-4) 0 0; }
#view .verdict.vx .vx-band > .v88sup .v89-note { margin: 0; }

/* check rows: the chip in one fixed column every row reserves; the mark and the reference under the row's text */
#view .vx-row.v89-row { grid-template-columns: 24px minmax(0, 1fr) 112px; }
#view .vx-row.v89-row > .vx-side { width: 112px; max-width: none; align-items: flex-start; gap: 0; }
#view .vx-row.v89-row > .vx-side > .vx-out { margin: 0; }
#view .vx-row.v89-row .vx-h { display: block; }
#view .vx-row.v89-row .v89-rowfoot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-2); }
#view .vx-row.v89-row .v89-rowfoot .vx-ref { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
/* the mark is a ghost row action, always visible (it was hidden until hover); pressed, it says who checked it */
#view .vx-row.v89-row .vx-mk { opacity: 1; height: 28px; padding: 0 var(--s-2); margin-left: calc(var(--s-2) * -1); border: 0; background: none; color: var(--gray-700); font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); }
#view .vx-row.v89-row .vx-mk:hover { background: var(--gray-50); color: var(--gray-900); }
#view .vx-row.v89-row .vx-mk svg.i { width: 16px; height: 16px; color: var(--gray-500); }
#view .vx-row.v89-row .vx-mk[aria-pressed="true"], #view .vx-row.v89-row .vx-mk.on { background: none; color: var(--positive-fg); }
#view .vx-row.v89-row .vx-mk[aria-pressed="true"] svg.i, #view .vx-row.v89-row .vx-mk.on svg.i { color: var(--positive-dot); }
.vx-mk .v89-mk-on, .vx-mk[aria-pressed="true"] .v89-mk-off, .vx-mk.on .v89-mk-off { display: none; }
.vx-mk[aria-pressed="true"] .v89-mk-on, .vx-mk.on .v89-mk-on { display: inline; }
#view .vx-mk.on span::after, #view .vx-mk[aria-pressed="true"] span::after { content: none; }
/* one tone logic: a row's labels ("Required", "To clear it", "What it needs") are grey labels; its chip carries the tone */
#view .vx-row.v89-row .vx-fix b, #view .vx-row.v89-row .vx-req b { color: var(--gray-500); font-weight: var(--w-regular); }
/* on a phone the text takes the width: the chip sits above the row's title, on the same left edge */
@media (max-width: 699px) {
  #view .vx-row.v89-row { grid-template-columns: 22px minmax(0, 1fr); row-gap: var(--s-1); }
  #view .vx-row.v89-row > .vx-ic { grid-column: 1; grid-row: 1 / span 2; }
  #view .vx-row.v89-row > .vx-side { grid-column: 2; grid-row: 1; width: auto; flex-direction: row; justify-content: flex-start; align-items: center; }
  #view .vx-row.v89-row > .vx-body { grid-column: 2; grid-row: 2; }
}

/* the certificate pane: one frame. The table inside the sheet has no border of its own, the letterhead's rule is quiet, and
   the verdict has no hatched bar (its counts are said once, in the line under the title) */
#view .rsplit .rs-doc .sheet table { border: 0; border-radius: 0; }
#view .rsplit .rs-doc .sheet table th { background: none; border-bottom: 1px solid var(--gray-200); }
#view .rsplit .rs-doc .sheet table td { border-bottom: 1px solid var(--gray-100); }
#view .rsplit .rs-doc .sheet table tr:last-child td { border-bottom: 0; }
#view .rsplit .rs-doc .sheet .lh { border-bottom: 1px solid var(--gray-200); }
#view .rsplit .rs-doc .sheet .lh .v89-id { font-weight: var(--w-medium); }
#view .rsplit .vx-bar { display: none; }
#view .rsplit .vx-band > .vx-legend { margin-top: var(--s-4); }
/* done is quiet: a met check already has its green check glyph at the row's start, so its "Met" is plain grey words, not a
   second green tag */
#view .vx-row.v89-row > .vx-side > .vx-out.g { padding: 0; border: 0; background: none; color: var(--gray-500); font-weight: var(--w-regular); }
#view .vx-row.v89-row > .vx-side > .vx-out.g::before { display: none; }
/* "Values as read": where a value came from is quiet grey words, not a blue pill (blue never means a status) */
#view .v80r .v80by { padding: 0; border-radius: 0; background: none; color: var(--gray-500); font-size: var(--t-small-size); line-height: var(--t-small-lh); }

/* =============================================================== v90 FIX ROUND (C, D): Receive */
/* Held or waiting: the row action is a ghost button (the system's row-action rule), one per row */
#view .v85rq table.v84q td.ac .btn { height: 28px; padding: 0 var(--s-2); border: 0; background: none; box-shadow: none; color: var(--gray-700); }
#view .v85rq table.v84q td.ac .btn:hover { background: var(--gray-50); color: var(--gray-900); }

/* v92 (fix round, G2) =============================================================================================== */
/* "choose files" takes the size of the sentence it sits in (an id rule, #intakeChosen span, made it 13px inside 14px) */
#view #intakeChosen b .v89-pick { font-size: inherit; line-height: inherit; font-weight: inherit; }
/* one hint placement in the card: the hint is the second line under its title, as under "No file to hand?" */
details.v83more > summary { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--s-2); row-gap: 0; align-items: center; }
details.v83more > summary > svg { grid-column: 1; grid-row: 1; }
details.v83more > summary > b { grid-column: 2; grid-row: 1; }
details.v83more > summary > span { grid-column: 2; grid-row: 2; margin: 0; }
/* one control height in the card: the fetch row's select, field and button are 32px, as "Read document" is */
#view .v87fetch-r select, #view .v87fetch-r input, #view .v87fetch-r .btn { box-sizing: border-box; height: 32px; min-height: 32px; }
/* Recently read: the substance and lot wrap rather than cut the lot ("KPL-9…") */
#view .v89-recent .slrow .tx > span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* Certificates: one control style in the toolbar. The search, the Documents | By lot switch and Filters are each a 32px
   white control with the same 1px border and radius 8 (they were a 36px field, a 28px grey segmented band and a 32px
   outline button). */
#view .lib.v89-lib .toolbar { align-items: center; gap: var(--s-2); }
#view .lib.v89-lib .toolbar > label.field { height: 32px; min-height: 32px; }
/* v93 (decision 15): the Documents | By lot switch is the system's one segmented control (28px); the local look that fought it is gone */
#view .lib.v89-lib .toolbar > .btn { height: 32px; }

/* The certificate page, v92 (G2) */
/* one callout in the left column: the amber "What clears this certificate". The seller note is a plain line with its
   icon (no grey fill), and the law under each question is plain text under a divider (no grey fill) */
#view .verdict.vx .vx-band > .v88sup .v89-note { background: none; padding: 0; border: 0; color: var(--gray-700); }
#view .verdict.vx .vx-band > .v88sup .v89-note b { color: var(--gray-900); }
#view .rsplit .vx-law { background: none; border-radius: 0; padding: 0 0 var(--s-3); border-bottom: 1px solid var(--gray-100); }
/* citations are quiet text links: grey, no underline and no external-link icon until pointed at */
#view .rsplit a.vx-rule { text-decoration: none; color: var(--gray-500); }
#view .rsplit a.vx-rule:hover, #view .rsplit a.vx-rule:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
#view .rsplit .vx-rule svg { display: none; }
/* the viewer's toolbar on one line: the file name gives way before "Open" wraps */
#view .rs-doc .rs-card > .card-h.v92-vbar { flex-wrap: nowrap; column-gap: var(--s-3); }
#view .rs-doc .rs-card > .card-h.v92-vbar h2.v82fn { flex: 1 1 auto; min-width: 48px; }
#view .rs-doc .rs-card > .card-h.v92-vbar > :not(h2):not(svg) { flex: none; white-space: nowrap; }
#view .rs-doc .rs-card > .card-h.v92-vbar .v89-check { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
/* the transcript keeps a printed table's columns: lines are set as printed and the sheet scrolls sideways */
#view .rs-doc .viewer .sheet.origtext { overflow-x: auto; }
#view .rs-doc .viewer .sheet.origtext li.ln > span { white-space: pre; overflow-wrap: normal; word-break: normal; }
/* the highlighted lines run the full width of the longest printed line */
#view .rs-doc .viewer .sheet.origtext ol { width: max-content; min-width: 100%; }
/* the Checks | Certificate | Values switch centres every label (Checks sat flush left on a phone) */
#view .vx-switch button { justify-content: center; text-align: center; }
@media (max-width: 699px) {
  /* decision 12: the primary at full width, then More */
  section.card.rhead .acts { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); width: 100%; }
  section.card.rhead .acts > .btn.primary { order: -1; width: 100%; justify-content: center; }
  section.card.rhead .acts > details.v84more, section.card.rhead .acts > details.v84more > summary { width: 100%; }
  section.card.rhead .acts > details.v84more > summary { justify-content: center; }
}

/* v92 (fix round, G2): dialogs */
/* the review sheet's open list: each label is a line of its own over its detail (a 130px label column wrapped to three) */
#dialog .v79open li { grid-template-columns: minmax(0, 1fr); gap: 0; }
#dialog .v79open li b { font-weight: var(--w-medium); }
/* Request a document: one line says the asks are not on file; each ask names only the document */
#dialog .v87req p.v92-notonfile { margin: var(--s-1) 0 var(--s-2); font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
/* Request documents (bulk): the suppliers grouped by whether their profile has an email, said once per group */
#dialog .v88bulk .v87h { margin: var(--s-4) 0 var(--s-1); font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); color: var(--gray-700); letter-spacing: 0; text-transform: none; }
#dialog .v88bulk .v87asks li label > span { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); width: 100%; }
#dialog .v88bulk .v92-em { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
/* Record the 503A basis: the radio sits at the left of its option's title, and the description is one size (13px) */
#dialog .v84routes > label { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--s-3); align-items: start; }
#dialog .v84routes > label > input[type="radio"] { margin: 2px 0 0; width: 16px; height: 16px; }
#dialog .v84routes > label > span { display: block; min-width: 0; }
#dialog .v84routes > label > span > b { display: block; font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-medium); color: var(--gray-900); }
#dialog .v84routes > label > span > em { display: block; margin-top: 2px; font-style: normal; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
#dialog .v84routes > label > span > em q.law { font-size: inherit; line-height: inherit; }

/* =============================================================== v93 FIX ROUND (H2) */
/* decision 13: "choose files" is an inline link in the accent, as every link in the app (it was grey and underlined) */
#view .v89-intake .v89-pick, #view #intakeChosen b .v89-pick { color: var(--accent); font-weight: var(--w-medium); text-decoration: none; cursor: pointer; }
#view .v89-intake .v89-pick:hover, #view .v89-intake label.drop:hover .v89-pick { color: var(--accent-hover); text-decoration: none; }
/* Recently read: an identifier never breaks at its hyphen ("KPL-" over "9107"); the line wraps before it instead */
#view .v89-recent .slrow .tx .v93-nobr { display: inline; white-space: nowrap; margin: 0; }
/* The certificate page (v93, H2) */
/* the transcript keeps a printed table's columns and scrolls sideways; the scrollbar shows at rest, so a line that runs past
   the pane reads as more to see, not as cut off (line 17's date sat at the edge with nothing to say it went on) */
#view .rs-doc .viewer .sheet.origtext { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
#view .rs-doc .viewer .sheet.origtext::-webkit-scrollbar { height: 8px; }
#view .rs-doc .viewer .sheet.origtext::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--r-chip); }
#view .rs-doc .viewer .sheet.origtext::-webkit-scrollbar-track { background: transparent; }
/* a text original's toolbar: the name takes the room the zoom controls left */
#view .rs-doc .rs-card > .card-h.v93-text h2.v82fn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .rs-doc .rs-card > .card-h.v93-text > .vtool[hidden] { display: none; }
/* what else is owed on the lot, under the card's list: one quiet line with accent links */
#view .verdict .vx-todo .v93-also { margin: var(--s-3) 0 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-700); }
/* "Values as read" on the type scale (it set 11, 11.5, 12.5 and 13.5px): values 14, their notes 13, line keys 12; an id is
   an identifier (sans 500, tabular), not mono beside sans in one column; the "checked by me" mark is the system's check glyph,
   grey until it is pressed, green once it is (it was an empty square) */
#view .v80read .v80r dt { font-size: var(--t-small-size); line-height: var(--t-small-lh); }
#view .v80read .v80r dd { line-height: var(--t-body-lh); }
#view .v80read .v80r dd b, #view .v80read .v80r dd b.orig { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-medium); }
#view .v80read .v80r dd b.mono, #view .v80read .v80r dd b.v89-id { font-family: inherit; font-size: var(--t-body-size); font-weight: var(--w-medium); font-variant-numeric: tabular-nums slashed-zero; letter-spacing: 0; }
#view .v80read .v80r dd em { font-size: var(--t-small-size); line-height: var(--t-small-lh); }
#view .v80read .v80r .v80ln, #view .v80read .v80t td.l, #view .v80read .v80nc li i, #view .v80read .v80q li i { font-family: inherit; font-size: var(--t-label-size); line-height: var(--t-label-lh); font-variant-numeric: tabular-nums; color: var(--gray-500); }
#view .v80read .v80r .v80ln { padding: 0 var(--s-1); border-radius: var(--r-chip); background: var(--gray-50); }
#view .v80read .v80t td.w > span:not(.v80bar), #view .v80read .v80t .v80pr { font-size: var(--t-label-size); line-height: var(--t-label-lh); }
#view .v80read .v80t td.t span { font-size: var(--t-small-size); line-height: var(--t-small-lh); }
#view .v80read .v80q li, #view .v80read .v80nc li b, #view .v80read .v80nc li p, #view .v80read .v80unread li { font-size: var(--t-small-size); line-height: var(--t-small-lh); }
#view .v80read .v80q li em, #view .v80read .v80q li em.orig { font-weight: var(--w-medium); }
#view .v80read .v80q li span.orig, #view .v80read .v80q li span.mono, #view .v80read .v80nc li .mono { font-family: inherit; font-size: var(--t-small-size); line-height: var(--t-small-lh); }
#view .v80read .v80q li span small { font-size: var(--t-label-size); line-height: var(--t-label-lh); }
#view .v80read .v80unread li .n { font-family: inherit; font-variant-numeric: tabular-nums; }
#view .v80read .v81mk { width: 24px; height: 24px; min-width: 24px; padding: 0; border: 0; border-radius: var(--r-ctl); background: none; box-shadow: none; color: var(--gray-400); justify-content: center; }
#view .v80read .v81mk svg.i { width: 16px; height: 16px; opacity: 1; }
#view .v80read .v81mk:hover { background: var(--gray-50); color: var(--gray-700); }
#view .v80read .v81mk[aria-pressed="true"] { background: none; color: var(--positive-fg); }
/* Certificates on a phone: each strip label on one line, so the four cells are even */
@media (max-width: 699px) { #view .page:has(> .lib.v89-lib) > .v89-strip .v89-cell .lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
#view .rs-doc .viewer .sheet.origtext.v93-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
/* v93 (fix round, H2): dialogs */
/* Request documents (bulk): each supplier's name on the body size (it was 13.5px); the email note under it stays small */
#dialog .v88bulk .v87asks li label > span, #dialog .v88bulk .v87asks li label > span > span:not(.v92-em) { font-size: var(--t-body-size); line-height: var(--t-body-lh); }
#dialog .v88bulk .v87asks li label .v92-em { font-size: var(--t-small-size); line-height: var(--t-small-lh); }
/* Review this lot and Record the 503A basis: the body scrolls inside a shorter frame (Review was 852px in a 900px window), and
   the footer sits over what scrolls beneath it with a shadow, so the last line reads as continuing, not as cut by the footer */
#dialog .dialog:has(.v79open), #dialog .dialog:has(.v84routes) { max-height: min(760px, calc(100vh - 96px)); display: flex; flex-direction: column; }
#dialog .dialog:has(.v79open) > .db, #dialog .dialog:has(.v84routes) > .db, #dialog form.dialog:has(.v79open) .db, #dialog form.dialog:has(.v84routes) .db { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: var(--s-6); }
#dialog .dialog:has(.v79open) footer, #dialog .dialog:has(.v84routes) footer { position: relative; z-index: 1; background: var(--gray-0); box-shadow: 0 -1px 0 var(--gray-200), 0 -12px 16px -12px rgba(18, 22, 25, .16); }
#dialog .dialog:has(.v84routes) .help { margin-bottom: var(--s-2); }
/* v97 (M6): the verdict is one short label on one line; an older rule (next-v95.css) let it wrap out of its 22px tint box */
#view #recTable.v89-certs td.v89-vc > .chip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* a supplier taken from the certificate's lot says so on a quiet second line */
#view #recTable.v89-certs td.v89-sup.v97sup2 > b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gray-700); }
#view #recTable.v89-certs td.v89-sup.v97sup2 > span { display: block; color: var(--gray-500); font-size: var(--t-small-size); }
/* v97: the receiving log's decision is plain words; where the lot stands now, when it differs, is a quiet second line */
#view table.v89-rlog .v97rd { display: block; color: var(--gray-900); }
#view table.v89-rlog .v97now { display: block; margin-top: 2px; font-size: var(--t-small-size); color: var(--critical-fg, #b42318); }