/* 监督管理 · 预警信息 · 预警详情（页面词表 wnk-） */

.wnk-page {
  /* 头部浅蓝底与灰底填充：取色与说事详情（spkd-）一致 */
  --wnk-head-bg: #f4f6fd;
  --wnk-fill: #f3f4f6;
  min-height: 100%;
  padding-bottom: var(--space-6);
  background: var(--color-page);
}

.wnk-empty {
  margin: var(--space-8, 64px) var(--space-4) 0;
  color: var(--color-text-tertiary);
  font-size: 14px;
  text-align: center;
}

/* ===== 头部：预警类型 + 状态徽标 ===== */
.wnk-head {
  padding: var(--space-4) var(--space-4) var(--space-4);
  background: var(--wnk-head-bg);
}

.wnk-head__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* 头部标题字号对齐全站详情页头部标题（tdetail-header__title = 18px/600） */
.wnk-head__title {
  margin: 0;
  color: var(--color-text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

/* 状态徽标：文案与色值均由 JS 取 WARNING_STATUS_MAP，与待办列表状态标签同源；
   字号对齐全站详情页头部徽标（tdetail-header__stage = 12px） */
.wnk-status {
  flex: none;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* ===== 概要信息：预警编号 / 预警等级 / 预警时间 / 所属区划 ===== */
.wnk-info {
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--color-surface);
}

.wnk-info__row {
  margin: 0 0 var(--space-2);
  font-size: 14px;
  line-height: 1.6;
}

.wnk-info__row:last-child {
  margin-bottom: 0;
}

.wnk-info__label {
  color: var(--color-text-secondary);
}

.wnk-info__value {
  color: var(--color-text);
}

/* 等级值：文字色由 JS 取 WARNING_LEVEL_MAP 内联 */
.wnk-info__value--level {
  font-weight: 600;
}

/* ===== 等级横幅：等级徽标 + 预警内容（底色取等级 bg，色值 JS 内联）===== */
.wnk-banner {
  margin: var(--space-3) var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
}

.wnk-banner__level {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

.wnk-banner__text {
  margin: var(--space-2) 0 0;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.7;
  word-break: break-word;
}

/* ===== 两 Tab：整行等宽居中（覆盖 .tdetail-tabs 卡片式默认版式，与说事详情一致）===== */
.wnk-page .tdetail-tabs {
  gap: 0;
  margin: var(--space-3) 0 0;
  padding: 0 0 10px;
  border-radius: 0;
  box-shadow: none;
}

.wnk-page .tdetail-tab {
  flex: 1;
  padding: var(--space-3) 0;
  /* Tab 字号对齐全站 .tdetail-tab（14px） */
  font-size: 14px;
  text-align: center;
}

/* ===== Tab 内容区 ===== */
.wnk-panel {
  padding: var(--space-3) var(--space-4) 0;
}

.wnk-card {
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-surface);
}

/* ===== 操作记录：节点时间轴（最新在上，与 PC 端一致）===== */
.wnk-node {
  display: flex;
  gap: var(--space-3);
}

/* 左侧轨道：状态色圆点 + 向下连线；末节点不再连线 */
.wnk-node__rail {
  position: relative;
  flex: none;
  width: 20px;
}

.wnk-node__dot {
  position: absolute;
  top: 4px;
  left: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* 连线紧接圆点底边，高度随节点内容伸缩（类名 __conn，避免与记录文本行 __line 撞车） */
.wnk-node__conn {
  position: absolute;
  top: 16px;
  bottom: 0;
  left: 9px;
  width: 2px;
  margin-left: -1px;
  background: var(--color-border);
}

.wnk-node__box {
  flex: 1;
  min-width: 0;
  padding-bottom: var(--space-4);
}

.wnk-node--last .wnk-node__box {
  padding-bottom: 0;
}

.wnk-node__name {
  margin: 0;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

/* 节点内容框：灰底（操作人(部门) / 意见 / 时间），对齐 PC 操作记录卡片 */
.wnk-node__memo {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--wnk-fill);
  border-radius: var(--radius-md);
}

.wnk-node__line {
  margin: 0;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}

.wnk-node__time {
  margin: var(--space-2) 0 0;
  color: var(--color-text-tertiary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}