/* Side navigation, expanded (#3446, Figma 18:4839 "App Anatomy"): the header,
 * the ORGANIZATIONS block with Manage Org, and the WORKSPACE items. Expanded
 * Admin 18:4840, Member 18:5011, Manage Org closed 18:5157, selector open
 * 18:5590. The sidebar is dark and identical in both page themes.
 *
 * The collapsed rail and its collapse/expand animation (#3450) close the sheet.
 * The footer (#3447: referral card, Support, profile row) follows the items,
 * then the profile popover (#3449). The org dropdown and the org loader's
 * place (#3448) have their own section.
 */

/* ---- Sidebar tokens (Figma 18:4840; theme-independent). The one place this
   sheet names a colour (tests/test_app_shell.py) ---- */
:root {
  --side-bg: var(--sidebar-bg);                       /* #0f1a17 */
  --side-fg: #ffffff;                                 /* active and hovered labels */
  --side-fg-nav: #d1d5db;                             /* item labels and icons */
  --side-fg-muted: #9ca3af;                           /* section labels, selector chevron */
  --side-hover: rgba(255, 255, 255, 0.05);            /* "+", selector, hovered item */
  --side-active: rgba(255, 255, 255, 0.1);            /* current item, open Manage Org */
  --side-border: rgba(255, 255, 255, 0.1);            /* selector, divider */
  --side-tree-line: #42454c;                          /* sidebar-next/sidebar-divider-fill-dark */
  --side-accent: var(--brand);                        /* ACTIVE WORKSPACE, open selector */
  --side-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --side-role-bg: #f3f4f6;
  /* Figma's #6b7280 is 4.39:1 on the chip at 10px; the nearest AA grey. */
  --side-role-fg: #69707e;
  /* Figma's org tile is #f59e0b with a white letter (2.2:1); the nearest
     amber that holds 4.5:1 under white. Per-org colours are not data yet. */
  --side-org-avatar: #b45309;
  /* Figma's #6b7280 (dropdown heading, account type) is 3.7:1 on --side-bg
     and 3.4:1 on a hovered row; the nearest grey that holds 4.5:1 on both. */
  --side-fg-faint: #838a98;
  --side-dropdown-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  --side-item-font: 700 13px/19.5px var(--font-sans);
  /* Footer (#3447, 18:4973). Figma's card is #10b981 under white 12px text
     (2.5:1) and 80% white body (2.1:1): the nearest green that holds 4.5:1
     under white, and its body at 90% white (4.8:1). */
  --side-referral-bg: #047857;
  --side-referral-fg-body: rgba(255, 255, 255, 0.9);
  --side-referral-button-hover: var(--side-control);  /* not in Figma (the issue's hover) */
  --side-referral-button-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  --side-dot: var(--live-dot);                        /* #3ddc97 */
  --side-dot-glow: 0 0 8px rgba(61, 220, 151, 0.5);
  --side-count-dot: #f59e0b;                          /* a count on the collapsed rail (#3873), 8:1 on --side-bg */
  /* Figma's avatar is 80% #10b981 on the sidebar under a white letter (3.6:1). */
  --side-user-avatar: #047857;
  /* Profile popover (#3449, 18:5846): Figma's white-tinted drop shadow. */
  --side-popover-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.03), 0 2px 4px -1px rgba(255, 255, 255, 0.03);
  /* Collapsed rail (#3450, 18:5327). */
  --side-rail-width: 72px;
  --side-control: #1b2523;                            /* "+" and the switcher */
  --side-promo-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.2), 0 4px 6px -4px rgba(16, 185, 129, 0.2);
}
.shell .sidebar {
  gap: 0; padding: 0 0 var(--space-4);
  background: var(--side-bg);
  box-shadow: var(--side-shadow);
  /* Lets Manage Org's list animate to its natural height (where supported). */
  interpolate-size: allow-keywords;
}
/* The footer (#3447) keeps the 8px inset the sidebar's padding gave it. */
.sidebar > #ui-side-referral, .sidebar > .nav-foot, .sidebar > #ui-side-user { margin-inline: var(--space-2); }

/* Loaded before app.css and console.css (index.html): a rule here that meets one of
   theirs at the same specificity loses, so the two above carry .shell. */

/* ---- Header (18:4842): lockup and collapse control in one row ---- */
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 20px 16px; }
.sidebar-brand { display: flex; align-items: center; min-width: 0; border-radius: var(--radius-md); color: var(--side-fg); text-decoration: none; }
.sidebar-brand svg { flex: none; }
.sidebar-brand .brand-lockup { width: 154.827px; height: 36.4px; }
.sidebar-brand .brand-mark { display: none; }
.sidebar-head .collapse-button {
  flex: none; width: 20px; height: 20px; min-height: 0; padding: 0;
  border: 0; border-radius: var(--radius-md); background: transparent; color: var(--side-fg-nav);
  transition: background-color var(--motion-fast) var(--ease-out);
}
.sidebar-head .collapse-button svg { width: 15.36px; height: 15.36px; }
.sidebar-head .collapse-button:hover { background: var(--side-hover); color: var(--side-fg); }

/* ---- Organizations block (18:4861) ---- */
.side-orgs { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0 16px; }
.side-orgs-head { display: flex; align-items: center; justify-content: space-between; height: 20px; padding: 0; }
.side-orgs-title, .sidebar .nav-label {
  font: var(--type-eyebrow); letter-spacing: var(--type-eyebrow-tracking); text-transform: uppercase; color: var(--side-fg-muted);
}
.side-orgs-head .btn-icon {
  width: 20px; height: 20px; min-height: 0; padding: 0;
  border: 0; border-radius: var(--radius-md); background: var(--side-hover); color: var(--side-fg-nav);
  transition: background-color var(--motion-fast) var(--ease-out);
}
.side-orgs-head .btn-icon:hover { background: var(--side-active); color: var(--side-fg); }
.side-orgs .menu { display: block; }

/* Org selector (18:4870), 204 x 42; open (18:5620) is 48 tall with ACTIVE WORKSPACE under the name. */
/* Figma's 12px gaps leave a 12-letter name ("mergesafe-ai") cut short beside the chip (#3873):
   8px gaps, and the chevron's 12px box overlaps the gap by its blank 4px, so about 90px is left for it. */
.side-orgs .org-switcher {
  display: flex; align-items: center; gap: var(--space-2); box-sizing: border-box;
  width: 100%; height: auto; min-height: 42px; padding: 8px;
  border: 1px solid var(--side-border); border-radius: var(--radius);
  background: var(--side-hover); color: var(--side-fg);
  font: var(--side-item-font); text-align: left;
  transition: border-color var(--motion-fast) var(--ease-out);
}
.side-orgs .org-switcher .avatar {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px;
  border-radius: var(--radius-md); background: var(--side-org-avatar); color: var(--side-fg); font: var(--type-eyebrow);
}
/* Name and the "Active" line stack; neither can push past the column or cover the other (#3732). */
.side-orgs .org-switcher-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.side-orgs .org-switcher .org-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.25px; }
.side-orgs .org-switcher-active { display: none; font: var(--type-micro); letter-spacing: 0.9px; text-transform: uppercase; color: var(--side-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Role chip (#3440's light pill on the dark sidebar), read off 18:4878. */
.side-orgs .org-role {
  flex: none; min-height: 0; padding: 1px 6px; border: 0; border-radius: var(--radius-sm);
  background: var(--side-role-bg); color: var(--side-role-fg); font: var(--type-pill); letter-spacing: 0.234px;
}
.side-orgs .org-role[hidden] { display: none; }
.side-orgs .org-chevron { flex: none; width: 12px; height: 12px; margin: 0 -4px; color: var(--side-fg-muted); opacity: 0.6; }
.side-orgs .org-switcher:hover { border-color: color-mix(in srgb, var(--side-fg) 20%, transparent); }
.side-orgs .org-switcher[aria-expanded="true"] { align-items: flex-start; min-height: 48px; border-color: color-mix(in srgb, var(--side-accent) 50%, transparent); }
.side-orgs .org-switcher[aria-expanded="true"] .org-name { font-size: 14px; line-height: 14px; letter-spacing: -0.35px; }
.side-orgs .org-switcher[aria-expanded="true"] .org-switcher-active { display: block; }
.side-orgs .org-switcher[aria-expanded="true"] .org-role { display: none; }
.side-orgs .org-switcher[aria-expanded="true"] .org-chevron { align-self: center; color: var(--side-accent); }

/* ---- Org dropdown (#3448, Figma 18:5750) and the org loader's place ---- */
/* 207 wide, 15px in from the sidebar, 8px under the selector; it overlays the nav. */
.side-orgs .menu-panel {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1); box-sizing: border-box;
  top: calc(100% + 8px); left: -1px; right: auto; z-index: 20; width: 207px; min-width: 0; padding: 15px 1px 7px;
  border: 1px solid var(--side-border); border-radius: var(--radius-md);
  background: var(--side-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: var(--side-dropdown-shadow); color: var(--side-fg);
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out), display 140ms allow-discrete;
}
.side-orgs .menu-panel[hidden] { display: none; opacity: 0; transform: translateY(-4px); transition-duration: 100ms; transition-timing-function: ease-in; }
@starting-style { .side-orgs .menu-panel:not([hidden]) { opacity: 0; transform: translateY(-4px); } }
.side-orgs .menu-panel > .menu-label {
  box-sizing: border-box; width: 173px; padding: 0 0 12px;
  font: var(--type-micro); letter-spacing: 1.8px; text-transform: uppercase; color: var(--side-fg-faint);
}
.side-orgs .org-list { display: flex; flex-direction: column; gap: var(--space-1); box-sizing: border-box; width: 100%; margin: 0; padding: 0 8px 4px; list-style: none; outline: none; }
/* A row: avatar, name and account type, then the select box (a check on the current org). */
.side-orgs .org-list li {
  position: relative; display: flex; align-items: center; gap: var(--space-3); box-sizing: border-box; height: 50px; padding: 0 11px;
  border: 1px solid transparent; border-radius: var(--radius-xl); color: var(--side-fg-muted); cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.side-orgs .org-list .avatar, .side-orgs .ms-org-loader .avatar {
  display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px;
  border-radius: var(--radius); background: var(--side-org-avatar); color: var(--side-fg); font: 700 10px/15px var(--font-sans);
}
.side-orgs .org-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.side-orgs .org-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 12px/16px var(--font-sans); }
.side-orgs .org-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 9px/13.5px var(--font-sans); color: var(--side-fg-faint); }
.side-orgs .org-type:empty, .side-orgs .org-status[hidden] { display: none; }
.side-orgs .org-status { flex: none; white-space: nowrap; }
.side-orgs .org-check {
  display: grid; place-items: center; flex: none; box-sizing: border-box; width: 20px; height: 20px;
  border: 1px solid transparent; border-radius: var(--radius-md); background: var(--side-hover);
}
.side-orgs .org-check svg { display: none; }
.side-orgs .org-list li:hover, .side-orgs .org-list:focus-visible li.active { background: var(--side-hover); color: var(--side-fg); }
.side-orgs .org-list li:hover .org-check, .side-orgs .org-list:focus-visible li.active .org-check { border-color: var(--side-border); }
.side-orgs .org-list:focus-visible li.active { outline: 2px solid var(--focus); outline-offset: -2px; }
/* The current org: the tinted card, 189 x 50, name in white and a check. */
.side-orgs .org-list li[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--brand) 20%, transparent);
  background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--side-fg);
}
.side-orgs .org-list li[aria-selected="true"] .org-type { display: none; }
.side-orgs .org-list li[aria-selected="true"] .org-check { border: 0; background: none; color: var(--side-accent); }
.side-orgs .org-list li[aria-selected="true"] .org-check svg { display: block; }
/* Admin tools (issue 794): the filter and Load more, small controls on the dark panel. */
.side-orgs .org-admin { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); box-sizing: border-box; width: 100%; padding: 0 8px 4px; }
.side-orgs .org-admin[hidden] { display: none; }
.side-orgs .org-admin input {
  flex: 1; min-width: 0; height: 28px; box-sizing: border-box; padding: 0 var(--space-2);
  border: 1px solid var(--side-border); border-radius: var(--radius-md); background: var(--side-hover);
  color: var(--side-fg); font: var(--type-body-sm);
}
.side-orgs .org-admin input::placeholder { color: var(--side-fg-faint); }
.side-orgs .org-admin .btn {
  width: auto; min-height: 0; height: 28px; padding: 0 var(--space-3); border: 1px solid var(--side-border);
  border-radius: var(--radius-md); background: transparent; color: var(--side-fg-nav); font: var(--type-label);
}
.side-orgs .org-admin .btn:hover { background: var(--side-hover); color: var(--side-fg); }
.side-orgs .org-admin-status { width: 100%; font: var(--type-body-sm); color: var(--alert-dot); }
.side-orgs .org-admin-status:empty { display: none; }
.side-orgs .org-admin :focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* The loader (feedback.ts's card): in the open dropdown it is the current org's
   card, so that option steps aside; with the dropdown closed it covers the selector. */
.side-orgs .menu-panel:has(> #org-loader) .org-list li[aria-selected="true"] { display: none; }
.side-orgs .menu > #org-loader { position: absolute; top: 0; left: 0; z-index: 21; box-shadow: var(--side-dropdown-shadow); pointer-events: none; }
.side-orgs .menu > #org-loader .ms-org-loader-retry { pointer-events: auto; }
.side-orgs .menu-panel > #org-loader { flex: none; }
.side-orgs .ms-org-loader-retry { display: inline; width: auto; padding: 0; border-radius: var(--radius-xs); background: none; color: var(--brand-mint); font: 600 9px/13.5px var(--font-sans); }
.side-orgs .ms-org-loader-retry[hidden] { display: none; }
.side-orgs .ms-org-loader-retry:hover { background: none; color: var(--side-fg); }
.side-orgs .ms-org-loader-retry:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (min-width: 861px) {
  /* Collapsed rail: the card floats right of the org tile. */
  .shell[data-collapsed] .side-orgs .menu > #org-loader { left: calc(100% + 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .side-orgs .menu-panel, .side-orgs .menu-panel[hidden], .side-orgs .org-list li { transition: none; transform: none; }
}
:root[data-motion="reduce"] :is(.side-orgs .menu-panel, .side-orgs .menu-panel[hidden], .side-orgs .org-list li) { transition: none; transform: none; }
:root[data-motion="reduce"] .side-orgs .menu-panel:not([hidden]) { transform: none; }

/* ---- Navigation items: Manage Org (18:4882), sub-items (18:4894), workspace (18:4947) ---- */
.shell .sidebar > .nav-scroll { gap: 0; margin: 0; padding: 0; }
/* No scrollbar on the dark sidebar (Figma draws none, #3873): a classic one was a light 15px strip that also took
   the room "Integrations" needs. The sections still scroll by wheel, touch and keyboard focus. */
.shell .sidebar, .shell .sidebar > .nav-scroll { scrollbar-width: none; }
.shell .sidebar::-webkit-scrollbar, .shell .sidebar > .nav-scroll::-webkit-scrollbar { display: none; }
.nav-scroll .nav { gap: 2px; padding: 0 10px; }
.nav-scroll .nav a, .nav-group > summary {
  display: flex; align-items: center; gap: var(--space-3); box-sizing: border-box; height: 35.5px; padding: 0 10px;
  border-radius: var(--radius-md); color: var(--side-fg-nav); font: var(--side-item-font); text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
/* A link only some people may follow (Users, System Admin) carries hidden: the display above must not show it. */
.sidebar .nav-scroll [hidden] { display: none; }
.nav-scroll .nav a .label, .nav-group > summary .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Icons sit in a 16px box (Figma draws 10-14px glyphs in it). */
.nav-scroll .nav svg { display: block; flex: none; box-sizing: content-box; width: 14px; height: 14px; padding: 0 1px; }
.nav-scroll .nav a:hover, .nav-group > summary:hover { background: var(--side-hover); color: var(--side-fg); }
.nav-scroll .nav a[aria-current="page"] { background: var(--side-active); color: var(--side-fg); font-weight: 700; }
.nav-scroll .nav a[aria-current="page"]::before { display: none; }
.nav-scroll .nav a:focus-visible, .nav-group > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sidebar :is(.sidebar-brand, .collapse-button, .side-orgs-head .btn-icon, .org-switcher):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* On the dark sidebar the focus ring is the mint in both themes (9.3:1 on --side-bg). */
.sidebar { --focus: var(--brand-mint); }

/* Manage Org: in the ORGANIZATIONS block (16px inset, 8px under the selector). */
.nav-scroll .nav:has(> .nav-group) { padding: 8px 16px 0; }
.nav-group > summary { cursor: pointer; list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary svg { transform: rotate(90deg); }
.nav-group[open] > summary { background: var(--side-active); color: var(--side-fg); }
.nav-group > summary { margin-bottom: 8px; }
.nav-group:not([open]) > summary { margin-bottom: 0; }

/* Sub-items (1:14544): the row is 204 wide with 54px before a 1px tree rail and 12px after it. The link starts
   at the rail, so the hover and current fill (square left, 6px right corners) take the rail in, and the current
   one runs to the column edge (#3873). */
.nav-group > a { position: relative; margin: 0 18px 0 54px; padding: 0 10px 0 13px; border-radius: 0 var(--radius-md) var(--radius-md) 0; letter-spacing: 0.076px; }
.nav-group > a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--side-tree-line); }
.nav-scroll .nav-group > a[aria-current="page"] { margin-right: 0; }
/* The rail runs on through the current item (app.css's current-item bar is not drawn here). */
.nav-scroll .nav-group > a[aria-current="page"]::before { display: block; width: 1px; height: auto; margin: 0; border-radius: 0; background: var(--side-tree-line); }
.nav-scroll .nav-group > a[aria-current="page"]:last-child::before { height: 22px; }
.nav-group > summary + a::before { top: 7.25px; }
/* A count (join requests, #1659) is not in Figma: the row lends it its 18px right inset. */
.nav-group > a:has(.nav-count) { gap: 0; margin-right: 0; padding-right: 0; }
.nav-group > a:has(.nav-count) svg { margin-right: var(--space-3); }
.nav-group > a:has(.nav-count) .label { padding-right: 2px; }
.nav-group > a .nav-count { min-width: 18px; padding: 0 5px; box-sizing: border-box; }
.nav-group > a:last-child::before { bottom: auto; height: 22px; }
/* Open and close (not in Figma): the list's height and opacity, instant under reduced motion. */
.nav-group::details-content {
  block-size: 0; opacity: 0; overflow: clip;
  transition: block-size var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out), content-visibility var(--motion-fast) allow-discrete;
}
.nav-group[open]::details-content { block-size: auto; opacity: 1; }

/* Workspace (18:4940): a divider (25px box), the label 6px in, 8px above the first item. */
.nav-workspace::before { content: ""; flex: none; height: 1px; margin: 12px 8px; background: var(--side-border); }
.sidebar .nav-label { margin: 0 0 6px; padding-left: 6px; }
.nav-scroll .nav[aria-label="System Admin"] { padding-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .sidebar-head .collapse-button, .side-orgs-head .btn-icon, .side-orgs .org-switcher, .nav-scroll .nav a, .nav-group > summary, .nav-group::details-content { transition: none; }
}
:root[data-motion="reduce"] :is(.sidebar-head .collapse-button, .side-orgs-head .btn-icon, .side-orgs .org-switcher, .nav-scroll .nav a, .nav-group > summary) { transition: none; }
:root[data-motion="reduce"] .nav-group::details-content { transition: none; }

/* ---- Footer (#3447, 18:4973): the referral card, then Support and the profile row, pinned
   under the scrolling sections. 32px above, 16px between the card and the rows. Support open
   (chat visible) is 1:17731; the profile popover (#3449) opens from the row. ---- */
.shell .sidebar > #ui-side-referral:not(:empty) { padding: 32px 0 16px; }
.shell .sidebar > .nav-foot { gap: 0; margin-top: 0; padding-top: 0; border-top: 0; }
.shell .sidebar > #ui-side-referral:empty + .nav-foot { padding-top: 32px; }

/* Promo card (18:4975), 220 wide. */
.shell .ui-referral {
  position: relative; display: flex; flex-direction: column; box-sizing: border-box; overflow: clip;
  margin: 0; padding: 16px; border: 1px solid var(--side-border); border-radius: var(--radius-2xl);
  background: var(--side-referral-bg); color: var(--side-fg);
}
/* The decorative circle (18:4976): 80px, 16px past the bottom-right corner, under the content. */
.shell .ui-referral::before {
  content: ""; position: absolute; right: -16px; bottom: -16px; width: 80px; height: 80px;
  border-radius: var(--radius-pill); background: var(--side-active);
}
.shell .ui-referral > * { position: relative; }
.shell .ui-referral h2 {
  display: flex; align-items: center; gap: var(--space-2); margin: 0; padding-bottom: 4px;
  font: 700 12px/18px var(--font-sans); letter-spacing: -0.0234px; color: var(--side-fg);
}
.shell .ui-referral h2 svg { display: block; flex: none; width: 16px; height: 16px; }
.shell .ui-referral p {
  box-sizing: border-box; min-height: 39.5px; margin: 0; padding-bottom: 11px;
  font: 700 10px/13.75px var(--font-sans); letter-spacing: 0.0098px; color: var(--side-referral-fg-body);
}
.shell .ui-referral-button {
  width: 100%; min-height: 0; padding: 8px 0; border: 0; border-radius: var(--radius-xl);
  background: var(--side-bg); color: var(--side-fg); box-shadow: var(--side-referral-button-shadow);
  font: 700 12px/18px var(--font-sans); cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out);
}
.shell .ui-referral-button:hover { background: var(--side-referral-button-hover); }
/* White on the card (5.5:1): the mint ring would be under 3:1 there. */
.shell .ui-referral-button:focus-visible { outline: 2px solid var(--side-fg); outline-offset: 2px; }

/* Support (18:4993): message icon, label, and the unread dot (support-history.ts) with its glow. */
.shell .sidebar .nav-foot button {
  display: flex; align-items: center; gap: var(--space-3); box-sizing: border-box; width: 100%; height: 35.5px;
  padding: 8px 10px; border: 0; border-radius: var(--radius-md); background: transparent;
  color: var(--side-fg-muted); font: var(--side-item-font);
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.shell .sidebar .nav-foot button svg { display: block; flex: none; box-sizing: content-box; width: 11.5px; height: 11.5px; padding: 1.93px; }
.shell .sidebar .nav-foot .nav-dot { width: 8px; height: 8px; margin-left: auto; border-radius: var(--radius-pill); background: var(--side-dot); box-shadow: var(--side-dot-glow); }
.shell .sidebar .nav-foot button:hover { background: var(--side-hover); color: var(--side-fg); }
/* Open (1:17731): the chat is showing, so the row is current, its icon filled and the dot gone. */
.shell .sidebar .nav-foot button[aria-expanded="true"] { background: var(--side-active); color: var(--side-fg); }
.shell .sidebar .nav-foot button[aria-expanded="true"] svg path { fill: currentColor; }
.shell .sidebar .nav-foot button[aria-expanded="true"] .nav-dot { display: none; }
.shell .sidebar .nav-foot button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Profile row (18:5002): avatar, name, up-down chevron; no email (it is in the popover). */
.shell .ui-side-user { display: block; padding: 0; }
.shell .ui-side-user-button {
  display: flex; align-items: center; gap: var(--space-3); box-sizing: border-box; width: 100%; height: 40px;
  padding: 10px; border: 0; border-radius: var(--radius-md); background: transparent;
  color: var(--side-fg); font: var(--side-item-font); letter-spacing: 0.127px; text-align: left; cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out);
}
.shell .ui-side-user-button .avatar {
  display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px;
  border-radius: var(--radius-sm); background: var(--side-user-avatar); color: var(--side-fg); font: 700 10px/15px var(--font-sans);
}
.shell .ui-side-user-text { flex: 1; min-width: 0; }
.shell .ui-side-user-button .ui-side-user-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell .ui-side-user-chevron { flex: none; color: var(--side-fg-muted); }
.shell .ui-side-user-chevron svg { display: block; }
/* Hover (not in Figma) and popover open (18:4839, as drawn): the hover fill, the chevron white. */
.shell .ui-side-user-button:hover, .shell .ui-side-user-button[aria-expanded="true"] { background: var(--side-hover); }
.shell .ui-side-user-button[aria-expanded="true"] .ui-side-user-chevron { color: var(--side-fg); }
.shell .ui-side-user-button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* ---- Profile popover (#3449, 18:5846): a ds/overlays popover (fixed, placed above the row by
   overlayPlace), 220 wide, dark in both themes like the sidebar. ---- */
.ui-popover.ui-side-user-menu {
  width: 220px; box-sizing: border-box; padding: 8px 8px 6px; overflow: clip auto;
  background: var(--side-bg); color: var(--side-fg); border: 1px solid var(--side-border);
  border-radius: var(--radius-md); box-shadow: var(--side-popover-shadow);
  animation-duration: 140ms;
}
/* The sticky sidebar is a stacking context: while the popover is open it rises over the page, or the
   collapsed rail's popover (wider than the rail) would sit under the page's sticky table heads. */
.shell .sidebar:has(#side-user-menu:not([hidden])) { z-index: var(--z-popover); }
/* 8px above the row (overlayPlace leaves 4). */
.ui-popover.ui-side-user-menu[data-placement="top"] { margin-top: -4px; }
/* Who is signed in (18:5847). */
.ui-side-user-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ui-side-user-head .avatar {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px;
  border-radius: var(--radius); background: var(--side-user-avatar); color: var(--side-fg); font: 700 10px/12px var(--font-sans);
}
.ui-side-user-identity { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ui-side-user-head .ui-side-user-name { overflow: hidden; color: var(--side-fg); font: 700 13px/16px var(--font-sans); text-overflow: ellipsis; white-space: nowrap; }
.ui-side-user-head .ui-side-user-email { overflow: hidden; color: var(--side-fg-muted); font: 400 10px/12px var(--font-sans); text-overflow: ellipsis; white-space: nowrap; }
/* Section divider (18:5853): 1px inside 6px 8px. */
.ui-side-user-divider { flex: none; height: 1px; margin: 6px 8px; border: 0; background: var(--side-border); }
/* Rows (18:5855): 36 tall, icon 14, SemiBold 12, an optional 9/13 sub line, a 20px trailing button. */
.ui-side-user-item {
  display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; height: 36px; flex: none;
  padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--side-fg-nav); font: 600 12px/15px var(--font-sans); text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.ui-side-user-item > svg { display: block; flex: none; width: 14px; height: 14px; }
.ui-side-user-item-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ui-side-user-item-label, .ui-side-user-item-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-side-user-item-sub { color: var(--side-fg-muted); font: 400 9px/13px var(--font-sans); }
.ui-side-user-trail {
  display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px;
  border-radius: var(--radius-md); background: var(--side-hover); color: var(--side-fg-nav);
}
.ui-side-user-trail svg { display: block; }
/* Hover and focus (not in Figma): the hover fill, the label white. */
.ui-side-user-item:hover, .ui-side-user-item:focus-visible, .ui-side-user-item[aria-expanded="true"] { background: var(--side-hover); color: var(--side-fg); }
.ui-side-user-item:focus-visible, .ui-side-user-mode:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* Mode Preferences' three modes (proposed, not in Figma: Q9's submenu), under the row, aligned to its label. */
.ui-side-user-modes { display: flex; flex-direction: column; flex: none; padding: 2px 0 4px; }
.ui-side-user-modes[hidden], .ui-side-user-admin[hidden] { display: none; }
.ui-side-user-mode {
  display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; height: 28px;
  padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--side-fg-nav); font: 600 12px/15px var(--font-sans); text-align: left; cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.ui-side-user-mode-check { display: inline-grid; place-items: center; flex: none; width: 14px; height: 14px; visibility: hidden; color: var(--side-accent); }
.ui-side-user-mode[aria-checked="true"] { color: var(--side-fg); }
.ui-side-user-mode[aria-checked="true"] .ui-side-user-mode-check { visibility: visible; }
.ui-side-user-mode:hover, .ui-side-user-mode:focus-visible { background: var(--side-hover); color: var(--side-fg); }
/* Add an organization and the System Admin pages (not in Figma; the top-bar account menu's, #3560). */
.ui-side-user-admin { display: flex; flex-direction: column; }

@media (prefers-reduced-motion: reduce) {
  .shell .ui-referral-button, .shell .sidebar .nav-foot button, .shell .ui-side-user-button, .ui-side-user-item, .ui-side-user-mode { transition: none; }
  .ui-popover.ui-side-user-menu { animation-duration: 0ms; }
}
:root[data-motion="reduce"] :is(.shell .ui-referral-button, .shell .sidebar .nav-foot button, .shell .ui-side-user-button, .ui-side-user-item, .ui-side-user-mode) { transition: none; }
:root[data-motion="reduce"] .ui-popover.ui-side-user-menu { animation-name: ui-fade-in; animation-duration: 0ms; }

/* ---- Collapsed rail (#3450, Figma 18:5327 in 18:4839; in context 15:3497): 72 wide, items centered in one
   column. Labels stay in the accessibility tree, clipped (not display:none), and name each item in a tooltip
   (shell.ts). Manage Org is one tile opening a flyout (proposed, not in Figma). ---- */
@media (min-width: 861px) {
  .shell { transition: grid-template-columns var(--motion-slow) var(--ease-standard); }
  .shell[data-collapsed], .shell[data-rail="closing"] { grid-template-columns: var(--side-rail-width) minmax(0, 1fr); }
  .shell[data-collapsed] .sidebar { align-items: center; padding: 16px 0 20px; overflow: visible; border-right: 1px solid var(--side-border); box-shadow: none; }
  .shell[data-collapsed] :is(.side-orgs-title, .org-switcher-text, .org-role, .ui-side-user-text, .ui-referral h2 span),
  .shell[data-collapsed] :is(.nav > a, .nav-group > summary, .nav-foot button) .label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .shell[data-collapsed] :is(.sidebar .nav-label, .sidebar-foot, .ui-side-user-chevron, .ui-referral p) { display: none; }

  /* Top (18:5328): the mark, 6px, then the expand control, turned 180deg. */
  .shell[data-collapsed] .sidebar-head { flex-direction: column; justify-content: flex-start; gap: 6px; padding: 0; }
  .shell[data-collapsed] .sidebar-brand { justify-content: center; }
  .shell[data-collapsed] .sidebar-brand .brand-lockup { display: none; }
  .shell[data-collapsed] .sidebar-brand .brand-mark { display: block; width: 36.4px; height: 36.4px; }
  .shell[data-collapsed] .sidebar-head .collapse-button svg { transform: rotate(180deg); }
  /* Pressed (aria-pressed) is the state, not a selection: no ds/buttons selected ring. */
  .shell[data-collapsed] .sidebar-head .collapse-button[aria-pressed="true"] { border: 0; background: transparent; box-shadow: none; color: var(--side-fg-nav); }
  .shell[data-collapsed] .sidebar-head .collapse-button[aria-pressed="true"]:hover { background: var(--side-hover); color: var(--side-fg); }

  /* Org block (18:5344), 12px under the top: the org tile, "+", then the switcher's up-down chevron, 6px apart.
     The tile and the chevron are one button (the switcher); "+" sits between them. */
  .shell[data-collapsed] .side-orgs { position: relative; align-items: center; gap: 6px; margin-top: 12px; padding: 0 0 38px; }
  .shell[data-collapsed] .side-orgs .menu { order: -1; width: 40px; }
  .shell[data-collapsed] .side-orgs-head { justify-content: center; height: auto; }
  .shell[data-collapsed] .side-orgs-head .btn-icon { width: 32px; height: 32px; background: var(--side-control); }
  .shell[data-collapsed] .side-orgs-head .btn-icon svg { width: 12px; height: 12px; }
  .shell[data-collapsed] .side-orgs .org-switcher,
  .shell[data-collapsed] .side-orgs .org-switcher[aria-expanded="true"] {
    position: relative; align-items: center; justify-content: center; gap: 0; width: 40px; height: 40px; min-height: 0; padding: 0;
    border: 0; border-radius: var(--radius-xl); background: var(--side-hover); transition: background-color var(--motion-fast) var(--ease-out);
  }
  .shell[data-collapsed] .side-orgs .org-switcher:hover, .shell[data-collapsed] .side-orgs .org-switcher[aria-expanded="true"] { background: var(--side-active); }
  .shell[data-collapsed] .side-orgs .org-switcher .org-chevron,
  .shell[data-collapsed] .side-orgs .org-switcher[aria-expanded="true"] .org-chevron {
    position: absolute; top: 84px; left: 4px; box-sizing: border-box; width: 32px; height: 32px; margin: 0; padding: 9.5px;
    border-radius: var(--radius-md); background: var(--side-control); color: var(--side-fg-muted);
  }
  /* The dropdown and the org loader (#3448) open right of the tile. */
  .shell[data-collapsed] .side-orgs .menu-panel { top: 0; left: calc(100% + 24px); }

  /* Items (18:5356): 40px tiles, radius 12, 16px apart; 24px either side of the divider. Figma's glyphs are
     16 (clusters 18x20): a Lucide glyph fills about 18/24 of its box, so the boxes are 20 (clusters 22). */
  .shell[data-collapsed] .sidebar > .nav-scroll { align-self: stretch; align-items: center; margin-top: 16px; }
  .shell[data-collapsed] .nav-scroll .nav, .shell[data-collapsed] .nav-scroll .nav:has(> .nav-group) { align-items: center; gap: 16px; padding: 0; }
  .shell[data-collapsed] .nav-scroll .nav > a, .shell[data-collapsed] .nav-group > summary {
    position: relative; justify-content: center; gap: 0; width: 40px; height: 40px; margin: 0; padding: 0; border-radius: var(--radius-xl);
  }
  .shell[data-collapsed] .nav-scroll .nav > a svg, .shell[data-collapsed] .nav-group > summary svg { width: 20px; height: 20px; padding: 0; }
  .shell[data-collapsed] .nav-scroll .nav > a[data-route="clusters"] svg { width: 22px; height: 22px; }
  .shell[data-collapsed] .nav-group:has(a[aria-current="page"]) > summary { background: var(--side-active); color: var(--side-fg); }
  /* A count on the rail is a dot on the tile's corner (Figma 15:3497 draws none; a "762" covered the icon, #3873),
   like the folded Manage Org's; the number stays in the link's name. */
.shell[data-collapsed] .nav-scroll .nav > a .nav-count {
  position: absolute; top: 6px; right: 6px; width: 6px; min-width: 0; height: 6px; margin: 0; padding: 0;
  border-radius: 50%; background: var(--side-count-dot); color: transparent; font-size: 0; line-height: 0; overflow: hidden;
}
  .shell[data-collapsed] .nav-group:not([open]):has(.nav-count) > summary .label::after { display: none; }
  .shell[data-collapsed] :is(.nav-workspace, .nav[aria-label="System Admin"])::before {
    content: ""; display: block; flex: none; width: 47px; height: 1px; margin: 24px 0 8px; background: var(--side-border);
  }
  .shell[data-collapsed] .nav-scroll .nav[aria-label="System Admin"] { padding-top: 0; }

  /* Manage Org's flyout (proposed, not in Figma): #3442's menu, dark like the profile popover, 8px right of
     the rail and level with the tile (shell.ts places it). */
  .shell[data-collapsed] .nav-group::details-content {
    position: fixed; z-index: var(--z-popover); top: var(--flyout-top); left: var(--flyout-left);
    display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; width: 200px; padding: 6px;
    border: 1px solid var(--side-border); border-radius: var(--radius-md); background: var(--side-bg); box-shadow: var(--side-dropdown-shadow);
    visibility: hidden;
    transition: block-size var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out), visibility 0s linear var(--motion-fast), content-visibility var(--motion-fast) allow-discrete;
  }
  .shell[data-collapsed] .nav-group[open]::details-content { visibility: visible; transition-delay: 0s; }
  .shell[data-collapsed] .sidebar:has(.nav-group[open]) { z-index: var(--z-popover); }
  .shell[data-collapsed] .nav-group > a {
    justify-content: flex-start; gap: 12px; width: 100%; height: 36px; margin: 0; padding: 0 12px;
    border-radius: var(--radius-sm); font: 600 12px/15px var(--font-sans); letter-spacing: 0;
  }
  .shell[data-collapsed] .nav-group > a::before { display: none; }
  .shell[data-collapsed] .nav-group > a svg { width: 14px; height: 14px; margin: 0; padding: 0; }
  .shell[data-collapsed] .nav-group > a .nav-count { margin-left: auto; }

  /* Bottom (18:5373): the promo tile, 20px, Support with its dot, 12px, the profile avatar. */
  .shell[data-collapsed] .sidebar > #ui-side-referral:not(:empty) { margin: 0; padding: 16px 0 20px; }
  .shell[data-collapsed] .ui-referral {
    align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; overflow: visible;
    border: 0; border-radius: var(--radius-xl); background: var(--side-referral-bg); box-shadow: var(--side-promo-shadow);
  }
  .shell[data-collapsed] .ui-referral::before { display: none; }
  .shell[data-collapsed] .ui-referral h2 { padding: 0; }
  .shell[data-collapsed] .ui-referral h2 svg { width: 18px; height: 18px; }
  /* The button covers the tile: its text stays its accessible name. */
  .shell[data-collapsed] .ui-referral .ui-referral-button {
    position: absolute; inset: 0; width: auto; padding: 0; border-radius: inherit;
    background: transparent; box-shadow: none; color: transparent; font-size: 0; line-height: 0;
  }
  .shell[data-collapsed] .ui-referral .ui-referral-button:hover { background: var(--side-hover); }
  .shell[data-collapsed] .sidebar > .nav-foot { align-items: center; margin: 0; }
  .shell[data-collapsed] .sidebar > #ui-side-referral:empty + .nav-foot { padding-top: 16px; }
  /* Support and the profile button keep a 32px target round the drawn 20px and 24px marks. */
  .shell[data-collapsed] .sidebar .nav-foot button { justify-content: center; gap: 0; width: 32px; height: 32px; margin: -6px 0; padding: 0; }
  .shell[data-collapsed] .sidebar .nav-foot button svg { width: 20px; height: 20px; padding: 0; }
  .shell[data-collapsed] .sidebar .nav-foot .nav-dot { position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; margin: 0; }
  .shell[data-collapsed] .sidebar > #ui-side-user { margin: 12px 0 12px; }
  .shell[data-collapsed] .ui-side-user-button { justify-content: center; gap: 0; width: 32px; height: 32px; margin: -4px 0; padding: 0; }
  .shell[data-collapsed] .ui-side-user-button .avatar { width: 24px; height: 24px; border-radius: var(--radius-md); font: 700 14.4px/21.6px var(--font-sans); }

  /* Collapse and expand (not in Figma; shell.ts sets data-rail for one --motion-slow): the expanded layout,
     clipped at its full width so nothing wraps, while the column moves. Labels fade out in the first
     --motion-instant of a collapse, and in over the last half of an expand. */
  .shell[data-rail] .sidebar { overflow: hidden; }
  .shell[data-rail] .sidebar > * { width: var(--sidebar-width); }
  .shell[data-rail] .sidebar > :is(#ui-side-referral, .nav-foot, #ui-side-user) { width: calc(var(--sidebar-width) - 2 * var(--space-2)); }
  /* The lockup crossfades to the mark: the mark (the lockup's first 36.4px, same paths) sits over it. */
  .shell[data-rail] .sidebar-brand { position: relative; }
  .shell[data-rail] .sidebar-brand .brand-mark { display: block; position: absolute; top: 0; left: 0; width: 36.4px; height: 36.4px; }
  .shell[data-rail="closing"] :is(.brand-lockup, .sidebar .label, .side-orgs-title, .org-switcher-text, .org-role, .org-chevron, .sidebar .nav-label, .nav-group > a, .ui-referral, .ui-side-user-text, .ui-side-user-chevron, .sidebar-head .collapse-button) {
    animation: side-label-out var(--motion-instant) var(--ease-standard) both;
  }
  .shell[data-rail="opening"] :is(.brand-lockup, .sidebar .label, .side-orgs-title, .org-switcher-text, .org-role, .org-chevron, .sidebar .nav-label, .nav-group > a, .ui-referral, .ui-side-user-text, .ui-side-user-chevron, .sidebar-head .collapse-button) {
    animation: side-label-in calc(var(--motion-slow) / 2) var(--ease-standard) calc(var(--motion-slow) / 2) both;
  }
}
@keyframes side-label-out { to { opacity: 0; } }
@keyframes side-label-in { from { opacity: 0; } }

/* The rail's tooltip: ds/overlays' simple tooltip (#3442), fixed beside its item with the arrow pointing left. */
.ui-tooltip.nav-tip {
  position: fixed; bottom: auto; white-space: nowrap; pointer-events: none;
  opacity: 1; visibility: visible; transform: translateY(-50%); transition: none;
}
.ui-tooltip.nav-tip[hidden] { display: none; }
.ui-tooltip.nav-tip::before { display: none; }
.ui-tooltip.nav-tip::after { top: 50%; left: auto; right: 100%; margin: -6px 0 0; border-top-color: transparent; border-right-color: var(--tooltip-bg); }

@media (prefers-reduced-motion: reduce) {
  .shell, .shell[data-collapsed] .side-orgs .org-switcher, .shell[data-collapsed] .nav-group::details-content { transition: none; }
}
:root[data-motion="reduce"] :is(.shell, .shell[data-collapsed] .side-orgs .org-switcher, .shell[data-collapsed] .nav-group::details-content) { transition: none; }