/* carta.css - page layer for /carta-de-papa-noel/ on top of /assets/polyatic.css and the stage of
   /letter-from-santa/santa.css: the two-sender switch on the mat, the four letter kinds, the stationery
   chips and the small choices (girl/boy, who placed the presents). */
.ls-mode.cp-sender{grid-template-columns:repeat(2,minmax(0,1fr))}
.cp-sender button{display:flex;align-items:center;justify-content:center;min-height:2.5rem;padding:.25rem .5rem;border:0;border-radius:999px;background:transparent;
  color:var(--mat-ink);font:inherit;font-size:.875rem;font-weight:650;cursor:pointer}
.cp-sender button.active{background:var(--signal);color:var(--signal-ink)}
.cp-sender button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.cp-kinds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.25rem;max-width:34rem}
.cp-kinds button{padding:.25rem .25rem;min-height:2.25rem;line-height:1.15;font-size:.8rem}
@media (max-width:26rem){.cp-kinds{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cp-designs{gap:.375rem}
.cp-designs .chip{padding:.375rem .6875rem;font-size:.8125rem}
.cp-designs .chip.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.cp-choice{flex-wrap:wrap}
.cp-choice button{height:auto;min-height:2.75rem;line-height:1.2;padding:.375rem .5rem}
.ls-form input.cp-second{margin-top:.375rem}
.cp-kindnote{margin:.125rem 0 .75rem;font-size:.875rem;color:var(--muted)}
.cp-kindnote b{color:var(--ink)}
.ls-langs{margin:1.5rem .125rem 0;font-size:.875rem;color:var(--muted)}