/* ==========================================================================
   page-center.css · 考生个人中心（center.html）
   --------------------------------------------------------------------------
   作用域：body.page-center
   结构：[左：考生卡 + 侧栏导航 | 右：内容面板]
   页面主体是五个子考试各一条「报名→缴费→学习→机考→取证」五节点轨迹。
   注：.page-head / .crumb / .avatar / .side-nav / .pane 已抽到 components.css。
   ========================================================================== */

.center { padding: var(--sp-6) 0 var(--sp-9); }
.center-grid {
  display: grid;
  /* 右栏必须 minmax(0,1fr)：成绩/消息两个 .tbl 的 min-content 很宽，
     裸 1fr 会被撑开（右栏实测被撑到 770px，全页横向溢出近一屏） */
  grid-template-columns: 268px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

/* --------------------------------------------------------------------------
   左：侧栏
   -------------------------------------------------------------------------- */

.side {
  position: sticky;
  top: calc(var(--h-header) + 16px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* 统计卡区在个人中心里上下各留一档呼吸 */
.center .stats { margin: var(--sp-5) 0; }

/* 侧栏里的导航要做成卡片（基础 .side-nav 本身无边框） */
.side-nav {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-2);
}

/* --------------------------------------------------------------------------
   右：主内容区
   -------------------------------------------------------------------------- */

.welcome {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.welcome h2 { margin: 0; font-family: var(--ff-display); font-size: 21px; color: var(--navy-900); }

/* --- 四格统计卡与考生卡：已提升为通用组件，见 components.css §13 --- */

/* --------------------------------------------------------------------------
   科目进度行
   -------------------------------------------------------------------------- */

.subj-row {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.subj-row:hover { border-color: var(--navy-200); box-shadow: var(--sh-2); }
.subj-row + .subj-row { margin-top: var(--sp-3); }

.sr-top { display: flex; gap: var(--sp-4); align-items: flex-start; }
.sr-idx {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--navy-800);
  background: var(--navy-100);
  border-radius: var(--r-xs);
  padding: 5px 8px;
  flex: 0 0 auto;
  letter-spacing: .08em;
}
.sr-name { font-size: 15px; font-weight: 700; color: var(--navy-900); margin: 0; }
.sr-sub { font-size: var(--fs-xs); color: var(--ink-400); margin: 5px 0 0; }
.sr-right { margin-left: auto; text-align: right; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   阶段轨迹（五节点）· 母题的进度表达
   -------------------------------------------------------------------------- */

.track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--line);
}
.tr-node { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; width: 64px; }
.tr-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-strong); }
.tr-node span { font-size: var(--fs-micro); color: var(--ink-400); white-space: nowrap; }
.tr-line { flex: 1; height: 2px; background: var(--line); margin: 5px -6px 0; position: relative; }

.tr-node.done .tr-dot { background: var(--navy-800); border-color: var(--navy-800); }
.tr-node.done span { color: var(--navy-800); font-weight: 700; }
.tr-line.done { background: var(--navy-800); }

.tr-node.cur .tr-dot { background: var(--red-600); border-color: var(--red-600); box-shadow: 0 0 0 4px rgba(200, 16, 46, .14); }
.tr-node.cur span { color: var(--red-600); font-weight: 700; }

.sr-act { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); flex-wrap: wrap; align-items: center; }
.sr-note { font-size: var(--fs-xs); color: var(--ink-400); margin-left: auto; }

/* --------------------------------------------------------------------------
   空状态 / 待解锁态
   -------------------------------------------------------------------------- */

.empty {
  background: var(--paper);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
}
.empty h4 { margin: 0 0 8px; font-size: var(--fs-h4); color: var(--navy-900); }
.empty p { margin: 0 auto; max-width: 46ch; font-size: var(--fs-sm); color: var(--ink-500); }
.empty .field-no { justify-content: center; margin-bottom: var(--sp-4); }

/* 面板标题行：左侧 h2 + 右侧主操作按钮（典型用例：Invoice 的「立即开具发票」） */
.pane-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin: var(--sp-3) 0 var(--sp-4);
}
.pane-head-row h2 { margin: 0; }

/* 待解锁卡：右上角斜角缎带 */
.lock-card {
  background: linear-gradient(150deg, #E9EEF6, #DDE5F1);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  position: relative;
  overflow: hidden;
  color: var(--ink-500);
}
.lock-card b { color: var(--ink-700); }
.lock-card::after {
  content: "待解锁";
  position: absolute;
  right: -30px; top: 22px;
  background: var(--ink-400);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .2em;
  padding: 5px 40px;
  transform: rotate(35deg);
}

/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  /* 单栏折叠同样要 minmax(0,1fr)：侧栏胶囊导航行 min-content ≈770px，
     裸 1fr 会被撑开，整页横向溢出（同右栏表格问题） */
  .center-grid { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
  .stats { grid-template-columns: 1fr 1fr; }
  .track { overflow-x: auto; padding-bottom: 6px; }
}

@media (max-width: 860px) {
  /* 侧栏 → 横向胶囊滑块：七项导航一行划过，不再占一整屏竖排 */
  .side-nav {
    flex-direction: row;
    gap: var(--sp-2);
    overflow-x: auto;
    padding: var(--sp-2);
    -webkit-overflow-scrolling: touch;
  }
  .side-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    border: 1px solid var(--line-strong);
    border-left: 1px solid var(--line-strong);   /* 覆盖桌面态的 3px 左条 */
    border-radius: 999px;
    padding: 9px 16px;
  }
  .side-nav a[aria-current="page"] {
    background: var(--navy-800);
    color: #fff;
    border-color: var(--navy-800);
  }
  .side-nav .cnt { margin-left: 2px; }

  /* 欢迎横幅纵向堆叠，报考按钮整宽 */
  .welcome { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
  .welcome .btn { width: 100%; }

  /* 五节点轨迹保持横向可滑，节点不压缩 */
  .tr-node { width: 56px; }

  /* 折叠单栏后成绩/消息表格放不下：整表横向滑动，列不再挤压换行 */
  .pane .tbl { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}