/* ============================================================
 * sites-skins-b.css —— 供应商官网「新骨架」第二批补样式
 *
 * 背景：sites-views.js 又做了一轮结构升级（公告条 / 数字条 / FAQ /
 * 成本对比 / 开业时间线 / 公告列表 / 分组对比表 / 四维选型器 /
 * 老板自述 / 事实清单缺值态），这批类名在 sites.css 与
 * sites-skins.css 里**一个都没有**，页面上仍是浏览器默认样式。
 * 本文件只补这批，一处不碰旧文件。
 *
 * 配色纪律（与 sites-skins.css 完全一致）：
 *   1) 品牌色只走 var(--sv-accent)；浅底 / 描边只走
 *      color-mix(in srgb, var(--sv-accent) N%, #FFFFFF)，不写 rgba()。
 *   2) 中性色走 var(--text)/var(--divider)/var(--surface)，并带回落值。
 *   3) 语义色（便宜/贵、成功/失败、风险等级）是**内容语义**，不是品牌色，
 *      换皮肤也不该跟着变 —— 这类才允许硬编码，且每处注释都标明了
 *       "这是语义色不是品牌色"。
 *   4) 经 grep 核对，以下类**已存在**，本文件不重复定义：
 *      .sv-promo / .sv-promo-tag / .sv-promo-txt / .sv-promo-go（skins）
 *      .sv-cmp / .sv-cmp-tb / .sv-cmp-k / .sv-cmp-owned（sites + skins）
 *      .sv-cfg / .sv-cfg-chips / .sv-cfg-chip / .sv-cfg-detail /
 *      .sv-cfg-kv / .sv-cfg-cell / .sv-cfg-k / .sv-cfg-v /
 *      .sv-cfg-price / .sv-cfg-note（sites + skins）
 *      .sv-wild-meta / .sv-wild-card / .sv-wild-k / .sv-wild-v /
 *      .sv-wild-d（sites + skins）
 *      .sv-greet / .sv-sec-h / .sv-mall-lead / .sv-spec-k / .sv-spec-v /
 *      .sv-spec-r / .sv-pi / .sv-pi-spec / .sv-pi-note（sites）
 *      .sv-risk-note / .sv-risk-ic / .sv-risk-tx（sites + skins）
 *
 * 引入顺序：必须在 css/apps/sites.css 与 css/apps/sites-skins.css
 * **之后**（见文件末尾「接入说明」）。
 * ============================================================ */


/* ============================================================
 * 组 A · 大促公告条：无缝滚动 marquee（巨擎云 viewMegaCloud）
 *
 * 问题：.sv-promo-bar 下面塞了「公告」标 + 可视区 + 一条被复制成两份
 * 的公告轨道，但一个样式都没有 —— 轨道会把横条撑到无限宽，公告整段
 * 一次性糊在屏幕上，既不滚也读不全。
 * 解决：
 *   - 可视区 overflow:hidden 当窗口，轨道 white-space:nowrap 排成一行；
 *   - 轨道用 translateX(-50%) 的 keyframes 无限平移 —— JS 把每条文案
 *     复制了一份接在后面，推到 -50% 时第二份的头部正好落在起点，视觉上
 *     无缝接回，比"推到末端再瞬时归零"自然得多（对齐 JS 里那段说明）；
 *   - 动画时长由 JS 内联 animationDuration 按条数给，这里只声明节奏；
 *   - 文字色**继承**：父容器 .sv-promo 已是橙金渐变 + 白字，这里绝不
 *     自己染色，否则换皮肤/换底色就会脱色。
 *   - 无障碍硬要求：prefers-reduced-motion 下把动画停死，整条静态展示，
 *     同时给轨道 0 位移，保证文案仍从可视区左端开始读。
 * ============================================================ */
.sv-promo-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  /* 只加顶部分隔：底部紧贴 .sv-promo，避免出现双线 */
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  /* 文字色继承父级 .sv-promo 的白，不重新染 */
  color: inherit;
  overflow: hidden;
}

/* 「公告」标：低调，不跟正在滚动的正文抢视线 */
.sv-promo-k {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.5;
  white-space: nowrap;
  /* 半透明白胶囊：在白字横条里是"弱化标记"，不是实心按钮 */
  background: color-mix(in srgb, currentColor 24%, transparent);
}

/* 滚动窗口：所有溢出都在这层被裁掉，横条宽度永远等于容器 */
.sv-promo-view {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;          /* flex 子项默认不收缩，少了这行会撑破横条 */
  overflow: hidden;
}

/* 滚动轨道：两份公告首尾相接，靠 -50% 位移做无缝循环 */
.sv-promo-roll {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  /* 时长由 JS 的 animationDuration 覆盖；此处 30s 只是兜底 */
  animation: sv-promo-roll 30s linear infinite;
}

.sv-promo-li {
  flex: none;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.6;
  /* 每条右侧一个分隔点，滚起来能分清"这是一条新公告" */
  padding-right: 26px;
  position: relative;
}
.sv-promo-li::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: color-mix(in srgb, currentColor 55%, transparent);
}

@keyframes sv-promo-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 无障碍硬要求：系统开了"减弱动态效果"就彻底停掉跑马灯。
   重画（_refresh）不会漏清理，因为这是纯 CSS 声明，不是 JS 定时器。 */
@media (prefers-reduced-motion: reduce) {
  .sv-promo-roll {
    animation: none;
    transform: none;      /* 静态停住，文案仍从可视区左端完整可读 */
  }
}


/* ============================================================
 * 组 B · 机型对比表 · 分组版（巨擎云 compareTable 重做后）
 *
 * 问题：原来是"一整张大表"，现在改成"每个场景一张小表"，包在
 * .sv-cmp-grp 里。表格本身（.sv-cmp-tb / thead 强调底 / 斑马纹 /
 * .sv-cmp-k 窄列 / .sv-cmp-owned 角标）sites-skins.css 已写好，可直接
 * 复用；缺的是**组与组之间、组头与表格之间**的层级——现在所有组首尾
 * 相接地怼在一起，看不出"这是独立的五张表"。
 * 同时 .sv-cmp 自带边框圆角（sites.css:801），而其上紧邻 hero，第一组
 * 的表会贴着 hero 上沿，显得被切了一刀。
 * 解决：
 *   - 第一组上方补一段留白（.sv-cmp-grp:first-child），把表从 hero 推下来；
 *   - 组头做成"组名 + 款数"两端对齐的一行，用强调色底 + 左强调竖条立层级；
 *   - 组说明 .sv-cmp-gl 收小、退后，别和组名抢；
 *   - 表与组说明之间给足 margin-top，形成"标题 → 说明 → 表"的三段节奏；
 *   - .sv-cmp-more 做成末尾的低调引导链接，不喧宾夺主。
 * ============================================================ */
.sv-cmp-grp {
  /* 每组自成一块：组间距远大于组内间距，层级一看就懂 */
  margin-bottom: 26px;
}
/* 第一组不能被 hero 压着：把整块表推离 hero 上沿 */
.sv-cmp-grp:first-child {
  margin-top: 22px;
}

/* 组标题行：一端组名、一端款数 */
.sv-cmp-gh {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 12px;
  padding: 8px 11px;
  border-radius: 8px 8px 0 0;
  background: color-mix(in srgb, var(--sv-accent, #FF6A00) 12%, #FFFFFF);
  /* 左侧 3px 强调竖条：和 .sv-sec-h 同一种"承重"语言，层级再抬一档 */
  border-left: 3px solid var(--sv-accent, #FF6A00);
}

.sv-cmp-gn {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .2px;
  color: color-mix(in srgb, var(--sv-accent, #FF6A00) 62%, var(--text, #2A3138));
}

.sv-cmp-gc {
  flex: none;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  color: color-mix(in srgb, var(--text, #2A3138) 58%, #FFFFFF);
}

/* 组说明：一句 lead，弱化处理，只用来交代"这一类是干嘛的" */
.sv-cmp-gl {
  margin: 8px 14px 10px;
  font-size: 11.5px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--text, #2A3138) 78%, #FFFFFF);
}

/* 组头下面紧跟的表：把 sites.css 给 .sv-cmp 的圆角去掉上沿，
   让组头和表读成一整块（只动圆角/上边框，不动 .sv-cmp 自己的定义） */
.sv-cmp-grp .sv-cmp {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 0;
}

/* 被裁掉的机型：末尾低调引导，是"指路"不是"呼叫" */
.sv-cmp-more {
  margin: 8px 12px 0;
  padding: 7px 10px;
  font-size: 11px;
  line-height: 1.6;
  border-left: 2px solid color-mix(in srgb, var(--sv-accent, #FF6A00) 40%, #FFFFFF);
  color: color-mix(in srgb, var(--text, #2A3138) 68%, #FFFFFF);
  cursor: pointer;
  transition: color .14s ease;
}
.sv-cmp-more:hover {
  color: var(--sv-accent, #FF6A00);
}

@media (max-width: 380px) {
  .sv-cmp-grp { margin-bottom: 22px; }
  .sv-cmp-gh { padding: 7px 9px; }
  .sv-cmp-gn { font-size: 13px; }
}


/* ============================================================
 * 组 C · 配置选型器 · 四维版的外层骨架（巨擎云 specPicker 重做后）
 *
 * 问题：chips 从"一列机型"变成"四个维度各一组档位"，包在
 * .sv-cfg-grp 里、组内是 .sv-cfg-grow 一行 chips。chips 自身的六态
 * （默认/hover/active/focus-visible/.on/disabled）sites-skins.css 已
 * 写好，但新外层没有任何分隔——四个维度连成一片，用户根本看不出
 * "CPU / 内存 / 硬盘 / 带宽"是四件独立的事。
 * ★ 与既有 .sv-cfg-k 的区分（重要）：
 *   .sv-cfg-k 是**表格内的键名**（sites.css:829 宽 62px、
 *   sites-skins.css:280 是 .sv-cfg-cell 里的键），它永远在
 *   .sv-cfg-detail > .sv-cfg-kv > .sv-cfg-cell 之内，是"右栏读数表"
 *   的一部分；而 .sv-cfg-gk 是**左栏 .sv-cfg-chips 里维度组的标题**，
 *   不在 detail 里。两者语义与位置都不同，故用新类名，绝不与
 *   .sv-cfg-k 共用选择器，也不会互相串样式。
 * 解决：
 *   - 每个维度组之间画一条虚线分隔，组内留白收紧 —— 四维清清楚楚；
 *   - 维度名 .sv-cfg-gk 做成小号、大字距的"标签感"文字；
 *   - chips 换行时用 .sv-cfg-grow 的 flex-wrap + 行间距兜住，
 *     窄屏（.sv-cfg-chips 已变横向可滚，见 skins:317）改为 nowrap
 *     单行滑动，避免"换行 + 横滚"两套机制打架。
 * ============================================================ */
.sv-cfg-grp {
  /* 每一维一组，组间虚线分隔 */
  padding-bottom: 10px;
  border-bottom: 1px dashed color-mix(in srgb, var(--sv-accent, #FF6A00) 22%, #FFFFFF);
}
.sv-cfg-grp:last-child { border-bottom: 0; padding-bottom: 0; }
.sv-cfg-grp + .sv-cfg-grp { padding-top: 10px; }

/* 维度名：小号标签，不跟档位 chips 抢 */
.sv-cfg-gk {
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: color-mix(in srgb, var(--sv-accent, #FF6A00) 55%, var(--text, #2A3138));
}

/* 该维度的档位行：chips 允许换行，换行后行距一致（对齐不靠 margin 手调） */
.sv-cfg-grow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}
/* 换行时档位靠左起排，不出现"最后一行居中"的错位 */
.sv-cfg-grow > .sv-cfg-chip {
  flex: 0 0 auto;
}

@media (max-width: 380px) {
  /* 窄屏 .sv-cfg-chips 已是横向可滚容器，这里同步成单行不换行，
     否则会出现"同时换行又横向滚动"的双重布局 */
  .sv-cfg-grp { padding-bottom: 8px; border-bottom: 0; }
  .sv-cfg-grp + .sv-cfg-grp { padding-top: 8px; }
  .sv-cfg-grow {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .sv-cfg-grow::-webkit-scrollbar { display: none; }
}


/* ============================================================
 * 组 D · 数字条：企业官网的"信任指标"（巨擎云 viewMegaCloud）
 *
 * 问题：四个事实（SLA / 频道数 / 配额档 / 在售机型）是裸 div 堆叠，
 * 数字和标签同字号、无间距，看起来像一块没做完的表。
 * 要求是"大厂感"：靠留白与字号差做层级，**不能像数值面板** ——
 * 所以不画边框、不铺底色，只让数字站出来。
 * 解决：
 *   - 窄屏 2 列 × 2 行等分（grid），行间距给足；
 *   - 数字 .sv-stat-n 用强调色 + 800 字重 + tabular-nums（等宽数字，
 *     四个格子的小数点/位数不会因字形跳动而错位）；
 *   - 标签 .sv-stat-k 与说明 .sv-stat-d 分两级弱化，逐级后退。
 * ============================================================ */
.sv-stat {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 窄屏 2×2，宽了也不改成四列，保持呼吸感 */
  gap: 20px 12px;
  margin: 26px 16px 0;
  padding: 22px 0;
  /* 上下各一条极淡分隔：把数字条从上下文里"框"出来，而不是画格子 */
  border-top: 1px solid var(--divider, #E6E4DF);
  border-bottom: 1px solid var(--divider, #E6E4DF);
}

.sv-stat-c {
  min-width: 0;
  text-align: center;
}

.sv-stat-n {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.5px;
  /* 数字必须抢眼：全条唯一一次用足强调色 */
  color: var(--sv-accent, #FF6A00);
  /* 等宽数字：四个格子的字号/位数不一也不会左右错位 */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.sv-stat-k {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--text, #2A3138) 82%, #FFFFFF);
}

.sv-stat-d {
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.5;
  opacity: .58;
}

@media (max-width: 380px) {
  .sv-stat { gap: 18px 10px; margin: 22px 14px 0; padding: 18px 0; }
  .sv-stat-n { font-size: 24px; }
  .sv-stat-k { font-size: 11.5px; }
}


/* ============================================================
 * 组 E · FAQ 手风琴（巨擎云 megaFaq）
 *
 * ★ 先确认机制（读 JS）：不是 <details>，是**类名切换**。
 *   .sv-faq-i 上切 .open，一次只开一条（megaFaq 里点任意题会先清空
 *   所有 .open 再加）。所以这里必须写"收起态"与".open 展开态"两套，
 *   箭头靠 rotate 过渡，答案区靠 grid-template-rows 0fr→1fr 做高度过渡
 *   （比 max-height 猜一个够大的值更干净，不用怕文案长度变化）。
 *
 * 视觉问题：题目和答案全是默认段落样式，看不出哪句是问、哪句是答，
 * 也看不出哪一条开着。
 * 解决：每一项之间只画 1px 分隔线（**不做卡片堆叠**，卡片会把这页
 * 撑得很"重"）；问句做成整行可点、右侧加号；展开后加号转 45°、
 * 题目颜色转强调色，答案淡入。
 * ============================================================ */
.sv-faq {
  margin: 0 0 6px;
}

.sv-faq-list {
  margin: 10px 16px 0;
  /* 上下各一条 1px 线，中间靠项与项之间的线分段 —— 是"列表"不是"卡片" */
  border-top: 1px solid var(--divider, #E6E4DF);
}

.sv-faq-i {
  border-bottom: 1px solid var(--divider, #E6E4DF);
}

/* 问题行：整行可点，重置换行与按钮默认外观 */
.sv-faq-q {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 2px;
  margin: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  color: var(--text, #2A3138);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .16s ease;
}
.sv-faq-q:hover { color: var(--sv-accent, #FF6A00); }
.sv-faq-q:focus-visible {
  outline: 2px solid var(--sv-accent, #FF6A00);
  outline-offset: 2px;
}

/* 展开箭头（JS 塞的 plus 图标）：收起是"+"，展开转 45° 成"×" */
.sv-faq-ic {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--text, #2A3138) 55%, #FFFFFF);
  transition: transform .22s ease, color .22s ease;
}

/* 答案区：grid 行高 0fr → 1fr 做高度过渡，收起时不占位 */
.sv-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  font-size: 12.5px;
  line-height: 1.75;
  color: color-mix(in srgb, var(--text, #2A3138) 88%, #FFFFFF);
  opacity: 0;
  transition: grid-template-rows .24s ease, opacity .2s ease;
}
/* 内层需要一个包裹层来承接 overflow —— JS 直接往 .sv-faq-a 写文本，
   这里用 padding 的无害技巧：把内容靠右 padding 顶开，收起态整体塌陷 */
.sv-faq-a > * { overflow: hidden; }

/* 展开态 */
.sv-faq-i.open .sv-faq-a {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-bottom: 14px;
}
.sv-faq-i.open .sv-faq-q {
  color: var(--sv-accent, #FF6A00);
}
.sv-faq-i.open .sv-faq-ic {
  transform: rotate(45deg);
  color: var(--sv-accent, #FF6A00);
}

@media (max-width: 380px) {
  .sv-faq-list { margin-left: 14px; margin-right: 14px; }
  .sv-faq-q { font-size: 12.5px; padding: 12px 2px; }
  .sv-faq-a { font-size: 12px; }
}


/* ============================================================
 * 组 F · 小厂成本对比表（轻云小站 miniCostCompare）
 *
 * 问题：一张"比同行便宜多少"的对照表完全没有样式，四列数据裸着，
 * 而这张表**唯一要表达的事**就是"便宜"—— 必须靠颜色和字重当场说清。
 * 解决：
 *   - 表头浅强调底 + 强调色字，让"差"那一列天然成为焦点；
 *   - ★ 语义色说明：.sv-cost-lo/.sv-cost-hi 表达的是"便宜/贵"这个
 *     **价格语义**，不是风险等级，也不是品牌色 —— 它俩要用固有色
 *     （绿=便宜/优，红=贵/劣），换皮肤也不该变，故此处硬编码。
 *     与 sites-skins.css 组 6 里的 .sv-risk-lo/-mid/-hi（风险等级色）
 *     是**两套不同的语义体系**：那边 lo 指"风险低"，这边 lo 指"价格低"。
 *     两处都取同一组红绿，只是为了让全站语义色口径统一，不是同一批类。
 *   - .sv-cost-src 明显做成脚注：更小、更低透明度、顶部一条分隔线。
 * ============================================================ */
.sv-cost {
  margin-top: 6px;
}

.sv-cost-tb {
  width: 100%;
  margin: 0 16px;
  /* 表格自身宽度算上左右外边距，别把窄屏撑出横向滚动 */
  width: calc(100% - 32px);
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 11.5px;
}

.sv-cost-tb thead th {
  padding: 8px 6px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: color-mix(in srgb, var(--sv-accent, #D6336C) 78%, #000000);
  background: color-mix(in srgb, var(--sv-accent, #D6336C) 12%, #FFFFFF);
  border-bottom: 2px solid var(--sv-accent, #D6336C);
}

/* 档位列：左对齐、不折行，它是这一行的身份 */
.sv-cost-k {
  padding: 8px 6px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text, #2A3138);
}

.sv-cost-tb tbody td {
  padding: 8px 6px;
  text-align: center;
  color: var(--text, #2A3138);
  border-top: 1px solid var(--divider, #E6E4DF);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sv-cost-tb tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--sv-accent, #D6336C) 4%, #FFFFFF);
}

/* 「差」那一格：加粗，它是结论所在 */
.sv-cost-d {
  font-weight: 700;
}

/* 语义色 · 便宜：绿=有利。这是价格语义色，不是品牌色，也不是风险色 */
.sv-cost-lo {
  color: #3E8E7E;
}
/* 语义色 · 更贵：红=不利。同上，属价格语义，与风险红不同源 */
.sv-cost-hi {
  color: #C2431F;
}

/* 数据来源脚注：小号 + 低透明度 + 顶部分隔线，一眼看出不是正文 */
.sv-cost-src {
  margin: 10px 16px 0;
  padding-top: 8px;
  font-size: 10.5px;
  line-height: 1.65;
  color: var(--text, #2A3138);
  opacity: .55;
  border-top: 1px solid var(--divider, #E6E4DF);
}

@media (max-width: 380px) {
  .sv-cost-tb { font-size: 11px; }
  .sv-cost-tb thead th,
  .sv-cost-tb tbody td { padding: 7px 5px; }
}


/* ============================================================
 * 组 G · （0.3.13 移除）老板自述便签
 *
 * 此处原有一套 .sv-boss / .sv-boss-h / .sv-boss-b，服务于
 * miniBossWords() 渲染的"老板的话"便签（左侧竖线 + 极淡强调色底 +
 * 手写感斜体）。0.3.13 文案整改后，厂商官网只做客观描述，不再出现
 * "以个人口吻对玩家说话的运营者形象"，渲染函数与类名一并删除。
 * ============================================================ */


/* ============================================================
 * 组 H · （0.3.13 移除）野贝云事实清单的两个状态类
 *
 * 此处原有 .sv-wild-none（"未公开"占位）与 .sv-wild-warn（警示卡底）
 * 两条规则。0.3.13 起 wildFacts() 只列**确实公开**的字段（成立时间 /
 * 机房位置 / 备案号 / 支持渠道），没写的项整格不出现，也就没有"未公开"
 * 占位；"跑路迹象"警示卡同时撤除。两个类名均不再由 JS 产出，规则清掉。
 *
 * ★ 保留的教训：状态类要表达"缺失"还是"警告"，语义必须分开写，
 *   不能当别名互用 —— 这条判断本身仍然成立。
 * ============================================================ */


/* ============================================================
 * 组 I · （0.3.13 移除）开业时间线
 *
 * 此处原有整套 .sv-tl / .sv-tl-list / .sv-tl-i / .sv-tl-dot / .sv-tl-m /
 * .sv-tl-t / .sv-tl-x（左侧竖线 + 节点圆点 + 右侧三段）。
 * wildTimeline() 渲染的"开业大事记"属厂商自我叙事，不在客观描述范围内，
 * 渲染函数与其样式一并删除。
 * ============================================================ */


/* ============================================================
 * 组 L · 风险提示条的「加强版」内容（轻云小站 viewMiniLite）
 *
 * ★ 背景与为什么在这里补
 *   sites.css 里的 .sv-risk-note 只画了外框（浅红底 + 左侧 3px 竖线 +
 *   ::before 的圆形"!"），sites-skins.css 组 4 处理了内层 .sv-risk-tx。
 *   后来风险条从"一行免责"扩成了"标题 + 逐条事实清单"
 *   （支持方式 / 机房在哪 / 最高风险档 / 不承诺什么），
 *   多出 .sv-risk-t / .sv-risk-list / .sv-risk-l 三个类，
 *   这三个在 sites.css 与 sites-skins.css 里都没有，因此在本批补。
 *
 * ★ 语义色说明：这一组**没有**语义色，用的是中性色。
 *   （sites-skins.css 组 6 原有的 .sv-risk-lo/-mid/-hi 风险等级染色
 *     已随 riskLine() 在 0.3.13 一并移除。）这里只做排版。
 *
 * ★ 与 .sv-risk-tx 的关系
 *   .sv-risk-tx 原本是"一句免责"的容器（sites-skins.css 里让它能换行、
 *   行高 1.65）。现在它变成了外层容器，内部再分标题与清单 ——
 *   所以这里让 -tx 变成纵向排列，并把 ::before 那个"!"对齐到标题行。
 * ============================================================ */
.sv-risk-tx {
  /* 从"一段话"升级成"标题 + 清单"的纵向容器 */
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

/* 清单的标题行：比正文重一点，作为"进门先读这个"的召唤 */
.sv-risk-t {
  font-size: 11.5px;
  font-weight: 700;
  /* 比正文稍深的同色系，不另起色相 —— 色相留给语义色 */
  color: inherit;
  opacity: .95;
}

/* 清单容器：左边一条细虚线，做出"逐条对账"的清单感 */
.sv-risk-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 9px;
  /* 用 currentColor 的透明版本，跟父容器的红字同色系 */
  border-left: 1px dashed color-mix(in srgb, currentColor 34%, transparent);
}

/* 清单里的一条事实：让它能换行，且换行后缩进对齐（不顶到行首） */
.sv-risk-l {
  font-size: 11px;
  line-height: 1.6;
  /* 数字与冒号后的值在换行时不要被拆得七零八落 */
  overflow-wrap: anywhere;
}

/* 窄屏：清单缩进收窄，避免有效宽度被吃掉太多 */
@media (max-width: 380px) {
  .sv-risk-list { padding-left: 7px; }
  .sv-risk-l { font-size: 10.5px; }
}


/* ============================================================
 * ★ 接入说明（写给主工程，本文件不自行修改 index.html）
 *   index.html 需在 css/apps/sites.css 与 css/apps/sites-skins.css
 *   **之后**追加一行：
 *     <link rel="stylesheet" href="css/apps/sites-skins-b.css">
 *   建议紧贴 sites-skins.css 那行之后（同属官网补样式，放一起好维护），
 *   但必须在 sites.css 之后，否则 .sv-cmp-tb / .sv-cfg-chip 等被本文件
 *   引用的既有样式会因顺序颠倒而失效。
 * ============================================================ */


/* ============================================================
 * 组 K · 事实清单容器：从「两格并排」改成「N 格自适应网格」
 *
 * ★ 为什么必须在这里覆写（而不是去改 sites.css）
 *   sites.css 里的 .sv-wild-meta 是 `display:flex`，每张卡 `flex:1` ——
 *   这套规则是**为最初那 2 格写的**（成立时间 / 跑路迹象）。
 *   后来清单扩到 7 格，flex:1 就把 390px 均分成 7 份，每格不到 56px：
 *   数值纵向断行、卡片被拉成一根根签子，整块不可读。
 *   这是「结构从 2 变 7、布局没跟着变」的典型失配。
 *
 * ★ 为什么用 auto-fit 而不是写死列数
 *   卡片数量由数据层决定（现在 7 格，以后可能增减）。写死 2 列，加到 9 格
 *   就会出现"最后一行孤零零一张"；写死 3 列，窄屏会挤。auto-fit + minmax
 *   让列数随容器宽度自动收敛，卡片数变化不用再改样式。
 *   minmax(102px, 1fr)：102px 是"标签 + 一个 3 位数金额"不折行的下限。
 *
 * ★ 语义色说明：这里**没有**语义色，纯品牌色（--sv-accent）+ 中性色。
 *   .sv-wild-hi（警示值）的暖红在 sites-skins.css 里已经定义，不重复。
 * ============================================================ */
.sv-wild-meta {
  display: grid;
  /* auto-fit：列数跟着容器宽度走；1fr 让末行卡片等宽铺满，不留空洞 */
  grid-template-columns: repeat(auto-fit, minmax(102px, 1fr));
  gap: 8px;
  margin: 14px 16px 0;
  align-items: stretch;
}
.sv-wild-meta .sv-wild-card {
  /* 覆写 sites.css 的 flex:1 —— 网格子项不需要它，留着反而会干扰 */
  flex: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* 极窄屏：两列仍是可读下限，再窄就退回单列全宽 */
@media (max-width: 340px) {
  .sv-wild-meta { grid-template-columns: 1fr; }
}

/* 桌面/平板预览（项目本体是手机尺寸，这里是开发时用宽窗口看页面用的兜底） */
@media (min-width: 560px) {
  .sv-wild-meta { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
}