/*-----共享：输入框 + 建议下拉（起终点样式复用）-----
  本文件自pln.css抽出，改为通用组件，供三处共用：
  - 线路导航（planner）：沿用.route-planner .pln-*前缀（与迁移前完全一致的特异性，
    否则会被pln.css里.route-planner .pln-field label/input反过来盖住：标签变深色加粗、
    输入框内边距与边框也跟着变），外观与原来一致；
  - 线路信息搜索 / 地图站点搜索：使用无前缀的.sg-*通用名，复用同一套外观。
  这样"输入框外壳 + 浮动标签 + 下拉列表"只有一处声明，避免两份漂移。
  注意："输入合法性 ✓/✗ / 清除按钮 / 错误态"仍是planner专属，留在pln.css。 */

:root {
  /* 字号档位：与pln.css的--pln-fs-*取值一致，供不在.route-planner内的.sg-*使用 */
  --sg-fs-note: 13px;
  --sg-fs-body: 14px;
}

/* 输入框外壳（相对定位，供下拉绝对定位） */
.route-planner .pln-input-wrap,
.sg-wrap {position: relative;}

/* 建议下拉列表 */
.route-planner .pln-suggest,
.sg-suggest {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  box-shadow: 0 4px 12px #0000001a;
  max-height: 240px;
  overflow-y: auto;
  display: none;
}

.route-planner .pln-suggest.open,
.sg-suggest.open {
  display: block;
}

/* 建议列表滚动条：方角（矩形）细条 */
.route-planner .pln-suggest,
.sg-suggest {
  scrollbar-width: thin; /* Firefox：细滚动条 */
  scrollbar-color: #c1c9d4 #f1f5f9; /* 滑块 / 轨道 */
}
.route-planner .pln-suggest::-webkit-scrollbar,
.sg-suggest::-webkit-scrollbar {width: 8px;}
.route-planner .pln-suggest::-webkit-scrollbar-track,
.sg-suggest::-webkit-scrollbar-track {background: #f1f5f9;}
.route-planner .pln-suggest::-webkit-scrollbar-thumb,
.sg-suggest::-webkit-scrollbar-thumb {background: #c1c9d4; border-radius: 0;}
.route-planner .pln-suggest::-webkit-scrollbar-thumb:hover,
.sg-suggest::-webkit-scrollbar-thumb:hover {background: #a8b2c1;}

/* 候选项 */
.route-planner .pln-suggest-item,
.sg-item {
  padding: 8px 10px;
  font-size: var(--sg-fs-body);
  color: #333;
  cursor: pointer;
}

.route-planner .pln-suggest-item:hover,
.sg-item:hover {
  background: #f0f5fa;
  color: #003366;
}

/* 候选项副名（英文名等） */
.route-planner .pln-suggest-en,
.sg-item-sub {
  margin-left: 8px;
  font-size: var(--sg-fs-note);
  color: #888;
}

/* 键盘高亮行（须在:hover之后：二者特异度相同，靠后声明生效） */
.route-planner .pln-suggest-item.is-active,
.sg-item.is-active {
  background: #f0f5fa;
  color: #003366;
}

/* 空态提示（未找到匹配） */
.route-planner .pln-suggest-empty,
.sg-empty {
  padding: 8px 10px;
  color: #8b95a1;
  font-size: var(--sg-fs-note);
}

/*-----候选分组标题（线路/车站等）：仅作视觉分隔，不是候选，故不用 .sg-item*/
.sg-group {
  padding: 6px 10px 2px;
  font-size: var(--sg-fs-note);
  color: #8b95a1;
  border-top: 1px solid #e3e8ef;
  cursor: default;
}

.sg-group:first-child {
  border-top: none;
}

/*-----描边输入框：Material outlined（方角版）-----
   1px描边 + 聚焦时2px主色（用inset阴影合成，不改变border-width，避免1px布局位移）
   + 浮动标签：默认落在输入区，聚焦或已有值时上浮到描边缺口（标签白底遮住描边形成缺口）
   input的placeholder=" "只是:placeholder-shown的CSS钩子，视觉为空、不显示任何提示文字 */
.route-planner .pln-outlined input,
.sg-outlined input {
  width: 100%;
  min-height: 42px; /* 与玩家下拉同高：两者内边距/行高/字号一致，高度由min-height兜底而非字形 */
  padding: 11px 12px;
  border: 1px solid #ccd5e1;
  border-radius: 0;
  box-sizing: border-box;
  font-size: var(--sg-fs-body);
  line-height: 1.25;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.route-planner .pln-outlined input:hover,
.sg-outlined input:hover {border-color: #9fb0c6;}

.route-planner .pln-outlined input:focus,
.sg-outlined input:focus {
  outline: none; /* 去掉浏览器默认外框，改用主色描边表达聚焦 */
  border-color: var(--accent-blue);
  box-shadow: inset 0 0 0 1px var(--accent-blue);
}

.route-planner .pln-outlined label,
.sg-outlined label {
  position: absolute;
  left: 8px;
  top: 50%;
  z-index: 1;
  margin: 0;
  padding: 0 4px;
  background: #ffffff;
  color: #8b95a1;
  font-size: var(--sg-fs-body);
  font-weight: 400;
  line-height: 1;
  pointer-events: none; /* 标签不挡输入框点击 */
  transform: translateY(-50%);
  transform-origin: left center; /* 上浮缩小时保持左端对齐，与静止态左对齐一致 */
  transition: top 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.route-planner .pln-outlined input:focus + label,
.route-planner .pln-outlined input:not(:placeholder-shown) + label,
.sg-outlined input:focus + label,
.sg-outlined input:not(:placeholder-shown) + label {
  top: 0;
  color: var(--accent-blue);
  transform: translateY(-50%) scale(0.85);
}

/* .sg-*可能置于地图等深色/图片背景上，输入区显式给白底（不影响planner） */
.sg-outlined input {background: #ffffff;}

/*-----附加：.sg-*带色块的候选项（线路搜索用）-----*/
.sg-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sg-item-main {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sg-swatch {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #888;
}