/* v89 DESIGN ROUND: Inspection, rebuilt as the inspector's request list (DESIGN-V89.md section 7). Tokens only.
   The shared parts (header, card, table, chip, button, tabs, note, dialog) come from next-v89.css; this file lays out the
   page: the next-inspection card, the readiness bar, the request list's columns and area rows, the hand-over cards, the
   rehearsal, and the Ask Cato panel. Everything is scoped to .v89i (the page) or .v89i-dlg / .v89i-cato (its dialogs). */

/* ---------- page rhythm: sections 24 apart ---------- */
#view .page.v89i > .v89-head { margin-bottom: var(--s-4); }
/* v90: the page's children keep an entrance transform, so each is its own stacking context and the header's More menu opened
   under the tabs and the first card; the header sits above them (Inspection, Facility records and 503A copies) */
#view .page.v89i > .phead, #view .page.v89p > .phead, #view .page.v89c > .phead { position: relative; z-index: 20; }
#view .page.v89i > .v89-tabs { margin-bottom: var(--s-6); }
#view .page.v89i > * + * { margin-top: var(--s-6); }
#view .page.v89i > .v89-tabs + *, #view .page.v89i > .v89-head + .v89-tabs { margin-top: 0; }
#view .page.v89i > .v89-note + * { margin-top: var(--s-4); }
.v89i .v89-head .acts { align-items: center; }
.v89i-sec { margin: var(--s-8) 0 0; font-size: var(--t-heading-size); line-height: var(--t-heading-lh); font-weight: var(--w-semibold); letter-spacing: var(--t-heading-track); color: var(--gray-900); }
#view .page.v89i > .v89i-sec + * { margin-top: var(--s-3); }
.v89i p { margin: 0; }
.v89i .v89-id { color: var(--gray-900); text-decoration: none; }
.v89i a.v89-id:hover, .v89i a.v89i-sname:hover { color: var(--accent); }
.v89i-sname { color: var(--gray-900); font-weight: var(--w-medium); text-decoration: none; }
.v89i-muted { color: var(--gray-500); }
.v89i-ref { display: block; margin-top: 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); font-weight: var(--w-regular); }
.v89i-ref a { color: var(--accent); font-weight: var(--w-medium); text-decoration: none; }
.v89i .linkbtn { color: var(--accent); font-weight: var(--w-medium); font-size: inherit; line-height: inherit; text-decoration: none; cursor: pointer; }
.v89i .linkbtn:hover { color: var(--accent-hover); }
.v89i-help { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }

/* ---------- the Hand over menu under the header button ---------- */
.v89i-menu { position: relative; }
.v89i-menu > summary { list-style: none; }
.v89i-menu > summary::-webkit-details-marker { display: none; }
.v89i-menu > summary svg.i { width: 16px; height: 16px; transform: rotate(90deg); color: var(--gray-500); }
#view .v89i-menu .v84menu { position: absolute; right: 0; top: calc(100% + var(--s-1)); z-index: 60; display: flex; flex-direction: column; min-width: 232px; }
/* v90: Ask Cato under More, with one line saying who he is */
#view .v89i-menu .v84menu { width: 288px; }
#view .v89i-menu .v84menu .btn.mi.v89i-mi2 { height: auto; min-height: 32px; align-items: flex-start; padding: var(--s-2); margin-top: var(--s-1); border-top: 1px solid var(--gray-100); border-radius: 0 0 6px 6px; white-space: normal; text-align: left; }
#view .v89i-menu .v84menu .btn.mi.v89i-mi2 svg.i { margin-top: 2px; }
.v89i-mi { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.v89i-mi > span:first-child { font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-900); }
.v89i-mi-sub { font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-regular); color: var(--gray-500); }

/* ---------- 1. the next inspection ---------- */
.v89i-next .card-b { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr) auto; align-items: center; gap: var(--s-6); }
.v89i-next .v89i-next-none { display: flex; align-items: center; gap: var(--s-6); }
.v89i-next-none > div { flex: 1 1 auto; min-width: 0; }
.v89i-next-none h2 { margin: 0 0 var(--s-1); }
.v89i-next-none p { max-width: 72ch; color: var(--gray-700); }
.v89i-next-none .btn { flex: none; }
.v89i-when { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.v89i-eyebrow { font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-medium); color: var(--gray-500); }
.v89i-big { font-size: var(--t-title-size); line-height: var(--t-title-lh); font-weight: var(--w-semibold); letter-spacing: var(--t-title-track); color: var(--gray-900); font-variant-numeric: tabular-nums; }
.v89i-whenl { font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-700); }
.v89i-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); padding-left: var(--s-6); border-left: 1px solid var(--gray-200); min-width: 0; }
.v89i-facts > div { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
.v89i-facts b { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-semibold); color: var(--gray-900); }
.v89i-facts span { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v89i-facts .linkbtn { font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.v89i-next-acts { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); }

/* ---------- 2. one readiness bar, one denominator; its counts are the list's filters ---------- */
.v89i-ready { display: flex; flex-direction: column; gap: var(--s-3); }
.v89i-ready-l { font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-700); }
.v89i-ready-s { margin-top: calc(-1 * var(--s-2)); font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); max-width: 88ch; }
.v89i-bar { display: flex; gap: 2px; height: 8px; border-radius: var(--r-chip); overflow: hidden; background: var(--gray-100); }
.v89i-bar > i { display: block; min-width: var(--s-1); flex-basis: 0; }
.v89i-bar > i[data-k="onfile"], .v89i-dot[data-k="onfile"] { background: var(--positive-dot); }
.v89i-bar > i[data-k="missing"], .v89i-dot[data-k="missing"] { background: var(--attention-dot); }
.v89i-bar > i[data-k="confirmed"] { background: var(--positive-bd); }
.v89i-bar > i[data-k="yours"], .v89i-dot[data-k="yours"] { background: var(--gray-300); }
.v89i-bar > i[data-k="empty"], .v89i-dot[data-k="empty"] { background: var(--gray-200); }
.v89i-bar > i[data-k="person"], .v89i-dot[data-k="person"] { background: var(--gray-400); }
.v89i-bar > i[data-k="na"], .v89i-dot[data-k="na"] { background: transparent; box-shadow: inset 0 0 0 1px var(--gray-300); }
.v89i-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.v89i-filters button.chip { color: var(--gray-700); }
.v89i-filters button.chip[aria-pressed="true"] { color: var(--accent); }

/* ---------- 3. what the inspector will ask for ---------- */
.v89i-list-card { overflow: visible; }
.v89i-list-top { display: flex; flex-direction: column; gap: var(--s-3); padding-bottom: var(--s-4); }
.v89i-list-foot { border-top: 1px solid var(--gray-200); padding-top: var(--s-4); padding-bottom: var(--s-4); }
.v89i-live { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-ctl); background: var(--positive-bg); color: var(--positive-fg); font-size: var(--t-body-size); line-height: var(--t-body-lh); }
.v89i-live > svg.i { width: 16px; height: 16px; flex: none; }
.v89i-live > span { flex: 1 1 auto; min-width: 0; }
.v89i-live .linkbtn, .v89i-live .btn { flex: none; }
.v89i-live.off { background: var(--gray-50); color: var(--gray-700); }
.v89i-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.v89i-tablewrap { overflow-x: auto; border-top: 1px solid var(--gray-200); }
.v89i-list { table-layout: fixed; width: 100%; }
/* v90: four columns until something is assigned (Who and By were empty on every row); the action column has a header */
.v89i-list thead th:nth-child(1) { width: auto; }
.v89i-list thead th:nth-child(2) { width: 184px; }
.v89i-list thead th:nth-child(3) { width: 26%; }
.v89i-list thead th:last-child { width: 240px; }
.v89i-list.who thead th:nth-child(3) { width: 22%; }
.v89i-list.who thead th:nth-child(4) { width: 136px; }
.v89i-list.who thead th:nth-child(5) { width: 72px; }
.v89i-list.who thead th:last-child { width: 196px; }
.v89i-list thead th.r { text-align: right; }
.v89i-list td { vertical-align: top; white-space: normal; }
/* nothing in a row is cut short: the chip has the room it needs, and the text wraps */
.v89i-list td.v89i-c-st .chip { overflow: visible; text-overflow: clip; }
.v89i-list td.v89i-c-hand { overflow-wrap: anywhere; }
.v89i-list td.v89i-c-st, .v89i-list td.v89i-c-act, .v89i-list td.v89i-c-by, .v89i-list td.v89i-c-who { padding-top: var(--s-3); }
.v89i-list td.v89i-c-act { text-align: right; white-space: normal; }
/* the row's action, and Assign under it while Who and By are hidden: one right-aligned stack on every row */
.v89i-acts { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1); margin: calc(-1 * var(--s-1)) 0; }
.v89i-acts > .btn { margin: 0; max-width: 100%; }
.v89i-list td.v89i-c-who .btn { margin-top: calc(-1 * var(--s-1)); margin-bottom: calc(-1 * var(--s-1)); }
.v89i-list td.v89i-c-req { padding-left: var(--s-3); }
.v89i-tog, .v89i-tog-sp { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0 var(--s-1) 0 0; float: left; border-radius: var(--r-ctl); color: var(--gray-500); cursor: pointer; }
.v89i-tog:hover { background: var(--gray-100); color: var(--gray-900); }
.v89i-tog svg.i { width: 16px; height: 16px; transition: transform var(--d-hover) var(--ease); }
.v89i-tog[aria-expanded="true"] svg.i { transform: rotate(90deg); }
.v89i-c-req > div, .v89i-list td.v89i-c-req > div { overflow: hidden; }
.v89i-req { display: block; font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-medium); color: var(--gray-900); }
.v89i-c-hand a { color: var(--accent); font-weight: var(--w-medium); text-decoration: none; }
.v89i-c-hand a:hover { color: var(--accent-hover); }
.v89i-good { display: block; white-space: normal; color: var(--gray-700); }
.v89i-need { color: var(--gray-700); }
.v89i-who { display: block; font-weight: var(--w-medium); color: var(--gray-900); white-space: normal; }
.v89i-c-who .btn { margin-left: calc(-1 * var(--s-2)); max-width: calc(100% + var(--s-2)); }
.v89i-whob { justify-content: flex-start; overflow: hidden; text-overflow: ellipsis; }
.v89i-c-who .v89i-who + .btn { margin-top: var(--s-1); }
.v89i-date { font-variant-numeric: tabular-nums; color: var(--gray-900); white-space: nowrap; }
.v89i-date.late { color: var(--critical-fg); font-weight: var(--w-medium); }
.v89i-list .v89-check { white-space: nowrap; }
/* area rows: the five areas the inspector link uses, in its order */
.v89i-list tr.v89i-area th { height: auto; padding: var(--s-5) var(--s-4) var(--s-2); background: var(--gray-0); border-bottom: 1px solid var(--gray-200); white-space: normal; }
.v89i-list tbody tr.v89i-area:first-child th { padding-top: var(--s-4); }
.v89i-list tr.v89i-area th > span:first-child { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-semibold); color: var(--gray-900); }
.v89i-area-n { margin-left: var(--s-3); font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-regular); color: var(--gray-500); }
.v89i-list tr.v89i-area:hover th { background: var(--gray-0); }
.v89i-list tr.v89i-none td { height: auto; padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-3) + 24px); color: var(--gray-500); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.v89i-list tr.v89i-none:hover td { background: none; }
/* an opened row lists the exact lots or suppliers, each with its own action */
.v89i-list tr.v89i-row.open td { border-bottom-color: transparent; }
.v89i-list tr.v89i-sub td { background: var(--gray-25); }
.v89i-list tr.v89i-sub td.v89i-c-req { padding-left: calc(var(--s-3) + 24px); }
.v89i-list tr.v89i-sub:hover td { background: var(--gray-50); }
.v89i-sl { display: block; white-space: normal; }
.v89i a.v89i-inl { color: var(--accent); font-weight: var(--w-medium); text-decoration: none; }
.v89i a.v89i-inl:hover { color: var(--accent-hover); }
.v89i-area-n + .v89i-area-n { margin-left: var(--s-2); }
.v89i-sl .v89i-sname:not(a) { font-weight: var(--w-regular); color: var(--gray-700); margin-left: var(--s-1); }
.v89i-list tr.v89i-detail td { padding: var(--s-2) var(--s-4) var(--s-4) calc(var(--s-3) + 24px); }
.v89i-detail-b { display: flex; flex-direction: column; gap: var(--s-2); max-width: 88ch; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-700); }
.v89i-detail-b b { font-weight: var(--w-medium); color: var(--gray-900); }

/* ---------- hand it to the inspector: three cards ---------- */
.v89i-hand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); align-items: stretch; }
.v89i-hand > .card { display: flex; flex-direction: column; margin: 0; }
.v89i-hand > .card > .card-b { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); flex: 1 1 auto; justify-content: flex-end; }
.v89i-links { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; }
.v89i-links li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--gray-100); }
.v89i-links li:first-child { border-top: 1px solid var(--gray-100); }
.v89i-links li > div:first-child { flex: 1 1 auto; min-width: 0; }
.v89i-li-acts { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

/* ---------- rehearse it ---------- */
.v89i-rehearse .card-b { display: flex; align-items: center; gap: var(--s-6); }
.v89i-rehearse .card-b > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.v89i-rehearse h2 { margin: 0; }
.v89i-rehearse p { color: var(--gray-700); }
.v89i-rehearse .btn { flex: none; }
.v89i-run .card-b { display: flex; flex-direction: column; gap: 0; }
.v89i-step { padding: var(--s-3) 0; border-top: 1px solid var(--gray-100); }
.v89i-step:first-child { border-top: 0; padding-top: 0; }
.v89i-step-h { display: flex; align-items: flex-start; gap: var(--s-4); }
.v89i-step-h > div:first-child { flex: 1 1 auto; min-width: 0; }
.v89i-step-h > div:last-child { flex: none; }
.v89i-step-h b { font-weight: var(--w-medium); color: var(--gray-900); }
.v89i-found { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-700); }
.v89i-found li { padding-left: var(--s-4); position: relative; }
.v89i-found li::before { content: ""; position: absolute; left: var(--s-1); top: var(--s-2); width: var(--s-1); height: var(--s-1); border-radius: 50%; background: var(--gray-400); }
.v89i-step > .v89i-muted { margin-top: var(--s-1); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.v89i-run .v89i-run-f { flex-direction: row; align-items: center; gap: var(--s-4); border-top: 1px solid var(--gray-200); padding-top: var(--s-4); }
.v89i-run .v89i-run-f > p { flex: 1 1 auto; color: var(--gray-700); }

/* ---------- dialogs ---------- */
.v89i-dlg { width: min(560px, 100%); }
.v89i-dlg .db > p.v89i-q { font-weight: var(--w-medium); color: var(--gray-900); }
.v89i-dlist { margin: 0 0 var(--s-4); padding-left: var(--s-5); font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-700); }
.v89i-dlg .fg label.v89i-check { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-regular); color: var(--gray-900); cursor: pointer; }
.v89i-dlg .fg label.v89i-check input { margin: var(--s-1) 0 0; flex: none; }
.v89i-dlg .fg.full input[name="owner"] { margin-top: var(--s-2); }
.v89i-dlg .v89i-help { margin: var(--s-3) 0 0; }
.v89i-dlg .v88copy { display: flex; gap: var(--s-2); }
.v89i-dlg .v88copy input { flex: 1 1 auto; min-width: 0; }
/* Ask Cato, as a side panel */
.v89i-cato { width: min(480px, 100%); display: flex; flex-direction: column; }
.v89i-cato > header { display: flex; flex-direction: column; gap: var(--s-1); }
.v89i-cato > header .v89i-help { margin: 0; }
.v89i-cato .db { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--s-3); overflow: auto; }
.v89i-cato .asklog { flex: 1 1 auto; }
.v89i-cato > footer .v89i-help { flex: 1 1 auto; }

/* ---------- phone: rows become stacked cards; nothing scrolls sideways ---------- */
@media (max-width: 1100px) {
  .v89i-next .card-b { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .v89i-facts { padding-left: 0; border-left: 0; padding-top: var(--s-4); border-top: 1px solid var(--gray-200); }
  .v89i-next-acts { flex-direction: row; flex-wrap: wrap; }
  .v89i-hand { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .v89i-next .v89i-next-none, .v89i-rehearse .card-b, .v89i-run .v89i-run-f { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .v89i-next-none .btn, .v89i-rehearse .btn { align-self: flex-start; }
  .v89i-facts { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .v89i-live { flex-direction: column; align-items: flex-start; }
  .v89i-legend { flex-direction: column; gap: var(--s-1); }
  .v89i-tablewrap { overflow: visible; }
  .v89i-list, .v89i-list tbody, .v89i-list tr, .v89i-list td, .v89i-list th { display: block; width: auto; }
  .v89i-list thead { display: none; }
  .v89i-list tr.v89i-row, .v89i-list tr.v89i-sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--gray-100); }
  .v89i-list tr.v89i-row.open { border-bottom-color: transparent; }
  .v89i-list tr.v89i-sub { background: var(--gray-25); padding-left: calc(var(--s-4) + 24px); }
  .v89i-list tr.v89i-row td, .v89i-list tr.v89i-sub td { height: auto; padding: 0; border: 0; background: none; }
  .v89i-list tr.v89i-sub td.v89i-c-req { padding-left: 0; }
  .v89i-list td.v89i-c-req { grid-column: 1 / -1; padding-left: 0; }
  .v89i-list td.v89i-c-st { grid-column: 1; }
  .v89i-list td.v89i-c-hand { grid-column: 1 / -1; }
  .v89i-list td.v89i-c-hand:empty, .v89i-list td.v89i-c-who:empty, .v89i-list td.v89i-c-by:empty, .v89i-list td.v89i-c-act:empty { display: none; }
  .v89i-list td.v89i-c-who { grid-column: 1; display: flex; align-items: center; gap: var(--s-2); }
  .v89i-list td.v89i-c-by { grid-column: 2; text-align: right; }
  .v89i-list td.v89i-c-act { grid-column: 1 / -1; text-align: left; }
  .v89i-list tr.v89i-area th { padding: var(--s-4) var(--s-4) var(--s-2); }
  .v89i-area-n { display: block; margin: 0; }
  .v89i-list tr.v89i-none td { padding: var(--s-2) var(--s-4) var(--s-3); }
  .v89i-list tr.v89i-detail td { padding: var(--s-2) var(--s-4) var(--s-4) calc(var(--s-4) + 24px); }
  .v89i-good { white-space: normal; }
  #view .v89i-menu .v84menu { right: 0; left: auto; width: min(288px, calc(100vw - 32px)); }
  .v89i-acts { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--s-2); margin: 0 0 0 calc(-1 * var(--s-2)); }
  .v89i-area-n + .v89i-area-n { margin-left: 0; }
  /* v90 (reviewer D): the filters stay one row that scrolls sideways, and a row that scrolls fades at the edge with more */
  .v89i-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--card-pad)); padding: 0 var(--card-pad); }
  .v89i-filters::-webkit-scrollbar { display: none; }
  .v89i-filters > .chip, .v89i-filters > button { flex: none; }
}
/* the edge fade, set by V.v89iFade when a row overflows (any width) */
:is(.v89i, .v89p, .v89c) [data-v89fade="right"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
:is(.v89i, .v89p, .v89c) [data-v89fade="left"] { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
:is(.v89i, .v89p, .v89c) [data-v89fade="both"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

/* ---------- v90: Facility records (#/practice), scoped to .v89p (next-practice.js draws it) ---------- */
.v89p .v89p-lead .card-b { display: flex; flex-direction: column; gap: var(--s-4); }
.v89p .v89p-fda { margin: 0; max-width: none; font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-700); }
.v89p-three { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.v89p-three li { display: flex; flex-direction: column; gap: var(--s-1); margin: 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--gray-200); border-radius: var(--r-ctl); background: var(--gray-25); }
.v89p-three b { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-medium); color: var(--gray-900); }
.v89p-three span { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v89p-acts, .v89p-formacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.v89p-formacts { margin-top: var(--s-4); }
.v89p .v89p-help { margin: var(--s-3) 0 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v89p-ans { display: flex; align-items: center; gap: var(--s-4); }
.v89p-ans > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.v89p-ans b { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-medium); color: var(--gray-900); }
.v89p-ans span { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v89p-ans .btn { flex: none; }
.v89p .v89p-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-top: 0; }
.v89p .v89p-note { border-top: 1px solid var(--gray-200); padding-top: var(--s-3); font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
/* the patient-data line (next-v82.js) is a quiet footnote under the page, not a card above the records */
#view .page.v89p > .v83priv.v89p-priv { margin: var(--s-6) 0 0; padding: 0; border: 0; background: none; box-shadow: none; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
#view .page.v89p > .v83priv.v89p-priv svg.i { width: 16px; height: 16px; margin-top: 2px; }
@media (max-width: 699px) {
  .v89p-three { grid-template-columns: minmax(0, 1fr); }
  .v89p .v89p-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .v89p .v89p-chips::-webkit-scrollbar { display: none; }
  .v89p .v89p-chips > .chip { flex: none; }
  .v89p-ans { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
}

/* ---------- v90: 503A copies (#/copies), scoped to .v89c (next-copy.js draws it) ---------- */
.v89c .v89c-hero > .card-b:first-child { display: flex; flex-direction: column; gap: var(--s-4); }
.v89c .v89c-hero h2 { margin: 0; }
.v89c .v89c-lead { margin: 0; max-width: none; font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-700); }
.v89c-steps { list-style: none; counter-reset: v89c; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.v89c-steps li { counter-increment: v89c; display: flex; flex-direction: column; gap: var(--s-1); margin: 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--gray-200); border-radius: var(--r-ctl); background: var(--gray-25); }
.v89c-steps li::before { content: counter(v89c); display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-bottom: var(--s-1); border-radius: var(--r-chip); 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); }
.v89c-steps b { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-medium); color: var(--gray-900); }
.v89c-steps span { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v89c-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.v89c-hint { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v89c .v89c-hero > .v89c-foot { border-top: 1px solid var(--gray-200); padding-top: var(--s-4); }
.v89c-file { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--s-2) var(--s-3); font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v89c-file > svg.i { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--gray-500); }
.v89c-file > span:first-of-type { flex: 1 1 320px; min-width: 0; }
.v89c-file-a { display: inline-flex; align-items: center; gap: var(--s-2); flex: none; }
.v89c .v89c-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-top: 0; }
.v89c .v89c-note { border-top: 1px solid var(--gray-200); padding-top: var(--s-3); font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v89c .cl-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* the More menu's file pickers are labels; they read as its other items */
.v89c .v84menu label.btn.mi { cursor: pointer; }
@media (max-width: 1100px) { .v89c-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) {
  .v89c-steps { grid-template-columns: minmax(0, 1fr); }
  .v89c .v89c-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .v89c .v89c-chips::-webkit-scrollbar { display: none; }
  .v89c .v89c-chips > .chip { flex: none; }
}
#view .page.v89c > .v89-note, #view .page.v89p > .v89-note { margin-bottom: var(--s-4); }
/* the older parts these two pages still use, on the one type scale (they rendered 12.5, 13.5, 15 and 26px) */
:is(.v89c, .v89p) .dline { display: block; font-size: var(--t-small-size); line-height: var(--t-small-lh); }
:is(.v89c, .v89p) .fs-n { font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-semibold); }
:is(.v89c, .v89p) .fs-num { font-size: var(--t-num-size); line-height: var(--t-num-lh); font-weight: var(--w-semibold); letter-spacing: var(--t-num-track); font-variant-numeric: tabular-nums; }
:is(.v89c, .v89p) .in5-lead { font-size: var(--t-body-size); line-height: var(--t-body-lh); }
:is(.v89c, .v89p) .cluster blockquote { font-size: var(--t-body-size); line-height: var(--t-body-lh); }
.v89i-list tr.v89i-more td { padding: var(--s-2) var(--s-4) var(--s-3) calc(var(--s-3) + 24px); font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); background: var(--gray-25); }
.v89i-list tr.v89i-more td .btn { margin-left: var(--s-2); }

/* =============================================================== v92 FIX ROUND (G2) */
/* the bar's key: every chip has its dot (All too), and one line says what each state means */
.v89i-dot[data-k="all"] { background: var(--gray-700); }
.v89i-bar > i[data-k="ifhd"], .v89i-dot[data-k="ifhd"] { background: transparent; box-shadow: inset 0 0 0 1px var(--gray-400); background-image: repeating-linear-gradient(45deg, var(--gray-200) 0 2px, transparent 2px 4px); }
.v89i-key { margin: var(--s-3) 0 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); max-width: 100ch; }
/* hazardous drugs, before the pharmacy says: its own line under the area's title, apart from the counts */
.v89i-area .v89i-area-hd { display: block; margin: var(--s-1) 0 0; }
/* one ghost button per row; Assign under the row's menu */
.v89i-acts { align-items: center; }
.v89i-rowmore { position: relative; display: inline-flex; }
.v89i-rowmore > summary.btn { width: 28px; height: 28px; padding: 0; justify-content: center; list-style: none; color: var(--gray-500); }
.v89i-rowmore > summary::-webkit-details-marker { display: none; }
.v89i-rowmore > summary svg.i { width: 16px; height: 16px; }
.v89i-rowmore > .v84menu { right: 0; left: auto; min-width: 160px; }
.v89i-rowmore .btn.mi.v89i-whob { width: 100%; justify-content: flex-start; }
/* what to have on hand is words; the row's button is its one action */
.v89i-hand-t { color: var(--gray-900); }
/* the next inspection, with no date: a line in the header */
.v89-head .v89i-nextline { margin-top: var(--s-2); }
.v89-head .v89i-nextline b { font-weight: var(--w-medium); color: var(--gray-700); }
@media (min-width: 700px) { #view .v89i-list .v89i-acts { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: var(--s-1); } }
/* Facility records, v92 (G2): the empty state is the system's (icon, heading, one line, one action); the example records
   are a quiet link under it; the setup's Yes/No and category selects are sized to their answers, not 740px */
.v89p .v89p-empty .v89-empty > span, .v89p .v89p-empty .v89-empty > p { max-width: 80ch; }
.v89p .v89p-exline { margin: 0; padding: 0 var(--card-pad) var(--card-pad); text-align: center; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v89p .v89p-exline .linkbtn { font-size: inherit; line-height: inherit; }
/* v93 (H2; D3): the setup form takes the card's width: the four questions on one row, who compounds under them (it used the
   left half of a full-width card) */
@media (min-width: 700px) {
  .v89p .v89p-setup .pr-form .form { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; column-gap: var(--s-4); }
  .v89p .v89p-setup .pr-form .form > .fg.full { grid-column: 1 / -1; max-width: none; order: 9; }
}
/* 503A copies, v92 (G2): the empty state's line at a reading width */
.v89c .v89c-empty .v89-empty > span, .v89c .v89c-empty .v89-empty > p { max-width: 80ch; }
/* Prepare for an inspection: the date field looks like every other field (there is no system date picker yet); the chosen
   date is said in words under it */
#dialog .v89i-dlg input[type="date"] { height: 40px; min-height: 40px; padding: 0 var(--s-3); border: 1px solid var(--gray-300); border-radius: var(--r-ctl); background: var(--gray-0); font: inherit; font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-900); font-variant-numeric: tabular-nums; color-scheme: light; }
#dialog .v89i-dlg input[type="date"]:focus { outline: 0; border-color: var(--accent); box-shadow: var(--focus-ring); }
#dialog .v89i-dlg input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
#dialog .v89i-dlg .v92-datesay { margin-top: var(--s-1); font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }

/* v92 (proof/run.cjs red): between 700 and 1100px the fixed Status (184px) and Action (240px) columns left the request and
   "What to have on hand" columns 0 and 54px wide. The phone's stacked rows fit these widths too: each request is a block,
   with what to have on hand under it at full width and the action under that. */
@media (min-width: 700px) and (max-width: 1100px) {
  .v89i-tablewrap { overflow: visible; }
  .v89i-list, .v89i-list tbody, .v89i-list tr, .v89i-list td, .v89i-list th { display: block; width: auto; }
  .v89i-list thead { display: none; }
  .v89i-list tr.v89i-row, .v89i-list tr.v89i-sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--gray-100); }
  .v89i-list tr.v89i-row.open { border-bottom-color: transparent; }
  .v89i-list tr.v89i-sub { background: var(--gray-25); padding-left: calc(var(--s-5) + 24px); }
  .v89i-list tr.v89i-row td, .v89i-list tr.v89i-sub td { height: auto; padding: 0; border: 0; background: none; }
  .v89i-list tr.v89i-sub td.v89i-c-req { padding-left: 0; }
  .v89i-list td.v89i-c-req { grid-column: 1 / -1; padding-left: 0; }
  .v89i-list td.v89i-c-st { grid-column: 1; }
  .v89i-list td.v89i-c-hand { grid-column: 1 / -1; }
  .v89i-list td.v89i-c-hand:empty, .v89i-list td.v89i-c-who:empty, .v89i-list td.v89i-c-by:empty, .v89i-list td.v89i-c-act:empty { display: none; }
  .v89i-list td.v89i-c-who { grid-column: 1; display: flex; align-items: center; gap: var(--s-2); }
  .v89i-list td.v89i-c-by { grid-column: 2; text-align: right; }
  .v89i-list td.v89i-c-act { grid-column: 1 / -1; text-align: left; }
  #view .v89i-list .v89i-acts { justify-content: flex-start; }
}

/* =============================================================== v93 FIX ROUND (H2) */
/* Facility records: a question not answered yet reads in the placeholder grey */
#view .v89p .v89p-setup select:has(option[value=""]:checked) { color: var(--gray-500); }
.v89p .v93-ask { color: var(--critical-fg); }
/* Inspection: the filters are the system's dotless pills (button.chip, as on Suppliers); the pressed one in the accent */
.v89i-filters button.chip span { margin-left: var(--s-1); }
/* the status cell: one chip and at most one line under it */
.v89i-list td.v89i-c-st .v89i-ref { white-space: normal; }
/* Prepare for an inspection: the checkbox is drawn in the system's look (a 16px box, the accent when ticked), and the date
   field carries the system's calendar glyph */
#dialog .v89i-dlg input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 16px; height: 16px; margin: 2px 0 0; border: 1px solid var(--gray-300); border-radius: 4px; background: var(--gray-0); display: inline-grid; place-content: center; cursor: pointer; vertical-align: top; }
#dialog .v89i-dlg input[type="checkbox"]::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--gray-0); border-bottom: 2px solid var(--gray-0); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
#dialog .v89i-dlg input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
#dialog .v89i-dlg input[type="checkbox"]:checked::after { opacity: 1; }
#dialog .v89i-dlg input[type="checkbox"]:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
#dialog .v89i-dlg label.v89i-check { display: flex; align-items: flex-start; gap: var(--s-2); font-weight: var(--w-regular); color: var(--gray-700); }
#dialog .v89i-dlg input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
/* the status column fits a lot's own chip ("Cleared · 3 decisions owed", V.v89.lotChip) without running into the next column */
@media (min-width: 700px) {
  .v89i-list thead th:nth-child(2) { width: 216px; }
  .v89i-list thead th:last-child { width: 208px; }
}