/*
 * 馬列機場航廈動線地圖。外框、側欄、縮放鈕與圖例沿用 transfer-route-map.css 的 .ml-trmap 版型；
 * 平面圖本身的顏色寫在 SVG presentation attributes（tools/build-airport-terminal-map.mjs），這裡只管互動狀態與側欄內容。
 */
.ml-atmap {
  --at-route: #e03b2f;
  --at-t1: #c9a24b;
  --at-terminal: #38a6a5;
  --at-runway: #56646c;
}

.ml-atmap__route { display: none; }
.ml-atmap__route.is-active { display: inline; }

/* 選線時未經過的航廈與標籤淡出，讓動線更清楚。 */
.ml-atmap [data-routes] { transition: opacity 0.2s ease; }
.ml-atmap.has-route [data-routes].is-muted { opacity: 0.3; }

.ml-atmap .ml-trmap__code { font-size: 0.85rem; letter-spacing: 0.04em; }
.ml-atmap__intro { margin: 0; padding: 1.5rem; color: var(--c-gray); font-size: var(--fs-sm); line-height: 1.75; }
.ml-atmap__intro[hidden] { display: none; }

.ml-atmap__steps { margin: 0; padding: 0; list-style: none; counter-reset: at-step; }
.ml-atmap__steps li {
  position: relative;
  padding: 0 0 0.7rem 2.1rem;
  color: var(--c-gray);
  font-size: var(--fs-sm);
  line-height: 1.65;
  counter-increment: at-step;
}
.ml-atmap__steps li:last-child { padding-bottom: 0; }
.ml-atmap__steps li::before {
  content: counter(at-step);
  position: absolute;
  top: 0.15rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--at-route);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}
.ml-atmap__steps strong { color: var(--c-text); }

.ml-atmap .ml-trmap__legend .is-runway { width: 1.6rem; height: 0.4rem; border-radius: 2px; background: var(--at-runway); }
.ml-atmap .ml-trmap__legend .is-branch { width: 1.6rem; height: 0; border-top: 3px dashed var(--at-route); border-radius: 0; background: none; }

/* 第一航廈 1 樓出境層：平時隱藏，選出境動線時蓋在地面層上。 */
.ml-atmap__zone[data-level="1"] { display: none; }
.ml-atmap.is-departure .ml-atmap__zone[data-level="1"] { display: inline; }

.ml-atmap .ml-trmap__legend .is-arrival-zone { border-radius: 3px; background: #bfe2f2; }
.ml-atmap .ml-trmap__legend .is-departure-zone { border-radius: 3px; background: #f5d9a3; }
.ml-atmap [data-atmap-action="toggle3d"] { font-size: 0.85rem; font-weight: 800; }

/* 3D：Three.js 畫布與 HTML 疊字（地名、分區、步驟編號）逐幀投影到同一位置。 */
.ml-atmap__stage,
.ml-atmap__overlay { position: absolute; inset: 0; }
.ml-atmap__stage { background: #3b82bd; touch-action: none; }
.ml-atmap__stage canvas { display: block; width: 100%; height: 100%; }
.ml-atmap__stage:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.ml-atmap__overlay { z-index: 1; overflow: hidden; pointer-events: none; }
.ml-atmap__stage[hidden],
.ml-atmap__overlay[hidden],
.ml-atmap__overlay [hidden] { display: none !important; }
.ml-atmap__tag {
  position: absolute;
  top: 0;
  left: 0;
  color: #173042;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff;
  transition: opacity 0.2s ease;
}
.ml-atmap__tag.is-terminal { font-size: 0.95rem; font-weight: 800; }
.ml-atmap__tag.is-minor,
.ml-atmap__tag.is-road { color: #4f6470; font-size: 0.7rem; }
.ml-atmap__tag.is-runway,
.ml-atmap__tag.is-water,
.ml-atmap__tag.is-place { color: #fff; text-shadow: 0 1px 3px rgba(12, 60, 92, 0.85); }
.ml-atmap__tag.is-zone {
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1px 3px rgba(19, 42, 56, 0.25);
  font-size: 0.66rem;
  text-shadow: none;
}
.ml-atmap__tag.is-muted { opacity: 0.3; }
.ml-atmap__badge {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--at-route);
  box-shadow: 0 2px 6px rgba(19, 42, 56, 0.35);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}

/* 互連機場島與胡魯馬列地圖：與 /maldives-map/「轉機地圖」同款淡藍膠囊；外層 .ml-trmap__float 不吃滑鼠，按鈕自己開回來。 */
.ml-atmap__maplink {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.55rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid rgba(12, 92, 132, 0.2);
  border-radius: 999px;
  background: rgba(218, 240, 252, 0.92);
  box-shadow: 0 3px 12px rgba(7, 48, 66, 0.14);
  color: #0c5c84;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  pointer-events: auto;
  backdrop-filter: blur(4px);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ml-atmap__maplink:hover { border-color: rgba(12, 92, 132, 0.42); background: rgba(218, 240, 252, 1); }
.ml-atmap__maplink:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ml-atmap__maplink-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 50%; }
.ml-atmap__maplink-icon svg { width: 9px; height: 9px; fill: currentColor; }

/* 2D 房間名稱只在拉近（≥2.4 倍）時出現；此時地面層大分區名稱讓位給房間名稱。 */
.ml-atmap__room-label { display: none; }
.ml-atmap.is-detail .ml-atmap__room-label { display: inline; }
/* 出境動線顯示 1 樓出境層時，被蓋住的地面層房間名稱一併隱藏。 */
.ml-atmap.is-departure .ml-atmap__room-label[data-l1] { display: none; }
.ml-atmap.is-detail .ml-atmap__zone[data-level="g"]:not([data-keep]) text,
.ml-atmap.is-detail .ml-atmap__part { display: none; }

/* 側欄步驟可點：放大到該步驟位置。 */
.ml-atmap__stepbtn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}
.ml-atmap__stepbtn:hover strong { color: var(--at-route); }
.ml-atmap__stepbtn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 4px; }

/* 3D 樓層切換：只在 3D 模式出現，放在畫布右上。 */
.ml-atmap__levels {
  position: absolute;
  z-index: 4;
  top: 1rem;
  right: 1rem;
  display: flex;
  overflow: hidden;
  border: 1px solid rgba(19, 42, 56, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 20px rgba(19, 42, 56, 0.2);
}
.ml-atmap__levels[hidden] { display: none; }
.ml-atmap__levels button {
  min-width: 2.6rem;
  min-height: 2.4rem;
  padding: 0 0.6rem;
  border: 0;
  border-right: 1px solid var(--c-gray-300);
  background: transparent;
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}
.ml-atmap__levels button:last-child { border-right: 0; }
.ml-atmap__levels button[aria-pressed="true"] { background: var(--c-accent-700, #0c5c84); color: #fff; }
.ml-atmap__levels button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -3px; }
.ml-atmap__tag.is-floor {
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(23, 48, 66, 0.82);
  color: #fff;
  font-size: 0.68rem;
  text-shadow: none;
}
.ml-atmap__tag.is-lift { background: rgba(63, 95, 115, 0.9); color: #fff; }

/* 平面圖約 5:4，窄螢幕改用接近的比例，少留海面空白。 */
@media (max-width: 900px) {
  .ml-atmap .ml-trmap__mapcol { aspect-ratio: 5 / 4; }
}
@media (max-width: 600px) {
  .ml-atmap:not(.ml-trmap--home) .ml-trmap__canvas { aspect-ratio: 5 / 4; }
  .ml-atmap__levels { top: 0.6rem; right: 0.6rem; }
  .ml-atmap__levels button { min-width: 2.2rem; padding: 0 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ml-atmap [data-routes],
  .ml-atmap__tag { transition: none; }
}