/* ============================================================
   V9 "Ledger Receipt" — the transaction / order / trade detail modal, restyled
   to extend the Sales Ledger language (obsidian, hairline rules, mono figures).
   Scoped under `.v9-receipt` (added to the modal shell) so it overrides the
   legacy `.sales-detail-*` / `.trade-receipt-*` markup without touching the JS
   logic. Amount is the one rationed accent; line items echo the ledger rows.
   ============================================================ */

/* ---- modal shell: an obsidian receipt that sits on the page-dark (--v9-bg),
   exactly like the Analytics page, so it reads as one of us — not a lighter
   floating card. The backdrop blur + border keep it legible over the shell. ---- */
.modal-backdrop:has(.v9-receipt) { background: rgba(0, 0, 0, 0.66); backdrop-filter: blur(3px); }
.v9-receipt {
  position: relative;
  width: min(34rem, 94vw);
  max-height: 92vh;
  overflow: hidden auto;
  scrollbar-width: thin; scrollbar-color: var(--v9-line-strong) transparent;
  background: var(--v9-bg);
  color: var(--v9-text);
  border: 1px solid var(--v9-line);
  border-radius: var(--v9-r-lg, 14px);
  box-shadow: none;
  padding: var(--v9-space-5) var(--v9-space-5) var(--v9-space-4);
  font-family: var(--v9-font-ui);
  animation: v9-receipt-in 220ms var(--v9-ease) both;
}
@keyframes v9-receipt-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
.v9-receipt::-webkit-scrollbar { width: 9px; }
.v9-receipt::-webkit-scrollbar-thumb { background: var(--v9-line-strong); border-radius: 999px; }

.v9-receipt .sales-detail-close,
.v9-receipt .trade-receipt-close {
  position: absolute; top: var(--v9-space-3); right: var(--v9-space-3); z-index: 4;
  width: 2rem; height: 2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--v9-line); border-radius: var(--v9-r-sm); background: var(--v9-raised);
  color: var(--v9-text-mute); font: 400 var(--v9-text-lg)/1 var(--v9-font-ui); cursor: pointer;
  transition: color var(--v9-t-micro) var(--v9-ease), border-color var(--v9-t-micro) var(--v9-ease);
}
.v9-receipt .sales-detail-close:hover,
.v9-receipt .trade-receipt-close:hover { color: var(--v9-text); border-color: var(--v9-line-strong); }

.v9-receipt .sales-detail-stack,
.v9-receipt .trade-receipt-stack { display: grid; gap: var(--v9-space-4); }

/* ---- Legacy chrome reset ---------------------------------------------------
   components.css paints raised backgrounds + borders + radii on the
   .sales-detail-* / .trade-receipt-* containers. In the V9 receipt EVERYTHING
   floats on the modal surface — exactly like the Analytics/Sales pages float on
   the page background — divided only by hairlines, never boxes. Strip the
   inherited chrome here; the few intentional hairlines are re-applied per
   element below (those rules come later, so they win on source order). */
.v9-receipt .sales-detail-grid,
.v9-receipt .trade-receipt-grid,
.v9-receipt .sales-detail-lines-card,
.v9-receipt .sales-detail-lines,
.v9-receipt .sales-detail-line,
.v9-receipt .sales-detail-lifecycle-card,
.v9-receipt .sales-detail-addendum-list,
.v9-receipt .sales-detail-addendum-rows,
.v9-receipt .sales-detail-addendum-row,
.v9-receipt .sales-detail-addendum-card,
.v9-receipt .sales-detail-link-card,
.v9-receipt .sales-detail-stat,
.v9-receipt .record-date-editor,
.v9-receipt .sales-test-toggle {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding-left: 0; padding-right: 0;
}

/* ---- ticket head ---- */
.v9-receipt .sales-detail-header,
.v9-receipt .trade-receipt-head { display: block; padding-right: 2rem; }
.v9-receipt .t-eyebrow {
  font: 500 var(--v9-text-2xs) var(--v9-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--v9-text-faint);
}
.v9-receipt .sales-detail-header h2,
.v9-receipt .trade-receipt-head h2,
.v9-receipt .t-display {
  margin: 4px 0 0; font: 500 var(--v9-text-lg) var(--v9-font-mono); letter-spacing: -0.01em; color: var(--v9-text); word-break: break-word;
}
.v9-receipt .sales-detail-header-meta,
.v9-receipt .trade-receipt-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v9-space-2); margin-top: var(--v9-space-3); }

/* status + meta badges → ledger chips */
.v9-receipt .badge,
.v9-receipt [class*='status'] {
  font: 400 var(--v9-text-2xs) var(--v9-font-mono); letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--v9-r-sm); border: 1px solid var(--v9-line-strong);
  color: var(--v9-text-faint); background: transparent; white-space: nowrap;
}
.v9-receipt .badge.test-data-badge,
.v9-receipt .test-data-badge { color: var(--v9-warn); border-color: color-mix(in srgb, var(--v9-warn) 45%, transparent); }
.v9-receipt [class*='void'], .v9-receipt [class*='failed'], .v9-receipt [class*='refunded'] { color: var(--v9-neg); border-color: color-mix(in srgb, var(--v9-neg) 40%, transparent); }
.v9-receipt [class*='pending'], .v9-receipt [class*='processing'] { color: var(--v9-warn); border-color: color-mix(in srgb, var(--v9-warn) 45%, transparent); }
.v9-receipt [class*='completed'], .v9-receipt [class*='paid'] { color: var(--v9-pos); border-color: color-mix(in srgb, var(--v9-pos) 40%, transparent); }

/* ---- amount key-figure (added in JS as .v9-receipt-total) ---- */
.v9-receipt-total {
  display: grid; gap: 2px; justify-items: start; text-align: left;
  padding: var(--v9-space-4) 0; border-block: 1px solid var(--v9-line);
}
.v9-receipt-total .v9-receipt-total-label { font: 500 var(--v9-text-2xs) var(--v9-font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--v9-text-faint); }
/* light weight (not bold) — the ledger's figures are weight 300; a big light
   mono number reads elegant, a bold one reads blocky. Accent + scale carry it. */
.v9-receipt-total .v9-receipt-total-value { font: 300 var(--v9-text-display, 2rem)/1 var(--v9-font-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--v9-accent); }
.v9-receipt-total.is-out .v9-receipt-total-value { color: var(--v9-text-mute); }
.v9-receipt-total.is-void .v9-receipt-total-value { color: var(--v9-text-faint); text-decoration: line-through; }

/* ---- figures list (the stat grid → label→value rows) ---- */
.v9-receipt .sales-detail-grid,
.v9-receipt .trade-receipt-grid { display: grid; gap: 0; grid-template-columns: 1fr; }
.v9-receipt .sales-detail-stat {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--v9-space-4);
  padding: 4px 0; border-bottom: 1px solid var(--v9-line);
}
.v9-receipt .sales-detail-grid > .sales-detail-stat:last-child { border-bottom: 0; }
/* breakdown labels speak quietly in the UI voice (sentence case, not a shouty
   uppercase mono form) so the mono figure on the right is the anchor — the
   ledger's "quiet label, light figure" rhythm. */
.v9-receipt .sales-detail-stat .t-eyebrow {
  font: 400 var(--v9-text-sm) var(--v9-font-ui); letter-spacing: 0; text-transform: none; color: var(--v9-text-mute);
}
.v9-receipt .sales-detail-stat strong {
  font: 300 var(--v9-text-sm) var(--v9-font-mono); font-variant-numeric: tabular-nums; color: var(--v9-text); text-align: right;
}

/* ---- section heads ---- */
.v9-receipt .sales-detail-section-head,
.v9-receipt .trade-receipt-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--v9-space-3);
  padding-bottom: 6px; margin-bottom: 0; border-bottom: 1px solid var(--v9-line);
}
.v9-receipt .sales-detail-section-head strong { font: 400 var(--v9-text-xs) var(--v9-font-mono); color: var(--v9-text-faint); }

/* ---- line items → ledger rows (borderless, hairline-separated like the
   breakdown above — NOT a boxed card, which clashed with the flat sales feel) ---- */
.v9-receipt .sales-detail-lines-card { display: grid; gap: 0; border: 0; background: transparent; padding: 0; border-radius: 0; box-shadow: none; }
.v9-receipt .sales-detail-lines { display: grid; gap: 0; }
.v9-receipt .sales-detail-lines.is-scrollable { max-height: 16rem; overflow-y: auto; scrollbar-width: thin; }
.v9-receipt .sales-detail-line {
  display: flex; align-items: center; gap: var(--v9-space-3);
  padding: 7px 0; background: transparent; border-bottom: 1px solid var(--v9-line); border-radius: 0;
  transition: background-color var(--v9-t-micro) var(--v9-ease);
}
.v9-receipt .sales-detail-line:last-child { border-bottom: 0; }
.v9-receipt .sales-detail-line.is-linkable { cursor: pointer; }
.v9-receipt .sales-detail-line.is-linkable:hover { background: var(--v9-raised); }
.v9-receipt .sales-detail-line-main { flex: 1; display: flex; align-items: center; gap: var(--v9-space-3); min-width: 0; }
.v9-receipt .sales-detail-line-media { width: 2rem; height: 2.8rem; object-fit: cover; border-radius: var(--v9-r-sm); border: 1px solid var(--v9-line); flex: 0 0 auto; }
.v9-receipt .sales-detail-line-media.placeholder { display: grid; place-items: center; background: var(--v9-raised); color: var(--v9-text-faint); font: 400 var(--v9-text-xs) var(--v9-font-mono); }
.v9-receipt .sales-detail-line-copy { display: grid; gap: 1px; min-width: 0; }
.v9-receipt .sales-detail-line-copy strong { font: 500 var(--v9-text-sm) var(--v9-font-ui); color: var(--v9-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v9-receipt .sales-detail-line-sub { font: 400 var(--v9-text-xs) var(--v9-font-mono); color: var(--v9-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the per-row "Open inventory detail" CTA is repetitive noise the ledger never
   shows — clickability is carried by cursor + hover fill. Hidden to save a line
   per row and de-clutter; still in the DOM for screen readers. */
.v9-receipt .sales-detail-line-cta { display: none; }
.v9-receipt .sales-detail-line-values { flex: 0 0 auto; display: grid; gap: 1px; justify-items: end; text-align: right; }
/* each sold-item figure IS a ledger row amount: light weight, one step up in
   scale, mono tabular — a direct mirror of .v9-led-row-amt on the Sales page. */
.v9-receipt .sales-detail-line-values strong { font: 300 var(--v9-text-md) var(--v9-font-mono); font-variant-numeric: tabular-nums; color: var(--v9-text); }
.v9-receipt .sales-detail-empty { color: var(--v9-text-mute); font-size: var(--v9-text-sm); padding: var(--v9-space-3) 0; }

/* ---- notes: a boxless left-rule callout, not a raised card ---- */
.v9-receipt .sales-detail-note { display: grid; gap: 3px; padding: 2px 0 2px var(--v9-space-3); border-left: 2px solid var(--v9-line-strong); background: transparent; }
.v9-receipt .sales-detail-note p { margin: 0; font-size: var(--v9-text-sm); color: var(--v9-text-mute); }
.v9-receipt .sales-detail-note.tone-negative { border-left-color: var(--v9-neg); }

/* ---- order checkout-code block ---- */
.v9-receipt .order-code-block { display: grid; gap: var(--v9-space-2); padding: var(--v9-space-4) 0; border-block: 1px solid var(--v9-line); background: transparent; text-align: left; justify-items: start; }
.v9-receipt .order-code-label { font: 500 var(--v9-text-2xs) var(--v9-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--v9-text-faint); }
.v9-receipt .order-code-value { font: 500 var(--v9-text-xl) var(--v9-font-mono); letter-spacing: 0.18em; color: var(--v9-accent); }
.v9-receipt .order-code-instructions { margin: 0; font-size: var(--v9-text-xs); color: var(--v9-text-mute); }
.v9-receipt .order-code-actions { display: flex; gap: var(--v9-space-2); justify-content: flex-start; }

/* ---- link / addendum cards ---- */
.v9-receipt .sales-detail-link-card,
.v9-receipt .sales-detail-addendum-card { display: flex; align-items: center; justify-content: space-between; gap: var(--v9-space-3); padding: var(--v9-space-3) 0; border-bottom: 1px solid var(--v9-line); }
.v9-receipt .sales-detail-link-copy { display: grid; gap: 2px; }
.v9-receipt .sales-detail-link-copy strong { font: 500 var(--v9-text-sm) var(--v9-font-ui); color: var(--v9-text); }
.v9-receipt .sales-detail-link-copy p { margin: 0; font-size: var(--v9-text-xs); color: var(--v9-text-faint); }
.v9-receipt .sales-detail-addendum-rows { display: grid; gap: 0; }
.v9-receipt .sales-detail-addendum-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--v9-space-3); width: 100%;
  padding: 7px 0; border: 0; border-bottom: 1px solid var(--v9-line); background: transparent; cursor: pointer; text-align: left;
  color: var(--v9-text-mute); font: 400 var(--v9-text-xs) var(--v9-font-mono);
}
.v9-receipt .sales-detail-addendum-row:hover { color: var(--v9-text); }
.v9-receipt .sales-detail-addendum-row strong { color: var(--v9-text); font-variant-numeric: tabular-nums; }

/* ---- owner controls: recorded-date editor + test toggle ---- */
.v9-receipt .record-date-editor { display: grid; gap: var(--v9-space-2); padding: var(--v9-space-3) 0; border-bottom: 1px solid var(--v9-line); }
.v9-receipt .record-date-editor-copy { display: grid; gap: 2px; }
.v9-receipt .record-date-editor-copy strong { font: 400 var(--v9-text-sm) var(--v9-font-mono); color: var(--v9-text); }
.v9-receipt .record-date-editor-controls { display: flex; gap: var(--v9-space-2); flex-wrap: wrap; }
.v9-receipt .sales-test-toggle { display: flex; align-items: center; gap: var(--v9-space-2); padding: 7px 0; color: var(--v9-text-mute); font: 400 var(--v9-text-sm) var(--v9-font-ui); cursor: pointer; }
.v9-receipt .sales-test-toggle input { accent-color: var(--v9-accent); }

/* ---- inputs + buttons inside the receipt ---- */
.v9-receipt .input {
  height: 2rem; padding: 0 var(--v9-space-3); background: var(--v9-surface); border: 1px solid var(--v9-line);
  border-radius: var(--v9-r-sm); color: var(--v9-text); font: 400 var(--v9-text-sm) var(--v9-font-ui); color-scheme: dark;
}
.v9-receipt .input:focus { outline: none; border-color: var(--v9-accent); box-shadow: var(--v9-focus-glow); }
.v9-receipt .btn {
  height: 2rem; padding: 0 var(--v9-space-3); display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--v9-r-sm); border: 1px solid var(--v9-line); background: var(--v9-raised);
  color: var(--v9-text-mute); font: 500 var(--v9-text-sm) var(--v9-font-ui); cursor: pointer;
  transition: color var(--v9-t-micro) var(--v9-ease), border-color var(--v9-t-micro) var(--v9-ease), background-color var(--v9-t-micro) var(--v9-ease);
  text-decoration: none;
}
.v9-receipt .btn:hover:not(:disabled) { color: var(--v9-text); border-color: var(--v9-line-strong); }
.v9-receipt .btn:disabled { opacity: 0.45; cursor: default; }
.v9-receipt .btn-primary { background: var(--v9-accent); border-color: var(--v9-accent); color: var(--v9-accent-ink); }
.v9-receipt .btn-primary:hover:not(:disabled) { color: var(--v9-accent-ink); background: var(--v9-accent-press, var(--v9-accent)); }
.v9-receipt .btn-secondary { color: var(--v9-text); }
.v9-receipt .btn-danger { color: var(--v9-neg); border-color: color-mix(in srgb, var(--v9-neg) 40%, var(--v9-line)); }
.v9-receipt .btn-danger:hover:not(:disabled) { color: var(--v9-neg); border-color: var(--v9-neg); background: color-mix(in srgb, var(--v9-neg) 12%, transparent); }

/* ---- trade-only: Stripe payment banner (pending/failed) — a boxless callout ---- */
.v9-receipt .trade-payment-banner {
  display: grid; gap: var(--v9-space-2);
  padding: 2px 0 2px var(--v9-space-3);
  border-left: 2px solid var(--v9-warn);
}
.v9-receipt .trade-payment-banner.is-failed { border-left-color: var(--v9-neg); }
.v9-receipt .trade-payment-banner-copy { display: grid; gap: 2px; }
.v9-receipt .trade-payment-banner-copy strong { font: 500 var(--v9-text-sm) var(--v9-font-ui); color: var(--v9-text); }
.v9-receipt .trade-payment-banner-copy span { font-size: var(--v9-text-xs); color: var(--v9-text-mute); }
.v9-receipt .trade-payment-link strong { font-family: var(--v9-font-mono); color: var(--v9-text-faint); word-break: break-all; }
.v9-receipt .trade-payment-banner-actions { display: flex; gap: var(--v9-space-2); flex-wrap: wrap; margin-top: 2px; }

/* ---- trade receipt: a touch tighter (it carries more sections than the sales
   receipt) and a color beat on the two side subtotals — the Sales page accents
   its rollup totals, so the give/receive subtotals get the accent too. This
   also keeps a color anchor on muted-hero (even / you-pay) trades. ---- */
.v9-receipt.trade-detail-modal .sales-detail-stack { gap: var(--v9-space-3); }
.v9-receipt.trade-detail-modal .v9-receipt-total { padding: var(--v9-space-3) 0; }
.v9-receipt.trade-detail-modal .sales-detail-section-head strong {
  color: var(--v9-accent); font: 400 var(--v9-text-sm) var(--v9-font-mono); font-variant-numeric: tabular-nums;
}

/* ---- disclosures (added in JS as <details class="v9-receipt-more">) ---- */
.v9-receipt-more { border-top: 1px solid var(--v9-line); }
.v9-receipt-more > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: var(--v9-space-3) 0; color: var(--v9-text-mute); font: 500 var(--v9-text-2xs) var(--v9-font-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.v9-receipt-more > summary::-webkit-details-marker { display: none; }
.v9-receipt-more > summary::after { content: '⌄'; color: var(--v9-text-faint); transition: transform var(--v9-t-std) var(--v9-ease); }
.v9-receipt-more[open] > summary::after { transform: rotate(180deg); }
.v9-receipt-more > summary:hover { color: var(--v9-text); }
.v9-receipt-more-body { display: grid; gap: var(--v9-space-1); padding-bottom: var(--v9-space-2); }

/* ---- loading / error ---- */
.v9-receipt .sales-detail-loading,
.v9-receipt .trade-receipt-loading { display: grid; gap: var(--v9-space-3); place-items: center; padding: var(--v9-space-8) var(--v9-space-4); color: var(--v9-text-mute); }

/* ---- mobile: full-screen receipt ---- */
@media (max-width: 640px) {
  .v9-receipt { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; padding: var(--v9-space-5) var(--v9-space-4) var(--v9-space-6); }
  .v9-receipt::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .v9-receipt { animation: none; } }

/* per-record export buttons (sale + trade detail) */
.export-actions-block { display: grid; gap: var(--v9-space-2); }
.export-actions { display: flex; flex-wrap: wrap; gap: var(--v9-space-2); }