/**
 * cockpit.css — styling for the <rtsn-cockpit> homepage hero interactive.
 *
 * Consumes tokens.css (the v5 design tokens). CSS-first animation: the JS
 * state machine sets [data-beat] on .cockpit and toggles state classes on
 * panels; every visual change is a CSS transition or keyframe here.
 *
 * Light throughout — no dark panels. Accent roles per panel:
 *   Calendar = Sapphire · Inbox = Signal · Brand Surfaces = Verdant ·
 *   Team = Ink/Muted · Ticker = Verdant ✓ / Signal ⋯
 */

rtsn-cockpit { display: block; width: 100%; max-width: 60rem; }

/* ---- Frame ------------------------------------------------------------- */

.cockpit {
  position: relative;
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-left: var(--spine) solid var(--signal);
  border-radius: 6px;
  padding: var(--space-3);
}

.cockpit__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  grid-template-areas:
    "cal  conv inbox"
    "bs   conv team"
    "tick tick tick";
  gap: var(--space-2);
}

/* ---- Panels (shared) --------------------------------------------------- */

.ck-panel {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: var(--space-2);
  background: var(--canvas);
  text-align: left;
}
.ck-panel__label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.625rem;
  max-width: none;
}
.ck-cal    { grid-area: cal; }
.ck-inbox  { grid-area: inbox; }
.ck-bs     { grid-area: bs; }
.ck-team   { grid-area: team; }

.ck-cal .ck-panel__label   { color: var(--sapphire); }
.ck-inbox .ck-panel__label { color: var(--signal); }
.ck-bs .ck-panel__label    { color: var(--verdant); }

.ck-panel ul { list-style: none; margin: 0; padding: 0; }
.ck-panel li {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink);
  padding: 0.25rem 0;
}

/* The ✓ / ⋯ / ● state glyphs. */
.ck-state { font-style: normal; }
.ck-state--done   { color: var(--verdant); }
.ck-state--active { color: var(--signal); }

/* ---- Calendar panel ---------------------------------------------------- */

.ck-cal__cell-content { cursor: pointer; border-radius: 3px; transition: background var(--dur-base) var(--ease); }
.cockpit[data-beat="b0"] .ck-cal__cell-content { animation: ck-pulse-sapphire 1.4s var(--ease); }
.ck-cal__counter {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted);
  margin: 0.625rem 0 0;
  max-width: none;
}
.ck-cal__count { color: var(--sapphire); font-weight: 500; transition: color var(--dur-base) var(--ease); }
.cockpit[data-beat="b3"] .ck-cal__count { animation: ck-tick 0.5s var(--ease); }

/* ---- Inbox panel ------------------------------------------------------- */

.ck-inbox p { font-family: var(--font-mono); font-size: 0.75rem; margin: 0.25rem 0; max-width: none; }
.ck-inbox__count { color: var(--ink); }
.ck-inbox__reviewed { color: var(--verdant); }
.ck-inbox__queue { color: var(--signal); transition: opacity var(--dur-base) var(--ease); }
.ck-inbox.is-clear .ck-inbox__queue { opacity: 0.4; }
.cockpit[data-beat="b0"] .ck-inbox__queue { animation: ck-pulse-signal 1.4s var(--ease); }

/* ---- Brand Surfaces panel ---------------------------------------------- */

.ck-bs__live .ck-state { transition: color var(--dur-base) var(--ease); }
.ck-bs__live.is-scanning { color: var(--verdant); }
.ck-bs__live.is-scanning .ck-state { animation: ck-blink 0.7s var(--ease) infinite; }
.ck-bs__live.is-done .ck-state { color: var(--verdant); }
.ck-bs li[data-tip] { cursor: pointer; }

/* ---- Team panel -------------------------------------------------------- */

.ck-team__avatars li { display: flex; justify-content: space-between; }
.ck-team__active .ck-state { transition: color var(--dur-base) var(--ease); }
.ck-team__active.is-done .ck-state { color: var(--verdant); }
.cockpit[data-beat="b0"] .ck-team__active { animation: ck-pulse-ink 1.4s var(--ease); }
.ck-team__flow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted);
  margin: 0.625rem 0 0;
  max-width: none;
}

/* ---- Quality-Gate Ticker ----------------------------------------------- */

.ck-ticker {
  grid-area: tick;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--space-2);
  align-items: center;
  padding: 0.625rem var(--space-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--soft-bg);
}
.ck-ticker__gate {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  transition: color var(--dur-base) var(--ease);
}
.ck-ticker__gate .ck-state { transition: opacity var(--dur-base) var(--ease); }
.ck-ticker__gate.is-active { color: var(--signal); }
.ck-ticker__gate.is-active .ck-state { opacity: 0; }
.ck-ticker__gate.is-done { color: var(--ink); }
.ck-ticker__gate.is-done .ck-state { color: var(--verdant); opacity: 1; }
/* the left-to-right cascade — each gate's ✓ settles ~180ms after the last */
.cockpit[data-beat="b2"] .ck-ticker__gate[data-gate="0"] .ck-state { transition-delay: 0ms; }
.cockpit[data-beat="b2"] .ck-ticker__gate[data-gate="1"] .ck-state { transition-delay: 180ms; }
.cockpit[data-beat="b2"] .ck-ticker__gate[data-gate="2"] .ck-state { transition-delay: 360ms; }
.cockpit[data-beat="b2"] .ck-ticker__gate[data-gate="3"] .ck-state { transition-delay: 540ms; }

/* ---- Mascot conversation ----------------------------------------------- */

.ck-conv {
  grid-area: conv;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
}
.ck-conv__stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-3);
  min-height: 96px;
}
.ck-conv__log {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.ck-conv__line {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--soft-bg);
  border-radius: 4px;
  padding: 0.375rem 0.625rem;
  max-width: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.ck-conv__line.is-shown { opacity: 0.5; transform: none; }
.ck-conv__line.is-current { opacity: 1; }
.ck-conv__line--cascadia { align-self: flex-start; border-left: 2px solid var(--sapphire); }
.ck-conv__line--mason { align-self: flex-end; border-left: 2px solid var(--signal); }

/* ---- Settling caption -------------------------------------------------- */

.ck-caption {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--muted);
  margin: var(--space-2) auto 0;
  max-width: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}
.cockpit[data-beat="caption"] .ck-caption { opacity: 1; }

/* ---- Controls ---------------------------------------------------------- */

.cockpit__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.ck-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4ch;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule-firm);
  border-radius: 4px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}
.ck-btn:hover { border-color: var(--ink); }
.ck-btn--toggle .ck-btn__play { display: none; }
.ck-btn--toggle.is-paused .ck-btn__pause { display: none; }
.ck-btn--toggle.is-paused .ck-btn__play { display: inline; }
.cockpit__hint {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted);
  margin-left: auto;
}

/* ---- Tooltip ----------------------------------------------------------- */

.ck-tooltip {
  position: absolute;
  z-index: 5;
  max-width: 22rem;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--canvas);
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: 0.625rem 0.875rem;
  border-radius: 4px;
}
.ck-tooltip[hidden] { display: none; }

/* the host element is the positioning context for the tooltip */
rtsn-cockpit { position: relative; }

/* ---- Animations -------------------------------------------------------- */

@keyframes ck-pulse-sapphire {
  0%, 100% { background: transparent; }
  40%      { background: rgba(46, 95, 130, 0.16); }
}
@keyframes ck-pulse-signal {
  0%, 100% { opacity: 1; }
  40%      { opacity: 0.45; }
}
@keyframes ck-pulse-ink {
  0%, 100% { background: transparent; }
  40%      { background: var(--ink-04); }
}
@keyframes ck-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
@keyframes ck-tick {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
.ck-cal__count { display: inline-block; }

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 760px) {
  .cockpit__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "conv"
      "cal"
      "inbox"
      "bs"
      "team"
      "tick";
  }
  .ck-conv__log { max-width: 30rem; margin-inline: auto; }
}

/* Reduced motion: the JS already renders the static settled state; also
   silence any residual keyframe animation. */
@media (prefers-reduced-motion: reduce) {
  .cockpit *, .cockpit *::before { animation: none !important; }
}