/* next-v96-inspect.css (v96, 2026-10-02). Owner: Agent B, see DESIGN-V96.md. Tokens and the v96 kit only.
   Inspection drawn with the kit (next-v96-inspect.js), and the kit laid over Facility records, Prescriber determinations and
   Settings. Phone rules are scoped to 699px and come last. */

/* the panel head's line sits under its title (a global .sub rule indents it by 8px) */
.v96i .v96-ph-t .sub, .v96i-dressed .v96-ph-t .sub { margin-left: 0; }

/* ---------- Inspection: the overview ---------- */
.v96i .v96i-over > .card-b { display: flex; flex-direction: column; gap: var(--s-5); padding-top: 0; }
.v96i-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.v96i-stats[data-f2four] { grid-template-columns: repeat(5, minmax(0, 1fr)); }   /* r94 (F2, A5-03): five counts */
.v96i-stats .v96-stat { padding: var(--s-3) var(--s-4); border: 1px solid var(--line-soft); border-radius: 12px; background: var(--gray-0); }
.v96i-stats .v96-stat[data-tone="attention"] b { color: var(--attention-fg); }
.v96i-flow { padding: var(--s-2) var(--s-2) 0; }
.v96i-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }
.v96i-col { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.v96i-col > b { font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--w-semibold); color: var(--gray-900); }
.v96i-col > p { margin: 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-600); }
.v96i-col .v95i-links { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* ---------- Inspection: the list of requests ---------- */
.v96i-list .v96i-ftop { padding: 0 var(--s-5) var(--s-3); }
.v96i-body { display: flex; flex-direction: column; gap: var(--s-4); padding: 0 var(--s-5) var(--s-5); }
.v96i-area { display: flex; flex-direction: column; gap: var(--s-2); }
.v96i-area-h { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.v96i-area-h h3 { margin: 0; font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-semibold); color: var(--gray-900); }
.v96i-area-h > span:last-child { font-size: var(--t-label-size); line-height: var(--t-label-lh); color: var(--gray-500); }
.v96i-rows { border-radius: 12px; }
.v96i-row { align-items: flex-start; padding: var(--s-3) var(--s-4); }
.v96i-row .v96-dr-main { align-items: flex-start; }
.v96i-row .v96-tile { margin-top: 2px; }
.v96i-row .v96-dr-t, .v96i-row .v96-dr-s { white-space: normal; overflow: visible; text-overflow: clip; }
.v96i-row .v96-dr-t { display: flex; flex-direction: column; gap: 1px; }
.v96i-reqb { display: block; padding: 0; margin: 0; border: 0; background: none; font: inherit; font-size: var(--t-heading-size); line-height: var(--t-heading-lh);   /* r94 X (A10-18): 15px was off the scale */ font-weight: var(--w-semibold); color: var(--gray-900); text-align: left; cursor: pointer; }
.v96i-reqb:hover { color: var(--accent); }
.v96i-reqb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.v96i-ref { font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--w-regular, 400); color: var(--gray-500); }
.v96i-row .v96-dr-s { margin-top: 3px; }
.v96i-how { color: var(--gray-700); font-weight: var(--w-medium); }
.v96i-how[data-k="none"], .v96i-how[data-k="na"], .v96i-how[data-k="seen"] { color: var(--gray-500); font-weight: var(--w-regular, 400); }
.v96i-how[data-k="bad"] { color: var(--critical-fg); }
.v96i-det { color: var(--gray-500); }
.v96i-warn { color: var(--attention-fg); }
.v96i-l2 { display: block; color: var(--gray-500); }
.v96i-who { display: block; margin-top: 2px; }
.v96i-row .v96-dr-l { padding-top: 5px; }   /* the label sits on the action's middle line */
.v96i-row .v96-dr-a { gap: var(--s-1); }
.v96i-act { display: inline-flex; align-items: center; gap: var(--s-1); }
.v96i-act .v95i-msp { display: none; }
.v96i-tog { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--gray-400); cursor: pointer; }
.v96i-tog:hover { background: var(--gray-50); color: var(--gray-700); }
.v96i-tog svg { width: 16px; height: 16px; transform: rotate(0deg); transition: transform .15s ease; }
.v96i-row.open .v96i-tog svg { transform: rotate(90deg); }
.v96i-row.open { background: var(--gray-25, #fbfcfd); }
.v96i-drawer { border-top: 1px solid var(--line-soft); background: var(--gray-25, #fbfcfd); }
.v96i-drawer .v95i-drawer { margin: 0; padding: var(--s-4) var(--s-4) var(--s-5); border: 0; background: none; }
.v96i-subs { margin-top: var(--s-3); }
.v96i-subs .v96-dr { padding: var(--s-2) var(--s-3); }
.v96i-subs .v96-dr-t { font-size: var(--t-small-size); line-height: var(--t-small-lh); white-space: normal; }
.v96i-subs .v96-dr-t .v89i-sname { font-weight: var(--w-regular, 400); color: var(--gray-600); margin-left: 4px; }
.v96i-subs .v96-dr-s { white-space: normal; }
.v96i-subs .v95i-acts { display: inline-flex; align-items: center; gap: var(--s-1); }
.v96i-drawer .v95i-opt { border-radius: 12px; border: 1px solid var(--line-soft); background: var(--gray-0); box-shadow: none; }
.v96i-docl { margin-top: var(--s-2); border-radius: 10px; }
.v96i-docl .v96-dr { padding: var(--s-2) var(--s-3); }
.v96i-docl .v96-dr-t { font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.v96i-docl .v96-dr-s { white-space: normal; }
.v96i-foot { padding: var(--s-3) var(--s-5) var(--s-5); border-top: 1px solid var(--line-soft); }
.v96i-live { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-600); }
.v96i-live > span:not(.v96-l) { flex: 1 1 320px; }

/* ---------- Inspection: the handover ---------- */
.v96i-hand-flow { padding-top: 0; }
.v96i-hand-rows { margin: 0 var(--s-5); }
.v96i-hand-rows .v96-dr-s { white-space: normal; }
.v96i-hand-rows .v96-dr-a { flex-wrap: wrap; justify-content: flex-end; }
.v96i-title-a { color: var(--gray-900); text-decoration: none; }
.v96i-title-a:hover { color: var(--accent); }
.v96i-hand-f { display: flex; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-3) var(--s-5) var(--s-5); }
.v96i-past .v96-list { margin: 0 var(--s-5) var(--s-5); }
.v96i-past .v96-dr-s { white-space: normal; }
.v96i-rehearse .v96-ph { padding-bottom: var(--s-4); }
.v96i-chk { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--gray-700); }
.v96i-chk input { margin-top: 3px; }

/* ---------- the kit over Facility records, Prescriber determinations and Settings ---------- */
.v96i-dressed .card > .card-h.v96i-ph { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: var(--s-3); row-gap: 0; align-items: center; }
.v96i-dressed .card > .card-h.v96i-ph > .v96-ph-i { grid-row: 1 / span 2; }
.v96i-dressed .card > .card-h.v96i-ph > h2 { grid-column: 2; margin: 0; }
.v96i-dressed .card > .card-h.v96i-ph > .sub { grid-column: 2; }
.v96i-dressed .card > .card-h.v96i-ph > :not(.v96-ph-i):not(h2):not(.sub) { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
.v96i-due, .v96i-recs { margin: 0 var(--s-5) var(--s-4); }
.v96i-due .v96-dr-s, .v96i-recs .v96-dr-s { white-space: normal; }
.v96i-recs .v96-dr[data-sterileopen] { cursor: pointer; }
.v96i-recs .v96-dr[data-sterileopen]:hover .v96-dr-t { color: var(--accent); }

.v96i-cell { display: flex; align-items: flex-start; gap: var(--s-3); min-width: 0; }
.v96i-cell > .v96-tile, .v96i-cell > .v96-av { margin-top: 1px; }
.v96i-cell-b { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.v96i-copies td .v96-l, .v96i-copies td .tag { max-width: none; }
.v96i-rk { margin: var(--s-3) 0; }
.v96i-rk .v96-dr-s { white-space: normal; }
.v96i-file { position: relative; overflow: hidden; cursor: pointer; }
.v96i-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* prx v1 wave 2: which procedure an SOP review attaches (recall, quality assurance, batch testing, compounding) */
.v96i-pkind { font: var(--t-small); color: var(--gray-900); background: var(--gray-0); border: 1px solid var(--gray-200); border-radius: var(--r-ctl); padding: 0 var(--s-2); height: 28px; max-width: 168px; }
.v96i-busy { font-size: var(--t-small-size); color: var(--gray-500); }

/* Phase 1 (functionality): the files kept on a request, before the kit draws them */
.v96i-docs { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.v96i-docs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; }
.v96i-docs li .v95i-l2 { grid-column: 1; }
.v96i-docs .v96i-dst { grid-column: 2; grid-row: 1 / span 2; font-size: 12px; color: var(--gray-600); white-space: nowrap; }

/* ---------- phone ---------- */
@media (max-width: 699px) {
  .v96i-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .v96i-stats .v96-stat { padding: var(--s-2) var(--s-3); }
  .v96i-cols { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .v96i .v96i-over > .card-b { gap: var(--s-4); }
  /* a panel head's action goes under its title, so the title keeps the width */
  .v96i .v96-ph { padding: var(--s-4); align-items: flex-start; flex-wrap: wrap; row-gap: var(--s-3); }
  .v96i .v96-ph-t { flex: 1 1 calc(100% - 48px); }
  .v96i .v96-ph-a { flex-wrap: wrap; margin-left: 44px; }
  .v96i-list .v96i-ftop { padding: 0 var(--s-4) var(--s-3); }
  .v96i-body { padding: 0 var(--s-3) var(--s-4); }
  .v96i-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-2); row-gap: var(--s-2); padding: var(--s-3); }
  .v96i-row .v96-dr-main { grid-column: 1 / -1; }
  .v96i-row .v96-dr-l { grid-column: 1; grid-row: 2; padding-left: calc(36px + var(--s-3)); padding-top: 5px; }
  .v96i-row .v96-dr-a { grid-column: 2; grid-row: 2; }
  .v96i-reqb { font-size: var(--t-body-size); line-height: var(--t-body-lh); }
  .v96i-drawer .v95i-drawer { padding: var(--s-3); }
  /* every other kit row on these pages: the tile and its words take the line; the label and the actions go under them */
  .v96i .v96-list > .v96-dr:not(.v96i-row), .v96i-dressed .v96-list > .v96-dr { flex-wrap: wrap; row-gap: var(--s-2); }
  .v96i .v96-list > .v96-dr:not(.v96i-row) > .v96-dr-main, .v96i-dressed .v96-list > .v96-dr > .v96-dr-main { flex: 1 1 100%; }
  .v96i .v96-list > .v96-dr:not(.v96i-row) .v96-dr-t, .v96i-dressed .v96-list > .v96-dr .v96-dr-t { white-space: normal; }
  .v96i .v96-list > .v96-dr:not(.v96i-row) > .v96-dr-l, .v96i-dressed .v96-list > .v96-dr > .v96-dr-l { margin-left: calc(36px + var(--s-3)); }
  .v96i .v96-list > .v96-dr:not(.v96i-row) > .v96-dr-a, .v96i-dressed .v96-list > .v96-dr > .v96-dr-a { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-start; }
  .v96i .v96-list > .v96-dr:not(.v96i-row) > .v96-dr-l + .v96-dr-a, .v96i-dressed .v96-list > .v96-dr > .v96-dr-l + .v96-dr-a { margin-left: 0; }
  .v96i .v96-list > .v96-dr:not(.v96i-row) > .v96-dr-main + .v96-dr-a, .v96i-dressed .v96-list > .v96-dr > .v96-dr-main + .v96-dr-a { margin-left: calc(36px + var(--s-3)); }
  .v96i-hand-rows, .v96i-past .v96-list, .v96i-due, .v96i-recs { margin-left: var(--s-3); margin-right: var(--s-3); }
  .v96i-hand-f { padding: var(--s-3) var(--s-4) var(--s-4); }
  .v96i-dressed .card > .card-h.v96i-ph { grid-template-columns: 32px minmax(0, 1fr); }
  .v96i-dressed .card > .card-h.v96i-ph > :not(.v96-ph-i):not(h2):not(.sub) { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: var(--s-2); }
}

/* v97 (builder): a document Veritura could not read. The how line of a request in review, read by a reviewer, or not usable reads
   in its own words (next-v95-inspect.js reviewEst); the Today and Inspection card of declines sits on the kit's card. */
.v96i-how[data-k="reviewed"] { color: var(--positive-fg); }
.v97-reviews { margin-bottom: 16px; padding-bottom: var(--s-5); }
.v97-reviews .v96-list { margin: 0 var(--s-5); }
.v97-reviews .v96-dr-s { white-space: normal; }
.v97-reviews .v96-dr-a { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 699px) { .v97-reviews .v96-list { margin: 0 var(--s-3); } .v97-reviews { padding-bottom: var(--s-3); } }
.v96i-due .v96-dr[data-review="declined"] .v96-dr-s { color: var(--attention-fg); }
/* v97 (M8): a rehearsal that examined nothing says so across its two count columns, never "0" and "0" */
.v95i .v89-table td.v97reh-none { color: var(--gray-600); text-align: right; white-space: nowrap; }
/* r94 (F2): which lots go in a packet or a link, and the line that says so */
.f2-lots { border: 1px solid var(--line-soft); border-radius: 12px; padding: var(--s-3) var(--s-4); margin: 0; display: grid; gap: 8px; min-width: 0; }
.f2-lots legend { padding: 0 6px; font-size: var(--t-small-size); font-weight: var(--w-semibold); color: var(--gray-900); }
.f2-pick { border-top: 1px solid var(--line-soft); padding-top: 8px; display: grid; gap: 6px; }
.f2-pick-h { display: flex; gap: 14px; }
.f2-pick-l { display: grid; gap: 4px; max-height: 220px; overflow: auto; padding-right: 4px; }
.f2-lot { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--gray-700); padding: 4px 2px; border-radius: 8px; }
.f2-lot:hover { background: var(--gray-50, #f6f7f9); }
.f2-lot input { margin-top: 3px; }
.f2-lot small { display: block; color: var(--gray-600); font-size: 12px; }
.f2-range { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--gray-700); }
.f2-range label { display: inline-flex; gap: 6px; align-items: center; }
.f2-scope { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--gray-50, #f6f7f9); font-size: 13px; line-height: 1.45; color: var(--gray-700); }
@media (max-width: 699px) { .f2-lots { padding: var(--s-3); } .f2-pick-l { max-height: 180px; } }
#dialog .f2-lots label { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-weight: 400; }
#dialog .f2-lots label input[type="radio"], #dialog .f2-lots label input[type="checkbox"] { flex: none; width: 16px; height: 16px; min-width: 16px; margin: 2px 0 0; padding: 0; }
#dialog .f2-lots .f2-range label { align-items: center; gap: 6px; }
#dialog .f2-lots .f2-range input[type="date"] { width: auto; }

/* r94 (F2, A5-03): five counts on a phone, two to a row */
@media (max-width: 699px) { .v96i-stats[data-f2four] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* r96 (W3-503B, phase 2 wave 3): the FDA Form 483 response (#/fda483). Phone rules at the end, scoped to 699px. */
#view .f483-page .card { margin: 0 0 var(--s-4); }
#view .f483-list, #view .f483-obsl, #view .f483-hist, #view .f483-src { list-style: none; margin: 0; padding: 0; }
#view .f483-list li + li, #view .f483-obs + .f483-obs { border-top: 1px solid var(--gray-200); }
#view .f483-list a { display: grid; gap: 3px; padding: var(--s-3) 0; color: inherit; text-decoration: none; }
#view .f483-list a b { font-size: var(--t-body-size); color: var(--gray-900); }
#view .f483-list a span { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
#view .f483-list a:hover b { color: var(--accent); }
#view .f483-c { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
#view .f483-due { font-size: var(--t-small-size); color: var(--gray-700); }
#view .f483-big { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: 0 0 var(--s-2); font-size: var(--t-body-size); }
#view .f483-big .f483-due { font-size: var(--t-body-size); font-weight: var(--w-semibold); color: var(--gray-900); }
#view .f483-p, #dialog .f483-p { margin: 0 0 var(--s-2); font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-700); overflow-wrap: anywhere; }
#view .f483-obs { padding: var(--s-3) 0; }
#view .f483-oh { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
#view .f483-ot { margin: var(--s-1) 0 var(--s-2); font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-900); overflow-wrap: anywhere; }
#view .f483-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: var(--s-1) 0; }
#view .f483-k { flex: 0 0 170px; font-size: var(--t-small-size); color: var(--gray-500); }
#view .f483-row .tag { max-width: 100%; overflow-wrap: anywhere; white-space: normal; text-decoration: none; }
#view .f483-none { font-size: var(--t-small-size); color: var(--gray-500); }
#view .f483-draft { width: 100%; min-height: 220px; margin-top: var(--s-3); font-family: var(--font-mono); font-size: var(--t-small-size); line-height: 1.5; }
#view .f483-cite, #dialog .f483-cite { margin: var(--s-2) 0 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); overflow-wrap: anywhere; }
#view .f483-hist li { padding: var(--s-1) 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-700); overflow-wrap: anywhere; }
#view .f483-hist li span { color: var(--gray-500); margin-right: var(--s-1); }
#view .f483-src li { padding: var(--s-1) 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-700); overflow-wrap: anywhere; }
#view .f483-table td { vertical-align: top; overflow-wrap: anywhere; }
#dialog .f483-dlg { width: min(680px, 100%); }
#dialog .f483-dlg .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
#dialog .f483-dlg .form .fg.full { grid-column: 1 / -1; }
#dialog .f483-dlg textarea { width: 100%; min-height: 90px; }
#dialog .f483-fs { border: 1px solid var(--gray-200); border-radius: 10px; padding: var(--s-2) var(--s-3); margin: 0 0 var(--s-3); max-height: 220px; overflow: auto; }
#dialog .f483-fs legend { font-size: var(--t-small-size); color: var(--gray-500); padding: 0 4px; }
#dialog .f483-fs label { display: flex; gap: var(--s-2); align-items: flex-start; padding: 2px 0; font-size: var(--t-body-size); color: var(--gray-900); overflow-wrap: anywhere; }
#dialog .f483-err { margin: 0 0 var(--s-3); }
@media (max-width: 699px) {
  #view .f483-k { flex-basis: 100%; }
  #dialog .f483-dlg .form { grid-template-columns: minmax(0, 1fr); }
  #view .f483-table { font-size: var(--t-small-size); }
}