/* 知微之家 · 日志页 / 记忆页 共用材质与贴纸（2026-10-19 第二版，按语的统一规范重写）

   一、一套变量，两页共用：玻璃、边框、圆角、阴影、内边距、贴纸尺寸/偏移/层级全在这里。
   二、贴纸是卡片内的真实元素（.card-sticker），不是伪元素；卡片没了它就没了。
   三、贴纸实色：不用 opacity、不用 filter 压低颜色；复用现有透明 PNG，不重画素材。
   四、今日印记仅统一日志入口材质；二级 .imp-card 与 .imp-sticker 不改。
*/

/* ========== 一、共用变量 ========== */
:root{
  /* 玻璃 */
  --zw-glass-tint-scale:.375;
  --zw-glass-active-boost:.06;
  --zw-glass-tint:calc(var(--glass-opacity, .32) * var(--zw-glass-tint-scale));
  --zw-glass-bg:rgb(255 255 255 / var(--zw-glass-tint));          /* 高透底；背景由原主题负责 */
  --zw-glass-active-bg:rgb(255 255 255 / clamp(0, calc(var(--zw-glass-tint) + var(--zw-glass-active-boost)), 1));
  --zw-glass-blur:blur(14px) saturate(150%);     /* 背后模糊（两页同值） */
  --zw-glass-border:rgb(255 255 255 / .42);      /* 卡片描边颜色 */
  --zw-glass-border-w:1px;
  --zw-glass-radius:20px;                        /* 圆角 */
  --zw-glass-shadow:0 1px 0 rgb(255 255 255 / .42) inset,
                   0 10px 26px rgb(170 130 115 / .10),
                   0 3px 8px rgb(170 130 115 / .04);
  --zw-card-pad-block:16px;                      /* 卡片内边距 */
  --zw-card-pad-inline:16px;

  /* 文字与标签 */
  --zw-card-title-size:15px;
  --zw-card-body-size:13px;
  --zw-label-bg:rgb(255 255 255 / .70);
  --zw-label-ink:#8a5c6f;
  --zw-label-radius:999px;

  /* 贴纸（尺寸、偏移、层级三件套） */
  --zw-sticker-size:52px;
  --zw-sticker-offset:-10px;                     /* 向右上探出卡片 */
  --zw-sticker-z:2;                              /* 卡片内容 z-index 3，文字永远在上 */
  --zw-sticker-rotate:-8deg;

  /* 流光（仅在日志/记忆页出现） */
  --glow-1:255,143,176; --glow-2:255,184,119; --glow-3:185,140,255; --glow-4:255,217,138;
  --glow-strength:.37;
}
:root[data-theme=dark]{
  --zw-glass-tint-scale:.1875;
  --zw-glass-active-boost:.04;
  --zw-glass-border:rgb(255 255 255 / .20);
  --zw-glass-shadow:0 1px 0 rgb(255 255 255 / .20) inset,0 12px 30px rgb(0 0 0 / .34);
  --zw-label-bg:rgb(255 255 255 / .14);
  --zw-label-ink:#f0d7de;
  --glow-strength:.20;
}
:root[data-background=sky]{
  --glow-1:143,195,255; --glow-2:168,228,234; --glow-3:185,182,255; --glow-4:207,230,255;
  --glow-strength:.36;
  --zw-glass-shadow:0 1px 0 rgb(255 255 255 / .42) inset,0 10px 26px rgb(110 140 170 / .16),0 3px 8px rgb(110 140 170 / .07);
}
:root[data-background=sage]{
  --glow-1:185,217,138; --glow-2:223,215,154; --glow-3:143,201,168; --glow-4:233,226,176;
  --glow-strength:.36;
  --zw-glass-shadow:0 1px 0 rgb(255 255 255 / .42) inset,0 10px 26px rgb(140 160 110 / .16),0 3px 8px rgb(140 160 110 / .07);
}

/* ========== 二、流光层（只在两页出现） ========== */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:0; transition:opacity .45s ease;
  background:
    radial-gradient(85% 60% at 8% 6%,  rgba(var(--glow-1),.55) 0%, rgba(var(--glow-1),0) 72%),
    radial-gradient(80% 55% at 92% 92%, rgba(var(--glow-3),.50) 0%, rgba(var(--glow-3),0) 70%);
}
body::after{ opacity:var(--glow-strength) } /* 底光全站统一，不再只在这两页 */
@media (prefers-reduced-motion: no-preference){
  body:has(#logs:not([hidden]))::after,
  body:has(#memory:not([hidden]))::after{ animation:zw-glow-drift 34s ease-in-out infinite alternate }
}
@keyframes zw-glow-drift{
  0%{ transform:translate3d(0,0,0) scale(1) }
  50%{ transform:translate3d(2.2vw,-2vh,0) scale(1.06) }
  100%{ transform:translate3d(-2vw,2.4vh,0) scale(.96) }
}

/* ========== 三、两页共用的玻璃卡 ==========
   isolation:isolate 让贴纸的层叠只在卡片内部比较，不受祖先层叠影响；
   卡片本身就是贴纸的定位容器；不依赖页面祖先的定位。 */
#logs .record-card,
#logs .log-entry,
#logs .log-today,
#memory .record-card,
#memory .memory-entry,
#memory .memory-primary,
#memory .memory-main-group{
  position:relative;
  isolation:isolate;
  overflow:visible;
  background:var(--zw-glass-bg);
  border:var(--zw-glass-border-w) solid var(--zw-glass-border);
  border-radius:var(--zw-glass-radius);
  box-shadow:var(--zw-glass-shadow);
  -webkit-backdrop-filter:var(--zw-glass-blur);
  backdrop-filter:var(--zw-glass-blur);
  padding:var(--zw-card-pad-block) var(--zw-card-pad-inline);
}
#logs .log-entry.active{ background:var(--zw-glass-active-bg) }
:root[data-theme=dark] #logs .log-entry.active{ background:var(--zw-glass-active-bg) }

/* 内容层压在贴纸之上 */
/* 注意：必须排除 .card-sticker，否则这条（id+class+子代）会盖掉贴纸的 absolute 定位，
   在真机上表现就是贴纸掉进文档流、跑到卡片左上角——上一版就是这个原因。 */
#logs .record-card>*:not(.card-sticker),
#logs .log-entry>*:not(.card-sticker),
#logs .log-today>*:not(.card-sticker),
#memory .record-card>*:not(.card-sticker),
#memory .memory-entry>*:not(.card-sticker){ position:relative; z-index:3 }

/* 统一的标题与标签视觉 */
#logs .log-entry strong,#memory .memory-entry strong{
  font-size:var(--zw-card-title-size); line-height:1.5; padding-right:calc(var(--zw-sticker-size) + 6px);
}
#logs .log-entry-description,#memory .memory-entry-description{
  font-size:var(--zw-card-body-size); line-height:1.72;
}
#logs .log-entry-label,#memory .memory-entry-count,#memory .memory-entry-link{
  background:var(--zw-label-bg); color:var(--zw-label-ink);
  border-radius:var(--zw-label-radius);
  padding:2px 9px; font-size:11px;
}

/* ========== 四、贴纸组件 ==========
   结构：卡片(position:relative; isolation:isolate)
        └─ img.card-sticker(position:absolute; inset-inline-end/block-start 各 -10px; z-index:2)
   逻辑定位支持方向切换；卡片 position:relative 提供定位容器。
   WebKit 预览不能替代 iPhone 真机验证；
   贴纸不设 opacity、不设 filter，颜色即素材本色。 */
.card-sticker{
  position:absolute;
  inset-block-start:var(--zw-sticker-offset);
  inset-inline-end:var(--zw-sticker-offset);
  width:var(--zw-sticker-size); height:var(--zw-sticker-size);
  object-fit:contain;
  z-index:var(--zw-sticker-z);
  pointer-events:none;
  opacity:1;
  border:0; box-shadow:none; background:none; filter:none;
  transform:rotate(var(--zw-sticker-rotate));
  transition:transform .22s ease;
}
@media (hover:hover){
  #logs .log-entry:hover .card-sticker,
  #memory .memory-entry:hover .card-sticker{ transform:rotate(calc(var(--zw-sticker-rotate) * -.4)) scale(1.05) }
}
#logs.record-open .card-sticker{ display:none }

/* 阅读态：收起材质，回到干净纸面 */
#logs.record-open::after,#memory.record-open::after{ display:none }
#logs.record-open .record-card,#memory.record-open .record-card,
#logs.record-open .log-entry,#memory.record-open .memory-entry{
  background:transparent; box-shadow:none; border-color:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

/* ========== 五、今日印记：保留入口爪印与二级页面 ==========
   .imp-card / .imp-sticker / .log-entry[data-log-kind="impressions"] 的爪印
   全部交回 records-material 原本的规则，本文件不接管。 */
#logs .log-entry[data-log-kind="impressions"]::before{
  top:auto; right:auto; left:auto; bottom:auto;
  width:auto; height:auto; opacity:1; transform:none; filter:none;
  background-image:url('/stickers/paw.png');
  pointer-events:none;
}
#logs .log-entry[data-log-kind="impressions"] strong{padding-right:0}
#logs .log-entry[data-log-kind="impressions"] .card-sticker{ display:none }

/* Resolve the complete stylesheet cascade, not just this file in isolation.
   Keep the expression cards and the impressions entrance on their existing rules. */
#logs .log-entry:not([data-log-kind="impressions"]),
#memory .memory-entry:not(.memory-primary),
#memory .memory-main-group{
  background:var(--zw-glass-bg);
  border:var(--zw-glass-border-w) solid var(--zw-glass-border);
  border-radius:var(--zw-glass-radius);
  box-shadow:var(--zw-glass-shadow);
  -webkit-backdrop-filter:var(--zw-glass-blur);
  backdrop-filter:var(--zw-glass-blur);
}
/* The new real sticker replaces the old PNG and masked second border. */
#logs .log-entry:not([data-log-kind="impressions"])::before,
#logs .log-entry:not([data-log-kind="impressions"])::after,
#memory .memory-entry::before,
#memory .memory-entry::after{content:none;display:none}
/* One outer memory card, with the existing excerpt and links inside it. */
#memory .memory-main-group{padding:0}
#memory .memory-primary{
  background:transparent;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
#memory .memory-main-group>*:not(.card-sticker){position:relative;z-index:3}
#memory .memory-main-group>.card-sticker{position:absolute}

/* Keep selected cards transparent too; the active highlight uses the same material. */
#logs .log-entry.active:not([data-log-kind="impressions"]){background:var(--zw-glass-active-bg)}

/* Keep established per-page tokens and the glass settings effective. The
   default token values match the approved preview; inline overrides still win. */
#logs{
  --log-entry-radius:var(--zw-glass-radius);
  --log-entry-title-size:var(--zw-card-title-size);
  --log-entry-padding:var(--zw-card-pad-block) var(--zw-card-pad-inline);
}
#memory{
  --memory-entry-radius:var(--zw-glass-radius);
  --memory-entry-title-size:var(--zw-card-title-size);
  --memory-main-size:var(--zw-card-title-size);
}
#logs .log-entry:not([data-log-kind="impressions"]){
  border-radius:var(--log-entry-radius);padding:var(--log-entry-padding);
}
#logs .log-entry strong{font-size:var(--log-entry-title-size)}
#logs .log-entry-label{color:var(--log-entry-accent)}
#memory .memory-main-group,
#memory .memory-entry:not(.memory-primary),
#memory .memory-entry.memory-primary{border-radius:var(--memory-entry-radius)}
#memory .memory-entry strong{font-size:var(--memory-entry-title-size)}
#memory .memory-primary strong{font-size:var(--memory-main-size)}
/* Reading pages retain their original wallpaper/transparency behavior. */
#logs.record-open .diary-card{background:var(--record-card-fill)}
html[data-reduce-glass=true]{
  --zw-glass-bg:var(--bg);--zw-glass-active-bg:var(--bg);--zw-glass-blur:none;
}
@media(prefers-reduced-transparency:reduce){
  :root{--zw-glass-bg:var(--bg);--zw-glass-active-bg:var(--bg);--zw-glass-blur:none}
}

/* Only the overview entrance joins the existing glass material. Keep the
   timeline/detail cards, expression stickers and entrance paw unchanged. */
#logs > .log-entry-grid > .log-entry[data-log-kind="impressions"]{
  background:var(--zw-glass-bg);
  border:var(--zw-glass-border-w) solid var(--zw-glass-border);
  border-radius:var(--log-entry-radius);
  padding:var(--log-entry-padding);
  box-shadow:var(--zw-glass-shadow);
  -webkit-backdrop-filter:var(--zw-glass-blur);
  backdrop-filter:var(--zw-glass-blur);
}
#logs > .log-entry-grid > .log-entry[data-log-kind="impressions"].active{background:var(--zw-glass-active-bg)}
#logs > .log-entry-grid > .log-entry[data-log-kind="impressions"]::after{content:none;display:none}