@import url('./tokens.css');

/* Bite Stack — Story // Stack shared visual language (and the design reference):
   near-white surface, navy text, navy header strip, sharp corners, uppercase
   action labels. All design tokens live in Brand/tokens.css (synced to
   ./tokens.css at build; see DESIGN-SYSTEM.md L5.1). Edit tokens there. */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}

a {
  color: var(--text);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  font-weight: 600;
  line-height: 1.25;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ---------- slim header (all pages except home) ---------- */
/* Navy palette across all pages, matching the home-page hero. */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  background: var(--navy-bg);
  color: var(--navy-text);
  border-bottom: 1px solid var(--navy-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.app-header .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--navy-text);
}
.app-header .brand:hover {
  text-decoration: none;
}

.app-header .brand .wordmark-slot {
  display: flex;
  align-items: center;
  color: var(--navy-text);
}
.app-header .brand .wordmark-slot svg {
  height: 22px;
  width: auto;
  display: block;
}

.app-header .brand .app-label {
  color: var(--navy-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-left: 14px;
  border-left: 1px solid var(--navy-border);
}

.app-header nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.app-header nav a {
  font-size: 11px;
  font-weight: 600;
  color: var(--navy-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.app-header nav a:hover {
  color: var(--navy-text);
  text-decoration: none;
}

.app-header .user-menu {
  color: var(--navy-muted);
}
.app-header .user-menu .user-name {
  color: var(--navy-text);
}
.app-header .user-menu .btn-ghost {
  background: transparent;
  border-color: var(--navy-border);
  color: var(--navy-muted);
}
.app-header .user-menu .btn-ghost:hover {
  background: rgba(232, 232, 230, 0.06);
  border-color: var(--navy-text);
  color: var(--navy-text);
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.user-menu .user-name {
  color: var(--text);
}

/* ---------- hero header (home page only) ---------- */

.hero {
  position: relative;
  background: var(--navy-bg);
  color: var(--navy-text);
  text-align: center;
  padding: 56px 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-nav-left {
  position: absolute;
  top: 16px;
  left: 40px;
  font-size: 12px;
}
.hero-nav-left a {
  color: var(--navy-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hero-nav-left a:hover {
  color: var(--navy-text);
  text-decoration: none;
}

.hero-controls {
  position: absolute;
  top: 16px;
  right: 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--navy-muted);
}

.hero-controls a {
  color: var(--navy-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hero-controls a:hover {
  color: var(--navy-text);
  text-decoration: none;
}

.hero-controls .user-name {
  opacity: 0.85;
}

.hero-controls button {
  background: none;
  border: 1px solid var(--navy-border);
  color: var(--navy-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.hero-controls button:hover {
  color: var(--navy-text);
  border-color: var(--navy-text);
}

.hero-logo-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}
.hero-logo-link:hover {
  text-decoration: none;
}

.hero-logo {
  color: var(--navy-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-logo svg {
  height: 120px;
  width: auto;
  display: block;
}

.hero-subtitle {
  font-size: 11px;
  letter-spacing: 0.25em;
  font-weight: 600;
  color: var(--navy-muted);
  margin-top: 14px;
  text-transform: uppercase;
}

/* ---------- containers ---------- */

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 24px;
}

.container-narrow {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}

.page-header .meta {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  border-radius: 0;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn:hover {
  background: var(--surface-hover);
  border-color: var(--text-muted);
  text-decoration: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.btn-primary:hover {
  background: var(--text);
  opacity: 0.85;
  border-color: var(--text);
}

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}
.btn-ghost:hover {
  background: var(--accent-bg);
  color: var(--text);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.btn-danger:hover { opacity: 0.85; }

.btn-sm {
  padding: 6px 12px;
  font-size: 10px;
  letter-spacing: 0.1em;
}

/* Icon-only buttons (DESIGN-SYSTEM.md L2.1). 28×28 / 22×22 squares, no padding;
   MUST carry aria-label (L4.5). Extracted to shared from ResearchStack — Pass 5 S1. */
.btn-icon {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  width: 28px;
  height: 28px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon:hover { background: var(--surface-hover); }
.btn-icon:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-icon-sm {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 22px;
  height: 22px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon-sm:hover { background: var(--surface-hover); color: var(--text); }
.btn-icon-sm.btn-icon-danger:hover { color: var(--danger); border-color: var(--danger); }
.btn-icon-sm:disabled { opacity: 0.5; cursor: not-allowed; }
/* Loading state (DESIGN-SYSTEM.md L2.9). On-button modifier. Shared from RS — Pass 5 S1. */
.btn.loading { opacity: 0.7; pointer-events: none; }

/* ---------- cards / lists ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background 0.15s, border-color 0.15s;
}

.card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text);
}

.card-meta {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.card-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 0;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--accent-bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.chip-accent { background: var(--accent-bg); color: var(--text); border-color: var(--text-muted); }
.chip-success { background: rgba(74, 122, 82, 0.10); color: var(--success); border-color: rgba(74, 122, 82, 0.35); }
.chip-warning { background: rgba(176, 138, 46, 0.10); color: var(--warning); border-color: rgba(176, 138, 46, 0.35); }
.chip-danger { background: rgba(196, 90, 60, 0.10); color: var(--danger); border-color: rgba(196, 90, 60, 0.35); }
.chip-info { background: rgba(74, 106, 138, 0.10); color: var(--info); border-color: rgba(74, 106, 138, 0.35); }
/* Tooltip (DESIGN-SYSTEM.md L2.7). Brand-styled hover/focus hint for icon buttons;
   replaces native title=. Positioned by ui.js tooltip() (position:fixed). */
.tooltip {
  position: fixed;
  z-index: var(--z-dropdown);
  max-width: 240px;
  padding: 4px 8px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-dropdown);
  border-radius: 0;
  font-size: 12px;
  line-height: 1.35;
  pointer-events: none;
}
.tooltip[hidden] { display: none; }
/* Popover surface (DESIGN-SYSTEM.md L2.7). Shared dropdown/popover panel
   (same surface as .user-menu-panel); sizes 220/320/380. Positioned by
   ui.js popover() (position:fixed). */
.popover {
  position: fixed;
  z-index: var(--z-dropdown);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-dropdown);
  border-radius: 0;
}
.popover[hidden] { display: none; }
.popover-sm { width: 220px; }
.popover-md { width: 320px; }
.popover-lg { width: 380px; }

/* Tag picker — popover list body (DESIGN-SYSTEM.md L2.2 / L5.2 S8). Rendered
   inside a .popover by ui.js tagPicker(): the popover supplies the surface,
   this is the header / search / scrollable-list layout. Modeled on the Bite
   Stack dropdown picker. */
.tag-picker { display: flex; flex-direction: column; max-height: 340px; overflow: hidden; }
.tag-picker-header {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px; border-bottom: 1px solid var(--border);
}
.tag-picker-new {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); cursor: pointer; background: none;
  border: 1px dashed var(--border); padding: 3px 8px; transition: color 0.15s, border-color 0.15s;
}
.tag-picker-new:hover { color: var(--text); border-color: var(--text-muted); }
.tag-picker-new-input {
  flex: 1; min-width: 0; box-sizing: border-box; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 0; padding: 4px 8px; font-size: 12px;
}
.tag-picker-new-input:focus { border-color: var(--text-muted); outline: none; }
.tag-picker-done {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); cursor: pointer; background: none; border: none;
  padding: 3px 8px; transition: color 0.15s;
}
.tag-picker-done:hover { color: var(--text); }
.tag-picker-search { padding: 8px; border-bottom: 1px solid var(--border); }
.tag-picker-search input {
  width: 100%; box-sizing: border-box; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 0; padding: 5px 8px; font-size: 12px;
}
.tag-picker-search input:focus { border-color: var(--text-muted); outline: none; }
.tag-picker-search input::placeholder { color: var(--text-muted); opacity: 0.5; }
.tag-picker-list { overflow-y: auto; flex: 1; }
.tag-picker-group {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); padding: 6px 12px 2px; opacity: 0.6;
}
.tag-picker-item {
  padding: 5px 12px; cursor: pointer; font-size: 11px; color: var(--text);
  transition: background 0.1s; border-bottom: 1px solid var(--surface-hover);
}
.tag-picker-item:hover { background: var(--accent-bg); }
.tag-picker-item.active { background: var(--accent-bg); color: var(--text-muted); }
.tag-picker-item.active::after { content: ' ✓'; opacity: 0.6; }

/* Tag input — free-text chip editor (DESIGN-SYSTEM.md L2.2 / L5.2 S9). Bordered
   box of chip() atoms + an inline field, built by ui.js tagInput(). The ×
   (.tag-remove) ships with chip(). */
.tag-input {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 8px; border: 1px solid var(--border); background: var(--bg);
  min-height: 40px; cursor: text;
}
.tag-input:focus-within { border-color: var(--text); }
.tag-input-field {
  flex: 1; min-width: 140px; border: none; background: transparent;
  padding: 4px 2px; font-size: 14px; width: auto; color: var(--text);
}
.tag-empty { color: var(--text-muted); font-size: 13px; padding: 4px 2px; flex: 1; }

/* Filter toggle chip (DESIGN-SYSTEM.md L2.6). Clickable on/off filter built by
   ui.js filterChip() as <button aria-pressed>. Square, navy-muted active state
   — the canonical treatment for stateful filter chips. */
.filter-chip {
  display: inline-block; background: var(--accent-bg); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 0; font: inherit; font-size: 11px;
  padding: 3px 8px; cursor: pointer; user-select: none;
}
.filter-chip:hover { color: var(--text); }
.filter-chip[aria-pressed="true"] { color: var(--text); border-color: var(--text-muted); font-weight: 600; }

/* Empty-state variants (DESIGN-SYSTEM.md L2.8). Base .empty-state already shared. */
.empty-state .empty-state-icon { font-size: 28px; line-height: 1; display: block; margin-bottom: 8px; }
.empty-state.inline { padding: 24px 14px; border: none; background: transparent; }
.empty-state.error .empty-state-icon { color: var(--danger); }
/* Status pill (DESIGN-SYSTEM.md L2.13). One element + [data-role]; colors from L1.1 chip tokens. */
.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 0;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--surface);
  color: var(--text-muted);
}
.status-pill[data-role="success"], .status-pill[data-role="approved"], .status-pill[data-role="deployed"] { background: var(--chip-success-bg); color: var(--success-text); border-color: var(--chip-success-border); }
.status-pill[data-role="warning"], .status-pill[data-role="draft"] { background: var(--chip-warning-bg); color: var(--warning-text); border-color: var(--chip-warning-border); }
.status-pill[data-role="danger"] { background: var(--chip-danger-bg); color: var(--danger-text); border-color: var(--chip-danger-border); }
.status-pill[data-role="info"], .status-pill[data-role="built"] { background: var(--chip-info-bg); color: var(--info-text); border-color: var(--chip-info-border); }
/* Field-level invalid state (DESIGN-SYSTEM.md L2.10). Used by formRow({error}). */
.form-row [aria-invalid="true"] { border-color: var(--danger); }
/* Removable chip (DESIGN-SYSTEM.md L2.6): .chip.is-removable + the .tag-remove × button (canonical = EH .tag-remove). Shared in Pass 5 S2. */
.chip.is-removable { padding-right: 6px; }
.tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  border-radius: 0;
}
.tag-remove:hover { color: var(--danger); background: var(--accent-bg); }

/* ---------- empty state ---------- */

.empty-state {
  text-align: center;
  padding: 48px 24px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 0;
  color: var(--text-muted);
}

.empty-state h3 {
  color: var(--text);
  margin-bottom: 8px;
}

/* ---------- forms ---------- */

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-row label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--text);
}

.form-row textarea {
  min-height: 80px;
  resize: vertical;
}

.form-row .hint {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

/* ---------- sign-in / accept-invite ---------- */

.sign-in-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}

.sign-in-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 40px;
  width: 100%;
  max-width: 420px;
  text-align: center;
}

.sign-in-card .wordmark-slot {
  display: flex;
  justify-content: center;
  color: var(--text);
  margin-bottom: 10px;
}
.sign-in-card .wordmark-slot svg {
  display: block;
}

.sign-in-card h1 {
  text-align: center;
  margin-bottom: 4px;
  font-size: 1.2rem;
}

.sign-in-card .subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 28px;
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.google-btn {
  width: 100%;
  padding: 11px 16px;
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
}
.google-btn:hover {
  background: var(--surface-hover);
  border-color: var(--text-muted);
}
.google-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.google-btn svg {
  width: 18px;
  height: 18px;
}

.email-form .btn-primary { width: 100%; }

.error-text {
  background: rgba(196, 90, 60, 0.10);
  color: var(--danger);
  border: 1px solid rgba(196, 90, 60, 0.35);
  padding: 9px 12px;
  border-radius: 0;
  font-size: 13px;
  margin-bottom: 12px;
}

.muted-link {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

/* ---------- modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 24, 0.45);
  display: grid;
  place-items: center;
  z-index: 100;
  padding: 24px;
}

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow: auto;
}
/* Modal size tiers (DESIGN-SYSTEM.md L2.3). Default .modal = md (520). */
.modal-sm { max-width: 420px; }
.modal-lg { max-width: 720px; }
.modal-xl { max-width: 1100px; }
/* Side panel (DESIGN-SYSTEM.md L2.14). Docks left/right; slides via .open. */
.side-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  /* Fluid, user-resizable width (DESIGN-SYSTEM.md L2.14 / D-L2.14.1). Per-panel
     --side-panel-width override; clamp() enforces the bounds so the resize drag
     only writes one variable. --width-side-panel (456px) is the default fallback. */
  --side-panel-width: var(--width-side-panel);
  --side-panel-min: 280px;
  --side-panel-max: 70vw;
  width: clamp(var(--side-panel-min), var(--side-panel-width), var(--side-panel-max));
  background: var(--surface);
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  transition: transform var(--motion-slow) ease;
}
/* Closed = slid fully off its docked edge via transform (self-tracks the
   variable width; no per-drag recompute). Open = translateX(0). */
.side-panel.dock-right { right: 0; border-left: 1px solid var(--border); box-shadow: -4px 0 20px rgba(44, 40, 37, 0.06); transform: translateX(100%); }
.side-panel.dock-right.open { transform: translateX(0); }
.side-panel.dock-left { left: 0; border-right: 1px solid var(--border); box-shadow: 4px 0 20px rgba(44, 40, 37, 0.06); transform: translateX(-100%); }
.side-panel.dock-left.open { transform: translateX(0); }
/* Resize handle on the panel's inner edge (col-resize); makeResizable() wires the drag. */
.side-panel-resize { position: absolute; top: 0; bottom: 0; width: 6px; z-index: 1; cursor: col-resize; background: transparent; transition: background 80ms; }
.side-panel.dock-right .side-panel-resize { left: -3px; }
.side-panel.dock-left .side-panel-resize { right: -3px; }
.side-panel-resize:hover, .side-panel-resize.dragging { background: var(--text-muted); }
body.side-panel-resizing { cursor: col-resize; user-select: none; }
body.side-panel-resizing * { user-select: none !important; }
.side-panel-header { position: sticky; top: 0; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
.side-panel-header .side-panel-title { font-weight: 700; flex: 1; min-width: 0; }
.side-panel-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
.side-panel-footer { position: sticky; bottom: 0; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface); }

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
}

.modal-body { padding: 24px; }

.modal-error {
  margin: 0 24px 14px;
  background: rgba(196, 90, 60, 0.10);
  color: var(--danger);
  border: 1px solid rgba(196, 90, 60, 0.35);
  padding: 9px 12px;
  border-radius: 0;
  font-size: 13px;
}

.modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}

.modal-text { margin: 0; color: var(--text); }

/* ---------- toast ---------- */

#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
}

.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 10px 14px;
  color: var(--text);
  font-size: 13px;
  animation: toast-in 200ms ease;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.toast-info { border-left: 3px solid var(--text); }
.toast-success { border-left: 3px solid var(--success); }
.toast-error { border-left: 3px solid var(--danger); }
.toast-warning { border-left: 3px solid var(--warning); }
/* × dismiss button on every toast (DESIGN-SYSTEM.md L2.11). */
.toast-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}
.toast-dismiss:hover { color: var(--text); }

.toast-leaving {
  opacity: 0;
  transition: opacity 280ms;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- project / season / episode views ---------- */

.tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.tab {
  padding: 12px 22px;
  cursor: pointer;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--text); }

.tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
}

.season-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 10px;
  overflow: hidden;
}

.season-header {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: var(--surface);
  transition: background 0.15s;
}

.season-header:hover { background: var(--surface-hover); }

.season-header:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }

.season-header .title {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.season-header .meta {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.season-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-right: 4px;
  user-select: none;
}

.season-body {
  padding: 0 20px 18px;
  border-top: 1px solid var(--border);
}

.season-block.collapsed .season-body {
  display: none;
}

/* Project-level collapsible block — wraps a project's season blocks on
   BS home when the user has access to more than one project. Visually
   lighter than .season-block (no card chrome — just a clickable bar with
   the project name and a caret) so the seasons inside remain the visual
   focus. */
.project-block {
  margin-bottom: 18px;
}
.project-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.project-toggle:hover { background: var(--surface-hover); }
.project-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.project-toggle .title {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.project-toggle .meta {
  color: var(--text-muted);
  font-size: 13px;
}
.project-block.collapsed .project-body { display: none; }

.episode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.episode-row:last-child { border-bottom: none; }

.episode-code {
  font-family: var(--font-mono);
  color: var(--text-muted);
  margin-right: 8px;
  font-size: 0.85rem;
}

.episode-title { color: var(--text); }

/* ---------- table ---------- */

table.list {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
}
table.list th,
table.list td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
table.list tr:last-child td { border-bottom: none; }
table.list th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--bg);
}

/* ---------- loading ---------- */

.loading {
  color: var(--text-muted);
  padding: 24px;
  text-align: center;
}

/* ---------- utility ---------- */

.row { display: flex; gap: 8px; align-items: center; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.spacer { flex: 1; }
.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.hidden { display: none !important; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

/* ---------- user-menu dropdown (BRANDING.md §6 nav ladder) ---------- */

.user-menu-dropdown {
  position: relative;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--navy-border);
  color: var(--navy-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: border-color 0.15s;
}
.user-menu-trigger:hover { border-color: var(--navy-text); }

.user-menu-trigger .avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--navy-border);
  color: var(--navy-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  overflow: hidden;
}
.user-menu-trigger .avatar img {
  width: 100%; height: 100%; object-fit: cover;
}

/* Avatar primitive (DESIGN-SYSTEM L5.2) — ui.js avatar() emits .ui-avatar:
   image, else an initials monogram on a tinted tile; never an empty box.
   Distinct class from the user-menu trigger's .avatar span. Propagated for
   parity (no in-app consumer yet) — C8. */
.ui-avatar { flex: 0 0 auto; border: 1px solid var(--border); background: var(--accent-bg); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; overflow: hidden; line-height: 1; }
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-avatar-fill { flex: 1; min-height: 0; width: 100%; height: 100%; font-size: 24px; border: 0; }

.user-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  z-index: 50;
  display: none;
  box-shadow: 0 8px 24px rgba(11, 26, 50, 0.15);
}
.user-menu-panel.open { display: block; }

.user-menu-panel .menu-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.user-menu-panel .menu-header .name { font-weight: 600; color: var(--text); }
.user-menu-panel .menu-header .email { font-size: 12px; color: var(--text-muted); }

/* Current Org row — Session 3 of multi-tenant foundation (2026-05-20). */
.user-menu-panel .menu-current-org {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  cursor: default;
  user-select: none;
}
.user-menu-panel .menu-current-org.is-switchable { cursor: pointer; }
.user-menu-panel .menu-current-org.is-switchable:hover { background: var(--surface-hover); }
.user-menu-panel .menu-current-org .current-org-name { color: var(--text); margin-left: 2px; }
.user-menu-panel .menu-current-org .chevron { float: right; font-size: 10px; }
.user-menu-panel .menu-current-org-list { padding: 4px 0; border-bottom: 1px solid var(--border); }
.user-menu-panel .menu-current-org-list[hidden] { display: none; }
.user-menu-panel .menu-current-org-list button {
  padding-left: 28px; font-size: 11px; font-weight: 500;
}
.user-menu-panel .menu-current-org-list button.is-current::before {
  content: '✓'; margin-left: -14px; margin-right: 6px; color: var(--accent, #5b8def);
}

.user-menu-panel a, .user-menu-panel button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  padding: 12px 16px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.user-menu-panel a:hover, .user-menu-panel button:hover {
  background: var(--surface-hover);
  text-decoration: none;
}
/* When the user menu sits inside `.app-header nav` (e.g. admin pages), the
   generic `.app-header nav a` colour (muted navy) would otherwise win on
   specificity and wash the dropdown links out light. Pin them to the canonical
   dark text so the menu reads the same on every page. (2026-05-29) */
.app-header nav .user-menu-panel a,
.app-header nav .user-menu-panel button {
  color: var(--text);
}

/* ---------- responsive ---------- */

@media (max-width: 768px) {
  .app-header { padding: 12px 20px; }
  .app-header .brand .app-label { display: none; }
  .hero { padding: 36px 20px 28px; }
  .hero-controls { position: static; justify-content: center; margin-bottom: 18px; }
  .hero-logo svg { height: 72px; }
  .container, .container-narrow { padding: 20px 16px; }
  .card-grid { grid-template-columns: 1fr; }
}

/* Cross-subdomain auth handoff interstitial — shown briefly while
   mintHandoffToken runs and the page redirects. Sentence-case copy,
   sharp corners, navy text on cream surface (BRANDING §6/§8). */
.handoff-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.01em;
  z-index: 1000;
}
.handoff-overlay.open { display: flex; }