/* ca-styles.css — Chord Analyzer specifics layered over the shared Vocal-Remover
   shell (vocal-styles.css supplies .shell/.topbar/.hero/.tool/.segment/.cta).
   Tokens (--accent/--ink/--surface/--line…) are set per-theme by the cosmic
   shell, so these track the chosen theme + accent. */

.tool-head-ic { display: inline-grid; place-items: center; }
/* Guard: vocal-styles' [data-theme] --ink collides with the cosmic inline --ink
   for headline/body text here, so pin hero + brand + body text to the theme ink
   (ca-styles loads after vocal-styles, so these win). */
.hero h1, .brand-name { color: var(--ink); }
body { color: var(--ink); }

/* URL input row */
.ca-urlrow { margin-top: 14px; display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius-lg, 14px);
  background: var(--surface-2); padding: 0 14px; height: 56px; transition: border-color .16s var(--ease, ease); }
.ca-urlrow:focus-within { border-color: color-mix(in srgb, var(--accent) 58%, var(--line)); }
.ca-urlrow-ic { color: var(--ink-3); flex-shrink: 0; display: grid; place-items: center; }
.ca-url { flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  color: var(--ink); font: inherit; font-size: 15px; }

/* ── Processing ───────────────────────────────────────────────────────────── */
.ca-proc { padding: 52px 24px 56px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ca-ring { position: relative; width: 124px; height: 124px; display: grid; place-items: center; }
.ca-ring-num { position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display, inherit); font-size: 30px; font-weight: 600; color: var(--ink); }
.ca-ring-num span { font-size: 15px; color: var(--ink-3); margin-left: 1px; }
.ca-proc-stage { font-family: var(--font-body, inherit); font-size: 14.5px; color: var(--ink-2); }
.ca-eq { display: inline-flex; align-items: flex-end; gap: 4px; height: 26px; color: var(--accent); }
.ca-eq i { width: 4px; height: 40%; border-radius: 2px; background: currentColor; animation: caEq .9s ease-in-out infinite; }
@keyframes caEq { 0%,100% { height: 25%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .ca-eq i { animation: none; height: 60%; } }

/* ── Result ───────────────────────────────────────────────────────────────── */
.ca-result { display: flex; flex-direction: column; gap: 18px; }

.ca-summary { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl, 20px);
  box-shadow: var(--shadow-card); padding: 18px 20px; }
.ca-key { display: flex; align-items: center; gap: 14px; }
.ca-key-badge { width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px; display: grid; place-items: center;
  font-family: var(--font-display, inherit); font-style: var(--display-style, normal); font-size: 26px; font-weight: 700;
  color: var(--accent-ink, #fff); background: var(--cta); box-shadow: var(--cta-glow); }
.ca-key-name { font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.ca-key-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.ca-stats { display: flex; gap: 22px; margin-left: 6px; }
.ca-stat { display: flex; flex-direction: column; }
.ca-stat .v { font-size: 19px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ca-stat .l { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ca-export { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px;
  border-radius: 11px; border: 1px solid var(--line-strong, var(--line)); background: var(--surface-2); cursor: pointer;
  font: inherit; font-weight: 600; font-size: 13.5px; color: var(--ink); transition: .15s var(--ease, ease); }
.ca-export:hover { border-color: var(--accent-line, var(--accent)); color: var(--accent); }

/* now-playing + transport */
.ca-player { display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl, 20px);
  box-shadow: var(--shadow-card); padding: 16px 20px; }
.ca-play { width: 50px; height: 50px; flex-shrink: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--accent-ink, #fff); background: var(--cta); box-shadow: var(--cta-glow);
  transition: transform .1s ease; }
.ca-play:active { transform: scale(.94); }
.ca-now { flex-shrink: 0; min-width: 116px; }
.ca-now-chord { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display, inherit);
  font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1; }
.ca-now-roman { font-family: var(--font-body, inherit); font-size: 13px; font-weight: 600; color: var(--accent); }
.ca-now-meta { font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.ca-track { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; height: 40px; }
.ca-track .ca-tick { flex: 1; height: 12px; border: 0; padding: 0; border-radius: 3px; cursor: pointer;
  background: color-mix(in srgb, var(--ink) 14%, transparent); transition: background .12s ease, height .12s ease; }
.ca-track .ca-tick:hover { height: 20px; }
.ca-track .ca-tick.past { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.ca-track .ca-tick.on { background: var(--accent); height: 26px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }

.ca-section-h { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); margin: 6px 2px -4px; }

/* progression chips */
.ca-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.ca-chip { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 8px 10px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  box-shadow: var(--shadow-card); transition: transform .14s var(--ease, ease), border-color .14s ease; position: relative; }
.ca-chip:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.ca-chip.on { border-color: transparent; box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-card); }
.ca-chip-name { font-family: var(--font-display, inherit); font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1; }
.ca-chip.on .ca-chip-name { color: var(--accent); }
.ca-chip-roman { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.ca-chip-t { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: 1px; }

/* diatonic chords */
.ca-diatonic { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 9px; }
.ca-dia { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px;
  border-radius: 12px; border: 1px dashed var(--line-strong, var(--line)); background: var(--surface-2); }
.ca-dia-name { font-size: 17px; font-weight: 700; color: var(--ink); }
.ca-dia-roman { font-size: 11px; color: var(--ink-3); }

.ca-reset-row { display: flex; justify-content: center; margin-top: 8px; }
.ca-reset { appearance: none; border: 1px solid var(--line-strong, var(--line)); background: var(--surface);
  color: var(--ink); cursor: pointer; font: inherit; font-weight: 600; font-size: 13.5px; padding: 11px 20px; border-radius: 12px;
  transition: .15s var(--ease, ease); }
.ca-reset:hover { border-color: var(--accent-line, var(--accent)); color: var(--accent); }

@media (max-width: 640px) {
  .ca-summary { gap: 12px; } .ca-stats { gap: 16px; }
  .ca-export { margin-left: 0; }
  .ca-player { flex-wrap: wrap; } .ca-track { width: 100%; flex-basis: 100%; }
}

/* ── "What you get" + supported formats ───────────────────────────────────── */
.ca-info { margin-top: 56px; }
.ca-info-h { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 22px; }
.ca-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 52px; }
.ca-feat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl, 20px);
  box-shadow: var(--shadow-card); padding: 22px 22px 24px; }
.ca-feat-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 16px;
  color: var(--ink); background: var(--surface-3); border: 1px solid var(--line); }
.ca-feat-t { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); margin-bottom: 7px; }
.ca-feat-d { font-size: 14px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.ca-fmts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ca-fmt { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 13px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: 15px; }
.ca-fmt svg { color: var(--accent); }
@media (max-width: 860px) { .ca-feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ca-feat-grid { grid-template-columns: 1fr; } }