/* ============================================================
   theme.css —— 全站唯一色板（日/夜两套）+ 尺度常量 + 顶栏 + 搜索弹层
   颜色只在这里定义，pubic.css / post.css 等只使用变量，不再各自声明
   ============================================================ */

/* ============ 0. 颜色 / 尺度（亮色） ============ */
:root{
  /* 纸与墨 */
  --bg:#f3f6fc;              /* 纸底（渐变的中段） */
  --bg-top:#f6f9ff;
  --bg-bottom:#f7f9fd;
  --bg-glow-1:rgba(63,91,217,.10);
  --bg-glow-2:rgba(34,162,154,.07);
  --paper:#ffffff;
  --card:#ffffff;            /* 卡片：比纸底更亮一档，块感靠这个差 */
  --surface-alt:#f5f8fd;     /* 二级底：输入框、正文小背景、代码块 */
  --text:#18202c;
  --text-soft:#5a6575;
  --text-mute:#67707f;
  --line:#e2e9f3;
  --line-soft:#eef2f9;
  --line-strong:#cbd6e8;
  /* 品牌色 */
  --brand:#3f5bd9;
  --brand-deep:#2b3fa8;
  --brand-hover:#3349b8;
  --brand-soft:#e9eefd;
  /* teal 只做「时光轴节点 hover」这一处强调，别再往别处引 */
  --accent:#22a29a;
  --accent-soft:rgba(34,162,154,.16);
  /* 状态色：危险操作 / 出错提示 / 白色文字 */
  --danger:#c0392b;
  --danger-hover:#a93226;
  --on-fill:#ffffff;
  --hero-ink:var(--text);
  --code-ink:#22303f;         /* 代码块字色，lock 的深蓝墨 */
  --code-bg-1:#f7f9fe;        /* 代码块渐变底，lock 那对浅蓝 */
  --code-bg-2:#f2f6fd;
  --brand-rule:rgba(63,91,217,.55);       /* 代码块左边线 / 标题下划线 */
  --brand-glow:rgba(63,91,217,.20);       /* 主按钮投影 */
  --brand-glow-strong:rgba(63,91,217,.30);
  /* 顶栏与弹层 */
  --bar:rgba(255,255,255,.86);
  --bar-line:rgba(226,233,243,.9);
  --drawer-mask:rgba(16,22,34,.42);
  --topbar-h:56px;
  /* 阴影、描边环、动效 */
  --shadow:0 1px 2px rgba(23,43,77,.05),0 8px 24px rgba(23,43,77,.07);
  --shadow-hover:0 2px 6px rgba(23,43,77,.06),0 14px 34px rgba(63,91,217,.16);
  --ring:0 0 0 3px rgba(63,91,217,.14);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* 尺度：圆角 / 控件高度只在这里定，左右留白归 pubic.css 的 body */
  --radius-sm:8px;
  --radius:10px;
  --radius-lg:14px;
  --radius-xl:18px;
  --ctl-h:38px;                        /* 输入框、按钮的统一定高 */
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#14171c;
  --paper:#1c2028;
  --card:#232936;         /* 卡片比纸底亮一档 */
  --surface-alt:#282f3d;  /* 二级底：正文小背景、输入框，压在卡片上还要看得出差别 */
  --text:#e7e9ef;
  --text-soft:#a8b1c0;
  --text-mute:#8b95a6;
  --line:#2a3040;
  --line-soft:#252b38;
  --line-strong:#39404f;
  --brand:#7c92ff;
  --brand-deep:#9aabff;
  --brand-hover:#93a6ff;
  --brand-soft:#252c3f;
  --accent:#4fd0c6;
  --accent-soft:rgba(79,208,198,.2);
  --danger:#f0705f;
  --danger-hover:#f79184;
  --on-fill:#ffffff;
  --hero-ink:#f2f4f9;
  --code-ink:#d6dbe6;
  --code-bg-1:#1f2530;
  --code-bg-2:#1a1f28;
  --brand-rule:rgba(124,146,255,.6);
  --brand-glow:rgba(0,0,0,.35);
  --brand-glow-strong:rgba(0,0,0,.5);
  --bar:rgba(22,26,33,.86);
  --bar-line:rgba(42,48,64,.9);
  --drawer-mask:rgba(0,0,0,.6);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.28);
  --shadow-hover:0 2px 4px rgba(0,0,0,.32),0 12px 30px rgba(0,0,0,.4);
  --ring:0 0 0 3px rgba(124,146,255,.26);
  color-scheme:dark;
}

/* ============ 1. 顶栏：整条铺满浏览器宽度，内容贴着两端 ============ */
/* 顶栏也是 <header>，会同时吃到 pubic.css 里页面标题行的那套规则。
   所以这里必须把布局属性一条条写回来：通栏 block、无外边距、无圆角、无阴影，
   只留底部一条分隔线。另外也不能套 body 的 800px 居中壳，
   那样左右两边会凭空多出一截留白，品牌和按钮都被挤到中间 */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:990;
  display:block;margin:0;padding:0;
  border:0;border-bottom:1px solid var(--bar-line);
  border-radius:0;box-shadow:none;
  background:var(--bar);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  backdrop-filter:blur(14px) saturate(1.6);
  transition:background .3s var(--ease),border-color .3s var(--ease);
  animation:fadeDown .45s var(--ease) both;
}
.topbar>.topbar-inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:12px;height:var(--topbar-h);
}
/* 左：品牌，一路顶到最左 */
.top-brand{
  justify-self:start;
  display:inline-flex;align-items:center;
  color:var(--text);font-size:1.3rem;font-weight:600;letter-spacing:.01em;
  padding:4px 5vw;white-space:nowrap;
}
.top-brand:hover{color:var(--brand)}
/* 中：导航，真居中（三列的中间格） */
/* 条目内边距 16px：纯文字导航不放图标了，靠内边距撑开点击区 */
.top-nav{justify-self:center;display:flex;align-items:center;gap:4px}
.top-nav .nav-item{
  min-height:auto;padding:7px 16px;border-radius:8px;
  font-size:.9em;color:var(--text-soft);
}
.top-nav .nav-item:hover{background:transparent;color:var(--brand);transform:none}
.top-nav .nav-item.on{
  color:var(--text);background:transparent;box-shadow:none;position:relative;
}
.top-nav .nav-item.on::after{
  content:"";position:absolute;left:16px;right:16px;bottom:2px;height:2px;border-radius:2px;
  background:var(--brand);
}
/* 右：搜索 / 日夜 / 汉堡，一路顶到最右 */
.top-actions{justify-self:end;display:flex;align-items:center;gap:4px;padding: 4px 5vw;}
.top-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;
  border:1px solid transparent;border-radius:50%;
  background:transparent;color:var(--text-soft);font-size:1rem;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.top-btn:hover{background:var(--brand-soft);border-color:transparent;color:var(--brand)}
.top-btn .fa{font-size:1rem;line-height:1}
.top-btn .ic-half{width:1.15em;height:1.15em;display:block}
[data-theme="dark"] .top-btn .ic-half{transform:rotate(180deg)}
.top-burger{display:none}

/* 手机抽屉 */
.top-mask{
  position:fixed;inset:0;z-index:995;
  background:var(--drawer-mask);
  opacity:0;visibility:hidden;
  transition:opacity .26s var(--ease),visibility .26s var(--ease);
}
.top-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:996;
  width:min(74vw,270px);
  padding:calc(var(--topbar-h) + 8px) 12px 16px;
  background:var(--paper);
  border-left:1px solid var(--line);
  box-shadow:-12px 0 30px rgba(10,16,30,.16);
  transform:translateX(102%);
  transition:transform .3s var(--ease);
  overflow-y:auto;
  visibility:hidden;
}
/* 抽屉里是一列整行可点的条目：display 要自己给，pubic.css 里没有旧的 #nav 网格兜底了 */
.top-drawer .nav-item{
  display:flex;align-items:center;justify-content:flex-start;gap:10px;
  min-height:44px;padding:10px 12px;margin-bottom:4px;
  border-radius:10px;font-size:.95em;
  color:var(--text);
}
.top-drawer .nav-item:hover{background:var(--brand-soft);transform:none}
.top-drawer .nav-item.on{background:var(--brand-soft);color:var(--brand);box-shadow:none;transform:none}
body.nav-open .top-mask{opacity:1;visibility:visible}
body.nav-open .top-drawer{transform:none;visibility:visible}
body.nav-open{overflow:hidden}

/* ============ 2. 搜索弹层（外壳） ============ */
.search-layer{
  position:fixed;inset:0;z-index:997;
  display:flex;justify-content:center;align-items:flex-start;
  padding:calc(var(--topbar-h) + 18px) 14px 18px;
  background:rgba(16,22,34,.34);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  transition:opacity .24s var(--ease),visibility .24s var(--ease);
}
.search-layer.on{opacity:1;visibility:visible}
.search-layer .search-card{
  width:100%;max-width:560px;
  padding:10px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:0 20px 50px rgba(10,16,30,.28);
  transform:translateY(-8px);
  transition:transform .26s var(--ease);
}
.search-layer.on .search-card{transform:none}
.search-card #srch{margin:0;padding:0}
.search-card #srch-res{
  position:static;margin-top:8px;max-height:min(52vh,22em);
  box-shadow:none;border-color:var(--line-soft);
}

/* ============ 3. 顶栏让位 ============ */
/* 顶栏是 fixed，会盖住第一行内容：只在顶部让出高度。
   左右留白和 body 的 9px 内边距一律交给 pubic.css，这里不碰 —— 覆盖 padding 简写
   会把 lock 的留白一起改掉 */
body{padding-top:calc(var(--topbar-h) + 9px)}

main{display:block}
#topbar,#top-nav{scroll-margin-top:calc(var(--topbar-h) + 12px)}

@media (max-width:640px){
  :root{--topbar-h:52px}
  /* 中列整格收掉：只藏 .top-nav 的话，中间的 1fr 还在，右边那组按钮会被挤到栏中央 */
  .topbar>.topbar-inner{grid-template-columns:1fr auto}
  .top-nav{display:none}
  .top-burger{display:inline-flex}
  .topbar-inner{gap:6px}
  .top-brand{font-size:.95em}
  .top-brand::after{height:.95em;margin-left:7px}
  .top-actions{gap:8px}
  .top-btn{width:34px;height:34px}
  .top-btn .fa{font-size:1rem}
}
@media (min-width:768px){
  .topbar-inner{font-size:19px}
}