/* Winston V3 — desktop sidebar. */

/* Sidebar is mobile-hidden by default; desktop reveals it via the
   media query below. Keeps the import order independent of layout.css. */
.sidebar {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  background: var(--bg);
  border-right: 1px solid var(--border);
  /* No top padding: the .sidebar-head fills the top band (height
     --top-bar-h) so the brand aligns with the content header to its right. */
  padding: 0 var(--space-3) var(--space-4);
}
@media (min-width: 1024px) {
  .sidebar {
    display: flex;
    /* Full-height left rail: spans every grid row, so it pins to the very
       top (top:0, not under the top bar) and the divider runs unbroken.
       align-self:start collapses the cell to content height; sticky pins it;
       internal overflow keeps very tall operator menus reachable. */
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
  }
}

/* Head: brand + collapse toggle at the top of the rail. Height matches the
   top bar so the brand sits in the same horizontal band as the content
   header across the divider. Expanded: brand left, hamburger floated right
   against the vertical divider. */
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  height: var(--top-bar-h);
  margin-bottom: var(--space-2);
}
.sidebar-brand { flex: 0 1 auto; min-width: 0; }
.sidebar-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  color: var(--ink-muted);
  border-radius: var(--radius-md);
}
.sidebar-toggle-btn:hover { background: var(--surface-2); color: var(--ink); }
.sidebar-toggle-btn svg,
.sidebar-toggle-btn .lucide { width: 20px; height: 20px; }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--ink-2);
  font-size: var(--type-base);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  min-height: var(--tap-min);
}
.nav-item:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.nav-item.is-active {
  background: var(--ai-soft);
  color: var(--ai);
  font-weight: var(--weight-semi);
}

.nav-icon  { display: inline-flex; align-items: center; justify-content: center; width: 22px; line-height: 1; }
.nav-icon svg, .nav-icon .lucide { width: 20px; height: 20px; }
/* text-align:left so <button>.nav-item rows (Log out / Collapse) match the
   <a> rows — buttons default to center, which floats their label mid-row. */
.nav-label { line-height: 1; flex: 1; text-align: left; }

/* #142 — inline keyboard hint next to each nav item. Quiet by default
   (faint mono on the row), brighter on the active row, and brightest on
   hover so the operator's eye can find the shortcut without it
   competing with the label. Hidden by default; only the desktop sidebar
   shows it (the bottom-nav layout has no room and a tap surface that
   would never benefit from a keyboard hint). */
.nav-kbd {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  color: var(--ink-faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  padding: 1px 6px;
  margin-left: auto;
  white-space: nowrap;
}
/* Hint labels removed per operator preference — the `g <letter>` chord
   shortcuts (registered in components/keyboard-nav.js) still work; the
   visual reminder is just suppressed. Press `?` for the full cheat sheet.
   To restore the labels, swap this rule back to `display: inline-block`. */
@media (min-width: 1024px) {
  .nav-kbd { display: none; }
}
.nav-item:hover .nav-kbd {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink-2);
}
.nav-item.is-active .nav-kbd {
  color: var(--ai);
  background: var(--surface);
  border-color: var(--border);
}

.sidebar-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  color: var(--ink-muted);
  border-top: 1px solid var(--border);
}

/* Slice 4 (2026-05-27): sidebar-group was the wrapper for the
   power-mode "Operator" subnav. The wrapper is gone in HTML (every
   route ships in-line under one nav); selectors retained for any
   future sidebar grouping that wants the same shape. */
.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.sidebar-group[hidden] { display: none; }
/* Slice IA (2026-05-27): task-group labels are now siblings of the
   nav items (not children of a wrapper). Add vertical breathing room
   so the label visually separates the group above from the items
   below without a hard divider. */
.sidebar-group-label {
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ink-faint);
  font-weight: var(--weight-semi);
  padding: var(--space-4) var(--space-3) var(--space-1);
}
/* Footer rows (Settings / Log out) reuse the .nav-item shape so their
   icons line up with the primary nav above; .sidebar-link only softens
   the resting color to read as secondary. Hover + layout come from
   .nav-item. The collapse toggle lives in the top bar as a hamburger
   (.sidebar-toggle-btn in top-bar.css), not in the rail. */
.sidebar-link { color: var(--ink-muted); }

/* ── Collapsed rail (icon-only) ──────────────────────────────────────
   Toggled by the rail's collapse button (app.js → wireSidebarToggle),
   restored at boot from prefs.sidebarCollapsed. Shrinks the grid column
   via the --sidebar-w override and hides every text label so only the
   lucide glyphs remain. Desktop-only in effect — the sidebar is
   display:none below 1024px, and the mobile grid never reads
   --sidebar-w, so overriding the token there is harmless. The native
   `title` on each row becomes the hover tooltip once labels are gone. */
html[data-sidebar="collapsed"] { --sidebar-w: 64px; }

@media (min-width: 1024px) {
  html[data-sidebar="collapsed"] .nav-label,
  html[data-sidebar="collapsed"] .nav-kbd {
    display: none;
  }
  html[data-sidebar="collapsed"] .sidebar {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  /* Collapsed head: stack the toggle ABOVE the brand icon (column-reverse
     puts the last child — the hamburger — on top) and drop the wordmark, so
     the rail reads ☰ / W / nav-glyphs top-to-bottom, all centered. */
  html[data-sidebar="collapsed"] .sidebar-head {
    flex-direction: column-reverse;
    justify-content: center;
    height: auto;
    gap: var(--space-2);
    padding-top: var(--space-3);
  }
  html[data-sidebar="collapsed"] .sidebar-brand .brand-text { display: none; }
  /* Center each glyph in the narrow rail; drop the row's text gap. */
  html[data-sidebar="collapsed"] .nav-item {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
  }
  /* Group labels collapse to a hairline divider so the Watch / Trade /
     System rhythm survives without the text. The first one needs none. */
  html[data-sidebar="collapsed"] .sidebar-group-label {
    font-size: 0;
    padding: 0;
    margin: var(--space-2) var(--space-2) 0;
    border-top: 1px solid var(--border);
  }
  html[data-sidebar="collapsed"] .sidebar-nav > .sidebar-group-label:first-child {
    border-top: 0;
    margin-top: 0;
  }
}