/*
 * CARD-BACK-HEADER.CSS — Header zone: HAIR (slot-1) + optional HEADWEAR (slot-9)
 *
 * Headwear→hair gradient when headwear is set, hair-only when empty.
 * Labels read hair (--primary). (Legacy lighting/slot-11 brightening removed.)
 * Drawer: shades of eyes (slot-2).
 */

/* ═══════════════════════════════════════════════════════════════════
   HEADER — [Tools] [Think]
   Shades of hair (slot-1)
   ═══════════════════════════════════════════════════════════════════ */

.card-back-header {
    display: flex;
    align-items: stretch;
    padding: 0.3rem 0.5rem;
    gap: 0.4rem;
    flex-shrink: 0;

    /* Headwear (slot-9) → hair (slot-1). Falls back to hair-only when no headwear. */
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--slot-9, var(--primary)) 25%, var(--card-base)) 0%,
        color-mix(in srgb, var(--primary) 18%, var(--card-base)) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 25%, rgba(0, 0, 0, 0.3));
    border-radius: 8px 8px 0 0;
}

/* Inline toggles */
.card-back-header .header-toggles {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.header-toggle {
    font-size: 0.5rem;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Model toggles (Tools, Think checkboxes) */
.model-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    opacity: 1;
    padding: 0;
}

.model-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--primary);
}

.model-toggle:has(input:checked) {
    color: var(--primary);
}