/* 科研诚信工作台 · 设计系统
   ─────────────────────────────────────────────────────────────
   隐喻：档案纸 + 诊断标记。
   三个 color 角色分工不可互换：
     --seal   印泥红，只出现在「必须停下来看」处（阻断、待办、危险动作）
     --office 科研处冷蓝，行政侧动作（周期下发、流转）
     --rule   针脚线，一切结构性分隔用它，不用阴影
   阴影、圆角卡、居中 hero、大写 eyebrow、步进编号 —— 一律不用。
   ───────────────────────────────────────────────────────────── */

:root {
  --ink:        #10141A;
  --ink-soft:   #262C35;
  --paper:      #FBFAF7;
  --paper-sunk: #F3F1EB;
  --rule:       #DAD5CB;
  --rule-soft:  #E8E4DB;
  --slate:      #5A6472;
  --slate-dim:  #8A93A0;
  --seal:       #B03A2E;
  --seal-wash:  #F6E9E6;
  --office:     #24476B;
  --office-wash:#E7EDF4;
  --moss:       #3F6448;
  --moss-wash:  #E8EFE9;

  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --sans:  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
           system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* 字号阶梯（1.25 比例，正文 15px 起，中文不缩到 13 以下） */
  --t-xs:  12px;
  --t-sm:  13px;
  --t-md:  15px;
  --t-lg:  18px;
  --t-xl:  23px;
  --t-2xl: 29px;
  --t-3xl: 36px;

  --gut: 20px;
  --rail: 232px;
  --measure: 74ch;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.7;
  font-feature-settings: "kern" 1;
}

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.35; }

a { color: var(--office); text-decoration-thickness: 1px; text-underline-offset: 3px; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--office);
  outline-offset: 2px;
  border-radius: 2px;
}

.skiplink {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 8px 14px; z-index: 60;
}
.skiplink:focus { left: 8px; top: 8px; }

/* ── 顶栏 ───────────────────────────────────────────────── */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gut);
  min-height: 58px;
  padding: 0 var(--gut);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 30;
}

.topbar__brand { display: flex; align-items: baseline; gap: 12px; min-width: 0; }

.wordmark {
  font-family: var(--serif);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: .01em;
}

.topbar__env {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--slate);
  border: 1px solid var(--rule);
  padding: 1px 6px;
}

.topbar__side { display: flex; align-items: center; gap: 10px; }

.who { display: flex; flex-direction: column; line-height: 1.25; text-align: right; }
.who__name { font-size: var(--t-sm); }
.who__role { font-family: var(--mono); font-size: 11px; color: var(--slate-dim); }

/* ── 骨架：左侧抽屉导航 + 主区 ─────────────────────────── */

.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); }

.drawer {
  border-right: 1px solid var(--rule);
  padding: 22px 0 28px;
  display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 58px; align-self: start;
  max-height: calc(100vh - 58px);
  overflow-y: auto;
}

.drawer__group { display: flex; flex-direction: column; }

.drawer__label {
  font-family: var(--serif);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  padding: 0 var(--gut) 6px;
  margin: 0;
}

.drawer__item {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 7px var(--gut) 7px 0;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--t-sm);
  border-left: 3px solid transparent;
}
.drawer__item:hover { background: var(--paper-sunk); }

/* 当前项：印泥红竖线，不填充底色 —— 位置感来自标记而非色块 */
.drawer__item[aria-current="page"] {
  border-left-color: var(--seal);
  font-weight: 600;
  color: var(--ink);
}
.drawer__mark { width: 0; }

.drawer__note {
  margin: 0; padding: 0 var(--gut);
  font-size: var(--t-xs);
  color: var(--slate);
  line-height: 1.65;
}

.drawer__foot {
  margin-top: auto;
  padding: 10px var(--gut) 0;
  border-top: 1px solid var(--rule-soft);
  font-size: var(--t-xs);
  color: var(--slate);
  display: flex; align-items: center; gap: 7px;
}

.healthdot {
  width: 7px; height: 7px; flex: none;
  border: 1px solid var(--slate-dim);
  background: var(--paper);
}
.healthdot[data-state="ok"]      { background: var(--moss);   border-color: var(--moss); }
.healthdot[data-state="degraded"]{ background: #C7861F;       border-color: #C7861F; }
.healthdot[data-state="down"]    { background: var(--seal);   border-color: var(--seal); }

/* ── 主视图 ─────────────────────────────────────────────── */

.view { padding: 26px 30px 72px; min-width: 0; }
.view:focus { outline: none; }

/* 区块标题：上方一条针脚线，标题本身是唯一层级信号 */
.block { margin-bottom: 38px; }
.block__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--gut);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 16px;
}
.block__title { font-family: var(--serif); font-size: var(--t-xl); }
.block__hint { font-size: var(--t-xs); color: var(--slate); }

/* 页首：左对齐，不用居中 hero */
.pagehead { margin-bottom: 26px; max-width: var(--measure); }
.pagehead h1 { font-family: var(--serif); font-size: var(--t-2xl); }
.pagehead p { margin: 6px 0 0; color: var(--slate); font-size: var(--t-sm); }

/* ── 表格：本工作台的主角 ───────────────────────────────── */

.tablewrap { overflow-x: auto; border-bottom: 1px solid var(--rule); }

table.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
table.ledger caption {
  text-align: left;
  padding-bottom: 6px;
  font-size: var(--t-xs);
  color: var(--slate);
}
table.ledger th {
  text-align: left;
  font-weight: 600;
  font-family: var(--serif);
  white-space: nowrap;
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--ink);
}
table.ledger td {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
table.ledger tbody tr:hover { background: var(--paper-sunk); }
table.ledger .num { font-variant-numeric: tabular-nums; }
table.ledger .title-cell { min-width: 20ch; }
table.ledger .title-cell a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
table.ledger .title-cell a:hover { border-bottom-color: var(--ink); }

/* 机器生成数据（DOI / ISSN / seed / 时间戳）用等宽 */
.machine { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-soft); word-break: break-all; }
.mono-time { font-family: var(--mono); font-size: var(--t-xs); color: var(--slate); white-space: nowrap; }

/* ── 标记（pill）──────────────────────────────────────── */

.pill {
  display: inline-block;
  font-size: var(--t-xs);
  line-height: 1.6;
  padding: 1px 7px;
  border: 1px solid var(--rule);
  color: var(--slate);
  white-space: nowrap;
}
.pill--seal   { border-color: var(--seal);   color: var(--seal);   background: var(--seal-wash); }
.pill--office { border-color: var(--office); color: var(--office); background: var(--office-wash); }
.pill--moss   { border-color: var(--moss);   color: var(--moss);   background: var(--moss-wash); }
.pill--ink    { border-color: var(--ink);    color: var(--ink); }

/* 重要成果：左侧印泥竖线，不用整块高亮 */
.flag-important { border-left: 2px solid var(--seal); padding-left: 8px; }

/* ── 表单 ───────────────────────────────────────────────── */

.form { display: grid; gap: 16px; max-width: 660px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: var(--t-sm); font-weight: 600; }
.field .req { color: var(--seal); margin-left: 3px; }
.field .why { font-size: var(--t-xs); color: var(--slate); }
.field input[type="text"], .field input[type="number"], .field input[type="date"],
.field select, .field textarea {
  border: 1px solid var(--rule);
  background: #fff;
  padding: 7px 10px;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--office); }
.field textarea { min-height: 84px; resize: vertical; line-height: 1.65; }
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--seal); }
.field__error { font-size: var(--t-xs); color: var(--seal); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.checkline { display: flex; align-items: flex-start; gap: 9px; font-size: var(--t-sm); }
.checkline input { margin-top: 4px; flex: none; }
.checkline span { flex: 1; }

/* ── 按钮 ───────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  padding: 6px 15px;
  cursor: pointer;
  font-size: var(--t-sm);
  line-height: 1.6;
}
.btn:hover:not(:disabled) { background: var(--ink-soft); }
.btn:disabled { opacity: .42; cursor: not-allowed; }

.btn--quiet { background: transparent; color: var(--ink-soft); border-color: var(--rule); }
.btn--quiet:hover:not(:disabled) { background: var(--paper-sunk); color: var(--ink); }

.btn--office { background: var(--office); border-color: var(--office); }
.btn--seal   { background: var(--seal);   border-color: var(--seal); }

.btn--danger { background: transparent; color: var(--seal); border-color: var(--seal); }
.btn--danger:hover:not(:disabled) { background: var(--seal-wash); }

.btn--tiny { padding: 2px 9px; font-size: var(--t-xs); }

.btnrow { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }

/* ── 工具栏 ─────────────────────────────────────────────── */

.toolbar {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-end;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--rule-soft);
}
.toolbar .field { min-width: 128px; }
.toolbar .push { margin-left: auto; }

/* ── 提示条 / 空态 / 加载 ───────────────────────────────── */

.notice {
  border-left: 3px solid var(--office);
  background: var(--office-wash);
  padding: 10px 14px;
  font-size: var(--t-sm);
  margin-bottom: 18px;
}
.notice--seal { border-left-color: var(--seal); background: var(--seal-wash); }
.notice--rule { border-left-color: var(--rule); background: var(--paper-sunk); }
.notice__title { font-weight: 600; }
.notice ul { margin: 6px 0 0; padding-left: 18px; }

/* 风险/未实现：只标引，不判定 */
.notice--index { border-left-color: var(--slate); background: var(--paper-sunk); color: var(--ink-soft); }

.empty {
  border: 1px dashed var(--rule);
  padding: 26px;
  max-width: 620px;
  font-size: var(--t-sm);
  color: var(--slate);
}
.empty h3 { font-family: var(--serif); font-size: var(--t-lg); color: var(--ink); margin-bottom: 6px; }
.empty ol { margin: 10px 0 0; padding-left: 20px; }
.empty ol li { margin-bottom: 4px; }

.skeleton { padding: 20px 0; color: var(--slate); font-size: var(--t-sm); }
.skeleton__line {
  height: 11px; background: var(--paper-sunk); margin-bottom: 11px;
  border-left: 2px solid var(--rule);
}

/* ── 进度：用字符格数表达，不用环形图 ───────────────────── */

.tally { font-size: var(--t-sm); white-space: nowrap; }
.tally__bar { font-family: var(--mono); letter-spacing: -1px; color: var(--office); }
.tally__meta { font-family: var(--mono); font-size: var(--t-xs); color: var(--slate); }

/* ── 详情分组 ───────────────────────────────────────────── */

.pairs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 18px; font-size: var(--t-sm); }
.pairs dt { color: var(--slate); }
.pairs dd { margin: 0; }

.timeline { list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); }
.timeline li { padding: 7px 0 7px 16px; border-left: 1px solid var(--rule); position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: -3.5px; top: 14px;
  width: 6px; height: 6px; background: var(--paper); border: 1px solid var(--slate);
}
.timeline li[data-current="true"]::before { background: var(--seal); border-color: var(--seal); }
.timeline li[data-done="true"]::before { background: var(--moss); border-color: var(--moss); }

.muted { color: var(--slate); }
.small { font-size: var(--t-xs); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.row-split { display: flex; align-items: center; justify-content: space-between; gap: var(--gut); }

/* ── 动效：全页唯一编排时刻 = 状态推进 + 压印 ────────────── */

@keyframes stamp-in {
  0%   { transform: scale(1.5) rotate(-5deg); opacity: 0; }
  55%  { transform: scale(1)   rotate(-4deg); opacity: 1; }
  100% { transform: scale(1)   rotate(-4deg); opacity: 1; }
}

.stamp {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-md);
  color: var(--seal);
  border: 2px solid var(--seal);
  padding: 3px 12px;
  letter-spacing: .08em;
  transform: rotate(-4deg);
}

html[data-motion="on"] .stamp { animation: stamp-in 460ms cubic-bezier(.2,.8,.3,1) both; }

@keyframes state-advance {
  from { background: var(--seal-wash); }
  to   { background: transparent; }
}
html[data-motion="on"] tr[data-advanced="true"] td { animation: state-advance 900ms ease-out both; }

@media (prefers-reduced-motion: reduce) {
  html[data-motion="auto"] * { animation: none !important; transition: none !important; }
}

/* ── Toast ──────────────────────────────────────────────── */

.toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(400px, calc(100vw - 40px));
}
.toast {
  border: 1px solid var(--ink);
  border-left-width: 3px;
  background: var(--paper);
  padding: 10px 14px;
  font-size: var(--t-sm);
  box-shadow: 3px 3px 0 var(--rule);
}
.toast--error { border-left-color: var(--seal); }
.toast--ok    { border-left-color: var(--moss); }
.toast--info  { border-left-color: var(--office); }
.toast__title { font-weight: 600; }
.toast__body { color: var(--ink-soft); }
.toast__body pre {
  font-family: var(--mono); font-size: var(--t-xs);
  white-space: pre-wrap; margin: 6px 0 0;
}

/* ── 模态 ───────────────────────────────────────────────── */

.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; }
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; background: rgba(16,20,26,.42); }
.modal__box {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink);
  width: min(720px, calc(100vw - 40px));
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 22px 24px;
}
.modal__title { font-family: var(--serif); font-size: var(--t-lg); margin-bottom: 14px; }
.modal__foot { display: flex; gap: 9px; justify-content: flex-end; margin-top: 20px; }

/* ── 响应式 ─────────────────────────────────────────────── */

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .drawer {
    position: static; max-height: none;
    flex-direction: row; flex-wrap: wrap; gap: 2px 18px;
    border-right: none; border-bottom: 1px solid var(--rule);
    padding: 10px var(--gut);
  }
  .drawer__group { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .drawer__label { padding: 0 8px 0 0; }
  .drawer__note, .drawer__foot { display: none; }
  .drawer__item { border-left: none; border-bottom: 2px solid transparent; padding: 5px 8px; }
  .drawer__item[aria-current="page"] { border-left: none; border-bottom-color: var(--seal); }
  .view { padding: 20px 16px 56px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; padding: 8px 16px; }
  .topbar__side { flex-wrap: wrap; }
}