/* =============================================================
   AI Radar · Teardowns — 两页共用样式
   与周报首页 V1b 同源:纯白纸底 · 宋体主字 · 等宽元信息 · 青绿点缀
   ============================================================= */

/* ------------ 1. Tokens(与 V1b 完全一致) ------------ */
:root{
  --paper:      #FFFFFF;
  --paper-2:    #F5F5F3;
  --paper-3:    #EDEDE8;
  --ink:        #1A1A1A;
  --ink-2:      #4A4A48;
  --ink-3:      #7A7A76;
  --ink-4:      #B8B8B2;
  --rule:       #DCDCD6;
  --rule-2:     #EFEFEA;
  --accent:     #00A896;
  --accent-soft:#4DC5B4;
  --accent-tint:#E6F5F2;

  /* 长读专用 */
  --prose-max: 720px;   /* 正文栏宽:约 72 中文字/行,黄金阅读宽度 */
  --page-max: 1280px;   /* 整体外框 */
}

/* ------------ 2. Reset & base ------------ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Serif SC","Songti SC","STSong",serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
html{overflow-y:scroll}   /* 常驻滚动条:翻页时视口宽度恒定 */

/* 复用工具类:等宽元信息 */
.mono{
  font-family:"Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-feature-settings: "tnum" 1;
}
.mono-meta{
  font-family:"Noto Sans Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

/* ------------ 3. Masthead(与周报首页同款) ------------ */
.wrap{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 56px 56px 96px;
}
@media (max-width: 820px){ .wrap{ padding: 36px 20px 64px } }

.masthead{
  border-top: 2px solid var(--ink);
  padding-top: 20px;
  margin-bottom: 56px;
}
.masthead-top{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}
.masthead-eyebrow{
  font-family:"Noto Sans Mono", monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.masthead-issue{
  font-family:"Noto Sans Mono", monospace;
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--accent);
  font-weight: 500;
  text-transform: uppercase;
}
.masthead-title{
  font-family: "Radar Serif", "Noto Serif SC", "Songti SC", STSong, serif;
  font-size: clamp(56px, 9vw, 116px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: .95;
  margin: 28px 0 20px;
}
.masthead-title em{ font-style: normal; font-weight: 300; }
.masthead-sub{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  gap: 32px;
  flex-wrap: wrap;
}
.masthead-desc{
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 560px;
  font-weight: 300;
}
/* Nav bar · [周报] [拆解库] tab pair,两页共用 */
.masthead-nav{
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  padding: 4px 0;
}
.masthead-nav a{
  font-family:"Noto Sans Mono", monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 16px;
  border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s;
  font-weight: 500;
  line-height: 1;
}
.masthead-nav a + a{
  border-left: 1px solid var(--rule);
}
.masthead-nav a:hover{ color: var(--ink); }
.masthead-nav a.current{
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.masthead-nav a.current::before{
  content: "●";
  color: var(--accent);
  font-size: 8px;
  margin-right: 8px;
  vertical-align: 2px;
}

/* ============================================================
   4. LIST PAGE 拆解库列表页
   —— 文字编辑索引,每一行一篇拆解,克制到近乎目录
   ============================================================ */

.index-head{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 8px;
}
.index-head-num{
  font-family:"Noto Sans Mono", monospace;
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 500;
}
.index-head-cols{
  font-family:"Noto Sans Mono", monospace;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ink-4);
  text-transform: uppercase;
  display: flex;
  gap: 32px;
}

.td-list{
  list-style: none;
  padding: 0;
  margin: 0 0 72px;
}
.td-row{
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 40px;
  padding: 32px 8px 32px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  cursor: pointer;
  transition: background .22s ease, padding .22s ease;
  text-decoration: none;
  color: inherit;
}
.td-row:hover{
  background: var(--paper-2);
  padding-left: 20px;
  padding-right: 20px;
}
.td-row:hover .td-name{ color: var(--accent); }
.td-row:hover .td-more{ opacity: 1; transform: translateX(0); }

.td-row-num{
  font-family:"Noto Sans Mono", monospace;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--ink-3);
  padding-top: 8px;
  align-self: start;
}

.td-row-body{
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.td-name{
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.15;
  color: var(--ink);
  transition: color .18s;
  margin: 0;
}
.td-name em{
  font-style: normal;
  color: var(--ink-3);
  font-weight: 300;
  font-size: 22px;
  margin-left: 8px;
}

.td-layers{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.td-layer{
  font-family:"Noto Sans Mono", monospace;
  font-size: 10px;
  letter-spacing: .12em;
  padding: 4px 10px;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.td-layer.empty{
  background: transparent;
  color: var(--ink-4);
  border-style: dashed;
  font-style: italic;
  text-transform: none;
  letter-spacing: .05em;
}

.td-tagline{
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-2);
  font-weight: 400;
  max-width: 640px;
  margin: 4px 0 0;
}

.td-row-meta{
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  padding-top: 8px;
  align-self: start;
  min-width: 120px;
}
.td-issue{
  font-family:"Noto Sans Mono", monospace;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.td-more{
  font-family:"Noto Sans Mono", monospace;
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--accent);
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .22s, transform .22s;
}

@media (max-width: 820px){
  .td-row{
    grid-template-columns: 48px 1fr;
    gap: 20px;
    padding: 24px 4px;
  }
  .td-row:hover{ padding-left: 12px; padding-right: 12px; }
  .td-row-meta{
    grid-column: 2;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    padding-top: 0;
  }
  .td-name{ font-size: 26px; }
  .td-name em{ display: block; margin-left: 0; margin-top: 2px; }
  .index-head-cols{ display: none; }
}

/* ============================================================
   5. DETAIL PAGE 拆解详情页
   —— 长读特稿,窄栏,大留白
   ============================================================ */

/* 详情页整体使用更窄的栏 */
.detail{
  max-width: none;   /* 与 masthead 同宽:左对齐 AI Radar、右对齐拆解库 */
  margin: 0;
}

/* --- 页头 --- */
.td-head{
  padding-bottom: 40px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 56px;
}
.td-head-eyebrow{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.td-head-num{
  font-family:"Noto Sans Mono", monospace;
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 500;
}
.td-head-issue{
  font-family:"Noto Sans Mono", monospace;
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.td-title{
  font-family: "Radar Serif", "Noto Serif SC", "Songti SC", STSong, serif;
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin: 0 0 20px;
  color: var(--ink);
}
.td-lead{
  font-size: 20px;
  line-height: 1.65;
  color: var(--ink-2);
  font-weight: 400;
  margin: 0 0 24px;
  font-style: italic;
}
.td-head .td-layers{ margin-top: 8px; }
.td-head .td-layer{ font-size: 11px; padding: 5px 12px; }

/* --- 章节共通 --- */
.td-section{
  margin-bottom: 72px;
}
.td-section-title{
  font-family: "Noto Serif SC", serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 24px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.td-section-title::before{
  content: "";
  width: 24px;
  height: 2px;
  background: var(--ink);
  display: inline-block;
  transform: translateY(-6px);
  flex-shrink: 0;
}
.td-section-num{
  font-family:"Noto Sans Mono", monospace;
  font-size: 10px;
  letter-spacing: .28em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 500;
  margin-right: 4px;
}

/* --- 段落 --- */
.td-section p{
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--ink);
  margin: 0 0 20px;
  font-weight: 400;
}
.td-section p:last-child{ margin-bottom: 0; }

/* 行内代码 --- 低调等宽底色 */
.td-section code,
code.inline{
  font-family:"Noto Sans Mono", monospace;
  font-size: .88em;
  padding: 2px 6px;
  background: var(--paper-3);
  color: var(--ink);
  border-radius: 2px;
  border: 1px solid var(--rule-2);
}

/* --- 4. Callout: 我的初判 vs 实际 --- */
.td-hypothesis{
  background: var(--paper-2);
  border-left: 4px solid var(--accent);
  padding: 28px 28px 24px 32px;
  margin: 0 0 72px;
  position: relative;
}
@media (max-width: 560px){
  .td-hypothesis{ padding: 22px 20px 20px 24px; }
}
.td-hypothesis .td-section-title{
  margin-bottom: 20px;
}
.td-hypothesis .td-section-title::before{ background: var(--accent); }

.td-hypothesis .hyp-block{
  padding-top: 16px;
}
.td-hypothesis .hyp-block:first-of-type{
  padding-top: 0;
}
.td-hypothesis .hyp-block + .hyp-block{
  border-top: 1px dotted var(--rule);
  margin-top: 16px;
}
.hyp-label{
  font-family:"Noto Sans Mono", monospace;
  font-size: 10px;
  letter-spacing: .26em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}
.hyp-label.actual{ color: var(--ink); }
.td-hypothesis p{
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-2);
}

/* --- 5. Decisions:关键设计决策(轻结构) --- */
.td-decisions .decision{
  padding: 32px 0 4px;
  border-top: 1px solid var(--ink);
}
.td-decisions .decision:first-of-type{
  border-top: 2px solid var(--ink);
  padding-top: 36px;
}
.td-decisions .decision:last-of-type{
  border-bottom: 1px solid var(--rule);
  padding-bottom: 36px;
}
.decision-layer{
  font-family:"Noto Sans Mono", monospace;
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 12px;
  display: inline-block;
  padding: 3px 10px;
  background: var(--accent-tint);
  border-radius: 2px;
}
.decision-title{
  font-family:"Noto Serif SC", serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  margin: 0 0 24px;
  color: var(--ink);
}

/* 5 行结构化项:对回机制 / 证据 / 增量 / 代价 / 可迁移判断
   —— 行标签对齐,眼睛能扫;不做卡片盒子 */
.decision-facets{
  list-style: none;
  padding: 0;
  margin: 0;
}
.decision-facets li{
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 20px;
  padding: 12px 0;
  border-top: 1px dotted var(--rule);
  align-items: baseline;
}
.decision-facets li:first-child{ border-top: none; padding-top: 4px; }
.facet-key{
  font-family:"Noto Sans Mono", monospace;
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 500;
  padding-top: 3px;
}
.facet-val{
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink);
  margin: 0;
}
@media (max-width: 560px){
  .decision-facets li{
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 0;
  }
  .facet-key{ padding-top: 0; }
}

/* --- 6. 市场 --- 用普通 prose 段落 */

/* --- 7. 证据清单 --- */
.td-evidence ol{
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: ev;
}
.td-evidence li{
  padding: 14px 0;
  padding-left: 48px;
  position: relative;
  border-top: 1px dotted var(--rule);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
}
.td-evidence li:first-child{ border-top: 1px solid var(--rule); }
.td-evidence li::before{
  counter-increment: ev;
  content: "[" counter(ev) "]";
  position: absolute;
  left: 0;
  top: 14px;
  font-family:"Noto Sans Mono", monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: .1em;
  font-weight: 500;
}
.td-evidence li a{
  color: var(--ink-3);
  border-bottom: 1px dotted var(--rule);
  transition: color .18s, border-color .18s;
  word-break: break-all;
}
.td-evidence li a:hover{
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.td-evidence li:target{
  background: var(--accent-tint);
  padding-left: 56px;
}
.td-evidence li:target::before{ left: 8px; }

/* ============================================================
   6. 特殊组件:术语 term / 推断 infer / 证据引用 ev-ref
   ============================================================ */

/* 术语:低调虚线下划线 + 悬停 tooltip */
.term{
  border-bottom: 1px dashed var(--ink-3);
  cursor: help;
  position: relative;
  color: inherit;
  transition: border-color .18s, color .18s;
}
.term:hover{
  border-bottom-color: var(--accent);
  color: var(--accent);
}
/* Tooltip:靠 data-term 属性挂内容;纯 CSS 实现,不依赖 JS */
.term[data-term]::before,
.term[data-term]::after{
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease .1s, transform .2s ease .1s;
  position: absolute;
  z-index: 20;
}
.term[data-term]::before{
  content: attr(data-term);
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 320px;
  padding: 10px 14px;
  font-family:"Noto Serif SC", serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(26,26,26,.08);
  white-space: normal;
  text-align: left;
  letter-spacing: 0;
}
.term[data-term]::after{
  content: "";
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--paper);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.term[data-term]:hover::before,
.term[data-term]:hover::after,
.term[data-term]:focus::before,
.term[data-term]:focus::after{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.term[data-term]:hover::after,
.term[data-term]:focus::after{
  transform: translateX(-50%) translateY(0) rotate(45deg);
}

/* 推断 --- 淡色斜体 */
.infer{
  font-style: italic;
  color: var(--ink-3);
  font-weight: 300;
}

/* 证据上标 --- 可点小链接 */
.ev-ref,
sup a.ev-ref{
  font-family:"Noto Sans Mono", monospace;
  font-size: .72em;
  color: var(--accent);
  vertical-align: super;
  padding: 0 2px;
  margin: 0 1px;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: .05em;
  transition: color .15s;
}
.ev-ref:hover{
  color: var(--ink);
  background: var(--accent-tint);
  border-radius: 2px;
}

/* ------------ 7. Footer(与 V1b 同款) ------------ */
.footer{
  margin-top: 80px;
  padding-top: 24px;
  border-top: 2px solid var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}
.footer-block{
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.8;
  font-weight: 300;
}
.footer-block strong{
  color: var(--ink);
  font-weight: 500;
  display: block;
  font-family:"Noto Sans Mono", monospace;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 8px;
}