/* PhoneRail 需求文档站 —— 主题定制
   取色：品牌青（板子的阻焊）+ 警示琥珀（铜箔）。
   两处非默认的排版决定：
   1) 正文加宽到 1080px —— 文档里 5~6 列的需求表在 688px 下会被压成一堆折行；
   2) ⚠️ / ✅ 开头的引用块渲染成告警卡片（转换在 config.mts 的 markdown 插件里）。 */

:root {
  --vp-c-brand-1: #0d8074;
  --vp-c-brand-2: #0f766e;
  --vp-c-brand-3: #115e59;
  --vp-c-brand-soft: rgba(13, 148, 136, 0.14);

  --vp-layout-max-width: 1560px;
  --vp-sidebar-width: 300px;

  --rail-warn: #b45309;
  --rail-warn-bg: rgba(245, 158, 11, 0.09);
  --rail-warn-border: #f59e0b;
  --rail-ok: #15803d;
  --rail-ok-bg: rgba(34, 197, 94, 0.09);
  --rail-ok-border: #22c55e;

  --vp-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC',
    sans-serif;
}

.dark {
  --vp-c-brand-1: #2dd4bf;
  --vp-c-brand-2: #14b8a6;
  --vp-c-brand-3: #0d9488;
  --vp-c-brand-soft: rgba(45, 212, 191, 0.16);

  --rail-warn: #fbbf24;
  --rail-warn-bg: rgba(245, 158, 11, 0.12);
  --rail-warn-border: #b45309;
  --rail-ok: #4ade80;
  --rail-ok-bg: rgba(34, 197, 94, 0.11);
  --rail-ok-border: #15803d;
}

/* ---------- 版心 ---------- */

.VPDoc.has-aside .content-container {
  max-width: 1080px;
}
.VPDoc:not(.has-sidebar) .content {
  max-width: 1080px;
}

/* ---------- 表格：这份文档主要就是表 ---------- */

.vp-doc table {
  display: block;
  width: max-content;
  min-width: 100%;
  max-width: 100%;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
  border-collapse: collapse;
}

.vp-doc th {
  background: var(--vp-c-bg-soft);
  font-size: 13px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.vp-doc th,
.vp-doc td {
  padding: 7px 12px;
  vertical-align: top;
}

/* 需求编号（表格首列里的 **FR-1**）等宽显示，便于扫读与引用 */
.vp-doc table td:first-child > strong {
  font-family: var(--vp-font-family-mono);
  font-size: 0.92em;
  font-weight: 600;
  color: var(--vp-c-brand-1);
  white-space: nowrap;
}

/* 首列是编号 / 短标签，别让它折行 */
.vp-doc table td:first-child {
  white-space: nowrap;
}
/* …但纯文字的首列（术语表、风险表）允许折 */
.vp-doc table td:first-child:not(:has(> strong)) {
  white-space: normal;
}

/* ---------- 告警卡片（config.mts 里给 blockquote 打的 class） ---------- */

.vp-doc blockquote.callout {
  margin: 20px 0;
  padding: 14px 18px;
  border-radius: 8px;
  border-left-width: 4px;
  border-left-style: solid;
}

.vp-doc blockquote.callout > p {
  margin: 0;
  color: var(--vp-c-text-1);
}
.vp-doc blockquote.callout > p + p {
  margin-top: 10px;
}

.vp-doc blockquote.callout-warn {
  background: var(--rail-warn-bg);
  border-left-color: var(--rail-warn-border);
}
.vp-doc blockquote.callout-warn strong {
  color: var(--rail-warn);
}

.vp-doc blockquote.callout-ok {
  background: var(--rail-ok-bg);
  border-left-color: var(--rail-ok-border);
}
.vp-doc blockquote.callout-ok strong {
  color: var(--rail-ok);
}

/* ---------- 矢量框图（config.mts 把 ```diagram=xxx 换成内联 SVG） ---------- */

:root {
  --dg-panel-fill: #f4f7f7;
  --dg-panel-line: #ccd8d5;
  --dg-box-fill: #ffffff;
  --dg-box-line: #9aaeaa;
  --dg-line: #7d918c;
  --dg-key-fill: #e3f4f1;
  --dg-key-line: #0d8074;
  --dg-hot-fill: #fdf3e3;
  --dg-hot-line: #d99b3a;
  --dg-hard-fill: #f0f5ea;
  --dg-hard-line: #7fa05e;
}

.dark {
  --dg-panel-fill: #1a2220;
  --dg-panel-line: #33413d;
  --dg-box-fill: #222d2b;
  --dg-box-line: #4d5f5a;
  --dg-line: #8aa19b;
  --dg-key-fill: #113029;
  --dg-key-line: #2dd4bf;
  --dg-hot-fill: #302516;
  --dg-hot-line: #b57f2e;
  --dg-hard-fill: #1e2a1a;
  --dg-hard-line: #6f8d52;
}

.vp-doc figure.dg {
  margin: 24px 0;
  padding: 0;
  overflow-x: auto;
}

/* 太窄的屏幕上让图横向滚动而不是把字压成一团 */
.vp-doc figure.dg svg {
  display: block;
  width: 100%;
  min-width: 560px;
  height: auto;
}

.vp-doc figure.dg .dg-panel {
  fill: var(--dg-panel-fill);
  stroke: var(--dg-panel-line);
  stroke-width: 1.2;
}
.vp-doc figure.dg .dg-box {
  fill: var(--dg-box-fill);
  stroke: var(--dg-box-line);
  stroke-width: 1.2;
}
.vp-doc figure.dg .dg-key {
  fill: var(--dg-key-fill);
  stroke: var(--dg-key-line);
  stroke-width: 1.6;
}
.vp-doc figure.dg .dg-hot {
  fill: var(--dg-hot-fill);
  stroke: var(--dg-hot-line);
  stroke-width: 1.4;
}
.vp-doc figure.dg .dg-hard {
  fill: var(--dg-hard-fill);
  stroke: var(--dg-hard-line);
  stroke-width: 1.4;
}

.vp-doc figure.dg .dg-wire {
  stroke: var(--dg-line);
  stroke-width: 1.4;
  fill: none;
}
.vp-doc figure.dg .dg-dash {
  stroke-dasharray: 4 3;
}
.vp-doc figure.dg .dg-bus {
  stroke: var(--dg-key-line);
  stroke-width: 1.4;
  fill: none;
}
.vp-doc figure.dg .dg-pins path {
  stroke: var(--dg-box-line);
  stroke-width: 2.2;
  fill: none;
}
.vp-doc figure.dg .dg-head {
  fill: var(--dg-line);
  stroke: none;
}

.vp-doc figure.dg text {
  font-family: var(--vp-font-family-base);
  fill: var(--vp-c-text-1);
}
.vp-doc figure.dg .dg-th {
  font-size: 14px;
  font-weight: 700;
}
.vp-doc figure.dg .dg-t {
  font-size: 13px;
}
.vp-doc figure.dg .dg-s {
  font-size: 11.5px;
  fill: var(--vp-c-text-2);
}
.vp-doc figure.dg .dg-c {
  text-anchor: middle;
}
.vp-doc figure.dg .dg-r {
  text-anchor: end;
}

/* ---------- 标题与正文细节 ---------- */

.vp-doc h2 {
  margin-top: 44px;
  padding-top: 22px;
  border-top-color: var(--vp-c-divider);
}

.vp-doc h3 {
  margin-top: 30px;
}

/* 文档里用 `---` 分节，VitePress 默认 hr 太重，压淡一点 */
.vp-doc hr {
  border-top: 1px solid var(--vp-c-divider);
  opacity: 0.55;
  margin: 36px 0;
}

/* ASCII 框图：等宽 + 不换行，横向滚动 */
.vp-doc div[class*='language-'] pre {
  line-height: 1.5;
}

/* 行内代码里的网络名 / 位号，稍微收一点 */
.vp-doc :not(pre) > code {
  font-size: 0.86em;
  padding: 2px 5px;
}

/* ---------- 侧边栏 ---------- */

.VPSidebarItem.level-1 > .item > .text {
  font-size: 13px;
  color: var(--vp-c-text-2);
}

.VPSidebarItem.level-1 .VPSidebarItem.is-link > .item > .link > .text {
  font-size: 14px;
}

/* ---------- 首页顶部：文档头部那张 元信息表 更像一张卡片 ---------- */

.vp-doc h1 + table {
  margin-top: 18px;
}