/* One compact app display for every public phone. Colours and radii come from
   the app theme; the walkthrough continues to render real guardian components. */
:is(.story-product,.walkthrough-page,.showcase-stage[data-device=phone]){
 --demo-title:19px;--demo-label:10px;--demo-value:12px;
}
:is(.story-product .scene-app-header,.walkthrough-page .walkthrough-header,.showcase-stage[data-device=phone] .preview-header){
 padding:14px 16px;gap:9px;background:var(--surface);border-bottom:1px solid var(--border);
}
:is(.story-product .scene-app-header strong,.walkthrough-page .walkthrough-brand strong,.showcase-stage[data-device=phone] .preview-logo strong){font-size:16px;line-height:1.2}
:is(.story-product .scene-app-header small,.walkthrough-page .walkthrough-brand small,.showcase-stage[data-device=phone] .preview-logo small){display:block;font-size:9px;line-height:1.4;color:var(--text-secondary)}
:is(.story-product .scene-account,.walkthrough-page .walkthrough-account,.showcase-stage[data-device=phone] .preview-account){display:grid;place-items:center;width:24px;height:24px;margin-left:auto;background:transparent;border-radius:0;color:var(--text-secondary)}
:is(.scene-account,.walkthrough-account,.preview-account) svg{width:20px;height:20px}
:is(.story-product .scene-app-content,.walkthrough-page .walkthrough-scroll,.showcase-stage[data-device=phone] .preview-body){padding:18px;background:var(--background);color:var(--text-primary)}
:is(.story-product .scene-child,.walkthrough-page .parent-child-card,.showcase-stage[data-device=phone] .preview-child){display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:0;border:0;background:transparent;box-shadow:none}
:is(.story-product .scene-avatar,.walkthrough-page .walkthrough-portrait,.showcase-stage[data-device=phone] .preview-child .demo-child-portrait){width:48px;height:48px;min-width:48px;margin:0;border-radius:50%;object-fit:cover}
:is(.story-product .scene-child h3,.walkthrough-page .parent-child-card h2,.showcase-stage[data-device=phone] .preview-child h3){font-size:var(--demo-title);font-weight:700;line-height:1.25;letter-spacing:-.02em;margin:0 0 3px}
:is(.story-product .scene-child small,.walkthrough-page .parent-child-card p,.showcase-stage[data-device=phone] .preview-child p,.showcase-stage[data-device=phone] .preview-child small){display:block;font-size:11px;line-height:1.45;color:var(--text-secondary);margin:0}
:is(.story-product .scene-facts,.walkthrough-page .parent-day-facts,.showcase-stage[data-device=phone] .preview-facts){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;margin:0}
:is(.story-product .scene-facts>div,.walkthrough-page .parent-fact,.showcase-stage[data-device=phone] .preview-facts article){padding:12px!important;min-height:70px!important;gap:4px 7px!important;border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface);box-shadow:none;align-items:center}
:is(.story-product .scene-facts>div,.showcase-stage[data-device=phone] .preview-facts article){grid-template-columns:22px minmax(0,1fr)}
.walkthrough-page .parent-fact{display:flex}
:is(.scene-facts svg,.walkthrough-page .parent-fact svg,.showcase-stage[data-device=phone] .preview-facts svg){width:22px;height:22px;color:var(--primary)}
:is(.scene-facts small,.walkthrough-page .parent-fact-label,.showcase-stage[data-device=phone] .preview-facts small){font-size:var(--demo-label);line-height:1.3;color:var(--text-secondary)}
:is(.scene-facts strong,.walkthrough-page .parent-fact strong,.showcase-stage[data-device=phone] .preview-facts strong){font-size:var(--demo-value);line-height:1.3;color:var(--text-primary)}
:is(.story-product .scene-note,.walkthrough-page .parent-observation,.showcase-stage[data-device=phone] .preview-note){display:block;margin:12px 0 0;padding:14px;border:0;border-radius:var(--radius-control);background:var(--primary-subtle);color:var(--text-primary)}
:is(.scene-note strong,.walkthrough-page .parent-observation h3,.showcase-stage[data-device=phone] .preview-note h4){font-size:12px;line-height:1.4;margin:0;font-weight:700}
:is(.scene-note p,.walkthrough-page .parent-observation p,.showcase-stage[data-device=phone] .preview-note p){font-size:11px;line-height:1.5;margin:5px 0 0}
.showcase-stage[data-device=phone] .preview-note>span{display:none}
.walkthrough-page .parent-day-card.card{padding:0!important;background:transparent;border:0;box-shadow:none;gap:12px}
.walkthrough-page .parent-day-heading h2{font-size:16px}
.walkthrough-page .parent-day-heading time{font-size:10px}
.walkthrough-page .parent-date-toolbar{padding-bottom:12px}
.walkthrough-page .walkthrough-today{display:none}
.walkthrough-page .walkthrough-date{margin-top:0}
:is(.story-product .scene-app-dock,.walkthrough-page .walkthrough-dock,.showcase-stage[data-device=phone] .preview-nav){display:flex;flex-direction:row;gap:5px;padding:7px;background:var(--surface);border-top:1px solid var(--border);border-right:0}
:is(.story-product .scene-app-dock>span,.walkthrough-page .walkthrough-dock button,.showcase-stage[data-device=phone] .preview-nav button){display:flex;flex:1;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:48px;padding:7px 3px;font-size:9px;line-height:1.3;border-radius:var(--radius-control)}
:is(.walkthrough-dock,.scene-app-dock,.showcase-stage[data-device=phone] .preview-nav) svg{width:20px;height:20px}
/* Keep the welcome device at the same native width, not 84% of its wrapper. */
.parent-audience .phone-wrap{width:340px;max-width:100%;margin-inline:auto}
.parent-audience .phone-wrap .phone-hardware{width:340px;max-width:100%}
@media(max-width:767px){.parent-audience .phone-wrap,.parent-audience .phone-wrap .phone-hardware{width:300px}}
:root .walkthrough-page .parent-day-card.card{border:0;background:transparent;box-shadow:none;gap:12px}
:root .walkthrough-page .parent-day-heading{margin:0;gap:8px}
:root .walkthrough-page .parent-observation{padding:14px;margin:0;background:var(--primary-subtle);border:0}
:root .walkthrough-page .parent-observation h3{font-size:12px;margin:0}
:root .walkthrough-page .parent-observation p{font-size:11px;margin:5px 0 0;line-height:1.5}

/* Parent previews embed the actual component-sized fictional app, never a
   separately compressed copy. The hardware is decorative and stays outside. */
.parent-app-preview{display:block;width:100%;height:581px;border:0;background:var(--background)}
.parent-preview-device{width:340px;max-width:100%;margin:24px auto}
/* Desktop has its own continuous bezel; do not inherit phone hardware details. */
.showcase-stage[data-device=desktop] .parent-preview-device{width:100%;border:1px solid #555b65;border-radius:24px;padding:12px;background:linear-gradient(145deg,#353a43,#20242b);box-shadow:0 20px 48px #10182724,inset 0 1px 0 #ffffff24}
.showcase-stage[data-device=desktop] .parent-preview-device .phone-screen{height:auto;margin:0;border-radius:12px;clip-path:inset(0 round 12px);box-shadow:0 0 0 1px #0008}
.showcase-stage[data-device=desktop] .parent-preview-device :is(.phone-status,.phone-home),.showcase-stage[data-device=desktop] .parent-preview-device::before,.showcase-stage[data-device=desktop] .parent-preview-device::after{display:none}
.story-product.scene-parents .phone-screen{display:flex;flex-direction:column;height:100%}
.story-product.scene-parents .parent-app-preview{flex:1;min-height:0}
.story-product.scene-parents :is(.phone-status,.phone-home){flex:none}

.parent-preview-device .parent-app-preview{flex:1;min-height:0}
.parent-preview-device :is(.phone-status,.phone-home){flex:none}
.showcase-stage[data-device=desktop] .parent-preview-device{aspect-ratio:auto;max-width:1100px}
.showcase-stage[data-device=desktop] .parent-preview-device .parent-app-preview{flex:none;height:650px}
/* Keep the interactive parent display upright for accurate touch hit targets. */
.story-product.scene-parents{transform:none}