/* Brand team menu (src/ui/layout.tsx brandNav, public/brand-nav.js): seven flat items under small
   CONTENT / BUSINESS headings, a "Brand" pill by the logo, Settings and Help in the account area, a
   "Switch workspace" link for people in several workspaces, and on desktop an optional icons-only
   menu. Colours are tokens only (dark mode in styles.css). */

/* Logo on the first row (with the collapse button), the Brand pill under it. */
.side-top:has(.side-pill) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 6px; row-gap: 6px; padding-bottom: 14px; }
.side-top:has(.side-pill) .logo { grid-column: 1; grid-row: 1; }
.side-top .side-mini-btn { grid-column: 2; grid-row: 2; justify-self: end; }
.side-top:has(.side-pill) .side-close { grid-column: 2; grid-row: 1; }
.side-top .side-pill {
  grid-column: 1; grid-row: 2; justify-self: start; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--acct-brand-ink) 14%, transparent); color: var(--acct-brand-ink);
  font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase;
}
.side-mini-btn { display: none; }

/* Section headings: small, uppercase, muted. */
.side-nav .nav-sec {
  margin: 14px 10px 4px; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.side-nav .ng-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Settings and Help at the top of the account area: the same rows as the menu. */
.side-foot .side-foot-nav { margin: -4px 0 0; }

/* "Switch workspace" under the name (only with 2+ workspaces). Undo the global FAQ-card look of <details>. */
.ws-switch { position: relative; margin: -4px 0 0; padding: 0; border: 0; border-radius: 0; background: none; max-width: none; }
.ws-switch > summary { list-style: none; }
.ws-switch > summary::-webkit-details-marker { display: none; }
.ws-switch > summary::marker { content: ""; }
.ws-switch-btn {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 10px; padding: 2px 0; color: var(--accent); font-size: 13px; font-weight: 600;
  cursor: pointer; user-select: none;
}
.ws-switch-btn:hover { text-decoration: underline; }
.ws-switch-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ws-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 30; display: grid; gap: 2px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(10, 37, 64, 0.16);
}
.ws-menu form { margin: 0; }
.ws-mark {
  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  font-size: 11px; font-weight: 800; line-height: 1; background: var(--neutral-bg); color: var(--neutral-ink);
}
.ws-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 7px; background: none;
  color: var(--ink); font: 500 14px var(--font-body); text-align: left; text-decoration: none; cursor: pointer;
}
.ws-item:hover, .ws-item:focus-visible { background: var(--hover); outline: none; }
.ws-item-text { display: grid; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.ws-item-text small { color: var(--ink-soft); font-size: 12px; }

/* Desktop: collapse to icons (the button by the logo; remembered on this device). */
@media (min-width: 821px) {
  .side-top:has(.side-pill) .logo { grid-column: 1 / -1; }
  .side-mini-btn {
    flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -2px -4px 0 0; padding: 0;
    border: 0; border-radius: 7px; background: none; color: var(--ink-faint); cursor: pointer;
  }
  .side-mini-btn:hover { background: var(--hover); color: var(--ink); }
  .side-mini-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

  html.side-mini .side { width: 68px; padding-left: 10px; padding-right: 10px; overflow-x: hidden; }
  html.side-mini .main { margin-left: 68px; }
  html.side-mini .side-top { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 2px 0 14px; }
  html.side-mini .side-top .logo, html.side-mini .side-top .side-pill { display: none; }
  html.side-mini .side-mini-btn { margin: 0; transform: scaleX(-1); }
  html.side-mini .ws-switch-btn { margin: 0 auto; display: flex; justify-content: center; font-size: 0; gap: 0; }
  html.side-mini .ws-switch-btn svg { width: 18px; height: 18px; }
  html.side-mini .ws-menu { right: auto; width: 240px; }
  html.side-mini .side-nav .nav-sec { height: 1px; margin: 10px 8px; overflow: hidden; background: var(--line); font-size: 0; }
  html.side-mini .side-nav a { position: relative; justify-content: center; padding: 9px 0; }
  html.side-mini .side-nav a .ng-text { display: none; }
  html.side-mini .side-nav a [data-unread], html.side-mini .side-nav a [data-apps],
  html.side-mini .side-nav a [data-videos], html.side-mini .side-nav a [data-samples-due], html.side-mini .side-nav a [data-creators] {
    position: absolute; top: 1px; right: 2px; min-width: 16px !important; padding: 0 4px !important; font-size: 10px !important; line-height: 16px !important;
  }
  html.side-mini .side-out { justify-content: center; font-size: 0; }
  html.side-mini .side-foot [data-theme-form] { display: none; }
  html.side-mini .side-who { padding: 0; justify-content: center; }
  html.side-mini .side-who.has-av { grid-template-columns: 32px; }
  html.side-mini .side-who > :not(.side-av) { display: none; }
}