/* ═══════════════════════════════════════════════════════════
   bookb.css — Book B, Superclan's own book (round 31; in Trenches → B Shortables since round 32,
   js/ui-bookb.js): the coins, the chart and the order side by side,
   the positions, the rules; one column on a narrow window or a phone.
   ═══════════════════════════════════════════════════════════ */
.bb{display:flex;flex-direction:column;gap:14px}
.bb-title{margin-bottom:0;align-items:flex-start}
.bb-title h1{display:flex;align-items:center;gap:10px}
.bb-title h1 .tag{font-family:var(--sans);letter-spacing:0}
.bb-chk{display:flex;align-items:center;min-height:32px}
.bb-chk > span{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:6px 12px;border-radius:99px;font-size:12.5px;font-weight:550;line-height:1.35;border:1px solid var(--line);background:var(--card)}
.bb-chk .bb-ok{color:var(--up);border-color:var(--up-line);background:var(--up-soft)}
.bb-chk .bb-pause{color:var(--warn);border-color:var(--warn-line);background:var(--warn-soft)}
.bb-chk .bb-pause b{color:var(--warn)}
.bb-chk .bb-wait{color:var(--mute)}
.bb-chk .ic{flex-shrink:0}

/* the coins */
.bb-mkts{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.bb-mkts::-webkit-scrollbar{display:none}
.bb-mk{display:flex;align-items:center;gap:9px;flex:0 0 auto;min-width:176px;padding:9px 12px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card);text-align:left;color:var(--text);transition:border-color .15s,background .15s}
.bb-mk:hover{border-color:#33363f}
.bb-mk[aria-pressed=true]{border-color:var(--brand-line);background:var(--brand-soft)}
.bb-mk .av{width:28px;height:28px;flex-shrink:0}
.bb-mkn,.bb-mkp{display:flex;flex-direction:column;gap:2px;min-width:0}
.bb-mkn b{font-size:13px}
.bb-mkn i,.bb-mkp i{font-style:normal;font-size:11px;color:var(--mute)}
.bb-mkp{margin-left:auto;align-items:flex-end}
.bb-mkp b{font:500 12.5px var(--mono)}
.bb-mkp i.up{color:var(--up)}.bb-mkp i.down{color:var(--down)}
.bb-none{margin:8px 2px}

/* the chart and the order */
.bb-grid{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:14px;align-items:start}
.bb-chp{display:flex;flex-direction:column}
.bb-chh{display:flex;align-items:center;gap:14px;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.bb-chc{display:flex;align-items:center;gap:12px 18px;flex:1;min-width:0;flex-wrap:wrap}
.bb-chc .av{width:34px;height:34px}
.bb-chn{display:flex;flex-direction:column;gap:2px}
.bb-chn b{font-size:15px}
.bb-chn span{font-size:11.5px}
.bb-chpx{display:flex;align-items:baseline;gap:8px}
.bb-chpx b{font:600 20px var(--mono)}
.bb-chpx span{font-size:12.5px}
.bb-chm{display:flex;gap:14px;font-size:12px;color:var(--mute)}
.bb-chm b{font:500 12px var(--mono);color:var(--text-2)}
.bb-chm b.up{color:var(--up)}.bb-chm b.down{color:var(--down)}
.bb-tfs{flex-shrink:0}
.bb-chp .bb-chart{position:relative;height:440px}       /* beats chartbox's .cbx{height:100%} */
.bb-ord{padding:14px}
.bb-f{margin-bottom:0}
.bb-lev .lev-top span{display:inline-flex;align-items:center;gap:8px}
.bb-iso{font-style:normal;height:18px;padding:0 6px;border-radius:5px;font-size:10.5px;font-weight:600;line-height:18px;color:var(--mute);background:var(--bg-2);border:1px solid var(--line)}
.bb-hi{display:flex;align-items:center;gap:8px;width:100%;margin-top:9px;padding:8px 10px;border-radius:var(--r);font-size:12px;line-height:1.4;text-align:left;color:var(--warn);border:1px dashed var(--warn-line);background:rgba(243,192,79,.04);transition:background .15s}
button.bb-hi:hover{background:var(--warn-soft)}
.bb-hi span{flex:1}
.bb-hi b{color:var(--warn)}
.bb-hi.on{border-style:solid;color:#e9d3a4}
.bb-hi .lnk{color:var(--warn);font-size:12px;font-weight:600}
.bb-sum{margin:10px 0}
.bb-sum .kv b{font-family:var(--mono);font-size:12px}
.bb-sum .kv b .mute,.bb-sum .kv b span{font-family:var(--sans)}
.bb-warn{display:flex;gap:8px;align-items:flex-start;margin-bottom:10px;font-size:12px}
.bb-warn[hidden]{display:none}
.bb-warn .ic{flex-shrink:0;margin-top:1px;color:var(--warn)}
.bb-ord .btn-block:disabled{opacity:.55;cursor:not-allowed}
.bb-foot{display:flex;gap:7px;align-items:flex-start;margin:10px 0 0;font-size:11.5px;line-height:1.45;color:var(--mute)}
.bb-foot .ic{flex-shrink:0;margin-top:2px}
.bb-off{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:6px 2px}
.bb-off b{font-size:15px}
.bb-off p{margin:0;color:var(--mute);font-size:12.5px;line-height:1.55}

/* positions and recent trades */
.bb-posp{padding:4px 14px 12px}
.bb-sh{display:flex;align-items:baseline;gap:10px;padding:10px 0 8px}
.bb-sh h2{margin:0;font-size:14px;font-weight:600}
.bb-sh2{margin-top:6px;border-top:1px solid var(--line);padding-top:12px}
.bb-empty{margin:4px 0 8px;color:var(--mute);font-size:12.5px}
.bb-prow{display:grid;grid-template-columns:minmax(150px,1.4fr) repeat(6,minmax(70px,1fr)) auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.bb-prow:first-child{border-top:0}
.bb-pc{display:flex;align-items:center;gap:9px;min-width:0;color:var(--text)}
.bb-pc .av{width:28px;height:28px;flex-shrink:0}
.bb-pc > span{display:flex;flex-direction:column;gap:2px}
.bb-pc i{font-style:normal;font-size:11.5px;font-weight:600}
.bb-pf{display:flex;flex-direction:column;gap:2px;min-width:0}
.bb-pf span{font-size:11px;color:var(--mute)}
.bb-pf b{font:500 12.5px var(--mono);white-space:nowrap}
.bb-pf b small{font-size:11px}
.bb-pact{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.bb-pact .minibtns{display:flex;gap:4px}
.bb-pact .chipbtn{height:26px;padding:0 8px;font-size:11.5px}
.bb-tpsl{display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 8px;border-radius:7px;border:1px solid var(--line-2);font:500 11.5px var(--mono);background:var(--card-2)}
.bb-tpsl:hover{border-color:#33363f}
.bb-hrow{display:flex;align-items:center;gap:12px;padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}
.bb-hrow:first-child{border-top:0}
.bb-hrow > b{margin-left:auto;font:500 12.5px var(--mono)}
.bb-ha{min-width:78px;font-weight:600;color:var(--text-2)}
.bb-ha.down{color:var(--down)}
.bb-tsn{margin:10px 0 0;font-size:12px;line-height:1.5}

/* the rules */
.bb-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bb-rule{padding:14px}
.bb-rule h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:13.5px;font-weight:600}
.bb-rule h3 .ic{color:var(--brand-text)}
.bb-rule p,.bb-rule li{margin:0 0 8px;color:var(--mute);font-size:12.5px;line-height:1.55}
.bb-rule p:last-child{margin-bottom:0}
.bb-rule b{color:var(--text-2);font-weight:600}
.bb-rule ul{margin:0 0 8px;padding-left:18px}
.bb-tt{width:100%;border-collapse:collapse;margin-bottom:10px;font-size:12.5px}
.bb-tt th{font-weight:500;color:var(--mute);text-align:left;padding:0 0 6px}
.bb-tt td{padding:6px 0;border-top:1px solid var(--line);color:var(--text-2)}
.bb-tt .r{text-align:right}
.bb-tt td b{font-family:var(--mono);color:var(--text)}
.bb-tt tr.on td{color:var(--brand-text)}
.bb-tt tr.on td b{color:var(--brand-text)}

/* Trenches → B Shortables (round 32): Superclan's own book over the pairs (ui-discover.js): its head with the switch
   (Book B | B Shortables), the book's account section (the "deposit section"), Book B's page in place of the pairs.
   With the pairs it sits inside the head, between the lists and the pairs' tools (.bk-in) */
.dbook{display:flex;flex-direction:column;gap:12px;margin-bottom:12px;flex:none}
.dbook.hide{display:none}
.dbook.bk-full{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;margin-bottom:0}
.disc .dhead > .dbook{flex:1 1 100%;min-width:0;margin:0}
/* the pairs under the book on a short window: the page grows to at least 880 px and scrolls, so the table keeps ~300 px */
.disc.bk-pairs:not(.dph){height:max(100%,880px)}
.bk-top{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:12px 16px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card)}
.bk-h{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--mute);line-height:1.5}
.bk-h > b{color:var(--text);font-size:13.5px;font-weight:650}
.bk-h span b{color:var(--text-2);font-weight:600}
.bk-sw{flex:0 0 auto}
.bk-sw button{display:inline-flex;align-items:center;gap:6px}
.bk-n{min-width:18px;height:18px;padding:0 5px;border-radius:9px;font:600 10.5px/18px var(--mono);text-align:center;background:var(--bg-2);color:var(--mute)}
.bk-soon{flex:0 0 auto}
/* the account: its name, then the numbers and buttons on the same line when there's room, the note under both */
.bk-acct{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding:12px 14px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card)}
.bk-acct:empty{display:none}
.bk-ach{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0}
.bk-ach > b{font-size:13px;font-weight:600}
.bk-ach .tag{font-family:var(--sans);letter-spacing:0}
.bk-acct > .bb-ab{flex:1 1 560px;min-width:0}
.bk-acs{display:flex;flex-direction:column;gap:3px;flex:1 1 320px;min-width:0}
.bk-acs b{font-size:13.5px}
.bk-acs span{font-size:12.5px;color:var(--mute);line-height:1.5}
.bk-acn{display:flex;align-items:center;gap:10px;flex:1 1 100%;margin:0;padding-top:9px;border-top:1px solid var(--line);font-size:12px;color:var(--mute)}
.bk-acn > span{flex:1;min-width:0}
.bk-acn b{color:var(--text-2);font-weight:550}
.bk-acn b.tk-warn{color:var(--warn)}
.bk-so{flex:none;font-size:12px}
.bk-page > .bb.page{padding:0;max-width:none;margin:0}
.dph .dbook{margin:6px 0 12px}                                     /* 12 px under the lists, as inside the head */
.dph .dbook.bk-full{flex:none;overflow:visible}

/* real money (round 32): the account bar, the sign-in card, deposits and withdrawals, the two sheets */
.bb-acct{padding:12px 14px}
.bb-acct[hidden]{display:none}
.bb-ab{display:flex;align-items:flex-start;gap:10px 28px;flex-wrap:wrap}
.bb-abk{display:flex;flex-direction:column;gap:3px;min-width:96px}
.bb-abk span{font-size:11.5px;color:var(--mute)}
.bb-abk b{font:600 17px var(--mono)}
.bb-abk b.up{color:var(--up)}.bb-abk b.down{color:var(--down)}
.bb-abk i{font-style:normal;font-size:11px;color:var(--faint)}
.bb-aba{display:flex;gap:8px;margin-left:auto;align-self:center}
.bb-aba .btn{display:inline-flex;align-items:center;gap:6px}
.bb-abw{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line);font-size:12px;color:var(--mute)}
.bb-abw span{flex:1;min-width:0}
.bb-abw b{color:var(--text-2);font-weight:550}
.bb-abw b.tk-warn{color:var(--warn)}
.bb-abw .lnk{font-size:12px}
.bb-in .btn-block + .btn-block{margin-top:-4px}
.bb-mv > span:nth-child(2){flex:1;min-width:0}
.bb-tx{margin-left:6px;font-size:11.5px;color:var(--brand-text)}
.bb-ds .field{margin-bottom:8px}
.bb-ds .presets-row{margin-bottom:12px}
.bb-dk{margin:0 0 12px}
.bb-dk .kv b{font-weight:500;text-align:right}
.bb-dn{margin:0 0 8px;font-size:12.5px;line-height:1.5;color:var(--mute)}
.bb-dn b{color:var(--text-2)}

/* the lock above warnAbove */
.bb-his p{margin:0 0 10px;font-size:13px;line-height:1.55;color:var(--text-2)}
.bb-his b{color:var(--text)}
.bb-hic{margin-top:12px;align-items:flex-start;line-height:1.45}
.bb-hic input{margin-top:2px}

@media (max-width:1100px){
  .bb-grid{grid-template-columns:minmax(0,1fr)}
  .bb-chp .bb-chart{height:360px}
  .bb-rules{grid-template-columns:minmax(0,1fr)}
  .bb-prow{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px}
  .bb-pc{grid-column:1 / -1}
  .bb-pact{grid-column:1 / -1;justify-content:flex-start;flex-wrap:wrap}
}
@media (max-width:640px){
  .bb.page{padding:12px 12px 24px}
  .bb-chp .bb-chart{height:280px}
  .bb-chh{padding:10px 12px;gap:10px}
  .bb-chc{gap:6px 12px}
  .bb-chn b{white-space:nowrap}
  .bb-chpx{flex-basis:100%}
  .bb-tfs{width:100%;display:grid;grid-template-columns:repeat(6,1fr)}
  .bb-mk{min-width:150px}
  .bb-hrow{flex-wrap:wrap;gap:4px 10px}
  .bb-ab{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .bb-aba{grid-column:1 / -1;margin-left:0}
  .bb-aba .btn{flex:1;justify-content:center}
  .bb-abk b{font-size:15px}
}