/* v99: ship with proof: the release read (next-release-read.js). On the v89 system (DESIGN-V89.md): its type tokens, grey
   ramp, tones, radii and spacing only. The read's page reuses the lot page's grid, next-step bar and Details rail
   (next-v89-today.css .v89l-*), the drop target copies Receive's (next-v94.css label.drop), and the fee is the house callout.
   Phone rules at 699px. */
.v99-card .card-b { display: grid; gap: var(--s-4); }

/* the drop target: Receive's */
.v99-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--s-1);
  min-height: 152px; margin: 0; padding: var(--s-6) var(--s-5); border: 1px dashed var(--gray-300); border-radius: var(--r-card); background: var(--gray-25); cursor: pointer; transition: border-color .12s, background .12s; }
.v99-drop:hover, .v99-drop.on { border-color: var(--accent); background: var(--gray-50); }
.v99-drop:focus-within { box-shadow: var(--focus-ring); }
.v99-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.v99-drop .v99-dz-ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--s-2); border-radius: var(--r-ctl); background: var(--gray-0); border: 1px solid var(--gray-200); color: var(--accent); }
.v99-drop .v99-dz-ic svg { width: 18px; height: 18px; }
.v99-drop b { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-semibold); color: var(--gray-900); }
.v99-drop .v99-dz-s { max-width: 520px; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v99-drop .v89-pick { margin-top: var(--s-1); font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--accent); font-weight: var(--w-medium); }
.v99-drop [data-v99out]:empty { display: none; }
.v99-drop [data-v99out] { margin-top: var(--s-2); }
.v99-prog, .v99-ok, .v99-no { margin: 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.v99-prog { color: var(--gray-500); } .v99-ok { color: var(--positive-fg); } .v99-no { color: var(--critical-fg); }
.v99-alt { margin: 0; color: var(--gray-500); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.v99-t td small { display: block; color: var(--gray-500); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.v99-miss { color: var(--gray-500); }

/* the read's page: the lot page's grid does the layout */
.v99-page .v89l-grid { margin-top: 0; }
.v99-checks { list-style: none; margin: 0; padding: 0; }
.v99-checks li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s-2); align-items: start; padding: var(--s-2) 0; border-top: 1px solid var(--gray-100); }
.v99-checks li:first-child { border-top: 0; padding-top: 0; }
.v99-checks li:last-child { padding-bottom: 0; }
.v99-checks li > svg { width: 16px; height: 16px; margin-top: 2px; stroke-width: 1.75; }
.v99-checks li[data-state="pass"] > svg { color: var(--positive-dot); }
.v99-checks li[data-state="attention"] > svg { color: var(--attention-dot); }
.v99-checks li[data-state="fail"] > svg { color: var(--critical-dot); }
.v99-checks .t { display: block; font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-900); }
.v99-checks li[data-state="pass"] .t { color: var(--gray-700); }
.v99-checks .s { display: block; margin-top: 2px; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v99-ct td .l1, .v99-ct td .l2 { display: block; }
.v99-ct td .l2 { color: var(--gray-500); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.v99-ct tr.v99-c:has(+ tr.v99-n) td { border-bottom: 0; }
.v99-ct tr.v99-n td { padding-top: 0; padding-bottom: var(--s-3); border-top: 0; }
.v99-ct tr.v99-n .v99-checks { padding: var(--s-3) var(--s-4); border-radius: var(--r-ctl); background: var(--gray-50); }
.v99-ct tr.v99-n .v99-checks li { border-top-color: var(--gray-200); }
.v99-foot { margin: 0; color: var(--gray-500); font-size: var(--t-small-size); line-height: var(--t-small-lh); }

/* Today's first-run card (only with no batch record yet) */
.v99-today .v99-tb { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.v99-today .v99-tb b { display: block; font-size: var(--t-heading-size); line-height: var(--t-heading-lh); font-weight: var(--w-semibold); color: var(--gray-900); }
.v99-today .v99-tb span { display: block; margin-top: 2px; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }

/* the fee where Passports are issued: the house callout, inside the dialog body's gutter */
.v99-fee { margin: var(--s-3) var(--s-6) 0; }   /* the dialog body's own 24px gutter (next.css .dialog .db) */
.v99-act { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }
.v99-consent { display: flex; gap: var(--s-3); align-items: flex-start; margin: var(--s-3) 0 var(--s-1); font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--gray-900); }
.v99-consent input { margin-top: 3px; }
.v99-billing .v99-foot { margin-top: var(--s-3); }

@media (max-width: 699px) {
  .v99-today .v99-tb { flex-direction: column; align-items: stretch; }
  .v99-today .v99-tb .btn { justify-content: center; }
  .v99-drop { min-height: 136px; padding: var(--s-5) var(--s-4); }
  .v99-fee { margin: var(--s-3) var(--s-4) 0; }
}

/* the ingredient table in the main column: set widths, words wrap whole, nothing cut (DESIGN-V89: never clipped, no clamps) */
.v99-ct { table-layout: fixed; width: 100%; }
.v99-ct th, .v99-ct td { white-space: normal; overflow-wrap: normal; word-break: normal; }
.v99-ct td .l1, .v99-ct td .l2 { white-space: normal; overflow: visible; text-overflow: clip; }
.v99-ct td .v89-id { white-space: nowrap; }
.v99-page .v84facts .facts span { overflow-wrap: anywhere; }
.v99-ct .nw { white-space: nowrap; }
.v99-ct tr.v99-c td:last-child { text-align: right; }
.v99-ct .v99-d { display: block; }

/* r96 (W1-RECORD): confirm and release in one step, and the payer items on the preparation. The v89 tokens only. */
.v99os-t table { width: 100%; }
.v99os-t th.ck, .v99os-t td.ck { width: 36px; }
.v99os-t td select { width: 100%; min-width: 0; }
.v99os-t .cellnote { color: var(--gray-500); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.v99os .form { margin-top: var(--s-4); }
.v99os .v99-foot { margin-top: var(--s-3); }
.v99os-out li { display: flex; justify-content: space-between; gap: var(--s-3); align-items: flex-start; }
.v99-payer .card-b { display: grid; gap: var(--s-3); }
.v99-payer .v99p-t { margin: 0; color: var(--gray-700); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.v99-payer .v99p-src { font-size: var(--t-small-size); white-space: nowrap; }
.v99p { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.v99p-i { padding: var(--s-3) 0; border-top: 1px solid var(--gray-100); }
.v99p-i:first-child { border-top: 0; padding-top: 0; }
.v99p-h { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); }
.v99p-w { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--w-medium); color: var(--gray-900); }
.v99p-i p { margin: 2px 0 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-700); }
.v99p-i small { display: block; margin-top: 2px; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-500); }
.v99p-lines { list-style: none; margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-ctl); background: var(--gray-50); display: grid; gap: 2px; }
.v99p-lines li { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--gray-700); }
.v99p-lines li > span:last-child { text-align: right; overflow-wrap: anywhere; }
@media (max-width: 699px) {
  .v99os-t table, .v99os-t thead, .v99os-t tbody, .v99os-t tr, .v99os-t td { display: block; width: 100%; }
  .v99os-t thead { display: none; }
  .v99os-t tr { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 var(--s-2); padding: var(--s-3) 0; border-top: 1px solid var(--gray-100); }
  .v99os-t td { padding: 0; border: 0; }
  .v99os-t td.ck { grid-row: span 4; }
  .v99os-t td:nth-child(n+2) { grid-column: 2; }
  .v99p-h { flex-direction: column; gap: var(--s-1); }
  .v99p-lines li { flex-direction: column; gap: 0; }
  .v99p-lines li > span:last-child { text-align: left; }
}
.v99os-t td.nw { white-space: nowrap; }
.v99os-t td select { height: 32px; padding: 0 var(--s-2); border: 1px solid var(--gray-300); border-radius: var(--r-ctl); background: var(--gray-0); color: var(--gray-900); font: inherit; font-size: var(--t-small-size); }
.v99os-t td select:focus { outline: none; box-shadow: var(--focus-ring); }