/* Blank staff paper downloads + staff paper generator (/music/blank-staff-paper, /music/staff-paper-generator) */

/* Download cards */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-5, 1.5rem); margin: var(--space-4, 1rem) 0 var(--space-6, 2rem); }
.sp-card { display: flex; flex-direction: column; border: 1px solid var(--color-line); border-radius: var(--radius-sm, 6px); background: var(--bg-card); padding: var(--space-3, .75rem); }
.sp-card__paper { display: block; background: #fff; border: 1px solid #d7ddd9; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); aspect-ratio: 210 / 297; overflow: hidden; }
.sp-card__paper img { display: block; width: 100%; height: 100%; }
.sp-card h3 { font-size: var(--fs-md, 1.05rem); margin: var(--space-3, .75rem) 0 var(--space-1, .25rem); }
.sp-card p { font-size: var(--fs-sm, .9rem); color: var(--text-muted); margin: 0 0 var(--space-3, .75rem); }
.sp-card__dl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2, .5rem); margin-top: auto; }
.sp-card__dl .btn { justify-content: center; padding-left: .5rem; padding-right: .5rem; font-size: var(--fs-sm, .9rem); }
.sp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm, .9rem); margin: var(--space-3, .75rem) 0 var(--space-5, 1.5rem); }
.sp-table th, .sp-table td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--color-line); vertical-align: top; }
.sp-table th { font-weight: 700; }
.sp-wide { overflow-x: auto; }

/* Running text: the site reset strips list bullets */
.sp-text { max-width: 75ch; }
.sp-text ul { list-style: disc; padding-left: 1.4rem; margin: 0 0 var(--space-5, 1.5rem); }
.sp-text li { margin-bottom: .5rem; }
.sp-text h3 { font-size: var(--fs-md, 1.05rem); margin: var(--space-4, 1rem) 0 var(--space-1, .25rem); }

/* Generator */
.sp-layout { display: grid; gap: var(--space-6, 2rem); grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: start; }
@media (max-width: 860px) {
  .sp-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-4, 1rem); }
  .sp-side { order: -1; width: 100%; max-width: 240px; margin: 0 auto; }   /* see the page change as you choose */
}
@media (min-width: 861px) { .sp-side { position: sticky; top: 96px; } }
.sp-preview { background: #fff; border: 1px solid #d7ddd9; box-shadow: 0 2px 10px rgba(0, 0, 0, .1); }
.sp-preview svg { display: block; width: 100%; height: auto; }
.sp-note { font-size: var(--fs-xs, .8rem); color: var(--text-muted); margin: var(--space-2, .5rem) 0 0; text-align: center; }
.sp-actions { display: flex; flex-wrap: wrap; gap: var(--space-2, .5rem); margin-top: var(--space-5, 1.5rem); }
.sp-form fieldset { border: 0; padding: 0; margin: 0 0 var(--space-4, 1rem); }
.sp-form legend { font-weight: 700; margin-bottom: var(--space-2, .5rem); }
.sp-form [hidden] { display: none !important; }
.sp-hint { font-size: var(--fs-xs, .8rem); color: var(--text-muted); margin: .25rem 0 0; }

/* Printing from the generator: only the pages, nothing else on the site */
#sp-print { display: none; }
@media print {
  html.sp-printing body > *:not(#sp-print) { display: none !important; }
  html.sp-printing body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  html.sp-printing #sp-print { display: block; }
  .sp-print-page { overflow: hidden; break-after: page; page-break-after: always; }
  .sp-print-page:last-child { break-after: auto; page-break-after: auto; }
  .sp-print-page svg { display: block; width: 100%; height: 100%; }
}