/* =====================================================================
   生产组门户 设计零件库 portal-design-system.css  v0.2（第0期-A rev1：底色按老大裁决回淡黄系）
   全站唯一设计源头：色号 / 字号 / 间距 / 圆角 / 边框 / 部件，只从这里取。
   基调：Codex 工程风（老大已拍板）。小圆角 + 1px 发丝线 + 三栏一体。
   类名前缀 pd-（portal design），不与现有 hp2- / ws- / wlc- / mt- 冲突，
   第0期-B 接入时可与旧样式并存、逐页替换。
   规则：
   1. 颜色只许用下面 17 个变量，页面里不许再写十六进制色号。
   2. 字号只有四档（--pd-fs-1..4），不许出现第五档。
   3. 圆角只有 4px（控件/徽章）和 6px（面板/卡片）两档，圆点除外。
   4. 边框一律 1px；2px 只用于焦点环和步骤条当前步左条。
   5. 零外链：字体用系统字体栈，不加载 Google Fonts。
   ===================================================================== */

:root {
  /* ---------- 配色：17 个色号，全门户只允许这些 ---------- */
  /* 主色（门户 VI 墨绿，来自 logo；用于主按钮、链接、选中态、焦点环） */
  --pd-primary:        #076646;  /* 内容面 6.93:1，底色 6.47:1 */
  --pd-primary-hover:  #06573C;
  --pd-primary-soft:   #E6F1EB;  /* 选中行/当前项浅底；其上墨绿字 6.05:1 */
  /* 背景三层：页面与侧栏 / 内容面 / 悬停与表头
     rev1（2026-10-11 老大裁决）：底色回到门户原有的淡黄系（象牙黄/奶油纸方向），
     比 style.css 的 #FFFCE8 略收饱和度，让白一档的内容面能从底色上托出来 */
  --pd-bg:             #FAF6E6;  /* 象牙黄：页面与侧栏 */
  --pd-surface:        #FFFEF8;  /* 奶油白：卡片/面板/中栏 */
  --pd-surface-2:      #FDFAEE;  /* 悬停/表头 */
  /* 文字三档：主文字 / 次文字 / 灰色备注 */
  --pd-text-1:         #1A1617;  /* 内容面 17.75:1，底色 16.56:1 */
  --pd-text-2:         #5D5855;  /* 内容面 6.95:1，底色 6.48:1 */
  --pd-text-3:         #6F6B67;  /* 内容面 5.23:1，象牙黄底 4.88:1，小字也过 AA */
  /* 边框两档：发丝分隔线 / 输入框与次按钮 */
  --pd-border:         #E8E2CE;  /* 暖色发丝线，配淡黄底 */
  --pd-border-strong:  #D3CCB6;
  /* 状态色三种：正常=绿 / 有问题=红 / 久未更新=灰（各配一个浅底） */
  --pd-ok:             #1A7F37;  /* 内容面 5.03:1，底色 4.69:1 */
  --pd-ok-soft:        #E7F4EC;
  --pd-bad:            #B42318;  /* 内容面 6.51:1，底色 6.07:1 */
  --pd-bad-soft:       #FDECEA;
  --pd-stale:          #8A8582;  /* 只用于圆点与图形，灰字一律用 --pd-text-3 */
  --pd-stale-soft:     #F0ECDF;

  /* ---------- 字体：四档，不许第五档 ---------- */
  --pd-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
             "Microsoft YaHei", "Segoe UI", "Noto Sans SC", sans-serif;
  --pd-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --pd-fs-1: 20px;  --pd-lh-1: 28px;  /* 页面大标题 600 */
  --pd-fs-2: 15px;  --pd-lh-2: 22px;  /* 板块标题 600 */
  --pd-fs-3: 14px;  --pd-lh-3: 22px;  /* 正文 400（按钮、输入框、表格同档） */
  --pd-fs-4: 12px;  --pd-lh-4: 18px;  /* 灰色小字备注 400（徽章、表头、时间同档） */
  --pd-fw-regular: 400;
  --pd-fw-strong: 600;

  /* ---------- 间距：4px 基数 ---------- */
  --pd-sp-1: 4px;
  --pd-sp-2: 8px;
  --pd-sp-3: 12px;   /* 卡片间距 */
  --pd-sp-4: 16px;   /* 面板内边距 */
  --pd-sp-5: 24px;   /* 板块间距 */
  --pd-sp-6: 32px;
  --pd-row-h: 40px;        /* 表格行高 */
  --pd-row-h-dense: 32px;  /* 侧栏导航项行高 */
  --pd-ctl-h: 32px;        /* 按钮/输入框高度（桌面） */
  --pd-touch: 44px;        /* 触屏最小点按尺寸 */

  /* ---------- 圆角与边框 ---------- */
  --pd-r-ctl: 4px;    /* 按钮、输入框、徽章 */
  --pd-r-panel: 6px;  /* 卡片、面板、弹层 */
  --pd-line: 1px solid var(--pd-border);
  --pd-line-strong: 1px solid var(--pd-border-strong);
  --pd-shadow-pop: 0 4px 16px rgba(26, 22, 23, 0.08);  /* 只给弹层/下拉，卡片不加阴影 */

  /* ---------- 三栏骨架 ---------- */
  --pd-col-left: 264px;
  --pd-col-right: 288px;
  --pd-topbar-h: 48px;

  --pd-ease: 150ms cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- 基础 ---------- */
.pd-root, .pd-root *, .pd-root *::before, .pd-root *::after { box-sizing: border-box; }
.pd-root {
  margin: 0;
  font-family: var(--pd-font);
  font-size: var(--pd-fs-3); line-height: var(--pd-lh-3);
  font-weight: var(--pd-fw-regular);
  color: var(--pd-text-1);
  background: var(--pd-bg);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
.pd-root [hidden] { display: none !important; }
.pd-root a { color: var(--pd-primary); text-decoration: none; }
.pd-root a:hover { text-decoration: underline; }
.pd-root :focus-visible {
  outline: 2px solid var(--pd-primary); outline-offset: 2px; border-radius: var(--pd-r-ctl);
}

/* ---------- 四档字体 ---------- */
.pd-h1   { font-size: var(--pd-fs-1); line-height: var(--pd-lh-1); font-weight: var(--pd-fw-strong); margin: 0; }
.pd-h2   { font-size: var(--pd-fs-2); line-height: var(--pd-lh-2); font-weight: var(--pd-fw-strong); margin: 0; }
.pd-body { font-size: var(--pd-fs-3); line-height: var(--pd-lh-3); font-weight: var(--pd-fw-regular); margin: 0; }
.pd-note { font-size: var(--pd-fs-4); line-height: var(--pd-lh-4); color: var(--pd-text-3); margin: 0; }
.pd-text-2 { color: var(--pd-text-2); }
.pd-mono { font-family: var(--pd-mono); }
.pd-strong { font-weight: var(--pd-fw-strong); }
/* =====================================================================
   三栏一体骨架 pd-shell
   三栏贴边满高、1px 发丝线分隔、侧栏与主体同高同底色体系，
   不做「侧栏短块 + 主体长块」的浮动面板（老大否过的分裂感）。
   ===================================================================== */
.pd-shell {
  display: grid;
  grid-template-columns: var(--pd-col-left) minmax(0, 1fr) var(--pd-col-right);
  grid-template-rows: var(--pd-topbar-h) minmax(0, 1fr);
  grid-template-areas: "top top top" "left main right";
  min-height: 100dvh;
}
.pd-shell--two { grid-template-columns: var(--pd-col-left) minmax(0, 1fr); grid-template-areas: "top top" "left main"; }
.pd-topbar {
  grid-area: top;
  display: flex; align-items: center; gap: var(--pd-sp-4);
  padding: 0 var(--pd-sp-4);
  background: var(--pd-surface);
  border-bottom: var(--pd-line);
  position: sticky; top: 0; z-index: 20;
}
.pd-brand { display: flex; align-items: center; gap: var(--pd-sp-2); font-size: var(--pd-fs-2); font-weight: var(--pd-fw-strong); color: var(--pd-text-1); white-space: nowrap; }
.pd-brand__mark { width: 24px; height: 24px; border-radius: var(--pd-r-ctl); background: var(--pd-primary); color: #FFFFFF; display: grid; place-items: center; font-size: var(--pd-fs-4); }
.pd-topbar__spacer { flex: 1; }
.pd-left, .pd-right {
  background: var(--pd-bg);
  overflow-y: auto; min-height: 0;
  padding: var(--pd-sp-3) var(--pd-sp-2) var(--pd-sp-5);
}
.pd-left  { grid-area: left;  border-right: var(--pd-line); }
.pd-right { grid-area: right; border-left: var(--pd-line); padding: var(--pd-sp-4); display: flex; flex-direction: column; gap: var(--pd-sp-5); }
.pd-main  { grid-area: main; min-width: 0; background: var(--pd-surface); display: flex; flex-direction: column; }
.pd-main__head {
  display: flex; align-items: center; gap: var(--pd-sp-3); flex-wrap: wrap;
  padding: var(--pd-sp-4) var(--pd-sp-5) var(--pd-sp-3);
}
.pd-main__body { padding: 0 var(--pd-sp-5) var(--pd-sp-6); }

/* 板块：板块之间 24px，标题与内容 8px */
.pd-section + .pd-section { margin-top: var(--pd-sp-5); }
.pd-section__head { display: flex; align-items: baseline; gap: var(--pd-sp-2); margin-bottom: var(--pd-sp-2); }
.pd-section__head .pd-note { margin-left: auto; }

/* 侧栏导航（分组 + 项） */
.pd-nav-group + .pd-nav-group { margin-top: var(--pd-sp-4); }
.pd-nav-group__title { padding: 0 var(--pd-sp-2) var(--pd-sp-1); font-size: var(--pd-fs-4); line-height: var(--pd-lh-4); color: var(--pd-text-3); font-weight: var(--pd-fw-strong); }
.pd-nav-item {
  display: flex; align-items: center; gap: var(--pd-sp-2);
  width: 100%; min-height: var(--pd-row-h-dense);
  padding: 0 var(--pd-sp-2);
  border: 0; border-radius: var(--pd-r-ctl);
  background: transparent; color: var(--pd-text-2);
  font: inherit; text-align: left; cursor: pointer;
  transition: background var(--pd-ease), color var(--pd-ease);
}
.pd-root a.pd-nav-item:hover, .pd-nav-item:hover { background: var(--pd-surface); color: var(--pd-text-1); text-decoration: none; }
.pd-nav-item.is-active, .pd-nav-item[aria-current="true"], .pd-nav-item[aria-pressed="true"] { background: var(--pd-primary-soft); color: var(--pd-primary); font-weight: var(--pd-fw-strong); }
.pd-nav-item__count { margin-left: auto; font-size: var(--pd-fs-4); color: var(--pd-text-3); font-weight: var(--pd-fw-regular); }

/* =====================================================================
   按钮：只有 主 / 次 / 文字 三种画法（+ 危险变体只换颜色）
   ===================================================================== */
.pd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pd-sp-1);
  height: var(--pd-ctl-h); padding: 0 var(--pd-sp-3);
  border: var(--pd-line-strong); border-radius: var(--pd-r-ctl);
  background: var(--pd-surface); color: var(--pd-text-1);
  font: inherit; font-size: var(--pd-fs-3); white-space: nowrap; cursor: pointer;
  transition: background var(--pd-ease), border-color var(--pd-ease), color var(--pd-ease);
}
.pd-btn:hover { background: var(--pd-surface-2); border-color: var(--pd-text-3); }
.pd-btn:active { background: var(--pd-bg); }
.pd-btn--primary { background: var(--pd-primary); border-color: var(--pd-primary); color: #FFFFFF; font-weight: var(--pd-fw-strong); }
.pd-btn--primary:hover { background: var(--pd-primary-hover); border-color: var(--pd-primary-hover); }
.pd-btn--text { border-color: transparent; background: transparent; color: var(--pd-primary); padding: 0 var(--pd-sp-2); }
.pd-btn--text:hover { background: var(--pd-primary-soft); border-color: transparent; }
.pd-btn--danger { color: var(--pd-bad); }
.pd-btn--danger:hover { background: var(--pd-bad-soft); border-color: var(--pd-bad); }
.pd-btn[disabled], .pd-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.pd-root a.pd-btn:hover { text-decoration: none; }

/* 输入框 / 下拉 / 多行 */
.pd-field { display: flex; flex-direction: column; gap: var(--pd-sp-1); }
.pd-field__label { font-size: var(--pd-fs-4); line-height: var(--pd-lh-4); color: var(--pd-text-2); font-weight: var(--pd-fw-strong); }
.pd-input {
  width: 100%; height: var(--pd-ctl-h); padding: 0 var(--pd-sp-2);
  border: var(--pd-line-strong); border-radius: var(--pd-r-ctl);
  background: var(--pd-surface); color: var(--pd-text-1);
  font: inherit; font-size: var(--pd-fs-3);
}
textarea.pd-input { height: auto; min-height: 72px; padding: var(--pd-sp-2); resize: vertical; }
.pd-input:focus { outline: 2px solid var(--pd-primary); outline-offset: -1px; border-color: var(--pd-primary); }
.pd-field__error { font-size: var(--pd-fs-4); line-height: var(--pd-lh-4); color: var(--pd-bad); }
/* =====================================================================
   筛选栏：一行横排，左侧可切换筛选片（单选），右侧搜索/操作
   ===================================================================== */
.pd-filterbar {
  display: flex; align-items: center; gap: var(--pd-sp-2); flex-wrap: wrap;
  padding: var(--pd-sp-2) 0;
  border-bottom: var(--pd-line);
}
.pd-filterbar__spacer { flex: 1; }
.pd-seg { display: inline-flex; border: var(--pd-line-strong); border-radius: var(--pd-r-ctl); overflow: hidden; }
.pd-seg__item {
  height: 28px; padding: 0 var(--pd-sp-3);
  border: 0; border-right: var(--pd-line); background: var(--pd-surface);
  color: var(--pd-text-2); font: inherit; font-size: var(--pd-fs-4); cursor: pointer;
}
.pd-seg__item:last-child { border-right: 0; }
.pd-seg__item:hover { background: var(--pd-surface-2); color: var(--pd-text-1); }
.pd-seg__item[aria-pressed="true"] { background: var(--pd-primary-soft); color: var(--pd-primary); font-weight: var(--pd-fw-strong); }

/* =====================================================================
   表格：行高 40px，只画行间发丝线（不画竖线、不加斑马纹）
   ===================================================================== */
.pd-table-wrap { overflow-x: auto; }
.pd-table { width: 100%; border-collapse: collapse; font-size: var(--pd-fs-3); }
.pd-table th {
  height: 32px; padding: 0 var(--pd-sp-3);
  text-align: left; white-space: nowrap;
  font-size: var(--pd-fs-4); font-weight: var(--pd-fw-strong); color: var(--pd-text-2);
  background: var(--pd-surface-2); border-bottom: var(--pd-line-strong);
  position: sticky; top: 0; z-index: 1;
}
.pd-table td { height: var(--pd-row-h); padding: 0 var(--pd-sp-3); border-bottom: var(--pd-line); vertical-align: middle; }
.pd-table tbody tr:hover td { background: var(--pd-surface-2); }
.pd-table tr.is-selected td { background: var(--pd-primary-soft); }
.pd-table .pd-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-table tr.pd-row-total td { font-weight: var(--pd-fw-strong); background: var(--pd-bg); }

/* =====================================================================
   徽章：一种画法（1px 描边 + 浅底），颜色只换语义
   ===================================================================== */
.pd-badge {
  display: inline-flex; align-items: center; gap: var(--pd-sp-1);
  height: 20px; padding: 0 6px;
  border: 1px solid var(--pd-border-strong); border-radius: var(--pd-r-ctl);
  background: var(--pd-surface-2); color: var(--pd-text-2);
  font-size: var(--pd-fs-4); line-height: 18px; white-space: nowrap;
}
.pd-badge--primary { border-color: rgba(7, 102, 70, 0.35); background: var(--pd-primary-soft); color: var(--pd-primary); }
.pd-badge--ok      { border-color: rgba(26, 127, 55, 0.35); background: var(--pd-ok-soft); color: var(--pd-ok); }
.pd-badge--bad     { border-color: rgba(180, 35, 24, 0.35); background: var(--pd-bad-soft); color: var(--pd-bad); }
.pd-badge--stale   { border-color: var(--pd-border-strong); background: var(--pd-stale-soft); color: var(--pd-text-3); }

/* =====================================================================
   状态标识：绿点=正常/在线，红点=有问题，灰点=久未更新
   一个 8px 实心圆点 + 文字，识别成本最低；在线点可加缓慢呼吸。
   ===================================================================== */
.pd-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--pd-fs-4); line-height: var(--pd-lh-4); color: var(--pd-text-2); white-space: nowrap; }
.pd-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pd-ok); flex: none; }
.pd-status--bad::before   { background: var(--pd-bad); }
.pd-status--stale::before { background: var(--pd-stale); }
.pd-status--live::before  { animation: pd-breathe 2.4s ease-in-out infinite; }
@keyframes pd-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* =====================================================================
   卡片两档：大卡片（重要/高频功能） / 紧凑小卡片（低频功能，一行一个）
   都是 1px 发丝框 + 6px 圆角，不加阴影，不用大色块。
   ===================================================================== */
.pd-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--pd-sp-2);
  min-height: 112px; padding: var(--pd-sp-4);
  background: var(--pd-surface); border: var(--pd-line); border-radius: var(--pd-r-panel);
  color: var(--pd-text-1);
  transition: border-color var(--pd-ease);
}
.pd-root a.pd-card, .pd-root a.pd-mini, .pd-root a.pd-topic { color: var(--pd-text-1); }
.pd-root a.pd-card:hover, .pd-card.is-link:hover { border-color: var(--pd-primary); text-decoration: none; }
.pd-card__head { display: flex; align-items: center; gap: var(--pd-sp-2); padding-right: 32px; }
.pd-card__code { flex: none; white-space: nowrap; font-family: var(--pd-mono); font-size: var(--pd-fs-4); color: var(--pd-text-3); }
.pd-card__desc { font-size: var(--pd-fs-4); line-height: var(--pd-lh-4); color: var(--pd-text-2); margin: 0; }
.pd-card__foot { margin-top: auto; display: flex; align-items: center; gap: var(--pd-sp-2); }
.pd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--pd-sp-3); }

.pd-mini {
  display: flex; align-items: center; gap: var(--pd-sp-2);
  min-height: 40px; padding: 0 var(--pd-sp-2) 0 var(--pd-sp-3);
  background: var(--pd-surface); border: var(--pd-line); border-radius: var(--pd-r-panel);
  color: var(--pd-text-1); font-size: var(--pd-fs-3);
}
.pd-root a.pd-mini:hover { border-color: var(--pd-primary); text-decoration: none; }
.pd-mini .pd-card__code { min-width: 44px; }
.pd-mini__title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--pd-sp-2); }
.pd-card.is-off, .pd-mini.is-off { color: var(--pd-text-3); background: var(--pd-surface-2); }

/* 星标（收藏进「我的常用」）：卡片右上角，点按区 32px，触屏放大到 44px */
.pd-star {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: var(--pd-r-ctl); background: transparent;
  color: var(--pd-text-3); cursor: pointer;
}
.pd-star svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pd-star[aria-pressed="true"] svg { fill: currentColor; }
.pd-mini .pd-star { position: static; flex: none; }
.pd-star:hover { background: var(--pd-bg); color: var(--pd-text-1); }
.pd-star[aria-pressed="true"] { color: var(--pd-primary); }
/* =====================================================================
   步骤条 pd-steps（三期 SOP 核心零件，样式在此定死）
   圆圈 + 竖线串联；已完成=绿底白勾、竖线变绿；当前步=墨绿描边圈 + 浅底高亮；
   未开始=灰描边空圈。每步：大白话标题（正文档 600）+ 灰色小字说明。
   结构：ol.pd-steps > li.pd-step(.is-done|.is-current) >
         span.pd-step__dot + div.pd-step__body > .pd-step__title + .pd-step__desc
   当前步要加 aria-current="step"。
   ===================================================================== */
.pd-steps { list-style: none; margin: 0; padding: 0; counter-reset: pd-step; }
.pd-step {
  position: relative;
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--pd-sp-3);
  padding: var(--pd-sp-2) var(--pd-sp-2) var(--pd-sp-3);
  border-radius: var(--pd-r-panel);
  counter-increment: pd-step;
}
/* 竖线：从本步圆圈底部连到下一步圆圈顶部 */
.pd-step::before {
  content: ""; position: absolute;
  left: calc(var(--pd-sp-2) + 11px); top: calc(var(--pd-sp-2) + 26px); bottom: calc(-1 * var(--pd-sp-2) + 2px);
  width: 2px; background: var(--pd-border);
}
.pd-step:last-child::before { display: none; }
.pd-step.is-done::before { background: var(--pd-ok); }
.pd-step__dot {
  position: relative; z-index: 1;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--pd-border-strong); background: var(--pd-surface);
  color: var(--pd-text-3); font-size: var(--pd-fs-4); line-height: 1; font-weight: var(--pd-fw-strong);
}
.pd-step__dot::after { content: counter(pd-step); }
.pd-step.is-done .pd-step__dot { background: var(--pd-ok); border-color: var(--pd-ok); color: #FFFFFF; }
.pd-step.is-done .pd-step__dot::after {
  content: ""; width: 10px; height: 5px; margin-top: -2px;
  border-left: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; transform: rotate(-45deg);
}
.pd-step.is-current { background: var(--pd-primary-soft); }
.pd-step.is-current .pd-step__dot { border-color: var(--pd-primary); color: var(--pd-primary); background: var(--pd-surface); }
.pd-step__body { min-width: 0; padding-top: 1px; }
.pd-step__title { display: flex; align-items: center; gap: var(--pd-sp-2); flex-wrap: wrap; font-size: var(--pd-fs-3); line-height: var(--pd-lh-3); font-weight: var(--pd-fw-strong); color: var(--pd-text-1); }
.pd-step:not(.is-done):not(.is-current) .pd-step__title { color: var(--pd-text-2); font-weight: var(--pd-fw-regular); }
.pd-step__desc { margin: 2px 0 0; font-size: var(--pd-fs-4); line-height: var(--pd-lh-4); color: var(--pd-text-3); }
.pd-step__extra { margin-top: var(--pd-sp-2); }
/* 紧凑版：右栏/列表里只看进度（不显示说明） */
.pd-steps--compact .pd-step { padding: 4px 0 var(--pd-sp-2); grid-template-columns: 20px minmax(0,1fr); column-gap: var(--pd-sp-2); }
.pd-steps--compact .pd-step::before { left: 9px; top: 26px; bottom: -2px; }
.pd-steps--compact .pd-step__dot { width: 20px; height: 20px; }
.pd-steps--compact .pd-step__title { font-size: var(--pd-fs-4); line-height: var(--pd-lh-4); padding-top: 1px; }
.pd-steps--compact .pd-step__desc { display: none; }
.pd-steps--compact .pd-step.is-current { background: transparent; }
.pd-steps--compact .pd-step.is-current .pd-step__title { color: var(--pd-primary); }
/* 横向进度（列表行里用）：N 个小段，已完成绿、当前墨绿、未开始灰 */
.pd-progress { display: inline-flex; gap: 2px; vertical-align: middle; }
.pd-progress i { width: 10px; height: 4px; border-radius: 2px; background: var(--pd-border-strong); }
.pd-progress i.is-done { background: var(--pd-ok); }
.pd-progress i.is-current { background: var(--pd-primary); }

/* =====================================================================
   时间显示 pd-time
   规则：列表里显示相对时间（"3小时前"），悬停 title 显示完整北京时间
   "2026-10-10 14:32"；详情页直接显示完整时间。
   接口层统一返回带 +08:00 偏移的 ISO 8601（见 T4 规格），前端只做格式化，
   不再自己猜时区。配套脚本见展示页 pdTime()。
   ===================================================================== */
.pd-time { font-size: var(--pd-fs-4); line-height: var(--pd-lh-4); color: var(--pd-text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-time[title] { cursor: help; text-decoration: underline dotted var(--pd-border-strong); text-underline-offset: 3px; }
.pd-time--full { cursor: default; text-decoration: none; }

/* =====================================================================
   一键复制 pd-copy：易输错内容（指令/编号/长文本）一律配复制按钮
   ===================================================================== */
.pd-copy {
  display: flex; align-items: stretch;
  border: var(--pd-line-strong); border-radius: var(--pd-r-ctl);
  background: var(--pd-surface-2); overflow: hidden;
}
.pd-copy__text {
  flex: 1; min-width: 0; margin: 0; padding: var(--pd-sp-2) var(--pd-sp-3);
  font-family: var(--pd-mono); font-size: var(--pd-fs-4); line-height: var(--pd-lh-4); color: var(--pd-text-1);
  white-space: pre-wrap; word-break: break-all; user-select: all;
}
.pd-copy__btn {
  flex: none; min-width: 64px; padding: 0 var(--pd-sp-3);
  border: 0; border-left: var(--pd-line-strong); background: var(--pd-surface);
  color: var(--pd-primary); font: inherit; font-size: var(--pd-fs-4); font-weight: var(--pd-fw-strong); cursor: pointer;
}
.pd-copy__btn:hover { background: var(--pd-primary-soft); }
.pd-copy__btn.is-copied { color: var(--pd-ok); }
.pd-copy--inline { display: inline-flex; vertical-align: middle; }
.pd-copy--inline .pd-copy__text { padding: 1px var(--pd-sp-2); white-space: nowrap; }
.pd-copy--inline .pd-copy__btn { min-width: 0; padding: 0 var(--pd-sp-2); }
/* =====================================================================
   空状态 pd-empty：说清这里会有什么 + 怎么开始 + 一个主操作
   不用英文徽章、不用装饰符号、不只写「暂无数据」。
   ===================================================================== */
.pd-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--pd-sp-2);
  padding: var(--pd-sp-6) var(--pd-sp-5);
  border: 1px dashed var(--pd-border-strong); border-radius: var(--pd-r-panel);
  background: var(--pd-surface-2); text-align: center;
}
.pd-empty__title { font-size: var(--pd-fs-2); line-height: var(--pd-lh-2); font-weight: var(--pd-fw-strong); color: var(--pd-text-1); margin: 0; }
.pd-empty__desc { font-size: var(--pd-fs-4); line-height: var(--pd-lh-4); color: var(--pd-text-2); margin: 0; max-width: 32em; }
.pd-empty .pd-btn { margin-top: var(--pd-sp-2); }

/* 骨架屏（加载中）与内联错误（可重试） */
.pd-skeleton { height: 12px; border-radius: 2px; background: linear-gradient(90deg, var(--pd-stale-soft) 25%, var(--pd-surface-2) 50%, var(--pd-stale-soft) 75%); background-size: 200% 100%; animation: pd-shimmer 1.2s linear infinite; }
@keyframes pd-shimmer { to { background-position: -200% 0; } }
.pd-alert { display: flex; align-items: center; gap: var(--pd-sp-2); padding: var(--pd-sp-2) var(--pd-sp-3); border: 1px solid rgba(180, 35, 24, 0.35); border-radius: var(--pd-r-ctl); background: var(--pd-bad-soft); color: var(--pd-bad); font-size: var(--pd-fs-4); line-height: var(--pd-lh-4); }
.pd-alert .pd-btn { margin-left: auto; height: 26px; font-size: var(--pd-fs-4); }

/* =====================================================================
   论坛列表行 pd-topic（紧凑行式，非卡片）
   6 字段：标题 | 一句话现状 | 分类徽章 | 当前谁在做 | 回复数 | 最后更新
   桌面四列：主信息（标题+现状+徽章） / 谁在做 / 回复 / 最后更新
   ===================================================================== */
.pd-topics { border-top: var(--pd-line); }
.pd-topics__head, .pd-topic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px 56px 88px;
  column-gap: var(--pd-sp-3); align-items: center;
  padding: 0 var(--pd-sp-3);
}
.pd-topics__head { height: 32px; font-size: var(--pd-fs-4); color: var(--pd-text-3); border-bottom: var(--pd-line); background: var(--pd-surface-2); }
.pd-topic { min-height: 60px; padding-top: var(--pd-sp-2); padding-bottom: var(--pd-sp-2); border-bottom: var(--pd-line); color: var(--pd-text-1); cursor: pointer; }
.pd-root a.pd-topic:hover, .pd-topic:hover { background: var(--pd-surface-2); text-decoration: none; }
.pd-topic.is-selected { background: var(--pd-primary-soft); box-shadow: inset 2px 0 0 var(--pd-primary); }
.pd-topic__main { min-width: 0; }
.pd-topic__titleline { display: flex; align-items: center; gap: var(--pd-sp-2); min-width: 0; }
.pd-topic__title { font-size: var(--pd-fs-3); line-height: var(--pd-lh-3); font-weight: var(--pd-fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pd-topic__status-line { display: block; margin-top: 2px; font-size: var(--pd-fs-4); line-height: var(--pd-lh-4); color: var(--pd-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-topic__badges { display: flex; gap: var(--pd-sp-1); flex: none; }
.pd-topic__who, .pd-topic__num, .pd-topic__time { font-size: var(--pd-fs-4); line-height: var(--pd-lh-4); color: var(--pd-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-topic__num { text-align: right; font-variant-numeric: tabular-nums; }
.pd-topic.is-stale .pd-topic__title { color: var(--pd-text-2); }

/* 时间线（帖子内） + 记一笔 */
.pd-timeline { list-style: none; margin: 0; padding: 0; }
.pd-entry { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--pd-sp-3); padding: var(--pd-sp-3) 0; border-bottom: var(--pd-line); }
.pd-entry__no { font-family: var(--pd-mono); font-size: var(--pd-fs-4); line-height: var(--pd-lh-3); color: var(--pd-text-3); text-align: right; }
.pd-entry__head { display: flex; align-items: center; gap: var(--pd-sp-2); flex-wrap: wrap; }
.pd-entry__who { font-weight: var(--pd-fw-strong); }
.pd-entry__content { margin: var(--pd-sp-1) 0 0; white-space: pre-wrap; word-break: break-word; }
.pd-entry__quote { margin: var(--pd-sp-2) 0 0; padding: var(--pd-sp-2) var(--pd-sp-3); background: var(--pd-surface-2); border-left: 2px solid var(--pd-border-strong); border-radius: 0 var(--pd-r-ctl) var(--pd-r-ctl) 0; font-size: var(--pd-fs-4); line-height: var(--pd-lh-4); color: var(--pd-text-2); }
.pd-entry__actions { display: flex; gap: var(--pd-sp-1); margin-top: var(--pd-sp-1); margin-left: calc(-1 * var(--pd-sp-2)); }
.pd-entry__actions .pd-btn { height: 26px; font-size: var(--pd-fs-4); }
.pd-composer { border: var(--pd-line-strong); border-radius: var(--pd-r-panel); background: var(--pd-surface); }
.pd-composer textarea { display: block; width: 100%; min-height: 72px; padding: var(--pd-sp-3); border: 0; border-radius: var(--pd-r-panel) var(--pd-r-panel) 0 0; resize: vertical; font: inherit; font-size: var(--pd-fs-3); color: var(--pd-text-1); background: transparent; }
.pd-composer textarea:focus { outline: none; }
.pd-composer:focus-within { border-color: var(--pd-primary); box-shadow: 0 0 0 1px var(--pd-primary); }
.pd-composer__bar { display: flex; align-items: center; gap: var(--pd-sp-2); flex-wrap: wrap; padding: var(--pd-sp-2); border-top: var(--pd-line); background: var(--pd-surface-2); border-radius: 0 0 var(--pd-r-panel) var(--pd-r-panel); }
.pd-composer__bar .pd-seg__item { height: 26px; }

/* 键值清单（右栏状态面板用） */
.pd-kv { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--pd-sp-2) var(--pd-sp-3); margin: 0; font-size: var(--pd-fs-3); }
.pd-kv dt { font-size: var(--pd-fs-4); line-height: var(--pd-lh-3); color: var(--pd-text-3); }
.pd-kv dd { margin: 0; min-width: 0; }
.pd-list { list-style: none; margin: 0; padding: 0; }
.pd-list li { padding: var(--pd-sp-2) 0; border-bottom: var(--pd-line); }
.pd-list li:last-child { border-bottom: 0; }

/* =====================================================================
   响应式：≤1100px 右栏收起为主区上方的折叠面板；≤768px 单列，左栏变横向分类条
   ===================================================================== */
@media (max-width: 1100px) {
  .pd-shell { grid-template-columns: var(--pd-col-left) minmax(0, 1fr); grid-template-areas: "top top" "left main" "left right"; grid-template-rows: var(--pd-topbar-h) auto 1fr; }
  .pd-right { border-left: 0; border-top: var(--pd-line); }
}
@media (max-width: 768px) {
  :root { --pd-ctl-h: var(--pd-touch); }
  .pd-shell, .pd-shell--two { display: flex; flex-direction: column; }
  .pd-topbar { flex-wrap: wrap; height: auto; min-height: var(--pd-topbar-h); padding: var(--pd-sp-2) var(--pd-sp-3); }
  .pd-left { border-right: 0; border-bottom: var(--pd-line); padding: var(--pd-sp-2) var(--pd-sp-3); display: flex; gap: var(--pd-sp-2); overflow-x: auto; }
  .pd-left .pd-nav-group { margin: 0; display: flex; gap: var(--pd-sp-1); align-items: center; flex: none; }
  .pd-left .pd-nav-group__title { padding: 0 var(--pd-sp-1); white-space: nowrap; }
  .pd-left .pd-nav-item { width: auto; min-height: var(--pd-touch); white-space: nowrap; padding: 0 var(--pd-sp-3); background: var(--pd-surface); border: var(--pd-line); }
  .pd-main__head, .pd-main__body { padding-left: var(--pd-sp-3); padding-right: var(--pd-sp-3); }
  .pd-topics__head { display: none; }
  .pd-topic { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .pd-topic__main { grid-column: 1 / -1; }
  .pd-topic__who { grid-column: 1; }
  .pd-topic__num { display: none; }
  .pd-topic__time { grid-column: 2; grid-row: 2; text-align: right; }
  .pd-topic__status-line { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .pd-topbar .pd-input[type="search"] { order: 9; flex: 1 0 100%; max-width: none; }
  .pd-star { width: var(--pd-touch); height: var(--pd-touch); top: 2px; right: 2px; }
  .pd-seg__item { height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-status--live::before, .pd-skeleton { animation: none; }
  .pd-root * { transition: none !important; }
}