/* REVERSEPAD lab page. Tokens only (tokens.css); panels, code rows, files, forks and the scan come from site.css. */
.lhead{padding:var(--s5)}
.lhead .fine{margin-top:var(--s2);max-width:820px}
.lnav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:var(--s4)}
.lnav a{background:var(--bg);padding:var(--s3) var(--s4);font-size:13px;color:var(--muted);transition:background .15s,color .15s}
.lnav a b{display:block;font-weight:400;color:var(--accent-ink);font-size:11px;letter-spacing:.1em}
.lnav a:hover{background:var(--bg-3);color:var(--ink)}
.sim{margin-top:var(--s4);scroll-margin-top:76px;overflow:hidden}
.sim .phead{flex-wrap:wrap}
.sn{font-weight:400;color:var(--accent-ink);margin-right:var(--s2)}
.phead.sm{font-size:13px;padding:var(--s2) var(--s5);color:var(--muted)}
.phead.sm a{font-size:var(--fs-small)}
.sbody{padding:var(--s4) var(--s5) var(--s5)}
.sbody>.fine{max-width:820px}
.lb{display:block;color:var(--dim);font-size:var(--fs-label);letter-spacing:.08em}

/* shared controls */
.ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s4)}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line)}
.seg button{min-height:36px;padding:0 var(--s4);border:0;border-right:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font:inherit;font-size:13px;white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--ink);background:var(--bg-3)}
.seg button.on{background:var(--accent);color:var(--on-accent)}
.verdict{margin-top:var(--s4);padding:var(--s3) var(--s4);border:1px solid var(--line);background:var(--bg);font-size:14px;color:var(--muted);min-height:48px}
.verdict b{font-weight:500;color:var(--ink)}
.verdict.ok{border-color:rgba(30,158,106,.55)}
.verdict.ok b{color:var(--ok)}
.verdict.bad{border-color:rgba(217,130,107,.55)}
.verdict.bad b{color:var(--bad)}

/* 01 replay */
.coins{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.coins button{min-height:36px;padding:0 var(--s3);border:1px solid var(--line);background:var(--bg);color:var(--muted);cursor:pointer;font:inherit;font-size:13px}
.coins button:hover{border-color:var(--accent);color:var(--ink)}
.coins button.on{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.rail{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:var(--s4)}
.rail li{background:var(--bg);padding:var(--s2) var(--s3);font-size:13px;color:var(--faint);transition:background .2s,color .2s}
.rail li b{display:block;font-weight:400;font-size:11px;letter-spacing:.1em;color:var(--faint)}
.rail li.done{color:var(--muted)}
.rail li.done b{color:var(--accent-ink)}
.rail li.on{background:var(--accent);color:var(--on-accent)}
.rail li.on b{color:var(--on-accent)}
.meters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3);margin-top:var(--s4)}
.meters b{display:block;font-weight:400;font-size:clamp(18px,2.2vw,24px);color:var(--ink);font-variant-numeric:tabular-nums}
.rgrid{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media(min-width:1000px){.rgrid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}.rleft{border-right:1px solid var(--line)}}
.rscan{aspect-ratio:692/526;flex:none}
.rscan .beam{display:none}
.rscan.on .beam{display:block;animation-duration:1.1s}
.stitle{position:absolute;left:var(--s4);right:var(--s4);bottom:var(--s4);padding:var(--s2) var(--s3);background:var(--scrim);border:1px solid var(--line);font-size:13px;color:var(--ink);min-height:36px}
.stitle:empty{display:none}
.rleft .phead.sm{border-top:1px solid var(--line)}
.rleft .files{border-top:0;max-height:330px;overflow:auto}
.rcode{height:min(620px,70svh);overflow:auto;scroll-behavior:smooth}
.rforks{border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);padding:var(--s4) var(--s5) var(--s5);background-image:radial-gradient(var(--grid-dot) 1px,transparent 1px);background-size:22px 22px}
.fwrap{position:relative;padding-top:var(--s4)}
.fwrap::before{content:'';position:absolute;left:var(--s5);top:0;height:var(--s4);border-left:1px solid var(--accent)}
.fwrap .fork{cursor:default;height:100%}
.fork .an{margin-top:var(--s2);color:var(--gold);font-size:12px;word-break:break-word}
.hid{display:none!important}
.in{animation:lin .35s ease both}
@keyframes lin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.fwrap.in{animation:fin .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes fin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ln-row.in{animation:lrow .5s ease both}
@keyframes lrow{0%{opacity:0;background:var(--accent-soft)}30%{opacity:1;background:var(--accent-soft)}100%{background:transparent}}

/* 02 name guard */
.grow{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4)}
.fld{display:flex;flex-direction:column;gap:var(--s1);flex:1 1 260px;min-width:0}
.fld.sm{flex:0 1 200px}
.fld input,.fld select{min-height:44px;padding:0 var(--s3);border:1px solid var(--line);background:var(--bg-3);color:var(--ink);font:inherit;font-size:16px;width:100%;min-width:0}
.fld input:focus,.fld select:focus{outline:0;border-color:var(--accent)}
.checks{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:var(--s3)}
.checks:empty{display:none}
.checks li{background:var(--bg);padding:var(--s2) var(--s3);display:flex;justify-content:space-between;gap:var(--s3);font-size:13px;color:var(--muted);min-width:0}
.checks li b{font-weight:400;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.checks li.ok b{color:var(--ok)}
.checks li.bad b{color:var(--bad)}
.dpwrap{margin-top:var(--s4);border:1px solid var(--line);background:var(--bg)}
.dp{display:grid;gap:1px;padding:var(--s3);font-size:12px;max-width:760px}
.dp span{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;min-width:0}
.dp .hd{color:var(--ink-2)}
.dp .cl{background:var(--bg-2);color:transparent;transition:background .2s,color .2s}
.dp .cl.on{color:var(--dim)}
.dp .cl.path{background:var(--accent-soft);color:var(--accent-ink)}
.dp .cl.on.endbad{background:var(--bad);color:var(--bg)}
.dp .cl.on.endok{background:var(--accent);color:var(--on-accent)}

/* 03 will it fit */
.bytes{position:relative;display:flex;height:40px;margin:var(--s6) 0 var(--s2);border:1px solid var(--line);background:var(--bg)}
.bseg{height:100%;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.bseg.s1{background:rgba(201,179,126,.55)}
.bseg.s2{background:rgba(30,158,106,.35)}
.bseg.s3{background:rgba(154,168,159,.35)}
.bseg.s4{background:var(--accent)}
.bytes .lim{position:absolute;top:-6px;bottom:-6px;left:94.77%;border-left:1px dashed var(--bad)}
.bytes .lim span{position:absolute;bottom:100%;left:0;transform:translateX(-50%);font-size:11px;color:var(--bad)}
.bytes .tot{position:absolute;top:100%;transform:translateX(-50%);transition:left .5s cubic-bezier(.2,.8,.2,1)}
.bytes .tot span{display:block;margin-top:2px;font-size:11px;color:var(--ink)}
.ftbl{margin-top:var(--s4);border:1px solid var(--line)}
.ftbl td:first-child{color:var(--ink-2);white-space:normal;width:auto}
.ftbl td{padding:var(--s2) var(--s4)}
.ftbl tr.h td{color:var(--dim);font-size:var(--fs-label);letter-spacing:.08em}
.ftbl tr.h:last-child td{color:var(--accent-ink);font-size:14px;letter-spacing:0}

/* 04 pattern graph */
.gtools{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s4)}
.gtools .tsearch{display:flex;align-items:center;gap:var(--s3);flex:1 1 240px;max-width:360px;min-height:40px;padding:0 var(--s3);border:1px solid var(--line);background:var(--bg-3)}
.gtools .tsearch input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font:inherit;font-size:16px}
.ggrid{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
@media(min-width:1000px){.ggrid{grid-template-columns:minmax(0,1fr) 340px}.ginfo{border-left:1px solid var(--line)}}
.gcan{max-width:760px;width:100%;min-width:0;margin:0 auto;padding:var(--s3)}
.gcan canvas{display:block;max-width:100%;touch-action:manipulation}
.ginfo{padding:var(--s4) var(--s5);border-top:1px solid var(--line);min-height:160px}
@media(min-width:1000px){.ginfo{border-top:0}}
.ginfo h3{font-weight:400;font-size:18px;color:var(--ink);margin:var(--s1) 0 var(--s2);word-break:break-word}
.ginfo p{font-size:13px;color:var(--muted);margin-bottom:var(--s3)}
.ginfo .bad{color:var(--bad)}
.plist{display:flex;flex-wrap:wrap;gap:var(--s1)}
.plist button{border:1px solid var(--line);background:transparent;color:var(--accent-ink);font:inherit;font-size:12px;padding:3px var(--s2);cursor:pointer;text-align:left}
.plist button:hover{border-color:var(--accent)}

@media(max-width:899px){
  .lnav{grid-template-columns:1fr 1fr}
  .meters{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fgrid{grid-template-columns:1fr}
  .rcode{height:56svh}
  .checks{grid-template-columns:1fr}
}
@media(max-width:520px){
  .sbody{padding:var(--s3) var(--s4) var(--s4)}
  .rail li{padding:var(--s2) 6px;font-size:11px}
  .phead.sm{padding:var(--s2) var(--s4)}
  .dp{font-size:10px;padding:var(--s2)}
  .fgrid{padding:var(--s3) var(--s4) var(--s4)}
  .ctrl .btn{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){.in,.fwrap.in,.ln-row.in{animation:none}.rscan.on .beam{animation:none}}