/* ============================================================
 * 问稷 AgriMind · 签名层 v4「农书 FIELD LEDGER」
 * ------------------------------------------------------------
 * 加载顺序：tokens → base → components → pages → **v4**（最后一个）
 * 本文件只做两件事：① 覆盖一切「AI 模板样」的历史样式；
 *                   ② 提供 v4 独有的签名组件（.fig / .ledger / .band / 刻度尺）。
 *
 * —— 为什么要有这一层？
 * v1–v3 的问题是「像」，不是「丑」：双行页头 + 圆角卡墙 + 每节同一个「//」装饰，
 * 是三件套式的通用后台模板。v4 换成印刷制的版面语言：
 *   结构靠「近黑硬线」，分层靠「纸与线」，不靠柔和投影和不必要的圆角。
 * ========================================================== */

/* ============================================================
 * 一、页头：单行。品牌 + 主导航 + 操作区挤在一行里
 *    （v3 是「终端头 + 导航条」两行 —— 这是后台模板最强的特征）
 * ========================================================== */
.term{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line-3);
}
.term::after{               /* 垄线：页头下沿的等距刻度，像量尺/田垄 */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:5px;
  background:repeating-linear-gradient(to right,
    var(--line-2) 0 1px, transparent 1px 14px);
  opacity:.5;pointer-events:none;
}
.term-in{display:flex;align-items:center;height:60px;gap:var(--s5);max-width:var(--maxw)}
/* 48px 内边距 ×2 是页边的呼吸，56px 时钟在手机上确实挤不下——
   但「时钟被藏起来」和「页头被裁掉」是两回事：这里只做 min-width 归零，
   绝不用 overflow:hidden 去切内容（那会把右上角的状态直接切没）。 */
.term-in>*{min-width:0}
@media (max-width:760px){ .term-in{height:54px;gap:var(--s3)} }

/* 导航基础：并入页头同一行。
   —— 必须先于下面的响应式断点声明，否则 shorthand 的 flex:1 1 auto
   会反过来盖掉断点里的 flex-basis，导航就赖在第一行不肯换行。 */
.nav{
  position:static;background:transparent;border:0;
  margin-left:var(--s4);min-width:0;flex:1 1 auto;
}

/* 手机上「品牌 + 状态 + 模式 + 时钟 + 导航」塞不进一行。
   与其让整条页头横滚（第一屏就露怯），不如把导航折成第二行，
   但保持「一条细带」的观感。 */
@media (max-width:880px){
  /* 手机上页头折成两行：上行「品牌 + 状态」，下行整条导航带。
     不用 flex-wrap 猜换行点——直接换 grid，行归属是确定的。 */
  .term-in{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    align-items:center;
    height:auto;gap:0 var(--s3);padding-bottom:0;
  }
  .brand{grid-row:1;grid-column:1}
  .term-right{grid-row:1;grid-column:2;justify-self:end}
  .nav{
    grid-row:2;
    grid-column:1 / -1;
    width:100%;min-width:0;
    /* 必须显式清掉基础规则里的 margin-left —— 留着会把导航带整体右推 8px，
       正好顶出页面右缘，整页就横滚了。 */
    margin:var(--s2) 0 0;
    border-top:1px solid var(--line);
  }
  .nav-in{
    overflow-x:auto;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .nav a,.nav-g>.ng-t{padding:8px 10px;font-size:12.5px}
  .nav a::after,.nav-g>.ng-t::after{left:10px;right:10px;bottom:0}
  /* 把下拉挂在 .nav-g 上的定位基准修正：导航带只有一行高度 */
  .nav-g>.nav-dd{top:calc(100% + 1px)}
}
/* 更窄：模式开关收进页面内（导航带内也有入口），时钟让位 */
@media (max-width:460px){
  .brand-name{font-size:14px}
  .live{padding:3px 9px 3px 7px;letter-spacing:.08em}
}

.brand-mark{
  width:28px;height:28px;border-radius:0;background:var(--ink);
}
.brand-mark svg{color:var(--brand)}
.brand-name{
  font-family:var(--font-sans);font-size:15px;font-weight:800;
  letter-spacing:.02em;
}
.brand-sub{
  font-family:var(--font-mono);font-size:11px;font-style:normal;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);
}
.brand-div{height:13px;background:var(--line-2)}

/* 导航并入同一行（基础规则见上面页头一节，这里只留版面细节） */
.nav-in{max-width:none;padding:0;gap:0;overflow-x:auto;overflow-y:visible}
/* v5.1：修「下拉看不见/点不动」——overflow-x:auto 会把 absolute 下拉整个裁掉。
   宽屏直接放开；窄屏保持可横滚，但任一下拉展开时临时放开（:has 现代浏览器可用）。 */
@media (min-width:1081px){ .nav-in{overflow:visible} }
.nav-in:has(.nav-g.open){overflow:visible}
@media (max-width:1080px){ .nav-in{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)} }
.nav a,.nav-g>.ng-t{
  padding:6px 11px;font-size:12.5px;font-weight:500;
  border-bottom:0;position:relative;
}
.nav a::after,.nav-g>.ng-t::after{   /* 下划线式激活态，替代整块底色 */
  content:"";position:absolute;left:11px;right:11px;bottom:-2px;height:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t) var(--ease);
}
.nav a.on,.nav-g.on>.ng-t{background:transparent;color:var(--ink);font-weight:700}
.nav a.on::after,.nav-g.on>.ng-t::after{transform:scaleX(1)}
.nav a:hover::after,.nav-g>.ng-t:hover::after{transform:scaleX(1)}
.nav a .nav-ix,.nav-g>.ng-t .nav-ix{
  font-size:9px;color:var(--ink-4);letter-spacing:.08em;
}
.nav a.on .nav-ix,.nav-g.on>.ng-t .nav-ix{color:var(--brand-deep)}
/* 农户主入口：荧光下划线常亮 */
.nav a.hot{color:var(--ink);font-weight:700}
.nav a.hot::after{background:var(--brand);transform:scaleX(1);height:3px}
.nav a.hot .nav-ix{color:var(--brand-deep)}
.nav a.hot.on{background:transparent}
.nav-cta{margin-left:var(--s3)}
@media (max-width:1080px){ .nav-cta,.nav a[href="admin.html"],.nav a[href="feedback.html"]{display:none} }
@media (max-width:760px){
  .brand-txt .brand-div,.brand-sub,.clock{display:none}
  /* 注意：这里不要再写 .nav{margin-left:...}。
     880px 断点已经把导航折成 grid 第二行并用 margin:var(--s2) 0 0 定了位；
     本块在它之后声明，任何 margin-left 都会把「width:100% 的导航带」再右推一段，
     100% + Npx 直接顶出视口 → 整页横滚。窄屏只调内间距，不动外边距。 */
  .nav a,.nav-g>.ng-t{padding:6px 9px;font-size:12px}
  .live{padding:3px 8px}
}

/* 模式开关：方角、墨底色 */
.modesw{border-radius:0;border-color:var(--line-3)}
.modesw button{border-radius:0;padding:4px 9px;background:transparent}
.modesw button.on{background:var(--ink);color:var(--paper)}
.live{border-radius:0;background:var(--ink);letter-spacing:.14em;font-size:10px}
.live i{background:var(--brand);border-radius:0}

/* 下拉：硬边、无圆角、贴近纸色 */
.nav-dd{
  border-radius:0;border-color:var(--line-3);box-shadow:var(--sh-pop);
  padding:0;min-width:250px;background:var(--panel);
}
/* 手机上下拉面板 250px 宽，若挂在接近右端的导航项下就会顶出屏幕
   → 文档被撑宽、整页可横滚。这里让它始终限制在视口内。 */
@media (max-width:520px){
  .nav-dd{
    min-width:0;
    width:min(272px, calc(100vw - 24px));
    max-width:calc(100vw - 24px);
    left:auto;right:0;
  }
  .nav-g:nth-last-child(-n+2)>.nav-dd{left:auto;right:0}
  .nav-dd a .nd-d{white-space:normal}
}
.nav-dd a{border-radius:0;border-bottom:1px solid var(--line);padding:11px 13px}
.nav-dd a:last-child{border-bottom:0}
.nav-dd a:hover{background:var(--paper-2)}
.nav-dd a.on{background:var(--brand-soft)}
/* v5.1：下拉支持「点击展开」（此前只有 hover，用户反馈「点不动」） */
.nav-g.open>.nav-dd{opacity:1;visibility:visible;transform:translateY(0)}
.nav-g.open>.ng-t svg{transform:rotate(180deg)}
.nav-g.open>.ng-t{color:var(--ink)}
/* v5.1：补掉按钮与面板之间 1px 悬空缝——鼠标穿越时 hover 断开、菜单闪没（「点不动」体感来源） */
.nav-g>.nav-dd{top:100%}
/* v5.1：品牌副标不再被挤出省略号；离线态用麦黄点 */
.brand-sub{overflow:visible;text-overflow:clip}
.live.off i{background:var(--wheat)}
.live.off{color:var(--ink-3)}

/* ============================================================
 * 二、版面骨架：页缘刻度尺 + 巨型编号小节标题
 * ========================================================== */
main.page{
  counter-reset:sec;
  position:relative;
}
/* 左右页缘的刻度尺（>1180px 才出现，模拟田间量尺 / 印刷裁切标记） */
main.page::before,main.page::after{
  content:"";position:absolute;top:var(--s7);bottom:var(--s8);width:7px;
  pointer-events:none;display:none;opacity:.6;
  background:repeating-linear-gradient(to bottom,
    var(--line-2) 0 1px, transparent 1px 11px);
}
@media (min-width:1180px){ main.page::before,main.page::after{display:block} }
main.page::before{left:-11px}
main.page::after{right:-11px}

.phead{padding:var(--s7) 0 var(--s4);border-bottom:1px solid var(--line);margin-bottom:var(--s5)}
.phead h1{font-size:var(--t-h1);font-weight:800;letter-spacing:-.028em;line-height:1.08}
.phead .phead-sub{margin-top:var(--s3);max-width:64ch;color:var(--ink-2)}
.crumb{
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.14em;
  color:var(--ink-4);margin-bottom:var(--s3);
}

/* —— 小节标题（v5.1：删掉「01/02…」编号——真实网站不这么排，用户 2026-09-22 反馈） —— */
.sec-h{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:end;gap:var(--s4);
  margin:var(--s9) 0 var(--s5);padding-top:var(--s3);
  border-top:2px solid var(--ink);
}
.sec-h::before{content:none}
.sec-h h2{
  font-size:var(--t-h2);font-weight:800;letter-spacing:-.025em;line-height:1.1;
}
.sec-h .sec-meta{
  margin-left:0;max-width:36ch;text-align:right;line-height:1.55;
  font-size:var(--t-label);letter-spacing:.08em;color:var(--ink-4);
}
@media (max-width:640px){
  .sec-h{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .sec-h .sec-meta{grid-column:1/-1;text-align:left;max-width:none}
}
/* 老的小节标题 .sh 同样给硬规则线 */
.sh{margin:var(--s8) 0 var(--s4);padding-top:var(--s3);border-top:2px solid var(--ink);
  align-items:flex-start}

/* ============================================================
 * 三、去卡片化：面板改成「印刷栏格」
 *    有 1px 中灰边、零圆角、零投影；表头是一条满幅的底纹带
 * ========================================================== */
.panel{
  background:var(--panel);border:1px solid var(--line-2);border-radius:0;
  padding:var(--s4);box-shadow:none;
}
.panel.hoverable:hover,.panel.lift:hover{border-color:var(--line-3)}
.panel-h{
  margin:calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s3);
  padding:9px var(--s4);background:var(--panel-2);
  border-bottom:1px solid var(--line-2);
  /* 允许换行：标题和右上角的 meta 在 320 宽的手机上会挤成一条，
     flex-wrap 让 meta 掉到第二行，而不是把整块面板顶出屏幕。
     放得下的时候不会换行，桌面观感不变。 */
  flex-wrap:wrap;row-gap:2px;
}
.panel-h .ph-icon{color:var(--ink-2)}
.panel-h h3{font-size:var(--t-body);font-weight:800;letter-spacing:.01em}
.panel-h .panel-meta{letter-spacing:.1em;font-size:var(--t-label)}
.panel.tight .panel-h{margin:calc(var(--s3) * -1) calc(var(--s3) * -1) var(--s3)}
.panel.pad0 .panel-h{margin:0 0 0}
.panel--flat{background:var(--paper-2)}
.panel--brand{background:var(--brand-soft);border-color:#D2DE8E}
.panel--dark{background:var(--forest);border-color:var(--forest)}
.panel-f{border-top:1px solid var(--line);padding-top:var(--s2)}

/* 抬升交互：v4 用「线变深」而不是「浮起来」 */
.lift{transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
.lift:hover{transform:none;box-shadow:none;border-color:var(--ink);background:var(--panel-2)}

/* 特性卡：去掉图标气泡，改成墨色方标（与品牌标同构） */
.feat{border-radius:0;border-color:var(--line-2);padding:var(--s5)}
.feat .fi{
  width:30px;height:30px;background:var(--ink);border-radius:0;
  color:var(--brand);margin-bottom:var(--s4);
  display:grid;place-items:center;flex:0 0 auto;
}
.feat .fi svg{width:16px;height:16px}
.feat h3{font-size:var(--t-body-lg);letter-spacing:-.01em}
a.feat:hover{border-color:var(--ink);background:var(--panel-2)}
a.feat:hover .fi{background:var(--brand);color:var(--brand-ink)}
.cta{border-radius:0;border-color:var(--line-3);box-shadow:none;background:var(--panel-2)}
.faq{border-radius:0;border-color:var(--line-2)}
.faq summary{border-radius:0}
.dlrow{border-radius:0;border-color:var(--line-2)}
.dlrow .dr-i{border-radius:0;background:var(--panel-2)}
.stepv .sv-n{border-radius:0;background:var(--ink);color:var(--brand);border-color:var(--ink)}
.tl-item::before{border-radius:0}
.nav-dd,.modal,.toast{border-radius:0}

/* 表格：更像印刷表 */
.tbl th{background:var(--panel-2);border-bottom:1px solid var(--line-3);letter-spacing:.1em}
.tbl td{border-bottom:1px solid var(--line)}
.tbl .rowtag,.tag{border-radius:0}

/* 胶囊一律方角，弱化「标签贴纸感」 */
.pill{border-radius:0;letter-spacing:.1em;padding:2px 7px}
.badge-lg{border-radius:0}
.tag{border-radius:0}

/* ============================================================
 * 四、按钮：实心墨块 / 描边方框，两种即可
 * ========================================================== */
.btn{
  border-radius:0;padding:10px 18px;font-weight:700;letter-spacing:.01em;
  box-shadow:inset 0 -2px 0 rgba(20,18,14,.16);
}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn.ghost{
  border-color:var(--line-3);box-shadow:none;background:var(--panel);
  color:var(--ink);
}
.btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.dark{box-shadow:inset 0 -2px 0 rgba(255,255,255,.14)}
.btn.sm{padding:6px 12px;box-shadow:none}
.btn.xs{padding:4px 9px;box-shadow:none}

/* ============================================================
 * 五、签名组件 A：.fig —— 衬线数字 + 上标单位
 *    灵感来自肥料袋上的成分标注 / 仪器刻度盘，替代渐变数字
 * ========================================================== */
.fig{
  font-family:var(--font-figure);
  font-variant-numeric:lining-nums tabular-nums;
  font-weight:400;letter-spacing:-.035em;line-height:.9;
  color:var(--ink);display:inline-flex;align-items:baseline;gap:3px;
}
.fig sup,.fig .u{
  font-family:var(--font-mono);font-size:.3em;font-weight:600;
  letter-spacing:.06em;color:var(--ink-3);vertical-align:super;
  text-transform:none;
}
.fig-1{font-size:var(--t-fig)}
.fig-2{font-size:var(--t-h2);font-family:var(--font-figure)}
.fig-xl{font-size:var(--t-fig-xl)}
.fig-neg{color:var(--risk)}      /* 负面指标照实标红，不藏 */
.fig-pos{color:var(--ok)}

/* ============================================================
 * 六、签名组件 B：.ledger —— 标签式信息块（化肥袋 / 田块标签）
 * ========================================================== */
.ledger{
  border:2px solid var(--ink);background:var(--panel);
  display:flex;flex-direction:column;
}
.ledger-strip{
  background:var(--brand);color:var(--brand-ink);
  padding:7px var(--s4);display:flex;align-items:center;gap:var(--s2);
  font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  border-bottom:2px solid var(--ink);
}
.ledger-strip .ls-r{margin-left:auto;letter-spacing:.08em;font-weight:500;opacity:.72}
.ledger-body{padding:var(--s5)}
.ledger-stripe{                 /* 底部的成分条：像肥料袋上的 N-P-K */
  display:flex;border-top:1px solid var(--line-2);margin-top:auto;
}
.ledger-stripe > div{
  flex:1;padding:var(--s3) var(--s4);border-right:1px solid var(--line-2);
  min-width:0;
}
.ledger-stripe > div:last-child{border-right:0}
.ledger-stripe .lk{
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-4);display:block;margin-bottom:4px;
}
.ledger-stripe .lv{font-size:var(--t-body);font-weight:700;line-height:1.35}

/* 深色版（用于 impact / 结果强调） */
.ledger--deep{border-color:var(--ink);background:var(--forest);color:var(--deep-ink)}
.ledger--deep .ledger-strip{background:var(--ink);color:var(--brand);border-color:var(--ink)}
.ledger--deep .ledger-stripe{border-top-color:var(--deep-line)}
.ledger--deep .ledger-stripe > div{border-right-color:var(--deep-line)}
.ledger--deep .lk{color:var(--deep-ink-3)}
.ledger--deep .fig{color:var(--deep-ink)}
.ledger--deep .fig .u{color:var(--deep-ink-3)}

/* ============================================================
 * 七、签名组件 C：.band —— 满幅深色带（替代圆角 impact 卡）
 * ========================================================== */
.impact{
  border-radius:0;box-shadow:none;padding:var(--s8) var(--s7);
  position:relative;overflow:hidden;
  background:var(--forest);
}
.impact::after{                 /* 斜纹：像防草布 */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(135deg,
    rgba(255,255,255,.045) 0 1px, transparent 1px 9px);
}
.impact h2{font-size:var(--t-h2);letter-spacing:-.02em;font-weight:800}
.impact .istat .iv{
  font-family:var(--font-figure);font-size:34px;font-weight:400;
  letter-spacing:-.035em;color:var(--brand);
}
.impact .istat .iv small{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em}
.impact-stats{gap:var(--s6)}
.impact .istat{padding-left:var(--s4);border-left:1px solid var(--deep-line)}

/* ============================================================
 * 八、首页首屏：非对称、左对齐、大标题
 * ========================================================== */
.hero{
  padding:var(--s8) 0 var(--s6);
  grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:var(--s8);align-items:end;
  border-bottom:2px solid var(--ink);
}
@media (max-width:940px){ .hero{grid-template-columns:1fr;gap:var(--s6);align-items:start} }
.hero h1{
  font-size:var(--t-hero);font-weight:800;letter-spacing:-.038em;line-height:1.08;
  text-wrap:balance;
}
@media (min-width:1000px){ .hero h1{font-size:var(--t-hero)} }
/* 高亮不用"荧光笔渐变"，改成墨色块 + 荧光底线 */
.hero h1 em{
  font-style:normal;background:none;padding:0;
  box-shadow:inset 0 -.22em 0 var(--brand);
}
.hero-eyebrow{gap:6px;margin-bottom:var(--s5)}
.hero-eyebrow .pill{border-color:var(--line-2);background:transparent}
.hero-lead{max-width:46ch;font-size:var(--t-body-lg);line-height:1.85}
.hero-act .btn{padding:12px 22px}
/* 三个硬指标：三栏栅格 + 竖分隔线（v3 的 flex-wrap 会在窄栏里折成两行） */
.hero-facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin-top:var(--s6);
  border-top:1px solid var(--line);padding-top:var(--s4);
}
.hero-fact{
  padding:0 var(--s5);margin:0;border-right:1px solid var(--line);
}
.hero-fact:first-child{padding-left:0}
.hero-fact:last-child{border-right:0}
@media (max-width:620px){
  .hero-facts{grid-template-columns:1fr}
  .hero-fact{padding:var(--s3) 0;border-right:0;border-bottom:1px solid var(--line)}
  .hero-fact:last-child{border-bottom:0}
}
.hero-fact .hf-v{
  font-family:var(--font-figure);font-size:29px;font-weight:400;
  letter-spacing:-.035em;line-height:1.15;
}
.hero-fact .hf-l{font-size:var(--t-cap);color:var(--ink-3);margin-top:5px;line-height:1.55}
.hero-art{border-radius:0;border-color:var(--line-2);padding:0}
.hero-art .ha-cap{
  background:var(--panel-2);border-bottom:1px solid var(--line-2);
}
.hero-art #hero-desk{padding:var(--s4)}

/* KPI 条：改成硬边栏格，去掉渐变底 */
.kpi-strip{border-radius:0;border-color:var(--line-2)}
.kpi .k-val{font-family:var(--font-figure);font-weight:400;font-size:36px;letter-spacing:-.035em}
.kpi.acc{background:var(--brand-soft)}
.kpi.acc .k-val{color:var(--brand-ink)}

/* 说明卡 */
.note{border-radius:0}

/* ============================================================
 * 九、快速开问：结果页 = 化肥袋标签
 * ========================================================== */
.rx-card{border-radius:0;border:2px solid var(--ink);box-shadow:none}
.rx-top{
  background:var(--brand);border-bottom:2px solid var(--ink);
  text-align:left;padding:var(--s5) var(--s5) var(--s4);
}
.rx-big{justify-content:flex-start;gap:var(--s5);align-items:flex-end}
.rx-n{
  font-family:var(--font-figure);font-size:var(--t-fig-xl);font-weight:400;
  letter-spacing:-.045em;line-height:.86;color:var(--brand-ink);
}
.rx-n small{
  font-family:var(--font-mono);font-size:15px;font-weight:700;
  margin-left:4px;letter-spacing:.04em;color:var(--brand-ink);opacity:.72;
}
.rx-u{color:var(--brand-ink);opacity:.8;font-size:var(--t-cap)}
.rx-op{color:var(--brand-ink);opacity:.5;font-size:22px;font-weight:400}
.rx-body{padding:0}
.rx-line{
  display:grid;grid-template-columns:96px minmax(0,1fr);
  gap:var(--s4);padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);
  font-size:var(--t-body);
}
.rx-line:last-child{border-bottom:0}
.rx-line .rl{
  flex:none;color:var(--ink-4);font-family:var(--font-mono);
  font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;
}
.rx-line .rv b{color:var(--ink);font-weight:800;
  box-shadow:inset 0 -.34em 0 var(--brand-soft)}
@media (max-width:560px){
  .rx-line{grid-template-columns:1fr;gap:3px;padding:var(--s3) var(--s4)}
  .rx-big{gap:var(--s3)}
}

/* 步骤条：改成硬边编号块；手机上只留编号，去掉会折行的长标签 */
.wz-bar{border-radius:0}
@media (max-width:640px){
  .wz-bar{gap:6px;flex-wrap:nowrap;align-items:center;
    border-bottom:1px solid var(--line);padding-bottom:var(--s3)}
  .wz-bar .wz-l{display:none}
  .wz-bar .wz-d{width:28px;height:28px;border-radius:0;font-size:var(--t-cap)}
  .wz-bar .wz-b{margin-left:auto}
}
.wz-opts{gap:var(--gap)}
.wz-opt{
  border-radius:0;border-color:var(--line-2);background:var(--panel);
  box-shadow:none;
}
.wz-opt:hover{border-color:var(--ink)}
.wz-opt.on{
  border-color:var(--ink);border-width:2px;background:var(--brand-soft);
}
.wz-opt.on .wo-t{color:var(--ink)}
.wz-q{letter-spacing:-.025em;font-weight:800}
.wz-hint{color:var(--ink-3)}

/* ============================================================
 * 十一、我的地块 · 一季日程（myfields.html）
 *    农户端的地块台账：把「算一次」变成「一季都在用」
 * ========================================================== */
.mf-sum{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line-2);background:var(--panel);
}
.mf-sum-i{padding:var(--s4) var(--s5);border-right:1px solid var(--line-2);min-width:0}
.mf-sum-i:last-child{border-right:0}
.mf-sum-i .fig{font-size:34px}
.mf-sum-l{display:block;margin-top:5px;font-size:var(--t-cap);color:var(--ink-3)}
@media (max-width:640px){
  .mf-sum{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mf-sum-i:nth-child(2n){border-right:0}
  .mf-sum-i:nth-child(-n+2){border-bottom:1px solid var(--line-2)}
  .mf-sum-i .fig{font-size:26px}
}

/* 空状态：不用插画，用一个巨大的 0 和一句实话 */
.mf-empty{
  border:1px solid var(--line-2);background:var(--panel);
  padding:var(--s8) var(--s5);text-align:center;margin-top:var(--s5);
}
.mf-empty-n{
  font-family:var(--font-figure);font-size:88px;line-height:.9;
  color:var(--line-2);letter-spacing:-.05em;
}
.mf-empty h2{font-size:var(--t-h2);font-weight:800;margin:var(--s3) 0 var(--s2);letter-spacing:-.02em}
.mf-empty p{max-width:52ch;margin:0 auto;color:var(--ink-2);line-height:1.85}

/* 地块卡：.ledger 的本页定制 */
.mf-card{margin-top:var(--gap)}
.mf-card .ledger-strip svg{flex:0 0 auto}
.mf-next{
  border-left:3px solid var(--brand);background:var(--paper-2);
  padding:var(--s3) var(--s4);font-size:var(--t-body);line-height:1.75;
  color:var(--ink-2);
}
.mf-next b{color:var(--ink);font-weight:800}

.mf-evts{list-style:none;margin:var(--s4) 0 0;padding:0}
.mf-evt{
  display:grid;grid-template-columns:52px minmax(0,1fr) 104px auto;
  gap:var(--s4);align-items:center;
  padding:var(--s3) 0;border-bottom:1px solid var(--line);
}
.mf-evt:last-child{border-bottom:0}
.mf-evt-t{
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);
}
.mf-evt-n .fig-2{font-size:26px}
.mf-evt-sub{display:block;margin-top:3px;font-size:var(--t-cap);color:var(--ink-3)}
.mf-evt-d{
  font-size:var(--t-cap);color:var(--ink-3);text-align:right;line-height:1.5;
}
.mf-evt-d b{color:var(--ink);font-weight:700}
.mf-evt-a{display:flex;gap:var(--s2);align-items:center;justify-content:flex-end}
.mf-evt.is-done .mf-evt-n .fig-2{color:var(--ink-4)}
.mf-evt.is-done .mf-evt-t{color:var(--ink-4)}
/* 「本季不单独追肥」：不给数字、不给按钮，只给一句实话 + 农艺护栏 */
.mf-evt.is-none{background:var(--paper-2)}
.mf-evt-0{
  display:inline-block;font-size:var(--t-body-lg);font-weight:700;color:var(--ink-2);
}
.mf-evt.is-none .mf-evt-sub{max-width:56ch}
@media (max-width:720px){
  .mf-evt{grid-template-columns:44px minmax(0,1fr);gap:var(--s2) var(--s3)}
  .mf-evt-d{grid-column:2;text-align:left}
  .mf-evt-a{grid-column:2;justify-content:flex-start}
}

.mf-buy{
  display:flex;align-items:center;gap:var(--s2);margin-top:var(--s4);
  padding:var(--s3) var(--s4);background:var(--brand-soft);
  font-size:var(--t-body);color:var(--ink);
}
.mf-buy svg{flex:0 0 auto;color:var(--brand-deep)}
.mf-buy b{font-weight:800}

.mf-acts{
  display:flex;gap:var(--s2);flex-wrap:wrap;
  padding:var(--s3) var(--s5);border-top:1px solid var(--line);
  background:var(--panel-2);
}

/* 一季日程时间轴 */
.mf-tl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.mf-tl-i{
  display:grid;grid-template-columns:96px 92px minmax(0,1fr) 74px;
  gap:var(--s4);align-items:baseline;
  padding:var(--s3) 0;border-bottom:1px solid var(--line);
  font-size:var(--t-body);
}
.mf-tl-d{font-family:var(--font-mono);font-size:var(--t-cap);color:var(--ink-3)}
.mf-tl-n{font-family:var(--font-figure);font-size:18px;color:var(--ink-2);white-space:nowrap}
.mf-tl-b b{font-weight:700}
.mf-tl-s{
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.1em;
  color:var(--ink-4);text-align:right;
}
.mf-tl-i.is-soon .mf-tl-n{color:var(--brand-deep);font-weight:700}
.mf-tl-i.is-soon{background:var(--brand-soft)}
.mf-tl-i.is-done{opacity:.5}
.mf-tl-i.is-done .mf-tl-b{text-decoration:line-through}
/* 手机上折成两行，而不是让「状态」孤零零占第三行：
   第 1 行 = 日期 | 还有几天 | 状态，第 2 行 = 地块 · 作业内容。 */
@media (max-width:640px){
  .mf-tl-i{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:3px var(--s3);
  }
  .mf-tl-d{grid-area:1/1;white-space:nowrap}
  .mf-tl-n{grid-area:1/2;text-align:center}
  .mf-tl-s{grid-area:1/3;text-align:right}
  .mf-tl-b{grid-area:2/1/-1/4}
}

/* ============================================================
 * 十一·B（v4.1）追肥时机 · 本季账单 · 步进器
 *    把「一季日程」补完整：能追不能追 → 收完结账 → 下一季带着账回来
 * ========================================================== */

/* ---- 通用小选项按钮：方框 / 选中即反白（与 v4 按钮同一套） ---- */
.mf-rb{
  padding:6px 11px;font-size:var(--t-cap);color:var(--ink-2);
  background:var(--panel);border:1px solid var(--line-2);border-radius:0;
  cursor:pointer;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.mf-rb:hover{border-color:var(--ink);color:var(--ink)}
.mf-rb.on{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:700}

/* ---- 追肥时机 ---- */
.mf-rain{
  margin-top:var(--s4);border:1px solid var(--line-2);border-left:3px solid var(--sky);
  background:var(--panel);
}
.mf-rain-h{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);
}
.mf-rain-t{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.mf-rain-m{margin-left:auto;font-size:var(--t-cap);color:var(--ink-4)}
.mf-rain-bars{display:flex;border-bottom:1px solid var(--line)}
.mf-rain-bar{
  flex:1;display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);
  padding:var(--s3) var(--s4);
}
.mf-rain-bar+.mf-rain-bar{border-left:1px solid var(--line)}
.rb-k{font-size:var(--t-cap);color:var(--ink-3)}
.rb-v{font-size:var(--t-cap);color:var(--ink-3)}
.rb-v .fig{font-family:var(--font-figure);font-size:24px;color:var(--sky);margin-right:2px}
.mf-rain-tip{
  padding:var(--s3) var(--s4);font-size:var(--t-body);line-height:1.8;color:var(--ink-2);
  border-bottom:1px solid var(--line);
}
.mf-rain-tip b{color:var(--ink);font-weight:800}
.mf-rain-tip.ok{background:var(--ok-bg)}
.mf-rain-tip.ok b{color:var(--ok)}
.mf-rain-tip.warn{background:var(--warn-bg)}
.mf-rain-tip.warn b{color:var(--warn)}
.mf-rain-tip.risk{background:var(--risk-bg)}
.mf-rain-tip.risk b{color:var(--risk)}
.mf-rain-act{
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  padding:var(--s3) var(--s4);background:var(--panel-2);
}
.mf-rain-l{font-size:var(--t-cap);color:var(--ink-3);margin-right:2px}
.mf-rain-cap{
  padding:var(--s2) var(--s4) var(--s3);font-size:var(--t-cap);
  line-height:1.7;color:var(--ink-4);border-top:1px solid var(--line);
}
.mf-rain-cap b{color:var(--ink-3)}
@media (max-width:560px){
  .mf-rain-act .mf-rb{flex:1;min-width:calc(25% - var(--s2))}
  .mf-rain-l{flex:1 0 100%}
}

/* ---- 收完记账的入口条 ---- */
.mf-hvcta{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s4);padding:var(--s3) var(--s4);
  border:1px dashed var(--line-2);background:var(--paper-2);
}
.mf-hvcta.is-hot{
  border:1px solid var(--wheat);border-left:3px solid var(--wheat);
  background:var(--brand-soft);
}
.mf-hvcta-t{font-size:var(--t-body);color:var(--ink-2);font-weight:700}
.mf-hvcta .btn{margin-left:auto}

/* ---- 本季账单 ---- */
.mf-bill{
  margin-top:var(--s4);border:1px solid var(--line-2);border-top:2px solid var(--ink);
  background:var(--panel);
}
.mf-bill-h{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);
}
.mf-bill-t{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.mf-bill-a{margin-left:auto;display:flex;gap:var(--s2)}
.mf-bill-row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-bottom:1px solid var(--line);
}
.mf-bill-i{padding:var(--s4) var(--s5);border-right:1px solid var(--line);min-width:0}
.mf-bill-i:last-child{border-right:0}
.mf-bill-l{
  display:block;font-size:var(--t-cap);color:var(--ink-3);margin-bottom:5px;
}
.mf-bill-i .fig-2{font-size:30px;color:var(--ink)}
.mf-bill-sub{display:block;margin-top:4px;font-size:var(--t-cap);color:var(--ink-3)}
.mf-bill-prev{
  padding:var(--s3) var(--s5);border-bottom:1px solid var(--line);
  background:var(--panel-2);font-size:var(--t-body);color:var(--ink-2);line-height:1.75;
}
.mf-bill-prev b{color:var(--ink);font-weight:800}
.mf-bill-prev .cap{display:block;margin-top:3px}
.mf-bill-tip{
  padding:var(--s3) var(--s5);font-size:var(--t-body);line-height:1.85;color:var(--ink-2);
}
.mf-bill-tip b{color:var(--ink);font-weight:800}
.mf-bill-cap{
  padding:var(--s2) var(--s5) var(--s3);font-size:var(--t-cap);color:var(--ink-4);
  border-top:1px solid var(--line);line-height:1.7;
}
.mf-bill-cap b{color:var(--ink-3)}
@media (max-width:640px){
  .mf-bill-row{grid-template-columns:1fr}
  .mf-bill-i{border-right:0;border-bottom:1px solid var(--line);
    display:flex;align-items:baseline;gap:var(--s4);padding:var(--s3) var(--s4)}
  .mf-bill-i:last-child{border-bottom:0}
  .mf-bill-l{margin-bottom:0;flex:0 0 auto;min-width:52px}
  .mf-bill-sub{margin-top:0;flex:1;text-align:right}
}

/* ---- 步进器（大数字 ±，避免农户掏键盘） ---- */
.hv-row{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) 0;border-bottom:1px solid var(--line);
}
.hv-row:last-of-type{border-bottom:0}
.hv-l{flex:0 0 auto;font-size:var(--t-body);font-weight:700;color:var(--ink);min-width:92px}
.hv-u{font-size:var(--t-cap);color:var(--ink-3)}
.hv-u b{color:var(--ink);font-weight:800}
.hv-cap{font-size:var(--t-cap);color:var(--ink-4);line-height:1.7;padding:2px 0 var(--s3)}
.hv-cap b{color:var(--ink-2)}
.hv-chips{display:flex;gap:var(--s2);flex-wrap:wrap}
.stepper{
  display:inline-flex;align-items:center;border:1px solid var(--line-2);background:var(--panel);
}
.st-b{
  width:40px;height:40px;font-size:19px;line-height:1;color:var(--ink);
  background:var(--panel);border:0;cursor:pointer;
  transition:background var(--t-fast) var(--ease);
}
.st-b:hover{background:var(--brand-soft)}
.st-b:active{background:var(--brand)}
.st-v{
  min-width:92px;text-align:center;font-family:var(--font-figure);
  font-size:30px;font-weight:400;letter-spacing:-.02em;
  border-right:1px solid var(--line);border-left:1px solid var(--line);
  padding:0 var(--s3);line-height:40px;
}
@media (min-width:821px){ .st-b{width:46px;height:46px} .st-v{line-height:46px;min-width:104px;font-size:34px} }

/* ---- 给地块起名的快捷名 ---- */
.mf-namechips{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}
.mf-namewrap .inp{margin-bottom:2px}

/* ---- wizard 结果页：上一季的账 ---- */
.rx-prev{
  border:1px solid var(--line-2);border-left:3px solid var(--wheat);
  background:var(--panel);padding:var(--s4) var(--s5);margin-bottom:var(--gap);
}
.rx-prev-l{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.rx-prev-v{
  display:block;font-size:46px;line-height:1.05;margin-top:var(--s2);letter-spacing:-.035em;
}
.rx-prev-t{font-size:var(--t-cap);color:var(--ink-3);line-height:1.75;margin-top:6px}
.rx-prev-t .cap{display:block;margin-top:3px;color:var(--ink-4)}

/* ============================================================
 * 十一·C-0（v4.1）窄屏栅格：把「三栏并排」折成「两行堆叠」
 *    同一类问题的另一个实例：写死列宽的 grid 在窄屏不会收缩，
 *    min-content 直接把文档撑宽。凡是内联 grid-template-columns
 *    都要搬到这里，才谈得上响应式。
 * ========================================================== */
/* 分层架构卡片（engineering.html） */
.en-layer{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);   /* minmax(0,…) 是关键：允许列收缩 */
  grid-template-rows:auto auto;
  gap:var(--s3) var(--s4);align-items:center;
}
.en-l-num{grid-row:1;grid-column:1;text-align:center}
.en-l-txt{grid-row:1;grid-column:2;min-width:0}
.en-l-tags{grid-row:2;grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px}
@media (min-width:761px){
  .en-layer{grid-template-columns:64px 190px minmax(0,1fr);grid-template-rows:auto}
  .en-l-num{grid-row:1;grid-column:1}
  .en-l-txt{grid-row:1;grid-column:2}
  .en-l-tags{grid-row:1;grid-column:3}
}

/* ============================================================
 * 十一·C（v4.1）窄屏表格：把「一行」折成一张卡片
 *    手机上横滚表格只能叫能看不能叫能用——列标题由 UI.stackTables 注入 data-l
 * ========================================================== */
@media (max-width:760px){
  .tbl-wrap{overflow-x:visible}
  .tbl{min-width:0}
  /* 有些表在桌面上确实需要更大的最小宽度（列多）。
     原来写在内联 style 里，会盖掉折叠样式 → 手机上还是横滚。
     改成 data-minw 属性，只在桌面生效。 */
  @media (min-width:761px){
    .tbl[data-minw="520"]{min-width:520px}
    .tbl[data-minw="760"]{min-width:760px}
    .tbl[data-minw="820"]{min-width:820px}
    .tbl[data-minw="880"]{min-width:880px}
  }
  .tbl.stk thead{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  }
  .tbl.stk tr{
    display:block;padding:var(--s3) var(--s4);
    border-bottom:1px solid var(--line-2);background:var(--panel);
  }
  .tbl.stk tbody tr:first-child{border-top:1px solid var(--line-2)}
  .tbl.stk tr.self{background:var(--brand-soft)}
  /* 卡片模式必须锁成 100% 宽：table-layout:auto 时，
     一个不间断的 DOI 串就能把 min-content 顶到 360px，
     于是「折成了卡片」却依然撑破页面。 */
  .tbl.stk{table-layout:fixed;width:100%}
  .tbl.stk td{
    display:flex;align-items:baseline;gap:var(--s3);
    padding:5px 0;border:0;font-size:var(--t-body);text-align:left;
    min-width:0;overflow-wrap:anywhere;   /* 长 DOI / 长英文串强制断行 */
  }
  .tbl.stk td.mono{word-break:break-all}
  .tbl.stk td>*{min-width:0}
  .tbl.stk td::before{
    content:attr(data-l);flex:0 0 auto;min-width:84px;
    font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-4);
  }
  .tbl.stk td.n{text-align:right;justify-content:flex-end}
  .tbl.stk td.n::before{margin-right:auto}
  .tbl.stk td.muted::before{opacity:.7}
  /* 看板/控制台：手机上把 KPI 条排成两列，图形能看清 */
  .kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .kpi-strip .kpi{border-bottom:1px solid var(--line-2)}
  .kpi-strip .kpi:nth-child(2n){border-right:0}
  .kpi-strip .kpi:nth-last-child(-n+2){border-bottom:0}
  .plot svg{overflow:visible}
  .side{margin-top:var(--s5)}
}

/* ============================================================
 * 十一·C-1（v4.1）极窄屏兜底
 *    这一组规则在「有富余空间」时是 no-op，只在真的放不下时才生效，
 *    所以可以放心地放宽：允许右上角 meta 断行、允许等宽串断行、
 *    允许下载行换行。320 宽的机器（老 SE）也能不横滚。
 * ========================================================== */
@media (max-width:520px){
  .panel-h .panel-meta{white-space:normal}
  .mono{overflow-wrap:anywhere}
  .tag{white-space:normal;overflow-wrap:anywhere}
  .dlrow{flex-wrap:wrap}
  .dlrow .dr-a{margin-left:auto}
  .dlrow .dr-b{flex:1 1 100%}
}

/* ============================================================
 * 十二、页脚 & 收尾
 *    v4：一行标识 + 可折叠正文，替代 v3 的两栏小字墙
 * ========================================================== */
.foot{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  margin-top:var(--s9);border-top:2px solid var(--ink);
  /* 关键：.foot 会覆盖 .page 的 gutter 内边距（同特异性、后加载），
     这里显式把水平 gutter 加回来，否则页脚文字会贴着视口边缘，
     与 main.page 正文 16px 缩进不一致（手机端"显示模式"标签会被切掉）。 */
  padding:0 var(--gutter);font-size:var(--t-cap);color:var(--ink-3);line-height:1.75;
}
@media (max-width:820px){ .foot{grid-template-columns:1fr} }
/* 手机上的模式开关入口：页头那个 ≤620px 会隐藏，所以在页脚补一个。
   桌面不显示（页头已经有），避免同一页出现两个开关。 */
.foot-mode{
  display:none;align-items:center;gap:var(--s3);flex-wrap:wrap;
  grid-column:1/-1;padding:var(--s4) 0;border-bottom:1px solid var(--line);
}
.foot-mode .fm-l{
  font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.foot-mode .modesw button{padding:7px 14px;font-size:var(--t-cap)}
@media (max-width:620px){ .foot-mode{display:flex} }
.foot-hd{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s5);
  padding:var(--s5) 0;border-bottom:1px solid var(--line);
}
.foot-hd .fh-b{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:800;font-size:var(--t-body);color:var(--ink);letter-spacing:-.01em;
}
.foot-hd .fh-m{font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:.06em;color:var(--ink-4)}
.foot-d{border-bottom:1px solid var(--line)}
.foot-d[open]{padding-bottom:var(--s4)}
.foot-d>summary{
  cursor:pointer;list-style:none;padding:var(--s4) var(--s5) var(--s4) 0;
  display:flex;align-items:center;gap:var(--s3);
  font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.foot-d>summary::-webkit-details-marker{display:none}
.foot-d>summary span:first-child::before{
  content:"";display:inline-block;width:5px;height:5px;background:var(--ink);
  margin-right:8px;vertical-align:middle;
}
.foot-d>summary span:last-child{
  margin-left:auto;color:var(--ink-4);letter-spacing:.08em;font-size:9.5px;
}
.foot-d[open]>summary span:last-child::after{content:" ▲"}
.foot-d:not([open])>summary span:last-child::after{content:" ▼"}
.foot-d[open]>summary{color:var(--ink)}
.foot-d p{margin:0;padding:0 0 var(--s3);font-size:var(--t-cap);line-height:1.85}
.foot b,.foot strong{color:var(--ink-2);font-weight:700}
.foot .mono{font-family:var(--font-mono);font-size:.96em}
@media (max-width:720px){
  .foot{margin-top:var(--s7)}
  .foot-hd{padding:var(--s4) 0;gap:2px}
  .foot-hd .fh-m{font-size:10px}
}

/* 打印：v4 打印时保留硬线，去掉一切装饰 */
@media print{
  .term::after,main.page::before,main.page::after{display:none!important}
  .term{position:static;background:#fff;backdrop-filter:none}
  .panel,.rx-card{box-shadow:none;border-color:#333}
  .impact::after{display:none}
}

/* ============================================================
 * v5.1：首次进入「使用说明」弹窗（页脚可重开）
 * ========================================================== */
.wj-wl{
  position:fixed;inset:0;z-index:300;background:rgba(20,18,14,.55);
  display:grid;place-items:center;padding:18px;
}
.wj-wl-c{
  background:var(--paper);border:2px solid var(--ink);max-width:520px;width:100%;
  padding:24px 28px 18px;max-height:90vh;overflow:auto;
}
.wj-wl-brand{
  display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--forest-2);
}
.wj-wl-brand svg{color:var(--brand-deep)}
.wj-wl-brand small{font-weight:400;color:var(--ink-3);font-size:12px;letter-spacing:.06em}
.wj-wl-c h2{
  font-family:var(--font-figure);font-size:clamp(26px,4vw,32px);
  line-height:1.2;margin:12px 0 6px;letter-spacing:-.02em;
}
.wj-wl-sub{color:var(--ink-2);margin:0 0 6px}
.wj-wl-list .it{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.wj-wl-list .it svg{flex:0 0 auto;color:var(--brand-deep);margin-top:3px}
.wj-wl-list .it b{display:block;font-size:15px}
.wj-wl-list .it p{font-size:13.5px;color:var(--ink-2);margin:2px 0 0;line-height:1.7}
.wj-wl-btns{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.wj-wl-btns .btn.ghost{color:var(--ink);border-color:var(--line-3);background:transparent}
.wj-wl-btns .btn.ghost:hover{border-color:var(--ink)}
.wj-wl-note{margin:12px 0 0;font-size:11.5px;color:var(--ink-4);line-height:1.7}
.fh-help{
  margin-left:12px;background:none;border:1px solid var(--line-2);
  padding:2px 10px;font:inherit;font-size:12px;cursor:pointer;color:var(--ink-2);
}
.fh-help:hover{border-color:var(--ink);color:var(--ink)}
@media print{ .wj-wl,.fh-help{display:none!important} }

/* ============================================================
 * 农业氛围层（v4「农书」之后加载，全站通用）
 * 让内页也有"田间"气息，而不只是一张纸：
 *   ① 内页极淡"俯瞰垄行"底纹  ② 页头"地平线"顶带
 *   ③ 小节标题垄行分隔 + 主题色种子标记  ④ 页头角落作物母题水印
 * 严守 v4 印刷纪律：硬线、直角、衬线数字；不引入投影与花哨渐变。
 * ============================================================ */

/* ① 内页满幅极淡垄行底纹（首页用自己的农田图，跳过） */
body[data-page]:not([data-page="home"]) main.page{
  background-image:
    repeating-linear-gradient(118deg, rgba(168,86,42,.05) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(118deg, rgba(110,140,0,.04) 0 1px, transparent 1px 22px);
  background-attachment:fixed;
}

/* ② 页头"地平线"顶带：天青→麦黄→赭土，像田边天色（仅内页） */
body[data-page]:not([data-page="home"]) .phead{ position:relative; }
body[data-page]:not([data-page="home"]) .phead::before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,var(--sky),var(--wheat) 55%,var(--soil));
  opacity:.7;pointer-events:none;
}
/* 主题色地平线：按页面 data-theme 切换（forest / wheat / soil / sky） */
body[data-theme="forest"] .phead::before{background:linear-gradient(90deg,var(--forest),var(--forest-2))}
body[data-theme="wheat"]  .phead::before{background:linear-gradient(90deg,var(--wheat),#E4C879)}
body[data-theme="soil"]   .phead::before{background:linear-gradient(90deg,var(--soil),#C9774A)}
body[data-theme="sky"]    .phead::before{background:linear-gradient(90deg,var(--sky),#6FA3D6)}

/* ④ 页头角落作物母题水印（萌芽） */
body[data-page]:not([data-page="home"]) .phead::after{
  content:"";position:absolute;right:0;top:0;width:120px;height:120px;opacity:.06;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 60V26' stroke='%2314120E' stroke-width='3' fill='none'/%3E%3Cpath d='M32 33c0-8-6-14-14-14 0 8 6 14 14 14zM32 29c0-8 6-14 14-14 0 8-6 14-14 14z' fill='%2314120E'/%3E%3C/svg%3E") right top / contain no-repeat;
}

/* ③ 小节标题：垄行分隔 + 主题色种子标记 */
.sec-h{ position:relative; }
.sec-h::after{
  content:"";position:absolute;left:0;right:0;top:-7px;height:3px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 2px,transparent 2px 9px);
  opacity:.5;pointer-events:none;
}
.sec-h h2::before{
  content:"";display:inline-block;width:10px;height:10px;margin-right:12px;
  transform:rotate(45deg);background:var(--brand-deep);vertical-align:middle;
  box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--line-2);
}
/* 主题色随小节顺序轮换：soil→wheat→sky→forest，呼应 底肥/产量/气象/算法 */
main.page > section:nth-of-type(4n+1) .sec-h h2::before{ background:var(--soil); }
main.page > section:nth-of-type(4n+2) .sec-h h2::before{ background:var(--wheat); }
main.page > section:nth-of-type(4n+3) .sec-h h2::before{ background:var(--sky); }
main.page > section:nth-of-type(4n+4) .sec-h h2::before{ background:var(--forest); }

/* 双模式：行距/字距随模式切换（自定义属性在 tokens.css 定义） */
html[data-mode] body{ line-height:var(--mode-lh,1.7); }
html[data-mode] p,html[data-mode] li{ letter-spacing:var(--mode-track,0); }

/* 页脚模式说明 */
.mode-desc{
  flex:1 1 auto;margin-left:var(--s4);text-align:right;
  font-size:var(--t-cap);color:var(--ink-3);line-height:1.5;
}
@supports not (flex:1 1 auto){ .mode-desc{display:block;margin-top:6px;text-align:left} }

/* ============ 全站模块导览（首页） ============ */
.lead{ max-width:72ch;color:var(--ink-2);font-size:var(--t-body-lg);line-height:1.8;margin:0 0 var(--s5); }
.modmap{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap); }
.mm-group{ border:1px solid var(--line-2);background:var(--panel);padding:var(--s4);min-width:0; }
.mm-g-h{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand-deep);
  border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:8px;
}
.mm-g-h::before{ content:"";width:8px;height:8px;background:var(--soil);transform:rotate(45deg);flex:0 0 auto; }
.mm-i{ display:block;padding:9px 0;border-bottom:1px dashed var(--line);line-height:1.5;
  color:var(--ink);font-weight:700;font-size:var(--t-body-lg); }
.mm-i:last-child{ border-bottom:0;padding-bottom:0; }
.mm-i:hover{ color:var(--brand-deep);text-decoration:underline; }
.mm-d{ display:block;font-size:var(--t-cap);color:var(--ink-3);margin-top:3px;line-height:1.6;font-weight:400; }
@media (max-width:1000px){ .modmap{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .modmap{ grid-template-columns:1fr; } }

/* ============ 打印：去掉一切农业装饰 ============ */
@media print{
  body[data-page]:not([data-page="home"]) main.page{ background-image:none; }
  body[data-page]:not([data-page="home"]) .phead::before,
  body[data-page]:not([data-page="home"]) .phead::after,
  .sec-h::after,.sec-h h2::before{ display:none!important; }
}
