/* ═══════════════════════════════════════════
   HQ Team View Styles
   Roster + analytics: leaderboard summary,
   department grid, agent profile drawer.
   Depends on tokens.css.
   ═══════════════════════════════════════════ */

/* ── View shell ────────────────────────────── */
.team-view {
  flex: 1;
  overflow: auto;
  padding: var(--space-5) var(--space-7);
}

/* ── Header ────────────────────────────────── */
.team-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.team-header__left {
  flex: 1;
  min-width: 0;
}

.team-header__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 900;
  line-height: 1.1;
}

.team-header__sub {
  font-size: var(--text-sm);
  color: var(--color-dim);
  margin-top: 2px;
}

/* ── Search input ──────────────────────────── */
.team-search {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  padding: 8px 12px;
  font-size: var(--text-base);
  font-family: var(--font-body);
  outline: none;
  width: 260px;
  max-width: 100%;
  min-height: 40px;
  transition: border-color var(--transition-base);
}

.team-search::placeholder { color: var(--color-muted); }
.team-search:focus        { border-color: var(--color-amber-glow); }

/* ═══════════════════════════════════════════
   Leaderboard section
   ═══════════════════════════════════════════ */
.team-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.team-leaderboard__loading,
.team-leaderboard__error {
  color: var(--color-dim);
  font-size: var(--text-base);
  padding: 20px 4px;
  text-align: center;
}

/* Period tiles */
.lb-periods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.lb-tile {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 90px;
}

.lb-tile__label {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-dim);
}

.lb-tile__tokens {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 900;
  line-height: 1;
  color: var(--color-amber);
  margin-top: 4px;
}

/* Rows: top agents + most active dept side-by-side */
.lb-rows {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
}

.lb-row {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
}

.lb-row__title {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-dim);
  margin-bottom: 10px;
}

.lb-row__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lb-empty {
  color: var(--color-dim);
  font-size: var(--text-base);
  padding: 8px 0;
}

/* Top-5 agent row entry */
.lb-agent {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 6px 8px;
  cursor: pointer;
  font-family: inherit;
  color: var(--color-text);
  text-align: left;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  width: 100%;
}

.lb-agent:hover {
  background: var(--color-panel2);
  border-color: var(--color-border);
}

.lb-agent:focus-visible {
  outline: none;
  border-color: var(--color-amber-glow);
  box-shadow: 0 0 0 1px var(--color-amber-glow);
}

.lb-agent__rank {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-dim);
  width: 18px;
  text-align: right;
  flex-shrink: 0;
}

.lb-agent__body {
  flex: 1;
  min-width: 0;
}

.lb-agent__name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-agent__count {
  font-size: var(--text-sm);
  color: var(--color-dim);
  margin-top: 1px;
}

/* Most active department card */
.lb-dept {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 100%;
  --dept-color: var(--color-amber);
}

.lb-dept--empty {
  color: var(--color-dim);
  font-size: var(--text-base);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.lb-dept__label {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-dim);
}

.lb-dept__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  line-height: 1.1;
  color: var(--dept-color);
  margin-top: 2px;
}

.lb-dept__count {
  font-size: var(--text-sm);
  color: var(--color-dim);
  margin-top: 2px;
}

.lb-dept__bar {
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  margin-top: 10px;
  overflow: hidden;
}

.lb-dept__bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--dept-color);
  border-radius: 2px;
}

/* ═══════════════════════════════════════════
   Hierarchy section header (Team → Hierarchy)
   ─ Wraps the consolidated org-chart view.
   ─ Tree↔orgchart toggle removed 2026-04-28 in
     favor of a single canonical view (per
     docs/decisions/active/orgchart-redesign-2026-04-28.md M6).
   ═══════════════════════════════════════════ */

.team-orgchart-section {
  margin-bottom: 28px;
}

.team-orgchart-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px 0;
  flex-wrap: wrap;
}

.team-orgchart-section__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-dim);
  margin: 0;
}

/* ═══════════════════════════════════════════
   Department grid (preserved layout)
   ═══════════════════════════════════════════ */
.team-depts {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.team-dept__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}

.team-dept__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.team-dept__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.team-dept__count {
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-weight: 700;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}

.team-card {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  min-height: 56px;
}

.team-card:hover {
  border-color: var(--color-muted);
  background: var(--color-panel2);
}

.team-card:focus-visible {
  outline: none;
  border-color: var(--color-amber-glow);
  box-shadow: 0 0 0 1px var(--color-amber-glow);
}

.team-card__body {
  flex: 1;
  min-width: 0;
}

.team-card__name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-card__role {
  font-size: var(--text-sm);
  color: var(--color-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-avatar {
  border-radius: 50%;
  flex-shrink: 0;
  border-style: solid;
  border-width: 1.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.team-empty {
  color: var(--color-dim);
  font-size: var(--text-base);
  padding: 40px 4px;
  text-align: center;
}

/* ═══════════════════════════════════════════
   Profile drawer
   ═══════════════════════════════════════════ */

.profile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 40;
}

.profile-drawer-backdrop.is-open {
  opacity: 1;
}

.profile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 100vw;
  background: var(--color-panel);
  border-left: 1px solid var(--color-border);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
  z-index: 41;
  transform: translateX(100%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
  /* iOS notch / status bar / Dynamic Island — see .task-drawer note. */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.profile-drawer.is-open {
  transform: translateX(0);
}

.profile-drawer__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.profile-drawer__loading,
.profile-drawer__error {
  padding: 40px 20px;
  color: var(--color-dim);
  font-size: var(--text-base);
  text-align: center;
  position: relative;
}

.profile-drawer__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  z-index: 2;
}

.profile-drawer__close:hover {
  border-color: var(--color-amber-glow);
  color: var(--color-amber);
}

.profile-drawer__close:focus-visible {
  outline: none;
  border-color: var(--color-amber-glow);
  box-shadow: 0 0 0 1px var(--color-amber-glow);
}

/* Profile header */
.profile-header {
  position: relative;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.profile-header__body {
  flex: 1;
  min-width: 0;
  padding-right: 40px; /* space for close button */
}

.profile-header__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  line-height: 1.1;
}

.profile-header__role {
  font-size: var(--text-sm);
  color: var(--color-dim);
  margin-top: 3px;
}

.profile-header__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.profile-chip {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.profile-chip--model {
  background: var(--color-panel2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.profile-chip--pinned {
  background: var(--color-amber-dim);
  color: var(--color-amber);
}

/* Scrollable body */
.profile-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.profile-section__title {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-dim);
  margin: 0 0 10px 0;
}

.profile-empty {
  color: var(--color-dim);
  font-size: var(--text-base);
  padding: 8px 0;
}

/* ── Reports-to row ────────────────────────── */
.profile-reports-to {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
  margin-bottom: -4px; /* tighten against the Usage section below */
}

.profile-reports-to__label {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-dim);
  flex-shrink: 0;
}

.profile-reports-to__link {
  background: transparent;
  border: none;
  padding: 4px 2px;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-amber);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px; /* tap target */
  display: inline-flex;
  align-items: center;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  transition: color var(--transition-fast);
}

.profile-reports-to__link:hover {
  color: var(--color-amber-glow);
}

.profile-reports-to__link:focus-visible {
  outline: none;
  color: var(--color-amber-glow);
  box-shadow: 0 0 0 1px var(--color-amber-glow);
  border-radius: var(--radius-sm);
}

.profile-reports-to__empty {
  font-size: var(--text-base);
  color: var(--color-muted);
  font-weight: 700;
}

/* ── Stat grid ─────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.stat-tile {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-tile__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-dim);
}

.stat-tile__msgs {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  margin-top: 4px;
}

.stat-tile__msgs-caption {
  font-size: var(--text-xs);
  color: var(--color-dim);
  margin-top: -1px;
}

.stat-tile__tokens {
  font-size: var(--text-xs);
  color: var(--color-dim);
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.stat-tile__last {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: 4px;
}

/* ── Markdown definition pane ──────────────── */
.profile-markdown {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.55;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  max-height: 340px;
  overflow-y: auto;
}

.profile-markdown--empty {
  color: var(--color-dim);
  font-style: italic;
}

.profile-markdown--raw {
  white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.profile-markdown h1,
.profile-markdown h2,
.profile-markdown h3,
.profile-markdown h4 {
  font-family: var(--font-display);
  font-weight: 900;
  margin: 14px 0 6px 0;
  line-height: 1.2;
}

.profile-markdown h1 { font-size: var(--text-xl); }
.profile-markdown h2 { font-size: var(--text-lg); }
.profile-markdown h3 { font-size: var(--text-md); color: var(--color-amber); }
.profile-markdown h4 { font-size: var(--text-base); color: var(--color-dim); text-transform: uppercase; letter-spacing: 1.5px; }

.profile-markdown p {
  margin: 6px 0;
}

.profile-markdown ul,
.profile-markdown ol {
  padding-left: 20px;
  margin: 6px 0;
}

.profile-markdown li {
  margin: 3px 0;
}

.profile-markdown code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-panel2);
  border: 1px solid var(--color-border);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}

.profile-markdown pre {
  background: var(--color-panel2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  overflow-x: auto;
  margin: 8px 0;
}

.profile-markdown pre code {
  background: transparent;
  border: none;
  padding: 0;
}

.profile-markdown blockquote {
  border-left: 3px solid var(--color-amber-glow);
  padding-left: 10px;
  margin: 8px 0;
  color: var(--color-dim);
}

.profile-markdown a {
  color: var(--color-amber);
  text-decoration: underline;
}

.profile-markdown strong { color: var(--color-text); }

/* ── Activity list ─────────────────────────── */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.activity-row {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.activity-row--user {
  background: var(--color-amber-dim);
  border-color: var(--color-amber-glow);
}

.activity-row--expandable {
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.activity-row--expandable:hover {
  border-color: var(--color-muted);
}

.activity-row__meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-dim);
}

.activity-row__who {
  font-weight: 700;
}

.activity-row--user .activity-row__who {
  color: var(--color-amber);
}

.activity-row__content {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.45;
  word-break: break-word;
}

/* ── Task list ─────────────────────────────── */
.task-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.task-row {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.task-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.task-row__body {
  flex: 1;
  min-width: 0;
}

.task-row__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
}

.task-row__meta {
  font-size: var(--text-xs);
  color: var(--color-dim);
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ── Action footer ─────────────────────────── */
.profile-actions {
  display: flex;
  gap: 8px;
  padding: 12px 20px 16px 20px;
  border-top: 1px solid var(--color-border);
  background: var(--color-panel);
}

.profile-btn {
  flex: 1;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.profile-btn--primary {
  background: var(--color-amber);
  color: var(--color-bg);
  border: 1px solid var(--color-amber);
}

.profile-btn--primary:hover {
  background: #e4b330;
}

.profile-btn--ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.profile-btn--ghost:hover {
  border-color: var(--color-amber-glow);
  color: var(--color-amber);
}

.profile-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-amber-glow);
}

/* Prevent body scroll while drawer is open */
body.is-drawer-open {
  overflow: hidden;
}

/* ═══════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .team-view {
    padding: var(--space-4);
  }

  .team-header {
    flex-direction: column;
    align-items: stretch;
  }

  .team-search {
    width: 100%;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  /* Leaderboard reflows */
  .lb-periods {
    grid-template-columns: 1fr;
  }

  .lb-rows {
    grid-template-columns: 1fr;
  }

  /* Drawer is full-width on phone */
  .profile-drawer {
    width: 100vw;
    border-left: none;
  }

  /* 2×2 stat grid on mobile */
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .team-view {
    padding: var(--space-3);
  }

  .team-header__title {
    font-size: var(--text-2xl);
  }

  .team-card {
    padding: 8px 10px;
    gap: 8px;
    min-height: 52px;
  }

  .team-card__name {
    font-size: var(--text-md);
  }

  .lb-tile {
    padding: 12px 14px;
    min-height: 80px;
  }

  .lb-tile__tokens {
    font-size: var(--text-2xl);
  }

  .profile-body {
    padding: 12px 14px 20px 14px;
  }

  .profile-header {
    padding: 14px 14px;
  }

  .profile-actions {
    padding: 10px 14px 14px 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Org Chart — single canonical hierarchy view (Reference 1 cards).
   ─ See docs/decisions/active/orgchart-redesign-2026-04-28.md.
   ─ Top-down vertical flow at >600px; vertical-list with left-rail
     indent at ≤600px (no horizontal scroll on mobile).
   ─ Department color surfaces as the card's top border (4px).
   ─ Collapse state persisted in `hq.team.tree.collapsed`
     localStorage key (key name preserved from the prior tree view).
   ═══════════════════════════════════════════════════════════════ */

.team-orgchart {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 14px;
  /* Desktop: chart wraps to multiple rows when sibling-count overflows
     viewport width (see desktop-orgchart-wrap-fix.md). No more horizontal
     scroll — wide tiers (e.g. trade specialists, marketing platforms)
     spill onto rows 2+ within the same parent group.
     Mobile (≤600px) uses vertical-list mode (separate ruleset below). */
  overflow-x: hidden;
}

.orgchart-root,
.orgchart-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Root UL: founder card centered. */
.orgchart-root {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Children UL — desktop: row(s) of siblings under parent. Wraps to
   multiple rows when total sibling width exceeds viewport. The bus
   geometry is per-node (see .orgchart-node::before) so it survives wrap. */
.orgchart-children {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px 24px;             /* row-gap × column-gap — row-gap matters when wrapped */
  padding-top: 24px;
  margin-top: 4px;
  position: relative;
}

/* Each node: card on top, children UL (if expanded) beneath.
   Per-node bus segment + vertical drop are rendered as pseudo-elements
   so wrap-to-row-2 keeps connectors attached to each card individually. */
.orgchart-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 0;
}

/* Per-node horizontal bus segment.
   ───────────────────────────────────
   Each node draws its own slice of the horizontal bus, overhanging
   12px (half the column gap) on each side. Adjacent siblings' slices
   meet in the middle of the gap, visually rendering as a continuous
   bus across the row. When the row wraps, each row's slices form a
   bus across that row's siblings — no absolute-positioned bus needed.
   first-child / last-child trim the outer ends so the bus doesn't
   extend past the row's leftmost/rightmost card. */
.orgchart-node::after {
  content: "";
  position: absolute;
  top: -12px;
  left: -12px;
  right: -12px;
  height: 1px;
  background: var(--color-border);
}
.orgchart-children > .orgchart-node:first-child::after {
  left: 50%;
}
.orgchart-children > .orgchart-node:last-child::after {
  right: 50%;
}
/* Single-child rows: the bus segment is redundant — the drop alone reads cleaner. */
.orgchart-children > .orgchart-node:only-child::after {
  display: none;
}

/* Vertical drop from the bus to the top of this child's card. */
.orgchart-node::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 1px;
  height: 12px;
  background: var(--color-border);
}

/* Founder (root) has no incoming connector or bus segment. */
.orgchart-root > .orgchart-node::before,
.orgchart-root > .orgchart-node::after {
  display: none;
}

/* Stem descending from a parent card with visible children. */
.orgchart-node[data-has-children="1"] > .org-card {
  position: relative;
}
.orgchart-node[data-has-children="1"] > .org-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 1px;
  height: 12px;
  background: var(--color-border);
}
/* Collapsed parent: stem is hidden so the visual matches the lack
   of children below. Distinguished via [aria-expanded="false"]
   which the JS sets when the user collapses (and on default-collapse). */
.orgchart-node[data-has-children="1"][aria-expanded="false"] > .org-card::after {
  display: none;
}

/* ───── The card itself (Reference 1 style). ───── */
.org-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Responsive width: cards shrink modestly on narrow desktop widths
     (1024px) to fit more siblings per row, while preserving readable
     min on phones in landscape. Wrap covers the cases where even the
     min won't fit — so this clamp tunes density, not overflow. */
  width: 220px;
  min-width: 190px;
  max-width: 240px;
  padding: 12px 14px;
  background: var(--color-panel2);
  border: 1px solid var(--color-border);
  /* Department-color top band — Reference 1's most distinctive
     visual element. 4px gives a clear color stripe without
     dominating the card's overall weight. */
  border-top: 4px solid var(--org-card-color, var(--color-amber));
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              transform var(--transition-fast), box-shadow var(--transition-fast);
}

.org-card:hover {
  background: var(--color-panel);
  border-color: var(--org-card-color, var(--color-amber));
  border-top-color: var(--org-card-color, var(--color-amber));
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.org-card:focus-visible {
  outline: none;
  border-color: var(--org-card-color, var(--color-amber));
  border-top-color: var(--org-card-color, var(--color-amber));
  box-shadow: 0 0 0 2px var(--color-amber-glow);
}

.org-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.org-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.org-card__name {
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-card__role {
  font-size: var(--text-xs);
  color: var(--color-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-card__reports {
  margin-top: 2px;
  font-size: 10px;
  color: var(--color-dim);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px dashed var(--color-border);
}

.org-card__manages {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--org-card-color, var(--color-amber));
  font-weight: 700;
}

/* Minus-circle / plus-circle collapse toggle.
   The visual affordance is a circular outline around the glyph —
   matches Reference 1's bottom-of-card collapse indicator. */
.org-card__toggle {
  width: 28px;
  height: 28px;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1;
  background: var(--color-panel);
  /* Circular border + dept-color tint when expanded; dim when collapsed.
     Both states reuse the existing dept-color CSS var. */
  border: 1.5px solid var(--org-card-color, var(--color-border));
  border-radius: 50%;
  color: var(--org-card-color, var(--color-dim));
  cursor: pointer;
  padding: 0;
  transition: color var(--transition-fast), border-color var(--transition-fast),
              background var(--transition-fast), transform var(--transition-fast);
}

.org-card__toggle:hover {
  color: var(--color-amber);
  border-color: var(--color-amber);
  background: var(--color-panel2);
  transform: scale(1.05);
}

.org-card__toggle:focus-visible {
  outline: none;
  color: var(--color-amber);
  border-color: var(--color-amber);
  box-shadow: 0 0 0 2px var(--color-amber-glow);
}

/* ─────────────────────────────────────────────────
   Mobile (≤ 600px): vertical-list mode.
   Siblings stack downward as an indented list under the parent,
   with a single left-side guide rail. Replaces the prior
   left-to-right rotation (which created horizontal scroll).
   See orgchart-redesign-2026-04-28.md → M5.
   ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  .team-orgchart {
    padding: 14px 10px;
    /* Vertical-list mode has no horizontal overflow — nothing to scroll. */
    overflow-x: visible;
  }

  .orgchart-root {
    justify-content: flex-start;
    align-items: flex-start;
  }

  /* Children stack vertically with a left-rail indent guide.
     14px indent matches the prior tree view's tree-children indent
     so the mental model carries — same data, same depth gradient. */
  .orgchart-children {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-top: 14px;
    padding-left: 14px;
    margin-top: 0;
    margin-left: 8px;
    border-left: 1px solid var(--color-border);
  }

  /* Bus is no longer needed — the left-border on .orgchart-children
     is the guide rail. Hide the per-node bus segments (::after on
     each .orgchart-node) so they don't render as stray horizontal
     ticks at the top of each card in vertical-list mode. */
  .orgchart-node::after {
    display: none;
  }

  .orgchart-node {
    /* Each child remains a column (card on top, its own children
       UL — if expanded — beneath). Width fills the available row. */
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  /* Drop rotates: short horizontal tick from the rail to each card. */
  .orgchart-node::before {
    top: 22px;            /* roughly mid-card vertical center for 28px avatar */
    left: -14px;
    width: 14px;
    height: 1px;
    transform: none;
  }

  /* No vertical stem out of an expanded parent — the rail handles it. */
  .orgchart-node[data-has-children="1"] > .org-card::after {
    display: none;
  }

  /* Mobile cards span full row; min/max sizing dropped. */
  .org-card {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex-shrink: 0;
    padding: 10px 12px;
  }

  .org-card__name {
    font-size: var(--text-md);
  }
}

/* Even tighter on very small phones. */
@media (max-width: 380px) {
  .team-orgchart {
    padding: 10px 8px;
  }

  .orgchart-children {
    padding-left: 10px;
    margin-left: 6px;
  }

  .orgchart-node::before {
    left: -10px;
    width: 10px;
  }

  .org-card {
    padding: 8px 10px;
  }
}

/* ── Option A enrichment (2026-07-12): live-state + flat search list ── */
.org-card__live {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px; flex: none;
}
.org-card__live--on  { background: var(--color-green, #7fb069); }
.org-card__live--off { background: #6d655a; }
.org-card__wake {
  margin-left: 7px; font-size: 9px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: #9c9284; border: 1px solid #6d655a;
  border-radius: 4px; padding: 1px 5px; vertical-align: 2px;
}
.orgchart-root--flat { list-style: none; margin: 0; padding: 0; }
.orgchart-root--flat .orgchart-node { margin: 6px 0; }

/* ══════════════════════════════════════════════════════════════════
   Org chart v2 — prototype-A rows (Brian-picked 2026-07-12).
   Replaces the April card look. The nested <ul> structure and collapse
   machinery are unchanged; these rules restyle nodes as flat 48px rows
   with thin left indent guides (the roundtable-picker aesthetic) and
   NEUTRALIZE the old connector-line pseudo-elements.
   ══════════════════════════════════════════════════════════════════ */
.orgchart-node::before,
.orgchart-node::after { display: none !important; }
.orgchart-root, .orgchart-children {
  list-style: none; margin: 0; display: block; gap: 0;
}
.orgchart-root { padding: 0; }
.orgchart-children {
  padding: 0 0 0 10px;
  border-left: 1px solid var(--color-border, #3a352d);
  margin-left: 13px;
}
.orgchart-node { margin: 0; padding: 0; display: block; }
.org-row {
  display: flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 2px 8px 2px 0;
  border-bottom: 1px solid rgba(58, 53, 45, 0.55);
  cursor: pointer; -webkit-user-select: none; user-select: none;
  border-radius: 6px;
}
.org-row:hover, .org-row:focus-visible { background: rgba(212, 165, 116, 0.06); }
.org-row:focus-visible { outline: 2px solid var(--color-amber, #d4a574); outline-offset: -2px; }
.org-row__caret {
  width: 30px; height: 30px; flex: none; margin: 0 -2px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--color-dim, #9a9186); font-size: 10px;
  transition: transform 0.15s ease;
}
.org-row__caret.is-open { transform: rotate(90deg); color: var(--color-amber, #d4a574); }
.org-row__caret--blank { visibility: hidden; }
.org-row__main { flex: 1; min-width: 0; }
.org-row__name {
  font-size: 13.5px; font-weight: 600; color: var(--color-text, #e8e2d8);
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0;
}
.org-row__nm {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.org-row__sub {
  font-size: 11px; color: var(--color-dim, #9a9186);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.org-row__tag {
  font-size: 9px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; border-radius: 4px; padding: 1px 5px;
  white-space: nowrap; flex: none;
}
/* Phones: the dim dot already says parked — reclaim the width for names. */
@media (max-width: 480px) {
  .org-row__tag--wake { display: none; }
}
.org-row__tag--lead { color: var(--color-amber, #d4a574); border: 1px solid #a97e4e; }
.org-row__tag--wake { color: #9c9284; border: 1px solid #6d655a; }
.org-row__manages {
  flex: none; min-width: 22px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-variant-numeric: tabular-nums;
  color: var(--color-dim, #9a9186);
  border: 1px solid var(--color-border, #3a352d); border-radius: 999px;
}
.org-row__live { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.org-row__live--on  { background: var(--color-green, #7fb069); }
.org-row__live--off { background: #6d655a; }
@media (prefers-reduced-motion: reduce) { .org-row__caret { transition: none; } }

/* ── Lifetime spawn strip (2026-07-12 — Brian's agent-stats ask) ── */
.spawn-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.spawn-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.spawn-stat__value {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-amber);
}

.spawn-stat__label {
  font-size: 10px;
  color: var(--color-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}