/* =============================================================================
   sidebar.css — the app sidebar, owned in one place (loaded LAST).
   One icon language (stroke icons; product logos only where the item IS the
   product), sentence-case group headings, a quiet active state, and the
   collapse handle aligned with the header instead of floating mid-height.
   All app.js hooks are unchanged: .nav-item[data-view], #sidebarToggle .chev,
   #themeToggle, #accountBox .profile-chip, .nav-admin-only, .nav-badge.
   ============================================================================= */
:root{ --sbw:248px }

.sidebar{
  width:var(--sbw); flex:0 0 var(--sbw); padding:18px 14px 14px;
  background:color-mix(in srgb, var(--bg2) 84%, transparent) !important;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-right:1px solid var(--line); box-shadow:none;
}
body.light .sidebar{ background:color-mix(in srgb, #fff 86%, transparent) !important }

/* ---- header: wordmark, theme button, collapse handle ------------------------ */
.side-brand{ display:flex; align-items:center; padding:0 6px 14px; margin-bottom:6px; border-bottom:1px solid var(--line) }
.side-brand .brand-logo{ height:50px; width:auto }

.theme-toggle{
  position:absolute; top:28px; right:38px; width:30px; height:30px; z-index:6;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  border-radius:8px; border:1px solid transparent; background:transparent; color:var(--mut);
  font-size:0; line-height:0; transform:none;
  transition:background .12s, color .12s, border-color .12s;
}
.theme-toggle:hover{ background:var(--panel2); color:var(--ink); border-color:var(--line); transform:none }
.theme-toggle:focus-visible{ outline:2px solid var(--acc); outline-offset:1px }
.theme-toggle svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round }
.theme-toggle .tt-sun{ display:none }
body.light .theme-toggle .tt-moon{ display:none }
body.light .theme-toggle .tt-sun{ display:block }

.sidebar-toggle{
  top:30px; left:calc(var(--sbw) - 13px); transform:none;
  width:26px; height:26px; border-radius:8px; font-size:0; line-height:0;
  background:var(--panel); border:1px solid var(--line2); color:var(--mut);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:left .22s ease, background .12s, color .12s, border-color .12s;
}
.sidebar-toggle:hover{ background:var(--panel2); color:var(--ink); border-color:var(--acc); box-shadow:none }
.sidebar-toggle:focus-visible{ outline:2px solid var(--acc); outline-offset:1px }
.sidebar-toggle .chev{
  width:14px; height:14px; margin:0; fill:none; stroke:currentColor; stroke-width:2.25;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .22s ease;
}
.app-shell.collapsed .sidebar-toggle{ left:6px }

/* ---- navigation ------------------------------------------------------------- */
.nav{ gap:2px; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; margin:0 -4px; padding:0 4px; scrollbar-width:thin }
.nav-group-label{
  font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--faint); padding:16px 10px 6px; user-select:none;
}
.nav-group-label:first-child{ padding-top:4px }
.nav-group-label.hidden{ display:none }

.nav-item{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; overflow:visible;
  color:var(--mut); font-size:14px; font-weight:500; letter-spacing:0; line-height:1.3;
  transform:none; box-shadow:none; transition:background .12s, color .12s;
}
.nav-item::before{ content:none }
.nav-item:hover{ background:var(--panel2); color:var(--ink); transform:none }
.nav-item.active{ background:var(--acc-soft, rgba(124,131,255,.12)); color:var(--ink); font-weight:600; box-shadow:none }
.nav-item:focus-visible{ outline:2px solid var(--acc); outline-offset:1px }
.nav-txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.nav-svg{
  flex:0 0 18px; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round; color:var(--faint); opacity:.85; transition:opacity .12s;
}
.nav-item:hover .nav-svg, .nav-item.active .nav-svg{ opacity:1 }
/* each item keeps its own hue, like the product logos beside them */
.nav-item[data-view="humanizer"] .nav-svg{ color:#7c83ff }
.nav-item[data-view="pricing"]   .nav-svg{ color:#f4b03c }
.nav-item[data-view="faq"]       .nav-svg{ color:#4cc2ff }
.nav-item[data-view="changelog"] .nav-svg{ color:#ff9f43 }
.nav-item[data-view="redeem"]    .nav-svg{ color:#3fb950 }
.nav-item[data-view="admin"]     .nav-svg{ color:#a371f7 }
.nav-item[data-view="uploads"]   .nav-svg{ color:#f0a03c }
.nav-item[data-view="chats"]     .nav-svg{ color:#4cc2ff }
.nav-item[data-view="codes"]     .nav-svg{ color:#e0679a }

/* product logos keep their own colours; dimmed at rest so they sit with the icons */
.nav-tn-icon{ flex:0 0 18px; width:18px; height:18px; object-fit:contain; object-position:center; opacity:.85; transition:opacity .12s }
.nav-item:hover .nav-tn-icon, .nav-item.active .nav-tn-icon{ opacity:1 }
.nav-tn-word{ font-size:14px; font-weight:600; letter-spacing:-.2px; line-height:1.3 }
.nav-tn-word sup{ font-size:7px; opacity:.6 }
.nav-dc-icon{ flex:0 0 18px; width:18px; height:18px; color:#5865F2; opacity:.85; transition:opacity .12s }
.nav-discord:hover .nav-dc-icon, .nav-discord.active .nav-dc-icon{ color:#5865F2; opacity:1 }

.nav-badge{ min-width:18px; height:18px; padding:0 5px; font-size:10.5px; font-weight:700; margin-left:auto; box-shadow:none }

/* ---- footer: account, legal --------------------------------------------------- */
.side-foot{ border-top:1px solid var(--line); margin-top:10px; padding-top:12px }
#accountBox .profile-chip{
  gap:10px; padding:8px 10px; border-radius:10px; background:transparent; border:1px solid var(--line);
  color:var(--ink); transition:background .12s, border-color .12s;
}
#accountBox .profile-chip:hover{ background:var(--panel2); border-color:var(--line2) }
#accountBox .profile-chip:focus-visible{ outline:2px solid var(--acc); outline-offset:1px }
.avatar{
  width:30px; height:30px; border-radius:9px; font-size:12.5px; font-weight:700;
  color:var(--acc); background:var(--acc-soft, rgba(124,131,255,.12));
  box-shadow:inset 0 0 0 1px var(--acc-line, rgba(124,131,255,.42));
}
.avatar.admin{ color:#e6b04a; background:rgba(230,176,74,.14); box-shadow:inset 0 0 0 1px rgba(230,176,74,.42) }
.avatar.big{ width:46px; height:46px; font-size:18px; border-radius:12px }
.pc-text{ flex:1 1 auto }
.pc-text b{ font-size:13px; font-weight:600; max-width:100% }
.pc-text small{ font-size:11.5px; color:var(--mut) }
.plan-admin{ font-size:11.5px; font-weight:600; letter-spacing:0; text-transform:none; color:#e6b04a; gap:0 }
.plan-admin::before{ content:none }
.pc-go{ flex:0 0 14px; width:14px; height:14px; color:var(--faint); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
#btnLogin{ width:100% }

/* Eight links used to flow-wrap in a 199px-wide box and landed as three ragged lines.
   Now one card -- the account chip's border and radius -- holding two centred lines with
   a dot between neighbours. Each line is its own row and must NOT wrap: the widths were
   measured at 11.5px Inter (line 2 is Refund 36 + Acceptable Use 78 + one dot 18 = 132px,
   line 1 is 174px, the card's inside is 197px), and nowrap is inherited from .sidebar so
   an entry that outgrew its line would overflow visibly rather than fold -- which the
   verification script measures for.

   The dot is drawn by the anchor that FOLLOWS it, and only when a VISIBLE anchor comes
   somewhere before it in the same row (the ~ combinator, filtered by :not([hidden])).
   That is what lets the two SEO-only anchors sit in the markup without leaving a stray
   dot where they would have been. */
.side-legal{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  margin-top:10px; padding:8px 10px 7px;
  border:1px solid var(--line); border-radius:10px;
  background:color-mix(in srgb, var(--panel) 55%, transparent);
  transition:border-color .12s;
}
.side-legal:hover{ border-color:var(--line2) }
.sl-row{ display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; max-width:100% }
.side-legal a{
  font-size:11.5px; line-height:1; letter-spacing:0; padding:3px 0; color:var(--mut);
  border-radius:4px; transition:color .12s;
}
/* style.css draws its own middot for `.side-legal a + a::before` as an ABSOLUTELY
   positioned blob at left:-9px. The rule below out-ranks it on specificity, so it wins
   for `content` -- but the absolute position, top:50% and the transform from style.css
   would still apply to the same pseudo-element. They are reset here, explicitly. */
.side-legal a + a::before{ content:none }
.sl-row a:not([hidden]) ~ a:not([hidden])::before{
  content:"·"; position:static; transform:none; opacity:1; line-height:1;
  color:var(--faint); padding:0 7px; font-weight:700; pointer-events:none;
}
/* SEO-only entries: in the markup for crawlers, never drawn (see index.html). Explicit,
   because the [hidden] attribute loses to any author `display` on `.side-legal a`. */
.side-legal a[hidden]{ display:none }
.side-legal a:hover{ color:var(--ink) }
.side-legal a:focus-visible{ outline:2px solid var(--acc); outline-offset:1px; color:var(--ink) }

/* ---- phones / tablets: the sidebar is a top bar (layout rules live in style.css) -- */
@media (max-width:820px){
  .sidebar{ width:100%; flex:0 0 auto; padding:10px 14px }
  .side-brand{ border-bottom:0; padding:0; margin:0 }
  .side-brand .brand-logo{ height:36px }
  .theme-toggle{ position:static; width:38px; height:38px; border-radius:10px; border:1px solid var(--line2) }
  .nav{ overflow:visible; margin:0; padding:0 }
  .nav-group-label{ padding:10px 12px 4px }
  .side-foot{ border-top:0; margin:0; padding:0 }
  #accountBox .pc-go{ display:none }
  .avatar{ border-radius:8px }
  /* style.css hides this block on phones (the links move to .mobile-legal under the
     content). The grid rule above sets display and this sheet loads LAST, so without
     this line it would silently win over that display:none and the top bar would grow
     eight links it never had. */
  .side-legal{ display:none }
}

@media (prefers-reduced-motion:reduce){
  .sidebar, .sidebar-toggle, .sidebar-toggle .chev, .nav-item, .nav-svg, .theme-toggle{ transition:none }
}