/* ======================================================================
 * 儿童牙齿健康 · 基础样式与 CSS 变量
 *
 * 结构与规矩对齐台账管理系统（server/public/styles/）：
 *   base.css（= 台账 base.css + tokens.css + utilities.css 合并）
 *   变量前缀统一 ct-（台账用 ism-），组件只引用语义层变量。
 *
 * 三条硬约束（docs/06 X5 + 绘界 A2/A4）：
 *   ① 移动优先，375px 起不塌版；禁横向溢出；
 *   ② viewport 不锁死缩放（在 index.html 的 meta 里，本文件不参与）；
 *   ③ 三档断点：≤768 移动 / 769–1023 中屏 / ≥1024 大屏。
 * ====================================================================== */

/* ----------------------------------------------------------------------
 * 一、设计令牌（语义层）
 * ---------------------------------------------------------------------- */
:root {
  /* 原语层 */
  --ct-blue-50: #E8F1FA;
  --ct-blue-100: #CFE1F3;
  --ct-blue-600: #2F6FB0;
  --ct-green-50: #EAF5EE;
  --ct-green-100: #CFE9DA;
  --ct-green-500: #2E8B57;
  --ct-green-600: #1F6B41;
  --ct-green-700: #185535;
  --ct-amber-50: #FFF6E5;
  --ct-amber-100: #FCE3B6;
  --ct-amber-600: #B36B00;
  --ct-red-50: #FDECEA;
  --ct-red-100: #F8CFCB;
  --ct-red-600: #C0392B;
  --ct-neutral-0: #FFFFFF;
  --ct-neutral-50: #F7F8F7;
  --ct-neutral-100: #EEF1EF;
  --ct-neutral-200: #DEE3E0;
  --ct-neutral-400: #9AA39E;
  --ct-neutral-600: #5C655F;
  --ct-neutral-800: #2C332E;
  --ct-neutral-900: #1C211D;

  /* 语义层 */
  --ct-color-bg: var(--ct-neutral-50);
  --ct-color-surface: var(--ct-neutral-0);
  --ct-color-text: var(--ct-neutral-900);
  --ct-color-text-muted: var(--ct-neutral-600);
  --ct-color-border: var(--ct-neutral-200);
  --ct-color-primary: var(--ct-green-600);
  --ct-color-primary-hover: var(--ct-green-700);
  --ct-color-primary-soft: var(--ct-green-500);
  --ct-color-primary-text: var(--ct-neutral-0);
  --ct-color-error: var(--ct-red-600);
  --ct-color-warning: var(--ct-amber-600);
  --ct-color-info: var(--ct-blue-600);
  --ct-color-success: var(--ct-green-700);

  /* 风险三档（定性，绝不带数值） */
  --ct-risk-low-bg: var(--ct-green-50);
  --ct-risk-low-fg: var(--ct-green-700);
  --ct-risk-low-border: var(--ct-green-100);
  --ct-risk-medium-bg: var(--ct-amber-50);
  --ct-risk-medium-fg: var(--ct-amber-600);
  --ct-risk-medium-border: var(--ct-amber-100);
  --ct-risk-high-bg: var(--ct-red-50);
  --ct-risk-high-fg: var(--ct-red-600);
  --ct-risk-high-border: var(--ct-red-100);

  /* 尺度 */
  --ct-font-scale: 1;
  --ct-touch-lg: 52px;
  --ct-touch-md: 44px;
  --ct-touch-sm: 36px;
  --ct-radius-sm: 6px;
  --ct-radius-md: 10px;
  --ct-radius-lg: 16px;
  --ct-sp-2: 8px;
  --ct-sp-3: 12px;
  --ct-sp-4: 16px;
  --ct-sp-5: 24px;
  --ct-sp-6: 32px;
  --ct-shadow-sm: 0 1px 2px rgba(28, 33, 29, .06);
  --ct-shadow-md: 0 4px 12px rgba(28, 33, 29, .10);
  --ct-container-max: 720px;
  --ct-transition-button: 120ms;
}

/* ----------------------------------------------------------------------
 * 二、长者版（适老）：只重定义令牌，组件零改动切换（对齐台账 elder-theme）
 *    大字号 / 高对比 / 更大点击区 —— 是必备项，不是附加项（绘界 A3）
 * ---------------------------------------------------------------------- */
[data-theme="elder"] {
  --ct-font-scale: 1.25;
  --ct-color-bg: #FFFEFA;
  --ct-color-surface: #FFFFFF;
  --ct-color-text: #111111;
  --ct-color-text-muted: #555555;
  --ct-color-border: #AAAAAA;
  --ct-color-primary: var(--ct-green-700);
  --ct-color-primary-hover: #0F3D26;
  --ct-color-primary-soft: var(--ct-green-700);
  --ct-color-error: #A3271B;
  --ct-color-warning: #8A5200;
  --ct-color-info: #1E5A94;
  --ct-color-success: var(--ct-green-700);
  --ct-risk-low-bg: #E4F3EA;
  --ct-risk-low-fg: #0F3D26;
  --ct-risk-medium-bg: #FFF0D6;
  --ct-risk-medium-fg: #7A4700;
  --ct-risk-high-bg: #FBE4E1;
  --ct-risk-high-fg: #8C1F14;
  --ct-touch-lg: 58px;
  --ct-touch-md: 50px;
  --ct-touch-sm: 42px;
  --ct-transition-button: 0ms;
}

/* ----------------------------------------------------------------------
 * 三、基础重置
 * ---------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* hidden 必须压过一切 display 声明（否则 .xxx{display:flex} 会让 hidden 失效） */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  font-size: calc(16px * var(--ct-font-scale));
  line-height: 1.65;
  color: var(--ct-color-text);
  background: var(--ct-color-bg);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
h1, h2, h3, h4 { font-weight: 600; line-height: 1.35; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding-left: 1.2em; }
a { color: var(--ct-color-primary-soft); }
:focus-visible { outline: 3px solid var(--ct-color-primary-soft); outline-offset: 2px; }
img, svg { max-width: 100%; }

/* ----------------------------------------------------------------------
 * 四、应用壳
 * ---------------------------------------------------------------------- */
.app-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--ct-sp-3);
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px;
  background: var(--ct-color-surface);
  border-bottom: 1px solid var(--ct-color-border);
}
.app-bar .brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.05rem; font-weight: 700; color: var(--ct-color-primary);
  min-width: 0;
}
.app-bar .brand::before {
  content: ''; flex: 0 0 auto;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ct-color-primary-soft);
}
.app-bar .brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-bar .bar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.app-main {
  max-width: var(--ct-container-max);
  margin: 0 auto;
  padding: 14px 14px calc(env(safe-area-inset-bottom, 0px) + 40px);
}
.app-main.page-loading { opacity: .55; pointer-events: none; }

/* 演示数据标识（Mock 期可见；接真接口后由 app.js 隐藏） */
.mock-strip {
  background: var(--ct-amber-50);
  border-bottom: 1px solid var(--ct-amber-100);
  color: var(--ct-amber-600);
  font-size: .82rem;
  line-height: 1.5;
  padding: 6px 14px;
  text-align: center;
}

/* 页面骨架 */
.page { display: flex; flex-direction: column; gap: var(--ct-sp-4); }
.page-head { display: flex; flex-direction: column; gap: 4px; }
.page-title { font-size: 1.45rem; }
.page-sub { color: var(--ct-color-text-muted); font-size: .92rem; }

/* 区块 */
.sec {
  background: var(--ct-color-surface);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-lg);
  padding: var(--ct-sp-4);
}
.sec-title {
  font-size: 1.08rem; font-weight: 600;
  margin-bottom: var(--ct-sp-2);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sec-body { color: var(--ct-color-text); }
.sec-fixed-flag {
  font-size: .72rem; font-weight: 600; color: var(--ct-color-text-muted);
  border: 1px solid var(--ct-color-border); border-radius: 999px;
  padding: 1px 8px; background: var(--ct-neutral-100);
}

/* 键值行（档案页等只读信息） */
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ct-sp-3); padding: 10px 0; border-bottom: 1px dashed var(--ct-color-border); }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--ct-color-text-muted); flex: 0 0 auto; }
.kv .v { text-align: right; min-width: 0; word-break: break-word; }

/* 通用文本 */
.muted { color: var(--ct-color-text-muted); }
.small { font-size: .86rem; }
.hint { font-size: .88rem; color: var(--ct-color-text-muted); margin-top: var(--ct-sp-2); }
.lead { font-size: 1rem; line-height: 1.7; }

/* 按钮行 */
.btn-row { display: flex; gap: var(--ct-sp-3); flex-wrap: wrap; }
.btn-row > * { min-width: 0; }

/* 固定提示块（须知 / 隐私 / 免责） */
.fixed-note {
  background: var(--ct-blue-50);
  border: 1px solid var(--ct-blue-100);
  border-radius: var(--ct-radius-lg);
  padding: var(--ct-sp-4);
}
.fixed-note .sec-title { color: var(--ct-blue-600); }
.fixed-note.is-quiet { background: var(--ct-neutral-100); border-color: var(--ct-color-border); }
.fixed-note.is-quiet .sec-title { color: var(--ct-color-text); }
.disclaimer-note {
  background: var(--ct-neutral-100);
  border: 1px solid var(--ct-color-border);
  border-left: 4px solid var(--ct-color-warning);
  border-radius: var(--ct-radius-md);
  padding: var(--ct-sp-3) var(--ct-sp-4);
  font-size: .93rem;
  line-height: 1.75;
  color: var(--ct-color-text);
  /* ⚠️ **两段制必须真的在视觉上成立**（D6 / 立策 K11 裁定 · 2026-11-07 修）
   *
   * 【缺陷】本规则原先**没有设 `white-space`** ⇒ 默认 `normal`
   *        ⇒ 浏览器把 `DISCLAIMER_TEXT` 里的 `\n\n` **折叠成空格**
   *        ⇒ 家长看到的是**视觉上合成一段**，背书边界披露（`T2R-11`）
   *           作为独立一段的版式意图**消失**。
   *        ⇒ `wording.js` 注释白纸黑字写的「页面按它拆成两段渲染」**没兑现**。
   *
   * 【修法】`white-space: pre-line` —— **保留换行、折叠多余空白**：
   *        `\n\n` ⇒ 两段之间**空一行**；行内多余空格仍按 normal 规则折叠。
   *
   * 【为什么不用 `white-space: pre-wrap`】
   *        `pre-wrap` 会**保留行内所有连续空格**；本块正文有缩进排版风险，
   *        `pre-line` 才是「只保留换行」的那一个。
   *
   * 【为什么不动 DOM 结构】拆成两个 `<p>` 会让 `textContent` 从
   *        「75 字 + `\n\n`」变成「75 字 + 隐式分隔」⇒
   *        `check_wording_sync.mjs` 的「前后端逐字同源」断言会转红
   *        ⇒ **拆 DOM 是错的修法**，只改 CSS。
   *
   * 【影响面】`.disclaimer-note` 全库**只有 `#disclaimerBox` 一处使用**
   *        （已 grep 确认）⇒ 该元素内只有免责正文，无其它靠空格排版的内容
   *        ⇒ 设 `white-space` 不会波及其它内容。 */
  white-space: pre-line;
}

/* 风险档位块 */
.risk-band {
  border-radius: var(--ct-radius-lg);
  border: 1px solid var(--ct-color-border);
  padding: var(--ct-sp-4);
  display: flex; flex-direction: column; gap: 6px;
}
.risk-band.level-low { background: var(--ct-risk-low-bg); border-color: var(--ct-risk-low-border); }
.risk-band.level-medium { background: var(--ct-risk-medium-bg); border-color: var(--ct-risk-medium-border); }
.risk-band.level-high { background: var(--ct-risk-high-bg); border-color: var(--ct-risk-high-border); }
.risk-band .risk-label { font-size: .9rem; color: var(--ct-color-text-muted); }
.risk-band .risk-value { font-size: 1.6rem; font-weight: 700; line-height: 1.25; }
.risk-band.level-low .risk-value { color: var(--ct-risk-low-fg); }
.risk-band.level-medium .risk-value { color: var(--ct-risk-medium-fg); }
.risk-band.level-high .risk-value { color: var(--ct-risk-high-fg); }
.risk-band .risk-words { font-size: 1rem; font-weight: 600; }
.risk-band .risk-note { font-size: .88rem; color: var(--ct-color-text-muted); }

/* 列表条目 */
.entry-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ct-sp-2); }
.entry {
  display: flex; gap: var(--ct-sp-3); align-items: flex-start;
  padding: var(--ct-sp-3);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-md);
  background: var(--ct-color-surface);
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-width: 0;
}
.entry .entry-main { min-width: 0; flex: 1; }
.entry .entry-title { font-weight: 600; }
.entry .entry-meta { font-size: .86rem; color: var(--ct-color-text-muted); margin-top: 2px; }
.entry .entry-side { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.entry:active { background: var(--ct-neutral-50); }

/* 时间线 */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
  position: relative;
  padding: 0 0 var(--ct-sp-4) 22px;
  border-left: 2px solid var(--ct-color-border);
  margin-left: 6px;
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ''; position: absolute; left: -7px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ct-color-surface); border: 2px solid var(--ct-color-primary-soft);
}
.timeline .tl-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ct-sp-3); flex-wrap: wrap; }
.timeline .tl-time { font-weight: 600; }
.timeline .tl-note { font-size: .86rem; color: var(--ct-color-text-muted); margin-top: 2px; }
.tl-link {
  border: none; background: transparent; padding: 0; margin: 0;
  font: inherit; color: var(--ct-color-primary-soft); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.tl-link:hover { color: var(--ct-color-primary-hover); }

/* 统计块 */
.stat-row { display: flex; gap: var(--ct-sp-3); flex-wrap: wrap; }
.stat {
  flex: 1 1 140px; min-width: 0;
  background: var(--ct-neutral-50);
  border: 1px solid var(--ct-color-border);
  border-radius: var(--ct-radius-md);
  padding: var(--ct-sp-3);
}
.stat .stat-value { font-size: 1.35rem; font-weight: 700; }
.stat .stat-label { font-size: .86rem; color: var(--ct-color-text-muted); margin-top: 2px; }

/* 流程状态（采集页） */
.flow-status {
  border-radius: var(--ct-radius-md);
  padding: var(--ct-sp-3) var(--ct-sp-4);
  border: 1px solid var(--ct-color-border);
  background: var(--ct-neutral-100);
  font-size: .95rem;
}
.flow-status.is-error { background: var(--ct-red-50); border-color: var(--ct-red-100); color: var(--ct-red-600); }
.flow-status.is-warn { background: var(--ct-amber-50); border-color: var(--ct-amber-100); color: var(--ct-amber-600); }
.flow-status.is-ok { background: var(--ct-green-50); border-color: var(--ct-green-100); color: var(--ct-green-700); }

/* 置灰门禁（未授权） */
.gate-bar {
  display: flex; gap: var(--ct-sp-3); align-items: center; flex-wrap: wrap;
  border-radius: var(--ct-radius-lg);
  padding: var(--ct-sp-4);
  border: 1px solid var(--ct-color-border);
  background: var(--ct-blue-50);
}
.gate-bar .gate-text { flex: 1 1 220px; min-width: 0; }
.gate-bar .gate-title { font-weight: 700; color: var(--ct-blue-600); }
.gate-bar .gate-desc { font-size: .9rem; color: var(--ct-color-text-muted); margin-top: 2px; }
.page.is-gated { position: relative; }
.page.is-gated .gated-content {
  opacity: .38;
  filter: grayscale(1);
  pointer-events: none;
  user-select: none;
}

/* 场景切换器（原型演示用，接真接口后移除） */
.scene-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.scene-btn {
  text-align: left; font: inherit; cursor: pointer;
  border: 1px solid var(--ct-color-border); background: var(--ct-color-surface);
  border-radius: var(--ct-radius-md); padding: 10px 12px; color: inherit;
}
.scene-btn:hover { border-color: var(--ct-color-primary-soft); }
.scene-btn .s-title { font-weight: 600; }
.scene-btn .s-desc { font-size: .82rem; color: var(--ct-color-text-muted); margin-top: 2px; }

/* ----------------------------------------------------------------------
 * 五、工具类
 * ---------------------------------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: var(--ct-sp-3); }
.row { display: flex; gap: var(--ct-sp-3); align-items: center; }
.row.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.safe-top { padding-top: env(safe-area-inset-top, 0); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* ----------------------------------------------------------------------
 * 六、三档断点（移动优先）
 * ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row > * { width: 100%; }
  .btn-row > *::part(button) { width: 100%; }
  .stat-row { flex-direction: column; }
  .app-main { padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 32px); }
  .sec, .fixed-note { padding: var(--ct-sp-3); }
}

@media (min-width: 769px) and (max-width: 1023px) {
  :root { --ct-container-max: 680px; }
}

@media (min-width: 1024px) {
  :root { --ct-container-max: 760px; }
  .scene-grid { grid-template-columns: 1fr 1fr; }
}

/* ----------------------------------------------------------------------
 * 七、无障碍：尊重系统减少动效偏好
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}