/* 归雁客栈 · style.css —— 水墨朱砂，移动优先 */
:root{
  /* 对比度按 WCAG 4.5:1 核过（2026-09-29 #18）：muted 4.79/5.51、gold 4.59，正文朱砂玉绿全过 */
  --ink:#241d17; --paper:#efe6d6; --card:#fbf6ec; --card2:#f4ecdd;
  --wood:#5a3d28; --jade:#3f6b52; --cinnabar:#a8322a; --gold:#8f6a1a;
  --line:#ddcdb4; --muted:#6f6250; --shadow:0 1px 3px rgba(70,50,30,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Songti SC","STSong","SimSun","Noto Serif CJK SC",serif;
  font-size:18px; line-height:1.95; -webkit-text-size-adjust:100%;
}
h1,h2,h3{margin:0;font-weight:600;line-height:1.4}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
a{color:var(--jade)}

/* ── 壳 ── */
#app{
  width:min(100%,980px); margin:0 auto;
  padding:max(10px,env(safe-area-inset-top)) 12px max(24px,env(safe-area-inset-bottom));
}

/* ── 页脚门房 ──
   计数器把「第 N 位客官」写进这里。它须在 #app 之外（见 index.html 那行注）。
   做得淡：玩家滚到底才瞥见一眼，不抢戏。 */
.inn-foot{
  width:min(100%,980px); margin:0 auto; padding:0 12px max(18px,env(safe-area-inset-bottom));
  text-align:center; font-size:14px; line-height:1.8; color:var(--muted);
  letter-spacing:.5px; opacity:.72;
}
.inn-foot b{font-weight:600; color:var(--wood)}

/* ── 顶栏 ── */
/* 标题毛笔字：龙藏体（OFL 开源行书），只子集了「归雁客栈」四字——
   店名写死不可改，其余字回落系统楷体，万无一失 */
@font-face{
  font-family:'LongCang';
  src:url('assets/fonts/LongCang-guiyan.woff2') format('woff2');
  font-display:swap;
}
/* 状态栏 + 消息窗合成一块钉在页首：新提示一进来就看得见，不用往下翻 */
.hud{position:sticky;top:0;z-index:5}
/* 顶栏底图：淡墨归雁宽幅（assets/topbar-geese.png，透明底）。
   3:1 横带整幅落进栏内不裁边：雁阵在上、山影居中、芦苇自栏脚生出，占大半栏宽。 */
.topbar{
  background:var(--card) url('assets/topbar-geese.png') no-repeat right bottom;
  background-size:auto 100%;
  border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
  padding:26px 16px; margin-bottom:8px;
}
.tb-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.topbar .tb-row:first-child{margin-bottom:10px}
.tb-title{
  font-family:'LongCang','Kaiti SC','STKaiti','KaiTi',serif;
  font-size:36px; font-weight:400; letter-spacing:3px; line-height:1.15;
  color:var(--wood);
}
.tb-day{font-size:16px;color:var(--muted)}
.ap{letter-spacing:2px;color:var(--gold);font-size:17px}
.ap .off{color:#cfc0a6}
/* 赶工挣来的那一点：超出每日上限，另用一种颜色好认 */
.ap .extra{color:var(--jade)}

/* ── 提示浮条 ──
   悬在屏幕正中（2026-09-29 姑娘令「弹窗换到屏幕中间去」）：买料、赶工这类
   一闪而过的回话正落在视线落点上，不偏不倚。z-index 提到弹层之上，免得被
   报事／要闻的遮罩压住。 */
.toastbar{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:60;
  max-width:min(92vw,560px); padding:10px 16px; border-radius:10px;
  background:#fbf6ea; border:1px solid #b5872f; color:#5a4630;
  box-shadow:0 6px 20px rgba(60,40,20,.22); font-size:16.5px; line-height:1.5;
  animation:toastIn .18s ease-out;
}
.toastbar.bad{border-color:#c26a5e; background:#fdf2f0; color:#8d3529}
.toastbar.good{border-color:#7ea98c}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-42%)}to{opacity:1;transform:translate(-50%,-50%)}}
.tb-stats{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:15px;color:var(--muted)}
.tb-stats b{color:var(--ink);font-weight:600}
.tb-stats .dim{color:var(--muted);font-weight:400}
.tb-stats .warn b{color:var(--cinnabar)}

/* ── P0 常驻条 ──
   要命的警告（库房见底这类）钉在顶栏正下方，哪一屏都在、解决才消——
   不走日志流：日志会被刷走，警告被刷走就是第七日盐断卡死那种实害。 */
.p0bar{
  padding:7px 14px; font-size:16px; font-weight:600;
  color:#8d3529; background:#fdf2f0;
  border-bottom:1px solid #e0bab4; cursor:pointer;
}
.p0bar:hover{background:#fbe9e5}

/* ── 主区 ── */
.shell{display:block}
.panel{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:12px; margin-bottom:12px;
}
.panel h2{font-size:18px;color:var(--wood);border-bottom:1px dashed var(--line);padding-bottom:6px;margin-bottom:10px}
.panel h3{font-size:16.5px;color:var(--jade);margin:12px 0 6px}

/* ── 面板头：标题居左，右上角一个返回 ── */
.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-bottom:1px dashed var(--line); padding-bottom:6px; margin-bottom:10px;
}
.panel-head h2{border:none;padding:0;margin:0}

/* ── 文字流 ── */
.prose p{margin:0 0 13px}
.prose .say{color:var(--wood)}
.prose .warn{color:var(--cinnabar)}
.prose .good{color:var(--jade)}
/* 表格里的缺料／富余——菜谱手册逐道标「短什么、有几何」，.prose 之外也得有颜色 */
table .warn{color:var(--cinnabar);font-weight:600}
table .good{color:var(--jade);font-weight:600}

/* ── 按钮 ── */
.acts{display:grid;grid-template-columns:1fr;gap:8px}
.acts.two{grid-template-columns:1fr 1fr}
.btn{
  display:block;width:100%;min-height:48px;text-align:left;
  background:var(--card2);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;transition:background .12s,border-color .12s;
}
.btn:hover{background:#efe5d2;border-color:var(--gold)}
.btn:active{transform:translateY(1px)}
.btn .lb{font-weight:600}
.btn .sub{display:block;font-size:14.5px;color:var(--muted);margin-top:2px}
.btn.primary{background:var(--wood);color:#f7f1e6;border-color:var(--wood)}
.btn.primary:hover{background:#6b4a30}
.btn.primary .sub{color:#e2d6c2}
.btn.danger{border-color:#d8b3ae}
.btn.danger .lb{color:var(--cinnabar)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]:hover{background:var(--card2);border-color:var(--line)}
.btn.small{min-height:38px;padding:6px 10px;font-size:16px}
/* 选中的按钮：金边 + 左侧一道金条，一眼看得出选没选上（多选就用它） */
.btn.on{background:#f7eeda;border-color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}
.btn.on:hover{background:#f2e6cd;border-color:var(--gold)}
/* 面板头、表格里的小按钮：不铺满一行 */
.btn.tiny{display:inline-block;width:auto;min-height:0;padding:4px 10px;font-size:14.5px;text-align:center;border-radius:6px}

/* ── 表格 ── */
table{width:100%;border-collapse:collapse;font-size:16px;margin:6px 0}
th,td{border-bottom:1px solid var(--line);padding:5px 6px;text-align:left}
th{color:var(--muted);font-weight:600;background:var(--card2)}
td.num,th.num{text-align:right}
.tag{display:inline-block;font-size:13.5px;padding:1px 6px;border-radius:99px;border:1px solid var(--line);color:var(--muted);background:var(--card2);margin-right:4px}
.tag.red{border-color:#e0bab4;color:var(--cinnabar)}
.tag.green{border-color:#bcd6c6;color:var(--jade)}
.tag.gold{border-color:#e2cc9e;color:var(--gold)}
/* 表格里的一行小注（如「家伙」栏每件是干什么用的）：跟着物名走，别抢了数目的眼 */
.hintline{font-size:14px;color:var(--muted);margin-top:2px}
/* 柜台房态：空房与空栏常驻在客人名字下，随时看得见 */
.roomline{font-size:14.5px;color:var(--muted);background:var(--card2);border:1px solid var(--line);border-radius:6px;padding:5px 9px;margin:0 0 10px}
.roomline b{color:var(--ink)}
/* 接不下的那一位：房满了、栏满了、料短了——当场点红 */
.warnline{color:var(--cinnabar)}
.goodline{color:var(--jade)}

/* ── 日志流（钉在页首的状态栏下面） ── */
.logbox{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);padding:10px 12px;margin-bottom:12px;
}
.logbox .panel-head{padding-bottom:4px;margin-bottom:6px}
.logbox h2{font-size:17px;color:var(--wood)}
.log{max-height:min(20vh,150px);overflow:auto;font-size:16px;line-height:1.85;overscroll-behavior:contain}
.log .line{padding:4px 0;border-bottom:1px dotted #e8ddc9}
.log .line:last-child{border-bottom:none}
.log .line .d{color:var(--muted);font-size:14px;margin-right:6px}
.log .line.good{color:var(--jade)}
.log .line.bad{color:var(--cinnabar)}

/* ── 侧栏 / 抽屉 ── */
.aside{display:none}
.drawer-mask{position:fixed;inset:0;background:rgba(40,30,20,.35);z-index:8}
.drawer{
  position:fixed;right:0;top:0;bottom:0;width:min(88vw,340px);z-index:9;
  background:var(--card);border-left:1px solid var(--line);padding:14px;overflow:auto;
}
.drawer .acts{margin-top:10px}
/* 窄屏看侧栏的门（丢在右下角）；宽屏 .fab 收掉、侧栏就在手边 */
.fab{
  display:inline-block;width:auto;min-height:0;text-align:center;
  position:fixed;right:14px;bottom:max(14px,env(safe-area-inset-bottom));z-index:7;
  background:var(--wood);color:#f7f1e6;border:none;border-radius:99px;
  padding:12px 18px;box-shadow:0 4px 14px rgba(60,40,20,.3);
}
.fab:hover{background:#6b4a30}
.fab .lb{font-weight:600}

/* ── 战斗 ── */
.enemies{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.enemy{
  flex:1 1 140px;background:var(--card2);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;font-size:16px;
}
.enemy.dead{opacity:.35;text-decoration:line-through}
.enemy .hpbar{height:6px;background:#e3d6c0;border-radius:99px;margin-top:6px;overflow:hidden}
.enemy .hpbar i{display:block;height:100%;background:var(--cinnabar)}
.side-hp{display:flex;gap:10px;font-size:15px;color:var(--muted);flex-wrap:wrap;margin:4px 0 10px}

/* ── 食单卡：研发菜谱时挂右手侧栏（姑娘 2026-09-28 定）── */
.sidecard{
  background:var(--card2); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; margin:6px 0 12px;
}
.sidecard h3{margin-top:0}

/* ── 宽屏：两根柱子（2026-09-28 姑娘定，三易其稿）——
   左柱「店里的事」＋主舞台，右柱身份名册置顶＋库里存档；各排各的，不留空当 ── */
@media (min-width:900px){
  .shell{display:grid;grid-template-columns:1fr 300px;gap:14px;align-items:start}
  .aside{display:block}
  .fab{display:none}
  .acts{grid-template-columns:1fr 1fr}
}
@media (max-width:899px){
  .acts.two{grid-template-columns:1fr}
}

/* ── 开门报事：每日待决事务弹窗 ── */
.agenda-mask{position:fixed;inset:0;background:rgba(40,30,20,.45);display:flex;align-items:flex-start;justify-content:center;z-index:60;overflow:auto;padding:24px 12px}
.agenda-card{background:var(--card);border:1px solid var(--line);border-radius:12px;max-width:640px;width:100%;padding:16px 20px 20px;box-shadow:0 12px 40px rgba(0,0,0,.28)}
.agenda-item{border-top:1px dashed var(--line);padding:12px 0;margin-top:10px}
.agenda-card .panel-head{margin-bottom:4px}
.agenda-item .acts{margin:6px 0 0}

/* ── 新手指引·首日清单（2026-09-30）──
   今日页行动区上方一条窄幅：五件头一件事，勾过的划去淡出。
   全勾或第 4 日起整条收走，不赖着不走。 */
.tuto-bar{
  border:1px dashed var(--line); border-radius:10px;
  background:var(--card2); padding:10px 14px; margin:10px 0;
}
.tuto-bar .tuto-head{margin:0 0 6px;font-size:16px;color:var(--wood);font-weight:600}
.tuto-bar ul{margin:0;padding-left:1.4em}
.tuto-bar li{font-size:16px;line-height:2.05}
.tuto-bar li.tuto-done{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--cinnabar)}

/* ── driver.js 弹层古朴化（2026-09-30）──
   库默认样式是现代白卡蓝钮，覆盖成米纸墨字朱砂钮，与全店一个调。
   选择器都挂在 .jhx-popover（driver({popoverClass})）之下，不伤别家。 */
.driver-popover.jhx-popover{
  background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
  font-family:"Songti SC","STSong","SimSun","Noto Serif CJK SC",serif;
  max-width:300px;
}
.driver-popover.jhx-popover .driver-popover-title{
  font-family:'Kaiti SC','STKaiti','KaiTi',serif;
  font-size:19px; font-weight:600; color:var(--wood);
}
.driver-popover.jhx-popover .driver-popover-description{font-size:14.5px;line-height:1.8;color:var(--muted)}
.driver-popover.jhx-popover .driver-popover-progress-text{font-size:13.5px;color:var(--muted)}
.driver-popover.jhx-popover .driver-popover-close-btn{color:var(--muted)}
.driver-popover.jhx-popover .driver-popover-navigation-btns button{
  font-family:inherit; font-size:14.5px;
  background:var(--card2); color:var(--ink);
  border:1px solid var(--line); border-radius:8px;
  padding:4px 12px;
}
.driver-popover.jhx-popover .driver-popover-navigation-btns button:last-child{
  background:var(--cinnabar); color:#fff; border-color:var(--cinnabar);
}