/* ============================================================
   clan.css — layar Clan.
   Butuh: tokens.css, base.css, components.css, overlay.css, tas.css

   ⚠  HARUS DIMUAT SESUDAH tas.css. Layar ini memakai empat
   komponen yang masih tinggal di sana — .fh-bagcat (tab menyatu),
   .fh-bagbtn--sort (tombol bulat), .fh-drop (menu saring), dan
   .fh-fishhd/.fh-fishrows (chrome sheet) — persis seperti
   bestiary.css dan market.css. Catatan lengkap soal utang tempat
   tinggalnya ada di kepala bestiary.css.

   EMPAT KEADAAN YANG SALING MENIADAKAN, dan itu yang membentuk
   seluruh berkas ini:

     LUAR     belum punya clan   -> direktori + syarat buat clan
     TUNGGU   pengajuan diproses -> satu panel, satu jalan keluar
     DALAM    sudah jadi anggota -> kartu clan, kapal, daftar orang
     PENGURUS anggota + wewenang -> DALAM + tab permintaan gabung

   Keempatnya BUKAN empat layar. Yang membedakan cuma jawaban satu
   endpoint, dan pemain berpindah antar keadaan itu dari dalam layar
   yang sama — bergabung, ditolak, keluar. Kalau dipecah jadi empat
   tab atau empat overlay, tiap perpindahan jadi perpindahan layar
   dan pemain kehilangan tempatnya.

   Yang dipakai bersama antar keadaan ditulis SEKALI di bawah
   (.fh-clbar, .fh-clpanel, .fh-clcrest); yang khusus satu keadaan
   ditulis di bloknya sendiri.
   ============================================================ */


/* ---------- PEMBUNGKUS KEADAAN ----------
   Ketiga keadaan dibungkus elemennya sendiri, dan ketiganya KOLOM
   FLEKS — bukan blok biasa. Dua alasan, keduanya sudah pernah
   menggigit di berkas lain:

     1. Tombol lebar-penuh. `.fh-btn` memasang width:100%, dan
        tombol yang butuh margin sisi (KELUAR DARI CLAN)
        membatalkannya jadi width:auto — persis pola .fh-cta di
        components.css. Di dalam BLOK, width:auto pada <button>
        berarti menyusut seukuran tulisannya; yang membuat .fh-cta
        tetap selebar layar di Home adalah align-items:stretch
        milik kolom fleks .fh-screen. Tanpa baris ini tombolnya
        menyusut jadi kotak kecil di pojok kiri.
     2. Margin tidak pernah menyatu di dalam kolom fleks, jadi
        jarak antar kartu tetap seperti yang ditulis. Alasan yang
        sama persis dengan .fh-screen di base.css.

   display:none inline dari JS tetap menang atas aturan ini —
   itu properti yang sama di tempat yang lebih spesifik. */
.fh-clstate{display:flex;flex-direction:column}


/* ---------- BARIS TAB ----------
   Bentuk, tinggi, dan cara menempelnya DISALIN PERSIS dari baris
   Market, sampai ke nilai --bar-h-nya. Bukan kemalasan: pemain
   berpindah antara Tas, Bestiary, Market, dan Clan terus-menerus,
   dan baris kontrol yang tingginya beda 4px antar layar terbaca
   sebagai layar yang melompat setiap kali tab diganti.

   Cuma keadaan LUAR yang punya baris ini. Isinya sekarang satu
   LABEL berbentuk tab ("Daftar clan") plus tiga tombol bulat —
   bukan dua tab yang bisa ditukar. Tab kedua ("Buat clan") dicabut
   karena alur pembuatan clan memang tinggal di bot, dan keadaan
   DALAM juga sempat punya barisnya sendiri sebelum daftar orang
   pindah ke balik ikonnya. */
.fh-clbar{
  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 dikunci ke isi yang PALING TINGGI, sama seperti dua
     layar sebelumnya: isinya berganti saat pencarian dibuka (tab
     keluar, kolom ketik masuk), dan baris yang menyusut karena
     isinya berganti menggeser seluruh daftar di bawahnya. Bug ini
     sudah dua kali terjadi — sekali di Bestiary, sekali di
     Market — keduanya karena angka ini diisi tinggi tombol bulat
     (34px) padahal tabnya 38px. */
  --bar-h:38px;
  min-height:calc(var(--bar-h) + var(--sp-md));
}

/* Tab dan tombol bulat memakai kelas Tas apa adanya, tanpa satu
   pun ditimpa — termasuk margin-bawah 4px milik tombol bulat, yang
   menahan lingkarannya berhenti beberapa piksel di atas garis
   panel alih-alih menabraknya. */

/* Kolom cari MENYATU dengan panel persis seperti tab yang
   digantikannya: sudut bawah rata, tepi bawah sewarna panel,
   menindih garisnya 1px. Kotak mengambang di tempat ini membuat
   panelnya terlihat ikut lepas begitu tombol cari ditekan. */
.fh-clcari{
  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-clbar.is-cari .fh-clcari{display:flex}
.fh-clbar.is-cari .fh-bagcat,
.fh-clbar.is-cari .fh-clbtn--cari{display:none}

/* Tepi emas HANYA di tiga sisi. Mewarnai tepi bawah akan
   menggambar garis melintang tepat di sambungan yang barusan
   dibuat. */
.fh-clcari:focus-within{
  border-top-color:var(--pixel-primary);
  border-left-color:var(--pixel-primary);
  border-right-color:var(--pixel-primary);
}

.fh-clcari__ic{
  flex:none;width:11px;height:11px;
  fill:var(--pixel-muted);shape-rendering:crispEdges;
}
.fh-clcari 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-clcari input::placeholder{color:var(--pixel-muted);opacity:.8}
.fh-clcari input::-webkit-search-cancel-button{display:none}

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

.fh-drop--cl{right:var(--sp-md);min-width:190px}


/* ---------- PANEL ----------
   Sudut ATAS tidak dibulatkan: di sanalah tab menempel, dan
   lengkungan di titik itu memutus garis yang justru sedang
   disambung. Aturan yang sama dengan .fh-bagpanel dan
   .fh-mkpanel. */
.fh-clpanel{
  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);
}

/* Panel TANPA tab di atasnya — dipakai keadaan TUNGGU dan kartu
   yang berdiri sendiri. Keempat sudutnya bulat karena tidak ada
   apa pun yang menempel padanya. */
.fh-clpanel--lepas{border-radius:var(--r-md);margin-top:var(--sp-md)}

/* Baris konteks. Formatnya kembar dengan baris kapasitas Tas,
   progres Bestiary, dan baris jumlah Market: angka pixel, satuan
   diredam. Empat layar yang menghitung "berapa dari berapa" tidak
   boleh menulisnya dengan empat cara. */
.fh-clhead{
  display:flex;align-items:center;
  gap:var(--sp-sm);
  padding:8px var(--sp-md);
  border-bottom:1px solid var(--hairline);
}
/* flex:1 supaya apa pun yang ditaruh SESUDAH angka terdorong ke
   tepi kanan tanpa perlu justify-content — dan supaya angkanya
   sendiri yang menyusut kalau baris sempit, bukan tombol di
   kirinya. */
.fh-clhead b{
  flex:1;min-width:0;
  font-family:var(--font-pixel);font-size:11px;font-weight:400;
  font-variant-numeric:tabular-nums;
}
.fh-clhead b i{font-style:normal;color:var(--pixel-muted);opacity:.7}

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

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

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


/* ============================================================
   LAMBANG CLAN

   Tag-nya sendiri yang jadi lambang, bukan gambar. Tidak ada satu
   pun aset lambang clan di repo (ASSET_SPEC tidak mencatatnya, dan
   audit bagian 8 mendaftar semua aset yang ada tanpa menyebut
   clan) — jadi menggambar bingkai yang menunggu gambar berarti
   ratusan clan tampil dengan kotak kosong yang sama.

   Tag justru pilihan yang benar walaupun asetnya nanti ada: dia
   yang dipakai pemain menyebut clan-nya di chat, dan dia unik per
   clan karena kolomnya UNIQUE di tabel.

   Permukaannya memakai keluarga --clan-* yang sama dengan chip
   .fh-clan--metal di chat dan kartu profil — satu benda, satu
   bahan, tiga ukuran.
   ============================================================ */

.fh-clcrest{
  flex:none;
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:var(--r-md);
  font-family:var(--font-pixel);font-size:9px;letter-spacing:.5px;
  color:var(--clan-ink);
  background:linear-gradient(160deg,
    var(--clan-hi),var(--clan-mid) 55%,var(--clan-lo));
  /* Tepi terang di dalam + bayangan bawah: dua garis yang membuat
     bidang datar terbaca sebagai keping logam, bukan kotak abu. */
  box-shadow:
    inset 0 0 0 1px var(--gloss-edge),
    inset 0 -3px 0 rgba(0,0,0,.14);
}

.fh-clcrest--lg{
  width:62px;height:62px;
  border-radius:var(--r-lg);
  font-size:12px;
}

/* Lambang berupa EMOJI, bukan tag. Ukurannya tidak bisa dipakai
   bersama: tag butuh 9px huruf piksel supaya empat huruf muat di
   keping 44px, sementara emoji pada 9px tinggal titik berwarna.

   Keduanya (0,2,0) dan yang --lg ditaruh SESUDAH, karena berat
   pemilihnya sama - kalau dibalik, keping besar ikut memakai 22px
   dan emoji di kartu clan sendiri tampil sekecil yang di daftar. */
.fh-clcrest.is-emoji{
  font-family:inherit;
  font-size:22px;
  letter-spacing:0;
  /* Emoji berdiri di garis dasar hurufnya sendiri dan duduk agak
     tinggi di dalam kotak grid; satu piksel ke bawah membuatnya
     benar-benar di tengah keping. */
  line-height:1;
  padding-top:1px;
}

.fh-clcrest--lg.is-emoji{font-size:30px}


/* ============================================================
   KEADAAN LUAR — DIREKTORI CLAN
   ============================================================ */

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

/* BENTUKNYA BARIS, BUKAN GRID, dan alasannya sama dengan Market:
   satu clan membawa nama, level, isi, dan keadaan penerimaan —
   empat hal yang tidak muat di kotak 76px tanpa memotong salah
   satunya, dan yang paling mungkin terpotong justru namanya. */
.fh-clrow{
  display:flex;align-items:center;gap:var(--sp-md);
  width:100%;text-align:left;
  padding:10px 2px;
  background:none;
  color:var(--pixel-text);
}
.fh-clrow + .fh-clrow{border-top:1px solid var(--hairline)}
.fh-clrow:active{transform:scale(.99)}

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

/* KEADAAN PENERIMAAN, satu kata di kanan.

   Diberi warna, dan itu disengaja walaupun palet ini pelit warna:
   ini SATU-SATUNYA pertanyaan yang dibawa pemain ke daftar ini —
   mana yang bisa saya masuki sekarang. Menjawabnya dengan teks abu
   yang seragam berarti dia harus membaca 20 baris untuk menemukan
   yang bisa ditekan.

   Emas tidak dipakai: emas satu-satunya warna aksi, dan yang
   ditekan di sini barisnya, bukan penandanya. */
.fh-clstatus{
  flex:none;
  font-size:10px;font-weight:600;
  padding:4px 8px;border-radius:20px;
  color:var(--pixel-muted);
  background:var(--pixel-raised);
  border:1px solid var(--pixel-border);
}
.fh-clstatus.is-buka{color:var(--up)}
.fh-clstatus.is-tutup{color:var(--down)}

/* Yang tidak bisa dimasuki DIREDAM, tidak dimatikan: barisnya
   tetap boleh dibuka — pemain berhak membaca clan yang penuh, dan
   sheet rincian adalah tempat yang benar untuk menolak, bukan
   baris yang diam-diam mati.

   Yang diredam TEKSNYA saja; lambangnya tidak. Lambang itu
   identitas clan dan tidak berubah karena kebetulan sedang penuh —
   aturan yang sama dengan kotak tier di baris Market. */
.fh-clrow.is-tutup .fh-clrow__isi{opacity:.5}


/* Pembungkus tombol di dalam panel. Dipakai kaki panel TUNGGU
   (BATALKAN PENGAJUAN); sempat dipakai panel syarat buat clan juga,
   dan ikut hampir terhapus bersamanya. */
.fh-clact{padding:0 var(--sp-md) var(--sp-md)}
.fh-clact .fh-btn{height:46px;font-size:9px}


/* ============================================================
   KEADAAN TUNGGU — pengajuan sedang diproses

   Satu panel, satu kalimat, satu jalan keluar. Tidak ada direktori
   di belakangnya dan itu disengaja: selama pengajuan menggantung,
   bergabung ke clan lain memang tidak bisa, dan daftar yang
   tombolnya semua mati lebih membingungkan daripada daftar yang
   tidak ada.
   ============================================================ */

.fh-cltunggu{
  padding:var(--sp-lg) var(--sp-md);
  text-align:center;
}
.fh-cltunggu .fh-clcrest{margin:0 auto var(--sp-md)}
.fh-cltunggu h3{
  font-family:var(--font-pixel);font-size:11px;font-weight:400;
  line-height:1.7;margin-bottom:6px;
}
.fh-cltunggu p{
  font-size:12px;line-height:1.6;color:var(--pixel-muted);
}
.fh-cltunggu p b{color:var(--pixel-text);font-weight:600}


/* ============================================================
   KEADAAN DALAM — KARTU CLAN
   ============================================================ */

.fh-clkartu{
  margin:var(--sp-md) var(--sp-md) 0;
  padding:var(--sp-md);
  background:var(--pixel-surface);
  border:1px solid var(--pixel-border);
  border-radius:var(--r-md);
}

/* KEPALA TEGAK DAN RATA TENGAH: lambang, nama, level — dari atas
   ke bawah.

   Versi mendatar (lambang kiri, nama tengah, level kanan) membagi
   342px jadi tiga kolom yang saling menekan, dan yang paling
   dahulu kalah namanya: "Layar Terkembang" sudah jadi elipsis
   sebelum satu pun nama benar-benar panjang. Tegak, nama dapat
   seluruh lebar kartu dan ketiganya terbaca sebagai satu blok
   identitas, bukan tiga benda yang kebetulan sebaris.

   Ini juga bentuk yang sama dengan kepala sheet detail ikan
   (.fh-fishhd): nama di atas, penanda di bawahnya, keduanya di
   tengah. Satu bentuk untuk "benda ini apa" di seluruh app. */
.fh-clkartu__hd{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--sp-sm);
  text-align:center;
}
.fh-clkartu__hd h3{
  max-width:100%;
  font-family:var(--font-pixel);font-size:12px;font-weight:400;
  line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- LEVEL + EXP CLAN ----------
   SATU BLOK, dan itu bukan penghematan tempat: audit bagian 6
   mencatat "level clan dari EXP donasi", jadi bar di bawah baris
   ini justru yang menerangkan angkanya — 97.200 dari 108.000
   menuju level 12. Dipisah, jawaban ("level 11") berdiri jauh dari
   hal yang menerangkannya.

   Level sempat berdiri sendiri sebagai kepingan di bawah nama dan
   DUA KALI gagal, karena alasan yang berlawanan: besar (14px) dia
   mengalahkan nama clan yang seharusnya jadi puncak bacaan;
   dikecilkan (10px) dia jadi kepingan menggantung yang tidak
   berpasangan dengan apa pun. Di sini dia punya pasangan.

   Bar-nya memakai .fh-bar milik components.css. */
.fh-clexp{margin-top:var(--sp-md)}
.fh-clexp__lbl{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-sm);margin-bottom:6px;
  font-size:11px;color:var(--pixel-muted);
}

/* ANGKA LEVEL, di kiri bersama labelnya. Font pixel dan warna
   terang membuatnya menonjol TANPA harus dibesarkan: yang
   dibandingkan mata di baris ini teks 11px yang diredam, jadi satu
   angka 12px yang terang sudah jadi hal paling menonjol di
   sekitarnya. Emas tidak dipakai — emas satu-satunya warna aksi di
   app ini, dan level itu keadaan. */
.fh-clexp__lbl b{
  margin-left:7px;
  font-family:var(--font-pixel);font-size:12px;font-weight:400;
  color:var(--pixel-text);
  font-variant-numeric:tabular-nums;
}

/* EXP di kanan. Terang tapi TANPA font pixel: dia angka yang
   dibaca sekali lalu ditinggalkan, bukan angka yang diingat, dan
   pixel di 11px dengan enam digit plus garis miring jadi terlalu
   ramai berdampingan dengan angka level. */
.fh-clexp__lbl i{
  font-style:normal;
  color:var(--pixel-text);font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* ---------- TIGA ANGKA KAS ----------
   Anggota, clan coin, clan token — tiga kolom di tabel, tiga sel
   di sini. Dibuat sama lebar supaya angkanya sejajar vertikal;
   yang panjangnya berbeda-beda cuma isinya, bukan tempatnya. */
.fh-clstat{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin-top:var(--sp-md);
  background:var(--hairline);
  border-radius:var(--r-sm);
  overflow:hidden;
}
.fh-clstat > div{
  padding:9px 6px;
  text-align:center;
  background:var(--pixel-bg);
}
.fh-clstat span{
  display:block;margin-bottom:4px;
  font-size:10px;color:var(--pixel-muted);
}
.fh-clstat b{
  display:block;
  font-size:12px;font-weight:600;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fh-clstat b.is-coin{color:var(--pixel-primary)}


/* ============================================================
   KAPAL CLAN — BAGIAN dari kartu status, bukan kartu sendiri.

   Audit bagian 4: kapal clan membuka Clan Zone — pool 60 ikan
   eksklusif, secret ke atas 1,5x lebih sulit, hard pity terpisah
   dan flat. Ini satu-satunya zona kedua di seluruh game.

   Sempat berdiri sebagai kartu terpisah di bawah kartu clan, dan
   itu memisahkan dua hal yang dibaca bersamaan: "clan saya sedang
   berlayar atau tidak" bagian dari status clan, bukan topik lain.
   Yang memisahkannya sekarang GARIS, bukan jarak antar-kartu —
   cukup untuk menandai pergantian topik, tidak cukup untuk
   memutusnya jadi dua bacaan.
   ============================================================ */

.fh-clkapal{
  margin-top:var(--sp-md);
  padding-top:var(--sp-md);
  border-top:1px solid var(--hairline);
}

.fh-clkapal__hd{
  display:flex;align-items:center;gap:var(--sp-sm);
  margin-bottom:var(--sp-sm);
}
.fh-clkapal__hd h4{
  flex:1;min-width:0;
  font-family:var(--font-pixel);font-size:9px;font-weight:400;
  letter-spacing:.4px;
}

/* Penanda BERLAYAR. Hijau saat jalan, abu saat bersandar — dan
   ini keadaan, bukan ajakan, jadi bukan emas. */
.fh-cllayar{
  flex:none;
  display:flex;align-items:center;gap:5px;
  font-size:10px;font-weight:600;
  color:var(--pixel-muted);
}
.fh-cllayar::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:currentColor;
}
.fh-cllayar.is-on{color:var(--up)}

.fh-clkapal__sisa{
  font-size:12px;color:var(--pixel-muted);
  margin-bottom:var(--sp-sm);
}
.fh-clkapal__sisa b{
  color:var(--pixel-text);font-weight:600;
  font-variant-numeric:tabular-nums;
}

.fh-clkursi{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-sm);margin-bottom:5px;
  font-size:11px;color:var(--pixel-muted);
}
.fh-clkursi b{
  color:var(--pixel-text);font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* Kalimat penjelas zona clan (60 ikan eksklusif, secret 1,5x lebih
   sulit) sempat berdiri di kaki blok ini, lalu digantikan baris
   "Kamu ikut berlayar", lalu keduanya dicabut.

   Zona: aturan permanen yang dibaca sekali lalu sudah diingat,
   sementara yang dibuka pemain berulang kali di kartu ini keadaan
   yang BERUBAH. Aturan yang tidak pernah berubah tapi selalu
   digambar akhirnya berhenti dibaca, dan sambil itu memakan tempat
   baris yang benar-benar perlu dilihat.

   "Kamu ikut berlayar": keadaannya tidak hilang dari layar — baris
   pemain di daftar anggota sudah menuliskannya ("Di kapal"), dan di
   sana dia berdampingan dengan orang lain yang ikut, konteks yang
   justru membuatnya berarti. Di kartu status dia satu baris yang
   mengulang apa yang sudah diketahui pemiliknya sendiri. */


/* ---------- TIGA BARIS KETERANGAN ----------
   Siapa ketuanya, apakah clan masih menerima orang, dan sejak kapan
   pemain di dalamnya. Tiga fakta yang tidak muat di mana pun di
   atas dan tidak layak dibuang.

   Memakai .fh-fishrows milik sheet detail — komponen yang sama
   dengan empat layar lain, jadi "label kiri, nilai kanan" terbaca
   sama di seluruh app. Yang ditimpa cuma paddingnya, karena di sini
   dia duduk di dalam kartu yang sudah punya padding sendiri. */
.fh-clinfo{
  padding:0;
  margin-top:var(--sp-md);
  border-top:1px solid var(--hairline);
}


/* ============================================================
   DUA PINTU — anggota & permintaan

   Ikon, bukan tab. Halaman ini sekarang cuma berisi profil clan;
   daftar orang hidup di overlay penuh layar, dan dua tombol ini
   pintunya. Berdampingan sama lebar karena keduanya sekelas —
   sama-sama "lihat daftar orang", cuma daftar yang berbeda.

   Pintu kedua hilang UTUH untuk anggota biasa, tidak diredam:
   tombol mati yang tidak akan pernah hidup untuk orang itu cuma
   memberi tahu ada sesuatu yang tidak boleh dia sentuh.
   ============================================================ */

.fh-clpintu{
  margin:var(--sp-md) var(--sp-md) 0;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--sp-sm);
}
/* Sendirian = selebar penuh. Setengah kotak yang menggantung di
   kiri terbaca seperti tombol kedua yang gagal dimuat.

   Kelasnya dipasang JS, bukan :has(). Bukan karena :has() salah,
   tapi karena yang perlu diperiksa adalah "server mengirim daftar
   permintaan atau tidak" — fakta yang cuma dipegang JS — dan
   menuliskannya sebagai :has(> button[style*="none"]) berarti CSS
   menebaknya dari sisa atribut inline. Selain itu :has() baru ada
   di Chrome 105 / Safari 15.4, dan webview Telegram di Android lama
   masih di bawah itu; yang gagal di sana akan gagal DIAM-DIAM. */
.fh-clpintu.is-solo{grid-template-columns:1fr}

/* Latarnya --pixel-raised, satu tingkat DI ATAS kartu di
   sebelahnya. Kalau keduanya sewarna, dua kotak ini terbaca sebagai
   kartu ketiga dan keempat — bukan sebagai sesuatu yang ditekan.
   Yang membedakan tombol dari bacaan di sistem ini memang tingkat
   permukaannya, bukan warna. */
.fh-clpintu__b{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  gap:5px;
  padding:var(--sp-md) var(--sp-sm);
  background:var(--pixel-raised);
  border:1px solid var(--pixel-border);
  border-radius:var(--r-md);
  color:var(--pixel-text);
}
.fh-clpintu__b:active{transform:scale(.98)}

/* TINGGI yang dikunci, lebarnya ikut aspek viewBox — dan itu bukan
   kemalasan. Kedua ikon digambar di grid 10 satuan tinggi, jadi
   height:20px berarti tepat DUA piksel CSS per satuan; lebarnya
   lalu jatuh di 24px dan 26px, keduanya bilangan bulat juga.

   Versi pertama memasang 20x16 mati untuk keduanya: 20/12 = 1,67
   dan 16/10 = 1,6 piksel per satuan, jadi crispEdges membulatkan
   tiap tepi ke piksel perangkat terdekat dan sebagian goresan
   jatuh setebal 1 sementara sisanya 2. Ikonnya terbaca seperti
   dua batang, bukan dua orang. Jebakan yang sama sudah dibayar
   sekali di tombol tutup sheet — lihat .fh-fishhd__x di tas.css. */
.fh-clpintu__b svg{
  height:20px;width:auto;
  fill:var(--pixel-muted);
  shape-rendering:crispEdges;
}
.fh-clpintu__b b{
  font-family:var(--font-pixel);font-size:8px;letter-spacing:.3px;
  font-weight:400;
}
.fh-clpintu__b small{
  font-size:11px;color:var(--pixel-muted);
  font-variant-numeric:tabular-nums;
}
/* .fh-badge sudah position:absolute top/right -4px di
   components.css; yang perlu di sini cuma memastikan kotaknya
   tidak memotongnya — dan .fh-clpintu__b memang tanpa
   overflow:hidden, jadi tidak ada yang ditulis ulang. */


/* ============================================================
   DAFTAR ANGGOTA / PERMINTAAN — isi overlay penuh layar
   ============================================================ */

/* Panel pembungkus sudah dicabut dari overlay ini — halaman
   penuh sudah jadi wadahnya sendiri. Yang tersisa diatur di sini:

   BARIS JUMLAH STICKY di puncak gulungan. "31/42 anggota" berguna
   justru SAAT pemain sedang menyapu tiga puluh nama, dan baris
   yang hilang di gulungan pertama menjawab pertanyaan itu hanya
   untuk orang yang belum sempat bertanya.

   Latarnya --pixel-bg dan bukan transparan: yang lewat di
   bawahnya baris nama, dan sticky tanpa latar akan menumpuknya
   jadi dua tulisan di satu tempat. */
#fh-cl-orang .fh-clhead{
  position:sticky;top:0;z-index:1;
  padding:10px var(--sp-md);
  background:var(--pixel-bg);
  border-bottom:1px solid var(--pixel-border);
}

/* Baris jumlah versi OVERLAY: dia sekaligus bar judulnya, jadi
   tepinya sekuat tepi header (bukan hairline) dan paddingnya
   sedikit lebih longgar untuk memuat tombol kembali. */
#fh-cl-orang .fh-clhead--ov{
  padding:7px var(--sp-md);
  border-bottom-color:var(--pixel-border);
}

/* Panah kembali. LINGKARAN 26px, bukan kotak 32px milik .fh-btn-x:
   dia duduk di dalam satu baris bersama teks, bukan sendirian di
   bar judul, jadi ukurannya mengikuti tinggi baris itu. Bentuk
   lingkaran menyamakannya dengan tombol ikon bulat di baris saring
   Tas, Bestiary, dan Market.

   svg 5x9 piksel CSS untuk viewBox 5x9 satuan — satu satuan = satu
   piksel, supaya crispEdges tidak membulatkan sebagian goresan
   jadi lebih tebal dari sisanya. Jebakan yang sama sudah dibayar
   di .fh-fishhd__x dan di ikon dua pintu. */
.fh-clback{
  flex:none;
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--pixel-raised);
  border:1px solid var(--pixel-border);
  color:var(--pixel-muted);
}
.fh-clback svg{
  width:5px;height:9px;fill:currentColor;shape-rendering:crispEdges;
}
.fh-clback:active{transform:scale(.92)}

/* Jarak bawah dipasang di PEMBUNGKUS, bukan di baris terakhir
   lewat :last-child: baris terakhir berganti tiap kali daftarnya
   berubah, dan aturan yang menempel pada posisi selalu kalah dari
   aturan yang menempel pada wadah. */
.fh-clmlist{padding-bottom:var(--sp-sm)}

/* SATU BARIS. Versi sebelumnya dua baris — nama + kepingan di
   atas, "Di kapal · sejak 14 Mar 2026" di bawah, plus kolom kanan
   dua tingkat (angka + kata "donasi") — jadi tiap baris setinggi
   68px dan satu layar cuma memuat sebelas orang dari empat puluh
   empat. Empat hal yang ditumpuk di sana cuma satu yang dipakai
   saat MENYAPU daftar; tiga sisanya pindah ke sheet rincian.

   Sekarang 48px, dan satu layar memuat lima belas. */
.fh-clmrow{
  display:flex;align-items:center;gap:var(--sp-md);
  width:100%;text-align:left;
  padding:8px var(--sp-md);
  background:none;
  color:var(--pixel-text);
}
.fh-clmrow + .fh-clmrow{border-top:1px solid var(--hairline)}
/* Hanya baris yang BISA diketuk yang bereaksi ditekan. Baris
   permintaan bukan tombol — yang bisa ditekan di sana cuma dua
   kepingan Terima/Tolak di dalamnya. */
button.fh-clmrow:active{background:var(--pixel-raised)}

/* Baris sendiri diberi latar, bukan diberi warna huruf: pemain
   mencari dirinya di daftar 30 baris dengan menyapu, dan bidang
   ketemu lebih dulu daripada huruf.

   --pixel-surface, satu tingkat DI ATAS ground halaman. Sempat
   --pixel-bg waktu daftarnya masih duduk di dalam panel
   ber-surface; begitu panelnya dicabut dan barisnya mendarat
   langsung di atas --pixel-bg, warna itu jadi sama persis dengan
   latarnya dan penandanya hilang tanpa gejala apa pun. */
.fh-clmrow.is-me{background:var(--pixel-surface)}

.fh-clav{
  flex:none;
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  font-size:13px;font-weight:600;color:var(--pixel-sunken);
  background-size:cover;background-position:center;
  box-shadow:0 0 0 1px var(--pixel-border);
}

/* Versi besar untuk sheet rincian. Ukurannya sengaja mendekati
   lambang clan (62px): keduanya "wajah" dari benda yang sedang
   dibaca sheet-nya, dan dua ukuran berbeda untuk peran yang sama
   membuat kedua sheet terasa dua rancangan. */
.fh-clav--lg{
  width:64px;height:64px;
  font-size:26px;
}

/* Nama dan kepingan duduk SEBARIS. Namanya yang menyusut kalau
   sempit — kepingan peran lebarnya tetap dan memang harus, karena
   "Ketua" yang terpotong jadi "Ket…" berhenti berarti. */
.fh-clmrow__isi{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:6px;
}
.fh-clmrow__isi b{
  min-width:0;
  font-size:13px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Varian dua baris, dipakai baris permintaan gabung. Yang dibaca
   di sana bukan "orang yang mana" tapi "layak diterima atau
   tidak", dan level serta lamanya menunggu dua-duanya bahan
   keputusan itu. */
.fh-clmrow__isi--dua{
  display:block;
}
.fh-clmrow__isi--dua b{display:block}
.fh-clmrow__isi small{
  display:block;margin-top:2px;
  font-size:11px;color:var(--pixel-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* PERAN cuma digambar untuk pengurus — lihat chipPeran() di
   clan.js. Ketiadaan penanda itu yang berarti anggota biasa. */
.fh-clrole{
  flex:none;
  font-size:9px;font-weight:600;letter-spacing:.2px;
  padding:3px 6px;border-radius:var(--r-xs);
  color:var(--pixel-muted);
  background:var(--pixel-raised);
  border:1px solid var(--pixel-border);
}
.fh-clrole.is-ketua{color:var(--pixel-text)}

/* DONASI SEUMUR KEANGGOTAAN (clan_members.contribution_coins).

   Angka pendek — 18,4M, bukan 18.400.000: kolom ini dibaca untuk
   MEMBANDINGKAN tiga puluh baris, bukan untuk dihitung, dan angka
   penuh melebarkan kolomnya sampai memakan nama. Sheet rincian
   menuliskannya utuh, tempat dia memang dibaca sebagai jumlah.

   TIDAK diberi emas, dan ini menyimpang dari .fh-fishrows b.is-coin
   yang mengemasi tiap nilai coin. Alasannya jumlahnya: emas di
   sheet muncul sekali atau dua kali dan menandai "ini yang
   berpindah"; dua puluh angka emas berderet jadi tekstur, dan
   tekstur tidak menandai apa pun. Label kolom di baris sticky
   sudah menyebutkan angka ini donasi, jadi warnanya tidak
   menanggung beban apa-apa lagi. */
.fh-clmrow__nilai{
  flex:none;
  font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--pixel-text);
}

/* ---------- DONASI HARI INI ----------
   Titik di ujung kanan tiap baris, dan dia menjawab pertanyaan yang
   BERBEDA dari angka di sebelahnya: angka itu donasi seumur
   keanggotaan (clan_members.contribution_coins), titik ini donasi
   hari ini (clan_donate_daily). Dua tabel di bot, dua pertanyaan di
   layar — dan yang ditanyakan pengurus tiap hari justru yang kedua.

   SELALU DIGAMBAR, terisi atau berongga, bukan cuma muncul saat
   sudah menyetor. Penanda yang kadang ada kadang tidak memaksa mata
   mencari KETIADAAN, dan itu jauh lebih lambat daripada membedakan
   isi; kolom yang selalu ada juga bekerja sama baiknya entah yang
   sudah donasi mayoritas atau minoritas.

   Hijau saat sudah, cincin kosong saat belum — pasangan yang sama
   dengan penanda Berlayar/Bersandar di kartu clan, karena keduanya
   menjawab "sudah atau belum". */
.fh-clhari{
  flex:none;
  width:8px;height:8px;border-radius:50%;
  background:none;
  box-shadow:inset 0 0 0 1px var(--pixel-border);
}
.fh-clhari.is-on{
  background:var(--up);
  box-shadow:none;
}

/* Ringkasan di baris jumlah, yang sekaligus KETERANGAN titik itu:
   titik yang berdiri sendiri tanpa satu kata pun tidak pernah
   menjelaskan dirinya, dan menaruh keterangannya di tiap baris
   berarti mengulangnya tiga puluh kali. */
.fh-clhead em{
  flex:none;
  display:flex;align-items:center;gap:5px;
  font-style:normal;font-size:11px;
  color:var(--pixel-muted);
  font-variant-numeric:tabular-nums;
}


/* ---------- PERMINTAAN GABUNG ----------
   Dua tombol per baris, dan keduanya harus muat bersama nama pada
   390px. Karena itu bentuknya kepingan kecil, bukan tombol penuh:
   yang menekan sedang menyapu daftar, bukan sedang memutuskan satu
   hal besar. */
.fh-clreq{align-items:flex-start}
.fh-clreq__aksi{
  flex:none;display:flex;gap:6px;
}
.fh-clreq__b{
  padding:5px 10px;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-clreq__b:active{transform:scale(.94)}
/* Terima diberi emas karena dia AKSI yang diharapkan; tolak tetap
   netral. Dua tombol yang sama-sama menonjol memaksa dibaca dua
   kali sebelum ditekan. */
.fh-clreq__b.is-ya{
  color:var(--ink-on-primary);
  background:var(--pixel-primary);
  border-color:var(--pixel-primary);
}


/* ---------- KELUARKAN ANGGOTA ----------
   Merah, dan ini satu-satunya tombol merah di layar Clan. Dia juga
   satu-satunya tindakan di sini yang akibatnya jatuh pada ORANG
   LAIN dan tidak bisa dibatalkan oleh orang itu — pemakaian --down
   yang sama dengan kolom "Jadi" yang menurun di tabel banding
   perlengkapan: yang menekan berhak tahu sebelum, bukan sesudah.

   Tetap berbentuk tombol hantu, bukan tombol utama berlatar penuh:
   dia bukan aksi yang diharapkan di sheet ini, cuma yang tersedia. */
.fh-clkick{
  color:var(--down);
  border-color:var(--alert-border);
  background:none;
}

/* ---------- KELUAR ---------- */

.fh-clkeluar{
  margin:var(--sp-lg) var(--sp-md) 0;
  width:auto;
  /* Diredam sampai nyaris hilang, dan itu bobot yang benar: ini
     satu-satunya tindakan di layar ini yang tidak bisa dibatalkan
     sendiri — kembali berarti mengajukan diri lagi dan menunggu
     disetujui. Tindakan yang mahal tidak boleh mudah tersentuh. */
  color:var(--pixel-muted);
  border-color:var(--pixel-border);
  background:none;
  font-size:9px;
}


/* ============================================================
   SHEET RINCIAN CLAN

   Chrome-nya .fh-fishhd yang sama dengan sheet detail Tas,
   Bestiary, dan dialog konfirmasi Market: nama di atas, penanda di
   bawahnya, keduanya di tengah, tombol tutup sejajar baris nama.
   Yang berganti cuma isi penandanya — badge tier di sana, tag clan
   di sini.
   ============================================================ */

/* PENANDA DI KEPALA SHEET = KEADAAN PENERIMAAN, bukan tag.

   Di sheet ikan tempat itu diisi badge tier — "benda ini apa" —
   dan padanannya di sini bukan tag: tag cuma nama pendek, dan
   lambang besar di badan sheet sudah menuliskannya. Yang setara
   dengan tier adalah jawaban atas satu-satunya pertanyaan yang
   dibawa pemain ke sheet ini: bisa masuk atau tidak.

   Chip tier tidak dipinjam juga karena alasan kedua: clan tidak
   punya tier, dan meminjam bentuk tier untuk sesuatu yang bukan
   tier adalah cara tercepat membuat pemain mengira ada kelangkaan
   clan. */

.fh-clprev{
  display:flex;justify-content:center;
  padding:var(--sp-lg) var(--sp-md) var(--sp-sm);
}

/* Kaki sheet rincian anggota. Dibatasi ke id-nya, alasan yang sama
   dengan #fh-mk-sell di market.css: `.fh-sheet__ft .fh-btn`
   telanjang akan kena kaki sheet MANA PUN, dan clan.css dimuat
   belakangan jadi dia akan menang di sana. */
#fh-cl-anggota .fh-sheet__ft .fh-btn{width:100%;height:44px;font-size:9px}

/* Deskripsi clan — satu-satunya teks bebas yang ditulis manusia di
   seluruh layar ini, dan karena itu yang paling cepat menjelaskan
   "clan ini clan macam apa". Dibiarkan membungkus penuh, tidak
   dipotong: kalimat inilah yang menentukan pemain mau masuk atau
   tidak, dan memotongnya di baris kedua berarti memotong tepat di
   bagian yang menjelaskan syaratnya.

   Dipakai DUA tempat — sheet rincian clan asing dan kartu status
   clan sendiri — dengan margin yang berbeda, karena yang satu duduk
   di badan sheet yang sudah berpadding dan yang satu di dalam
   kartu. Bentuknya sengaja sama: itu benda yang sama. */
.fh-cldesk{
  margin:0 var(--sp-md) var(--sp-sm);
  padding:10px var(--sp-md);
  border-radius:var(--r-sm);
  background:var(--pixel-bg);
  border:1px solid var(--pixel-border);
  font-size:12px;line-height:1.6;color:var(--pixel-text);
}
.fh-clkartu .fh-cldesk{margin:var(--sp-md) 0 0}

/* ---------- KETERANGAN YANG BISA DILIPAT ----------
   Kartu status dibuka berulang kali untuk memeriksa angka — kas,
   EXP, sisa waktu kapal — dan paragraf lima baris yang isinya sudah
   dibaca sekali mendorong angka-angka itu keluar layar tiap kali.
   Dilipat jadi SATU baris, dan yang membukanya ketukan pemain.

   -webkit-line-clamp, bukan tinggi tetap: satu baris di sini
   berarti satu baris SUNGGUHAN berapa pun line-height dan ukuran
   font sistemnya, dan potongannya diberi elipsis sendiri oleh
   browser. Tiga propertinya (display, box-orient, line-clamp) harus
   ikut semua — line-clamp sendirian tidak melakukan apa pun. */
.fh-cldesk--lipat{padding-bottom:6px}
.fh-cldesk--lipat p{margin:0}
.fh-cldesk--lipat.is-lipat p{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
  overflow:hidden;
}

/* Tombolnya rata KANAN dan diredam: dia pelengkap teksnya, bukan
   aksi tersendiri. Panah berputar 180° saat terbuka, jadi
   keadaannya terbaca bahkan kalau labelnya tidak sempat dibaca —
   pola yang sama dengan .fh-besmore di Bestiary. */
.fh-cldesk__more{
  display:flex;align-items:center;gap:5px;
  margin:6px 0 0 auto;padding:0;
  background:none;
  font-size:11px;font-weight:600;
  color:var(--pixel-muted);
}
.fh-cldesk__more i{font-style:normal}
.fh-cldesk__more svg{
  width:7px;height:4px;fill:currentColor;shape-rendering:crispEdges;
  transition:transform .15s ease-out;
}
.fh-cldesk--lipat:not(.is-lipat) .fh-cldesk__more svg{transform:rotate(180deg)}

@media (prefers-reduced-motion:reduce){
  .fh-cldesk__more svg{transition:none}
}

/* DIBATASI ke sheet ini lewat id-nya. `.fh-sheet__ft .fh-btn`
   telanjang akan kena kaki sheet MANA PUN — termasuk tiga tombol
   di sheet detail Tas — dan clan.css dimuat belakangan, jadi dia
   akan menang di sana. Pelajaran yang sama sudah dibayar sekali di
   market.css. */
#fh-cl-sheet .fh-sheet__ft .fh-btn{width:100%;height:44px;font-size:9px}
#fh-cl-sheet .fh-clsalah{margin-top:10px}