/* ============================================================
   欠薪追讨与仲裁时效 · 讨薪赤警（深红 #8A1F2B + 警示黄 #E8B93B）
   视觉语言：报纸传单 / 方角粗线 / 衬线标题 / 红色警示条
   ============================================================ */
.wat-page {
  --wat-red: #8A1F2B;
  --wat-red-2: #A8323F;
  --wat-red-soft: rgba(138, 31, 43, 0.08);
  --wat-yellow: #E8B93B;
  --wat-yellow-soft: rgba(232, 185, 59, 0.18);
  --wat-ink: #20191A;
  --wat-ink-2: #4E4245;
  --wat-ink-3: #8B7C80;
  --wat-paper: #F7F3EC;
  --wat-surface: #FFFDF9;
  --wat-surface-3: #F1EAE0;
  --wat-line: #DCD2C4;
  --wat-line-strong: #B9ABA0;
  --wat-shadow: 6px 6px 0 rgba(138, 31, 43, 0.07);
  --wat-radius: 3px;

  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 0 40px;
  color: var(--wat-ink);
}

/* ---------- 深色主题：夜班版报纸 ---------- */
:root[data-theme="dark"] .wat-page {
  --wat-red: #E4707C;
  --wat-red-2: #F08A93;
  --wat-red-soft: rgba(228, 112, 124, 0.10);
  --wat-yellow: #EFC75E;
  --wat-yellow-soft: rgba(239, 199, 94, 0.14);
  --wat-ink: #F2EAE4;
  --wat-ink-2: #C9BCB8;
  --wat-ink-3: #948682;
  --wat-paper: #161213;
  --wat-surface: #201A1C;
  --wat-surface-3: #2B2326;
  --wat-line: #3A3033;
  --wat-line-strong: #524548;
  --wat-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35);
}

/* ---------- 首屏 ---------- */
.wat-hero {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 0;
  border: 2px solid var(--wat-ink);
  background: var(--wat-surface);
  box-shadow: var(--wat-shadow);
  position: relative;
}
.wat-hero-copy { padding: 28px 30px 24px; }
.wat-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #FFF;
  background: var(--wat-red);
  padding: 5px 12px;
  margin-bottom: 14px;
}
.wat-hero h1 {
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--wat-ink);
  border-bottom: 3px double var(--wat-red);
  padding-bottom: 10px;
}
.wat-hero-sub {
  margin: 14px 0 16px;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--wat-ink-2);
  max-width: 580px;
}
.wat-hero-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; }
.wat-hero-chips li {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--wat-ink-2);
  background: var(--wat-yellow-soft);
  border: 1px solid var(--wat-yellow);
  padding: 5px 12px;
  margin: 0 6px 6px 0;
}
.wat-hero-readout {
  border-left: 2px dashed var(--wat-line-strong);
  background:
    repeating-linear-gradient(135deg, var(--wat-red-soft) 0 12px, transparent 12px 24px),
    var(--wat-surface-3);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.wat-readout-label { font-size: 12px; font-weight: 800; letter-spacing: 2px; color: var(--wat-red); }
.wat-readout-num {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  color: var(--wat-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.wat-readout-num.is-over { color: var(--wat-red); }
.wat-readout-sub { font-size: 13.5px; font-weight: 700; color: var(--wat-ink-2); }
.wat-readout-meta { font-size: 12.5px; color: var(--wat-ink-3); }
.wat-readout-tip {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--wat-ink-2);
  background: var(--wat-yellow-soft);
  border-left: 4px solid var(--wat-yellow);
  padding: 8px 10px;
}

/* ---------- 主区 ---------- */
.wat-main {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 18px;
  margin-top: 20px;
  align-items: start;
}
.wat-panel, .wat-result, .wat-timeline-panel {
  background: var(--wat-surface);
  border: 2px solid var(--wat-ink);
  box-shadow: var(--wat-shadow);
  padding: 18px 20px;
}
.wat-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--wat-ink); }
.wat-panel-head h2 { margin: 0; font-size: 17px; font-weight: 800; font-family: Georgia, "Songti SC", serif; color: var(--wat-ink); }
.wat-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--wat-red); color: #FFF; font-size: 12px; font-weight: 800;
}
.wat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.wat-field label { display: block; font-size: 12.5px; font-weight: 800; color: var(--wat-ink-2); margin-bottom: 5px; }
.wat-field input, .wat-field select {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--wat-line-strong);
  border-radius: var(--wat-radius);
  background: var(--wat-surface);
  color: var(--wat-ink);
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.wat-field input:focus, .wat-field select:focus { outline: 2px solid var(--wat-red); outline-offset: 1px; }

.wat-state { margin-top: 6px; border-top: 2px dashed var(--wat-line-strong); padding-top: 12px; }
.wat-state-label { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; color: var(--wat-ink-2); }
.wat-check {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid var(--wat-line);
  border-left: 4px solid var(--wat-line-strong);
  background: var(--wat-surface);
  font-size: 13px; color: var(--wat-ink-2); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.wat-check:hover { border-left-color: var(--wat-yellow); }
.wat-check:has(input:checked) { border-left-color: var(--wat-red); background: var(--wat-red-soft); color: var(--wat-ink); }
.wat-check input { accent-color: var(--wat-red); width: 15px; height: 15px; flex: none; }

/* ---------- 按钮 ---------- */
.wat-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.wat-btn {
  flex: 1 1 auto; padding: 10px 14px;
  border: 2px solid var(--wat-ink);
  border-radius: var(--wat-radius);
  background: var(--wat-surface);
  color: var(--wat-ink);
  font-size: 13.5px; font-weight: 800; cursor: pointer;
  transition: transform .08s, background .15s;
  white-space: nowrap;
}
.wat-btn:hover { background: var(--wat-yellow-soft); }
.wat-btn:active { transform: translate(1px, 1px); }
.wat-btn--primary { background: var(--wat-red); border-color: var(--wat-red); color: #FFF; }
.wat-btn--primary:hover { background: var(--wat-red-2); }

/* ---------- 结果 ---------- */
.wat-result-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wat-result-head h2 { margin: 0; font-size: 17px; font-weight: 800; font-family: Georgia, "Songti SC", serif; }
.wat-tag { padding: 4px 12px; border: 2px solid var(--wat-ink); background: var(--wat-surface-3); font-size: 12px; font-weight: 800; }
.wat-countdown {
  margin-top: 14px; text-align: center; padding: 14px 0 12px;
  background: var(--wat-ink); color: #FFF;
}
.wat-countdown-label { display: block; font-size: 12px; letter-spacing: 2px; opacity: .8; }
.wat-countdown b { display: block; font-family: Georgia, serif; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.wat-countdown b.is-over { color: var(--wat-yellow); }
.wat-countdown-sub { font-size: 12px; opacity: .78; }

.wat-items { margin-top: 14px; display: grid; gap: 0; border: 1px solid var(--wat-line); }
.wat-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px dashed var(--wat-line);
  font-size: 13px; color: var(--wat-ink-2);
  background: var(--wat-surface);
}
.wat-item:last-child { border-bottom: 0; }
.wat-item i {
  font-style: normal; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #FFF; background: var(--wat-red);
}
.wat-item.is-ok i { background: #2F7A4F; }
.wat-item.is-warn i { background: var(--wat-yellow); color: #4A3708; }
.wat-item b { color: var(--wat-ink); font-weight: 800; }
.wat-item .wat-note { display: block; font-size: 11.5px; color: var(--wat-ink-3); margin-top: 2px; }

.wat-warn {
  margin-top: 12px; padding: 11px 13px;
  background: var(--wat-yellow-soft);
  border: 2px solid var(--wat-yellow);
  color: var(--wat-ink); font-size: 12.8px; line-height: 1.8;
}
.wat-warn b { color: var(--wat-red); }

/* ---------- 路径对比 ---------- */
.wat-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wat-cmp {
  border: 2px solid var(--wat-ink);
  background: var(--wat-surface);
  padding: 12px 13px;
}
.wat-cmp.is-rec { background: var(--wat-red-soft); border-color: var(--wat-red); }
.wat-cmp h3 { margin: 0 0 8px; font-size: 14.5px; font-weight: 800; color: var(--wat-ink); }
.wat-cmp ul { margin: 0; padding-left: 16px; }
.wat-cmp li { font-size: 12.3px; line-height: 1.75; color: var(--wat-ink-2); margin-bottom: 3px; }
.wat-cmp b { color: var(--wat-ink); }
.wat-cmp .wat-cmp-flag {
  display: inline-block; font-size: 11px; font-weight: 800;
  background: var(--wat-yellow); color: #4A3708; padding: 2px 8px; margin-bottom: 6px;
}
.wat-tl-title { margin: 18px 0 10px; font-size: 15px; font-weight: 800; font-family: Georgia, "Songti SC", serif; }
.wat-timeline { display: grid; gap: 8px; }
.wat-tl {
  display: grid; grid-template-columns: 74px 1fr auto; gap: 10px; align-items: baseline;
  border-bottom: 1px dashed var(--wat-line); padding-bottom: 7px;
}
.wat-tl:last-child { border-bottom: 0; }
.wat-tl b { font-size: 12.5px; color: var(--wat-red); font-weight: 800; }
.wat-tl span { font-size: 12.8px; color: var(--wat-ink-2); }
.wat-tl i { font-style: normal; font-size: 11.5px; color: var(--wat-ink-3); white-space: nowrap; }

/* ---------- 证据 / 提示 ---------- */
.wat-evi, .wat-guide { margin-top: 22px; }
.wat-evi h2, .wat-guide h2 { margin: 0 0 12px; font-size: 18px; font-weight: 800; font-family: Georgia, "Songti SC", serif; }
.wat-evi-grid, .wat-guide-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.wat-evi-card, .wat-guide-card {
  background: var(--wat-surface);
  border: 2px solid var(--wat-ink);
  border-top: 6px solid var(--wat-red);
  box-shadow: var(--wat-shadow);
  padding: 15px;
}
.wat-guide-card { border-top-color: var(--wat-yellow); }
.wat-evi-card h3, .wat-guide-card h3 { margin: 0 0 8px; font-size: 14px; color: var(--wat-ink-2); }
.wat-evi-card h3 b, .wat-guide-card h3 b { display: block; font-size: 15px; color: var(--wat-red); }
.wat-guide-card h3 b { color: var(--wat-ink); }
.wat-evi-card p, .wat-guide-card p { margin: 0; font-size: 12.8px; line-height: 1.85; color: var(--wat-ink-2); }
.wat-evi-card p b, .wat-guide-card p b { color: var(--wat-ink); }

/* ---------- 打印 ---------- */
@media print {
  .wat-actions, .detail-breadcrumb, nav, header, footer, .wat-evi { display: none !important; }
  .wat-page, .wat-hero, .wat-panel, .wat-result, .wat-timeline-panel, .wat-guide-card {
    box-shadow: none !important; border-color: #999 !important;
    background: #FFF !important; color: #111 !important;
  }
  .wat-hero { grid-template-columns: 1fr; }
  .wat-main { grid-template-columns: 1fr; }
  .wat-countdown { background: #FFF !important; color: #111 !important; border: 2px solid #111; }
  .wat-countdown b { color: #111 !important; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .wat-hero { grid-template-columns: 1fr; }
  .wat-hero-readout { border-left: 0; border-top: 2px dashed var(--wat-line-strong); }
  .wat-main { grid-template-columns: 1fr; }
  .wat-evi-grid, .wat-guide-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .wat-grid, .wat-compare { grid-template-columns: 1fr; }
  .wat-evi-grid, .wat-guide-grid { grid-template-columns: 1fr; }
  .wat-btn { flex: 1 1 40%; }
  .wat-tl { grid-template-columns: 64px 1fr; }
  .wat-tl i { grid-column: 2; }
}