/* Segmented-Pill-Control für kleine feste Auswahlmengen (aktuell die Anrede).
 *
 * Bewusst als CSS-Komponente statt als Tailwind-Utility-Kette im Template:
 *
 * 1. `bg-primary` ist in diesem Projekt doppelt belegt - die Tailwind-CDN-
 *    Konfiguration in base.html setzt `primary: #10B981` (grün), themes.css
 *    setzt `.bg-primary` themenabhängig mit !important. Welche Regel bei
 *    einer Variante wie `has-[:checked]:bg-primary` gewinnt, ist nicht
 *    vorhersagbar.
 * 2. Hintergrund und Text müssen aus DEMSELBEN Token-Paar kommen. Zuvor
 *    stand hier `bg-primary` zusammen mit `--on-success`; im Dark Theme ist
 *    --on-success #0A192F und der Text damit praktisch unsichtbar.
 *
 * Markup (siehe frontend/templates/frontend/includes/salutation_title_fields.html):
 *   <label class="pill-option"><input type="radio" …><span>Frau</span></label>
 */

.pill-option {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    border: 1px solid var(--border);
    background-color: var(--surface);
    color: var(--on-surface-variant);
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Kompaktere Variante für dichte Raster (z.B. Modulrechte-Matrix). */
.pill-option--sm {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
}

/* Das Radio selbst wird nicht dargestellt - die Pille IST das Bedienelement.
 * `appearance: none` statt `display: none`, damit das Feld fokussierbar
 * bleibt und Tastaturbedienung sowie Screenreader weiter funktionieren. */
.pill-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.pill-option:hover {
    border-color: var(--primary);
}

/* Gepaarte Tokens: --primary als Hintergrund, --on-primary als Text. */
.pill-option:has(input[type="radio"]:checked) {
    background-color: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
    font-weight: 600;
}

/* Sichtbarer Fokusring, weil das Radio selbst unsichtbar ist. */
.pill-option:has(input[type="radio"]:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Read-only-Darstellung (deaktiviertes fieldset): keine Klick-Affordanz,
 * aber die getroffene Auswahl bleibt klar erkennbar. */
fieldset:disabled .pill-option,
.pill-option input[type="radio"]:disabled {
    cursor: default;
}

fieldset:disabled .pill-option:hover {
    border-color: var(--border);
}

/* Nicht gewählte Optionen im Lesemodus zurücknehmen, damit die gewählte
 * Anrede auf einen Blick hervorsticht. */
fieldset:disabled .pill-option:not(:has(input[type="radio"]:checked)) {
    opacity: 0.45;
}