/* ===== v3 [04] PROOF (28 Oct 2026): the live site's Proof viewer in v2's dress. proof-live.css is the live viewer's own
   rules, generated; this file only re-dresses it. His brief: "our embed viewer needs to be recent work ... see the
   difference, live, > proof etc all of that", and "keep the design elements dont just copy and paste".
   The reading: everything we touch gets rebuilt. Pick a site and its address re-types itself, and a blue rebuild line
   passes down the screen as it comes in. The picker is v2's numbered index, grey and white like the menu. ===== */

/* the viewer's tokens, moved onto v2's: Inter for every word, v2's blacks and hairlines, the one blue. Its SHAPES stay
   Rebwand's (his note, 28 Oct: "keep that main rebwand"): the frame's corners, the round switches, the squircle icons. */
#proof{--display:var(--disp);--body:var(--disp);--ink:var(--bg);--ink-rgb:5,5,5;--snow:#fff;--snow-rgb:255,255,255;--blue:var(--accent)}
#proof .pv{font-variation-settings:"opsz" 32}
.pf-lead{margin-top:1.75rem;max-width:32rem;font-size:.9375rem;color:var(--mute2);line-height:1.6;letter-spacing:-.02em}
.pf-stage{margin:5rem var(--gut) 0;position:relative}

/* ---------- the frame: v2's panel and hairline on the live frame's own corners ---------- */
/* the browser only: the phone shells (social, and the mobile size) keep their own body */
#proof .pv[data-service="website"][data-device="desktop"] .pv-frame{background:var(--bg2);border:1px solid var(--line);box-shadow:0 2.5rem 5rem -2.5rem rgba(0,0,0,.9)}
@media (max-width:860px){#proof .pv[data-service="website"] .pv-frame{background:var(--bg2);border:1px solid var(--line)}}
#proof .pv-chrome{background:var(--bg2);color:var(--mute2);border-bottom:1px solid var(--line);padding:.625rem .875rem}
#proof .pv-dots i{width:.5625rem;height:.5625rem;background:rgba(255,255,255,.16)}
#proof .pv-url{background:var(--bg3);border:1px solid var(--line);color:var(--fg);font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
#proof .pv-live{color:var(--mute2);font-weight:600;letter-spacing:-.01em}
#proof .pv-live::before{background:var(--accent);animation-name:pfPulse}
@keyframes pfPulse{0%{box-shadow:0 0 0 0 rgba(56,182,255,.5)}70%,100%{box-shadow:0 0 0 .4375rem rgba(56,182,255,0)}}

/* the rebuild line: one blue line passes down the screen as a new site comes in, a fading wake behind it */
#proof .pv-screen{position:relative}
.pf-scan{position:absolute;left:0;right:0;top:0;height:9rem;z-index:6;pointer-events:none;opacity:0;transform:translate3d(0,-9rem,0);
  background:linear-gradient(to bottom,rgba(56,182,255,0),rgba(56,182,255,.07) 70%,rgba(56,182,255,.16)) ,linear-gradient(var(--accent),var(--accent)) 0 100%/100% 1px no-repeat}
.pf-scan.go{animation:pfScan .9s cubic-bezier(.5,0,.2,1) forwards}
@keyframes pfScan{0%{opacity:1;transform:translate3d(0,-9rem,0)}85%{opacity:1}100%{opacity:0;transform:translate3d(0,var(--pfH,40rem),0)}}

/* ---------- the picker: v2's numbered index. Every name carries its [0N]; grey until it is yours, white on the pointer ---------- */
#proof .pv-coins-track{counter-reset:pf}
#proof .pv-coin{counter-increment:pf}
#proof .pv-lead{font-family:var(--disp);font-size:.75rem;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--mute2)}
#proof .pv-lead::before{content:"[" counter(pfn) "] ";color:var(--fg)}
#proof .pv{counter-reset:pfn 15}
#proof .pvx-tx b{font-family:var(--disp);font-weight:600;letter-spacing:-.035em}
#proof .pv-coin-label{font-family:var(--disp);font-weight:600;letter-spacing:-.01em;text-transform:none}
/* the rail keeps the live geometry (fifteen rows sized to the height it has); only its dress changes */
@media (min-width:1100px){
  #proof .pv.pv-rail{grid-template-columns:19rem minmax(0,1fr)}
  #proof .pv.pv-rail .pv-lead{padding-left:0;margin-bottom:.75rem}
  #proof .pv.pv-rail .pv-coin{border-bottom:1px solid var(--line)!important}
  #proof .pv.pv-rail .pv-coin:first-child{border-top:1px solid var(--line)}
  #proof .pv.pv-rail .pv-coin::before{content:"[" counter(pf,decimal-leading-zero) "]";font-size:.75rem;font-weight:600;color:var(--mute);width:2.25rem;flex:0 0 auto;letter-spacing:-.01em;transition:color .3s}
  #proof .pv.pv-rail .pvx-meta{transition:transform .5s var(--e)}
  #proof .pv.pv-rail .pv-coin .pv-coin-face{filter:grayscale(1);transition:opacity .3s,filter .3s,box-shadow .3s}
  #proof .pv.pv-rail .pvx-tx b{color:var(--mute);letter-spacing:-.035em;transition:color .3s}
  #proof .pv.pv-rail .pv-coin .pv-coin-label{text-transform:none;font-size:.75rem!important;letter-spacing:-.01em!important;color:var(--mute)!important}
  #proof .pv.pv-rail .pv-coin[aria-pressed="true"]::before{color:var(--accent)}
  #proof .pv.pv-rail .pv-coin[aria-pressed="true"] .pvx-meta{transform:translateX(.5rem)}
  #proof .pv.pv-rail .pv-coin[aria-pressed="true"] .pv-coin-face{filter:none;box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--accent)!important}
  #proof .pv.pv-rail .pv-coin[aria-pressed="true"] .pvx-tx b{color:var(--fg)}
  #proof .pv.pv-rail .pv-coin[aria-pressed="true"] .pv-coin-label{color:var(--mute2)!important}
}
@media (min-width:1100px) and (hover:hover){
  #proof .pv.pv-rail .pv-coin:hover .pvx-tx b,#proof .pv.pv-rail .pv-coin:hover::before{color:var(--fg)}
  #proof .pv.pv-rail .pv-coin:hover .pv-coin-face{filter:none}
}
/* under 1100 the picker is the live strip of icons: v2's ring for the one that is yours instead of a glow, v2's buttons */
#proof .pv:not(.pv-rail) .pv-coin[aria-pressed="true"] .pv-coin-face{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--accent)}
/* the browser sits half a gutter in from the screen's edge on phones, as live */
@media (max-width:860px){#proof .pv[data-service="website"] .pv-frame{width:calc(100% + 2*var(--gut) - 1rem);margin-inline:calc(.5rem - var(--gut))}}


/* the floating preview under the pointer: v2's hairline on its live corners */
.pvx-float{box-shadow:0 1.5rem 3rem -1rem rgba(0,0,0,.85),0 0 0 1px var(--line)}