/* ============================================================
   drawer.css · 抽屉三档吸附、城市卡、地点列表、占位卡（D-02）
   色值一律引用 tokens.css
   ============================================================ */

/* ── 抽屉容器（三档：collapsed/half/full） ── */
.cmm-drawer {
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:var(--z-drawer);
  height:calc(var(--drawer-full) + var(--safe-b));
  border-radius:var(--r-card) var(--r-card) 0 0;
  box-shadow:var(--shadow-card);
  display:flex;
  flex-direction:column;
  /* JS 拖拽时关闭 transition，松手吸附时打开 */
  transition:transform var(--d-base) var(--ease-out);
  will-change:transform;
}
.cmm-drawer.is-dragging { transition:none; }

/* 三档 translate 值由 JS 计算（基于 --drawer-* 变量），这里是初始态 */
.cmm-drawer[data-snap="collapsed"] { transform:translateY(calc(var(--drawer-full) - var(--drawer-collapsed))); }
.cmm-drawer[data-snap="half"] { transform:translateY(calc(var(--drawer-full) - var(--drawer-half))); }
.cmm-drawer[data-snap="full"] { transform:translateY(0); }

/* 抓手 */
.cmm-drawer__grab {
  flex:none;
  width:44px;
  height:5px;
  margin:var(--sp-2) auto var(--sp-1);
  border-radius:var(--r-pill);
  background:var(--blue-200);
  cursor:grab;
}

/* ── 抽屉内容区 ── */
.cmm-drawer__body {
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:0 var(--sp-4) calc(var(--safe-b) + var(--sp-5));
  scrollbar-width:none;
}
.cmm-drawer__body::-webkit-scrollbar { display:none; }

.cmm-drawer__inner {
  max-width:520px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}

/* ── 城市卡（L1） ── */
.cmm-citycard {
  border-radius:var(--r-card);
  padding:var(--sp-5) var(--sp-5) var(--sp-4);
  box-shadow:var(--shadow-card);
  text-align:left;
  width:100%;
  min-height:var(--hit);
  transition:transform var(--d-fast) var(--ease-out);
}
.cmm-citycard:active { transform:scale(.98); }

.cmm-citycard__name {
  margin:0;
  font-size:22px;
  font-weight:600;
  color:var(--ink);
}

.cmm-citycard__daterange {
  margin:var(--sp-1) 0 var(--sp-3);
  font-size:13px;
  color:var(--ink-soft);
}

.cmm-citycard__meta {
  display:flex;
  gap:var(--sp-3);
  font-size:13px;
  color:var(--ink-soft);
}

.cmm-citycard__meta b {
  color:var(--ink);
  font-weight:600;
  margin-right:var(--sp-1);
}

/* ── 「下一站」占位卡（D-02 / §9.4.3） ── */
/* 纯前端 DOM，不入库；虚线边框 + 更淡背景；不可点击；不显示统计数字 */
.cmm-nextstop {
  border-radius:var(--r-card);
  padding:var(--sp-5);
  border:1.5px dashed var(--blue-300);
  background:rgba(255,255,255,.45);
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  pointer-events:none;              /* 不可点击（D-02 第 3 条） */
  aria-disabled:true;
  transition:transform 220ms var(--ease-out);
}

.cmm-nextstop__icon {
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:var(--r-pill);
  background:var(--blue-100);
  color:var(--blue-600);
}
.cmm-nextstop__icon svg { width:24px; height:24px; display:block; }

.cmm-nextstop__body { flex:1; min-width:0; }

.cmm-nextstop__title {
  margin:0;
  font-size:16px;
  font-weight:600;
  color:var(--ink-soft);
}

.cmm-nextstop__sub {
  margin:var(--sp-1) 0 0;
  font-size:13px;
  color:var(--ink-soft);
}

/* ── 地点列表（L2） ── */
.cmm-placelist {
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}

.cmm-placeitem {
  position:relative;
  display:flex;
  gap:var(--sp-3);
  align-items:flex-start;
  width:100%;
  min-height:var(--hit);
  padding:var(--sp-4);
  border-radius:var(--r-card);
  text-align:left;
  box-shadow:var(--shadow-card);
  transition:transform var(--d-fast) var(--ease-out);
}
.cmm-placeitem:active { transform:scale(.98); }
.cmm-placeitem.is-selected { box-shadow:var(--shadow-card), inset 0 0 0 2px var(--blue-600); }

.cmm-placeitem__seq {
  flex:none;
  width:30px;
  height:30px;
  margin-top:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-pill);
  background:var(--blue-600);
  color:var(--white);
  font-size:14px;
  font-weight:600;
  box-shadow:var(--shadow-pin);
}

.cmm-placeitem__seq--special {
  background:var(--pink);
  color:var(--ink);
}

.cmm-placeitem__body { flex:1; min-width:0; }

.cmm-placeitem__name {
  margin:0;
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  line-height:1.4;
}

.cmm-placeitem__subname {
  margin:2px 0 0;
  font-size:12px;
  color:var(--ink-soft);
  line-height:1.5;
}

.cmm-placeitem__time {
  margin:var(--sp-2) 0 0;
  font-size:12px;
  color:var(--ink-soft);
}

.cmm-placeitem__arrow {
  flex:none;
  align-self:center;
  color:var(--ink-soft);
}