/* 綠鬣蜥足跡地圖。只有這一頁用；表單與後台仍然只吃 style.css。
   版面：手機單欄（標題→頁籤→各縣市窗口或地圖→數字→圖例→清單），桌機左欄文字、右邊地圖貼著視窗不動。 */

body.mapview { display: block; padding: 0; }

/* 手機是一般區塊流（標題、標籤列、地圖、內容由上而下），標籤列才能 sticky 貼住整頁；桌機才是 grid（見檔尾）。 */
.shell { max-width: none; width: 100%; }
.shell > * { padding: 0 var(--pad); }
:root { --pad: clamp(1.1rem, 5vw, 2rem); --rail: 30rem; --rail-slim: 4.75rem; }

/* ── 標題 ─────────────────────────────────────────────────── */
.head { padding-top: clamp(1.5rem, 5vw, 3rem); }
.mapview h1 {
  margin: 0; font-size: clamp(2.05rem, 7.2vw, 2.8rem); font-weight: 800;
  line-height: 1.25; letter-spacing: .03em;   /* 一行的中文標題：方正的字不用壓行高、也不縮字距 */
}
/* 標題是回首頁的連結：看起來仍是標題，只有鍵盤聚焦時才露出框 */
.mapview h1 a { color: inherit; text-decoration: none; }
.mapview h1 a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: .2rem; }
.mapview .lede { margin: .65rem 0 1.3rem; color: var(--ink-2); font-size: 1rem; line-height: 1.7; letter-spacing: .02em; max-width: 30rem; text-wrap: balance; }
/* 副標題在手機上一行放不下一整句、又用 text-wrap: balance 對半切，會切在「彙整／出來」中間；詞組各包 .nb（不拆行），只會在詞組之間斷行 */
.mapview .lede .nb { white-space: nowrap; }

/* ── 功能標籤列（nav.tabs，換頁連結）佔標題底下那一格 ── */
.mapview .tabs { margin-bottom: 0; }

/* ── 地圖 ─────────────────────────────────────────────────── */
.stage { padding: 0 !important; position: relative; }
#map { height: min(62svh, 34rem); width: 100%; background: var(--surface);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* 自己的高度，不跟著地圖。讀不到地圖的時候留一大塊灰，是最糟的交代方式。 */
#state {
  display: grid; align-content: center; justify-items: center; gap: .5rem; text-align: center;
  padding: clamp(2.5rem, 9vw, 4rem) 1.5rem; background: var(--surface);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
#state-msg { margin: 0; font-weight: 700; font-size: 1.05rem; }
#state-detail { margin: 0; color: var(--muted); font-size: .92rem; max-width: 24rem; }
#state .spinner {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; margin-bottom: .3rem;
  border: 2px solid var(--line); border-top-color: var(--leaf); animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* style.css 的通用 section 是一張卡片。這一頁的清單自己就有卡片（列），
   再包一層就變成卡中有卡，側欄會顯得很重。 */
.mapview .recent {
  background: none; border: 0; border-radius: 0; box-shadow: none;
}

/* ── 數字 ─────────────────────────────────────────────────── */
.stats { display: flex; flex-wrap: wrap; gap: 1.6rem; padding-top: 1.4rem; padding-bottom: .2rem; }
.stat b { display: block; font-size: 1.75rem; font-weight: 800; line-height: 1.1; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.stat b small { font-size: .52em; font-weight: 700; letter-spacing: 0; margin-left: .15em; color: var(--ink-2); }
.stat span { display: block; margin-top: .15rem; color: var(--muted); font-size: .82rem; letter-spacing: .06em; }

/* ── 針與清單標記 ────────────────────────────────────────────
   地圖上的針是 pins.js 畫的 svg，這裡只給大小；清單前面的標記是同色的圓，圈用 --pin-edge（跟著底圖深淺）。 */
.recent h2 { margin: 0 0 .7rem; font-size: .82rem; letter-spacing: .14em; color: var(--muted); font-weight: 700; }
.pin { width: 24px; height: 29px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.pin svg { display: block; width: 100%; height: 100%; }
/* 預覽針（類別叫 unsent、不叫 preview：style.css 的 .preview 是送出後那張白底預覽卡，同名針會變成一塊白方塊）（上傳照片後依照片定位放的那一支）：還沒送出，所以半透明、外圈是虛線；已公開的通報針是實心實線圈。
   形狀與顏色刻意跟通報針一樣（用藍點會讓人以為自己被追蹤，2026-10-12），只靠「半透明＋虛線」分得開。 */
.pin.unsent { opacity: .72; }
.pin.unsent svg > path { stroke-dasharray: 5 3.5; }
.row .dot { border: 2px solid var(--pin-edge); border-radius: 50%; }

/* ── 最近的通報 ───────────────────────────────────────────── */
.recent { padding-top: 1.4rem; }
#recent { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
#recent li + li { border-top: 1px solid var(--line); }
#recent li { display: block; }
.row {
  width: calc(100% + 1.7rem); margin-inline: -.85rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem;
  padding: .7rem .8rem; border: 1px solid transparent; border-radius: .9rem;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color .16s, transform .16s;
}
.row.static { cursor: default; }
button.row:hover, button.row:focus-visible { border-color: var(--leaf); transform: translateX(2px); }
.empty { padding: .4rem 0 0; }
.empty p { margin: 0 0 .5rem; color: var(--ink-2); font-size: .95rem; }
.empty a { color: var(--ink); }   /* 信箱連結：不要瀏覽器預設的藍紫色，跟頁尾連結一樣用文字色加底線 */
.row[aria-current="true"] { border-color: var(--leaf); box-shadow: 0 0 0 1px var(--leaf) inset; }
.row .dot { width: 1.9rem; height: 1.9rem; margin: 0; display: grid; place-items: center; }
.row .dot img { width: .95rem; height: .95rem; display: block; }
.row .what { font-weight: 700; font-size: .95rem; }
.row .what .new {
  margin-left: .45rem; padding: .05rem .4rem .1rem; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-size: .68rem; letter-spacing: .04em; vertical-align: .08em;
}
/* 待審查：同一顆小標，彈出視窗（永遠白底）與清單（會跟著深淺色）都用琥珀色，跟彈出視窗裡那塊說明同一個色系 */
.tag-pending { margin-left: .45rem; padding: .05rem .4rem .1rem; border-radius: 999px; background: #f5efdc; color: #6b5a1f; border: 1px solid #d9c98f; font-size: .68rem; font-weight: 400; letter-spacing: .04em; white-space: nowrap; vertical-align: .08em; }
.pop .pop-head .tag-pending { margin-left: 0; vertical-align: baseline; }
.pop .pop-head { flex-wrap: wrap; }
.row .sub { display: block; margin-top: .05rem; color: var(--muted); font-size: .82rem; font-weight: 400; }
.row .shot { width: 2.6rem; height: 2.6rem; border-radius: .55rem; object-fit: cover; border: 1px solid var(--line); }
.row .noshot { width: 2.6rem; height: 2.6rem; border-radius: .55rem; background: var(--bg); }

/* ── 頁尾 ─────────────────────────────────────────────────── */
.mapview footer { margin: 0; padding-top: 1.6rem; padding-bottom: calc(clamp(1.5rem, 5vw, 3rem) + env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: .85rem; }
.mapview footer p { margin: 0 0 .4rem; }
.mapview footer a { color: inherit; }

/* ── 彈出視窗。量過了：colorScheme 只換底圖，InfoWindow 的底永遠是白的，
      所以這裡的字色固定深色，不可以跟著深色模式翻過去（翻過去就是白底白字，
      2026-10-10 第一版就是這樣，瀏覽器裡量出 1.1:1 才看見）。 ── */
.pop { font: 400 .95rem/1.6 system-ui, sans-serif; color: #14241c; width: 15rem; max-width: 100%; }   /* 固定寬：每個彈出視窗一樣寬，照片才能填滿、左右對稱（以前 13–15rem 看內容，一張照片左邊小小一塊、右邊空著） */
.pop .pop-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin-bottom: .4rem; padding-right: 1.6rem; }   /* 右邊留給關閉鈕（.gm-ui-hover-effect） */
.pop .ic { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px rgba(13, 21, 17, .28); }   /* 彈出視窗永遠是白底：白色的「其他」要有個邊才看得見 */
.pop .ic img { width: 1.25rem; height: 1.25rem; }
.pop .pop-head b { font-size: 1rem; }
.pop .dates { color: #5d7066; font-size: .85rem; line-height: 1.55; }
.pop .dates span { display: inline-block; min-width: 2.6em; }
.pop .note { margin-top: .5rem; }
/* 照片：一律是「一排、填滿寬度」，一張到四張都一樣的格式（格式塔：相似、連續、對稱；格子寬度均分、間距相同）。
   不排兩層：手機上地圖只有約 320px 高（上面還有凍結的標籤列），彈出視窗比地圖高就會被切掉。一張 5:2、兩張 4:3、三四張正方形。 */
.pop .pics { display: grid; grid-template-columns: repeat(2, 1fr); gap: .3rem; margin-top: .55rem; }
.pop .pics img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .4rem; }
.pop .pics.n1 { grid-template-columns: 1fr; }
.pop .pics.n1 img { aspect-ratio: 5 / 2; }
.pop .pics.n2 img { aspect-ratio: 4 / 3; }
.pop .pics.n3 { grid-template-columns: repeat(3, 1fr); }
.pop .pics.n4 { grid-template-columns: repeat(4, 1fr); gap: .25rem; }
.pop .pending { margin-top: .55rem; padding: .4rem .55rem; border-radius: .5rem; background: #f5efdc; color: #6b5a1f; font-size: .82rem; line-height: 1.45; text-wrap: balance; }

/* ── 彈出視窗的外框（Google 的 InfoWindow 殼）。量到的問題（2026-10-12 擁有者：「上面邊距不一樣看起來很醜」「沒有 x 不知道怎麼關閉」）：
      ① 殼的上方留了一整排 48px 給關閉鈕，左右下只有 12px，所以上緣特別空；
      ② 地圖設了深色（colorScheme），關閉鈕的 X 被畫成白色，落在白底上看不見——鈕其實一直都在。
   現在：四邊同一個內距 16px；關閉鈕改成浮在右上角（不佔一排）、X 用跟字一樣的深色；內容多高殼就多高（Google 預設
   會量一次就鎖死最大高度、再加捲軸，照片晚載入就被切掉）。這幾條要壓過 Google 寫在元素上的 inline style，所以用 !important。 ── */
.gm-style .gm-style-iw-c { padding: 16px !important; max-height: none !important; }
.gm-style .gm-style-iw-d { overflow: visible !important; max-height: none !important; }
/* × 的中心對齊標題列那一行的中心：標題列第一行高 1.9rem（圓圈），所以鈕（32px，× 在正中）的 top 是 .95rem；right 8px 讓 × 本身（16px，鈕內左右各 8px）的右緣落在內容的右緣（殼內距 16px）。 */
.gm-style .gm-style-iw-chr { position: absolute; top: .95rem; right: 8px; height: auto; }
.gm-style .gm-style-iw-chr .gm-ui-hover-effect { width: 32px !important; height: 32px !important; opacity: .75; }
.gm-style .gm-style-iw-chr .gm-ui-hover-effect:hover, .gm-style .gm-style-iw-chr .gm-ui-hover-effect:focus-visible { opacity: 1; }
.gm-style .gm-style-iw-chr .gm-ui-hover-effect > span { width: 16px !important; height: 16px !important; margin: 8px !important; background-color: #14241c !important; }

/* 深色模式：彈出視窗跟著深色（2026-10-12 擁有者：「這展開的資訊沒有 dark/light mode」）。以前的說法「InfoWindow 的底永遠是白的」只對了一半：
   底是 Google 畫的沒錯，但可以用 .gm-style-iw-c 與尖角（.gm-style-iw-tc::after）蓋掉。顏色就是 style.css 深色模式的 --surface／--ink／--muted／--accent 那幾個值
   （寫成字面值，因為 .pop 也用在送出後那張白底預覽卡 .preview 裡，那張卡不能跟著翻）。只改「在 InfoWindow 裡面的 .pop」。 */
@media (prefers-color-scheme: dark) {
  .gm-style .gm-style-iw-c { background: #141f19 !important; }
  .gm-style .gm-style-iw-tc::after { background: #141f19 !important; }
  .gm-style .gm-style-iw-chr .gm-ui-hover-effect > span { background-color: #e9f1ec !important; }
  .gm-style-iw-c .pop { color: #e9f1ec; }
  .gm-style-iw-c .pop .dates { color: #93a79c; }
  .gm-style-iw-c .pop .ic { box-shadow: inset 0 0 0 1.5px rgba(233, 241, 236, .35); }
  .gm-style-iw-c .pop .pending { background: rgba(245, 200, 76, .16); color: #f5c84c; }
}

/* ── 標記進場。一次全部蹦出來很吵，錯開 40ms 才看得出先後。
      動的是我們自己包的 .drop，絕不是 gmp-advanced-marker 本身：那個元素的 transform
      是 Google 用來擺針的位置，一 animate 就把位置蓋掉，針會永遠停在第一格看不見
      （2026-10-10 上線即壞，而且只在「地圖沒有重畫過」的時候才看得出來）。 ── */
.drop { display: block; animation: drop .42s cubic-bezier(.2, .8, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes drop { from { opacity: 0; transform: translateY(-10px) scale(.86); } }


/* 使用者說不要動畫就不要動畫 */
@media (prefers-reduced-motion: reduce) {
  .drop, #state .spinner, .row { animation: none !important; transition: none !important; }
  .row:hover, .row:focus-visible { transform: none; }
}

/* ── 四頁共用的內容區 ──
   標題區、標籤列、地圖留在原地，換標籤時 nav.js 只換 .work（數字、圖例、清單、表單、規範、機關、頁尾都在裡面）。
   手機版地圖固定一個高度：換標籤時地圖不能跟著變大變小。 */
.work { padding-top: 1.5rem; }
/* 標籤線到第一行內容的距離只由上面這一個 padding-top 決定；各頁第一個區塊自己的 padding／margin 歸零，
   不然 .stats、.flat section、規範的 lede 各加一點，四頁就各差一截（2026-10-11 量到桌機 39／45／52／64px）。 */
.work > :first-child { margin-top: 0; padding-top: 0; }
.work > form > section:first-child { padding-top: 0; }
.work > .stats:first-child { padding-top: .45rem; }   /* 大字數字的字框比小標題高，補回去才跟其他頁離標籤線一樣遠 */
.work > section:first-child > h2:first-child { margin-top: 0; }
/* 第一顆標籤的字跟標題、內容同一條左緣：往左退它自己的內距（底線仍畫在整顆標籤底下） */
nav.tabs a:first-of-type { margin-left: -.5rem; }
/* 圖例與最近通報是頁面的一段，不是卡片（全站 section 預設是卡片，這兩段沒蓋掉，字比別的內容縮進約 21px） */
.recent { background: none; border: 0; box-shadow: none; border-radius: 0; padding-inline: 0; }
@media (max-width: 63.99rem) {
  #map { height: min(45svh, 30rem); }
  .shell.frozen #map { height: min(38svh, 22rem); }   /* 足跡地圖頁：地圖、數字、標題都凍結，地圖再高清單就沒地方了；要大的用「放大地圖」 */
  #state { padding-block: 1.5rem; }
  /* 標籤列凍結在視窗上緣：內容捲動時還知道自己在哪個功能。標題區太高，不凍結，捲走即可。 */
  .mapview .tabs { position: sticky; top: 0; z-index: 5; background: var(--bg); margin: 0; }
  /* 足跡地圖（freeze.js 在有 .stats 的那一頁幫 .shell 加 frozen）：地圖、三個數字、「最近的通報」標題也凍結，只有清單捲。
     其他四頁的地圖格不動。每一塊的 top 是上面各塊的高度加總，高度由 freeze.js 量成變數。 */
  .shell.frozen .stage { position: sticky; top: var(--tabs-h, 0px); z-index: 4; background: var(--bg); }
  .stats { position: sticky; top: calc(var(--tabs-h, 0px) + var(--stage-h, 0px)); z-index: 3; background: var(--bg); }
  .recent h2 { position: sticky; top: calc(var(--tabs-h, 0px) + var(--stage-h, 0px) + var(--stats-h, 0px)); z-index: 2; background: var(--bg); margin: 0; padding: .6rem 0 .5rem; }
}
/* ── 桌機：文字在左邊捲，地圖貼著視窗不動 ─────────────────── */
@media (min-width: 64rem) {
  /* 桌機跟手機同一個操作：頁面本身捲，標題區跟著捲走，只有五個標籤貼在最上面（擁有者 2026-10-12：「往上滑時五個標籤凍結在上面，
     標題這部分可以不用」）。左欄是一般區塊流、寬 --rail，標籤列才能 sticky（grid 項目的 sticky 只在自己那一列裡有效，貼不住，
     所以不再用 grid）；地圖是 position: fixed，貼在右邊不動。 */
  .shell { width: var(--rail); transition: width .35s ease; }
  .stage { position: fixed; top: 0; bottom: 0; left: var(--rail); right: 0; transition: left .35s ease; }
  .mapview .tabs { position: sticky; top: 0; z-index: 5; background: var(--bg); margin: 0; }
  #map { height: 100svh; border: 0; border-left: 1px solid var(--line); }
  #state { height: 100svh; align-content: center; border: 0; border-left: 1px solid var(--line); }
  .mapview h1 { font-size: clamp(2.4rem, 2.6vw, 3rem); }
  .mapview footer { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* 視窗矮的時候標題區縮小，不然固定在上面的標題區會吃掉一半的高度、內容只剩一小條 */
@media (min-width: 64rem) and (max-height: 760px) {
  .head { padding-top: 1.1rem; }
  .mapview h1 { font-size: 2rem; }
  .mapview .lede { margin: .5rem 0 .8rem; font-size: .92rem; }
}

/* 首頁（我要通報）：頂端只剩標籤列，讓表單早一點出現（擁有者 2026-10-17）。「綠鬣蜥地圖」與副標縮小，放到頁面最底下、「送出之後」前面（.brand）。
   五個標籤共用同一個標題區（nav.js 只換 .work），所以不能從首頁的 HTML 拿掉它：用 body.on-home（nav.js 隨換頁切換）把 h1 與 lede 收成「只給讀屏軟體」，
   h1 仍在，搜尋引擎與讀屏軟體照舊看得到；換到其他標籤，標題區就原樣回來。底下那一份是給眼睛看的，所以 aria-hidden，不讓讀屏軟體念兩遍。 */
.on-home .head { padding-top: 0; }
.on-home .head h1, .on-home .head .lede { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brand { display: flex; flex-direction: column; gap: .1rem; margin: 2rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.brand b { color: var(--ink-2); font-size: .95rem; letter-spacing: .02em; }
/* 「送出之後」與那一句併成一行，字跟副標一樣大（擁有者 2026-10-18）。標題與句子的 HTML 不動（h2 與 p），只是排成同一列。 */
.flat .brand + section { display: flex; align-items: baseline; gap: .25rem; padding: .6rem 0 1.6rem; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.flat .brand + section h2, .flat .brand + section p { margin: 0; font-size: inherit; line-height: inherit; }
.flat .brand + section h2 { flex: none; letter-spacing: 0; color: var(--ink-2); }

/* ── 左欄收合成圖示列（桌機）──────────────────────────────────
   擁有者 2026-10-11：模仿 Google 地圖，一開始展開、過一下自動收合，讓地圖瀏覽成為主視覺；收合後每個功能是一顆圖示。
   展開時外觀跟以前完全一樣（圖示與兩顆鈕都藏起來）；手機不收（上下排）。狀態是 main.shell 的 data-rail，由 rail.js 設。 */
.head { position: relative; }
.tabs .ico { display: none; }
.rail-menu { display: none; min-height: 2.75rem; }
.rail-fold { display: none; width: 2.75rem; height: 2.75rem; padding: 0; place-items: center; cursor: pointer;
  background: none; border: 0; border-radius: 50%; color: var(--ink-2); }
.rail-fold:hover, .rail-menu:hover { color: var(--ink); background: var(--soft); }
.rail-fold:focus-visible, .rail-menu:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 64rem) {
  /* 收合鈕跟著視窗走（fixed），不跟標題區捲走：往下捲之後標題區不見了，鈕要回到最上面才找得到（擁有者 2026-10-12）。
     位置＝標籤列的右端：捲到底時標籤列貼在最上緣，鈕就落在標籤列那一排裡；沒捲動時在標題區右上角。
     left 是「左欄寬 − 右內距＋0.5rem − 鈕寬」，也就是以前 right: calc(var(--pad) - .5rem) 的位置。 */
  .rail-fold { display: grid; position: fixed; top: 2px; left: calc(var(--rail) - var(--pad) + .5rem - 2.75rem); z-index: 6; }
  .shell[data-rail="closed"] { width: var(--rail-slim); }
  .shell[data-rail="closed"] .stage { left: var(--rail-slim); }
  .shell[data-rail="closed"] .head, .shell[data-rail="closed"] .work { display: none; }
  .shell[data-rail="closed"] nav.tabs {
    flex-direction: column; align-items: stretch; gap: .25rem; height: 100svh; margin: 0; padding: .5rem .35rem;
    border-bottom: 0; border-right: 1px solid var(--line); overflow: visible;
  }
  .shell[data-rail="closed"] .rail-menu { display: grid; place-items: center; margin-bottom: .6rem; padding: 0; cursor: pointer;
    background: none; border: 0; border-radius: .75rem; color: var(--ink-2); }
  .shell[data-rail="closed"] .tabs a {
    flex-direction: column; justify-content: center; gap: .25rem; margin: 0; padding: .6rem .1rem; min-height: 4rem;
    border-bottom: 0; border-radius: .75rem; font-size: .7rem; line-height: 1.15; text-align: center; white-space: normal;
  }
  .shell[data-rail="closed"] .tabs .ico { display: block; }
  .shell[data-rail="closed"] .tabs a[aria-current="page"] { background: var(--soft); }
}
@media (prefers-reduced-motion: reduce) { .shell, .stage { transition: none; } }

/* ── 左欄與地圖之間的拖曳條（rail.js 建；只有桌機、展開時才有）。看得見的是中間 2px 的線，
      抓取範圍左右各 5px（共 10px），蓋在地圖邊緣上。拖的時候關掉寬度動畫，不然會慢半拍。 ── */
.rail-resize { display: none; }
@media (min-width: 64rem) {
  .shell[data-rail="open"] .rail-resize {
    display: block; position: fixed; top: 0; bottom: 0; left: calc(var(--rail) - 5px); width: 10px; padding: 0; z-index: 6;
    cursor: col-resize; touch-action: none;
  }
  .rail-resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: transparent; transition: background .15s; }
  .rail-resize:hover::after, .rail-resize:focus-visible::after, .shell.resizing .rail-resize::after { background: var(--accent); }
  .rail-resize:focus-visible { outline: none; }
  .shell.resizing, .shell.resizing .stage { transition: none; }
  .shell.resizing { user-select: none; }
}

/* ── 手機版「放大地圖」（mapfull.js）：蓋滿整個畫面；桌機的地圖本來就是整欄，不顯示 ─────────────────── */
.map-full, .map-close {
  position: absolute; top: 10px; right: 10px; z-index: 3; display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.5rem; padding: 0 .9rem; border: 0; border-radius: 999px; cursor: pointer;
  background: #fff; color: #1c2a26; font-family: inherit; font-size: .9rem; font-weight: 700; line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.map-full:focus-visible, .map-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.map-tip {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 34px); z-index: 1002;
  margin: 0; padding: .5rem .9rem; border-radius: 999px; background: rgba(20, 30, 26, .85); color: #fff; font-size: .85rem; white-space: nowrap;
}
html.map-locked { overflow: hidden; }
/* Google 在地圖容器上寫了 inline 的 position: relative，所以這裡的 position 要 !important，不然蓋不住；足跡地圖頁的 .stage 是 sticky z-index 4，
   也要用同樣權重壓過去，不然標籤列（5）會蓋在放大的地圖上、把「關閉」擋住 */
.shell .stage.full, .shell.frozen .stage.full { z-index: 1000; }
/* 上下左右都貼齊（inset + height: auto；四邊各退讓一個 safe-area：Safari 裡全是 0，等於貼齊；「加到主畫面」全螢幕時退開時間列與底下的 Home 指示條，Google 的版權字才不會被擋住），不寫 100svh：iPhone 網址列收起來後畫面比 svh 高，底下會露出一截清單（擁有者 2026-10-12 實測） */
/* 四邊退讓 safe-area 時，退開的那一圈不能透出底下的頁面（會看到標題與清單）：墊一層整頁的底色 */
.stage.full::before { content: ""; position: fixed; inset: 0; z-index: 999; background: var(--bg); animation: map-fade .34s ease-out; transition: opacity .34s ease-out; }
/* 縮回去的時候（mapfull.js 加 .leaving）底色一起淡出，露出後面的頁面 */
.stage.leaving::before { opacity: 0; }
@keyframes map-fade { from { opacity: 0; } }
/* 放大、縮回的動畫（在 mapfull.js 裡做，用平移加裁切）；鈕與提示晚一點點淡入，不要在地圖還沒長開時就浮在半空 */
.map-close, .map-tip { animation: map-fade .26s .14s ease-out both; }
.map-full { animation: map-fade .26s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .stage.full::before, .map-close, .map-tip, .map-full { animation: none; }
  .stage.leaving::before { transition: none; }
}
.stage.full #map { position: fixed !important; inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); width: auto !important; height: auto !important; border: 0; z-index: 1000; }
/* 放大時 #map 的底色用頁面底色：iPhone 全螢幕 app 的時間列會跟著最上緣那個固定元素的底色走，Google 預設的是灰（實機量到 32,33,36，其他畫面是 13,21,17）。地圖圖磚會蓋掉它，只影響圖磚還沒載入與時間列。 */
.stage.full #map { background-color: var(--bg) !important; }
.stage.full .map-close {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 12px; z-index: 1001;
}
@media (min-width: 64rem) { .map-full, .map-close, .map-tip { display: none; } }

/* 確認位置時蓋在地圖正中央的針（map.js 的 iguana:pick）：針尖對準地圖中心，不吃點擊，拖地圖時手指不會被它擋住。 */
.center-pin { transform: translateY(-14.5px) scale(1.4); transform-origin: 50% 100%; pointer-events: none; opacity: 1; }   /* 比已公開的針大一圈、外圈是虛線：不然跟地圖上已有的通報針分不出來 */
.center-pin svg > path { stroke-dasharray: 5 3.5; }
.center-pin[hidden] { display: none; }

/* 地圖上的「位置正確」（map.js 的 iguana:confirmable）：浮在地圖底部中間，避開左下的 Google 標誌與右下的縮放。 */
.map-confirm { margin: 0 0 2.2rem; padding: .7rem 1.6rem; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 1rem/1.2 system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); cursor: pointer; }
.map-confirm[hidden] { display: none; }