/* Compact layouts reserve separate bands for header, readable data and arrows.
   Content reflows inside a scrollable panel instead of shrinking whole cards. */
.route-nav .dot-nav,.nav-btn [data-i18n]{display:none!important}
.nav-btn{min-width:52px!important;width:52px;min-height:48px!important;padding:8px!important;letter-spacing:0}
.nav-btn .arrow{font-size:24px}
.nav-cluster{max-width:calc(100vw - 24px)}
.hand-icon{display:none}
.scope-inline{display:none}
.info-content,.info-content>*{min-width:0}
.mini-card .value,.stat-tile .big,.legend-item,.orbit-item,.headline-item{overflow-wrap:anywhere;line-height:1.2}
.panel-head>div:first-child{min-width:0}
.demo-compact{--brand-scale:1!important;--lang-scale:1!important;--hero-scale:1!important;--panel-scale:1!important;--credit-scale:1!important;--nav-scale:1!important}
.demo-compact .experience{height:100dvh}
.demo-compact .topbar{inset:12px 14px auto;display:flex;align-items:flex-start;gap:12px}
.demo-compact .brandline{padding:10px;max-width:calc(100vw - 215px);gap:10px}
.demo-compact .brand-logo,.demo-compact .dell-logo{width:72px}
.demo-compact .brand-title{font-size:20px;white-space:normal;line-height:1.15}
.demo-compact .brand-kicker{font-size:10px;letter-spacing:.06em}
.demo-compact .topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.demo-compact .lang-switch{padding:3px;gap:0}
.demo-compact .lang-btn{min-width:40px;min-height:44px;padding:7px;font-size:12px}
.demo-compact .demo-return{position:static;min-height:44px;padding:8px;font-size:12px}
.demo-compact .demo-return img{display:none}
.demo-compact .demo-return span{display:none}
.demo-compact .demo-return::after{content:'WEB'}
.demo-compact .scope-card,.demo-compact .credit-card{display:none!important}
.demo-compact .info-panel{left:16px!important;right:auto!important;top:auto!important;bottom:98px!important;width:min(480px,calc(100vw - 32px))!important;max-width:calc(100vw - 32px)!important;max-height:calc(100dvh - var(--demo-panel-top,120px) - 110px)!important;overflow:auto!important;overscroll-behavior:contain;touch-action:pan-y;padding:18px!important;transform:none!important;border-radius:20px}
.demo-compact .info-panel.visible{pointer-events:auto}
.demo-compact #title{font-size:clamp(24px,2.8vw,32px);line-height:1.15;overflow-wrap:normal}
.demo-compact .description{font-size:16px;line-height:1.5}
.demo-compact .info-panel .panel-foot{font-size:14px;line-height:1.45}
.demo-compact .intro-box{max-height:calc(100dvh - var(--demo-panel-top,120px) - 110px);overflow:auto;pointer-events:auto;padding:22px;max-width:calc(100vw - 32px)}
.demo-compact .intro-hero{top:var(--demo-panel-top,120px);bottom:98px}
.demo-compact .intro-box h1{font-size:clamp(32px,5vw,64px);line-height:1.05}
.demo-compact .intro-logo{width:clamp(120px,20vw,230px);margin-bottom:12px}
.demo-compact .nav-cluster,.demo-compact .nav-cluster.nav-hidden{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%)!important;opacity:1!important;pointer-events:auto!important;gap:10px}
.demo-compact .nav-reveal{display:none!important}
.demo-compact .cards-grid,.demo-compact .tiles-grid,.demo-compact .headline-grid,.demo-compact .experience-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.demo-compact .progress-row{grid-template-columns:minmax(70px,.8fr) minmax(24px,1fr) max-content}
.demo-compact .micro-row{grid-template-columns:minmax(60px,.8fr) minmax(24px,1fr) max-content}
.demo-compact .orbit-wrap,.demo-compact .donut-block{grid-template-columns:140px minmax(0,1fr)}
.demo-compact .orbit-core{width:140px;height:150px}
.demo-compact .orbit-legend{min-width:0}
.demo-compact .scope-inline{padding-top:18px;margin-top:18px;border-top:1px solid rgba(255,255,255,.2)}
.demo-compact .scope-inline{display:block}
.demo-compact .scope-inline summary{cursor:pointer;font-size:14px;font-weight:700;margin-bottom:10px}
@media(pointer:coarse),(max-width:700px){.mouse-icon{display:none!important}.hand-icon{display:inline-block;font:32px/1 Arial,sans-serif;animation:touchSwipe 1.6s ease-in-out infinite}.scroll-cue .cue-arrow{font-size:14px}}
@keyframes touchSwipe{0%,100%{transform:translateY(5px)}50%{transform:translateY(-5px)}}
@media(max-width:700px){.demo-compact .topbar{inset:10px 10px auto;gap:6px}.demo-compact .brandline{max-width:calc(100vw - 195px);padding:8px;gap:6px}.demo-compact .brand-logo,.demo-compact .dell-logo{width:48px}.demo-compact .brand-kicker{display:none}.demo-compact .brand-title{font-size:15px}.demo-compact .topbar-right{gap:4px}.demo-compact .lang-btn{min-width:36px;padding:5px}.demo-compact .info-panel{left:12px!important;width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;padding:16px!important}.demo-compact .panel-counter{font-size:11px;padding:7px}.demo-compact .cards-grid,.demo-compact .tiles-grid,.demo-compact .headline-grid,.demo-compact .experience-grid,.demo-compact .split-grid{grid-template-columns:minmax(0,1fr)}.demo-compact .split-sep{display:none}.demo-compact .orbit-wrap,.demo-compact .donut-block{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.hand-icon{animation:none}}

.demo-info-toggle{display:none;min-height:48px;min-width:68px;padding:8px 12px;border:1px solid rgba(255,255,255,.5);border-radius:14px;background:#14252b;color:white;font:700 12px Arial;cursor:pointer}
.demo-touch .demo-info-toggle{display:block}
.demo-touch .info-panel,.demo-touch .info-panel.visible{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.demo-touch.demo-info-open .info-panel.visible{opacity:1!important;visibility:visible!important;pointer-events:auto!important}