/* The contact sheet maker (/tools/contact-sheet): its options, the caption choices and the preview of page 1. */
.cs-options { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cs-captions { display: flex; flex-wrap: wrap; gap: 10px 22px; min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
.cs-captions legend {
    width: 100%; margin: 0 0 8px; padding: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-4);
}
.cs-captions label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); cursor: pointer; }
.cs-captions input { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--red); }
.cs-settings-note { margin-top: 8px; }
.cs-preview { max-width: 560px; margin: 22px 0 0; }
.cs-preview canvas {
    display: block; width: 100%; height: auto; border-radius: 2px; background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(15, 14, 13, 0.08), 0 10px 28px rgba(15, 14, 13, 0.12);
}
.cs-preview figcaption { margin-top: 12px; }
.cs-panel .btn[hidden] { display: none; }
@media (max-width: 640px) {
    .cs-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 14px; }
}