/*
 * Guida e tour di benvenuto.
 *
 * Solo token: il tema scuro e le palette cambiano i token e queste pagine li
 * seguono senza un secondo blocco di regole.
 */

/* ═══════════════════════════════ Indice ═══════════════════════════════ */

.guide-search {
    margin: 1rem 0 1.5rem;
    max-width: 640px;
    position: relative;
}

.guide-search-icon {
    color: var(--bs-secondary-color);
    left: .9rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.guide-search-input {
    border-radius: var(--p-border-radius-full);
    padding: .65rem 1rem .65rem 2.5rem;
}

.guide-category { margin-bottom: 2rem; }
.guide-category-head { margin-bottom: .75rem; }
.guide-category-title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.guide-category-text { color: var(--bs-secondary-color); font-size: .88rem; margin: .15rem 0 0; }

.guide-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* align-content: start. Le schede di una riga hanno tutte la stessa altezza:
   senza, in quella con meno testo lo spazio in più finiva distribuito fra le
   righe della griglia e allungava la pill «Per amministratori». */
.guide-card {
    align-content: start;
    background: var(--gt-surface);
    border: 1px solid var(--gt-border);
    border-radius: var(--p-border-radius-xl);
    color: inherit;
    display: grid;
    gap: .3rem;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 1rem;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.guide-card:hover,
.guide-card:focus-visible {
    border-color: color-mix(in srgb, var(--gt-accent) 45%, var(--gt-border));
    box-shadow: var(--gt-shadow-sm);
    color: inherit;
    transform: translateY(-1px);
}

.guide-card-icon {
    align-items: center;
    background: color-mix(in srgb, var(--gt-accent) 12%, transparent);
    border-radius: var(--p-border-radius-lg);
    color: var(--gt-accent);
    display: flex;
    grid-row: span 2;
    height: 2.4rem;
    justify-content: center;
    margin-right: .5rem;
    width: 2.4rem;
}

.guide-card-title { font-weight: 700; }
.guide-card-summary { color: var(--bs-secondary-color); font-size: .85rem; line-height: 1.45; }

.guide-card-badge {
    background: color-mix(in srgb, var(--gt-warning) 16%, transparent);
    border-radius: var(--p-border-radius-full);
    color: var(--gt-warning);
    font-size: .68rem;
    font-weight: 700;
    align-self: start;
    grid-column: 2;
    justify-self: start;
    letter-spacing: .03em;
    margin-top: .2rem;
    padding: .1rem .5rem;
    text-transform: uppercase;
}

.guide-card[hidden],
.guide-category[hidden] { display: none; }

.guide-footnote { font-size: .85rem; margin-top: 1rem; }

/* ═══════════════════════════════ Argomento ══════════════════════════════ */

.guide-breadcrumb {
    color: var(--bs-secondary-color);
    display: flex;
    font-size: .85rem;
    gap: .4rem;
    margin-bottom: .75rem;
}

.guide-topic-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.guide-topic-icon {
    align-items: center;
    background: color-mix(in srgb, var(--gt-accent) 14%, transparent);
    border-radius: var(--p-border-radius-xl);
    color: var(--gt-accent);
    display: flex;
    flex: 0 0 3.2rem;
    font-size: 1.4rem;
    height: 3.2rem;
    justify-content: center;
}

.guide-topic-head > div:nth-child(2) { flex: 1 1 280px; }
.guide-topic-open { margin-left: auto; }

.guide-topic-layout {
    align-items: start;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 220px minmax(0, 1fr);
}

.guide-topic-layout > .guide-topic-body:first-child { grid-column: 1 / -1; max-width: 820px; }

.guide-toc {
    border-left: 2px solid var(--gt-border);
    padding-left: 1rem;
    position: sticky;
    top: calc(var(--gt-header-height) + 1rem);
}

.guide-toc-title {
    color: var(--bs-secondary-color);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    margin-bottom: .5rem;
    text-transform: uppercase;
}

.guide-toc ol { display: grid; gap: .4rem; margin: 0; padding-left: 1rem; }
.guide-toc a { color: inherit; font-size: .88rem; text-decoration: none; }
.guide-toc a:hover { color: var(--gt-accent); }

.guide-topic-body { max-width: 820px; }

.guide-section {
    background: var(--gt-surface);
    border: 1px solid var(--gt-border);
    border-radius: var(--p-border-radius-xl);
    margin-bottom: 1rem;
    padding: 1.25rem 1.4rem;
    scroll-margin-top: calc(var(--gt-header-height) + 1rem);
}

.guide-section-title {
    align-items: center;
    display: flex;
    font-size: 1.05rem;
    font-weight: 700;
    gap: .6rem;
    margin-bottom: .9rem;
}

.guide-section-number {
    align-items: center;
    background: var(--gt-accent);
    border-radius: 50%;
    color: var(--p-primary-contrast-color);
    display: inline-flex;
    flex: 0 0 1.6rem;
    font-size: .8rem;
    height: 1.6rem;
    justify-content: center;
}

.guide-steps { display: grid; gap: .55rem; line-height: 1.55; margin: 0; padding-left: 1.3rem; }
.guide-steps li::marker { color: var(--gt-accent); font-weight: 700; }

.guide-tip {
    align-items: flex-start;
    background: color-mix(in srgb, var(--gt-info) 10%, transparent);
    border-radius: var(--p-border-radius-lg);
    display: flex;
    font-size: .9rem;
    gap: .55rem;
    margin-top: .9rem;
    padding: .65rem .8rem;
}

.guide-tip-icon { color: var(--gt-info); margin-top: .15rem; }

.guide-related { margin-top: 2rem; }
.guide-related-title { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; }

@media (max-width: 991.98px) {
    .guide-topic-layout { grid-template-columns: minmax(0, 1fr); }
    .guide-toc { position: static; }
    .guide-topic-open { margin-left: 0; width: 100%; }
}

/* ═══════════════════════════ Tour di benvenuto ══════════════════════════ */

.onboarding-content {
    border: none;
    border-radius: var(--p-border-radius-2xl);
    overflow: hidden;
    padding: 2rem 1.75rem 1.25rem;
    position: relative;
    text-align: center;
}

.onboarding-close { position: absolute; right: 1rem; top: 1rem; }

.onboarding-step[hidden] { display: none; }

.onboarding-illustration {
    align-items: center;
    background: linear-gradient(135deg, var(--p-primary-600) 0%, var(--p-primary-500) 55%, var(--p-cyan-500) 100%);
    border-radius: 50%;
    box-shadow: 0 .6rem 1.6rem color-mix(in srgb, var(--gt-accent) 35%, transparent);
    color: #fff;
    display: inline-flex;
    font-size: 2rem;
    height: 4.5rem;
    justify-content: center;
    margin-bottom: 1rem;
    width: 4.5rem;
}

.onboarding-counter {
    color: var(--gt-accent);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    margin-bottom: .3rem;
    text-transform: uppercase;
}

.onboarding-title { font-size: 1.35rem; font-weight: 800; margin-bottom: .6rem; }
.onboarding-text { color: var(--bs-secondary-color); line-height: 1.6; margin: 0 auto; max-width: 30rem; min-height: 5em; }

.onboarding-dots { display: flex; gap: .4rem; justify-content: center; margin: 1.25rem 0 1rem; }

.onboarding-dot {
    background: var(--gt-border);
    border-radius: var(--p-border-radius-full);
    height: .45rem;
    transition: background .2s, width .2s;
    width: .45rem;
}

.onboarding-dot.is-active { background: var(--gt-accent); width: 1.4rem; }

/* Due gruppi agli estremi: a sinistra le uscite (Salta, o Apri la guida
   nell'ultimo passo), a destra Indietro accanto all'azione principale. I
   posti non cambiano da un passo all'altro. */
.onboarding-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-between;
}

.onboarding-actions-start,
.onboarding-actions-end,
.onboarding-links {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.onboarding-actions-end { margin-left: auto; }
.onboarding-actions [hidden] { display: none !important; }

/* Le icone uicons hanno l'altezza della riga di testo e il glifo appoggiato
   sulla linea di base: in un cerchio centrato con flex risultano spostate in
   basso. Riga alta quanto il glifo e blocco proprio le rimettono al centro. */
.onboarding-illustration i,
.guide-card-icon i,
.guide-topic-icon i {
    display: flex;
    line-height: 1;
}

.onboarding-illustration i::before,
.guide-card-icon i::before,
.guide-topic-icon i::before {
    display: block;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .guide-card,
    .onboarding-dot { transition: none; }
}

@media (max-width: 575.98px) {
    .onboarding-content { padding: 1.75rem 1.1rem 1rem; }
    /* Sulla stessa riga anche qui: la finestra è larga abbastanza per i due
       gruppi, e andare a capo li disallineerebbe. Se un giorno non bastasse,
       il flex-wrap del contenitore li separa da solo. */
    .onboarding-actions-end { justify-content: flex-end; }
}