/* ═══════════════════════════════════════════════════════════════════
   ink-ls · Sidebar
   Left sidebar (Account block + page extras) and the mobile bottom-nav,
   both injected by Sidebar.html. Only loaded on pages that extend
   Sidebar — Layout-only pages (Base, Login, Error, …) skip this.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ─────────────────────────────────────────────────────
   Top-level row container injected by Sidebar. Sidebar on the
   left, content-wrap fills the rest. The mobile media query below
   switches it to a column layout that respects the bottom-nav. */
.ink-page {
  display: flex;
  height: calc(100vh - var(--topbar-height));
  overflow: hidden;
}

.ink-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  height: 100%;
  /* Always reserve the scrollbar column so Main (overflows) and Settings
     (doesn't) render at pixel-identical widths. `scrollbar-gutter: stable`
     alone isn't enough in all browsers — pairing it with `overflow-y:
     scroll` + a transparent track guarantees the layout stays steady. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
  background: var(--bg-elev);
  border-right: 1px solid var(--border-strong);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-sizing: border-box;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Off-canvas slide-in for mobile. Toggle by adding `sb-open` to body. */
.ink-sb-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--bg-raised);
  color: var(--fg-soft);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
}
.ink-sb-toggle svg { width: 16px; height: 16px; }
.ink-sb-toggle:hover { background: var(--bg-hover); color: var(--fg); }

.ink-sb-backdrop {
  display: none;
  position: fixed;
  inset: var(--topbar-height) 0 0 0;
  background: rgba(2, 4, 9, 0.65);
  backdrop-filter: blur(2px);
  z-index: 90;
  opacity: 0;
  transition: opacity 0.22s ease;
}
body.sb-open .ink-sb-backdrop { display: block; opacity: 1; }

/* Make the reserved track invisible when there's nothing to scroll, so
   Settings doesn't show a dead gray rail. */
.ink-sidebar::-webkit-scrollbar       { width: 10px; }
.ink-sidebar::-webkit-scrollbar-track { background: transparent; }
.ink-sidebar::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 5px; }
.ink-sidebar::-webkit-scrollbar-thumb:hover { background: var(--bg-raised); }

/* ── Sidebar sections ─────────────────────────────────────────────── */
.sb-section + .sb-section {
  padding-top: 16px;
  border-top: 1px solid var(--border-muted);
}
.sb-section-head {
  font-size: 10px;
  font-weight: 700;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 9px;
}

/* ── Profile block ────────────────────────────────────────────────── */
.sb-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #a371f7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.sb-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}
.sb-profile-info { flex: 1; min-width: 0; }
.sb-profile-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-profile-rank {
  font-size: 10.5px;
  color: var(--fg-muted);
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  letter-spacing: 0.03em;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sb-profile-rank::before {
  content: '';
  width: 11px;
  height: 11px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2l3 6 6 1-4.5 4.5L18 20l-6-3-6 3 1.5-6.5L3 9l6-1z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2l3 6 6 1-4.5 4.5L18 20l-6-3-6 3 1.5-6.5L3 9l6-1z'/></svg>") center / contain no-repeat;
  color: var(--accent-light);
  opacity: 0.9;
  flex-shrink: 0;
}

/* ── Nav items ────────────────────────────────────────────────────── */
.sb-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  font-size: 13px;
  color: var(--fg-soft);
  cursor: pointer;
  border-radius: 0;
  transition: background 0.12s, color 0.12s;
  border: none;
  border-left: 2px solid transparent;
  background: transparent;
  width: 100%;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
}
.sb-nav-item:hover {
  background: var(--bg-elev-hover);
  color: var(--fg);
  text-decoration: none;
}
.sb-nav-item.active {
  background: var(--accent-dim);
  color: var(--accent-light);
  border-left-color: var(--accent);
}
.sb-nav-item svg { width: 14px; height: 14px; flex-shrink: 0; overflow: visible; }

.sb-nav-danger { color: var(--fg-muted); }
.sb-nav-danger:hover {
  background: rgba(248, 81, 73, 0.1) !important;
  color: var(--red) !important;
}

/* Legal section — small bottom-of-sidebar block with a Terms of Use
   link. Pushed to the bottom via margin-top:auto on the parent so it
   sits at the bottom regardless of how many sidebar_extra blocks are
   present above it. */
.sb-section-legal { margin-top: auto; padding: 8px 12px; border-top: 1px solid var(--border); }
.sb-legal-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 4px;
  font-size: 11px; color: var(--fg-subtle); text-decoration: none;
  transition: color 120ms, background 120ms;
}
.sb-legal-link:hover { color: var(--fg); background: var(--bg-elev-hover); text-decoration: none; }
.sb-legal-link svg { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.85; }

/* ─── Sidebar icon hover animations ─────────────────────────────────
   All icons transition at 220ms. transform-box: fill-box anchors
   child transforms to each element's OWN bbox center, so per-path
   translates/rotates pivot correctly. */
.sb-nav-item svg { transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center; }
.sb-nav-item svg * { transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms ease, fill 120ms ease; transform-box: fill-box; transform-origin: center; }

/* Main / APIs — three layers fan apart vertically on hover. */
.sb-nav-item:hover .ico-main .top { transform: translateY(-2px); }
.sb-nav-item:hover .ico-main .bot { transform: translateY(2px); }

/* Base — 4 squares spread outward from the center. */
.sb-nav-item:hover .ico-base .tl { transform: translate(-1.5px, -1.5px); }
.sb-nav-item:hover .ico-base .tr { transform: translate(1.5px,  -1.5px); }
.sb-nav-item:hover .ico-base .bl { transform: translate(-1.5px,  1.5px); }
.sb-nav-item:hover .ico-base .br { transform: translate(1.5px,   1.5px); }

/* Settings — gear rotates 45°. */
.sb-nav-item:hover .ico-settings { transform: rotate(45deg); }

/* Plan & Limits — clamshell wallet that FOLDS OPEN on hover. The top
   flap collapses vertically toward its bottom-edge hinge (looks like a
   real closure flap being pushed flat), revealing the bill tucked
   behind it. The bill's fill matches the surface so wallet outlines
   behind it don't bleed through where they overlap. The clasp pops as
   a small secondary motion cue. */
.ico-plan .wallet-flap  { transform-origin: 50% 100%; }
.ico-plan .wallet-cash  { opacity: 0; transform: translateY(3px) scale(0.65); transform-origin: 50% 100%; }
.ico-plan .wallet-bill  { transition: fill 120ms; }

.sb-nav-item:hover .ico-plan .wallet-flap  { transform: scaleY(0.06); opacity: 0.55; }
.sb-nav-item:hover .ico-plan .wallet-cash  { opacity: 1; transform: translateY(0) scale(1); }
.sb-nav-item:hover .ico-plan .wallet-bill  { fill: var(--bg-elev-hover); }
.sb-nav-item:hover .ico-plan .wallet-clasp { transform: scale(1.3); }

/* Logout — arrow elongates: shaft stretches horizontally from its left
   anchor, tip translates right to meet the new shaft end. Door stays put. */
.ico-logout .arrow-shaft { transform-origin: 0% 50%; }
.sb-nav-item:hover .ico-logout .arrow-shaft { transform: scaleX(1.18); }
.sb-nav-item:hover .ico-logout .arrow-tip   { transform: translateX(3px); }

/* ── Mobile ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ink-sidebar {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    height: calc(100dvh - var(--topbar-height));
    width: min(86vw, 320px);
    z-index: 95;
    transform: translateX(-100%);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  }
  body.sb-open .ink-sidebar { transform: translateX(0); }
  .ink-sb-toggle { display: inline-flex; }

  /* Lock the viewport on mobile sidebar pages. `100vh` includes the
     address-bar zone, so body ends up taller than the visible viewport
     and a real page-scroll opens up; `100dvh` follows the visible area
     and `overscroll-behavior: none` kills iOS rubber-band. */
  html,
  body { overscroll-behavior: none; }
  body { height: 100dvh !important; }
  .ink-page {
    height: calc(100dvh - var(--topbar-height)) !important;
    padding-bottom: 60px;
  }
}