/* ============================================================
   v6 MIDI surfaces — track focus indicator + cell flash on play-in
   ============================================================
*/

@layer v6-components {

  /* Track focus: left accent stripe + subtle background tint.
     TrackFocus.js sets data-v6-focused="true" on the focused .track. */
  .track[data-v6-focused="true"] {
    position: relative;
    background: linear-gradient(
      90deg,
      rgba(139, 92, 246, 0.08) 0%,
      rgba(139, 92, 246, 0.00) 50%
    );
  }
  .track[data-v6-focused="true"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg,
      var(--accent-primary, #8b5cf6) 0%,
      var(--accent-secondary, #ec4899) 100%);
    border-radius: 3px 0 0 3px;
  }

  /* "Receiving MIDI" indicator on the focused track's title row.
     Only appears when a MIDI device is actually connected (CSS-only
     check is tricky; we just always show it on the focused track —
     even with no device, it cues the user "this track is selected"). */
  .track[data-v6-focused="true"] .track-title::after {
    content: "FOCUSED";
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    background: rgba(139, 92, 246, 0.20);
    border: 1px solid rgba(139, 92, 246, 0.40);
    border-radius: 3px;
    color: var(--accent-primary, #8b5cf6);
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    vertical-align: 2px;
  }

  /* Make track headers feel clickable (hover affordance).
     Existing track-header styles aren't overridden — just add cursor + ring. */
  .track > .track-header {
    cursor: pointer;
  }
  .track > .track-header:hover {
    background: rgba(255, 255, 255, 0.02);
  }

  /* MIDI play-in cell flash — applied briefly when a MIDI note triggers
     a cell. Independent of pattern .active state. */
  @keyframes v6-midi-flash-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.85), inset 0 0 0 2px rgba(139, 92, 246, 0.9); }
    100% { box-shadow: 0 0 12px 4px rgba(139, 92, 246, 0.0), inset 0 0 0 2px rgba(139, 92, 246, 0.0); }
  }
  .sequencer-grid .cell.v6-midi-flash {
    animation: v6-midi-flash-pulse 0.25s ease-out;
  }

  /* MIDI Learn: listening state on a control awaiting its first MIDI message */
  @keyframes v6-midi-learn-pulse {
    0%, 100% { outline-color: rgba(34, 197, 94, 0.85); outline-offset: 2px; }
    50%      { outline-color: rgba(34, 197, 94, 1.00); outline-offset: 4px; }
  }
  .v6-midi-learn--listening {
    outline: 2px dashed rgba(34, 197, 94, 0.85);
    outline-offset: 2px;
    animation: v6-midi-learn-pulse 1s ease-in-out infinite;
    position: relative;
  }
  .v6-midi-learn--listening::after {
    content: 'Listening…';
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 8px;
    background: var(--accent-success, #22c55e);
    color: #000;
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 700;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    z-index: var(--z-tooltip, 1100);
  }

  /* Brief confirmation flash after a binding is captured */
  @keyframes v6-midi-bound-flash {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.0); }
    20%  { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.45); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.0); }
  }
  .v6-midi-learn--bound {
    animation: v6-midi-bound-flash 1.2s ease-out;
  }

  @media (prefers-reduced-motion: reduce) {
    .v6-midi-learn--listening,
    .v6-midi-learn--bound,
    .sequencer-grid .cell.v6-midi-flash {
      animation: none !important;
    }
  }
}