/* Stili della superficie: guide. */
.guide-steps { display:flex; flex-direction:column; gap:var(--space-4); margin-bottom:var(--space-6); }
.guide-step { display:flex; gap:var(--space-4); align-items:flex-start; }
.guide-step__num {
    flex:0 0 auto; width:2.4rem; height:2.4rem; border-radius:var(--radius-pill);
    background:var(--color-primary); color:var(--color-text-on-brand);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-size:var(--text-lg); font-weight:var(--weight-bold);
}
.guide-step__body { flex:1; min-width:0; }
.guide-step__body a, .guide-globale a, .guide-cta p a { display:inline-flex; align-items:center; min-width:var(--tap-min); min-height:var(--tap-min); }
.guide-step__body .card__title { margin-bottom:var(--space-1); }
.guide-step__body p { color:var(--color-text-muted); margin:0 0 var(--space-2); }
.guide-tip {
    background:var(--color-primary-soft); border-radius:var(--radius-md);
    padding:var(--space-2) var(--space-3); font-size:var(--text-sm); color:var(--color-text);
}
.guide-faq details, .guide-fold {
    border-bottom:1px solid var(--color-border); padding:var(--space-3) 0;
}
.guide-faq details:last-child { border-bottom:none; }
.guide-faq summary, .guide-fold summary {
    cursor:pointer; min-height:var(--tap-min); font-weight:var(--weight-semibold); list-style:none;
    display:flex; justify-content:space-between; align-items:center; gap:var(--space-2);
}
.guide-faq summary::-webkit-details-marker, .guide-fold summary::-webkit-details-marker { display:none; }
.guide-faq summary::after, .guide-fold summary::after { content:'+'; color:var(--color-text-subtle); font-size:var(--text-xl); flex:0 0 auto; }
.guide-faq details[open] summary::after, .guide-fold[open] summary::after { content:'–'; }
/* Indice della guida e sottosezioni chiuse (DECISIONI n. 79): la guida passava le 9 schermate su telefono. */
.guide-index { margin-block:var(--space-3); }
.guide-card[id], .guide-steps[id] { scroll-margin-top:calc(var(--topbar-h, 64px) + var(--space-3)); }
.guide-faq p { color:var(--color-text-muted); margin:var(--space-2) 0 0; }
.guide-cta {
    text-align:center; padding:var(--space-6) var(--space-4);
}
.guide-cta p { color:var(--color-text-muted); margin:var(--space-2) 0 var(--space-4); }
.guide-globale h3 { font-size:var(--text-base); color:var(--color-text); margin:var(--space-4) 0 var(--space-2); }
.guide-globale h3:first-of-type { margin-top:0; }
.guide-globale ol, .guide-globale ul {
    margin:0; padding-left:var(--space-4);
    display:flex; flex-direction:column; gap:var(--space-2);
}
.guide-globale li { color:var(--color-text-muted); }
.guide-globale li b, .guide-globale p b { color:var(--color-text); }
.guide-cast { position:relative; overflow:hidden; padding:0; min-height:0; aspect-ratio:3/1; margin-bottom:var(--space-5); background:var(--color-art-backdrop); }
.guide-cast picture, .guide-cast img { display:block; width:100%; height:100%; }
.guide-cast img { position:absolute; inset:0; object-fit:cover; }
.guide-cast__copy { position:absolute; z-index:1; left:var(--space-5); bottom:var(--space-4); max-width:28rem; margin:0; color:var(--color-white); font-family:var(--font-display); font-size:var(--text-guide-cast); text-shadow:0 2px 16px var(--color-black); }
.guide-step__narrator { flex:0 0 var(--art-badge); width:var(--art-badge); height:var(--art-badge); overflow:hidden; border-radius:var(--radius-pill); background:var(--color-art-backdrop); }
.guide-step__narrator img { width:100%; height:100%; object-fit:cover; }
.guide-intro { display:flex; gap:var(--space-4); align-items:flex-start; }
.guide-intro__text { margin:0; font-size:var(--text-lg); }
.guide-faq__header { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-2); }
.guide-faq__header .card__title { margin-bottom:0; }
.guide-faq__narrator { flex-basis:var(--art-sign); width:var(--art-sign); height:var(--art-sign); }

@media (max-width:720px) {
    .guide-cast { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2); aspect-ratio:auto; }
    .guide-cast picture { flex:0 0 72px; width:72px; height:56px; overflow:hidden; border-radius:var(--radius-sm); }
    .guide-cast img { position:static; }
    .guide-cast__copy { position:static; font-family:var(--font-sans); font-size:var(--text-base); }
}
@media (max-width:640px) {
    .guide-step__narrator { flex-basis:var(--art-sign); width:var(--art-sign); height:var(--art-sign); }
    .guide-step, .guide-intro { display:block; }
    .guide-step::after, .guide-intro::after { content:""; display:block; clear:both; }
    .guide-step > .guide-step__num, .guide-step > .guide-step__narrator, .guide-intro > .guide-step__narrator {
        float:left; margin:0 var(--space-3) var(--space-2) 0;
    }
    .guide-step__body .guide-tip { clear:left; }
}

@media (min-width:1024px) { .guide-step__narrator { flex-basis:var(--art-portrait); width:var(--art-portrait); height:var(--art-portrait); } .guide-faq__narrator { flex-basis:var(--art-badge); width:var(--art-badge); height:var(--art-badge); } }

.tactic-presets { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap:var(--space-3); }
.tactic-preset { border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-3); }
.tactic-preset h3 { margin:0 0 var(--space-1); font-size:var(--text-base); }
.tactic-preset p { margin:0; color:var(--color-text-muted); font-size:var(--text-sm); }

.guide-card { margin-bottom:var(--space-5); }

.guide-card__heading { display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2); }

.guide-card__icon { font-size:var(--text-2xl); }

.guide-card__title { margin:0; }

.guide-card__intro { color:var(--color-text-muted);margin:0 0 var(--space-4); }

.guide-card__note { color:var(--color-text-muted);margin:0 0 var(--space-2); }

.guide-cta .guide-footer { margin:var(--space-3) 0 0; }

.engine-toc { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-5); }
.engine-toc a {
    display:inline-flex; align-items:center; min-width:var(--tap-min); min-height:var(--tap-min);
    font-size:var(--text-sm); padding:var(--space-1) var(--space-3);
    border:1px solid var(--color-border); border-radius:var(--radius-pill);
    color:var(--color-text-muted); text-decoration:none; background:var(--color-surface);
}
.engine-toc a:hover { border-color:var(--color-primary-ink); color:var(--color-primary-ink); }
.engine-section { margin-bottom:var(--space-4); scroll-margin-top:calc(var(--topbar-h) + var(--space-5)); }
.engine-section h2 { font-family:var(--font-display); font-size:var(--text-xl); margin:0 0 var(--space-3); }
.engine-section p, .engine-section li { color:var(--color-text-muted); line-height:var(--leading-normal); }
.engine-section b, .engine-section strong { color:var(--color-text); }
.engine-example {
    border-left:3px solid var(--color-accent); background:var(--color-surface-2);
    border-radius:0 var(--radius-md) var(--radius-md) 0;
    padding:var(--space-3) var(--space-4); margin:var(--space-3) 0;
    font-size:var(--text-sm);
}
.engine-example::before {
    content:'⚽ Esempio'; display:block; font-weight:var(--weight-bold);
    color:var(--color-text); margin-bottom:var(--space-1);
    font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-wide);
}
.engine-toc-wrap { display:flex; align-items:flex-start; gap:var(--space-3); margin-bottom:var(--space-5); }
.engine-toc-wrap .engine-toc { margin-bottom:0; flex:1; }
.engine-toc__narrator { flex:0 0 var(--art-sign); width:var(--art-sign); height:var(--art-sign); overflow:hidden; border-radius:var(--radius-pill); background:var(--color-art-backdrop); display:none; }
.engine-toc__narrator img { width:100%; height:100%; object-fit:cover; }
.engine-modulo__header, .engine-seed__header { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3); }
.engine-modulo__header h2, .engine-seed__header h2 { margin:0; }
.engine-modulo__narrator, .engine-seed__narrator { flex:0 0 var(--art-sign); width:var(--art-sign); height:var(--art-sign); overflow:hidden; border-radius:var(--radius-pill); background:var(--color-art-backdrop); }
.engine-modulo__narrator img, .engine-seed__narrator img { width:100%; height:100%; object-fit:cover; }
@media (min-width:641px) {
    .engine-toc__narrator { display:block; }
    .engine-toc-wrap {
        position:sticky;
        top:calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
        z-index:5;
        background:var(--color-bg);
        padding-block:var(--space-2);
    }
}

.engine-footer { text-align:center;padding:var(--space-5); }

.engine-footer__note { color:var(--color-text-muted);margin:0 0 var(--space-3); }