/* v8 (2026-10-30): the list pages to their approved boards (design-proto/app/queue.html, suppliers.html, supplier.html,
   certificates.html), drawn by next-v8-pages.js. Scoped to the compositions (.v8q, .v8s, .v8f) and to the pages they mark
   (.v8q-on, .v8s-on, .v8f-on, .v8c-on). The blocks a composition redraws stay in the page, hidden. */

#view .v8q, #view .v8s, #view .v8f { font-family: var(--v8-sans); color: var(--v8-t1); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
#view .v8q a, #view .v8s a, #view .v8f a { color: inherit; text-decoration: none; }
#view .v8pi { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#view .v8pi.neg { color: var(--v8-neg); } #view .v8pi.warn { color: var(--v8-warn); } #view .v8pi.pos { color: var(--v8-pos); } #view .v8pi.mute { color: var(--v8-t3); }

/* the count beside a page's title */
#view .page h1 > .v8h-n { color: var(--v8-t3); font-weight: inherit; }

/* a quiet button: a hairline ring, raised on hover */
#view .v8q-btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; border-radius: 9px; border: 0; background: var(--v8-raised); box-shadow: var(--v8-hi), 0 0 0 1px var(--v8-hair); font: 400 13px/1 var(--v8-sans); color: var(--v8-t1) !important; white-space: nowrap; cursor: pointer; transition: background-color .15s var(--v8-ease); }
#view .v8q-btn:hover { background: color-mix(in srgb, var(--v8-raised) 70%, var(--v8-t1) 6%); }

/* ---------------- Review: the board as grouped rows ---------------- */
#view .page.v8q-on > .rboard { display: none !important; }
#view .v8q-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 8px 0 0; }
#view .v8q-tile { display: block; padding: 18px 20px; border-radius: var(--v8-r-panel); background: var(--v8-card); box-shadow: 0 0 0 1px var(--v8-hair); min-width: 0; }
#view .v8q-tile span { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--v8-t2); }
#view .v8q-tile span i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
#view .v8q-tile b { display: block; margin-top: 10px; font-size: 28px; font-weight: 500; letter-spacing: -.02em; line-height: 1; color: var(--v8-t1); }
#view .v8q-tile small { display: block; margin-top: 8px; font: 400 12px var(--v8-mono); color: var(--v8-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view .v8q-grp { margin-top: 16px; border-radius: var(--v8-r-panel); background: var(--v8-card); box-shadow: 0 0 0 1px var(--v8-hair); overflow: hidden; }
#view .v8q-gh { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 20px; background: color-mix(in srgb, var(--v8-deep) 45%, var(--v8-card)); border-bottom: 1px solid var(--v8-hair-2); font-size: 14px; color: var(--v8-t1); }
#view .v8q-gh i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
#view .v8q-gh em { font-style: normal; font: 400 12px var(--v8-mono); color: var(--v8-t3); }
#view .v8q-row { display: grid; grid-template-columns: minmax(0, 1fr) 176px; align-items: center; gap: 12px; padding-right: 20px; border-bottom: 1px solid var(--v8-hair-2); transition: background-color .15s var(--v8-ease); }
#view .v8q-row:last-child { border-bottom: 0; }
#view .v8q-row:hover { background: color-mix(in srgb, var(--v8-raised) 55%, transparent); }
#view .v8q .v8q-row > .v8q-btn { justify-self: end; }
#view .page .v8q a.bcard.v8q-main.v8q-main { display: grid; grid-template-columns: 136px minmax(0, 1.2fr) minmax(0, 1.6fr) 72px; gap: 16px; align-items: center; min-height: 60px; margin: 0 !important; padding: 10px 0 10px 20px !important; border: 0 !important; outline: 0; border-radius: 0 !important; background: none !important; box-shadow: none !important; font-size: 14px; color: var(--v8-t1); width: auto; max-width: none; transform: none !important; }
#view .page .v8q a.bcard.v8q-main.v8q-main:hover, #view .page .v8q a.bcard.v8q-main.v8q-main:focus { background: none !important; box-shadow: none !important; transform: none !important; }
#view .page .v8q a.bcard.v8q-main.v8q-main:focus-visible { outline: 2px solid var(--v8-accent); outline-offset: -2px; }
#view .v8q-l { font: 400 12px var(--v8-mono); color: var(--v8-t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .v8q-pr { min-width: 0; color: var(--v8-t1); }
#view .v8q-pr small, #view .v8q-w small { display: block; margin-top: 3px; font-size: 12px; color: var(--v8-t3); }
#view .v8q-w { min-width: 0; color: var(--v8-t2); line-height: 1.45; }
#view .v8q-a { font: 400 12px var(--v8-mono); color: var(--v8-t3); white-space: nowrap; }
#view .v8q-empty { margin: 16px 0; color: var(--v8-t3); font-size: 13px; }

/* ---------------- Suppliers: the cards ---------------- */
#view .v8s-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
#view .v8s-card { display: block; padding: 20px 22px 18px; border-radius: var(--v8-r-panel); background: var(--v8-card); box-shadow: 0 0 0 1px var(--v8-hair); min-width: 0; transition: background-color .15s var(--v8-ease); }
#view .v8s-card:hover { background: color-mix(in srgb, var(--v8-raised) 45%, var(--v8-card)); }
#view .v8s-top { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
#view .v8s-top > div { min-width: 0; }
#view .v8s-lg { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font: 600 13px/1 var(--v8-sans); color: #0b0d12; background: var(--c); flex: none; }
#view .v8s-card h3 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--v8-t1); }
#view .v8s-k { margin-top: 3px; font: 400 12px/1.4 var(--v8-mono); color: var(--v8-t3); }
#view .v8s-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; border-top: 1px solid var(--v8-hair-2); border-bottom: 1px solid var(--v8-hair-2); }
#view .v8s-nums div { padding: 12px 0; min-width: 0; }
#view .v8s-nums div + div { padding-left: 16px; border-left: 1px solid var(--v8-hair-2); }
#view .v8s-nums span { font-size: 12px; color: var(--v8-t2); }
#view .v8s-nums b { display: block; margin-top: 5px; font-size: 19px; font-weight: 500; line-height: 1; color: var(--v8-t1); }
#view .v8s-nums b.neg { color: var(--v8-neg); }
#view .v8s-now { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 14px; line-height: 1.4; color: var(--v8-t1); }
#view .v8s-now small { display: block; margin-top: 3px; font: 400 12px/1.4 var(--v8-mono); color: var(--v8-t3); }
#view .v8s-now .v8pi { margin-top: 1px; }
#view .v8s-h { margin: 28px 0 4px; font-size: 15px; font-weight: 500; color: var(--v8-t1); letter-spacing: 0; }

/* ---------------- a supplier's page ---------------- */
#view .page .v8f, #view .page > .v8s, #view .page > .v8q { border: 0 !important; outline: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
#view .page .v8f { margin: 0 0 32px !important; }
#view .v8f-sub { margin: 0 0 14px; font: 400 12px/1.4 var(--v8-mono); color: var(--v8-t3); }
#view .v8f-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
#view .v8f-cols > div { min-width: 0; display: grid; gap: 16px; align-content: start; }
#view .v8f-panel { border-radius: var(--v8-r-panel); background: var(--v8-card); box-shadow: 0 0 0 1px var(--v8-hair); overflow: hidden; }
#view .v8f-pat { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--v8-r-panel); background: var(--v8-card); box-shadow: 0 0 0 1px color-mix(in srgb, var(--v8-warn) 35%, transparent); }
#view .v8f-pat .v8pi { width: 18px; height: 18px; margin-top: 1px; }
#view .v8f-pat b { display: block; font-weight: 500; font-size: 15px; }
#view .v8f-pat p { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--v8-t2); }
#view .v8f-lots table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
#view .v8f-lots th { padding: 12px 16px; text-align: left; font: 400 12px/1 var(--v8-mono); color: var(--v8-t3); border-bottom: 1px solid var(--v8-hair); white-space: nowrap; background: none; }
#view .v8f-lots td { padding: 10px 16px; height: 56px; border-bottom: 1px solid var(--v8-hair-2); color: var(--v8-t2); vertical-align: middle; overflow: hidden; }
#view .v8f-lots tr:last-child td { border-bottom: 0; }
#view .v8f-lots tbody tr:hover td { background: color-mix(in srgb, var(--v8-raised) 55%, transparent); }
#view .v8f-lots td.m { font: 400 12px var(--v8-mono); color: var(--v8-t1); }
#view .v8f-lots td.p { color: var(--v8-t1); }
#view .page .v8f .v8f-lots table th:first-child, #view .page .v8f .v8f-lots table td:first-child { padding-left: 20px !important; }
#view .page .v8f .v8f-lots table th:last-child, #view .page .v8f .v8f-lots table td:last-child { padding-right: 20px !important; }
#view .v8f-lots td small { display: block; margin-top: 3px; font: 400 12px var(--v8-mono); color: var(--v8-t3); }
#view .v8f-st { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--v8-t1); }
#view .v8f-st .v8pi { margin-top: 1px; }
#view .v8f-dot { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--v8-t1); }
#view .v8f-dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; margin-top: 6px; }
#view .v8f-none { color: var(--v8-t3); }
#view .v8f-ph { display: flex; align-items: center; gap: 10px; padding: 18px 20px 14px; font-size: 15px; font-weight: 500; }
#view .v8f-ph span { font: 400 12px/1 var(--v8-mono); color: var(--v8-t3); }
#view .v8f-fr { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 10px 20px; border-top: 1px solid var(--v8-hair-2); font-size: 14px; line-height: 1.45; color: var(--v8-t1); }
#view .v8f-fr span:first-child { font: 400 12px/1.6 var(--v8-mono); color: var(--v8-t3); }
#view .v8f-facts { padding-bottom: 8px; }
#view .v8f-dr { margin: 0; padding: 0 20px 14px; font-size: 14px; line-height: 1.55; color: var(--v8-t2); }
#view .v8f-acts { display: flex; gap: 8px; padding: 0 20px 18px; }

/* ---------------- Certificates: the strip and the table in the board's form ---------------- */
#view .page.v8c-on > .v89-strip { border-radius: var(--v8-r-panel); background: var(--v8-card); box-shadow: 0 0 0 1px var(--v8-hair); border: 0; overflow: hidden; }
#view .page.v8c-on > .v89-strip .v89-cell + .v89-cell { border-left: 1px solid var(--v8-hair-2); }
#view .page.v8c-on #recTable thead th { font: 400 12px/1 var(--v8-mono); color: var(--v8-t3); border-bottom: 1px solid var(--v8-hair); background: none; }
#view .page.v8c-on #recTable tbody td { border-bottom: 1px solid var(--v8-hair-2); }
#view .page.v8c-on #recTable tbody tr:last-child td { border-bottom: 0; }
#view .page.v8c-on #recTable tbody tr:hover td { background: color-mix(in srgb, var(--v8-raised) 55%, transparent); }
#view .page.v8c-on #recTable .v89-id { font-family: var(--v8-mono); font-weight: 400; font-size: 12px; color: var(--v8-t1); }
#view .page.v8c-on #recTable td:nth-child(3) { font-family: var(--v8-mono); font-size: 12px; }

/* tablets and phones */
@media (max-width: 1100px) {
  #view .v8q-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view .v8s-cards, #view .v8f-cols { grid-template-columns: minmax(0, 1fr); }
  #view .page .v8q a.bcard.v8q-main.v8q-main { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.2fr) 64px; }
}
@media (max-width: 699px) {
  #view .v8q-tiles { gap: 12px; }
  #view .v8q-tile { padding: 14px 16px; }
  #view .v8q-tile b { font-size: 19px; }
  #view .v8q-row { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 16px 12px; }
  #view .v8q .v8q-row > .v8q-btn { justify-self: start; }
  #view .page .v8q a.bcard.v8q-main.v8q-main { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0 10px !important; }
  #view .v8q-pr, #view .v8q-w { grid-column: 1 / -1; }
  #view .v8q-gh { padding: 0 16px; }
  #view .v8s-card { padding: 16px; }
  #view .v8s-nums div + div { padding-left: 10px; }
  #view .v8s-nums b { font-size: 19px; }
  #view .v8f-lots table, #view .v8f-lots tbody, #view .v8f-lots tr, #view .v8f-lots td { display: block; width: 100%; }
  #view .v8f-lots colgroup, #view .v8f-lots thead { display: none; }
  #view .v8f-lots tr { padding: 10px 16px; border-bottom: 1px solid var(--v8-hair-2); }
  #view .v8f-lots tr:last-child { border-bottom: 0; }
  #view .page .v8f .v8f-lots table td, #view .page .v8f .v8f-lots table td:first-child, #view .page .v8f .v8f-lots table td:last-child { height: auto; padding: 3px 0 !important; border: 0 !important; }
  #view .v8f-fr { grid-template-columns: 92px minmax(0, 1fr); padding: 10px 16px; }
}
:root:not([data-theme="dark"]) #view .v8s-lg { color: #fff; }
/* the lots table sits inside the supplier file's section, whose own table rules would size its columns */
#view .page .v8f .v8f-lots table { table-layout: fixed !important; width: 100% !important; min-width: 0 !important; }
#view .page .v8f .v8f-lots table th:nth-child(1) { width: 140px !important; }
#view .page .v8f .v8f-lots table th:nth-child(2) { width: auto !important; }
#view .page .v8f .v8f-lots table th:nth-child(3) { width: 34% !important; }
#view .page .v8f .v8f-lots table th:nth-child(4) { width: 26% !important; }

/* ======================= v8 (2026-10-30, port r1): the record pages ======================= */
/* A lot (design-proto/app/lot.html), a recall case (recall.html), a batch release (release.html) and inspection
   (inspection.html), drawn by the second part of next-v8-pages.js. Scoped to the compositions (.v8l, .v8rc, .v8b, .v8n) and to
   the pages they mark (.v8l-on, .v8rc-on, .v8b-on, .v8n-on). The blocks a composition redraws stay in the page, hidden. */
#view .v8l, #view .v8rc, #view .v8b, #view .v8n { font-family: var(--v8-sans); color: var(--v8-t1); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; min-width: 0; }
#view .v8l a, #view .v8rc a, #view .v8b a, #view .v8n a { color: inherit; text-decoration: none; }
#view .v8l p, #view .v8rc p, #view .v8b p, #view .v8n p { margin: 0; }

/* shared parts: a panel, its header line, the line under a title, the status word, the facts a status card carried */
#view .v8x-panel { border-radius: var(--v8-r-panel); background: var(--v8-card); box-shadow: 0 0 0 1px var(--v8-hair); overflow: hidden; min-width: 0; }
#view .v8x-ph { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 18px 20px 14px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--v8-t1); }
#view .v8x-ph > span { font: 400 12px/1.4 var(--v8-mono); color: var(--v8-t3); }
#view .v8x-ph > .v8x-r { margin-left: auto; display: flex; gap: 8px; align-items: center; font: inherit; }
#view .v8x-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0 0 22px; font: 400 12px/1.4 var(--v8-mono); color: var(--v8-t3); }
#view .v8x-sub > span:not(.v8x-chip) + span:not(.v8x-chip)::before { content: "·"; margin: 0 9px; opacity: .7; }
#view .v8x-sub > .v8x-chip { margin-right: 12px; }
#view .v8x-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 7px; border-radius: 7px; font: 500 13px/1 var(--v8-sans); color: var(--c, var(--v8-t1)); background: var(--v8-raised); box-shadow: var(--v8-hi), 0 0 0 1px var(--v8-hair); white-space: nowrap; }
#view .v8x-chip .v8pi { width: 15px; height: 15px; }
#view .v8x-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; padding: 13px 28px 14px; border-top: 1px solid var(--v8-hair-2); font-size: 13px; line-height: 1.4; }
#view .v8x-facts em { font-style: normal; color: var(--v8-t3); margin-right: 7px; }
#view .v8x-facts b { font-weight: 400; color: var(--v8-t2); }
#view .v8x-facts b.v8t-neg { color: var(--v8-neg); }
#view .v8x-links { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }
#view .v8x-links .v7x-link, #view .v8x-links a, #view .v8x-links button { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; font: 400 13px/1.4 var(--v8-sans); color: var(--v8-accent) !important; cursor: pointer; white-space: nowrap; }
#view .v8x-links svg { width: 13px; height: 13px; }
#view .v8x-none { padding: 2px 20px 20px; font-size: 13px; line-height: 1.5; color: var(--v8-t3); }
#view .v8x-none + .v8x-none { padding-top: 0; }

/* a value against its printed range */
#view .v8res { padding: 14px 20px 16px; border-top: 1px solid var(--v8-hair-2); }
#view .v8res-top { display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--v8-t1); }
#view .v8res-top > b { margin-left: auto; font-size: 19px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
#view .v8res-top > b small { margin-left: 3px; font-size: 12px; font-weight: 400; color: var(--v8-t3); letter-spacing: 0; }
#view .v8res-top > b.v8res-wd { font-size: 14px; font-weight: 500; letter-spacing: 0; white-space: normal; text-align: right; }
#view .v8res-top > b.v8res-warn { color: var(--v8-warn); font-size: 15px; }
#view .v8sc { position: relative; height: 6px; margin: 14px 0 8px; border-radius: 3px; background: var(--v8-raised); box-shadow: inset 0 0 0 1px var(--v8-hair-2); }
#view .v8sc .v8sc-ok { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: color-mix(in srgb, var(--v8-pos) 38%, transparent); }
#view .v8sc .v8sc-ok.v8sc-bad { background: color-mix(in srgb, var(--v8-neg) 38%, transparent); }
#view .v8sc .v8sc-mk { position: absolute; top: -5px; width: 3px; height: 16px; margin-left: -1.5px; border-radius: 2px; background: var(--v8-t1); box-shadow: 0 0 0 3px var(--v8-card); }
#view .v8sc-t { position: relative; height: 12px; font: 400 12px/1 var(--v8-mono); color: var(--v8-t3); }
#view .v8sc-t span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
#view .v8sc-t span:first-child { transform: none; }
#view .v8sc-t span:last-child { transform: translateX(-100%); }
#view .v8res-say { margin-top: 9px; font-size: 13px; line-height: 1.5; color: var(--v8-t2); }
#view .v8res-say em { font-style: normal; font-weight: 500; }
#view .v8res-say em.v8t-pos { color: var(--v8-pos); } #view .v8res-say em.v8t-neg { color: var(--v8-neg); }
#view .v8res-c { display: block; margin-top: 3px; font: 400 12px/1.4 var(--v8-mono); color: var(--v8-t3); }

/* ---------------- the lot page ---------------- */
#view .page.v8l-on, #view .page.v8l-on[data-v7x] { display: flex !important; flex-direction: column; align-items: stretch; grid-template-columns: none !important; }
/* a block a composition redraws is kept, laid out but clipped offscreen and inert (never display:none), so the layers and tests that
   read it, its innerText included, find it as it was; its facts and controls are carried visibly into the composition */
#view .page.v8l-on > :is(.v7x-set, .v96-lotsteps),
#view .page.v8b-on > :is(.v7x-set, .vk-kpis), #view .page.v8b-on .r92e-main > .r92e-before, #view .page.v8b-on.v8b-rel .r92e-side > [data-r92e-lit="released"],
#view .page.v8rc-on > :is(.v7x-set, .v97-rcsteps), #view .page.v8rc-on > .r91c-recallhead > .r91c-rh-g, #view .page.v8rc-on > .r91c-recallhead:not(:has(> :not([data-v8shelf]))) {
  display: block !important; position: absolute !important; left: -20000px !important; top: 0 !important; width: 1000px !important; height: auto !important; max-height: none !important;
  margin: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; pointer-events: none !important; contain: layout paint;
}
#view .page.v8l-on .rhead .top2 { display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 10px; }
#view .page.v8l-on .rhead .top2 > .v7x-flat:not(.v7x-acts) { display: flex !important; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; flex: 1 1 0; }
#view .page.v8l-on .rhead .top2 .titleline { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
#view .page.v8l-on .rhead .v8x-sub { margin: 0; }
#view .page.v8l-on .rhead .v7x-title { padding: 0 !important; min-height: 0; height: auto; }
#view .page.v8l-on .rhead .v7x-acts { position: static; margin: 0 0 0 auto !important; max-width: none; justify-self: auto; align-self: center; }
#view .page.v8l-on .rhead .top2 { margin: 0 0 24px !important; }
#view .page.v8l-on .rhead h1 { font-size: 28px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; color: var(--v8-t1); }
#view .page.v8l-on .rhead h1 .v89-id { color: var(--v8-t3); font-weight: inherit; font-variant-numeric: normal; letter-spacing: -.01em; }
#view .page.v8l-on > .v8l { order: 1; }
#view .v8l-route { padding: 22px 0 0; }
#view .v8rt-line { position: relative; height: 60px; margin: 6px 28px 0; }
#view .v8rt-line svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#view .v8rt-line path { fill: none; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
#view .v8rt-line path[data-st="on"] { stroke: var(--c); }
#view .v8rt-line path[data-st="now"] { stroke: var(--c); stroke-dasharray: 2 7; }
#view .v8rt-line path[data-st="off"] { stroke: color-mix(in srgb, var(--v8-t3) 40%, transparent); stroke-dasharray: 2 7; }
#view .v8rt-dot { position: absolute; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px var(--v8-card); }
#view .v8rt-dot[data-st="now"] { background: var(--v8-card); box-shadow: inset 0 0 0 2.5px var(--c), 0 0 0 4px var(--v8-card); }
#view .v8rt-dot[data-st="todo"] { background: var(--v8-card); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--v8-t3) 70%, transparent), 0 0 0 4px var(--v8-card); }
#view .v8rt-stops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 14px 28px 22px; }
#view .v8rt-stop { padding-right: 16px; min-width: 0; }
#view .v8rt-stop .v8rt-k { display: flex; align-items: center; gap: 8px; font: 500 12px/1.2 var(--v8-mono); color: var(--c); white-space: nowrap; }
#view .v8rt-stop .v8rt-k i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
#view .v8rt-stop[data-st="todo"] .v8rt-k { color: var(--v8-t3); }
#view .v8rt-stop[data-st="now"] .v8rt-k { color: var(--v8-t2); }
#view .v8rt-stop[data-st="now"] .v8rt-k i { background: none; box-shadow: inset 0 0 0 1.5px var(--c); }
#view .v8rt-stop[data-st="now"] b { color: var(--t, var(--v8-t1)); }
#view .v8rt-stop[data-st="todo"] .v8rt-k i { background: none; box-shadow: inset 0 0 0 1.5px var(--v8-t3); }
#view .v8rt-stop b { display: block; margin-top: 9px; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--v8-t1); }
#view .v8rt-stop[data-st="todo"] b { color: var(--v8-t2); font-weight: 400; }
#view .v8rt-stop .v8rt-s { display: block; margin-top: 4px; font: 400 12px/1.4 var(--v8-mono); color: var(--v8-t3); }
#view .v8l-g3 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, .95fr); gap: 16px; margin-top: 16px; align-items: stretch; }
#view .v8l-ing { padding: 14px 20px 16px; border-top: 1px solid var(--v8-hair-2); }
#view .v8l-ing .v8l-it { display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--v8-t1); }
#view .v8l-ing .v8l-it a:hover { text-decoration: underline; text-underline-offset: 3px; }
#view .v8l-ing .v8l-it .v8l-w { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--c); white-space: nowrap; }
#view .v8l-ing dl { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 10px; margin: 12px 0 0; font-size: 13px; line-height: 1.45; }
#view .v8l-ing dt { font: 400 12px/1.45 var(--v8-mono); color: var(--v8-t3); }
#view .v8l-ing dd { margin: 0; color: var(--v8-t2); min-width: 0; overflow-wrap: anywhere; }
#view .v8l-doc { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 12px; height: 26px; padding: 0 9px; border-radius: 7px; background: var(--v8-raised); box-shadow: 0 0 0 1px var(--v8-hair); font: 400 12px/1 var(--v8-mono); color: var(--v8-t2); }
#view .v8l-doc > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .v8l-doc .v8pi { width: 14px; height: 14px; color: var(--v8-t3); }
#view .v8l-doc em { font: 500 12px/1 var(--v8-sans); font-style: normal; color: var(--c); white-space: nowrap; margin-left: 2px; }
#view a.v8l-doc:hover { color: var(--v8-t1); }
#view .v8l-doc.v8l-docnone { background: none; box-shadow: none; padding: 0; }
#view .v8l-chk { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 20px; border-top: 1px solid var(--v8-hair-2); font-size: 14px; line-height: 1.4; }
#view .v8l-chk small { display: block; margin-top: 4px; font: 400 12px/1.3 var(--v8-mono); color: var(--v8-t3); }
#view .v8l-chk em { font-style: normal; font-size: 13px; font-weight: 500; white-space: nowrap; }
#view .v8l-chk em.v8t-neg { color: var(--v8-neg); } #view .v8l-chk em.v8t-warn { color: var(--v8-warn); }
#view .v8l-sig { margin: 0 20px; padding: 16px 16px 14px; border-radius: 12px; background: var(--v8-raised); box-shadow: var(--v8-hi), 0 0 0 1px var(--v8-hair); }
#view .v8l-sign { display: block; font: italic 400 19px/1.2 "Source Serif 4", Georgia, serif; color: var(--v8-t1); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view .v8l-sig b { display: block; margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--v8-t1); }
#view .v8l-sig > span:not(.v8l-sign) { display: block; margin-top: 3px; font: 400 12px/1.4 var(--v8-mono); color: var(--v8-t3); }
#view .v8l-sig p { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--v8-t2); }
#view .v8l-sig.v8l-sigopen b { margin-top: 0; }
#view .v8l-sig.v8l-sigopen .v8q-btn { margin-top: 12px; }
#view .v8l-pp { padding: 18px 20px 18px; }
#view .v8l-pp .v8l-ppn { display: flex; align-items: baseline; gap: 10px; }
#view .v8l-pp .v8l-ppn b { font-size: 34px; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
#view .v8l-pp .v8l-ppn span { font-size: 14px; color: var(--v8-t2); }
#view .v8l-cl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; margin-top: 16px; font-size: 13px; color: var(--v8-t2); }
#view .v8l-cl .v8l-cn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .v8l-cl em { font: 400 12px/1 var(--v8-mono); font-style: normal; color: var(--v8-t1); white-space: nowrap; }
#view .v8l-cl .v8l-bar { grid-column: 1 / -1; height: 5px; margin-bottom: 8px; border-radius: 3px; background: var(--v8-raised); }
#view .v8l-cl .v8l-bar i { display: block; height: 100%; border-radius: 3px; background: var(--v8-s4); }

/* ---------------- the batch release page ---------------- */
#view .page.v8b-on, #view .page.v8b-on[data-v7x] { display: flex !important; flex-direction: column; align-items: stretch; grid-template-columns: none !important; }
#view .page.v8b-on > .phead { display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 22px !important; }
#view .page.v8b-on > .phead > .v7x-flat:not(.v7x-acts) { display: flex !important; flex-direction: column; align-items: flex-start; gap: 12px; flex: 1 1 0; min-width: 0; }
#view .page.v8b-on > .phead .v89-titlerow { padding: 0 !important; min-height: 0; height: auto; margin: 0 !important; }
#view .page.v8b-on > .phead .v7x-acts { position: static; margin: 0 0 0 auto !important; max-width: none; align-self: center; }
#view .page.v8b-on > .phead .v8x-sub { margin: 0; }
#view .page.v8b-on > .v8b { margin: 0 0 24px !important; }
#view .v8b-g2 { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 16px; align-items: start; }
#view .v8b-side { display: grid; gap: 16px; min-width: 0; }
#view .v8b-it { border-top: 1px solid var(--v8-hair-2); }
#view .v8b-it > summary, #view div.v8b-it { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 20px; list-style: none; }
#view .v8b-it > summary { cursor: pointer; transition: background-color .15s var(--v8-ease); }
#view .v8b-it > summary::-webkit-details-marker { display: none; }
#view .v8b-it > summary:hover { background: color-mix(in srgb, var(--v8-raised) 55%, transparent); }
#view .v8b-it > summary:focus-visible { outline: 2px solid var(--v8-accent); outline-offset: -2px; }
#view .v8b-it .v8pi { margin-top: 1px; }
#view .v8b-t { font-size: 14px; color: var(--v8-t1); min-width: 0; }
#view .v8b-t small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--v8-t2); }
#view .v8b-t code { display: block; margin-top: 5px; font: 400 12px/1.45 var(--v8-mono); color: var(--v8-t3); overflow-wrap: anywhere; }
#view .v8b-w { font-size: 13px; font-weight: 500; color: var(--c); white-space: nowrap; margin-top: 1px; }
#view .v8b-ev { margin: 0 20px 16px 50px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--v8-deep) 55%, var(--v8-card)); box-shadow: 0 0 0 1px var(--v8-hair-2); font-size: 13px; color: var(--v8-t2); min-width: 0; overflow-x: auto; }
#view .v8b-evl > div { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 6px 0; }
#view .v8b-evl small { display: block; margin-top: 3px; font-size: 12px; color: var(--v8-t3); }
#view .v8b-list .v8x-facts { padding-left: 20px; padding-right: 20px; }
#view .v8b-math { padding-bottom: 18px; }
#view .v8b-eq { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 14px; align-items: baseline; padding: 0 20px; font-size: 14px; }
#view .v8b-eq span { color: var(--v8-t2); }
#view .v8b-eq em { font: 400 12px/1.35 var(--v8-mono); font-style: normal; color: var(--v8-t3); }
#view .v8b-eq b { font: 500 13px/1.3 var(--v8-mono); color: var(--v8-t1); text-align: right; white-space: nowrap; }
#view .v8b-res { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 20px 0; padding-top: 14px; border-top: 1px solid var(--v8-hair-2); }
#view .v8b-res span { font-size: 14px; color: var(--v8-t2); }
#view .v8b-res b { font-size: 28px; font-weight: 500; letter-spacing: -.02em; }
#view .v8b-res b small { margin-left: 4px; font-size: 13px; font-weight: 400; color: var(--v8-t3); letter-spacing: 0; }
#view .v8b-vs { display: flex; justify-content: space-between; gap: 16px; margin: 10px 20px 0; font-size: 13px; line-height: 1.5; color: var(--v8-t2); }
#view .v8b-vs b { color: var(--c); font-weight: 500; white-space: nowrap; }
#view .v8b-lab { margin: 0 20px 20px; padding: 16px 16px 14px; border-radius: 10px; background: var(--v8-paper); color: var(--v8-paper-ink); font: 500 13px/1.6 var(--v8-sans); }
#view .v8b-lab > span { display: block; }
#view .v8b-lab .v8b-lab-m { color: var(--v8-paper-mute); font-weight: 400; }
#view .v8b-lab b { display: block; font: 600 14px/1.35 var(--v8-sans); color: var(--v8-paper-ink); }
#view .v8b-bud { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--v8-paper-line); font: 500 12px/1.4 var(--v8-mono); }
#view .v8b-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 11px 20px; border-top: 1px solid var(--v8-hair-2); font-size: 14px; color: var(--v8-t1); }
#view .v8b-r small { display: block; margin-top: 3px; font: 400 12px/1.4 var(--v8-mono); color: var(--v8-t3); }
#view .v8b-r em { font: 400 12px/1.4 var(--v8-mono); font-style: normal; color: var(--v8-t2); white-space: nowrap; }
#view .v8b-went .v8x-ph { align-items: center; }
#view .v8b-went .v8x-ph > .v8x-r { margin-left: auto; }
@media (max-width: 699px) {
  #view .v8b-it > summary, #view div.v8b-it { grid-template-columns: 18px minmax(0, 1fr); row-gap: 4px; }
  #view .v8b-it .v8pi { grid-row: 1 / span 2; }
  #view .v8b-w { grid-column: 2; grid-row: 1; }
  #view .v8b-t { grid-column: 2; grid-row: 2; }
}
#view .v8b-fine { padding-top: 12px; border-top: 1px solid var(--v8-hair-2); font-size: 12px; }

/* ---------------- a recall case ---------------- */
#view .page.v8rc-on, #view .page.v8rc-on[data-v7x] { display: flex !important; flex-direction: column; align-items: stretch; grid-template-columns: none !important; }
#view .page.v8rc-on > .phead { display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 22px !important; }
#view .page.v8rc-on > .phead > .v7x-flat:not(.v7x-acts) { display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px 10px; flex: 1 1 0; min-width: 0; }
#view .page.v8rc-on > .phead h1 { padding: 0 !important; min-height: 0; height: auto; margin: 0 !important; align-self: center !important; }
#view .page.v8rc-on > .phead .v7x-acts { position: static; margin: 0 0 0 auto !important; max-width: none; align-self: center; }
#view .page.v8rc-on > .phead .v8rc-sub { flex-basis: 100%; margin: 0 !important; }
#view .page.v8rc-on > .phead .xpl-btn { margin: 0 !important; align-self: center !important; }
#view .v8rc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#view .page.v8rc-on > .v8rc { margin: 0 0 24px !important; }
#view .v8rc-cols { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 16px; align-items: start; }
#view .v8rc-tb { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 16px; border-bottom: 1px solid var(--v8-hair); font-size: 14px; color: var(--v8-t1); }
#view .v8rc-tb .v8pi { color: var(--v8-t2); }
#view .v8rc-tb em { font: 400 12px/1 var(--v8-mono); font-style: normal; color: var(--v8-t3); }
#view .v8rc-said { margin: 0; padding: 18px 20px 20px; background: var(--v8-deep); border-bottom: 1px solid var(--v8-hair-2); }
#view .v8rc-k { display: block; font-size: 13px; font-weight: 500; color: var(--v8-neg); }
#view .v8rc-said p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--v8-t1); }
#view .v8rc-said p.v8rc-q { font-size: 13px; color: var(--v8-t3); }
#view .v8rc-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 20px; border-top: 1px solid var(--v8-hair-2); font-size: 14px; line-height: 1.4; color: var(--v8-t1); }
#view .v8rc-row small { display: block; margin-top: 4px; font: 400 12px/1.4 var(--v8-mono); color: var(--v8-t3); }
#view .v8rc-row em { font-style: normal; font-size: 13px; font-weight: 500; color: var(--v8-t2); white-space: nowrap; }
#view .v8rc-row em.v8t-pos { color: var(--v8-pos); } #view .v8rc-row em.v8t-neg { color: var(--v8-neg); } #view .v8rc-row em.v8t-warn { color: var(--v8-warn); }
#view .v8rc-ntc > .v8x-ph { padding-top: 16px; padding-bottom: 10px; font-size: 14px; }
#view .v8rc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--v8-hair-2); border-bottom: 1px solid var(--v8-hair-2); }
#view .v8rc-kpis > div { padding: 14px 20px; min-width: 0; }
#view .v8rc-kpis > div + div { border-left: 1px solid var(--v8-hair-2); }
#view .v8rc-kpis span { font-size: 13px; color: var(--v8-t2); }
#view .v8rc-kpis b { display: block; margin-top: 6px; font-size: 28px; font-weight: 500; letter-spacing: -.02em; line-height: 1; color: var(--v8-t1); }
#view .v8rc-map { position: relative; height: var(--h); margin: 28px 20px 24px; }
#view .v8rc-map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#view .v8rc-node { position: absolute; display: flex; flex-direction: column; gap: 4px; box-sizing: border-box; width: var(--nw); padding: 10px 12px; border-radius: 10px; background: var(--v8-raised); box-shadow: var(--v8-hi), 0 0 0 1px var(--v8-hair); font-size: 13px; line-height: 1.3; color: var(--v8-t1); transform: translateY(-50%); min-width: 0; }
#view a.v8rc-node:hover { background: color-mix(in srgb, var(--v8-raised) 70%, var(--v8-t1) 6%); }
#view .v8rc-node small { font: 400 12px/1.35 var(--v8-mono); color: var(--v8-t3); overflow-wrap: anywhere; }
#view .v8rc-node.v8rc-hit { box-shadow: var(--v8-hi), 0 0 0 1px color-mix(in srgb, var(--v8-neg) 55%, transparent); }
#view .v8rc-h { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--v8-neg); }
#view .v8rc-node:not(.v8rc-hit) .v8rc-h { color: var(--v8-t2); }
#view .v8rc-h i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#view .v8rc-todo { border-top: 1px solid var(--v8-hair); }
#view .v8rc-todo > .v8x-ph { align-items: center; }
#view .v8rc-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0 20px 12px; list-style: none; }
#view .v8rc-steps li { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 13px; color: var(--v8-t2); }
#view .v8rc-steps li i { display: block; height: 4px; border-radius: 2px; background: var(--v8-raised); box-shadow: inset 0 0 0 1px var(--v8-hair); }
#view .v8rc-steps li[data-st="done"] i { background: var(--v8-pos); box-shadow: none; }
#view .v8rc-steps li[data-st="now"] i { background: var(--v8-warn); box-shadow: none; }
#view .v8rc-steps li[data-st="done"] span, #view .v8rc-steps li[data-st="now"] span { color: var(--v8-t1); }
#view .v8rc-steps small { display: block; margin-top: 2px; font: 400 12px/1.3 var(--v8-mono); color: var(--v8-t3); }
#view .v8rc-next { padding: 0 20px 14px; font-size: 13px; line-height: 1.55; color: var(--v8-t2); }
#view .v8rc-reach .v8x-facts { padding-left: 20px; padding-right: 20px; }

/* ---------------- inspection ---------------- */
#view .page.v8n-on > .phead > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 10px; }
#view .page.v8n-on > .phead .v8n-sub { flex-basis: 100%; margin: 2px 0 0 !important; }
#view .page.v8n-on > .phead h1 > .v8h-n { color: var(--v8-t3); }
/* the strip: the checklist's own filters, as figures */
#view .page.v8n-on #v95i-list .v96i-filters { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: 0; margin: 0; border-radius: var(--v8-r-panel); background: var(--v8-card); box-shadow: 0 0 0 1px var(--v8-hair); overflow: hidden; }
#view .page.v8n-on #v95i-list .v96i-filters > button { display: flex !important; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; height: auto !important; min-height: 0; margin: 0 !important; padding: 16px 18px !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; font: 400 13px/1.2 var(--v8-sans) !important; color: var(--v8-t2) !important; text-align: left; cursor: pointer; min-width: 0; }
#view .page.v8n-on #v95i-list .v96i-filters > button + button { box-shadow: inset 1px 0 0 var(--v8-hair-2) !important; }
#view .page.v8n-on #v95i-list .v96i-filters > button > span { display: block; padding: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; font: 500 28px/1 var(--v8-sans) !important; letter-spacing: -.02em; color: var(--v8-t1) !important; font-variant-numeric: tabular-nums; min-width: 0; height: auto !important; }
#view .page.v8n-on #v95i-list .v96i-filters > button[data-set="v89iF=missing"] > span { color: var(--v8-neg) !important; }
#view .page.v8n-on #v95i-list .v96i-filters > button[aria-pressed="true"] { background: color-mix(in srgb, var(--v8-raised) 70%, transparent) !important; color: var(--v8-t1) !important; box-shadow: inset 0 -2px 0 var(--v8-accent) !important; }
#view .page.v8n-on #v95i-list .v96i-filters > button:hover { background: color-mix(in srgb, var(--v8-raised) 45%, transparent) !important; }
#view .page.v8n-on #v95i-list .v96i-filters > button:focus-visible { outline: 2px solid var(--v8-accent); outline-offset: -2px; }
#view .page.v8n-on #v95i-list .v96i-filters > [data-set="v89iF=all"] { order: 0; } #view .page.v8n-on #v95i-list .v96i-filters > [data-set="v89iF=onfile"] { order: 1; }
#view .page.v8n-on #v95i-list .v96i-filters > [data-set="v89iF=yours"] { order: 2; } #view .page.v8n-on #v95i-list .v96i-filters > [data-set="v89iF=person"] { order: 3; }
#view .page.v8n-on #v95i-list .v96i-filters > [data-set="v89iF=missing"] { order: 4; } #view .page.v8n-on #v95i-list .v96i-filters > [data-set="v89iF=na"] { order: 5; }
/* the checklist: one panel per area */
#view .page.v8n-on > #v95i-list { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; overflow: visible !important; }
#view .page.v8n-on > #v95i-list > .v96-ph { padding: 0 0 12px !important; border: 0 !important; }
#view .page.v8n-on > #v95i-list > .v96i-ftop { padding: 0 0 16px !important; margin: 0 !important; border: 0 !important; background: none !important; position: static !important; }
#view .page.v8n-on #v95i-list .v96i-body { display: flex !important; flex-direction: column; gap: 16px; padding: 0 !important; }
#view .page.v8n-on #v95i-list .v96i-area { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: var(--v8-r-panel) !important; background: var(--v8-card) !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; overflow: hidden; }
#view .page.v8n-on #v95i-list .v96i-area-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 16px 20px 12px !important; margin: 0 !important; border: 0 !important; background: none !important; }
#view .page.v8n-on #v95i-list .v96i-area-h .v96-tile { display: none !important; }
#view .page.v8n-on #v95i-list .v96i-area-h h3 { margin: 0 !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0; color: var(--v8-t1) !important; }
#view .page.v8n-on #v95i-list .v96i-area-h > span { font: 400 12px/1.4 var(--v8-mono) !important; color: var(--v8-t3) !important; }
#view .page.v8n-on #v95i-list .v96i-rows > .v96i-row { border-top: 1px solid var(--v8-hair-2) !important; border-bottom: 0 !important; }
#view .page.v8n-on #v95i-list .v96i-reqb { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; text-align: left; }
#view .page.v8n-on #v95i-list .v96i-foot { padding: 14px 0 0 !important; border: 0 !important; background: none !important; }
/* the two columns, where there is room for them */
@media (min-width: 1100px) {
  #view .page.v8n-on { display: grid !important; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 16px; align-items: start; }
  #view .page.v8n-on > * { min-width: 0; }
  #view .page.v8n-on > :is(.v5-cato, .v96i-over, .v96i-hand, .v96i-rehearse, .f483-entry) { margin: 0 0 16px !important; }
  #view .page.v8n-on > .v95i-sec { margin: 8px 0 12px !important; }
  #view .page.v8n-on > .v7w-bar[style*="grid-area"] { top: 3px !important; bottom: auto !important; }
}

/* ---------------- tablets and phones, for the four record pages ---------------- */
@media (max-width: 1100px) {
  #view .v8l-g3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #view .v8l-g3 > :last-child { grid-column: 1 / -1; }
  #view .v8b-g2, #view .v8rc-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  #view .v8l-g3 { grid-template-columns: minmax(0, 1fr); }
  #view .v8x-sub { margin-bottom: 16px; }
  #view .v8x-sub > .v8x-chip { flex-basis: auto; }
  #view .v8x-facts { padding: 12px 16px; gap: 6px 16px; }
  #view .v8x-links { margin-left: 0; }
  #view .v8x-ph { padding: 16px 16px 12px; }
  /* the route: the four stops down the page, each on its own colour */
  #view .v8l-route { padding-top: 6px; }
  #view .v8rt-line { display: none; }
  #view .v8rt-stops { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0 16px 8px; }
  #view .v8rt-stop { position: relative; padding: 12px 0 12px 16px; border-top: 1px solid var(--v8-hair-2); }
  #view .v8rt-stop:first-child { border-top: 0; }
  #view .v8rt-stop::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 1px; background: var(--c); }
  #view .v8rt-stop[data-st="todo"]::before { background: color-mix(in srgb, var(--v8-t3) 40%, transparent); }
  #view .v8rt-stop b { margin-top: 6px; }
  #view .v8l-ing, #view .v8res, #view .v8l-chk { padding-left: 16px; padding-right: 16px; }
  #view .v8l-sig { margin: 0 16px; }
  #view .v8l-pp { padding: 16px; }
  #view .v8l-ing dl { grid-template-columns: 84px minmax(0, 1fr); }
  /* the release record */
  #view .v8b-it > summary, #view div.v8b-it { padding: 12px 16px; gap: 10px; }
  #view .v8b-ev { margin: 0 16px 14px; }
  #view .v8b-eq { grid-template-columns: minmax(0, 1fr) auto; padding: 0 16px; }
  #view .v8b-eq em { grid-column: 1; margin-top: -6px; }
  #view .v8b-eq b { grid-row: span 1; }
  #view .v8b-res, #view .v8b-vs { margin-left: 16px; margin-right: 16px; }
  #view .v8b-vs { flex-direction: column; gap: 4px; }
  #view .v8b-lab { margin: 0 16px 16px; }
  #view .v8b-r { padding: 11px 16px; }
  /* a recall case: the reach as a list, the lot, then each batch, then each clinic */
  #view .v8rc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view .v8rc-kpis > div { padding: 12px 16px; }
  #view .v8rc-kpis > div:nth-child(3) { border-left: 0; }
  #view .v8rc-kpis > div:nth-child(n+3) { border-top: 1px solid var(--v8-hair-2); }
  #view .v8rc-map { height: auto !important; margin: 16px; display: flex; flex-direction: column; gap: 8px; }
  #view .v8rc-map svg { display: none; }
  #view .v8rc-node { position: relative; left: auto !important; top: auto !important; width: auto; transform: none; }
  #view .v8rc-node:not(.v8rc-hit), #view .v8rc-node.v8rc-hit + .v8rc-node.v8rc-hit { margin-left: 16px; }
  #view .v8rc-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0 16px 12px; }
  #view .v8rc-steps li span { font-size: 12px; overflow-wrap: anywhere; }
  #view .v8rc-row { padding: 11px 16px; }
  #view .v8rc-said { padding: 14px 16px 16px; }
  #view .v8rc-next { padding: 0 16px 12px; }
  /* inspection: the figures in rows of three */
  #view .page.v8n-on #v95i-list .v96i-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #view .page.v8n-on #v95i-list .v96i-filters > button { padding: 12px 14px !important; font-size: 12px !important; white-space: normal !important; overflow-wrap: anywhere; }
  #view .page.v8n-on #v95i-list .v96i-filters > button:nth-child(n) { box-shadow: inset 1px 0 0 var(--v8-hair-2), inset 0 1px 0 var(--v8-hair-2) !important; }
  #view .page.v8n-on #v95i-list .v96i-area-h { padding: 14px 16px 10px !important; }
}