/* ============================================================================
   今天调啥 · 自定义样式补充
   ----------------------------------------------------------------------------
   为什么不用 Tailwind 的 dark: 前缀？
     本项目用的是 Tailwind v2.2.19 预编译全量包，dark: 变体默认走
     `@media (prefers-color-scheme: dark)` 且未生成本地可切换的类名，
     所以深色主题改为「CSS 变量 + 语义类」实现：
       · 变量统一在 :root 定义（本项目默认就是深色配色）
       · 语义类只表达意图（背景/边框/文字层级），不关心具体色值
       · 想加浅色主题时：给 html 加 .light 类，再写一套同名变量覆盖即可
   语义类清单：
     .sur/.sur2     表面色（卡片、面板、顶栏、底栏 / 更浅一档的次级表面）
     .bd/.bd-strong 边框色
     .tx1/.tx2/.tx3 文字层级：主 / 次 / 弱
     .field         输入框与下拉框
     .btn-ghost     次级按钮
     .link-mute     弱化的文字按钮（清空选择等）
   ----------------------------------------------------------------------------
   另外补充了三个 Tailwind 工具类表达不了的细节：
     1) 原料 chip 的选中态（原生 checkbox 的 checked 状态）
     2) 卡片 / 星标 / 底部 tab 的过渡动画
     3) 配方详情、状态徽标、滚动条
   ============================================================================ */

:root {
  /* ---- 深色主题（默认） ---- */
  --bg:            #0f1116;  /* 页面底色 */
  --surface:       #171b23;  /* 卡片 / 面板 / 顶栏底色 */
  --surface-2:     #1e232d;  /* 次级表面：chip、输入框 */
  --surface-3:     #262d39;  /* 三级表面：标签、hover */
  --border:        #2b323e;
  --border-strong: #3d4757;

  --text:          #e8ebf1;  /* 主文字 */
  --text-2:        #a2abbb;  /* 次文字 */
  --text-3:        #6d7688;  /* 弱文字 */

  --accent:        #e8b04b;  /* 强调色：选中态 / 当前 tab / 星标 */
  --accent-fg:     #1a1408;  /* 强调色上的文字 */

  --ok:            #7ee2a1;  /* 可直接调制 */
  --warn:          #f5c65c;  /* 需要替代 */
  --danger:        #f79a9a;  /* 缺少材料 */
}

/* ---- 浅色主题：给 html 挂 .light 类即可切换（变量同名覆盖） ---- */
html.light {
  --bg:            #f5f6f8;
  --surface:       #ffffff;
  --surface-2:     #f0f1f4;
  --surface-3:     #e7e9ee;
  --border:        #e3e6ec;
  --border-strong: #c7ccd5;

  --text:          #1f2329;
  --text-2:        #525a66;
  --text-3:        #9aa1ab;

  --accent:        #b97812;  /* 浅色底上用深一档的琥珀，保证对比度 */
  --accent-fg:     #ffffff;

  --ok:            #15803d;
  --warn:          #b45309;
  --danger:        #dc2626;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei",
               "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
}

/* ---------------------------- 语义类 ---------------------------- */
.sur   { background: var(--surface); }
.sur2  { background: var(--surface-2); }
.bd    { border-color: var(--border); }
.bd-strong { border-color: var(--border-strong); }
.tx1   { color: var(--text); }
.tx2   { color: var(--text-2); }
.tx3   { color: var(--text-3); }

/* 输入框 / 下拉框 */
.field {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color .12s ease, background .12s ease;
}
.field::placeholder { color: var(--text-3); }
.field:focus {
  outline: none;
  border-color: var(--border-strong);
  background: var(--surface-3);
}
/* 下拉框选项在部分浏览器里是系统绘制，这里只保证关闭态配色一致 */
select.field option { background: var(--surface-2); color: var(--text); }

/* 次级按钮 */
.btn-ghost {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  transition: color .12s ease, border-color .12s ease;
}
.btn-ghost:hover { color: var(--text); border-color: var(--border-strong); }

/* 弱文字按钮 */
.link-mute { color: var(--text-3); transition: color .12s ease; }
.link-mute:hover { color: var(--text-2); }

/* ---------------------------- 原料 chip ---------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.1rem;
  cursor: pointer;
  user-select: none;
  transition: all .12s ease;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.chip-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}

/* 「管理原料」模式下：chip 右边跟一个删除小叉 */
.chip-slot { display: inline-flex; align-items: center; gap: 2px; }
.chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 9999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.chip-x:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ---------------------------- 配方卡片 ---------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.card:hover { border-color: var(--border-strong); }
.card.is-open { border-color: var(--accent); }
.card .tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 11px;
}
/* 卡片里「缺少的原料」用红色标出 */
.card .miss { color: var(--danger); }
.card .sep  { color: var(--text-3); }

/* ---------------------------- 状态徽标 ---------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 9999px;
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
}
.badge-ok   { background: rgba(126, 226, 161, .14); color: var(--ok); }
.badge-warn { background: rgba(245, 198,  92, .14); color: var(--warn); }
.badge-miss { background: rgba(247, 154, 154, .14); color: var(--danger); }
.badge-soft { background: var(--surface-3); color: var(--text-2); }

/* ---------------------------- 配方详情（卡片内联展开） ---------------------------- */
.detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.detail-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}
.ing-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 12.5px;
}
.ing-name { flex: 1 1 auto; min-width: 0; }
.ing-amt  { flex: 0 0 auto; color: var(--text-2); font-variant-numeric: tabular-nums; }
/* 需要用替代品顶上来的原料 */
.ing-row.is-sub .ing-name { color: var(--warn); }
/* 真正没有、也替代不了的原料 */
.ing-row.is-miss .ing-name { color: var(--danger); }
.step-row { display: flex; gap: 8px; padding: 3px 0; font-size: 12.5px; color: var(--text); }
.step-no {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 9999px;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------- 收藏星标 ---------------------------- */
.star-btn {
  flex: 0 0 auto;
  color: var(--text-3);
  padding: 2px;
  border-radius: 6px;
  transition: color .12s ease, transform .12s ease;
}
.star-btn:hover { color: var(--accent); transform: scale(1.1); }
.star-btn.star-on { color: #f59e0b; }   /* 实心状态：琥珀色 */

/* ---------------------------- 联网配方「保存」按钮 ---------------------------- */
.save-btn {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  color: var(--accent);
  transition: background .12s ease, color .12s ease;
}
.save-btn:hover { background: var(--accent); color: var(--accent-fg); }

/* ---------------------------- 自定义配方「编辑」按钮 ---------------------------- */
.edit-btn {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  color: var(--text-2);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.edit-btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--text-3); }

/* ---------------------------- 自定义配方「删除」按钮 ---------------------------- */
.del-btn {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--danger);
  color: var(--danger);
  transition: background .12s ease, color .12s ease;
}
.del-btn:hover { background: var(--danger); color: #fff; }

/* ---------------------------- 自定义配方「风味标签」可点选 chips ---------------------------- */
.tag-btn {
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: all .12s ease;
}
.tag-btn:hover { border-color: var(--border-strong); color: var(--text); }
.tag-btn.tag-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}

/* ---------------------------- 底部 tab ---------------------------- */
.tab-btn {
  color: var(--text-3);
  border-top: 2px solid transparent;
  transition: color .12s ease;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
  color: var(--accent);
  font-weight: 600;
  border-top-color: var(--accent);
}

/* ---------------------------- 滚动条 ---------------------------- */
#ingredient-groups {
  max-height: 62vh;
  overflow-y: auto;
  padding-right: 2px;
}
#ingredient-groups::-webkit-scrollbar { width: 6px; }
#ingredient-groups::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
#ingredient-groups::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* 小屏时原料面板不做内部滚动，直接跟随页面滚动 */
@media (max-width: 1023px) {
  #ingredient-groups { max-height: none; }
}

/* 去掉搜索框自带的清除小叉，保持极简 */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ============================================================================
   PWA / 移动端适配（iPhone 等触屏）
   ----------------------------------------------------------------------------
   只做「触屏友好 + 安全区」两件事，配色与排版风格保持原样：
     · 点击热区放大到 44px 左右（仅窄屏生效，桌面端观感不变）
     · 用 env(safe-area-inset-*) 避开 iPhone 刘海与底部 Home Indicator
     · 窄屏下输入类控件字号提到 16px，避免 iOS Safari 聚焦时自动放大整页
   ============================================================================ */

/* 触屏：去掉点击灰块高亮，并去掉双击缩放的 300ms 延迟 */
body { -webkit-tap-highlight-color: transparent; }
button, label, .chip, .card, .tag-btn, .tab-btn,
.save-btn, .del-btn, .edit-btn, .star-btn, .chip-x { touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; }

/* 底部 tab 栏：给 iPhone 的 Home Indicator 让位（非刘海机型 env 值为 0，等于没加） */
nav { padding-bottom: env(safe-area-inset-bottom); }

/* 顶栏：全屏（添加到主屏幕）时内容会顶到状态栏下面，用 safe-area 补齐 */
header.sticky { padding-top: env(safe-area-inset-top); }

/* 主体底部留白 = 原有 6rem + 底部安全区，保证最后一张卡片不被底栏挡住 */
main.mx-auto { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }

/* 原料面板滚动更顺滑（仅 iOS 老版本有效，其它浏览器忽略） */
#ingredient-groups { -webkit-overflow-scrolling: touch; }

@media (max-width: 1023px) {
  /* 触屏热区放大：chip 本体、删除小叉、卡片操作按钮、底部 tab */
  .chip        { padding: 7px 12px; font-size: 12.5px; line-height: 1.2rem; }
  .chip-slot   { gap: 4px; }
  .chip-x      { width: 24px; height: 24px; font-size: 14px; }
  .tab-btn     { padding-top: 14px; padding-bottom: 14px; }
  .save-btn, .del-btn, .edit-btn { padding: 8px 12px; font-size: 12.5px; }
  .star-btn    { padding: 6px; }
  .tag-btn     { padding: 6px 11px; font-size: 12px; }

  /* iOS：表单控件字号小于 16px 会在聚焦时把整页放大，这里统一抬到 16px */
  input.field, select.field, textarea.field { font-size: 16px; }
}