/* Shared workspace switcher. Uses tokens.css. */
.ws-switch { position: relative; justify-self: end; }
.ws-switch-button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding-inline: var(--space-3);
  border: 0; border-radius: var(--radius-md);
  background: var(--color-surface-secondary); color: var(--color-text);
  font: 500 var(--type-control-size)/var(--type-control-leading) var(--font-ui);
  cursor: pointer; transition: background-color 120ms, color 120ms;
}
.ws-switch-button:hover { color: var(--color-accent-text); }
.ws-switch-button[aria-expanded=true] { background: var(--color-accent-tint); color: var(--color-accent-text); }
.ws-switch-button img { width: 16px; height: 16px; flex: none; }
.ws-switch-button:focus-visible, .ws-menu a:focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: 2px; }

.ws-menu {
  position: fixed; inset: auto; margin: 0; z-index: 60;
  width: 240px; padding: var(--space-2);
  border: 1px solid var(--color-separator); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  box-shadow: 0 12px 36px rgb(28 28 30 / .09);
}
.ws-menu[open] { animation: ws-arrive 150ms ease-out; }
.ws-menu::backdrop { background: rgb(28 28 30 / .25); }
.ws-menu-label { margin: 0; padding: var(--space-2) var(--space-2) var(--space-1); color: var(--color-text-secondary); font: 600 13px/20px var(--font-ui); }
.ws-menu ul { list-style: none; margin: 0; padding: 0; }
.ws-menu a {
  display: flex; align-items: center; min-height: 44px; padding-inline: var(--space-2);
  border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none;
  font: 400 var(--type-control-size)/var(--type-control-leading) var(--font-ui);
}
.ws-menu li + li a { box-shadow: 0 -1px 0 var(--color-separator); }
.ws-menu a:hover { background: var(--color-surface-secondary); }
.ws-menu a[aria-current] { color: var(--color-accent-text); font-weight: 600; }
.ws-menu a[aria-current]::after { content: "✓"; margin-inline-start: auto; }

@media (max-width: 680px) {
  .ws-menu {
    inset: auto 0 0; width: 100%; max-width: 100%;
    padding: var(--space-4) var(--space-4) max(var(--space-6), env(safe-area-inset-bottom));
    border: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .ws-menu[open] { animation-name: ws-sheet; }
}
@keyframes ws-arrive { from { opacity: 0; transform: translateY(-4px); } }
@keyframes ws-sheet { from { opacity: .6; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .ws-menu[open] { animation: none; } }