/* ==========================================================================
   WAR BENSIN BALI — panel peringkat, Yapping Warga, kontribusi warga
   ========================================================================== */
.rank{position:absolute;z-index:470;right:12px;top:120px;width:312px;max-height:calc(100% - 200px);
  background-color:var(--surface);background-image:var(--grain);border:3px solid var(--ink);
  box-shadow:var(--sh-2);overflow:hidden;display:flex;flex-direction:column}
.rank[hidden]{display:none}
.rank .rh{padding:10px 12px;border-bottom:3px solid var(--ink);background-color:var(--ink);
  font-family:var(--display);font-size:12px;font-weight:400;color:var(--acc-fill);
  letter-spacing:.8px;text-transform:uppercase}
.rank .rb{overflow-y:auto;padding:7px}
.rank .grp{padding:9px 9px 4px;font-family:var(--display);font-size:12px;font-weight:400;
  letter-spacing:.4px;color:var(--ink-2);text-transform:uppercase}
.rankrow{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:2px solid transparent;
  background:none;padding:6px 9px;cursor:pointer;font-size:12.5px;color:var(--ink);min-height:34px}
.rankrow:hover{background-color:var(--acc-soft);border-color:var(--ink)}
.rankrow .i{font-family:var(--mono);font-weight:600;color:var(--acc);min-width:18px}
.rankrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rankrow .v{font-family:var(--mono);font-weight:600;white-space:nowrap}

.social{position:absolute;z-index:530;right:12px;top:120px;bottom:12px;width:386px;
  background-color:var(--surface);background-image:var(--grain);border:3px solid var(--ink);
  box-shadow:var(--sh-2);display:flex;flex-direction:column;overflow:hidden}
.social[hidden]{display:none}
.social .sh{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:3px solid var(--ink);
  background-color:var(--ink);font-family:var(--display);text-transform:uppercase;letter-spacing:.6px;
  font-size:14px;font-weight:400;color:var(--acc-fill)}
.social .sh .sx{margin-left:auto;width:32px;height:32px;border:2.5px solid var(--acc-fill);
  background-color:transparent;cursor:pointer;display:grid;place-items:center}
.social .sh .sx svg{width:15px;height:15px;stroke-width:2.4;color:var(--acc-fill)}
.social .sortbar{display:flex;gap:6px;padding:8px 12px;border-bottom:3px solid var(--ink);
  background-color:var(--surface-2)}
.social .sort{font:inherit;font-family:var(--display);text-transform:uppercase;letter-spacing:.5px;
  font-size:12px;padding:6px 12px;cursor:pointer;border:2.5px solid var(--ink);
  background-color:var(--surface);color:var(--ink);transition:transform .06s}
.social .sort:active{transform:translate(1px,1px)}
.social .sort[aria-pressed=true]{background-color:var(--acc);color:#fff}
.social .sort[disabled]{opacity:.5;cursor:default}
.social .sb{overflow-y:auto;overscroll-behavior:contain;padding:11px 12px 18px}
.sstat{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.spost{border:2.5px solid var(--ink);padding:9px 10px;margin-bottom:8px;background-color:var(--surface);
  box-shadow:2px 2px 0 var(--ink)}
.spost .shd{display:flex;align-items:baseline;gap:7px;font-size:11.5px;color:var(--mut);margin-bottom:4px;
  font-family:var(--type)}
.spost .shd b{color:var(--ink);font-weight:700;font-size:12.5px}
.spost .txt{font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.spost .sig{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.spost a{color:var(--acc);font-size:11.5px;font-weight:700;text-decoration:none}

.cf{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)}
.cf.ok{background-color:var(--open-soft);color:var(--open)}
.cf.bad{background-color:var(--shut);color:#fff}
.cf.warn{background-color:var(--acc-fill);color:var(--ink)}
.cstat{display:flex;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--mut);margin-top:8px;
  font-family:var(--type)}
.cstat b{color:var(--ink)}

.rpt{margin-top:14px;border-top:3px solid var(--ink);padding-top:11px}
.rpt h3{margin:0 0 8px}
.rpt .q{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.5px;
  font-size:11.5px;color:var(--ink);margin:11px 0 5px}
.rpt .opts{display:flex;gap:6px;flex-wrap:wrap}
/* Chip jenis bensin: multi-pilih, jadi diberi pemisah visual supaya tidak
   terbaca sebagai "pilih satu" seperti grup di atasnya. */
.rpt .opts.multi{gap:5px;border-left:3px solid var(--acc);padding-left:8px}
.rpt .hint{margin:0 0 6px;font-size:11px;color:var(--ink-2);font-family:var(--type)}
.rpt .opt{font:inherit;font-family:var(--display);text-transform:uppercase;letter-spacing:.4px;
  font-size:12px;padding:7px 11px;cursor:pointer;border:2.5px solid var(--ink);
  background-color:var(--surface);color:var(--ink);transition:transform .06s}
.rpt .opt:active{transform:translate(1px,1px)}
.rpt .opt[aria-pressed=true]{background-color:var(--acc);color:#fff}
.rpt .send{margin-top:12px;width:100%;font:inherit;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.6px;font-size:13px;padding:11px;border:3px solid var(--ink);
  background-color:var(--acc);color:#fff;cursor:pointer;box-shadow:var(--sh-1)}
.rpt .send:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.rpt .send:disabled{opacity:.5;cursor:default;box-shadow:none}
.rpt .msg{font-size:12px;margin:8px 0 0;color:var(--ink-2);font-family:var(--type)}