/* ==========================================================================
   live-build-claims.css — Feature #5 · Verifiable Claims.
   Overlays only (never inside #doc). Inherits the builder's brand tokens
   (--clay, --ink, --paper …) so art-direction restyles it for free.
   ========================================================================== */
:root{
  --vc-ink:#2a221d; --vc-clay:#ba4526; --vc-clay-deep:#8f3319; --vc-paper:#fffdf8;
  --vc-cream:#f7f1e6; --vc-line:#e4dccb; --vc-muted:#6b6152; --vc-gold:#b98a2e; --vc-good:#4a5a45;
  --vc-mono:'JetBrains Mono',ui-monospace,monospace; --vc-sans:'Plus Jakarta Sans',system-ui,sans-serif; --vc-serif:'Newsreader',Georgia,serif;
  --vc-shadow:0 2px 8px rgba(42,34,29,.08), 0 24px 60px -28px rgba(42,34,29,.36);
}
#vc-overlay{ position:fixed; inset:0; pointer-events:none; z-index:64; }
#vc-overlay > *{ pointer-events:auto; }

/* ---- the badge pin (⬢) ---- */
.vc-pin{ position:absolute; width:18px; height:18px; padding:0; border:none; background:none; cursor:pointer;
  color:var(--ink,#2a221d); opacity:.55; font-size:13px; line-height:18px; text-align:center; z-index:61; transition:opacity .15s, transform .15s; }
.vc-pin:hover, .vc-pin:focus-visible{ opacity:1; transform:scale(1.18); outline:none; }
.vc-pin-flash{ animation:vcPinPop .5s ease; }
@keyframes vcPinPop{ 0%{ transform:scale(0); opacity:0; } 60%{ transform:scale(1.5); opacity:1; } 100%{ transform:scale(1); opacity:.55; } }
.vc-vcode-flash{ position:absolute; font-family:var(--vc-mono); font-size:10px; color:var(--vc-clay); background:var(--vc-paper); border:1px solid var(--vc-line); border-radius:5px; padding:1px 6px; z-index:62; animation:vcFade 1.4s ease forwards; }
@keyframes vcFade{ 0%,60%{ opacity:1; } 100%{ opacity:0; } }

/* ---- floating cards (proof / soften) ---- */
.vc-float{ position:absolute; width:min(420px,92vw); background:var(--vc-paper); border:1px solid var(--vc-line); border-radius:14px; box-shadow:var(--vc-shadow); padding:16px 18px; z-index:70; font-family:var(--vc-sans); color:var(--vc-ink); font-size:14px; }
.vc-x{ position:absolute; top:10px; right:12px; font-size:19px; color:var(--vc-muted); cursor:pointer; line-height:1; background:none; border:none; }
.vc-kchip, .vc-sheet-kchip{ display:inline-block; font-family:var(--vc-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--vc-muted); border:1px solid var(--vc-line); border-radius:20px; padding:2px 8px; }
.vc-claim{ font-family:var(--vc-serif); font-weight:600; font-size:19px; margin:10px 0 12px; line-height:1.2; }
.vc-evidence{ margin:8px 0; }
.vc-ev-lbl{ font-family:var(--vc-mono); font-size:11px; color:var(--vc-muted); margin-bottom:5px; }
.vc-table{ max-height:150px; overflow:auto; border:1px solid var(--vc-line); border-radius:8px; }
.vc-table table{ border-collapse:collapse; width:100%; font-family:var(--vc-mono); font-size:11px; }
.vc-table th{ position:sticky; top:0; background:var(--vc-cream); text-align:left; padding:4px 8px; color:var(--vc-muted); border-bottom:1px solid var(--vc-line); }
.vc-table td{ padding:3px 8px; border-bottom:1px solid var(--vc-line); }
.vc-table tr.hot td{ background:rgba(186,69,38,.12); color:var(--vc-clay-deep); font-weight:600; }
.vc-stmt{ font-size:13px; color:var(--vc-ink); background:var(--vc-cream); border-radius:8px; padding:8px 10px; }
.vc-steps{ margin:12px 0; display:grid; gap:5px; }
.vc-step{ display:grid; grid-template-columns:auto auto 1fr auto; gap:8px; align-items:baseline; font-family:var(--vc-mono); font-size:11.5px; padding:4px 8px; border-radius:7px; background:var(--vc-cream); }
.vc-step.fail{ background:rgba(186,69,38,.1); }
.vc-step-n{ color:var(--vc-muted); } .vc-step-l{ font-weight:600; color:var(--vc-ink); }
.vc-step-d{ color:var(--vc-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .vc-step:hover .vc-step-d{ white-space:normal; }
.vc-step-m{ color:var(--vc-good); font-weight:700; } .vc-step.fail .vc-step-m{ color:var(--vc-clay); }
.vc-who{ font-family:var(--vc-mono); font-size:11px; color:var(--vc-muted); margin:8px 0; }
.vc-actions{ display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.vc-btn{ font-family:var(--vc-sans); font-size:13px; font-weight:600; border:1px solid var(--vc-line); background:var(--vc-paper); color:var(--vc-ink); border-radius:9px; padding:8px 13px; cursor:pointer; }
.vc-btn:hover{ border-color:#d8cdb6; }
.vc-btn.primary{ background:var(--vc-clay); color:#fff; border-color:var(--vc-clay); }
.vc-btn.primary:hover{ background:var(--vc-clay-deep); }
.vc-btn.ghost{ background:transparent; }
.vc-btn.tiny{ font-size:11.5px; padding:5px 9px; border-radius:7px; }
.vc-proves{ margin-top:10px; border-top:1px solid var(--vc-line); padding-top:8px; }
.vc-proves summary{ font-family:var(--vc-mono); font-size:11px; color:var(--vc-clay); cursor:pointer; }
.vc-proves-body{ font-size:12.5px; color:var(--vc-muted); line-height:1.5; margin-top:8px; }
.vc-proves-body b{ color:var(--vc-ink); }
.vc-foot{ font-family:var(--vc-mono); font-size:10.5px; color:var(--vc-muted); margin-top:10px; }
.vc-step-run{ font-family:var(--vc-mono); font-size:11px; color:var(--vc-muted); }

/* ---- modals (backing sheet / json / tamper) ---- */
.vc-modal{ position:fixed; inset:0; z-index:80; background:rgba(23,19,16,.5); display:flex; align-items:center; justify-content:center; padding:24px; }
.vc-modal-box{ position:relative; width:min(560px,94vw); max-height:88vh; overflow:auto; background:var(--vc-paper); border:1px solid var(--vc-line); border-radius:16px; box-shadow:var(--vc-shadow); padding:24px; font-family:var(--vc-sans); color:var(--vc-ink); }
.vc-sheet-claim{ font-family:var(--vc-serif); font-weight:600; font-size:24px; margin:12px 0 16px; line-height:1.2; }
.vc-sheet-q{ font-weight:700; margin-bottom:10px; }
.vc-pickers{ display:grid; gap:8px; }
.vc-picker{ text-align:left; border:1px solid var(--vc-line); border-radius:11px; padding:12px 14px; cursor:pointer; background:var(--vc-cream); }
.vc-picker.on{ border-color:var(--vc-clay); background:rgba(186,69,38,.06); }
.vc-picker b{ display:block; font-size:14px; margin-bottom:3px; }
.vc-picker span{ font-size:12.5px; color:var(--vc-muted); line-height:1.45; }
.vc-check-preview{ font-family:var(--vc-mono); font-size:11.5px; color:var(--vc-clay-deep); background:var(--vc-cream); border:1px solid var(--vc-line); border-radius:8px; padding:9px 11px; margin:12px 0; }
.vc-attestor{ display:flex; gap:8px; margin-bottom:14px; }
.vc-attestor input{ flex:1; border:1px solid var(--vc-line); border-radius:9px; padding:9px 11px; font:inherit; font-size:13px; }
.vc-sheet-actions{ display:flex; gap:8px; }
.vc-demo-note{ font-family:var(--vc-mono); font-size:10.5px; color:var(--vc-muted); margin-top:14px; line-height:1.5; border-left:3px solid var(--vc-gold); padding-left:9px; }
.vc-json{ font-family:var(--vc-mono); font-size:11px; line-height:1.5; white-space:pre-wrap; word-break:break-word; background:var(--vc-cream); border:1px solid var(--vc-line); border-radius:8px; padding:12px; max-height:60vh; overflow:auto; }

/* ---- owner panel ---- */
.vc-panel, .vc-panel-float{ font-family:var(--vc-sans); color:var(--vc-ink); font-size:13.5px; }
.vc-panel-float{ position:fixed; right:16px; top:70px; bottom:16px; width:380px; overflow-y:auto; background:var(--vc-paper); border:1px solid var(--vc-line); border-radius:14px; box-shadow:var(--vc-shadow); z-index:55; padding:16px; }
.vc-panel{ padding:4px 2px; }
.vc-panel-head{ margin-bottom:12px; }
.vc-panel-title{ font-family:var(--vc-serif); font-weight:600; font-size:19px; }
.vc-panel-status{ font-family:var(--vc-mono); font-size:11px; color:var(--vc-muted); margin-top:5px; line-height:1.6; }
.vc-rootchip{ display:inline-block; background:var(--vc-cream); border:1px solid var(--vc-line); border-radius:20px; padding:2px 8px; color:var(--vc-clay-deep); margin-left:4px; }
.vc-rootchip.muted{ color:var(--vc-muted); }
.vc-spots{ display:grid; gap:10px; margin:12px 0; }
.vc-spot{ border:1px solid var(--vc-clay); border-radius:12px; padding:13px 14px; background:rgba(186,69,38,.05); }
.vc-spot-title{ font-family:var(--vc-serif); font-weight:600; font-size:16px; margin-bottom:6px; }
.vc-spot-body{ font-size:13px; color:var(--vc-muted); line-height:1.5; }
.vc-spot-actions{ display:flex; gap:8px; margin-top:11px; flex-wrap:wrap; }
.vc-triage{ margin-top:6px; }
.vc-group{ font-family:var(--vc-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--vc-muted); margin:14px 0 6px; }
.vc-row{ display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:start; padding:10px 8px; border-radius:10px; border:1px solid var(--vc-line); margin-bottom:6px; background:var(--vc-paper); }
.vc-row.vc-risky{ border-color:var(--vc-gold); background:rgba(185,138,46,.05); }
.vc-row.vc-broken{ border-color:var(--vc-gold); background:rgba(185,138,46,.05); }
.vc-row.vc-verified{ border-color:#cfe0c6; }
.vc-glyph{ font-size:14px; color:var(--vc-muted); }
.vc-row.vc-verified .vc-glyph{ color:var(--vc-good); }
.vc-row.vc-risky .vc-glyph{ color:var(--vc-gold); }
.vc-row-claim{ font-weight:600; font-size:13.5px; }
.vc-row-meta{ display:flex; gap:6px; flex-wrap:wrap; margin-top:5px; }
.vc-chip{ font-family:var(--vc-mono); font-size:10px; border:1px solid var(--vc-line); border-radius:20px; padding:2px 7px; color:var(--vc-muted); }
.vc-chip.path{ cursor:pointer; } .vc-chip.path:hover{ color:var(--vc-clay); }
.vc-chip.vgood{ color:var(--vc-good); border-color:#cfe0c6; }
.vc-reason{ font-size:12px; color:var(--vc-clay-deep); margin-top:6px; line-height:1.45; }
.vc-row-actions{ display:flex; flex-direction:column; gap:5px; }
.vc-inline-steps{ grid-column:1/-1; margin-top:8px; }
.vc-opinion{ margin-top:14px; }
.vc-opinion summary{ font-family:var(--vc-mono); font-size:11px; color:var(--vc-muted); cursor:pointer; }
.vc-op-row{ font-size:12.5px; color:var(--vc-muted); font-style:italic; padding:5px 0; }
.vc-panel-foot{ display:flex; gap:6px; flex-wrap:wrap; margin-top:16px; border-top:1px solid var(--vc-line); padding-top:12px; }

/* ---- record page ---- */
.vc-record-page{ position:fixed; inset:0; z-index:85; background:#f4efe4; overflow-y:auto; padding:40px clamp(20px,6vw,80px); font-family:var(--vc-mono); color:var(--vc-ink); font-size:13px; line-height:1.6; }
.vc-record-page .vc-x{ position:fixed; top:18px; right:24px; font-size:26px; }
.vc-rec-head{ font-family:var(--vc-serif); font-weight:600; font-size:26px; margin-bottom:8px; }
.vc-rec-head .mono{ font-family:var(--vc-mono); font-size:11px; color:var(--vc-muted); font-weight:400; }
.vc-rec-claim{ border-top:1px solid var(--vc-line); padding:14px 0; }
.vc-rec-claim.focus{ background:rgba(186,69,38,.06); }
.vc-rec-c{ font-family:var(--vc-sans); font-weight:600; font-size:15px; margin-bottom:6px; }
.vc-rec-c .mono{ font-family:var(--vc-mono); font-size:11px; color:var(--vc-clay); font-weight:400; }
.vc-rec-steps{ margin-top:8px; }
.vc-rec-json pre{ font-size:11px; white-space:pre-wrap; word-break:break-word; background:#fffdf8; border:1px solid var(--vc-line); border-radius:8px; padding:14px; }
.vc-rec-foot{ margin-top:20px; color:var(--vc-muted); font-size:11px; }

/* ---- tamper ---- */
.vc-tamper-h{ font-family:var(--vc-serif); font-weight:600; font-size:22px; }
.vc-tamper-sub{ font-size:13px; color:var(--vc-muted); margin:6px 0 16px; }
.vc-tamper-lanes{ display:grid; gap:10px; }
.vc-lane{ border:1px solid var(--vc-line); border-radius:11px; padding:12px 14px; background:var(--vc-cream); }
.vc-lane.fail{ border-color:var(--vc-clay); background:rgba(186,69,38,.06); }
.vc-lane-h{ font-weight:700; font-size:14px; display:flex; justify-content:space-between; align-items:center; }
.vc-lane-verdict{ font-family:var(--vc-mono); font-size:11px; color:var(--vc-clay); }
.vc-lane-d{ font-size:12.5px; color:var(--vc-muted); margin:6px 0; }
.vc-lane-hashes{ font-family:var(--vc-mono); font-size:11px; display:flex; gap:8px; align-items:center; }
.vc-lane-hashes code{ background:var(--vc-paper); border:1px solid var(--vc-line); border-radius:5px; padding:2px 6px; }
.vc-lane-hashes span{ color:var(--vc-clay); font-weight:700; }
.vc-tamper-end{ margin:16px 0; font-size:14px; line-height:1.5; }
.vc-tamper-end b{ font-family:var(--vc-serif); font-size:17px; }

/* ---- sweep scan ---- */
#vc-scan{ position:absolute; z-index:59; pointer-events:none; overflow:hidden; }
#vc-scan::after{ content:''; position:absolute; left:0; right:0; height:60px; background:linear-gradient(180deg, transparent, rgba(186,69,38,.18), transparent); animation:vcScan 1.1s ease-out forwards; }
@keyframes vcScan{ from{ top:-60px; } to{ top:100%; } }

/* ---- flash a section ---- */
.vc-flash{ animation:vcSecFlash 0.9s ease; }
@keyframes vcSecFlash{ 0%,100%{ box-shadow:none; } 40%{ box-shadow:0 0 0 3px rgba(186,69,38,.3); } }

/* ---- status chip ---- */
.vc-chip-status{ cursor:pointer; }
.vc-chip-status.vc-risky{ color:var(--vc-gold) !important; }

/* ---- toast ---- */
.vc-toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:120; background:var(--vc-ink); color:var(--vc-cream); font-size:13px; padding:10px 16px; border-radius:10px; box-shadow:var(--vc-shadow); }

@media (prefers-reduced-motion: reduce){ .vc-pin-flash, #vc-scan::after, .vc-flash{ animation:none; } .vc-step{ opacity:1 !important; } }