/* Perché: il launcher deve restare visibile in ogni pagina senza coprire i comandi principali; vedi docs/74-tour-funzionalita.md. */
.feature-tours { position: relative; z-index: 2147483000; }
.feature-tour-launcher { position: fixed; inset: auto max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) auto; z-index: 2147483000; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .65rem 1rem; border: 1px solid #b96229; border-radius: 999px; background: #67351f; color: #fff; box-shadow: 0 8px 24px #23150e33; font: 700 .9rem/1.2 system-ui, sans-serif; cursor: pointer; }
.feature-tour-launcher:hover { background: #7f4226; }
.feature-tour-launcher:focus-visible, .feature-tour-dialog button:focus-visible, .feature-tour-dialog input:focus-visible, .feature-tour-dialog select:focus-visible, .feature-tour-dialog textarea:focus-visible { outline: 3px solid #efaa49; outline-offset: 3px; }
.feature-tour-dialog { box-sizing: border-box; width: min(92vw, 460px); max-height: min(85vh, 760px); margin: auto; padding: 0; border: 1px solid #e5c9aa; border-radius: 18px; background: #fffaf3; color: #302218; box-shadow: 0 24px 70px #20110655; overflow: visible; font: 400 1rem/1.5 system-ui, sans-serif; }
/* La sezione evidenziata deve rimanere leggibile anche se altri dialoghi dell'app sfocano lo sfondo. */
.feature-tour-dialog::backdrop { background: #17120f55; backdrop-filter: none; }
.feature-tour-shell { box-sizing: border-box; position: relative; z-index: 1; max-height: min(85vh, 760px); padding: 1.5rem; overflow: auto; overscroll-behavior: contain; border-radius: inherit; background: inherit; }
.feature-tour-spotlight { position: fixed; z-index: 0; box-sizing: border-box; border: 3px solid #fbbf58; border-radius: 10px; box-shadow: 0 0 0 4px #2d1a1399, 0 0 24px #fbbf58; pointer-events: none; }
.feature-tour-spotlight[hidden] { display: none; }
.feature-tour-target { outline: 3px solid #fbbf58 !important; outline-offset: 5px !important; scroll-margin-block: 6rem; }
.feature-tour-close { position: absolute; top: .75rem; right: .75rem; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.6rem; cursor: pointer; }
.feature-tour-close:hover { background: #e9d9c7; }
.feature-tour-content { padding-right: .75rem; }
.feature-tour-eyebrow { margin: 0 0 .45rem; color: #914c25; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.feature-tour-heading { margin: 0 1.7rem .75rem 0; font-size: clamp(1.4rem, 5vw, 1.8rem); line-height: 1.2; }
.feature-tour-heading:focus { outline: none; }
.feature-tour-intro, .feature-tour-body { margin: 0 0 1rem; }
.feature-tour-progress { margin: 0 0 .75rem; color: #73553e; font-size: .88rem; font-weight: 650; }
.feature-tour-catalog { display: grid; gap: .75rem; }
.feature-tour-catalog-item { padding: 1rem; border: 1px solid #e4cbb2; border-radius: 12px; background: #fff; }
.feature-tour-catalog-item h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.feature-tour-catalog-item p { margin: 0 0 .8rem; color: #594537; font-size: .9rem; }
.feature-tour-examples, .feature-tour-simulation { margin: 1rem 0; padding: 1rem; border: 1px solid #e4cbb2; border-radius: 12px; background: #fff; }
.feature-tour-examples h4, .feature-tour-simulation h4 { margin: 0 0 .5rem; font-size: .9rem; }
.feature-tour-examples ul { margin: 0; padding-left: 1.3rem; }
.feature-tour-examples li + li { margin-top: .35rem; }
.feature-tour-examples p { margin: 0; }
.feature-tour-target-note { padding: .65rem .8rem; border-left: 3px solid #bb7231; background: #f5eadc; font-size: .88rem; }
.feature-tour-field { display: grid; gap: .3rem; margin: .7rem 0; font-size: .87rem; font-weight: 650; }
.feature-tour-field input, .feature-tour-field select, .feature-tour-field textarea { box-sizing: border-box; width: 100%; min-height: 2.5rem; padding: .5rem .65rem; border: 1px solid #a99079; border-radius: 7px; background: #fff; color: #302218; font: inherit; font-weight: 400; }
.feature-tour-feedback { margin: .6rem 0 0; font-size: .88rem; }
.feature-tour-feedback[data-success="true"] { color: #176246; }
.feature-tour-feedback[data-success="false"] { color: #a23e2e; }
.feature-tour-navigation { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.feature-tour-dialog button { font: inherit; cursor: pointer; }
.feature-tour-primary, .feature-tour-secondary { min-height: 2.5rem; padding: .55rem .8rem; border-radius: 8px; font-size: .88rem !important; font-weight: 700 !important; }
.feature-tour-primary { border: 1px solid #713a21; background: #713a21; color: #fff; }
.feature-tour-primary:hover { background: #8b4928; }
.feature-tour-secondary { border: 1px solid #a68468; background: #fff; color: #58341f; }
.feature-tour-secondary:hover { background: #f2e4d5; }
.feature-tour-secondary:disabled { opacity: .45; cursor: default; }
.feature-tour-link { display: inline-block; margin: .9rem .8rem 0 0; padding: 0; border: 0; background: none; color: #78401e; font-size: .83rem !important; text-decoration: underline; }

/* Perché: il catalogo è modale, ma il passo lascia raggiungibile il controllo reale indicato dallo spotlight. */
.feature-tour-stage { display: none; position: fixed; inset: 0; box-sizing: border-box; width: 100vw; height: 100dvh; margin: 0; padding: 0; border: 0; background: transparent; color: #302218; overflow: visible; pointer-events: none; font: 400 1rem/1.45 system-ui, sans-serif; }
.feature-tour-stage:popover-open, .feature-tour-stage[data-open="true"] { display: block; }
.feature-tour-stage::backdrop { background: transparent; }
.feature-tour-mask { position: fixed; z-index: 1; background: #17120f91; pointer-events: auto; }
.feature-tour-ring { position: fixed; z-index: 4; box-sizing: border-box; border: 4px solid #ffc267; border-radius: 10px; box-shadow: 0 0 0 2px #2b170f, 0 0 24px #ffc267a8; pointer-events: none; }
.feature-tour-ring[hidden], .feature-tour-hitbox[hidden], .feature-tour-cue[hidden] { display: none; }
.feature-tour-hitbox { position: fixed; z-index: 5; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; pointer-events: auto; }
.feature-tour-cue { position: fixed; z-index: 5; display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .45rem; border-radius: 999px; background: #ffc267; color: #321c10; box-shadow: 0 2px 8px #0005; font-size: .8rem; font-weight: 800; white-space: nowrap; pointer-events: none; }
.feature-tour-cue-arrow { font-size: 1.5rem; line-height: .7; }
.feature-tour-cue[data-direction="up"] .feature-tour-cue-arrow { transform: rotate(-90deg); }
.feature-tour-panel { position: fixed; z-index: 3; right: 1rem; bottom: 1rem; box-sizing: border-box; width: min(380px, calc(100vw - 2rem)); height: fit-content; max-height: calc(100dvh - 2rem); padding: 1.2rem; border: 1px solid #e5c9aa; border-radius: 16px; background: #fffaf3; color: #302218; box-shadow: 0 16px 55px #20110680; overflow: auto; overscroll-behavior: contain; pointer-events: auto; }
.feature-tour-panel .feature-tour-heading { margin-right: 1.8rem; }
/* Perché: con campi lunghi o zoom il testo resta nel pannello, mentre la navigazione rimane a portata di mano (doc 82). */
.feature-tour-panel { overflow-wrap: anywhere; }
.feature-tour-panel .feature-tour-navigation { position: sticky; bottom: -1.2rem; padding-block: .75rem; background: inherit; box-shadow: 0 -8px 12px -12px #20110680; }
.feature-tour-panel [data-tour-panel-content] { background: inherit; }
.feature-tour-stage-close { position: absolute; top: .45rem; right: .55rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.5rem; cursor: pointer; }
.feature-tour-stage-close:hover { background: #e9d9c7; }
.feature-tour-panel button:focus-visible, .feature-tour-panel a:focus-visible, .feature-tour-panel input:focus-visible, .feature-tour-panel select:focus-visible, .feature-tour-hitbox:focus-visible { outline: 3px solid #efaa49; outline-offset: 2px; }
.feature-tour-panel .feature-tour-body { font-size: .91rem; }
ul.feature-tour-examples { margin: .7rem 0; padding: .7rem .8rem .7rem 2rem; font-size: .84rem; }
.feature-tour-panel .feature-tour-simulation { padding: .75rem; margin: .6rem 0; }
.feature-tour-context-link { display: inline-flex; align-items: center; margin: .25rem 0 .7rem; text-decoration: none; }
.feature-tour-choice-list { display: grid; gap: .4rem; margin: .7rem 0; }
.feature-tour-choice-list h3 { margin: 0 0 .2rem; font-size: .84rem; }
.feature-tour-choice-link { display: block; padding: .5rem .65rem; border: 1px solid #b99573; border-radius: 8px; background: #fff; color: #713a21; font-size: .82rem; font-weight: 700; text-decoration: none; pointer-events: auto; }
.feature-tour-choice-link:hover { background: #f3e5d5; }
.feature-tour-demo { margin: .8rem 0; border: 1px solid #b99573; border-radius: 12px; background: #fff; overflow: hidden; }
.feature-tour-demo-badge { padding: .3rem .7rem; background: #67351f; color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .02em; }
.feature-tour-demo-bar { padding: .5rem .7rem; border-bottom: 1px solid #e4cbb2; background: #f3e5d5; color: #634025; font-size: .7rem; font-weight: 700; }
.feature-tour-demo-screen { display: grid; gap: .55rem; padding: .9rem; }
.feature-tour-demo-line { padding: .45rem .6rem; border-left: 3px solid #cf793e; background: #f8eee2; font-size: .78rem; }
.feature-tour-demo-label { font-size: .8rem; font-weight: 700; }
.feature-tour-demo-button, .feature-tour-demo-status { justify-self: start; min-height: 2.4rem; padding: .45rem .7rem; border: 1px solid #713a21; border-radius: 7px; background: #713a21; color: #fff; font-size: .82rem; font-weight: 700; cursor: pointer; }
.feature-tour-demo-status { background: #efe0c9; color: #58341f; }
.feature-tour-demo-input { box-sizing: border-box; width: 100%; min-height: 2.4rem; padding: .45rem .6rem; border: 1px solid #a99079; border-radius: 7px; background: #fff; color: #302218; font: inherit; }
.feature-tour-demo-check { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.feature-tour-demo-radio-group { display: grid; gap: .5rem; margin: 0; padding: .65rem; border: 1px solid #b99573; border-radius: 8px; }
.feature-tour-panel .feature-tour-feedback { min-height: 1.2em; }

@media (max-width: 799px) {
    /* Perché: il pannello basso conserva il target nella parte superiore del telefono e resta scorrevole. */
    .feature-tour-panel { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: min(52dvh, 480px); padding: 1rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); border-radius: 18px 18px 0 0; }
}

/* Perché: il tema scelto nell'app prevale sulla preferenza del sistema; vedi docs/74-tour-funzionalita.md. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-dialog { border-color: #76553b; background: #241b16; color: #f7ebdc; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-dialog::backdrop { background: #06050455; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-close:hover { background: #463327; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-eyebrow, :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-link { color: #f3b178; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-progress, :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-catalog-item p { color: #ddcbb8; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-catalog-item, :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-examples, :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-simulation { border-color: #76553b; background: #30231b; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-target-note { background: #3c2b20; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-field input, :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-field select, :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-field textarea { border-color: #a38368; background: #241b16; color: #f7ebdc; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-secondary { border-color: #a38368; background: #30231b; color: #f7ebdc; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-secondary:hover { background: #483325; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-feedback[data-success="true"] { color: #8be0b3; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-feedback[data-success="false"] { color: #ffaba2; }
}

:root[data-theme="dark"] .feature-tour-dialog { border-color: #76553b; background: #241b16; color: #f7ebdc; }
:root[data-theme="dark"] .feature-tour-dialog::backdrop { background: #06050455; }
:root[data-theme="dark"] .feature-tour-close:hover { background: #463327; }
:root[data-theme="dark"] .feature-tour-eyebrow, :root[data-theme="dark"] .feature-tour-link { color: #f3b178; }
:root[data-theme="dark"] .feature-tour-progress, :root[data-theme="dark"] .feature-tour-catalog-item p { color: #ddcbb8; }
:root[data-theme="dark"] .feature-tour-catalog-item, :root[data-theme="dark"] .feature-tour-examples, :root[data-theme="dark"] .feature-tour-simulation { border-color: #76553b; background: #30231b; }
:root[data-theme="dark"] .feature-tour-target-note { background: #3c2b20; }
:root[data-theme="dark"] .feature-tour-field input, :root[data-theme="dark"] .feature-tour-field select, :root[data-theme="dark"] .feature-tour-field textarea { border-color: #a38368; background: #241b16; color: #f7ebdc; }
:root[data-theme="dark"] .feature-tour-secondary { border-color: #a38368; background: #30231b; color: #f7ebdc; }
:root[data-theme="dark"] .feature-tour-secondary:hover { background: #483325; }
:root[data-theme="dark"] .feature-tour-feedback[data-success="true"] { color: #8be0b3; }
:root[data-theme="dark"] .feature-tour-feedback[data-success="false"] { color: #ffaba2; }
:root[data-theme="dark"] .feature-tour-panel { border-color: #76553b; background: #241b16; color: #f7ebdc; }
:root[data-theme="dark"] .feature-tour-stage-close:hover { background: #463327; }
:root[data-theme="dark"] .feature-tour-demo { border-color: #76553b; background: #30231b; }
:root[data-theme="dark"] .feature-tour-demo-radio-group { border-color: #76553b; }
:root[data-theme="dark"] .feature-tour-demo-bar { border-color: #76553b; background: #493224; color: #f3b178; }
:root[data-theme="dark"] .feature-tour-demo-line { background: #3c2b20; }
:root[data-theme="dark"] .feature-tour-demo-input { border-color: #a38368; background: #241b16; color: #f7ebdc; }
:root[data-theme="dark"] .feature-tour-demo-status { background: #493224; color: #f7ebdc; }
:root[data-theme="dark"] .feature-tour-choice-link { border-color: #76553b; background: #30231b; color: #f3b178; }
:root[data-theme="dark"] .feature-tour-stage { color: #f7ebdc; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-panel { border-color: #76553b; background: #241b16; color: #f7ebdc; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-stage-close:hover { background: #463327; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-demo { border-color: #76553b; background: #30231b; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-demo-radio-group { border-color: #76553b; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-demo-bar { border-color: #76553b; background: #493224; color: #f3b178; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-demo-line { background: #3c2b20; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-demo-input { border-color: #a38368; background: #241b16; color: #f7ebdc; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-demo-status { background: #493224; color: #f7ebdc; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-choice-link { border-color: #76553b; background: #30231b; color: #f3b178; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .feature-tour-stage { color: #f7ebdc; }
}

@media (min-width: 1100px) {
    /* Perché: la posizione laterale lascia leggibili i target al centro della pagina durante il tour. */
    .feature-tour-dialog { margin: auto 2rem auto auto; }
}

@media (max-width: 800px) {
    /* Perché: il carrello flottante occupa il bordo inferiore sullo storefront mobile. */
    body:has(.floating-cart) .feature-tour-launcher { bottom: max(6rem, calc(env(safe-area-inset-bottom) + 5.25rem)); }
}

@media (max-width: 540px) {
    .feature-tour-launcher { inset: auto max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) auto; }
    .feature-tour-dialog { width: min(calc(100vw - 1rem), 460px); max-height: min(88dvh, 760px); }
    .feature-tour-shell { max-height: min(88dvh, 760px); padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .feature-tour-dialog, .feature-tour-launcher, .feature-tour-spotlight { scroll-behavior: auto; animation: none; transition: none; }
}

/* Perché: anche l'apertura automatica della sidebar rispetta l'assenza di movimento richiesta dall'utente (doc 77). */
@media (prefers-reduced-motion: reduce) {
    body:has([data-tour-stage][data-open="true"]) [data-flux-sidebar],
    body:has([data-tour-stage][data-open="true"]) [data-flux-sidebar] * { transition: none !important; animation: none !important; scroll-behavior: auto; }
}