/* Learning AI Quality 子站。独立视觉系统，不继承博客主站的 base.css。
   配色与 static/learning-ai-quality/ 下的互动演示一致：冷灰蓝工程图纸底 + 钴蓝信号色。 */

:root {
  --laq-page: #e4e9ef;
  --laq-grid: #d8dee6;
  --laq-panel: #f4f6f9;
  --laq-paper: #fbfcfd;
  --laq-ink: #151b26;
  --laq-sub: #5a6577;
  --laq-line: #c3ccd7;
  --laq-faint: #dde3ea;
  --laq-signal: #2f4bd8;
  --laq-pass: #0e9f7e;
  --laq-alpha: #b87d00;
  --laq-font: "IBM Plex Sans", -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --laq-code: "SFMono-Regular", Menlo, Consolas, monospace;
  --laq-max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

body.laq {
  margin: 0;
  color: var(--laq-ink);
  background-color: var(--laq-page);
  background-image:
    linear-gradient(var(--laq-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--laq-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  font-family: var(--laq-font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.laq a { color: var(--laq-signal); text-underline-offset: 0.2em; }
.laq :focus-visible { outline: 2px solid var(--laq-signal); outline-offset: 3px; }
.laq ::selection { color: var(--laq-paper); background: var(--laq-signal); }

/* ---------- 顶栏 ---------- */
.laq-topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgb(244 246 249 / 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--laq-line);
}
.laq-topbar__inner {
  max-width: var(--laq-max); margin: 0 auto; padding: 12px 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.laq-topbar__brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--laq-ink) !important; font-weight: 650; text-decoration: none; letter-spacing: -0.01em;
}
.laq-topbar__brand::before { content: ""; width: 10px; height: 10px; background: var(--laq-signal); }
.laq-topbar__back { color: var(--laq-sub) !important; font-size: 14px; text-decoration: none; }
.laq-topbar__back:hover { color: var(--laq-signal) !important; }

.laq-main { max-width: var(--laq-max); margin: 0 auto; padding: 56px 24px 80px; }

/* ---------- 面板 ---------- */
.laq-panel {
  position: relative;
  background: var(--laq-panel);
  border: 1px solid var(--laq-line);
  border-radius: 6px;
  padding: 22px 24px 24px;
}
.laq-panel::before, .laq-panel::after {
  content: ""; position: absolute; width: 10px; height: 10px; border: 0 solid var(--laq-ink);
}
.laq-panel::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-top-left-radius: 6px; }
.laq-panel::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-bottom-right-radius: 6px; }
.laq-panel__title { font-size: 15px; font-weight: 650; margin: 0 0 14px; color: var(--laq-sub); }

/* ---------- 首页大标题与进度条 ---------- */
.laq-hero { margin-bottom: 40px; }
.laq-hero__title {
  font-size: clamp(48px, 8.5vw, 112px); line-height: 0.95; font-weight: 600;
  letter-spacing: -0.04em; margin: 0 0 22px;
}
.laq-hero__lede { font-size: clamp(17px, 1.8vw, 21px); color: var(--laq-sub); max-width: 46ch; margin: 0 0 32px; }

.laq-meter { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.laq-meter__cell { display: grid; gap: 2px; align-content: start; }
.laq-meter__bar { display: block; height: 8px; background: var(--laq-faint); border: 1px solid var(--laq-line); margin-bottom: 8px; }
.laq-meter__cell.is-doing .laq-meter__bar { background: linear-gradient(90deg, var(--laq-signal) 50%, var(--laq-faint) 50%); border-color: var(--laq-signal); }
.laq-meter__cell.is-done .laq-meter__bar { background: var(--laq-pass); border-color: var(--laq-pass); }
.laq-meter__week { font-size: 12px; color: var(--laq-sub); font-variant-numeric: tabular-nums; }
.laq-meter__topic { font-size: 15px; font-weight: 600; line-height: 1.35; }
.laq-meter__status { font-size: 12px; color: var(--laq-sub); }
.laq-meter__cell.is-doing .laq-meter__status { color: var(--laq-signal); font-weight: 600; }
.laq-meter__cell.is-done .laq-meter__status { color: var(--laq-pass); font-weight: 600; }

/* ---------- 序文页：目录 + 正文 ---------- */
.laq-index { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; }
.laq-index__preface { padding: 28px 36px 36px; }
.laq-index__preface .laq-prose { max-width: 68ch; }

/* ---------- 章节目录 ---------- */
.laq-chapters { list-style: none; margin: 0; padding: 0; }
.laq-chapters li + li { border-top: 1px solid var(--laq-faint); }
.laq-chapters a {
  display: grid; grid-template-columns: 34px 1fr; column-gap: 8px;
  padding: 12px 10px 12px 12px; margin: 0 -10px 0 -12px;
  color: var(--laq-ink); text-decoration: none; border-left: 3px solid transparent;
}
.laq-chapters a:hover { background: var(--laq-paper); }
.laq-chapters .is-current a { border-left-color: var(--laq-signal); background: var(--laq-paper); }
.laq-chapters__n { grid-row: span 2; color: var(--laq-signal); font-weight: 600; font-variant-numeric: tabular-nums; }
.laq-chapters__t { font-weight: 600; line-height: 1.45; }
.laq-chapters__d { grid-column: 2; font-size: 13px; color: var(--laq-sub); line-height: 1.5; }

/* ---------- 章节阅读页 ---------- */
.laq-reader { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 32px; align-items: start; }
.laq-reader__side { position: sticky; top: 76px; display: grid; gap: 16px; }
.laq-reader__onpage ul { list-style: none; margin: 0; padding: 0; }
.laq-reader__onpage li { margin: 0; }
.laq-reader__onpage a { display: block; padding: 4px 0; font-size: 14px; color: var(--laq-sub); text-decoration: none; }
.laq-reader__onpage a:hover { color: var(--laq-signal); }

.laq-reader__article {
  background: var(--laq-paper); border: 1px solid var(--laq-line); border-radius: 6px;
  padding: 40px 48px 32px; min-width: 0;
}
.laq-article-head { border-bottom: 1px solid var(--laq-line); padding-bottom: 24px; margin-bottom: 28px; }
.laq-article-head__n { margin: 0 0 8px; color: var(--laq-signal); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.laq-article-head__title { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 12px; }
.laq-article-head__lede { margin: 0; color: var(--laq-sub); font-size: 17px; max-width: 60ch; }

/* ---------- 正文排版 ---------- */
.laq-prose { font-size: 16.5px; line-height: 1.8; }
.laq-prose > * { max-width: 70ch; }
.laq-prose > table, .laq-prose > .laq-embed, .laq-prose > video, .laq-prose > p > img { max-width: 100%; }
.laq-prose h2 {
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3;
  margin: 44px 0 14px; padding-top: 18px; border-top: 1px solid var(--laq-line);
}
.laq-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.laq-prose h3 { font-size: 18px; font-weight: 600; margin: 28px 0 10px; }
.laq-prose p { margin: 0 0 1em; }
.laq-prose ul, .laq-prose ol { margin: 0 0 1em; padding-left: 1.4em; }
.laq-prose li { margin: 0.3em 0; }
.laq-prose ul li::marker { color: var(--laq-signal); }
.laq-prose ol li::marker { color: var(--laq-signal); font-weight: 600; }
.laq-prose strong { font-weight: 650; }
.laq-prose code { font-family: var(--laq-code); font-size: 0.88em; background: var(--laq-faint); padding: 1px 5px; border-radius: 3px; }
.laq-prose table {
  width: 100%; border-collapse: collapse; margin: 8px 0 24px; font-size: 14.5px; line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.laq-prose th { text-align: left; font-weight: 600; background: var(--laq-faint); padding: 8px 12px; border-bottom: 1px solid var(--laq-line); white-space: nowrap; }
.laq-prose td { padding: 8px 12px; border-bottom: 1px solid var(--laq-faint); vertical-align: top; }
.laq-prose img { display: block; max-width: 100%; height: auto; border: 1px solid var(--laq-line); border-radius: 4px; margin: 8px 0 16px; }
.laq-video { display: block; width: 100%; border: 1px solid var(--laq-line); border-radius: 6px; background: var(--laq-ink); margin: 4px 0 12px; }
.laq-embed { border: 1px solid var(--laq-line); border-radius: 6px; overflow: hidden; margin: 4px 0 10px; background: var(--laq-page); }
.laq-embed iframe { display: block; width: 100%; height: 1150px; border: 0; }
.laq-embed__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 10px 8px 14px; background: var(--laq-panel); border-bottom: 1px solid var(--laq-line);
  font-size: 13.5px; color: var(--laq-sub);
}
.laq-prose a.laq-embed__open {
  flex: none; padding: 5px 12px; border-radius: 3px; background: var(--laq-ink); color: var(--laq-panel);
  font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.laq-prose a.laq-embed__open:hover { background: var(--laq-signal); }
.laq-placeholder {
  border: 1px dashed var(--laq-line); border-radius: 4px; padding: 18px 20px;
  color: var(--laq-sub); background: var(--laq-paper);
}

/* ---------- 上一章 / 下一章 ---------- */
.laq-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--laq-line); }
.laq-pager a {
  display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--laq-line); border-radius: 4px;
  color: var(--laq-ink); text-decoration: none; font-weight: 600;
}
.laq-pager a span { font-size: 12.5px; color: var(--laq-sub); font-weight: 400; }
.laq-pager a:hover { border-color: var(--laq-signal); color: var(--laq-signal); }
.laq-pager__next { grid-column: 2; text-align: right; }

/* ---------- 页脚 ---------- */
.laq-footer { border-top: 1px solid var(--laq-line); background: var(--laq-panel); }
.laq-footer__inner {
  max-width: var(--laq-max); margin: 0 auto; padding: 20px 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--laq-sub);
}

@media (max-width: 960px) {
  .laq-main { padding-top: 36px; }
  .laq-index, .laq-reader { grid-template-columns: 1fr; }
  .laq-reader__side { position: static; }
  .laq-reader__onpage { display: none; }
  .laq-reader__article { padding: 28px 22px; }
  .laq-index__preface { padding: 22px; }
  .laq-meter { grid-template-columns: repeat(4, 1fr); row-gap: 16px; }
  .laq-embed iframe { height: 1700px; }
  .laq-prose table { display: block; overflow-x: auto; }
}