/* keep-note.css · 「保持联系」便签（2026-10-31 · Wanfang 在原型里定：克制便利贴 · 紧凑排版 · 得意黑手写 · 夜里暗灰纸）
   结构（js/keep-note.js 画）：.knote > svg.kn-paper（纸，现画）+ .kn-c
     ① .kn-hb 标题 + 那句话（探出时露出的就是这一块）
     ② .kn-form 邮箱框 + 按钮 + 注脚（注脚贴着按钮：频率、来自谁、退订）
     ③ .kn-done 提交后的状态（收到啦 / 你留过邮箱啦）
   真实感只来自：直角、一点倾斜、只有右下角翘起来（轮廓变短不变宽）、翘起那角的暗和投影。没有胶带、折角、横线、纸纹。 */

:root {
  --kn-pi: 249 241 196;            /* 便利贴：比品牌黄更淡、更灰的奶油黄 */
  --kn-ink: 30 36 48; --kn-btn: 30 36 48; --kn-btn-fg: 251 248 236;
  --kn-sh: 30 36 48; --kn-sh-a: .17; --kn-con-a: .16; --kn-edge: 150 125 40; --kn-edge-a: .16; --kn-lamp: 255 255 255;
  --kn-err: #A3412C;
}
:root[data-theme="night"] {         /* 夜里：暗灰纸 + 浅墨，台灯从左上来（Wanfang 10-31） */
  --kn-pi: 70 67 62; --kn-ink: 236 230 218; --kn-btn: 236 230 218; --kn-btn-fg: 40 37 33;
  --kn-sh: 0 0 0; --kn-sh-a: .62; --kn-con-a: .45; --kn-edge: 0 0 0; --kn-edge-a: .35; --kn-lamp: 255 214 160;
  --kn-err: #F0A58F;
}

/* ---------------- 便签 ---------------- */
.knote { position: relative; box-sizing: border-box; color: rgb(var(--kn-ink)); text-align: left; font: 400 14px/1.6 var(--font-text);
  --kn-dk: .15; --kn-lamp-a: .10; --kn-rot: -1.2deg; rotate: var(--kn-rot); transition: rotate .5s cubic-bezier(.2, 1, .3, 1); -webkit-tap-highlight-color: transparent; }
:root[data-theme="night"] .knote { --kn-dk: .22; --kn-lamp-a: .16; }
.kn-paper { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.kn-paper .p-body { fill: rgb(var(--kn-pi)); }
.kn-paper .p-edge { fill: none; stroke: rgb(var(--kn-edge) / var(--kn-edge-a)); stroke-width: .6; }
.kn-paper .s-cast { fill: rgb(var(--kn-sh) / var(--kn-sh-a)); }
.kn-paper .s-con { fill: rgb(var(--kn-sh) / var(--kn-con-a)); }
.kn-paper .st-hl { stop-color: #fff; }
.kn-paper .st-dk { stop-color: #000; }
.kn-paper .st-lamp { stop-color: rgb(var(--kn-lamp)); }

.kn-c { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 18px 22px; }
.kn-h { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.kn-stamp { flex: none; display: block; width: 24px; height: 24px; rotate: -6deg; filter: drop-shadow(0 .6px .6px rgb(0 0 0 / .18)); }
/* 手写：只有标题和那句话（像她亲手写的）；表单、按钮、注脚用正文字体 */
:root .knote .kn-c h2.kn-t { margin: 0; padding: 0; text-align: left; font: 400 26px/1 var(--font-brand-zh); letter-spacing: .02em; color: inherit; word-break: normal; }   /* 页面自己的 h2 样式（如魔法笔介绍页）不要盖过它 */
.kn-say { margin: 4px 0 0; font: 400 18.5px/1.38 var(--font-brand-zh); letter-spacing: .01em; color: rgb(var(--kn-ink) / .9); }

.kn-form { margin: 18px 0 0; }
.kn-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* 框里的提示字就是标签；这里只给读屏 */
.kn-in { -webkit-appearance: none; appearance: none; display: block; box-sizing: border-box; width: 100%; height: 44px; margin: 0; padding: 0 2px; border: 0; border-bottom: 1px solid rgb(var(--kn-ink) / .45); border-radius: 0;
  background: transparent; color: rgb(var(--kn-ink)); font: 400 16px/1 var(--font-text); outline: none; }   /* 16px：iOS 不会放大页面 */
.kn-in::placeholder { color: rgb(var(--kn-ink) / .42); }
.kn-in:focus { border-bottom: 1.5px solid rgb(var(--kn-ink) / .9); }
.kn-hp { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* 蜜罐：人看不见，机器人会填（不要往外推：推到很远会把页面撑长） */
.kn-go { display: block; box-sizing: border-box; width: 100%; min-height: 48px; margin: 14px 0 0; padding: 0 18px; border: 0; border-radius: 999px; background: rgb(var(--kn-btn)); color: rgb(var(--kn-btn-fg));
  font: 400 14px/1.2 var(--font-text); letter-spacing: .03em; cursor: pointer; transition: filter .2s, opacity .2s; }
.kn-go:hover { filter: brightness(1.15); }
.kn-go:disabled { opacity: .6; cursor: default; }
.kn-go:focus-visible, .kn-from:focus-visible, .kn-link:focus-visible, .kn-x:focus-visible, .kn-float:focus-visible { outline: 1.5px solid rgb(var(--kn-ink) / .6); outline-offset: 2px; }
/* 注脚和状态占同一个位置：有状态时注脚让开，按钮下面不跳 */
.kn-foot { margin-top: 8px; min-height: 32px; }
.kn-st { margin: 0; font-size: 12.5px; line-height: 1.5; text-align: center; color: var(--kn-err); }
.kn-st:empty { display: none; }
.kn-has-st .kn-fine { display: none; }
.kn-fine { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; line-height: 14px; letter-spacing: .02em; text-align: center; color: rgb(var(--kn-ink) / .6); }
.kn-f1 { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }   /* 字、PL 小图标、名字按中线对齐 */
.kn-f1 > span, .kn-from span { display: block; line-height: 14px; }
.kn-from { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; color: rgb(var(--kn-ink) / .8); text-decoration: underline; text-decoration-color: rgb(var(--kn-ink) / .3); text-underline-offset: 2.5px; }
.kn-from:hover { color: rgb(var(--kn-ink)); text-decoration-color: currentColor; }
.kn-from img { display: block; flex: none; width: 14px; height: 14px; }
.kn-bad .kn-in { animation: kn-shake .32s; }
@keyframes kn-shake { 25% { translate: -4px 0; } 60% { translate: 3px 0; } }

.kn-done { display: none; margin-top: 18px; }
.knote:not([data-state="form"]) .kn-form { display: none; }
.knote:not([data-state="form"]) .kn-done { display: block; animation: kn-in .45s ease both; }
@keyframes kn-in { from { opacity: 0; translate: 0 4px; } }
.kn-dt { margin: 0; font: 400 18.5px/1.38 var(--font-brand-zh); letter-spacing: .01em; color: rgb(var(--kn-ink) / .9); }   /* 「收到啦！」和上面那句同字号同粗细（Wanfang 10-31 15:53） */
.kn-dp { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: rgb(var(--kn-ink) / .85); }
.kn-da { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; }
.kn-link { padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: rgb(var(--kn-ink) / .62); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* 链接跟状态走（Wanfang 10-31 18:12）：刚提交只放「填错了？」；以前留过放「再留一个邮箱」；确认过再加「不想再收了」 */
.knote:not([data-state="sent"]) .kn-wrong, .knote[data-state="sent"] .kn-chg { display: none; }
.kn-em { font-weight: 600; color: rgb(var(--kn-ink)); overflow-wrap: anywhere; }

.kn-x { display: none; place-items: center; width: 40px; height: 40px; margin: -2px -12px -2px auto; padding: 0; border: 0; border-radius: 999px; background: none; color: rgb(var(--kn-ink) / .55); cursor: pointer; }
.kn-x:hover { background: rgb(var(--kn-ink) / .06); }
.kn-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- 页尾那张：首页第三栏；魔法笔介绍页里的一张 ---------------- */
[data-keep] { width: 340px; max-width: 100%; }
@media (max-width: 699.98px) { [data-keep] { width: 100%; } [data-keep] .knote { --kn-rot: -.8deg; } [data-keep] .kn-c { padding: 16px 20px 18px; } }

/* ---------------- 首页：探出来的那张 ---------------- */
.kn-layer { position: fixed; inset: 0; z-index: 85; pointer-events: none; --kn-kb: 0px; --kn-safe: env(safe-area-inset-bottom, 0px); }
.kn-scrim { position: absolute; inset: 0; background: rgb(20 18 16 / .2); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.kn-float { position: absolute; bottom: 0; pointer-events: auto; cursor: pointer; visibility: hidden;
  translate: 0 calc(100% + 70px); --kn-rot: -4deg;
  transition: translate .55s cubic-bezier(.2, 1, .3, 1), rotate .55s cubic-bezier(.2, 1, .3, 1), visibility 0s linear .55s; }
.kn-layer:is([data-s="peek"], [data-s="open"], [data-s="type"]) .kn-float { visibility: visible; transition-delay: 0s; }
.kn-layer:is([data-s="open"], [data-s="type"]) .kn-float { cursor: default; }
.kn-layer[data-s="peek"] .kn-xd { display: grid; }                                      /* 探出时：× = 这次不用了（30 天内不再探出） */
.kn-layer:is([data-s="open"], [data-s="type"]) .kn-xc { display: grid; }                  /* 拉上来以后：⌄ = 收回去 */
/* 探出时只露标题那一块：下面的表单先藏着，拉上来时再显出来 */
.kn-float :is(.kn-form, .kn-done) { transition: opacity .3s ease .12s; }
.kn-layer:not([data-s="open"]):not([data-s="type"]) .kn-float :is(.kn-form, .kn-done) { opacity: 0; transition-delay: 0s; transition-duration: .15s; }

@media (min-width: 700px) {
  .kn-float { right: 64px; width: 320px; }
  .kn-layer[data-s="peek"] .kn-float { translate: 0 calc(100% - var(--kn-peek, 110px)); --kn-rot: -3deg; }
  .kn-layer[data-s="peek"] .kn-float:is(:hover, :focus-visible) { translate: 0 calc(100% - var(--kn-peek, 110px) - 30px); --kn-rot: -2deg; }
  .kn-layer[data-s="open"] .kn-float { translate: 0 -44px; --kn-rot: -1deg; transition-duration: .6s; transition-timing-function: cubic-bezier(.22, 1.18, .36, 1); }
}
@media (max-width: 699.98px) {
  .kn-float { left: 16px; right: 16px; }
  .kn-float .kn-c { padding: 16px 20px 18px; }
  .kn-layer[data-s="peek"] .kn-float { translate: 3% calc(100% - var(--kn-peek, 110px) - var(--kn-safe) + var(--kn-dy, 0px)); --kn-rot: -3deg; }
  .kn-layer[data-s="open"] .kn-float { translate: 0 calc(-18px - var(--kn-safe) + var(--kn-dy, 0px)); --kn-rot: -1deg; transition-duration: .58s; transition-timing-function: cubic-bezier(.22, 1.15, .36, 1); }
  .kn-layer[data-s="type"] .kn-float { translate: 0 calc(-1 * var(--kn-kb) - 10px); --kn-rot: -.6deg; transition: translate .34s cubic-bezier(.38, .7, .125, 1), rotate .34s cubic-bezier(.38, .7, .125, 1); }
  .kn-layer:is([data-s="open"], [data-s="type"]) .kn-scrim { opacity: 1; pointer-events: auto; }
  .kn-float { touch-action: none; }
  .kn-float.kn-drag { transition: none !important; }
  html.kn-locked, html.kn-locked body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .knote, .kn-float, .kn-scrim, .kn-float :is(.kn-form, .kn-done) { transition-duration: .01s !important; }
  .kn-bad .kn-in, .knote:not([data-state="form"]) .kn-done { animation: none; }
}

/* ---------- 确认好啦页（/letters/confirmed/、/en/letters/confirmed/，2026-10-31）：Buttondown 确认后跳回来；同一张便签，显示「都好啦」 ---------- */
.keep-confirmed { margin: 36px 0 12px; padding-left: 4px; }
/* 子页正文 .doc p 的字号、行距、下边距会压到便签里的段落上：在这页把便签的段落还原成首页那张的样子 */
.keep-confirmed .knote p { margin: 0; color: rgb(var(--kn-ink) / .9); }
.keep-confirmed .knote .kn-say, .keep-confirmed .knote .kn-dt { font: 400 18.5px/1.38 var(--font-brand-zh); letter-spacing: .01em; }
.keep-confirmed .knote .kn-say { margin-top: 4px; }
.keep-confirmed .knote .kn-dp { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: rgb(var(--kn-ink) / .85); }
.keep-confirmed .knote .kn-da { margin-top: 8px; }
.keep-back { margin-top: 28px; }