/* C020 replaces two bounded components. JDO shared light canvas and type scale remain. */
.hmi20-views { flex:1; min-height:0; position:relative; }
.hmi20-view { height:100%; min-height:0; }
.hmi20-navigation { display:grid; grid-template-columns:1.9fr 1fr; gap:12px; }
.hmi20-map { position:relative; overflow:hidden; border-radius:12px; }
.hmi20-destination { position:absolute; left:16px; right:16px; bottom:16px; display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px; background:var(--surface); box-shadow:0 4px 16px #1717170a; }
.hmi20-destination strong,.hmi20-destination span { display:block; }
.hmi20-destination span { color:var(--muted); font-size:16px; }
.hmi20-nav-side { position:relative; overflow:hidden; border-radius:12px; }
.hmi20-nav-side>img { width:100%; height:100%; object-fit:cover; }
.hmi20-nav-side>div { position:absolute; bottom:0; inset-inline:0; padding:36px 16px 16px; color:white; background:linear-gradient(transparent,#070b10b8 42%,#070b10e0); }
.hmi20-nav-side span,.hmi20-nav-side strong { display:block; }
.hmi20-nav-side span { font-size:16px; }.hmi20-nav-side strong { margin-top:4px; font-size:16px; line-height:1.4; }
.hmi20-content { display:none; grid-template-columns:1.2fr 1fr; grid-template-rows:minmax(0,1fr) 40px; gap:10px 12px; }
.hmi20:has([value=content]:checked) .hmi20-navigation,.hmi20:has([value=content]:checked) .hmi20-voice-nav { display:none; }
.hmi20:has([value=content]:checked) .hmi20-content { display:grid; }
.hmi20-voice-content { display:none; }.hmi20:has([value=content]:checked) .hmi20-voice-content { display:inline; }
.hmi20-music { overflow:hidden; position:relative; isolation:isolate; border-radius:12px; background:#171717; color:#fff; display:flex; align-items:flex-end; padding:20px; }
.hmi20-record { position:absolute; width:240px; height:240px; right:-68px; top:-72px; border:1px solid #ffffff26; border-radius:50%; background:repeating-radial-gradient(circle at center,#ffffff0c 0 1px,transparent 2px 8px); transform:rotate(-20deg); z-index:-1; }
.hmi20-record>i { position:absolute; inset:34%; border-radius:50%; border:1px solid #ffffff45; background:var(--accent); }.hmi20-record>i:after { content:""; position:absolute; inset:46%; background:#171717; border-radius:50%; }
.hmi20-music-copy { display:flex; flex-direction:column; align-items:start; gap:8px; }
.hmi20-music-copy>span { font-size:16px; color:#ffffffc9; }.hmi20-music-copy>strong { font-size:24px; line-height:1.25; letter-spacing:-.02em; max-width:220px; }
.hmi20-music-copy>.hmi20-music-meta { margin-top:4px; }
.hmi20-explore { position:relative; overflow:hidden; border-radius:12px; }.hmi20-explore>img { width:100%; height:100%; object-fit:cover; object-position:center; }
.hmi20-explore>div { position:absolute; inset:auto 0 0; padding:32px 16px 12px; color:white; background:linear-gradient(transparent,#101710cf); }
.hmi20-explore strong,.hmi20-explore span { display:block; }.hmi20-explore strong { font-size:16px; }.hmi20-explore span { font-size:16px; }
.hmi20-route-summary { grid-column:1/-1; display:flex; align-items:center; gap:12px; padding:8px 12px; background:var(--canvas); border-radius:8px; font-size:16px; }.hmi20-route-summary .icon { width:18px; height:18px; }.hmi20-route-summary>span { margin-left:auto; color:var(--muted); }.hmi20-route-summary>strong { font-weight:550; }
.cloud20-platform { display:grid; grid-template-columns:.8fr 1.4fr; gap:72px; padding-top:40px; border-top:1px solid var(--line); }
.cloud20-kicker { display:block; font-size:14px; color:var(--muted); font-weight:550; margin-bottom:16px; }
.cloud20-management { padding-top:8px; }.cloud20-management h3 { font-size:24px; line-height:1.45; }.cloud20-management h3>span { display:block; }.cloud20-management>p { color:var(--muted); margin-top:20px; max-width:300px; }
.cloud20-library { margin-top:32px; }.cloud20-library>div { display:grid; grid-template-columns:52px 1fr; gap:16px; padding-block:16px; border-top:1px solid var(--line); }.cloud20-library dt { font-weight:600; }.cloud20-library dd { color:var(--muted); }
.cloud20-world { display:grid; grid-template-columns:1.08fr 1fr; grid-template-rows:208px 156px; gap:12px; position:relative; padding-bottom:32px; }
.cloud20-world figure { margin:0; position:relative; overflow:hidden; border-radius:18px; }.cloud20-world img { width:100%; height:100%; object-fit:cover; }.cloud20-place { grid-row:1/3; }.cloud20-place img { object-position:44% center; }.cloud20-place figcaption { position:absolute; inset:auto 0 0; padding:56px 24px 24px; color:white; background:linear-gradient(transparent,#132019b3 40%,#132019de); }.cloud20-place figcaption>span { display:block; font-size:16px; }.cloud20-place strong { display:block; font-size:24px; font-weight:550; line-height:1.4; margin-top:8px; }
.cloud20-charge img { object-position:61% center; }.cloud20-charge figcaption { position:absolute; left:16px; top:16px; padding:4px 12px; background:#ffffffed; border-radius:8px; font-size:16px; }
.cloud20-media { position:relative; isolation:isolate; background:#171717; color:#fff; overflow:hidden; border-radius:18px; display:flex; align-items:flex-end; padding:24px; }.cloud20-media>div:last-child>span { display:block; font-size:16px; color:#fff; }.cloud20-media strong { font-size:24px; font-weight:550; line-height:1.4; display:block; margin-top:8px; }
.cloud20-grooves { position:absolute; z-index:-1; right:-66px; top:-100px; width:300px; height:300px; border-radius:50%; background:repeating-radial-gradient(circle at center,#ffffff36 0 1px,transparent 2px 12px); }.cloud20-grooves:after { content:""; position:absolute; inset:34%; border:1px solid #ffffff5c; border-radius:50%; }
.cloud20-concept { position:absolute; bottom:0; right:0; font-size:14px; color:var(--muted); }
.cloud20-eco-caption { margin-top:24px; }.cloud20-eco-caption .cloud20-kicker { margin-bottom:12px; }.cloud20-eco-caption h3 { font-size:24px; line-height:1.4; }.cloud20-eco-caption p { color:var(--muted); margin-top:16px; }
.cloud20-evolution { margin-top:48px; padding-top:32px; border-top:1px solid var(--line); display:grid; grid-template-columns:1.15fr 1fr; gap:72px; align-items:center; }.cloud20-evolution h3 { font-size:24px; line-height:1.4; }.cloud20-evolution p { color:var(--muted); margin-top:16px; max-width:520px; }
.cloud20-editions { position:relative; height:220px; padding-top:48px; padding-left:80px; }.cloud20-edition-back { position:absolute; top:0; left:0; right:80px; padding:12px 24px; border:1px solid var(--line); border-radius:12px; background:var(--canvas); height:144px; color:var(--muted); }.cloud20-note-lines { display:grid; gap:8px; margin-top:16px; }.cloud20-note-lines i { display:block; width:65%; height:1px; background:var(--line); }.cloud20-note-lines i:nth-child(2) { width:40%; }
.cloud20-edition-front { position:relative; border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:24px; height:172px; box-shadow:0 8px 24px #17171706; }.cloud20-edition-front>span { display:flex; align-items:center; gap:12px; }.cloud20-edition-front .icon { width:20px; height:20px; }.cloud20-edition-front>strong { display:block; margin-top:16px; font-weight:550; }.cloud20-edition-front>p { margin-top:4px; }
.cloud20-boundary { margin-top:32px; color:var(--muted); }
.charge-live .journey-restart { min-width:44px; }
@media (max-width:900px) {
 .hmi20-screen { height:440px; }.hmi20-content { grid-template-rows:minmax(0,1fr) 44px; }.hmi20-music-copy>strong { font-size:22px; }.hmi20-record { width:280px; height:280px; right:-44px; top:-48px; }.hmi20-music { padding:24px; }
 .cloud20-platform { gap:32px; grid-template-columns:.85fr 1.25fr; padding-top:32px; }.cloud20-world { grid-template-columns:1fr 1fr; grid-template-rows:200px 144px; gap:8px; }.cloud20-place figcaption { padding-inline:16px; }.cloud20-media { padding:16px; }.cloud20-world strong,.cloud20-management h3,.cloud20-eco-caption h3,.cloud20-evolution h3 { font-size:22px; }.cloud20-library>div { grid-template-columns:1fr; gap:4px; }.cloud20-evolution { gap:32px; grid-template-columns:1fr 1fr; }.cloud20-editions { padding-left:32px; }.cloud20-edition-back { right:32px; }.cloud20-edition-front { padding:24px 20px; }
}
@media (max-width:620px) {
 .hmi20-screen { height:510px; padding:14px; }.hmi20 .screen-homebar { align-items:flex-start; }.hmi20 .screen-homebar>span:first-child { gap:6px; }.hmi20 .screen-homebar>span:last-child { max-width:84px; text-align:right; line-height:1.4; }.hmi20-navigation { grid-template-columns:1fr; grid-template-rows:1fr 88px; gap:10px; }.hmi20-nav-side { display:grid; grid-template-columns:100px 1fr; background:var(--canvas); }.hmi20-nav-side>div { position:static; padding:14px; color:var(--ink); background:none; }.hmi20-destination { left:12px; right:12px; bottom:12px; padding:12px; }.hmi20-nav-side span { color:var(--muted); }
 .hmi20-content { grid-template-columns:1fr; grid-template-rows:1.35fr 1fr 40px; gap:10px; }.hmi20-music { padding:18px; }.hmi20-record { width:230px; height:230px; right:-60px; top:-58px; }.hmi20-music-copy { gap:6px; }.hmi20-music-copy>strong { max-width:160px; }.hmi20-music-copy>.hmi20-music-meta { margin-top:0; }.hmi20-explore>img { object-position:center 57%; }.hmi20-explore>div { padding:18px 16px 12px; }.hmi20-explore>div>span:last-child { display:none; }.hmi20-route-summary { gap:8px; padding:8px; }.hmi20-route-summary .icon { width:16px; height:16px; }.hmi20 .hmi-assistant { margin-top:12px; }.hmi20 .hmi-assistant>span:last-child { display:none; }.hmi20 .product-caption { gap:12px; }
 .cloud20-platform { grid-template-columns:1fr; gap:32px; }.cloud20-management { padding:0; }.cloud20-management h3>span { display:inline; }.cloud20-management>p { max-width:none; margin-top:12px; }.cloud20-library { margin-top:24px; }.cloud20-library>div { grid-template-columns:52px 1fr; gap:16px; padding-block:12px; }
 .cloud20-world { grid-template-rows:180px 140px; gap:10px; }.cloud20-place strong,.cloud20-media strong { font-size:22px; }.cloud20-media { padding:16px; }.cloud20-charge figcaption { top:12px; left:12px; padding:4px 8px; }.cloud20-eco-caption { margin-top:20px; }.cloud20-evolution { margin-top:32px; padding-top:32px; grid-template-columns:1fr; gap:24px; }.cloud20-editions { height:216px; padding-left:48px; }.cloud20-edition-back { right:48px; }.cloud20-edition-front { height:168px; }.cloud20-boundary { margin-top:24px; }
}