/* Shared phone/tablet layout for the static scientific atlas pages. */
@media(max-width:1100px){
  html,body{height:auto;min-height:100%;overflow:visible}
  .app-shell{height:auto;min-height:100svh;overflow:visible}
  .atlas-ui{position:relative;inset:auto;display:block;min-height:100svh;padding:12px;overflow:visible}
  .topbar{min-height:48px;flex-wrap:wrap;gap:10px;align-items:center}
  .brand-lockup{min-width:0;flex:1 1 180px}
  .brand-title{font-size:16px;overflow-wrap:anywhere}
  .topbar-actions{max-width:100%;flex-wrap:wrap;gap:6px;justify-content:flex-start}
  .ghost-btn,.i18n-switch button{min-height:44px;min-width:44px}
  .category-tabs{margin-top:10px;overflow-x:auto;justify-content:flex-start;overscroll-behavior-x:contain}
  .category-tab{flex:0 0 auto;min-height:44px}
  .category-tab span{font-size:12px}
  .level-rail,.molecule-rail{margin-top:10px;padding:9px}
  .rail-heading{display:none}
  .level-list,.molecule-list{flex-direction:row;overflow-x:auto;padding-bottom:5px;overscroll-behavior-x:contain}
  .level-card,.molecule-card{flex:0 0 155px;min-height:52px}
  .level-card-copy strong,.molecule-card-copy strong{font-size:12px}
  .level-heading,.molecule-heading{width:100%;padding:18px 4px 0}
  .level-heading h1,.molecule-heading h1{font-size:clamp(26px,7vw,38px);line-height:1.15}
  .level-heading>p,.molecule-heading>p{font-size:14px;line-height:1.6}
  .model-stage{height:52svh;min-height:300px;max-height:540px;margin-top:12px;border:1px solid rgba(255,255,255,.08);background:rgba(6,11,23,.5)}
  .model-stage canvas,#canvas-container canvas,#viewer-container canvas{touch-action:pan-y!important}
  .detail-panel{position:relative;margin-top:12px;overflow:visible;padding:18px;background:rgba(8,14,27,.94)}
  .fact-row dt,.fact-row dd,.description p,.detail-text p,.use-cases li,.visual-note p,.separation-note p{font-size:13px;line-height:1.65}
  .visual-note>span,.section-label{font-size:11px}
  .canvas-hint{display:block;margin:12px 0 4px;text-align:center;font-size:11px;line-height:1.5}
  .step-controls button,.step-controls #play-btn{width:44px;height:44px}
  .step-controls{max-width:calc(100% - 16px);gap:4px;padding:5px}
  .step-counter{min-width:46px;padding:0 3px}
  .step-item{min-height:44px}
  .step-item-copy{font-size:13px}
  .kind-card{min-height:52px}
  .kind-card .level-card-copy strong,.algo-card .level-card-copy strong{font-size:13px}
  .algo-card{min-height:44px}
  .algorithm-steps{max-height:none;overflow:visible}
}
@media(min-width:821px) and (max-width:1100px){
  .level-list{display:flex}
  .kind-group{flex:0 0 205px}
}
@media(pointer:coarse){
  .ghost-btn,.i18n-switch button,.category-tab{min-width:44px;min-height:44px}
}

@media(max-width:1100px){
 .algorithm-atlas .level-rail{max-height:300px;overflow-y:auto}
 .algorithm-atlas .level-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
 .algorithm-atlas .kind-group{min-width:0;flex:none}
 .algorithm-atlas .kind-card{flex:none;min-height:64px;grid-template-columns:24px minmax(0,1fr) 10px;padding:8px 6px;gap:5px}
 .algorithm-atlas .level-icon{width:24px;height:32px;font-size:17px}
 .algorithm-atlas .kind-items{margin-left:0;padding-left:5px}
 .algorithm-atlas .algo-card{flex:none;padding:8px 6px}
 .algorithm-atlas .kind-card .level-card-copy strong{font-size:12px}
}

/* Shared keyboard focus and readable secondary text on atlas panels. */
.atlas-ui button:focus-visible, .atlas-ui a:focus-visible, .i18n-switch button:focus-visible {
 outline:3px solid #93c5fd;outline-offset:3px;
}
.atlas-ui .detail-panel a {color:#93c5fd;text-decoration:underline;text-underline-offset:3px}
.atlas-ui .detail-panel a:visited {color:#c4b5fd}
.atlas-ui .level-card-copy small,.atlas-ui .rail-heading small,.atlas-ui .fact-row dt,.atlas-ui .visual-note p,.atlas-ui .visual-caveat,.atlas-ui .canvas-hint {color:#a9b6cd}
.atlas-ui .category-tab small,.atlas-ui .category-tabs small,.atlas-ui .atoms-badge,.atlas-ui .generation,.atlas-ui .kind-caret {color:#a9b6cd}
.atlas-ui .level-chip {color:#d7dfef}
@media(max-width:640px){.model-controls button{min-height:44px}.model-controls{bottom:8px}.stage-state{bottom:110px}}
@media(max-width:1100px){.topbar .ghost-btn .btn-text{display:inline!important;position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}