/* Phone and small-tablet layout. Loaded last, so these rules refine hud.css and views.css.
   Breakpoints: 980px (map rails become chips + sheet), 760px (phone), 520px (narrow phone). */

.short{display:none}
.sheet-head{width:100%;border:0;border-bottom:1px solid var(--hair);background:none;color:inherit;font:inherit;text-align:left;cursor:default}

/* touch screens have no keyboard hints */
@media (hover:none){ .btn kbd{display:none} }

/* ================= ATLAS: layer chips under the header, ranked sites as a bottom sheet ================= */
@media (max-width:980px){
  .rail{display:flex}
  .rail.left{top:calc(58px + env(safe-area-inset-top,0px));bottom:auto;left:0;right:0;width:auto}
  .rail.left .panel{background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  .rail.left .panel::before,.rail.left .panel::after,.rail.left .panel-head,.rail.left .legend-ramp{display:none}
  .rail.left .scroll{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:4px 12px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rail.left .scroll::-webkit-scrollbar{display:none}
  .rail.left .strat{flex:none;width:auto;grid-template-columns:auto auto;gap:7px;padding:8px 13px;border:1px solid var(--hair);border-radius:999px;
    background:rgba(10,12,16,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .rail.left .strat .band{width:8px;height:8px;border-radius:50%}
  .rail.left .strat small,.rail.left .strat .w,.rail.left .strat .wb{display:none}
  .rail.left .strat b{font-size:12.5px;white-space:nowrap}
  .rail.left .strat[aria-pressed="true"]{border-color:var(--moho);background:rgba(36,30,18,.9)}
  .rail.left .strat .long{display:none}
  .rail.left .strat.chip-tune{display:grid}
  .rail.left .panel-head.tabs{display:none}
  .tune{top:auto;bottom:calc(54px + env(safe-area-inset-bottom,0px));left:8px;right:8px;width:auto;height:min(62vh, 560px);z-index:4}
  .live-status{top:calc(108px + env(safe-area-inset-top,0px))}
  .explain{bottom:calc(54px + env(safe-area-inset-bottom,0px));z-index:5}
  .rail.left .strat .short{display:inline}

  .rail.right{top:auto;bottom:calc(54px + env(safe-area-inset-bottom,0px));left:8px;right:8px;width:auto;max-height:34vh}
  .rail.right .panel{max-height:34vh}
  .rail.right .sheet-head{cursor:pointer;padding:12px 14px}
  .rail.right .sheet-head .eyebrow::after{content:"  ▾";color:var(--fg)}
  .rail.right.folded .scroll{display:none}
  .rail.right.folded .sheet-head{border-bottom:0}
  .rail.right.folded .sheet-head .eyebrow::after{content:"  ▴"}
  .rank{padding:10px 14px}
  /* site names live in the sheet, so map nodes show only their rank until tapped */
  .node:not(.hl) .nlab{opacity:0}
  .maplibregl-ctrl-bottom-right{bottom:auto !important;top:calc(108px + env(safe-area-inset-top,0px))}
}

/* ================= PHONE ================= */
@media (max-width:760px){
  /* chrome */
  .hud-top{gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px}
  .hud-bottom{padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px))}
  .menu a{padding:9px 9px;font-size:11.5px;letter-spacing:.12em}
  #toast{bottom:calc(64px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 32px);text-align:center}

  /* orbit: Earth fills the upper half (camera in scene.js), the title block sits under it */
  .orbit-copy{bottom:calc(58px + env(safe-area-inset-bottom,0px));left:16px;right:16px;gap:11px;isolation:isolate}
  .orbit-copy::before{content:"";position:absolute;z-index:-1;inset:-48px -16px -60px;
    background:linear-gradient(to bottom, rgba(4,6,10,0), rgba(4,6,10,.84) 56px, rgba(4,6,10,.92))}
  .orbit-copy .eyebrow{font-size:9.5px;letter-spacing:.12em}
  .orbit-copy h1{font-size:clamp(34px,10.5vw,44px);line-height:.95}
  .orbit-copy h1 span{display:inline-block;margin-right:.22em}
  .orbit-tag{font-size:15.5px}
  .orbit-lede{font-size:13.5px;margin-top:-4px}
  .stats{grid-template-columns:repeat(4,minmax(0,auto));gap:2px 14px}
  .stats dt{font-size:20px}
  .stats dd{font-size:9px;letter-spacing:.08em;line-height:1.3}
  .cta{gap:8px}
  .cta .btn{justify-content:center;padding:12px 10px}
  .cta .btn.primary{flex:1 1 100%}
  .cta .btn:not(.primary){flex:1 1 0;font-size:11px;letter-spacing:.1em}

  /* director: focused world sits up top, its dossier is a bottom card */
  .dossier{left:8px;right:8px;width:auto;top:auto;bottom:calc(54px + env(safe-area-inset-bottom,0px));max-height:56vh}
  .dossier .acts{padding:10px 12px;gap:6px}
  .dossier .acts .btn{padding:8px 10px}
  .dossier .band h2{font-size:22px}
  .wtext b{font-size:13px;letter-spacing:.18em}
  .wtext span{font-size:10px}
  .dcard{display:none}

  /* passport drawer: full width */
  .drawer{top:calc(54px + env(safe-area-inset-top,0px));bottom:calc(50px + env(safe-area-inset-bottom,0px));left:6px;right:6px;width:auto}
  .drawer .panel-head{padding:10px 12px}
  .pp-head{padding:16px 14px;gap:10px}
  .pp-head h2{font-size:24px}
  .asi-big .num{font-size:40px}
  .pp-sec{padding:14px}
  .stamps{gap:8px}
  .stamp{min-width:0;flex:1 1 28%;padding:8px 6px}
  .stamp.denied{flex:1 1 100%}

  /* pages */
  .page{top:calc(54px + env(safe-area-inset-top,0px));bottom:calc(50px + env(safe-area-inset-bottom,0px));padding:16px 14px 28px}
  .page-inner{gap:16px}
  .lens{aspect-ratio:4/3}
  .stage{height:340px}
}

/* sources: each row becomes a small card */
@media (max-width:640px){
  .src-table thead{display:none}
  .src-table,.src-table tbody,.src-table tr,.src-table td{display:block;width:100%}
  .src-table tr{padding:12px 14px;border-bottom:1px solid var(--hair)}
  .src-table td{border:0;padding:2px 0}
  .src-table td.nm{font-weight:600;font-size:14.5px;padding-bottom:6px}
  .src-table td[data-l]{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;font-size:13px}
  .src-table td[data-l]::before{content:attr(data-l);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:2px}
  .src-table .use{white-space:normal}
}

/* narrow phones: compact mission switch so the header fits on one line */
@media (max-width:520px){
  .hud-top{gap:8px}
  .hud-right{gap:6px}
  .mission{padding:2px;gap:1px}
  .mission button{padding:5px 6px;font-size:10px;letter-spacing:.05em;gap:5px;line-height:1.15;text-align:left}
  .mission button i{width:6px;height:6px}
  .mock-flag{font-size:8.5px;letter-spacing:.08em;padding:2px 6px}
}

/* phone held sideways (short and wide): compact title on the left, site list as a right-hand panel */
@media (max-height:500px) and (orientation:landscape){
  .crumbs,.keys,.fx-btn{display:none}
  .hud-top{padding-top:calc(8px + env(safe-area-inset-top,0px));padding-bottom:6px}
  .hud-bottom{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
  .orbit-copy{top:calc(56px + env(safe-area-inset-top,0px));bottom:auto;transform:none;width:min(430px,52vw);gap:9px}
  .orbit-copy .eyebrow,.orbit-copy .stats{display:none}
  .orbit-copy h1{font-size:34px}
  .orbit-copy h1 span{display:inline-block;margin-right:.22em}
  .orbit-tag{font-size:15px}
  .cta .btn{padding:9px 12px;font-size:11px}
  .rail.right{top:calc(100px + env(safe-area-inset-top,0px));bottom:calc(46px + env(safe-area-inset-bottom,0px));left:auto;right:8px;width:min(340px,42vw);max-height:none}
  .rail.right .panel{max-height:100%}
  .brief{top:calc(52px + env(safe-area-inset-top,0px))}
  .dossier{top:calc(56px + env(safe-area-inset-top,0px));bottom:calc(46px + env(safe-area-inset-bottom,0px));left:8px;right:auto;width:min(380px,48vw);max-height:none}
}

/* VR view on a phone: message strip on top, report card above the button rows */
@media (max-width:760px){
  .vr-brief{top:calc(54px + env(safe-area-inset-top,0px));left:8px;right:8px;width:auto}
  .vr-brief .panel-head{display:none}
  .vr-brief .panel-body{padding:10px 12px}
  .vr-msg{font-size:12.5px;min-height:0}
  .vr-src{display:none}
  .vr-card{top:auto;bottom:calc(222px + env(safe-area-inset-bottom,0px));left:8px;right:8px;width:auto;max-height:30vh}
  .vr-card-head b{font-size:20px}
  .vr-bar{bottom:calc(50px + env(safe-area-inset-bottom,0px));width:calc(100vw - 16px)}
  .vr-row{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;width:100%}
  .vr-row::-webkit-scrollbar{display:none}
  .vr-row .btn{flex:none}
  .vr-enter{bottom:auto;top:calc(150px + env(safe-area-inset-top,0px));right:8px;padding:8px 12px}
}
@media (max-width:760px){
  .vr-caption{left:8px;right:8px;width:auto;bottom:calc(170px + env(safe-area-inset-bottom,0px));max-height:38vh;overflow:auto;padding:12px 14px}
  .vr-caption h3{font-size:16px}
}