/* 经验详情页专属样式。#tocSide / #article / #side / #mobConv 的内容由页面脚本或服务端预渲染生成，
   .art-* / .summary-box / .sb-* / .toc-* / .p-subhead / .kv / .advice / .stick-conv / .imgbox 等类名是结构契约。 */

/* ---------- 顶部 ---------- */
.reading-masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); max-width: calc(var(--container-wide) + var(--gutter) * 2); margin: 0 auto; padding: var(--space-5) var(--gutter) 0; }
.reading-masthead > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.reading-masthead span { color: var(--accent); font-size: var(--fs-footnote); font-weight: 700; }
.reading-masthead p { color: var(--text-3); font-size: var(--fs-footnote); }
.reading-masthead a { color: var(--text-2); font-size: var(--fs-footnote); font-weight: 600; }
.reading-masthead a:hover { color: var(--accent); }
.ui-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: var(--space-3); color: var(--text-3); font-size: var(--fs-footnote); }
.ui-breadcrumb a:hover { color: var(--accent); }
.ui-breadcrumb [aria-hidden] { color: var(--gray-400); }
.read-progress { position: fixed; top: 0; left: 0; z-index: calc(var(--z-header) + 1); width: 0; height: 3px; background: var(--grad-accent); transition: width .1s linear; }

/* ---------- 三栏阅读布局 ---------- */
.layout { display: grid; grid-template-columns: 234px minmax(0, 1fr) 292px; gap: var(--space-6); align-items: start; padding: var(--space-6) 0 var(--space-16); }
.layout.no-toc { grid-template-columns: minmax(0, 1fr) 292px; }
.layout.no-toc .toc-side { display: none; }
.toc-side, .side { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: var(--space-5); }
.toc-side:empty, .side:empty { display: none; }
.article { min-width: 0; padding: clamp(24px, 4.5vw, 56px); border-radius: var(--r-2xl); background: var(--bg-elevated); box-shadow: var(--shadow-1); }

/* 目录 */
.toc-box { max-height: calc(100vh - var(--header-h) - 40px); overflow: auto; padding: var(--space-5); border-radius: var(--r-xl); background: var(--bg-elevated); box-shadow: var(--shadow-1); }
.tb-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--text-3); }
.tb-head h3 { margin: 0; font-size: var(--fs-footnote); font-weight: 700; letter-spacing: .04em; }
.toc-list { display: grid; gap: 2px; }
.toc-list a { display: block; padding: 7px 10px; border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-footnote); line-height: 1.45; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.toc-list a.sub { padding-left: 22px; font-size: var(--fs-caption); }
.toc-list a:hover { background: var(--bg-inset); color: var(--text); }
.toc-list a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* 服务端预渲染的面包屑 / 来源块 */
.notice-source { margin: var(--space-6) 0; padding: var(--space-5); border-radius: var(--r-md); background: var(--bg); font-size: var(--fs-footnote); }
.notice-source dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--space-4); margin: 0; }
.notice-source dd { margin: 0; font-weight: 600; }

/* ---------- 文章头（居中） ---------- */
.art-head { text-align: center; display: grid; justify-items: center; gap: var(--space-4); padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
.art-type { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--teal-50); color: #0B7A7A; font-size: var(--fs-caption); font-weight: 700; }
.art-type .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.art-type.zhihu { background: var(--accent-soft); color: var(--accent); }
.art-type.community { background: var(--orange-50); color: #9A5200; }
.art-title { max-width: 22em; font-size: var(--fs-title-1); line-height: 1.25; letter-spacing: var(--ls-title); text-wrap: pretty; }
.source-line { color: var(--text-3); font-size: var(--fs-footnote); }
.art-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); color: var(--text-3); font-size: var(--fs-footnote); }
.art-meta strong { color: var(--text); font-weight: 600; }
.fav-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--bg-elevated); color: var(--text); font-size: var(--fs-footnote); font-weight: 600; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.fav-pill::before { content: "☆"; font-size: 15px; line-height: 1; }
.fav-pill:hover { border-color: var(--orange-500); color: #9A5200; }
.fav-pill.active { border-color: transparent; background: var(--orange-50); color: #9A5200; }
.fav-pill.active::before { content: "★"; }
.fav-pill:disabled { opacity: .5; }

/* 时效提示 + 内容速览 */
.date-note { margin-top: var(--space-6); padding: var(--space-4) var(--space-5); border-radius: var(--r-md); background: var(--warn-bg); color: var(--text); font-size: var(--fs-footnote); line-height: 1.7; }
.summary-box { margin-top: var(--space-6); padding: var(--space-6); border-radius: var(--r-xl); background: var(--aurora), var(--bg); }
.sb-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.sb-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--grad-accent); color: #fff; font-size: 13px; }
.sb-title { font-size: var(--fs-callout); font-weight: 700; }
.sb-meta { margin-left: auto; color: var(--text-3); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.summary-box > p { color: var(--text-2); font-size: var(--fs-callout); line-height: 1.8; }
.sb-bg { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }
.sb-bg .bi { display: grid; gap: 2px; min-width: 0; padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--bg-elevated); }
.sb-bg .k { color: var(--text-3); font-size: 11px; font-weight: 600; }
.sb-bg .v { overflow: hidden; font-size: var(--fs-footnote); font-weight: 600; text-overflow: ellipsis; }
.sb-bg .bi.dest .v { color: var(--ok); }
.bg-link { color: var(--accent); text-decoration: underline; text-decoration-color: var(--blue-200); text-underline-offset: 3px; }
.sb-bg .bi.dest .bg-link { color: var(--ok); text-decoration-color: rgba(23,122,62,.3); }

/* ---------- 正文 ---------- */
.prose { margin-top: var(--space-8); font-family: var(--sans); font-size: 17px; line-height: 1.9; color: var(--text); overflow-wrap: anywhere; }
.prose p { margin: 0 0 1em; }
.prose h2 { display: flex; align-items: baseline; gap: var(--space-3); margin: 2em 0 .8em; font-family: var(--sans); font-size: var(--fs-title-3); font-weight: 700; line-height: 1.4; letter-spacing: var(--ls-tight); scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h2:first-child { margin-top: 0; }
.h-num { color: var(--accent); font-size: var(--fs-callout); font-variant-numeric: tabular-nums; }
.prose .p-subhead { margin: 1.6em 0 .5em; padding-left: 12px; border-left: 3px solid var(--accent); font-size: var(--fs-headline); font-weight: 700; line-height: 1.5; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose p.kv { margin-bottom: .5em; padding: 8px 14px; border-radius: var(--r-sm); background: var(--bg); font-size: var(--fs-callout); line-height: 1.7; }
.prose .kv-k { color: var(--text-3); font-weight: 600; }
.prose .resource-link a { color: var(--accent); font-weight: 600; }
.prose figure { margin: 1.4em 0; }
.prose figure img { max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--r-md); box-shadow: var(--shadow-1); cursor: zoom-in; }
.prose figcaption { margin-top: 8px; color: var(--text-3); font-size: var(--fs-caption); text-align: center; }
.prose .table-wrap { margin: 1.2em 0; overflow-x: auto; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-footnote); line-height: 1.6; }
.prose th, .prose td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--bg); font-weight: 700; }
.prose tr:last-child td { border-bottom: 0; }
.prose a { color: var(--accent); }
.ec-tags { margin: var(--space-4) 0 var(--space-1); }
.ec-bgtag { display: inline-flex; margin: 0 6px 6px 0; padding: 3px 10px; border-radius: var(--r-pill); background: var(--bg-inset); color: var(--text-2); font-size: var(--fs-caption); font-weight: 600; }

/* 途研建议 */
.advice { margin-top: var(--space-10); padding: var(--space-6); border-radius: var(--r-xl); background: var(--bg); scroll-margin-top: calc(var(--header-h) + 24px); }
.advice-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.advice-head .am { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(145deg, var(--navy-800), var(--navy-950)); color: #fff; font-weight: 700; }
.advice-head h3 { margin: 0; flex: 1; font-size: var(--fs-headline); font-weight: 700; }
.advice-head > span:last-child { color: var(--text-3); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.advice-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.ad-col { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-4); border-radius: var(--r-md); background: var(--bg-elevated); }
.ad-d { font-family: var(--font-display); font-size: var(--fs-title-3); font-weight: 700; }
.ad-d small { margin-left: 6px; color: var(--accent); font-size: 10px; letter-spacing: .08em; }
.ad-col p { color: var(--text-2); font-size: var(--fs-footnote); line-height: 1.7; }
.advice-foot { margin-top: var(--space-4); color: var(--text-3); font-size: var(--fs-caption); }

/* 行动卡 + 声明 */
.conversion { margin-top: var(--space-10); padding: clamp(28px, 4vw, 44px); border-radius: var(--r-xl); background: var(--grad-dark); color: var(--text-on-dark); }
.conv-eye { color: var(--blue-300); font-size: var(--fs-footnote); font-weight: 600; }
.conversion h3 { margin: var(--space-2) 0 var(--space-3); color: #fff; font-size: var(--fs-title-2); letter-spacing: var(--ls-tight); }
.conversion p { max-width: 36em; color: var(--text-on-dark-2); font-size: var(--fs-callout); line-height: 1.7; }
.conv-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.legal-line { margin-top: var(--space-6); color: var(--text-3); font-size: var(--fs-caption); text-align: center; }

/* ---------- 右栏 ---------- */
.side-card { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--r-xl); background: var(--bg-elevated); box-shadow: var(--shadow-1); }
.sc-eye { color: var(--accent); font-size: var(--fs-caption); font-weight: 700; }
.related-list { display: grid; }
.related-item { display: grid; gap: 4px; padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.related-item:first-child { border-top: 0; padding-top: 0; }
.related-item h4 { margin: 0; font-size: var(--fs-footnote); font-weight: 600; line-height: 1.5; }
.related-item:hover h4 { color: var(--accent); }
.ri-cat { color: var(--accent); font-size: 11px; font-weight: 700; }
.ri-date { color: var(--text-3); font-size: var(--fs-caption); }
.stick-conv { display: grid; gap: var(--space-3); padding: var(--space-6); border-radius: var(--r-xl); background: var(--grad-dark); color: var(--text-on-dark); box-shadow: var(--shadow-2); }
.stick-conv h4 { margin: 0; color: #fff; font-size: var(--fs-headline); font-weight: 700; line-height: 1.45; }
.stick-conv .fields { color: var(--text-on-dark-2); font-size: var(--fs-footnote); line-height: 1.7; }
.stick-conv .fields strong { color: #fff; }

/* 手机底栏（脚本填充） */
.mob-conv { display: none !important; }

/* 图片灯箱 */
.imgbox { position: fixed; inset: 0; z-index: var(--z-overlay); display: none; align-items: center; justify-content: center; padding: var(--space-10); background: rgba(10,14,28,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.imgbox.open { display: flex; }
.imgbox .ib-fig { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); max-width: 100%; max-height: 100%; margin: 0; }
.imgbox img { max-width: min(1100px, 92vw); max-height: 82vh; object-fit: contain; border-radius: var(--r-md); background: #fff; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
.imgbox figcaption { max-width: 80vw; color: rgba(255,255,255,.82); font-size: var(--fs-footnote); text-align: center; }
.imgbox .ib-close { position: fixed; top: 20px; right: 24px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 24px; line-height: 1; }
.imgbox .ib-close:hover { background: rgba(255,255,255,.3); }

.notfound { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-16) 0; text-align: center; }
.notfound h2 { font-size: var(--fs-title-2); }
.notfound p { color: var(--text-2); }

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
  .layout, .layout.no-toc { grid-template-columns: minmax(0, 1fr) 280px; }
  .toc-side { display: none; }
}
@media (max-width: 900px) {
  .layout, .layout.no-toc { grid-template-columns: 1fr; }
  .side { position: static; }
  .article { border-radius: var(--r-xl); }
  .prose { font-size: 16px; line-height: 1.85; }
  .advice-body { grid-template-columns: 1fr; }
  .sb-meta { margin-left: 0; flex-basis: 100%; }
  .mob-conv[style=""], .mob-conv:not([style*="none"]) { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: var(--z-float); display: flex !important; align-items: center; gap: var(--space-3); padding: 10px 10px 10px 18px; border: 1px solid var(--glass-line); border-radius: var(--r-pill); background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: var(--shadow-3); }
  .mob-conv > span { flex: 1; min-width: 0; color: var(--text); font-size: var(--fs-footnote); font-weight: 600; line-height: 1.35; }
  .page-experience-detail { padding-bottom: 88px; }
  .page-experience-detail .ui-back-to-top { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .page-experience-detail .tuyan-online-widget { display: none; }
  .imgbox { padding: var(--space-5); }
  .imgbox .ib-close { top: 12px; right: 14px; }
}