/* Print templates: template choices in columns, compact number fields, the page preview. Loaded only on /tools/print-templates/. */
.pt-templates { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.pt-templates legend { grid-column: 1 / -1; }
/* A long label wraps beside its checkbox or radio, never below it (narrow screens). */
#options .option-row:has(> input[type="checkbox"]), #options .option-row:has(> input[type="radio"]) { flex-wrap: nowrap; align-items: flex-start; }
/* tokens.css gives every input a 40 px min-height; a 20 px radio or checkbox would then sit 10 px low in a top-aligned row. */
#options .option-row:has(> input[type="checkbox"]) > input, #options .option-row:has(> input[type="radio"]) > input { flex: none; min-height: 0; margin-top: 3px; }
.pt-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--matrix-space-4) var(--matrix-space-16); }
.pt-inline legend { width: 100%; }
.pt-inline .option-row { min-height: 0; }
.pt-num { width: 6.5em; }
#year { width: 6em; }
#paper, #layout, #lang, #month, #staves, #line-width, #spacing { max-width: 100%; }
.pt-cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: var(--matrix-space-8) var(--matrix-space-12); }
.pt-cl { display: grid; gap: 2px; font-size: var(--matrix-type-caption); }
.pt-cl .pt-num { width: 100%; }
.pt-text-rows { display: grid; gap: var(--matrix-space-8); }
/* A stacked row never wraps: .option-row's flex-wrap: wrap, in a column, let WebKit put the label text box in a second column
   beside its label, 359 px wide on a 320 px screen. */
.pt-stack { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.pt-text { width: 100%; font-family: var(--matrix-font-mono); }
.pt-warning { margin: 0 0 var(--matrix-space-8); color: var(--matrix-warning); }
.pt-preview-block { display: grid; gap: var(--matrix-space-8); justify-items: start; margin-top: var(--matrix-space-12); }
.pt-preview-canvas { display: block; width: min(100%, 360px); height: auto; border: 1px solid var(--matrix-border); background: #ffffff; box-shadow: var(--matrix-shadow-card); }
.option-row input[type="color"] { width: 44px; height: var(--matrix-control-min-height); padding: 2px; border: 1px solid var(--matrix-control-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); }
.pt-note { margin: 0; font-size: var(--matrix-type-caption); }
/* The lines, the page and the print check, folded under a summary that says what they are set to (Lucy's round 1, L39); the
   summary is a 44 px target. */
.pt-more { border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); padding: 0 var(--matrix-space-16); }
.pt-more[open] { display: grid; gap: var(--matrix-space-16); padding-bottom: var(--matrix-space-16); }
.pt-more > summary { cursor: pointer; font-weight: 600; min-height: 44px; box-sizing: border-box; padding-block: 10px; overflow-wrap: anywhere; }
.pt-more-state { font-weight: 400; }
.pt-more > .option-group { border: 0; padding: 0; }