/* next-r92-e.css (r92, builder E): batch release, the pack check and orders in. Kit tokens only (KIT.md section 2); no kit class
   is restyled here. Phone rules are at the end, under 700px. */

.r92e-page .vk-kpis { margin: var(--s-4) 0; }
.r92e-card { margin: 0 0 var(--s-4); overflow: hidden; }
.r92e-card > .vk-cap { padding: var(--s-3) var(--s-4) 0; }
.r92e-t td .l1 { display: block; }
.r92e-t td .l2 { display: block; color: var(--k-mute); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.r92e-rowlink { display: block; color: inherit; text-decoration: none; }
.r92e-rowlink:hover .l1 { color: var(--accent); }
.r92e-orders tbody tr { cursor: pointer; }
.r92e-orders tbody tr:hover td { background: var(--k-hover); }
.r92e-fine { margin: var(--s-2) 0 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--k-mute); }
.r92e-off { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 0; font-size: var(--t-small-size); color: var(--k-mute); }
.r92e-off .i { width: 14px; height: 14px; flex: none; }
.v89-titlerow > .vk-hsub .vk-id { margin-right: var(--s-2); color: var(--k-mute); }

/* ---------- the release: the checks before release ---------- */
.r92e-rel .v89-titlerow > .vk-hsub { display: inline-flex; align-items: baseline; gap: var(--s-2); }
.r92e-checks { display: flex; flex-direction: column; }
.r92e-check { border-top: 1px solid var(--k-line); }
.r92e-check:first-child { border-top: 0; }
.r92e-check > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); cursor: pointer; list-style: none; }
.r92e-check > summary::-webkit-details-marker { display: none; }
.r92e-check > summary:hover { background: var(--k-hover); }
.r92e-ct { min-width: 0; display: flex; flex-direction: column; }
.r92e-ct > b { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-medium); color: var(--gray-900); }
.r92e-ct > small { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--k-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r92e-ev { padding: 0 var(--s-4) var(--s-4) calc(var(--s-4) + 36px + var(--s-3)); display: flex; flex-direction: column; gap: var(--s-3); }
.r92e-ev .vk-rows { margin: 0; }
.r92e-docwrap .vk-doc { margin: 0; }
.r92e-mini td .l2 { display: block; color: var(--k-mute); font-size: var(--t-small-size); }
.r92e-conf { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-ctl); background: var(--info-bg); color: var(--info-fg); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.r92e-conf .i { width: 14px; height: 14px; flex: none; margin-top: 2px; }

/* ---------- the release: the lit card ---------- */
.r92e-signed { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-2) 0 0; }
.r92e-signed > div { display: flex; flex-direction: column; min-width: 0; }
.r92e-signed b { font-size: 17px; line-height: 24px; font-weight: var(--w-semibold); color: var(--gray-900); letter-spacing: -.01em; }
.r92e-signed small { font-size: var(--t-small-size); color: var(--k-mute); }
.r92e-why { margin: var(--s-3) 0 0; padding: 0 0 0 var(--s-3); border-left: 2px solid var(--hue-indigo-bar, var(--accent)); font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-700); }
.r92e-pass { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) calc(-1 * var(--s-4)) 0; padding: var(--s-3) var(--s-4) 0; border-top: 1px solid var(--k-line); font-size: var(--t-body-size); color: var(--gray-900); }
.r92e-pass > span { flex: 1 1 auto; min-width: 0; }

/* ---------- the dialogs ---------- */
.r92e-dlg { width: min(640px, 100%); }
.r92e-confirm { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-ctl); background: var(--attention-bg); margin-bottom: var(--s-3); }
.r92e-confirm > b { font-size: var(--t-small-size); color: var(--attention-fg); }
.r92e-confirm label { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-900); }
.r92e-charge { margin: var(--s-2) 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-ctl); background: var(--k-track); font-size: var(--t-small-size); color: var(--gray-700); }
.r92e-sig { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--k-line); }

/* ---------- the pack check ---------- */
.r92e-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--s-4); align-items: start; }
.r92e-grid.is-wide { grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); margin-top: var(--s-4); }
.r92e-main { min-width: 0; }
.r92e-side { position: sticky; top: var(--s-4); min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.r92e-side .tablewrap { overflow: visible; margin: var(--s-2) 0 0; }
@media (max-width: 1099px) { .r92e-grid, .r92e-grid.is-wide { grid-template-columns: minmax(0, 1fr); } .r92e-side { position: static; order: -1; } }
.r92e-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s-3); }
.r92e-unit { display: flex; flex-direction: column; gap: 6px; padding: var(--s-3); border: 1px solid var(--k-line); border-radius: var(--r-card); background: var(--gray-0); min-width: 0; }
.r92e-unit > b { font-size: var(--t-small-size); color: var(--gray-700); overflow-wrap: anywhere; }
.r92e-unit > small { font-size: var(--t-small-size); color: var(--k-mute); }
.r92e-unit > small.bad { color: var(--critical-fg); font-weight: var(--w-medium); }
.r92e-unit[data-state="ok"] > b { color: var(--gray-500, var(--k-mute)); }
.r92e-unit:not([data-state="ok"]):not([data-state="bench"]) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.r92e-unit:not([data-state="ok"]):not([data-state="bench"]) > b { color: var(--gray-900); }
.r92e-cmp { width: 100%; border-collapse: collapse; font-size: var(--t-body-size); table-layout: fixed; }
.r92e-cmp th:first-child { width: 38%; }
.r92e-cmp td { overflow-wrap: anywhere; font-family: var(--font-id); font-size: 12.5px; }
.r92e-cmp th, .r92e-cmp td { padding: var(--s-2) var(--s-3); text-align: left; border-top: 1px solid var(--k-line); }
.r92e-cmp thead th { border-top: 0; font-size: var(--t-small-size); font-weight: var(--w-medium); color: var(--k-mute); }
.r92e-cmp tbody th { font-weight: var(--w-regular); color: var(--gray-900); }
.r92e-cmp td.ok { background: var(--positive-bg); color: var(--positive-fg); }
.r92e-cmp td.bad { background: var(--critical-bg); color: var(--critical-fg); }
.r92e-pick { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0 var(--s-4) var(--s-4); }
.r92e-pick .btn.on { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }

@media (max-width: 699px) {
  .r92e-check > summary { grid-template-columns: auto minmax(0, 1fr); }
  .r92e-check > summary > .vk-chip { grid-column: 2; justify-self: start; }
  .r92e-ev { padding: 0 var(--s-3) var(--s-3); }
  .r92e-units { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r92e-cmp th, .r92e-cmp td { padding: 6px var(--s-2); font-size: var(--t-small-size); }
  .r92e-orders td:nth-child(3), .r92e-orders th:nth-child(3) { display: none; }
  .v89-titlerow > .vk-hsub { white-space: normal; }
}

/* ======================= r94 X (wave 2, A10): product consistency, look and feel =======================
   This file loads last, so these rules settle what earlier layers left clipped. */
/* A10-19: a status chip is inline-flex, where text-overflow cannot draw an ellipsis, so a long state ("Held, maker not named", "No
   recall recorded") was cut mid-word at the cell's edge. In a table cell a chip wraps onto a second line instead. */
#view td .chip, #view td .vk-chip, #view td .tag { white-space: normal; max-width: none; height: auto; min-height: 22px; line-height: 16px; padding-top: 2px; padding-bottom: 2px; text-align: left; overflow: visible; }
#view table.v89t-q td.st { min-width: 150px; }
/* Custody records: the batch column took the narrowest share and cut "Cyanocobalamin 1,000 mcg/mL" to "Cyanocobala…" while the
   count columns stood half empty */
#view .r91c-custrec .r91c-t { table-layout: auto; }
#view .r91c-custrec .r91c-t td:first-child, #view .r91c-custrec .r91c-t th:first-child { width: 28%; min-width: 200px; }
#view .r91c-custrec .r91c-t td:first-child .l1, #view .r91c-custrec .r91c-t td:first-child .l2 { white-space: normal; overflow: visible; text-overflow: clip; word-break: normal; overflow-wrap: normal; }
/* Inspection and Cato on a phone: the request's state chip sat beside its action and was cut ("2 missin", "Shown in"); it takes
   its own line above the action */
@media (max-width: 699px) {
  #view .v96-dr-a, #view .v95i-acts { flex-wrap: wrap; row-gap: 6px; }
  #view .v96-dr-a .chip, #view .v96-dr-a .vk-chip, #view .v95i-acts .chip, #view .v95i-acts .vk-chip { white-space: nowrap; max-width: none; overflow: visible; flex: none; }
}
/* A10-13: the card an exceptions row opens is marked for a moment */
#view section.card.v88-flash { box-shadow: 0 0 0 2px var(--accent), var(--v84-shadow, none); transition: box-shadow .2s ease; }
/* A10-20: the passport's header strip on a phone squeezed the product and order to "Ket…" and "Orde…", and on a recalled lot the
   longer chip pushed the passport ID past the screen (the page drew 397 px wide on a 375 px phone). Below 700 px the strip stacks:
   the icon with the product and order, then the state, then the ID, which wraps inside the card. */
@media (max-width: 699px) {
  #view .vk-strip { flex-wrap: wrap; row-gap: 8px; }
  #view .vk-strip > div { flex: 1 1 calc(100% - 56px); }
  #view .vk-strip b, #view .vk-strip small { white-space: normal; }
  #view .vk-strip .r91c-pid { margin-left: 0; white-space: normal; overflow-wrap: anywhere; min-width: 0; }
}