/* ================================================================
   SIDEBAR — Starline AI replicated menu (collapsed + expanded)
   Copied verbatim from the user-supplied Replicated Menu.html.
   The only alteration from the preview: the corner radius has been
   removed (border-radius: 14px → 0) so the sidebar sits flush in
   the app layout.
   ================================================================ */

/* ---------- Shared sidebar styles ---------- */
.sidebar {
  background: #ffffff;
  border-radius: 0; /* (was 14px in preview) — user requested no rounded corners */
  border: 1px solid #ececec;
  border-top: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1300;
  overflow: hidden;
  font-family: var(--font-sidebar);
  font-size: 14px;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: width 200ms ease-out;
}

/* Icon base sizing (SVG strokes) */
.sidebar svg { display: block; }
.sidebar .ic { width: 18px; height: 18px; stroke: #3d3d3d; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sidebar .ic-sm { width: 16px; height: 16px; stroke-width: 1.6; }
/* Every menu icon is drawn on the same grid; none is enlarged. */
/* Filled-glyph icons (e.g. the multi-sheet "Sources" paper icon) — fill
   uses the surrounding text colour so the icon harmonises with the row. */
.sidebar .ic-fill, .ic-fill { fill: #4a4a4a; stroke: none; }

/* =========================================================
   COLLAPSED SIDEBAR (the thin, icon-only version)
   ========================================================= */
.sidebar.collapsed {
  width: 52px;
  height: 100%;
  padding: 10px 0;
  align-items: center;
  justify-content: space-between;
}
.sidebar.collapsed .rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.sidebar.collapsed .rail::-webkit-scrollbar { display: none; }

/* Bottom fade for the collapsed rail — anchored above the bottom divider
   instead of living inside the scroll content. It only appears when the
   rail is overflowing AND not scrolled to the bottom. */
.sidebar.collapsed .rail-fade {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 14px;
  flex: 0 0 14px;
  margin: -14px 0 0 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 60%, #ffffff 100%);
  opacity: 0;
  transition: opacity 0.12s ease-out;
}
.sidebar.collapsed .rail-fade.is-show { opacity: 1; }
.sidebar.collapsed .icon-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 7px;
  cursor: pointer;
  color: #4a4a4a;
  flex-shrink: 0;
}
.sidebar.collapsed .icon-btn:hover { background: #f3f3f3; }
.sidebar.collapsed .icon-btn.active { background: #f1f1f1; }
.sidebar.collapsed .icon-btn.cmd {
  border: 1px solid #ececec;
  background: #fafafa;
  color: #8a8a8a;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}
.sidebar.collapsed .collapsed-logo {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.05);
  box-sizing: border-box;
  padding: 5px;
  flex-shrink: 0;
}
.sidebar.collapsed .collapsed-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.sidebar.collapsed .divider {
  width: 100%;
  height: 1px;
  background: #ececec;
  margin: 8px 0;
  flex-shrink: 0;
}
/* End-to-end grey rule above the bottom settings group, parity with the
   expanded menu's footer divider. */
.sidebar.collapsed .bottom-divider {
  width: 100%;
  height: 1px;
  background: #ececec;
  flex-shrink: 0;
  margin-bottom: 6px;
}

/* Colored project icon squares in collapsed rail */
.sidebar.collapsed .proj-icon {
  width: 20px; height: 20px;
  border-radius: 5px;
  display: grid; place-items: center;
  position: relative;
}
.sidebar.collapsed .proj-wrap {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 7px;
  cursor: pointer;
  flex-shrink: 0;
}
.sidebar.collapsed .proj-wrap:hover { background: #f3f3f3; }

/* Bottom cluster */
.sidebar.collapsed .bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-bottom: 4px;
  flex-shrink: 0;
}
.sidebar.collapsed .gradient-logo {
  width: 20px; height: 20px;
  border-radius: 5px;
  background: linear-gradient(135deg, #fff 0%, #ffb4b4 55%, #ff7a7a 100%);
  margin-top: 6px;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.04);
}
.sidebar.collapsed .profile-rail-block {
  position: relative;
  margin-top: 2px;
}
.sidebar.collapsed.profile-menu-open { overflow: visible; }
.sidebar.collapsed .profile-menu-popover { bottom: 0; left: calc(100% + 8px); }
.sidebar.collapsed .profile-rail-avatar {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

/* =========================================================
   EXPANDED SIDEBAR (full menu)
   ========================================================= */
.sidebar.expanded {
  width: 238px;
  height: 100%;
  overflow: visible;
}

/* Outer shell: workspace + content */
.sidebar.expanded .shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* Top row: workspace selector + collapse button.
   Padding chosen so .ws-left lines up with .nav-row containers below
   (both starting at 8px from sidebar edge), and the logo lines up with
   the body icons (both at 16px from sidebar edge). */
/* Workspace header — the CONNECT row + divider + Atlas row live inside .ws-block,
   which becomes the sub-menu CONTAINER when open (white, 1px ring + soft shadow —
   same language as the three-dots / "Open in" menus). The block grows right over
   the absolutely-positioned collapse button, and the name slides to the right. */
.sidebar.expanded .ws-header {
  position: relative;
  padding: 6px 8px;
}
.sidebar.expanded .ws-block {
  position: relative;
  margin-right: 36px;          /* room for the collapse button while closed */
  padding: 5px 5px 5px 2px;    /* left 2px so the logos sit at 17px — exactly on
                                  the page-icon column below (source of truth) */
  transition: margin-right 0.2s ease;
}
/* No bordered/floating container — the site never outlines anything. Open just
   extends the block right; the rows are separated by the .ws-divider alone. */
.sidebar.expanded .ws-block.is-open {
  margin-right: 0;             /* extend right over the (now hidden) collapse btn */
}

.sidebar.expanded .ws-left {
  display: flex;
  align-items: center;
  height: 31px;
  padding: 0 6px;
  border-radius: 7px;
  cursor: pointer;
  background: transparent;
  transition: background 0.14s ease;
}
/* Colours lifted straight from the submenu (.no-icon-menu-row):
   active/selected = #f1f1f1 ("Open in"), hover = #f7f7f7 ("New window"). */
.sidebar.expanded .ws-left:hover { background: #f7f7f7; }
.sidebar.expanded .ws-block.is-open .ws-left,
.sidebar.expanded .ws-block.is-open .ws-left:hover { background: #f1f1f1; }

/* Spacer that grows on open so the name + caret slide from beside the logo
   (closed) to the far right (open). max-width animates; flex-grow does not. */
.sidebar.expanded .ws-grow {
  flex: 1 1 0;
  max-width: 0;
  transition: max-width 0.22s ease;
}
.sidebar.expanded .ws-block.is-open .ws-grow { max-width: 260px; }

.sidebar.expanded .ws-end {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-left: 8px;            /* logo→name gap when closed */
}
.sidebar.expanded .ws-logo,
.sidebar.expanded .ws-switcher-logo {
  width: 25.5px; height: 25.5px;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.05);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}
.sidebar.expanded .ws-logo svg,
.sidebar.expanded .ws-logo img,
.sidebar.expanded .ws-switcher-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.sidebar.expanded .ws-name,
.sidebar.expanded .ws-switcher-label {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Chevron == the site's section/nav chevron: same colour token + transition and
   the -90deg(closed)/0deg(open) rotation, keyed off the block's open state. */
.sidebar.expanded .ws-caret {
  color: var(--chevron-default);
  display: flex;
  transform: rotate(-90deg);
  transition: transform 0.2s, color 0.15s;
}
.sidebar.expanded .ws-left:hover .ws-caret,
.sidebar.expanded .ws-block.is-open .ws-caret { color: var(--text-primary); }
.sidebar.expanded .ws-block.is-open .ws-caret { transform: rotate(0deg); }

/* Atlas option — inline collapsible (grid-rows 1fr/0fr trick) so opening pushes
   content down; the divider above it matches .no-icon-menu-divider. */
.sidebar.expanded .ws-switcher {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease-out;
}
.sidebar.expanded .ws-block.is-open .ws-switcher { grid-template-rows: 1fr; }
.sidebar.expanded .ws-switcher-inner {
  overflow: hidden;
  min-height: 0;
}
.sidebar.expanded .ws-divider {
  height: 1px;
  background: #e5e5e5;
  margin: 5px 6px;
}
.sidebar.expanded .ws-switcher-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 31px;
  padding: 0 6px;
  border: none;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.14s ease;
}
.sidebar.expanded .ws-switcher-item:hover { background: #f7f7f7; }
.sidebar.expanded .ws-switcher-caret {
  color: var(--chevron-default);
  display: flex;
  transform: rotate(-90deg);
}

/* Collapse button — absolutely positioned top-right so the Atlas option can
   expand below the CONNECT row without shifting it; fades out on open. */
.sidebar.expanded .collapse-btn {
  position: absolute;
  top: 12px;
  right: 8px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 6px;
  cursor: pointer;
  color: #7a7a7a;
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  transition: opacity 0.15s ease;
}
.sidebar.expanded .collapse-btn:hover { background: #f3f3f3; }
.sidebar.expanded .ws-block.is-open ~ .collapse-btn {
  opacity: 0;
  pointer-events: none;
}

/* Segment separator — when the switcher opens, a FULL-WIDTH 1px line appears
   below it, isolating CONNECT/Atlas as its own segment exactly like the site's
   .sep dividers. It lives OUTSIDE the switcher's overflow:hidden inner (which
   would clip a full-width line), as its own grid-rows collapsible synced to the
   switcher. The block's bottom padding drops to 0 on open so the only spacing
   around the line is 8px above / 8px below — matching .sep's `margin: 8px`. */
.sidebar.expanded .ws-segment-sep {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease-out;
}
.sidebar.expanded .ws-segment-sep.is-open { grid-template-rows: 1fr; }
.sidebar.expanded .ws-segment-sep-inner {
  overflow: hidden;
  min-height: 0;
}
.sidebar.expanded .ws-segment-line {
  height: 1px;
  background: #ededed;
  /* 8px visual gap each side: top 2 + header pad-bottom 6 = 8 above;
     bottom 6 + search margin-top 2 = 8 below. */
  margin: 2px 0 6px;
}
.sidebar.expanded .ws-block.is-open { padding-bottom: 0; }

/* Command / search */
.sidebar.expanded .search {
  margin: 2px 10px 10px 10px;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 8px;
  background: #fafafa;
  border: 1px solid #ededed;
  border-radius: 7px;
  color: #a9a9a9;
  font-size: 13px;
  cursor: text;
}
.sidebar.expanded .search .cmd-sym {
  font-size: 13px;
  font-weight: 500;
  margin-left: -2px;
}
.sidebar.expanded .search .search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  /* Tight line-height keeps the caret close to the cap-height of the
     placeholder "S". The input height is a few pixels taller than the
     font-size so descenders on letters like g/y/p render without clipping.
     The input is vertically centered in the .search flex row, so the extra
     height grows the caret symmetrically on both ends. */
  line-height: 1;
  height: 17px;
  color: #1a1a1a;
  caret-color: #1a1a1a;
}
.sidebar.expanded .search .search-input::placeholder { color: #a9a9a9; }
.sidebar.expanded .search .slash {
  color: #b8b8b8;
  font-size: 13px;
}

/* Scrollable body. The bottom fade is a sibling below this element so it
   stays anchored to the footer divider instead of riding with rows. */
.sidebar.expanded .body {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 8px 8px;
  min-height: 0;
}
.sidebar.expanded .body::-webkit-scrollbar { width: 0; }

/* Top and bottom fade-outs — short and subtle. They are shell-level flex
   items with negative margins, so they overlay only the body boundaries.
   Hidden by default; .is-show is toggled only when the scroll region is
   overflowing. */
.sidebar.expanded .body-top-fade {
  position: relative;
  z-index: 2;
  height: 9px;
  flex: 0 0 9px;
  margin: 0 0 -9px 0;
  pointer-events: none;
  background: linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 100%);
  opacity: 0;
  transition: opacity 0.12s ease-out;
}
.sidebar.expanded .body-top-fade.is-show { opacity: 1; }

/* Bottom fade-out — short and subtle. It is a shell-level flex item with a
   negative top margin, so it overlays only the body/footer boundary. Hidden
   by default; .is-show is toggled only when the body is overflowing AND not
   scrolled to the bottom. */
.sidebar.expanded .body-fade {
  position: relative;
  z-index: 2;
  height: 12px;
  flex: 0 0 12px;
  margin: -12px 0 0 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 60%, #ffffff 100%);
  opacity: 0;
  transition: opacity 0.12s ease-out;
}
.sidebar.expanded .body-fade.is-show { opacity: 1; }

/* Primary nav rows */
.sidebar.expanded .nav-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 8px;
  border-radius: 6px;
  cursor: pointer;
  color: #2a2a2a;
  font-size: 13.5px;
  font-weight: 420;
  position: relative;
  overflow: hidden;
  background-clip: padding-box;
}
.sidebar.expanded .nav-row:hover { background: #f7f7f7; }
.sidebar.expanded .nav-row .label {
  flex: 1;
  letter-spacing: -0.005em;
}
.sidebar.expanded .nav-row .badge {
  font-size: 12px;
  color: #9a9a9a;
  text-decoration: underline;
  text-decoration-color: #d8d8d8;
  text-underline-offset: 2px;
}
.sidebar.expanded .nav-row .plus {
  color: #b0b0b0;
  font-size: 16px;
  line-height: 1;
  width: 14px;
  text-align: center;
}
.sidebar.expanded .nav-row.active {
  background: #f1f1f1;
}
.sidebar.expanded .nav-row.repository-row.active.has-active-submenu {
  background: #f1f1f1;
}
.sidebar.expanded .nav-row.repository-row.active.has-active-submenu:hover {
  background: #eeeeee;
}

/* Nav-row chevron (e.g. Projects, Views) — same page rules as other chevrons. */
.sidebar.expanded .nav-row .chev {
  color: var(--chevron-default);
  display: flex;
  transition: transform 0.2s, color 0.15s;
}
.sidebar.expanded .nav-row:hover .chev { color: var(--text-primary); }
.sidebar.expanded .nav-row.is-collapsed .chev { transform: rotate(-90deg); }

/* Section dividers — extended end-to-end (negative margins escape body padding). */
.sidebar.expanded .sep {
  height: 1px;
  background: #ededed;
  margin: 8px -8px;
}

/* Section headers (WORKSPACE / COLLABORATORS) — clickable to collapse/expand. */
.sidebar.expanded .section-head {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 8px;
  gap: 4px;
  color: #8f8f8f;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.035em;
  cursor: pointer;
  user-select: none;
}
.sidebar.expanded .section-head .chev {
  color: var(--chevron-default);
  display: flex;
  transition: transform 0.2s, color 0.15s;
}
.sidebar.expanded .section-head:hover .chev { color: var(--text-primary); }
.sidebar.expanded .section-head.is-collapsed .chev { transform: rotate(-90deg); }
.sidebar.expanded .section-head .title {
  flex: 1;
  font-family: var(--font-panel-header);
}
.sidebar.expanded .section-head.is-collapsed .title {
  color: #4a4a4a;
}
.sidebar.expanded .section-head .actions {
  display: flex;
  align-items: center;
  gap: 2px;
  color: #b0b0b0;
  position: relative;
  z-index: 30;
}
.sidebar.expanded .section-head .dots {
  /* Box extends 8px past the section-head's right padding via the negative
     right margin, so its right edge lines up with the proj-row hover edge.
     Character is centered in the box so padding around it is symmetric. */
  width: 26px;
  height: 18px;
  margin-right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}
.sidebar.expanded .section-head .dots:hover { background: var(--workspace-dots-hover); color: #555; }
.sidebar.expanded .section-head .workspace-actions {
  overflow: visible;
}
.sidebar.expanded .sidebar-workspace-menu-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: -8px;
  width: 203px;
  height: 158px;
  z-index: 2200;
  overflow: visible;
}
.sidebar.expanded .sidebar-workspace-menu-popover .no-icon-menu-preview {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(var(--no-icon-menu-shift-x, 0px)) scale(0.5);
  transform-origin: top right;
  pointer-events: auto;
}
.sidebar.expanded .sidebar-workspace-menu-popover:has(.no-icon-menu-preview.is-wide) {
  left: auto;
  right: -8px;
  width: 280px;
}
.sidebar.expanded .sidebar-workspace-menu-popover:has(.no-icon-menu-preview.is-wide) .no-icon-menu-preview {
  left: auto;
  right: 0;
  transform-origin: top right;
}

/* Project rows with colored squares */
.sidebar.expanded .proj-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 420;
  color: #2a2a2a;
}
.sidebar.expanded .proj-row:hover { background: #f7f7f7; }
.sidebar.expanded .proj-row .sq {
  width: 16px; height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.1s;
}
.sidebar.expanded .proj-row .sq:hover { transform: scale(1.15); }
.sidebar.expanded .proj-row .name {
  flex: 1;
  letter-spacing: -0.005em;
}
.sidebar.expanded .proj-row .chev {
  color: var(--chevron-default);
  display: flex;
  transition: transform 0.2s, color 0.15s;
}
.sidebar.expanded .proj-row:hover .chev { color: var(--text-primary); }
.sidebar.expanded .proj-row.is-collapsed .chev { transform: rotate(-90deg); }

/* Month sub-rows under a project */
.sidebar.expanded .month-row {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 8px 0 34px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #5a5a5a;
}
.sidebar.expanded .month-row:hover { background: #f7f7f7; }
.sidebar.expanded .month-row.active {
  background: #f7f7f7;
  color: #212121;
}
.sidebar.expanded .month-row .mname { flex: 1; }
.sidebar.expanded .month-row .mcount {
  font-size: 12px;
  color: #9a9a9a;
  text-decoration: underline;
  text-decoration-color: #d8d8d8;
  text-underline-offset: 2px;
}

/* Colored icon palette */
.sidebar .sq-orange { background: #f29430; }
.sidebar .sq-pink   { background: #d94088; }
.sidebar .sq-green  { background: #4cb050; }
.sidebar .sq-blue   { background: #3b82c4; }
.sidebar .sq-dblue  { background: #2b6fb8; }

/* Bottom utility rows in expanded — each row has icon + label, the profile
   row replaces the old account icon. The end-to-end grey divider above
   visually separates the collaborators body from the settings footer. */
.sidebar.expanded .footer-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 6px 8px 12px 8px;
  border-top: 1px solid #ededed;
}
.sidebar.expanded .footer-row .footer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 8px;
  border-radius: 6px;
  cursor: pointer;
  color: #2a2a2a;
  font-size: 13.5px;
  font-weight: 420;
  letter-spacing: -0.005em;
}
.sidebar.expanded .footer-row .footer-item .ic { stroke: #4a4a4a; }
.sidebar.expanded .footer-row .footer-item:hover { background: #f3f3f3; }
.sidebar.expanded .footer-row .footer-item .label {
  flex: 1;
  letter-spacing: -0.005em;
}

/* Both sidebar modes use the same account avatar and initials fallback. */
.sidebar .profile-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sidebar .profile-trigger:focus-visible {
  outline: 2px solid #8a8a8a;
  outline-offset: 2px;
}
.sidebar .profile-avatar {
  background: transparent;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sidebar .profile-avatar img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sidebar .profile-avatar-initials { display: none; font-size: 9px; font-weight: 600; line-height: 1; }
.sidebar .profile-avatar.is-fallback { background: #ececec; color: #4a4a4a; }
.sidebar .profile-avatar.is-fallback .profile-avatar-initials { display: block; }
.sidebar .profile-avatar.is-fallback img { display: none; }
.sidebar.expanded .footer-row .profile-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 0;
  background: #f7f7f7;
}
.profile-menu-popover { position: absolute; top: auto; bottom: calc(100% + 8px); left: 0; right: auto; z-index: 200; min-width: 180px; }
/* Button rows take the same width as the panel's other rows (system.css). */
.sidebar.expanded .footer-row .profile-bar:hover { background: #f1f1f1; }
.sidebar.expanded .profile-trigger { padding: 0 8px; }
.sidebar.expanded .footer-row .profile-bar .avatar {
  width: 16px; height: 16px;
  border-radius: 4px;
}
.sidebar.expanded .footer-row .profile-bar .pname {
  flex: 1;
  font-size: 13.5px;
  font-weight: 420;
  color: #2a2a2a;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar.expanded .footer-row .profile-bar .dots {
  color: #b0b0b0;
  font-size: 14px;
  line-height: 1;
}

/* ================================================================
   Collapsible wrapper — used for WORKSPACE / COLLABORATORS sections
   and for the month-rows under each project. Uses the modern
   grid-template-rows: 1fr <-> 0fr trick so the container can animate
   smoothly from its natural (auto) height to zero without needing
   a known pixel height. Rows below a collapsed section flow up
   automatically as the grid track shrinks, giving the "shift up"
   behaviour with no white gap.
   ================================================================ */
.sidebar.expanded .sl-collapsible {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.25s ease-out;
}
.sidebar.expanded .sl-collapsible.is-closed {
  grid-template-rows: 0fr;
}
.sidebar.expanded .sl-collapsible-inner {
  overflow: hidden;
  min-height: 0;
}

/* Tiny chevron helpers */
.sidebar .chev-down,
.sidebar .chev-right,
.sidebar .chev-up {
  width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- sl-proj-mark shim ----------
   The BoardController looks for .sl-proj-mark to open the column-color
   picker bar and rewrites the element's className to just 'sl-proj-mark'
   after a new color is chosen. To keep the color picker wired up without
   altering the design, the colored project squares carry .sl-proj-mark
   alongside the visual classes, and .sl-proj-mark here re-applies the
   same layout (size, radius) that the design classes define, so the
   square still renders correctly even after the className reset. */
.sidebar .sl-proj-mark {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.1s;
}
.sidebar .sl-proj-mark:hover { transform: scale(1.15); }
.sidebar.collapsed .sl-proj-mark {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

/* ================================================================
   APPEARANCE SWITCHER
   Ported from the CONNECT landing page's "Switch to" drawer
   (backdrop-filter blur(20px) saturate(180%), 240ms opacity fade).
   The panel overlays the sidebar; the "Appearance" label translates
   up from the footer position to the upper-middle of the panel as
   the blur fades in, then the Mono / Paper / Night options stagger
   into view below it.
   ================================================================ */
.appearance-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  opacity: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: opacity 240ms ease;
}
.appearance-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Panel covers the same footprint as the expanded sidebar. */
.appearance-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 248px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Content wrapper travels up as a single unit so the Theme heading
   appears to "rise" from the footer to its open position. Initial
   top approximates the footer row in the underlying sidebar; open
   state centers the menu group 10% above the scaled panel midpoint. */
.appearance-content {
  position: absolute;
  left: 8px;
  right: 8px;
  top: calc(100% - 110px);
  max-height: calc(100% - 96px);
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transform: translateY(0);
  transition:
    top 380ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 380ms cubic-bezier(0.4, 0, 0.2, 1);
}
.appearance-content::-webkit-scrollbar { display: none; }
.appearance-overlay.is-open .appearance-content {
  top: 33%;
  transform: translateY(-50%);
}

/* Section (Theme, Font) — fades up after the wrapper begins travelling. */
.ap-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms ease 200ms, transform 320ms cubic-bezier(0.4, 0, 0.2, 1) 200ms;
}
.appearance-overlay.is-open .ap-section {
  opacity: 1;
  transform: translateY(0);
}

/* Section heading — plain text, no leading icon (the active icon is
   hidden here so users aren't confused about what's selectable). */
.ap-label {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: #2a2a2a;
  letter-spacing: -0.005em;
}

.ap-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ap-option {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #2a2a2a;
  letter-spacing: -0.005em;
}
.ap-option .ic {
  stroke: #4a4a4a;
  width: 17px;
  height: 17px;
}
.ap-option:hover { background: rgba(0, 0, 0, 0.04); }
.ap-option.active { background: rgba(0, 0, 0, 0.06); }

/* Scale dial — a cropped wheel, exactly three option rows tall. */
.ap-scale-section {
  gap: 2px;
}
.scale-control {
  height: 96px;
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 6px 8px 8px 8px;
  border-radius: 6px;
  user-select: none;
  transition: background 0.12s;
}
.scale-control:hover,
.scale-control.is-static,
.scale-control.is-dragging {
  background: rgba(0, 0, 0, 0.04);
}
.scale-readout {
  width: 54px;
  display: flex;
  align-items: center;
  color: #2a2a2a;
  letter-spacing: -0.02em;
}
.scale-readout input {
  min-width: 2ch;
  max-width: 3ch;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: #2a2a2a;
  font-family: inherit;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}
.scale-readout input::-webkit-outer-spin-button,
.scale-readout input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}
.scale-readout small {
  margin-left: 1px;
  font-size: 11px;
  font-weight: 500;
  color: #8a8a8a;
  line-height: 1;
}
.scale-dial {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
  cursor: ns-resize;
  touch-action: none;
  outline: none;
}
.scale-dial:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}
.scale-dial::before,
.scale-dial::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 24px;
  z-index: 3;
  pointer-events: none;
}
.scale-dial::before {
  top: 0;
  background: linear-gradient(to bottom, #f5f5f5 0%, rgba(245, 245, 245, 0) 100%);
}
.scale-dial::after {
  bottom: 0;
  background: linear-gradient(to top, #f5f5f5 0%, rgba(245, 245, 245, 0) 100%);
}
.scale-track {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: calc(50% - 4px);
  width: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #e1e1e1;
  pointer-events: none;
}
.scale-ruler {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0;
  transform: translateY(var(--scale-offset));
  transition: transform 0.12s ease;
  z-index: 1;
  pointer-events: none;
}
.scale-control.is-dragging .scale-ruler {
  transition: none;
}
.scale-tick {
  position: relative;
  display: block;
  height: var(--scale-tick-gap);
  pointer-events: none;
}
.scale-tick-mark {
  position: absolute;
  top: 0;
  left: calc(50% - 4px);
  width: 14px;
  height: 1px;
  transform: translateX(-50%);
  background: #d2d2d2;
}
.scale-tick.is-five .scale-tick-mark {
  width: 24px;
  background: #b8b8b8;
}
.scale-tick.is-decade .scale-tick-mark {
  width: 38px;
  height: 1.5px;
  background: #8f8f8f;
}
.scale-tick-number {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  transform: translateY(-50%);
  color: #9a9a9a;
  font-size: 8.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-align: right;
  white-space: nowrap;
}
.scale-current-line {
  position: absolute;
  top: 50%;
  left: 35px;
  right: 21px;
  height: 1.5px;
  transform: translateY(-50%);
  background: #1a1a1a;
  pointer-events: none;
  z-index: 2;
}
.scale-current-value {
  position: absolute;
  top: 50%;
  right: 0;
  min-width: 40px;
  height: 24px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transform: translateY(-50%);
  border-radius: 8px;
  background: #1a1a1a;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  z-index: 4;
  transition: box-shadow 0.12s ease;
}
.scale-control.is-dragging .scale-current-value {
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
}
.scale-current-number,
.scale-current-percent {
  display: block;
  line-height: 1;
}
/* "Aa" font marks — sized to match the icon glyphs. */
.ap-option .font-mark {
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #4a4a4a;
  line-height: 1;
}
.ap-option .font-mark.connect {
  font-family: "DM Sans", -apple-system, sans-serif;
}
.ap-option .font-mark.system {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.ap-option .font-mark.opendyslexic {
  font-family: "OpenDyslexic", "DM Sans", sans-serif;
  font-size: 12px;
  letter-spacing: -0.14em;
  transform: translateX(0.35px);
}

/* Account identity line in the profile menu (confirms which account data is bound to). */
.profile-menu-popover .profile-account-row.is-static { cursor: default; pointer-events: none; }
.profile-menu-popover .profile-account-row.is-static:hover { background: transparent; }
.profile-menu-popover .profile-account-email {
  font-size: 11px;
  color: var(--cn-text-muted, #8a8a8a);
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dashboard, Reminders and Planner stay pinned under the search; only the
   workspace list below the divider scrolls, so no highlight ever passes
   under the search box. */
.sidebar.expanded .body-pinned { flex: none; padding: 0 8px; }
.sidebar.expanded .body-pinned .sep { margin: 8px -8px 0; }
.sidebar.expanded .body { padding-top: 8px; }

/* The profile menu is the Workspace ⋯ menu: the same panel at the same
   width, anchored to the row's ⋯ at the sidebar's edge, opening upward
   because the row sits at the bottom. The email is a quiet first row. */
.sidebar.expanded .footer-row .profile-bar .profile-menu-popover {
  top: auto; left: auto; right: -9px; bottom: calc(100% + 6px);
  width: 203px; height: 0; min-width: 0; overflow: visible; z-index: 2200;
}
.sidebar.expanded .footer-row .profile-bar .profile-menu-popover .no-icon-menu-preview {
  position: absolute; top: auto; left: auto; right: 0; bottom: 0;
  transform: scale(0.5); transform-origin: bottom right;
}
.sidebar.collapsed .profile-menu-popover { width: 203px; height: 0; overflow: visible; }
.sidebar.collapsed .profile-menu-popover .no-icon-menu-preview {
  position: absolute; left: 0; bottom: 0; top: auto;
  transform: scale(0.5); transform-origin: bottom left;
}
.no-icon-menu-row.is-muted { color: #858585; }
.no-icon-menu-row.is-static { cursor: default; }

.no-icon-menu-icon {
  width: 32px; height: 32px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* Business: one row per business, drawn as the project rows are (16px
   colour square, 4px corners, 10px before the name), hanging under Business
   at the sub-rows' 34px; the receipts waiting to be checked as the menu's count. */
.sidebar.expanded .month-row.biz-row { gap: 10px; }
.sidebar.expanded .month-row.biz-row .biz-sq { flex: none; width: 16px; height: 16px; border-radius: 4px; }
.sidebar.expanded .month-row.biz-row .mname { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sidebar.expanded .month-row.biz-row .badge { flex: none; font-size: 12px; color: #9a9a9a; text-decoration: underline; text-decoration-color: #d8d8d8; text-underline-offset: 2px; }
.sidebar.expanded .month-row.biz-row .biz-plus { flex: none; width: 16px; height: 16px; fill: none; stroke: #616161; stroke-width: 1.6; stroke-linecap: round; }
.sidebar.expanded .month-row.biz-row.is-waiting { color: #a9a9a9; cursor: default; }
.sidebar.expanded .month-row.biz-row.is-waiting:hover { background: transparent; }