/* lv-reference.css — Live View (Focus/Quad/Wall), owner's approved reference ported into the v4
   shell (2026-09-23). Scoped under `.lvref` so the reference's generic class names never collide
   with the shell. THEME-AWARE: binds to the console's theme vars (--panel/--ink/--muted/--line/
   --brand, redefined under [data-theme=dark] in styles.css) so it matches light AND dark. The only
   deliberately-dark parts are the elements that sit ON TOP of the video (hero overlays + the thumb
   media area) — those stay light-on-dark in both themes because they overlay camera video. */
.lvref{ --lvgap:clamp(8px,1vw,14px); --lvr:clamp(9px,.8vw,12px);
  --lvline:var(--line); --lvmuted:var(--muted); --lvbrand:var(--brand); --lvink:var(--ink);
  --lvgreen:#22c55e; --lvred:#ef4444; --lvmedia:#0b1220;   /* video area stays dark in both themes */
  min-width:0; }
.lvref *{ box-sizing:border-box; }

/* page head + toolbar */
.lvref .lvpagehead{ display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; }
.lvref .lvpagehead h2{ font-size:clamp(21px,4vw,25px); margin:0 0 4px; color:var(--ink); }
.lvref .lvpagehead p{ margin:0; color:var(--muted); font-size:12px; }
.lvref .livepill{ margin-top:4px; background:color-mix(in srgb,var(--bad,#ef4444) 16%,transparent); color:var(--bad,#e11d48); border:1px solid color-mix(in srgb,var(--bad,#ef4444) 40%,transparent); font-weight:800; font-size:10px; padding:5px 9px; border-radius:20px; white-space:nowrap; }
.lvref .lvtoolbar{ display:flex; align-items:center; gap:clamp(6px,.7vw,9px); margin-bottom:14px; flex-wrap:wrap; }
.lvref .chip,.lvref .layoutBtn{ border:1px solid var(--line); background:var(--panel-2); color:var(--ink-2); border-radius:9px; height:35px; padding:0 12px; cursor:pointer; font-size:11px; }
.lvref .chip:hover,.lvref .layoutBtn:hover{ border-color:var(--line-2); color:var(--ink); }
.lvref .chip.on,.lvref .layoutBtn.on{ color:#fff; border-color:var(--brand); background:var(--brand); box-shadow:0 6px 18px color-mix(in srgb,var(--brand) 25%,transparent); }
.lvref .search2{ margin-left:auto; min-width:clamp(180px,22vw,300px); height:35px; border:1px solid var(--line); border-radius:9px; background:var(--panel-2); color:var(--ink); padding:0 12px; outline:0; }

/* stats */
.lvref .stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--lvgap); margin-bottom:14px; }
.lvref .stat{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; min-height:68px; }
.lvref .stat span{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.lvref .stat b{ display:block; font-size:21px; margin-top:6px; color:var(--ink); } .lvref .stat em{ font-style:normal; color:var(--cyan,var(--brand)); font-size:10px; margin-left:5px; }

/* focus: hero + rail */
.lvref .focusGrid{ display:grid; grid-template-columns:minmax(0,1.68fr) minmax(330px,.82fr); gap:var(--lvgap); align-items:stretch; }
.lvref .heroCard,.lvref .rail{ background:var(--panel); border:1px solid var(--line); border-radius:var(--lvr); box-shadow:var(--shadow,0 12px 34px rgba(20,29,52,.10)); }
.lvref .heroCard{ overflow:hidden; min-width:0; } .lvref .heroMedia{ position:relative; aspect-ratio:16/9; background:var(--lvmedia); overflow:hidden; min-height:0; }
.lvref .heroMedia video{ width:100%; height:100%; object-fit:contain; display:block; background:var(--lvmedia); }
.lvref .heroShade{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 28%,transparent 62%,rgba(2,8,14,.78)); }
/* ---- hero overlays sit ON the video -> intentionally light in BOTH themes ---- */
.lvref .heroTop{ position:absolute; left:18px; right:18px; top:15px; display:flex; align-items:flex-start; gap:10px; }
.lvref .heroName{ font-size:18px; font-weight:800; color:#fff; text-shadow:0 2px 12px #000; } .lvref .heroSub{ font-size:11px; color:#d4e2ef; margin-top:3px; text-shadow:0 2px 8px #000; }
.lvref .status{ margin-left:auto; display:flex; gap:7px; } .lvref .pill{ font-size:10px; font-weight:800; padding:6px 9px; border-radius:20px; background:rgba(5,12,20,.72); color:#fff; border:1px solid rgba(255,255,255,.15); backdrop-filter:blur(8px); white-space:nowrap; }
.lvref .pill.green{ background:rgba(19,111,61,.82); color:#b8ffd2; border-color:rgba(86,237,151,.35); } .lvref .pill.blue{ color:#9bd2ff; border-color:#2d78b7; }
.lvref .heroBottom{ position:absolute; left:16px; right:16px; bottom:14px; display:flex; align-items:center; gap:8px; }
.lvref .ctrl{ width:36px; height:34px; border:1px solid rgba(255,255,255,.16); border-radius:9px; background:rgba(5,12,20,.7); color:#fff; cursor:pointer; backdrop-filter:blur(8px); }
.lvref .streammeta{ margin-left:auto; background:rgba(5,12,20,.75); border:1px solid rgba(255,255,255,.13); border-radius:10px; padding:7px 10px; display:flex; gap:10px; align-items:center; font-size:10px; color:#dfeaf6; backdrop-filter:blur(8px); }
/* heroState overlays the whole media (holds the ▶ + connecting text). app.js hides it on 'playing'
   and shows it again on stop, so the play symbol is gone while the video is live. pointer-events
   pass through except on the ▶ so the bottom controls stay clickable. */
.lvref .heroState{ position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; pointer-events:none; color:#cfe0f2; font-size:12px; text-shadow:0 2px 8px #000; }
.lvref .heroPlay{ pointer-events:auto; width:64px; height:64px; border-radius:999px; border:0; cursor:pointer; color:#fff; background:rgba(15,23,42,.72); backdrop-filter:blur(4px); font-size:24px; display:inline-flex; align-items:center; justify-content:center; }
/* ---- hero foot sits BELOW the video on the card -> theme it ---- */
.lvref .heroFoot{ min-height:52px; display:flex; align-items:center; padding:8px 14px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; gap:12px; flex-wrap:wrap; }
.lvref .activityDot{ width:7px; height:7px; border-radius:50%; background:var(--lvgreen); } .lvref .heroFoot strong{ color:var(--ink); } .lvref .grow{ flex:1; }

.lvref .rail{ padding:clamp(10px,.9vw,13px); display:grid; grid-template-rows:auto minmax(0,1fr); height:100%; min-width:0; }
.lvref .railHead{ display:flex; align-items:center; margin-bottom:clamp(8px,.8vw,11px); } .lvref .railHead b{ font-size:14px; color:var(--ink); } .lvref .railHead span{ margin-left:auto; color:var(--muted); font-size:10px; }
.lvref .railGrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:max-content; gap:clamp(8px,.75vw,10px); align-content:start; overflow-y:auto; min-height:0; padding-right:4px; }
/* Desktop: compact the whole Focus row to the viewport so the hero fits AND the rail scrolls inside it. */
@media (min-width:1025px){
  .lvref .focusGrid{ align-items:stretch; height:clamp(400px,calc(100dvh - 250px),820px); }
  .lvref .heroCard{ display:flex; flex-direction:column; min-height:0; }
  .lvref .heroMedia{ aspect-ratio:auto; flex:1 1 auto; min-height:0; }
  .lvref .heroFoot{ flex:0 0 auto; }
  .lvref .rail{ height:100%; min-height:0; overflow:hidden; }
  .lvref .railGrid{ min-height:0; overflow-y:auto; }
}

/* camera card (rail/quad/wall share) */
.lvref .cam{ min-width:0; height:100%; display:grid; grid-template-rows:auto 1fr; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--panel-2); cursor:pointer; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.lvref .cam:hover{ transform:translateY(-2px); border-color:var(--brand); box-shadow:0 10px 25px rgba(20,29,52,.14); }
.lvref .cam.on{ border-color:var(--brand); box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 30%,transparent),0 12px 28px rgba(20,29,52,.16); }
.lvref .thumb{ position:relative; aspect-ratio:16/9; min-height:0; background:var(--lvmedia); overflow:hidden; display:grid; place-items:center; }
.lvref .thumb video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:transparent; }
.lvref .thumb .camico{ display:grid; place-items:center; opacity:.5; }
.lvref .thumb .camico svg,.lvref .thumb .camico .v4q-lvico svg{ width:30px !important; height:30px !important; color:#7d93b3; }
.lvref .cam.playing .thumb .camico,.lvref .cam.hassnap .thumb .camico{ display:none; }   /* video or snapshot covers the placeholder */
.lvref .camBadge{ position:absolute; top:6px; left:6px; z-index:2; font-size:8px; font-weight:800; padding:4px 6px; border-radius:12px; background:rgba(3,9,16,.72); color:#dff0ff; border:1px solid rgba(255,255,255,.12); }
.lvref .camPlay{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; width:36px; height:36px; border-radius:999px; border:0; cursor:pointer; color:#fff; background:rgba(15,23,42,.7); font-size:14px; display:inline-flex; align-items:center; justify-content:center; }
.lvref .camInfo{ min-height:52px; display:flex; flex-direction:column; justify-content:center; padding:8px 9px 9px; }
.lvref .camInfo b{ display:block; font-size:11px; line-height:1.25; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lvref .camInfo b i{ color:var(--muted); font-weight:600; font-style:normal; }
.lvref .camInfo span{ display:flex; align-items:center; gap:5px; color:var(--muted); font-size:9px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lvref .camInfo .dot{ width:6px; height:6px; border-radius:50%; background:var(--lvgreen); flex:none; }

/* quad + wall (fluid) */
.lvref .quad{ display:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--lvgap); }
.lvref .wall{ display:none; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--lvgap); }
.lvref[data-layout="quad"] .focusGrid,.lvref[data-layout="wall"] .focusGrid{ display:none; }
.lvref[data-layout="quad"] .quad{ display:grid; } .lvref[data-layout="wall"] .wall{ display:grid; }

/* transport badge shared with app.js setTransportBadge (id tp_<cam>) */
.lvref .lvtp{ position:absolute; z-index:3; left:8px; bottom:8px; display:none; padding:2px 7px; border-radius:5px; font:600 11px system-ui; color:#fff; background:rgba(15,23,42,.72); }

/* ---- responsive (content only; the v4 shell owns the sidebar/header) ---- */
@media (min-width:1700px){ .lvref .focusGrid{ grid-template-columns:minmax(0,1.85fr) minmax(390px,.75fr); } }
@media (max-width:1280px){ .lvref .focusGrid{ grid-template-columns:minmax(0,1.42fr) minmax(300px,.78fr); } .lvref .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:1024px){ .lvref .focusGrid{ grid-template-columns:minmax(0,1fr); } .lvref .rail{ height:auto; grid-template-rows:auto auto; } .lvref .railGrid{ grid-template-columns:repeat(4,minmax(0,1fr)); overflow:visible; } .lvref .wall{ grid-template-columns:repeat(3,minmax(0,1fr)); } .lvref .search2{ order:10; width:100%; margin-left:0; } }
@media (max-width:820px){ .lvref .railGrid,.lvref .wall{ grid-template-columns:repeat(2,minmax(0,1fr)); } .lvref .heroTop{ left:12px; right:12px; top:11px; } .lvref .heroBottom{ left:10px; right:10px; bottom:10px; } .lvref .streammeta{ display:none; } }
@media (max-width:560px){ .lvref .stats{ grid-template-columns:1fr 1fr; } .lvref .lvtoolbar{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); } .lvref .chip,.lvref .layoutBtn{ width:100%; padding-inline:6px; } .lvref .search2{ grid-column:1/-1; order:20; } .lvref .focusGrid{ display:block; } .lvref .rail{ margin-top:10px; } .lvref .railGrid{ grid-template-columns:1fr 1fr; } .lvref .quad{ grid-template-columns:1fr; } .lvref .wall{ grid-template-columns:1fr 1fr; } .lvref .heroName{ font-size:15px; } }
@media (max-width:390px){ .lvref .stats{ grid-template-columns:1fr; } .lvref .railGrid,.lvref .wall{ grid-template-columns:1fr; } .lvref .lvtoolbar{ grid-template-columns:1fr 1fr; } }
@media (orientation:landscape) and (max-height:700px) and (min-width:821px){ .lvref .stats{ display:none; } .lvref .heroMedia{ aspect-ratio:auto; height:min(68vh,620px); } .lvref .rail{ max-height:min(68vh,620px); } .lvref .railGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); overflow:auto; } }
@media (orientation:portrait) and (min-width:561px) and (max-width:1024px){ .lvref .focusGrid{ grid-template-columns:1fr; } .lvref .railGrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }