/* --- sport hub: console sidebar layout (NFL Fantasy, College Fantasy) --- */
.hb-crumb{font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:20px; text-transform:uppercase; margin-left:auto}
.hb-crumb span{color:var(--hot)}

.hb-console{display:grid; grid-template-columns:250px 1fr; min-height:calc(100vh - 77px)}

.hb-side{border-right:1px solid var(--line); padding:26px 0}
.hb-side-h{font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim); padding:0 22px 12px}
.hb-item{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:0;
  border-left:3px solid transparent; padding:13px 22px; font-family:"Barlow Condensed",sans-serif; font-weight:600;
  font-size:17px; text-transform:uppercase; color:var(--dim); cursor:pointer; --accent:var(--ice)}
.hb-item .hb-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); opacity:.5; flex:0 0 auto}
.hb-item:hover{color:var(--txt); background:var(--navy2)}
.hb-item.active{color:var(--txt); border-left-color:var(--accent); background:var(--navy2)}
.hb-item.active .hb-dot{opacity:1}
.hb-item[data-status="manual"] .hb-flag{margin-left:auto; font-family:Inter,sans-serif; font-size:9.5px; font-weight:600;
  letter-spacing:.04em; text-transform:none; color:var(--dim); border:1px solid var(--line); border-radius:2px; padding:1px 6px}
.hb-item .hb-pro{margin-left:8px; font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:10px;
  letter-spacing:.06em; text-transform:uppercase; color:#070F1A; background:var(--gold); border-radius:4px;
  padding:2px 7px; white-space:nowrap; flex:0 0 auto}

.hb-detail{padding:44px 46px; --accent:var(--ice)}
.hb-eyebrow{font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent)}
.hb-title{font-size:clamp(34px,4.4vw,54px); text-transform:uppercase; margin:10px 0 14px}
.hb-desc{color:var(--dim); max-width:60ch; font-size:15.5px; margin:0 0 30px}

.hb-preview{border:1px solid var(--line); background:var(--navy2); padding:10px 28px}
.hb-row{display:grid; grid-template-columns:1fr 130px 150px 56px; align-items:center; column-gap:16px;
  padding:14px 0; border-bottom:1px solid var(--line)}
.hb-row:last-child{border-bottom:0}
.hb-row.hb-row-2col{grid-template-columns:1fr 150px}
.hb-name{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:16px; color:var(--txt)}
.hb-meta{font-family:"DM Mono",monospace; font-size:13px; color:var(--dim); text-align:center}
.hb-bar{height:5px; background:var(--navy3); border-radius:99px; overflow:hidden; width:100%}
.hb-bar>span{display:block; height:100%; background:var(--accent)}
.hb-val{font-family:"DM Mono",monospace; font-size:13.5px; color:var(--accent); text-align:right}

.hb-cta{display:inline-block; font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:15px;
  letter-spacing:.1em; text-transform:uppercase; background:var(--accent); color:#070F1A; padding:13px 26px;
  text-decoration:none; margin-top:26px}

@media(max-width:820px){
  .hb-console{grid-template-columns:1fr}
  .hb-side{display:flex; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); padding:14px}
  .hb-side-h{display:none}
  .hb-item{border-left:0; border-bottom:3px solid transparent; white-space:nowrap; padding:10px 16px}
  .hb-item.active{border-bottom-color:var(--accent)}
  .hb-detail{padding:30px 22px}
  .hb-row{grid-template-columns:1fr 90px 90px 44px; column-gap:10px}
}