/* ============================================================
   market.css — layar Market: jual beli ikan antar pemain.
   Butuh: tokens.css, base.css, components.css, overlay.css, tas.css

   Kenapa tas.css ikut disebut: sheet Jual memakai chrome yang sama
   dengan sheet detail Tas dan Bestiary — .fh-fishhd (judul + tombol
   tutup) dan .fh-fishrows (daftar label-kiri nilai-kanan). Satu
   komponen dipakai tiga layar, bukan tiga salinan. Catatan lengkap
   soal utang tempat tinggalnya ada di kepala bestiary.css.

   BENTUKNYA BARIS, BUKAN GRID, dan itu keputusan isi bukan selera.
   Di Tas dan Bestiary satu sel adalah satu benda yang DILIHAT, jadi
   kotak besar dengan nama pendek sudah cukup. Di sini tiap listing
   membawa empat angka dan satu nama penjual — ikan apa, seberapa
   besar, berapa harganya, semahal apa dibanding nilai dasarnya, dan
   siapa yang menjual. Kotak 76px tidak akan pernah memuat itu tanpa
   memotong salah satunya, dan yang paling mungkin terpotong justru
   harganya.
   ============================================================ */


/* ---------- BARIS TAB ----------
   Menempel di bawah header dengan cara yang sama seperti baris
   saring Tas dan Bestiary: top setinggi header (--fh-hdr-h, diukur
   JS), bukan 0 — kalau keduanya berhenti di 0, baris ini berhenti
   tepat DI BALIK header dan hilang tanpa gejala. */
.fh-mkbar{
  position:sticky;top:var(--fh-hdr-h,0px);
  z-index:var(--z-subbar);
  flex:none;
  /* flex-end + padding-bawah NOL: tab harus MENYENTUH panel di
     bawahnya, dan tab yang tidak aktif memang lebih pendek (34px
     lawan 38px) supaya laci yang tertutup duduk lebih rendah. */
  display:flex;align-items:flex-end;gap:var(--sp-sm);
  padding:var(--sp-md) var(--sp-md) 0;
  background:var(--pixel-bg);

  /* Tinggi baris dikunci satu angka, sama seperti baris saring
     Bestiary: isinya BERGANTI saat pencarian dibuka (segmen keluar,
     kolom ketik masuk), dan baris yang tumbuh atau menyusut karena
     isinya berganti menggeser seluruh daftar di bawahnya.

     38px, bukan 34px seperti di Bestiary, dan angka itu bukan
     pilihan: .fh-seg tingginya 38 dari isinya sendiri (tombol 30 +
     padding 3+3 + tepi 1+1). Sempat diisi 34 — tinggi tombol bulat —
     dan akibatnya baris ini 38 saat segmen tampil lalu 34 saat kolom
     cari menggantikannya, jadi menekan tombol cari menggeser seluruh
     daftar 4px ke atas. Yang menentukan angka ini adalah isi yang
     PALING TINGGI, dan itu segmennya. */
  --bar-h:38px;
  min-height:calc(var(--bar-h) + var(--sp-md));
}
/* Tab dan tombol bulat SEMUANYA kelas Tas apa adanya, tanpa satu
   pun ditimpa — termasuk margin-bawah 4px milik tombol bulat, yang
   di sana menahan lingkaran supaya berhenti beberapa piksel di atas
   garis panel. Baris ini sekarang punya tab yang menyatu persis
   seperti Tas, jadi alasan yang melahirkan margin itu berlaku sama.

   Sebelumnya margin itu ditimpa jadi 0 karena barisnya belum punya
   tab menyatu. Begitu bentuknya ikut Tas, timpaan itu justru yang
   salah. */


/* ---------- PANEL ---------- */

/* Sudut ATAS tidak dibulatkan: di sanalah tab menempel, dan
   lengkungan di titik itu akan memutus garis yang justru sedang
   disambung. Aturan yang sama dengan .fh-bagpanel di Tas. */
.fh-mkpanel{
  margin:0 var(--sp-md) var(--sp-lg);
  background:var(--pixel-surface);
  border:1px solid var(--pixel-border);
  border-radius:0 0 var(--r-md) var(--r-md);
}

/* Baris konteks, formatnya kembar dengan baris kapasitas Tas dan
   progres Bestiary: angka pixel, satuan diredam. Tiga layar yang
   menghitung "berapa dari berapa" tidak boleh menulisnya dengan
   tiga cara. */
/* Baris konteks. Formatnya kembar dengan baris kapasitas Tas dan
   progres Bestiary: angka pixel, satuan diredam. Tiga layar yang
   menghitung "berapa dari berapa" tidak boleh menulisnya dengan
   tiga cara. */
.fh-mkhead{
  display:flex;align-items:center;
  padding:8px var(--sp-md);
  border-bottom:1px solid var(--hairline);
}
.fh-mkhead b{
  font-family:var(--font-pixel);font-size:11px;
  font-variant-numeric:tabular-nums;
}
.fh-mkhead b i{font-style:normal;color:var(--pixel-muted);opacity:.7}


/* ---------- KOLOM CARI ----------
   MENGAMBIL ALIH tempat segmen, tidak berdiri di sebelahnya: baris
   ini tidak muat tiga tab dan kolom ketik sekaligus, dan yang sedang
   mengetik nama ikan tidak sedang berpindah tab. Pola dan alasannya
   sama persis dengan baris saring Bestiary — termasuk tingginya,
   yang memakai --bar-h milik barisnya supaya daftar di bawah tidak
   melompat saat pencarian dibuka. */
/* Kolom cari MENYATU dengan panel persis seperti tab yang
   digantikannya — sudut bawah rata, tepi bawah sewarna panel,
   menindih garisnya 1px. Kalau dia dibiarkan berbentuk kotak
   mengambang, menekan tombol cari akan terlihat seperti panelnya
   ikut lepas dari barisnya.

   Itu juga jujur soal fungsinya: yang sedang mengendalikan isi
   panel memang kolom ini, sama seperti tab saat tidak mencari. */
.fh-mkcari{
  display:none;
  flex:1;min-width:0;
  align-items:center;gap:var(--sp-sm);
  height:var(--bar-h);padding:0 8px 0 10px;
  background:var(--pixel-surface);
  border:1px solid var(--pixel-border);
  border-bottom-color:var(--pixel-surface);
  border-radius:var(--r-md) var(--r-md) 0 0;
  margin-bottom:-1px;
}
.fh-mkbar.is-cari .fh-mkcari{display:flex}
.fh-mkbar.is-cari .fh-bagcat,
.fh-mkbar.is-cari .fh-mkbtn--cari{display:none}

/* Tepi emas HANYA di tiga sisi. Tepi bawah sengaja dibiarkan
   sewarna panel: mewarnainya akan menggambar garis melintang tepat
   di tempat yang barusan disambung. */
.fh-mkcari:focus-within{
  border-top-color:var(--pixel-primary);
  border-left-color:var(--pixel-primary);
  border-right-color:var(--pixel-primary);
}

.fh-mkcari__ic{
  flex:none;width:11px;height:11px;
  fill:var(--pixel-muted);shape-rendering:crispEdges;
}
.fh-mkcari input{
  flex:1;min-width:0;height:100%;
  background:none;border:0;outline:none;
  color:var(--pixel-text);
  /* 16px wajib: Safari iOS memperbesar seluruh halaman begitu
     <input> berfont di bawah itu disentuh. */
  font-size:16px;
}
.fh-mkcari input::placeholder{color:var(--pixel-muted);opacity:.8}
.fh-mkcari input::-webkit-search-cancel-button{display:none}

.fh-mkcari__x{
  flex:none;
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--pixel-raised);
  color:var(--pixel-muted);
}
.fh-mkcari__x svg{width:9px;height:9px;fill:currentColor;shape-rendering:crispEdges}
.fh-mkcari__x:active{transform:scale(.92)}

/* Menu tier rata kanan mengikuti tombolnya, menempel di baris
   sticky-nya sendiri. */
.fh-drop--mk{right:var(--sp-md);min-width:186px}
.fh-drop--mk .fh-dropopt span{
  margin-left:auto;
  font-size:11px;color:var(--pixel-muted);
  font-variant-numeric:tabular-nums;
}

.fh-mkmsg{margin:0 var(--sp-md) var(--sp-md);display:none}
.fh-mkmsg.is-on{display:block}

.fh-mkempty{
  padding:var(--sp-lg) var(--sp-md);
  text-align:center;
}
.fh-mkempty b{
  display:block;font-family:var(--font-pixel);font-size:10px;
  margin-bottom:var(--sp-sm);
}
.fh-mkempty p{font-size:12px;color:var(--pixel-muted);line-height:1.5}

.fh-mkkabar{
  padding:var(--sp-lg) var(--sp-md);
  text-align:center;
  font-size:12px;color:var(--pixel-muted);
}


/* ---------- BARIS LISTING ---------- */

.fh-mklist{padding:var(--sp-sm) var(--sp-md) var(--sp-md)}

.fh-mkrow{
  display:flex;align-items:center;gap:var(--sp-md);
  width:100%;text-align:left;
  padding:10px 2px;
  background:none;
  color:var(--pixel-text);
}
.fh-mkrow + .fh-mkrow{border-top:1px solid var(--hairline)}
/* Hanya baris yang BISA diketuk yang bereaksi ditekan. Baris di
   tab Listing bukan tombol — yang bisa ditekan di sana cuma tombol
   BATAL di dalamnya. */
.fh-mkrow:not(.is-milik):active{transform:scale(.99)}

/* Kotak aset 46px, bukan 76px seperti grid: di baris, kotak
   sebesar grid mendorong harga keluar layar pada 390px. */
.fh-mktile{
  flex:none;
  width:46px;height:46px;
  position:relative;
}
/* .fh-cel-grad di components.css memakai --pixel-surface sebagai
   latar padding-box-nya, dan di panel ini kotaknya memang berdiri
   di atas surface — jadi tidak perlu ditimpa seperti di Tas, yang
   kotaknya duduk di --pixel-raised. */
/* Ukuran bayangan dan gambar TIDAK ditulis ulang di sini —
   .fh-fishghost dan .fh-tile__img sudah menetapkannya, dan dua
   sumber untuk ukuran yang sama berarti satu di antaranya diam-diam
   ketinggalan saat yang lain disetel. */

.fh-mkrow__isi{flex:1;min-width:0;display:block}
.fh-mkrow__isi b{
  display:block;font-size:13px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fh-mkrow__isi small{
  display:block;margin-top:2px;
  font-size:11px;color:var(--pixel-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.fh-mkrow__kanan{
  flex:none;
  display:flex;flex-direction:column;align-items:flex-end;gap:3px;
}

/* HARGA ANGKA PENUH, bukan 2.4M. Alasan yang sama dengan sheet
   jual di Tas: ini layar tempat coin sungguhan berpindah, dan
   "2.4M" bisa berarti 2.350.000 atau 2.449.999. */
.fh-mkharga{
  font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--pixel-primary);
}
/* Nilai dasar di tab Jual BUKAN harga yang dipatok siapa pun, jadi
   dia tidak boleh memakai emas — emas di baris ini berarti "ini
   yang akan kamu bayar/terima". */
.fh-mkharga.is-dasar{color:var(--pixel-text)}

.fh-mkrow__kanan em{
  font-style:normal;font-size:10px;color:var(--pixel-muted);
  font-variant-numeric:tabular-nums;
}

/* SELISIH TERHADAP NILAI DASAR. Ambangnya diambil dari bracket
   biaya listing yang sama, bukan angka baru yang dikarang untuk
   warna: yang membuat penjual membayar biaya lebih tinggi adalah
   yang membuat pembeli membayar lebih mahal.

   Di bawah nilai dasar hijau, di atas dua kali lipat merah, sisanya
   diam. Merah dipakai dengan alasan yang sama seperti kolom "Jadi"
   yang menurun di tabel banding perlengkapan: pemain berhak tahu
   SEBELUM kerugiannya terjadi. */
.fh-mkselisih.is-murah{color:var(--up)}
.fh-mkselisih.is-mahal{color:var(--down)}

/* Tidak mampu beli. Diredam, TIDAK dimatikan: listing yang tidak
   terjangkau tetap boleh dibuka — pemain berhak melihat detailnya,
   dan dialog konfirmasi yang menahan tombol BELI adalah tempat
   yang benar untuk menolak, bukan baris yang diam-diam mati.

   YANG DIREDAM TEKSNYA SAJA, kotak tiernya tidak. Sebelumnya
   seluruh baris diberi opacity .5 dan akibatnya warna tier ikut
   pudar — Koi Prisma yang tidak terjangkau terlihat seperti tier
   lain daripada Koi Prisma yang terjangkau, padahal tier itu
   identitas ikannya dan tidak berubah karena isi dompet pembaca.
   Mampu-tidaknya keadaan; keadaan boleh meredam angka, tidak boleh
   mengubah identitas. */
.fh-mkrow.is-kurang .fh-mkrow__isi,
.fh-mkrow.is-kurang .fh-mkrow__kanan{opacity:.45}


/* ---------- LISTING SENDIRI ----------
   Chip status dicabut bersama baris terjual/batal: server cuma
   mengirim listing yang masih aktif, dan penanda bertuliskan
   "AKTIF" di setiap baris dari daftar yang isinya cuma yang aktif
   tidak memisahkan apa pun — dia cuma memakan kolom yang
   dibutuhkan tombol BATAL. */

.fh-mkbatal{
  padding:4px 9px;border-radius:var(--r-sm);
  font-size:10px;font-weight:600;
  color:var(--pixel-muted);
  background:var(--pixel-raised);
  border:1px solid var(--pixel-border);
}
.fh-mkbatal:active{transform:scale(.94)}


/* ============================================================
   SHEET JUAL
   ============================================================ */

.fh-mksell{padding:var(--sp-md) var(--sp-md) 0}

.fh-mksell__lbl{
  display:block;margin-bottom:6px;
  font-size:11px;color:var(--pixel-muted);
}

.fh-mksell__in{
  display:flex;align-items:center;gap:var(--sp-sm);
  height:44px;padding:0 var(--sp-md);
  background:var(--pixel-bg);
  border:1px solid var(--pixel-border);
  border-radius:var(--r-md);
}
.fh-mksell__in:focus-within{border-color:var(--pixel-primary)}

.fh-mksell__in input{
  flex:1;min-width:0;height:100%;
  background:none;border:0;outline:none;
  color:var(--pixel-primary);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  /* 16px, dan ini BUKAN pilihan selera: Safari iOS memperbesar
     seluruh halaman begitu <input> berfont di bawah 16px disentuh,
     dan di Mini App yang sudah diskalakan sendiri, zoom itu tidak
     pernah kembali dengan rapi. */
  font-size:16px;
}
.fh-mksell__in input::placeholder{color:var(--pixel-muted);opacity:.7}

/* Nilai dasar ditulis TEPAT DI BAWAH kolomnya, bukan di daftar
   baris di bawah. Dia bukan hasil hitungan seperti biaya dan
   potongan — dia patokan yang dipakai pemain SAAT mengetik, jadi
   tempatnya menempel pada yang sedang diketik. */
.fh-mksell__hint{
  margin-top:8px;
  font-size:11px;color:var(--pixel-muted);
}
.fh-mksell__hint b{color:var(--pixel-text);font-variant-numeric:tabular-nums}
.fh-mksell__hint b.is-murah{color:var(--up)}
.fh-mksell__hint b.is-mahal{color:var(--down)}

/* Empat pintasan. Mengetik 12 digit di ponsel sambil menghitung
   rasio adalah pekerjaan yang tidak perlu ada — sebagian besar
   penjual cuma ingin "sedikit di atas nilai". Yang ditekan MENGISI
   kolom, tidak langsung menjual: pemain tetap membaca hitungannya
   sebelum menekan tombol jual. */
.fh-mksell__cepat{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:var(--sp-md);
}
.fh-mksell__cepat button{
  padding:6px 10px;border-radius:20px;
  font-size:11px;
  color:var(--pixel-text);
  background:var(--pixel-raised);
  border:1px solid var(--pixel-border);
}
.fh-mksell__cepat button:active{transform:scale(.95)}

/* Daftar hitungan memakai .fh-fishrows milik sheet detail Tas —
   komponen yang sama, jadi "label kiri, angka kanan" terbaca sama
   di seluruh app. Yang perlu ditambah cuma jaraknya dari pintasan
   di atasnya. */
.fh-mksell .fh-fishrows{padding-left:0;padding-right:0}

/* DIBATASI ke sheet ini lewat id-nya. `.fh-sheet__ft .fh-btn`
   telanjang akan kena kaki sheet MANA PUN — termasuk kaki tiga
   tombol di sheet detail Tas dan dua tombol di Pilih Title — dan
   market.css dimuat belakangan, jadi dia akan menang di sana.
   Kelas kakinya sendiri tidak dipakai karena `.fh-sheet__ft` memang
   milik bersama; yang khusus di sini bentuk tombolnya. */
#fh-mk-sell .fh-sheet__ft .fh-btn{width:100%;height:44px;font-size:9px}


/* Alasan tombol jual mati. Merah, dan itu pemakaian --down yang
   sama dengan kolom "Jadi" yang menurun di tabel banding
   perlengkapan: pemain berhak tahu SEBELUM dia menekan dan gagal.

   Cuma digambar saat memang mati — baris peringatan yang selalu ada
   berhenti dibaca sebelum dia sempat berarti. */
.fh-mksell__salah{
  margin-top:6px;
  font-size:11px;
  color:var(--down);
}


/* ============================================================
   DIALOG KONFIRMASI

   Bentuknya menyalin sheet detail Bestiary, dan memang memakai
   komponen yang sama: .fh-fishprev + .fh-fishstage untuk
   panggungnya, .fh-fishrows untuk daftar angkanya. Yang ditulis di
   bawah cuma penyesuaian karena keduanya sekarang duduk di dalam
   dialog, bukan di dalam sheet.
   ============================================================ */

/* Dialog boleh tinggi, tapi tidak boleh melewati layar. Panggung
   16:9 di lebar 344px sudah ~193px sebelum ditambah empat baris
   angka dan dua tombol — di ponsel pendek itu bisa lewat. Kaki
   dialog TIDAK ikut menggulung: dua tombol yang harus dicari
   dengan menggulung adalah dua tombol yang ditekan tanpa dibaca. */
#fh-mk-dlg{max-height:88vh}
#fh-mk-dlg .fh-dialog__body{
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
#fh-mk-dlg .fh-dialog__body::-webkit-scrollbar{width:0}

/* Panggung menempel ke tepi kiri-kanan dialog. Padding badan
   dialog dibatalkan lewat margin negatif karena gambar yang
   mengambang di tengah dengan pinggiran gelap di kiri-kanannya
   terbaca seperti gambar yang gagal memenuhi tempatnya. */
#fh-mk-dlg .fh-fishprev{
  margin:0 calc(var(--sp-md) * -1) var(--sp-md);
}
/* position:relative sudah ada di .fh-fishstage (tas.css); yang
   ditulis di sini cuma sudutnya, karena panggung di dialog
   menempel ke tepi kiri-kanan dan lengkungan di sana akan
   memutus garis tepi dialognya sendiri. */
#fh-mk-dlg .fh-fishstage{border-radius:0}

/* KEPALA DIALOG = IDENTITAS, bukan pertanyaan.

   Memakai .fh-fishhd yang sama dengan judul sheet detail Tas dan
   Bestiary — nama di atas, badge tier di bawahnya, keduanya di
   tengah. Satu bentuk untuk hal yang sama di tiga layar; badge
   tiernya pun otomatis ikut, karena .fh-fishhd .fh-fishhd__tier
   sudah mengurus warna isinya.

   Dua bentuk sebelumnya gugur berturut-turut: baris tersendiri di
   bawah panggung (rata kiri di badan yang rata tengah, dan badge
   terlempar ke tepi kanan meninggalkan celah selebar setengah
   dialog), lalu overlay di sudut panggung (lebih rapi, tapi
   mengarang bentuk baru untuk sesuatu yang sudah punya bentuk baku
   di dua layar lain).

   padding sisinya ditimpa: 52px di .fh-fishhd itu ruang untuk
   tombol tutup, dan dialog ini tidak punya — dia ditutup lewat
   BATAL di kaki. */
.fh-mkd__hd{
  flex:none;
  padding-left:var(--sp-md);padding-right:var(--sp-md);
  border-bottom:1px solid var(--pixel-border);
}

/* Badan dialog tidak lagi butuh jarak atas: panggung menempel
   langsung di bawah garis kepala. */
#fh-mk-dlg .fh-dialog__body{padding-top:0}
#fh-mk-dlg .fh-fishprev{margin-top:0}

/* Halaman rincian DISEMBUNYIKAN selama konfirmasi kedua tampil.
   Dua dialog bertumpuk dengan ukuran berbeda terbaca seperti layar
   yang tersangkut, dan yang di bawah cuma jadi bingkai berisik.
   Pola yang sama dengan .fh-sheet.is-tuck di Bestiary. */
.fh-dialog.is-tuck{display:none}

/* Daftar angka memakai .fh-fishrows yang sama dengan sheet detail;
   yang perlu ditimpa cuma jaraknya, karena di sini dia duduk di
   dalam dialog yang sudah punya padding sendiri. Rata kiri, karena
   badan dialog rata tengah. */
#fh-mk-dlg .fh-fishrows{padding:0;text-align:left}

/* Catatan di bawah baris. Kosong = tidak memakan ruang sama
   sekali; :empty supaya dialog tanpa catatan tidak menyisakan
   celah yang terlihat seperti sesuatu yang gagal dimuat. */
#fh-mkd-text{margin-top:var(--sp-md)}
#fh-mkd-text:empty{display:none}