/* ============================================================================
 *  《食有其时》· 豆荚类应季状态生成器 —— 平台页样式
 *  纸底 + 细线 + 无阴影无渐变：界面给作品让位。
 *  零外链：不引任何网络字体，全部系统字体栈。
 * ========================================================================== */

:root{
  --paper:#f2f0e9;            /* PAPER = (242,240,233) 与画面同一张纸 */
  --paper-2:#eceadf;
  --paper-3:#e5e2d5;
  --ink:#2e2c27;
  --ink-2:#57544c;
  --ink-3:#8a877c;
  --rule:#d3cec0;
  --rule-2:#c2bcaa;
  --accent:#2a6e42;           /* 运行时按品种覆盖（来自参数包 ui.accentT） */
  --accent-f:#9e5c38;
  --good:#3f6b47;
  --warn:#9a5a1e;
  --bad:#9e2b2b;
  --serif:"Songti SC","Source Han Serif SC","Noto Serif CJK SC","STSong",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font:14px/1.75 var(--sans);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
b{font-weight:600}
code{font:12px/1.6 var(--mono);background:var(--paper-3);padding:1px 5px;border:1px solid var(--rule)}

/* ─────────────────────────────────────────────── 页眉 */
.hd{border-bottom:1px solid var(--rule);background:var(--paper)}
.hd-in{max-width:1560px;margin:0 auto;padding:26px 26px 20px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.kicker{font-size:11.5px;letter-spacing:.16em;color:var(--ink-3);text-transform:none}
.hd h1{font:400 30px/1.28 var(--serif);margin:6px 0 0;letter-spacing:.01em}
.hd h1 .en{font:400 11px/1 var(--sans);letter-spacing:.24em;color:var(--ink-3);margin-left:14px;
  vertical-align:middle;white-space:nowrap}
.claim{margin:8px 0 0;font:400 15px/1.6 var(--serif);color:var(--ink-2)}
.claim b{color:var(--accent);font-weight:600;border-bottom:1px solid var(--accent);padding-bottom:1px}
.hd-r{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:4px}
.chip{font-size:11px;color:var(--ink-3);border:1px solid var(--rule);padding:2px 8px;letter-spacing:.04em}

/* ─────────────────────────────────────────────── 品种栏 */
.spbar{position:sticky;top:0;z-index:30;background:var(--paper);
  border-bottom:1px solid var(--rule);backdrop-filter:saturate(1.1)}
.spbar-in{max-width:1560px;margin:0 auto;padding:9px 26px;display:flex;align-items:center;gap:14px;
  flex-wrap:wrap}
.spbar-lb{font-size:11px;letter-spacing:.2em;color:var(--ink-3)}
.sptabs{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--rule-2)}
.sptab{appearance:none;background:transparent;border:0;border-right:1px solid var(--rule-2);
  font:14px/1.4 var(--serif);color:var(--ink-2);padding:7px 17px;cursor:pointer;
  display:flex;align-items:baseline;gap:8px;transition:background .16s,color .16s}
.sptab:last-child{border-right:0}
.sptab .en{font:400 9.5px/1 var(--sans);letter-spacing:.14em;color:var(--ink-3)}
.sptab:hover{background:var(--paper-2)}
.sptab[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.sptab[aria-selected="true"] .en{color:rgba(242,240,233,.62)}
.spbar-meta{font-size:11.5px;color:var(--ink-3);font-family:var(--mono)}

/* ─────────────────────────────────────────────── 引导 */
.intro{border-bottom:1px solid var(--rule);background:var(--paper-2)}
.intro-in{max-width:1560px;margin:0 auto;padding:20px 26px 22px;display:flex;gap:26px;
  align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.intro-txt{max-width:1080px}
.intro h2{font:400 16px/1.4 var(--serif);margin:0 0 8px}
.intro p{margin:0 0 6px;color:var(--ink-2);font-size:13.5px;max-width:1000px}
.intro .tip{margin-top:10px;padding:8px 12px;border-left:2px solid var(--accent);
  background:var(--paper);color:var(--ink);font-size:13.5px}
.intro-act{display:flex;gap:8px;flex-wrap:wrap}
.intro.is-off{display:none}

/* ─────────────────────────────────────────────── 按钮 */
.btn{appearance:none;font:12.5px/1 var(--sans);color:var(--ink);background:var(--paper);
  border:1px solid var(--rule-2);padding:8px 14px;cursor:pointer;letter-spacing:.02em;
  transition:background .16s,border-color .16s,color .16s}
.btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-solid:hover{background:var(--accent);border-color:var(--accent)}
.btn-ghost{border-color:var(--rule);color:var(--ink-3)}
.btn:disabled{opacity:.45;cursor:default}

/* ─────────────────────────────────────────────── 主体栅格 */
.main{max-width:1560px;margin:0 auto;padding:22px 26px 10px;
  display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:26px;align-items:start}
.col-stage{min-width:0}

/* 画面 */
.stagebox{border:1px solid var(--rule);background:var(--paper);padding:0;position:relative}
.stage{position:relative;line-height:0;min-height:180px}
.stage canvas{display:block!important;width:100%!important;height:auto!important}
.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:13px/1 var(--sans);color:var(--ink-3);line-height:1.6}

/* 工具条 */
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 4px}
.tools-hint{font-size:11.5px;color:var(--ink-3);margin-left:2px}

/* ─────────────────────────────────────────────── 双轴滑杆 */
.axis{margin-top:16px;border-top:1px solid var(--rule);padding-top:11px}
.axis-hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:7px}
.axis-note{margin:4px 0 0;font:400 11.5px/1.5 var(--sans);color:var(--ink-3)}
.axis-nm{font-size:12px;letter-spacing:.12em;color:var(--ink-3)}
.axis-nm b{font:600 14px/1 var(--mono);color:var(--ink);letter-spacing:0;margin-right:4px}
.axis-now{font:400 15px/1.3 var(--serif);color:var(--accent)}
#axisF .axis-now{color:var(--accent-f)}
.axis-val{margin-left:auto;font:11.5px/1 var(--mono);color:var(--ink-3)}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;
  margin:0;display:block;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--rule-2)}
input[type=range]::-moz-range-track{height:2px;background:var(--rule-2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:50%;background:var(--paper);
  border:2px solid var(--accent);margin-top:-6.5px}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;
  background:var(--paper);border:2px solid var(--accent)}
#slF::-webkit-slider-thumb{border-color:var(--accent-f)}
#slF::-moz-range-thumb{border-color:var(--accent-f)}
input[type=range]:focus-visible{outline:1px dashed var(--ink-3);outline-offset:3px}

/* 刻度 */
.ticks{position:relative;height:40px;margin-top:-2px}
.tick{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:3px;background:none;border:0;padding:0 2px;cursor:pointer;
  font:11px/1.25 var(--sans);color:var(--ink-3);white-space:nowrap}
.tick i{display:block;width:1px;height:6px;background:var(--rule-2);font-style:normal}
.tick .ev{font:400 13px/1 var(--serif);color:var(--ink-2)}
.tick .nm{font-size:10px;color:var(--ink-3);max-width:90px;overflow:hidden;text-overflow:ellipsis}
.tick:hover .ev,.tick:hover .nm{color:var(--accent)}
.tick.is-star .ev{color:var(--accent);font-weight:600}
.tick.is-on .ev{color:var(--accent)}
.tick.is-on i{background:var(--accent);height:9px}
.tick.is-on .nm{color:var(--ink-2)}

/* 预设 */
.presets{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 6px;
  border-top:1px solid var(--rule);padding-top:13px}
.presets-lb{font-size:11px;letter-spacing:.2em;color:var(--ink-3)}
.preset-list{display:flex;gap:8px;flex-wrap:wrap}
.pbtn{appearance:none;background:var(--paper-2);border:1px solid var(--rule);
  padding:6px 12px;cursor:pointer;font:12.5px/1.4 var(--sans);color:var(--ink-2);
  transition:background .16s,color .16s,border-color .16s}
.pbtn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pbtn em{font-style:normal;color:var(--accent)}
.pbtn:hover em{color:var(--paper)}

/* ─────────────────────────────────────────────── 读数面板 */
.panel{border:1px solid var(--rule);background:var(--paper-2);padding:16px 16px 18px;
  position:sticky;top:52px;max-height:calc(100vh - 70px);overflow:auto}
.score{display:flex;align-items:flex-end;gap:12px;border-bottom:1px solid var(--rule);
  padding-bottom:10px}
.score-n{font:400 52px/0.9 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
.score-n.is-good{color:var(--good)}
.score-n.is-mid{color:var(--warn)}
.score-n.is-bad{color:var(--bad)}
.score-side{padding-bottom:4px}
.score-u{font-size:10.5px;letter-spacing:.08em;color:var(--ink-3)}
.score-rank{font:400 14px/1.4 var(--serif);color:var(--ink-2);margin-top:2px}
.verdict{margin:11px 0 0;font:400 13.5px/1.7 var(--sans);color:var(--ink)}
.verdict b{color:var(--accent)}
.verdict .v-sub{color:var(--ink-2);font-size:12.5px}

.big3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin:13px 0 4px}
.b3{background:var(--paper);padding:8px 6px 7px;text-align:center}
.b3 .k{font-size:10px;color:var(--ink-3);letter-spacing:.06em}
.b3 .v{font:400 19px/1.2 var(--mono);color:var(--ink);margin-top:2px;font-variant-numeric:tabular-nums}
.b3 .d{font-size:10.5px;margin-top:1px;color:var(--ink-3);font-family:var(--mono)}
.b3 .d.up{color:var(--bad)}
.b3 .d.dn{color:var(--warn)}
.b3 .d.ok{color:var(--good)}

.ph{font:400 11.5px/1.4 var(--sans);letter-spacing:.16em;color:var(--ink-3);
  margin:18px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--rule);font-weight:400}
.ph-sub{letter-spacing:0;color:var(--rule-2);font-size:10.5px;margin-left:4px}

.evid{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.evid li{font-size:12.5px;line-height:1.6;color:var(--ink-2);padding-left:13px;position:relative}
.evid li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  background:var(--ink-3)}
.evid li.lv2::before{background:var(--warn)}
.evid li.lv3::before{background:var(--bad)}
.evid li b{color:var(--ink)}
.evid li .num{font-family:var(--mono);font-size:12px;color:var(--ink)}
.evid li.none{color:var(--good);padding-left:13px}
.evid li.none::before{background:var(--good)}

.bars{display:flex;flex-direction:column;gap:8px}
.bar-r{display:grid;grid-template-columns:1fr 42px;gap:8px;align-items:center}
.bar-l{font-size:11.5px;color:var(--ink-2)}
.bar-t{height:4px;background:var(--paper-3);margin-top:3px;position:relative;
  border:1px solid var(--rule)}
.bar-i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);
  transition:width .18s ease-out}
.bar-v{font:11.5px/1 var(--mono);color:var(--ink-3);text-align:right;
  font-variant-numeric:tabular-nums}

.reads{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.rd{background:var(--paper);padding:6px 8px;min-width:0}
.rd .k{font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd .v{font:12.5px/1.4 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd.hot .v{color:var(--bad)}
.rd.full{grid-column:1 / -1}

/* ─────────────────────────────────────────────── 说明区 */
.notes{border-top:1px solid var(--rule);margin-top:26px;background:var(--paper-2)}
.notes-in{max-width:1560px;margin:0 auto;padding:26px 26px 8px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.note-card h3{font:400 15px/1.4 var(--serif);margin:0 0 9px;padding-bottom:7px;
  border-bottom:1px solid var(--rule)}
.note-card p{margin:0 0 8px;font-size:13px;line-height:1.75;color:var(--ink-2)}
.note-card b{color:var(--ink)}
.soul-list{margin:0}
.soul-list dt{font:400 13.5px/1.6 var(--serif);color:var(--ink);margin-top:8px}
.soul-list dd{margin:0;font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.steps{margin:0;padding-left:18px;font-size:12.5px;line-height:1.85;color:var(--ink-2)}
.mini{font-size:11.5px!important;color:var(--ink-3)!important;margin-top:8px!important}
.foot{max-width:1560px;margin:0 auto;padding:16px 26px 30px;display:flex;gap:16px;
  justify-content:space-between;flex-wrap:wrap;font-size:11px;color:var(--ink-3);
  border-top:1px solid var(--rule);margin-top:18px}
.foot-r{font-family:var(--mono)}

/* ─────────────────────────────────────────────── 九格弹层 */
.modal{position:fixed;inset:0;z-index:80;background:rgba(46,44,39,.5);
  display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-in{background:var(--paper);border:1px solid var(--rule-2);max-width:1400px;width:100%;
  max-height:92vh;display:flex;flex-direction:column}
.modal-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;border-bottom:1px solid var(--rule);font:13px/1.4 var(--serif)}
.modal-act{display:flex;gap:8px}
.modal-body{overflow:auto;padding:14px;background:var(--paper-3)}
.modal-body canvas,.modal-body img{display:block;width:100%;height:auto;
  border:1px solid var(--rule)}

/* ─────────────────────────────────────────────── toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:90;
  background:var(--ink);color:var(--paper);font-size:12.5px;padding:9px 18px;
  letter-spacing:.02em}
.toast[hidden]{display:none}

/* ─────────────────────────────────────────────── 响应式 */
@media (max-width:1180px){
  .main{grid-template-columns:minmax(0,1fr);gap:18px}
  .panel{position:static;max-height:none}
  .tick .nm{display:none}
}
@media (max-width:760px){
  .hd-in{padding:18px 14px 14px}
  .hd h1{font-size:22px}
  .hd h1 .en{display:block;margin:6px 0 0}
  .claim{font-size:14px}
  .hd-r{display:none}
  .spbar-in{padding:8px 14px;gap:9px}
  .spbar-lb,.spbar-meta{display:none}
  .sptabs{width:100%}
  .sptab{flex:1;justify-content:center;padding:8px 8px;font-size:13.5px}
  .sptab .en{display:none}
  .intro-in{padding:15px 14px 16px;gap:12px}
  .intro p{font-size:13px}
  .main{padding:14px 14px 6px}
  .notes-in{padding:20px 14px 6px;gap:18px}
  .foot{padding:14px 14px 26px}
  .tools{gap:6px}
  .btn{padding:8px 11px;font-size:12px}
  .axis-val{width:100%;margin-left:0}
  .ticks{height:26px}
  .tick .ev{font-size:12px}
  .reads{grid-template-columns:1fr 1fr}
  .score-n{font-size:44px}
  .modal{padding:0}
  .modal-in{max-height:100vh}
}
@media (max-width:420px){
  .tick .ev{font-size:11px}
  .big3{grid-template-columns:1fr 1fr 1fr}
  .b3 .v{font-size:16px}
}

/* ─────────────────────────────────────────────── 画面下的一句提示 */
.stage-hint{margin:7px 0 0;font-size:11.5px;color:var(--ink-3)}

/* ─────────────────────────────────────────────── 手机贴底迷你读数条 */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:flex;align-items:baseline;gap:7px;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--paper);border-top:1px solid var(--rule-2);padding:7px 14px 9px;
    font-size:11.5px;color:var(--ink-3)}
  .mbar b{font:400 24px/1 var(--serif);color:var(--ink)}
  .mbar b.is-good{color:var(--good)} .mbar b.is-mid{color:var(--warn)} .mbar b.is-bad{color:var(--bad)}
  .mbar em{font-style:normal;font-size:13px;color:var(--ink);font-family:var(--serif)}
  .mbar .mb-r{margin-left:auto;font-family:var(--mono);font-size:11px;white-space:nowrap}
  body{padding-bottom:48px}
  .toast{bottom:62px}
}

/* 只在整包 / 在线版出现的下载入口（单文件版由 pack-standalone.py 摘掉） */
.foot a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule-2);padding-bottom:1px}
.foot a:hover{color:var(--accent);border-color:var(--accent)}

/* ═══════════════════════════════════════════════════════════════════════════
 *  以下为豆荚类目**独有**的界面构件样式
 *  —— 本类目的主导过程是「木质化」，它是一个**沿轴的梯度场**：
 *     同一条荚，果柄端可能已经革化，荚尖还嫩。所以读数面板必须能读"一条曲线"，
 *     而不是一个标量。下面这块 .axl 就是那条曲线在界面上的样子。
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── 轴向木质化剖面（上 = 尖部，下 = 基部） ─────────────────────────── */
.axl{display:grid;grid-template-columns:52px 1fr;gap:8px;align-items:stretch;
  border:1px solid var(--rule);background:var(--paper);padding:9px 10px 8px}
.axl-side{display:flex;flex-direction:column;justify-content:space-between;
  font-size:10px;line-height:1.3;color:var(--ink-3);text-align:right;padding:1px 0}
.axl-side span{white-space:nowrap}
.axl-strip{display:flex;flex-direction:column;gap:2px;min-width:0}
.axl-row{display:flex;align-items:center;gap:5px;height:6px;position:relative}
.axl-row i{display:block;height:4px;background:var(--good);opacity:.85;
  transition:width .08s linear}
.axl-row.is-wood i{background:var(--bad)}
.axl-row.is-mid i{background:var(--warn)}
.axl-row.is-cut::after{content:"可食下界";position:absolute;right:0;top:-5px;
  font-size:9px;color:var(--accent);letter-spacing:.04em}
.axl-row.is-cut i{outline:1px solid var(--accent);outline-offset:1px}
.axl-note{grid-column:1 / -1;margin:7px 0 0;font-size:10.5px;line-height:1.6;
  color:var(--ink-3);font-family:var(--mono)}
.axl-note b{color:var(--ink);font-family:var(--sans)}

/* ── 基部 / 中段 / 尖部 三段读数 ───────────────────────────────────── */
.segs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:9px}
.seg{background:var(--paper);padding:7px 7px 6px;text-align:center}
.seg .k{font-size:10px;color:var(--ink-3);letter-spacing:.06em}
.seg .v{font:400 17px/1.2 var(--mono);margin-top:2px;font-variant-numeric:tabular-nums}
.seg .d{font-size:10px;margin-top:1px;color:var(--ink-3)}
.seg.is-good .v{color:var(--good)}
.seg.is-mid .v{color:var(--warn)}
.seg.is-bad .v{color:var(--bad)}

/* ── 口感分项里的「越高越糟」条（草酸 / 苦涩） ─────────────────────── */
.bar-r.is-inv .bar-i{background:var(--bad)}
.bar-r.is-inv .bar-l::after{content:"　越高越糟";font-size:10px;color:var(--ink-3)}

/* ── 「坏在看不见的地方」提示条 ────────────────────────────────────── */
.blind{margin:10px 0 0;padding:8px 10px;border-left:2px solid var(--bad);
  background:var(--paper-3);font-size:12px;line-height:1.65;color:var(--ink-2)}
.blind b{color:var(--bad)}
.blind[hidden]{display:none}

@media (max-width:760px){
  .axl{padding:8px}
  .segs .seg .v{font-size:15px}
}