/* ==========================================================================
   Purchase Orders — Bill Detail (purchase-order-bill.html, BILL-2026-0104)

   Spec: build/po/pages.md §14

   Only what is this page's own: the side-by-side layout (the supplier's
   invoice file beside the bill), the drawn invoice page, the check words
   after a read field, the column shares of the bill's tables, the checks
   list, the approval step, and the dialog field widths. Everything another
   Purchase Orders page also says (the header fields, the figure bar, the
   subsections, the three-way match, the timeline, the readings) is in
   css/pages/purchase-orders.css. Classes here use the `pob-` prefix.

   Tokens only, radius never past 7px, nothing under 10px, no `style`
   attribute in the page.
   ========================================================================== */

/* ---------- Figure bar ---------------------------------------------------------
   No tab strip hangs under it here, so it keeps the page's one gap rather
   than the 25px standoff a strip needs (memory.md §22). */
.pob-stats { margin-bottom: var(--page-gap); }
.pob-stats .s a { color: var(--color-danger-ink); font-weight: 600; }

/* The bill number never breaks at its hyphens; the heading wraps before it. */
.po-head__title .page-title { column-gap: 0.28em; }
.pob-num { white-space: nowrap; }

/* The sync mark in the field row: a word, level with the field buttons. */
.pob-sync { font-size: 12px; padding: 3px 0; align-self: center; }

/* ---------- Side by side ----------------------------------------------------------
   The supplier's paper on the left, the bill on the right, from 1200 up. The
   file stays in view while the bill scrolls past it, so a read field can be
   checked against the page it came from. Under 1200 they stack. */
.pob-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--page-gap);
  align-items: start;
}
.pob-file { position: sticky; top: 0; }
.pob-file .card-header h3 { font-size: 14px; }

/* ---------- The drawn invoice ------------------------------------------------------
   A well on the control ground (memory.md §13) holding a white A4 sheet: the
   sheet is paper on a tray, three levels, never a white box on a white card.
   The fields the bill read off it carry a dashed info mark. */
.pob-well {
  padding: 14px;
  background: var(--color-control);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.pob-paper {
  aspect-ratio: 210 / 297;
  max-width: 520px;
  margin: 0 auto;
  padding: 22px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  box-shadow: var(--shadow-sm);
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.pob-paper__top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.pob-paper__from { font-size: 14px; font-weight: 700; }
.pob-paper__small { font-size: 10px; color: var(--color-text-muted); }
.pob-paper__doc { text-align: right; }
.pob-paper__title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.pob-paper__meta {
  display: grid; gap: 2px;
  margin: 16px 0 14px; padding: 8px 0;
  border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
.pob-paper__k { display: inline-block; min-width: 76px; margin-right: 6px; font-size: 10px; color: var(--color-text-muted); }
.pob-paper__read {
  border-radius: 2px;
  outline: 1px dashed var(--color-info);
  outline-offset: 1px;
  background: var(--color-info-50);
  padding: 0 2px;
}
.pob-paper__lines { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 10px; }
.pob-paper__lines th,
.pob-paper__lines td { padding: 4px 3px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.pob-paper__lines th { font-weight: 600; color: var(--color-text-muted); }
.pob-paper__lines th.col-desc { width: 36%; }
.pob-paper__lines th.col-qty { width: 16%; }
.pob-paper__lines th.col-area { width: 14%; }
.pob-paper__lines th.col-price { width: 13%; }
.pob-paper__lines th.col-total { width: 21%; }
.pob-paper__lines td.col-area,
.pob-paper__lines td.col-price,
.pob-paper__lines td.col-total,
.pob-paper__lines th.col-area,
.pob-paper__lines th.col-price,
.pob-paper__lines th.col-total { text-align: right; font-variant-numeric: tabular-nums; }
.pob-paper__read-rows td { background: var(--color-info-50); }
.pob-paper__sum {
  display: grid; grid-template-columns: max-content max-content;
  justify-content: end; column-gap: 12px; row-gap: 3px;
  margin-top: 12px; font-variant-numeric: tabular-nums; text-align: right;
}
.pob-paper__sum .pob-paper__k { min-width: 0; margin: 0; }
.pob-paper__grand { font-weight: 700; }
.pob-paper__foot { margin-top: 18px; font-size: 10px; color: var(--color-text-muted); }

.pob-file__acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }
.pob-file__legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); }
.pob-file__mark {
  width: 14px; height: 10px; flex: none;
  border: 1px dashed var(--color-info); border-radius: 2px;
  background: var(--color-info-50);
}
.pob-file__btns { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Read from the file -----------------------------------------------------
   Each read value, then its check as a success word with a tick. */
.pob-tick {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 8px; font-size: 12px; color: var(--color-success-ink);
}
.pob-tick svg { width: 13px; height: 13px; }

/* ---------- Tables inside the card -------------------------------------------------
   A table in a subsection already stands on the card body's 16px, so its
   wrap takes no further inset and no top rule (the subsection heading is
   what sits above it). The columns take shares of their table. */
.pob-wrap { padding-inline: 0; border-top: 0; }
.pob-lines th.col-line  { width: 9%; }
.pob-lines th.col-mat   { width: 28%; }
.pob-lines th.col-qty   { width: 15%; }
.pob-lines th.col-area  { width: 15%; }
.pob-lines th.col-price { width: 15%; }
.pob-lines th.col-total { width: 18%; }
.pob-lines td.col-area,
.pob-lines td.col-price,
.pob-lines td.col-total { white-space: nowrap; }
.pob-applied td.col-date,
.pob-pay td.col-date { white-space: nowrap; }

.pob-applied th.col-kind   { width: 30%; }
.pob-applied th.col-ref    { width: 18%; }
.pob-applied th.col-date   { width: 14%; }
.pob-applied th.col-status { width: 16%; }
.pob-applied th.col-amount { width: 22%; }

.pob-pay th.col-date    { width: 12%; }
.pob-pay th.col-method  { width: 16%; }
.pob-pay th.col-ref     { width: 20%; }
.pob-pay th.col-applied { width: 20%; }
.pob-pay th.col-status  { width: 12%; }
.pob-pay th.col-amount  { width: 20%; }

.pob-slabs th.col-slab   { width: 14%; }
.pob-slabs th.col-size   { width: 18%; }
.pob-slabs th.col-pl     { width: 13%; }
.pob-slabs th.col-rcv    { width: 12%; }
.pob-slabs th.col-bill   { width: 10%; }
.pob-slabs th.col-result { width: 33%; }
.pob-slabs td.col-result { white-space: normal; }

/* ---------- Three-way match extras --------------------------------------------------
   The tolerance words over the grid, the head-row link, the open slab list
   and the summary under it. */
.pob-tol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 10px; }
.pob-tol .po-reading { font-size: 12px; }
.pob-tol__k { color: var(--color-text-muted); font-weight: 600; }
.pob-tol__link { font-size: 12px; }
.po-match__line--head a { color: var(--color-primary-600); }
/* The Difference column carries a sentence (slab numbers, area, the claimed
   figure), so it takes the widest share here; the three counts stay narrow. */
.pob-card .po-match__line {
  grid-template-columns: minmax(120px, 1.1fr) repeat(3, minmax(80px, 0.8fr)) minmax(170px, 1.9fr);
}
.pob-match-sum .po-reading > * { display: inline; }
.po-match__slabs[open] summary { margin-bottom: 6px; }
.po-match__slabs .table-wrap { color: var(--color-text); }
.pob-match-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 12px; }
.pob-match-sum .po-reading { font-size: 12px; }

/* ---------- Checks ------------------------------------------------------------------
   One sentence per check with its mark: success ink for a check passed,
   danger for the one to follow, muted for a plain fact. */
.pob-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pob-checks li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--color-text); line-height: 1.45; }
.pob-checks svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--color-text-muted); }
.pob-checks .is-ok svg { color: var(--color-success-ink); }
.pob-checks .is-bad svg { color: var(--color-danger-ink); }
.pob-checks .is-bad a { font-weight: 600; }

/* ---------- Approval step ----------------------------------------------------------- */
.pob-step { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; }
.pob-step__who { font-weight: 600; color: var(--color-text); }
.pob-step .subtle { font-size: 12px; }

/* ---------- Balance ----------------------------------------------------------------- */
.pob-balance { margin-top: 12px; }
.pob-balance__due { color: var(--color-success-ink); font-weight: 600; }

/* ---------- Dialogs ------------------------------------------------------------------
   Fields sized to what they hold (memory.md §9), several to a row. */
.slideover-form .form-row > .field { flex: 0 1 auto; }
.pob-in-ref  { width: 180px; }
.pob-in-date { width: 160px; }
.pob-in-sel  { width: 170px; }
.pob-in-ccy  { width: 90px; }
.pob-in-rate { width: 90px; }
.pob-in-amt  { width: 140px; }
.pob-edit-lines {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; font-size: 13px; color: var(--color-text);
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.pob-edit-file {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  padding: 8px 12px; font-size: 13px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.pob-edit-file__name { font-weight: 500; color: var(--color-text); }
.pob-edit-file .subtle { font-size: 12px; }
.pob-edit-file .btn { margin-left: auto; }
.pob-none { margin: 0; font-size: 13px; color: var(--color-text-muted); }
.pob-modal-p { margin: 0 0 14px; font-size: 13px; color: var(--color-text); line-height: 1.5; }

/* ---------- Narrower screens ----------------------------------------------------------- */
@media (max-width: 1200px) {
  .pob-layout { grid-template-columns: minmax(0, 1fr); }
  .pob-file { position: static; }
  .pob-paper { aspect-ratio: auto; }
}
@media (max-width: 768px) {
  .pob-lines { min-width: 640px; }
  .pob-applied,
  .pob-pay { min-width: 560px; }
  .pob-slabs { min-width: 600px; }
  .pob-file__btns { margin-left: 0; }
  .pob-file__btns .btn,
  .pob-edit-file .btn { min-height: 44px; }
  .pob-edit-file .btn { margin-left: 0; }
}
@media (max-width: 480px) {
  .pob-well { padding: 8px; }
  .pob-paper { padding: 14px 10px; }
  .pob-paper__top { flex-direction: column; }
  .pob-paper__doc { text-align: left; }
  .pob-paper__k { min-width: 64px; }
  /* The drawn lines keep every figure whole: the description wraps instead. */
  .pob-paper { overflow-wrap: normal; }
  .pob-paper__lines { table-layout: auto; }
  .pob-paper__lines th,
  .pob-paper__lines td { padding: 4px 2px; }
  .pob-paper__lines .col-area,
  .pob-paper__lines .col-price,
  .pob-paper__lines .col-total { white-space: nowrap; }
  /* On a phone each match line restacks instead of scrolling: the line name
     on top, the three counts side by side, the difference under them. */
  .pob-card .po-match__line { min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pob-card .po-match__line > :first-child,
  .pob-card .po-match__diff { grid-column: 1 / -1; }
  .pob-card .po-match__line--head > :first-child,
  .pob-card .po-match__line--head > :last-child { display: none; }
  .slideover-form .form-row { flex-wrap: wrap; }
}

/* Dialog rhythm: an alert, a note or a switch row keeps the form's 14px
   from the field after it, as field to field does in app.css. */
.slideover-form .slideover-body > .alert + *,
.slideover-form .slideover-body > .po-dialog-note + .field,
.slideover-form .slideover-body > .field + .pob-remit { margin-top: 14px; }
.pob-remit { font-size: 13px; }