/* ================================================================
 * common.css — 四个页面共享样式（辞渊计划）
 * 内容：主题变量、基础排版、站点头带（渐变/标志/标题/标语/右上搜索框/导航条）、
 *       右上搜索框的下拉建议框、页脚、移动端头带适配、无 JS 报错框。
 * 页面私有样式保留在各页 <style> 中。
 * 配色与风格取自 rpc-wiki-cn.wikidot.com 站点主题（component:theme）：
 * #272a31 页面底色 · #1d2022 面板 · #c0c0c0 正文 · #3e6aa3/#548de0 钢蓝强调
 * · #666 细边框 · 2px 直角 · 1px 硬阴影（档案文件风格）
 * ================================================================ */

:root {
    --bg: #272a31;          /* 站点 body 背景 */
    --panel: #1d2022;       /* 面板（站点 --primary-background） */
    --panel-2: #24272a;     /* 次级面板（站点 --content-bar-background） */
    --border: #666;         /* 站点 --basic-border-color */
    --text: #c0c0c0;        /* 站点 --text-color */
    --title: #fff;           /* 面板上的大标题（白色模式下随主题切换） */
    --muted: #9aa0a8;       /* 次要文字 */
    --heading: #3e6aa3;     /* 站点 --primary-text-color（标题钢蓝） */
    --accent: #3e6aa3;
    --accent-bright: #548de0;
    --accent-hover: #2d4975; /* 站点 --nav-hover-background */
    --accent-soft: rgba(62, 106, 163, 0.18);
    --ring: rgba(84, 141, 224, 0.3);
    --highlight: #f0c860;   /* 关键词高亮（深底亮黄） */
    --good-bg: rgba(108, 190, 111, 0.16); --good-fg: #7cc47f;
    --mid-bg:  rgba(224, 164, 88, 0.16);  --mid-fg:  #e0a458;
    --bad-bg:  rgba(245, 66, 66, 0.16);   --bad-fg:  #f54242; /* 站点 --error-color */
    --shadow: 1px 1px 1px 1px #191919;    /* 站点 --content-box-shadow */
    --radius: 2px;                          /* 站点 --element-border-radius */
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    /* 同站点：基础 body{font-family:verdana,...;font-size:.82em} + 主题 body{font-size:.9em} */
    font-family: verdana, arial, helvetica, "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-size: 0.9em;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
  }

  /* ---------- 站点头部（按站点 component:theme 逐值复刻：渐变头带/大图标/白标题/钢蓝标语/右下搜索框/21px 导航条） ---------- */
  #container-wrap {
    /* 高度 166px：让渐变的 145px~166px 深色段（导航黑条）完整绘制 */
    height: 166px;
    background: linear-gradient(#2a3355, #191c28 145px, #1f1f28 145px, #14141b 166px, #0000 166px);
  }
  #site-header {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    height: 144px;
    padding: 0 16px;
    background: url("/header-logo.png") left 1.2em top 1rem no-repeat;
    background-size: auto calc(9.5rem - 2.125rem);
  }
  #site-header h1, #site-header h2 { margin-left: 120px; padding: 0; }
  /* 同站点 #header h1{max-height:95px}：h2 的 clear 位置由此决定，缺失会导致副标题下坠 */
  #site-header h1 { max-height: 95px; }
  /* 同站点 #header h1 a,#header h2 span{display:block;line-height:0;max-height:0}：
     折叠行盒，字形上浮一个 ascent——标题视觉位置比常规渲染更高，务必保留 */
  #site-header h1 a, #site-header h2 span { display: block; line-height: 0; max-height: 0; }
  #site-header h1 a {
    display: block;
    /* 与站点一致：#header h1 a { padding:80px 0 25px; font-size:var(--header-font-size)=180%; font-weight:bold } */
    padding: 80px 0 25px;
    color: #fff;
    font-weight: 700;
    font-size: 180%;
    letter-spacing: 0.9px;
    text-decoration: none;
  }
  #site-header h2 { clear: left; }
  #site-header h2 span {
    display: block;
    color: #3e6aa3;
    font-weight: 700;
    /* 站点变量为 150%，实机观感偏大；按实机对照取 105%（0.9em×105%≈15.1px） */
    font-size: 105%;
    letter-spacing: 1px;
    padding: 19px 0;
  }
  #search-top-box {
    position: absolute;
    top: 79px;
    right: 16px;
    width: 250px;
    text-align: right;
  }
  #search-top-box form { display: flex; justify-content: flex-end; }
  #search-top-input {
    font-family: inherit;
    font-size: 13px;
    height: 20px;
    width: 160px;
    box-sizing: border-box;
    color: #c0c0c0;
    background-color: #33384d;
    border: 1px solid #777;
    border-right: none;
    border-radius: 0;
    padding: 0 8px;
    outline: none;
    vertical-align: bottom;
  }
  #search-top-input:hover, #search-top-input:focus {
    background-color: #2d3668;
    color: #fff;
    border-color: #fff;
  }
  .search-top-btn {
    font-family: inherit;
    font-size: 90%;
    font-weight: 700;
    color: #c0c0c0;
    background: #1b1f32;
    border: 1px solid #777;
    border-radius: 0;
    padding: 2px 6px;
    cursor: pointer;
  }
  .search-top-btn:hover { background: #363f64; color: #fff; border-color: #fff; }

  #top-bar {
    position: absolute;
    top: 140px;
    left: 16px;
    right: 16px;
    height: 21px;
    line-height: 18px;
    font-size: 90%;
    z-index: 30;
  }
  #top-bar ul { float: right; margin-top: 5px; list-style: none; display: flex; }
  #top-bar a {
    display: block;
    padding: 0 10px;
    color: #aaa;
    text-decoration: none;
    border-left: 1px solid rgba(64, 64, 64, 0.1);
    border-right: 1px solid rgba(64, 64, 64, 0.1);
  }
  #top-bar a:hover { background: #2d4975; color: #fff; }

#search-top-dropdown {
    position: absolute;
    top: 24px;
    right: 0;
    width: 250px;
    text-align: left;
    background: #272a31;
    border: 1px solid #666;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    z-index: 40;
    max-height: 320px;
    overflow-y: auto;
  }
  #search-top-dropdown a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 5px 10px;
    color: #c0c0c0;
    text-decoration: none;
    font-size: 13px;
  }
  #search-top-dropdown a:hover { background: #2d4975; color: #fff; }
  #search-top-dropdown .dd-rating { color: var(--good-fg); flex: none; font-size: 12px; }
  #search-top-dropdown em { font-style: normal; background: #f0c860; color: #1d2022; padding: 0 2px; }

  footer {
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    padding: 20px 16px 28px;
  }
  footer a { color: var(--accent-bright); text-decoration: none; }
  footer a:hover { text-decoration: underline; }

@media (max-width: 560px) {
    /* 与站点一致：移动端不改变头带/容器高度（144px/166px），黑条高度不变 */
    #site-header {
      background-position: 0 4.5em;
      background-size: 60px;
    }
    #site-header h1, #site-header h2 { margin-left: 66px; }
    /* 同站点：--header-mobile-font-size:85% / --header-mobile-tagline-font-size:75% */
    #site-header h1 a { font-size: 85%; }
    /* 同站点移动端：h2{font-size:var(--header-mobile-tagline-font-size)=75%}，
       span 直接继承 h2 字号（::before 的 content 为空、不渲染文字） */
    #site-header h2 span { font-size: 75%; }
    #search-top-box { top: auto; bottom: 26px; right: 8px; width: auto; }
    #search-top-input { width: 110px; }
    #top-bar { font-size: 80%; }
    #top-bar a { padding: 0 6px; }
  }

/* 当前页导航高亮 */
#top-bar a.active { color: #fff; background: #2d4975; }

/* 无 JavaScript 时的报错框（<noscript> 内容） */
.nojs-alert {
  margin: 20px auto;
  max-width: 720px;
  padding: 16px 20px;
  background: var(--bad-bg);
  border: 1px solid rgba(245, 66, 66, 0.5);
  color: var(--bad-fg);
  border-radius: var(--radius);
  font-size: 14px;
}
/* ================================================================
 * 白色模式（html[data-theme="light"]）—— 复刻站点 theme:white 版式
 * 取值全部来自 component:theme 的 --WT-* 变量（实抓 theme_site.css）：
 *   头带保持深蓝（--WT-header-background）、标题白色、标语淡黄 #f0f0c0；
 *   正文浅色（body #e8e8e3、面板 #eee/#e0e0e0）、文字 #333、
 *   链接 #236ec4、强调 #2266bf、悬停底 #1f317b；
 *   白色主题为直角（--WT-element-border-radius:0）且无面板阴影
 *   （--WT-content-box-shadow:none）。
 * 由 layout.js 的主题开关切换；记忆键 localStorage["rpc-search.theme"]。
 * ================================================================ */
html[data-theme="light"] {
  --bg: #e8e8e3;            /* --WT-body-background */
  --panel: #eee;            /* --WT-primary-background */
  --panel-2: #e0e0e0;       /* --WT-secondary-background */
  --border: #666;           /* --WT-basic-border-color */
  --text: #333;             /* --WT-text-color */
  --title: #333;
  --muted: #555a60;         /* 站点无对应变量，取居中灰 */
  --heading: #2266bf;       /* --WT-primary-text-color */
  --accent: #2266bf;        /* 按钮底（对应 primary-text-color） */
  --accent-bright: #236ec4; /* --WT-link-color */
  --accent-hover: #1f317b;  /* --WT-nav-hover-background */
  --accent-soft: rgba(35, 110, 196, 0.12);
  --ring: rgba(35, 110, 196, 0.3);
  --highlight: #f0c860;
  --good-bg: rgba(47, 143, 56, 0.14);  --good-fg: #2f8f38;  /* 站点无对应变量 */
  --mid-bg:  rgba(160, 108, 31, 0.14); --mid-fg:  #a06c1f;  /* 站点无对应变量 */
  --bad-bg:  rgba(212, 0, 0, 0.12);    --bad-fg:  #d40000;  /* --WT-error-color: red */
  --shadow: none;           /* --WT-content-box-shadow */
  --radius: 0px;            /* --WT-element-border-radius */
}

/* 头带：白色主题仍为深蓝渐变（--WT-header-background），标题白色、标语淡黄 */
html[data-theme="light"] #container-wrap {
  background: linear-gradient(#253677, #253575 20px, #21284b 132px, #1b213f 145px,
                              #1b1b27 145px, #1f1f29 150px, #181822 166px, #0000004c 166px, #0000 179px);
}
html[data-theme="light"] #site-header h1 a { color: #fff; }       /* --WT-header-color */
html[data-theme="light"] #site-header h2 span { color: #f0f0c0; } /* --WT-header-tagline-color */

/* 右上搜索框（--WT-search-*：输入框透明底深蓝字，按钮深蓝底） */
html[data-theme="light"] #search-top-input {
  color: #202d60;            /* --WT-search-input-color */
  background-color: transparent;
  border-color: #aaa;        /* --WT-search-input-border */
}
html[data-theme="light"] #search-top-input:hover,
html[data-theme="light"] #search-top-input:focus {
  background-color: #1e2d77; /* --WT-search-input-hover */
  color: #fff;               /* --WT-search-input-hover-color */
  border-color: #fff;        /* --WT-search-input-hover-border */
}
html[data-theme="light"] .search-top-btn {
  color: #fff;
  background: #202e60;       /* --WT-search-button-background */
  border-color: #aaa;        /* --WT-search-button-border */
}
html[data-theme="light"] .search-top-btn:hover {
  background: #1f317b;       /* --WT-search-button-hover-background */
  color: #fff;
  border-color: #fff;        /* --WT-search-button-hover-border */
}

/* 导航条（--WT-topbar-*：文字 #aaa，悬停/当前页底 #1f317b） */
html[data-theme="light"] #top-bar a { color: #aaa; }
html[data-theme="light"] #top-bar a:hover,
html[data-theme="light"] #top-bar a.active { background: #1f317b; color: #fff; }

/* 下拉建议框（--WT-topbar-dropdown-*：body 底色 #e8e8e3、深字） */
html[data-theme="light"] #search-top-dropdown {
  background: #e8e8e3;
  border-color: #666;
  box-shadow: none;
}
html[data-theme="light"] #search-top-dropdown a { color: #333; }
html[data-theme="light"] #search-top-dropdown a:hover { background: #1f317b; color: #fff; }
html[data-theme="light"] .search-box input::placeholder { color: #a8aeb8; }

/* 页脚：白色主题为深色底栏（--WT-footer-background: #33333f） */
html[data-theme="light"] footer {
  background: #33333f;
  color: #c0c0c0;            /* --WT-footer-color */
}

/* 主题开关按钮（右上角）：使用站点原版图标
   light-off.svg（深色下显示）/ light-on.svg（悬停与白色下显示），
   尺寸与站点 .themes-white a 一致（约 1em+4px），悬停带光晕 0 0 8px #f9f9f9 */
#theme-toggle {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: url("/light-off.svg") no-repeat center / contain;
  cursor: pointer;
  z-index: 40;
}
#theme-toggle:hover {
  background-image: url("/light-on.svg");
  box-shadow: 0 0 8px #f9f9f9;
}
html[data-theme="light"] #theme-toggle {
  background-image: url("/light-on.svg");
}
html[data-theme="light"] #theme-toggle:hover {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}