/* ============================================================
   light.css — Light Reading Skin (overrides base + style)
   摩尔线程GPU学习中心 — 2026-08-12
   ------------------------------------------------------------
   Replaces the former glass.css glassmorphism layer.
   Principles: warm-white page, white content planes, hairline
   borders, one teal accent, zero gradients, zero glow.
   ============================================================ */

/* ---------- Page canvas ---------- */
body {
  background: var(--bg-base);
  position: relative;
}

/* No decorative pattern layers behind text */
.circuit-bg::before,
.circuit-bg::after,
.circuit-dots::before {
  display: none !important;
}

/* ---------- Typography rhythm ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

/* Latin-only micro labels stay in a sans face for legibility at 12–13px */
.code-block-lang,
.nav-mini-badge,
.hero-stat-label {
  font-family: var(--font-latin);
}

/* ---------- Header ---------- */
.site-header {
  background: var(--bg-surface-1);
  border-bottom: 1px solid var(--border-default);
  box-shadow: 0 1px 2px rgba(27, 26, 24, 0.04);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.logo-link { letter-spacing: 0.02em; }
.logo-svg { color: var(--text-primary); }

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--bg-surface-2);
  border-right: 1px solid var(--border-default);
}
.nav-section { background: transparent; }
.nav-module-header {
  color: var(--text-primary);
  border-radius: var(--radius-md);
}
.nav-module-header:hover { background: var(--bg-hover); }
.nav-module-header.active { color: var(--brand-primary-dark); }
.nav-lesson-link {
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}
.nav-lesson-link:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.nav-lesson-link.active {
  background: var(--bg-active);
  color: var(--brand-primary-dark);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand-primary);
}

/* ---------- Search ---------- */
.search-box input {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-family: var(--font-serif);
  backdrop-filter: none;
}
.search-box input:focus {
  background: var(--bg-surface-1);
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(13, 125, 116, 0.18);
}
.search-results {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
}
.search-result-item .sr-module { color: var(--brand-primary-dark); }

/* ---------- Hero ---------- */
.hero-section {
  background: var(--bg-surface-1);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}
.hero-badge {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  color: var(--brand-primary-dark);
  box-shadow: none;
}
.hero-title {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text-primary);
  filter: none;
  letter-spacing: 0.01em;
}
.hero-subtitle { color: var(--text-secondary); }

.hero-stats {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  box-shadow: none;
}
.hero-stat-num {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--brand-primary-dark);
  font-weight: 700;
}
.hero-stat-label {
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ---------- Buttons ---------- */
.btn { font-family: var(--font-serif); }
.btn-primary {
  background: var(--brand-primary);
  color: #ffffff;
  border: 1px solid var(--brand-primary);
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}
.btn-outline,
.btn-secondary {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  backdrop-filter: none;
}
.btn-outline:hover,
.btn-secondary:hover {
  background: var(--bg-surface-2);
  border-color: var(--brand-primary);
  color: var(--brand-primary-dark);
}

/* ---------- Cards ---------- */
.module-card,
.update-card,
.recent-update-card,
.product-card,
.quick-link-card,
.link-card,
.stat-card {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  backdrop-filter: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.module-card:hover,
.update-card:hover,
.recent-update-card:hover,
.product-card:hover,
.quick-link-card:hover,
.link-card:hover {
  transform: none;
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-md);
}
.module-card::before,
.module-card::after { display: none; }

.module-card-icon,
.module-icon,
.link-card-icon {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  box-shadow: none;
}
.module-card-title { color: var(--text-primary); }
.module-card-desc,
.recent-update-desc,
.link-card-url { color: var(--text-secondary); }

/* ---------- Home sections ---------- */
/* The recent-updates section is a direct child of .main-content and had no
   horizontal padding; give it the same gutter as the other home sections and
   left-align its long intro paragraph so it reads as prose, not as a caption. */
.recent-updates {
  padding: var(--space-12) var(--space-8) var(--space-16);
}
.recent-updates .section-subtitle {
  text-align: left;
  max-width: 72ch;
  margin-bottom: var(--space-4);
  line-height: var(--line-height-relaxed);
}
.recent-updates .recent-updates-header .section-title { text-align: left; }

/* ---------- Roadmap ---------- */
.roadmap-node-circle {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-default);
}
.roadmap-connector {
  background: var(--border-strong);
  box-shadow: none;
}

/* ---------- Lesson body ---------- */
.lesson-content p,
.lesson-content li {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--line-height-relaxed);
}
/* The article column itself (--content-max-width) sets the measure:
   ~840px of text at 17px CJK ≈ 49 characters per line. */
.lesson-content h2 {
  border-bottom: 1px solid var(--border-default);
}
.lesson-content em {
  color: var(--brand-primary-dark);
  font-style: normal;
  font-weight: 600;
}

/* ---------- Alerts ---------- */
.alert-box {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: none;
  backdrop-filter: none;
}
.alert-box::before { display: none; }
.alert-box-title { font-weight: 700; }
.alert-info {
  background: var(--alert-info-bg);
  border-color: rgba(29, 78, 216, 0.25);
  border-left-color: var(--alert-info-border);
  color: var(--alert-info-text);
}
.alert-warning {
  background: var(--alert-warning-bg);
  border-color: rgba(183, 121, 31, 0.28);
  border-left-color: var(--alert-warning-border);
  color: var(--alert-warning-text);
}
.alert-tip, .alert-success {
  background: var(--alert-tip-bg);
  border-color: rgba(18, 128, 90, 0.25);
  border-left-color: var(--alert-tip-border);
  color: var(--alert-tip-text);
}
.alert-danger {
  background: var(--alert-danger-bg);
  border-color: rgba(192, 38, 38, 0.25);
  border-left-color: var(--alert-danger-border);
  color: var(--alert-danger-text);
}
.alert-box-text,
.alert-box p,
.alert-box li { color: inherit; }
.alert-box a { color: inherit; text-decoration: underline; }

/* ============================================================
   Code — JetBrains Mono on a light, high-contrast canvas
   ============================================================ */
pre, pre[class*="language-"] {
  background: var(--bg-code);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: none;
  backdrop-filter: none;
  margin: var(--space-5) 0;
  padding: var(--space-4);
  overflow-x: auto;
  color: #1b1a18;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: 1.75;
  tab-size: 2;
}
pre::before, pre[class*="language-"]::before { content: none; }

pre code,
pre code[class*="language-"] {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-family: var(--font-mono);
  font-size: inherit;
  text-shadow: none;
  white-space: pre;
}

/* Inline code — teal-tinted chip, dark text, always ≥ 7:1 */
code:not(pre code),
.lesson-content code:not(pre code) {
  background: #f0f3f2;
  border: 1px solid rgba(13, 125, 116, 0.22);
  color: #0a5b54;
  padding: 0.1em 0.38em;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.875em;
  white-space: nowrap;
}

/* Code block chrome (wrapper emitted by app.js) */
.code-block-wrapper {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-code);
  overflow: hidden;
}
.code-block-header {
  background: var(--bg-code-header);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-muted);
}
.code-block-wrapper pre {
  border: none;
  border-radius: 0;
  margin: 0;
  background: var(--bg-code);
}
.copy-btn {
  border: 1px solid var(--border-default);
  background: var(--bg-surface-1);
  color: var(--text-secondary);
  font-family: var(--font-latin);
}
.copy-btn:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary-dark);
}
.copy-btn.copied {
  border-color: var(--status-ok);
  color: var(--status-ok);
}

/* ---------- Prism token colours (light, AA on #f7f7f5) ----------
   Self-contained: no dark Prism theme is loaded. Contrast ratios
   below are measured against the --bg-code canvas. */
code[class*="language-"],
pre[class*="language-"] {
  color: #1b1a18;
  text-shadow: none;
  background: none;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata        { color: #5f6b62; font-style: italic; }  /* 5.6:1 */
.token.punctuation  { color: #3f4a44; }                       /* 9.7:1 */
.token.namespace    { opacity: 0.85; }
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted      { color: #9a4b00; }                       /* 5.6:1 */
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted     { color: #0f6b3f; }                       /* 5.7:1 */
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string { color: #565f59; background: none; }
.token.atrule,
.token.attr-value,
.token.keyword      { color: #8a2a86; font-weight: 500; }     /* 7.0:1 */
.token.function,
.token.class-name   { color: #1546b8; }                       /* 7.2:1 */
.token.regex,
.token.important,
.token.variable     { color: #a13b12; }
.token.important,
.token.bold         { font-weight: 700; }
.token.italic       { font-style: italic; }

/* ---------- Tables ---------- */
table, .comparison-table {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: none;
  backdrop-filter: none;
  border-collapse: collapse;
  width: 100%;
  font-size: var(--text-sm);
}
thead {
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--border-default);
}
th {
  color: var(--text-primary);
  font-weight: 700;
  text-align: left;
  letter-spacing: 0.01em;
}
td { color: var(--text-secondary); }
tbody tr:not(:last-child) { border-bottom: 1px solid var(--border-subtle); }
tbody tr:hover { background: var(--bg-surface-2); }
.table-wrapper {
  overflow-x: auto;
  max-width: 100%;
  margin: var(--space-6) 0;
  border-radius: var(--radius-md);
}
.table-wrapper table { margin: 0; min-width: 100%; width: auto; }
/* Cells may hold inline code, which is nowrap by default — allow wrapping
   inside tables so narrow columns stay readable. */
.lesson-content td code:not(pre code),
.lesson-content th code:not(pre code) { white-space: normal; }

/* ---------- TOC ---------- */
.lesson-toc,
.toc, .toc-container, .table-of-contents {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: none;
  backdrop-filter: none;
}
.toc-title { color: var(--text-muted); }
.toc-item a {
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.toc-item a:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.toc-item a.active,
.toc-link.active {
  color: var(--brand-primary-dark);
  background: var(--bg-active);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--brand-primary);
}

/* ---------- Prev / next ---------- */
.lesson-nav-btn {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}
.lesson-nav-btn:hover {
  border-color: var(--brand-primary);
  background: var(--bg-surface-2);
  text-decoration: none;
}
.lesson-nav-label { color: var(--text-muted); }

/* ---------- Badges: shape + label, never colour alone ---------- */
.difficulty-tag, .lesson-difficulty,
.badge-beginner, .badge-intermediate, .badge-advanced,
.tag-new, .tag-updated, .nav-mini-badge {
  backdrop-filter: none;
  border: 1px solid var(--border-default);
  box-shadow: none;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nav-mini-badge.new, .tag-new {
  background: rgba(13, 125, 116, 0.10);
  border-color: rgba(13, 125, 116, 0.35);
  color: var(--brand-primary-dark);
  box-shadow: none;
}
.nav-mini-badge.updated, .tag-updated {
  background: rgba(29, 78, 216, 0.08);
  border-color: rgba(29, 78, 216, 0.30);
  color: #1e40af;
  box-shadow: none;
}
.date-badge { color: var(--text-muted); }

/* ---------- Divider ---------- */
hr {
  border: none;
  height: 1px;
  background: var(--border-default);
  margin: var(--space-8) 0;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

/* ---------- Legacy `.coming-soon` collision fix ----------
   style.css declares `.coming-soon` as a full-page placeholder,
   but the same class is used on inline status pills; reset the
   pill back to inline-block. */
.nav-lesson-link .lesson-status.coming-soon,
.lesson-status.coming-soon {
  display: inline-block !important;
  flex-direction: initial !important;
  align-items: initial !important;
  justify-content: initial !important;
  padding: 2px 8px !important;
  text-align: initial !important;
  background: var(--bg-surface-3);
  color: var(--text-muted);
  border-radius: 999px;
  font-size: var(--text-xs);
}

/* ---------- Lesson layout: keep article clear of the fixed TOC ---------- */
.main-content,
.lesson-page { min-width: 0; }
.lesson-main {
  min-width: 0;
  margin-left: 0;
  margin-right: auto;
}
.lesson-content {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 1280px) {
  .lesson-main {
    margin-right: auto;
    max-width: 100%;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (max-width: 768px) {
  .hero-stats { padding: var(--space-4); }
  pre, pre[class*="language-"] { font-size: 0.8125rem; }
  code:not(pre code) { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}