/* ============================================================
   tablet.css — the security map.

   It used to slide up over 82% of the screen behind a dimming scrim,
   which meant picking a camera hid the camera. It is now a corner panel
   on the tablet: the feed stays live behind it, the way a real bank of
   monitors would work.
   ============================================================ */

#cam-panel{
  position:absolute; z-index:10;
  right:calc(12px + var(--safe-r));
  bottom:0;
  width:min(400px, 46%);
  height:min(56%, 330px);
  display:flex; flex-direction:column;
  padding:14px 12px calc(6px + var(--safe-b));
  background:rgba(8,12,7,0.93);
  border:2px solid #3a4032; border-bottom:none;
  border-radius:16px 16px 0 0;
  box-shadow:0 -10px 40px rgba(0,0,0,0.75);
  transform:translateY(102%);
  /* visibility, not just transform: a panel parked off-screen is still in
     the tab order and still hit-tested otherwise, so Tab from the control
     bar used to land on nine invisible camera buttons. */
  visibility:hidden;
  pointer-events:none;
  transition:transform 0.36s cubic-bezier(.2,.8,.3,1),
             visibility 0s linear 0.36s;
}
#cam-panel.open{
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition:transform 0.36s cubic-bezier(.2,.8,.3,1),
             visibility 0s linear 0s;
}
#cam-panel::before{
  content:"";
  position:absolute; top:6px; left:50%;
  transform:translateX(-50%);
  width:40px; height:4px; border-radius:2px;
  background:#3a4032;
}

.cam-panel-header{
  display:flex; align-items:center; gap:8px;
  margin:6px 0 6px;
}
.cam-panel-header h2{
  margin:0; flex:0 0 auto;
  font-family:var(--font-mono); font-size:0.7rem;
  letter-spacing:0.1em; color:var(--nv);
}
.cam-panel-current{
  flex:1; min-width:0;
  font-size:0.64rem; letter-spacing:0.05em;
  color:var(--paper-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cam-panel-close{
  flex:0 0 auto;
  min-width:44px; min-height:44px;
  padding:5px 9px;
  font-size:0.62rem;
  background:none; border:1px solid var(--panel-edge);
  color:var(--paper-dim); cursor:pointer;
}
.cam-panel-close:hover{ border-color:var(--nv); color:var(--nv); }

.cam-map-wrap{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
}
.cam-map-wrap svg{ width:100%; height:100%; max-height:100%; }

.map-node{ cursor:pointer; }
.map-node rect{
  fill:#0d0f0a; stroke:#5b6350; stroke-width:3;
  transition:stroke 0.15s ease, fill 0.15s ease;
}
.map-node text{
  fill:#cfd8c4; font-family:var(--font-mono); font-size:32px;
  pointer-events:none;
}
.map-node .room-name{ fill:#9fae8c; font-size:22px; }
.map-node:hover rect{ stroke:var(--nv); }
.map-node.active rect{ stroke:var(--nv); fill:#122016; }
.map-node.active text{ fill:var(--nv); }
/* a node lights red while you can actually see someone standing in it */
.map-node.occupied rect{ stroke:var(--red); fill:#1d0f0d; }
.map-node.occupied text{ fill:#ffb3ac; }
.map-node.offline rect{ stroke:#3a3f33; fill:#0a0a08; }
.map-node.offline text{ fill:#4a5142; }

.map-you rect{ fill:#241313; stroke:var(--red); }
.map-you text{ fill:var(--red); font-size:30px; }
.map-line{ stroke:#454d3c; stroke-width:3; fill:none; }
.map-hub{ fill:none; stroke:#3b4132; stroke-width:3; }

/* the little grab tab that hints the tablet exists at all */
.tablet-tab{
  position:absolute; z-index:8;
  left:50%; bottom:0;
  transform:translateX(-50%);
  width:110px; height:14px;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  opacity:0.5;
  transition:opacity 0.3s ease;
}
.tablet-tab span{
  display:block; width:52px; height:4px; border-radius:2px;
  background:var(--panel-edge);
}
body.cams-up .tablet-tab{ opacity:0; }

@media (max-width:720px){
  #cam-panel{
    left:0; right:0; width:auto;
    height:min(52%, 250px);
    border-radius:14px 14px 0 0;
    padding:12px 10px calc(4px + var(--safe-b));
  }
}
@media (max-height:430px){
  #cam-panel{ height:min(62%, 210px); }
}

/* ---------------- compact camera grid ----------------
   Below roughly a phone-in-landscape height the schematic is only about
   150px tall, which renders its labels at four or five pixels. The grid
   carries the same nine cameras at a size you can actually hit. */
.cam-quick{ display:none; }

.quick-cam{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; min-height:46px; padding:4px 2px;
  background:#0d110b;
  border:1px solid #3a4032;
  color:var(--paper-dim);
  font-family:var(--font-mono);
  cursor:pointer;
  transition:border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.quick-cam .qn{ font-family:var(--font-pixel); font-size:1.15rem; line-height:1; color:var(--paper); }
.quick-cam .ql{ font-size:0.54rem; letter-spacing:0.05em; text-align:center; line-height:1.15; }
.quick-cam:hover{ border-color:var(--nv); }
.quick-cam.active{ border-color:var(--nv); background:#122016; color:var(--nv); }
.quick-cam.active .qn{ color:var(--nv); }
.quick-cam.occupied{ border-color:var(--red); }

@media (max-height:520px), (max-width:700px){
  .cam-map-wrap{ display:none; }
  .cam-quick{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:5px;
    flex:1; min-height:0;
    align-content:center;
  }
  #cam-panel{
    left:auto; right:calc(8px + var(--safe-r));
    width:min(430px, 58%);
    height:auto; max-height:76%;
    padding:12px 10px calc(8px + var(--safe-b));
  }
}
@media (max-width:700px){
  #cam-panel{ left:0; right:0; width:auto; height:auto; max-height:62%; }
  .cam-quick{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:700px) and (max-height:520px){
  .cam-quick{ grid-template-columns:repeat(5, 1fr); }
}
/* the grab tab has no business glowing during a blackout */
body.power-out .tablet-tab{ opacity:0; }