/* 首頁（规格見 docs/specs/2026-10-24-landing.md）：全螢幕，海藍到深石板的漸層，上面淡淡的六角格紋 */
/* 只用 style.css 的 token（藍、橘、白、深石板）；不改既有規則，只在這裡加 */

/* 六角格紋：SVG data URI，pointy-top 六角形描線，tile 34.64 × 60 再放大兩倍；線的透明度 0.08 */
.landing {
  position: fixed;
  inset: 0;
  z-index: 5; /* 高於抽屜（2）與狀態列（3），低於 toast（6） */
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(16px + var(--safe-t)) 16px calc(20px + var(--safe-b));
  color: #fff;
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 34.64 60'><g fill='none' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1'><path d='M0 -20l17.32 10v20l-17.32 10l-17.32-10v-20z'/><path d='M34.64 -20l17.32 10v20l-17.32 10l-17.32-10v-20z'/><path d='M0 40l17.32 10v20l-17.32 10l-17.32-10v-20z'/><path d='M34.64 40l17.32 10v20l-17.32 10l-17.32-10v-20z'/><path d='M17.32 10l17.32 10v20l-17.32 10l-17.32-10v-20z'/></g></svg>"),
    linear-gradient(180deg, var(--sea) 0%, var(--btn-line) 100%);
  background-size: 69.28px 120px, auto;
  animation: lc-in 0.35s ease-out;
}
.landing[hidden] { display: none; }
.landing.out { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }

@keyframes lc-in { from { opacity: 0; } to { opacity: 1; } }

.landing-inner {
  width: 100%;
  max-width: 480px;
  margin: auto; /* 垂直置中；內容太高時自動變成可捲動 */
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------- 品牌區：兩層字（上小字「市長」、下大字），沿用狀態列標題的展示字型 ---------- */
.landing-kicker {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 0 var(--btn-line);
}
.landing-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: #fff;
  text-shadow: var(--btn-text-white);
}
.landing-pitch {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

/* ---------- 搜尋卡：白底、粗描邊、厚陰影（像訂房網站的搜尋框） ---------- */
.landing-card {
  position: relative;
  z-index: 2; /* 下拉選單會蓋到下面的按鈕，讓它在卡片內展開 */
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 16px;
  color: var(--ink);
  background: var(--card);
  border: 3px solid var(--btn-line);
  border-radius: 18px;
  box-shadow: var(--btn-highlight), 0 6px 0 var(--btn-line);
}
.lc-field { display: block; }
/* 中間的虛線與交換鈕沿用 route-input.css 的 .ri-mid（高 44px，交換鈕 44px） */
#lc-mid { display: block; }

.lc-chips {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 2px 2px 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lc-chips::-webkit-scrollbar { display: none; }
.lc-chip {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 6px 14px;
  font-size: 15px;
  border-width: 2px;
  box-shadow: var(--btn-highlight), 0 3px 0 var(--btn-line);
}

.lc-error {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--danger-ink);
}

/* 大按鈕「出發」：沿用 button.primary（飄帶橘），這裡只定尺寸 */
.lc-go {
  width: 100%;
  height: 56px;
  margin-top: 14px;
  font-size: 22px;
}

/* ---------- 文字按鈕「先逛逛地圖」 ---------- */
.lc-browse {
  align-self: center;
  min-height: 44px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 16px;
  color: #fff;
  text-shadow: 0 1px 0 var(--btn-line);
  text-decoration: underline;
  text-underline-offset: 4px;
  background: none;
  border: 0;
  box-shadow: none;
}
.lc-browse:active:not(:disabled) { transform: none; box-shadow: none; }

/* ---------- 三個小步驟：橫排，窄的時候文字換行 ---------- */
.lc-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  color: #fff;
}
.lc-steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.lc-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 3px solid var(--btn-line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  box-shadow: 0 3px 0 var(--btn-line);
}

/* ---------- 底部即時數字 ---------- */
.lc-voters {
  margin: 0;
  font-size: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 0 var(--btn-line);
}

/* 首頁顯示時，地圖上的狀態列、回到角色、抽屜、走路控制列都藏起來（不能點到） */
body.landing-on .hud,
body.landing-on .fab,
body.landing-on .sheet,
body.landing-on .nav {
  visibility: hidden;
}

/* 狀態列的標題 chip 可以點，回到首頁 */
.hud-title { cursor: pointer; }

@media (max-width: 380px) {
  .landing-title { font-size: 38px; }
  .lc-steps { font-size: 12px; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing { animation: none; }
  .landing.out { transition: none; }
}