/* ========== CARD / STRUTTURA ==========\*/
.ua-card {
    background: #1C1C1C;
    border-radius: 30px;
    padding: 24px 28px
}

.ua-h2 {
    font-size: 20px;
    line-height: 24px;
    margin: 16px 8px;
    letter-spacing: .18px
}

.ua-project {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 36px
}

.ua-left {
    padding-right: 40px;
    border-right: 1px solid rgba(255,255,255,.12);
    display: flex;
    flex-direction: column;
    gap: 28px
}

.ua-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 48px
}

.ua-usecase {
    display: grid;
    grid-template-columns: 360px 1fr 1fr;
    gap: 40px
}
.ua-usecase {
    align-items: start;
}
    /* forza top-alignment tra le colonne   */
    .ua-usecase > * {
        align-self: start;
    }
/* ogni colonna parte dalla stessa riga */
.ua-nps {
    margin-top: 0;
    padding-top: 0;
}
.ua-metric {
    margin-top: 26px;
    min-width: 0
}
.ua-left .ua-h3 {
    margin-bottom: 12px;
}

.ua-left .ua-chip {
    margin-top: 4px;
}
/* chip più vicina al titolo */
/* ========= TITOLI / ICONA INFO ========= */
.ua-h3 {
    font-size: 20px;
    line-height: 24px;
    letter-spacing: .15px;
    font-weight: 500;
    margin: 0 0 59px
}

.ua-i {
    display: inline-flex;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    vertical-align: middle;
    cursor: help;
    color: rgba(255,255,255,.87);
    opacity: .9
}

    .ua-i:hover {
        opacity: 1
    }

    .ua-i svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
        display: block
    }

/* ========== SELECT 72px ==========\*/
.ua-select72 {
    position: relative;
    width: 328px;
    height: 72px;
    margin-top: 4px
}

    .ua-select72 .label {
        position: absolute;
        left: 16px;
        top: 8px;
        color: rgba(255,255,255,.38);
        font-size: 12px;
        line-height: 16px;
        letter-spacing: .4px
    }

    .ua-select72 select {
        position: absolute;
        inset: 0 auto auto 0;
        width: 100%;
        height: 56px;
        padding: 22px 40px 8px 16px;
        background: #121212;
        color: rgba(255,255,255,.87);
        border: none;
        border-radius: 4px 4px 0 0;
        outline: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23AFAFAF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 18px 18px
    }

    .ua-select72 .bar {
        position: absolute;
        left: 0;
        right: 0;
        top: 55px;
        height: 1px;
        background: rgba(255,255,255,.60)
    }

/* ========= CHIP KPI ========= */
.ua-chip {
    min-width: 61px;
    height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    background: #54A7FF;
    color: #101010;
    font-weight: 700;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

/* ========== TRACK + MARKER ==========\*/
.ua-track {
    position: relative;
    height: 2px;
    background: rgba(255,255,255,.38);
    border-radius: 1px;
    margin-top: 16px;
    margin-bottom: 18px
}
/* 3) Track: parte colorata più spessa fino al marker, sottile dopo  */
.ua-track {
    position: relative;
    margin-top: 16px;
    margin-bottom: 18px;
    height: 0; /* la linea è nei pseudo-element */
}

    .ua-track::before, /* tratto colorato (spesso) */
    .ua-track::after { /* tratto grigio (sottile)   */
        content: "";
        position: absolute;
        left: 0;
        right: auto;
        top: 0;
        transform: translateY(-1px); /* allinea con punta marker */
        border-radius: 1px;
    }

    .ua-track::before { /* prima del marker */
        width: var(--pos,0%);
        height: 2px; /* più spesso */
        background: var(--track-color,#54A7FF);
    }

    .ua-track::after { /* dopo il marker */
        left: var(--pos,0%);
        right: 0;
        height: 1px; /* più sottile */
        background: rgba(255,255,255,.38);
    }

    /* colori per le varianti */
    .ua-track.is-blue {
        --track-color: #54A7FF;
    }

    .ua-track.is-sand {
        --track-color: #F0C08C;
    }


.ua-marker {
    position: absolute;
    bottom: -2px;
    left: var(--pos,0%);
    transform: translateX(-50%);
    width: 32px;
    height: 62px;
    pointer-events: none
}

    .ua-marker svg {
        display: block;
        width: 32px;
        height: 62px
    }
    .ua-marker text {
        font-size: 10px;
        font-weight: 700;
        fill: #000;
        text-anchor: middle;
        dominant-baseline: middle; /* centro verticale reale */
    }

.ua-marker--blue path {
    fill: #54A7FF
}
/* Project level */
.ua-marker--sand path {
    fill: #F0C08C
}
/* SUS / NPS */
.ua-marker text {
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    fill: #000;
    text-anchor: middle;
    dominant-baseline: central
}

/* ========== SCALE ==========\*/
.ua-scale {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    margin: 6px 0 0;
    color: #E1E1E1;
    font-size: 10px;
    line-height: 20px;
    letter-spacing: .25px
}


/* ========= UEQ DOTS ========= */
.ua-dots {
    display: flex;
    gap: 12%;
    margin-top: 12px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

.ua-dot {
    width: 15px;
    height: 15px;
    border-radius: 999px;
    background: rgba(240,192,140,.18)
}

    .ua-dot.on {
        background: #F0C08C
    }

/* ========== RESPONSIVE ==========\*/
@media (max-width:1200px) {
    .ua-project {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .ua-left {
        border-right: 0;
        padding-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.12);
        padding-bottom: 16px
    }

    .ua-usecase {
        grid-template-columns: 1fr
    }
}
/* ———————— TOOLTIP “pannellino bianco” ———————— */
.tip {
    position: relative;
    display: inline-flex;
    margin-left: 8px;
    vertical-align: middle;
}

.tip-btn {
    all: unset;
    cursor: help;
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    color: rgba(255,255,255,.87);
    opacity: .9;
}

    .tip-btn:hover, .tip-btn:focus {
        opacity: 1;
        outline: none
    }

    .tip-btn svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
        display: block
    }

/* Card: 344×68 come Figma */
.tip-card {
    /* position: absolute ;
    left: -84px;
    top: 28px;
    width: 344px;
    height: 80px;
    padding: 14px 14px;
    background: #fff;
    color: #000;
    border-radius: 4px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .20);
    line-height: 20px;
    font-size: 12px;
    letter-spacing: .25px;
    display: none;
    z-index: 40;*/
    position: absolute !important;
    left: -84px !important;
    top: 28px !important;
    transform: none !important;
    display: none;
    width: 344px;
    height: 80px;
    padding: 14px 14px;
    background: #fff;
    color: #000;
    border-radius: 4px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .20);
    line-height: 20px;
    font-size: 12px;
    letter-spacing: .25px;
    pointer-events: none;
    z-index: 9999;
}

/* Mostra su hover/focus accessibile */
.tip:hover .tip-card,
.tip:focus-within .tip-card {
    display: block
}

/* Variante scura (se mai servisse) */
.tip-card.dark {
    background: #121212;
    color: rgba(255,255,255,.87);
    box-shadow: 0 3px 5px rgba(0,0,0,.35);
}

/* Mobile: centra e non uscire dal viewport */
@media (max-width: 600px) {
    .tip-card {
        left: 50%;
        transform: translateX(-50%)
    }
}