/* panels.css — the shared picker of R37 (panels.js), for the Secret Santa language pages.
   Built from /assets/polyatic.css tokens only, so it follows light and dark with the rest of the page.
   Without JavaScript nothing here hides anything: the row is empty and every panel shows.
   A panel is either the card itself (/amigo-secreto/) or a wrapper around a card and its questions (/wichteln/). */
.sp-picker{margin-top:1.5rem}
.sp-picker>.sp-head{margin-bottom:0}
.sp-picker>.sp-head>h2{margin-top:0}
.sp-picker>.sp-head>p{margin-bottom:0}
[data-sp-tabs]:empty{display:none}
[data-sp-tabs]{display:flex;flex-wrap:wrap;gap:.375rem;margin:.875rem 0 0;padding:0;list-style:none}
.sp-tab{appearance:none;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font:inherit;font-weight:600;font-size:.875rem;
  line-height:1.2;padding:.5rem .75rem;min-height:2.5rem;border-radius:999px;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.sp-tab:hover{border-color:var(--ink);color:var(--ink)}
.sp-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sp-tab[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.sp-tab.sp-all{background:transparent;border-style:dashed;color:var(--muted)}
.sp-tab.sp-all[aria-pressed="true"]{background:var(--surface-2);color:var(--ink);border-style:solid}
.sp-picker [data-sp-panel]{margin-top:.75rem}
.sp-picker [data-sp-panel][hidden]{display:none}
.sp-picker [data-sp-panel]>.sp-panel-h,.sp-picker [data-sp-panel] .ss-print-head>.sp-panel-h{font-size:1.3125rem;line-height:1.25;margin:0 0 .5rem}
.sp-picker [data-sp-panel] .gd-head>.sp-panel-h,.sp-picker [data-sp-panel]>.card>.sp-panel-h{font-size:1.3125rem;line-height:1.25;margin:0 0 .5rem}
/* a panel that holds a card AND its own questions (/wichteln/, T-PADIET.2): the questions sit right under it */
.sp-picker [data-sp-panel]>.explainer{margin-top:1.25rem}
.explainer>.sp-faq-h{font-size:1.125rem;letter-spacing:-.02em;margin:1.75rem 0 .25rem}
.explainer>.sp-faq-h:first-child{margin-top:0}
.sp-picker [data-sp-panel] h4{font-size:1rem;margin:1.25rem 0 .375rem}
.sp-picker [data-sp-panel]{scroll-margin-top:.75rem}
.sp-picker [data-sp-panel] [id]{scroll-margin-top:.75rem}
@media (max-width:480px){.sp-tab{font-size:.8125rem;padding:.4375rem .625rem}}
@media print{.sp-picker [data-sp-panel][hidden]{display:block}[data-sp-tabs]{display:none}}
/* a fold: a long secondary block (/wichteln/ school letter, ideas, teacher questions) closed behind its own heading on phones */
.sp-fold>summary{list-style:none;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:center;gap:.125rem;min-height:2.75rem;padding:.25rem 2rem .25rem 0}
.sp-fold>summary::-webkit-details-marker{display:none}
.sp-fold>summary::after{content:"";position:absolute;right:.5rem;top:50%;width:.5rem;height:.5rem;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:translateY(-75%) rotate(45deg);transition:transform .15s}
.sp-fold[open]>summary::after{transform:translateY(-25%) rotate(-135deg)}
.sp-fold>summary:hover::after{border-color:var(--ink)}
.sp-fold>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:.25rem}
.sp-fold>summary>h3{margin:0}
.sp-fold[open]>summary{margin-bottom:.75rem}
.sp-fold-note{font-size:.8125rem;line-height:1.35;color:var(--muted);font-weight:400}
.explainer>.sp-fold>summary>.sp-faq-h{font-size:1.125rem;letter-spacing:-.02em}
@media print{.sp-fold>summary::after{display:none}}