/*
 * styles.css
 * 欧盟电池合规披露页样式。
 *
 * 设计目标：尽量还原 欧规网页内容-3.pdf 的版式。
 * - 页面宽度参考 PDF：约 596pt，主体 disclosure 最大 820px。
 * - 字号按 PDF 比例：主标题 20pt、区块标题 15pt、产品标识 18pt、正文 12pt、
 *   表格 7.6pt、注释 10pt。
 * - 颜色：白底、深灰文字、深蓝强调色，与 PDF 一致；无炫彩/霓虹元素。
 * - 图片尺寸与位置按 PDF 矢量图元 bbox 比例还原。
 */

:root {
  --color-bg: #f5f6f8;          /* 页面底色，浅灰 */
  --color-surface: #ffffff;     /* 纸张/卡片底色 */
  --color-text: #231f20;        /* 主文字：PDF 标题/区块标题/产品标识近黑 */
  --color-field: #898b8e;       /* 字段标签与值：PDF 12pt 灰 */
  --color-body: #6d6e71;        /* 说明/图例/安全文字 */
  --color-note: #939598;        /* 注释/回收符号说明 */
  --color-bullet: #808285;      /* 回收列表条目 */
  --color-text-muted: #6d6e71;  /* 次要文字 */
  --color-border: #c4c8cf;      /* 表格/分隔线 */
  --color-accent: #1a5c8f;      /* 语言选择器/错误页强调色 */
  --color-accent-dark: #12456e; /* 强调色加深 */
  --radius: 4px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

[hidden] {
  display: none !important;
}

/* ===== 展示模式：A4 纸张风格 ===== */
#display-mode {
  padding: 24px 16px 48px;
}

#disclosure {
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 36px 40px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* 页头：左 logo、右语言选择器 */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.logo-left {
  height: 44px;
  width: auto;
}

#lang-select {
  padding: 4px 8px;
  font-size: 14px;
  color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* 主标题：PDF 20pt #231F20 */
.doc-title {
  margin: 0 0 18px;
  font-size: 26.7px; /* 20pt */
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
}

/* 通用区块 */
#disclosure section {
  margin-bottom: 18px;
}

/* 符合性声明：源文档无正文，加大下方留白模拟 PDF 中的空档 */
#disclosure section:has(> h2:last-child) {
  margin-bottom: 48px;
}

#disclosure h2 {
  margin: 0 0 8px;
  font-size: 20px; /* ~15pt */
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

/* 产品标识：与制造商/电池信息同用 info-item 键值对样式，右侧产品照片 */
.identity-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.identity-row .info-grid {
  flex: 1 1 0;
  min-width: 0;
}

/* 产品标识区字段：PDF 18pt 黑色抬头，区别于正文灰色字段 */
.product-identity .info-item {
  color: var(--color-text);
  font-size: 24px; /* 18pt */
  font-weight: 600;
}

.product-photo {
  height: 80px; /* 全页图片统一高度 */
  width: auto;
  flex-shrink: 0;
}

/* 信息键值对（制造商、电池基本信息等）：PDF 12pt #898B8E，标签与值同色 */
.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 24px;
  margin: 0;
}

.info-item {
  display: flex;
  gap: 8px;
  padding: 3px 0;
  font-size: 16px; /* 12pt */
  color: var(--color-field);
}

.info-item dt {
  flex: 0 0 auto;
}

.info-item dd {
  margin: 0;
  word-break: break-word;
}

/* 电池基本信息：左侧列表、右侧电池符号 */
.battery-info-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.battery-info-row .info-grid {
  flex: 1 1 0;
  min-width: 0;
}

.battery-symbol {
  height: 80px; /* 全页图片统一高度 */
  width: auto;
  flex-shrink: 0;
  margin-top: 4px;
}

/* 危险物质与安全：PDF 全宽上下堆叠（表 → 图例 → 灭火器图 → 说明） */
.hazard-section {
  margin-bottom: 18px;
}

/* 灭火器示意图：含 Class D / OR / water-based 文字标签，居中 */
.fire-img {
  display: block;
  height: 80px; /* 全页图片统一高度 */
  width: auto;
  margin: 14px auto 10px;
}

/* 灭火说明：PDF 12pt #6D6E71 左对齐 */
.safety-text {
  margin: 0;
  font-size: 16px; /* 12pt */
  color: var(--color-body);
}

/* 关键原材料：键值对左对齐，图标单独在剩余空间居中 */
.materials-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.materials-grid {
  flex: 0 0 auto; /* 按内容宽度收缩，保持左对齐 */
  min-width: 0;
}

.materials-img {
  height: 80px; /* 全页图片统一高度 */
  width: auto;
  flex: 1 1 auto; /* 占满剩余空间 */
  object-fit: contain; /* 图片按原比例在剩余空间内居中显示 */
}

.section-note {
  font-size: 13.3px; /* 10pt */
  color: var(--color-note);
  font-weight: 400; /* 标题加粗，注释用常规 */
}

/* 回收标识 + 说明：一行居中，位于列表上方 */
.recycle-symbol-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
}

.recycle-symbol {
  height: 80px; /* 全页图片统一高度 */
  width: auto;
  flex-shrink: 0;
}

.symbol-note {
  margin: 0;
  font-size: 16px; /* 12pt */
  color: var(--color-note);
  white-space: pre-line; /* 允许文案里的 \n 换行 */
}

.recycle-list {
  margin: 0;
  padding-left: 18px;
}

.recycle-list li {
  margin-bottom: 5px;
  font-size: 13.3px; /* 10pt */
  color: var(--color-bullet);
}

/* ===== 表格 ===== */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 0;
}

/* 有害物质限值表：PDF 表头 7.6pt #010202 */
.substances-table {
  min-width: 680px;
}

.substances-table th,
.substances-table td {
  padding: 5px 6px;
  font-size: 10px; /* 7.6pt */
  text-align: center;
  color: #010202;
  border: 1px solid var(--color-border);
  vertical-align: middle;
}

.substances-table th {
  background: #f3f4f6;
  font-weight: 700;
}

.substances-table th:first-child,
.substances-table td:first-child {
  text-align: left;
  min-width: 90px;
  font-weight: 500;
  position: sticky;
  left: 0;
  background: var(--color-surface);
}

.substances-table th:first-child {
  background: #eef0f2;
}

/* ○ 标记：PDF 12pt，比表头 7.6pt 大 */
.substances-table td.mark {
  font-size: 16px; /* 12pt */
}

/* 图例：PDF 12pt #6D6E71 */
.legend {
  margin-top: 8px;
  font-size: 16px; /* 12pt */
  color: var(--color-body);
}

.legend p {
  margin: 0 0 4px;
}

/* ===== 错误模式 ===== */
#error-mode {
  display: flex;
  justify-content: center;
  padding: 80px 16px;
}

.error-card {
  max-width: 460px;
  text-align: center;
}

.error-card h1 {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-accent-dark);
}

.error-card p {
  color: var(--color-text-muted);
  margin: 12px 0 24px;
}

/* ===== 响应式 =====
 * 移动端策略：布局与桌面端完全一致，只等比缩小字号/图片/间距。
 * 不改变排列方向，图片宽度用 clamp 保证窄屏不挤爆。
 */
@media (max-width: 720px) {
  /* 纸张铺满全屏：去掉外边距、边框与阴影 */
  #display-mode {
    padding: 0;
  }

  #disclosure {
    border: none;
    box-shadow: none;
    padding: 16px 12px 24px;
  }

  .doc-title {
    font-size: 21px;
  }

  #disclosure h2 {
    font-size: 17px;
  }

  /* 产品标识字段等比缩小（桌面 24px） */
  .product-identity .info-item {
    font-size: 19px;
  }

  .info-item {
    font-size: 14px;
    gap: 6px;
  }

  /* 布局保持 row，图片缩小但仍并排 */
  .identity-row {
    gap: 12px;
  }

  .product-photo {
    height: 56px;
  }

  .battery-info-row {
    gap: 12px;
  }

  .battery-symbol {
    height: 56px;
  }

  .materials-row {
    gap: 10px;
  }

  .materials-img {
    height: 56px;
    flex: 0 0 auto;
  }

  .fire-img {
    height: 64px;
  }

  .recycle-symbol-row {
    gap: 10px;
  }

  .recycle-symbol {
    height: 56px;
  }

  .symbol-note {
    font-size: 14px;
  }

  .recycle-list li {
    font-size: 12px;
  }

  .page-head img {
    height: 32px;
  }

  /* 有害物质表等比缩小：取消 min-width、字号/内边距同步缩，整表收进容器不再横向滚动 */
  .substances-table {
    min-width: 0;
    width: 100%;
  }

  .substances-table th,
  .substances-table td {
    padding: 3px 2px;
    font-size: 7.5px;
    word-break: break-word;
  }

  .substances-table td.mark {
    font-size: 12px;
  }

  .substances-table th:first-child,
  .substances-table td:first-child {
    min-width: 0;
    position: static;
  }
}