/* ============================================================
   0F4C81 · journal-frame — 纸上档案「轻量画框」
   只含：scoped tokens + 画框 .sheet + 顶栏 .jf-masthead + 纸纹 .jf-grain
   由 journal-frame.js 注入；一切规则以 body.jf 为作用域，
   变量统一 --jf- 前缀，不污染页面自有样式。
   ============================================================ */

body.jf{
  --jf-paper:#f6f1e7;
  --jf-paper-2:#efe8d9;
  --jf-mat:#e8e0cd;
  --jf-ink:#0e1c2b;
  --jf-ink-2:#3d4f61;
  --jf-ink-3:#7e8b98;
  --jf-blue:#0f4c81;
  --jf-line:#d9d0bd;
  --jf-line-soft:#e5ddcb;
  --jf-mono:"SF Mono","Menlo","Consolas","Courier New",monospace;
  --jf-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --jf-ease:cubic-bezier(0.22,1,0.36,1);
  --jf-shell:1180px;
  background:var(--jf-mat);
  display:block; /* 抵消个别页面（如 login）body 弹性居中 */
}

/* ── 画框：整页四边留白 ── */
body.jf > .sheet{
  position:relative;
  background:var(--jf-paper);
  border:1px solid var(--jf-line);
  margin:clamp(14px,2.6vw,40px);
  min-height:calc(100vh - clamp(14px,2.6vw,40px) * 2);
  display:flex;flex-direction:column;
  /* 不设 overflow:hidden：保留页面自身 position:sticky 元素（侧栏/页内顶栏） */
  box-shadow:0 1px 2px rgba(44,36,22,.05),0 18px 48px -18px rgba(44,36,22,.18);
  animation:jfSheetIn .7s var(--jf-ease) both;
}
@keyframes jfSheetIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body.jf > .sheet > .jf-main{flex:1;min-width:0}

/* ── 纸纹颗粒（feTurbulence，全页覆盖） ── */
.jf-grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;
  mix-blend-mode:multiply;opacity:.5;
}

/* ── 顶栏（与首页同语法） ── */
body.jf .jf-masthead{
  position:sticky;top:0;z-index:200; /* 高于页面自带 sticky 顶栏（如 baking z:100），低于模态/toast */
  background:color-mix(in srgb,var(--jf-paper) 90%,transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--jf-line);
  font-family:var(--jf-sans);
}
body.jf .jf-masthead-in{
  max-width:var(--jf-shell);margin:0 auto;padding:0 clamp(26px,5vw,72px);
  height:58px;display:flex;align-items:center;gap:28px;
}
@media(max-width:640px){body.jf .jf-masthead-in{padding:0 20px;gap:16px}}
body.jf .jf-wordmark{display:flex;align-items:baseline;gap:10px;flex:0 0 auto;text-decoration:none;color:inherit}
body.jf .jf-wordmark b{
  font-family:var(--jf-mono);font-size:15px;font-weight:700;
  letter-spacing:.06em;color:var(--jf-blue);
}
body.jf .jf-wordmark b sup{font-size:8px}
body.jf .jf-wordmark span{
  font-family:var(--jf-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--jf-ink-3);
}
@media(max-width:760px){body.jf .jf-wordmark span{display:none}}
body.jf .jf-nav{display:flex;gap:22px;margin-left:auto}
body.jf .jf-nav a{
  position:relative;font-family:var(--jf-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--jf-ink-2);
  padding:4px 0;text-decoration:none;
}
body.jf .jf-nav a small{
  font-family:var(--jf-sans);font-size:10px;letter-spacing:.2em;
  color:var(--jf-ink-3);margin-left:5px;
}
body.jf .jf-nav a::after{
  content:"";position:absolute;left:-2%;bottom:0;height:2px;width:0;
  background:var(--jf-blue);opacity:.75;border-radius:2px;
  transition:width .28s var(--jf-ease);
}
body.jf .jf-nav a:hover{color:var(--jf-blue)}
body.jf .jf-nav a:hover small{color:var(--jf-blue)}
body.jf .jf-nav a:hover::after{width:104%}
body.jf .jf-nav a[aria-current="page"]{color:var(--jf-blue)}
body.jf .jf-nav a[aria-current="page"] small{color:var(--jf-blue)}
body.jf .jf-nav a[aria-current="page"]::after{width:104%}
@media(max-width:760px){body.jf .jf-nav{display:none}}

/* ── 兼容补丁：login 的 .gate 原依赖 body flex 居中 ── */
body.jf > .sheet > .jf-main > .gate{margin:clamp(48px,12vh,120px) auto 0}

/* ── 兼容补丁：status 等页面顶层游离返回链接，给个缩进 ── */
body.jf > .sheet > .jf-main > .back-link{display:inline-block;margin:18px 0 0 clamp(20px,4vw,40px)}

/* ── 降级：减少动态 ── */
@media(prefers-reduced-motion:reduce){
  body.jf > .sheet{animation:none}
  .jf-grain{display:none}
  body.jf .jf-nav a::after{transition:none}
}