/* ==========================================================================
   WAR BENSIN BALI — base
   Token, font, dan kontrol dasar (badge, chip, tombol ikon, toast).
   Bahasa visual: zine punk / poster DIY — kertas fotokopi kotor, border tebal,
   bayangan keras tanpa blur, sudut kotak (radius 0).
   ========================================================================== */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/vendor/fonts/fira-sans-400.woff2') format('woff2')}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('/vendor/fonts/fira-sans-500.woff2') format('woff2')}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/vendor/fonts/fira-sans-600.woff2') format('woff2')}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/vendor/fonts/fira-sans-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/vendor/fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/vendor/fonts/ibm-plex-mono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('/vendor/fonts/ibm-plex-mono-600.woff2') format('woff2')}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('/vendor/fonts/anton-400.woff2') format('woff2')}
@font-face{font-family:'Permanent Marker';font-style:normal;font-weight:400;font-display:swap;
  src:url('/vendor/fonts/permanent-marker-400.woff2') format('woff2')}
@font-face{font-family:'Special Elite';font-style:normal;font-weight:400;font-display:swap;
  src:url('/vendor/fonts/special-elite-400.woff2') format('woff2')}

:root{
  --ground:#E7E1D3; --surface:#F3EEE2; --surface-2:#E2DBC9;
  --line:#131313; --line-2:#131313;
  --ink:#131313; --ink-2:#3A3630; --mut:#6B6459;
  --acc:#C81616; --acc-fill:#FFE600; --acc-soft:#FFF0A8; --acc-line:#131313;
  --open:#0B6130; --open-soft:#D6EFDD; --open-line:#131313;
  --shut:#C81616; --shut-soft:#F3D0CE; --shut-line:#131313;
  --unk:#5E574C; --unk-soft:#D8D0BF; --unk-line:#131313;
  /* Dua tingkat, disengaja:
     - `--*`   : warna GELAP untuk TEKS/simbol. Kontras 5,0-6,5:1 di atas kertas
                 (lolos WCAG AA); warna cerah Google hanya 1,8-4,1:1 sehingga
                 tidak terbaca.
     - `--*Line`: warna PERSIS seperti yang digambar di peta (dari traffic.py),
                 dipakai untuk contoh garis di legenda supaya yang dilihat di
                 legenda sama dengan yang dilihat di peta. */
  --lancar:#0B6130; --padat:#7A4F00; --macet:#C81616;
  --lancarLine:#16A34A; --padatLine:#F59E0B; --macetLine:#DC2626;
  --r-in:0px; --r-btn:0px; --r-card:0px; --r-sheet:0px;
  --sh-1:3px 3px 0 var(--ink);
  --sh-2:5px 5px 0 var(--ink);
  --sans:'Fira Sans',system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:'Anton','Fira Sans',system-ui,sans-serif;
  --marker:'Permanent Marker','Fira Sans',cursive;
  --type:'Special Elite','Fira Sans',monospace;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}
button,input{font-family:inherit}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--display);
  text-transform:uppercase;letter-spacing:.4px;font-size:10.5px;font-weight:400;
  padding:3px 8px;border:2px solid var(--ink);background-color:var(--surface);
  color:var(--ink-2);white-space:nowrap;line-height:1.45}
.badge svg{width:12px;height:12px;flex:none;stroke-width:2.6}
.badge.open{background-color:var(--open-soft);color:var(--open)}
.badge.shut{background-color:var(--shut-soft);color:var(--shut)}
.badge.unk{background-color:var(--unk-soft);color:var(--unk)}
.badge.acc{background-color:var(--acc-fill);color:var(--ink)}
.badge.macet{background-color:var(--macet);color:#fff}
.badge.padat{background-color:var(--acc-fill);color:var(--ink)}
.badge.lancar{background-color:var(--open-soft);color:var(--open)}
.badge.num{font-family:var(--mono);font-size:11px}

.chip{border:2.5px solid var(--ink);background-color:var(--surface);padding:6px 11px;
  font-family:var(--display);text-transform:uppercase;font-size:11.5px;letter-spacing:.5px;
  font-weight:400;color:var(--ink);cursor:pointer;transition:transform .06s,background-color .12s}
.chip:active{transform:translate(1px,1px)}
.chip[aria-pressed="true"]{background-color:var(--acc);color:#fff}

.icobtn{width:48px;height:48px;flex:none;border:3px solid var(--ink);background-color:var(--surface);
  box-shadow:var(--sh-1);display:grid;place-items:center;cursor:pointer;
  transition:transform .08s,background-color .12s}
.icobtn svg{width:21px;height:21px;color:var(--ink);stroke-width:2}
.icobtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.icobtn[aria-pressed="true"]{background-color:var(--acc-fill)}
.icobtn[aria-pressed="true"] svg{color:var(--ink)}

.toast{position:absolute;z-index:600;left:50%;bottom:24px;transform:translate(-50%,12px);
  background-color:var(--acc-fill);color:var(--ink);padding:11px 17px;border:3px solid var(--ink);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.5px;font-size:13px;
  box-shadow:var(--sh-2);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
  max-width:90vw}
.toast.on{opacity:1;transform:translate(-50%,0)}

.empty{padding:16px 12px;font-size:12.5px;color:var(--ink-2);line-height:1.6;margin:0;
  font-family:var(--type)}
.cap{margin:3px 0 0;font-size:11px;color:var(--ink-2);font-family:var(--type);
  text-transform:uppercase;letter-spacing:.5px}