/* =========================================================
   主题：oracle —— 暖中性阶梯 / 企业级克制
   规则来源：DESIGN-oracle.md
   - 六级暖中性承载几乎所有表面，靠色阶而非阴影区分区域
   - 红色只出现在字标；所有动作使用炭黑，按钮圆角 4px
   - 双字体寄存器：门户用无衬线 300，内容页用 Georgia 衬线
   - 唯一装饰是标题下的 40×4 金色标尺
   ========================================================= */

:root {
  /* 中性阶梯 */
  --canvas: #ffffff;
  --canvas-soft: #fbf9f8;
  --canvas-tint: #f5f4f2;
  --canvas-warm: #f1efed;
  --hairline: #e4e1dd;
  --divider: #e9e7e4;
  --field: #d4cfca;

  /* 文字与动作 */
  --ink: #161513;
  --ink-deep: #211e1c;
  --action: #312d2a;
  --action-pressed: #47423e;
  --on-primary: #ffffff;
  --muted: #6b6660;
  --disabled: #aea8a2;

  /* 唯一的有彩色 */
  --brand: #c74634;
  --gold: #f0cc71;
  --gold-soft: #f7e0a1;
  --link: #006b8f;
  --focus: #227e9e;
  --error: #d63b25;
  --teal-band: #d6e5e5;
  --forest-band: #33553c;

  /* 映射到结构层变量 */
  --bg: var(--canvas);
  --surface: var(--canvas);
  --surface-2: var(--canvas-tint);
  --surface-3: var(--canvas-warm);
  --line: var(--hairline);
  --line-soft: var(--divider);
  --accent: var(--link);
  --accent-weak: color-mix(in oklab, var(--ink) 6%, transparent);
  --accent-weaker: color-mix(in oklab, var(--ink) 3%, transparent);
  --danger: var(--error);

  /* 系统没有阴影 */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --radius: 8px;

  --sans: "Inter", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  --serif: Georgia, "Songti SC", "STSong", "SimSun", serif;
  --mono: Consolas, "SF Mono", Menlo, "Liberation Mono", monospace;

  /* 版式尺寸：适配文档壳 */
  --topbar: 72px;
  --sidebar-w: 296px;
  --toc-w: 232px;
  --content-w: 800px;
}

[data-theme="dark"] {
  --canvas: #161513;
  --canvas-soft: #1b1816;
  --canvas-tint: #211e1c;
  --canvas-warm: #2a2622;
  --hairline: #37312c;
  --divider: #2c2723;
  --field: #4a443f;

  --ink: #f5f2ee;
  --ink-deep: #0f0e0c;
  --action: #f1efed;
  --action-pressed: #ffffff;
  --on-primary: #161513;
  --muted: #a8a199;
  --disabled: #6f6862;

  --brand: #e05a49;
  --link: #7fc0d8;
  --error: #e08a7f;
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 400;
}

::selection {
  background: var(--gold-soft);
  color: var(--ink);
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

/* ---------------- 报头 ---------------- */

.topbar {
  height: var(--topbar);
  padding: 0 24px;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 4px;
  background: var(--brand);
  color: #fff;
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  transform: none;
  box-shadow: none;
}

.brand-text {
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

.crumb-sep {
  color: var(--field);
}

.crumb-link {
  color: var(--ink-2);
  font-size: 14px;
}

.icon-btn {
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--ink-2);
}

.icon-btn:hover {
  background: var(--canvas-tint);
  border-color: var(--hairline);
  color: var(--ink);
}

.switch-menu {
  width: 260px;
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--canvas);
  box-shadow: none;
}

.switch-item {
  padding: 9px 10px;
  border-radius: 4px;
  color: var(--ink-2);
  font-size: 14px;
}

.switch-item:hover {
  background: var(--canvas-soft);
}

.switch-item.is-active {
  background: var(--canvas-tint);
  color: var(--ink);
  font-weight: 600;
}

.switch-item .dot {
  display: none;
}

.switch-item em {
  color: var(--muted);
  font-size: 12px;
}

/* ---------------- 应用外壳侧栏 ---------------- */

.sidebar {
  padding: 20px 8px 0 20px;
  background: var(--canvas-soft);
  border-right: 1px solid var(--hairline);
}

.side-home {
  padding: 2px 6px 14px;
}


.side-name {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}

.nav-filter input {
  height: 34px;
  padding: 0 34px 0 11px;
  border: 1px solid var(--field);
  border-radius: 6px;
  background: var(--canvas);
  font-size: 13px;
}

.nav-filter input:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--focus) 22%, transparent);
}

.nav-filter kbd {
  border-color: var(--hairline);
  background: var(--canvas-tint);
  color: var(--muted);
  font-family: var(--sans);
}

.nav-root,
.nav-sub {
  border: 0;
}

.nav-sub {
  margin-left: 8px;
  padding-left: 10px;
  border-left: 1px solid var(--divider);
}

.nav-item > a {
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
}

.nav-item > a:hover {
  background: var(--canvas-tint);
  color: var(--ink);
}

.nav-item.is-active > a {
  background: var(--canvas-warm);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--action);
}

.nav-group > details > summary {
  padding: 6px 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.nav-group > details > summary:hover {
  background: var(--canvas-tint);
  color: var(--ink-2);
}

.nav-count {
  color: var(--disabled);
  font-size: 11px;
  font-weight: 400;
}

.side-foot {
  padding: 12px 8px;
  border-top: 1px solid var(--divider);
  color: var(--muted);
  font-size: 12px;
}

.side-foot a {
  color: var(--muted);
}

/* ---------------- 页面头部 ---------------- */

.breadcrumb {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
}

.page-head h1 {
  margin: 0 0 18px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
}

/* 系统唯一的装饰：40×4 金色标尺 */
.page-head h1::after {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  margin-top: 18px;
  background: var(--gold);
}

.lead {
  margin: 0 0 24px;
  padding: 24px 28px;
  border: 0;
  border-radius: 0;
  background: var(--canvas-warm);
  color: var(--ink-2);
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0;
  transform: none;
  box-shadow: none;
}

.lead::before {
  display: none;
}

.page-meta {
  gap: 16px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
}

/* ---------------- 正文 ---------------- */

.prose {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0;
}

.prose p {
  margin: 0 0 20px;
}

.prose h2 {
  margin: 48px 0 18px;
  padding: 0;
  border-top: 0;
  background: none;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
}

.prose h3 {
  margin: 36px 0 12px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
}

.prose h4 {
  margin: 28px 0 10px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}

.prose h5,
.prose h6 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0;
}

.prose .anchor {
  color: var(--disabled);
  font-weight: 400;
}

.prose strong {
  color: var(--ink);
  font-weight: 700;
}

.prose a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 0.16em;
}

.prose a:hover {
  text-decoration: underline;
}

.prose ul,
.prose ol {
  margin: 0 0 20px;
  padding-left: 24px;
}

.prose li {
  margin: 8px 0;
}

.prose li::marker {
  color: var(--muted);
}

.prose hr {
  height: 0;
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--divider);
  background: none;
}

.prose blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  border: 0;
  border-left: 2px solid var(--divider);
  border-radius: 0;
  background: var(--canvas-soft);
  color: var(--ink-2);
}

.prose code {
  padding: 2px 5px;
  border: 0;
  border-radius: 4px;
  background: var(--canvas-tint);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.86em;
}

.sref {
  border-bottom: 1px dotted var(--field);
}

.sref code {
  background: transparent;
}

.xref-dead {
  border-bottom: 2px wavy var(--error);
  color: var(--muted);
}

/* ---------------- 代码块 ---------------- */

.code-block {
  margin: 24px 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--canvas-soft);
  overflow: hidden;
}

.code-head {
  height: 34px;
  padding: 0 10px 0 14px;
  border-bottom: 1px solid var(--hairline);
  background: var(--canvas-tint);
}

.code-lang {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.code-copy {
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
}

.code-copy:hover {
  border-color: var(--hairline);
  background: var(--canvas);
  color: var(--ink-2);
}

.code-block pre {
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
}

.code-block pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

/* ---------------- 表格 ---------------- */

.table-wrap {
  margin: 24px 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--canvas);
}

.prose table {
  font-size: 14.5px;
  line-height: 1.55;
}

.prose th,
.prose td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--divider);
}

.prose th {
  background: var(--canvas-tint);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.prose tbody tr:last-child td {
  border-bottom: 0;
}

.prose tbody tr:hover {
  background: var(--canvas-soft);
}

/* ---------------- 图表 ---------------- */

.diagram {
  margin: 28px 0;
  padding: 20px 18px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--canvas);
  box-shadow: none;
}

.diagram::before,
.diagram::after {
  display: none;
}

.diagram-zoom {
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--canvas);
  color: var(--muted);
  box-shadow: none;
}

.diagram-zoom:hover {
  border-color: var(--ink-2);
  color: var(--ink);
  transform: none;
  box-shadow: none;
}

/* ---------------- 页内目录 ---------------- */

.toc {
  padding-top: 46px;
}

.toc-title {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.toc-list {
  border-left: 1px solid var(--divider);
}

.toc-list a {
  padding: 5px 0 5px 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
}

.toc-list a:hover {
  color: var(--ink-2);
  text-decoration: none;
}

.toc-list a.is-active {
  border-left: 1px solid var(--action);
  background: none;
  color: var(--ink);
  font-weight: 600;
}

.toc-list .toc-l3 a {
  padding-left: 26px;
  font-size: 12.5px;
}

/* ---------------- 翻页与页脚 ---------------- */

.pager {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--divider);
}

.pager-link {
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--canvas);
  box-shadow: none;
}

.pager-link:hover {
  border-color: var(--field);
  background: var(--canvas-soft);
  transform: none;
}

.pager-dir {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
}

.pager-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}

.footer {
  background: var(--canvas);
  border-top: 1px solid var(--hairline);
}

.footer-inner {
  min-height: 76px;
  padding: 24px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
}

.footer code {
  font-size: 11.5px;
  color: var(--muted);
}

/* ---------------- 门户：企业索引 ---------------- */

/* 门户改为整页流：hero 用百分比内边距出血，避免 vw 与滚动条宽度冲突 */
body[data-kind="portal"] .shell {
  display: block;
  padding: 0;
}

body[data-kind="portal"] .main {
  width: 100%;
  max-width: none;
  padding: 0 0 48px;
}

.hero {
  padding: 56px max(28px, calc((100% - 1080px) / 2)) 44px;
  border-bottom: 0;
  background: var(--canvas-warm);
}


/* 企业索引使用无衬线轻体，与内容页的衬线形成两个寄存器 */
.hero h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 44px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0;
}

.hero h1::after {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  margin-top: 22px;
  background: var(--gold);
}





.cards {
  gap: 32px;
  margin: 48px 0;
  padding-inline: max(28px, calc((100% - 1080px) / 2));
}

.card {
  padding: 32px;
  border: 1px solid var(--hairline);
  border-radius: 15px;
  background: var(--canvas);
  box-shadow: none;
  transform: none;
}

.card::before {
  display: none;
}

.card:hover {
  border-color: var(--field);
  box-shadow: none;
  transform: none;
}




.card h2 {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.33;
  letter-spacing: 0;
}

.card h2 a {
  color: var(--ink);
}

.card p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}




.card-links {
  gap: 10px;
}

.btn {
  height: auto;
  padding: 10px 16px;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: none;
}

.btn:hover {
  transform: none;
  box-shadow: none;
}

.btn.primary {
  border: 1px solid var(--action);
  background: var(--action);
  color: var(--on-primary);
}

.btn.primary:hover {
  background: var(--action-pressed);
  border-color: var(--action-pressed);
  filter: none;
}

.btn.outline {
  border: 1px solid var(--field);
  background: transparent;
  color: var(--ink);
}

.btn.outline:hover {
  border-color: var(--action);
  background: var(--canvas-tint);
  color: var(--ink);
}



.about {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 0 8px;
  border-top: 1px solid var(--divider);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.about p {
  max-width: 78ch;
}

.about h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
}

.about code {
  border: 0;
  border-radius: 4px;
  background: var(--canvas-tint);
}

/* ---------------- 灯箱 ---------------- */

.lightbox {
  background: color-mix(in oklab, #161513 72%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.lightbox-bar {
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
}

.lightbox-title {
  color: var(--muted);
}

.lightbox-btn {
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--canvas);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 12px;
}

.lightbox-btn:hover {
  background: var(--canvas-tint);
}

.lightbox-btn.is-active {
  border-color: var(--ink-2);
  background: var(--canvas-tint);
  color: var(--ink);
}

.lightbox-stage {
  padding: 32px;
  background: var(--canvas-warm);
}

.lightbox-canvas {
  padding: 20px;
  border: 0;
  border-radius: 0;
  background: var(--canvas);
  box-shadow: none;
}

/* ---------------- 细节 ---------------- */

.read-progress {
  height: 2px;
  background: var(--action);
  opacity: 1;
}

.nav-scroll::-webkit-scrollbar-thumb {
  background: var(--hairline);
  border-color: var(--canvas-soft);
}

@media (max-width: 1140px) {
  .about {
    margin: 0 28px;
  }
}

@media (max-width: 560px) {
  .page-head h1 {
    font-size: 30px;
  }

  .prose h2 {
    font-size: 24px;
  }

}

@media (max-width: 900px) {
  :root {
    --topbar: 64px;
  }

  .sidebar {
    background: var(--canvas);
  }

  .hero {
    padding: 40px 28px 32px;
  }

  .about {
    margin: 0 28px;
  }

  .hero h1 {
    font-size: 34px;
  }
}

@media print {
  .hero {
    padding: 0;
    background: none;
  }
}