/* LB-002 Static and Dynamic Balancing: page-specific styling on top of
   ../shared/labkit.css (lab sheet typography, figures, template tables). */

.lk-sheet { font-size: 14.5px; line-height: 1.5; color: #34302a; }
.lk-sheet h2 { font-size: 21px; margin: 4px 0 0; }
.lk-sheet h3 { font-size: 17px; margin: 18px 0 6px; color: #34302a; border-bottom: 2px solid #f2c419; padding-bottom: 2px; }
.lk-sheet h4 { font-size: 15px; margin: 14px 0 4px; color: #8c690d; }
.lk-sheet p, .lk-sheet li { margin: 5px 0; }
.lk-sheet ol, .lk-sheet ul { padding-left: 22px; }
.lk-sheet-meta { font-size: 13px; color: #5d5749; margin: 0 0 10px; }

.lk-dl dt { font-weight: 700; margin-top: 8px; }
.lk-dl dd { margin: 2px 0 0 14px; }

.lk-sheet-table { margin: 8px 0; white-space: normal; }
.lk-sheet-table th, .lk-sheet-table td { white-space: normal; border: 1px solid #ded5bf; }
.lk-sheet-table caption { caption-side: top; text-align: left; font-weight: 700; font-size: 13px; padding-bottom: 4px; }
.lk-blank td { height: 24px; }
.lk-sheet-phase { font-weight: 700; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; color: #5d5749; margin: 10px 0 2px; }
.lk-sheet-steps { margin-top: 2px; }

.lk-bench-table td:first-child { font-weight: 600; width: 46%; }
.lk-bench-table td { white-space: normal; }

.lk-figure { margin: 6px 0; text-align: center; }
.lk-figure svg { max-width: 100%; height: auto; }

mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; max-width: 100%; }

.lk-modal-h3 { margin: 0 0 6px; font-size: 16px; color: #8c690d; }
.lk-fp-preview { font-size: 13px; }

@media print {
    .lk-sheet { font-size: 10.5pt; }
    .lk-sheet h3 { font-size: 13pt; }
    .lk-sheet h4 { font-size: 11pt; }
    #sheet-bench { break-inside: avoid; }
}

/* ── Bench layout ─────────────────────────────────────────────── */
/* A short window scrolls the bench inside its column rather than squeezing
   the instruments (the canvas never drops below 440 px). */
#canvas-container { overflow-y: auto; }

/* The controls panel: six groups in a balanced grid, labelled as on the
   console. Pressed toggles show in the kit's highlight colour. */
#lab-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
#lab-controls .lk-group { display: flex; flex-direction: column; gap: 4px; padding: 6px 10px 8px; }
#lab-controls .lk-fill { display: flex; flex-wrap: wrap; gap: 4px; }
#lab-controls .lk-fill > button { flex: 1 1 0; min-width: 0; }
#lab-controls .control-item label { min-width: 44px; font-size: 12.5px; font-weight: 600; }
#mass-buttons { display: flex; flex-wrap: wrap; gap: 4px; }

@media (max-width: 1180px) {
    #lab-controls { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    #canvas-container { overflow-y: visible; }
    #lab-controls { grid-template-columns: 1fr; }
}