/* =====================================================================
   Board explorer — real Pulse + Nexus state, one fold, tab-switched.
   Each panel mirrors its product's own real app shell/palette (per
   board.css / nexus-board.css in the Pulse/Nexus landing repos):
   Pulse's real app is a dark slate UI; Nexus's real app is a light one.
   That's why the two panels below deliberately look different from
   each other and from the rest of this page.
   ===================================================================== */

.board-explorer {
  margin-top: 3rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--hair);
}

.board-explorer__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  text-align: center;
  margin: 0 0 1.2rem;
}

/* ---------- tab bar ---------- */
.board-tabbar {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0 auto 1.1rem;
  width: fit-content;
  padding: 4px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  background: var(--surface);
}

.board-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mid);
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.board-tab img { opacity: 0.75; transition: opacity 180ms var(--ease); }

.board-tab:hover { color: var(--ink); }

.board-tab.is-active {
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hair-strong);
}

.board-tab.is-active img { opacity: 1; }

.board-tab[data-board-tab="pulse"].is-active { color: var(--pulse-cyan); }
.board-tab[data-board-tab="nexus"].is-active { color: #a78bfa; }

/* ---------- timing loader: tracks the 6s auto-advance cadence ---------- */
.board-loader {
  max-width: 880px;
  margin: 0 auto 10px;
  height: 3px;
  border-radius: 2px;
  background: var(--hair-strong);
  overflow: hidden;
}

.board-loader__bar {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: var(--gradient-demo);
  animation: board-loader-fill 6000ms linear;
  animation-play-state: running;
}

.board-loader.is-hidden { opacity: 0; }

@keyframes board-loader-fill {
  from { width: 0%; }
  to { width: 100%; }
}

/* ---------- frame: one fold, internal scroll ---------- */
.board-frame {
  max-width: 880px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hair-strong);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
}

.pulse-board,
.nexus-board {
  height: min(620px, 72vh);
  overflow-y: auto;
  overflow-x: hidden;
}

/* =====================================================================
   PULSE — dark slate app shell
   ===================================================================== */
.pulse-board {
  --pb-bg: #0b1220;
  --pb-surface: #111a2e;
  --pb-surface-2: #16213a;
  --pb-line: rgba(255, 255, 255, 0.08);
  --pb-ink: #eef2f9;
  --pb-copy: #b7c1d4;
  --pb-muted: #7c8aa3;
  --pb-done: #10b981;
  --pb-progress: #38bdf8;
  --pb-rejected: #fb7185;
  --pb-todo: #64748b;
  background: var(--pb-bg);
  color: var(--pb-copy);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}

.pb-topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: var(--pb-surface);
  border-bottom: 1px solid var(--pb-line);
}

.pb-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--pb-ink);
}

.pb-topbar__brand img { width: 16px; height: 16px; }

.pb-topbar__crumb {
  font-size: 12.5px;
  color: var(--pb-muted);
}

.pb-topbar__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--pb-muted);
}

.pb-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pb-progress);
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.8);
}

.pb-body {
  padding: 18px;
}

.pb-lineage {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1.4rem;
}

.pb-lineage__step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-line);
  min-width: 132px;
}

.pb-lineage__arrow {
  color: var(--pb-muted);
  font-size: 13px;
}

.pb-lineage__pill {
  display: inline-flex;
  align-self: flex-start;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
}

.pb-pill--done { background: rgba(16, 185, 129, 0.16); color: var(--pb-done); }
.pb-pill--progress { background: rgba(56, 189, 248, 0.16); color: var(--pb-progress); }

.pb-lineage__label {
  font-size: 11px;
  color: var(--pb-muted);
}

.pb-lineage__title {
  font-size: 12.5px;
  color: var(--pb-ink);
  line-height: 1.3;
}

.pb-scores {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 1.6rem;
}

.pb-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  padding: 10px 6px;
  border-radius: 10px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-line);
}

.pb-score--wide { grid-column: span 5; flex-direction: row; justify-content: center; gap: 10px; }

.pb-score__v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--pb-ink);
}

.pb-score__l {
  font-size: 10px;
  color: var(--pb-muted);
  max-width: 14ch;
}

.pb-score--wide .pb-score__l { max-width: none; }

@media (max-width: 640px) {
  .pb-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-score--wide { grid-column: span 2; flex-direction: column; }
}

.pb-section-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pb-muted);
  margin: 0 0 0.8rem;
}

.pb-kanban {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 1.6rem;
}

@media (max-width: 640px) {
  .pb-kanban { grid-template-columns: 1fr; }
}

.pb-column__head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pb-copy);
  margin-bottom: 8px;
}

.pb-column__head em {
  font-style: normal;
  margin-left: auto;
  color: var(--pb-muted);
}

.pb-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pb-dot--done { background: var(--pb-done); }
.pb-dot--rejected { background: var(--pb-rejected); }
.pb-dot--todo { background: var(--pb-todo); }

.pb-card {
  padding: 10px 11px;
  border-radius: 8px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-line);
  margin-bottom: 8px;
  cursor: default;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}

.pb-card:hover { border-color: rgba(255, 255, 255, 0.18); background: var(--pb-surface-2); }

.pb-card p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--pb-ink);
}

.pb-card__labels { display: flex; gap: 5px; flex-wrap: wrap; }

.pb-tag {
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--pb-muted);
}

.pb-card--expand summary {
  cursor: pointer;
  list-style: none;
}

.pb-card--expand summary::-webkit-details-marker { display: none; }

.pb-card--expand[open] { border-color: rgba(251, 113, 133, 0.4); }

.pb-card__note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--pb-line);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--pb-rejected);
}

.pb-next {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--pb-copy);
}

.pb-next li { margin-bottom: 6px; }
.pb-next code { color: var(--pb-ink); }

/* =====================================================================
   NEXUS — light app shell
   ===================================================================== */
.nexus-board {
  --nb2-accent: #6857e5;
  --nb2-bg: #f8fafc;
  --nb2-surface: #ffffff;
  --nb2-line: #e2e8f0;
  --nb2-ink: #0f172a;
  --nb2-copy: #334155;
  --nb2-muted: #64748b;
  background: var(--nb2-bg);
  color: var(--nb2-copy);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}

.nb2-topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: var(--nb2-surface);
  border-bottom: 1px solid var(--nb2-line);
}

.nb2-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--nb2-ink);
}

.nb2-topbar__brand img { width: 16px; height: 16px; }

.nb2-topbar__crumb {
  font-size: 12.5px;
  color: var(--nb2-muted);
}

.nb2-body {
  padding: 18px;
}

.nb2-section-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nb2-muted);
  margin: 0 0 0.8rem;
}

.nb2-section-title:not(:first-child) { margin-top: 1.6rem; }

.nb2-section-title code {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--nb2-copy);
}

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

.nb2-agent {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--nb2-surface);
  border: 1px solid var(--nb2-line);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nb2-agent.is-active {
  border-color: rgba(104, 87, 229, 0.4);
  box-shadow: 0 0 0 1px rgba(104, 87, 229, 0.15);
}

.nb2-agent__id {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--nb2-ink);
}

.nb2-agent__role {
  font-size: 10.5px;
  color: var(--nb2-muted);
}

.nb2-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--nb2-line);
}

.nb2-event {
  position: relative;
  padding: 0 0 14px 18px;
}

.nb2-event__dot {
  position: absolute;
  left: -6px;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--nb2-surface);
  border: 2px solid var(--nb2-accent);
}

.nb2-event.is-final .nb2-event__dot {
  background: var(--nb2-accent);
}

.nb2-event__body {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.nb2-event__type {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--nb2-accent);
}

.nb2-event__actor {
  font-size: 11.5px;
  color: var(--nb2-copy);
}

.nb2-event__actor code {
  font-family: "IBM Plex Mono", monospace;
  color: var(--nb2-ink);
}

.nb2-event__time {
  margin-left: auto;
  font-size: 11px;
  color: var(--nb2-muted);
  font-variant-numeric: tabular-nums;
}

.nb2-event__expand summary {
  cursor: pointer;
  list-style: none;
}

.nb2-event__expand summary::-webkit-details-marker { display: none; }

.nb2-result {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--nb2-surface);
  border: 1px solid var(--nb2-line);
}

.nb2-result p {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--nb2-copy);
}

.nb2-result p:last-child { margin-bottom: 0; }

.nb2-result strong { color: var(--nb2-ink); }

.nb2-result code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  color: var(--nb2-accent);
  background: rgba(104, 87, 229, 0.08);
  padding: 1px 4px;
  border-radius: 3px;
}