/* next-v96.css (v96, 2026-10-02). Owner: the lead, see DESIGN-V96.md. Tokens and the v96 kit only. */

/* every firm's monogram: a circle in its own hue */
:is(span.logo, .v89-mono-gram, .bcn, .v94-ava)[data-v96hue] { border-radius: 50%; border: 0; box-shadow: none; font-weight: var(--w-semibold); }
:is(span.logo, .v89-mono-gram, .bcn, .v94-ava)[data-v96hue="1"] { background: var(--hue-1-bg); color: var(--hue-1-fg); }
:is(span.logo, .v89-mono-gram, .bcn, .v94-ava)[data-v96hue="2"] { background: var(--hue-2-bg); color: var(--hue-2-fg); }
:is(span.logo, .v89-mono-gram, .bcn, .v94-ava)[data-v96hue="3"] { background: var(--hue-3-bg); color: var(--hue-3-fg); }
:is(span.logo, .v89-mono-gram, .bcn, .v94-ava)[data-v96hue="4"] { background: var(--hue-4-bg); color: var(--hue-4-fg); }
:is(span.logo, .v89-mono-gram, .bcn, .v94-ava)[data-v96hue="5"] { background: var(--hue-5-bg); color: var(--hue-5-fg); }
:is(span.logo, .v89-mono-gram, .bcn, .v94-ava)[data-v96hue="6"] { background: var(--hue-6-bg); color: var(--hue-6-fg); }
:is(span.logo, .v89-mono-gram, .bcn, .v94-ava)[data-v96hue="7"] { background: var(--hue-7-bg); color: var(--hue-7-fg); }
:is(span.logo, .v89-mono-gram, .bcn, .v94-ava)[data-v96hue="8"] { background: var(--hue-8-bg); color: var(--hue-8-fg); }
#view .v94-ava[data-v96hue] { border-radius: 18px; }

/* five segments: where a lot stands, on a narrow card */
.v96-mini { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin: var(--s-2) 0 var(--s-1); }
.v96-mini i { height: 4px; border-radius: 2px; background: var(--gray-200); }
.v96-mini i[data-state="done"] { background: var(--accent); }
.v96-mini i[data-state="now"] { background: linear-gradient(90deg, var(--accent) 50%, var(--gray-200) 50%); }
.v96-mini i[data-state="stop"] { background: var(--critical-dot); }

/* the board's card: a product tile beside the product */
#view a.bcard .v96-bc-h { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-1); }
#view a.bcard .v96-bc-h .bc-t { margin: 3px 0 0; }

/* the lot page: where the lot stands, then its certificate's results as printed */
#view .page > .v96-lotsteps { margin: 0 0 var(--s-5); padding: var(--s-4) var(--s-5) var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.v96-ls-h { display: flex; align-items: center; gap: var(--s-3); }
.v96-ls-t { display: flex; flex-direction: column; }
.v96-ls-t b { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-semibold); color: var(--gray-900); }
.v96-ls-t span { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v96-certres { display: flex; flex-direction: column; gap: var(--s-2); }
.v96-cap { font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); color: var(--gray-500); }
#view .verdict.vx .v96-certres { margin: var(--s-3) 0 var(--s-1); }

/* Certificates: each row a document */
#view #recTable .v96-cl { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
#view #recTable .v96-cl-t { display: flex; flex-direction: column; min-width: 0; }
#view #recTable .v96-cl-t > b { font-weight: var(--w-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view #recTable .v96-cl-t > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .v96-cl-t > span { font-size: var(--t-small-size); }   /* r94 X (A10-18): it inherited 12.5px */

@media (max-width: 699px) {
  #view .page > .v96-lotsteps { padding: var(--s-4); }
}

/* ---------- Today ---------- */
.v95-move-h { min-height: 22px; }
.v95-move-id { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); min-width: 0; }
.v95-move-idt { display: flex; flex-direction: column; min-width: 0; }
.v95-move-idt .v95-move-n { margin-top: 0; }
.v95-move-st { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s-3); }
.v95-move-st .v96-mini { margin: 0; }
.v95-move-st > span { font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-medium); color: var(--gray-500); }
.v95-move { box-shadow: var(--shadow-card), inset 3px 0 0 var(--move-rule, var(--gray-300)); border-color: var(--line-soft); border-radius: var(--r-card); }
.v95-notice { flex-direction: row; align-items: center; gap: var(--s-3); }
.v95-notice > .v96-tile { flex: none; }
.v95-notice-b { flex: 1 1 auto; }
.v95-notice-t { color: var(--gray-500); }
.v95-notice-t time::before { content: none; }
.v95-notice-t time { margin-left: var(--s-2); }
.v95-notice-a { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.v95-tl li a { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--s-3); align-items: center; }
.v95-tl li a > .v96-tile { grid-row: 1 / span 2; }
.v95-tl-t { grid-column: 2; } .v95-tl-d { grid-column: 2; } .v95-tl time { grid-column: 3; grid-row: 1 / span 2; }

/* ---------- Receive ---------- */
.v95-way > .v96-tile { margin-bottom: var(--s-1); }
.v96-rr .v96-dr { padding: var(--s-3) var(--s-4) var(--s-3) var(--s-5); }
.v96-rr .v96-dr-t { font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.v96-rr .v96-dr-s { font-size: var(--t-label-size); line-height: var(--t-label-lh); white-space: normal; }
.v96-rr .v96-dr-l { flex-direction: column; align-items: flex-end; }

/* ---------- Release ---------- */
.v95-pl > li[data-on] .v95-pn { background: var(--accent); border-color: var(--accent); color: #fff; }
.v95-pl > li[data-on] .v95-pn svg { width: 13px; height: 13px; stroke-width: 2.4; }
.v95-bt .v96-cl { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.v95-bt .v96-cl-t { display: flex; flex-direction: column; min-width: 0; }
.v95-bt .v96-cl-t > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v96-sup { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.v95-bt td.two > .v96-l { margin-bottom: 2px; }
/* the rail's recent reads: the label and File it go under the words, so the file name keeps the width */
.v96-rr .v96-dr { flex-wrap: wrap; row-gap: var(--s-2); }
.v96-rr .v96-dr-main { flex: 1 1 100%; }
.v96-rr .v96-dr-l, .v96-rr .v96-dr-a { flex-direction: row; align-items: center; margin-left: 48px; }
.v96-rr .v96-dr-a { margin-left: 0; }
.v96-rr .v96-dr-s { white-space: normal; }
.v95-bt td.two > .v96-l { display: inline-flex; width: auto; max-width: 100%; }
#view table td.two .v96-rel { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
#view table td.two .v96-rel-t { display: flex; flex-direction: column; min-width: 0; }

/* how other suppliers print the same tests (the cross-certificate library) */
.v96-speclib { margin-top: var(--s-2); border: 1px solid var(--line-soft); border-radius: 10px; background: var(--gray-0); }
.v96-speclib > summary { display: flex; align-items: baseline; gap: var(--s-2); padding: var(--s-2) var(--s-3); cursor: pointer; list-style: none; font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); color: var(--gray-900); }
.v96-speclib > summary::-webkit-details-marker { display: none; }
.v96-speclib > summary span { font-weight: var(--w-regular); color: var(--gray-500); font-size: var(--t-label-size); }
.v96-sl-note { margin: 0; padding: 0 var(--s-3) var(--s-2); font-size: var(--t-label-size); line-height: var(--t-label-lh); color: var(--gray-500); }
.v96-speclib ul { margin: 0; padding: 0; list-style: none; }
.v96-speclib li { display: grid; grid-template-columns: 140px minmax(0, 1fr); column-gap: var(--s-3); padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line-soft); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.v96-speclib li b { grid-row: 1 / span 2; font-weight: var(--w-medium); color: var(--gray-900); }
.v96-speclib li .here { color: var(--gray-700); }
.v96-speclib li .others { color: var(--gray-500); }
.v96-speclib li em { font-style: normal; color: var(--gray-400); }
@media (max-width: 699px) {
  .v95-notice { flex-wrap: wrap; align-items: flex-start; }
  .v95-notice-b { flex: 1 1 calc(100% - 52px); min-width: 0; }
  .v95-notice-a { flex: 1 1 100%; justify-content: flex-start; }
}

/* Vera's drafts: the supplier's avatar beside each */
#view .v89v-drafted .prep.v96-prep { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--s-3); align-items: start; }
#view .v89v-drafted .prep.v96-prep > .ph, #view .v89v-drafted .prep.v96-prep > .pf { grid-column: 2; }
#view .v89v-drafted .prep.v96-prep > .v96-prep-av { grid-column: 1; grid-row: 2; }
#view .v89v-drafted .prep.v96-prep > .pb { grid-column: 2; grid-row: 2; }
#view .v89v-drafted .prep .ph { margin-bottom: var(--s-1); }
#view td.v93-passcell .v96-cl { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
#view td.v93-passcell .v96-cl-t { display: flex; flex-direction: column; min-width: 0; }
#view table .v96-lr { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
#view table .v96-lr .v96-cl-t { display: flex; flex-direction: column; min-width: 0; }
#view table .v96-lr .v96-cl-t > :is(b, .l1) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Today's queue: status labels are short words now, so the status column gives its width to the action, which held "Request
   document" clipped at the card's edge */
#view .v95-today.v89t { --v89t-c-st: 152px; --v89t-c-ac: 200px; }
#view .v95-today table.v89t-q td.r.ac .btn { max-width: 100%; }

/* ---------- the work queue as grouped rows (the grouped-table pattern from the reference gallery) ----------
   Each group is a quiet band: a status ring in the group's colour, its name and count, its one-line meaning beside it; the rows
   under it breathe, without a rule under every row. */
#view .v89t-qcard .v89t-grp { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--s-3); row-gap: 2px; padding: var(--s-2) var(--s-5); background: var(--gray-25); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
#view .v89t-qcard .v89t-grp-h { gap: var(--s-2); }
#view .v89t-qcard .v89t-grp-h::before { content: ""; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--gray-400); flex: none; align-self: center; }
#view .v89t-qcard .v89t-grp[data-grp="now"] .v89t-grp-h::before { box-shadow: inset 0 0 0 2px var(--critical-dot); background: radial-gradient(circle, var(--critical-dot) 0 2.5px, transparent 3px); }
#view .v89t-qcard .v89t-grp[data-grp="review"] .v89t-grp-h::before { box-shadow: inset 0 0 0 2px var(--accent); background: conic-gradient(var(--accent) 0 50%, transparent 0); }
#view .v89t-qcard .v89t-grp[data-grp="wait"] .v89t-grp-h::before { box-shadow: inset 0 0 0 2px var(--gray-300); }
#view .v89t-qcard .v89t-grp h3 { font-size: var(--t-small-size); line-height: var(--t-small-lh); }
#view .v89t-qcard .v89t-grp p { font-size: var(--t-label-size); line-height: var(--t-label-lh); }
#view .v89t-qcard table.v89t-q tbody tr td { border-bottom: 0; }
#view .v89t-qcard table.v89t-q tbody tr + tr td { border-top: 1px solid var(--gray-50); }
#view .v89t-qcard table.v89t-q tbody tr:hover td { background: var(--gray-25); }

/* (v97 stop notice retired: the check and the next step say it) */
/* v97 (M3): the certificate's own decisions, said under the passport's open items in the Issue dialog */
.v84pv .v97also { margin: 8px 0 0; font-size: var(--t-small-size); line-height: 1.45; color: var(--ink-3, #5d656d); }

/* v97 (audit M10): the recall case page, the five steps and one aligned row of figures */
#view .v97-rcsteps { padding: 0 0 4px; }
#view .v97-rcsteps .v96-ph { padding: 16px 20px 4px; }
#view .v97-rc-st { padding: 12px 20px 4px; }
#view .v97-rc-next { margin: 8px 20px 16px; font-size: 13.5px; line-height: 1.5; color: var(--gray-700); }
#view .v97-rc-next b { color: var(--gray-900); font-weight: var(--w-semibold); }
#view .v97-rstats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 16px 0; background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--v96-shadow, 0 1px 2px rgba(16,24,40,.04)); }
#view .v97-rstats > .v96-stat { padding: 16px 20px; border-left: 1px solid var(--line-2, var(--line)); align-self: stretch; }
#view .v97-rstats > .v96-stat:first-child { border-left: 0; }
#view .v97-rstats > .v96-stat .s { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); margin: 0; padding: 0; }
@media (max-width: 899px) {
  #view .v97-rstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view .v97-rstats > .v96-stat { border-left: 0; border-top: 1px solid var(--line-2, var(--line)); }
  #view .v97-rstats > .v96-stat:nth-child(-n+2) { border-top: 0; }
  #view .v97-rstats > .v96-stat:nth-child(2n) { border-left: 1px solid var(--line-2, var(--line)); }
  #view .v97-rc-st .v96-steps:not(.is-v) { overflow-x: auto; }
}

/* v97 (audit minor): the phone's More sheet: each row is the sheet's width and its count sits at the right edge, as in the rail */
@media (max-width: 899px) {
  .shell.v84navopen #nav .navgroup > .navitems { flex: 1 1 auto; min-width: 0; align-items: stretch; }
  .shell.v84navopen #nav .navitems > a { width: 100%; box-sizing: border-box; }
  .shell.v84navopen #nav .navitems > a .count { margin-left: auto; min-width: 20px; text-align: right; }
}
/* v97 (audit minor): Receive's intake address is one token on one line, cut with its full text on hover */
#view .v95-way .v95-addr { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* v97 (audit minor): Today's move cards: the lot's five steps by name (the kit stepper, compact), the supplier's avatar, and a
   title that takes two lines before it is cut */
.v95-move-idt .v95-move-n { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: clip; }
.v95-move-idt .v95-move-s { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px; }
.v95-move-idt .v95-move-s > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v95-move-idt .v95-move-s .v96-av { --s: 20px; font-size: var(--t-label-size); }   /* r94 X (A10-18) */
.v97-move-st .v96-steps { margin: 0 -4px; }
.v97-move-st .v96-steps .v96-st-b b { font-size: var(--t-label-size); line-height: 14px; font-weight: var(--w-medium); }   /* r94 X (A10-18) */
.v97-move-st > span { margin-top: 6px; }

/* v97 (audit minor): Lately ran six rows beside two short cards, leaving large empty areas under Inspection and Suppliers. Lately
   holds the left column for both rows; Inspection and Suppliers stack on the right. */
@media (min-width: 1200px) {
  #view .v95-today .v95-trio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; }
  #view .v95-today .v95-trio > :first-child { grid-row: span 2; }
}
#view .v95-rc-steps .v97-rc-st { padding: 8px 0 0; }
#view .v95-rc-steps .v97-rc-next { margin: 10px 0 0; }
/* v97 (M18): Passports by lot, the state label is its own size, its icon spaced from the word */
#view .v95-bt td.two > .v96-l:first-child { display: inline-flex; width: auto; max-width: 100%; }
/* v97 (Affinity gap): the unit's journey under the empty Shipments state */
#view .v89r-emptycard .v97-shipflow { margin: 0 auto; max-width: 760px; padding: 4px 24px 28px; }
#view .v89r-emptycard .v97-shipflow .lab { margin: 0 0 12px; text-align: center; font-size: var(--t-label-size); line-height: var(--t-label-lh); color: var(--gray-500); font-weight: var(--w-medium); }

/* v97 (audit minor): Lot chains' list scrolls inside its card ("Purchased lots 12", seven in view) with no visible sign of it.
   It keeps a quiet scrollbar that is always shown. */
#view .tr-rail .tablewrap { overflow-y: auto; scrollbar-gutter: stable; }
#view .tr-rail .tablewrap::-webkit-scrollbar { width: 8px; }
#view .tr-rail .tablewrap::-webkit-scrollbar-track { background: transparent; }
#view .tr-rail .tablewrap::-webkit-scrollbar-thumb { background: var(--gray-200, #e3e6ea); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }

/* r91 (K, SET-1): the Plan page */
.v96-plan .vk-kpis { margin: 0 0 var(--s-5); }
.v96-plan-p { margin: 0 0 var(--s-2); font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-500); }
.v96-plan .v96-plan-for { color: var(--gray-500); }

/* r95 (F-INTAKE): Ask a person, the month's reads, what waits to be read, the email switches and the camera button.
   Built on the workspace tokens so both themes hold. */
.r95ask{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;margin:0 6px;border:1px solid var(--line);border-radius:999px;background:var(--card,#fff);color:var(--ink);font:inherit;font-size:13px;font-weight:550;cursor:pointer;white-space:nowrap;flex:none}
.r95ask:hover{border-color:var(--rule)}
.r95ask .i{width:15px;height:15px}
.r95asknav{display:flex;align-items:center;gap:8px;width:calc(100% - 16px);margin:6px 8px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink-2);font:inherit;font-size:13px;cursor:pointer;text-align:left}
.r95asknav:hover{background:var(--grey-bg)}
.r95asknav .i{width:15px;height:15px}
@media (max-width:699px){header.top .r95ask{padding:0 8px;margin:0 2px;gap:0;width:32px;justify-content:center}header.top .r95ask span{display:none !important}.r95asknav{display:none !important}}
.r95allow{display:flex;align-items:flex-start;gap:10px;margin:0 0 16px;padding:12px 14px;border:1px solid var(--amber-line);border-radius:12px;background:var(--amber-bg);color:var(--ink);font-size:13.5px;line-height:1.5}
/* r96 (F-METER, owner decision 4): reaching or passing the plan's lots is said in the same calm tone as 80 percent; nothing stopped */
.r95allow>.i{flex:none;width:16px;height:16px;margin-top:2px}
.r95allow>div{flex:1 1 auto;min-width:0}
.r95allow .link{font-weight:600}
.r95x{flex:none;border:0;background:transparent;color:var(--muted);cursor:pointer;padding:2px;line-height:0}
.r95x .i{width:14px;height:14px}
.r95wait{margin:0 0 16px}
.r95sw{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);white-space:nowrap}
.r95sw input{width:16px;height:16px}
.r95cam{margin:6px 0 0}
.r95cam .i{width:14px;height:14px}
/* r95 (F-INTAKE, S503A-23): a read-only seat sees no control it cannot use. The server refuses them either way; this stops the
   seat filling a form only to be told no. Views (a file, an example read, the briefing, Ask a person) stay. */
html[data-r95ro] #view [data-dialog]:not([data-dialog="askPerson"]):not([data-dialog="exampleRead"]):not([data-dialog="veraPanel"]):not([data-dialog="endpointStatus"]):not([data-dialog="batchDetail"]):not([data-dialog="sterileOpen"]):not([data-dialog="v95file"]):not([data-dialog="patientFind"]):not([data-dialog="pfLookup"]),
html[data-r95ro] #view form[data-form],
html[data-r95ro] #view a.btn[href="#/receive"], html[data-r95ro] #view [data-v94pick],
html[data-r95ro] #view [data-r95buy], html[data-r95ro] #view [data-r95portal], html[data-r95ro] #view [data-r95readnow], html[data-r95ro] #view [data-r95receipt] { display: none !important; }
.r95ro{margin:0 0 16px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--grey-bg);font-size:13px;line-height:1.5;color:var(--ink-2)}
.r95receipt{margin:0 0 16px}
.r95correct{margin:10px 0 0;font-size:13px;color:var(--ink-2)}
.r95correct .link{font-size:13px}
html[data-r95ro] #view [data-r95="correct"]{display:none !important}