/* ============================================================
   纸片与笔触 —— 卡片、胶带、印章、铅笔线
   「画出来的边」统一靠 .ink-edge 的伪元素 + #squiggle 滤镜
   ============================================================ */

/* ---------- 卡片：一张贴在本子上的纸 ---------- */
.card {
  position: relative;
  background: var(--paper-2);
  border-radius: var(--r-irregular);
  padding: 15px 17px;
  box-shadow: var(--shadow-paper);
  contain: layout style;
  transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-hand);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--line);
  border-radius: inherit;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper-2) 80%, white);
  pointer-events: none;
}

.card--lift:hover { transform: translateY(-3px) rotate(-.25deg); box-shadow: var(--shadow-lift); }
.card--accent::before { border-color: var(--accent); border-width: 1.8px; }
.card--quiet { background: var(--paper-3); }
.card--flat::before { border-style: dashed; }

/* 卡片会有一点点歪，像随手贴的 */
.card--tilt-a { transform: rotate(-.4deg); }
.card--tilt-b { transform: rotate(.38deg); }
.card--tilt-a:hover, .card--tilt-b:hover { transform: rotate(0deg) translateY(-3px); }

/* ---------- 和纸胶带 ---------- */
.tape {
  position: absolute;
  top: -9px;
  left: 50%;
  width: 86px;
  height: 20px;
  transform: translateX(-50%) rotate(-1.8deg);
  background:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--accent) 32%, transparent) 0 5px,
      color-mix(in srgb, var(--accent) 15%, transparent) 5px 10px);
  border-left: 1.5px dashed color-mix(in srgb, var(--ink) 26%, transparent);
  border-right: 1.5px dashed color-mix(in srgb, var(--ink) 26%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  opacity: .88;
  border-radius: 2px;
  box-shadow: 0 2px 4px -2px rgba(51, 41, 31, .2);
  pointer-events: none;
}

.tape--corner {
  left: 16px;
  transform: rotate(-7deg);
  width: 66px;
}

/* ---------- 图钉 / 回形针 ---------- */
.pin {
  position: absolute;
  top: -6px;
  right: 22px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, color-mix(in srgb, var(--accent) 60%, white), var(--accent));
  box-shadow: 0 2px 4px rgba(51, 41, 31, .35), inset 0 0 0 1px rgba(51, 41, 31, .22);
  pointer-events: none;
}

/* ---------- 手绘分隔线 ---------- */
.rule {
  height: 10px;
  border: 0;
  background: none;
  position: relative;
}
.rule::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 5px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
}
.rule--dash::before {
  height: 0;
  background: none;
  border-top: 1.5px dashed var(--line);
}

/* ---------- 印章（打卡 / 完成） ---------- */
.stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 12px;
  font-family: var(--font-hand);
  font-size: var(--fs-13);
  letter-spacing: .06em;
  color: var(--accent);
  border-radius: 999px;
  position: relative;
}
.stamp::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.8px solid currentColor;
  border-radius: inherit;
  filter: url(#squiggle-strong);
  opacity: .8;
}
.stamp--sage { color: var(--sage); }
.stamp--clay { color: var(--clay); }
.stamp--mustard { color: var(--sage); }
.stamp--sky { color: var(--sky); }
.stamp--plum { color: var(--plum); }

/* ---------- 记号笔高亮 ---------- */
.mark {
  background: linear-gradient(transparent 58%, var(--highlight) 58%, var(--highlight) 92%, transparent 92%);
  padding: 0 2px;
}

/* ---------- 手写标题 ---------- */
.hand { font-family: var(--font-hand); }
.display { font-family: var(--font-display); letter-spacing: .02em; }

.page-head {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--line-soft);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--paper) 60%, transparent), 0 3px 0 color-mix(in srgb, var(--line-soft) 55%, transparent);
  position: relative;
}
.page-head::after {
  content: "✦";
  position: absolute;
  left: 28px;
  bottom: -8px;
  padding: 0 6px;
  background: var(--paper);
  color: var(--accent);
  font-size: 10px;
  line-height: 1;
  opacity: .75;
  pointer-events: none;
}
.page-head h1 {
  font-family: var(--font-hand);
  font-size: var(--fs-26);
  margin: 0;
  line-height: 1.32;
  letter-spacing: .01em;
}
.page-head .page-sub {
  color: var(--ink-soft);
  font-size: var(--fs-14);
  margin: 4px 0 0;
}
/* 页眉上方的小字（原来是内联样式，现在归入 token） */
.page-head .head-kicker {
  color: var(--ink-soft);
  font-size: var(--fs-12);
  letter-spacing: 0.16em;
}
.page-head .head-icon {
  color: var(--accent);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px 14px 11px 15px;
  background: color-mix(in srgb, var(--accent-soft) 68%, var(--paper-2));
  border: 1.4px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  box-shadow: 1.5px 2px 0 rgba(51, 41, 31, .08);
}
.page-head .head-actions { margin-left: auto; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }

/* 标题下方的手绘下划线 */
.underline-hand { position: relative; display: inline-block; padding-bottom: 4px; }
.underline-hand::after {
  content: "";
  position: absolute;
  left: -1px; right: -4px; bottom: 0;
  height: 2.5px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 82%, transparent), color-mix(in srgb, var(--accent) 32%, transparent));
  border-radius: 3px 6px 2px 4px;
  transform: rotate(-.35deg);
}

/* ---------- 便签纸（笔记卡片专用） ---------- */
.sticky {
  --sticky-bg: var(--paper-2);
  position: relative;
  background: var(--sticky-bg);
  padding: 15px 15px 13px;
  border-radius: 4px 14px 6px 12px;
  box-shadow: 0 8px 16px -10px rgba(51, 41, 31, .46), 2px 2px 0 rgba(51, 41, 31, .06);
  contain: layout style;
  transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-hand);
}
.sticky::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 24px; height: 24px;
  background: linear-gradient(135deg, transparent 48%, color-mix(in srgb, var(--ink) 12%, transparent) 50%, color-mix(in srgb, var(--paper-3) 85%, transparent) 52%);
  border-top-left-radius: 4px;
}
.sticky:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 16px 26px -14px rgba(51, 41, 31, .52); }

/* ---------- 撕纸边 ---------- */
.torn-bottom { position: relative; }
.torn-bottom::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 14px;
  background: var(--paper-2);
  filter: url(#squiggle-strong);
  z-index: -1;
}

/* ---------- 纸孔（活页本） ---------- */
.punch-holes {
  display: flex;
  gap: 8px;
  padding: 4px 2px;
}
.punch-holes i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 1px 2px rgba(51, 41, 31, .22), inset 0 0 0 1.4px var(--line);
}

/* ---------- 空状态：一张写着「这里还空着」的小卡 ---------- */
.empty {
  position: relative;
  padding: 26px 20px;
  text-align: center;
  color: var(--ink-soft);
  border-radius: var(--r-irregular-2);
  background: color-mix(in srgb, var(--paper-2) 78%, transparent);
  overflow: hidden;
}
.empty::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.6px dashed var(--line);
  border-radius: inherit;
  pointer-events: none;
}
.empty::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 50%, transparent);
  border-radius: inherit;
  pointer-events: none;
}
.empty .empty-art {
  color: var(--accent);
  margin: 0 auto 10px;
  width: 52px;
  height: 52px;
  border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%;
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--paper-2));
  border: 1.4px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.empty p { margin: 0 0 4px; font-family: var(--font-hand); font-size: var(--fs-15); color: var(--ink); }
.empty small { color: var(--ink-faint); font-size: var(--fs-13); }

/* ---------- 头像（手绘圆圈 + 首字） ---------- */
.avatar {
  --size: 34px;
  width: var(--size);
  height: var(--size);
  border-radius: 50% 47% 52% 49% / 48% 53% 47% 51%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-hand);
  font-size: calc(var(--size) * .48);
  color: var(--paper-2);
  background: var(--avatar-bg, var(--accent));
  position: relative;
  flex: none;
  overflow: hidden;
  box-shadow: 1px 1.5px 0 rgba(51, 41, 31, .16);
}
.avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid color-mix(in srgb, var(--ink) 65%, transparent);
  border-radius: inherit;
  pointer-events: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--lg { --size: 62px; }
.avatar--sm { --size: 24px; }

/* ---------- 手绘小图标与静态邮戳纹样 ---------- */
.ico { display: inline-block; vertical-align: middle; flex: none; }
.ico svg { display: block; }
.ico--spin svg { animation: spinSlow 1s linear infinite; }

.ornament {
  display: inline-block;
  pointer-events: none;
  user-select: none;
  color: var(--ink-faint);
}
.ornament--postmark {
  width: 116px;
  height: 48px;
  opacity: .22;
}
.ornament--divider {
  display: block;
  width: min(220px, 65%);
  height: 14px;
  margin: 6px auto;
  color: var(--line);
}
.ornament--stitch {
  width: 12px;
  height: 160px;
  color: var(--line);
}