/* ==========================================================================
   tp-segmented — Segmentierte Auswahl (Radiogroup als Button-Leiste)
   --------------------------------------------------------------------------
   Für kurze, sich ausschließende Auswahlen mit 2–4 Optionen (Executor,
   Status, Ansichtsmodus). Bei mehr Optionen ist ein Select die bessere Wahl.

     .tp-segmented[role="radiogroup"]
       └── label.tp-segmented__option
             ├── input[type=radio]      (visuell verborgen)
             └── span.tp-segmented__label

   Die Spaltenzahl kommt aus --tp-seg-cols und wird vom Builder gesetzt.
   Optionen können über --accent hinaus eingefärbt werden (siehe --ai).
   ========================================================================== */

.tp-segmented {
    display: grid;
    grid-template-columns: repeat(var(--tp-seg-cols, 2), minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    min-height: var(--tp-control-h);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.tp-segmented__option {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.tp-segmented__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tp-segmented__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    min-height: calc(var(--tp-control-h) - 8px);
    padding: 0 8px;
    border-radius: calc(var(--r-sm) - 2px);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
        background var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease),
        box-shadow var(--dur-fast) var(--ease);
}

.tp-segmented__label:hover {
    color: var(--text-1);
}

.tp-segmented__option input:checked + .tp-segmented__label {
    background: var(--surface);
    color: var(--text-1);
    box-shadow: var(--shadow-xs);
}

.tp-segmented__option input:focus-visible + .tp-segmented__label {
    outline: none;
    box-shadow: var(--tp-focus-ring);
}

/* ── Farbige Varianten ───────────────────────────────────────────────────── */

/* Hebt die KI-Ausführung von der menschlichen ab, ohne eine zweite
   Komponente zu brauchen. */
.tp-segmented__option input:checked + .tp-segmented__label--ai {
    color: var(--info);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--info) 35%, transparent),
        var(--shadow-xs);
}

.tp-segmented__option input:checked + .tp-segmented__label--accent {
    color: var(--accent-strong);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent),
        var(--shadow-xs);
}