/* CCRB browse — the register and the dossier pane. Loaded on browse.html only.
   Approved in the lab: mono register, segment meters, scanlines on the hovered
   row, dossier pane as a screen with memory-card load, reorder, arrow keys,
   standby, compare, column focus. Scoped to .bv2 so nothing else changes. */

/* ---------- layout ---------- */
.bv2{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0 1.2rem;align-items:start}
.bv2 .bv2-left{min-width:0}
.bv2 #foot{grid-column:1 / -1}
@media (max-width:899px),(hover:none){.bv2{grid-template-columns:1fr}.bv2-pane{display:none}}

/* ---------- the register ---------- */
/* fixed layout so the table can never grow past its column: the title takes what is left */
.bv2 table.reg{font-family:var(--font-mono);table-layout:fixed;width:100%}
.bv2 table.reg th.num:first-child,.bv2 td.n{width:52px}
.bv2 table.reg th[data-s="f"],.bv2 td.meta:nth-child(3){width:150px}
.bv2 table.reg th[data-s="d"],.bv2 td.meta:nth-child(4){width:160px}
.bv2 table.reg th[data-s="y"],.bv2 td.meta.n{width:52px}
.bv2 table.reg th.cat,.bv2 td.cat{width:42px}
.bv2 table.reg th[data-s="tier"],.bv2 td.dw{width:98px}
.bv2 td.title,.bv2 td.meta{overflow:hidden;text-overflow:ellipsis}
/* with the pane showing, the franchise column goes — the pane carries developer and year */
@media (min-width:900px) and (hover:hover){
  .bv2 table.reg th[data-s="f"],.bv2 td.meta:nth-child(3){display:none}
}
@media (min-width:900px) and (max-width:1180px) and (hover:hover){
  .bv2 table.reg th[data-s="d"],.bv2 td.meta:nth-child(4){display:none}
}
.bv2 table.reg tbody td{padding:.55rem .6rem;color:rgba(190,220,214,.75);font-size:12.5px;white-space:nowrap;
  transition:background 120ms,color 120ms,opacity 160ms}
.bv2 td.title{color:var(--ink);font-family:var(--font-mono);font-weight:500;font-size:12.5px;letter-spacing:.01em}
.bv2 td.n{font-family:var(--font-mono);color:var(--vfd,#5ff2d0);opacity:.55;letter-spacing:.06em;font-size:12px}
.bv2 td.meta{font-size:11.5px}
.bv2 td.cat{padding:.55rem .2rem}
.bv2 td.dw{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-align:right;text-transform:uppercase}
.bv2 td.dw.t3{color:var(--sev-3)}.bv2 td.dw.t2{color:var(--sev-2)}.bv2 td.dw.t1{color:var(--sev-1)}.bv2 td.dw.t0{color:var(--ink-faint)}.bv2 td.dw.tp{color:var(--ink-faint)}
.bv2 table.reg tbody tr{cursor:pointer;transition:none}
.bv2 table.reg tbody tr:hover{background:none;transform:none;box-shadow:none}
/* the hovered / acquired row: scanlines across it, type brightens */
.bv2 table.reg tbody tr.on td{color:#eaf6f3;text-shadow:0 0 8px rgba(95,242,208,.45);
  background:repeating-linear-gradient(180deg,rgba(95,242,208,.07) 0 2px,rgba(0,0,0,.28) 2px 3px)}
.bv2 table.reg tbody tr.on td.n{opacity:1;text-shadow:0 0 8px rgba(95,242,208,.5)}
.bv2 table.reg tbody tr.on td:first-child{box-shadow:inset 2px 0 0 var(--rt-accent,#ff9638)}
.bv2 table.reg tbody tr.key td:first-child{box-shadow:inset 3px 0 0 var(--rt-accent,#ff9638)}
.bv2 table.reg tbody tr.pin td{background:rgba(95,242,208,.04)}
.bv2 table.reg tbody tr.pin td:first-child{box-shadow:inset 2px 0 0 var(--vfd,#5ff2d0)}
/* meters */
.bv2 .meter{display:flex;gap:2px;justify-content:center}
.bv2 .meter i{width:10px;height:5px;background:var(--sev-0);border-radius:1px;transition:background 90ms}
.bv2 .meter i.l1{background:var(--sev-1)}.bv2 .meter i.l2{background:var(--sev-2)}.bv2 .meter i.l3{background:var(--sev-3);box-shadow:0 0 5px rgba(207,74,62,.55)}
.bv2 .meter.pulse i{animation:bv2-mp 620ms cubic-bezier(.2,.7,.3,1) both}
.bv2 .meter.pulse i:nth-child(2){animation-delay:60ms}.bv2 .meter.pulse i:nth-child(3){animation-delay:120ms}
@keyframes bv2-mp{0%{transform:scaleY(.2);opacity:.3}60%{transform:scaleY(1.5)}100%{transform:none;opacity:1}}
/* reorder */
.bv2 table.reg tbody tr.flip{transition:transform 420ms cubic-bezier(.2,.7,.3,1)}
.bv2 table.reg tbody tr.arrive td{animation:bv2-arrive 320ms cubic-bezier(.2,.7,.3,1) both}
@keyframes bv2-arrive{from{opacity:0}to{opacity:1}}
/* column focus */
.bv2 table.reg.focus td.cat:not(.hot),.bv2 table.reg.focus th.cat:not(.hot){opacity:.22}
.bv2 table.reg.focus th.cat.hot{color:var(--vfd,#5ff2d0)}
.bv2 table.reg th.cat{transition:opacity 160ms}

/* ---------- the pane ---------- */
.bv2-pane{position:sticky;top:calc(var(--mast-h,82px) + 1rem);height:calc(100vh - var(--mast-h,82px) - 2rem);min-height:520px;
  border:1px solid var(--line-mid);background:#0a0e15;overflow:hidden;margin-top:.5rem}
.bv2-pane::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.22) 2px 3px)}
.bv2-pane .glow{position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at 50% 0%,rgba(95,242,208,.06),transparent 60%)}
.bv2-pane .rail{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line);z-index:4}
.bv2-pane .rail i{position:absolute;left:0;width:3px;height:26px;background:var(--rt-accent,#ff9638);transition:top 220ms cubic-bezier(.2,.7,.3,1);box-shadow:0 0 8px var(--rt-accent,#ff9638)}
.bv2-pane .file{position:absolute;inset:0 0 0 3px;display:flex;flex-direction:column;background:#0a0e15}
.bv2-pane .file.in{animation:bv2-filein 300ms cubic-bezier(.2,.7,.3,1) both}
.bv2-pane .file.out{animation:bv2-fileout 200ms cubic-bezier(.4,0,.8,.4) both;pointer-events:none}
@keyframes bv2-filein{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes bv2-fileout{to{transform:translateX(-18px);opacity:0}}
.bv2-pane .hdr{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-mid);background:linear-gradient(180deg,#121924,#0d121a);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;color:var(--vfd,#5ff2d0);position:relative}
.bv2-pane .hdr .no{opacity:.9;text-shadow:0 0 8px rgba(95,242,208,.35);min-height:1em}
.bv2-pane .hdr .pip{margin-left:auto;display:flex;gap:4px}
.bv2-pane .hdr .pip i{width:5px;height:5px;border-radius:1px;background:var(--sev-0)}
.bv2-pane .hdr .pip i.on{background:var(--vfd,#5ff2d0);box-shadow:0 0 5px var(--vfd,#5ff2d0)}
.bv2-pane .hdr .tag{font-size:9px;letter-spacing:.14em;text-transform:uppercase;margin-left:auto}
.bv2-pane .bd{padding:14px;display:flex;flex-direction:column;gap:12px;flex:1;overflow:hidden}
.bv2-pane .top{display:flex;gap:12px;align-items:stretch}
.bv2-pane .cov{width:104px;aspect-ratio:2/3;flex:none;border:1px solid var(--line-mid);position:relative;overflow:hidden;background:var(--bg-2)}
.bv2-pane .cov::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sev);z-index:1}
.bv2-pane .cov img{width:100%;height:100%;object-fit:cover;display:block}
.bv2-pane .sealbox{flex:1;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:rgba(8,11,17,.6);position:relative}
.bv2-pane .sealbox canvas{width:150px;height:150px;display:block}
.bv2-pane .sealbox .lbl{position:absolute;left:8px;top:6px;font-family:var(--font-mono);font-size:8px;letter-spacing:.14em;color:var(--ink-faint);text-transform:uppercase}
.bv2-pane h3{font-family:var(--font-display);font-size:12.5px;font-weight:400;letter-spacing:.03em;margin:0;line-height:1.35}
.bv2-pane .mrow{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;border:1px solid var(--line);padding:8px 6px;background:rgba(8,11,17,.6)}
.bv2-pane .mrow div{text-align:center}
.bv2-pane .mrow .meter i{width:12px;height:6px}
.bv2-pane .mrow .k{font-family:var(--font-mono);font-size:8px;letter-spacing:.12em;color:var(--ink-faint);margin-top:5px}
.bv2-pane .det{display:flex;justify-content:space-between;align-items:baseline;border:1px solid var(--line);padding:8px 10px;background:rgba(8,11,17,.6)}
.bv2-pane .det .k{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.14em;color:var(--ink-faint);text-transform:uppercase}
.bv2-pane .det .v{font-family:var(--font-mono);font-size:14px;letter-spacing:.1em;position:relative;text-transform:uppercase}
.bv2-pane .det .v .g{color:var(--sev-0)}
.bv2-pane .det .v b{position:absolute;right:0;top:0;font-weight:400;text-shadow:0 0 8px currentColor}
.bv2-pane .det .v b.t3{color:var(--sev-3)}.bv2-pane .det .v b.t2{color:var(--sev-2)}.bv2-pane .det .v b.t1{color:var(--sev-1)}.bv2-pane .det .v b.t0,.bv2-pane .det .v b.tp{color:var(--ink-faint)}
.bv2-pane p{color:var(--ink-dim);font-size:13px;line-height:1.5;margin:0}
.bv2-pane .meta{margin-top:auto;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;color:var(--ink-faint);display:flex;gap:12px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--line);align-items:baseline}
.bv2-pane .meta b{color:var(--ink-dim);font-weight:500}
.bv2-pane .meta .open{margin-left:auto;color:var(--rt-accent,#ff9638);text-decoration:none;letter-spacing:.1em;text-transform:uppercase}
/* memory-card load */
.bv2-pane .file.load .cov{-webkit-mask-image:repeating-linear-gradient(180deg,#000 0 2px,transparent 2px 4px);mask-image:repeating-linear-gradient(180deg,#000 0 2px,transparent 2px 4px);animation:bv2-wipe 260ms linear both}
.bv2-pane .file.load2 .cov{animation:bv2-wipe 260ms linear both}
@keyframes bv2-wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.bv2-pane .file.load .mrow .meter i,.bv2-pane .file.load .det,.bv2-pane .file.load p,.bv2-pane .file.load .meta,.bv2-pane .file.load h3,.bv2-pane .file.load .sealbox{opacity:0}
.bv2-pane .file.load2 .mrow .meter i{animation:bv2-mlight 180ms cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--d,0) * 45ms)}
@keyframes bv2-mlight{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:none}}
.bv2-pane .file.load2 h3{animation:bv2-arrive 220ms both}
.bv2-pane .file.load2 .sealbox{animation:bv2-arrive 300ms 120ms both}
.bv2-pane .file.load2 .det{animation:bv2-vfdon 320ms 520ms both}
@keyframes bv2-vfdon{0%{opacity:0}30%{opacity:.7}45%{opacity:.2}60%{opacity:1}75%{opacity:.6}100%{opacity:1}}
.bv2-pane .file.load2 p{animation:bv2-arrive 260ms 700ms both}
.bv2-pane .file.load2 .meta{animation:bv2-arrive 260ms 800ms both}
/* compare */
.bv2-pane .file.cmp .bd{gap:8px}
.bv2-pane .file.cmp .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bv2-pane .file.cmp .card{border:1px solid var(--line);background:rgba(8,11,17,.6);padding:8px;display:flex;flex-direction:column;gap:6px;min-width:0}
.bv2-pane .file.cmp .card .cov{width:100%}
.bv2-pane .file.cmp .card canvas{width:100px;height:100px;display:block;margin:0 auto}
.bv2-pane .file.cmp .card h4{font-family:var(--font-display);font-size:9px;font-weight:400;letter-spacing:.03em;margin:0;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bv2-pane .file.cmp .card .dv{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.bv2-pane .file.cmp .card .dv.t3{color:var(--sev-3)}.bv2-pane .file.cmp .card .dv.t2{color:var(--sev-2)}.bv2-pane .file.cmp .card .dv.t1{color:var(--sev-1)}.bv2-pane .file.cmp .card .dv.t0,.bv2-pane .file.cmp .card .dv.tp{color:var(--ink-faint)}
.bv2-pane .file.cmp .mcmp{border:1px solid var(--line);background:rgba(8,11,17,.6);padding:8px 6px;display:grid;grid-template-columns:44px 1fr 1fr;gap:4px 8px;align-items:center}
.bv2-pane .file.cmp .mcmp .k{font-family:var(--font-mono);font-size:8px;letter-spacing:.12em;color:var(--ink-faint)}
.bv2-pane .file.cmp .mcmp .meter{justify-content:flex-start}
.bv2-pane .file.cmp .mcmp .meter i{width:14px;height:6px}
.bv2-pane .file.cmp .mcmp .hd4{font-family:var(--font-mono);font-size:8px;letter-spacing:.1em;color:var(--ink-faint);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* first-time hint: appears with the first file each session, gone after the first compare */
.bv2-pane .first{position:absolute;left:14px;right:14px;bottom:14px;padding:9px 12px;background:rgba(8,11,17,.92);
  border:1px solid var(--rt-accent,#ff9638);font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:var(--ink);
  text-transform:uppercase;line-height:1.7;z-index:4;animation:bv2-firstin 400ms 700ms both}
.bv2-pane .first kbd{font-family:var(--font-mono);font-size:10.5px;color:var(--rt-accent,#ff9638);border:1px solid var(--rt-accent,#ff9638);padding:0 5px;border-radius:2px;text-transform:none}
.bv2-pane .first small{display:block;color:var(--ink-faint);font-size:8.5px;margin-top:2px}
@keyframes bv2-firstin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* standby */
.bv2-pane .standby{margin:auto;text-align:center;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;color:var(--vfd,#5ff2d0);text-transform:uppercase;line-height:2.2;animation:bv2-stby 3.2s ease-in-out infinite}
.bv2-pane .standby i{display:block;width:80px;height:1px;background:var(--vfd,#5ff2d0);margin:6px auto;opacity:.5}
.bv2-pane .standby small{display:block;font-size:8.5px;letter-spacing:.14em;color:var(--ink-faint);margin-top:4px}
@keyframes bv2-stby{0%,100%{opacity:.25}50%{opacity:.7}}

/* ---------- motion setting: reduced / off ---------- */
html[data-reticle-mode="reduced"] .bv2 *,html[data-reticle-mode="off"] .bv2 *{animation:none!important;transition:none!important}
html[data-reticle-mode="reduced"] .bv2-pane .file.load *,html[data-reticle-mode="off"] .bv2-pane .file.load *{opacity:1!important;mask-image:none!important;-webkit-mask-image:none!important}
html[data-reticle-mode="reduced"] .bv2-pane .standby,html[data-reticle-mode="off"] .bv2-pane .standby{opacity:.5}

/* ---------- print theme ---------- */
body.print .bv2-pane{background:#f4f1ea;border-color:#c9c2b4}
body.print .bv2-pane::after,body.print .bv2-pane .glow{display:none}
body.print .bv2-pane .file{background:#f4f1ea}
body.print .bv2-pane .hdr{background:#e9e4d9;color:#3a3a3a;border-color:#c9c2b4}