/* ═══════════════════════════════════════════════════════════════════════════
   SweepR — "What the world sees" chain-analysis comparison
   Owns everything inside #ledgerMount. Every rule is scoped to .ledger-* so it
   cannot leak into the rest of bridge.html. Tokens come from :root there.
   ═══════════════════════════════════════════════════════════════════════════ */

.ledger-section{margin-top:74px;scroll-margin-top:110px}

/* ── Heading ── */
.ledger-head{text-align:center;max-width:66ch;margin:0 auto 26px}
.ledger-kicker{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--magenta);
}
.ledger-title{
  margin:16px 0 11px;font-family:'Space Grotesk','Inter',sans-serif;
  font-size:clamp(26px,3.7vw,42px);line-height:1.08;font-weight:700;letter-spacing:-.036em;
}
.ledger-title em{
  font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.ledger-sub{color:var(--muted);font-size:15px;line-height:1.68}

/* ── Run control ── */
.ledger-control{display:flex;flex-direction:column;align-items:center;gap:11px;margin:0 0 26px}
.ledger-run{
  display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:15px;
  background:var(--grad);color:#fff;font-size:14.5px;font-weight:700;
  box-shadow:0 14px 38px rgba(139,92,246,.4);transition:all .28s var(--ease);
}
.ledger-run:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 20px 50px rgba(139,92,246,.55)}
.ledger-run:disabled{opacity:.62;cursor:default;box-shadow:none}
.ledger-run svg{width:16px;height:16px}
.ledger-run.is-running svg{animation:ledger-spin 1.1s linear infinite}
@keyframes ledger-spin{to{transform:rotate(360deg)}}
.ledger-hint{font-size:11.5px;color:var(--faint);letter-spacing:.02em;text-align:center}

/* ── Panels ── */
.ledger-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ledger-panel{
  position:relative;display:flex;flex-direction:column;padding:20px 20px 18px;border-radius:var(--r-xl);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;
}
.ledger-panel::before{content:'';position:absolute;left:0;right:0;top:0;height:2px}
.ledger-panel.is-bad::before{background:linear-gradient(90deg,transparent,var(--rose),transparent)}
.ledger-panel.is-good::before{background:linear-gradient(90deg,transparent,var(--mint),transparent)}
.ledger-panel.is-bad{border-color:rgba(251,113,133,.2)}
.ledger-panel.is-good{border-color:rgba(52,224,176,.2)}

.ledger-panel-head{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.ledger-panel-icon{
  width:34px;height:34px;flex-shrink:0;border-radius:11px;display:flex;align-items:center;justify-content:center;
}
.ledger-panel-icon svg{width:17px;height:17px}
.ledger-panel.is-bad .ledger-panel-icon{background:rgba(251,113,133,.13);border:1px solid rgba(251,113,133,.32);color:var(--rose)}
.ledger-panel.is-good .ledger-panel-icon{background:rgba(52,224,176,.13);border:1px solid rgba(52,224,176,.32);color:var(--mint)}
.ledger-panel-name{
  font-family:'Space Grotesk','Inter',sans-serif;font-size:16.5px;font-weight:700;letter-spacing:-.02em;
}
.ledger-panel-note{font-size:11.5px;color:var(--faint);margin-top:2px}
.ledger-panel-sub{font-size:12.6px;color:var(--muted);line-height:1.6;margin:0 0 15px}

/* ── Rows ── */
.ledger-rows{
  flex:1;padding:13px 14px;border-radius:var(--r-md);
  background:rgba(4,5,11,.62);border:1px solid var(--line);
}
.ledger-row{position:relative;padding:9px 0 9px 24px;min-width:0}
.ledger-row::before{
  content:'';position:absolute;left:1px;top:15px;width:9px;height:9px;border-radius:50%;
  background:rgba(10,12,22,1);border:1.5px solid rgba(255,255,255,.18);transition:all .4s var(--ease);
}
.ledger-row:not(:last-child)::after{
  content:'';position:absolute;left:5.2px;top:26px;bottom:-4px;width:1.5px;
  background:rgba(255,255,255,.09);transition:background .4s var(--ease);
}
.ledger-row-label{
  font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(226,232,255,.3);
}
.ledger-row-val{
  display:flex;align-items:center;gap:8px;margin-top:4px;min-width:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.3px;font-variant-numeric:tabular-nums;color:rgba(226,232,255,.3);
  transition:color .4s var(--ease);
}
.ledger-row-text{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ledger-tag{
  flex-shrink:0;padding:3px 7px;border-radius:6px;font-family:'Inter',sans-serif;
  font-size:8.5px;font-weight:800;letter-spacing:.11em;
  opacity:0;transform:translateX(5px);transition:all .4s var(--ease);
}
.ledger-tag.t-bad{background:rgba(251,113,133,.14);border:1px solid rgba(251,113,133,.34);color:#fda4af}
.ledger-tag.t-good{background:rgba(52,224,176,.13);border:1px solid rgba(52,224,176,.34);color:#6ee7c4}
.ledger-tag.t-neutral{background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--muted)}

/* scanning */
.ledger-row.is-scanning::before{
  border-color:var(--cyan);background:var(--cyan);box-shadow:0 0 0 5px rgba(34,211,238,.16);
}
.ledger-row.is-scanning .ledger-row-val{color:var(--cyan)}

/* resolved */
.ledger-row.is-resolved .ledger-row-val{color:rgba(238,241,255,.86)}
.ledger-row.is-resolved .ledger-tag{opacity:1;transform:none}
.ledger-panel.is-bad .ledger-row.is-resolved::before{border-color:rgba(251,113,133,.7);background:rgba(251,113,133,.5)}
.ledger-panel.is-bad .ledger-row.is-resolved:not(:last-child)::after{background:rgba(251,113,133,.42)}
.ledger-panel.is-good .ledger-row.is-resolved::before{border-color:rgba(52,224,176,.6);background:rgba(52,224,176,.35)}
.ledger-panel.is-good .ledger-row.is-resolved:not(:last-child)::after{background:rgba(52,224,176,.3)}
.ledger-row.is-resolved.is-muted .ledger-row-val{color:rgba(226,232,255,.4);font-style:italic}

/* the severed link */
.ledger-row.is-break:not(:last-child)::after{
  background:none!important;border-left:1.5px dashed rgba(52,224,176,.55);width:0;left:5px;
}
.ledger-break{
  display:none;align-items:center;gap:7px;margin:9px 0 3px;padding:7px 10px;border-radius:9px;
  background:rgba(52,224,176,.08);border:1px dashed rgba(52,224,176,.4);
  font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--mint);
}
.ledger-row.is-resolved .ledger-break{display:flex;animation:ledger-pop .45s var(--ease) both}
.ledger-break svg{width:12px;height:12px}
@keyframes ledger-pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* ── Verdict ── */
.ledger-verdict{
  display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px 15px;border-radius:var(--r-md);
  border:1px solid transparent;opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none;
}
.ledger-verdict.is-shown{opacity:1;transform:none}
.ledger-panel.is-bad .ledger-verdict{background:rgba(251,113,133,.09);border-color:rgba(251,113,133,.32)}
.ledger-panel.is-good .ledger-verdict{background:rgba(52,224,176,.08);border-color:rgba(52,224,176,.32)}
.ledger-verdict-icon{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:11px}
.ledger-verdict-icon svg{width:18px;height:18px}
.ledger-panel.is-bad .ledger-verdict-icon{background:rgba(251,113,133,.16);color:var(--rose)}
.ledger-panel.is-good .ledger-verdict-icon{background:rgba(52,224,176,.16);color:var(--mint)}
.ledger-verdict-body{flex:1;min-width:0}
.ledger-verdict-title{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ledger-panel.is-bad .ledger-verdict-title{color:#fda4af}
.ledger-panel.is-good .ledger-verdict-title{color:#6ee7c4}
.ledger-verdict-note{font-size:12px;color:var(--muted);margin-top:3px}
.ledger-conf{text-align:right;flex-shrink:0}
.ledger-conf-num{
  font-family:'Space Grotesk','Inter',sans-serif;font-size:24px;font-weight:700;letter-spacing:-.03em;
  line-height:1;font-variant-numeric:tabular-nums;
}
.ledger-panel.is-bad .ledger-conf-num{color:var(--rose)}
.ledger-panel.is-good .ledger-conf-num{color:var(--mint)}
.ledger-conf-label{font-size:8.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:4px}

/* ── Responsive ───────────────────────────────────────────────────────────
     ≤860px  the two reports stack, ordinary payment first
     ≤640px  phone padding, full-width run button
     ≤480px  values wrap instead of being ellipsed away, labels stay legible
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width:860px){
  .ledger-section{margin-top:56px}
  .ledger-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .ledger-panel{padding:18px 16px}
  .ledger-run{min-height:48px}
}
@media (max-width:640px){
  .ledger-section{margin-top:52px}
  .ledger-head{margin-bottom:22px}
  .ledger-panel{padding:16px 14px;border-radius:24px}
  .ledger-rows{padding:11px}
  .ledger-row-val{font-size:11.9px}
  .ledger-run{width:100%;justify-content:center}
}
@media (max-width:480px){
  .ledger-kicker{padding:6px 12px;letter-spacing:.14em}
  .ledger-title{font-size:clamp(23px,6.4vw,26px)}
  .ledger-sub{font-size:14px;line-height:1.62}
  .ledger-control{margin-bottom:22px}
  .ledger-hint{font-size:12px}
  .ledger-panel{padding:15px 12px}
  .ledger-panel-sub{font-size:13px;margin-bottom:13px}
  .ledger-rows{padding:10px 9px}
  .ledger-row{padding-left:22px}
  .ledger-row-label{font-size:10.5px;letter-spacing:.13em}
  /* A full address or "Exchange account · 4471-XB" is longer than a phone is
     wide: let it wrap onto a second line rather than ellipsing it into
     nothing, and keep the tag top-aligned beside it. */
  .ledger-row-val{align-items:flex-start;font-size:12px;gap:7px}
  .ledger-row-text{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  .ledger-tag{font-size:9.5px;letter-spacing:.09em;padding:3px 6px;margin-top:1px}
  .ledger-break{font-size:10px;letter-spacing:.12em;padding:7px 9px}
  .ledger-verdict{flex-wrap:wrap;padding:13px 12px;gap:11px}
  .ledger-verdict-title{font-size:12.5px;letter-spacing:.07em}
  .ledger-conf{text-align:left}
  .ledger-conf-label{font-size:9.5px;letter-spacing:.12em}
}
@media (prefers-reduced-motion:reduce){
  .ledger-run.is-running svg{animation:none}
  .ledger-row.is-resolved .ledger-break{animation:none}
}