/* Columbia College Music Theory: shared styles for chapter sections (scoped to .cct) */
.cct { --cc-ink:#16181C; --cc-soft:#5E636B; --cc-line:#C9CDD3; --cc-paper:#FFFFFF; --cc-accent:#B23A2E; --cc-good:#2F6B45; }
.cct figure { margin: 1.4em 0; background: var(--cc-paper); color: var(--cc-ink); border: 1px solid var(--cc-line); border-radius: 8px; padding: 14px 16px 10px; }
.cct figure .ccf, .cct figure .c4-staff { overflow-x: auto; }
.cct figure .ccf { cursor: pointer; border-radius: 4px; }
.cct figure .ccf:hover { background: rgba(178,58,46,.04); }
.cct figure .ccf:focus-visible { outline: 3px solid var(--cc-accent); outline-offset: 2px; }
.cct figure svg { max-width: 100%; height: auto; display: block; }
.cct figure .c4-staff svg .c4-col { cursor: pointer; }
.cct figure .c4-staff svg .c4-col:hover rect { fill: rgba(178,58,46,.07); }
.cct figcaption { font-size: .92em; color: var(--cc-soft); margin-top: 6px; line-height: 1.45; }
.cct figcaption b { color: var(--cc-ink); }
.cct .cc-hint { font-size: .8em; opacity: .75; margin: 0 0 4px; }
.cct .cc-tablewrap { overflow-x: auto; }
.cct .cc-table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: .95em; }
.cct .cc-table th, .cct .cc-table td { border-bottom: 1px solid var(--cc-line); padding: 6px 8px; text-align: left; vertical-align: top; }
.cct .cc-table th { font-weight: 600; }
.cct .cc-box { border-left: 4px solid var(--cc-accent); padding: 8px 14px; margin: 1.2em 0; background: rgba(178,58,46,.06); border-radius: 0 6px 6px 0; }
.cct .cc-box p { margin: .4em 0; }
.cct .cc-ladder { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: .5em 0 1em; }
.cct .cc-ladder span.q { border: 1.5px solid currentColor; border-radius: 6px; padding: 4px 10px; font-weight: 600; min-width: 2.2em; text-align: center; }
.cct .cc-ladder span.q.home { background: var(--cc-accent); border-color: var(--cc-accent); color: #FFFFFF; }
.cct .cc-ladder span.arrow { opacity: .6; }
.cct .cc-ladder .lab { flex-basis: 100%; font-size: .85em; opacity: .75; margin-top: 2px; }
/* interactive apps */
.cct .cc-app { background: var(--cc-paper); color: var(--cc-ink); border: 1.5px solid var(--cc-ink); border-radius: 10px; padding: 16px; margin: 1.6em 0; }
.cct .cc-app h5 { margin: 0 0 4px; font-size: 1.1em; }
.cct .cc-app .cc-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.cct .cc-app button, .cct .cc-app select { font: inherit; font-size: .9em; padding: 6px 12px; border-radius: 6px; border: 1.5px solid var(--cc-ink); background: var(--cc-paper); color: var(--cc-ink); cursor: pointer; min-height: 36px; }
.cct .cc-app button[aria-pressed="true"] { background: var(--cc-ink); color: var(--cc-paper); }
.cct .cc-app button:focus-visible, .cct .cc-app select:focus-visible { outline: 3px solid var(--cc-accent); outline-offset: 2px; }
.cct .cc-app .cc-stage { overflow-x: auto; }
.cct .cc-app .cc-stage.click { cursor: crosshair; touch-action: manipulation; }
.cct .cc-app .cc-readout { font-size: 1.05em; line-height: 1.5; min-height: 3em; }
.cct .cc-app .cc-readout .big { font-size: 1.35em; font-weight: 700; }
.cct .cc-app .muted { color: var(--cc-soft); }
.cct .cc-app .ok { color: var(--cc-good); font-weight: 600; }
.cct .cc-app .no { color: var(--cc-accent); font-weight: 600; }
/* end-of-chapter links */
.cct .cc-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 1em 0; }
.cct .cc-next > a, .cct .cc-next > div { display: block; border: 1.5px solid currentColor; border-radius: 8px; padding: 12px 14px; text-decoration: none; color: inherit; }
.cct .cc-next b { display: block; margin-bottom: 2px; }
.cct .cc-next span { font-size: .88em; opacity: .85; line-height: 1.6; }
.cct .cc-next > div a { color: inherit; text-decoration: underline; }
/* legacy class names used by Chapter 4 */
.cct .c4-hint { font-size: .8em; opacity: .75; margin: 0 0 4px; }