/* ==========================================================================
   榕膳记 · 全站统一界面规范  assets/ui.css
   --------------------------------------------------------------------------
   为什么要有这个文件：
     改版前每个页面各写各的样式，结果是
       · 正文被写成 10px / 10.5px / 11px / 11.5px（产品库手机端 325 处）
       · 同一个红有两份（#9e2a1f 与 #7a1f16 并用），灰有三份
       · SOP 页干脆是另一套色（#2a211b / #786c62 / #9f5b0c）
     这里把「字号 / 颜色 / 间距 / 圆角 / 状态」收敛成唯一来源，
     以后改一处全站生效，不再各改一遍。

   三条硬规则（改任何页面都要守）：
     1. 正文不小于 14px，辅助说明不小于 12px。
        **禁止再用 10px / 10.5px / 11px 装正文**（角标除外，用 --rsh-fs-micro）。
     2. 颜色只能取自下面这套变量，不准再写新的十六进制。
     3. 每个区域必须分出主次：一个主数字或主操作，其余降级为辅助。

   命名前缀统一 rsh-，与 assets/app-shell.css 的 .rsj-app 互不干扰。
   ========================================================================== */

:root {
  /* ---- 品牌与墨色 ---- */
  --rsh-brand:        #9e2a1f;  /* 主品牌红，只用于强调与主操作 */
  --rsh-brand-ink:    #7a1f16;  /* 深红，用于红色文字（保证对比度） */
  --rsh-brand-soft:   #f8ece9;  /* 红色浅底 */
  --rsh-brand-line:   #edd8d3;

  --rsh-ink:          #2c2a27;  /* 主文字 */
  --rsh-ink-2:        #57514b;  /* 次要文字 */
  --rsh-ink-3:        #6f685f;  /* 辅助说明（白底上 5.2:1，达 12px 正文的 AA 要求）*/
  --rsh-ink-4:        #a89f93;  /* 最弱：**只给占位符和图标**，不要用来写句子（对比度仅 2.5:1）*/

  /* ⚠️ 深色/彩色底上的文字专用（深绿 #405c43、深红 #9e2a1f 这类大色块内部）。
     上面的 ink 系列全是"白底"假设，搬到深底上立刻失效：
     实测 SOP 的 .quick-tip 深绿底，把文字写成 ink 系只有 1.24:1，整句读不出。
     —— 改任何文字颜色前，先确认它坐在什么底色上。 */
  --rsh-on-dark:      #ffffff;  /* 深底主文字 */
  --rsh-on-dark-2:    #e8dcc4;  /* 深底辅助文字（在 #405c43 上 5.5:1）*/

  --rsh-bg:           #faf8f5;  /* 页面底 */
  --rsh-card:         #ffffff;
  --rsh-line:         #eae4dc;  /* 分隔线 / 卡片边 */
  --rsh-line-soft:    #f3eee8;

  /* ---- 状态色（涨跌与合规沿用中式习惯：红=注意，绿=正常）---- */
  --rsh-ok:           #2f7a52;  /* 在 ok-soft 上 4.6:1 */
  --rsh-ok-soft:      #e9f3ed;
  /* ⚠️ 原来是 #b3700f —— 在 warn-soft 上只有 3.75:1，达不到 12px 正文的 4.5:1。
     警告文字恰恰是"必须看清"的那一类（「有 3 单还缺配送路程时长，算不出几点该出发」），
     调到 #8f5608 后是 5.5:1。 */
  --rsh-warn:         #8f5608;
  --rsh-warn-soft:    #fdf4e5;
  --rsh-bad:          #c0392b;  /* 在 bad-soft 上 4.8:1 */
  --rsh-bad-soft:     #fbeeec;

  /* ---- 字号阶梯（唯一来源，不要绕过它写死 px）---- */
  --rsh-fs-micro:     11px;  /* 仅角标数字，禁止装句子 */
  --rsh-fs-cap:       12px;  /* 辅助说明、单位、时间 */
  --rsh-fs-sm:        13px;  /* 次要信息、密集列表 */
  --rsh-fs-body:      14px;  /* 正文（下限） */
  --rsh-fs-lg:        15px;  /* 强调正文、可点条目标题 */
  --rsh-fs-h3:        17px;  /* 小节标题、列表主标题 */
  --rsh-fs-h2:        20px;  /* 区块标题 */
  --rsh-fs-num:       26px;  /* 汇总数字 */
  --rsh-fs-num-lg:    34px;  /* 主数字，每屏最多一个 */

  /* ---- 间距（4 的倍数，别写 7px / 13px 这种）---- */
  --rsh-sp1: 4px;  --rsh-sp2: 8px;  --rsh-sp3: 12px; --rsh-sp4: 16px;
  --rsh-sp5: 20px; --rsh-sp6: 24px; --rsh-sp7: 32px;

  /* ---- 圆角 ---- */
  --rsh-r1: 8px; --rsh-r2: 12px; --rsh-r3: 16px; --rsh-pill: 999px;

  /* ---- 阴影（只有两级，多了就脏）---- */
  --rsh-sh1: 0 1px 2px rgba(44, 42, 39, .05);
  --rsh-sh2: 0 4px 16px rgba(44, 42, 39, .07);
  --rsh-sh3: 0 12px 32px rgba(44, 42, 39, .12);

  /* ---- 点击区下限：手机上小于 44px 就不好点 ---- */
  --rsh-tap: 44px;
}

/* ==========================================================================
   1. 基础
   ========================================================================== */

.rsh-scope {
  color: var(--rsh-ink);
  font-size: var(--rsh-fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
.rsh-scope * { box-sizing: border-box; }
.rsh-scope b,
.rsh-scope strong { font-weight: 600; }

/* 数字统一等宽，避免翻动时跳动 */
.rsh-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* 辅助与弱化文字：用类，不要各处写 color */
.rsh-cap  { font-size: var(--rsh-fs-cap);  color: var(--rsh-ink-3); }
.rsh-dim  { font-size: var(--rsh-fs-cap);  color: var(--rsh-ink-4); }
.rsh-sub  { font-size: var(--rsh-fs-sm);   color: var(--rsh-ink-2); }

/* ==========================================================================
   2. 卡片
   ========================================================================== */

.rsh-card {
  background: var(--rsh-card);
  border: 1px solid var(--rsh-line);
  border-radius: var(--rsh-r3);
  box-shadow: var(--rsh-sh1);
}
.rsh-card--pad { padding: var(--rsh-sp4); }
.rsh-card__title {
  margin: 0;
  font-size: var(--rsh-fs-h3);
  font-weight: 600;
  letter-spacing: .2px;
}

/* ==========================================================================
   3. 汇总数字组
   --------------------------------------------------------------------------
   手机上 5 格排成 3+2 且第二行被拉开，是原来最扎眼的问题。
   这里改成 6 列栅格：第一行 3 格各占 2 列，第二行 2 格各占 3 列 —— 永远对齐。
   用 data-n 声明格子数，电脑端直接等分成 n 列。
   ========================================================================== */

.rsh-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--rsh-sp2);
  padding: var(--rsh-sp3);
  background: var(--rsh-card);
  border: 1px solid var(--rsh-line);
  border-radius: var(--rsh-r3);
  box-shadow: var(--rsh-sh1);
}
.rsh-stats > * { grid-column: span 3; }                 /* 默认：一行两个 */
.rsh-stats[data-n="3"] > * { grid-column: span 2; }     /* 一行三个 */
.rsh-stats[data-n="5"] > * { grid-column: span 2; }     /* 一行三个… */
.rsh-stats[data-n="5"] > *:nth-child(4),
.rsh-stats[data-n="5"] > *:nth-child(5) { grid-column: span 3; }  /* …第二行两个各一半 */

@media (min-width: 900px) {
  .rsh-stats[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
  .rsh-stats[data-n="4"] { grid-template-columns: repeat(4, 1fr); }
  .rsh-stats[data-n="5"] { grid-template-columns: repeat(5, 1fr); }
  .rsh-stats > * { grid-column: auto; }
}

.rsh-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 62px;
  padding: var(--rsh-sp2) var(--rsh-sp1);
  border-radius: var(--rsh-r2);
  background: transparent;
  border: 0;
  font: inherit;
  text-align: center;
}
.rsh-stat b {
  font-size: var(--rsh-fs-num);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -.4px;
  color: var(--rsh-ink);
}
.rsh-stat span {
  font-size: var(--rsh-fs-cap);
  color: var(--rsh-ink-3);
  white-space: nowrap;
}
/* 可点的格子：给它一点"可以按"的样子，并把点击区做到 44px 以上 */
.rsh-stat--tap { cursor: pointer; }
.rsh-stat--tap:active { background: var(--rsh-line-soft); }
.rsh-stat--tap::after {
  content: "查看 ›";
  font-size: var(--rsh-fs-micro);
  color: var(--rsh-brand);
  opacity: .85;
}
/* 状态着色：只染数字，不铺底色，避免整块花掉 */
.rsh-stat[data-tone="ok"]   b { color: var(--rsh-ok); }
.rsh-stat[data-tone="warn"] b { color: var(--rsh-warn); }
.rsh-stat[data-tone="bad"]  b { color: var(--rsh-bad); }
.rsh-stat[data-tone="mute"] b { color: var(--rsh-ink-4); font-size: var(--rsh-fs-num); }

/* ==========================================================================
   4. 主动提示条（"让页面先开口"）
   --------------------------------------------------------------------------
   原来这些信息全塞在一段灰色小字里，等于没有。
   现在拆成一条条可点的提醒，只在真有情况时出现。
   ========================================================================== */

.rsh-alerts { display: flex; flex-direction: column; gap: var(--rsh-sp2); }

.rsh-alert {
  display: flex;
  align-items: center;
  gap: var(--rsh-sp3);
  width: 100%;
  min-height: var(--rsh-tap);
  padding: 10px var(--rsh-sp3);
  border: 1px solid transparent;
  border-radius: var(--rsh-r2);
  font: inherit;
  font-size: var(--rsh-fs-body);
  text-align: left;
  cursor: pointer;
  background: var(--rsh-warn-soft);
  color: var(--rsh-ink);
}
.rsh-alert[data-tone="bad"]  { background: var(--rsh-bad-soft); }
.rsh-alert[data-tone="warn"] { background: var(--rsh-warn-soft); }
.rsh-alert[data-tone="info"] { background: var(--rsh-line-soft); }

/* 左边一枚圆形计数，比"2 道汤"这种混排在句子里更好扫 */
.rsh-alert__n {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 26px; height: 26px;
  padding: 0 6px;
  border-radius: var(--rsh-pill);
  background: var(--rsh-warn);
  color: #fff;
  font-size: var(--rsh-fs-cap);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rsh-alert[data-tone="bad"] .rsh-alert__n { background: var(--rsh-bad); }
.rsh-alert[data-tone="info"] .rsh-alert__n { background: var(--rsh-ink-4); }

.rsh-alert__txt { flex: 1; min-width: 0; line-height: 1.4; }
.rsh-alert__txt b { font-weight: 600; }
.rsh-alert__go {
  flex: none;
  font-size: var(--rsh-fs-sm);
  font-weight: 600;
  color: var(--rsh-brand-ink);
  white-space: nowrap;
}
.rsh-alert__go::after { content: " ›"; }

/* ==========================================================================
   5. 可折叠说明（原来的"一堵灰字墙"）
   --------------------------------------------------------------------------
   规则：默认只露**一行结论**，想看推导再展开。
   ========================================================================== */

.rsh-note {
  border: 1px solid var(--rsh-line);
  border-radius: var(--rsh-r2);
  background: var(--rsh-card);
  overflow: hidden;
}
.rsh-note__sum {
  display: flex;
  align-items: center;
  gap: var(--rsh-sp2);
  width: 100%;
  min-height: var(--rsh-tap);
  padding: 10px var(--rsh-sp3);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--rsh-fs-sm);
  color: var(--rsh-ink-2);
  text-align: left;
  cursor: pointer;
}
.rsh-note__sum > span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rsh-note__toggle {
  flex: none;
  font-size: var(--rsh-fs-sm);
  font-weight: 600;
  color: var(--rsh-brand-ink);
}
.rsh-note__toggle::after { content: " ▾"; }
.rsh-note[open] .rsh-note__toggle::after { content: " ▴"; }
.rsh-note__body {
  padding: 0 var(--rsh-sp3) var(--rsh-sp3);
  font-size: var(--rsh-fs-sm);
  color: var(--rsh-ink-2);
  line-height: 1.75;
}
.rsh-note__body p { margin: 0 0 6px; }
.rsh-note__body p:last-child { margin-bottom: 0; }
.rsh-note__body b { color: var(--rsh-ink); }

/* ==========================================================================
   6. 按钮
   ========================================================================== */

.rsh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 var(--rsh-sp4);
  border: 1px solid var(--rsh-line);
  border-radius: var(--rsh-r2);
  background: var(--rsh-card);
  color: var(--rsh-ink);
  font: inherit;
  font-size: var(--rsh-fs-body);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.rsh-btn:disabled { opacity: .45; cursor: default; }

.rsh-btn--sm { min-height: 34px; padding: 0 var(--rsh-sp3); font-size: var(--rsh-fs-sm); }
.rsh-btn--primary {
  background: var(--rsh-brand);
  border-color: var(--rsh-brand);
  color: #fff;
  font-weight: 600;
}
.rsh-btn--danger {
  background: var(--rsh-card);
  border-color: var(--rsh-brand-line);
  color: var(--rsh-bad);
}
.rsh-btn--danger-solid {
  background: var(--rsh-bad);
  border-color: var(--rsh-bad);
  color: #fff;
  font-weight: 600;
}
.rsh-btn--quiet {
  min-height: 32px;
  padding: 0 var(--rsh-sp2);
  border-color: transparent;
  background: transparent;
  color: var(--rsh-ink-3);
  font-size: var(--rsh-fs-sm);
}
.rsh-btn--quiet:hover { color: var(--rsh-brand-ink); }

/* 手机上主操作要够大 */
@media (max-width: 899px) {
  .rsh-btn--primary, .rsh-btn--danger-solid { min-height: var(--rsh-tap); }
}

/* ==========================================================================
   7. 筛选条（原来最右一颗会被切掉，也不提示能滑）
   ========================================================================== */

.rsh-chips {
  display: flex;
  gap: var(--rsh-sp2);
  padding: 2px 0 var(--rsh-sp2);
  overflow-x: auto;
  scrollbar-width: none;
  /* 右侧留一点渐隐，暗示"还能往右滑" */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.rsh-chips::-webkit-scrollbar { display: none; }

.rsh-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 0 var(--rsh-sp4);
  border: 1px solid var(--rsh-line);
  border-radius: var(--rsh-pill);
  background: var(--rsh-card);
  color: var(--rsh-ink-2);
  font: inherit;
  font-size: var(--rsh-fs-sm);
  cursor: pointer;
  white-space: nowrap;
}
.rsh-chip b { font-variant-numeric: tabular-nums; color: inherit; }
.rsh-chip[aria-pressed="true"] {
  background: var(--rsh-brand-soft);
  border-color: var(--rsh-brand-line);
  color: var(--rsh-brand-ink);
  font-weight: 600;
}
/* 计数非零的筛选做成"有事发生"的样子 */
.rsh-chip[data-alert="1"] b { color: var(--rsh-bad); font-weight: 700; }

/* ==========================================================================
   8. 徽标与状态点
   ========================================================================== */

.rsh-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--rsh-pill);
  font-size: var(--rsh-fs-cap);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: var(--rsh-line-soft);
  color: var(--rsh-ink-2);
}
.rsh-badge[data-tone="ok"]   { background: var(--rsh-ok-soft);   color: var(--rsh-ok); }
.rsh-badge[data-tone="warn"] { background: var(--rsh-warn-soft); color: var(--rsh-warn); }
.rsh-badge[data-tone="bad"]  { background: var(--rsh-bad-soft);  color: var(--rsh-bad); }
/* ⚠️ 这里原来写的是 --rsh-ink-4（2.5:1）—— 徽标里装的是「已售 3」「可加料」这类句子，
   不是占位符，按本文件开头的规则不该用最弱那一档。实测产品库一页就有 66 处读不清。
   改用 ink-3（在浅底上约 4.9:1）。 */
.rsh-badge[data-tone="mute"] { background: var(--rsh-line-soft); color: var(--rsh-ink-3); }

.rsh-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--rsh-brand-soft);
  color: var(--rsh-brand-ink);
  font-size: var(--rsh-fs-micro);
  font-weight: 600;
}

/* ==========================================================================
   9. 空状态
   --------------------------------------------------------------------------
   原来只有一行灰字飘在巨大白底正中。补图标 + 一句"这里会出现什么"。
   ========================================================================== */

.rsh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rsh-sp2);
  padding: var(--rsh-sp7) var(--rsh-sp4);
  text-align: center;
}
.rsh-empty__icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--rsh-pill);
  background: var(--rsh-line-soft);
  color: var(--rsh-ink-4);
}
.rsh-empty b { font-size: var(--rsh-fs-lg); font-weight: 600; color: var(--rsh-ink-2); }
.rsh-empty p {
  margin: 0;
  max-width: 34ch;
  font-size: var(--rsh-fs-sm);
  line-height: 1.7;
  color: var(--rsh-ink-3);
}

/* ==========================================================================
   10. 份量（规格）三连 —— 价格绝不能被右边缘切掉
   ========================================================================== */

.rsh-sizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rsh-sp2);
}
.rsh-size {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px var(--rsh-sp3);
  border: 1px solid var(--rsh-line);
  border-radius: var(--rsh-r2);
  background: var(--rsh-card);
}
.rsh-size > span {
  font-size: var(--rsh-fs-cap);
  color: var(--rsh-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rsh-size > b {
  font-size: var(--rsh-fs-h3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--rsh-ink);
}
.rsh-size[aria-pressed="true"] {
  border-color: var(--rsh-brand-line);
  background: var(--rsh-brand-soft);
}
.rsh-size[aria-pressed="true"] > b { color: var(--rsh-brand-ink); }

/* 一行版（密集列表用，不换行不溢出） */
.rsh-sizes--inline {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 6px;
}
.rsh-sizes--inline .rsh-size { padding: 6px 8px; border: 0; background: transparent; }
.rsh-sizes--inline .rsh-size > b { font-size: var(--rsh-fs-body); }

/* ==========================================================================
   11. 列表行（回收站、食材库共用骨架）
   ========================================================================== */

.rsh-row {
  display: flex;
  align-items: center;
  gap: var(--rsh-sp3);
  padding: var(--rsh-sp3) var(--rsh-sp4);
  background: var(--rsh-card);
  border: 1px solid var(--rsh-line);
  border-radius: var(--rsh-r2);
}
.rsh-row__main { flex: 1; min-width: 0; }
.rsh-row__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--rsh-fs-lg);
  font-weight: 600;
  color: var(--rsh-ink);
}
.rsh-row__meta {
  margin-top: 2px;
  font-size: var(--rsh-fs-cap);
  color: var(--rsh-ink-3);
  line-height: 1.6;
}
.rsh-row__acts { flex: none; display: flex; gap: var(--rsh-sp2); }

@media (max-width: 899px) {
  /* 手机上按钮换行到整行，避免挤成一坨 */
  .rsh-row { flex-wrap: wrap; }
  .rsh-row__acts { width: 100%; }
  .rsh-row__acts .rsh-btn { flex: 1; }
}

/* ==========================================================================
   12. 底部保存栏 —— 只在"确实有东西可存"的页签出现
   ========================================================================== */

.rsh-savebar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--rsh-sp3);
  padding: var(--rsh-sp3) var(--rsh-sp4);
  background: rgba(250, 248, 245, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--rsh-line);
}
.rsh-savebar__state { flex: 1; min-width: 0; font-size: var(--rsh-fs-sm); color: var(--rsh-ink-3); }
.rsh-savebar[data-dirty="1"] .rsh-savebar__state { color: var(--rsh-warn); font-weight: 600; }
.rsh-savebar[hidden] { display: none; }

/* ==========================================================================
   13. 顶部返回条（统一各页头部）
   ========================================================================== */

.rsh-topbar {
  display: flex;
  align-items: center;
  gap: var(--rsh-sp3);
  min-height: 56px;
  padding: 0 var(--rsh-sp4);
  background: var(--rsh-card);
  border-bottom: 1px solid var(--rsh-line);
}
.rsh-topbar__back {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border: 1px solid var(--rsh-line);
  border-radius: var(--rsh-r2);
  background: var(--rsh-card);
  color: var(--rsh-ink-2);
  cursor: pointer;
}
.rsh-topbar__title { flex: 1; min-width: 0; }
.rsh-topbar__title h1 {
  margin: 0;
  font-size: var(--rsh-fs-h3);
  font-weight: 600;
  letter-spacing: .3px;
}
.rsh-topbar__title p {
  margin: 1px 0 0;
  font-size: var(--rsh-fs-cap);
  color: var(--rsh-ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}