/* ===== 桌面组件编辑弹窗 ===== */
/* 版式照抄 avatar-picker.css 的那张卡（scrim + 缩放淡入 + 中英标题），
 * 但不复用它的类名：那份文件写死了「只写选头像的通用样式」。
 * 本文件同样禁止出现 backdrop-filter —— 弹窗背后就是玻璃桌面，再叠一层会糊。 */
.hwe-modal {
  position: absolute;          /* #app 是 position: relative，见 base.css */
  inset: 0;
  z-index: 14;                 /* 高于主屏与「完成」按钮，低于 .ap-modal 的 15：选图那张卡要盖在本卡之上 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 安全区一律用加法，不能用 max() */
  padding: calc(24px + var(--sat)) 20px calc(24px + var(--sab));
}

/* hidden 属性来自 UA 样式表，上面的 display 会盖掉它，这里补一条更高优先级的 */
.hwe-modal[hidden] { display: none; }

.hwe-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  touch-action: none;                /* 在遮罩上拖动不会带着后面的桌面翻页 */
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.hwe-modal.show .hwe-scrim { opacity: 1; }

.hwe-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  max-height: 100%;
  padding: 22px 18px 18px;
  border-radius: 28px;
  background: var(--c-bg);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;      /* 卡片滚到头不把滚动链传给背后的桌面 */
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.hwe-modal.show .hwe-card {
  opacity: 1;
  transform: scale(1);
}

/* 标题是组件名（拍立得 / 日记卡片 / 韩系对话），由 JS 每次打开时写入 */
.hwe-title {
  margin: 0;
  text-align: center;
  font-size: var(--page-title-size);
  font-weight: var(--page-title-weight);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--c-text);
}

.hwe-eyebrow {
  margin: -5px 0 4px;
  text-align: center;
  /* letter-spacing 会在最后一个字母后面也加一份，居中文本要补等量左边距抵消 */
  margin-left: 0.18em;
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-hint);
}

.hwe-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 图片项：一行并排（目前最多两张），每张下面挂自己的标签 */
.hwe-imgs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 2px 0 4px;
}

.hwe-thumb {
  flex: 0 1 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  transition: transform 0.15s var(--ease);
}
.hwe-thumb:active { transform: scale(0.97); }

/* 方图统一 16px 圆角，不跟组件里的形状走 —— 弹窗里三个组件的图要看起来是一套 */
.hwe-thumb-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--c-surface-2);
}
.hwe-thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

.hwe-thumb-label {
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: 1.2;
  color: var(--c-sub, rgba(0, 0, 0, 0.45));
}

.hwe-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hwe-label {
  padding-left: 4px;
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: 1.2;
  color: var(--c-sub, rgba(0, 0, 0, 0.45));
}

.hwe-box {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
}

.hwe-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  /* 必须 >= 16px，否则 iOS 一聚焦就把整页放大 */
  font-size: 16px;
  color: var(--c-text);
  -webkit-appearance: none;
  appearance: none;
}
.hwe-input::placeholder { color: var(--c-hint); }

.hwe-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.hwe-btn {
  flex: 1;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  font-size: var(--row-name-size);
  font-weight: var(--row-name-weight);
  color: var(--c-text);
  transition: transform 0.15s var(--ease), background var(--dur) var(--ease);
}
.hwe-btn:active {
  transform: scale(0.97);
  background: var(--c-surface-3);
}

.hwe-btn-primary {
  background: var(--c-accent-dark);
  color: var(--c-bg);
}
.hwe-btn-primary:active { background: var(--c-text); }

/* 减弱动态效果：去掉缩放，只保留淡入 */
@media (prefers-reduced-motion: reduce) {
  .hwe-card {
    transform: none;
    transition: opacity 0.15s linear;
  }
  .hwe-modal.show .hwe-card { transform: none; }
  .hwe-btn:active,
  .hwe-thumb:active { transform: none; }
}