/* ============================================================
   layout.css · 层级骨架：头部、主滚动区、城市卡、地点列表、
   详情 sheet、地图容器占位、飞行 veil
   T03 阶段无地图：#cmm-map 是渐变占位层，T04 挂载真实地图并补齐
   叠层/veil/降级插画样式。色值一律引用 tokens。
   ============================================================ */

/* ── 全屏容器 ── */
.cmm-root {
  position:fixed;
  inset:0;
  overflow:hidden;
}

/* ── 地图容器占位（T04 替换为真实地图） ── */
.cmm-map {
  position:absolute;
  inset:0;
  z-index:var(--z-map);
  background:var(--bg-gradient);
}

/* 地图柔化叠层（T04 启用；先就位，避免后续改 layout 结构） */
.cmm-map__tone {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:var(--z-map-tone);
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(191,224,251,.55) 100%),
    linear-gradient(180deg, rgba(201,228,251,.30) 0%, rgba(240,248,255,.18) 100%);
  mix-blend-mode:soft-light;
}

/* 飞行遮罩（T04 的 L1→L2 飞行时序用；T03 预置） */
.cmm-map__veil {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:var(--z-map-veil);
  opacity:0;
  background:radial-gradient(80% 60% at 50% 45%, rgba(240,248,255,.9) 0%, rgba(220,239,254,.75) 100%);
  transition:opacity var(--d-base) var(--ease-out);
}
.cmm-map__veil.is-flying { opacity:1; }

/* ── 顶部标题区 ── */
.cmm-header {
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:var(--z-header);
  padding:calc(var(--safe-t) + var(--sp-4)) var(--sp-4) var(--sp-4);
  text-align:center;
  pointer-events:none;   /* 标题不挡下层点击，按钮单独放开 */
}

.cmm-header__title {
  margin:0;
  font-size:20px;
  font-weight:600;
  letter-spacing:.5px;
  color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}

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

/* 漂浮爱心容器（animations.css 负责动效） */
.cmm-hearts {
  position:absolute;
  top:calc(var(--safe-t) + var(--sp-2));
  left:0;
  right:0;
  height:120px;
  z-index:var(--z-hearts);
  pointer-events:none;
  overflow:hidden;
}

/* ── L2 返回条（T03 详情态复用为返回条） ── */
.cmm-backbar {
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:var(--z-header);
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  min-height:var(--hit);
  padding:calc(var(--safe-t) + var(--sp-1)) var(--sp-2) var(--sp-1);
  pointer-events:none;
}
.cmm-backbar > * { pointer-events:auto; }

.cmm-backbar__title {
  flex:1;
  min-width:0;
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
}

.cmm-backbar__meta {
  width:var(--hit);
  flex:none;
  text-align:right;
  font-size:12px;
  color:var(--ink-soft);
}

/* ── 主滚动区（T03 的城市卡 + 地点列表都住在这里） ── */
.cmm-main {
  position:absolute;
  inset:0;
  z-index:var(--z-drawer);
  padding:calc(var(--safe-t) + 96px) var(--sp-4) calc(var(--safe-b) + var(--sp-6));
}

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

/* ── 城市卡 ── */
.cmm-citycard {
  border-radius:var(--r-card);
  padding:var(--sp-5) var(--sp-5) var(--sp-4);
  box-shadow:var(--shadow-card);
}

.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);
}

/* ── 地点列表 ── */
.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__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);
}

/* ── 详情 sheet（T03 简化版：底部滑出卡，T05 换 placeSheet.js 完整版） ── */
.cmm-sheet {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:var(--z-sheet);
  max-height:86vh;
  display:flex;
  flex-direction:column;
  border-radius:var(--r-card) var(--r-card) 0 0;
  box-shadow:var(--shadow-card);
  transform:translateY(100%);
  transition:transform var(--d-base) var(--ease-out);
}
.cmm-sheet.is-open { transform:translateY(0); }

.cmm-sheet__grab {
  flex:none;
  width:44px;
  height:5px;
  margin:var(--sp-2) auto var(--sp-1);
  border-radius:var(--r-pill);
  background:var(--blue-200);
}

.cmm-sheet__body {
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:var(--sp-2) var(--sp-5) calc(var(--safe-b) + var(--sp-5));
}

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

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

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

/* 留言区：名称 → 日期时间 → 留言（AC-08 顺序在 T03 即锁定） */
.cmm-sheet__section {
  margin-top:var(--sp-5);
}

.cmm-sheet__sectiontitle {
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  margin:0 0 var(--sp-2);
  font-size:13px;
  font-weight:600;
  color:var(--ink-soft);
  letter-spacing:.5px;
}

.cmm-sheet__sectiontitle .cmm-icon-btn { margin-left:auto; margin-right:calc((var(--hit) - 22px) / -2); }

.cmm-sheet__message {
  margin:0;
  font-size:16px;
  line-height:1.8;
  color:var(--ink);
  white-space:pre-wrap;
  word-break:break-word;
}

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

.cmm-sheet__actions {
  display:flex;
  gap:var(--sp-3);
  margin-top:var(--sp-4);
}

/* ── 空态 ── */
.cmm-empty {
  padding:var(--sp-6) var(--sp-4);
  text-align:center;
  color:var(--ink-soft);
  font-size:14px;
}

/* ============================================================
   地图降级插画（T04 / §七 降级动作 1）
   ============================================================ */
.cmm-mapfail {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--sp-3);
  padding:var(--sp-6) var(--sp-5);
  background:var(--bg-gradient);
  text-align:center;
}

/* 手绘感插画：虚线地球轮廓 + 心形 */
.cmm-mapfail__art {
  position:relative;
  width:120px;
  height:120px;
  margin-bottom:var(--sp-2);
}

.cmm-mapfail__globe {
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2.5px dashed var(--blue-300);
  animation:cmm-globe-spin 24s linear infinite;
}
@keyframes cmm-globe-spin {
  to { transform:rotate(360deg); }
}

.cmm-mapfail__heart {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  color:var(--pink);
}
.cmm-mapfail__heart svg { width:48px; height:48px; display:block; }

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

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

.cmm-mapfail__retry { min-width:180px; }

@media (prefers-reduced-motion: reduce) {
  .cmm-mapfail__globe { animation:none; }
}

/* ============================================================
   位置拾取（T04 / §9.3）
   ============================================================ */
.cmm-picker__pin {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -100%);
  z-index:var(--z-fab);
  pointer-events:none;
  color:var(--ink);
  filter:drop-shadow(0 4px 8px rgba(36,64,95,.3));
}
.cmm-picker__pin svg { width:44px; height:56px; display:block; }

.cmm-picker__tip {
  position:absolute;
  top:calc(var(--safe-t) + 64px);
  left:50%;
  transform:translateX(-50%);
  z-index:var(--z-modal);
  max-width:86vw;
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-chip);
  font-size:14px;
  color:var(--ink);
  box-shadow:var(--shadow-card);
}

/* ============================================================
   新增地点 FAB（L2，[data-requires-map]，T05 接入完整逻辑）
   ============================================================ */
.cmm-fab {
  position:absolute;
  right:var(--sp-5);
  bottom:calc(var(--safe-b) + var(--sp-6));
  z-index:var(--z-fab);
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-pill);
  background:var(--blue-600);
  color:var(--white);
  box-shadow:var(--shadow-pin);
  transition:transform var(--d-fast) var(--ease-out);
}
.cmm-fab:active { transform:scale(.93); }
.cmm-fab svg { width:24px; height:24px; display:block; }

/* ============================================================
   口令层（DECISIONS.md D-03：身份二选一 + 口令输入）
   ============================================================ */
.cmm-passcode {
  position:fixed;
  left:50%;
  bottom:calc(var(--safe-b) + var(--sp-4));
  transform:translate(-50%, 0);
  z-index:calc(var(--z-modal) + 1);
  width:min(92vw, 420px);
  border-radius:var(--r-card);
  padding:var(--sp-5) var(--sp-5) calc(var(--sp-5) - var(--sp-1));
  box-shadow:var(--shadow-card);
  animation:cmm-passcode-in var(--d-base) var(--ease-out) both;
}

.cmm-passcode__close {
  position:absolute;
  top:var(--sp-1);
  right:var(--sp-1);
}

.cmm-passcode__title {
  margin:0 0 var(--sp-2);
  font-size:17px;
  font-weight:600;
  color:var(--ink);
  text-align:center;
}

.cmm-passcode__hint {
  margin:0 0 var(--sp-4);
  font-size:13px;
  color:var(--ink-soft);
  text-align:center;
}

/* 身份二选一：两个大按钮，热区 ≥44px，默认不预选（D-03） */
.cmm-passcode__who {
  display:flex;
  gap:var(--sp-3);
  margin-bottom:var(--sp-4);
}

.cmm-passcode__who-btn {
  flex:1;
  min-height:56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  border-radius:var(--r-chip);
  background:rgba(255,255,255,.7);
  box-shadow:inset 0 0 0 1.5px var(--blue-200);
  color:var(--ink);
  font-size:15px;
  font-weight:500;
  transition:box-shadow var(--d-fast) var(--ease-out),
             background var(--d-fast) var(--ease-out),
             transform var(--d-fast) var(--ease-out);
}
.cmm-passcode__who-btn:active { transform:scale(.97); }
.cmm-passcode__who-btn small {
  font-size:11px;
  font-weight:400;
  color:var(--ink-soft);
}
.cmm-passcode__who-btn.is-selected {
  background:var(--blue-100);
  box-shadow:inset 0 0 0 2px var(--blue-600);
}

.cmm-passcode__input {
  margin-bottom:var(--sp-3);
}

.cmm-passcode__error {
  min-height:20px;
  margin:0 0 var(--sp-3);
  font-size:13px;
  color:var(--ink);
  text-align:center;
  box-shadow:inset 0 0 0 1.5px var(--pink);
  border-radius:var(--r-chip);
  padding:var(--sp-1) var(--sp-3);
  background:rgba(255,255,255,.6);
}
.cmm-passcode__error:empty { box-shadow:none; background:none; padding:0; }

.cmm-passcode__submit { width:100%; }