/* ============================================================
   artifacts.css — 照片串 (Photo strip) / 宝丽来 / 任务标签
   1:1 移植自 uiux/artifacts.css（主题A）
   ============================================================ */

/* ---------------- PHOTO STRIP ---------------- */
.ps {
  background: #fbf7ec;
  box-shadow: 0 2px 4px rgba(40, 34, 20, 0.1), 0 26px 50px -22px rgba(40, 34, 20, 0.42);
  position: relative;
  font-family: var(--font-mono);
  color: var(--rcpt-ink);
}

.ps-body {
  position: relative;
  padding: 18px 18px 16px;
}

.ps--thermal .ps-body {
  padding-top: 22px;
  padding-bottom: 24px;
}

/* header */
.ps-head-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.ps-head-top .ps-title {
  margin: 0 0 6px;
}

.ps-head-top .ps-no {
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 1.1;
}

.ps-brandmark {
  display: block;
  height: 40px;
  width: auto;
  object-fit: contain;
}

.ps-no {
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.ps-title {
  font-family: var(--font-serif-cn);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
  margin: 12px 0 6px;
  line-height: 1.1;
  color: var(--rcpt-ink);
}

.ps-headmeta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #6b6453;
  white-space: nowrap;
  overflow: hidden;
}

.ps-headmeta--extra {
  margin-top: 3px;
}

.ps-dot {
  font-size: 5px;
  color: #b9ad90;
  transform: translateY(-1px);
}

.ps-rule {
  height: 0;
  border-top: 1.5px dashed #c8bb9c;
  margin: 13px 0;
}

/* photo stack */
.ps-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
}

.ps-photo {
  margin: 0;
}

.ps-photo-img {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, #e9dec3, #d8c9a6);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(40, 34, 20, 0.18);
  overflow: hidden;
}

.ps-photo-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* 定制：照片固定比例（原图比例不加类）→ 图片 cover 裁剪填满 */
.ps-photo-img.ps-ratio-square {
  aspect-ratio: 1 / 1;
}

.ps-photo-img.ps-ratio-43 {
  aspect-ratio: 4 / 3;
}

.ps-ratio-square img,
.ps-ratio-43 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ps-sticker {
  position: absolute;
  display: block;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
  pointer-events: none;
}

.ps-sticker svg {
  display: block;
  width: 100%;
  height: auto;
}

.ps-tasklabel {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fbf7ec;
  border: 1.5px solid var(--rcpt-ink);
  color: var(--rcpt-ink);
  padding: 3px 8px 3px 5px;
  border-radius: 3px;
  font-family: var(--font-cn);
  font-weight: 700;
  font-size: 11px;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.18);
}

.ps-tasklabel .ic {
  width: 15px;
  height: 15px;
  display: inline-flex;
}

.ps-tasklabel .ic svg {
  width: 100%;
  height: 100%;
}

.ps-tasklabel em {
  font-style: normal;
  letter-spacing: 0.04em;
}

.ps-cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 7px;
}

.ps-task {
  font-family: var(--font-cn);
  font-size: 12.5px;
  color: var(--rcpt-ink);
  line-height: 1.35;
  text-wrap: pretty;
}

.ps-meta {
  font-size: 10px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* text-only card（完成但没拍照） */
.ps-textcard {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1.5px dashed var(--rcpt-ink);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.35);
}

.ps-textcard-ic {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1.5px solid var(--rcpt-ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.ps-textcard-ic svg {
  width: 100%;
  height: 100%;
}

.ps-textcard-task {
  display: block;
  font-family: var(--font-cn);
  font-size: 12.5px;
  color: var(--rcpt-ink);
}

.ps-textcard-tag {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  opacity: 0.7;
  margin-top: 2px;
  color: var(--rcpt-ink);
}

/* footer */
.ps-foot {
  margin-top: 16px;
}

.ps-note {
  font-family: var(--font-serif-cn);
  font-style: italic;
  font-size: 14px;
  color: var(--rcpt-ink);
  margin: 0 0 14px;
  line-height: 1.5;
  text-wrap: pretty;
}

.ps-sign {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.ps-sign svg {
  opacity: 0.9;
}

.ps-signlock {
  display: flex;
  flex-direction: column;
}

.ps-signmark {
  font-family: var(--font-serif-cn);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
}

/* 分享行：两行（扫一扫 / 接力完成这组任务），整体浅灰 */
.ps-signmark--share {
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: #a39a86;
}

/* 首行「扫一扫」：尽量加粗（字体不支持时仅维持浅灰） */
.ps-share-scan {
  font-weight: 900;
}

.ps-signsub {
  font-size: 9px;
  letter-spacing: 0.18em;
  margin-top: 1px;
}

/* 小票底部分享二维码区（替代原条形码） */
.ps-share {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* 二维码高度 = 文案列（logo + 两行文字）总高，二者顶部对齐、等高，视觉统一 */
.ps-qr {
  flex: 0 0 auto;
  width: 86px;
  height: 86px;
}

.ps-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ps-qr--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed #c8bb9c;
  border-radius: 4px;
}

.ps-qr--ph span {
  font-size: 10px;
  line-height: 1.3;
  color: var(--rcpt-meta, #6b6453);
  text-align: center;
}

.ps-share-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
  align-items: flex-end;
  text-align: right;
}

.ps-share-logo {
  display: block;
  width: auto;
  height: 55px;
  margin-bottom: -10px;
  transform: translateX(7px);
}

.ps-share-sub {
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--rcpt-meta, #6b6453);
}

/* ---------------- 多图拍立得预览（每张照片一张拍立得卡） ---------------- */
.pl-strip {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pl-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-align: center;
}

.pl-card {
  margin: 0;
  background: #fbf7ec;
  padding: 12px 12px 0;
  box-shadow: 0 2px 4px rgba(40, 34, 20, 0.1), 0 18px 36px -18px rgba(40, 34, 20, 0.42);
}

.pl-photo {
  position: relative;
  width: 100%;
  background: #0b0a07;
  overflow: hidden;
  border: 1px solid rgba(40, 34, 20, 0.14);
}

.pl-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pl-photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9dec3;
}

.pl-photo--empty span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #8a7f64;
  letter-spacing: 0.08em;
}

.pl-cap {
  padding: 12px 4px 14px;
}

.pl-task {
  margin: 0;
  font-family: var(--font-serif-cn);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  color: var(--rcpt-ink);
  text-wrap: pretty;
}

.pl-note {
  margin: 8px 0 0;
  font-family: var(--font-cn);
  font-style: italic;
  font-size: 12px;
  line-height: 1.5;
  color: #6b6453;
  text-wrap: pretty;
}

.pl-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
}

.pl-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #b07a2a;
}

.pl-brand {
  font-family: var(--font-serif-cn);
  font-weight: 700;
  font-size: 13px;
  color: var(--rcpt-ink);
}