/* Orbita — Guida di Jarvis (tour di benvenuto). Solo token di app.css; i colori membro arrivano via --c inline. */
.tour-bg { z-index: 55; align-items: stretch; }
@media (min-width: 700px) { .tour-bg { align-items: center; } }
.tour { position: relative; background: var(--bg2); color: var(--fg); width: 100%; height: auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; outline: none; padding-top: env(safe-area-inset-top); animation: tr-up .32s cubic-bezier(.2,.9,.25,1.05); }
@media (min-width: 700px) { .tour { max-width: 640px; height: min(86vh, 820px); border-radius: 24px; box-shadow: var(--shadow-lg); padding-top: 0; animation: tr-pop .22s cubic-bezier(.2,.9,.3,1.1); } }
@keyframes tr-up { from { transform: translateY(40px); opacity: 0; } }
@keyframes tr-pop { from { transform: translateY(14px) scale(.97); opacity: 0; } }
@keyframes tr-in { from { transform: translateY(6px); opacity: 0; } }

/* testa: orb + titolo + Salta */
.tour .hd { display: flex; align-items: center; gap: 10px; padding: 14px 18px 8px; flex: none; }
.tour .orb, .tour-bar .orb { width: 34px; height: 34px; border-radius: 50%; background: var(--jarvis); box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 55%, transparent); animation: pulse 3s infinite; flex: none; transition: transform .3s; }
.tour .orb.busy { animation: pulse 1.1s infinite; transform: scale(1.08); }
.tour .hd b { font-size: 15px; }
.tour .skip { font-size: 13px; font-weight: 600; color: var(--fg3); padding: 6px 12px; border-radius: 999px; }
.tour .skip:hover, .tour .skip[aria-expanded="true"] { background: var(--bg3); color: var(--fg2); }
.tr-confirm { margin: 0 18px 8px; padding: 10px 12px; border-radius: var(--r); background: var(--bg3); display: flex; align-items: center; gap: 8px; font-size: 14px; flex-wrap: wrap; animation: tr-in .18s; }
.tr-confirm .btn { padding: 7px 12px; font-size: 13px; }

/* corpo: titolo passo, bolle, mock, azioni */
.tour .body { flex: 1; min-height: 0; overflow: auto; padding: 4px 18px 14px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.tour .st { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--jarvis); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 6px 0 10px; }
.tour .msgs { display: flex; flex-direction: column; gap: 8px; }
.tour .msg.j { max-width: 92%; font-size: 15px; animation: tr-in .18s ease-out; }
.tour .think { align-self: flex-start; display: inline-flex; gap: 5px; align-items: center; padding: 14px 16px; border-radius: 18px; border-bottom-left-radius: 6px; background: var(--bg3); animation: tr-in .18s ease-out; }
.tour .think i { width: 7px; height: 7px; border-radius: 50%; background: var(--fg3); animation: tr-dot 1.2s infinite ease-in-out; }
.tour .think i:nth-child(2) { animation-delay: .15s; } .tour .think i:nth-child(3) { animation-delay: .3s; }
@keyframes tr-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-5px); opacity: 1; } }
.tr-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; animation: tr-in .25s both; }
.tr-try { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px 10px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; background: color-mix(in srgb, var(--accent) 12%, var(--bg2)); color: var(--accent); border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent); transition: background .15s; }
.tr-try svg { width: 16px; height: 16px; }
.tr-try:active { background: color-mix(in srgb, var(--accent) 22%, var(--bg2)); }
.tr-try.jarvis { background: var(--jarvis); color: var(--accent-fg); border-color: transparent; box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent); }

/* piede: puntini + Indietro / Avanti / Inizia */
.tour .ft { display: flex; align-items: center; gap: 8px; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg2); flex: none; min-height: 64px; }
.tr-dots { display: flex; gap: 5px; flex: 1; min-width: 0; align-items: center; }
.tr-dots button { width: 6px; height: 6px; border-radius: 3px; background: var(--line2); padding: 0; transition: width .2s, background .2s; flex: none; }
.tr-dots button.seen { background: var(--fg3); }
.tr-dots button.cur { width: 18px; background: var(--accent); }
.tour .ft .btn { padding: 10px 16px; flex: none; display: inline-flex; align-items: center; gap: 4px; }
.tour .ft .btn svg { width: 16px; height: 16px; }
.tr-next { background: var(--accent); color: var(--accent-fg); }
.tour .ft.last .tr-start { margin-left: auto; }
.tr-start { background: var(--jarvis); color: var(--accent-fg); font-size: 16px; padding: 12px 28px !important; flex: 1 1 auto !important; max-width: 240px; justify-content: center; box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--accent) 70%, transparent); }

/* barra flottante quando il tour è ridotto («Prova adesso») */
.tour-bar { position: fixed; left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 10px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); box-shadow: var(--shadow-lg); cursor: pointer; animation: tr-up .25s; }
.tour-bar .orb { width: 24px; height: 24px; box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); }
.tour-bar .t { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--fg2); }
.tour-bar .go { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-weight: 700; font-size: 13px; }
@media (min-width: 900px) { .tour-bar { left: auto; right: 24px; bottom: 24px; width: min(420px, calc(100vw - 48px)); } }
.tour-min .main { padding-bottom: 170px; }
@media (min-width: 900px) { .tour-min .main { padding-bottom: 100px; } }

/* ---------- mock UI (stesse classi/icone dell'app, niente screenshot) ---------- */
.tr-mock { margin: 14px 0 2px; padding: 12px; border-radius: var(--r2); background: var(--bg); border: 1px solid var(--line); pointer-events: none; user-select: none; -webkit-user-select: none; animation: tr-in .25s both; font-size: 13px; }
.tr-mock .card { padding: 4px 12px; margin: 0; }
.tr-mock .tiny { font-size: 11px; }
/* barra di navigazione */
.tr-nav { display: flex; justify-content: space-around; align-items: flex-end; margin: 12px -12px -12px; padding: 8px 8px 10px; background: var(--bg2); border-top: 1px solid var(--line); border-radius: 0 0 var(--r2) var(--r2); }
.tr-nav > span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 600; color: var(--fg3); padding: 4px 8px; border-radius: 10px; min-width: 48px; }
.tr-nav > span svg { width: 22px; height: 22px; }
.tr-nav > span.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tr-nav .tr-fab { background: var(--jarvis); color: var(--accent-fg); width: 44px; height: 44px; min-width: 0; border-radius: 50%; margin-top: -22px; box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--accent) 70%, transparent); display: grid; place-items: center; padding: 0; }
.tr-nav .tr-fab svg { width: 22px; height: 22px; }
.tr-nav.side { flex-direction: column; align-items: stretch; gap: 2px; margin: 12px 0 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--r2); width: 180px; }
.tr-nav.side > span { flex-direction: row; gap: 10px; font-size: 13px; padding: 8px 10px; }
.tr-nav.side .tr-fab { width: 100%; height: 40px; margin: 8px 0 0; border-radius: 12px; display: flex; justify-content: center; gap: 8px; font-size: 13px; }
/* famiglia (benvenuto) */
.tr-fam { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.tr-fam .p { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; }
.tr-fam .av { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: var(--c); box-shadow: 0 6px 16px -6px var(--c); animation: tr-pop .4s both; }
.tr-fam .p:nth-child(2) .av { animation-delay: .08s; } .tr-fam .p:nth-child(3) .av { animation-delay: .16s; } .tr-fam .p:nth-child(4) .av { animation-delay: .24s; }
/* Oggi */
.tr-hero .date { font-size: 11px; font-weight: 700; color: var(--today); text-transform: uppercase; letter-spacing: .08em; }
.tr-hero .h { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0; }
.tr-brief { position: relative; margin-top: 10px; padding: 10px 12px 10px 14px; border-radius: var(--r); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg2)), color-mix(in srgb, var(--today) 8%, var(--bg2))); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); line-height: 1.4; }
.tr-brief::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--jarvis); }
.tr-brief .lbl { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--jarvis); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tr-brief .row { margin-bottom: 4px; }
.tr-ask { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--jarvis); color: var(--accent-fg); }
.tr-ask svg { width: 12px; height: 12px; }
/* creare un impegno: header con + e scheda */
.tr-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tr-top .brand { font-size: 14px; } .tr-top .brand .dot { width: 18px; height: 18px; box-shadow: inset 0 0 0 5px var(--bg); }
.tr-plus { width: 34px; height: 34px; border-radius: 11px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); border-color: var(--accent); }
.tr-plus.sm { width: 28px; height: 28px; border-radius: 9px; box-shadow: none; }
.tr-plus svg { width: 18px; height: 18px; }
.tr-sheet { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r2); padding: 12px; box-shadow: var(--shadow); }
.tr-title { font-size: 18px; font-weight: 700; padding: 4px 0 6px; border-bottom: 2px solid var(--accent); }
.tr-sugg { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 7px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--accent) 10%, var(--bg2)); border: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--line2)); }
.tr-sugg b { color: var(--accent); }
.tr-lbl { font-size: 11px; font-weight: 700; color: var(--fg3); text-transform: uppercase; letter-spacing: .06em; margin: 12px 0 6px; }
.tr-who { gap: 6px; }
.tr-who .es-av { padding: 8px 2px 6px; font-size: 11px; gap: 4px; }
.tr-who .es-av .em { width: 36px; height: 36px; font-size: 19px; }
.tr-fields { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.tr-fields span { font-size: 11px; font-weight: 700; color: var(--fg3); text-transform: uppercase; letter-spacing: .06em; padding: 5px 9px; border-radius: 999px; background: var(--bg3); }
/* Jarvis: due bolle + ricevuta + barra input */
.tr-chat { display: flex; flex-direction: column; gap: 8px; }
.tr-chat .msg { font-size: 13px; padding: 8px 12px; max-width: 88%; }
.tr-chat .msg.j { background: var(--bg2); border: 1px solid var(--line); }
.tr-chat .msg.wide { max-width: 100%; }
.tr-rc { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 9px; border-radius: 11px; background: var(--bg); border: 1px solid var(--line); font-size: 12px; }
.tr-rc .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; background: color-mix(in srgb, var(--ok) 14%, var(--bg2)); flex: none; }
.tr-rc .grow { flex: 1; min-width: 0; }
.tr-rc .t { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-rc .s { color: var(--fg2); font-size: 11px; }
.tr-rc .un { flex: none; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg2)); }
.tr-in { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.tr-mic { width: 36px; height: 36px; border-radius: 50%; background: var(--bg3); display: grid; place-items: center; font-size: 15px; flex: none; }
.tr-ta { flex: 1; min-height: 36px; border-radius: 18px; border: 1px solid var(--line2); background: var(--bg2); padding: 8px 14px; color: var(--fg3); }
.tr-send { width: 36px; height: 36px; border-radius: 50%; background: var(--jarvis); color: var(--accent-fg); display: grid; place-items: center; flex: none; }
.tr-send svg { width: 16px; height: 16px; }
/* Agenda: ricerca, chip, giorno, evento */
.tr-search { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line2); color: var(--fg3); font-size: 14px; }
.tr-chips { margin: 8px 0 6px; padding: 2px 0; overflow: hidden; }
.tr-chips .chip { padding: 3px 8px 3px 4px; font-size: 11px; }
.tr-chips .chip .av { width: 20px; height: 20px; font-size: 11px; }
.tr-chips .chip.cat { padding-left: 8px; }
.tr-chips .chip.cat.on { --c: var(--fg); }
.tr-sep { width: 1px; height: 18px; background: var(--line2); margin: 0 2px; flex: none; align-self: center; }
.tr-day { display: flex; align-items: center; gap: 10px; padding: 8px 2px 6px; }
.tr-day .n { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--accent); width: 30px; }
.tr-mock .ev { padding: 8px 0; cursor: default; } .tr-mock .ev .t { font-size: 13px; } .tr-mock .ev .sub { font-size: 11px; } .tr-mock .ev .time { font-size: 12px; width: 44px; }
/* Settimana */
.tr-wk { margin: 0 0 8px; }
.tr-wk > span { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 12px; color: var(--fg2); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.tr-wk > span b { font-size: 16px; color: var(--fg); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; margin-top: 2px; }
.tr-wk > span.today b { background: var(--today); color: var(--accent-fg); }
.tr-wk .dots { display: flex; gap: 2px; height: 5px; margin-top: 3px; }
.tr-wk .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--c); }
.tr-swipe { display: flex; justify-content: center; gap: 10px; font-size: 12px; color: var(--fg3); padding: 6px 0 2px; }
.tr-swipe span { color: var(--accent); font-weight: 700; }
/* Liste */
.tr-tabs { margin: 0 0 10px; overflow: hidden; }
.tr-tabs > span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px 6px 8px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); font-weight: 600; font-size: 12px; white-space: nowrap; }
.tr-tabs > span.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.tr-tabs > span .n { font-size: 10px; font-weight: 800; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--bg); color: var(--fg); display: grid; place-items: center; }
.tr-tabs > span.add { width: 32px; padding: 0; justify-content: center; color: var(--fg2); border-style: dashed; }
.tr-tabs > span.add svg { width: 16px; height: 16px; }
.tr-aisle { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--fg3); padding: 4px 0 2px; }
.tr-mock .ls-item { animation: none; } .tr-mock .ls-item-in { background: transparent; min-height: 40px; padding: 6px 0; font-size: 13px; }
.tr-mock .ls-chk { width: 22px; height: 22px; border-radius: 7px; animation: none; }
.tr-mock .ls-who { width: 26px; height: 26px; } .tr-mock .ls-who .av-s { width: 22px; height: 22px; font-size: 11px; }
.tr-mock .ls-who .ghost { width: 20px; height: 20px; font-size: 12px; }
.tr-ext { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 9px 10px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--c); font-size: 13px; }
.tr-ext .av-s { margin: 0; border: 0; width: 22px; height: 22px; font-size: 12px; }
.tr-ext .r { text-align: right; color: var(--fg3); }
.tr-mock .tr-lbl + .tr-ext { margin-top: 0; }
/* Pasti */
.tr-meals { background: var(--bg2); }
.tr-mday { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 13px; }
.tr-mday .wd { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--fg3); }
.tr-mday .n { font-size: 18px; font-weight: 800; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--today); color: var(--accent-fg); }
.tr-mday .dots { display: flex; gap: 3px; } .tr-mday .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line2); } .tr-mday .dots i.on { background: var(--ok); }
.tr-mlbl { font-size: 11px; font-weight: 700; color: var(--fg3); text-transform: uppercase; letter-spacing: .06em; margin: 10px 0 4px; }
.tr-mi { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.tr-mi .ic { width: 20px; text-align: center; }
.tr-mi .in { flex: 1; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg3); }
.tr-mi .in.has { background: var(--bg2); border-color: var(--line2); color: var(--fg); font-weight: 600; }
.tr-diet { display: flex; align-items: center; gap: 5px; margin-top: 10px; padding: 8px 10px 8px 12px; border-left: 3px solid var(--c); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--c) 8%, var(--bg2)); font-size: 12px; font-weight: 700; color: var(--fg2); }
.tr-diet .app { font-weight: 600; color: var(--fg3); } .tr-diet .kcal { margin-left: auto; color: var(--c); }
.tr-copy { display: inline-block; margin-top: 10px; padding: 6px 11px; border-radius: 10px; background: var(--bg3); font-weight: 700; font-size: 12px; }
/* Impostazioni */
.tr-set { background: var(--bg2); padding: 2px 12px; }
.tr-krow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.tr-krow:first-child { border-top: 0; }
.tr-krow .cat { font-size: 11px; padding: 4px 9px; }
.tr-krow .toggle { width: 40px; height: 24px; } .tr-krow .toggle::after { width: 18px; height: 18px; } .tr-krow .toggle.on::after { left: 19px; }
.tr-on { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ok); font-weight: 600; margin-top: 2px; }
.tr-on i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.tr-share { justify-content: flex-start; color: var(--fg2); }
.tr-ios { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, var(--bg2)); color: var(--accent); font-weight: 800; flex: none; }
/* chiusura */
.tr-end { padding-top: 0; background: var(--bg2); }
.tr-end .tr-nav { margin-top: 14px; border-top: 1px solid var(--line); border-radius: var(--r2); }
.tr-recap { display: flex; flex-direction: column; gap: 6px; }
.tr-recap > div { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg2); }
.tr-recap b { color: var(--fg); }
.tr-recap .k { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); color: var(--accent); flex: none; }
.tr-recap .k.j { background: var(--jarvis); color: var(--accent-fg); border: 0; }
.tr-recap .k svg { width: 16px; height: 16px; }
.tr-end .tr-lbl { margin-top: 0; }
.tr-hint { text-align: center; font-size: 12px; font-weight: 700; color: var(--accent); padding: 22px 0 4px; }

@media (prefers-reduced-motion: reduce) { .tour, .tour *, .tour *::after, .tour-bar, .tour-bar * { animation: none !important; transition: none !important; } }