/*
 * p-lib.css — 配方页 /lib/、锦囊页 /insights/（v0.26 第 1b 段，2026-10-29）。两页由 tools/libgen.py 生成，点目录筛右边在 lib.js。
 * 照样稿 ~/claude-workbench/outputs/2026-10-29-配方页样稿/（_src/build.py 的 CSS，乙和长条卡片那几段），颜色、字号用 ui.css、fyro.css 的变量。
 * 10-29 Leon「全部隐藏只是暂时没有内容，点进去是空的都可以。首页入口完了还是需要一个“配方”的左边目录右边菜单的页面来承载」：
 *   页头只有标题；宽屏左边目录（贴着页头往下走），右边当前分类的名字、一列长条卡片；799 以下目录变成顶上一排排能横滑的小签。
 *   锦囊页同一套，目录是「全部」和三个栏目。配方现在全部隐藏，右边是「还在整理。」的虚线框。
 * 样稿还有甲（目录 + 卡片网格，卡面同首页配方卷轴），Leon 选乙「但是每一条是一个长条卡片，hover效果更显著」，甲不做。
 * 和样稿不同的几处：小号朱字用 --accent-text-sm（10-27 Leon 定的夜里提亮一档，昼里和 --accent-text 一样）；键盘焦点用全站的焦点框（ui.css），
 *   不另画；窗口矮、目录放不下时目录自己滚（样稿的目录只贴着走）。减少动态效果时 fyro.css 统一去掉过渡，这里不另写。
 * v0.25 配方库页的样式（搜索框、热搜、四组筛选和手机上的抽屉、配方 / 文章选项卡、已选条件、没有结果时的提示）随那一版的页面拿掉了，
 *   写法在 git 历史里。卡片和封面的 lib-card.css 照旧给单件页、产品页、超级个体页用，这两页不加载它。
 */

/* ---------- 页头、两栏 ---------- */
.lp-head { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(24px, 3vw, 40px); }
.lp-head h1 { color: var(--ink); font-size: clamp(34px, 3.6vw, 52px); font-weight: var(--w-display); letter-spacing: var(--track-display); line-height: 1.15; }
.lp-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding-bottom: clamp(72px, 8vw, 120px); }

/* ---------- 左边目录：贴着页头往下走（窗口矮、放不下时目录里自己滚）；选中的那项加粗，前面一粒朱色小菱形 ---------- */
.lp-toc { position: sticky; top: calc(var(--header-h) + 20px); max-height: calc(100vh - var(--header-h) - 40px); max-height: calc(100svh - var(--header-h) - 40px); margin: -4px; padding: 4px; overflow-y: auto; overscroll-behavior: contain; }
/* 左栏还能往上、往下滚时那一头淡出一点（同调试台滚动区的做法：p-tokensim.css 的 .is-scrolled、.is-more）；高度由脚本跟着视口里露出的那一段定 */
.lp-toc.is-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.lp-toc.is-scrolled { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px); mask-image: linear-gradient(to bottom, transparent 0, #000 24px); }
.lp-toc.is-scrolled.is-more { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 28px), transparent); }
.lp-toc-h { margin: 0 0 6px; padding-left: 14px; color: var(--muted); font-size: 12.5px; letter-spacing: .06em; }
.lp-toc ul { margin: 0 0 22px; padding: 0; list-style: none; }
.lp-toc ul:last-child { margin-bottom: 0; }
.lp-toc button { position: relative; display: block; width: 100%; padding: 6px 10px 6px 14px; border: 0; border-radius: var(--r-md); background: none; color: var(--ink-soft); font: inherit; font-size: 14.5px; line-height: 1.45; text-align: left; cursor: pointer; transition: color .16s ease, background-color .16s ease; }
.lp-toc button::before { content: ""; position: absolute; left: 3px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 1px; background: var(--accent); rotate: 45deg; scale: 0; transition: scale .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .lp-toc button:hover { color: var(--ink); background: var(--current); } }
.lp-toc button[aria-pressed="true"] { color: var(--ink); font-weight: 650; }
.lp-toc button[aria-pressed="true"]::before { scale: 1; }

/* ---------- 右边：当前分类的名字，下面一列长条卡片 ---------- */
.lp-now { margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--edge); color: var(--ink); font-size: 20px; font-weight: 650; letter-spacing: var(--track-title); }
.lp-menu { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lp-menu:empty { display: none; }
.lp-menu > li { position: relative; }
/* 一条一张长条卡：第一行名字……点线……类型签（锦囊是栏目名），下面一句说明。
   10-29 Leon 选乙，「但是每一条是一个长条卡片，hover效果更显著」：悬停时卡浮起 3px、影子加深，左边一道朱色竖条滑出，
   卡框、标题、点线转朱，类型签填满朱色（锦囊的栏目名转朱），右边一个箭头滑进来 */
.lm-card { position: relative; display: block; padding: 16px 52px 17px 22px; overflow: hidden; border: 1px solid var(--edge); border-radius: var(--r-xl); background: var(--surface-card); box-shadow: var(--shadow-card); color: var(--ink); transition: translate .24s var(--ease-out), border-color .2s ease, box-shadow .24s ease; }
.lm-card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 2px 2px 0; background: var(--accent); transform: scaleY(0); transition: transform .26s var(--ease-out); }
.lm-card::after { content: "→"; position: absolute; right: 20px; top: 50%; margin-top: -.75em; color: var(--accent-text-sm); font-size: 18px; line-height: 1.5; opacity: 0; translate: -8px 0; transition: opacity .2s ease, translate .26s var(--ease-out); }
.lm-row { display: flex; align-items: baseline; gap: 12px; }
.lm-t { font-size: 16.5px; font-weight: 650; letter-spacing: var(--track-tight); transition: color .16s ease; }
.lm-lead { flex: 1; min-width: 24px; border-bottom: 1.5px dotted var(--line-2); translate: 0 -4px; transition: border-color .2s ease; }
.lm-d { display: block; margin-top: 5px; max-width: 46em; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
/* 类型签：同首页配方卷轴的 .pf-rk（p-home.css；两份不在同一页加载），朱色小签，前面一粒小菱形。
   color-mix() 前面先写一条普通色值，给不认它的老 WebView（site/README.md） */
.pf-rk { display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 2px 8px 2px 7px; border: 1px solid var(--line-2); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--accent-text-sm); font-size: 11.5px; font-weight: 550; line-height: 1.5; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.pf-rk::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: currentColor; rotate: 45deg; }
/* 栏目名（锦囊页）：灰色小字 */
.lp-ck { flex: none; color: var(--muted); font-size: 12.5px; transition: color .16s ease; }
@media (hover: hover) and (pointer: fine) {
  .lm-card:hover { translate: 0 -3px; border-color: var(--line-3); border-color: color-mix(in srgb, var(--accent) 45%, var(--edge)); box-shadow: var(--shadow-window); }
  .lm-card:hover::before { transform: none; }
  .lm-card:hover::after { opacity: 1; translate: 0 0; }
  .lm-card:hover .lm-t { color: var(--accent-text-sm); }
  .lm-card:hover .lm-lead { border-bottom-color: var(--accent); border-bottom-color: color-mix(in srgb, var(--accent) 55%, transparent); }
  .lm-card:hover .pf-rk { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
  .lm-card:hover .lp-ck { color: var(--accent-text-sm); }
}

/* ---------- 空着的时候（配方现在全部隐藏；锦囊每个栏目都有文章）：虚线框里一句「还在整理。」 ---------- */
.lp-empty { padding: clamp(48px, 8vw, 96px) 20px; border: 1px dashed var(--line-2); border-radius: var(--r-xl); color: var(--muted); font-size: 15px; text-align: center; }

/* ---------- 799 以下：目录变成顶上一排排能横滑的小签（配方页两排：「全部」和类型一排、业务环节一排），长条卡片在下面 ---------- */
@media (max-width: 799px) {
  .lp-body { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lp-toc { position: static; display: flex; flex-direction: column; gap: 8px; max-height: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); overflow: visible; }
  .lp-toc-h { display: none; }
  .lp-toc ul { display: flex; gap: 6px; margin: -3px 0; padding: 3px 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }   /* 上下各让 3px：横滑的一排会裁掉超出的部分，焦点框要露出来 */
  /* 横滑的一排伸到屏幕两边（左右各让出页边距那么宽），两头在页边距里渐隐：原来停在页边距内侧直接切断（第 5 段之五） */
  .lp-toc ul { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }
  .lp-toc ul::-webkit-scrollbar { display: none; }
  .lp-toc button { flex: none; width: auto; padding: 5px 12px; border: 1px solid var(--edge); border-radius: var(--r-pill); background: var(--sheet); font-size: 13.5px; white-space: nowrap; }
  .lp-toc button::before { display: none; }
  .lp-toc button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-text-sm); }
  .lm-t { font-size: 15px; } .lm-d { font-size: 12.5px; } .lm-card { padding: 13px 16px 14px; } .lm-card::after { display: none; }
}