/* 吃啥 · 方向 A「菜牌」。蓝本是 design/proto.html，改样子先改那边、出图给主人看过再搬过来。
   同一份页面按窗口宽度三档自适应：
   < 720 手机 · 720–1079 中屏（平板 / 桌面版拉宽的小窗）· ≥ 1080 电脑
   刻意不做：打开就全屏。桌面版默认小窗就是手机布局，用户自己拉宽才换布局。 */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
:root {
  --bg: #F4EFE6; --ink: #1E1A15; --mut: #978C7B; --rule: #D8CFBF; --line2: rgba(30,26,21,.28);
  --acc: #C2412B; --acct: rgba(194,65,43,.08); --on: #fff; --hov: rgba(30,26,21,.04); --dim: rgba(30,26,21,.32);
  --serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --sans: "Noto Sans SC", system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --gx: 22px;
  color-scheme: light;
}
html.dark {
  --bg: #191613; --ink: #EDE5D8; --mut: #8A8070; --rule: #39322A; --line2: rgba(237,229,216,.28);
  --acc: #E0603F; --acct: rgba(224,96,63,.12); --hov: rgba(237,229,216,.04); --dim: rgba(0,0,0,.55);
  color-scheme: dark;
}
body { background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; }
button, input { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; }
[role="button"] { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.wrap { padding: 0 var(--gx) 40px; }
.loading { padding: 48px 0; font-size: 13px; letter-spacing: .18em; color: var(--mut); text-align: center; }
.backlink { display: inline-block; margin-top: 14px; font-size: 13px; }

/* ---------- 页头 ---------- */
.head { padding: 22px 0 18px; }
.eyerow { display: flex; align-items: baseline; justify-content: space-between; }
.eyebrow { font-size: 12px; letter-spacing: .18em; color: var(--mut); }
.trow { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 8px; }
h1 { font-family: var(--serif); font-weight: 700; font-size: 34px; line-height: 1.1; letter-spacing: .02em; }
.count { font-size: 13px; color: var(--mut); padding-bottom: 4px; white-space: nowrap; }
.count b { font-family: var(--serif); font-size: 22px; color: var(--acc); font-weight: 600; margin-right: 1px; }
.sub { font-size: 13px; color: var(--mut); margin-top: 8px; }
.sub.say { color: var(--ink); margin-top: 6px; line-height: 1.6; }
.sub.say span { color: var(--mut); }
.rule2 { height: 4px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); opacity: .85; }

/* ---------- 文字链接、按钮 ---------- */
.a { color: var(--ink); border-bottom: 1px solid var(--rule); padding: 0 0 1px; cursor: pointer; transition: border-color 160ms ease; white-space: nowrap; }
.a.acc { color: var(--acc); }
.toadmin { font-size: 13px; letter-spacing: 0; }
.btn { height: 44px; padding: 0 18px; border-radius: 4px; background: var(--acc); color: var(--on); font-size: 15px; font-weight: 500; letter-spacing: .04em; white-space: nowrap; text-align: center;
  transition: transform 160ms var(--ease-out), box-shadow 160ms ease, opacity 160ms ease; }
.btn:active { transform: scale(.97); }
.btn.lg { height: 48px; font-size: 16px; }
.btn.wide { width: 100%; }
.btn.ghost { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line2); }
.btn:disabled { background: none; color: var(--mut); box-shadow: inset 0 0 0 1px var(--rule); cursor: default; transform: none; }
.btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
.btns { display: flex; gap: 10px; margin-top: 16px; }
.btns .btn { flex: 1; }
@media (hover: hover) and (pointer: fine) {
  .a:hover { border-color: currentColor; }
  .btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
  .tap:not(.focus):hover { background: var(--hov); }
}

/* ---------- 分类小标题：宋体 + 细线 + 右侧计数 ---------- */
.h2 { display: flex; align-items: center; gap: 12px; padding: 20px 0 4px; font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 28px; }
.h2 .ln, .label .ln { flex: 1; height: 1px; background: var(--rule); }
.h2 .n, .label .n { font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--mut); }

/* ---------- 点线行：左名右注，中间点线 ----------
   点线只在左边留空；右边有字才由字自己让出 10px，没字时点线拉到头，各行右缘对齐 */
.line { display: flex; align-items: baseline; height: 48px; padding-top: 13px; }
.line > .k { font-family: var(--serif); font-weight: 500; font-size: 17px; white-space: nowrap; }
.line > .k.s { font-family: var(--sans); font-weight: 400; font-size: 15px; }
.line > .k.mut { color: var(--mut); }
.dots { flex: 1; min-width: 16px; margin-left: 10px; border-bottom: 1.5px dotted var(--rule); transform: translateY(-4px); }
.line > .dots + * { margin-left: 10px; }
.line > .dots + :empty { display: none; }
.line > .v { font-size: 12px; color: var(--mut); white-space: nowrap; }
.line > .v.s { font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--ink); }
.line > .v.clip { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.line > .v.who { font-size: 13px; }
.line > .v.me, .line > .v.acc { color: var(--acc); }
.line > .a { margin-left: 10px; font-size: 13px; }
.x { flex: none; align-self: center; margin-top: -13px; width: 28px; height: 28px; margin-right: -6px; display: grid; place-items: center; color: var(--mut); font-size: 18px; line-height: 1; text-align: center; }

/* 菜品行：可点、整行高亮。手机上高亮通栏到屏幕边 */
.dish { margin: 0 calc(-1 * var(--gx)); padding-left: var(--gx); padding-right: var(--gx); transition: background-color 160ms ease; }
.dish.tap { cursor: pointer; }
.dish.taken .k, .dish.off .k { color: var(--mut); }
.dish.focus { background: var(--acct); }
.dish.hot .k { color: var(--acc); font-weight: 700; }
.dish.hot .dots { border-color: var(--acc); opacity: .45; }
.dish.add .k { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--acc); }
/* 印章：空心 = 选中待确认，实心 = 已点 */
.stamp { flex: none; align-self: center; margin-top: -13px; width: 24px; height: 24px; border-radius: 2px; background: var(--acc); color: var(--on);
  display: grid; place-items: center; font-family: var(--serif); font-size: 13px; font-weight: 700; }
.stamp.o { background: none; color: var(--acc); box-shadow: inset 0 0 0 1.5px var(--acc); }
/* 刚点上的那一下：像盖章一样落下。一天点一次，值得一个动画 */
.stamp.fresh { animation: stamp-in 240ms var(--ease-out); }
@keyframes stamp-in { from { transform: scale(1.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 点单页：饭桌 ---------- */
.table { padding: 16px 0 18px; }
.label { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .18em; color: var(--mut); margin-bottom: 10px; }
.label .ln, .label .n { display: none; }
/* 座位竖线：每格左边一条，整体左移再裁掉第一列那条，人数多少都对齐 */
.seats { display: grid; grid-template-columns: repeat(4, 1fr); margin-left: -11px; clip-path: inset(0 0 0 11px); row-gap: 10px; }
.seat { min-width: 0; padding-left: 10px; border-left: 1px solid var(--rule); }
.seat i { display: block; font-style: normal; font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat .dots { display: none; }
.seat b { display: block; font-family: var(--serif); font-weight: 600; font-size: 15px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat b.empty { color: var(--mut); font-weight: 500; }
.seat.me i { color: var(--acc); }
.left { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); display: flex; gap: 12px; align-items: baseline; }
.left .k { color: var(--mut); font-size: 12px; letter-spacing: .18em; flex: none; }
.left .v { font-family: var(--serif); font-weight: 500; font-size: 15px; line-height: 1.6; }
.mine { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--mut); }
.mine b { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--acc); margin-left: 6px; }
.mine .links { white-space: nowrap; }
.links .a + .a { margin-left: 14px; }
.lefts, .act { display: none; }
.hint { margin-top: 12px; font-size: 12px; line-height: 1.9; color: var(--mut); }
.hint .a { font-size: 12px; }
.ak { font-size: 12px; letter-spacing: .18em; color: var(--mut); }
.av { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--acc); margin-top: 6px; }
.av.plain { color: var(--ink); }

/* 等掌勺定 / 掌勺直接定 */
.notice { padding: 22px 0 20px; }
.notice .big { font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1.4; }
.notice p { font-size: 13px; line-height: 1.8; color: var(--mut); margin-top: 6px; }

/* 分类标签：只在手机上出现，吸顶 */
.tabs { position: sticky; top: 0; z-index: 2; background: var(--bg); display: flex; gap: 26px; margin: 0 calc(-1 * var(--gx)); padding: 0 var(--gx); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.tabs button { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--mut); padding: 11px 0 10px; position: relative; }
.tabs button sup { font-family: var(--sans); font-size: 10px; font-weight: 400; margin-left: 2px; }
.tabs button.on { color: var(--ink); }
.tabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
.cat { scroll-margin-top: 44px; }

/* 顶部一行：今晚的菜 / 明天的进度 */
.strip { display: flex; align-items: baseline; gap: 12px; padding: 12px 0 11px; border-bottom: 1px solid var(--rule); }
.strip .k { flex: none; font-size: 12px; letter-spacing: .18em; color: var(--acc); }
.strip .v { flex: 1; min-width: 0; font-family: var(--serif); font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip .v .m { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--mut); }
.strip .a { flex: none; font-size: 13px; }
.strip .a + .a { margin-left: 2px; }
.topnav { display: flex; justify-content: flex-end; padding-top: 14px; }

/* ---------- 海报：已截单的菜单 / 不做饭 / 进不来 ---------- */
.poster { text-align: center; padding-top: 36px; }
.poster h1 { margin-top: 10px; }
.poster .sub { margin-top: 10px; }
.poster > .rule2 { margin-top: 22px; }
.poster .body { text-align: left; padding-bottom: 22px; }
.poster .tail { margin-top: 14px; font-size: 13px; line-height: 1.8; color: var(--mut); }
.poster .say { font-family: var(--serif); font-size: 28px; font-weight: 700; letter-spacing: .12em; color: var(--acc); padding: 44px 0 10px; }
.poster .quote { font-size: 15px; line-height: 1.8; padding-bottom: 44px; }
.poster .quote span { color: var(--mut); }
.poster .say + .rule2 { margin-top: 34px; }
.poster .msg { font-size: 15px; line-height: 2; padding: 36px 0; }
.poster .btns { justify-content: center; margin-top: 22px; }
.poster .btns .btn { flex: none; min-width: 120px; }

/* ---------- 掌勺面板 ---------- */
.sec { padding-bottom: 12px; }
.addline { display: flex; align-items: center; gap: 14px; height: 52px; margin-top: 2px; }
.addline .a { flex: none; font-size: 14px; }
.addline.tight { height: 48px; margin-top: 0; }
.inp { flex: 1; min-width: 0; width: 100%; height: 38px; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; background: none; outline: none;
  font-family: var(--serif); font-size: 17px; transition: border-color 160ms ease; -webkit-appearance: none; appearance: none; }
.inp.sans { font-family: var(--sans); font-size: 15px; }
.inp::placeholder { color: var(--mut); opacity: .85; }
.inp:focus { border-bottom-color: var(--acc); }
.inp[type="time"] { font-family: var(--serif); }

/* 表单 */
.fld { display: block; padding-top: 20px; }
.fk { display: block; font-size: 12px; letter-spacing: .18em; color: var(--mut); margin-bottom: 4px; }
.seg { display: flex; margin-top: 6px; }
.seg button { flex: 1; height: 40px; display: grid; place-items: center; font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--mut); box-shadow: inset 0 0 0 1px var(--line2); transition: background-color 160ms ease, color 160ms ease; }
.seg button + button { margin-left: -1px; }
.seg button.on { background: var(--ink); color: var(--bg); box-shadow: none; }
.fld.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; }
.fl { display: block; font-size: 15px; }
.fh { display: block; font-size: 12px; color: var(--mut); margin-top: 3px; }
.sw { flex: none; width: 40px; height: 22px; border-radius: 2px; position: relative; box-shadow: inset 0 0 0 1px var(--line2); transition: background-color 160ms ease; cursor: pointer; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 1px; background: var(--mut); transition: transform 200ms var(--ease-out), background-color 160ms ease; }
.sw.on { background: var(--acc); box-shadow: none; }
.sw.on::after { transform: translateX(18px); background: var(--on); }
.ffoot { display: flex; align-items: center; justify-content: space-between; margin-top: 36px; }
.ffoot .btns { display: none; margin: 0; }
.under { display: none; }
.dlg { padding: 0 var(--gx) 40px; }

/* 成员 */
.mlist { display: grid; grid-template-columns: 1fr; column-gap: 48px; }
.mrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.mrow .who { flex: 1; min-width: 0; }
.mn { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.mrow.out .mn { color: var(--mut); }
.tag { display: inline-block; font-size: 11px; letter-spacing: .1em; color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); border-radius: 2px; padding: 0 5px; line-height: 18px; margin-left: 8px; vertical-align: 2px; }
.tag.mut { color: var(--mut); box-shadow: inset 0 0 0 1px var(--rule); }
.tg { font-size: 12px; color: var(--mut); margin-top: 4px; }
.tg .a { font-size: 12px; margin-left: 10px; }
.swl { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--mut); white-space: nowrap; cursor: pointer; }

/* 提示条：1.6 秒后自己消失 */
.toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; z-index: 20; background: var(--ink); color: var(--bg);
  font-size: 14px; padding: 10px 16px; border-radius: 4px; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Telegram 外（浏览器调试）才用的底部按钮，模仿原生 MainButton；电脑宽度不出 */
.mbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--bg); border-top: 1px solid var(--rule); padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); }
.mbar.show { display: block; }
body.has-mb { padding-bottom: 76px; }
body.has-mb .toast { bottom: 90px; }

/* 开发模式条（只在本机调试出现，?bare=1 关掉） */
.devbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px var(--gx); font-size: 12px; color: var(--mut); border-bottom: 1px dashed var(--rule); }
.devbar select, .devbar input { font-size: 12px; background: none; border: 1px solid var(--rule); border-radius: 2px; padding: 2px 4px; color: var(--ink); }
.devbar .a { font-size: 12px; }

/* ================= 中屏 ≥ 720 ================= */
@media (min-width: 720px) {
  :root { --gx: 36px; }
  .wrap { max-width: 1240px; margin: 0 auto; padding: 32px var(--gx) 40px; }
  .head { padding: 0 0 18px; }
  h1 { font-size: 40px; }
  .table { padding: 18px 0 22px; }
  .seats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .tabs { display: none; }
  .cols { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; border-top: 1px solid var(--rule); }
  .rule2 + .menu .cols { border-top: 0; }
  .h2 { padding: 16px 0 4px; }
  .line { height: 46px; }
  .dish { margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
  .notice { padding: 22px 0; }
  .strip { margin-bottom: 24px; padding-top: 0; }
  .topnav { padding-top: 0; }
  .backlink { margin: 0 0 18px; }
  .poster { max-width: 520px; margin: 0 auto; padding-top: 24px; }
  .admin { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-items: start; grid-template-areas: "st lo" "od mg"; }
  .mlist { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  /* 改菜：中屏起是弹窗，底下垫着菜单，保存在弹窗里 */
  .under { display: block; }
  .modal { position: fixed; inset: 0; z-index: 10; background: var(--dim); display: grid; place-items: center; padding: 24px; overflow-y: auto; }
  .dlg { width: 440px; max-width: 100%; background: var(--bg); padding: 28px 32px; box-shadow: 0 0 0 1px var(--rule); }
  .dlg .head { padding: 0 0 16px; }
  .dlg .backlink { display: none; }  /* 弹窗里有「取消」，点外面也能关 */
  .dlg h1 { font-size: 30px; }
  .ffoot .btns { display: flex; }
  .ffoot .btns .btn { flex: none; min-width: 88px; }
  .modal.enter { animation: fade-in 200ms ease; }
  .modal.enter .dlg { animation: dlg-in 220ms var(--ease-out); }
}
#st { grid-area: st; } #lo { grid-area: lo; } #od { grid-area: od; } #mg { grid-area: mg; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes dlg-in { from { opacity: 0; transform: scale(.96); } }

/* ================= 电脑 ≥ 1080 ================= */
@media (min-width: 1080px) {
  :root { --gx: 48px; }
  .wrap { padding: 40px var(--gx); }
  h1 { font-size: 44px; }
  .dlg h1 { font-size: 30px; }
  .order { display: grid; grid-template-columns: 272px 1fr; grid-template-areas: "strip strip" "head head" "rule rule" "side menu"; align-content: start; }
  .order > .strip { grid-area: strip; }
  .order > .head { grid-area: head; }
  .order > .head .count { display: none; }
  .order > .rule2 { grid-area: rule; }
  .order > .side { grid-area: side; padding: 6px 40px 0 0; border-right: 1px solid var(--rule); }
  .order > .menu { grid-area: menu; padding: 6px 0 0 40px; }
  .table { padding: 0; }
  /* 左栏小标题与右侧分类标题同样式、同行高，横向对齐 */
  .label { font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: 0; color: var(--ink); padding: 16px 0 4px; margin: 0; }
  .label .ln, .label .n { display: block; }
  .seats { display: block; margin: 0; clip-path: none; }
  .seat { display: flex; align-items: baseline; height: 46px; padding: 13px 0 0; border: 0; }
  .seat i { font-size: 15px; flex: none; max-width: 60%; }
  .seat .dots { display: block; }
  .seat b { font-size: 17px; margin: 0 0 0 10px; }
  .left, .mine { display: none; }
  .lefts { display: block; margin-top: 10px; }
  .act { display: block; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule); }
  .cols { border-top: 0; column-gap: 40px; }
  .notice { padding: 22px 0 0; }
  .admin { grid-template-columns: repeat(3, 1fr); column-gap: 48px; grid-template-areas: "st lo od" "mg lo od"; }
  /* 电脑宽度按钮在左栏；JS 已不显示底部按钮，这里兜底（比如拉宽窗口的那一瞬） */
  .mbar { display: none !important; }
  body.has-mb { padding-bottom: 0; }
}

/* Win11 等系统开了「减少动画」：保留淡入淡出，去掉位移和缩放 */
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  .stamp.fresh { animation: fade-in 160ms ease; }
  .toast, .toast.show { transform: translate(-50%, 0); }
  .modal.enter .dlg { animation: fade-in 160ms ease; }
}