/* ==========================================================================
   VARNERDOORS LIVE — the crew, right now.
   ==========================================================================
   A board down the left, a map filling everything else. Built to be left open
   on a desk all day, so nothing blinks, spins or demands attention except the
   one thing that should: a door landing.
   ========================================================================== */

:root{
  --red:#D80C11;
  --ground:#08080B;
  --card-1:#131318;
  --card-2:#0E0E12;
  --inset:#0A0A0D;
  --line:rgba(255,255,255,.07);
  --ink:#fff;
  --ink-2:rgba(255,255,255,.62);
  --ink-3:rgba(255,255,255,.40);
  --live:#27AE60;
  --recent:#E0A800;
  --idle:#6b7280;
}

*{ box-sizing:border-box }
html,body{ height:100%; margin:0 }
body{
  background:var(--ground); color:var(--ink); overflow:hidden;
  font:400 15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}

.gate{ padding:70px 20px; text-align:center; color:var(--ink-3) }
.gate.no{ color:#ff6b6e }

.shell{ display:flex; height:100vh }

/* ---------------------------------------------------------------- panel --- */
.panel{
  flex:none; width:320px; display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--card-1),var(--card-2));
  border-right:1px solid var(--line);
}
.phead{
  display:flex; align-items:center; gap:9px;
  padding:14px 15px; border-bottom:1px solid var(--line);
}
.mark{
  font:900 15px/1 Inter,sans-serif; letter-spacing:-.02em;
  color:#fff; text-decoration:none;
}
.mark i{ font-style:normal; color:var(--red) }
/* A slow pulse, not a blink: it says "still updating" without pulling the eye
   every two seconds all day. */
.livedot{
  margin-left:auto; width:9px; height:9px; border-radius:50%;
  background:var(--live); box-shadow:0 0 0 0 rgba(39,174,96,.5);
  animation:beat 2.6s ease-out infinite;
}
.livedot.stale{ background:var(--idle); animation:none }
@keyframes beat{
  0%{ box-shadow:0 0 0 0 rgba(39,174,96,.45) }
  70%{ box-shadow:0 0 0 9px rgba(39,174,96,0) }
  100%{ box-shadow:0 0 0 0 rgba(39,174,96,0) }
}

/* --------------------------------------------------------------- summary --- */
.summary{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border-bottom:1px solid var(--line);
}
.sum{ background:var(--card-2); padding:11px 14px }
.sum b{
  display:block; font:800 22px/1 Inter,sans-serif;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.sum span{
  display:block; margin-top:5px;
  font:600 10.5px/1 Inter,sans-serif; letter-spacing:.06em; color:var(--ink-3);
}
.sum.hot b{ color:#ff5a5e }

/* ------------------------------------------------------------------ crew --- */
.crew{ flex:1; overflow-y:auto; padding:8px }
.rep{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 11px; margin-bottom:6px;
  background:var(--inset); border:1px solid var(--line); border-radius:11px;
  color:inherit; text-align:left; cursor:pointer;
}
.rep:hover{ border-color:rgba(255,255,255,.18) }
.rep.on{ border-color:var(--red) }
.rep .dot{
  width:10px; height:10px; border-radius:50%; flex:none; background:var(--idle);
}
.rep.live .dot{ background:var(--live) }
.rep.recent .dot{ background:var(--recent) }
.rep .who{ flex:1; min-width:0 }
.rep .nm{
  display:block; font:700 13px/1.2 Inter,sans-serif;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rep .sub{
  display:block; margin-top:3px;
  font:600 11px/1.2 Inter,sans-serif; color:var(--ink-3);
}
.rep .n{
  flex:none; text-align:right;
}
.rep .n b{ display:block; font:800 15px/1 Inter,sans-serif; font-variant-numeric:tabular-nums }
.rep .n span{ display:block; margin-top:3px; font:600 9.5px/1 Inter,sans-serif; color:var(--ink-3) }
.crew .empty{ padding:18px 12px; color:var(--ink-3); font:500 13px/1.5 Inter,sans-serif }

/* ----------------------------------------------------------------- foot --- */
.pfoot{ padding:12px 14px; border-top:1px solid var(--line) }
.follow{ display:flex; align-items:center; gap:8px; margin-bottom:8px; cursor:pointer }
.follow input{ accent-color:var(--red); width:15px; height:15px }
.follow span{ font:600 12px/1 Inter,sans-serif; color:var(--ink-2) }
.note{ margin:8px 0 0; font:600 10.5px/1.45 Inter,sans-serif; color:var(--ink-3) }
.note.quiet{ color:rgba(255,255,255,.28) }
.out{
  display:block; margin-top:11px; text-align:center;
  padding:9px; border-radius:9px; background:rgba(216,12,17,.14);
  color:#ff7c80; text-decoration:none; font:700 12px/1 Inter,sans-serif;
}

/* ------------------------------------------------------------------ map --- */
#map{ flex:1; min-width:0; background:#0d1117 }
.leaflet-container{ font:inherit; background:#0d1117 }
.leaflet-control-attribution{
  background:rgba(8,8,11,.7) !important; color:rgba(255,255,255,.4) !important;
  font-size:9px !important;
}
.leaflet-tile-pane{ filter:contrast(1.08) saturate(1.12) brightness(1.02) }

/* Door pins — same language as the rep map so the two read alike. */
.pin{ background:none; border:none }
.pin b{
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50% 50% 50% 4px;
  transform:rotate(-45deg); border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.6);
  font:800 9px/1 Inter,sans-serif; color:#fff; font-style:normal;
}
.pin b i{ transform:rotate(45deg); font-style:normal }
/* A door that landed in the last few minutes announces itself once. */
.pin.fresh b{ animation:landed 2.4s ease-out 3 }
@keyframes landed{
  0%{ box-shadow:0 0 0 0 rgba(216,12,17,.6) }
  70%{ box-shadow:0 0 0 14px rgba(216,12,17,0) }
  100%{ box-shadow:0 0 0 0 rgba(216,12,17,0) }
}

/* A rep on the map: a labelled marker, because an owner needs to know WHICH
   dot is which without tapping it. */
.rep-marker{ background:none; border:none }
.rep-marker .body{
  display:flex; align-items:center; gap:6px;
  padding:4px 9px 4px 5px; border-radius:99px;
  background:rgba(8,8,11,.86); border:1.5px solid var(--idle);
  white-space:nowrap; transform:translate(-50%,-50%);
  box-shadow:0 2px 10px rgba(0,0,0,.6);
}
.rep-marker.live .body{ border-color:var(--live) }
.rep-marker.recent .body{ border-color:var(--recent) }
.rep-marker .puck{
  width:15px; height:15px; border-radius:50%; flex:none;
  background:var(--idle); border:2px solid #fff;
}
.rep-marker.live .puck{ background:var(--live) }
.rep-marker.recent .puck{ background:var(--recent) }
.rep-marker .nm{ font:800 11px/1 Inter,sans-serif; color:#fff }
.rep-marker .mins{ font:700 10px/1 Inter,sans-serif; color:rgba(255,255,255,.55) }
.rep-marker.live .puck{ animation:beat 2.6s ease-out infinite }

/* --------------------------------------------------------------- ticker --- */
.ticker{
  position:fixed; right:16px; bottom:16px; z-index:900;
  display:flex; flex-direction:column; gap:7px; align-items:flex-end;
  pointer-events:none;
}
.tick{
  display:flex; align-items:center; gap:8px;
  padding:9px 13px; border-radius:11px;
  background:rgba(19,19,24,.95); border:1px solid var(--line);
  box-shadow:0 6px 22px rgba(0,0,0,.55);
  font:700 12.5px/1 Inter,sans-serif;
  animation:slidein .35s ease-out;
}
.tick .dot{ width:9px; height:9px; border-radius:50%; flex:none }
.tick .who{ color:var(--ink-3); font-weight:600 }
@keyframes slidein{ from{ opacity:0; transform:translateX(14px) } }

/* --------------------------------------------------------------- phones --- */
@media (max-width:820px){
  body{ overflow:auto }
  .shell{ flex-direction:column; height:auto; min-height:100vh }
  .panel{ width:100%; border-right:none; border-bottom:1px solid var(--line) }
  .crew{ max-height:none; overflow:visible }
  #map{ height:62vh; min-height:340px }
  .ticker{ right:10px; bottom:10px }
}