/* 夜间风格 E 轮：手机上整站的外框照视频《夜读光感_四段合集》。
   1. 去掉顶上那一条（knowvane. 标志、搜索、“我”）：每页一打开就是自己的标题。搜索和“我”两个按钮由资料夹那一轮挪到资料页标题右边。
   2. 底栏：贴着屏幕底的一整条，顶上一根细线；选中那格字和图标变亮，下面一道紫到青的短线滑过去。
   电脑上（宽于 760）照旧。颜色全用 style.css 的变量（A 轮）。 */
@media (max-width:760px) {
  .top { display:none; }
  .wrap { padding-top:max(14px, env(safe-area-inset-top, 0px)); }
  /* 原来贴在顶栏下面的吸顶条，现在贴着屏幕顶 */
  #major-categories { top:env(safe-area-inset-top, 0px); }
  .derivative-tabs { top:env(safe-area-inset-top, 0px); }
  .derivatives-page > [role=tabpanel] { scroll-margin-top:94px; }
  .derivative-point { scroll-margin-top:80px; }
  .materials-path { scroll-margin-top:calc(12px + env(safe-area-inset-top, 0px)); }

  #tabbar { padding:0 max(6px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(6px, env(safe-area-inset-left, 0px));
    background:color-mix(in srgb, var(--bg) 96%, transparent); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
    box-shadow:inset 0 1px 0 var(--line); }
  .tabs, .tabs.glass { width:100%; max-width:none; padding:0; border-radius:0; background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .tabs.glass::after { display:none; }
  .tabs .tab { min-height:60px; padding:6px 0 10px; gap:4px; border-radius:0; color:var(--fg2); font-size:11px; font-weight:500; }
  .tabs .tab svg { width:22px; height:22px; transition:transform .3s cubic-bezier(.22,1,.36,1),filter .3s cubic-bezier(.22,1,.36,1); }
  .tabs .tab[aria-current=page] { background:transparent; color:var(--fg); font-weight:700; }
  .tabs .tab[aria-current=page] svg { filter:drop-shadow(0 0 6px color-mix(in srgb, var(--a2) 55%, transparent)); }
  /* 原来那块凸起的“镜片”（#tabpill，workspace.js 用弹簧挪它的位置和宽度）变成选中那格下面的一道短线 */
  .tabpill { display:block; top:auto; bottom:4px; height:3px; border-radius:0; background:none; box-shadow:none; }
  .tabpill::after { content:""; position:absolute; left:50%; top:0; width:18px; height:3px; margin-left:-9px; border-radius:2px;
    background:linear-gradient(90deg, var(--a1), var(--a3)); }
}
@media (max-width:760px) and (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .tabs .tab[aria-current=page] svg { filter:none; }
}
@media (max-width:760px) {
  :root[data-theme="light"] .tabs .tab[aria-current=page] svg { filter:none; }
}