/* Chord progression finder: the chords-to-numerals converter card and the page's own small blocks. */

.pf-section { padding-top: 8px; }
.pf { max-width: 980px; margin: 0 auto; padding: 32px; background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.pf__head { display: grid; gap: 8px; margin-bottom: 24px; }
.pf__head h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -.035em; text-wrap: balance; }
.pf__head p:not(.eyebrow) { max-width: 640px; font-size: 15.5px; line-height: 1.6; color: var(--ink-secondary); }

.pf__form { display: grid; gap: 18px; }
.pf__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.pf__select { appearance: none; padding-right: 38px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f6960' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; }
.pf__chords textarea { font: 600 17px/1.5 var(--font-chord); letter-spacing: .01em; }

.pf__famous { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf__famous-label { margin-right: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-tertiary); }
.pf-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px; border: 1px solid var(--stroke-strong); border-radius: var(--radius-pill); background: var(--surface); font: 600 13px/1 var(--font-chord); color: var(--ink-secondary); cursor: pointer; transition: border-color var(--motion-fast), background var(--motion-fast), color var(--motion-fast); }
.pf-chip:hover { border-color: rgba(var(--accent-rgb), .5); color: var(--ink); background: var(--accent-soft); }
.pf-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pf-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }

.pf__result { display: grid; gap: 14px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--stroke); }
.pf__keynote { font-size: 14.5px; line-height: 1.6; color: var(--ink-secondary); }
.pf__keynote strong { color: var(--ink); }
.pf__numerals { gap: 12px; }
.pf__numerals[hidden] { display: none; }
.pf__numerals li { min-width: 76px; padding: 12px 16px 12px; background: var(--surface-2); }
.pf__numerals i { font-size: 15px; color: var(--accent-strong); }
.pf__numerals b { font-size: 22px; }
.pf__numerals small { margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--positive-strong); }
.pf__numerals .is-borrowed { background: var(--warning-soft); border-color: rgba(169, 112, 15, .35); border-style: dashed; }
.pf__numerals .is-borrowed small { color: var(--warning); }
.pf__reading { font-size: 15px; line-height: 1.65; color: var(--ink); }
.pf__reading:empty { display: none; }

/* One progression, three keys: rows of numerals inside an output card. */
.pf-rows { display: grid; gap: 1px; background: var(--stroke); }
.pf-row { display: grid; gap: 10px; padding: 16px 20px; background: var(--surface); }
.pf-row__key { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-tertiary); }
.pf-row .seo-numerals { gap: 8px; }
.pf-row .seo-numerals li { min-width: 56px; padding: 8px 10px 9px; background: var(--surface-2); }

/* Mini numerals inside the famous-progression cards. */
.pf-mini { gap: 6px; }
.pf-mini li { min-width: 0; padding: 6px 8px 7px; background: var(--surface-2); }
.pf-mini i { font-size: 12px; }
.pf-mini b { font-size: 15px; }

.pf-canon { max-width: 920px; margin: 28px auto 0; }
.pf-canon .seo-output__body { display: grid; gap: 12px; }
.pf-canon .seo-numerals { gap: 8px; }

@media (max-width: 760px) {
  .pf { padding: 20px 16px; border-radius: var(--radius-lg); }
  .pf__row { grid-template-columns: minmax(0, 1fr); }
  .pf__numerals li { min-width: 64px; padding: 10px 12px; }
  .pf-row { padding: 14px 16px; }
}

/* Numerals and chord names keep their case: lowercase is minor, so never uppercase them. */
.pf-cards .seo-card__kicker { font: 700 12px/1.2 var(--font-chord); letter-spacing: .04em; text-transform: none; color: var(--accent-strong); }
.pf-canon .seo-output__label { font: 700 13px/1.2 var(--font-chord); letter-spacing: .04em; text-transform: none; }