/* Rhythm module: shared Woodshed / Program Partner tokens and components. */
[hidden] { display: none !important; }
.rhythm-page { width: 100%; }
.rhythm-create input[type='number'] { font: inherit; width: 100%; height: 2.25rem; padding: 0 .75rem; border-radius: var(--radius-md); border: 1px solid var(--input-border); background: var(--card); color: var(--foreground); }
.rhythm-custom-level { padding: 1.25rem; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.rhythm-pattern-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem; }
.rhythm-pattern-choice { padding: .8rem; min-height: 2.75rem; height: auto; border: 1px solid var(--input-border); border-radius: var(--radius-md); background: var(--card); align-items: flex-start; }
.rhythm-pattern-choice:has(input:checked) { border-color: var(--primary); background: var(--accent); color: var(--accent-foreground); }
.rhythm-saved-levels { border-top: 1px solid var(--border); padding-top: 1rem; }
.rhythm-saved-levels select { flex: 1; min-width: 0; }
.rhythm-saved-levels p { margin: .75rem 0 0; }
.rhythm-page-heading, .rhythm-bank-heading, .rhythm-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.rhythm-page-heading p:last-child { margin-bottom: 0; }
.rhythm-home-card { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; border-left: 4px solid var(--primary); }
.rhythm-home-card > div:first-child { max-width: 36rem; }
.rhythm-home-card p { margin-bottom: 0; }
.rhythm-exercise { overflow: hidden; }
.rhythm-scroll { overflow-x: auto; padding: 1rem 0 1.25rem; overscroll-behavior-x: contain; }
.rhythm-notation { position: relative; padding-bottom: 4rem; margin: 0 auto; }
.rhythm-staff { display: block; width: 100%; min-width: 650px; height: auto; color: var(--foreground); }
.rhythm-answer-row { position: absolute; left: 0; right: 0; bottom: .3rem; height: 3rem; }
.rhythm-answer { position: absolute; width: 3.1rem; height: 3rem; transform: translateX(-50%); border: 1px dashed var(--input-border); border-radius: var(--radius-md); background: var(--card); }
.rhythm-answer input { width: 100%; height: 100%; padding: 0 .15rem; text-align: center; font-size: 1rem; border: 0; background: transparent; color: var(--foreground); border-radius: var(--radius-md); }
.rhythm-answer input::placeholder { color: var(--muted-foreground); }
.rhythm-answer input:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.rhythm-answer.has-count { border-style: solid; background: var(--secondary); }
.rhythm-answer.drop-target { outline: 3px solid var(--ring); background: var(--accent); }
.rhythm-answer.correct { border: 2px solid var(--success); }
.rhythm-answer.correct::after { content: '✓'; position: absolute; top: -1.5rem; left: 40%; color: var(--success); }
.rhythm-answer.wrong { border: 2px solid var(--destructive); }
.rhythm-answer.wrong::after { content: '×'; position: absolute; top: -1.5rem; left: 40%; color: var(--destructive); }
.rhythm-answer-overlay { position: absolute; inset: 0; display: none; place-items: center; pointer-events: none; font-size: 1rem; }
.rhythm-answer.has-slash:not(:focus-within) input { color: transparent; }
.rhythm-answer.has-slash:not(:focus-within) .rhythm-answer-overlay { display: grid; }
.rhythm-slashed { position: relative; display: inline-block; }
.rhythm-slashed::after { content: ''; height: 2px; width: 125%; background: currentColor; position: absolute; top: 50%; left: -12%; transform: rotate(-55deg); }
.rhythm-bank-heading { border-top: 1px solid var(--border); padding-top: 1.25rem; margin-bottom: .75rem; }
.rhythm-bank-heading h3 { margin-bottom: 0; }
.rhythm-bank { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 1.5rem; }
.rhythm-tile { width: 3.3rem; height: 3.3rem; font-size: 1.125rem; padding: 0; cursor: grab; user-select: none; touch-action: manipulation; background: var(--secondary); color: var(--secondary-foreground); border-bottom-width: 3px; }
.rhythm-tile:active { cursor: grabbing; }
.rhythm-tile.selected, .rhythm-toggle-active { outline: 2px solid var(--ring); outline-offset: 3px; background: var(--accent); color: var(--accent-foreground); }
.rhythm-actions { margin: 1rem 0 1.5rem; }
.rhythm-key { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.rhythm-key summary { cursor: pointer; font-family: var(--font-serif); font-size: 1rem; }
.rhythm-key-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(125px,1fr)); gap: 1rem; margin: 1.2rem 0; }
.rhythm-sequence { word-spacing: .45rem; color: var(--primary); font-size: 1rem; margin-top: .4rem; white-space: nowrap; }
.rhythm-tip { margin: 1rem 0 0; padding: 1rem; background: var(--muted); border-radius: var(--radius-md); }
.rhythm-review { border-top: 1px solid var(--border); padding-top: 1rem; }
.rhythm-review summary { cursor: pointer; font-weight: 500; }
.rhythm-review-counts { display: inline-flex; gap: .8rem; flex-wrap: wrap; }
.rhythm-start { max-width: 42rem; margin: 1.5rem auto; }
.rhythm-end-dialog { border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1.5rem; width: 28rem; max-width: calc(100% - 2rem); background: var(--card); color: var(--foreground); box-shadow: var(--shadow); }
.rhythm-end-dialog::backdrop { background: #0006; }
.rhythm-end-dialog p { margin: 1rem 0 1.5rem; }
@media (max-width: 600px) {
  .rhythm-create input[type='number'] { font-size: 1rem; }
  .rhythm-pattern-grid { grid-template-columns: 1fr; }
  .rhythm-custom-level { padding: 1rem; }
  .rhythm-page-heading { align-items: flex-start; }
  .rhythm-exercise { padding: 1rem; }
  .rhythm-tile { min-width: 2.75rem; width: 2.75rem; height: 2.75rem; }
  .rhythm-bank { gap: .6rem; }
  .rhythm-key-grid { grid-template-columns: 1fr 1fr; }
  .rhythm-actions > .row { flex: 1; }
  .rhythm-actions > .row:last-child { justify-content: flex-end; }
  .topnav { flex-wrap: wrap; }
}