/* ========================================================
   TINY TEMPLE TOOLBOX - BASE
   Reset minimo, tipografia di pagina, layout condiviso
   (.tb-shell, .tb-logo/.tb-settings/.tb-intro, .tb-footer),
   safe-area, focus da tastiera e movimento ridotto. Richiede shared/tokens.css
   (variabili e font, incluso il "vetro" --glass-*) caricato prima
   di questo file. Nomi generici (nessun "toolbox"): riusabili da
   un altro sottodominio (spec 02 §6).
   ======================================================== */

/* --- RESET MINIMO --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    height: auto;
    max-width: 100%;
    display: block;
}

html, body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Stesso --bg-color di body (feedback Genna, "sfondo tagliato in fondo"):
   se il documento e' piu' alto del viewport (o in standalone iOS, dove la
   safe-area/il rimbalzo dello scroll possono mostrare l'html sotto il
   body), qui sotto non deve mai comparire un colore diverso/bianco. */
html {
    height: 100%;
    background-color: var(--bg-color);
    /* niente zoom al doppio tocco (su iOS ingrandiva la pagina toccando due
       volte un bottone); il pinch resta possibile, l'accessibilita' non cambia */
    touch-action: manipulation;
}

/* Safe-area in alto: solo su logo/impostazioni fissi (.tb-logo/.tb-settings).
   In basso: solo sul footer (.tb-footer). Qui restano solo i lati, comuni
   a tutta la pagina (notch in orizzontale, es. iPhone in landscape). */
body {
    position: relative;
    isolation: isolate;
    min-height: 100dvh;
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-text);
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
    padding-right: var(--tb-safe-r);
    padding-left: var(--tb-safe-l);
}

/* Sfondo su un livello fisso (feedback Genna: background-attachment:fixed
   e' rotto/ignorato su iOS Safari, proprio dove si vedeva il taglio).
   z-index:-1 lo mette sotto TUTTO il contenuto di body, "isolation:isolate"
   qui sopra gli da' una base propria cosi' non finisce mai dietro lo sfondo
   stesso; inset:0 su position:fixed lo ancora al viewport (non al
   documento, che puo' essere piu' alto), quindi copre sempre fino in fondo
   senza bisogno di background-size/repeat. pointer-events:none: e'
   decorazione, non deve intercettare tocchi. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(74, 59, 50, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(207, 92, 54, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

/* --- LAYOUT DI PAGINA --- */
/* Niente piu' barra/header: solo logo (in alto a sx) e hamburger (in alto
   a dx) flottanti, `position: fixed` (vedi sotto). Il padding in alto qui
   li libera (bordo inferiore dei due cerchi ~83px/80px da fixed) con la
   safe-area sommata una volta sola. */
.tb-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: calc(100px + var(--tb-safe-t)) 5% 120px;
    min-height: 100dvh;
}

.tb-page-header {
    text-align: center;
    padding: clamp(40px, 10vh, 96px) 0 30px;
}

.tb-eyebrow {
    display: block;
    font-family: var(--font-text);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--accent-orange);
    margin-bottom: 18px;
}

.tb-page-header h1 {
    font-family: var(--font-title);
    font-size: clamp(2.1rem, 4vw, 2.7rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.tb-page-intro {
    max-width: 640px;
    margin: 16px auto 0;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-muted);
    font-weight: 300;
}

/* --- LOGO `tb-logo` (ritocco Genna): nudo, fisso, in alto a sx --- */
/* Stesse misure/posizione di `.logo-wrapper` nello style.css della vetrina
   (righe 256-300 e 1985-1996, prese con `tr -d '\r'`): 100px, ancorato con
   translate(-50%,-50%) cosi' le coordinate sono il CENTRO del cerchio.
   E' lo stesso elemento dell'intro (vedi sezione tb-intro sotto): qui sta
   lo stato "in-nav" (barra); li' lo stato di riposo (centro schermo). */
.tb-logo {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10020;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%) scale(1);
    transition: all 1.2s var(--ease-cinematic);
    will-change: top, left, transform;
}

.tb-logo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    transition: transform 0.3s ease;
}

/* Aggangiato in barra (spec 02, ritocco Genna): sfondo trasparente, nessun
   bordo/vetro ("logo nudo"). Uguale su index.html (dopo l'intro, aggiunta
   da shared/intro.js) e su 404.html (gia' cosi' nell'HTML, niente intro). */
.tb-logo.in-nav {
    top: calc(58px + var(--tb-safe-t));
    left: 50px;
    transform: translate(-50%, -50%) scale(0.5);
    background: transparent !important;
    cursor: pointer;
    pointer-events: auto;
    transition: all 1.2s var(--ease-cinematic);
}

@media (max-width: 768px) {
    .tb-logo.in-nav {
        top: calc(45px + var(--tb-safe-t));
        left: 40px;
        transform: translate(-50%, -50%) scale(0.6);
    }
}

/* Il logo in volo non si tocca (spec 18 §7.1, audit §1 causa B): fra i
   900 ms del battito e la fine dell'aggancio (1.2s) attraversa in diagonale
   l'area delle prime tile con z-index 10020, e un tocco li' ricaricava la
   dashboard. `is-flying` la mette e la toglie shared/intro.js; deve venire
   DOPO `.tb-logo.in-nav` (stessa specificita': vince l'ultima). Le pagine
   senza intro nascono `in-nav` senza `is-flying`: li' non cambia nulla. */
.tb-logo.is-pulse,
.tb-logo.is-flying {
    pointer-events: none;
}

.tb-logo.is-pressed img,
.tb-logo:active img {
    transform: scale(0.9);
}

/* --- IMPOSTAZIONI `tb-settings`: cerchio "vetro", fisso, in alto a dx --- */
/* Spec 24 §3: al posto dell'hamburger, stesso cerchio glass 44px (eredita
   ricetta e posizione di quello che c'era prima). Nascosto di default
   (come i .floating-btn della vetrina, opacity/pointer-events, non
   [hidden]): shared/intro.js aggiunge .is-visible insieme all'aggancio del
   logo (vedi CONTRATTO in shared/intro.js). Sulle pagine senza intro (404,
   ogni strumento, Impostazioni) parte gia' .is-visible nell'HTML. Centro
   allineato al logo (58px/50px desktop, 45px/40px sotto 768px), specchiato
   sul lato destro. In /impostazioni/ e' il "Chiudi": stessa classe piu'
   .tb-settings--close (icona X, nessun'altra differenza di posizione). */
.tb-settings {
    position: fixed;
    top: calc(36px + var(--tb-safe-t));
    right: calc(28px + var(--tb-safe-r));
    z-index: 10015;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-top: 1px solid var(--glass-border-top);
    box-shadow: var(--glass-shadow);
    color: var(--text-primary);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.4s ease, transform 0.4s var(--ease-cinematic), border-color 0.3s ease;
}

.tb-settings.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .tb-settings {
        top: calc(23px + var(--tb-safe-t));
        right: calc(18px + var(--tb-safe-r));
    }
}

.tb-settings.is-pressed,
.tb-settings:active {
    transform: scale(0.92);
    border-color: rgba(255, 255, 255, 0.5);
}

.tb-settings.is-visible.is-pressed,
.tb-settings.is-visible:active {
    transform: translateY(0) scale(0.92);
}

@media (hover: hover) and (pointer: fine) {
    .tb-settings:hover {
        border-color: rgba(255, 255, 255, 0.5);
    }
}

/* L'svg dentro non ha larghezza/altezza proprie (solo viewBox): senza
   questa regola resta 300x150 (default UA) e sfonda il cerchio. */
.tb-settings svg {
    width: 24px;
    height: 24px;
}

/* --- INDICATORE MICROFONO `tb-mic-live` (feedback Genna): fisso, a sinistra
   del pulsante Impostazioni, stesso centro verticale (58px/45px sotto 768px,
   come .tb-logo/.tb-settings sopra). [hidden] di default: nav.js lo toglie
   mentre uno stream e' attivo in qualsiasi strumento. Pallino arancione in
   overlay sull'icona (spec: "pallino arancione + icona mic", 24px). */
.tb-mic-live {
    position: fixed;
    top: calc(46px + var(--tb-safe-t));
    right: calc(82px + var(--tb-safe-r));
    z-index: 10015;
    width: 24px;
    height: 24px;
    color: var(--accent-orange);
}

.tb-mic-live[hidden] {
    display: none;
}

.tb-mic-live svg {
    width: 100%;
    height: 100%;
}

.tb-mic-live::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-orange);
    box-shadow: 0 0 0 2px var(--bg-color);
}

@media (max-width: 768px) {
    .tb-mic-live {
        top: calc(33px + var(--tb-safe-t));
        right: calc(72px + var(--tb-safe-r));
    }
}

/* --- INTRO `tb-intro` (ritocco Genna: ESATTAMENTE come #intro-layer della
   vetrina, home.js righe 1-40 e style.css righe 237-305): solo dashboard,
   una volta a sessione. Sta SEMPRE nel markup (niente [hidden], come
   #intro-layer: stesso --bg-color della pagina sotto, quindi nessun flash
   prima che intro.js giri), copre tutto lo schermo finche' non diventa
   trasparente. Il logo (.tb-logo, vedi sopra) e' DENTRO questo elemento
   sulla dashboard: e' lo stesso elemento della barra, non una copia.
   CONTRATTO shared/intro.js:
     al load (se la pagina ha #tb-intro): .tb-logo.classList.add('is-pulse')
       (battito 0.8s, vedi @keyframes tb-heartbeat).
     dopo 900ms: rimuovi 'is-pulse', forza un reflow (offsetWidth), poi:
       - .tb-logo.classList.add('in-nav')            (1.2s verso l'angolo)
       - #tb-intro.classList.add('is-complete')       (sfondo trasparente
         in 1.5s, pointer-events:none; l'overlay RESTA nel DOM, come
         #intro-layer nella vetrina: niente hidden/remove())
       - .tb-settings.classList.add('is-visible')     (compare col logo)
     Sequenza totale dichiarata: 900ms + 1.2s (fine aggancio logo) = 2.1s;
     lo sfondo continua a sfumare fino a 900ms+1.5s=2.4s ma non blocca
     nulla (pointer-events:none gia' dai 900ms). Niente vibrazione.
     Skip (nessuna animazione, stato finale subito) quando sessionStorage
     .tbIntro e' gia' impostato o prefers-reduced-motion: applica súbito
     'in-nav'/'is-complete'/'is-visible' senza il giro is-pulse. Sempre:
     sessionStorage.setItem('tbIntro','1') alla fine.
     Pagine senza #tb-intro (es. 404.html): .tb-logo parte gia' 'in-nav' e
     .tb-settings gia' 'is-visible' nell'HTML statico (= .static-nav
     della vetrina): intro.js non ha nulla da fare li'. */
/* `pointer-events: none` SEMPRE, non solo con .is-complete (spec 18 §7.1,
   audit §1 causa B): lo sfondo opaco copre lo stesso, ma per i primi 900 ms
   l'overlay si mangiava ogni tocco sulle tile e la dashboard sembrava
   bloccata. Qui non c'e' niente da toccare: e' solo un fondale. */
.tb-intro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 1.5s ease-out;
    pointer-events: none;
}

.tb-intro.is-complete {
    background-color: transparent;
    pointer-events: none;
}

/* Senza intro (gia' vista in questa sessione o movimento ridotto): la classe
   tb-no-intro la mette shared/lang-boot.js prima del primo paint, cosi' il
   logo nasce gia' agganciato in alto a sinistra e l'overlay non si vede. */
html.tb-no-intro .tb-logo {
    top: calc(58px + var(--tb-safe-t));
    left: 50px;
    transform: translate(-50%, -50%) scale(0.5);
    transition: none;
}

@media (max-width: 768px) {
    html.tb-no-intro .tb-logo {
        top: calc(45px + var(--tb-safe-t));
        left: 40px;
        transform: translate(-50%, -50%) scale(0.6);
    }
}

html.tb-no-intro .tb-intro {
    display: none;
}

.tb-logo.is-pulse {
    animation: tb-heartbeat 0.8s ease-in-out forwards;
}

@keyframes tb-heartbeat {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.15); filter: drop-shadow(0 0 15px rgba(207, 92, 54, 0.5)); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .tb-intro,
    .tb-logo {
        transition: none !important;
        animation: none !important;
    }
}

/* "Animazioni ridotte" delle Impostazioni (spec 18 §5): stessa regola,
   classe messa da /shared/lang-boot.js prima del primo paint */
html.tb-ridotte .tb-intro,
html.tb-ridotte .tb-logo {
    transition: none !important;
    animation: none !important;
}

/* --- FEEDBACK AL TOCCO --- */
.is-pressed {
    transition-duration: 0.09s !important;
}

/* --- FOOTER (spec 03 §4/criterio 7) --- */
/* Una riga sola, uguale su ogni pagina: "Tiny Temple Studio . Privacy .
   Designed by Genna". Safe-area in basso SOLO qui (vedi commento sul body
   in cima al file). Niente piu' cookie/note legali (restano sulla
   vetrina): la Toolbox non pianta cookie ne' terze parti, l'unico link
   che serve da ogni pagina e' l'informativa privacy (dominio a se'). */
.tb-footer {
    margin-top: 56px;
    padding-top: 20px;
    padding-bottom: calc(24px + var(--tb-safe-b));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.tb-footer-line {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 var(--sp-1);
}

.tb-footer-sep {
    opacity: 0.5;
}

.tb-footer-line a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 4px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--dur-med) ease;
}

@media (hover: hover) and (pointer: fine) {
    .tb-footer-line a:hover {
        color: var(--accent-orange);
    }
}

/* .is-pressed (shared/ui.js) resta per compatibilita', ma il selettore
   PRESS_SELECTOR li' dentro cita ancora ".tb-footer-links a" (classe
   rimossa da qui, ui.js non e' nel perimetro di questo giro): :active
   copre il tocco senza dover toccare ui.js. */
.tb-footer-line a:active,
.tb-footer-line a.is-pressed {
    color: var(--accent-orange);
}

/* --- BREAKPOINT MOBILE (layout) --- */
@media (max-width: 768px) {
    .tb-shell {
        padding: calc(90px + var(--tb-safe-t)) 6% 110px;
    }
}

/* --- ACCESSIBILITA': FOCUS DA TASTIERA --- */
:focus-visible {
    outline: 2px solid var(--accent-orange) !important;
    outline-offset: 3px !important;
}

/* Sprite delle icone (#tb-icon-<slug>): nascosto senza [hidden]/display,
   che spezzerebbe i <use> in alcuni browser. Niente attributo style= (CSP
   style-src 'self'): senza questa classe resta 300x150 e crea scroll
   orizzontale. */
.tb-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --- MOVIMENTO RIDOTTO --- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}

/* Lo stesso, forzato da "Animazioni ridotte" (Impostazioni, spec 18 §5):
   html.tb-ridotte la mette /shared/lang-boot.js leggendo localStorage. */
html.tb-ridotte {
    scroll-behavior: auto !important;
}

html.tb-ridotte *,
html.tb-ridotte *::before,
html.tb-ridotte *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
}

/* Lingua non italiana salvata: testi nascosti fino alla prima traduzione
   (classe messa da /shared/lang-boot.js, tolta da i18n.js init()). */
.tb-i18n-pending [data-i18n],
.tb-i18n-pending [data-i18n-tool] {
    visibility: hidden;
}