/* ============================================================================
 * Crew coordination scenes — commander card (Option B header, ported from
 * CommanderHeader.module.css) + crew card (CrewCard.module.css). Chrome
 * tokens come from ctrl-ui.css; this file adds the two card bodies and the
 * the board stage layout and the lane diagram.
 * ==========================================================================*/

/* ---- Commander header (CommanderHeader.module.css) --------------------- */
.pf-header .ch-logo {
  position: relative;
  z-index: 1;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: contain;
}
.pf-header .ch-name {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--rail-icon-color);
  font: 700 14px/1 var(--ctrl-font-ui);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-header .ch-badge {
  margin-left: 0;
}
.pf-header .ch-working {
  position: relative;
  z-index: 1;
  flex: none;
  color: var(--ctrl-status-streaming);
  font: 700 12px/1 var(--ctrl-font-ui);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 160ms ease-out;
}
.pf-header .ch-working[data-on='true'] { opacity: 1; }
.pf-header .ch-right {
  position: relative;
  z-index: 1;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ch-crew {
  flex: none;
  height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 6px 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.46);
  color: #fff;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 220ms var(--ctrl-motion-spring), transform 220ms var(--ctrl-motion-spring);
}
.ch-crew[data-on='true'] { opacity: 1; transform: none; }
.ch-faces { display: inline-flex; align-items: center; }
.ch-face {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  margin-left: 3px;
  border-radius: 50%;
  background: var(--ctrl-bg-elevated-strong-base);
  box-shadow: inset 0 0 0 1.5px var(--face-ring, var(--ctrl-text-secondary));
  transition: box-shadow 200ms ease-out;
}
.ch-face:first-child { margin-left: 0; }
.ch-face img { width: 14px; height: 14px; border-radius: 3px; object-fit: contain; }
.ch-face[data-state='queued'], .ch-face[data-state='canceled'] { --face-ring: var(--ctrl-text-secondary); }
.ch-face[data-state='working'] { --face-ring: var(--ctrl-status-streaming); }
.ch-face[data-state='thinking'] { --face-ring: var(--ctrl-status-thinking); }
.ch-face[data-state='done'] { --face-ring: var(--ctrl-status-done); }
.ch-face[data-state='failed'] { --face-ring: var(--ctrl-status-blocked); }
.ch-face[data-state='interrupted'] { --face-ring: var(--ctrl-status-reviewing); }
.ch-btn {
  width: 24px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--ctrl-radius-sm);
  background: rgba(0, 0, 0, 0.46);
  color: #fff;
}

/* Commander terminal: lines start at the top; once they overflow the body
   scrolls to the newest line (termApi keeps scrollTop at the bottom). */
.cc-term {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.cc-term > div { flex: none; }
.cc-term .u { color: var(--ctrl-text-primary); }
.cc-term .sub { padding-left: 18px; color: var(--ctrl-text-primary); }
.cc-term .res { padding-left: 18px; color: var(--ctrl-text-secondary); }
.cc-term .u[data-msg] { padding-left: 18px; text-indent: -18px; }

/* ---- Crew card (CrewCard.module.css) ----------------------------------- */
.pf-frame.crew-card { --pane-accent: var(--ctrl-agent-cooper); }
.crew-card .pf-title { text-transform: uppercase; letter-spacing: 0.08em; }
.crew-card .pf-header .ch-right { margin-left: auto; }
.crew-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  font-family: var(--ctrl-font-ui);
  color: var(--ctrl-text-primary);
}
.crew-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 36px;
  flex: none;
  padding: 0 6px;
  overflow: hidden;
  border-bottom: 1px solid var(--ctrl-border-subtle);
}
.crew-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ctrl-text-secondary);
  font: 600 12px/1 var(--ctrl-font-ui);
  white-space: nowrap;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.crew-tab[aria-selected='true'] {
  color: var(--ctrl-text-primary);
  border-bottom-color: var(--pane-accent, var(--ctrl-accent-primary));
}
.crew-tab img { width: 14px; height: 14px; object-fit: contain; flex: none; }
.crew-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--crew-state-color);
  transition: background 200ms ease-out;
}
.crew-dot[data-live='true'] { animation: crew-pulse 1.4s ease-in-out infinite; }
@keyframes crew-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.crew-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px;
  overflow: hidden;
}
.crew-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--ctrl-border-subtle);
  border-radius: var(--ctrl-radius-sm);
  background: var(--ctrl-bg-inset);
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms var(--ctrl-motion-spring), transform 260ms var(--ctrl-motion-spring);
}
.crew-tile[data-on='true'] { opacity: 1; transform: none; }
.crew-tileHead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crew-tileHead img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.crew-name {
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--ctrl-text-primary);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crew-state {
  flex: none;
  color: var(--crew-state-color);
  font-family: var(--ctrl-font-mono);
  font-size: 10.5px;
  transition: color 200ms ease-out;
}
.crew-line {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--ctrl-text-primary);
  font-size: 12.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  min-height: 2.9em;
}

.crew-root [data-state='queued'], .crew-root [data-state='canceled'] { --crew-state-color: var(--ctrl-text-secondary); }
.crew-root [data-state='working'] { --crew-state-color: var(--ctrl-status-streaming); }
.crew-root [data-state='thinking'] { --crew-state-color: var(--ctrl-status-thinking); }
.crew-root [data-state='done'] { --crew-state-color: var(--ctrl-status-done); }
.crew-root [data-state='failed'] { --crew-state-color: var(--ctrl-status-blocked); }
.crew-root [data-state='interrupted'] { --crew-state-color: var(--ctrl-status-reviewing); }

/* ---- Stage layouts ------------------------------------------------------ */
.crew-demo { container-type: inline-size; }
.crew-demo .vd-stage { height: 560px; }
.crew-demo .vd-card[data-spawned='false'] {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
}
.crew-demo .vd-card {
  transition:
    opacity 320ms var(--ctrl-motion-spring),
    transform 320ms var(--ctrl-motion-spring),
    left 320ms var(--ctrl-motion-spring),
    top 320ms var(--ctrl-motion-spring),
    width 320ms var(--ctrl-motion-spring),
    height 320ms var(--ctrl-motion-spring);
}

/* board: commander left, crew card right (the app places a new crew
   card 24px to the right of its commander). */
.crew-demo .vd-stage { height: 520px; }
.crew-demo .cc-card { left: 3%; top: 40px; width: 46%; height: 380px; }
.crew-demo .crew-card { right: 3%; top: 92px; width: 46%; height: 380px; }

@container (max-width: 900px) {
  .crew-demo .vd-stage { height: 700px; }
  .crew-demo .cc-card { left: 14px; right: 14px; width: auto; top: 18px; height: 300px; }
  .crew-demo .crew-card { left: 14px; right: 14px; width: auto; top: 334px; height: 300px; }
}
@container (max-width: 560px) {
  .crew-demo .cc-card { height: 270px; }
  .crew-demo .crew-card { top: 304px; height: 330px; }
  .crew-grid { grid-template-columns: 1fr; }
  .crew-line { -webkit-line-clamp: 1; min-height: 0; }
  .ch-badge { display: none; }
}
@container (max-width: 420px) {
  /* Narrow card: the name keeps its room; the live state still shows in the face rings. */
  .crew-demo .pf-header .ch-working { display: none; }
}

/* ---- Lane diagram ------------------------------------------------- */
.lanes-demo { container-type: inline-size; }
.lanes-stage {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.6);
  padding: 22px 26px;
}
.lanes-stage .vd-backdrop { z-index: 0; }
.lanes-stage .vd-backdrop-tint { z-index: 0; background: rgba(2, 4, 10, 0.58); }
.lanes-svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; font-family: var(--ctrl-font-ui); }
@container (max-width: 640px) {
  .lanes-stage { padding: 14px 10px; }
}
.lanes-svg .node { fill: color-mix(in srgb, var(--ctrl-bg-surface-base) 86%, transparent); stroke: var(--ctrl-glass-border); }
.lanes-svg .name { fill: var(--ctrl-text-primary); font-size: 13px; font-weight: 700; }
.lanes-svg .sub { fill: var(--ctrl-text-secondary); font-size: 10.5px; font-family: var(--ctrl-font-mono); }
.lanes-svg .mono { fill: var(--ctrl-text-primary); font-size: 11px; font-family: var(--ctrl-font-mono); }
.lanes-svg .lane { fill: none; stroke: var(--lane, var(--ctrl-text-secondary)); stroke-width: 1.5; opacity: 0.55; }
.lanes-svg .pulse { fill: none; stroke: var(--lane, var(--ctrl-accent-secondary)); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 26 400; stroke-dashoffset: 426; animation: lane-pulse var(--lane-dur, 3.2s) linear infinite; animation-delay: var(--lane-delay, 0s); }
@keyframes lane-pulse { to { stroke-dashoffset: 0; } }
.lanes-svg .state { font-family: var(--ctrl-font-mono); font-size: 10.5px; }
.lanes-svg .ring { fill: var(--ctrl-bg-elevated-strong-base); stroke: var(--ring, var(--ctrl-text-secondary)); stroke-width: 1.5; }
@media (prefers-reduced-motion: reduce) {
  .lanes-svg .pulse { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0.9; }
  .crew-dot[data-live='true'] { animation: none; }
}