.mhg-progressions { --mhg-pa-accent: #a33b2b; --mhg-pa-dark: #252525; --mhg-pa-soft: #f7f3ee; color: var(--mhg-pa-dark); max-width: 1120px; margin-inline: auto; overflow-wrap: anywhere; }
.mhg-progressions *, .mhg-progressions *::before, .mhg-progressions *::after { box-sizing: border-box; }
.mhg-progressions-intro { border-left: 4px solid var(--mhg-pa-accent); padding: .25rem 0 .25rem 1rem; margin-bottom: 1.5rem; }
.mhg-progressions-intro h2, .mhg-progressions-section > h2, .mhg-progressions-next h2 { margin: 0 0 .45rem; }
.mhg-progressions-intro p { max-width: 760px; margin: 0; }
.mhg-progressions-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; margin-bottom: 1.75rem; background: var(--mhg-pa-soft); border-radius: 8px; }
.mhg-progressions-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.mhg-progressions button, .mhg-progressions select { font: inherit; }
.mhg-progressions-filters button, .mhg-progressions-more { min-height: 42px; border: 1px solid #806d63; border-radius: 5px; background: #fff; color: #3d2f29; padding: .55rem .8rem; cursor: pointer; }
.mhg-progressions-filters button[aria-pressed="true"] { background: var(--mhg-pa-dark); border-color: var(--mhg-pa-dark); color: #fff; }
.mhg-progressions button:focus-visible, .mhg-progressions select:focus-visible, .mhg-progressions a:focus-visible, .mhg-progressions summary:focus-visible { outline: 3px solid #1769aa; outline-offset: 3px; }
.mhg-progressions-key { display: flex; align-items: center; gap: .55rem; font-weight: 700; white-space: nowrap; }
.mhg-progressions-key select { min-height: 42px; max-width: 145px; border: 1px solid #806d63; border-radius: 5px; background: #fff; padding: .45rem 2rem .45rem .65rem; }
.mhg-progressions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mhg-progressions-card { min-width: 0; border: 1px solid #d7cec8; border-top: 4px solid var(--mhg-pa-accent); border-radius: 7px; background: #fff; padding: 1.15rem; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.mhg-progressions-card[hidden] { display: none; }
.mhg-progressions-badge { display: inline-block; margin-bottom: .65rem; border-radius: 999px; background: #fff0c2; color: #5e4200; padding: .25rem .55rem; font-size: .82rem; font-weight: 700; }
.mhg-progressions-degrees { margin: 0 0 .45rem; color: var(--mhg-pa-dark); font-size: clamp(1.45rem, 4vw, 2rem); line-height: 1.25; }
.mhg-progressions-card-title { margin: 0 0 .35rem; font-weight: 700; }
.mhg-progressions-description { margin: 0 0 1rem; }
.mhg-progressions-chords-label { margin: 0 0 .25rem; color: #665951; font-size: .9rem; font-weight: 700; }
.mhg-progressions-chords { margin: 0 0 1rem; padding: .7rem; background: var(--mhg-pa-soft); border-radius: 5px; color: #171717; font-size: clamp(1.3rem, 4vw, 1.7rem); font-weight: 800; line-height: 1.3; }
.mhg-progressions-songs h4 { margin: 0 0 .45rem; font-size: 1rem; }
.mhg-progressions-songs ul { margin: 0 0 .65rem 1.1rem; padding: 0; }
.mhg-progressions-songs li { margin-bottom: .25rem; }
.mhg-progressions-empty { margin: 0; color: #685f5a; font-size: .9rem; font-style: italic; }
.mhg-progressions-more { color: var(--mhg-pa-accent); font-weight: 700; }
.mhg-progressions-tip { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid #e2dad4; font-size: .92rem; }
.mhg-progressions-advanced { margin-top: 2rem; padding: 1rem; border: 1px solid #d7cec8; border-radius: 7px; background: #fafafa; }
.mhg-progressions-advanced[hidden] { display: none; }
.mhg-progressions-advanced summary { cursor: pointer; color: var(--mhg-pa-dark); font-size: 1.25rem; font-weight: 800; }
.mhg-progressions-advanced[open] summary { margin-bottom: 1rem; }
.mhg-progressions-next { margin-top: 2.25rem; }
.mhg-progressions-next > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.mhg-progressions-next a { display: flex; flex-direction: column; gap: .2rem; border: 1px solid #d7cec8; border-radius: 6px; padding: .85rem; color: var(--mhg-pa-dark); text-decoration: none; }
.mhg-progressions-next a:hover { border-color: var(--mhg-pa-accent); }
.mhg-progressions-next span { color: #685f5a; font-size: .88rem; }
@media (max-width: 680px) { .mhg-progressions-toolbar { align-items: stretch; flex-direction: column; } .mhg-progressions-key { justify-content: space-between; } .mhg-progressions-grid, .mhg-progressions-next > div { grid-template-columns: minmax(0, 1fr); } .mhg-progressions-filters button { flex: 1 1 calc(50% - .5rem); } .mhg-progressions-card { padding: 1rem; } }
@media (max-width: 340px) { .mhg-progressions-filters button { flex-basis: 100%; } .mhg-progressions-key { align-items: stretch; flex-direction: column; } .mhg-progressions-key select { max-width: none; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .mhg-progressions * { scroll-behavior: auto !important; } }