/* EXAMPLE proof cards on the "Proof has a status" page. */
.proof-examples { margin:22px 0 28px; }
.proof-examples-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:16px; }
.proof-examples-head h2 { margin:6px 0 4px; font-size:clamp(22px,2.6vw,30px); }
.proof-examples-head p { margin:0; color:var(--muted); font-size:13px; max-width:640px; }
.proof-examples-hidden { margin:16px 0; }
.proof-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.proof-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.proof-card-media { position:relative; }
.proof-card-body { display:flex; flex-direction:column; gap:7px; padding:14px 15px 16px; flex:1; }
.proof-card-body h3 { margin:0; font-size:16px; line-height:1.3; }
.proof-card-tags { display:flex; flex-wrap:wrap; gap:6px; }
.proof-example-badge { padding:3px 8px; border-radius:999px; background:#ffd84d; color:#2a2100; font:800 9px/1.4 var(--font-mono); letter-spacing:.08em; }
.proof-status { padding:3px 8px; border-radius:999px; font-size:10px; font-weight:800; border:1px solid currentColor; }
.proof-status.green { color:var(--green); } .proof-status.cyan { color:var(--cyan); } .proof-status.gold { color:var(--gold); } .proof-status.coral { color:var(--coral); }
.proof-kind { color:var(--muted); font-size:11px; }
.proof-value { font:700 24px/1.1 var(--font-display); color:var(--ink-strong); }
.proof-value small { font-size:12px; font-weight:500; color:var(--muted); }
.proof-value em { display:block; margin-top:2px; font:500 9px var(--font-mono); font-style:normal; letter-spacing:.08em; text-transform:uppercase; color:#e7b800; }
.proof-value.large { font-size:34px; margin:14px 0 6px; }
.proof-place { margin:0; color:var(--muted); font-size:11px; }
.proof-limit { margin:2px 0 0; color:var(--muted); font-size:11.5px; line-height:1.45; }
.proof-limit b { color:var(--ink); }
.proof-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:8px; }
.proof-timeline { display:flex; flex-wrap:wrap; gap:3px; margin:4px 0 0; padding:0; list-style:none; }
.proof-timeline li { padding:2px 6px; border-radius:5px; border:1px solid var(--line); color:var(--dim); font-size:9.5px; }
.proof-timeline li.done { color:var(--ink); border-color:var(--line-strong); }
.proof-timeline li.current { background:var(--cyan); border-color:var(--cyan); color:#06151f; font-weight:800; }
.proof-timeline li.side.current { background:var(--coral); border-color:var(--coral); }

/* Media frames + watermark */
.proof-media-frame { position:relative; aspect-ratio:16/9; overflow:hidden; background:#0b2630; user-select:none; }
.proof-media-frame img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.proof-media-loading { display:grid; place-items:center; height:100%; color:var(--muted); font-size:11px; }
.proof-watermark { position:absolute; inset:0; z-index:3; display:grid; place-items:center; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='90'%3E%3Ctext x='10' y='55' transform='rotate(-22 85 45)' font-family='Arial' font-weight='700' font-size='17' fill='white' fill-opacity='.22' letter-spacing='3'%3EEXAMPLE%3C/text%3E%3C/svg%3E"); }
.proof-watermark b { transform:rotate(-18deg); padding:4px 16px; border:3px solid rgba(255,216,77,.9); border-radius:6px; color:rgba(255,216,77,.95); font:900 clamp(20px,4vw,34px)/1 Arial,sans-serif; letter-spacing:.18em; text-shadow:0 2px 10px rgba(0,0,0,.55); background:rgba(0,0,0,.18); }
.proof-watermark.small b { font-size:14px; border-width:2px; padding:2px 8px; }

/* Simulated video */
.proof-video { position:relative; aspect-ratio:16/9; overflow:hidden; background:#000; user-select:none; }
.proof-video-frame { position:absolute; inset:0; opacity:0; transition:opacity .8s ease; }
.proof-video-frame.active { opacity:1; }
.proof-video-frame .proof-media-frame { aspect-ratio:auto; height:100%; }
.proof-video-frame .proof-watermark { display:none; }
.proof-video.playing:not(.still) .proof-video-frame.active img { animation:proof-pan 14s linear forwards; }
@keyframes proof-pan { from { transform:scale(1.02) translateX(0); } to { transform:scale(1.12) translateX(-3%); } }
.proof-video-caption { position:absolute; left:50%; bottom:42px; transform:translateX(-50%); z-index:4; max-width:88%; padding:3px 8px; background:rgba(0,0,0,.72); color:#fff; font-size:11px; border-radius:4px; text-align:center; }
.proof-video-controls { position:absolute; left:0; right:0; bottom:0; z-index:5; display:flex; align-items:center; gap:8px; padding:7px 10px; background:linear-gradient(transparent,rgba(0,0,0,.8)); color:#fff; font-size:10px; }
.proof-video-controls button, .proof-audio-bar button { width:28px; height:28px; border-radius:50%; border:0; background:#fff; color:#06151f; font-size:11px; cursor:pointer; flex:0 0 auto; }
.proof-video-track { flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.3); overflow:hidden; }
.proof-video-track i { display:block; width:0; height:100%; background:#ffd84d; }

/* Voice note */
.proof-audio { position:relative; }
.proof-audio-bar { position:absolute; left:10px; right:10px; bottom:10px; z-index:5; display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:999px; background:rgba(4,16,25,.85); color:#fff; font-size:10px; }
.proof-dialog .proof-audio-bar { position:static; margin-top:10px; }
.proof-wave { flex:1; height:24px; display:flex; align-items:center; gap:2px; }
.proof-wave i { flex:1; height:var(--h); border-radius:2px; background:rgba(255,255,255,.55); }
[data-proof-voice].playing + .proof-wave i { background:#ffd84d; }
.proof-transcript { margin:12px 0 0; padding:10px 12px; border-left:3px solid #ffd84d; background:var(--surface-card-2); color:var(--ink); font-size:13px; line-height:1.55; }
.proof-transcript b { display:block; margin-bottom:4px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#e7b800; }

/* Document */
.proof-doc { display:grid; grid-template-columns:1.25fr 1fr; gap:8px; padding:10px; background:#3d4a50; }
.proof-doc-page { transform:rotate(-1.2deg); padding:8px 9px; background:#f7f3e8; background-image:repeating-linear-gradient(transparent 0 15px,rgba(0,0,0,.05) 15px 16px); color:#2b2b2b; box-shadow:0 4px 12px rgba(0,0,0,.35); font-size:8.5px; }
.proof-doc-head strong { display:block; font-size:10px; }
.proof-doc-head span { color:#666; }
.proof-doc-page table { width:100%; margin-top:5px; border-collapse:collapse; }
.proof-doc-page th, .proof-doc-page td { padding:1px 3px; border:1px solid rgba(0,0,0,.18); text-align:center; }
.proof-doc-page td i { font-family:"Segoe Script","Bradley Hand",cursive; font-style:normal; color:#1d3d8f; }
.proof-doc-page tr.more td { color:#777; font-style:italic; }
.proof-doc-csv { align-self:center; padding:7px; border-radius:6px; background:#0e1b20; color:#9fe6d9; font-size:9px; }
.proof-doc-csv span { display:block; margin-bottom:4px; color:#fff; font-weight:700; }
.proof-doc-csv code { white-space:pre; font-family:var(--font-mono); }

/* Measurement + survey */
.proof-split { display:grid; grid-template-columns:1fr 1fr; }
.proof-split .proof-media-frame { aspect-ratio:auto; min-height:100%; }
.proof-split > .proof-media-frame:first-child { aspect-ratio:8/9; }
.proof-chart-wrap { display:grid; place-items:center; padding:8px; background:#0e1f26; }
.proof-chart { width:100%; height:auto; font-size:9px; }
.proof-chart text { fill:#b9cdd1; }
.proof-chart .axis { stroke:rgba(255,255,255,.3); }
.proof-chart .line { fill:none; stroke:#84e4e5; stroke-width:2.5; }
.proof-chart circle { fill:#84e4e5; }
.proof-chart .label { fill:#fff; font-weight:700; }
.proof-survey { width:100%; display:grid; gap:6px; color:#dfeaec; font-size:9.5px; }
.proof-survey-row { display:grid; grid-template-columns:72px 1fr 30px; align-items:center; gap:6px; }
.proof-survey-row div { height:9px; border-radius:3px; background:rgba(255,255,255,.12); }
.proof-survey-row i { display:block; height:100%; border-radius:3px; background:#ff9879; }
.proof-survey small { color:#9aabb1; }

/* Detail dialog */
.proof-dialog { width:min(760px,calc(100vw - 24px)); max-height:calc(100vh - 32px); padding:0 0 18px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--panel-strong); color:var(--ink); }
.proof-dialog::backdrop { background:rgba(2,10,15,.7); backdrop-filter:blur(3px); }
.proof-dialog > *:not(.proof-dialog-banner) { margin-left:20px; margin-right:20px; }
.proof-dialog-banner { position:sticky; top:0; z-index:6; padding:8px 14px; background:#ffd84d; color:#2a2100; font:800 11px var(--font-mono); letter-spacing:.08em; text-align:center; }
.proof-dialog-head { display:flex; justify-content:space-between; gap:12px; margin-top:16px; }
.proof-dialog-head h2 { margin:4px 0 12px; font-size:22px; }
.proof-dialog .close-btn { width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:20px; cursor:pointer; }
.proof-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin-top:14px; }
.proof-detail-grid dt { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.proof-detail-grid dd { margin:3px 0 0; font-size:13px; line-height:1.45; }
.proof-history { margin:6px 0 0; padding-left:18px; font-size:13px; color:var(--muted); }

[data-theme="light"] .proof-card { background:rgba(255,255,255,.85); }
[data-theme="light"] .proof-dialog { background:#fbfaf6; }
[data-theme="light"] .proof-value em, [data-theme="light"] .proof-transcript b { color:#9a7a00; }

@media (max-width:1100px) { .proof-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) {
  .proof-grid { grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:86%; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
  .proof-card { scroll-snap-align:start; }
  .proof-examples-head { flex-direction:column; align-items:flex-start; }
  .proof-detail-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) { .proof-video-frame { transition:none; } }
.proof-doc-page td i.tick { display:inline-block; width:4px; height:7px; border:solid #1d3d8f; border-width:0 1.6px 1.6px 0; transform:rotate(40deg) translate(-1px,-1px); }
.proof-video-controls button svg, .proof-audio-bar button svg { width:11px; height:11px; display:block; margin:auto; }