/* Cornice comune: tutte le anteprime di schermate sono telefonini. */
.phone-preview{margin:0;width:320px;max-width:100%;color:#1a1d27;min-width:0}
.device-frame{position:relative;padding:9px;background:#090d13;border:1px solid #707782;border-radius:43px;box-shadow:0 25px 65px #0005}
.device-frame::before,.device-frame::after{content:"";position:absolute;left:-3px;width:3px;height:34px;background:#636b77;border-radius:2px;top:105px}
.device-frame::after{top:150px;height:47px}
.device-screen{position:relative;display:flex;flex-direction:column;height:620px;border-radius:34px;background:#f6f4ee;overflow:hidden;color:#1a1d27}
.device-status{display:flex;justify-content:space-between;align-items:center;padding:14px 19px 8px;font:700 10px/1.5 'Plus Jakarta Sans',sans-serif;min-height:40px;color:#1a1d27;flex-shrink:0}
.device-island{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:86px;height:23px;background:#080b10;border-radius:20px;z-index:1}
.device-signals{letter-spacing:1px;font-size:9px}
.device-app-heading{padding:15px 18px 17px;flex-shrink:0}
.device-app-heading>span{font-size:10px;display:block;margin-bottom:7px;color:#555c66}
.device-app-heading>strong{font:700 24px/1.2 'Plus Jakarta Sans',sans-serif;letter-spacing:-.05em;display:block}
.device-app-nav{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;padding:9px 5px 4px;background:#e9e8e3;border-top:1px solid #bcc0c5;flex-shrink:0;color:#303843}
.device-app-nav>span{font-size:19px;line-height:1.2}
.device-app-nav b{display:block;font:600 8px/1.5 'Plus Jakarta Sans',sans-serif;margin-top:4px}
.device-home{width:90px;height:4px;border-radius:4px;background:#1a1d27;margin:9px auto 8px;flex-shrink:0}
.phone-preview figcaption{text-align:center;margin-top:17px;color:#b9c3ce;font:400 11px/1.6 'Plus Jakarta Sans',sans-serif}
.device-photo{height:100%;width:100%;object-fit:cover;object-position:top;display:block;border-radius:33px}

.tab-app-nav{grid-template-columns:repeat(4,1fr)}

.device-screen>.family-app-content,.device-screen>.app-timeline{min-height:0;overflow-y:auto;scrollbar-width:thin}

/* Barre illustrative ricavate dai componenti nativi; non sono catture runtime. */
.preview-appbar{display:flex;align-items:center;gap:5px;padding:9px 10px 15px;flex-shrink:0;color:var(--preview-ink,#1a1d27);background:var(--preview-base,#f0f2f5)}
.preview-appbar svg,.preview-bottom svg,.skipper-check svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}.chrome-pill{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--preview-pill,#f0f2f5);box-shadow:3px 3px 6px var(--preview-shadow,#ccd0d6),-3px -3px 6px var(--preview-light,#fff);flex-shrink:0}.chrome-pill svg{width:14px;height:14px}.chrome-title{flex:1;min-width:0;border-radius:11px;box-shadow:3px 3px 6px var(--preview-shadow,#ccd0d6),-3px -3px 6px var(--preview-light,#fff);padding:9px 8px;display:flex;justify-content:space-between;gap:4px;font:700 10px/1.2 'Plus Jakarta Sans',sans-serif;white-space:nowrap}.chrome-title svg{width:11px;height:11px;flex-shrink:0}
.preview-bottom{display:flex;position:relative;gap:2px;margin:18px 10px 5px;padding:6px 4px;border:1px solid var(--preview-border,#c4c9d0);border-radius:24px;box-shadow:4px 4px 9px var(--preview-shadow,#ccd0d6),-4px -4px 9px var(--preview-light,#fff);background:var(--preview-base,#f0f2f5);color:var(--preview-ink,#1a1d27);flex-shrink:0}.dock-item{min-width:0;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:37px;border-radius:16px;padding:4px 0}.dock-item b{font:600 6px/1.3 'Plus Jakarta Sans',sans-serif;letter-spacing:0!important;color:inherit!important}.dock-item.is-active{color:var(--preview-accent,#1a1d27);box-shadow:inset 2px 2px 4px var(--preview-shadow,#ccd0d6),inset -2px -2px 4px var(--preview-light,#fff)}.dock-item.dock-create{height:42px;width:42px;flex:none;border:4px solid var(--preview-base,#f0f2f5);border-radius:50%;background:var(--preview-accent,#20c9ba);color:#112321;transform:translateY(-17px);margin-inline:2px;box-shadow:0 2px 4px #0005}.dock-create b{display:none}.dock-create svg{width:22px;height:22px}
.tab-preview{--preview-base:#f0f2f5;--preview-pill:#f0f2f5;--preview-accent:#168b80}.skipper-preview{--preview-base:#212429;--preview-pill:#262a2f;--preview-ink:#f0f2f5;--preview-shadow:#101215;--preview-light:#34383e;--preview-border:#41464d;--preview-accent:#74aaff;background:#212429;color:#f0f2f5}.skipper-preview .device-status{color:#f0f2f5}.skipper-preview .device-home{background:#d0d4da}.skipper-overview{padding:10px 16px;flex:1;min-height:0;overflow:auto}.preview-kicker{color:#aeb5bf!important;font-size:8px!important;letter-spacing:.1em}.skipper-overview h3{font:700 23px/1.15 'Plus Jakarta Sans',sans-serif;letter-spacing:-.04em;margin:12px 0 19px!important;color:#f0f2f5}.skipper-vessel{padding:24px 15px;background:linear-gradient(150deg,#1d4673,#152635);border:1px solid #54779b;border-radius:17px;margin-bottom:19px}.skipper-vessel>span{font-size:7px;letter-spacing:.1em;color:#aacdff}.skipper-vessel strong{font-size:17px;display:block;line-height:1.4;margin-top:10px;color:#fff}.skipper-check{display:flex;gap:10px;align-items:center;padding:15px 11px;margin-bottom:13px;border-radius:15px;background:#24282d;box-shadow:4px 4px 9px #121518,-4px -4px 9px #33383d}.skipper-check>span{color:#74aaff}.skipper-check strong{display:block;color:#f0f2f5;font:600 10px/1.5 'Plus Jakarta Sans',sans-serif}.skipper-check small{display:block;font-size:8px;color:#adb4be;margin-top:3px}.preview-small-note{font-size:8px!important;line-height:1.5!important;color:#adb4be!important}
.keeper-preview{--preview-base:#f0f2f5;--preview-pill:#f0f2f5;--preview-accent:var(--keeper-ink);background:#f0f2f5}.keeper-preview .device-status{background:#f0f2f5}.keeper-horizon{flex:1;min-height:0;display:flex;flex-direction:column;color:#1a1d27}.timeline-zoom{display:flex;gap:3px;margin:2px 12px 8px;padding:4px;background:#dfe3e9;border-radius:12px;flex-shrink:0}.timeline-zoom button{font:600 12px/1.4 'Plus Jakarta Sans',sans-serif;border:0;min-height:44px;padding:8px 2px;touch-action:manipulation;border-radius:8px;background:transparent;color:#404451;flex:1;cursor:pointer;min-width:0}.timeline-zoom button[aria-pressed=true]{background:#fff;color:var(--keeper-ink);box-shadow:1px 2px 4px #0002}.timeline-zoom button:focus-visible{outline:2px solid var(--keeper-ink);outline-offset:1px}.timeline-flow{min-height:0;flex:1;overflow-y:auto;padding:0 14px 12px;scrollbar-width:thin}.timeline-today{font:500 8px/1.6 'Plus Jakarta Sans',sans-serif!important;color:#5a5e69!important;margin:0 0 13px!important}.timeline-overdue{padding:12px 10px;margin-bottom:17px;background:var(--keeper-overdue);border:1px solid #727782;border-left:5px solid var(--keeper-ink);border-radius:10px;color:#1a1d27}.timeline-overdue>span,.timeline-event>div>span{font:800 12px/1.5 'Plus Jakarta Sans',sans-serif;letter-spacing:.03em;text-transform:uppercase}.timeline-overdue strong{font:700 12px/1.4 'Plus Jakarta Sans',sans-serif;display:block;margin:5px 0}.timeline-overdue small{font:400 8px/1.5 'Plus Jakarta Sans',sans-serif;display:block}.timeline-group{position:relative;padding-left:15px;border-left:1px solid #959aa5;margin-left:3px;margin-bottom:19px}.timeline-group::before{content:'';position:absolute;left:-4px;top:4px;width:7px;height:7px;background:var(--keeper-ink);border-radius:50%}.timeline-group>p{font:700 9px/1.5 'Plus Jakarta Sans',sans-serif!important;color:#424754!important;margin:0 0 10px!important}.timeline-event{display:flex;gap:10px;border:1px solid #727782;border-radius:10px;padding:12px 9px;margin-bottom:9px;color:#1a1d27}.timeline-event time{font:700 21px/1 'Plus Jakarta Sans',sans-serif;min-width:25px;letter-spacing:-.04em}.timeline-event time small{display:block;font-size:11px;line-height:1.8;letter-spacing:.02em}.timeline-event strong{display:block;font:700 11px/1.4 'Plus Jakarta Sans',sans-serif;margin:4px 0}.timeline-event>div>small{display:block;font:400 8px/1.6 'Plus Jakarta Sans',sans-serif}.timeline-event.tone-near{background:var(--keeper-near)}.timeline-event.tone-coming{background:var(--keeper-coming)}.timeline-event.tone-calm{background:var(--keeper-calm)}.timeline-empty-space{padding:15px 5px;font:500 10px/1.7 'Plus Jakarta Sans',sans-serif;color:#5a5e69}.timeline-empty-space strong{display:block;color:var(--keeper-ink);margin-bottom:7px;font-size:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* I contenuti illustrativi TAB restano nella propria shell. */
:is(.phone-screen,.iphone15-screen,.phone-tall-screen){--preview-base:#212429;--preview-pill:#262a2f;--preview-ink:#f0f2f5;--preview-shadow:#101215;--preview-light:#34383e;--preview-border:#41464d;--preview-accent:#20c9ba;background:#212429!important}:is(.phone-screen,.iphone15-screen,.phone-tall-screen) .device-status{color:#f0f2f5;min-height:37px;padding-top:12px;font-size:8px}:is(.phone-screen,.iphone15-screen,.phone-tall-screen) .device-island{display:none}:is(.phone-screen,.iphone15-screen,.phone-tall-screen) .preview-appbar{padding-top:3px;padding-bottom:12px}:is(.phone-screen,.iphone15-screen,.phone-tall-screen) .chrome-title{font-size:8px}:is(.phone-screen,.iphone15-screen,.phone-tall-screen) .chrome-pill{width:24px;height:24px}:is(.phone-screen,.iphone15-screen,.phone-tall-screen) .preview-bottom{margin-top:16px}:is(.phone-screen,.iphone15-screen,.phone-tall-screen) .device-home{background:#e3e4e8;margin-top:5px;margin-bottom:10px}.preview-screen-content{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;scrollbar-width:none}.preview-screen-content>*{min-height:0}.phone-feed{flex:1;min-height:0;overflow:auto}.phone-nav{display:none!important}.skipper-hero-phone .device-screen{height:620px}.skipper-hero-phone{width:300px;max-width:100%}.skipper-hero-phone figcaption{font-size:11px}

/* La settimana usa una striscia di giorni e un percorso più visibile, con i colori Elementi. */
.timeline-week-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin:0 0 15px;padding:5px 3px;border:1px solid #c4c9d0;border-radius:13px;background:#e6e8eb}
.timeline-week-strip span{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:5px 0;border-radius:9px;color:var(--keeper-ink);font:700 13px/1 'Plus Jakarta Sans',sans-serif}
.timeline-week-strip small{font:600 8px/1 'Plus Jakarta Sans',sans-serif}
.timeline-week-strip .is-start{background:var(--keeper-calm)}
.timeline-week-strip .has-event{background:var(--keeper-near);box-shadow:inset 0 0 0 1px var(--keeper-ink)}
[data-scope=week] .timeline-group{margin-left:6px;padding-left:13px;border-left:3px solid var(--keeper-near)}
[data-scope=week] .timeline-group::before{left:-7px;top:2px;width:9px;height:9px;border:2px solid var(--keeper-ink);background:var(--keeper-near)}
[data-scope=week] .timeline-event{box-shadow:3px 3px 0 #1a1d2722}

/* Lo zoom annuale dà una vista d’insieme, senza ingrandire le singole azioni. */
[data-scope="year"] .timeline-overdue{padding:8px 10px;margin-bottom:10px}[data-scope="year"] .timeline-group{margin-bottom:9px}[data-scope="year"] .timeline-group>p{margin-bottom:5px!important}[data-scope="year"] .timeline-event{padding:7px 9px;margin-bottom:5px;align-items:center}[data-scope="year"] .timeline-event>div>small{display:none}[data-scope="year"] .timeline-event strong{font-size:11px!important;margin:2px 0}[data-scope="year"] .timeline-event time{font-size:18px}[data-scope="year"] .timeline-today{margin-bottom:8px!important}[data-scope="year"] .timeline-overdue small{font-size:8px!important}

.timeline-overdue,.timeline-event>div{line-height:1.2}
.keeper-preview .dock-item b{font-size:11px;line-height:1.2}.keeper-preview .dock-item{height:44px}.keeper-preview .timeline-overdue>span,.keeper-preview .timeline-event>div>span{letter-spacing:0}