/* Hover expands the rail over the canvas; artwork keeps its dimensions. */
body[data-nav-layout]{--portal-header:72px;--nav-rail:64px}
body[data-view=builder]{--portal-header:58px}
body[data-nav-layout] .topbar{position:sticky;top:0;z-index:10}
body[data-nav-layout] .shell{display:block;margin-left:var(--nav-rail)}
body[data-nav-layout] .sidebar{position:fixed;inset:var(--portal-header) auto 0 0;width:var(--nav-rail);height:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.7rem;padding:.7rem 7px;border:0;border-right:1px solid #a28c4d30;background:#111710f5;backdrop-filter:blur(12px);z-index:8;overflow:visible;transition:width .18s ease;box-shadow:4px 0 14px #0002}
body[data-nav-layout] .sidebar nav{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.35rem;width:100%;height:auto;min-width:0}
body[data-nav-layout] .sidebar .nav-item{position:relative;display:flex;align-items:center;justify-content:flex-start;flex:none;gap:0;min-height:46px;width:100%;margin:0;padding:10px 13px;border:1px solid transparent;border-radius:0;background:transparent;box-shadow:none;font:400 .86rem var(--heading,var(--display));letter-spacing:.015em;color:#b8b7a3;text-align:left;white-space:nowrap;text-decoration:none;overflow:hidden}
body[data-nav-layout] .sidebar .nav-item.active{color:#e6c27b;border-left-color:#c8a65e;background:linear-gradient(90deg,#b1985128,#b1985110)}
body[data-nav-layout] .sidebar .nav-item:hover{color:#f0d79f;background:#a58c421c}
body[data-nav-layout] .sidebar .nav-icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;color:inherit}
body[data-nav-layout] .sidebar svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
body[data-nav-layout] .sidebar .nav-label{display:none;width:max-content;max-width:180px;font-size:inherit;color:inherit}
body[data-nav-layout] .sidebar-bottom{display:flex;flex-direction:column;align-items:stretch;gap:.25rem;margin-top:auto;padding:.65rem 0 0;border-top:1px solid #ac935533;flex:none}
body[data-nav-layout] .sidebar-bottom .nav-item{font-size:.77rem}
body[data-nav-layout] .sidebar-bottom .discord-community-link .nav-label{min-width:0;max-width:none;width:auto;flex:1;white-space:normal;line-height:1.35}
body[data-nav-layout] .sidebar a:focus-visible{outline:1px solid #e2c88c;outline-offset:0}
body[data-nav-layout] .footer-audit{padding:0;border:0;background:none;color:var(--muted);font:inherit;text-decoration:underline;text-underline-offset:3px}
@media(min-width:761px){
  body[data-view=builder] .builder-tabs{top:var(--portal-header)}
  /* Reserve the expanded text layout even while the rail clips it.
     Revealing labels must not reflow rows or move the bottom Discord icon. */
  body[data-nav-layout] .sidebar .nav-item{gap:1rem}
  body[data-nav-layout] .sidebar .nav-label{display:block;flex:none;width:149px;max-width:none;opacity:0;visibility:hidden;transition:opacity .12s ease}
  body[data-nav-layout] .sidebar .discord-community-link{min-height:56px}
  body[data-nav-layout] .sidebar .discord-community-link .nav-label{flex:none;width:149px}
  body[data-nav-layout] .sidebar:has(a:focus-visible){width:232px;box-shadow:10px 0 28px #0007}
  body[data-nav-layout] .sidebar:has(a:focus-visible) .nav-label{opacity:1;visibility:visible}
}
@media(min-width:761px) and (hover:hover) and (pointer:fine){
  body[data-nav-layout] .sidebar:hover{width:232px;box-shadow:10px 0 28px #0007}
  body[data-nav-layout] .sidebar:hover .nav-label{opacity:1;visibility:visible}
}
@media(min-width:761px) and (max-height:620px){
  body[data-nav-layout] .sidebar{gap:.35rem;padding-block:.35rem}
  body[data-nav-layout] .sidebar nav{gap:.2rem}
  body[data-nav-layout] .sidebar .nav-item{min-height:38px;padding-block:7px}
  body[data-nav-layout] .sidebar-bottom{padding-top:.35rem}
}
@media(max-width:760px){
  body[data-nav-layout] .topbar{position:static}
  body[data-nav-layout] .shell{margin-left:0}
  body[data-nav-layout] .sidebar{position:sticky;inset:auto;top:0;width:100%;height:52px;flex-direction:row;align-items:center;padding:4px 7px;border-right:0;border-bottom:1px solid #a28c4d40;transition:none;box-shadow:none}
  body[data-nav-layout] .sidebar nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;height:44px;min-width:0}
  body[data-nav-layout] .sidebar nav .nav-item{min-height:44px;justify-content:center;padding:9px 0;overflow:visible}
  body[data-nav-layout] .sidebar .nav-item.active{border-left-color:transparent;border-bottom-color:#c8a65e}
  body[data-nav-layout] .sidebar .nav-label{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);padding:.5rem .8rem;border:1px solid #b2985266;background:#1b2017fa;box-shadow:0 4px 12px #0006;pointer-events:none}
  body[data-nav-layout] .sidebar .nav-item:focus-visible .nav-label{display:block}
  body[data-nav-layout] .sidebar .nav-item:first-child .nav-label{left:0;transform:none}
  body[data-nav-layout] .sidebar .nav-item:last-child .nav-label{left:auto;right:0;transform:none}
  body[data-nav-layout] .sidebar-bottom{display:none}
  body[data-view=builder] .builder-tabs{top:52px}
  body[data-view=builder] #stats-panel{scroll-margin-top:150px}
}
@media(prefers-reduced-motion:reduce){body[data-nav-layout] .sidebar{transition:none}}