/* Classroom page */
.cl-wrap { display: grid; gap: 18px; padding-block: 18px 64px; }
.panel-stack { display: grid; gap: 16px; }
.panel-stack[hidden], [hidden] { display: none !important; }
.trust { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.trust span { background: var(--sea-soft); color: var(--ink); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tabs button { text-align: left; display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; font: inherit; }
.tabs button span { font-size: 12px; color: var(--muted); }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--sand); border-color: var(--ink); }
.tabs button[aria-selected="true"] span { color: var(--sand); opacity: .8; }
.student-only .teacher-only { display: none !important; }
.assignment { background: var(--sun-soft); border: 1px solid var(--sun); border-radius: 14px; padding: 16px 18px; }
.assignment p { margin: 6px 0 0; font-family: var(--display); font-size: clamp(20px, 3vw, 28px); line-height: 1.2; }
.guides { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.guide { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; font: inherit; }
.guide img { width: 100%; max-width: 120px; border-radius: 10px; }
.guide span { font-size: 12px; color: var(--muted); }
.guide[aria-pressed="true"] { border-color: var(--pacific); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pacific) 25%, transparent); }
.l-point { margin-top: 6px; }
.l-top { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: center; }
.l-top canvas, #c-canvas { width: 100%; aspect-ratio: 1; border-radius: 14px; display: block; }
.table-wrap { overflow-x: auto; }
table.script { width: 100%; border-collapse: collapse; font-size: 14px; }
table.script th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.script td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.script td .muted { font-size: 12px; }
.ticket { display: grid; gap: 6px; margin: 0; padding-left: 22px; }
.fine { font-size: 12px; color: var(--muted); margin: 0; }
.link-row input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; }
.how3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.how3 p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.c-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.c-fields { display: grid; gap: 10px; }
.beats { display: grid; gap: 12px; }
.beat > span { display: block; margin-bottom: 4px; }
.beat .count { justify-self: end; font-size: 11px; }
.sb-head { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: 14px; }
.sb-head img { width: 100%; border-radius: 12px; }
.sb-head h2 { margin: 0; }
.sb-theme { margin-top: 6px; font-size: 13px; background: var(--sand2); border-radius: 8px; padding: 6px 10px; }
.sb-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sb-panel { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--paper); display: grid; align-content: start; }
.sb-panel img { width: 100%; display: block; }
.sb-panel figcaption { padding: 8px 10px 10px; display: grid; gap: 4px; font-size: 13px; }
.sb-panel.empty figcaption span { color: var(--coral); font-style: italic; }
.r-list { display: grid; gap: 10px; }
.r-card { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: start; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.r-card img { width: 72px; border-radius: 10px; }
.r-card details summary { cursor: pointer; font-size: 13px; color: var(--pacific); margin-top: 4px; }
.r-card details p { margin: 6px 0; font-size: 14px; }
.print-area { display: none; }
@media (max-width: 860px) {
  .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l-top, .c-grid { grid-template-columns: minmax(0, 1fr); }
  .l-top canvas { max-width: 240px; }
  #c-canvas { max-width: 300px; justify-self: center; order: -1; }
  .sb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how3 { grid-template-columns: minmax(0, 1fr); }
}

/* Print: only the generated sheets */
@media print {
  body > *:not(#printArea) { display: none !important; }
  @page { margin: 12mm; }
  html, body { display: block !important; width: auto !important; max-width: none !important; min-height: 0 !important; background: #fff !important; color: #111 !important; }
  .print-area, .sheet { width: 100% !important; max-width: none !important; box-sizing: border-box; }
  .print-area { display: block !important; }
  .sheet { page-break-after: always; font-family: Manrope, system-ui, sans-serif; color: #111; padding: 4mm; }
  .sheet:last-child { page-break-after: auto; }
  .sheet h1 { font-family: Fraunces, Georgia, serif; font-size: 28pt; margin: 2mm 0; }
  .sheet .muted { color: #555; }
  .p-brand { font-family: "DM Mono", monospace; font-size: 9pt; letter-spacing: .12em; text-transform: uppercase; color: #555; }
  .p-flex { display: flex; gap: 8mm; align-items: flex-start; }
  .p-guide { width: 45mm; border-radius: 4mm; }
  .p-table { width: 100%; border-collapse: collapse; font-size: 10pt; }
  .p-table th, .p-table td { border: 1px solid #bbb; padding: 2mm; text-align: left; vertical-align: top; }
  .p-ticket li { margin: 5mm 0; font-size: 12pt; }
  .p-lines { height: 18mm; background: repeating-linear-gradient(to bottom, transparent 0 8.5mm, #999 8.5mm 9mm); }
  .p-key { margin-top: 12mm; font-size: 8pt; color: #777; transform: rotate(180deg); text-align: right; }
  .p-prompt { font-family: Fraunces, Georgia, serif; font-size: 15pt; border: 1px solid #bbb; border-radius: 3mm; padding: 3mm; }
  .p-box { border: 1.5px dashed #999; border-radius: 3mm; width: 60mm; height: 55mm; display: grid; place-items: center; color: #888; font-size: 10pt; flex-shrink: 0; }
  .p-beat { margin: 3mm 0; break-inside: avoid; }
  .sb-print .sb-head { display: grid; grid-template-columns: 35mm 1fr; gap: 5mm; align-items: center; }
  .sb-print .sb-head img { width: 35mm; border-radius: 3mm; }
  .sb-print .sb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; margin-top: 4mm; }
  .sb-print .sb-panel { border: 1px solid #bbb; border-radius: 3mm; overflow: hidden; break-inside: avoid; margin: 0; }
  .sb-print .sb-panel img { width: 100%; display: block; }
  .sb-print figcaption { padding: 2mm 3mm; font-size: 10pt; display: grid; gap: 1mm; }
  .sb-theme { font-size: 10pt; border: 1px solid #ccc; padding: 2mm; border-radius: 2mm; }
}

.ticket li span { margin-right: 6px; }
.pick { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pick select { font-size: 12px; padding: 2px 6px; min-height: 0; width: auto; }

.student-only .site-nav, .student-only .foot-links, .student-only #c-studio, .student-only .beta-badge { display: none !important; }
.assignment h1 { font-size: clamp(26px, 4vw, 38px); margin: 4px 0 0; }
.beat > span .muted { font-size: 15px; color: var(--ink); opacity: .8; }
.student-only .beat > span b { font-size: 16px; }
.qr-wrap { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.qr-code svg { width: 184px; height: auto; display: block; background: #fff; border-radius: 8px; }
.sb-foot { margin-top: 10px; }
@media print { .p-qr { width: 32mm; height: 32mm; } .p-foot { margin-top: 6mm; align-items: center; } .sb-foot { font-size: 8pt; color: #666; } }