/* ==========================================================================
   WAR BENSIN BALI — panel detail SPBU, kotak antrean, pemutar CCTV
   ========================================================================== */
.sheet{position:absolute;z-index:520;top:120px;right:12px;bottom:12px;width:442px;
  background-color:var(--surface);background-image:var(--grain);border:3px solid var(--ink);
  box-shadow:var(--sh-2);display:none;flex-direction:column;overflow:hidden}
.sheet.on{display:flex}
.sheet .bar{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;
  border-bottom:3px solid var(--ink);background-color:var(--ink)}
.sheet .bar h2{margin:0;font-family:var(--display);text-transform:uppercase;font-size:18px;
  font-weight:400;letter-spacing:.6px;line-height:1.15;color:#fff}
.sheet .bar .x{margin-left:auto;flex:none;width:40px;height:40px;border:2.5px solid var(--acc-fill);
  background-color:transparent;cursor:pointer;display:grid;place-items:center}
.sheet .bar .x:active{transform:translate(2px,2px)}
.sheet .bar .x svg{width:18px;height:18px;stroke-width:2.4;color:var(--acc-fill)}
.pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.sheet .body{overflow-y:auto;overscroll-behavior:contain;padding:14px 15px 22px}
.sheet h3{margin:20px 0 9px;display:inline-block;font-family:var(--marker);
  text-transform:uppercase;font-size:12.5px;font-weight:400;letter-spacing:.5px;color:var(--ink);
  background-color:var(--acc-fill);border:2px solid var(--ink);padding:3px 10px;
  transform:rotate(-1.2deg);box-shadow:2px 2px 0 var(--ink)}
.sheet h3:first-child{margin-top:2px}
.kv{margin:0 0 4px;font-size:13px;color:var(--ink-2);line-height:1.55}
.kv b{color:var(--ink);font-weight:700}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.actions a,.actions button{flex:1 1 auto;min-height:46px;display:inline-flex;align-items:center;
  justify-content:center;gap:7px;border:3px solid var(--ink);background-color:var(--surface);
  color:var(--ink);font-family:var(--display);text-transform:uppercase;letter-spacing:.5px;
  font-size:13px;font-weight:400;text-decoration:none;cursor:pointer;padding:0 14px;
  box-shadow:var(--sh-1);transition:transform .06s,background-color .12s}
.actions svg{width:15px;height:15px;stroke-width:2.4}
.actions a:active,.actions button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.actions a.primary{background-color:var(--acc);color:#fff}
.actions a.primary:hover{background-color:#A51111}
.cam{width:100%;text-align:left;border:2.5px solid var(--ink);background-color:var(--surface);
  padding:8px 10px;margin-bottom:6px;cursor:pointer;font-size:13px;display:block}
.cam:hover{background-color:var(--acc-soft)}
.cam[aria-current="true"]{background-color:var(--acc-fill)}
.cam.dead{opacity:.55}
.cam b{display:flex;align-items:center;gap:6px;font-weight:700}
.cam b svg{width:13px;height:13px;flex:none;stroke-width:2.6}
.cam .meta{font-size:11.5px;color:var(--mut);margin-top:3px;font-family:var(--type)}
#vbox video{width:100%;aspect-ratio:16/9;background:#131313;border:3px solid var(--ink);display:block}
.note{margin:6px 0 0;font-size:11.5px;color:var(--mut);line-height:1.55;font-family:var(--type)}
.warn{margin:10px 0 0;font-size:12.5px;color:var(--ink);background-color:var(--acc-fill);
  border:2.5px solid var(--ink);padding:8px 10px;line-height:1.5;font-family:var(--type);
  box-shadow:2px 2px 0 var(--ink)}
.warn svg{width:14px;height:14px;stroke-width:2.6;vertical-align:-2px;margin-right:4px}

/* Kotak antrean: angka besar tetap di kertas bersih supaya terbaca. */
.jam{border:3px solid var(--ink);padding:12px;background-color:var(--surface-2);position:relative}
.jam .big{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:30px;font-weight:600;
  letter-spacing:-1px;line-height:1.05;color:var(--ink)}
.jam .big.calm{font-family:var(--display);text-transform:uppercase;font-size:18px;font-weight:400;
  letter-spacing:.5px;color:var(--acc)}
/* Level lalu lintas: satu kata besar, warna = tingkat. Angka meter, jumlah
   komponen, dan catatan metodologi sengaja tidak ditampilkan lagi. */
.jam .big.lv{font-family:var(--display);text-transform:uppercase;font-size:32px;font-weight:400;
  letter-spacing:.5px;line-height:1}
.jam .big.lv.macet{color:var(--macet)}
.jam .big.lv.padat{color:var(--padat)}
.jam .big.lv.lancar{color:var(--lancar)}
.jam .cap{margin:3px 0 0;font-size:11px;color:var(--ink-2);font-family:var(--type);
  text-transform:uppercase;letter-spacing:.5px}
/* Tinggi potongan ditulis px, bukan 100%: sebagai flex item dengan
   `align-items:flex-start` di parent ber-`overflow:hidden`, Chrome menghitung
   `height:100%` jadi 0px sehingga bar-nya selalu kosong. */
.jam .bar{display:flex;align-items:stretch;height:10px;overflow:hidden;margin:11px 0 9px;
  background-color:var(--surface);border:2px solid var(--ink)}
.jam .bar i{display:block;height:10px;flex:0 0 auto;min-width:1px}
.legend-inline{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-2)}
.legend-inline span{display:inline-flex;align-items:center;gap:5px}
.swatch{width:10px;height:10px;flex:none;border:1.5px solid var(--ink)}
.skel{height:14px;background:linear-gradient(90deg,#DED7C7 25%,#EDE7DA 37%,#DED7C7 63%);
  background-size:400% 100%;animation:shim 1.4s ease-in-out infinite;margin:7px 0}
@keyframes shim{0%{background-position:100% 50%}100%{background-position:0 50%}}
details.trans{margin-top:12px;font-size:12px;color:var(--ink-2)}
details.trans summary{cursor:pointer;font-weight:700;min-height:28px}
.ascii{font-family:var(--mono);font-size:11px;line-height:1.2;letter-spacing:1.5px;
  background-color:#fff;border:2px solid var(--ink);padding:8px 10px;margin:9px 0;overflow-x:auto}