/* Shared content rules also loaded in both set builders. */
.supp-diagram { display: block; width: 64mm; max-width: 100%; height: auto; margin: 2mm auto; }
.dm-supplement-task .expr { line-height: 1.35; }
.dm-supplement-task .answer .supp-diagram { width: 40mm; max-height: 28mm; }
.weekset-embed-html .dm-supplement-task .expr { display: block !important; line-height: 1.3 !important; }
.weekset-embed-html .dm-supplement-task.supp-kind-drawing,
.weekset-embed-html .dm-supplement-task.supp-kind-drawing-short,
.weekset-embed-html .dm-supplement-task.supp-kind-diagram { display: block !important; }
.weekset-embed-html .dm-supplement-task.supp-kind-drawing .workspace { height: 62mm !important; min-height: 62mm !important; margin-top: 3mm !important; }
.weekset-embed-html .dm-supplement-task.supp-kind-drawing-short .workspace { height: 30mm !important; min-height: 30mm !important; margin-top: 3mm !important; }
.weekset-embed-html .dm-supplement-task.supp-kind-diagram .workspace { height: 18mm !important; min-height: 18mm !important; margin-top: 3mm !important; }
.weekset-embed-html .dm-supplement-task .dm-weekset-answer .supp-diagram { width: 48mm; max-height: 35mm; }
.weekset-embed-html .dm-supplement-task .dm-weekset-answer { font-size: 10pt !important; line-height: 1.25 !important; }

body[data-supplement-topic] { margin: 0; font-family: Arial, sans-serif; color: #172d4a; background: #edf2f7; }
body[data-supplement-topic] .supp-sheet { width: 210mm; margin: 12px auto; padding: 13mm; background: white; }
body[data-supplement-topic] .sheet-header { border-bottom: 2px solid #346b9b; margin-bottom: 4mm; }
body[data-supplement-topic] .sheet-header h1 { margin: 0 0 3mm; }
body[data-supplement-topic] .instructions { font-size: 10pt; margin: 3mm 0 4mm; }
body[data-supplement-topic] .supp-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3mm; }
body[data-supplement-topic] .dm-supplement-task { padding: 3mm; border: 1px solid #a9c0d2; border-radius: 2mm; position: relative; break-inside: avoid; font-size: 11pt; }
body[data-supplement-topic] .opgnr { font-size: 9pt; font-weight: bold; color: #346b9b; }
body[data-supplement-topic] .workspace { height: 20mm; margin-top: 2mm; border: 1px solid #e0e8ee; background: repeating-linear-gradient(white 0, white 5.8mm, #e0e8ee 6mm); }
body[data-supplement-topic] .answer { display: none; color: #c02626; font-weight: bold; }
body[data-supplement-topic].show-answers .answer { display: block; }
body[data-supplement-topic] .controls { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 12px; }
body[data-supplement-topic] button { padding: 10px 16px; border: 0; border-radius: 8px; background: #176b46; color: white; cursor: pointer; }
body[data-supplement-topic="triangles"] .supp-grid { grid-template-columns: 1fr; }
body[data-supplement-topic="triangles"] .workspace { height: 58mm; }
body[data-supplement-topic="angles"] .workspace { height: 40mm; }
body[data-supplement-topic="angles"] .supp-diagram { height: 40mm; width: auto; }
body[data-supplement-topic="scale"] .workspace { height: 36mm; }
body[data-supplement-topic="real"] .workspace,
body[data-supplement-topic="properties"] .workspace { height: 12mm; }
body[data-supplement-topic="real"] .supp-diagram,
body[data-supplement-topic="properties"] .supp-diagram { max-height: 25mm; }
@media print {
  body[data-supplement-topic] { background: white; }
  body[data-supplement-topic] .supp-sheet { margin: 0; }
  body[data-supplement-topic] .controls { display: none !important; }
}