/* ============================================================
   婚礼配车 · 视觉重做
   纪律与请柬站（wedding.tennydddd.com）完全对齐——零容器基底：
   没有卡片、没有圆角容器、没有 box-shadow、没有边框盒子、
   没有半透明底板。层级只由字号、字重、位置和几条"线"建立。
   色彩 / 字体 / 间距 / 动效全部引用 tokens.css（index.html 已引入），
   本文件只定义工具页确实需要的派生值，不重复 token。
   ============================================================ */

/* ---- 工具页专属派生值（tokens.css 里没有、又确实需要的新色） ---- */
:root {
  /* 页面底色：--c-cream 同色相提亮。红线的全部对比度实测都基于这个底，
     不能换回 --c-sand（次级文字会掉到 2.72:1） */
  --bg-page: #f6efe6;
  /* --c-sand 降透明：列表项之间唯一允许的"极淡分隔线" */
  --line-faint: rgba(178, 150, 114, 0.24);
  /* --c-sand 降透明：按压 / 悬停时的一层"光"。是瞬时反馈，不是容器底板 */
  --press: rgba(178, 150, 114, 0.14);
  /* 陶土实底上的字。红线原文允许"按钮实心底(白字压上)"，故单独命名 */
  --c-on-accent: #ffffff;
}

/* 请柬的展示字体，本站自托管。只含拉丁字形：
   "9/12" 走它，中文自动落到字体栈后面的 --f-sans，无需改 HTML。
   不用 token 的 --f-disp 是因为它回退到 cursive，会污染中文 */
@font-face {
  font-family: "Amatic SC";
  src: url("/fonts/AmaticSC-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ============================================================
   基底
   ============================================================ */

* { box-sizing: border-box; }

html { color-scheme: light; }  /* 锁浅色，避免系统深色模式把原生表单控件染黑、破坏色场 */

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.65;        /* 请柬是 1.85，但工具页信息密度高，照抄会散架 */
  -webkit-tap-highlight-color: transparent;  /* 系统点按灰块与暖沙色场打架，自己管反馈 */
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

/* 蜂蜜金只做 focus 线（token 注释原话）。1.5px 细线足够定位，不抢内容 */
:focus-visible {
  outline: 1.5px solid var(--c-honey);
  outline-offset: 2px;
}

/* ============================================================
   页头 —— 请柬的开场感：居中、大日期、一段蜂蜜金的光
   ============================================================ */

header {
  padding: var(--sp-4) var(--gutter) var(--sp-2);
  text-align: center;
}

header h1 {
  margin: 0;
  /* Amatic SC 只覆盖拉丁字形：日期走手写体，"婚礼配车"自动落中文黑体，
     一个元素里两种字体自然分流 */
  font-family: "Amatic SC", var(--f-sans);
  font-size: clamp(1.7rem, 6.5vw, 2.35rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
}

header p {
  margin: 0.45rem 0 0;
  font-size: var(--t-small);
  letter-spacing: var(--couplet-ls);   /* 借题签的字距，让地址行像一行小注 */
  color: var(--ink-soft);              /* 6.67:1，替换原 #857a6e（仅 3.68:1 不合格） */
}

/* 一小段蜂蜜金的光，把工具页的开场拉回请柬的仪式感；极小高亮，符合红线 */
header::after {
  content: "";
  display: block;
  width: 2.4rem;
  height: 2px;
  margin: var(--sp-2) auto 0;
  background: var(--c-honey);
}

/* ============================================================
   页签 —— 指示线与表单下划线是同一家族的"线"，不是装饰框
   ============================================================ */

nav {
  position: sticky;
  top: 0;
  z-index: 600;               /* 压过 leaflet 内部窗格（配合 #map 的 isolation） */
  display: flex;
  background: var(--bg-page); /* 实底同页面色：滚动时内容不透出来，也不是一块"板" */
  padding-top: env(safe-area-inset-top);  /* meta 已开 viewport-fit=cover，避让刘海 */
}

nav button {
  flex: 1;
  min-height: 44px;           /* 触控红线 */
  padding: var(--sp-1) 0.25rem;
  border: 0;
  border-bottom: 2px solid var(--line-faint);  /* 每个页签自带一段线，拼成整条分隔线 */
  background: none;
  font-family: inherit;
  font-size: var(--t-small);
  letter-spacing: var(--couplet-ls);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease);
}

nav button[aria-selected="true"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--c-terracotta);  /* 全站唯一的暖强调，只给当前页签的指示线；
                                                文字保持墨色，因为陶土小字只有 3.51:1 */
}

/* ============================================================
   版心
   ============================================================ */

main {
  max-width: 42rem;
  margin: 0 auto;
  padding: var(--sp-3) var(--gutter)
           calc(var(--sp-5) + env(safe-area-inset-bottom));
}

/* ============================================================
   地图 —— 当"场景"用：拉通整幅、拆掉框，连 leaflet 的圆角和投影一起拆
   ============================================================ */

#map {
  height: clamp(280px, 46vh, 420px);
  /* 负 margin 抵掉版心 gutter：地图通到页面左右边缘，是场景不是框 */
  margin: 0 calc(-1 * var(--gutter)) var(--sp-2);
  background: var(--c-champagne);  /* 瓦片加载前的底，用幕间过渡色 */
  color: var(--ink);
  font-family: var(--f-sans);
  isolation: isolate;  /* 把 leaflet 内部 400–700 的 z-index 关进地图里，
                          sticky 页签(600)才压得住弹层 */
}

/* 给 OSM 底图染一层暖沙，冷灰瓦片才不会从请柬色场里突兀地跳出来 */
#map .leaflet-tile-pane { filter: sepia(0.22) saturate(0.88); }

/* 零容器纪律连地图控件也执行：去圆角、去投影、换色 */
#map .leaflet-bar {
  box-shadow: none;
  border-radius: 0;
}
#map .leaflet-bar a {
  border-radius: 0;
  border-bottom: 1px solid var(--line-faint);
  background: var(--bg-page);
  color: var(--ink);
}
#map .leaflet-bar a:hover {
  background: var(--press);
  color: var(--ink);
}
#map .leaflet-popup-content-wrapper {
  border-radius: 0;
  box-shadow: none;
  background: var(--bg-page);
  color: var(--ink);
}
#map .leaflet-popup-tip {
  box-shadow: none;
  background: var(--bg-page);
}
#map .leaflet-control-attribution {
  background: rgba(246, 239, 230, 0.78);
  color: var(--ink-soft);
  font-size: var(--t-tiny);
}
#map .leaflet-control-attribution a { color: var(--ink-soft); }

/* 地图 pin：色板外的 #c0392b / #2f6fb5 废弃。
   终点 = 陶土锈（图形 3.51:1 ≥ 3:1），我 = 森林绿（9.82:1）。
   尺寸 24→28px；圆点是图形不是容器，允许正圆 */
.pin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--bg-page);  /* 用页面底色描一圈，把点从瓦片上"托"出来 */
}
.pin-end { background: var(--c-terracotta); }
.pin-me  { background: var(--c-forest); }

/* ============================================================
   提示文字
   ============================================================ */

.hint {
  margin: 0 0 var(--sp-2);
  font-size: var(--t-small);
  line-height: 1.8;        /* 提示行数少，可以比正文松一点，接近请柬的呼吸 */
  color: var(--ink-soft);
}

/* ============================================================
   搜索行 + 地址结果 —— 结果是"列表"，不是下拉框
   ============================================================ */

.search-row {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-1);
}
.search-row input { flex: 1; min-width: 0; }   /* min-width:0 让输入框在窄屏真的能被压缩 */
.search-row button { flex-shrink: 0; white-space: nowrap; }

.geo-results { margin-bottom: var(--sp-2); }

.geo-results button {
  display: block;
  width: 100%;
  min-height: 44px;               /* 触控红线 */
  padding: 0.55rem 2px;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-faint);  /* 候选之间只留一条极淡分隔线 */
  font-family: inherit;
  font-size: var(--t-body);
  color: var(--ink);
  overflow-wrap: break-word;      /* 地址可能很长，别撑破版心 */
  cursor: pointer;
  transition: background-color var(--d-fast) var(--ease);
}
.geo-results button:hover { background: var(--press); }  /* 一层光，不是一块板 */

.geo-results .none {
  padding: 0.55rem 2px var(--sp-2);
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* ============================================================
   表单 —— 请柬唯一允许的线：下划线输入，一字不改地继承
   ============================================================ */

label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--t-small);
}

label > span {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--t-tiny);
  letter-spacing: var(--couplet-ls);   /* 字段名当"题签"排 */
  color: var(--ink-soft);
}

input, select, textarea {
  width: 100%;
  min-height: 44px;                   /* 触控红线 */
  padding: 0.45rem 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;  /* 请柬表单原话：唯一允许的线 */
  border-radius: 0;
  font-family: inherit;
  font-size: max(16px, var(--t-body));    /* ≥16px：iOS Safari 聚焦时不再自动放大整页 */
  color: var(--ink);
  transition: border-color var(--d-fast) var(--ease);
}

input::placeholder { color: var(--ink-soft); opacity: 1; }

input:focus, select:focus, textarea:focus {
  outline: none;                        /* 下划线变色即焦点反馈，避免双重指示 */
  border-bottom-color: var(--c-honey);  /* 请柬原话：focus 线归蜂蜜金 */
}

/* ============================================================
   按钮 —— 实底只给主行动；其余是"文字 + 一条会亮起的线"
   ============================================================ */

button.primary, button.ghost,
.card .actions a, .card .actions button {
  font-family: inherit;
  cursor: pointer;
}

/* 主行动：陶土实底白字（红线明确允许的陶土用法），直角、无投影 */
button.primary {
  min-height: 48px;
  padding: 0.8rem 1.2rem;
  background: var(--c-terracotta);
  color: var(--c-on-accent);
  border: 0;
  border-radius: 0;
  font-size: max(16px, var(--t-body));
  font-weight: 600;
  letter-spacing: var(--couplet-ls);
  transition: filter var(--d-fast) var(--ease);
}
button.primary:active { filter: brightness(0.92); }  /* 按压用明度反馈，不加容器 */

/* 次行动：平时是纯文字，悬停 / 聚焦才亮出蜂蜜金细线——线是 affordance */
button.ghost {
  min-height: 44px;
  padding: 0.5rem 0.6rem 0.45rem;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--ink);
  font-size: max(16px, var(--t-body));
  font-weight: 500;
  transition: border-color var(--d-fast) var(--ease);
}
button.ghost:hover,
button.ghost:focus-visible { border-bottom-color: var(--c-honey); }

/* 禁用态换卡其灰而不是降透明：整块 opacity 会把字拖到 4.5:1 以下 */
button:disabled {
  background: none;
  color: var(--c-camel);
  border-bottom-color: transparent;
  cursor: default;
}

/* 姓名手机一行：窄屏允许换行，不再硬挤 */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
}
.row > * { flex: 1 1 9.5rem; }

/* ============================================================
   列表项 —— 卡片已死
   文字直接坐在场景上，项与项之间只留一条极淡分隔线
   ============================================================ */

.card {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line-faint);
}
.card:last-child { border-bottom: 0; }

/* 标题必须能优雅换行：4 字姓名 + 标签在 390px 也要放得下 */
.card h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.55rem;
  margin: 0 0 0.3rem;
  font-family: var(--f-serif);       /* 姓名用衬线，请柬的"人名感" */
  font-size: clamp(1.05rem, 4.4vw, 1.19rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

.card .meta {
  margin: 0 0 0.55rem;
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ink-soft);
  overflow-wrap: break-word;
}

.card .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  margin-top: 0.2rem;
}

.card .actions a, .card .actions button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                  /* 触控红线 */
  padding: 0.5rem 0.15rem 0.45rem;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease);
}
.card .actions a:hover,
.card .actions button:hover { border-bottom-color: var(--c-honey); }

/* 一键拨号是本页的核心行动，配全页唯一的实底按钮 */
.card .actions a.call {
  padding: 0.65rem 1.25rem;
  background: var(--c-terracotta);
  color: var(--c-on-accent);
  font-size: max(16px, var(--t-body));
  font-weight: 600;
  letter-spacing: var(--couplet-ls);
}
.card .actions a.call:hover { border-bottom-color: transparent; }
.card .actions a.call:active { filter: brightness(0.92); }

/* 绕路距离：匹配页的排序依据，姓名之外最醒目的一笔。
   陶土锈只有大字号才合法——这里 ≥20px 粗体，按大文本走 3:1 红线 */
.detour {
  margin: 0.1rem 0 0.35rem;
  font-family: var(--f-serif);
  font-size: clamp(1.25rem, 5.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-terracotta);
}

/* ============================================================
   标签 —— 语义收敛，绿色不再一词两用
     默认 .tag     中性信息（角色 / 座位）：次级灰绿，无点
     .tag.ok       流程终态「已成组 / 成了」：森林绿（9.82:1）
     .tag.warn     匹配质量「时段一致」等中间态：陶土点 + 墨色字
     .tag.off      失效「已坐满 / 已失效」：卡其（3.21:1，本就该弱化）
   每张卡带色点的标签 ≤2 个（渲染端控制数量，样式端控制重量）
   ============================================================ */

.tag {
  font-family: var(--f-sans);       /* 覆盖 h3 继承的衬线，标签保持工具属性 */
  font-size: var(--t-tiny);
  letter-spacing: var(--couplet-ls);
  font-weight: 400;
  color: var(--ink-soft);
  background: none;                 /* 拆掉胶囊底：标签回归文字 */
  border: 0;
  border-radius: 0;
  padding: 0;
}

.tag.ok   { color: var(--c-forest); font-weight: 500; }
.tag.warn { color: var(--ink);      font-weight: 500; }
.tag.off  { color: var(--c-camel); }

/* 色点是小图形不是容器：终态绿点、中间态陶土点（3.51:1 ≥ 图形 3:1） */
.tag.ok::before, .tag.warn::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.38em;
  border-radius: 50%;
  vertical-align: 0.12em;
  background: var(--c-forest);
}
.tag.warn::before { background: var(--c-terracotta); }

/* ============================================================
   失效态 —— 禁止整块 opacity（实测 2.10:1）
   换成卡其灰降饱和：信息还在、还能拨号，只是不再抢戏
   ============================================================ */

.card.unavailable,
.card.unavailable h3,
.card.unavailable .meta,
.card.unavailable .detour { color: var(--c-camel); }

.card.unavailable .tag,
.card.unavailable .tag.ok,
.card.unavailable .tag.warn { color: var(--c-camel); font-weight: 400; }
.card.unavailable .tag::before { background: var(--c-camel); }

.card.unavailable .actions a,
.card.unavailable .actions button { color: var(--c-camel); }
.card.unavailable .actions a:hover,
.card.unavailable .actions button:hover { border-bottom-color: var(--c-camel); }

/* 实底退场，但拨号仍可点：44px 热区不变，用一条卡其线保留 affordance */
.card.unavailable .actions a.call {
  background: none;
  color: var(--c-camel);
  font-weight: 400;
  border-bottom: 1px solid var(--c-camel);
}

/* ============================================================
   分组标题 —— 计数拆掉胶囊，回归文本
   ============================================================ */

.group-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: var(--sp-3) 0 var(--sp-1);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: var(--couplet-ls);
  color: var(--ink-soft);
}
.group-title:first-child { margin-top: 0; }

.group-title .count {
  font-size: var(--t-tiny);
  font-weight: 400;
  color: var(--ink-soft);
}

/* ============================================================
   Toast / 空态
   ============================================================ */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sp-2) + env(safe-area-inset-bottom));  /* 避开 iPhone 底部横条 */
  transform: translateX(-50%);
  max-width: min(92vw, 30rem);
  padding: 0.75rem 1.25rem;
  background: var(--c-forest-dp);   /* 深森林代替黑 */
  color: var(--ink-invert);
  font-size: var(--t-small);
  letter-spacing: var(--couplet-ls);
  text-align: center;
  border-radius: 0;                 /* 直角实底，无投影：一块沉下来的色，不是一个浮着的胶囊 */
  z-index: 2000;                    /* 压过页签(600)与 leaflet 弹层 */
}
.toast:not([hidden]) {
  animation: toast-in var(--d-mid) var(--ease) both;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 0.5rem); }
}

.empty {
  padding: var(--sp-4) 0;
  text-align: center;
  font-size: var(--t-small);
  letter-spacing: var(--couplet-ls);
  color: var(--ink-soft);
}

/* ============================================================
   动效偏好：用户要求减动效时全部让路
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ------------------------------------------------------------
   给 app.js 的同步说明（本文件引入的新钩子 / 语义重映射）
   1. .detour —— 绕路距离单独成行，建议结构：
      <h3>姓名 + 标签</h3> <p class="detour">绕路 2.3 km</p> <p class="meta">…
      它是匹配页排序依据，样式已按"姓名之后最重的一笔"处理。
   2. .pin / .pin-end / .pin-me —— 地图 divIcon 请改成
      <div class="pin pin-end"></div>（集合点）/ <div class="pin pin-me"></div>（我），
      删掉内联色 #c0392b / #2f6fb5；尺寸 24→28px，iconAnchor 同步改 [14,14]。
   3. 标签类目重映射：已成组/成了 → .tag.ok；时段一致等匹配质量 → .tag.warn；
      已坐满/已失效 → .tag.off；角色/座位等中性信息 → 裸 .tag。
      每张卡带色点的标签 ≤2 个，多余的降为 meta 文本。
   4. renderAll：「有车 · 3 座」与「空 3 座」信息重复，二选一
      （如司机卡写「可带 3 人」、乘客卡写「找 3 座」），无需新类。
   5. header 不用改：h1 字体栈里 Amatic SC 只含拉丁字形，
      "9/12" 自动手写体、中文自动落 --f-sans。
   ------------------------------------------------------------ */
/* ============================================================
   出发时间滑块
   出发时间从三个时段换成了 10:00–14:00 的连续滑块。
   轨道是一条线、滑块是一个陶土圆点——仍然是"线和点"，没有容器。
   ============================================================ */

.time-field > span { display: flex; align-items: baseline; gap: 0.5rem; }
.time-field > span b {
  font-family: var(--f-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-terracotta);   /* ≥20px 粗体，走大文本 3:1 */
  line-height: 1;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 44px;             /* 触控红线：整条都是热区 */
  padding: 0;
  background: none;
  border: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--line-faint);
}
input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--line-faint);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -12px;            /* 把 26px 的点压回 2px 轨道中线 */
  border-radius: 50%;           /* 圆点是图形不是容器 */
  border: 3px solid var(--bg-page);
  background: var(--c-terracotta);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--bg-page);
  background: var(--c-terracotta);
  cursor: pointer;
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--c-honey);
  outline-offset: 2px;
}

.range-ends {
  display: flex;
  justify-content: space-between;
  margin-top: -0.35rem;
}
.range-ends i {
  font-style: normal;
  font-size: var(--t-tiny);
  color: var(--ink-soft);
}

/* ============================================================
   微信名 —— 取代原来的一键拨号
   大家都在同一个婚礼群里，报微信名就能找到人，不需要按钮语义，
   所以它是一段可选中的文字，不是控件。
   ============================================================ */
.wechat {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--c-forest);        /* 9.82:1 */
  user-select: all;              /* 一点就全选，方便复制到群里搜 */
}
.card.unavailable .wechat { color: var(--c-camel); }

/* ============================================================
   行程切换栏 —— 底部固定
   这是外层导航：切完之后上面三个页签的内容整体换成那一段行程。
   放底部是因为手机上拇指够得到，而且它比页签的层级更高，
   放顶部会和「我的登记/找人拼车/全部宾客」抢注意力。
   ============================================================ */
.tripbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  /* 顶部页签那条 `nav { position:sticky; top:0 }` 会一起套到这里，
     top 和 bottom 同时为 0 会把它撑满整个视口高度，必须显式解掉 */
  top: auto;
  padding-top: 0;
  z-index: 900;
  display: flex;
  background: var(--bg-page);
  border-top: 1px solid var(--line-faint);
  padding-bottom: env(safe-area-inset-bottom);   /* 避开 iPhone 底部横条 */
}
.tripbar button {
  flex: 1;
  min-height: 56px;              /* 比 44px 再宽裕些，这是最常戳的地方 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--d-fast) var(--ease);
}
.tripbar button b {
  font-family: var(--f-serif);
  font-size: 1rem;
  font-weight: 600;
}
.tripbar button i {
  font-style: normal;
  font-size: var(--t-tiny);
  opacity: .75;
}
/* 选中态：陶土色 + 顶上一条短线。不画底板，仍是"线和字"那套语言 */
.tripbar button[aria-pressed="true"] {
  color: var(--c-terracotta);
}
.tripbar button[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  top: -1px;
  width: 2.2rem;
  height: 2px;
  background: var(--c-terracotta);
}
.tripbar button { position: relative; }

/* 底部固定栏会盖住内容，给正文留出让位 */
main { padding-bottom: calc(56px + var(--sp-3) + env(safe-area-inset-bottom)); }

/* 当前在填哪一段的提示 */
.trip-note {
  margin: 0 0 var(--sp-2);
  font-size: var(--t-small);
  color: var(--c-forest);
  border-left: 2px solid var(--c-honey);
  padding-left: 0.6rem;
}

/* 距离下面那句"正好顺路 / 要绕 X km" */
.card .detour i {
  font-style: normal;
  font-size: var(--t-tiny);
  font-weight: 400;
  color: var(--ink-soft);
  margin-left: 0.5rem;
}

/* 行程说明里的重点句（比如仪式时间），单独成行并压重 */
.trip-note b {
  display: block;
  margin-top: 0.35rem;
  font-weight: 600;
  color: var(--c-terracotta);
}

/* 行程说明里的操作提示（比另一段的关系、要不要重填），比正文轻一档 */
.trip-note i {
  display: block;
  margin-top: 0.3rem;
  font-style: normal;
  font-size: var(--t-tiny);
  color: var(--ink-soft);
}

/* 撤销态的按钮：降到最轻，避免和主操作抢注意力，但仍是 44px 热区 */
.card .actions button.undo {
  color: var(--c-camel);
  border-bottom-color: var(--c-camel);
}

/* 司机卡片上"车上已经有谁" */
.card .riding {
  margin: 0.2rem 0 0.35rem;
  font-size: var(--t-small);
  color: var(--c-forest);
}

/* 「我这一车」——已经定下来的关系，用森林绿的左边线标出来，
   和下面待联系的候选拉开层次 */
.card.grouped {
  border-left: 2px solid var(--c-forest);
  padding-left: 0.7rem;
}

/* 「这一车开去哪」——同车区块的终点说明 */
.hint.dest {
  color: var(--c-forest);
  margin-bottom: var(--sp-1);
}
.card.grouped .meta i {
  font-style: normal;
  margin-left: 0.5rem;
  color: var(--ink-soft);
}

/* ============================================================
   状态配色 —— 一眼分出"还能约的"和"已经定了的"
   用左边一条竖线上色，不画底板；线是这套语言允许的。
   ============================================================ */

/* 还有空位的车：森林绿（9.82:1） */
.card.open-car { border-left: 3px solid var(--c-forest); padding-left: 0.7rem; }
.card.open-car h3 { color: var(--c-forest); }

/* 还在等车的人：陶土（3.51:1，作为图形达标） */
.card.waiting { border-left: 3px solid var(--c-terracotta); padding-left: 0.7rem; }

/* 已经满的车 / 已经找到车的人：暗底 + 卡其线，整体退到后面。
   opacity 只压到 .9 —— 实测再低正文就掉到 4.5:1 以下，
   这些卡片留在列表里是为了让人看清"这辆车满了"，读不清就失去意义。 */
.card.spent {
  border-left: 3px solid var(--c-camel);
  padding-left: 0.7rem;
  background: #e9ded0;
  opacity: .9;
}
.card.spent h3,
.card.spent .detour { color: var(--ink-soft); }
.card.spent .detour i { color: var(--c-camel); }

/* 车主自己加减空座 —— 数字两边各一个按钮，就地改，不用回表单 */
.seats-ctl {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.4rem;
  color: var(--ink);
}
.seats-ctl b {
  font-family: var(--f-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-terracotta);   /* ≥20px 粗体，走大文本 3:1 */
  min-width: 1.1em;
  text-align: center;
}
.seats-ctl button {
  min-width: 44px;
  min-height: 44px;             /* 触控红线 */
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--c-forest);
  cursor: pointer;
}
.seats-ctl button:active { color: var(--c-terracotta); }

/* 加减控件后面跟着说明文字，留出间隔 */
.seats-ctl { margin-right: 0.5rem; }

/* ============================================================
   拼车组 —— 乘客之间约好一起走的一组人
   用蜂蜜金的左边线区分：既不是"有车的"（绿），也不是单个"等车的"（陶土），
   而是已经抱团、等着被整车捎走的一撮。
   ============================================================ */
.card.ridergroup {
  border-left: 3px solid var(--c-honey);
  padding-left: 0.7rem;
}
.card.ridergroup.mine {
  border-left-color: var(--c-forest);   /* 我在的那组，用和"已定下来"一致的绿 */
}
.card.ridergroup h3 { font-family: var(--f-sans); font-size: 1rem; }
.card.ridergroup .actions button[disabled] {
  color: var(--c-camel);
  border-bottom-color: transparent;
}