/* Member shell: side menu for the cabinet and the pages inside it.
   Hidden for guests (no body.in), who keep the public header nav. */

:root { --sn-w: 228px; --top-h: 69px; }

.sidenav { display: none; }
body.in { padding-left: var(--sn-w); }
body.in .top .nav { display: none; }
body.in .sidenav {
  display: flex; flex-direction: column; gap: 26px;
  position: fixed; z-index: 30; left: 0; top: var(--top-h); bottom: 0; width: var(--sn-w);
  padding: 24px 12px 18px; overflow-y: auto; scrollbar-width: thin;
  background: rgba(13, 11, 10, .92); border-right: 1px solid var(--line-2);
}

.sidenav a {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 11px 12px; text-decoration: none; color: var(--muted);
  font: 600 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  transition: color .2s, background .2s;
}
.sidenav a:hover { color: var(--ash); background: rgba(239, 228, 214, .04); }
.sidenav a[aria-current] { color: var(--ash); background: rgba(255, 138, 61, .08); }
.sidenav a[aria-current]::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; background: var(--ember);
}
.sidenav svg { width: 18px; height: 18px; flex: none; }
.sidenav a[aria-current] svg { color: var(--ember); }
.sn-main { display: flex; flex-direction: column; gap: 2px; }

.sn-label { padding: 0 12px 10px; font: 600 11px/1 var(--mono); letter-spacing: .22em; color: var(--dim); text-transform: uppercase; }
.sn-servers { display: flex; flex-direction: column; gap: 2px; }
.sn-servers a { font: 14px/1.3 "Segoe UI", system-ui, sans-serif; letter-spacing: 0; text-transform: none; gap: 10px; }
.sn-servers a span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sn-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 2px; }
.sn-foot a { font-size: 11px; letter-spacing: .12em; color: var(--dim); }

.who-name { font-size: 14px; color: var(--muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) { .who-name { display: none; } }

/* Phones: the menu becomes a bottom tab bar — thumbs reach it, and the
   server list stays in the cabinet's own tabs. */
@media (max-width: 900px) {
  body.in { padding-left: 0; padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  body.in .sidenav {
    top: auto; right: 0; width: auto; flex-direction: row; gap: 0; overflow: visible;
    padding: 0 0 env(safe-area-inset-bottom); border-right: 0; border-top: 1px solid var(--line-2);
    background: rgba(13, 11, 10, .94); backdrop-filter: blur(12px);
  }
  .sn-group, .sn-foot { display: none; }
  .sn-main { flex: 1; flex-direction: row; gap: 0; }
  .sn-main a {
    flex: 1; flex-direction: column; justify-content: center; gap: 6px; min-height: 60px; padding: 8px 2px;
    font-size: 10px; letter-spacing: .02em;
  }
  .sn-main a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sn-main a[aria-current] { background: transparent; }
  .sn-main a[aria-current]::before { left: 22%; right: 22%; top: 0; bottom: auto; width: auto; height: 2px; }
  body.in .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* Inside the shell the page is a tool, not a poster: content starts at the
   menu, headings shrink to one line, and the lead is a single quiet line. */
body.in main { max-width: 1480px; margin-left: 0; margin-right: auto; padding-top: 84px; padding-left: clamp(20px, 3vw, 40px); padding-right: clamp(20px, 3vw, 40px); }
body.in .page-head { margin-bottom: 16px; gap: 16px; align-items: center; }
body.in .page-head h1 { font-size: clamp(22px, 1.7vw, 28px); line-height: 1; margin-top: 8px; }
body.in .page-head h1 br { display: none; }
body.in .page-head p { margin-top: 6px; font-size: 13px; max-width: 760px; color: var(--dim); }
body.in .page-head .kicker { font-size: 10px; }
body.in .stats div { padding: 10px 18px; min-width: 0; }
body.in .stats b { font-size: 24px; }
body.in .stats span { font-size: 10px; }
body.in .sv-head h1 { font-size: clamp(22px, 1.9vw, 30px); }
body.in.app .hello { margin-bottom: 18px; }
body.in.app .hello h1 { font-size: clamp(22px, 1.7vw, 28px); margin-top: 8px; }
body.in .banner { height: clamp(80px, 9vw, 130px); margin-bottom: 20px; }
/* Pitch headings are for guests; a member already knows what the page is for. */
body.in .guest-only { display: none; }