/* ==========================================================================
   06 · FREIGHTCHARGECATCHER — soul
   Ledger-honest, catches money. Cool paper, slate accent, red for the flag.
   Motion budget: the stagger on first load only. 200 rows get scanned fast,
   so once the batch has landed the grid is inert and sortable — no hover
   choreography, no row transitions, nothing that costs a scroll.
   ========================================================================== */
:root{
  --accent:#4A5568;
  --accent-rgb:74,85,104;
  --paper:#F2F3F4;          /* cool */
  --paper-rgb:242,243,244;
  --card:#FFFFFF;
}

/* ---------- the pile ------------------------------------------------------
   46 proofs of delivery as 46 tiles. Grey while unread, green when the charge
   matches the contract, red when it does not. It is a progress bar that
   happens to be the answer. */
.gb-pile{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(16px,1fr));
  gap:4px;padding:1rem;
}
.gb-pile i{
  display:block;aspect-ratio:3 / 4;border-radius:2px;
  background:var(--surface-2);border:1px solid var(--line-soft);
  transition:background-color 180ms var(--ease-out),border-color 180ms var(--ease-out);
}
.gb-pile i[data-s="ok"]{background:color-mix(in oklab,var(--green) 42%,var(--card));border-color:var(--green);}
.gb-pile i[data-s="bad"]{background:color-mix(in oklab,var(--red) 46%,var(--card));border-color:var(--red);}

/* ---------- the recovered counter ---------------------------------------- */
.gb-hero{
  display:grid;gap:1rem 2rem;align-items:end;
  padding:1.25rem 1.35rem;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--card);
}
@media (min-width:760px){ .gb-hero{grid-template-columns:auto 1fr auto;} }
.gb-hero__v{
  font-family:var(--font-mono);font-weight:500;
  font-size:clamp(2.1rem,1.4rem + 3vw,3.4rem);line-height:.95;
  font-variant-numeric:tabular-nums;color:var(--red);
}
.gb-hero__k{
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);display:block;margin-top:.5rem;
}
.gb-hero__why{font-size:var(--t-small);color:var(--muted);line-height:1.6;max-width:46ch;}
.gb-hero__side{display:grid;gap:.35rem;text-align:right;}
.gb-hero__side b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:500;}

/* ---------- the reconciliation grid --------------------------------------- */
.gb-tbl{width:100%;border-collapse:collapse;font-size:var(--t-small);}
.gb-tbl th{
  text-align:left;font-family:var(--font-mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  padding:.5rem .6rem;border-bottom:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;z-index:2;white-space:nowrap;
}
.gb-tbl th[data-sort]{cursor:pointer;user-select:none;}
@media (hover:hover) and (pointer:fine){ .gb-tbl th[data-sort]:hover{color:var(--ink);} }
.gb-tbl th[data-sort]:active{color:var(--ink);}
.gb-tbl th[aria-sort]{color:var(--ink);}
.gb-tbl th[aria-sort]::after{content:' ↓';}
.gb-tbl th[aria-sort="ascending"]::after{content:' ↑';}
.gb-tbl td{padding:.42rem .6rem;border-bottom:1px solid var(--line-soft);white-space:nowrap;}
.gb-tbl td.n{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;}
.gb-tbl td.wide{white-space:normal;}
.gb-tbl tr[data-bad="1"]{background:rgba(163,59,46,.075);}
.gb-tbl tr[data-bad="1"] td.n:last-child{color:var(--red);font-weight:500;}
.gb-no{font-family:var(--font-mono);font-size:var(--t-micro);}
.gb-why{
  display:block;font-family:var(--font-mono);font-size:var(--t-micro);
  color:#7c2c22;white-space:normal;margin-top:.15rem;
}

/* The batch lands once. Rows that reconcile arrive in order; the mismatches
   arrive last, after a beat, and then nothing in this table moves again. */
.gb-tbl tbody tr.gb-in{animation:gb-land 200ms var(--ease-out) both;}
@keyframes gb-land{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:none;}}

.gb-filters{
  display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
  padding:.6rem .9rem;border-bottom:1px solid var(--line);background:var(--card);
}
.gb-filters .label{margin-left:auto;}

/* ---------- the dispute pack ---------------------------------------------- */
.gb-out{
  width:100%;min-height:14rem;resize:vertical;white-space:pre;overflow-x:auto;
  font-family:var(--font-mono);font-size:var(--t-micro);line-height:1.7;
  color:var(--ink);background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:.8rem;
}
.gb-break{
  display:grid;gap:.3rem;font-family:var(--font-mono);font-size:var(--t-micro);
  padding:.6rem .75rem;background:var(--surface);border-radius:var(--radius-sm);
}
.gb-break div{display:flex;gap:1rem;}
.gb-break span:last-child{margin-left:auto;font-variant-numeric:tabular-nums;}

/* ---------- the ordinary-overcharges list ---------------------------------
   A plain dash-marked list for "the nine overcharges this month are the
   ordinary kind" — same em-dash rhythm as .wont, but in the tool's own
   accent rather than the red reserved for a live flag. */
.gb-errors{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.55rem;}
.gb-errors li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--t-small);color:var(--muted);}
.gb-errors li::before{content:'\2014';font-family:var(--font-mono);color:var(--accent);flex:none;line-height:1.6;}
.gb-errors b{color:var(--ink);font-weight:600;}

/* ---- inside the capped walkthrough console ----
   The table's own --tbl-h would keep 30rem inside a console that has less than
   that to give, leaving a scroller nested in a scroller. Inside the cap the
   panes distribute their height and the table takes what is left. */
@media (min-width:900px){
  #gbStage.wt-console--fit .wt-panes > *{display:flex;flex-direction:column;min-height:0;}
  #gbStage.wt-console--fit .tbl__scroll{flex:1 1 auto;min-height:8rem;max-height:none;overflow:auto;}
  #gbStage.wt-console--fit .gb-pile{flex:none;}
}