/* dear-santa.css - page layer for /letter-to-santa/ on top of /assets/polyatic.css and the stage of
   /letter-from-santa/santa.css: the three sheet tabs, the wish-count stepper, the colour-in switch and
   the three download buttons. Tokens only; no new colours or fonts. */
.ds-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.375rem;max-width:30rem}
.ds-tabs button{padding:.25rem .375rem;white-space:nowrap}
.ds-dl{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:.5rem}
.ds-dl .btn{height:auto;min-height:3.25rem;padding:.4rem .5rem;line-height:1.2}
.ds-dl .btn small{display:block;font-weight:500;opacity:.8;margin:.125rem 0 0}
.ds-docx-note{max-width:30rem;margin:.375rem auto 0;font-size:.8125rem;color:var(--mat-ink);opacity:.85;text-align:center}
.ds-docx-note[hidden]{display:none}
.ds-senders{flex-wrap:wrap}
.ds-senders button{height:auto;min-height:2.75rem;line-height:1.2;padding:.375rem .5rem}
.ds-step{display:flex;align-items:center;gap:.5rem}
.ds-step input[type=range]{flex:1 1 auto;min-width:0;accent-color:var(--accent)}
.ds-step .btn{flex:0 0 auto;width:2.75rem;height:2.75rem;padding:0;font-size:1.25rem;line-height:1}
.ds-step output{flex:0 0 auto;min-width:2ch;font-weight:700;font-size:1.125rem;text-align:center;font-variant-numeric:tabular-nums}
.ds-check{display:flex;gap:.625rem;align-items:flex-start;padding:.625rem .75rem;border:1px solid var(--line);border-radius:.75rem;cursor:pointer}
.ds-check input{width:1.25rem;height:1.25rem;margin:.125rem 0 0;flex:0 0 auto;accent-color:var(--accent)}
.ds-check small{display:block;color:var(--muted)}
.field[hidden]{display:none}
.ls-form .modes button small{display:block}
@media (max-width:26rem){.ds-dl{grid-template-columns:1fr 1fr 1fr}.ds-dl .btn{font-size:.875rem;padding:.375rem .25rem}}