/* 站点修正样式：在旧版 CSS 之后加载，只做渐进增强，不改动原有视觉。
 * 1) sr-only：仅屏幕阅读器/搜索引擎可见的标题（页面唯一 h1）。
 * 2) 登录入口：由纯 hover 改为 hover + 点击 + 键盘（focus-within）都能展开。
 * 3) 详情页加载骨架与「文章不存在」状态。
 * 4) 正文富文本：补齐后台编辑器输出的裸标签样式（代码块、引用、列表、表格等）。
 */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---- 顶部账号入口：点击/键盘可展开（触屏友好） ---- */
.header .wrapper .menu .top .login-menu {
  position: relative;
}
.header .wrapper .menu .top .login-menu .login-trigger {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.header .wrapper .menu .top .login-menu .login-trigger:focus-visible {
  outline: 2px solid #0076ea;
  outline-offset: 2px;
  border-radius: 4px;
}
.header .wrapper .menu .top .login-menu .panel {
  z-index: 20;
}
/* 悬停或点击/回车展开。不用 :focus-within：否则键盘按 Escape 收起后，
 * 焦点仍停留在按钮上会让面板一直显示；键盘展开由按钮的 Enter/Space 触发。 */
/* 悬停展开由 JS 的 open 状态控制（带 350ms 关闭延时），这里只认 .open。 */
.header .wrapper .menu .top .login-menu.open .panel {
  display: block;
}

/* ---- 详情页实时预览（静态页未构建时的回退页）---- */
.preview-loading {
  width: 1000px;
  margin: 60px auto;
  padding: 0 10px;
}
.preview-loading .line {
  height: 18px;
  margin: 14px 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #eceff4 25%, #f6f8fb 37%, #eceff4 63%);
  background-size: 400% 100%;
  animation: preview-skeleton 1.4s ease infinite;
}
.preview-loading .line.title {
  height: 34px;
  width: 62%;
  margin-bottom: 28px;
}
.preview-loading .line.short {
  width: 38%;
}
.preview-loading .hint {
  margin-top: 26px;
  color: #9aa3ad;
  font-size: 14px;
}
.preview-missing {
  width: 1000px;
  margin: 80px auto 140px;
  padding: 48px 40px;
  background: #fff;
  border: 1px solid #e5e8ee;
  border-radius: 12px;
  text-align: center;
  color: #474747;
}
.preview-missing h1 {
  margin: 0 0 10px;
  font-size: 28px;
  color: #343333;
}
.preview-missing h1 span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
  color: #9aa3ad;
}
.preview-missing p {
  margin: 14px 0 26px;
  color: #66707d;
}
.preview-missing .actions a {
  display: inline-block;
  margin: 0 8px;
  padding: 9px 22px;
  border-radius: 6px;
  border: 1px solid #4388ef;
  color: #4388ef;
  font-size: 15px;
}
.preview-missing .actions a.primary {
  background: #4388ef;
  color: #fff;
}
@keyframes preview-skeleton {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.preview-missing .actions button {
  display: inline-block;
  margin: 0 8px;
  padding: 9px 22px;
  border-radius: 6px;
  border: 1px solid #4388ef;
  color: #4388ef;
  background: transparent;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.preview-missing .actions button.primary {
  background: #4388ef;
  color: #fff;
}

/* ==========================================================================
 * 4. 文章正文：还原后台富文本编辑器里的排版
 *
 * common.css 为了还原旧版设计，把 h1-h4 / pre / ol / ul 的字号、粗细、内外边距
 * 统一重置成 0/400，还用 list-style:none 去掉了列表符号；旧版正文靠 .html-table
 * 这类包裹类名和行内样式撑着。新版 Tiptap 编辑器（components/manage/rich-editor.tsx）
 * 直接输出「裸标签」：<h2>/<h3>/<ul>/<ol>/<blockquote>/<pre><code>/<table>/<hr>，
 * 保存时类名会被白名单清洗掉，行内样式又只保留字体、颜色、对齐等少数几项，
 * 于是编辑器里能看到的代码块底色/圆角、引用竖线、列表符号、表格边框，
 * 在详情页和后台「前台预览」里全部丢失（预览页与详情页共用同一份样式）。
 *
 * 这里按 components/manage/rich-text/rich-editor.css 的取值补齐，保证编辑器所见即所得。
 * 选择器统一带 `.news-theme .wrapper .content .html` 前缀：
 *   - 权重高于 common.css 的元素选择器，也高于随后加载的页面 CSS；
 *   - 只作用于正文，不影响栏目导航、页脚等旧版结构。
 * ========================================================================== */

/* ---- 标题 ---- */
.news-theme .wrapper .content .html h1,
.news-theme .wrapper .content .html h2,
.news-theme .wrapper .content .html h3,
.news-theme .wrapper .content .html h4 {
  margin: 1.1em 0 0.4em;
  color: #16324f;
  font-weight: 600;
  line-height: 1.35;
}
.news-theme .wrapper .content .html h1 { font-size: 28px; }
.news-theme .wrapper .content .html h2 { font-size: 24px; }
.news-theme .wrapper .content .html h3 { font-size: 20px; }
.news-theme .wrapper .content .html h4 { font-size: 17px; }
/* 只在编辑器里留下的空标题（保存前的空段落清理不覆盖标题）不占行高，避免正文顶部多出空白。 */
.news-theme .wrapper .content .html :is(h1, h2, h3, h4):empty { display: none; }

/* ---- 列表 ----
 * 只认正文里的列表（含技术研发/科研平台标签页 .html-fragment 里的内容）：
 * 「测试服务」栏目里 .test-process / .test-mine 是代码自绘的图标宫格，
 * 它们的 <ul>/<li> 也挂在 .html 下面，但既没有正文的列表符号，也靠 float + margin
 * 拼宫格，必须排除掉，否则图标会多出圆点、卡片间距会被正文列表样式覆盖。
 */
.news-theme .wrapper .content .html :is(ul, ol):not(.test-process *, .test-mine *) {
  margin: 0.6em 0;
  padding-left: 1.4em;
}
.news-theme .wrapper .content .html ul:not(.test-process *, .test-mine *) { list-style: disc; }
.news-theme .wrapper .content .html ul:not(.test-process *, .test-mine *) ul { list-style: circle; }
.news-theme .wrapper .content .html ul:not(.test-process *, .test-mine *) ul ul { list-style: square; }
.news-theme .wrapper .content .html ol:not(.test-process *, .test-mine *),
.news-theme .wrapper .content .html ol:not(.test-process *, .test-mine *) ol { list-style: decimal; }
.news-theme .wrapper .content .html :is(ul, ol):not(.test-process *, .test-mine *) li { margin: 0.15em 0; }
.news-theme .wrapper .content .html :is(ul, ol):not(.test-process *, .test-mine *) li > p { margin: 0.25em 0; }
.news-theme .wrapper .content .html :is(ul, ol):not(.test-process *, .test-mine *) li::marker { color: #8d8d8d; }

/* ---- 引用 ---- */
.news-theme .wrapper .content .html blockquote {
  margin: 0.8em 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid #dee2e6;
  color: #66707d;
}
.news-theme .wrapper .content .html blockquote p { margin: 0.3em 0; }

/* ---- 行内代码 / 代码块 ---- */
.news-theme .wrapper .content .html code {
  padding: 1px 5px;
  border-radius: 4px;
  background: #f1f3f5;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.9em;
}
.news-theme .wrapper .content .html pre {
  margin: 0.8em 0;
  padding: 12px 14px;
  border: 1px solid #e6e9ee;
  border-radius: 8px;
  background: #f6f8fa;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13.5px;
  line-height: 1.6;
  overflow-x: auto;
  tab-size: 2;
  /* .html 上的 word-break:break-all 会把命令/URL 从中间硬拆开，代码块要按原样保留空白和换行 */
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}
.news-theme .wrapper .content .html pre code {
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

/* ---- 表格 ----
 * .article-body 是「汇款信息」这类代码渲染的小表格，有自己的全局样式（app/globals.css），
 * 不套正文表格规则，避免把它的单元格对齐改掉。
 */
.news-theme .wrapper .content .html table:not(.article-body) {
  width: 100%;
  max-width: 100%;
  margin: 14px 0;
  border-collapse: collapse;
}
.news-theme .wrapper .content .html table:not(.article-body) :is(td, th) {
  padding: 8px 10px;
  border: 1px solid #d5dde6;
  vertical-align: top;
}
.news-theme .wrapper .content .html table:not(.article-body) th {
  background: #f4f7fb;
  font-weight: 600;
  text-align: left;
}
.news-theme .wrapper .content .html table:not(.article-body) :is(td, th) p { margin: 0.25em 0; }
.news-theme .wrapper .content .html table:not(.article-body) :is(td, th) > p:first-child { margin-top: 0; }
.news-theme .wrapper .content .html table:not(.article-body) :is(td, th) > p:last-child { margin-bottom: 0; }
/* 旧版 .html-table 包裹的表格（如技术研发的专利清单）已有自己的版式，不叠加正文表格的上下外边距 */
.news-theme .wrapper .content .html .html-table table { margin: 0; }

/* ---- 分隔线 / 链接 / 图片 ---- */
.news-theme .wrapper .content .html hr {
  margin: 1.4em 0;
  border: 0;
  border-top: 1px solid #dee2e6;
}
/* 只给正文里的链接加下划线/链接色：.test-mine 等旧版宫格的 <a> 是整块卡片入口，
 * 不是正文链接，加下划线会破坏原有视觉。 */
.news-theme .wrapper .content .html :is(p, h1, h2, h3, h4, h5, h6, td, th) a {
  color: #1d4e89;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* 旧版的正文图片都包在 <p> 里（页面 CSS 已有样式），新版编辑器直接输出裸 <img>，这里兜住版式 */
.news-theme .wrapper .content .html > img,
.news-theme .wrapper .content .html .html-fragment > img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 18px auto 9px;
}

/* ---- 右上角账号入口：邮箱 + 头像整体可点，下拉面板与站点卡片风格统一 ---- */
.header .wrapper .menu .top .login-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  margin-top: 17px;
  background-image: none;
}

.header .wrapper .menu .top .login-menu > .login-email {
  display: inline-block;
  position: static;
  width: auto;
  height: auto;
  color: #8d8d8d;
  font-size: 14px;
  line-height: 24px;
  cursor: pointer;
  transition: color .15s ease;
}

.header .wrapper .menu .top .login-menu:hover > .login-email {
  color: #4388ef;
}

.header .wrapper .menu .top .login-menu > .login-avatar {
  display: block;
  position: static;
  width: 26px;
  height: 25px;
  cursor: pointer;
  background-image: url(../images/icon.png);
  background-repeat: no-repeat;
  background-position: -163px -35px;
}

.header .wrapper .menu .top .login-menu:not(.logged) > .login-avatar {
  background-position: -163px -3px;
}

.header .wrapper .menu .top .login-menu > .panel {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  bottom: auto;
  left: auto;
  z-index: 20;
  width: 184px;
  height: auto;
  margin: 0;
  padding: 0;
}

.header .wrapper .menu .top .login-menu.open > .panel {
  display: block;
}

.header .wrapper .menu .top .login-menu > .panel ul {
  position: relative;
  padding: 6px;
  border: 1px solid #e5eaf2;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(20, 35, 70, .14);
}

.header .wrapper .menu .top .login-menu > .panel ul li {
  height: auto;
}

.header .wrapper .menu .top .login-menu > .panel ul li a {
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  color: #3d4653;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  transition: background-color .15s ease, color .15s ease;
}

.header .wrapper .menu .top .login-menu > .panel ul li a:hover {
  background: #f2f7ff;
  color: #2f6fd0;
}

.header .wrapper .menu .top .login-menu > .panel ul li.last:before {
  position: static;
  display: block;
  width: auto;
  height: 0;
  margin: 6px 8px;
  border-top: 1px solid #eef1f6;
}

/* 下拉面板：与触发区之间的 14px 间隙用透明区域桥接，避免鼠标移入时 hover 丢失 */
.header .wrapper .menu .top .login-menu > .panel:before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.header .wrapper .menu .top .login-menu.open > .panel {
  animation: login-menu-in .16s ease-out both;
}

@keyframes login-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- 密码框：大写锁定提示 ---- */
/*
 * macOS / iOS Safari 会在密码框内绘制浏览器自带的大写锁定图标
 * （input::-webkit-caps-lock-indicator）。图标由 WebKit 绘制、不受页面 CSS 控制：
 * 开启大写锁定时它挤在输入框右内侧，和自动填充的钥匙图标
 * （input::-webkit-credentials-auto-fill-button）叠在一起，WebKit 还存在位置错位的
 * 已知问题，所以看起来像样式坏了。这里隐藏原生图标，改由表单输出可统一控制的
 * .caps-tip 提示（检测逻辑见 components/main/auth-forms.tsx 的 useCapsLock）。
 * 隐藏用 visibility/position 兜底：shadow DOM 里的行内样式带 !important，display 不一定压得住。
 */
input::-webkit-caps-lock-indicator {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
}

/* 提示放在输入框上方的字段间距里（绝对定位，出现/消失不撑高表单），
   不与下方「忘记密码」和错误提示抢位置。 */
.form-item .caps-tip {
  position: absolute;
  top: -22px;
  right: 6px;
  z-index: 2;
  padding: 0 6px;
  border: 1px solid #ffd8a8;
  border-radius: 9px;
  background: #fff7e6;
  color: #b25b00;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  pointer-events: none;
}