/* ============================================================
   design-v4.css · 视觉系统 v4（信息架构重排 + 可信度层 + 自己验证 + 报价卡）
   只做本轮新增块的样式，不覆盖 v1/v2/v3 既有选择器。
   令牌沿用 design-v2/v3：间距 4/8/12/20/28、圆角 8/14/pill、品牌紫。
   ============================================================ */

/* ---------- 1 · 页签分组标题（甲方关注 / 数据与技术支撑） ---------- */
.tabs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.tabgroup{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-caption);font-weight:700;letter-spacing:.12em;
  color:var(--brand-deep);text-transform:none;
  padding:2px 10px;margin-right:2px;
  border-left:3px solid var(--brand);
  background:var(--brand-wash);border-radius:0 var(--r-pill) var(--r-pill) 0;
  white-space:nowrap;
}
.tabgroup + .tab{margin-left:0}
@media (prefers-color-scheme: dark){.tabgroup{color:var(--accent-ink)}}

/* ---------- 2 · 数据截止时间 ---------- */
.dataasof{
  font-size:var(--fs-caption);font-weight:600;
  color:var(--fg2);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:3px 10px;white-space:nowrap;font-variant-numeric:tabular-nums;
}

/* ---------- 3 · 可信度徽标（可信 / 参考 / 样本不足） ---------- */
.conf{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fs-caption);font-weight:700;
  padding:2px 8px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--bg);color:var(--fg2);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.conf::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted)}
.conf-ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));color:var(--ok-ink)}
.conf-ok::before{background:var(--ok)}
.conf-warn{border-color:color-mix(in srgb,var(--warn) 50%,var(--line));color:var(--warn-ink)}
.conf-warn::before{background:var(--warn)}
.conf-bad{border-color:color-mix(in srgb,var(--bad) 45%,var(--line));color:var(--bad-ink)}
.conf-bad::before{background:var(--bad)}
.conf-line{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 0}

/* 样本不足：数字上压角标，不允许当结论读 */
.insuff{position:relative}
.insuff::after{
  content:"样本不足 · 不构成结论";
  position:absolute;right:0;bottom:-2px;
  font-size:10px;font-weight:700;letter-spacing:.04em;
  color:var(--bad-ink);
  background:color-mix(in srgb,var(--bad) 10%,var(--card));
  border:1px dashed color-mix(in srgb,var(--bad) 45%,var(--line));
  border-radius:var(--r-pill);padding:1px 7px;
  transform:rotate(-2deg);
}
.insuff-watermark::before{
  content:"样本不足，不构成结论";
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-14deg);
  font-size:var(--fs-1);font-weight:800;letter-spacing:.18em;
  color:color-mix(in srgb,var(--bad) 58%,transparent);
  pointer-events:none;white-space:nowrap;
}
.sample-line{font-size:var(--fs-caption);color:var(--fg2);font-variant-numeric:tabular-nums}

/* ---------- 4 · 可信度总览 ---------- */
.coverage-mini{margin:var(--sp-2) 0 var(--sp-3)}
.cov-head{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:baseline;margin-bottom:var(--sp-2)}
.cov-head h3{margin:0}
.cov-bar{display:flex;height:14px;border-radius:var(--r-pill);overflow:hidden;border:1px solid var(--line)}
.cov-bar>span{display:block;height:100%}
.cov-ok{background:#15803d}.cov-warn{background:#ca8a04}.cov-bad{background:#b4232a}.cov-none{background:#c9cfd8}
.cov-legend{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-2) 0 0;font-size:var(--fs-1);color:var(--fg2)}
.cov-legend .lg{display:inline-flex;align-items:center;gap:6px}
.cov-legend .lg>i{width:10px;height:10px;border-radius:2px;display:inline-block}
.cov-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-2);margin:var(--sp-3) 0}

/* ---------- 5 · 自己验证（卡片，手机上好读） ---------- */
.selfhead{
  border:1px solid var(--brand-200);border-radius:var(--r-card);
  background:radial-gradient(120% 140% at 0% 0%,var(--brand-wash) 0%,transparent 60%),var(--card);
  padding:var(--sp-4);margin:0 0 var(--sp-3);box-shadow:var(--sh-1);
}
.selfhead h2{margin:0 0 var(--sp-2);font-size:var(--fs-4,20px);font-weight:800;color:var(--brand-deep)}
.selfhead p{margin:0;color:var(--fg);line-height:1.62;max-width:86ch}
.self-card{
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);
  padding:var(--sp-4);margin:0 0 var(--sp-3);box-shadow:var(--sh-1);
}
.self-card.absent{border-color:color-mix(in srgb,var(--bad) 42%,var(--line))}
.self-hd{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.self-no{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--brand-wash);
  color:var(--brand-deep);font-weight:800;font-size:var(--fs-1);border:1px solid var(--brand-200);
}
.self-q{font-size:var(--fs-3);font-weight:700;line-height:1.5;margin:0 0 var(--sp-2);color:var(--fg)}
.self-qbox{
  display:flex;gap:var(--sp-2);align-items:flex-start;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-ctl);
  padding:var(--sp-3);margin-bottom:var(--sp-3);
}
.self-qbox p{margin:0;flex:1;line-height:1.6}
.copy-btn{white-space:nowrap}
.copy-btn.done{background:var(--ok);border-color:var(--ok);color:#fff}
.self-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-2);margin-bottom:var(--sp-3)}
.self-metric{border:1px solid var(--line);border-radius:var(--r-ctl);padding:var(--sp-3);position:relative;background:var(--bg)}
.self-metric .k{font-size:var(--fs-caption);color:var(--fg2)}
.self-metric .v{font-size:calc(var(--fs-data) * .72);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.self-metric .n{font-size:var(--fs-caption);color:var(--fg2);margin-top:2px}
.blind-box{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--sp-3);margin:var(--sp-3) 0;background:var(--card)}
.blind-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.blind-head h2{margin:0}.blind-head p{margin:3px 0 0}
.blind-protocol{padding:9px 11px;margin:10px 0;border-radius:8px;background:var(--bg2);font-size:12px;line-height:1.6}
.blind-controls{align-items:end}.blind-controls label{font-size:11px;color:var(--fg2)}.blind-controls select{display:block;margin-top:3px}
.blind-row{display:grid;grid-template-columns:minmax(260px,2fr) repeat(3,minmax(110px,.75fr));gap:8px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.blind-row label{font-size:11px;color:var(--fg2)}.blind-row input,.blind-row textarea{display:block;width:100%;margin-top:3px}.blind-q{min-width:0}.blind-q .small{margin-left:8px}.blind-evidence{grid-column:2/5}.blind-verdict{grid-column:2/5;font-size:11px;font-weight:700;color:var(--accent)}
@media(max-width:760px){.blind-head{display:block}.blind-head button{margin-top:8px}.blind-row{grid-template-columns:1fr 1fr}.blind-q,.blind-evidence,.blind-verdict{grid-column:1/-1}}
.listed{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 var(--sp-2)}
.listed .item{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-1);padding:3px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--bg);color:var(--fg2);
}
.listed .item b{color:var(--fg);font-variant-numeric:tabular-nums}
.listed .item.self{
  border-color:var(--brand);background:var(--brand-wash);color:var(--brand-deep);font-weight:800;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 18%,transparent);
}
.listed .item.comp{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.plat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-2);margin:var(--sp-2) 0}
.plat-cell{border:1px solid var(--line);border-radius:var(--r-ctl);padding:var(--sp-2) var(--sp-3);background:var(--bg)}
.plat-cell.rec{border-color:var(--brand-200);background:var(--brand-wash)}
.plat-cell.absent{border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.plat-cell .t{font-weight:700;font-size:var(--fs-2)}
.plat-cell .s{font-size:var(--fs-caption);color:var(--fg2);font-variant-numeric:tabular-nums}

/* ---------- 6 · 报价卡（先价格与毛利率，技术明细折叠在后） ---------- */
.quote-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-3)}
.quote-card{
  position:relative;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);
  padding:var(--sp-4);box-shadow:var(--sh-1);
}
.quote-card.featured{border-color:var(--brand);box-shadow:var(--sh-2)}
.quote-badge{
  position:absolute;top:-10px;left:var(--sp-4);
  background:var(--brand);color:#fff;font-size:var(--fs-caption);font-weight:700;
  padding:2px 10px;border-radius:var(--r-pill);
}
.quote-name{font-size:var(--fs-3);font-weight:800;color:var(--fg)}
.quote-price{font-size:calc(var(--fs-data) * 1.1);font-weight:800;line-height:1.1;color:var(--brand-deep);font-variant-numeric:tabular-nums}
.quote-price em{font-size:.5em;font-style:normal;margin-right:2px}
.quote-price span{font-size:.36em;font-weight:600;color:var(--fg2);margin-left:4px}
.quote-row{display:flex;justify-content:space-between;gap:var(--sp-2);font-size:var(--fs-1);color:var(--fg2);padding:3px 0;border-bottom:1px dashed var(--line-soft)}
.quote-row b{color:var(--fg);font-variant-numeric:tabular-nums}
.quote-note{font-size:var(--fs-1);color:var(--fg2);line-height:1.55;margin:var(--sp-2) 0 0}
.margin-chip{
  display:inline-flex;align-items:center;gap:6px;font-weight:800;
  font-size:var(--fs-2);padding:3px 10px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--ok) 12%,var(--card));color:var(--ok-ink);
  border:1px solid color-mix(in srgb,var(--ok) 38%,var(--line));
}
.margin-chip.low{background:color-mix(in srgb,var(--warn) 14%,var(--card));color:var(--warn-ink);border-color:color-mix(in srgb,var(--warn) 42%,var(--line))}
details.fold{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--sp-3);background:var(--bg);margin:var(--sp-3) 0}
details.fold>summary{cursor:pointer;font-weight:700;color:var(--fg2)}
details.fold[open]>summary{margin-bottom:var(--sp-3)}
details.fold h3{margin-top:var(--sp-3)}

/* ---------- 7 · 时间轴表格：轮次标签 + 样本列不强折行 ---------- */
#timelineTable td,#timelineTable th{vertical-align:top}
.round-tag{
  display:inline-flex;align-items:center;gap:5px;font-weight:700;
  font-size:var(--fs-caption);padding:2px 8px;border-radius:var(--r-pill);
  background:var(--brand-wash);color:var(--brand-deep);border:1px solid var(--brand-200);
}
.small{font-size:var(--fs-caption)}

/* ---------- 8 · 客户只读端：同样按新顺序，隐藏纯技术页签的容器 ---------- */
body.skin-client .tabgroup{opacity:.85}
body.skin-client .dataasof{background:var(--bg)}

/* ============================================================
   9 · 任务 F：手机版 / 电脑版两套布局（同一套代码，断点驱动）
   断点：≤768px 手机版（.is-mobile）/ 769–1023px 平板（.is-tablet）/ ≥1024px 电脑版（.is-desktop）
   类名由 app.js 按「窗口宽度或 ?view=mobile|desktop」写到 body 上，CSS 只写一套规则。
   ============================================================ */

/* ---------- 9.1 电脑版：分组导航 + 多列网格 + 密集表格 ---------- */
body.is-desktop .kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
body.is-desktop .charts{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
body.is-desktop table{font-size:var(--fs-1)}
body.is-desktop th,body.is-desktop td{padding:7px 9px}
body.is-desktop .bottomnav{display:none}
body.is-desktop .tabs{gap:var(--sp-2)}
body.is-desktop #bottomNav{display:none}

/* 平板过渡：KPI 一行 3 个，图表两列 */
body.is-tablet .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
body.is-tablet .bottomnav{display:none}

/* ---------- 9.2 手机版 ---------- */
body.is-mobile{
  font-size:15px;                     /* 正文 ≥15px */
  --fs-1:13px; --fs-2:14.5px; --fs-3:15px;
}
body.is-mobile .top{position:sticky;top:0;z-index:20;flex-direction:column;align-items:flex-start;gap:6px;padding:10px 12px}
body.is-mobile .top .brand h1{font-size:15px;line-height:1.35}
body.is-mobile .topinfo{flex-wrap:wrap;gap:6px;width:100%}
body.is-mobile .projsel{width:100%}
body.is-mobile #projSel{width:100%;min-height:44px}
body.is-mobile .dataasof{font-size:12px}
body.is-mobile main{padding:12px 12px calc(88px + env(safe-area-inset-bottom,0px) + var(--vnav-offset,0px))}
/* 顶部页签在手机版隐藏（改用底部固定导航，避免双导航） */
body.is-mobile .tabs{display:none}
/* 单列卡片流 */
body.is-mobile .kpis{grid-template-columns:1fr}
body.is-mobile .charts{grid-template-columns:1fr}
body.is-mobile .quote-cards{grid-template-columns:1fr}
body.is-mobile .dim-grid{grid-template-columns:1fr}
body.is-mobile .prof-grid{grid-template-columns:1fr}
body.is-mobile .self-metrics{grid-template-columns:1fr 1fr}
body.is-mobile .split{grid-template-columns:1fr}
/* 所有可点元素 ≥44px */
body.is-mobile button,body.is-mobile .btn,body.is-mobile select,body.is-mobile input,
body.is-mobile textarea,body.is-mobile .tab,body.is-mobile summary{min-height:44px}
body.is-mobile .chip,body.is-mobile .conf{min-height:26px}
body.is-mobile .copy-btn{min-height:44px;min-width:96px}
/* 宽表格：横滑 + 固定首列 */
body.is-mobile .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-ctl)}
body.is-mobile .tablewrap table{min-width:560px}
body.is-mobile .tablewrap th:first-child,body.is-mobile .tablewrap td:first-child{
  position:sticky;left:0;z-index:2;background:var(--card);
  box-shadow:1px 0 0 var(--line);
}
body.is-mobile .tablewrap thead th:first-child{z-index:3}
body.is-mobile .tablewrap table.heat{min-width:auto}
/* 结论带在手机版竖排、加大数值 */
body.is-mobile .concl{flex-direction:column}
body.is-mobile .concl-main{min-width:0}
body.is-mobile .concl-value{font-size:clamp(30px,11vw,44px)}
body.is-mobile .concl-side{width:100%}
body.is-mobile h2{font-size:15px}
body.is-mobile .self-card,body.is-mobile .quote-card{padding:14px}
body.is-mobile .self-q{font-size:16px}
body.is-mobile .ev-quote{font-size:14px}
body.is-mobile .plat-grid{grid-template-columns:1fr 1fr}

/* 底部固定导航 */
.bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:none;gap:2px;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--card) 92%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--line);
}
body.is-mobile .bottomnav{display:grid;grid-template-columns:repeat(6,1fr)}
.bottomnav.hidden{display:none}
.bnav-item{
  min-height:48px;display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;color:var(--fg2);
  background:transparent;border:0;border-radius:var(--r-ctl);padding:4px 2px;
  line-height:1.15;text-align:center;
}
.bnav-item.on{color:var(--brand-deep);background:var(--brand-wash);box-shadow:inset 0 0 0 1px var(--brand-200)}
.bnav-more{color:var(--fg)}
/* 更多抽屉 */
.sheet{position:fixed;inset:0;z-index:60;display:none}
.sheet.open{display:block}
.sheet-bd{position:absolute;inset:0;background:rgba(10,10,14,.45)}
.sheet-panel{
  position:absolute;left:0;right:0;bottom:0;max-height:70vh;overflow:auto;
  background:var(--card);border-top-left-radius:16px;border-top-right-radius:16px;
  padding:14px 14px calc(20px + env(safe-area-inset-bottom,0px) + var(--vnav-offset,0px));
  box-shadow:var(--sh-3);
}
.sheet-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sheet-list{display:grid;grid-template-columns:1fr;gap:8px}
.sheet-item{min-height:48px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--bg);font-weight:600}
.sheet-item.on{border-color:var(--brand);background:var(--brand-wash);color:var(--brand-deep)}

/* 客户只读端：手机优先（甲方老板多在手机上看），数值更大、留白更足 */
body.skin-client.is-mobile .concl-value{font-size:clamp(34px,12vw,50px)}
body.skin-client.is-mobile .onesum-verdict{font-size:26px}
body.skin-client.is-mobile .rh-name{font-size:13px}
body.skin-client.is-mobile .report-head{margin-bottom:12px}
body.skin-client.is-mobile .self-card{box-shadow:var(--sh-1);border-width:1px}
body.skin-client.is-mobile .banner--client{padding:10px 12px;font-size:13px}

/* 深色模式下保证正文对比度（两套布局共用） */
@media (prefers-color-scheme: dark){
  body.is-mobile .bottomnav{background:color-mix(in srgb,#17181c 94%,transparent)}
  body.is-mobile .tablewrap th:first-child,body.is-mobile .tablewrap td:first-child{background:#17181c}
}

/* ---------- 10 · 数据客观性：口径分列 / 样本不均衡警告 ---------- */
.warnflag{
  display:inline-block;margin-top:6px;padding:4px 10px;border-radius:var(--r-pill);
  font-size:var(--fs-1);font-weight:700;
  color:var(--warn-ink);background:color-mix(in srgb,var(--warn) 12%,var(--card));
  border:1px solid color-mix(in srgb,var(--warn) 42%,var(--line));
}
.kpi .k span,.kpi .n{line-height:1.5}
#kpisMeta{max-width:110ch;line-height:1.7}
body.is-mobile #kpisMeta{max-width:none;font-size:13px}