/* ============================================================================
   interval-tool.css — admin-selectable presentations for the Theory page's
   interval/notes row (FretlyDisplayConfig.intervalToolStyle).

   Colour model = ONE cohesive accent (the approved-mockup look):
     • root      → solid accent fill, dark ink
     • in-scale  → accent outline + soft accent wash, normal text
     • out       → muted (theme border, dim text)
   The applier (theory/interval-tool-style.js) sets --it-accent / --it-soft /
   --it-soft-2 on the card from the chosen scheme and tags cells with data
   classes.  All visual rules live here; JS sets no appearance beyond those vars.

   'classic' (default / "Vintage") is intentionally NOT styled here — it falls
   through to the original theory.css rules untouched.
   ============================================================================ */

.theory-interval-card[data-int-style]:not([data-int-style="classic"]) {
  --it-accent: #e8874a;
  --it-soft:   rgba(232,135,74,0.16);
  --it-soft-2: rgba(232,135,74,0.30);
  --it-ink:    #1a140e;
}

.theory-interval-card[data-int-style="classic"] {
  --it-accent: #e8874a;
  --it-soft:   rgba(232,135,74,0.16);
  --it-soft-2: rgba(232,135,74,0.30);
  --it-ink:    #1a140e;
}

/* Repaint happens on every Theory render — kill the inherited cross-fade so
   the accent snaps cleanly instead of fading through the old .selected tint. */
.theory-interval-card[data-int-style] .theory-int-cell,
.theory-interval-card[data-int-style] .theory-note-cell {
  transition: none;
}

/* ── CLASSIC (Vintage) — keeps the stacked-cell layout but now ADHERES to the
   accent colour setting: root = solid accent, scale = accent outline + wash,
   out = plain. Overrides theory.css's hardcoded blue/orange selection tints. */
.theory-interval-card[data-int-style="classic"] .theory-int-cell.it-on,
.theory-interval-card[data-int-style="classic"] .theory-note-cell.it-on {
  background: var(--it-soft);
  border-color: var(--it-accent);
  color: var(--text);
}
.theory-interval-card[data-int-style="classic"] .theory-int-cell.it-root,
.theory-interval-card[data-int-style="classic"] .theory-note-cell.it-root {
  background: var(--it-accent);
  border-color: var(--it-accent);
  color: var(--it-ink);
  font-weight: 700;
}

/* ── Shared cohesive treatment for the box styles (chips, steps) ─────────── */
.theory-interval-card[data-int-style="chips"] .theory-int-cell.it-on,
.theory-interval-card[data-int-style="chips"] .theory-note-cell.it-on,
.theory-interval-card[data-int-style="steps"] .theory-note-cell.it-on {
  background: var(--it-soft);
  border-color: var(--it-accent);
  color: var(--text);
}
.theory-interval-card[data-int-style="chips"] .theory-int-cell.it-root,
.theory-interval-card[data-int-style="chips"] .theory-note-cell.it-root,
.theory-interval-card[data-int-style="steps"] .theory-note-cell.it-root {
  background: var(--it-accent);
  border-color: var(--it-accent);
  color: var(--it-ink);
  font-weight: 700;
}
.theory-interval-card[data-int-style="chips"] .theory-int-cell.it-out,
.theory-interval-card[data-int-style="chips"] .theory-note-cell.it-out {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted, #888);
  opacity: 0.5;
}

/* ══════════════════════════════════════════════════════════════════════════
   CHIPS — interval over note fused into one pill per pitch
   ══════════════════════════════════════════════════════════════════════════ */
.theory-interval-card[data-int-style="chips"] .theory-row-divider { display: none; }
.theory-interval-card[data-int-style="chips"] #theoryIntLabeledRow { margin-bottom: 0; align-items: flex-end; }
.theory-interval-card[data-int-style="chips"] #theoryNotesLabeledRow { margin-top: -1px; align-items: flex-start; }
.theory-interval-card[data-int-style="chips"] .theory-notes-wrap { align-items: flex-start; }

.theory-interval-card[data-int-style="chips"] .theory-int-cell {
  border-radius: 10px 10px 0 0;
  border-bottom: none;
  padding: 6px 2px 1px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--surface);
}
.theory-interval-card[data-int-style="chips"] .theory-note-cell {
  border-radius: 0 0 10px 10px;
  border-top: none;
  padding-top: 2px;
  padding-bottom: 7px;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════
   BEADS — hollow accent rings; intervals as captions above
   ══════════════════════════════════════════════════════════════════════════ */
.theory-interval-card[data-int-style="beads"] .theory-int-cell {
  border: none;
  background: none;
  padding: 4px 0 4px;
  font-size: 0.66rem;
  color: var(--text-muted, #888);
}
.theory-interval-card[data-int-style="beads"] .theory-int-cell.it-on { color: var(--it-accent); }
.theory-interval-card[data-int-style="beads"] .theory-int-cell.it-out { opacity: 0.4; }
.theory-interval-card[data-int-style="beads"] .theory-note-cell {
  border: none;
  background: none;
  color: var(--text);
  font-weight: 600;
}
.theory-interval-card[data-int-style="beads"] .theory-note-cell.it-on {
  background: radial-gradient(circle at 50% 50%,
    transparent 0 13px, var(--it-accent) 13px 15.5px, transparent 16.5px);
}
.theory-interval-card[data-int-style="beads"] .theory-note-cell.it-root {
  background: radial-gradient(circle at 50% 50%, var(--it-accent) 0 16px, transparent 17px);
  color: var(--it-ink);
  font-weight: 700;
}
.theory-interval-card[data-int-style="beads"] .theory-note-cell.it-out {
  background: radial-gradient(circle at 50% 50%, var(--text-muted, #888) 0 3px, transparent 4px);
  color: transparent;
}

/* ══════════════════════════════════════════════════════════════════════════
   STEPS — each scale degree is a block as wide as its interval
   ══════════════════════════════════════════════════════════════════════════ */
.theory-interval-card[data-int-style="steps"] .theory-row-divider { display: none; }
.theory-interval-card[data-int-style="steps"] #theoryNotesLabeledRow { margin-top: 2px; }
.theory-interval-card[data-int-style="steps"] .it-out {
  flex: 0 0 0 !important;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
  color: transparent;
}
.theory-interval-card[data-int-style="steps"] .it-step-1 { flex-grow: 1; }
.theory-interval-card[data-int-style="steps"] .it-step-2 { flex-grow: 2; }
.theory-interval-card[data-int-style="steps"] .it-step-3 { flex-grow: 3; }
.theory-interval-card[data-int-style="steps"] .it-step-4 { flex-grow: 4; }
.theory-interval-card[data-int-style="steps"] .theory-int-cell.it-on {
  background: none;
  border: none;
  padding: 4px 0 0;
  font-size: 0.7rem;
  color: var(--text-muted, #888);
}
.theory-interval-card[data-int-style="steps"] .theory-note-cell.it-on {
  border: 2px solid var(--it-accent);
  border-radius: 8px;
  font-weight: 600;
  position: relative;
}
.theory-interval-card[data-int-style="steps"] .theory-note-cell.it-on[data-step]::after {
  content: attr(data-step);
  position: absolute;
  right: 6px;
  bottom: 3px;
  font-size: 0.58rem;
  font-weight: 700;
  opacity: 0.6;
}

/* ══════════════════════════════════════════════════════════════════════════
   PIANO — chromatic geography (white/black keys) with the scale lit in accent
   ══════════════════════════════════════════════════════════════════════════ */
.theory-interval-card[data-int-style="piano"] .theory-row-divider { display: none; }
.theory-interval-card[data-int-style="piano"] #theoryIntLabeledRow { margin-bottom: 0; align-items: flex-end; }
.theory-interval-card[data-int-style="piano"] #theoryNotesLabeledRow { margin-top: -1px; align-items: flex-start; }
.theory-interval-card[data-int-style="piano"] .theory-notes-wrap { align-items: flex-start; }
.theory-interval-card[data-int-style="piano"] .theory-int-cell {
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 5px 2px 2px;
  font-size: 0.7rem;
}
.theory-interval-card[data-int-style="piano"] .theory-note-cell {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  font-weight: 600;
}
.theory-interval-card[data-int-style="piano"] .it-white { background: #efece2; color: #2a2a27; }
.theory-interval-card[data-int-style="piano"] .it-black { background: #34332f; color: #d7d4cc; }
/* In-scale keys are washed + outlined in the accent so the scale pops over the
   keyboard geography; the root is a solid accent key. */
.theory-interval-card[data-int-style="piano"] .theory-int-cell.it-on,
.theory-interval-card[data-int-style="piano"] .theory-note-cell.it-on {
  background: var(--it-soft);
  border-color: var(--it-accent);
  color: var(--text);
}
.theory-interval-card[data-int-style="piano"] .theory-int-cell.it-root,
.theory-interval-card[data-int-style="piano"] .theory-note-cell.it-root {
  background: var(--it-accent);
  border-color: var(--it-accent);
  color: var(--it-ink);
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════
   CLOCK — radial pitch ring (hides the rows + Stack Explorer)
   ══════════════════════════════════════════════════════════════════════════ */
#theoryIntervalClock { display: none; }
.theory-interval-card[data-int-style="clock"] #theoryIntLabeledRow,
.theory-interval-card[data-int-style="clock"] #theoryNotesLabeledRow,
.theory-interval-card[data-int-style="clock"] .theory-row-divider,
.theory-interval-card[data-int-style="clock"] #theoryStack {
  display: none;
}
.theory-interval-card[data-int-style="clock"] #theoryIntervalClock {
  display: block;
  padding: 10px 0 4px;
}
.it-clk-svg { width: 250px; max-width: 100%; height: auto; display: block; margin: 0 auto; }
.it-clk-ring { fill: none; stroke: var(--border); stroke-width: 1.5; }
.it-clk-dot circle { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.it-clk-off circle { opacity: 0.55; }
.it-clk-on circle { fill: var(--it-soft); stroke: var(--it-accent); stroke-width: 2; }
.it-clk-root circle { fill: var(--it-accent); stroke: var(--it-accent); stroke-width: 2; }
.it-clk-note { text-anchor: middle; font-size: 12px; font-weight: 600; fill: var(--text); font-family: var(--font-mono, monospace); }
.it-clk-int  { text-anchor: middle; font-size: 8px; fill: var(--text-muted, #888); font-family: var(--font-mono, monospace); }
.it-clk-root .it-clk-note { fill: var(--it-ink); }
.it-clk-off .it-clk-note { fill: var(--text-muted, #888); }