/*! やじるし | (c) 2025-2026 asamizu | yajirushi.liteside.dev | All rights reserved */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 10px;
  padding-top: env(safe-area-inset-top);
  min-height: 100dvh;
  overflow: auto;
}

/*
   メッセージは地図の上に重ねる。以前は通常の流れに置いていたので、
   「デバイスを平らにしてください」が出入りするたびに地図から下が上下していた。
   左に余白を空けてあるのは、Leafletのズームボタン（左上）を避けるため。
   #mapContainer ではなく #navContainer の子にしているのは、
   前者は overflow: hidden なので長い文言が切れてしまうから
*/
#messageArea {
  position: absolute;
  top: 8px;
  left: 50px;
  right: 10px;
  z-index: 1050; /* → 重なりの順は #menuOverlay のコメント参照 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none; /* 地図の操作を邪魔しない */
}

.error {
  color: #c62828;
  margin: 0;
  padding: 6px 10px;
  text-align: center;
  font-size: 0.9em;
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* メッセージが無いときは余白も出さない */
.error:empty {
  display: none;
}

/* 主役ではないボタン（再取得・モーダルの「閉じる」）の共通の見た目 */
#retryGeo, .modal-content button.secondary {
  color: #333;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
}

#retryGeo:hover, .modal-content button.secondary:hover {
  background-color: #e0e0e0;
}

#retryGeo {
  display: none;
  margin: 0;
  pointer-events: auto; /* ボタンは押せる必要がある */
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}

#controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.search-container {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  max-width: 80vw;
  min-width: 200px;
}

input[type="text"] {
  width: 100%;
  max-width: 210px;
  padding: 8px;
  border: none;
  outline: none;
  font-size: 16px;
}

.search-button {
  font-size: 18px;
  color: #666666;
  background: #f5f5f5;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  filter: grayscale(100%);
  border-left: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  position: relative;
}

.search-button:hover {
  color: #333333;
  background: #e0e0e0;
}

.search-button.loading .search-icon {
  display: none;
}

.search-button.loading .spinner {
  display: block;
}

.spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 3px solid #ccc;
  border-top: 3px solid #666666;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: absolute;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#startNav, #stopNav {
  border-radius: 5px;
  padding: 8px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  display: none; /* 表示は updateUI() が制御する */
}

#startNav {
  background-color: #4285F4;
  color: white;
  border: none;
}

#startNav:hover {
  background-color: #3267D6;
}

#stopNav {
  background-color: #dc3545;
  color: white;
  border: none;
}

#stopNav:hover {
  background-color: #c82333;
}

/* ---------------------------------------------------------------
   左上のメニュー
   共有など「ナビの本筋ではない操作」を畳んで、地図と矢印の高さを稼ぐ
--------------------------------------------------------------- */
/* 見出しを中央に置いたまま、メニューだけ左端に寄せるための行 */
#appHeader {
  position: relative;
  width: 100%;
  max-width: 600px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#menuButton {
  position: absolute;
  left: 0;
  z-index: 1120; /* 開いている間も押せるよう、暗幕より上 */
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  background-color: rgba(255, 255, 255, 0.95);
  color: #333;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

#menuButton:hover {
  background-color: #e0e0e0;
}

/*
   メニューの外側を触ったら閉じるための受け皿。地図に触らせないためでもある。
   背景を暗くしているのは、明るい地図（特に地名の文字）の上だとメニューが
   埋もれて読めなかったため。開いていることも分かりやすくなる。

   ■ 重なりの順（数字を動かすときはここを見ること）
     Leafletの中身       200〜800  タイル・ピン・線
     .leaflet-top/bottom    1000  ズームの +/- などコントロールの入れ物。
                                  **Leaflet側のCSSで決まっている値**。
                                  ここを下回るとメニューが +/- に隠れる
     footer                 1000  下端の著作権表示（地図の外なので競合しない）
     #messageArea           1050  地図に重ねる案内
     #menuOverlay           1100  暗幕
     #menu                  1110
     #menuButton            1120  開いている間も押せるように
     .modal                 1200  許可のお願い。常に最前面
*/
#menuOverlay {
  display: none; /* 表示は updateUI() が制御する */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1100;
}

#menu {
  display: none; /* 表示は updateUI() が制御する */
  position: absolute; /* 基準は #appHeader。ボタンの真下に出す */
  top: 44px;
  left: 0;
  z-index: 1110;
  flex-direction: column;
  min-width: 190px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

#menu a, #menu button {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: #333;
  font-size: 15px;
  text-align: left;
  text-decoration: none;
  padding: 12px 16px;
  white-space: nowrap;
  cursor: pointer;
}

#menu a:hover, #menu button:hover {
  background-color: #eef4ff;
}

#menu > * + * {
  border-top: 1px solid #eee;
}

/*
   一番下に置く。停止は頻繁に押すものではないので、狭い画面で
   画面外に出てもよい（本体はスクロールできる）。
   下端固定の footer と重ならないよう、その分だけ余白を空けておく
*/
.nav-buttons {
  display: none;
  gap: 10px;
  padding: 10px;
  margin-bottom: calc(env(safe-area-inset-bottom) + 24px);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  width: 100%;
  max-width: 600px;
  justify-content: center;
}

#navContainer {
  position: relative; /* #messageArea を地図の上に重ねるための基準 */
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
}

#mapContainer {
  height: 48dvh;
  max-height: 400px;
  min-height: 200px;
  width: 100%;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  position: relative;
}

/* 目的地が決まる前は案内を出すので、常に表示したままにする。
   かつては display:none で隠してJSで出していた名残があり、後ろの
   display:none が block を打ち消して住所が出なくなっていた（→ DEVELOPMENT.md 7. の23） */
#destinationAddress {
  display: block;
  width: 100%;
  max-width: 600px;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px;
  color: #333;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin: 0;
  text-align: center;
  /* 日本語の住所は長い。1行に収めて地図と矢印の高さを削らない */
  max-height: 26px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#arrowContainer {
  width: 100%;
  flex-grow: 1;
  min-height: 250px;
  max-height: 50dvh;
  overflow: visible;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  position: relative;
}

#map, #arrowCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 矢印は描き直さずCSSで回す。原点はdrawArrow()の描画中心と揃えること */
#arrowCanvas {
  transform-origin: 50% 42%;
  will-change: transform;
}

/*
   矢印の直上に置く。画面下に position: fixed で貼っていたが、
   小さい端末ではブラウザ下部のツールバーに隠れて見えなくなっていた
*/
#navInfo {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 600px;
  background: rgba(255, 255, 255, 0.9);
  padding: 4px;
  text-align: center;
}

.distance-info {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: 2px 0;
  color: #333;
  padding: 2px 0;
}

.distance-info .prefix {
  font-size: 1.2em;
  font-weight: normal;
}

#distance {
  font-size: 2.4em;
  font-weight: bold;
  margin-left: 5px;
}

footer {
  display: none;
  position: fixed;
  bottom: env(safe-area-inset-bottom);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  text-align: center;
  font-size: 0.6em;
  padding: 0.5rem 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 1000;
}