/* Cute Brokers - the floor book.
   Aturan keras: NOL gradient, box-shadow, blur, border-radius.
   Kertas hangat (bukan putih), hairline, sudut siku, angka tabular.
   Satu aksen sistem: --sig (merah panji), bukan hiasan tombol. */

@font-face{font-family:Departure;src:url(/assets/departure-mono.woff2) format('woff2');
  font-weight:400;font-display:swap}
/* Silkscreen = font PIXEL. Art-nya pixel 32x32, jadi tipografinya ikut piksel.
   Archivo Black (sans generik) dibuang: ga ada hubungannya sama art. */
@font-face{font-family:Pixel;src:url(/assets/silkscreen-regular.woff2) format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:Pixel;src:url(/assets/silkscreen-bold.woff2) format('woff2');
  font-weight:700;font-display:swap}

/* Palet DIUKUR dari 10.000 art (art_pairs.json), bukan dikarang.
   Art cuma punya 10 pasang: bg pastel + ink gelap, terkunci 100% (nol varian).
   NOL warna jenuh di art -> merah #a8261d yg dulu dipakai itu KARANGAN, dibuang.
   --paper/--ink digeser JS ngikut pasangan art (setPair). */
:root{
  /* --paper2 = paper dicampur ink 7% (rumus sama kayak mixHex di setPair),
     jadi tetep turunan pasangan art, bukan warna baru. */
  --paper:#ededed; --paper2:#ededed; --ink:#171717; --ink2:#171717a8;
  --line:#17171730; --line2:#17171716; --sig:#171717; --dark:#171717;
  --rail:44px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);
  font:13px/1.45 Departure,ui-monospace,monospace;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
  overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;
  letter-spacing:.04em}
:focus-visible{outline:2px solid var(--sig);outline-offset:1px}

/* ---------- rangka ---------- */
#shell{display:grid;grid-template-rows:auto auto 1fr auto;height:100%;
  grid-template-columns:minmax(0,1fr)}   /* minmax(0,..) = matiin lantai min-content */
#shell>*{min-width:0}                    /* grid item default min-width:auto */

/* ---------- masthead sbg kartu arsip ---------- */
#mast{border-bottom:1px solid var(--ink);display:flex;align-items:stretch;
  min-width:0;overflow:hidden}
#wm{padding:10px 16px 8px;border-right:1px solid var(--ink);flex:0 0 auto}
#wm b{display:block;font:700 21px/1 Pixel,ui-monospace,monospace;
  letter-spacing:.01em;text-transform:uppercase}
#wm i{display:block;font-style:normal;font-size:10px;color:var(--ink2);
  letter-spacing:.22em;margin-top:5px}
#mastCells{display:flex;flex:1 1 auto;min-width:0;overflow:hidden}
.cell{padding:10px 14px;border-right:1px solid var(--line);min-width:0;
  flex:0 1 auto;
  display:flex;flex-direction:column;justify-content:center}
.cell u{display:block;text-decoration:none;font-size:9px;letter-spacing:.19em;
  color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell s{display:block;text-decoration:none;font-size:15px;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell.sig s{color:var(--sig)}
@media(max-width:900px){.cell.opt{display:none}}

/* link X. <a class="cell"> -> warisi layout cell, cuma reset dekorasi anchor.
   SENGAJA tanpa class opt/sig: dua class itu display:none di mobile,
   link resmi ga boleh ilang di HP. Warna dari var art, nol karangan. */
a.cell.xl{text-decoration:none;color:inherit;cursor:pointer;
  border-left:1px solid var(--line);
  flex:0 0 auto}   /* JGN nyusut: handle ke-ellipsis = keliatan salah akun.
     Cell lain nilainya pendek ('10,000','4') -> slack diambil dari sana. */
a.cell.xl s{color:var(--ink)}
a.cell.xl:hover s,a.cell.xl:focus-visible s{text-decoration:underline}
a.xf{color:var(--ink);text-decoration:none;
  display:inline-block;padding:7px 2px;margin:-7px 0;  /* tap >=24px, tinggi
     baris footer TETAP: padding naikin kotak sentuh, margin negatif nahan */
  min-height:24px;box-sizing:border-box}
a.xf:hover,a.xf:focus-visible{text-decoration:underline}

/* ---------- bar kendali ---------- */
#bar{border-bottom:1px solid var(--ink);display:flex;align-items:stretch;
  background:var(--paper2);min-width:0;overflow:hidden}
#views{display:flex;border-right:1px solid var(--ink)}
#views button{padding:0 15px;font-size:11px;letter-spacing:.15em;
  border-right:1px solid var(--line);text-transform:uppercase}
#views button[aria-selected=true]{background:var(--ink);color:var(--paper)}
#tools{display:flex;flex:1;align-items:stretch;min-width:0}
#tools .t{display:flex;align-items:center;gap:7px;padding:0 12px;
  border-right:1px solid var(--line);font-size:10px;letter-spacing:.13em;
  color:var(--ink2);white-space:nowrap;min-width:0}
#q{width:118px;background:none;border:0;font:inherit;color:var(--ink);
  border-bottom:1px solid var(--ink)}
#q::placeholder{color:var(--ink2)}
select{font:inherit;background:none;border:0;border-bottom:1px solid var(--ink);
  color:var(--ink);padding:1px 0}
#tools .t.push{margin-left:auto;border-right:0;border-left:1px solid var(--line)}
.chip{border:1px solid var(--ink);padding:2px 8px;font-size:10px;
  letter-spacing:.12em}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper)}
#clear{color:var(--sig);font-size:10px;letter-spacing:.13em}
#clear[hidden]{display:none}

/* ---------- panggung ---------- */
#stage{position:relative;overflow:hidden;min-height:0}
.pane{position:absolute;inset:0;display:none}
.pane[data-on]{display:block}

/* ROUTE - dinding kanvas */
#route{background:var(--dark)}
#cv{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#cv.drag{cursor:grabbing}
#hud{position:absolute;left:0;bottom:0;display:flex;
  border-top:1px solid var(--ink);border-right:1px solid var(--ink);
  background:var(--paper)}
#hud div{padding:4px 10px;font-size:10px;letter-spacing:.13em;
  border-right:1px solid var(--line);color:var(--ink2)}
#hud div b{color:var(--ink);font-weight:400}
#hud div:last-child{border-right:0}
#zoomBtns{position:absolute;right:0;bottom:0;display:flex;
  border-top:1px solid var(--ink);border-left:1px solid var(--ink);
  background:var(--paper)}
#zoomBtns button{width:30px;height:26px;border-right:1px solid var(--line);
  font-size:14px;line-height:1}
#zoomBtns button:last-child{border-right:0;font-size:9px;letter-spacing:.1em;
  width:auto;padding:0 9px}

/* DIVISIONS - strata proporsional */
#divisions{overflow-y:auto;padding:0 0 30px}
.axis{border-bottom:1px solid var(--ink)}
.axis>h3{display:flex;align-items:baseline;gap:9px;padding:11px 16px 8px;
  font:400 11px/1 Departure;letter-spacing:.19em;text-transform:uppercase}
.axis>h3 em{font-style:normal;font-size:9px;color:var(--ink2);letter-spacing:.14em}
.strata{height:46px;margin:0 16px 8px;border:1px solid var(--ink);
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin}
.strata::-webkit-scrollbar{height:5px}
.strata::-webkit-scrollbar-thumb{background:var(--ink3)}
/* isi proporsional. width di-set JS: min band >= 24px biar bisa ditap.
   proporsi TETAP - yang digedein SKALA-nya, bukan band langkanya. */
.sfill{display:flex;height:100%;min-width:100%}
.seg{position:relative;border-right:1px solid var(--line);min-width:0;
  display:block;height:100%;padding:0}
.seg:last-child{border-right:0}
.seg:hover{outline:1px solid var(--sig);outline-offset:-1px;z-index:2}
.seg[aria-pressed=true]{background:var(--ink)!important}
.seg[aria-pressed=true] .sl{color:var(--paper)}
.sl{position:absolute;left:3px;top:3px;right:3px;font-size:9px;
  letter-spacing:.05em;color:var(--ink);overflow:hidden;white-space:nowrap;
  text-align:left;pointer-events:none}
.sn{position:absolute;left:3px;bottom:3px;font-size:9px;color:var(--ink2);
  pointer-events:none}
.seg[aria-pressed=true] .sn{color:var(--paper)}
.sl.gone,.sn.gone{display:none}     /* ga muat = DILEPAS, bukan dipaksa */
/* readout: band tipis ga bisa nampung teks, jadi teksnya pindah ke sini */
.readout{display:flex;align-items:baseline;gap:10px;margin:0 16px 9px;
  padding:6px 9px;border:1px solid var(--line);background:var(--paper2);
  min-height:27px;font:400 10px/1.3 Departure;letter-spacing:.1em}
.readout i{font-style:normal;color:var(--ink3);text-transform:uppercase}
.readout b{font-weight:400;font-size:12px;letter-spacing:.06em}
.readout u{text-decoration:none;color:var(--ink2);margin-left:auto;
  font-variant-numeric:tabular-nums}
.readout.on{border-color:var(--ink)}
.readout.on i{color:var(--ink)}
.legend{padding:0 16px 12px;font-size:10px;color:var(--ink2);
  letter-spacing:.1em}

/* LEDGER - tabel arsip padat */
#ledger{overflow:auto}
table{border-collapse:collapse;width:100%}
thead th{position:sticky;top:0;background:var(--paper2);text-align:left;
  font:400 9px/1 Departure;letter-spacing:.17em;color:var(--ink2);
  padding:8px 10px;border-bottom:1px solid var(--ink);cursor:pointer;
  white-space:nowrap;z-index:3}
thead th[aria-sort] {color:var(--sig)}
tbody td{padding:0 10px;border-bottom:1px solid var(--line2);height:38px;
  white-space:nowrap;font-size:12px}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--line2)}
td.pl{width:32px;padding:0 0 0 10px}
td.pl span{display:block;width:32px;height:32px;
  background-repeat:no-repeat;image-rendering:pixelated}
td.rk{color:var(--sig)}
td.dim{color:var(--ink2)}
#more{display:block;width:100%;padding:13px;border-top:1px solid var(--ink);
  font-size:11px;letter-spacing:.15em;background:var(--paper2)}
#more[hidden]{display:none}

/* ---------- kaki ---------- */
#foot{border-top:1px solid var(--ink);display:flex;align-items:center;gap:14px;
  padding:6px 16px;font-size:9px;letter-spacing:.13em;color:var(--ink2);
  background:var(--paper2);flex-wrap:wrap}
#foot b{color:var(--ink);font-weight:400}

/* ---------- lembar peserta ---------- */
dialog{border:1px solid var(--ink);background:var(--paper);padding:0;
  max-width:min(660px,94vw);width:100%;color:var(--ink)}
dialog::backdrop{background:var(--dark);opacity:.85}
#dHead{display:flex;align-items:stretch;border-bottom:1px solid var(--ink)}
#dHead .cell{border-right:1px solid var(--line)}
#dClose{margin-left:auto;padding:0 15px;border-left:1px solid var(--ink);
  font-size:15px}
#dBody{display:grid;grid-template-columns:200px 1fr}
@media(max-width:560px){#dBody{grid-template-columns:1fr}}
#dArt{border-right:1px solid var(--line);background:var(--dark);
  display:flex;align-items:center;justify-content:center;padding:10px}
#dArt canvas{width:100%;height:auto;aspect-ratio:1;display:block;
  image-rendering:pixelated}
#dRows{min-width:0}
.tr{display:grid;grid-template-columns:88px 1fr 62px;align-items:center;
  gap:8px;padding:8px 12px;border-bottom:1px solid var(--line2);font-size:11px}
.tr:last-child{border-bottom:0}
.tr u{text-decoration:none;font-size:9px;letter-spacing:.15em;color:var(--ink2)}
.tr i{font-style:normal;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.tr b{font-weight:400;text-align:right;color:var(--ink2);font-size:10px}
.tr.absent i,.tr.absent b{color:var(--ink2)}
.tr .bar{grid-column:1/-1;height:2px;background:var(--line2)}
.tr .bar>span{display:block;height:100%;background:var(--sig)}
#dNav{display:flex;border-top:1px solid var(--ink)}
#dNav button{flex:1;padding:9px;font-size:10px;letter-spacing:.15em;
  border-right:1px solid var(--line)}
#dNav button:last-child{border-right:0}

/* ---------- sempit: bar WAJIB wrap, kalau ga doc 883px di 390 ---------- */
@media(max-width:760px){
  #bar{flex-wrap:wrap}
  #views{flex:1 1 100%;min-width:0;border-right:0;
    border-bottom:1px solid var(--line)}
  #views button{flex:1 1 0;min-width:0;text-align:center;padding:9px 0}
  #tools{flex:1 1 100%;flex-wrap:wrap;min-width:0}
  #tools .t{flex:1 1 auto;min-width:0;padding:7px 10px}
  #tools .t.push{margin-left:0;flex:1 1 100%;border-left:0;
    border-top:1px solid var(--line);justify-content:space-between}
  #q{width:100%;min-width:0}
  select{max-width:100%}
  #wm b{font-size:20px}
  #wm i{letter-spacing:.16em}
  .strata{height:44px;margin:0 10px 8px}   /* sentuh butuh tinggi */
  .readout{margin:0 10px 8px}
  .axis>h3{padding:10px 10px 7px}
  .legend{padding:0 10px 11px}
  #hud div{padding:4px 8px}
}
@media(max-width:600px){     /* 600: cell X ga nyusut, jd ORIGIN wajib
     rontok lebih awal - kalau engga, BROKERS/ORIGIN ke-ellipsis di ~500px */
  #mastCells .cell.sig{display:none}   /* ORIGIN/UNLISTED, potong dulu */
}
@media(max-width:380px){     /* HP super sempit: cell X di masthead rontok,
     link X TETAP hidup di footer (handle penuh + tap 27px) */
  #mastCells a.cell.xl{display:none}
}
@media(max-width:480px){   /* 480 bkn 420: celah 421-430 bikin teks ke-clip */
  #wm{padding:8px 11px 7px}
  #wm b{font-size:17px}
  .cell{padding:8px 10px}
  .cell s{font-size:13px}
  #foot{gap:9px;padding:6px 10px}
}

#boot{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;background:var(--paper);font-size:11px;
  letter-spacing:.2em;color:var(--ink2);z-index:9}
#boot[hidden]{display:none}
#boot.err{color:var(--sig)}