:root{--ed-paper:#f7f3ea;--ed-ink:#071a40;--ed-muted:#657080;--ed-rule:#cbc3b4;--ed-blue:#0d4fc2;--ed-green:#14864a;--ed-red:#c93a2d;--ed-width:1480px;--ed-serif:"Noto Serif SC","Songti SC",SimSun,serif;--ed-sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;--ed-mono:ui-monospace,SFMono-Regular,Menlo,monospace}
body.prototype-page{margin:0;background:var(--ed-paper);color:var(--ed-ink);font-family:var(--ed-sans);line-height:1.65;overflow-x:hidden}
.prototype-page main#content{width:min(var(--ed-width),calc(100% - 56px));margin-inline:auto}
.prototype-page h1,.prototype-page h2,.prototype-page h3{font-family:var(--ed-serif);color:var(--ed-ink);text-wrap:balance}
.prototype-page h1{font-size:clamp(3.35rem,6.3vw,6.4rem);line-height:.98;letter-spacing:-.06em;margin:.08em 0}
.prototype-page h2{font-size:clamp(1.25rem,2vw,2rem);line-height:1.32}
.prototype-page p,.prototype-page li{overflow-wrap:anywhere}
.prototype-page time,.prototype-page .prototype-date,.prototype-page .finance-numbers,.prototype-page .tech-metrics,.prototype-page table{font-variant-numeric:tabular-nums}
.prototype-page a:focus-visible:not(.site-nav *),.prototype-page button:focus-visible:not(.site-nav *),.prototype-page input:focus-visible:not(.site-nav *){outline:3px solid color-mix(in srgb,var(--ed-blue) 70%,white);outline-offset:3px}
.prototype-date{border-right:1px solid var(--ed-rule);font-family:var(--ed-serif);min-width:110px;padding-right:1.5rem}
.prototype-date strong{display:block;font-size:clamp(2.6rem,4.5vw,4.7rem);line-height:1}
.finance-mast,.morning-hero-grid,.tech-hero{display:grid;grid-template-columns:110px minmax(0,1fr) minmax(420px,.95fr);gap:2rem;align-items:start;padding:1rem 0 1.2rem;border-bottom:1px solid var(--ed-rule)}
.finance-mast>figure,.morning-hero-grid>figure,.tech-blueprint{margin:0;align-self:stretch;overflow:hidden;border-radius:7px}
.finance-mast img,.morning-hero-grid img,.tech-blueprint img{width:100%;height:100%;max-height:270px;object-fit:cover}
.ed-audio{display:grid;grid-template-columns:auto auto minmax(90px,1fr) auto;align-items:center;gap:.75rem;width:min(100%,450px);padding:.45rem .65rem;border:1px solid var(--ed-rule);border-radius:999px;background:transparent}
.ed-audio .tts-range{width:100%;accent-color:var(--ed-blue);cursor:pointer}
.ed-audio .tts-play{width:40px;height:40px;border:0;border-radius:50%;background:var(--ed-blue);color:white}
.finance-content{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:0}
.finance-content>div{padding-right:1.25rem;border-right:1px solid var(--ed-rule)}
.finance-thesis{display:grid;grid-template-columns:130px minmax(0,1fr);gap:1.5rem;align-items:center;padding:1.2rem 0;border-bottom:1px solid var(--ed-rule)}
.finance-thesis h2{font-size:clamp(1.4rem,2.2vw,2.1rem);margin:0}
.finance-numbers{display:grid;grid-template-columns:130px minmax(0,1fr);border-bottom:1px solid var(--ed-rule)}
.finance-numbers>header{padding:1.1rem 1.25rem;border-right:1px solid var(--ed-rule)}
.finance-numbers>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.finance-numbers>div>article{min-width:0;padding:1.1rem 1.25rem;border-right:1px solid var(--ed-rule)}
.finance-numbers>div>article:last-child{border-right:0}
.finance-numbers .number{display:block;color:var(--ed-blue);font-family:var(--ed-serif);font-size:clamp(2.2rem,3.5vw,4rem);line-height:1}
.finance-markets{display:grid;grid-template-columns:130px repeat(3,minmax(0,1fr));border-bottom:1px solid var(--ed-rule)}
.finance-markets>*{padding:1.2rem 1.25rem;border-right:1px solid var(--ed-rule)}
.finance-markets>*:last-child{border-right:0}
.finance-analysis{display:grid;grid-template-columns:130px minmax(0,1.25fr) minmax(300px,.75fr);gap:0}
.finance-analysis>*{padding:1.15rem 1.25rem;border-right:1px solid var(--ed-rule)}
.finance-analysis>*:last-child{border-right:0}
.finance-rail{padding:1.1rem 0 0 1.25rem}
.finance-rail>section{padding:0 0 1.1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--ed-rule)}
.finance-rail h2{margin:.1rem 0 .65rem;font-size:1.25rem}
.morning-reading-layout,.tech-reading-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:2rem}
.morning-reading-layout>div,.tech-reading-layout>div{min-width:0}
.morning-briefing,.morning-analysis,.tech-quick,.tech-architecture,.tech-engineering,.tech-decision,.tech-risks,.prototype-sources{border-top:2px solid var(--ed-ink);padding:1rem 0 1.8rem}
.morning-briefing ol{counter-reset:morning;list-style:none;padding:0;margin:0;columns:2;column-gap:2.5rem}
.morning-briefing li{break-inside:avoid;padding:.42rem 0;border-bottom:1px dotted var(--ed-rule)}
.morning-insight-rail>section{border-top:2px solid var(--ed-ink);padding:.8rem 0 1.25rem}
.tech-hero{grid-template-columns:110px minmax(0,1.35fr) minmax(320px,.65fr)}
.tech-quick,.tech-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.tech-quick>* , .tech-metrics>*{padding:1rem;border-right:1px solid var(--ed-rule)}
.tech-quick>*:last-child,.tech-metrics>*:last-child{border-right:0}
.tech-metrics strong{display:block;font-family:var(--ed-serif);font-size:clamp(2rem,3vw,3.7rem);line-height:1;color:var(--ed-blue)}
.tech-architecture{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:2rem}
.tech-flow{min-width:0;overflow-x:auto}
.prototype-page table{width:100%;border-collapse:collapse;font-size:.9rem}
.prototype-page th,.prototype-page td{border:1px solid color-mix(in srgb,var(--ed-ink) 35%,transparent);padding:.55rem .65rem;text-align:left;vertical-align:top}
.prototype-page th{background:var(--ed-ink);color:white;font-weight:600}
.prototype-page pre{max-width:100%;overflow:auto;border:1px solid var(--ed-rule);background:rgba(255,255,255,.28);padding:1rem;font-family:var(--ed-mono);font-size:.82rem;line-height:1.55}
.prototype-sources{margin-top:1.2rem}
.prototype-footer{width:min(var(--ed-width),calc(100% - 56px));margin:3rem auto 0;padding:1.2rem 0;border-top:1px solid var(--ed-rule);color:var(--ed-muted);font-size:.8rem}
@media(max-width:1100px){.finance-mast,.morning-hero-grid,.tech-hero{grid-template-columns:95px minmax(0,1fr)}.finance-mast>figure,.morning-hero-grid>figure,.tech-blueprint{grid-column:2}.finance-content{grid-template-columns:1fr}.finance-content>div{border-right:0;padding-right:0}.finance-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding-left:0}.finance-numbers{grid-template-columns:110px minmax(0,1fr)}.finance-numbers>div{grid-template-columns:repeat(2,minmax(0,1fr))}.finance-markets{grid-template-columns:110px repeat(3,1fr)}}
@media(max-width:972px){.prototype-page main#content,.prototype-footer{width:min(100% - 36px,900px)}.morning-reading-layout,.tech-reading-layout{grid-template-columns:1fr}.finance-analysis{grid-template-columns:110px minmax(0,1fr)}.finance-analysis>*:last-child{grid-column:2}.tech-architecture{grid-template-columns:1fr}.finance-rail{grid-template-columns:1fr 1fr}.tech-quick,.tech-metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.prototype-page main#content,.prototype-footer{width:calc(100% - 28px)}.prototype-page h1{font-size:clamp(2.55rem,14vw,4.35rem)}.finance-mast,.morning-hero-grid,.tech-hero{grid-template-columns:1fr;gap:1rem}.prototype-date{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:1rem;border-right:0;border-bottom:1px solid var(--ed-rule);padding:0 0 .8rem}.finance-mast>figure,.morning-hero-grid>figure,.tech-blueprint{grid-column:1}.ed-audio{grid-template-columns:auto auto minmax(70px,1fr);width:100%}.ed-audio>*:last-child{grid-column:2/-1}.finance-thesis,.finance-numbers,.finance-markets,.finance-analysis{grid-template-columns:1fr}.finance-thesis{gap:.25rem}.finance-numbers>header,.finance-markets>*,.finance-analysis>*{border-right:0;border-bottom:1px solid var(--ed-rule);padding:1rem 0}.finance-numbers>div{grid-template-columns:1fr}.finance-numbers>div>article{border-right:0;border-bottom:1px solid var(--ed-rule);padding:1rem 0}.finance-analysis>*:last-child{grid-column:1}.finance-rail{grid-template-columns:1fr}.morning-briefing ol{columns:1}.tech-quick,.tech-metrics{grid-template-columns:1fr 1fr}.prototype-page table{min-width:640px}.prototype-page .table-wrap,.prototype-page .tech-decision,.prototype-page .tech-architecture{overflow-x:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.prototype-page *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Night mode -- see archive-index.css for why this was missing. */
[data-theme="dark"]{--ed-paper:#0c0d12;--ed-ink:#e9eaf1;--ed-muted:#9aa0ad;--ed-rule:#2a2e38;--ed-blue:#6c9dff;--ed-green:#4fc07d;--ed-red:#ef6a5c}
[data-theme="dark"] .prototype-page pre{background:rgba(255,255,255,.06)}

/* ── AI 财经正文版式 ────────────────────────────────────────────────────
   用 fin- 前缀而不是复用 .finance-*：那批类名同时被 editorial-prototype.css 和本文件
   定义，且布局意图相反（本文件把栏目标签放进 130px 窄栏，prototype 给同一个 header 设
   150px+1fr 的网格）。150px 的网格塞进 130px 的格子，第一列溢出压住正文、第二列压成
   0 宽，副标题就一个字一行竖排在正文中间。抢同一批选择器只会再来一次。
   原则只有一条：长文要有够用的行宽，标签不跟正文抢宽度。 */
.fin-lead{padding:1.5rem 0;border-bottom:1px solid var(--ed-rule)}
.fin-kicker{margin:0 0 .35rem;font-size:.78rem;letter-spacing:.12em;color:var(--ed-blue)}
.fin-lead h2{margin:0 0 .7rem;font-size:clamp(1.45rem,2.4vw,2.15rem);line-height:1.35}
.fin-lead p{margin:0;max-width:68ch;color:var(--ed-muted)}

.fin-body{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem}
@media(min-width:1000px){.fin-body{grid-template-columns:minmax(0,1fr) 280px}}
.fin-main{min-width:0}

.fin-h{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin:0 0 1rem;
  padding-bottom:.5rem;border-bottom:2px solid var(--ed-ink);font-size:1.15rem}
.fin-h small{font-weight:400;font-size:.85rem;color:var(--ed-muted)}

.fin-markets,.fin-analysis{padding:1.6rem 0;border-bottom:1px solid var(--ed-rule)}
.fin-markets article{padding:1.1rem 0;border-top:1px solid var(--ed-rule)}
.fin-markets article:first-of-type{border-top:0}
.fin-markets h3{margin:0 0 .5rem;font-size:1rem;color:var(--ed-blue)}
/* 宽屏下把市场名移到左侧固定栏, 正文仍占满剩余宽度 —— 三等分窄列是这一节原来最难读的地方 */
@media(min-width:760px){
  .fin-markets article{display:grid;grid-template-columns:110px minmax(0,1fr);gap:1.5rem;align-items:start}
  .fin-markets h3{margin:0;position:sticky;top:5rem}
}
.fin-markets p,.fin-analysis p,.fin-analysis li{max-width:70ch;line-height:1.85}
.fin-markets div>:first-child,.fin-analysis>:nth-child(2){margin-top:0}

.fin-rail{min-width:0;font-size:.92rem}
.fin-rail section+section{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--ed-rule)}
.fin-rail h2{margin:0 0 .6rem;font-size:.95rem;letter-spacing:.04em}
.fin-rail p,.fin-rail li{color:var(--ed-muted);line-height:1.75}

/* ── CSS 图表 ───────────────────────────────────────────────────────────
   `render_charts()` 生成的柱状/条形图结构（标签 + 轨道 + 带宽度的填充条）在编辑部
   这套模板里**一条样式都没命中**：这批规则原本写死在 publish_ai_know 的
   build_simple_article_html 内联样式里，编辑部模板走的是另一套外壳，拿不到。
   于是图表塌成一列裸文字 ——「A股核心资产市值对比（亿元） bar / 宁德时代 /
   16571.72 亿元 / 贵州茅台 / …」，正是财经页最难读的一段。
   搬到这里, 所有编辑部页面共用。 */
.chart{margin:1.6rem 0;padding:1.1rem 1.25rem;border:1px solid var(--ed-rule);border-radius:10px}
.chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px dashed var(--ed-rule)}
.chart-title{font-weight:600;font-size:.98rem}
/* "bar"/"column" 是给渲染器看的类型标记, 不是给读者看的 */
.chart-type{display:none}
.chart-error{color:var(--ed-red);font-size:.9rem}

.chart-bars{display:flex;flex-direction:column;gap:.7rem}
.chart-row{display:grid;grid-template-columns:minmax(84px,110px) minmax(0,1fr) minmax(78px,auto);
  align-items:center;gap:.85rem}
.chart-label{font-size:.88rem;color:var(--ed-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chart-track{height:18px;border-radius:5px;background:var(--ed-rule);overflow:hidden;position:relative}
.chart-fill{height:100%;border-radius:5px;min-width:2px}
.chart-val{font-size:.86rem;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.chart-unit{font-size:.76rem;color:var(--ed-muted);font-weight:400;margin-left:2px}

/* 纵向柱状图。柱高是内联的百分比(height:9.7% / 100.0%)，**百分比要有确定高度的父级
   才解析得出来** —— 原来 .chart-col 是 flex 项且容器 align-items:flex-end，高度是内容
   撑出来的 auto，于是六根柱子全部落到 min-height、一样高，图等于没画。
   改成 .chart-columns 用列网格拉伸子项、.chart-col 自身 height:100%，柱子所在的行
   用 minmax(0,1fr) 拿到确定高度。
   另外股票名不在柱子里, 而是单独的一行 .chart-col-labels —— 它必须用同一套列网格,
   否则会堆成一列, 跟柱子对不上。 */
.chart-columns{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.9rem;
  height:200px;align-items:stretch;padding:.6rem .25rem 0;border-bottom:1px solid var(--ed-rule)}
.chart-col{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;justify-items:center;gap:.3rem}
.chart-col-val{align-self:start;font-size:.78rem;font-weight:600;text-align:center;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.chart-col-bar{align-self:end;width:100%;max-width:46px;border-radius:5px 5px 0 0;min-height:3px}
.chart-col-labels{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:.9rem;padding:.5rem .25rem 0}
.chart-col-label{font-size:.75rem;color:var(--ed-muted);text-align:center;
  overflow-wrap:anywhere;line-height:1.3}

/* 窄屏: 数值换到条形下面一行, 免得三列挤成一团 */
@media(max-width:620px){
  .chart-row{grid-template-columns:minmax(70px,1fr) minmax(0,2fr)}
  .chart-val{grid-column:2;justify-self:end}
  .chart-columns{height:150px}
}
/* 侧栏可能整个不出现(风险提示与关注列表都为空时)。没有侧栏还留着 280px 的空档,
   正文会莫名其妙地窄一截。 */
.fin-body--wide{grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){.fin-body--wide{grid-template-columns:minmax(0,1fr)}}

/* 技术页去掉右上角那块写死的装饰图后, 头部只剩日期 + 标题两栏。 */
.tech-hero--plain{grid-template-columns:110px minmax(0,1fr)}
@media(min-width:1000px){.tech-hero--plain{grid-template-columns:110px minmax(0,1fr)}}
.tech-deep,.tech-engineering,.tech-decision,.tech-risks,.tech-quick{
  padding:1.6rem 0;border-bottom:1px solid var(--ed-rule)}
.tech-deep p,.tech-deep li,.tech-engineering p,.tech-engineering li,
.tech-risks p,.tech-risks li,.tech-decision li{max-width:70ch;line-height:1.85}
.tech-deep>header,.tech-engineering>header,.tech-decision>header,.tech-risks>header{
  display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem;
  padding-bottom:.5rem;border-bottom:2px solid var(--ed-ink)}
.tech-deep>header span,.tech-engineering>header span,.tech-decision>header span,
.tech-risks>header span{font-size:.72rem;letter-spacing:.12em;color:var(--ed-blue)}
.tech-deep>header h2,.tech-engineering>header h2,.tech-decision>header h2,
.tech-risks>header h2{margin:0;font-size:1.15rem}

/* 智慧城市: 情报侧栏可能整块不出现, 别留着空档让正文莫名变窄。 */
.city-body-grid--wide{grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){.city-body-grid--wide{grid-template-columns:minmax(0,1fr)}}

/* 「三分钟读懂」原来是 340px + 340px 的两栏, 左栏只放"00 / 三分钟读懂 / 先看结论"
   三行字却占掉半幅版面, 剩下 335px 高全是空白。改成标题横排在上、条目占满整行。 */
.tech-quick{display:block}
.tech-quick>header{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;
  margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--ed-ink)}
.tech-quick>header>span{font-size:.72rem;letter-spacing:.12em;color:var(--ed-blue)}
.tech-quick>header>div{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.tech-quick>header p{margin:0;font-size:.85rem;color:var(--ed-muted)}
.tech-quick>header h2{margin:0;font-size:1.15rem}
.tech-quick li{max-width:72ch;line-height:1.8}

/* 「今日政策主线」原来固定三栏 140px + 1fr + 260px, 正文区只有 716px 宽时标题只分到
   240px, 却仍按 2rem 排 —— 一行五个字, 标题被切得七零八落。窄的时候让标题占满剩余
   宽度、「厂商先看」挪到下面; 宽到放得下才分三栏。 */
.city-lead-grid{grid-template-columns:130px minmax(0,1fr);align-items:start}
.city-lead-grid h2{font-size:clamp(1.35rem,2.3vw,2rem);line-height:1.45}
.city-lead-grid aside{grid-column:2;margin-top:.9rem;border-left:3px solid var(--ed-blue);padding-left:1rem}
@media(min-width:1100px){
  .city-lead-grid{grid-template-columns:130px minmax(0,1fr) 280px}
  .city-lead-grid aside{grid-column:3;margin-top:0}
}