/* ═══════════════════════════════════════════════════════════════════════
   OEM「Technical Customization」页 —— 本页专属组件（设计稿 03.png，2026-09-20）
   通用原语（band / 区头 / 按钮 / 药丸 / 卡片 / 键值行 / 网关卡 / 两栏）
   在 assets/css/oem-flow.css —— 本文件只放 otx- 前缀的部件。
   ═══════════════════════════════════════════════════════════════════ */

/* ── 01 intro ─────────────────────────────────────────────────── */
.otx-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 28px;
  align-items: start;
}
.otx-intro-copy .osp-actions { margin-top: 24px; }
.otx-intro-panels { display: grid; gap: 12px; }

/* ── 通用栏位：主区 + 右栏 / 分栏 ─────────────────────────────── */
.otx-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 356px);
  gap: 18px;
  align-items: start;
}
.otx-side--gap { margin-top: 14px; }
.otx-cols { display: grid; gap: 18px; align-items: start; }
.otx-cols--context { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.otx-mini-title {
  margin: 0 0 6px;
  color: var(--z02-text);
  font-size: var(--z02-fs-card-title);
  /* 2026-09-20：补 line-height。卡题档基准 = .osp-card-title 的 --z02-lh-card-title(26)；
     本类此前没写 → 运行时退回 normal，与族内其余卡题差 ~5px。 */
  line-height: var(--z02-lh-card-title);
  font-weight: var(--z02-fw-semibold);
}

/* ── 芯片组（Trigger / Condition / Action …） ─────────────────── */
.otx-flow { display: grid; gap: 12px; align-items: start; }
.otx-flow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.otx-flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.otx-group {
  box-sizing: border-box;
  padding: 14px 13px 12px;
  border: 1px solid var(--z02-border-line);
  border-radius: 7px;
  background: var(--z02-surface);
  min-width: 0;
}
.otx-group-head {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--z02-border-line);
}
.otx-group-icon {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: var(--z02-surface-selected);
}
.otx-group-icon img { width: 16px; height: 16px; object-fit: contain; }
/* 2026-09-20：补 line-height / letter-spacing。这是面板题档，基准 = .osp-title
   (24/30/-0.02em/600)；此前只给了字号 → 运行时行高退回 normal。 */
.otx-group-head strong { color: var(--z02-text); font-size: var(--z02-fs-panel-title); line-height: var(--z02-lh-panel-title); letter-spacing: var(--z02-ls-component-title); font-weight: var(--z02-fw-semibold); }
.otx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.otx-chip {
  padding: 6px 10px;
  border: 1px solid var(--z02-border-line);
  border-radius: 999px;
  background: var(--z02-surface);
  color: var(--z02-text-muted);
  font-family: var(--font);
  font-size: var(--z02-fs-label);
  line-height: var(--z02-lh-panel-title);
  cursor: pointer;
}
.otx-chip:hover { border-color: var(--z02-accent); color: var(--z02-accent); }
.otx-chip.is-on {
  border-color: var(--z02-accent);
  background: var(--z02-surface-selected);
  color: var(--z02-accent);
  font-weight: var(--z02-fw-medium);
}
.otx-arrow {
  align-self: center;
  justify-self: center;
  color: var(--z02-text-faint);
  font-size: var(--z02-fs-copy);
}
/* 4 组带箭头时：组-箭头-组-箭头 交替，用 7 列网格承载 */
.otx-flow--4:has(> .otx-arrow) { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; }
.otx-flow--3:has(> .otx-arrow) { grid-template-columns: 1fr auto 1fr auto 1fr; }

/* ── 03 汇总头（标题 + 加号按钮同行） ────────────────────────── */
.otx-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.otx-sum-head .osp-card-title { border-bottom: 0; padding-bottom: 0; margin-bottom: 6px; }
.otx-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 11px;
  border-radius: 5px;
  background: var(--z02-surface-selected);
  color: var(--z02-text-muted);
  font-size: var(--z02-fs-label);
  line-height: var(--z02-lh-card-title);
}

/* ── 04 硬件：主区两组卡 + 参考文件卡 ─────────────────────────── */
.otx-hw-main { display: grid; gap: 12px; min-width: 0; }
.otx-ref-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.otx-ref-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
.otx-ref {
  box-sizing: border-box;
  display: grid;
  gap: 9px;
  align-content: start;
  padding: 14px 13px;
  border: 1px solid var(--z02-border-line);
  border-radius: 7px;
  background: var(--z02-surface);
  min-width: 0;
}
.otx-ref > strong { color: var(--z02-text); font-size: var(--z02-fs-action); font-weight: var(--z02-fw-semibold); }
.otx-files { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; }
.otx-file {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid var(--z02-border-line);
  border-radius: 5px;
  background: var(--z02-surface-page);
  color: var(--z02-text-muted);
  font-size: var(--z02-fs-label);
  overflow-wrap: anywhere;
}
.otx-ref .osp-pill { justify-self: start; }
.otx-upload {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--z02-border-line);
  border-radius: 5px;
  color: var(--z02-text);
  font-size: var(--z02-fs-label);
  cursor: pointer;
  justify-self: start;
}
.otx-upload:hover { border-color: var(--z02-accent); color: var(--z02-accent); }

/* ── 05 现状 vs 请求行为 ──────────────────────────────────────── */
.otx-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.otx-line {
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--z02-border-line);
  color: var(--z02-text);
  font-size: var(--z02-fs-copy);
  /* 2026-09-20：补 line-height。正文档基准 = --z02-lh-copy(27.2)；此前没写 →
     与 .osp-lead / .opx-mini-copy 等同档文本行高不一致。 */
  line-height: var(--z02-lh-copy);
}
.otx-line:last-child { border-bottom: 0; }
.otx-line--pending { color: var(--z02-text-muted); }

/* ── 06 UI 预览 ───────────────────────────────────────────────── */
.otx-tabs { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.otx-tab {
  padding: 5px 11px;
  border: 1px solid var(--z02-border-line);
  border-radius: 999px;
  background: var(--z02-surface);
  color: var(--z02-text-muted);
  font-family: var(--font);
  font-size: var(--z02-fs-label);
  cursor: pointer;
}
.otx-tab.is-active { border-color: var(--z02-accent); background: var(--z02-surface-selected); color: var(--z02-accent); font-weight: var(--z02-fw-medium); }
.otx-preview {
  padding: 13px;
  border: 1px solid var(--z02-border-line);
  border-radius: 7px;
  background: var(--z02-surface-page);
}
.otx-preview-head { margin-bottom: 9px; color: var(--z02-text); font-size: var(--z02-fs-action); font-weight: var(--z02-fw-semibold); }
.otx-device {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 6px;
  background: var(--z02-surface);
  color: var(--z02-text);
  font-size: var(--z02-fs-label);
}
.otx-device + .otx-device { margin-top: 6px; }
.otx-switch {
  position: relative;
  width: 32px;
  height: 17px;
  border-radius: 999px;
  background: var(--z02-border-line);
  flex: 0 0 auto;
}
.otx-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--z02-surface);
  transition: left .16s ease;
}
.otx-switch.is-on { background: var(--z02-accent); }
.otx-switch.is-on::after { left: 17px; }
.otx-preview-empty {
  margin: 0;
  padding: 14px 4px;
  color: var(--z02-text-faint);
  font-size: var(--z02-fs-label);
  text-align: center;
}
.otx-preview-note { margin: 9px 0 0; color: var(--z02-text-faint); font-size: var(--z02-fs-label); text-align: center; }

/* ── 08 简报：6 张状态卡 ─────────────────────────────────────── */
.otx-brief-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.otx-brief-card {
  box-sizing: border-box;
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 13px 12px;
  border: 1px solid var(--z02-border-line);
  border-radius: 7px;
  background: var(--z02-surface);
  min-width: 0;
}
.otx-brief-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.otx-brief-card-head > span:first-child { color: var(--z02-text-muted); font-size: var(--z02-fs-label); }
.otx-brief-card > strong { color: var(--z02-text); font-size: var(--z02-fs-action); font-weight: var(--z02-fw-medium); }
.otx-brief-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(300px, 356px);
  gap: 18px;
  align-items: start;
  margin-top: 14px;
}
.otx-brief-status { position: sticky; top: 84px; }
.otx-copy-note {
  margin: 10px 0 0;
  padding: 9px 11px;
  border-radius: 5px;
  background: var(--z02-surface-selected);
  color: var(--z02-accent);
  font-size: var(--z02-fs-label);
  line-height: var(--z02-lh-card-title);
}
.otx-note { margin: 10px 0 0; color: var(--z02-text-faint); font-size: var(--z02-fs-label); line-height: var(--z02-lh-card-title); }

/* ── 09 下一步 ────────────────────────────────────────────────── */
.otx-next-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.otx-next-card {
  display: grid;
  gap: 7px;
  justify-items: start;
  align-content: start;
  padding: 18px 16px;
  border: 1px solid var(--z02-border-line);
  border-radius: 7px;
  background: var(--z02-surface);
  text-decoration: none;
}
.otx-next-card:hover { border-color: var(--z02-accent); box-shadow: 0 8px 22px rgba(23,53,101,.08); }
.otx-next-icon { width: 36px; height: 36px; border-radius: 6px; display: grid; place-items: center; background: var(--z02-surface-selected); }
.otx-next-icon img { width: 20px; height: 20px; object-fit: contain; }
.otx-next-card strong { color: var(--z02-text); font-size: var(--z02-fs-action); font-weight: var(--z02-fw-semibold); }
.otx-next-card > span { color: var(--z02-text-muted); font-size: var(--z02-fs-label); line-height: var(--z02-lh-card-title); }
.otx-next-card b { margin-top: 6px; color: var(--z02-accent); font-size: var(--z02-fs-label); font-weight: var(--z02-fw-medium); }

/* ── 断点：只做 PC（≤1679），窄屏保底不破版 ────────────────────── */
@media (max-width: 1280px) {
  .otx-intro-grid { grid-template-columns: 1fr; }
  .otx-side, .otx-cols--context { grid-template-columns: 1fr; }
  .otx-flow--4, .otx-flow--4:has(> .otx-arrow) { grid-template-columns: repeat(2, 1fr); }
  .otx-flow--3, .otx-flow--3:has(> .otx-arrow) { grid-template-columns: repeat(2, 1fr); }
  .otx-arrow { display: none; }
  .otx-ref-row { grid-template-columns: repeat(2, 1fr); }
  .otx-brief-cards { grid-template-columns: repeat(3, 1fr); }
  .otx-brief-grid { grid-template-columns: 1fr 1fr; }
  .otx-next-row { grid-template-columns: repeat(2, 1fr); }
  .otx-brief-status { position: static; }
}
@media (max-width: 900px) {
  .otx-flow--4, .otx-flow--3, .otx-ref-row, .otx-ref-row--2 { grid-template-columns: 1fr; }
  .otx-compare { grid-template-columns: 1fr; }
  .otx-brief-cards, .otx-brief-grid, .otx-next-row { grid-template-columns: 1fr; }
}