/* "Kies een tekst" dialog */
.text-picker { width: min(640px, calc(100vw - 24px)); max-height: min(86vh, 900px); padding: 0; border: 0; border-radius: 22px; background: var(--ground); color: var(--ink); box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
.text-picker::backdrop { background: rgb(15 30 22 / .55); }
.text-picker-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 10px; background: var(--ground); }
.text-picker-head h2 { font-size: 1.6rem; }
.text-picker-tones { position: sticky; top: 68px; z-index: 1; padding: 6px 20px 14px; background: var(--ground); }
.text-picker-list { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 22px; }
.text-choice { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); text-align: left; cursor: pointer; color: var(--ink); }
.text-choice:hover, .text-choice:focus-visible { border-color: var(--green); }
.text-choice-tone { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.text-choice-text { font: 600 22px/1.25 var(--hand); color: var(--navy); white-space: pre-line; }
/* On a small screen the tones are one row that scrolls sideways, so the texts keep room. */
@media (max-width: 600px), (max-height: 700px) {
  .text-picker-tones { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .text-picker-tones::-webkit-scrollbar { display: none; }
  .text-picker-tones > * { flex: none; }
}
.text-picker-status { margin: 0; padding: 0 20px 14px; }

/* Example texts on a card's page (templates/editor.php) */
.card-examples { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.card-examples .text-choice-text { font-size: 19px; }