/* =====================================================================
   THE SIDEBAR (Oct 2026)
   224 wide. The laurel drawn sharp from the mark PNG, Ranked as live
   text beside it. Rows in a tool's register: 15px medium, 17px icons in
   one hand, a soft tint for hover and the active row. Collapse: a quick
   .15s width slide, text gone at once, everything centred in the 64.
   ===================================================================== */
.sb{width:224px!important;flex:0 0 224px!important;padding:18px 12px 12px!important;overflow:hidden!important;
  transition:width .15s ease-out,flex-basis .15s ease-out!important}

/* brand */
.sb .brand{position:relative;display:flex!important;align-items:center;gap:9px;height:40px;padding:0 0 0 6px!important;margin:0 0 22px!important;cursor:pointer;white-space:nowrap;overflow:visible}
.sb .brand .logo{width:38px!important;height:38px!important;margin:0!important;flex:none;display:block;
  background:url(/img/brand/ranked-mark-green-128.png) center/contain no-repeat!important;
  filter:drop-shadow(0 1px 1px rgba(16,15,13,.28)) drop-shadow(0 5px 8px rgba(16,15,13,.18)) drop-shadow(0 12px 22px rgba(16,15,13,.12))}
.sb .brand .wm{display:block!important;font:700 24px/1 Inter,sans-serif;letter-spacing:-.035em;color:#121210;
  text-shadow:0 1px 0 rgba(255,255,255,.7),0 2px 3px rgba(16,15,13,.2),0 6px 10px rgba(16,15,13,.16),0 14px 28px rgba(16,15,13,.14)}
.sb .brand .chev{display:none!important}
.sb .brand .sbtog{position:absolute;right:2px;top:6px;width:28px;height:28px;border:0;background:transparent;border-radius:7px;color:#B4B0A6;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:2}
.sb .brand .sbtog:hover{background:#F3F2EE;color:#1C1C1A}
.sb .brand .sbtog svg{width:16px;height:16px}

/* rows */
.sb nav{gap:3px!important}
.sb nav button{display:flex!important;align-items:center;justify-content:flex-start!important;white-space:nowrap;overflow:hidden;
  padding:9px 10px 9px 11px!important;gap:12px!important;font:500 15px/1.2 Inter,sans-serif!important;letter-spacing:-.01em;color:#232220!important;
  border-radius:9px!important;background:transparent!important;transition:background .14s!important}
.sb nav button:hover{background:#F3F2EE!important;color:#121210!important}
.sb nav button.on{background:#F0EFEA!important;color:#121210!important;font-weight:600!important}
.sb nav button.on:before{display:none!important}
.sb nav button .ic{width:17px!important;height:17px!important;flex:0 0 17px!important;margin:0 0 0 2px!important;color:#5E5C56!important;opacity:1!important}
.sb nav button:hover .ic,.sb nav button.on .ic{color:#121210!important}
.sb nav button img.ic{width:17px!important;height:17px!important;object-fit:contain;filter:brightness(0) opacity(.72)!important}
.sb nav button.on img.ic{filter:brightness(0)!important}
.sb nav button .ic.laurel{color:#5E5C56!important}

/* account */
.sb .prof{padding:12px 10px!important;gap:12px!important;white-space:nowrap;overflow:hidden}
.sb .prof .pring{width:36px!important;height:36px!important;flex:0 0 36px!important}
.sb .prof #pnm{font:500 14px/1.2 Inter,sans-serif!important;color:#2B2A27}

/* parked for now */
#navsim,#navaudio{display:none!important}

/* folded: everything centred on the 64, text simply gone */
body.sbmin .sb{width:64px!important;flex:0 0 64px!important;padding-left:0!important;padding-right:0!important}
body.sbmin .sb .brand{margin:0 0 52px!important;padding:0!important;justify-content:center}
body.sbmin .sb .brand .wm{display:none!important}
body.sbmin .sb .brand .sbtog{right:auto;left:18px;top:46px}
body.sbmin .sb nav button{width:40px!important;margin:0 auto!important;padding:9px 0!important;justify-content:center!important;gap:0!important}
body.sbmin .sb nav button .ic{margin:0!important}
body.sbmin .sb nav button{font-size:0!important}
body.sbmin .sb .prof{padding:12px 0!important;justify-content:center}
body.sbmin .sb #pnm,body.sbmin .sb .sb-terms{display:none!important}

/* the floor's cards: the grid leaves its last column part-empty; nudge so the cards sit centred */
.fl-grid{position:relative;left:15px}
