/*
  md3-shell.css -- 全站统一的 Material Design 3 外壳:常驻侧边导航 + 字体/配色 token。
  只负责"壳"(导航、间距、字体),不改各篇文章正文自己的配色和交互演示。
  被两处引用:
    1. article/templates/article/article_list.html (首页和分类分页, Django 模板)
    2. 数据库里每篇文章的 content_html(即 public/ 下的文章静态页)
  改这个文件会同时影响以上所有页面。
*/

:root{
  --md-bg:#F6F5F3;
  --md-surface:#FFFFFF;
  --md-surface-container:#FFFFFF;
  --md-on-surface:#201C1A;
  --md-on-surface-variant:#6B645F;
  --md-outline-variant:#E4E0DB;
  --md-primary:#201C1A;
  --md-on-primary:#F0EBE4;
  --md-scrim:rgba(20,17,14,.4);
  --md-shadow: 0 1px 2px rgba(30,25,20,.05), 0 8px 24px -12px rgba(30,25,20,.14);
  --md-drawer-w:272px;
  --md-topbar-h:56px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --md-bg:#17140F;
    --md-surface:#231F1A;
    --md-surface-container:#221D17;
    --md-on-surface:#F0EBE4;
    --md-on-surface-variant:#A79E93;
    --md-outline-variant:#3A342C;
    --md-primary:#E8E2D8;
    --md-on-primary:#201C1A;
    --md-scrim:rgba(0,0,0,.55);
    --md-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --md-bg:#17140F;
  --md-surface:#231F1A;
  --md-surface-container:#221D17;
  --md-on-surface:#F0EBE4;
  --md-on-surface-variant:#A79E93;
  --md-outline-variant:#3A342C;
  --md-primary:#E8E2D8;
  --md-on-primary:#201C1A;
  --md-scrim:rgba(0,0,0,.55);
  --md-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
}

/* 统一字体:这个系统字体栈在 Android/ChromeOS 上就是真正的 Roboto,
   其它平台各自取本机等价字重,不用额外拉一个 Google Fonts 请求。

   margin-left 必须 !important:103 篇文章各自的主 <style> 块实际写在
   <body> 内部(不是 <head> 里),文档顺序永远排在这个 <link> 后面,层叠
   顺序天然赢不了它们自己的 body{margin:0}。给 margin-left 单独上
   !important 就能不管文档顺序、稳定盖过去(下面移动端媒体查询里的
   margin-left:0 同理也要 !important,否则它自己反而会被这条盖掉)。 */
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  margin-left: var(--md-drawer-w) !important;
  transition: margin-left .2s ease;
}

/* ---------- 常驻侧边导航 ---------- */
.md3-drawer-toggle-input{ position:absolute; opacity:0; pointer-events:none; }

.md3-drawer{
  position:fixed; top:0; left:0; bottom:0; width:var(--md-drawer-w);
  background:var(--md-surface-container);
  border-right:1px solid var(--md-outline-variant);
  display:flex; flex-direction:column;
  overflow-y:auto;
  z-index:30;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

.md3-drawer-brand{
  display:flex; align-items:center; gap:11px;
  padding:20px 20px 16px;
  text-decoration:none; color:var(--md-on-surface);
}
.md3-drawer-mark{
  flex-shrink:0; width:32px; height:32px; border-radius:9px;
  background:var(--md-primary); color:var(--md-on-primary);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1rem; font-family:Arial,Helvetica,sans-serif;
}
.md3-drawer-title{ font-weight:600; font-size:.95rem; letter-spacing:-.01em; }
.md3-drawer-sub{ padding:0 20px 12px; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--md-on-surface-variant); }

.md3-drawer-list{ display:flex; flex-direction:column; gap:2px; padding:4px 12px; }

.md3-drawer-item{
  --item-c: var(--md-primary);
  position:relative;
  display:flex; align-items:center; gap:12px;
  height:48px; padding:0 16px;
  border-radius:24px;
  color:var(--md-on-surface-variant);
  text-decoration:none; font-size:.875rem; font-weight:500;
  transition:background-color .15s ease, color .15s ease;
}
.md3-drawer-item:hover{ background:color-mix(in srgb, var(--md-on-surface) 8%, transparent); color:var(--md-on-surface); }
.md3-drawer-item.active{
  background:color-mix(in srgb, var(--item-c) 16%, transparent);
  color:var(--item-c);
  font-weight:700;
}
.md3-drawer-dot{ width:10px; height:10px; border-radius:50%; background:var(--dot, currentColor); flex-shrink:0; }
.md3-drawer-label{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.md3-drawer-count{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.72rem; color:var(--md-on-surface-variant); opacity:.85;
}
.md3-drawer-item.active .md3-drawer-count{ color:inherit; opacity:1; }

.md3-drawer-footer{
  margin-top:auto; padding:16px 20px 20px;
  font-size:.72rem; line-height:1.5; color:var(--md-on-surface-variant);
  border-top:1px solid var(--md-outline-variant);
}

/* ---------- 移动端顶部条 + 抽屉遮罩 ---------- */
.md3-topbar{ display:none; }
.md3-scrim{ display:none; }

@media (max-width: 959px){
  body{ margin-left:0 !important; padding-top:var(--md-topbar-h); }

  .md3-topbar{
    display:flex; align-items:center; gap:14px;
    position:fixed; top:0; left:0; right:0; height:var(--md-topbar-h);
    padding:0 8px 0 4px;
    background:var(--md-surface); color:var(--md-on-surface);
    border-bottom:1px solid var(--md-outline-variant);
    z-index:25;
  }
  .md3-menu-btn{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:50%; flex-shrink:0;
    color:var(--md-on-surface); cursor:pointer;
  }
  .md3-menu-btn:hover{ background:color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
  /* 有些文章自己的 CSS 里用裸选择器 svg{width:100%;height:auto;min-width:...px}
     控制它自己的可视化图形 -- 这条规则的选择器没有限定容器,连汉堡菜单图标这个
     跟内容无关的 svg 也会被一起放大到 min-width(实测能撑到 480px 见方的白色
     色块糊在移动端顶部)。用更具体的选择器把图标锁回 22px,不用改任何一篇
     文章自己的 CSS。 */
  .md3-menu-btn svg{ width:22px; height:22px; min-width:0; }
  .md3-topbar-brand{ font-weight:600; font-size:.92rem; color:var(--md-on-surface); text-decoration:none; }

  .md3-drawer{
    transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.2,0,0,1);
    box-shadow:var(--md-shadow);
  }
  .md3-scrim{
    position:fixed; inset:0; background:var(--md-scrim); z-index:24;
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .md3-drawer-toggle-input:checked ~ .md3-drawer{ transform:translateX(0); }
  .md3-drawer-toggle-input:checked ~ .md3-scrim{ display:block; opacity:1; pointer-events:auto; }
}