/* agents-with-receipts · 站点共用样式
 *
 * 一份样式，两个渲染面：根目录 index.html（SPA，运行时 fetch 仓库 Markdown）
 * 和 Jekyll 为每个 .md 渲染的静态页（practices/*.html 等）。两个面的颜色、
 * 票根导航、小票纸张和正文排版都出自这里，改一处两边同时生效——静态页才是
 * 搜索引擎和分享卡片真正抓到的那个面，不能让它长成另一套皮。
 *
 * 因此本文件只放两个面共用的部分；SPA 专属的 hash 路由样式也在这里，因为它们
 * 只是「更多同类规则」，拆出去只会制造第二份配色来源。
 */

:root {
  --canvas: #171512; --canvas-2: #1F1C18; --paper: #F6F1E7; --paper-dim: #EFE8DA;
  --ink: #23201B; --ink-soft: #555047; --cream: #D9D2C4; --muted: #8A8378;
  --stamp: #C0392B; --hairline: #3A362F; --hairline-paper: #D8D0C0;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--canvas); color: var(--cream); font-family: var(--sans); line-height: 1.75; }

.frame { max-width: 1200px; margin: 0 auto; padding: 28px 20px 80px; }
.hero { margin-bottom: 8px; }
.hero img { width: 100%; display: block; border-radius: 24px; }

/* minmax(0,1fr)：长代码行只在 pre 内部横向滚动，不把整页撑宽 */
.layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 28px; margin-top: 28px; align-items: start; }

/* 左侧：票根导航 */
nav.stubs { position: sticky; top: 20px; }
.stub-group { margin-bottom: 22px; }
.stub-group > .label { font-family: var(--mono); font-size: 12px; letter-spacing: 3px; color: var(--muted); margin: 0 0 8px 4px; }
.stub { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 10px; padding: 8px 12px; color: var(--cream); font-family: var(--sans); font-size: 15px; cursor: pointer; text-decoration: none; }
.stub .no { font-family: var(--mono); font-size: 12.5px; color: var(--muted); min-width: 30px; }
.stub:hover { border-color: var(--hairline); background: var(--canvas-2); }
.stub.active { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.stub.active .no { color: var(--stamp); font-weight: 700; }
/* 导航：PRACTICES 下挂两条轴的子分组，票根侧留一道虚线轨 */
.stub-group.lead { margin-bottom: 10px; }
.stub-group.sub { margin-bottom: 10px; padding-left: 11px; border-left: 1px dashed var(--hairline); }
.stub-group.sub > .label { letter-spacing: 2px; }
.stub-group.sub:has(+ .stub-group:not(.sub)) { margin-bottom: 22px; }

/* 右侧：小票纸内容区 */
main.paper {
  background: var(--paper); color: var(--ink); border-radius: 6px; padding: 44px 52px 56px; min-height: 70vh;
  --tooth: 12px;
  clip-path: polygon(0 8px, 1% 0, 2% 8px, 3% 0, 4% 8px, 5% 0, 6% 8px, 7% 0, 8% 8px, 9% 0, 10% 8px, 11% 0, 12% 8px, 13% 0, 14% 8px, 15% 0, 16% 8px, 17% 0, 18% 8px, 19% 0, 20% 8px, 21% 0, 22% 8px, 23% 0, 24% 8px, 25% 0, 26% 8px, 27% 0, 28% 8px, 29% 0, 30% 8px, 31% 0, 32% 8px, 33% 0, 34% 8px, 35% 0, 36% 8px, 37% 0, 38% 8px, 39% 0, 40% 8px, 41% 0, 42% 8px, 43% 0, 44% 8px, 45% 0, 46% 8px, 47% 0, 48% 8px, 49% 0, 50% 8px, 51% 0, 52% 8px, 53% 0, 54% 8px, 55% 0, 56% 8px, 57% 0, 58% 8px, 59% 0, 60% 8px, 61% 0, 62% 8px, 63% 0, 64% 8px, 65% 0, 66% 8px, 67% 0, 68% 8px, 69% 0, 70% 8px, 71% 0, 72% 8px, 73% 0, 74% 8px, 75% 0, 76% 8px, 77% 0, 78% 8px, 79% 0, 80% 8px, 81% 0, 82% 8px, 83% 0, 84% 8px, 85% 0, 86% 8px, 87% 0, 88% 8px, 89% 0, 90% 8px, 91% 0, 92% 8px, 93% 0, 94% 8px, 95% 0, 96% 8px, 97% 0, 98% 8px, 99% 0, 100% 8px, 100% calc(100% - 8px), 99% 100%, 98% calc(100% - 8px), 97% 100%, 96% calc(100% - 8px), 95% 100%, 94% calc(100% - 8px), 93% 100%, 92% calc(100% - 8px), 91% 100%, 90% calc(100% - 8px), 89% 100%, 88% calc(100% - 8px), 87% 100%, 86% calc(100% - 8px), 85% 100%, 84% calc(100% - 8px), 83% 100%, 82% calc(100% - 8px), 81% 100%, 80% calc(100% - 8px), 79% 100%, 78% calc(100% - 8px), 77% 100%, 76% calc(100% - 8px), 75% 100%, 74% calc(100% - 8px), 73% 100%, 72% calc(100% - 8px), 71% 100%, 70% calc(100% - 8px), 69% 100%, 68% calc(100% - 8px), 67% 100%, 66% calc(100% - 8px), 65% 100%, 64% calc(100% - 8px), 63% 100%, 62% calc(100% - 8px), 61% 100%, 60% calc(100% - 8px), 59% 100%, 58% calc(100% - 8px), 57% 100%, 56% calc(100% - 8px), 55% 100%, 54% calc(100% - 8px), 53% 100%, 52% calc(100% - 8px), 51% 100%, 50% calc(100% - 8px), 49% 100%, 48% calc(100% - 8px), 47% 100%, 46% calc(100% - 8px), 45% 100%, 44% calc(100% - 8px), 43% 100%, 42% calc(100% - 8px), 41% 100%, 40% calc(100% - 8px), 39% 100%, 38% calc(100% - 8px), 37% 100%, 36% calc(100% - 8px), 35% 100%, 34% calc(100% - 8px), 33% 100%, 32% calc(100% - 8px), 31% 100%, 30% calc(100% - 8px), 29% 100%, 28% calc(100% - 8px), 27% 100%, 26% calc(100% - 8px), 25% 100%, 24% calc(100% - 8px), 23% 100%, 22% calc(100% - 8px), 21% 100%, 20% calc(100% - 8px), 19% 100%, 18% calc(100% - 8px), 17% 100%, 16% calc(100% - 8px), 15% 100%, 14% calc(100% - 8px), 13% 100%, 12% calc(100% - 8px), 11% 100%, 10% calc(100% - 8px), 9% 100%, 8% calc(100% - 8px), 7% 100%, 6% calc(100% - 8px), 5% 100%, 4% calc(100% - 8px), 3% 100%, 2% calc(100% - 8px), 1% 100%, 0 calc(100% - 8px));
}
main.paper h1 { font-size: 30px; line-height: 1.35; margin: 0 0 18px; letter-spacing: 0.5px; }
main.paper h2 { font-size: 22px; margin: 34px 0 12px; padding-top: 18px; border-top: 1.5px dashed var(--hairline-paper); }
main.paper h3 { font-size: 18px; margin: 24px 0 8px; }
main.paper p, main.paper li { color: var(--ink-soft); font-size: 16px; }
main.paper li { margin: 6px 0 6px 2px; }
main.paper ul, main.paper ol { padding-left: 24px; margin: 10px 0; }
main.paper strong { color: var(--ink); }
main.paper a { color: var(--stamp); text-decoration: none; border-bottom: 1px solid rgba(192,57,43,.35); }
main.paper a:hover { border-bottom-color: var(--stamp); }
main.paper blockquote { border-left: 3px solid var(--hairline-paper); padding: 2px 0 2px 16px; margin: 14px 0; }
main.paper table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 15px; }
main.paper th { font-family: var(--mono); font-size: 13px; letter-spacing: 1px; text-align: left; color: var(--ink); border-bottom: 2px solid var(--ink); padding: 8px 10px; }
main.paper td { border-bottom: 1px dashed var(--hairline-paper); padding: 9px 10px; color: var(--ink-soft); vertical-align: top; }
main.paper code { font-family: var(--mono); font-size: 14px; background: var(--paper-dim); border: 1px solid var(--hairline-paper); border-radius: 5px; padding: 1px 6px; color: var(--ink); }
main.paper pre { background: var(--canvas); border-radius: 10px; padding: 18px 20px; overflow-x: auto; margin: 14px 0; }
main.paper pre code { background: none; border: none; padding: 0; color: var(--paper); font-size: 14px; line-height: 1.7; }
main.paper hr { border: none; border-top: 1.5px dashed var(--hairline-paper); margin: 22px 0; }
main.paper img { max-width: 100%; }

.meta-row { font-family: var(--mono); font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.meta-row a { color: var(--muted); border-bottom: 1px dotted var(--muted); }
.stamp-inline { display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--stamp); border: 2px solid var(--stamp); border-radius: 6px; padding: 2px 10px; transform: rotate(-2deg); }
/* START 页：两条轴并排对照 */
.axes { display: grid; grid-template-columns: 1fr 1fr; margin: 18px 0 4px; border-top: 2px solid var(--ink); }
.axes > div { display: flex; flex-direction: column; padding: 15px 22px 4px 0; }
.axes > div + div { padding-left: 24px; border-left: 1px dashed var(--hairline-paper); }
.axes .k { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; color: var(--stamp); margin-bottom: 5px; }
.axes .q { font-size: 17px; line-height: 1.5; color: var(--ink); font-weight: 700; margin-bottom: 6px; }
.axes .d { font-size: 15px; }
.axes .r { font-family: var(--mono); font-size: 13px; margin-top: auto; padding-top: 10px; }

footer { margin-top: 42px; text-align: center; font-family: var(--mono); font-size: 13px; color: var(--muted); }
footer a { color: var(--cream); }

/* 站底静态简介:导航(#nav)和正文(#content)的内容都由页面底部的脚本在运行时
   写入,HTML 源码里只有一句「加载中…」——不执行 JS 的抓取器(以及绝大多数
   LLM 抓取器)读到的就是一张空页面。这一段刻意留在 .layout 之外:不会被任何
   innerHTML 覆盖,展示给人和给机器的是同一份文字(没有隐藏文本、没有只给
   抓取器看的关键词),并且直接链到 Jekyll 已经渲染好的静态章节页,让站内链接
   不只存在于 hash 路由里。 */
.about { max-width: 820px; margin-top: 44px; padding-top: 24px; border-top: 1.5px dashed var(--hairline); }
.about > .label { font-family: var(--mono); font-size: 12px; letter-spacing: 3px; color: var(--muted); margin-bottom: 10px; }
.about h2 { font-size: 20px; color: var(--paper); margin-bottom: 10px; }
.about h3 { font-family: var(--mono); font-size: 14px; letter-spacing: 1px; color: var(--paper); margin: 22px 0 6px; }
.about p, .about li { font-size: 14.5px; color: var(--cream); }
.about ul { padding-left: 22px; margin: 10px 0; }
.about li { margin: 8px 0; }
.about strong { color: var(--paper); }
.about code { font-family: var(--mono); font-size: 13px; background: var(--canvas-2); border: 1px solid var(--hairline); border-radius: 5px; padding: 1px 6px; }
/* 下划线用 --muted 而不是 --hairline:hairline 是分隔线的颜色,压在深底上几乎
   看不见,链接和正文就只差一点点字色,分不出哪里可以点(同 .meta-row a 的写法) */
.about a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--muted); }
.about a:hover { border-bottom-color: var(--paper); }
.about .note { margin-top: 18px; font-size: 13.5px; color: var(--muted); }

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  nav.stubs { position: static; max-height: 44vh; overflow-y: auto; padding-bottom: 4px; border-bottom: 1px dashed var(--hairline); }
  .stub-group { margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
  .stub-group.sub { margin-bottom: 14px; }
  .stub-group > .label { width: 100%; }
  .stub { width: auto; }
  .axes { grid-template-columns: 1fr; }
  .axes > div { padding: 14px 0 6px; }
  .axes > div + div { padding-left: 0; border-left: none; border-top: 1px dashed var(--hairline-paper); }
  main.paper { padding: 32px 22px 44px; }
}

/* 键盘可达性：原来只有 hover / .active 有视觉反馈，Tab 走一遍看不出焦点在哪。
   #content 例外——它是路由切换后程序性聚焦的容器，给它描边只会让人以为出了错。 */
a:focus-visible, button:focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; }
#content:focus { outline: none; }