/* ===== 求职百科（wiki.html） =====
 * 复用 base.css 的变量；这里只管「左目录 + 右文章」这一套版式。
 */

.wk-hero {
  padding: 40px 20px 22px;
  text-align: left;
}
.wk-hero h1 {
  font-size: 32px; line-height: 1.25; margin: 0 0 10px; letter-spacing: -.5px;
}
.wk-hero h1 em { font-style: normal; color: var(--brand); }
.wk-hero p { color: var(--muted); font-size: 15px; margin: 0 0 18px; max-width: 640px; }

/* 搜索框 */
.wk-search {
  display: flex; align-items: center; gap: 8px;
  max-width: 460px; padding: 9px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.wk-search svg { flex: none; color: var(--muted); }
.wk-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 14px; color: var(--ink);
}
.wk-search input::placeholder { color: #a3b1c2; }
.wk-search__clear {
  flex: none; border: 0; background: #eef2f7; color: var(--muted);
  width: 20px; height: 20px; border-radius: 50%; line-height: 1;
  font-size: 13px; cursor: pointer; display: none;
}
.wk-search.has-val .wk-search__clear { display: block; }

/* 主体两栏 */
.wk-body {
  display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 34px;
  align-items: start; padding-bottom: 40px;
}

/* 左目录 */
.wk-toc {
  position: sticky; top: 76px;
  max-height: calc(100vh - 100px); overflow-y: auto;
  padding-right: 4px;
}
.wk-toc__group { margin-bottom: 18px; }
.wk-toc__title {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  color: #94a3b8; text-transform: uppercase; margin: 0 0 6px 10px;
}
.wk-toc a {
  display: block; position: relative;
  padding: 7px 10px; border-radius: 8px;
  font-size: 13px; line-height: 1.45; color: var(--muted);
  border-left: 2px solid transparent;
  transition: .14s;
}
.wk-toc a:hover { color: var(--ink); background: #eef4f9; }
.wk-toc a.is-current {
  color: var(--brand); font-weight: 700;
  background: #ecfdf5; border-left-color: var(--brand);
}
.wk-toc a.is-hidden { display: none; }
.wk-toc__empty { font-size: 12.5px; color: var(--muted); padding: 6px 10px; display: none; }
.wk-toc.is-empty .wk-toc__empty { display: block; }

/* 文章流 */
.wk-main { min-width: 0; display: flex; flex-direction: column; gap: 22px; }

.wk {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px 24px; box-shadow: var(--shadow-sm);
  scroll-margin-top: 84px;
}
.wk.is-hidden { display: none; }
.wk:target { box-shadow: 0 0 0 2px rgba(16, 185, 129, .35), var(--shadow-sm); }

.wk-kicker {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  color: var(--brand); background: #ecfdf5; border: 1px solid #c7f0e0;
  padding: 2px 9px; border-radius: 999px; margin-bottom: 10px;
}
.wk-kicker--guide { color: #2563eb; background: #eff6ff; border-color: #dbeafe; }

.wk h2 { font-size: 20px; margin: 0 0 6px; letter-spacing: -.2px; }
.wk-lead { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.wk h3 { font-size: 15px; margin: 20px 0 8px; }
.wk p { margin: 0 0 10px; font-size: 14px; }
.wk ul, .wk ol { margin: 0 0 12px; padding-left: 20px; font-size: 14px; }
.wk li { margin: 4px 0; }
.wk b, .wk strong { font-weight: 700; }
.wk code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px;
  background: #f1f5f9; border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 5px; white-space: nowrap;
}

/* 关键数字 */
.wk-kpis { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 18px; }
.wk-kpi {
  flex: 1 1 120px; min-width: 110px;
  background: #f8fafc; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px;
}
.wk-kpi b { display: block; font-size: 20px; color: var(--brand); line-height: 1.2; }
.wk-kpi span { font-size: 12px; color: var(--muted); }

/* 表格 */
.wk-table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 13.5px; }
.wk-table th, .wk-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.wk-table th { font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .02em; background: #f8fafc; }
.wk-table td:first-child { white-space: nowrap; font-weight: 600; }
.wk-table tr:last-child td { border-bottom: 0; }
.wk-table .num { color: var(--brand); font-weight: 700; }

/* 提示块 */
.wk-note, .wk-warn {
  border-radius: 10px; padding: 12px 14px; font-size: 13.5px;
  margin: 14px 0; border: 1px solid;
}
.wk-note { background: #f0fdf4; border-color: #c7f0e0; color: #14684a; }
.wk-warn { background: #fffbeb; border-color: #fde68a; color: #7c5a10; }
.wk-note b, .wk-warn b { display: inline-block; margin-right: 4px; }

/* 文章内跳编辑器 / 跳到术语 */
.wk-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.wk-actions .btn { font-size: 13px; padding: 7px 15px; }

/* 空状态（搜索无结果） */
.wk-none {
  display: none; text-align: center; padding: 48px 20px; color: var(--muted);
  background: #fff; border: 1px dashed var(--line); border-radius: var(--radius);
}
.wk-none b { display: block; color: var(--ink); margin-bottom: 6px; font-size: 15px; }
.wk-main.is-empty .wk-none { display: block; }

/* 页脚衔接 */
.wiki-foot { padding: 10px 0 30px; color: var(--muted); font-size: 13px; text-align: center; }

/* 响应式：窄屏目录搬到上面，横向滑动 */
@media (max-width: 900px) {
  .wk-body { grid-template-columns: 1fr; gap: 14px; }
  .wk-toc {
    /* 导航窄屏是 54px，钉在它下面，别压在文章上还看不清边界 */
    position: sticky; top: 54px; z-index: 8;
    max-height: none; overflow-x: auto; overflow-y: hidden;
    display: flex; gap: 8px; align-items: center;
    background: #fff; padding: 9px 0 10px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 16px -12px rgba(15, 23, 42, .55);
  }
  .wk-toc__group { margin: 0; display: flex; gap: 8px; align-items: center; }
  .wk-toc__title { display: none; }
  .wk-toc a {
    flex: none; white-space: nowrap;
    border: 1px solid var(--line); border-left: 1px solid var(--line);
    background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 13px;
  }
  .wk-toc a.is-current { border-color: var(--brand); }
  .wk-toc__empty { display: none !important; }
  .wk { padding: 20px 18px; scroll-margin-top: 130px; }
  .wk-hero { padding: 26px 20px 14px; }
  .wk-hero h1 { font-size: 25px; }
}

/* 窄屏表格：三列挤成竖条没法读，改成一条一张卡，列名由 JS 写进 data-lab */
@media (max-width: 620px) {
  .wk-table { display: block; }
  .wk-table thead { display: none; }
  .wk-table tbody, .wk-table tr, .wk-table td { display: block; width: 100%; }
  .wk-table tr {
    border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 10px; background: #fcfdfe;
  }
  .wk-table td { border: 0; padding: 3px 0; white-space: normal; font-size: 13px; }
  .wk-table td:first-child {
    font-size: 14px; font-weight: 700; color: var(--ink);
    padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px dashed var(--line);
  }
  .wk-table td:first-child .num { font-size: 15px; }
  .wk-table td[data-lab]::before {
    content: attr(data-lab) ' · ';
    color: var(--muted); font-weight: 400;
  }
  .wk-table td[data-lab]:first-child::before { content: none; }
}

@media (max-width: 560px) {
  .wk-kpi { flex: 1 1 45%; }
  .wk h2 { font-size: 18px; }
}