/* ═══════════════════════════════════════════════════════════════
   lmbo.fun · records.css · THE DEALER LOT
   /records, the service book of the whole lot (DESIGN.md §5.4, §6):
   one ledger row per payout with its stamp at the right edge, the
   snapshot hash, the csv, the payout rows; claims as CLAIMED lines.
   Tokens only; raw values are geometry.
   ═══════════════════════════════════════════════════════════════ */

.records { display: grid; gap: var(--space-5); padding-bottom: var(--space-6); }
.records-top {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--space-5) var(--grid-gap);
  align-items: stretch;
  padding-top: var(--space-5);
}
.records-top .page-head { grid-column: 1 / span 7; padding-block: var(--space-4); }
.records-windshield { grid-column: 8 / -1; min-height: 250px; }
.records-scope { font: 500 var(--t-small)/1.4 var(--font-mono); overflow-wrap: anywhere; }

.records-filter { display: grid; gap: var(--space-1); max-width: 680px; }
.records-filter .field-label { margin-bottom: var(--space-1); }
.records-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.records-filter-row .field { flex: 1 1 280px; width: auto; font-family: var(--font-mono); }
.records-clear { font: 600 var(--t-small)/1 var(--font-ui); }

/* ── the ledger ───────────────────────────────────────────────── */
.ledger-head,
.ledger-main {
  display: grid;
  grid-template-columns: 104px minmax(130px, 1.3fr) minmax(112px, 1fr) minmax(84px, .8fr) 64px minmax(140px, 1.3fr) 84px 168px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.ledger-head {
  font: 800 var(--t-label)/1 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--ink);
}
.ledger-head .num { text-align: right; }
.ledger-row { border-bottom: 2px solid var(--ink); scroll-margin-top: var(--space-4); }
.ledger-row:last-child { border-bottom: 0; }
.ledger-row:nth-child(even) { background: var(--paper-2); }
.ledger-row:nth-child(even) .stamp { background: transparent; }
.ledger-row.is-target { outline: 3px solid var(--ink); outline-offset: -3px; }
.lg-date { display: grid; gap: 2px; font: 700 var(--t-small)/1.2 var(--font-mono); }
.lg-date span { font-weight: 500; font-size: var(--t-label); color: var(--ink-2); }
.lg-car { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; font: 600 var(--t-small)/1.2 var(--font-ui); }
.lg-mile { font: 700 var(--t-label)/1.3 var(--font-mono); }
.lg-quote .qref { font-size: var(--t-label); }
.lg-owners { text-align: right; font: 700 var(--t-small)/1 var(--font-mono); }
.lg-total { display: grid; justify-items: end; gap: 2px; text-align: right; min-width: 0; }
.lg-total b { font: 700 var(--t-small)/1.2 var(--font-mono); overflow-wrap: anywhere; }
.lg-total span { font: 500 var(--t-label)/1.2 var(--font-mono); color: var(--ink-2); }
.lg-stamp { justify-self: end; padding: var(--space-2) var(--space-2) var(--space-2) 0; }
.lg-stamp .stamp { font-size: var(--t-label); }
.lg-stamp .stamp-word { font-size: var(--t-body); }

.ledger-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-3) var(--space-5);
  padding: 0 var(--space-4) var(--space-4);
}
.ledger-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px var(--space-3); margin: 0; font-size: var(--t-small); }
.ledger-facts dt { color: var(--ink-2); }
.ledger-facts dd { margin: 0; font: 500 var(--t-small)/1.4 var(--font-mono); overflow-wrap: anywhere; }
.ledger-hash { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ledger-hash code { word-break: break-all; }
.ledger-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-3); }
.ledger-link { font: 600 var(--t-small)/1 var(--font-ui); }
.ledger-note { grid-column: 1 / -1; font: 500 var(--t-small)/1.4 var(--font-ui); }
.ledger-payouts { padding: 0 var(--space-4) var(--space-4); }
.ledger-sum { margin-bottom: var(--space-2); font: 600 var(--t-small)/1.4 var(--font-ui); }
.ledger-scroll { max-height: 460px; overflow: auto; background: var(--sticker); border: 2px solid var(--ink); }
.ledger-empty { display: grid; gap: var(--space-2); padding: var(--space-6) var(--space-4); }

/* ── claims: CLAIMED lines in ink, no stamp ───────────────────── */
.claim-row {
  display: grid;
  grid-template-columns: auto 104px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px dotted var(--rule);
}
.claim-row:last-child { border-bottom: 0; }
.claim-word {
  padding: var(--space-1) var(--space-2) 2px;
  font: 900 var(--t-small)/1 var(--font-display);
  letter-spacing: .1em;
  border: 2px solid var(--ink);
}
.claim-car { font: 700 var(--t-small)/1.2 var(--font-mono); }
.claim-venue { font: 400 var(--t-small)/1.3 var(--font-ui); color: var(--ink-2); }
.claim-amt { font: 700 var(--t-small)/1.2 var(--font-mono); text-align: right; }
.claim-sig { font: 500 var(--t-small)/1.2 var(--font-mono); }

.check-steps { display: grid; gap: var(--space-3); margin: 0; padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + var(--space-4)); list-style: decimal; font: 400 var(--t-small)/1.55 var(--font-ui); }
.check-steps li::marker { font: 700 var(--t-small) var(--font-mono); }

@media (max-width: 1099px) {
  .records-top .page-head, .records-windshield { grid-column: 1 / -1; }
  .records-windshield { min-height: 200px; }
  .ledger-head { display: none; }
  .ledger-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas:
      "date car status"
      "mile quote quote"
      "owners total total"
      "stamp stamp stamp";
  }
  .lg-date { grid-area: date; } .lg-car { grid-area: car; } .lg-status { grid-area: status; justify-self: end; }
  .lg-mile { grid-area: mile; } .lg-quote { grid-area: quote; justify-self: end; }
  .lg-owners { grid-area: owners; text-align: left; } .lg-owners::after { content: " owners"; font-weight: 500; }
  .lg-total { grid-area: total; }
  .lg-stamp { grid-area: stamp; justify-self: start; padding-left: var(--space-2); }
  .ledger-meta { grid-template-columns: minmax(0, 1fr); }
  .ledger-actions { justify-content: flex-start; }
  .claim-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .claim-venue { grid-column: 2 / -1; }
}
@media (max-width: 520px) {
  .ledger-main { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date status" "car car" "mile quote" "owners total" "stamp stamp"; }
  .claim-row { grid-template-columns: minmax(0, 1fr) auto; }
  .claim-word { justify-self: start; }
}