/* ============================================================
   sheet.css · L3 详情、照片墙、上传进度、地点表单
   内容顺序（AC-08/10）：名称 → 日期时间 → 留言 → 特殊内容 → 照片墙
   色值一律引用 tokens.css
   ============================================================ */

/* ── 详情 sheet 容器 ── */
.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));
  scrollbar-width:none;
}
.cmm-sheet__body::-webkit-scrollbar { display:none; }

/* ── 详情内容（顺序锁定） ── */
.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);
}

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

/* ── 特殊内容（电影海报等，AC-10） ── */
.cmm-sheet__special {
  border-radius:var(--r-card);
  padding:var(--sp-4);
  background:var(--warm-yellow);
  box-shadow:var(--shadow-card);
}

.cmm-sheet__special-label {
  margin:0 0 var(--sp-3);
  font-size:13px;
  font-weight:600;
  color:var(--ink);
}

.cmm-sheet__special-img {
  width:100%;
  border-radius:var(--r-chip);
  display:block;
}

/* ── 照片墙 ── */
.cmm-photowall {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--sp-2);
}

.cmm-photo {
  position:relative;
  border-radius:var(--r-chip);
  overflow:hidden;
  background:var(--blue-100);
  /* width/height 由 JS 内联设置 aspect-ratio 预留，避免加载抖动 */
}

.cmm-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  cursor:zoom-in;
}

/* 上传者小字角标（D-03：小字号、低对比度、不遮主体；空值不渲染） */
.cmm-photo__badge {
  position:absolute;
  bottom:var(--sp-1);
  left:var(--sp-1);
  padding:1px var(--sp-1);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.85);
  font-size:10px;
  color:var(--ink-soft);
  line-height:1.4;
  pointer-events:none;
}

/* 照片墙添加按钮 */
.cmm-photo-add {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--sp-1);
  min-height:96px;
  border-radius:var(--r-chip);
  border:1.5px dashed var(--blue-300);
  background:rgba(255,255,255,.4);
  color:var(--blue-600);
  font-size:12px;
}
.cmm-photo-add:active { transform:scale(.97); }
.cmm-photo-add svg { width:22px; height:22px; }

/* ── 上传进度行 ── */
.cmm-uploadrow {
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-chip);
  background:rgba(255,255,255,.7);
  font-size:13px;
  color:var(--ink);
}

.cmm-uploadrow__bar {
  flex:1;
  height:4px;
  border-radius:var(--r-pill);
  background:var(--blue-100);
  overflow:hidden;
}

.cmm-uploadrow__fill {
  height:100%;
  width:0%;
  border-radius:var(--r-pill);
  background:var(--blue-600);
  transition:width var(--d-fast) var(--ease-out);
}

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

.cmm-uploadrow--failed { box-shadow:inset 0 0 0 1.5px var(--pink); }
.cmm-uploadrow__retry {
  flex:none;
  min-height:32px;
  padding:0 var(--sp-3);
  border-radius:var(--r-pill);
  background:var(--pink);
  color:var(--ink);
  font-size:12px;
  font-weight:500;
}

/* ── 地点表单 ── */
.cmm-form {
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  padding:var(--sp-2) 0 var(--sp-4);
}

.cmm-form__label {
  display:block;
  margin-bottom:var(--sp-1);
  font-size:13px;
  font-weight:600;
  color:var(--ink-soft);
}

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

/* ── 更多操作菜单 ── */
.cmm-menu {
  position:absolute;
  right:var(--sp-4);
  top:var(--sp-2);
  z-index:calc(var(--z-sheet) + 1);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  padding:var(--sp-2);
  display:flex;
  flex-direction:column;
  gap:var(--sp-1);
  min-width:160px;
}

.cmm-menu__item {
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  min-height:var(--hit);
  padding:0 var(--sp-3);
  border-radius:var(--r-chip);
  font-size:14px;
  color:var(--ink);
  text-align:left;
  width:100%;
}
.cmm-menu__item:active { background:var(--blue-100); }
.cmm-menu__item--danger { color:var(--pink); }