/* ============================================================================
   LEFT NAVIGATION
   ============================================================================
   The tab row became a left rail. Seven destinations across a horizontal strip
   is already tight, and the list only grows from here — Templates, Forms,
   Dashboards are all coming. A rail takes items without re-thinking the
   layout, keeps the whole map visible while you work, and gives the page its
   full width back for tables, which is what most of these screens are.

   Structure: a fixed-width column, the page beside it. The rail scrolls its
   own nav if it ever needs to; the page scrolls independently, so navigation
   never disappears upward while you are reading a long table.

   COLLAPSED STATE
   Icons only, 62px. The label is kept in the DOM and hidden, so a screen
   reader still announces "Contacts" rather than a nameless button, and the
   native tooltip carries it for a mouse. Remembered per browser, because the
   choice is about that person's screen, not about the account.
   ============================================================================ */

:root{
  --sb-w: 232px;
  --sb-w-min: 62px;
}

.shell{display:flex;min-height:100vh;align-items:stretch}

.sb{
  width:var(--sb-w);flex:0 0 var(--sb-w);
  display:flex;flex-direction:column;
  background:var(--card);border-right:1px solid var(--bdr);
  position:sticky;top:0;height:100vh;z-index:40;
  transition:width .16s ease,flex-basis .16s ease}
.shell.sb-min .sb{width:var(--sb-w-min);flex-basis:var(--sb-w-min)}

/* --- head: mark and the collapse control --- */
.sb-head{display:flex;align-items:center;gap:var(--sp2);
  padding:14px 12px 10px;min-height:58px}
.sb-head .logo{min-width:0;overflow:hidden}
.shell.sb-min .sb-head{justify-content:center;padding:14px 8px 10px}
.sb-toggle{margin-left:auto;flex-shrink:0;width:26px;height:26px;
  display:grid;place-items:center;border-radius:6px;cursor:pointer;
  border:1px solid transparent;background:transparent;color:var(--txd);
  font-size:14px;line-height:1;transition:all .14s}
.sb-toggle:hover{background:var(--card-h);color:var(--tx);border-color:var(--bdr)}
.shell.sb-min .sb-toggle{display:none}
/* Collapsed, the mark itself reopens the rail — otherwise the only way back
   is a control that is no longer on screen. */
.shell.sb-min .sb-head .logo{cursor:pointer}

/* --- workspace switcher ---
   .wsw-btn is a GRID (26px 1fr auto) built for the old header. Hiding its
   label does not remove the 1fr track, so the button kept claiming width the
   rail does not have and pushed itself out through the right edge. Collapsed,
   it becomes a single centred track.

   NOT fixed with overflow:hidden on the rail — the workspace dropdown is
   deliberately wider than the rail and has to spill over the page. */
.sb .wsw{padding:0 12px 12px;position:relative;min-width:0}
.sb .wsw-btn{width:100%;max-width:100%;min-width:0}
.shell.sb-min .sb .wsw{padding:0 8px 10px}
.shell.sb-min .sb .wsw .wtxt,
.shell.sb-min .sb .wsw .wcar{display:none}
.shell.sb-min .sb .wsw-btn{grid-template-columns:1fr;justify-items:center;
  padding:8px;gap:0}

/* --- the nav itself --- */
.sb-nav{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;
  padding:4px 10px 12px;display:flex;flex-direction:column;gap:2px}
.sb-item{display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 11px;border-radius:var(--r-md);border:1px solid transparent;
  background:transparent;color:var(--txm);cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:550;text-align:left;
  white-space:nowrap;transition:background .13s,color .13s}
.sb-item:hover{background:var(--card-h);color:var(--tx)}
.sb-item.active{background:var(--bg-alt);color:var(--tx);
  border-color:var(--bdr-str);font-weight:600}
/* The active item carries a spine on the left. A background alone reads as a
   hover state on a rail this quiet. */
.sb-item.active::before{content:'';position:absolute;left:0;width:3px;
  height:20px;border-radius:0 3px 3px 0;background:var(--accent)}
.sb-item{position:relative}
.sb-ico{flex:0 0 18px;width:18px;height:18px;display:grid;place-items:center;
  color:currentColor;opacity:.85}
.sb-item.active .sb-ico{color:var(--accent);opacity:1}
.sb-ico svg{width:18px;height:18px;display:block}
.sb-lbl{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sb-item .bc{margin-left:auto;flex-shrink:0}
.shell.sb-min .sb-lbl{display:none}
.shell.sb-min .sb-item{justify-content:center;padding:10px 0}
.shell.sb-min .sb-item .bc{position:absolute;top:4px;right:8px;margin:0}

/* A hairline between groups of destinations. It separates the people you work
   (Contacts, Segments, Campaigns) from where they come from and what has
   happened — which is a real division, not decoration. */
.sb-gap{margin-top:10px;padding-top:10px;
  border-top:1px solid color-mix(in srgb,var(--bdr) 70%,transparent)}

/* --- foot: who you are, and the two things you do least often --- */
.sb-foot{flex:0 0 auto;padding:10px;border-top:1px solid var(--bdr);
  display:flex;flex-direction:column;gap:6px}
.sb-user{display:flex;align-items:center;gap:9px;padding:7px 9px;
  border-radius:var(--r-md);min-width:0}
.sb-av{width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-size:11.5px;font-weight:600;
  color:#04121a;background:linear-gradient(140deg,var(--accent-h),var(--brand-2))}
.sb-who{min-width:0;line-height:1.25}
.sb-nm{display:block;font-size:13px;font-weight:600;color:var(--tx);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-rl{display:block;font-size:11px;color:var(--txd);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell.sb-min .sb-who,.shell.sb-min .sb-foot .si{display:none}
.shell.sb-min .sb-user{justify-content:center;padding:7px 0}

.sb-row{display:flex;gap:6px}
/* flex:1 belongs to the ROW, not to every button. .sb-foot is a column, so a
   button that grows there stretches down the rail — which is what turned
   Settings into a panel with a giant gear in it. */
.sb-row .sb-btn{flex:1 1 0;min-width:0}
.sb-btn{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 10px;border-radius:var(--r-md);border:1px solid var(--bdr);
  background:transparent;color:var(--txm);cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:600;white-space:nowrap;
  transition:all .14s}
.sb-btn:hover{border-color:var(--bdr-str);color:var(--tx);background:var(--card-h)}
.sb-btn.danger:hover{border-color:var(--red);color:var(--red)}
.sb-btn.active{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
/* Nav icons are sized through .sb-ico; these are not wrapped, so an SVG with
   no intrinsic size fills whatever box it is given. Belt and braces: any SVG
   anywhere in the rail is 16px unless something says otherwise. */
.sb-btn svg{width:16px;height:16px;flex:0 0 16px;display:block}
.sb svg{max-width:100%;max-height:100%}
.shell.sb-min .sb-row{flex-direction:column}
.shell.sb-min .sb-btn span{display:none}
.sb-foot .si{padding:2px 9px 0;font-size:11px;color:var(--txd)}

/* --- the page --- */
.main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.main .cnt{padding:0 var(--sp5) var(--sp7);max-width:1360px;
  margin:0 auto;width:100%}

/* --- narrow screens ---
   Below 900px the rail is icons only and cannot be expanded: there is no room
   for a 232px column beside a table, and a rail that overlays the content is
   worse than one that is simply terse. */
@media (max-width:900px){
  .sb{width:var(--sb-w-min);flex-basis:var(--sb-w-min)}
  .sb-lbl,.sb-who,.sb-foot .si,.sb-toggle,
  .sb .wsw .wtxt,.sb .wsw .wcar,.sb-btn span{display:none}
  .sb .wsw{padding:0 8px 10px}
  .sb .wsw-btn{grid-template-columns:1fr;justify-items:center;padding:8px;gap:0}
  .sb-item{justify-content:center;padding:10px 0}
  .sb-head{justify-content:center;padding:14px 8px 10px}
  .sb-head .brand-lock{display:none}
  .sb-head .brand-mark{display:block;width:28px;height:28px}
  .sb-row{flex-direction:column}
  .main .cnt{padding:0 var(--sp4) var(--sp6)}
}
@media (prefers-reduced-motion:reduce){.sb{transition:none}}

/* ── Two rails, one at a time ────────────────────────────────────────────
   Above a workspace: Home, then the workspaces. Inside one: the way back,
   the workspace's name, and its five destinations. Never both sets at once —
   five items called Contacts above five more called Contacts is the
   confusion this was meant to remove. */
.sb-sec{font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--txd);padding:18px 14px 7px;margin-top:8px;
  border-top:1px solid var(--bdr)}
.shell.sb-min .sb-sec{padding:12px 0 6px;text-align:center;font-size:0}
.shell.sb-min .sb-sec::after{content:'···';font-size:11px;letter-spacing:.1em}

/* A workspace in the list: its mark, its name, a chevron. It is a place you
   go into, so it points rather than highlights. */
.sb-item.sb-ws .sb-lbl{font-weight:600}
.sb-item.sb-ws:hover .sb-lbl{color:var(--wsc,var(--accent))}
.sb-car{margin-left:auto;font-size:15px;line-height:1;color:var(--txd);flex:0 0 auto}
.sb-soon{margin-left:auto;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--txd);flex:0 0 auto}
.sb-item.sb-ws.soon{opacity:.45;cursor:default}
.sb-item.sb-ws.soon:hover{background:none}
.shell.sb-min .sb-car,.shell.sb-min .sb-soon{display:none}

/* The way out, first and in words. An arrow alone would be a mystery in a
   rail that has no other arrows. */
.sb-item.sb-back{color:var(--txd);font-size:12.5px}
.sb-item.sb-back:hover{color:var(--accent)}
.sb-item.sb-back .sb-ico{font-size:14px}

/* Which workspace you are in, said once, in its own colour. */
.sb-wsh{display:flex;align-items:center;gap:10px;padding:12px 14px 10px;
  margin-top:4px;border-top:1px solid var(--bdr);min-width:0}
.sb-wsh-n{font-size:13.5px;font-weight:700;color:var(--wsc,var(--accent));
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell.sb-min .sb-wsh{justify-content:center;padding:12px 0 10px}
.shell.sb-min .sb-wsh-n{display:none}

/* Its destinations, under one spine in its colour. */
.sb-grp{margin:2px 0 6px;padding-left:13px;margin-left:19px;
  border-left:2px solid color-mix(in srgb,var(--wsc,var(--accent)) 40%,transparent)}
.shell.sb-min .sb-grp{margin-left:6px;padding-left:4px;border-left-width:1px}
.sb-grp .sb-item{padding-top:7px;padding-bottom:7px}
.sb-grp .sb-item .sb-lbl{font-size:13px}

/* Section headings inside a workspace's rail. Three jobs, named — without
   them nine items in a column is a list to read rather than a shape to
   recognise. */
.sb-sub{font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--txd);padding:14px 12px 5px;opacity:.75}
.sb-sub:first-child{padding-top:4px}
.shell.sb-min .sb-sub{font-size:0;padding:10px 0 4px;text-align:center}
.shell.sb-min .sb-sub::after{content:'·';font-size:12px}

/* A workspace's mark is 26px; the icon slot it sits in is 18px, so it
   overflowed its own box and the name sat off-centre against it. The slot
   takes the mark's size on the rows that carry one. */
.sb-item.sb-ws .sb-ico{flex:0 0 26px;width:26px;height:26px}
.sb-item.sb-ws{gap:10px;padding-top:8px;padding-bottom:8px}
.sb-item.sb-ws .sb-lbl{line-height:26px}
.sb-wsh .wmark{flex:0 0 26px}
.sb-wsh-n{line-height:26px}

/* Home is left-aligned and full width, like every other screen. Centring a
   short page puts a margin on both sides and makes the emptiness
   symmetrical rather than smaller — and moving between Home and a list
   would shift the content sideways. */