/* ============================================================
   v6 Pattern card — library item visual upgrade
   ============================================================
   The existing PatternLibrary.renderPatternPreview() emits markup
   like:
     .pattern-card
       .pattern-preview > .preview-grid > .preview-row > .preview-cell
   This file styles those (which previously had no CSS at all)
   so library items become scannable Ableton/Bitwig-style clip cards.
*/

@layer v6-components {

  /* Card itself — small polish over style-v2's .pattern-card */
.pattern-card {
    display: flex;
    flex-direction: column;
    /* Turning the card into a column is what made style-v2's `align-items:
       center` wrong — see the note there. It is fixed in style-v2.css and NOT
       here: that file is unlayered, so it beats this one whatever we write. */
    gap: 6px;
    padding: 10px;
    border-radius: var(--radius-md, 6px);
    transition:
      background var(--duration-fast, 120ms),
      border-color var(--duration-fast, 120ms),
      transform var(--duration-instant, 50ms);
  }
  .pattern-card:hover {
    background: var(--surface-400, #1f1f23);
    border-color: var(--v6-border-strong, rgba(255, 255, 255, 0.14));
  }
  .pattern-card.previewing {
    border-color: var(--accent-success, #22c55e);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.4) inset;
  }
  .pattern-card--playing {
    border-color: color-mix(in srgb, var(--accent-warning, #f59e0b) 72%, var(--pattern-color, #8b5cf6));
    box-shadow: inset 3px 0 0 var(--accent-warning, #f59e0b), 0 0 0 1px rgba(245,158,11,.14);
  }
  .pattern-card--playing .pattern-playing-badge {
    opacity: 1;
    transform: translateY(0);
  }
  .pattern-playing-badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    margin-top: 2px;
    padding: 2px 5px;
    color: #fcd34d;
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.28);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 140ms ease, transform 140ms ease;
  }
  .pattern-playing-badge[aria-hidden="true"] { pointer-events: none; }
  .pattern-card.dragging {
    opacity: 0.55;
    transform: scale(0.98);
  }

  /* ============================================================
     Mini grid preview — 5 rows × 16 cells, each row track-colored
     ============================================================ */
  .pattern-preview {
    width: 100%;
    padding: 6px;
    background: rgba(0, 0, 0, 0.40);
    border: 1px solid var(--v6-border-faint, rgba(255, 255, 255, 0.04));
    border-radius: var(--radius-sm, 4px);
  }

  .preview-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 56px;
  }

  .preview-row {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 1px;
    flex: 1;
    min-height: 0;
  }
  .preview-row--empty {
    visibility: hidden;
  }

  /* item 3.5 — this part SITS OUT of this section (`track.tacet`).
     An empty lane and a deliberately silent one look the same, and the first
     is what users report as "the generate didn't work". A dashed rule through
     a dimmed lane says the silence was a decision. */
  .preview-row--tacet {
    opacity: 0.32;
    position: relative;
  }
  .preview-row--tacet::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 50%;
    border-top: 1px dashed var(--row-color, var(--text-muted, #8b8b94));
    pointer-events: none;
  }

  /* Beat tick — empty cell (background) */
  .preview-cell {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 1px;
    /* Subtle group every 4 beats for visual rhythm */
    transition: background var(--duration-fast, 120ms);
  }
  .preview-row .preview-cell:nth-child(4n) {
    background: rgba(255, 255, 255, 0.06);
  }

  /* Active beat — colored to the row's track */
  .preview-cell.active {
    background: var(--row-color, var(--accent-primary, #8b5cf6));
    opacity: var(--cell-opacity, 0.8);
    box-shadow: 0 0 4px var(--row-color, var(--accent-primary, #8b5cf6));
  }

  .preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    background: rgba(0, 0, 0, 0.30);
    border-radius: var(--radius-sm, 4px);
    color: var(--text-muted, #71717a);
    font-size: 11px;
  }
  .preview-empty::before {
    content: "empty pattern";
    font-style: italic;
  }
}

/* ============================================================
   Section groups are DELIBERATELY OUTSIDE @layer v6-components.
   ============================================================
   style-v2.css is unlayered and opens with
   `*, *::before, *::after { margin: 0; padding: 0 }`. Unlayered CSS
   beats LAYERED css regardless of specificity, so every padding and
   margin declared inside the layer above computes to 0 — verified in
   the browser. These rules carry the header padding and group spacing
   that make the collapsed list readable, so they have to sit out here
   where normal specificity applies. No .pattern-section-* selector
   appears in style-v2.css, so nothing competes for them.
   Same reasoning as src/styles/v6/context-menu.css.
*/

/* ============================================================
   v9.3 — Section-type groups in PatternLibrary
   ============================================================
   Replaces the flat creation-time list with collapsible groups
   by section type (intro / verse / chorus / etc.) so the user
   can scan a 40-pattern library quickly.
   ============================================================ */
.pattern-section-group {
  margin: 4px 0 12px;
  border-left: 3px solid var(--section-color, #71717a);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.015);
}
.pattern-section-group--collapsed {
  margin-bottom: 4px;
}
.pattern-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: transparent;
  border: 0;
  color: var(--text-secondary, #a1a1aa);
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 5px;
  transition: background var(--duration-fast, 120ms), color var(--duration-fast, 120ms);
}
.pattern-section-header:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary, #fafafa);
}
.pattern-section-header__chevron {
  display: inline-block;
  width: 12px;
  font-size: 11px;
  color: var(--text-secondary, #a1a1aa);
}
.pattern-section-header__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pattern-section-header__label {
  flex: 1;
}
.pattern-section-header__count {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text-secondary, #a1a1aa);
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: 0;
  text-transform: none;
}
.pattern-section-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px 6px;
}
.pattern-section-group--collapsed .pattern-section-cards {
  display: none;
}

/* Category tab counts — written by PatternLibrary.updateCategoryCounts().
   Unlayered for the same reason as the block above. */
.category-tab .category-count {
    display: inline-block;
    min-width: 16px;
    margin-left: 5px;
    padding: 1px 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: var(--text-secondary, #a1a1aa);
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    line-height: 1.4;
    text-align: center;
}
.category-tab.active .category-count {
    background: rgba(139, 92, 246, 0.30);
    color: var(--text-primary, #fafafa);
}
.category-tab--empty .category-count {
    opacity: 0.35;
}