/* The shared left column (spec 2026-09-17). Consumes tokens.css; declares no
 * tokens of its own. Linked from _shell.html's persistent head for the same
 * reason rail.css is: a <link> inside the swap region does not travel.
 *
 * It rides rail.css's `.pagegrid`, narrowed: the rail's 260px is sized for a
 * card of tickers, and a menu of four words does not need it — every pixel
 * here comes out of the strategy table beside it. */
.pagegrid.has-sidenav {
  grid-template-columns: 226px minmax(0, 1fr);
  gap: var(--sp-6);
}

.sidenav {
  position: sticky;
  top: calc(var(--topbarh, 56px) + var(--bandh, 0px) + var(--sp-4));
  max-height: calc(100vh - var(--topbarh, 56px) - var(--bandh, 0px) - var(--sp-6));
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sn-links { display: flex; flex-direction: column; gap: 2px; flex: none; }
.sn-lab {
  font: var(--w-bold) var(--fs-0)/1 var(--body);
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  padding: 0 var(--sp-3) var(--sp-2);
}
.sn-link {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  /* The top bar's own tab step, so the two menu levels read as one system. */
  font: var(--w-mid) var(--fs-1)/1.2 var(--body);
  color: var(--dim); text-decoration: none;
}
.sn-link:hover { background: var(--soft); color: var(--ink); }
.sn-link.on { background: var(--duck-bg); color: var(--duck-deep); }
.sn-link:focus-visible { outline: 2px solid var(--duck); outline-offset: 1px; }
.sn-ic {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.sn-badge {
  margin-left: auto;
  font: var(--w-bold) var(--fs-0)/1 var(--body);
  color: var(--duck-deep); background: var(--paper);
  border: 1px solid var(--duck-bg); border-radius: var(--r-pill);
  padding: 3px 7px;
}
/* `display` on the rule above would beat the UA's [hidden]; say it outright. */
.sn-badge[hidden] { display: none; }

/* The slot scrolls, the links never do: a member with thirteen accounts
   must not have to scroll to reach "Find a strategy". */
.sn-slot { margin-top: var(--sp-5); min-height: 0; overflow-y: auto; flex: 1 1 auto; }

/* Below the seam rail.css already uses, the column becomes a strip: sections
   as one swipeable row under the top bar. The slot is withdrawn — its owner
   supplies a compact control of its own there (/portfolio: the account pill). */
@media (max-width: 1023px) {
  .pagegrid.has-sidenav { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .sidenav {
    top: var(--topbarh, 56px);
    max-height: none;
    z-index: 20;
    background: var(--paper);
    margin: 0 calc(-1 * var(--sp-4));
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--hair);
  }
  .sn-lab { display: none; }
  .sn-links {
    flex-direction: row; gap: var(--sp-1);
    overflow-x: auto; scrollbar-width: none;
  }
  .sn-links::-webkit-scrollbar { display: none; }
  .sn-link { flex: none; border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-3); }
  .sn-ic { display: none; }
  .sn-slot { display: none; }
}