/* 内容层页面（tutorials.html / glossary.html / about.html）专用样式。
 *
 * 只放这几个页面要用的东西：教程文章块、术语表、以及关于页的小标题。
 * 通用的顶栏 / 卡片 / 按钮仍然走 css/tournament.css，不重复一份 ——
 * 那样以后改按钮样式就得改两处。本文件必须在 tournament.css 之后引入。
 */

/* ---- 页面开头的一句话说明 ---- */

.content-lead {
  max-width: 780px;
  margin: 0 0 18px;
  line-height: 1.75;
  color: rgb(245 241 230 / 78%);
}

/* ---- 卡片内的小节标题（关于页的「收集哪些数据」这类） ---- */

.about-sub {
  margin: 16px 0 8px;
  font-size: 15px;
  color: var(--gold);
}

/* ---- 目录 / 锚点导航 ---- */

.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 20px;
}

.toc a {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid rgb(231 198 107 / 40%);
  border-radius: 999px;
  font-size: 13px;
  color: var(--gold);
  text-decoration: none;
}

.toc a:hover {
  background: rgb(231 198 107 / 12%);
}

/* ---- 单篇教程 ---- */

.article {
  max-width: 780px;
  margin: 0 0 20px;
}

.article > h2 {
  margin: 0 0 10px;
  font-size: 20px;
  color: var(--gold);

  /* 手机上点目录跳转时，别让标题顶到浏览器地址栏底下 */
  scroll-margin-top: 14px;
}

.article p {
  margin: 0 0 12px;
  line-height: 1.85;
  font-size: 15px;
  color: rgb(245 241 230 / 88%);
}

/* 关联题目：一篇文章末尾链到能立刻点开的具体题目 */
.drill-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px dashed rgb(231 198 107 / 28%);
}

.drill-links-title {
  width: 100%;
  font-size: 13px;
  color: rgb(245 241 230 / 55%);
}

.drill-links a {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 6px;
  background: rgb(0 0 0 / 22%);
  border: 1px solid rgb(231 198 107 / 30%);
  font-size: 13px;
  color: var(--paper);
  text-decoration: none;
}

.drill-links a:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* 待补的题目只占位、不进 sitemap 也不给 Article 结构化数据，
   用虚线和灰字标出来，免得读者以为已经能读。 */
.article.is-pending > h2 {
  color: rgb(245 241 230 / 52%);
}

.pending-flag {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 8px;
  border: 1px dashed rgb(245 241 230 / 35%);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 400;
  color: rgb(245 241 230 / 52%);
  vertical-align: middle;
}

/* ---- 术语表 ---- */

.glossary-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px;
}

.glossary-search {
  flex: 1 1 260px;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 6px;
  border: 1px solid rgb(245 241 230 / 25%);
  background: rgb(0 0 0 / 25%);
  color: var(--paper);
  font-size: 15px;
}

.glossary-search::placeholder {
  color: rgb(245 241 230 / 40%);
}

.glossary-search:focus {
  outline: none;
  border-color: var(--gold);
}

.glossary-count {
  font-size: 13px;
  color: rgb(245 241 230 / 60%);
}

.glossary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;

  /* 三列宽度固定（见下面的 col-term / col-en），说明列再长也不把中英文两列
     撑开，避免某条解释特别长时整张表横向溢出 */
  table-layout: fixed;
}

.glossary-table th,
.glossary-table td {
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgb(245 241 230 / 12%);

  /* 说明列最长，中英文两列窄一点，剩下的宽度都给它 */
  overflow-wrap: anywhere;
}

.glossary-table thead th {
  position: sticky;
  top: 0;
  background: var(--felt-dark);
  color: var(--gold);
  font-weight: 600;
  white-space: nowrap;
}

.glossary-table tbody tr:hover {
  background: rgb(231 198 107 / 8%);
}

.glossary-table td.col-term {
  width: 92px;
  color: var(--gold);
  font-weight: 600;
}

.glossary-table td.col-en {
  width: 132px;
  color: rgb(245 241 230 / 72%);
}

/* 搜索没命中时整张表只剩表头，给一行说明，别让人以为页面坏了 */
.glossary-empty {
  padding: 18px 2px;
  color: rgb(245 241 230 / 60%);
  font-size: 14px;
}

/* 分类小标题行 */
.glossary-table tbody th.col-cat {
  padding-top: 14px;
  background: rgb(0 0 0 / 18%);
  color: var(--paper);
  font-size: 13px;
  letter-spacing: 1px;
  border-bottom: 1px solid rgb(231 198 107 / 22%);
}

/* ---- 手机 ---- */

@media (width <= 560px) {
  .article > h2 {
    font-size: 18px;
  }

  .glossary-table th,
  .glossary-table td {
    padding: 8px 6px;
    font-size: 13px;
  }

  .glossary-table td.col-term {
    width: 74px;
  }

  /* 英文列本来就读不顺，窄屏下再缩一档，字号也小一点，
     把宽度尽量让给中文术语和说明 */
  .glossary-table td.col-en {
    width: 104px;
    font-size: 12px;
  }
}