/* ---------- いつもの駅 ----------
 * 自分の駅を1つだけ登録して、次からそこで起動する。
 * 記号はピン（📍）。🏠は「ホーム画面に追加」に譲っている（docs/いつもの駅.md）。 */

/* 駅名パネルの右上のピン。押すと登録・解除。
 * 未登録のときは灰色にして、押せるけれど主役ではない見え方にする。
 * top はバッジ（No.04）の一段上。320px幅ではパネルが96pxしかなく、
 * 同じ段に置くとバッジと重なる（実測）。上は空いているので持ち上げてある。 */
.home-pin {
  position: absolute;
  top: -44px;
  right: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  filter: grayscale(1);
  opacity: 0.5;
  transition: opacity 0.2s, filter 0.2s, background 0.2s, transform 0.1s;
}
.home-pin:hover { opacity: 0.75; }
.home-pin:active { transform: scale(0.88); }
.home-pin.on {
  filter: none;
  opacity: 1;
  background: var(--chip-bg, rgba(0, 0, 0, 0.05));
}
/* 初めて駅名を検索した人に、一度だけ「ここが登録できる」と体で教える */
.home-pin.wobble { animation: home-wobble 1.1s ease 2; }
@keyframes home-wobble {
  0%, 100% { transform: rotate(0); }
  8% { transform: rotate(-16deg) scale(1.15); }
  16% { transform: rotate(13deg) scale(1.15); }
  24% { transform: rotate(-8deg) scale(1.08); }
  32% { transform: rotate(0) scale(1); }
}

/* いつもの駅からの距離。よその駅にいるときだけ出る */
/* 詳細パネルは狭い（320px幅の端末では96pxしかない）。この行だけ字間を詰めて、
   「いつもの駅から」が1行に収まるようにしている */
.detail .home-dist {
  margin-top: 7px;
  font-size: 10.5px;
  letter-spacing: 0;
  color: var(--muted);
}
.detail .home-dist[hidden] { display: none; }
/* 狭い画面（320px級）で「いつもの駅か／ら」と切れないように、
   文のかたまりごとに inline-block で包む（タイトル下の一行と同じ手） */
.detail .home-dist span,
.darts-result .dr-dist span { display: inline-block; }

/* 旅から帰るボタン。検索欄の上の段（.jump-row）の右端に、よその駅にいるときだけ出る。
 * のりかえチップと同じ形にして「押すと移動するもの」と分かるようにしている。
 * 段の左には「近くの駅へ」が並ぶ（css/geo.css）。左が隠れていても右端に居られるよう、
 * 段まかせにせず margin-left:auto で自分で寄る */
.home-back {
  margin: -6px 0 14px auto;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}
.home-back[hidden] { display: none; }
.home-back button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 14px 6px 11px;
  border-radius: 999px;
  border: 1px solid #E7E7E2;
  background: #fff;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6A6A63;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.home-back button:hover { background: #F3F3EF; }
.home-back button:active { transform: scale(0.96); }
/* 長い駅名でも1行に収める（「へもどる」は必ず残す）。
 * flexコンテナは地の文をひとかたまりの要素として扱うので、駅名と「へもどる」を
 * 同じ入れ物に入れないと gap が文の途中に空いてしまう。
 * nowrap は「へもどる」用。段の左に「近くの駅へ」が並んで幅が減った320px級では、
 * これが無いと「へも／どる」で折り返してボタンが二段になる（実測） */
.home-back .hb-label {
  display: flex;
  min-width: 0;
  white-space: nowrap;
}
.home-back .hb-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 登録・解除の知らせ。🎯ボタンと重ならないよう、少し上に出す */
.home-toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: min(92vw, 380px);
  background: #2A2A27;
  color: #F4F4F0;
  border-radius: 16px;
  padding: 11px 18px;
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: center;
  box-shadow: 0 14px 34px rgba(20, 20, 15, 0.3);
  z-index: 55;
  animation: pop-in 0.3s ease;
}
.home-toast[hidden] { display: none; }

/* ダーツの結果にも距離を出す（遠くへ来たことが、旅らしさになる） */
.darts-result .dr-dist {
  margin-top: 8px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.darts-result .dr-dist[hidden] { display: none; }