/* ════════════════════════════════════════════════════
   signal.css — Brain-signal divider
   Edit here: waveform strip, state toggle pills,
   captions
════════════════════════════════════════════════════ */

/* ════════════════ BRAIN-SIGNAL DIVIDER ════════════════
   A live waveform, like a trace on a monitor. It breathes
   between two states: a stressed signal and a regulated one. */
.signal-divider {
  padding: clamp(2.5rem, 7vw, 3.5rem) 0 clamp(2.875rem, 8vw, 4rem);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2);
  overflow: hidden;
}
.signal-head {
  max-width: 77.5rem;
  padding: 0 var(--gutter);
  margin: 0 auto 0.625rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.signal-lbl {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.7188rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.signal-states { display: flex; gap: 0.625rem; flex-wrap: wrap; justify-content: flex-end; }
.signal-state {
  appearance: none;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--line-soft);
  border-radius: 6.25rem;
  padding: 0.5625rem 1.25rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9062rem;
  color: var(--text-faint);
  cursor: pointer;
  transition: color 0.6s, border-color 0.6s, background 0.6s, transform 0.45s var(--spring), box-shadow 0.45s;
}
.signal-state:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
/* gentle pulse when a state becomes active — a visible handover cue */
.signal-state.on { animation: statePulse 0.7s var(--spring); }
@keyframes statePulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
#state-calm.on {
  color: var(--sage-deep);
  border-color: rgba(71,121,95,0.45);
  background: rgba(71,121,95,0.08);
}
#state-stress.on {
  color: var(--ember);
  border-color: rgba(185,106,75,0.45);
  background: rgba(185,106,75,0.08);
}

#signal-canvas {
  display: block;
  width: 100%;   /* full bleed, edge to edge */
  height: 6.875rem;
}

@media (max-width: 760px) {
  .signal-head { flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; align-items: flex-start; }
  .signal-states { justify-content: flex-start; width: 100%; flex-direction: column; gap: 0.5rem; }
  .signal-state { width: 100%; text-align: left; font-size: 0.875rem; padding: 0.75rem 1.25rem; }
  #signal-canvas { height: 5.25rem; }
}