/* followroom account area: the shell's own layout only (header, side menu, main area, and the
   phone layout where the menu folds away). The design system's tokens.css and bundle.css load
   first; colours and spacing are tokens only. */
* { box-sizing: border-box; }
body { min-height: 100vh; display: flex; flex-direction: column; }

/* Header: the logo, then Clerk's organisation switcher, Help and Clerk's user menu */
.topbar { display: flex; align-items: center; gap: var(--space-6); min-height: 56px; padding: var(--space-2) var(--space-6); background: var(--surface-100); border-bottom: 1px solid var(--line); }
.topbar .brand { display: inline-flex; text-decoration: none; }
.clerk-slots { display: flex; gap: var(--space-4); align-items: center; min-height: 32px; margin-left: auto; }
.clerk-slots .help { color: var(--ink-muted); font-weight: 600; text-decoration: none; }
.clerk-slots .help:hover { color: var(--ink); }
.menu-toggle { display: none; padding: var(--space-1) var(--space-2); background: none; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }

/* Side menu beside the page */
.shell { display: flex; flex: 1; }
.side-menu { display: flex; flex-direction: column; gap: var(--space-1); width: 220px; flex-shrink: 0; padding: var(--space-6) var(--space-4); border-right: 1px solid var(--line); }
.side-menu a { padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); color: var(--ink-muted); font-weight: 600; text-decoration: none; }
.side-menu a:hover { color: var(--ink); background: var(--surface-100); }
.side-menu a.active { color: var(--ink); background: var(--signal-soft); }

.container { flex: 1; min-width: 0; max-width: var(--container); padding: var(--space-6) var(--space-6) var(--space-16); }
.auth { width: 100%; max-width: 460px; margin: var(--space-16) auto; padding: 0 var(--space-4); }
.muted { color: var(--ink-muted); }
.error { color: var(--danger); }

/* Phones: the side menu folds away behind the Menu button */
@media (max-width: 720px) {
  .topbar { gap: var(--space-4); padding: var(--space-2) var(--space-4); }
  .menu-toggle { display: inline-block; }
  .shell { flex-direction: column; }
  .side-menu { display: none; width: auto; padding: var(--space-2) var(--space-4); border-right: 0; border-bottom: 1px solid var(--line); }
  body.menu-open .side-menu { display: flex; }
  .container { padding: var(--space-4) var(--space-4) var(--space-12); }
}