/* Mobile controls share two reserved bottom rows and one overlay slot. */
.floor-head,.scene-head,.product-head{display:none}
#floors .f small{font:inherit}
body.compact{--dock-bottom:max(12px,env(safe-area-inset-bottom));--sheet-bottom:calc(var(--dock-bottom) + 70px)}
body.compact #nav{left:0;right:0;bottom:0;top:auto;transform:none;
  display:flex;flex-wrap:nowrap;gap:4px;min-height:54px;
  padding:8px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x;
  scrollbar-width:thin;scrollbar-color:rgba(232,184,120,.5) transparent;
  background:#111418;border:0;border-top:1px solid var(--line);border-radius:0;z-index:24;text-shadow:none}
body.compact #nav a,body.compact #nav button{display:flex;align-items:center;justify-content:center;
  flex:1 0 84px;min-height:44px;padding:8px 10px;font-size:12px;letter-spacing:.03em;white-space:nowrap;touch-action:pan-x}
body.compact #nav .on{color:var(--warm);background:rgba(232,184,120,.07)}
body.compact #nav .on::after{left:20%;right:20%;bottom:2px}
body.compact.timeopen #nav{opacity:1;pointer-events:auto}
body.compact #footL{left:20px;bottom:calc(var(--sheet-bottom) + 5px);z-index:10}
body.compact #certs{gap:12px;margin:0;opacity:.8}
body.compact #certs .tall{height:48px}
body.compact #certs .stack{flex-direction:column;gap:7px;align-items:flex-start}
body.compact #certs .stack img{height:16px;max-width:58px}
/* 語系接在 B Corp 標下面，跟認證同一欄：底部因此是三段清楚的分工 ——
   左上認證、左下語系、右下時間，不再有東西浮在畫面中間。
   搬過來一定要把膠囊底拿掉：認證標只有陰影沒有底，旁邊擺一塊半透明
   深色方塊會變成整個畫面最重的東西。改成純文字加陰影就沉進那一欄。 */
body.compact #footL{bottom:calc(var(--sheet-bottom) + 46px)}
body.compact #lang{left:20px;right:auto;bottom:calc(var(--sheet-bottom) + 2px);
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;
  text-shadow:0 1px 3px rgba(0,0,0,.75),0 2px 14px rgba(0,0,0,.5)}
body.compact #lang button{padding:5px 10px 5px 0}
body.compact #lang span{padding-right:10px}
body.compact #btab{left:auto;right:16px;bottom:var(--sheet-bottom);transform:none;
  min-width:78px;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:2px}
body.compact #btab.open{bottom:calc(var(--sheet-bottom) + 80px)}
body.compact #btab .lbl{font-size:10px;letter-spacing:.08em}
body.compact #bar{bottom:var(--sheet-bottom);left:16px;width:calc(100% - 32px);
  padding:12px;gap:12px;background:#111418;z-index:22;transform:translateY(calc(100% + 180px))}
body.compact #bar.ready.open{transform:none}
body.compact #bar button,body.compact #speed{min-width:44px;min-height:44px}
body.compact #scrub{min-width:0;min-height:24px;touch-action:pan-x}
body.compact #scrub::-webkit-slider-thumb{width:18px;height:18px}
body.compact #ptab,body.compact #ptab.open{top:78px;right:16px;min-height:44px;
  flex-direction:row;padding:10px 12px;gap:0;border:1px solid var(--line);border-radius:2px;z-index:23}
body.compact #ptab svg{display:none}
body.compact #ptab .lbl{writing-mode:horizontal-tb;font-size:10px;letter-spacing:.08em}
body.compact #panel{top:auto;right:16px;bottom:var(--sheet-bottom);width:calc(100% - 32px);
  max-height:min(54dvh,calc(100dvh - 196px));overflow-y:auto;padding:16px 20px;background:#111418;
  z-index:22;transform:translateY(calc(100% + 180px));backdrop-filter:none}
body.compact #panel.open{transform:none}
body.compact .scene-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;border-bottom:1px solid var(--line)}
body.compact .scene-head h2{font-size:16px;letter-spacing:.02em;color:var(--ink);text-transform:none;margin:0}
body.compact #scene-close,body.compact #floor-close{border:0;background:none;color:var(--dim);
  font:inherit;font-size:12px;padding:10px 0 10px 16px;min-height:44px;cursor:pointer}
body.compact .presets{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
body.compact .presets.views{grid-template-columns:repeat(3,minmax(0,1fr))}
body.compact .presets button{min-height:44px;font-size:11px;padding:8px 4px}
body.compact .chk{min-height:44px;font-size:12px}
body.compact #floors{inset:auto 16px var(--sheet-bottom);height:auto;max-height:min(52dvh,calc(100dvh - 196px));
  max-width:520px;margin:0 auto;overflow-y:auto;background:#111418;border:0;border-top:1px solid var(--warm);
  border-radius:2px;z-index:22;padding:0 20px 8px;transform:none}
body.compact .floor-head{display:flex;align-items:center;justify-content:space-between;padding:12px 0 10px}
body.compact .floor-head span{font-size:9px;letter-spacing:.16em;color:var(--dim)}
body.compact .floor-head h2{font-size:22px;line-height:1.3;font-weight:400;margin:4px 0 0}
body.compact #floors .f{grid-template-columns:32px minmax(0,1fr) auto;gap:10px;
  min-height:50px;padding:10px 0;background:none;border-bottom:0;border-top:1px solid var(--line)}
body.compact #floors .f b{font-size:13px;letter-spacing:.04em}
/* 「外觀」那一列的標籤不是 1F~4F 的兩個字，英文更是 Envelope 一整個字 ——
   第一欄寫死 32px 會讓它壓到說明文字上。這一列改成標籤要多寬給多寬。
   上方那條分隔線本來就把它跟樓層分開了，欄位沒對齊不會看起來像壞掉。 */
body.compact #floors .f.env{grid-template-columns:max-content minmax(0,1fr) auto}
body.compact #floors .f small{display:none}
body.compact #floors .f span{font-size:12px;line-height:1.5}
body.compact #floors .available::after{content:'Enter →';display:block;position:static;
  width:auto;height:auto;background:none;color:var(--warm);font-size:11px;white-space:nowrap}
body.compact #prods{bottom:var(--sheet-bottom);background:#111418;width:calc(100% - 32px);padding:10px;gap:6px;z-index:22}
body.compact #prods button,body.compact #prods .more{min-height:44px;font-size:11px}
body.compact #tapHint{display:none}
body.compact.flooropen #ptab,body.compact.flooropen #btab,body.compact.flooropen #footL,
body.compact.panelopen #btab,body.compact.panelopen #footL,
body.compact.reading #btab,body.compact.reading #footL,
body.compact:has(#prods.show) #ptab,
body.compact:has(#prods.show) #footL,body.compact:has(#prods.show) #btab{visibility:hidden;pointer-events:none}
body.compact.panelopen #clock{opacity:1;pointer-events:auto}
body.compact.reading #aclose{width:44px;height:44px;top:16px;left:auto;right:16px;z-index:25}
body.compact #floor-visit{bottom:var(--dock-bottom);border-radius:2px}
@media(max-height:500px){body.compact #floors,body.compact #panel{max-height:calc(100dvh - 160px)}body.compact #footL{display:none}}
@media(prefers-reduced-motion:reduce){body.compact #floors,body.compact #panel,body.compact #bar{transition:none}}

/* Products follows the same compact sheet as Floors. */
body.compact #prods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:520px;max-height:min(52dvh,calc(100dvh - 196px));overflow-y:auto;
  padding:0 20px 8px;gap:0 16px;border:0;border-top:1px solid var(--warm);border-radius:2px}
body.compact .product-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:12px 0 10px}
body.compact .product-head span{font-size:9px;letter-spacing:.16em;color:var(--dim)}
body.compact .product-head h2{font-size:22px;line-height:1.3;font-weight:400;margin:4px 0 0}
body.compact #prods #product-close{background:none;border:0;color:var(--dim);font:inherit;font-size:12px;
  padding:10px 0 10px 16px;min-height:44px;cursor:pointer;letter-spacing:normal}
body.compact #prods button[data-id]{display:flex;align-items:center;justify-content:space-between;gap:4px;
  min-height:50px;padding:10px 0;border:0;border-top:1px solid var(--line);border-radius:0;
  font-size:12px;letter-spacing:.02em;text-align:left}
body.compact #prods button[data-id].on{color:var(--warm)}
body.compact #prods button[data-id].on::after{content:'Selected';font-size:9px;letter-spacing:0}
body.compact #prods .more{grid-column:1/-1;margin:0;padding:12px 0;border-left:0;border-top:1px solid var(--line);font-size:12px}
@media(max-height:500px){body.compact #prods{max-height:calc(100dvh - 160px)}}

#product-reopen{display:none}
body.compact.showcase #prods{bottom:var(--dock-bottom)}
body.compact.product-collapsed #prods{opacity:0;pointer-events:none;transform:translate(-50%,calc(100% + 100px))}
body.compact.product-collapsed #product-reopen:not([hidden]){display:flex;align-items:center;justify-content:center;
  position:fixed;bottom:var(--dock-bottom);left:50%;transform:translateX(-50%);z-index:24;
  min-width:144px;min-height:44px;padding:12px 20px;background:#111418;border:1px solid var(--line);
  border-radius:2px;color:var(--ink);font:inherit;font-size:12px;letter-spacing:.04em;cursor:pointer}

/* About is a readable, native-scrolling document on every compact viewport. */
body.compact #about{inset:0;height:100dvh;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;
  scroll-snap-type:none;scroll-behavior:auto;overscroll-behavior-y:contain}
body.compact #about .inner{padding:84px 24px max(40px,env(safe-area-inset-bottom))}
body.compact #about section{min-height:0;height:auto;opacity:1;scroll-snap-align:none;transition:none}
body.compact #about p,body.compact #about ol span{font-size:14px;line-height:1.85;overflow-wrap:anywhere}
body.compact.reading #nav,body.compact.reading #clock,body.compact.reading #ptab,
body.compact.reading #btab,body.compact.reading #footL{visibility:hidden;pointer-events:none}

/* 1F: leave the model visible; reading is an explicit second layer. */
#visit-expand{display:none}
body.compact.inside #floor-visit{left:0;right:0;bottom:0;width:100%;max-height:none;
  padding:6px max(16px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  overflow:visible;border-radius:0;display:flex;flex-direction:column}
body.compact.visiting .visit-actions{position:fixed;top:max(20px,env(safe-area-inset-top));
  right:max(20px,env(safe-area-inset-right));display:flex;flex-direction:column;align-items:stretch;gap:4px;
  background:none;padding:0;max-width:180px}
body.compact.visiting #visit-back{width:auto;min-height:44px;padding:0 12px;font-size:12px;font-weight:500;
  color:#303637;background:#f0f1ed;border:0;border-radius:2px;white-space:nowrap}
body.compact.visiting #visit-reset{min-height:44px;padding:0 12px;text-align:left;font-size:11px;
  color:#565e5f;background:#e5e8e4;border:0;border-radius:2px}
body.compact.visiting #visit-reset::before{content:'↺';margin-right:7px;font-size:15px}
body.compact.visiting .visit-actions button:active{background:#d2d7d2}
body.compact.visiting .visit-actions button:focus-visible{outline:2px solid #424d4c;outline-offset:3px}
body.compact.inside .visit-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
body.compact.inside #visit-title{font-size:16px;line-height:1.3;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.compact.inside #visit-expand{display:block;flex-shrink:0;min-height:44px;padding:0 4px;background:none;border:0;
  color:var(--warm);font:inherit;font-size:12px;cursor:pointer}
body.compact.inside #visit-content{display:none}
body.compact.inside #floor-visit.info-open #visit-content{display:block;max-height:max(80px,calc(100dvh - 270px));overflow-y:auto;
  overscroll-behavior:contain;touch-action:pan-y;padding:0 0 8px}
body.compact.inside #visit-copy{display:block;font-size:13px}
body.compact.inside #visit-status{margin:8px 0;font-size:9px}
body.compact.inside #visit-stops{margin-top:0;flex-shrink:0;scrollbar-width:thin;touch-action:pan-x}
body.compact.inside #visit-stops button{min-height:48px;padding:10px 8px;flex:0 0 auto;min-width:90px}

.visit-back-short{display:none}
body.compact .visit-back-full{display:none}
body.compact .visit-back-short{display:inline}

#visit-equipment-angles button[hidden]{display:none}

/* ── 綠建築特點：手機可以收起來 ──
   這片面板在手機上吃掉將近一半畫面，但它的重點正好是要看建築本身 ——
   點了落地窗印網膜卻只看得到屋頂，功能等於白做。
   收起來只留標題列（含 Close），3D 就拿回整個畫面。

   把手做成面板上緣居中的方塊，跟 #ptab / #btab 同一個語彙 ——
   這個網站已經用這個形狀教過使用者「這是可以拉開收起的東西」，
   再發明一個新的只會多一次學習。

   為什麼不像產品那樣整片收掉：那三個晶片是切換特點用的導覽，
   整片消失就沒辦法換下一項了。留著標題列，收合狀態也看得出開著哪一項。 */
body.compact #envelope{overflow:visible}
body.compact #env-collapse{display:flex;align-items:center;justify-content:center;
  position:absolute;left:50%;top:-29px;transform:translateX(-50%);
  /* 96 是照 #btab 抄的，但那顆裡面有文字，這顆只有一個箭頭 ——
     同寬就顯得空。56 剛好包住箭頭又還是明顯的一塊。 */
  min-width:56px;height:29px;padding:0;
  /* 底色跟面板一模一樣（--panel 是 .62 的半透明，會比面板淺一階，
     讀起來像兩塊不同的東西）。把手是面板的一部分，不是獨立的鈕。 */
  background:rgba(12,14,19,.93);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line);border-bottom:0;border-radius:2px 2px 0 0;
  color:var(--dim);cursor:pointer}
/* 可視高度 29px 是為了不吃掉畫面，但觸擊區要 44 —— 往上補一塊透明的 */
body.compact #env-collapse::after{content:'';position:absolute;left:0;right:0;top:-15px;height:15px}
body.compact #env-collapse svg{transition:transform .3s cubic-bezier(.4,0,.2,1)}
body.compact #env-collapse[aria-expanded="false"] svg{transform:rotate(180deg)}
body.compact #env-body{overflow:hidden}
body.compact.env-collapsed #env-body{display:none}