/* The new Hideout, Section 2: the Businesses screen (ui/hideout-biz.js), and the kit top bar on computers. Lane B. */
/* phones: the page header is replaced by the Hideout bar; computers: the kit bar replaces the Hideout bar */
#h2Root > .pgHead { display:none; }
#h2Root.desk #h2tb { display:none; }
#h2Root.desk #h2menu { top:16px; }

#hbRoot { position:absolute; left:180px; right:16px; top:12px; bottom:14px; z-index:5; display:flex; }
#hbRoot[hidden] { display:none; }
#h2Root.phone #hbRoot { left:0; right:0; top:62px; bottom:72px; }
.hbPanel { flex:1; min-width:0; background:linear-gradient(180deg,rgba(31,87,163,.97),rgba(20,58,114,.97)); }
.hbPanel .kPh { font-size:26px; padding:12px 18px 6px; }
.hbHi { width:44px; height:44px; object-fit:contain; }
.hbTop { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:0 18px 10px; }
.hbTop .grow { flex:1; }
.hbX { width:40px; height:40px; border-radius:11px; border:3px solid var(--ol); background:linear-gradient(180deg,#ff8a70,#e8261c); color:#fff; font:400 18px var(--fh); cursor:pointer; box-shadow:0 3px 0 var(--ol); }
.hbList { padding:0 12px 12px; display:flex; flex-direction:column; gap:10px; }
.hbRow { display:grid; grid-template-columns:96px minmax(0,1fr) 92px 220px; gap:16px; align-items:center; padding:12px 14px; border-radius:18px; border:3px solid var(--ol); background:rgba(8,20,45,.45); flex:none; }
.hbRow.stop { border-color:#ff5a44; }
.hbRow.focus { border-color:#ffd23f; box-shadow:0 0 0 3px #ffd23f, 0 0 22px rgba(255,210,63,.5); }
.hbRow.lock { opacity:.55; grid-template-columns:96px 1fr; }
.hbRing { position:relative; width:96px; height:96px; border-radius:50%; background:#0b1a33; display:flex; align-items:center; justify-content:center; }
.hbRing > div { width:78px; height:78px; border-radius:50%; background:#f4f7fb; display:flex; align-items:center; justify-content:center; }
.hbRing img { width:60px; height:60px; object-fit:contain; }
.hbRing img.gray { filter:grayscale(1) brightness(.85); }
.hbBang { position:absolute; right:-2px; top:-2px; width:28px; height:28px; border-radius:50%; background:#ff4a3a; border:3px solid var(--ol); font:400 19px/22px var(--fh); text-align:center; color:#fff; }
.hbMain { min-width:0; }
.hbHead { display:flex; align-items:center; gap:9px; }
.hbName { font:400 24px/1.1 var(--fh); text-shadow:var(--so); color:#fff; }
.hbSub { color:#bcd6f5; font:800 13px var(--fb); margin-top:4px; }
.hbChips { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.hbChip { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:10px; background:rgba(8,20,45,.6); border:2px solid var(--ol); font:800 13px var(--fb); color:#fff; white-space:nowrap; }
.hbChip img { width:20px; height:20px; object-fit:contain; }
.hbChip svg { width:15px; height:15px; }
.hbChip.big { font-size:15px; padding:6px 11px; }
.hbChip.big img { width:24px; height:24px; }
.hbChip.g { background:#3fbf2a; }
.hbChip.r { color:#ff9a8a; }
.hbChip .dots { display:inline-flex; gap:4px; margin-left:2px; }
.hbChip .dots i { width:12px; height:12px; border-radius:50%; background:#2a4268; border:2px solid #0b1a33; cursor:pointer; }
.hbChip .dots i.on { background:#ffd23f; }
.hbChip .dots i.lk { opacity:.45; }
.hbPick { display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 6px; border-radius:12px; border:2.5px solid var(--ol); background:rgba(255,255,255,.1); color:#fff; font:400 15px var(--fh); text-shadow:var(--so); cursor:pointer; }
.hbPick img { width:24px; height:24px; object-fit:contain; }
.hbPick .more { color:#ffd23f; font-size:13px; }
.hbSeg { display:inline-flex; border:3px solid var(--ol); border-radius:12px; overflow:hidden; box-shadow:0 2px 0 var(--ol); }
.hbSeg button { padding:5px 12px; border:0; background:#24426f; color:#9fb8dc; font:400 14px var(--fh); text-shadow:var(--so); cursor:pointer; }
.hbSeg button.on { background:linear-gradient(180deg,#ffe066,#e8a81d); color:#fff; }
.hbTm { display:flex; align-items:center; gap:12px; margin-top:10px; }
.hbTm .ct { display:flex; align-items:center; gap:8px; min-width:150px; font:400 32px/1 var(--fh); color:#fff; text-shadow:var(--so); }
.hbTm .ct svg { width:28px; height:28px; }
.hbTm .ct.full { color:#8ff56a; font-size:26px; }
.hbTm .ct.stop { color:#ff8a70; font-size:26px; }
.hbTm .ct.blue { color:#9fe0ff; }
.hbBar { width:300px; max-width:40%; height:16px; border-radius:8px; background:#0b1a33; overflow:hidden; flex:none; }
.hbBar i { display:block; height:100%; background:linear-gradient(90deg,#ffb43c,#ff7a1f); transition:width 1s linear; }
.hbBar.g i { background:linear-gradient(90deg,#8ff56a,#3fbf2a); }
.hbBar.blue i { background:linear-gradient(90deg,#9fe0ff,#3f8fe8); }
.hbBar.gray i { background:#8a96a8; opacity:.6; }
.hbTm .lab { font:800 12px var(--fb); color:#bcd6f5; letter-spacing:.5px; text-transform:uppercase; }
.hbTm .lab.g { color:#8ff56a; }
.hbTm .lab.r { color:#ff9a8a; text-transform:none; letter-spacing:0; font-size:13px; }
.hbCrew { display:flex; flex-direction:column; align-items:center; gap:4px; opacity:.7; }
.hbCrew .pic { width:84px; height:84px; border-radius:16px; border:3px dashed #6c8ab8; background:rgba(8,20,45,.5); display:flex; align-items:center; justify-content:center; font:400 34px var(--fh); color:#9fb8dc; }
.hbCrew small { font:800 11.5px var(--fb); color:#bcd6f5; }
.hbRight { display:flex; flex-direction:column; gap:9px; }
.hbTools { display:flex; gap:9px; }
.hbSq { position:relative; flex:1; height:46px; border-radius:12px; border:3px solid var(--ol); box-shadow:0 3px 0 var(--ol); background:linear-gradient(180deg,#3a5f93,#24426f); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.hbSq svg { width:22px; height:22px; }
.hbSq.on { background:linear-gradient(180deg,#8ff56a,#3fbf2a); }
.hbSq .lv { position:absolute; left:-7px; bottom:-7px; min-width:23px; height:23px; box-sizing:border-box; padding:0 3px; border-radius:7px; background:#ffd23f; color:#0b1a33; border:2.5px solid var(--ol); font:400 14px/18px var(--fh); text-align:center; }
.hbSq .bd { position:absolute; right:-5px; top:-5px; width:18px; height:18px; box-sizing:border-box; border-radius:9px; background:#3fbf2a; border:2.5px solid #fff; }
.hbSq .sh { position:absolute; inset:0; border-radius:9px; overflow:hidden; pointer-events:none; }
.hbSq .sh:after, .hbMoney:after { content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-20deg); animation:hbSheen 5s ease-in-out infinite; }
.hbSq .sh:after { animation-delay:1.4s; opacity:.7; }
@keyframes hbSheen { 0%, 72% { left:-60%; } 100% { left:130%; } }
.hbMoney { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:8px; height:62px; width:100%; border-radius:16px; border:3px solid var(--ol); box-shadow:0 4px 0 var(--ol); background:linear-gradient(180deg,#8ff56a,#3fbf2a); color:#fff; font:400 30px/1 var(--fh); text-shadow:var(--so); white-space:nowrap; cursor:pointer; }
.hbMoney img { width:38px; height:38px; object-fit:contain; }
.hbMoney.blue { background:linear-gradient(180deg,#9fe0ff,#2b8de0); font-size:22px; }
.hbMoney.orange { background:linear-gradient(180deg,#ffa23c,#e8670f); font-size:24px; }
.hbMoney.gray { background:linear-gradient(180deg,#5d7395,#3c4f6e); font-size:20px; cursor:default; }
.hbMoney.gray:after { display:none; }
.hbMoney[disabled] { filter:grayscale(.6) brightness(.85); cursor:default; }
.hbSoon { padding:10px 6px; color:#9fb8dc; font:800 13px var(--fb); display:flex; align-items:center; gap:6px; }
.hbSoon svg { width:16px; height:16px; }
.hbPop { position:absolute; z-index:30; width:300px; padding:12px 14px; border-radius:16px; border:3px solid var(--ol); box-shadow:0 6px 0 var(--ol); background:linear-gradient(180deg,#2462ad,#1c4f95); color:#fff; font:800 14px var(--fb); }
.hbPop:before { content:""; position:absolute; top:-12px; left:var(--ax,40px); border:10px solid transparent; border-bottom-color:#0b1a33; border-top:0; }
.hbPop.up:before { top:auto; bottom:-12px; border:10px solid transparent; border-top-color:#0b1a33; border-bottom:0; }
.hbPop .H { font:400 22px var(--fh); text-shadow:var(--so); }
.hbPop .sub { color:#bcd6f5; font:800 12.5px/1.35 var(--fb); margin:2px 0 6px; }
.hbPop .sub.c { text-align:center; margin-top:8px; }
.hbPop .kv { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed rgba(255,255,255,.18); }
.hbPop .kv b { font:400 16px var(--fh); text-shadow:var(--so); text-align:right; }
.hbPop .kv em { font-style:normal; color:#8ff56a; }
.hbPop .kv .y { color:#ffd23f; }
.hbPop .kv .r { color:#ff9a8a; }
.hbPop .hbMoney { margin-top:10px; height:52px; font-size:22px; }
.hbOpt { display:block; width:100%; text-align:left; margin-top:6px; padding:8px 10px; border-radius:12px; border:2.5px solid var(--ol); background:rgba(8,20,45,.5); color:#fff; cursor:pointer; }
.hbOpt.on { border-color:#ffd23f; }
.hbOpt b { font:400 17px var(--fh); text-shadow:var(--so); }
.hbOpt small { display:block; color:#bcd6f5; font:800 12px var(--fb); }
/* phones: one business per row still; the buttons get their own line */
#h2Root.phone .hbRow { grid-template-columns:64px minmax(0,1fr); gap:10px; padding:10px; }
#h2Root.phone .hbRing { width:64px; height:64px; }
#h2Root.phone .hbRing > div { width:52px; height:52px; }
#h2Root.phone .hbRing img { width:40px; height:40px; }
#h2Root.phone .hbCrew { display:none; }
#h2Root.phone .hbRight { grid-column:1 / -1; }
#h2Root.phone .hbName { font-size:20px; }
#h2Root.phone .hbTm .ct { font-size:24px; min-width:110px; }
#h2Root.phone .hbBar { width:auto; flex:1; max-width:none; }
#h2Root.phone .hbMoney { height:54px; font-size:24px; }