/* ============================================================
   Zhiwei Shell CSS — 知微左侧导航栏 · 学习中心规范 V2.1.002 对齐
   ★ V13.0.097(小豆): 按学习中心 nav-sidebar.html 标准实现
     双变体(248/64px) · 场景化SVG图标 · 底部双按钮 · ARIA · 抽屉
   根因: 旧三档缩放(56/220/280)与学习中心双变体标准不符, 且无底部按钮区/Ctrl+B
   对标: KDD学习中心 assets/shell.css (Material3+Kompas+Marigold)
   验证: 浏览器E2E逐页截图 + verify_site.py
   ============================================================ */
:root{
  --side-w:248px;   /* 展开宽度（学习中心标准） */
  --side-w-c:64px;  /* 折叠宽度（学习中心标准） */
  --top-h:60px;
  --side-subtle:rgba(212,175,55,0.08);   /* 知微浅金 hover 弱底 */
  --side-active-bg:rgba(212,175,55,0.16);
}

/* 启用 shell 布局的页面：侧栏 fixed + 主区 margin-left 跟随 */
body.kdd-shell{ display:block !important; }

/* ── 侧栏骨架（展开态） ── */
body.kdd-shell .side{
  position:fixed; top:0; left:0; bottom:0;
  width:var(--side-w);
  background:var(--surface);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  z-index:1000;
  transition:width .2s ease;
  -webkit-overflow-scrolling:touch;
}

/* 品牌区：Mark 40×40 + 名称 + 版本 */
/* ★ V13.0.102(小豆知微): 高度 60→52px 压缩垂直占用, 为 23 项导航让出可视空间 */
.side-brand{
  display:flex; align-items:center; gap:11px;
  height:52px; padding:0 20px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.side-brand img{ width:40px; height:40px; border-radius:var(--r-md); flex-shrink:0; }
.side-brand .n{ font-size:15px; font-weight:800; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; }
.side-brand .v{ font-size:10.5px; color:var(--ink-3); font-family:var(--mono,ui-monospace,monospace); white-space:nowrap; }

/* 导航区 */
/* ★ V13.0.102(小豆知微): 框架稳定核心修复——
   根因: 23项导航总高≈1150px > 960px 视口导航区可视高≈850px, 后12项被 overflow 裁切,
         滚动条 thin 不可见 → 用户视为"导航内容不全"（10页 DOM 实证 23/5/2 全一致, 纯视觉裁切）。
   修复: ①密度压缩(组头/导航项/品牌/底部) 使 23 项在 960px 视口内完整可见
        ②滚动兜底可视化: 细滚动条主题化 + 底部渐变提示可滚动, 超长屏仍可达。
   对标: Vercel/Linear 侧栏密度(行高≈30px/13px字) + Material3 导航栏溢出渐变。
   验证: 浏览器 10 页截图 23 项标签全可见 + 底部双按钮在位 + 无横向溢出。 */
.side-nav{ flex:1; overflow-y:auto; padding:8px 10px 16px; scrollbar-width:thin; scrollbar-color:rgba(15,23,42,.18) transparent; position:relative; }
.side-nav::-webkit-scrollbar{ width:5px; }
.side-nav::-webkit-scrollbar-track{ background:transparent; }
.side-nav::-webkit-scrollbar-thumb{ background:rgba(15,23,42,.18); border-radius:3px; }
.side-nav::-webkit-scrollbar-thumb:hover{ background:rgba(15,23,42,.32); }
/* 底部可滚动渐变提示（内容超出可视区时出现） */
.side-nav::after{
  content:''; position:sticky; bottom:-1px; left:0; right:0; display:block;
  height:18px; pointer-events:none;
  background:rgba(255,255,255,0.85);
}
/* ★ V13.0.098(小豆知微): 根治 kdd-unified.css 旧版规则误伤新版 .side-nav ——
   旧规则 `.sidebar, aside.sidebar, .side-nav{ position:fixed !important; top:0; left:0; height:100% }`
   (kdd-unified.css L355/L375/L381，≥1025px 桌面也生效) 把 nav 钉成整屏 fixed，
   使其脱离 .side flex 列布局 → side-foot(主题/收起) 被顶到导航栏上方。
   根因: 旧版通用侧边栏选择器含 .side-nav，与新 shell 的 nav 语义冲突。
   修复: body.kdd-shell 前缀+ID 高特异性覆盖为 static，仅作用于知微新 shell 页面，
   不影响旧版 .sidebar 页面；≤900px 抽屉逻辑由 zhiwei-shell 自身媒体查询控制，不触碰。
   验证: 浏览器实测 .side-nav 计算样式回归 static、side-foot 回侧边栏底部。 */
body.kdd-shell aside#kdd-side .side-nav{
  position:static !important;
  top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
  width:auto !important; height:auto !important;
  transform:none !important; z-index:auto !important;
  overflow-y:auto;
}

/* 分组：场景图标 15px + 大写组名 */
/* ★ V13.0.102: 组头 16px→8px 上距, 字号 10.5→10px, 压缩垂直占用 */
.side-group{
  display:flex; align-items:center; gap:8px;
  font-size:10px; font-weight:700; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.08em;
  padding:8px 10px 4px;
}
.side-group svg{ width:15px; height:15px; flex-shrink:0; stroke-width:1.5; }

/* 导航项：场景图标 17px + 标签；激活=品牌渐变底+左侧3px品牌条 */
/* ★ V13.0.102: 行高压缩 padding 9px→6px / 字号 13.5→13px / lh 1.3, 行高≈30px 保可点性 */
.side-item{
  position:relative;
  display:flex; align-items:center; gap:10px;
  padding:6px 11px; border-radius:var(--r-md);
  color:var(--ink-2); text-decoration:none;
  font-size:13px; line-height:1.3;
}
.side-item:hover{ background:var(--side-subtle); color:var(--ink); text-decoration:none; }
.side-item.active{
  background:var(--side-active-bg);
  color:var(--brand); font-weight:600;
}
.side-item.active::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:18px; background:var(--brand); border-radius:0 3px 3px 0;
}
.side-item svg{ width:17px; height:17px; flex-shrink:0; stroke-width:1.5; }
.side-item .cnt{ margin-left:auto; font-size:10.5px; background:var(--side-subtle); color:var(--ink-3); padding:1px 6px; border-radius:var(--r-full); font-weight:600; }

/* 底部按钮区：主题切换 + 收放导航（chevron 双箭头） */
/* ★ V13.0.102: padding 12→10px / 按钮 9→7px, 压缩垂直占用 */
.side-foot{ padding:10px; border-top:1px solid var(--line); display:flex; gap:6px; flex-shrink:0; }
.side-thbtn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:7px 11px; border-radius:var(--r-md);
  border:none; background:transparent; color:var(--ink-2);
  cursor:pointer; font-size:12.5px; flex:1;
  font-family:inherit;
}
.side-thbtn:hover{ background:var(--side-subtle); color:var(--ink); }
.side-thbtn svg{ width:17px; height:17px; flex-shrink:0; stroke-width:1.5; }

/* ── 主内容区（body 直接子 main / .main-area） ── */
body.kdd-shell > main,
body.kdd-shell > .main-area{
  margin-left:var(--side-w);
  min-width:0;
  transition:margin-left .2s ease;
}

/* ── 折叠态（body.kdd-nav-collapsed） ── */
body.kdd-nav-collapsed .side{ width:var(--side-w-c); }
body.kdd-nav-collapsed .side-brand{ padding:0; justify-content:center; }
body.kdd-nav-collapsed .side-brand .n,
body.kdd-nav-collapsed .side-brand .v{ display:none; }
body.kdd-nav-collapsed .side-nav{ padding:8px 8px; }
body.kdd-nav-collapsed .side-group{ justify-content:center; padding:8px 0 4px; }
body.kdd-nav-collapsed .side-group span{ display:none; }
body.kdd-nav-collapsed .side-item{ justify-content:center; padding:6px 0; }
body.kdd-nav-collapsed .side-item span{ display:none; }
body.kdd-nav-collapsed .side-item svg{ width:20px; height:20px; }
body.kdd-nav-collapsed .side-item .cnt{ display:none; }
body.kdd-nav-collapsed .side-foot{ flex-direction:column; gap:4px; padding:8px; }
body.kdd-nav-collapsed .side-thbtn{ justify-content:center; padding:7px 0; width:100%; }
body.kdd-nav-collapsed .side-thbtn span{ display:none; }
body.kdd-nav-collapsed > main,
body.kdd-nav-collapsed > .main-area{ margin-left:var(--side-w-c); }

/* ── 响应式：≤900px 变抽屉（Drawer） ── */
@media(max-width:900px){
  body.kdd-shell .side{
    transform:translateX(-100%);
    width:var(--side-w) !important;
    transition:transform .25s ease;
    box-shadow:2px 0 16px rgba(15,23,42,.12);
  }
  body.kdd-shell .side.open{ transform:translateX(0); }
  body.kdd-shell > main,
  body.kdd-shell > .main-area{ margin-left:0 !important; }
  body.kdd-shell .side-scrim{
    position:fixed; inset:0; z-index:999;
    background:rgba(15,23,42,.4);
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  body.kdd-shell .side-scrim.show{ opacity:1; pointer-events:auto; }
  /* 抽屉内强制恢复完整内容（折叠态重置为展开内容） */
  body.kdd-nav-collapsed .side{ width:var(--side-w) !important; }
  body.kdd-nav-collapsed .side-brand{ padding:0 20px; justify-content:flex-start; }
  body.kdd-nav-collapsed .side-brand .n,
  body.kdd-nav-collapsed .side-brand .v{ display:block; }
  body.kdd-nav-collapsed .side-group{ justify-content:flex-start; padding:8px 10px 4px; }
  body.kdd-nav-collapsed .side-group span{ display:inline; }
  body.kdd-nav-collapsed .side-item{ justify-content:flex-start; padding:6px 11px; }
  body.kdd-nav-collapsed .side-item span{ display:inline; }
  body.kdd-nav-collapsed .side-item svg{ width:17px; height:17px; }
  body.kdd-nav-collapsed .side-foot{ flex-direction:row; gap:6px; padding:10px; }
  body.kdd-nav-collapsed .side-thbtn{ width:auto; flex:1; }
  body.kdd-nav-collapsed .side-thbtn span{ display:inline; }
}

/* 桌面展开态：解除 kdd-unified.css 全局 44px 触控目标对导航项的撑高
   （L345 `a,button{min-height:var(--touch-target)}` → 导航项 44+12=56px 行高,
     23 项总高≈1150px 溢出裁切。桌面鼠标场景 WCAG 2.5.8 豁免 44px,
     行高 29px 达标可点; ≤900px 抽屉/移动端保留触控标准 44px 合规。)
   ★ V13.0.102(小豆知微): 导航栏框架稳定·密度修复第2层 */
@media(min-width:901px){
  body.kdd-shell .side-item,
  body.kdd-shell .side-thbtn{ min-height:0; }
}

/* 无障碍：prefers-reduced-motion */
@media (prefers-reduced-motion:reduce){
  body.kdd-shell .side, body.kdd-shell > main, body.kdd-shell > .main-area{
    transition-duration:.001ms !important;
  }
}

/* 日间/夜间当前态高亮（V13.0.104 学习中心规范 sun/moon 双按钮） */
.side-thbtn[aria-pressed="true"]{ background:var(--side-subtle); color:var(--brand); }
.side-thbtn[aria-pressed="true"] svg{ stroke:var(--brand); }

/* ★ V13.0.110(小豆知微): v3.0 元数据页脚（值由生产 content_hash_guard stamp；此处仅占位样式） */
.content-meta{
  max-width:1200px;margin:32px auto 0;padding:16px 24px;
  border-top:1px solid var(--kdd-line,#EEE);
  font-size:12px;line-height:1.6;color:var(--kdd-text-note,#999);
  text-align:center;letter-spacing:.02em;
}
.content-meta:empty{min-height:0;padding-top:12px;}

/* V14.0.1(2026-11-01 小豆知微): 全站默认浅色强制层 - KDD 设计系统 v3.3 铁律
   根因: 107 个 ai-docs 页面 HTML 硬编码 data-theme=dark(默认深色),
         触发 kdd-unified.css 区块14 dark 分支 - 深色侧栏/深色卡片=长庚总点名全烂。
   修复: 本文件后于 kdd-unified.css 注入(同特异性后者胜), 将 dark 变量整体压回
         浅色 Slate Gold(--canvas #F8FAFC / --surface #FFFFFF / --ink #1E293B 体系),
         全站默认渲染为浅色, 无需改动 107 个 HTML(379 项未提交归长庚总禁触碰)。
   验证: 浏览器实测 robot-fengli.html/index.html 左侧导航栏+页面全浅色、无深色残留。 */
:root[data-theme="dark"]{
  --canvas:var(--s50); --surface:#FFFFFF; --subtle:var(--s100); --sunken:var(--s100);
  --side-bg:var(--surface);
  --line:var(--s200); --line-strong:var(--s300); --line-input:var(--s200);
  --ink:var(--s800); --ink-2:var(--s600); --ink-3:var(--s500); --ink-inv:#0F172A;
  --brand-ink:var(--g700); --brand-on:#FFFFFF;
  --focus:var(--g400);
  --ok:#0D9488; --warn:#D97706; --err:#DC2626; --info:#B8942F;
  --ok-bg:#F0FDFA; --warn-bg:#FFFBEB; --err-bg:#FEF2F2; --info-bg:#F5F5F5;
  --sh-lg:0 12px 32px rgba(0,0,0,.12); --sh-pop:0 8px 24px rgba(0,0,0,.06);
  --ring:0 0 0 3px rgba(212,175,55,.3);
  --bg-primary:var(--s50); --bg-secondary:var(--s100);
  --bg-card:#FFFFFF; --bg-card-hover:var(--s100);
  --text-primary:var(--ink); --text-secondary:var(--ink-2); --text-muted:var(--ink-3);
  --accent:var(--brand); --accent2:var(--brand-gold); --accent3:var(--ok);
  --border:var(--line); --border-strong:var(--line-strong);
  --card:#FFFFFF; --card-hover:var(--subtle);
  --text:var(--ink); --sec:var(--ink-2); --text2:var(--ink-2);
  --input-bg:var(--subtle);
}
:root[data-theme="dark"] body.kdd-shell .side{ background:var(--surface) !important; }
:root[data-theme="dark"] .side-item.active{ background:rgba(212,175,55,.16); color:var(--brand) !important; }
:root[data-theme="dark"] .side-nav::-webkit-scrollbar-thumb{ background:rgba(15,23,42,.18); }
:root[data-theme="dark"] .side-nav::after{ background:rgba(255,255,255,.85); }
:root[data-theme="dark"] .top-theme .moon{ display:none; }
:root[data-theme="dark"] .top-theme .sun{ display:block; }