/* Left menu, Arc-style (2026-10-28).
 *
 * Loaded after every other sidebar rule (sidebar, polish, flat, desk,
 * oceanus, motion), so it owns the rows, the group heads and their motion.
 *
 * - Rows: 30px, 8px radius, secondary ink at rest, primary on hover and
 *   when current. Hover is a quiet tint that fades in 140ms; it does not
 *   glide.
 * - Current row: one highlight (.sb-glide, placed by sidebar_arc.js) that
 *   glides from row to row on a light spring, inside the page and across
 *   page loads (view-transition name sb-glide). A short ink tick marks it.
 * - Icons: Cairn's hue per item, muted at rest, warmer on hover, full when
 *   current.
 * - Group heads: a 28px row with a stroked chevron; folding animates the
 *   height without overshoot while the rows fade, faster on the way out.
 * - Rail: group heads become hairlines so the sections still read.
 */

html body .sidebar {
  --sb-row-h: 26px;
  --sb-head-h: 26px;
  --sb-radius: 8px;
  --sb-hover: color-mix(in srgb, var(--text-primary) 5%, transparent);
  --sb-active: color-mix(in srgb, var(--text-primary) 8.5%, transparent);
  --sb-tick: color-mix(in srgb, var(--text-primary) 72%, transparent);
  --sb-ease: cubic-bezier(.22, 1, .36, 1);
  --sb-ease-exit: cubic-bezier(.7, 0, .84, 0);
  --sb-spring: var(--arc-spring);    /* Arc: critically damped, no overshoot */
  --sb-smooth: var(--arc-smooth);
}

/* ---- Rows ------------------------------------------------------------ */
html body .sidebar .sidebar-nav .nav-item {
  min-height: var(--sb-row-h);
  margin: 1px 8px;
  padding: 0 10px 0 10px;
  gap: 10px;
  border: 0 !important;
  border-radius: var(--sb-radius) !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-size: var(--fs-base);
  font-weight: 450;
  letter-spacing: -0.005em;
  line-height: 1;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 140ms var(--sb-ease),
    color 140ms var(--sb-ease) !important;
}
html body .sidebar .sidebar-nav .nav-item .label {
  line-height: 18px !important;
  color: inherit !important;
  font-weight: inherit !important;
  transition: color 140ms var(--sb-ease);
}
html body .sidebar .sidebar-nav .nav-item .icon {
  color: color-mix(in srgb, var(--nav-ico, var(--accent)) 55%, var(--text-muted)) !important;
  transition: color 160ms var(--sb-ease);
}
html body .sidebar .sidebar-nav .nav-item.active {
  color: var(--text-primary) !important;
  font-weight: 550;
}
html body .sidebar .sidebar-nav .nav-item.active .icon {
  color: var(--nav-ico, var(--accent)) !important;
}
@media (hover: hover) and (pointer: fine) {
  html body .sidebar .sidebar-nav .nav-item:hover {
    background: var(--sb-hover) !important;
    color: var(--text-primary) !important;
  }
  html body .sidebar .sidebar-nav .nav-item:hover .icon {
    color: color-mix(in srgb, var(--nav-ico, var(--accent)) 85%, var(--text-secondary)) !important;
  }
  /* The highlight already sits under the current row. */
  html body .sidebar .sidebar-nav .nav-item.active:hover { background: transparent !important; }
  html body .sidebar .sidebar-nav .nav-item.active:hover .icon { color: var(--nav-ico, var(--accent)) !important; }
}
/* Before the script places the highlight (or without it), the row carries it. */
html body .sidebar:not(.sb-arc) .sidebar-nav .nav-item.active { background: var(--sb-active) !important; }

/* A press answers with colour, not scale: the menu row anchors nothing,
   but a shrinking row would jitter the gliding highlight under it. */
html body .sidebar .sidebar-nav .nav-item:active { transform: none !important; }
html body .sidebar .sidebar-nav .nav-item:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: -2px;
  background: var(--sb-hover) !important;
  color: var(--text-primary) !important;
}

/* ---- The gliding highlight ------------------------------------------- */
html body .sidebar .sidebar-nav { position: relative; }
.sidebar .sb-glide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 0;
  border-radius: var(--sb-radius);
  background: var(--sb-active);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  view-transition-name: sb-glide;
  transition: opacity 160ms var(--sb-ease);
}
.sidebar .sb-glide.is-on { opacity: 1; }
.sidebar .sb-glide.is-moving {
  transition:
    transform var(--arc-dur-morph) var(--sb-spring),
    width var(--arc-dur-morph) var(--sb-spring),
    height var(--arc-dur-morph) var(--sb-spring),
    opacity 160ms var(--sb-ease);
}
.sidebar .sb-glide::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 2px;
  height: 14px;
  border-radius: 1px;
  background: var(--sb-tick);
  transform: translateY(-50%);
}
/* Rows paint over the highlight. */
html body .sidebar .sidebar-nav .nav-item,
html body .sidebar .sidebar-nav .nav-section-title { position: relative; z-index: 1; }

/* Across a page load the highlight moves from the old row to the new one. */
::view-transition-group(sb-glide) {
  animation-duration: 420ms;
  animation-timing-function: var(--sb-spring, var(--arc-spring));
}
::view-transition-old(sb-glide),
::view-transition-new(sb-glide) { animation: none; mix-blend-mode: normal; }
::view-transition-old(sb-glide) { opacity: 0; }

/* ---- Group heads ----------------------------------------------------- */
html body .sidebar .sidebar-nav .nav-section { margin-bottom: 4px; }
html body .sidebar .sidebar-nav .nav-section + .nav-section { margin-top: 6px; }
html body .sidebar .sidebar-nav .nav-section-title {
  width: calc(100% - 16px);
  min-height: var(--sb-head-h);
  max-height: none;
  margin: 0 8px 1px;
  padding: 0 8px 0 10px;
  border-radius: var(--sb-radius);
  color: var(--text-muted) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  transition:
    background-color 140ms var(--sb-ease),
    color 140ms var(--sb-ease),
    opacity 160ms var(--sb-ease);
}
@media (hover: hover) and (pointer: fine) {
  html body .sidebar .sidebar-nav .nav-section-title:hover {
    background: var(--sb-hover);
    color: var(--text-secondary) !important;
  }
  html body .sidebar .sidebar-nav .nav-section-title:hover .nav-fold-chev { opacity: 1; }
}
html body .sidebar .sidebar-nav .nav-section-title:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: -2px;
}
/* A folded group that holds the current page keeps its head lit. */
html body .sidebar .sidebar-nav .nav-section.is-folded.sb-holds-active > .nav-section-title {
  color: var(--text-primary) !important;
}
/* Stroked chevron: down when open, right when folded, turning on a light spring. */
html body .sidebar .sidebar-nav .nav-fold-chev {
  width: 6px;
  height: 6px;
  margin-right: 3px;
  border: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0 0 1px 0;
  opacity: .7;
  transform: translateY(-1.5px) rotate(45deg);
  transition: transform 260ms var(--sb-spring), opacity 160ms var(--sb-ease);
}
html body .sidebar .sidebar-nav .nav-section.is-folded > .nav-section-title .nav-fold-chev {
  transform: translateX(-1px) rotate(-45deg);
  opacity: 1;
}

/* ---- Folding --------------------------------------------------------- */
html body .sidebar .sidebar-nav .nav-section-body {
  transition: grid-template-rows 400ms var(--sb-smooth);
}
html body .sidebar .sidebar-nav .nav-section-inner {
  opacity: 1;
  transition: opacity 240ms var(--sb-ease) 60ms;
}
html body .sidebar .sidebar-nav .nav-section.is-folded > .nav-section-body > .nav-section-inner {
  opacity: 0;
  transition: opacity 140ms var(--sb-ease-exit);
}
/* Folded rows leave the tab order with the fold. */
html body .sidebar .sidebar-nav .nav-section.is-folded > .nav-section-body { visibility: hidden; transition: grid-template-rows 400ms var(--sb-smooth), visibility 0s linear 400ms; }
html body .sidebar .sidebar-nav .nav-section:not(.is-folded) > .nav-section-body { visibility: visible; }

/* ---- Rail ------------------------------------------------------------ */
html body .sidebar.collapsed:not(.is-peek) .sidebar-nav .nav-item {
  justify-content: center;
  margin: 1px 8px;
  padding: 0;
}
html body .sidebar.collapsed:not(.is-peek) .sb-glide::before { display: none; }
html body .sidebar.collapsed:not(.is-peek) .sidebar-nav .nav-section + .nav-section::before {
  content: "";
  display: block;
  height: 1px;
  margin: 2px 14px 7px;
  background: var(--border-muted, var(--border));
}
html body .sidebar.collapsed:not(.is-peek) .nav-section.is-folded > .nav-section-body,
html body .sidebar.collapsed:not(.is-peek) .nav-section.is-folded > .nav-section-body > .nav-section-inner {
  visibility: visible;
  opacity: 1;
}

/* ---- Touch: keep the 44px targets ------------------------------------ */
@media (hover: none) and (pointer: coarse) {
  html body .sidebar .sidebar-nav .nav-item { min-height: 44px; }
  html body .sidebar .sidebar-nav .nav-section-title { min-height: 36px; }
}

/* ---- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html body .sidebar .sidebar-nav .nav-item,
  html body .sidebar .sidebar-nav .nav-item .icon,
  html body .sidebar .sidebar-nav .nav-section-title,
  html body .sidebar .sidebar-nav .nav-fold-chev,
  html body .sidebar .sidebar-nav .nav-section-body,
  html body .sidebar .sidebar-nav .nav-section-inner,
  .sidebar .sb-glide,
  .sidebar .sb-glide.is-moving { transition: none !important; }
  ::view-transition-group(sb-glide) { animation: none !important; }
}

/* ---- Guide line within a group (2026-10-28, v2) ------------------------
   A hairline runs down each open group, under the start of its head; the
   rows sit just right of it and the current row's ink tick lands on it. */
html body .sidebar {
  --sb-guide-x: 17px;     /* from the nav's left edge */
  --sb-row-x: 26px;       /* rows start here inside a group */
}
html body .sidebar .sidebar-nav .nav-section-inner { position: relative; }
html body .sidebar .sidebar-nav .nav-section-inner::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 5px;
  left: var(--sb-guide-x);
  width: 1px;
  background: color-mix(in srgb, var(--text-primary) 10%, transparent);
  pointer-events: none;
}
html body .sidebar .sidebar-nav .nav-section-inner > .nav-item {
  margin-left: var(--sb-row-x);
  padding-left: 9px;
}
.sidebar .sb-glide::before { left: calc(var(--sb-guide-x) - var(--sb-row-x) - .5px); }
.sidebar .sb-glide.on-head::before { left: 3px; }
/* The rail and the folded state have no guide. */
html body .sidebar.collapsed:not(.is-peek) .sidebar-nav .nav-section-inner::before { display: none; }
html body .sidebar.collapsed:not(.is-peek) .sidebar-nav .nav-section-inner > .nav-item { margin-left: 8px; padding-left: 0; }

/* ---- First paint (v3) --------------------------------------------------
   sidebar_arc.js restores folded groups before the page paints and holds
   every sidebar transition until load, so groups never open and re-fold. */
html body .sidebar.sb-init,
html body .sidebar.sb-init * ,
html body .sidebar.sb-init *::before,
html body .sidebar.sb-init *::after { transition: none !important; animation: none !important; }

/* Before sidebar_arc.js runs, the inline script at the top of the sidebar
   names the saved folds on <html>; these groups render closed from the
   first byte. The script then sets the real classes and drops the mark. */
html[data-nav-folds~="markets"] body .sidebar .nav-section:has(> .nav-section-title[data-fold="markets"]) > .nav-section-body,
html[data-nav-folds~="analysis"] body .sidebar .nav-section:has(> .nav-section-title[data-fold="analysis"]) > .nav-section-body,
html[data-nav-folds~="analysts"] body .sidebar .nav-section:has(> .nav-section-title[data-fold="analysts"]) > .nav-section-body,
html[data-nav-folds~="assets"] body .sidebar .nav-section:has(> .nav-section-title[data-fold="assets"]) > .nav-section-body,
html[data-nav-folds~="messages"] body .sidebar .nav-section:has(> .nav-section-title[data-fold="messages"]) > .nav-section-body,
html[data-nav-folds~="control"] body .sidebar .nav-section:has(> .nav-section-title[data-fold="control"]) > .nav-section-body {
  grid-template-rows: 0fr !important;
  visibility: hidden;
  transition: none !important;
}

/* ---- Refinement after uiarc.dev's own nav (v4, 2026-10-29) --------------
   Measured on uiarc.dev (dark and light): rows 13px Inter at 400 with
   -0.01em tracking, one weight for every row (the current one changes ink
   and fill, not weight), group heads 12px/500. Icons keep Cairn's hues
   (muted at rest, full when current). Rows stay compact: 28px, no gaps. */
html body .sidebar { --sb-row-h: 28px; --sb-head-h: 28px; }
html body .sidebar .sidebar-nav .nav-item {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
html body .sidebar .sidebar-nav .nav-item .label { line-height: 18px !important; }
html body .sidebar .sidebar-nav .nav-item.active { font-weight: 400; }
html body .sidebar .sidebar-nav .nav-item .icon {
  width: 15px;
  height: 15px;
  stroke-width: 1.6;
}
html body .sidebar .sidebar-nav .nav-section-title {
  margin-bottom: 0;
  font-size: 12px !important;
  letter-spacing: -0.005em !important;
}
html body .sidebar .sidebar-nav .nav-section { margin-bottom: 2px; }
html body .sidebar .sidebar-nav .nav-section + .nav-section { margin-top: 8px; }
.sidebar .sb-glide::before { height: 12px; }

/* Search: a 32px field in the same type. */
html body .sidebar .sidebar-search input {
  height: 32px;
  padding: 0 10px 0 30px;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: -0.01em;
}
/* shells.css unsets every desktop input's size with !important; the id wins it back. */
html body .sidebar .sidebar-search #sb-ticker-search { font-size: 13px !important; }

/* Footer: a solid strip on a hairline (Arc's sidebar footer), not frost over
   the rows, and the account in the nav's type: 13px/500 name, 12px meta. */
html body .sidebar .sidebar-footer::before,
html body[data-theme] .sidebar .sidebar-footer::before {
  background: color-mix(in srgb, var(--bg-elevated) 96%, var(--bg-base));
  border-top: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html body .sidebar .sidebar-footer .user-name {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 18px;
}
html body .sidebar .sidebar-footer .user-info > :not(.user-name) {
  font-size: 12px;
  line-height: 16px;
}
html body .sidebar .sidebar-footer .user-avatar {
  width: 28px;
  height: 28px;
  font-size: 13px;
}

/* ---- Display strip as Arc's expanding button group (sm) ------------------
   The look applies from the first paint; until arc_prefbar.js has measured
   ([data-arc-sized]) every action takes its natural width with exactly the
   padding the measured width will have (the first open, the rest square),
   so measuring moves nothing. Then CSS springs the measured widths
   (neighbours slide aside, the group follows) and reveals the label. Geometry from uiarc.dev's
   expanding-button-group sm: 28px, 14px icons, 7 / 5 / 11px, 3px pill. */
html body .sidebar .sb-pref-bar {
  display: inline-flex;
  width: max-content;
  max-width: calc(100% - 24px);
  gap: 2px;
  margin: 0 12px 8px;
  padding: 3px;
  border: 1px solid var(--arc-border);
  border-radius: var(--arc-radius-pill);
  background: var(--arc-surface);
}
html body .sidebar .sb-pref-bar > * { position: relative; }
html body .sidebar .sb-pref-bar :is(.font-scale-compact, .lang-pop-btn, .theme-toggle-btn, .feedback-btn-minimal) {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: 28px;
  min-width: 28px;
  max-width: none;
  padding: 0 0 0 7px !important;
  gap: 5px;
  overflow: clip;
  border: 0 !important;
  border-radius: var(--arc-radius-pill) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--arc-text-secondary) !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body .sidebar .sb-pref-bar[data-arc-ebg-ready][data-arc-sized] :is(.font-scale-compact, .lang-pop-btn, .theme-toggle-btn, .feedback-btn-minimal) {
  transition:
    width var(--arc-dur-morph) var(--arc-spring),
    color var(--arc-dur-fast) var(--arc-ease),
    background-color var(--arc-dur) var(--arc-ease) !important;
}
html body .sidebar .sb-pref-bar :is(.font-scale-compact, .lang-pop-btn, .theme-toggle-btn, .feedback-btn-minimal)[data-expanded],
html body .sidebar .sb-pref-bar:not([data-arc-ebg]) > .font-scale-ctrl > .font-scale-compact {
  background: var(--arc-surface-muted) !important;
  color: var(--arc-foreground) !important;
}
/* Icons: 14px, a slight squeeze on press (the box never scales; its width is the motion). */
html body .sidebar .sb-pref-bar :is(.font-scale-compact, .lang-pop-btn, .theme-toggle-btn, .feedback-btn-minimal) > :not(.sb-pref-lab) {
  flex: none;
  transition: transform 320ms var(--arc-spring);
}
html body .sidebar .sb-pref-bar :is(.theme-toggle-btn svg, .feedback-btn-minimal .oc-ico) { width: 14px; height: 14px; }
html body .sidebar .sb-pref-bar .font-scale-a { width: 14px; font-size: 13px; line-height: 1; text-align: center; }
html body .sidebar .sb-pref-bar :is(.font-scale-compact, .lang-pop-btn, .theme-toggle-btn, .feedback-btn-minimal):active > :not(.sb-pref-lab) {
  transform: scale(.86);
  transition-duration: 90ms;
}
/* The label slides out from behind the icon with a short fade and blur, and tucks back faster. */
html body .sidebar .sb-pref-bar .sb-pref-lab {
  display: inline-block;
  grid-template-columns: none;
  margin: 0 !important;
  overflow: visible;
  opacity: 0;
  transform: translateX(-6px);
  filter: blur(2px);
  font-size: 12px !important;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: opacity var(--arc-dur-instant, 100ms) var(--arc-ease), transform var(--arc-dur-instant, 100ms) var(--arc-ease), filter var(--arc-dur-instant, 100ms) var(--arc-ease);
}
html body .sidebar .sb-pref-bar .sb-pref-lab > span { max-width: none; overflow: visible; }
html body .sidebar .sb-pref-bar [data-expanded] .sb-pref-lab,
html body .sidebar .sb-pref-bar:not([data-arc-ebg]) > .font-scale-ctrl > .font-scale-compact .sb-pref-lab {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity var(--arc-dur) var(--arc-ease-enter) 40ms, transform var(--arc-dur) var(--arc-ease-enter) 40ms, filter var(--arc-dur) var(--arc-ease-enter) 40ms;
}
/* Pointer focus draws no ring; keyboard focus gets the shared one. */
html body .sidebar .sb-pref-bar :is(.font-scale-compact, .lang-pop-btn, .theme-toggle-btn, .feedback-btn-minimal):focus { outline: none; }
html body .sidebar .sb-pref-bar :is(.font-scale-compact, .lang-pop-btn, .theme-toggle-btn, .feedback-btn-minimal):focus-visible {
  outline: 2px solid var(--arc-focus);
  outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) {
  html body .sidebar .sb-pref-bar :is(.font-scale-compact, .lang-pop-btn, .theme-toggle-btn, .feedback-btn-minimal),
  html body .sidebar .sb-pref-bar :is(.font-scale-compact, .lang-pop-btn, .theme-toggle-btn, .feedback-btn-minimal) > *,
  html body .sidebar .sb-pref-bar .sb-pref-lab { transition: opacity 100ms linear !important; transform: none !important; filter: none !important; }
}

/* Before measurement: natural widths equal to the measured ones. */
html body .sidebar .sb-pref-bar:not([data-arc-sized]) :is(.font-scale-compact, .lang-pop-btn, .theme-toggle-btn, .feedback-btn-minimal) {
  width: auto !important;
  padding-right: 7px !important;
}
html body .sidebar .sb-pref-bar[data-arc-ebg]:not([data-arc-sized]) :is(.font-scale-compact, .lang-pop-btn, .theme-toggle-btn, .feedback-btn-minimal):not([data-expanded]) .sb-pref-lab { display: none; }
html body .sidebar .sb-pref-bar[data-arc-ebg]:not([data-arc-sized]) [data-expanded],
html body .sidebar .sb-pref-bar:not([data-arc-ebg]) > .font-scale-ctrl > .font-scale-compact { padding-right: 11px !important; }
html body .sidebar .sb-pref-bar:not([data-arc-ebg]) > :not(.font-scale-ctrl) .sb-pref-lab { display: none; }

/* ---- Rail and hover-peek, v2 (2026-10-29) ---------------------------------
   The peek no longer animates width (that re-laid out the whole menu every
   frame over a 40px backdrop blur). The rail and the peek now share one
   geometry: group heads keep their 28px (a hairline in the rail), neither
   shows the display strip or the company search (the menu starts at the
   top), and every icon sits on the rail's centre line in both states. Entering the peek
   is one layout, then only a clip reveal and fades run; leaving clips back to
   the rail before the class goes (base.html: is-peek-leaving). Solid panel,
   no blur. Folded groups show in the rail and the peek alike. */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  html body #sidebar.collapsed {
    --sb-rail: var(--sidebar-width-collapsed, 64px);
    --sb-ico-x: calc(var(--sb-rail) / 2 - 8px - 7.5px);   /* row padding that puts a 15px icon on the centre line */
  }
  /* Rows: icon on the centre line, label after it. */
  html body #sidebar.collapsed .sidebar-nav .nav-item,
  html body #sidebar.collapsed .sidebar-nav .nav-section-inner > .nav-item {
    justify-content: flex-start !important;
    margin: 0 8px !important;
    padding: 0 10px 0 var(--sb-ico-x) !important;
    gap: 10px !important;
  }
  html body #sidebar.collapsed .sidebar-nav .nav-item .icon { margin: 0 !important; }
  html body #sidebar.collapsed .sidebar-nav .nav-section-inner::before { display: none; }
  html body #sidebar.collapsed .sb-glide::before { left: 3px; }
  html body #sidebar.collapsed .sidebar-nav .nav-section + .nav-section::before { content: none; display: none; }
  /* Folds do not apply on the rail or in the peek: both list every row. */
  html body #sidebar.collapsed .nav-section.is-folded > .nav-section-body { grid-template-rows: 1fr !important; visibility: visible !important; }
  html body #sidebar.collapsed .nav-section.is-folded > .nav-section-body > .nav-section-inner { opacity: 1 !important; }
  /* Group heads keep their height; in the rail the words give way to a hairline. */
  html body #sidebar.collapsed .sidebar-nav .nav-section-title {
    opacity: 1 !important;
    max-height: none !important;
    min-height: var(--sb-head-h) !important;
    margin: 0 8px !important;
    padding: 0 8px 0 10px !important;
    color: transparent !important;
    pointer-events: none !important;
    transition: none !important;
  }
  html body #sidebar.collapsed .sidebar-nav .nav-section-title .nav-fold-chev { opacity: 0 !important; transition: none; }
  html body #sidebar.collapsed:not(.is-peek) .sidebar-nav .nav-section-title::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: calc(var(--sb-rail) - 36px);
    height: 1px;
    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
  }
  /* Collapsed (rail and peek): no display strip, no company search; the
     menu starts at the top. The top bar carries the company search. */
  html body #sidebar.collapsed :is(.sb-pref-bar, .sidebar-search) { display: none !important; }
  html body #sidebar.collapsed :is(.nav-item .label, .nav-item .badge, .nav-item .expand-icon) {
    opacity: 0;
    visibility: hidden;
  }
  /* The peek: words and controls are there at once; the opening edge reveals
     them (no per-row fades, so no per-row style work while the clip moves). */
  html body #sidebar.collapsed.is-peek :is(.nav-item .label, .nav-item .badge, .nav-item .expand-icon) {
    opacity: 1;
    visibility: visible;
  }
  html body #sidebar.collapsed.is-peek .sidebar-nav .nav-section-title {
    color: var(--text-muted) !important;
    pointer-events: auto !important;
  }
  html body #sidebar.collapsed.is-peek .sidebar-nav .nav-section-title .nav-fold-chev { opacity: .7 !important; }
  /* Width switches in one step; the motion is a compositor-only reveal: the
     panel slides in from behind the rail while its contents slide the other
     way by the same amount, so they stay put and the moving edge uncovers
     them. Transforms only: no layout, no repaint per frame. */
  html body #sidebar.collapsed.is-peek { transition: none !important; }
  html body #sidebar.collapsed.is-peek:is(.sb-peek-anim, .is-peek-leaving) { overflow: hidden !important; will-change: translate; }
  html body #sidebar.collapsed.is-peek:is(.sb-peek-anim, .is-peek-leaving) > * { will-change: translate; }
  html body #sidebar.collapsed.is-peek.sb-peek-anim:not(.is-peek-leaving) { animation: sb-peek-in var(--arc-dur-smooth) var(--arc-smooth) backwards; }
  html body #sidebar.collapsed.is-peek.sb-peek-anim:not(.is-peek-leaving) > * { animation: sb-peek-in-counter var(--arc-dur-smooth) var(--arc-smooth) backwards; }
  html body #sidebar.collapsed.is-peek.is-peek-leaving { animation: sb-peek-out 200ms var(--arc-ease-exit) forwards; }
  html body #sidebar.collapsed.is-peek.is-peek-leaving > * { animation: sb-peek-out-counter 200ms var(--arc-ease-exit) forwards; }
  /* Solid panel and footer: no backdrop blur to resample every frame. */
  html body #sidebar.collapsed.is-peek > .sidebar-frost {
    background: color-mix(in srgb, var(--bg-elevated) 96%, var(--bg-base)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html body #sidebar.collapsed.is-peek .sidebar-footer {
    background: color-mix(in srgb, var(--bg-elevated) 96%, var(--bg-base)) !important;
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
/* `translate`, not `transform`: shells.css pins the sidebar's transform to
   none with !important. The panel's edge travels left to right while its
   contents slide in 24px the same way (the counter-move is 24px short). */
@keyframes sb-peek-in          { from { translate: calc(var(--sb-rail, 64px) - 100%) 0; } to { translate: 0 0; } }
@keyframes sb-peek-in-counter  { from { translate: calc(var(--sidebar-width, 260px) - var(--sb-rail, 64px) - 24px) 0; } to { translate: 0 0; } }
@keyframes sb-peek-out         { from { translate: 0 0; } to { translate: calc(var(--sb-rail, 64px) - 100%) 0; } }
@keyframes sb-peek-out-counter { from { translate: 0 0; } to { translate: calc(var(--sidebar-width, 260px) - var(--sb-rail, 64px) - 24px) 0; } }
@media (prefers-reduced-motion: reduce) {
  html body #sidebar.collapsed.is-peek, html body #sidebar.collapsed.is-peek > * { animation: none !important; }
  html body #sidebar.collapsed :is(.sb-pref-bar, .sidebar-search #sb-ticker-search, .nav-item .label, .nav-item .badge, .nav-item .expand-icon, .nav-section-title) { transition: none !important; }
}

/* ---- Pinning open and closed (2026-10-29) --------------------------------
   The same compositor reveal as the peek. Opening: the width is set at once,
   the panel slides out from behind the rail and its contents fade in over
   the new layout. Closing: the panel keeps its width while it slides away
   over the page (the page has already moved), then the rail fades in. */
@media (min-width: 1025px) {
  html body #sidebar:is(.sb-open-anim, .sb-close-anim) {
    transition: none !important;
    overflow: hidden !important;
    will-change: translate;
  }
  html body #sidebar:is(.sb-open-anim, .sb-close-anim) > * { will-change: translate, opacity; }
  html body #sidebar.sb-open-anim { animation: sb-peek-in var(--arc-dur-smooth) var(--arc-smooth) backwards; }
  html body #sidebar.sb-open-anim > * { animation: sb-open-counter var(--arc-dur-smooth) var(--arc-smooth) backwards; }
  html body #sidebar.sb-close-anim { width: var(--sidebar-width, 260px) !important; animation: sb-peek-out 220ms var(--arc-ease-exit) forwards; }
  html body #sidebar.sb-close-anim > * { animation: sb-close-counter 220ms var(--arc-ease-exit) forwards; }
  html body #sidebar.sb-rail-in > * { animation: sb-rail-in 180ms var(--arc-ease) backwards; }
}
@keyframes sb-open-counter {
  from { translate: calc(var(--sidebar-width, 260px) - var(--sb-rail, 64px) - 24px) 0; opacity: 0; }
  45%  { opacity: 1; }
  to   { translate: 0 0; opacity: 1; }
}
@keyframes sb-close-counter {
  from { translate: 0 0; opacity: 1; }
  to   { translate: calc(var(--sidebar-width, 260px) - var(--sb-rail, 64px) - 24px) 0; opacity: 0; }
}
@keyframes sb-rail-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html body #sidebar:is(.sb-open-anim, .sb-close-anim, .sb-rail-in),
  html body #sidebar:is(.sb-open-anim, .sb-close-anim, .sb-rail-in) > * { animation: none !important; }
}
/* The page moves in one step when the sidebar pins open or closed (its 300ms
   margin transition re-laid out the whole page every frame and trailed the
   panel); the sidebar's own reveal carries the motion. */
@media (min-width: 1025px) {
  html body .sidebar ~ .main-content { transition: none !important; }
}

/* ---- Company jump: a silver light running round the field -------------
   A conic comet turns under a ring mask (the field's 1px border). It turns
   with `rotate`, on the compositor: no repaint, no style work per frame.
   Ink-relative, so it is silver on dark and graphite on light. Typing in
   the field fades it; reduced motion leaves the plain border. */
html body .sidebar .sb-chase-field { position: relative; display: block; }
html body .sidebar .sb-chase {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: 8px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
  opacity: 1;
  transition: opacity 240ms var(--sb-ease, ease);
}
html body .sidebar .sb-chase::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(from 0deg,
    transparent 0 60%,
    color-mix(in srgb, var(--text-primary) 5%, transparent) 74%,
    color-mix(in srgb, var(--text-primary) 16%, transparent) 89%,
    color-mix(in srgb, color-mix(in srgb, var(--text-primary) 70%, silver) 40%, transparent) 97.5%,
    transparent 99.6%);
  animation: sb-chase-run 7s linear infinite;
  will-change: rotate;
}
html[data-theme="light"] body .sidebar .sb-chase::before {
  background: conic-gradient(from 0deg,
    transparent 0 60%,
    color-mix(in srgb, var(--text-primary) 4%, transparent) 74%,
    color-mix(in srgb, var(--text-primary) 12%, transparent) 89%,
    color-mix(in srgb, color-mix(in srgb, var(--text-primary) 60%, slategray) 30%, transparent) 97.5%,
    transparent 99.6%);
}
@keyframes sb-chase-run { to { rotate: 360deg; } }
html body .sidebar .sb-chase-field:focus-within .sb-chase { opacity: 0; }
html body .sidebar .sb-chase-field:focus-within .sb-chase::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  html body .sidebar .sb-chase { display: none; }
}