/* Stili di templates/_main/feedback.html — stessa grammatica di /about (hero, fascicolo). */

.fb-hero{
    border-bottom: 1px solid var(--bs-border-color);
    background:
        radial-gradient(ellipse at 85% 0%, var(--bs-primary-bg-subtle), transparent 60%),
        var(--bs-tertiary-bg);
}
.fb-hero h1{ font-size: 2.1rem; font-weight: 600; }
.fb-lead{ max-width: 46rem; color: var(--bs-secondary-color); }
.fb-badge-exp{
    font-size: var(--fs-2xs);
    letter-spacing: .06em;
    color: var(--bs-warning-text-emphasis);
    background: var(--bs-warning-bg-subtle);
    border: 1px solid var(--bs-warning-border-subtle);
    vertical-align: .1em;
}

/* ---- Card del form e degli stati (grazie / limite) ---- */
.fb-card{
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: var(--bs-body-bg);
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px -12px rgba(0,0,0,.12);
    padding: 1.75rem;
}
@media (max-width: 575.98px){ .fb-card{ padding: 1.25rem; } }

.fb-label{
    display: block;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--bs-secondary-color);
    margin-bottom: .6rem;
}
.fb-optional{
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--bs-tertiary-color);
    margin-left: .25rem;
}

/* ---- Scelta del tipo: tessere radio ---- */
.fb-kind{
    display: flex; flex-direction: column; gap: .2rem;
    height: 100%;
    padding: .85rem .9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.fb-kind .bi{ font-size: 1.25rem; color: var(--bs-secondary-color); margin-bottom: .25rem; transition: color .15s; }
.fb-kind-title{ font-weight: 600; font-size: var(--fs-sm); color: var(--bs-body-color); }
.fb-kind-hint{ font-size: var(--fs-xs); color: var(--bs-secondary-color); line-height: 1.35; }
.fb-kind:hover{ background: var(--bs-tertiary-bg); }
.btn-check:checked + .fb-kind{
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    box-shadow: inset 0 0 0 1px var(--bs-primary);
}
.btn-check:checked + .fb-kind .bi{ color: var(--bs-primary); }
.btn-check:focus-visible + .fb-kind{ outline: 2px solid var(--bs-primary); outline-offset: 2px; }

/* ---- Tavoletta di partenza ---- */
.fb-chip{
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .35rem .5rem .35rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    background: var(--bs-tertiary-bg);
    font-size: var(--fs-sm);
}
.fb-chip a{ font-weight: 600; text-decoration: none; }
.fb-chip .btn-close{ width: .6rem; height: .6rem; background-size: .6rem; }

/* ---- Riferimenti (mention) sopra il testo ---- */
.fb-label-row{
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .5rem; margin-bottom: .6rem;
}
.fb-refs{ display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.fb-refs-lead{ font-size: var(--fs-xs); color: var(--bs-tertiary-color); margin-right: .15rem; }
.fb-ref{
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .55rem;
    font-size: var(--fs-xs);
    color: var(--bs-secondary-color);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    transition: color .15s, border-color .15s, background-color .15s;
}
.fb-ref:hover, .fb-ref:focus-visible{
    color: var(--bs-primary); border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle);
}
.fb-ref kbd, .fb-guide kbd{
    padding: 0 .3rem;
    font-size: var(--fs-2xs);
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
    box-shadow: none;
}
.fb-chip code{ font-size: var(--fs-xs); color: var(--bs-secondary-color); }

/* ---- Testo ---- */
.fb-textarea{ resize: vertical; min-height: 10rem; line-height: 1.55; }
.fb-count{
    text-align: right;
    font-size: var(--fs-xs);
    color: var(--bs-tertiary-color);
    margin-top: .3rem;
    font-variant-numeric: tabular-nums;
}
.fb-as{ font-size: var(--fs-sm); color: var(--bs-secondary-color); }
.fb-as .bi{ color: var(--bs-success); margin-right: .25rem; }

.fb-actions{
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}
.fb-pow{ font-size: var(--fs-xs); color: var(--bs-secondary-color); display: inline-flex; align-items: center; gap: .4rem; }
.fb-pow.is-ready{ color: var(--bs-success-text-emphasis); }
.fb-pow.is-error{ color: var(--bs-danger-text-emphasis); }

/* honeypot: fuori schermo, non display:none (alcuni bot lo saltano) */
.fb-hp{ position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Stati grazie / limite ---- */
.fb-done{ padding: 3rem 1.75rem; }
.fb-done-icon{
    width: 4rem; height: 4rem; margin: 0 auto 1rem;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 2rem;
    color: var(--bs-success);
    background: var(--bs-success-bg-subtle);
}
.fb-done-icon--wait{ color: var(--bs-warning-text-emphasis); background: var(--bs-warning-bg-subtle); }

/* ---- Guida (colonna destra; sopra e richiudibile su schermi piccoli) ---- */
.fb-guide{
    position: sticky; top: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: var(--bs-body-bg);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.fb-guide-header{
    display: flex; align-items: center; justify-content: space-between;
    list-style: none;
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    border-radius: .75rem .75rem 0 0;
    padding: .85rem 1.25rem .6rem;
    cursor: pointer;
}
.fb-guide-header::-webkit-details-marker{ display: none; }
.fb-guide:not([open]) .fb-guide-header{ border-bottom: 0; border-radius: .75rem; }
.fb-guide-chevron{ transition: transform .2s; }
.fb-guide[open] .fb-guide-chevron{ transform: rotate(180deg); }
@media (min-width: 992px){ .fb-guide-header{ cursor: default; pointer-events: none; } }
@media (max-width: 991.98px){ .fb-guide{ position: static; } }

.fb-steps > li{
    display: grid; grid-template-columns: 2rem 1fr; gap: .5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.fb-steps > li:last-child{ border-bottom: 0; }
.fb-num{
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--bs-primary);
    font-variant-numeric: tabular-nums;
    padding-top: .15rem;
}
.fb-step-title{ font-size: var(--fs-sm); font-weight: 600; margin-bottom: .35rem; }
.fb-steps p, .fb-ticks{ font-size: var(--fs-sm); color: var(--bs-secondary-color); margin-bottom: 0; }
.fb-ticks li{ display: flex; gap: .45rem; padding: .1rem 0; }
.fb-ticks .bi{ color: var(--bs-primary); flex-shrink: 0; }

.fb-example{
    margin-top: .6rem;
    padding: .6rem .85rem;
    border-left: 2px solid var(--bs-primary);
    border-radius: 0 .4rem .4rem 0;
    background: var(--bs-tertiary-bg);
    font-size: var(--fs-sm);
    color: var(--bs-body-color);
}
.fb-translit{ font-family: var(--font-serif); font-style: italic; }

.fb-guide-foot{
    font-size: var(--fs-xs);
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
    border-radius: 0 0 .75rem .75rem;
    padding: .7rem 1.25rem;
}