/* 九华山三维导览 · phone layouts. Loaded on every screen, so every rule sits inside a phone query that mirrors
   app.js compactViewport(): portrait (max-width 820) gets bottom sheets, landscape phones get right-hand side sheets.
   At rest a phone shows one view-and-guesthouse menu, a small tool rail and one dock; everything else is summoned. */

/* ---------- both phone orientations ---------- */
@media (max-width:820px),(max-width:960px) and (orientation:landscape) and (max-height:520px){
 :root{--pad:16px}
 #app,#stage{height:100dvh;max-height:100dvh}
 .search input{font-size:16px} /* iOS does not zoom into 16px fields */
 .btn .full{display:none}.btn .short{display:inline}
 #zoom-in,#zoom-out{display:none} /* pinch covers zoom */
 /* Scale the filing text and its backing together; desktop keeps its original size. */
 .site-filing a{transform:scale(.82);transform-origin:center bottom}
 /* A single status pill sits above the dock; data credits live in the guide. */
 .map-meta{flex-wrap:nowrap;gap:10px}
 .status{flex:0 1 auto;height:26px;padding:0 10px;font-size:11.5px}
 .panel-head h2{font-size:19px}
 .panel-tabs button{font-size:15px}
 .place-item strong{font-size:15.5px}
 .card-head h2{font-size:24px}
 .info-card p.lead{font-size:15px}
 .guide-rows{grid-template-columns:minmax(0,1fr);gap:0}
 .guide-rows dd+dt{margin-top:10px}
 .rs-stop button{min-height:44px}
 /* route bar: 44px hit areas; it steps aside while a sheet is up (display:none keeps it out of app.js framing) */
 .route-hud .rh-play::before,.route-hud .rh-close::before,.rh-list::before{content:"";position:absolute;inset:-2px}
 body.panel-open .route-hud,body.card-open .route-hud{display:none}
 .place-list,.route-list,.route-detail,.guide{padding-bottom:calc(24px + var(--sb))}
}

/* ---------- portrait phones (and narrow windows): bottom sheets ---------- */
@media (max-width:820px) and (orientation:portrait),(max-width:820px) and (min-height:521px){
 /* Six entries share one row, with more room for the guesthouse name. */
 .viewbar{top:calc(10px + var(--st));left:12px;right:12px;height:40px}
 .viewbar button{flex:1;min-width:0;padding:0}
 .viewbar #featured-cta{flex:1.7}
 /* tool rail */
 .rail{top:calc(62px + var(--st));right:12px}
 /* dock */
 .dock{left:12px;right:12px;bottom:calc(28px + var(--sb));height:56px;display:flex;align-items:center;gap:4px;padding:0 6px;border-radius:20px}
 .dock-search{flex:1;height:44px;padding:0 12px}
 .dock-sep{margin:0 2px}
 .dock-btn{flex:none;flex-direction:column;gap:3px;min-width:52px;height:48px;padding:0 4px;font-size:11px;line-height:1.2}
 /* status, just above the dock */
 .map-meta{left:12px;right:12px;bottom:calc(96px + var(--sb));justify-content:space-between}
 .flight-hint{top:calc(12px + var(--st));left:12px;right:12px}
 .route-hud{top:calc(10px + var(--st));left:12px;right:12px}
 /* below the route bar even when its status takes two lines (paused, a change of transport, or the start hint): 10+130+8 */
 body.route-on .flight-hint{top:calc(148px + var(--st))}
 #toast{bottom:calc(148px + var(--sb))}
 /* the gesture tour's free area: below the view switcher, left of the rail column, above the credits row */
 .gesture-tour{padding:calc(58px + var(--st)) 68px calc(116px + var(--sb)) 12px}

 /* sheets: #panel and #card share geometry, grip and motion */
 .directory,.info-card{position:absolute;left:0;right:0;bottom:0;border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--hi),var(--sh-3)}
 .directory{height:min(calc(var(--visible-height,100dvh) * .62),560px);transition:transform .46s var(--ease-sheet),height .46s var(--ease-sheet),visibility 0s}
 .directory.closed{transform:translateY(calc(100% + 32px));visibility:hidden;pointer-events:none;transition:transform .28s var(--ease-in),height .46s var(--ease-sheet),visibility 0s linear .28s}
 .info-card{height:min(calc(var(--visible-height,100dvh) * .62),560px);transform:translateY(calc(100% + 32px));pointer-events:none;transition:transform .28s var(--ease-in),height .46s var(--ease-sheet)}
 .info-card.show{transform:none;pointer-events:auto;transition:transform .46s var(--ease-sheet),height .46s var(--ease-sheet)}
 .directory.expanded,.info-card.expanded{height:calc(var(--visible-height,100dvh) - var(--st) - 16px)}
 body.keyboard-open .directory{bottom:var(--keyboard-inset,0px);height:calc(var(--visible-height,100dvh) - var(--st) - 16px);transition:none}
 /* the grip strip spans the sheet's whole top edge (sheet-drag.js treats the top 24px as the grip); the pill sits centred */
 .sheet-grip{display:block;position:relative;flex:none;align-self:stretch;height:20px;margin:0 0 -4px}
 .sheet-grip::before,.settings-wrap::before{content:"";position:absolute;top:8px;left:50%;width:36px;height:4.5px;margin-left:-18px;border-radius:3px;background:var(--line-2)}
 /* The card scrolls as a whole. Its grip has a sticky 24px hit area, with no layout space, above the photos or text.
    A pseudo-element alone cannot own touch-action, so it would stop dragging once the header had scrolled away. */
 .info-card>.sheet-grip{position:sticky;top:0;z-index:2;order:-2;height:24px;margin:0 0 -24px;touch-action:none}
 .info-card>.sheet-grip::before{background:rgba(28,42,37,.22);box-shadow:0 0 0 1px rgba(255,255,255,.4)}
 .info-card:has(>.card-hero)>.sheet-grip::before{background:rgba(255,255,255,.88);box-shadow:0 1px 3px rgba(0,0,0,.3)}
 .card-hero{height:clamp(140px,calc(var(--visible-height,100dvh) * .22),196px)}
 /* drag handles for sheet-drag.js */
 .sheet-grip,.panel-head,.card-head,.settings-head{touch-action:none}
 .panel-head{padding:0 12px 4px var(--pad)}
 .search{margin-top:14px}
 .info-card>.close:first-child+.card-head{padding-top:28px}
 .card-content{padding-bottom:calc(24px + var(--sb))}
 .card-content>.card-actions{bottom:calc(-24px - var(--sb));margin-bottom:calc(-24px - var(--sb));padding-bottom:calc(24px + var(--sb))}

 /* A sheet is up, or on its way (map-chrome-hidden also covers a card's camera flight, the photo viewer and the data
    dialog): the dock slides away, the rail and credits step aside, and they stay away until the map is free again. */
 body.panel-open .dock,body.card-open .dock,body.settings-open .dock,body.route-on .dock,body.map-chrome-hidden .dock{transform:translateY(calc(100% + 24px));opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .26s var(--ease-in),opacity .26s var(--ease-in),visibility 0s linear .26s}
 body.panel-open .map-meta,body.card-open .map-meta,body.settings-open .map-meta,body.map-chrome-hidden:not(.route-on) .map-meta{opacity:0;transform:translateY(8px);visibility:hidden;
  transition:opacity .26s var(--ease-in),transform .26s var(--ease-in),visibility 0s linear .26s}
 body.panel-open .rail>.map-actions,body.panel-open #settings-toggle,body.panel-open #help-open,
 body.card-open .rail>.map-actions,body.card-open #settings-toggle,body.card-open #help-open,
 body.map-chrome-hidden:not(.route-on):not(.settings-open) .rail>.map-actions{opacity:0;transform:translateX(12px);visibility:hidden;pointer-events:none;
  transition:opacity .26s var(--ease-in),transform .26s var(--ease-in),visibility 0s linear .26s}
 /* A route is on and the sheet is down: the route bar owns the top, so the compass capsule slides down below it and the
    credits row slides down into the dock's place. Both move by transform, so neither jumps when the route closes. */
 body.route-on .rail>.map-actions{transform:translateY(90px)}
 body.route-on.panel-open .rail>.map-actions,body.route-on.card-open .rail>.map-actions{transform:translate(12px,90px)}
 body.route-on .map-meta{transform:translateY(68px)}
 body.route-on.panel-open .map-meta,body.route-on.card-open .map-meta,body.route-on.settings-open .map-meta{transform:translateY(76px)}

 /* layers & terrain: a bottom sheet of the same paper */
 .settings-wrap{position:fixed;left:0;right:0;bottom:0;max-height:calc(var(--visible-height,100dvh) - var(--st) - 16px);overflow-y:auto;overscroll-behavior:contain;
  padding:12px var(--pad) calc(12px + var(--sb));border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--hi),var(--sh-3);
  transition:transform .42s var(--ease-sheet),visibility 0s}
 .settings.collapsed .settings-wrap{transform:translateY(calc(100% + 32px));visibility:hidden;pointer-events:none;transition:transform .22s var(--ease-in),visibility 0s linear .22s}
 .settings-head{padding:12px 0}
 .switch{min-height:52px}
 .height-control{padding:14px 0 4px}

 /* data dialog: a bottom sheet */
 dialog{width:100%;max-width:100%;max-height:86%;margin:auto 0 0;border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--hi),var(--sh-3)}
 dialog[open]{animation:sheetUp .42s var(--ease-sheet)}
 dialog.closing{animation:sheetDown .19s var(--ease-in) forwards}
 .dialog-head{padding:20px 12px 12px var(--pad)}
 #data-content{padding:0 var(--pad) calc(24px + var(--sb))}
 #data-content table,#data-content tbody,#data-content tr,#data-content td{display:block;width:auto}
 #data-content tr:first-child{display:none} /* column headers */
 #data-content tr{padding:12px 0;border-bottom:1px solid var(--line)}
 #data-content td{padding:0;border:0}
 #data-content td:first-child{width:auto;margin-bottom:4px}
}
@media (max-width:820px) and (max-height:640px) and (orientation:portrait){
 .directory,.info-card{height:min(calc(var(--visible-height,100dvh) * .66),560px)}
}
@media (max-width:420px){
 .dock-more{display:none}
}
/* narrow phones: the route bar gives its title and status the room (the next stop must stay readable) */
@media (max-width:380px){
 .rh-head{gap:6px}
 .rh-dot{margin:0 1px 0 2px}
 .rh-list{padding:0 10px;font-size:13px}
 .rh-text b{letter-spacing:.02em}
}
@media (max-width:350px){
 .viewbar button{font-size:12.5px}
}

/* ---------- landscape phones: right-hand side sheets ---------- */
@media (max-width:960px) and (orientation:landscape) and (max-height:520px){
 :root{--dock-w:min(360px,calc(50vw - 24px))}
 .viewbar{top:calc(8px + var(--st));left:calc(8px + var(--sl));height:38px}
 .viewbar button{padding:0 12px;font-size:13px}
 /* the rail sits at the right edge, centred; the box spans the height but lets map gestures through */
 .rail{top:0;bottom:0;right:calc(8px + var(--sr));justify-content:center;pointer-events:none}
 .rail>*{pointer-events:auto}
 .dock{left:calc(8px + var(--sl));bottom:calc(28px + var(--sb));width:var(--dock-w);height:52px;display:flex;align-items:center;gap:4px;padding:0 6px;border-radius:18px}
 .dock-search{flex:1;height:40px;padding:0 12px}
 .dock-sep{margin:0 2px}
 .dock-btn{flex:none;flex-direction:column;gap:2px;min-width:52px;height:44px;padding:0 4px;font-size:11px;line-height:1.2}
 .dock-more{display:none}
 .map-meta{left:calc(8px + var(--sl));width:var(--dock-w);bottom:calc(88px + var(--sb));justify-content:space-between}
 .flight-hint{top:calc(8px + var(--st));left:calc(8px + var(--sl));right:calc(60px + var(--sr))}
 .route-hud{top:calc(8px + var(--st));left:calc(8px + var(--sl));right:calc(60px + var(--sr));max-width:640px;margin:0 auto;padding:8px 10px;gap:6px}
 body.route-on .flight-hint{top:calc(116px + var(--st))}
 #toast{top:calc(8px + var(--st));bottom:auto;transform:translateY(-10px)}

 .directory,.info-card{position:absolute;top:calc(8px + var(--st));right:calc(8px + var(--sr));bottom:calc(8px + var(--sb));width:min(380px,50vw);border-radius:20px;box-shadow:var(--hi),var(--sh-4)}
 .directory{transition:transform .46s var(--ease-sheet),visibility 0s}
 .directory.closed{transform:translateX(calc(100% + 16px + var(--sr)));visibility:hidden;pointer-events:none;transition:transform .28s var(--ease-in),visibility 0s linear .28s}
 .info-card{transform:translateX(calc(100% + 16px + var(--sr)));pointer-events:none;transition:transform .28s var(--ease-in)}
 .info-card.show{transform:none;pointer-events:auto;transition:transform .46s var(--ease-sheet)}
 /* a 374px side sheet: tighter fixed parts leave the list most of the height */
 .panel-head{padding:6px 8px 0 var(--pad)}
 .panel-tabs button{height:38px}
 .search{height:40px;margin-top:8px}
 .categories{margin-top:4px}
 .list-summary{display:none}
 .card-hero{height:clamp(112px,33vh,150px)}
 .card-head h2{font-size:22px}

 body.panel-open .rail>*,body.card-open .rail>*,
 body.map-chrome-hidden:not(.route-on):not(.settings-open) .rail>*{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .26s var(--ease-in),visibility 0s linear .26s}
 body.route-on .dock{transform:translateY(calc(100% + 24px));opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .26s var(--ease-in),opacity .26s var(--ease-in),visibility 0s linear .26s}
 body.route-on .map-meta{bottom:calc(28px + var(--sb))}

 /* layers & terrain: a panel beside the rail, so its toggle stays in reach */
 .settings-wrap{position:fixed;top:calc(8px + var(--st));right:calc(60px + var(--sr));width:min(320px,calc(100vw - 136px));max-height:calc(100% - 16px - var(--st) - var(--sb));
  overflow-y:auto;overscroll-behavior:contain;padding:0 16px 12px;border-radius:20px;box-shadow:var(--hi),var(--sh-4);transform-origin:right center;
  transition:opacity .24s var(--ease-out),transform .24s var(--ease-out),visibility 0s}
 .settings.collapsed .settings-wrap{opacity:0;transform:translateX(16px);visibility:hidden;pointer-events:none;transition:opacity .22s var(--ease-in),transform .22s var(--ease-in),visibility 0s linear .22s}

 /* the tour card sits in the open map between the dock column and the rail */
 .gesture-tour{padding:calc(8px + var(--st)) calc(60px + var(--sr)) calc(8px + var(--sb)) calc(var(--dock-w) + 24px + var(--sl))}
 .tour-card{width:min(300px,100%);padding:14px 16px 10px}
 .tour-art{width:120px;height:83px;margin-bottom:6px}
 .tour-progress{margin:10px 0 6px}
 .tour-skip{margin-top:6px}

 dialog{width:min(640px,calc(100vw - 32px));max-width:640px;max-height:calc(100% - 16px);border-radius:20px}
 dialog[open]{animation:popIn .3s var(--ease-out)}
 dialog.closing{animation:popOut .19s var(--ease-in) forwards}
 .dialog-head{padding:18px 16px 10px 24px}
 #data-content{padding:0 24px calc(20px + var(--sb))}
}