/* TaiGong Docs · Paper knowledge system */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg: #e9e3d8;
  --bg-card: #f7f2e8;
  --bg-elevated: #ddd4c6;
  --bg-hover: #d5cbbb;
  --border: rgba(45, 39, 32, .24);
  --border-hover: rgba(47, 76, 137, .74);
  --text: #211d18;
  --text-secondary: #5f584f;
  --text-muted: #877d70;
  --accent: #304f91;
  --signal-hot: #bd513e;
  --font: "Helvetica Neue", "Hiragino Sans GB", "PingFang SC", "Microsoft YaHei", sans-serif;
  --display: Iowan Old Style, Baskerville, "Noto Serif SC", "Songti SC", serif;
  --mono: "SFMono-Regular", "JetBrains Mono", Consolas, monospace;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1f1e1a;
  --bg-card: #292720;
  --bg-elevated: #38342c;
  --bg-hover: #423d33;
  --border: rgba(235, 226, 207, .2);
  --border-hover: rgba(145, 166, 214, .72);
  --text: #eee7d8;
  --text-secondary: #bdb4a5;
  --text-muted: #8f877b;
  --accent: #91a6d6;
  --signal-hot: #d97a60;
}

html { background: var(--bg); }
body.docs-shell,
body.research-list-page,
body.research-article-page {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 18% 7%, color-mix(in srgb, #fff 18%, transparent), transparent 31%),
    repeating-linear-gradient(3deg, color-mix(in srgb, var(--text) 1.7%, transparent) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(91deg, color-mix(in srgb, var(--text) 1.1%, transparent) 0 1px, transparent 1px 7px);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

body.docs-shell::before,
body.research-list-page::before,
body.research-article-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .22;
  background:
    radial-gradient(circle at 79% 14%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 27%),
    radial-gradient(circle at 12% 72%, color-mix(in srgb, var(--signal-hot) 4%, transparent), transparent 22%);
  mix-blend-mode: multiply;
}

body.docs-shell > *,
body.research-list-page > *,
body.research-article-page > * { position: relative; z-index: 1; }

/* Shared documentation shell */
.docs-shell .nav {
  height: 76px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-card) 91%, transparent);
  box-shadow: 0 10px 30px rgba(62, 51, 39, .05);
  backdrop-filter: blur(16px) saturate(.72);
}
.docs-shell .nav-inner {
  height: 76px;
  max-width: 1440px;
  padding: 0 40px;
}
.docs-shell .nav-logo {
  gap: 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.025em;
}
.docs-shell .nav-logo::after {
  content: "KNOWLEDGE SYSTEM / 2026";
  margin-left: 8px;
  padding-left: 16px;
  border-left: 1px solid var(--border);
  color: var(--text-muted);
  font: 9px/1 var(--font);
  letter-spacing: .14em;
}
.docs-shell .nav-logo svg { color: var(--accent); }
.docs-shell .nav-right { gap: 6px; }
.docs-shell .btn,
.docs-shell .lang-btn,
.docs-shell .icon-btn {
  border-radius: 0;
  box-shadow: none;
}
.docs-shell .btn {
  min-height: 40px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 600;
}
.docs-shell .btn-outline { border-color: var(--text); color: var(--text); }
.docs-shell .btn-primary { background: var(--text); color: var(--bg-card); }
.docs-shell .btn-primary:hover { background: var(--accent); }
.docs-shell .lang-btn,
.docs-shell .icon-btn {
  height: 36px;
  border-color: var(--border);
  background: transparent;
  color: var(--text-secondary);
}
.docs-shell .lang-btn { display: none; }
.docs-shell .icon-btn:hover { border-color: var(--accent); color: var(--accent); }

.docs-shell .layout {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  max-width: 1440px;
  min-height: calc(100vh - 76px);
}
.docs-shell .docs-side {
  top: 76px;
  height: calc(100vh - 76px);
  padding: 48px 32px 80px 40px;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-card) 36%, transparent);
  counter-reset: docs-link;
}
.docs-shell .docs-side h4 {
  margin: 0 0 18px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
}
.docs-shell .docs-side h4:not(:first-child) { margin-top: 46px; }
.docs-shell .docs-nav { border-top: 1px solid var(--border); }
.docs-shell .docs-nav a {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  min-height: 44px;
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  counter-increment: docs-link;
}
.docs-shell .docs-nav a::before {
  content: counter(docs-link, decimal-leading-zero);
  color: var(--text-muted);
  font-size: 8px;
  letter-spacing: .08em;
}
.docs-shell .docs-nav a:hover,
.docs-shell .docs-nav a.active {
  padding-left: 7px;
  color: var(--text);
  background: transparent;
}
.docs-shell .docs-nav a.active::before { color: var(--accent); }
.docs-shell .docs-nav a.active::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -32px;
  width: 2px;
  background: var(--accent);
}

.docs-shell .docs-main {
  width: min(100%, 1060px);
  padding: 92px 72px 140px;
}
.docs-shell .docs-main::before {
  content: "DOCUMENT INDEX / TAI GONG";
  display: block;
  margin-bottom: 30px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .17em;
}
.docs-shell .docs-main h1 {
  max-width: 820px;
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: clamp(48px, 5.4vw, 80px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.065em;
}
.docs-shell .docs-main .lead {
  max-width: 620px;
  margin-bottom: 76px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.85;
}
.docs-shell .prose { max-width: 800px; }
.docs-shell .prose h2 {
  margin: 78px 0 24px;
  padding-top: 22px;
  border-top: 1px solid var(--text);
  font-family: var(--display);
  font-size: 31px;
  font-weight: 500;
  letter-spacing: -.045em;
}
.docs-shell .prose h3 {
  margin: 44px 0 14px;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.025em;
}
.docs-shell .prose p,
.docs-shell .prose li {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.9;
}
.docs-shell .prose a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.docs-shell .prose code,
.docs-shell .mono {
  color: color-mix(in srgb, var(--accent) 74%, var(--text));
  font-family: var(--mono);
  font-size: .88em;
}

.docs-shell .card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 0;
  border-top: 1px solid var(--text);
  counter-reset: doc-card;
}
.docs-shell .card {
  position: relative;
  min-height: 188px;
  padding: 30px 28px 28px 74px;
  border: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  counter-increment: doc-card;
  transition: padding-left .22s ease, background .22s ease;
}
.docs-shell .card:nth-child(2n) { border-right: 0; }
.docs-shell .card::before {
  content: counter(doc-card, decimal-leading-zero);
  position: absolute;
  top: 32px;
  left: 24px;
  color: var(--accent);
  font: 500 17px/1 var(--display);
}
.docs-shell .card::after {
  content: "↗";
  position: absolute;
  right: 24px;
  bottom: 24px;
  color: var(--text-muted);
  font-size: 16px;
}
.docs-shell .card:hover {
  padding-left: 82px;
  background: color-mix(in srgb, var(--accent) 3.5%, transparent);
}
.docs-shell .card h3 {
  margin: 0 0 11px;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -.04em;
}
.docs-shell .card p { max-width: 250px; color: var(--text-secondary); font-size: 12px; line-height: 1.7; }

.docs-shell .doc-table-wrap {
  margin: 30px 0;
  border: 0;
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.docs-shell .doc-table { font-size: 12px; }
.docs-shell .doc-table th,
.docs-shell .doc-table td {
  padding: 15px 14px;
  border-color: var(--border);
  color: var(--text-secondary);
}
.docs-shell .doc-table th { background: transparent; color: var(--text); font-size: 10px; letter-spacing: .08em; }
.docs-shell .callout {
  margin: 28px 0;
  padding: 18px 22px;
  border: 0;
  border-left: 2px solid var(--accent);
  border-radius: 0;
  background: color-mix(in srgb, var(--bg-card) 68%, transparent);
}
.docs-shell .callout.danger { border-color: var(--signal-hot); }
.docs-shell footer.mini,
footer.mini {
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-card) 42%, transparent);
  color: var(--text-muted);
}

/* Research index */
.research-list-page .wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 76px 40px 130px;
}
.research-list-page .top,
.research-article-page .back {
  display: inline-block;
  margin-bottom: 70px;
  padding-bottom: 5px;
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px solid var(--text);
}
.research-list-page h1 {
  max-width: 820px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(58px, 8vw, 110px);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.075em;
}
.research-list-page .research-lead {
  max-width: 500px;
  margin: 28px 0 70px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.8;
}
.research-list-page .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 0;
  border-top: 1px solid var(--text);
  counter-reset: research-item;
}
.research-list-page .card {
  display: grid;
  grid-template-columns: 70px 160px minmax(0, 1fr) 28px;
  gap: 24px;
  align-items: center;
  min-height: 128px;
  padding: 24px 0;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  counter-increment: research-item;
  transition: padding-left .22s ease, color .22s ease;
}
.research-list-page .card::before { content: counter(research-item, decimal-leading-zero); color: var(--accent); font: 500 18px/1 var(--display); }
.research-list-page .card::after { content: "↗"; color: var(--text-muted); font-size: 16px; }
.research-list-page .card:hover { padding-left: 10px; color: var(--accent); }
.research-list-page .research-meta { color: var(--text-muted); font-size: 9px; line-height: 1.6; letter-spacing: .08em; }
.research-list-page .card h3 { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 500; line-height: 1.45; letter-spacing: -.025em; }

/* Research article */
.research-article-page .wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 70px 40px 130px;
}
.research-article-page .meta {
  margin-bottom: 24px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
}
.research-article-page h1 {
  margin: 0 0 70px;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--text);
  font-family: var(--display);
  font-size: clamp(44px, 6.5vw, 76px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.06em;
}
.research-article-page h3 {
  margin: 64px 0 18px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-family: var(--display);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -.035em;
}
.research-article-page p,
.research-article-page li {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 2;
}
.research-article-page p { margin: 0 0 20px; }
.research-article-page li + li { margin-top: 10px; }
.research-article-page strong { color: var(--text); font-weight: 650; }
.research-article-page a { color: var(--accent); }
.research-article-page .doc-table {
  margin: 30px 0;
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--border);
}
.research-article-page .doc-table th,
.research-article-page .doc-table td { padding: 14px; border: 0; border-bottom: 1px solid var(--border); }

@media (max-width: 900px) {
  .docs-shell .nav-inner { padding: 0 20px; }
  .docs-shell .nav-logo::after { display: none; }
  .docs-shell .layout { grid-template-columns: 1fr; }
  .docs-shell .docs-side {
    position: relative;
    top: auto;
    display: block;
    width: 100%;
    height: auto;
    padding: 22px 20px 26px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .docs-shell .docs-side h4 { margin: 0 0 10px; }
  .docs-shell .docs-side h4:not(:first-child),
  .docs-shell .docs-side h4:not(:first-child) + .docs-nav { display: none; }
  .docs-shell .docs-nav { display: flex; overflow-x: auto; border-top: 0; }
  .docs-shell .docs-nav a { display: block; flex: 0 0 auto; min-height: 0; padding: 8px 15px; border: 1px solid var(--border); border-right: 0; font-size: 11px; }
  .docs-shell .docs-nav a:last-child { border-right: 1px solid var(--border); }
  .docs-shell .docs-nav a::before,
  .docs-shell .docs-nav a.active::after { display: none; }
  .docs-shell .docs-nav a:hover,
  .docs-shell .docs-nav a.active { padding-left: 15px; color: var(--accent); }
  .docs-shell .docs-main { padding: 70px 32px 110px; }
  .docs-shell .card-grid { grid-template-columns: 1fr; }
  .docs-shell .card:nth-child(n) { border-right: 0; }
}

@media (max-width: 640px) {
  .docs-shell .nav,
  .docs-shell .nav-inner { height: 68px; }
  .docs-shell .nav-inner { padding: 0 16px; }
  .docs-shell .nav-logo { font-size: 14px; }
  .docs-shell .nav-logo svg { width: 18px; height: 18px; }
  .docs-shell .nav-right .btn-primary { display: none; }
  .docs-shell .btn { padding: 0 10px; font-size: 10px; }
  .docs-shell .docs-main { padding: 58px 18px 90px; }
  .docs-shell .docs-main h1 { font-size: clamp(46px, 15vw, 65px); }
  .docs-shell .docs-main .lead { margin-bottom: 52px; }
  .docs-shell .card { min-height: 150px; padding: 25px 20px 24px 58px; }
  .docs-shell .card::before { left: 15px; }
  .docs-shell .card:hover { padding-left: 62px; }
  .research-list-page .wrap,
  .research-article-page .wrap { padding: 48px 20px 90px; }
  .research-list-page .top,
  .research-article-page .back { margin-bottom: 52px; }
  .research-list-page .card { grid-template-columns: 38px minmax(0, 1fr) 22px; gap: 12px; padding: 22px 0; }
  .research-list-page .research-meta { grid-column: 2; grid-row: 1; }
  .research-list-page .card h3 { grid-column: 2; grid-row: 2; font-size: 19px; }
  .research-list-page .card::before { grid-row: 1 / span 2; }
  .research-list-page .card::after { grid-column: 3; grid-row: 1 / span 2; }
  .research-article-page h1 { margin-bottom: 52px; padding-bottom: 38px; font-size: clamp(42px, 13vw, 58px); }
}