/* 起點／終點輸入（規格見 docs/specs/2026-10-24-route-input.md） */
#route-input {
  margin: 0 0 14px;
}

#route-input[hidden] { display: none; }

.ri-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ri-dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  margin-left: 4px;
  border-radius: 50%;
}
.ri-dot.start { background: #16a34a; }
.ri-dot.end { background: #dc2626; }

.ri-label {
  flex: 0 0 2.4em;
  font-size: 14px;
  color: var(--muted);
}

.ri-field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.ri-input {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  outline: none;
}
.ri-input:focus { border-color: var(--line); box-shadow: 0 0 0 2px rgba(0, 112, 189, 0.15); }

.ri-pin {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}
/* 中間：虛線連接兩個點，右邊是交換按鈕 */
.ri-mid {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
}

.ri-connector {
  flex: 0 0 0;
  width: 0;
  height: 100%;
  margin-left: 8px;
  border-left: 2px dashed #94a3b8;
}

.ri-swap {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  line-height: 1;
  font-size: 18px;
}

/* 下拉選單：絕對定位在輸入框下方 */
.ri-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: -44px; /* 蓋過右邊的 📍 按鈕，讓名稱有空間顯示 */
  z-index: 20;
  max-height: 280px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(16, 42, 67, 0.22);
}
.ri-list[hidden] { display: none; }

.ri-item {
  display: flex;
  flex-direction: column; /* 名稱一行、路名／行政區一行 */
  gap: 1px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}
.ri-item:hover,
.ri-item.active { background: #e0ecff; }

/* 左邊的類別圖示佔兩列高；名稱在第一列、路名／行政區在第二列 */
.ri-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
}
.ri-item-icon {
  grid-row: 1 / span 2;
  align-self: center;
  min-width: 2.2em;
  padding: 2px 4px;
  border-radius: 6px;
  background: #eef2f7;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.ri-item-icon.station { background: #dbeafe; color: #1d4ed8; }
.ri-item-icon.address { background: #dcfce7; color: #15803d; }
.ri-item-icon.street { background: #fef3c7; color: #b45309; }
.ri-item-icon.poi { background: #fce7f3; color: #be185d; }
.ri-item-icon.youbike { background: #e2e8f0; color: #1f2a37; }

.ri-item-main { grid-column: 2; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-item-sub { grid-column: 2; }
.ri-item-sub {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ri-item-sub::before { content: none; }

.ri-go {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
}

.ri-credit {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--muted);
}

/* 地圖標記：28px 圓形，白色粗體字，白色外框和陰影 */
.ri-marker {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(16, 42, 67, 0.35);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.ri-marker.start { background: #16a34a; }
.ri-marker.end { background: #dc2626; }

/* 手機版：面板在下方，欄位仍然要塞得下 */
@media (max-width: 640px) {
  .ri-label { flex-basis: 2.2em; }
  .ri-list { max-height: 200px; }
}

/* ---------- 遊戲化／手機版調整：輸入框 16px 以上，iOS 才不會自動放大 ---------- */
/* 輸入框只加粗外框與圓角，字型維持系統字 */
.ri-input {
  height: 46px;
  font-size: 16px;
  border: 3px solid var(--btn-line);
  border-radius: 14px;
  padding: 0 14px;
  background: #f7fafc;
}
.ri-input:focus { border-color: var(--btn-line); box-shadow: 0 0 0 4px #b9d7f0; }
/* 按鈕樣式來自 style.css 的 button token；這裡只定尺寸 */
.ri-pin { flex-basis: 52px; width: 52px; height: 46px; min-height: 46px; padding: 0; font-size: 15px; }
.ri-label { font-weight: 700; color: var(--ink); }
.ri-dot { flex-basis: 14px; width: 14px; height: 14px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--btn-line); }
.ri-go { width: 100%; height: 54px; margin-top: 12px; font-size: 20px; }
.ri-item { min-height: 44px; }
/* 下拉選單放在面板裡跟著捲動，不會被抽屜邊緣切掉 */
.ri-list { position: static; margin-top: 6px; box-shadow: none; border: 2px solid var(--btn-line); }