/* ============================================================
   纪念日 · 便利贴
   ------------------------------------------------------------
   一张卡片 = 一张便利贴：有胶带、有歪斜、有自己的颜色。
   粉底手账风，但每张纸的色相不同，看不出"模板感"。

   为什么歪：整齐的卡片一眼就是网页。歪一点、胶带贴得偏一点，
   才像真的贴在一本本子上。角度用固定值，不用随机，
   否则每次刷新位置都在跳。
   ============================================================ */

.note-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  padding: 18px 2px 90px;
}

/* 窄屏一列，免得字被挤成竖排 */
@media (max-width: 360px) {
  .note-board {
    grid-template-columns: 1fr;
  }
}

/* ---------------- 便利贴本体 ---------------- */

.note {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 158px;
  padding: 22px 14px 12px;
  border-radius: 3px 3px 10px 3px;   /* 右下角翘起来一点的感觉 */
  background: var(--note-bg);
  border: 1px solid var(--note-line);
  box-shadow:
    0 1px 0 rgba(122, 68, 88, .05),
    0 6px 14px rgba(199, 91, 126, .12);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}

/* 指着的时候扳正一点、抬高一点 —— 像伸手去拿那张纸 */
.note:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow:
    0 1px 0 rgba(122, 68, 88, .06),
    0 12px 24px rgba(199, 91, 126, .18);
}

/* 已经过去的日子：淡下去，不抢眼 */
.note--past {
  opacity: .72;
  filter: saturate(.7);
}

/* 五套纸色 */
.note--pink {
  --note-bg: #FFF0F4;
  --note-line: #FFDCE6;
  --note-ink: #C75B7E;
}

.note--butter {
  --note-bg: #FFF9E6;
  --note-line: #F5E6B8;
  --note-ink: #A67C2E;
}

.note--mint {
  --note-bg: #EEFAF4;
  --note-line: #CFE9DD;
  --note-ink: #3F7A66;
}

.note--lilac {
  --note-bg: #F7F1FE;
  --note-line: #E3D5F4;
  --note-ink: #7E55A3;
}

.note--sky {
  --note-bg: #F0F7FE;
  --note-line: #D5E8F8;
  --note-ink: #3E6E93;
}

/* 深色模式：纸变暗，字提亮 */
:root[data-mode="dark"] .note {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}

/* ---------------- 顶部胶带 ---------------- */

.note__tape {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 54px;
  height: 17px;
  margin-left: -27px;
  background: color-mix(in srgb, var(--butter) 78%, transparent);
  border-left: 1px solid rgba(255, 255, 255, .5);
  border-right: 1px solid rgba(255, 255, 255, .5);
  /* 胶带撕口的锯齿感 */
  clip-path: polygon(
    0 12%, 6% 0, 12% 12%, 18% 0, 24% 12%, 30% 0, 36% 12%,
    42% 0, 48% 12%, 54% 0, 60% 12%, 66% 0, 72% 12%, 78% 0,
    84% 12%, 90% 0, 96% 12%, 100% 0,
    100% 88%, 96% 100%, 90% 88%, 84% 100%, 78% 88%, 72% 100%,
    66% 88%, 60% 100%, 54% 88%, 48% 100%, 42% 88%, 36% 100%,
    30% 88%, 24% 100%, 18% 88%, 12% 100%, 6% 88%, 0 100%
  );
  transform: rotate(-2deg);
  opacity: .85;
  pointer-events: none;
}

:root[data-mode="dark"] .note__tape {
  opacity: .5;
}

/* 第二列和第三张的胶带歪向另一边，避免整齐划一 */
.note:nth-child(2n) .note__tape {
  transform: rotate(2.5deg) translateX(5px);
}

.note:nth-child(3n) .note__tape {
  transform: rotate(-3.5deg) translateX(-6px);
}

/* ---------------- 头部：图标 + 名字 + 日期 ---------------- */

.note__head {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.note__emoji {
  flex: none;
  font-size: 18px;
  line-height: 1.2;
}

.note__title-wrap {
  min-width: 0;
  flex: 1 1 auto;
}

.note__title {
  margin: 0;
  font-family: var(--font-hand);
  font-size: calc(15px * var(--scale));
  line-height: 1.25;
  color: var(--note-ink);
  word-break: break-word;
}

.note__sub {
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--berry-soft);
  opacity: .78;
}

/* ---------------- 中间：那个大数字 ---------------- */

.note__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 42px;
}

.note__count {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.note__num {
  font-family: var(--font-hand);
  font-size: calc(38px * var(--scale));
  line-height: 1;
  color: var(--note-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.note__unit {
  font-size: 13px;
  color: var(--note-ink);
  opacity: .72;
}

.note__today {
  font-family: var(--font-hand);
  font-size: calc(17px * var(--scale));
  line-height: 1.3;
  color: var(--note-ink);
}

.note__count-text {
  font-size: 12.5px;
  color: var(--berry-soft);
}

.note__note {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--berry-soft);
  word-break: break-word;
}

/* ---------------- 操作 ---------------- */

.note__actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
  opacity: 0;
  transition: opacity .18s var(--ease-out);
}

/* 平时藏起来，指着或用键盘聚焦时才出现，避免满屏按钮 */
.note:hover .note__actions,
.note:focus-within .note__actions {
  opacity: 1;
}

/* 触屏没有 hover，干脆一直显示 */
@media (hover: none) {
  .note__actions {
    opacity: .55;
  }
}

.note__act {
  padding: 3px 9px;
  border: none;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .7);
  color: var(--berry-soft);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background .16s, color .16s;
}

.note__act:hover {
  background: #fff;
  color: var(--note-ink);
}

.note__act--del:hover {
  background: #FFE3E9;
  color: #B8435A;
}

:root[data-mode="dark"] .note__act {
  background: rgba(255, 255, 255, .1);
}

/* ---------------- 编辑面板里的零件 ---------------- */

.field-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  color: var(--berry-soft);
}

.emoji-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.emoji-row__btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-size: 18px;
  cursor: pointer;
  transition: transform .16s var(--ease-bounce), border-color .16s, background .16s;
}

.emoji-row__btn:hover {
  transform: translateY(-2px);
}

.emoji-row__btn[aria-pressed="true"] {
  border-color: var(--pink-deep);
  background: color-mix(in srgb, var(--pink) 55%, transparent);
}

/* 二选一分段控件：每年都过 / 只这一次 */
.seg {
  display: flex;
  gap: 6px;
}

.seg__btn {
  flex: 1 1 0;
  padding: 10px 8px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-input);
  background: var(--paper);
  color: var(--berry-soft);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .16s, background .16s, color .16s;
}

.seg__btn[aria-pressed="true"] {
  border-color: var(--pink-deep);
  background: color-mix(in srgb, var(--pink) 55%, transparent);
  color: var(--pink-ink);
  font-weight: 600;
}

/* ============================================================
   首页底部：最近值得数的日子
   ------------------------------------------------------------
   一小排胶囊，最多三个。点一下跳到纪念日页。
   半透明压在照片上，不抢"在一起 N 天"那个数字的戏。
   ============================================================ */

.home__upcoming {
  margin-top: 14px;
  width: 100%;
  max-width: 380px;
}

.upcoming__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.upcoming__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--berry);
  font: inherit;
  font-size: calc(12px * var(--scale));
  line-height: 1.3;
  cursor: pointer;
  transition: background .18s var(--ease-out), transform .18s var(--ease-out);
}

.upcoming__chip:hover {
  background: rgba(255, 255, 255, .34);
  transform: translateY(-2px);
}

.upcoming__emoji {
  flex: none;
  font-size: 14px;
  line-height: 1;
}

.upcoming__title {
  min-width: 0;
  max-width: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upcoming__days {
  flex: none;
  font-weight: 700;
  color: var(--pink-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 照片背景上文字要更实一点，不然看不清 */
.home__bg:not(.home__bg--none) ~ .home__body .upcoming__chip {
  background: rgba(255, 255, 255, .28);
  border-color: rgba(255, 255, 255, .45);
}