/* ============================================================
   站点入口页（学生首页 / 教师区首页）
   ============================================================
   与 deck 共用 course-theme.css：配色变量、语义块（.c-block 等）、
   表格（.c-table）、字距与等宽数字的处理全部沿用，不另起一套。
   本文件只补「长页面」需要而 deck 没有的版式：页头、栏目、卡片网格。

   为什么不再用 Tailwind：
   · 两个静态页要为此加载一个约 120KB 的运行时去**在浏览器里现生成 CSS**，
     还会在控制台打一行「cdn.tailwindcss.com should not be used in production」；
   · 更要紧的是它自带一套调色板（blue-700 / slate-800 / emerald-600…），
     与 course-theme 的语义色是两套东西——改了讲义的蓝，首页的蓝不会跟着变，
     过一阵就漂成两个产品。现在两边取同一组 CSS 变量，改一处全站生效。
   （`toolkit/` 下的 demo 仍用 Tailwind：那些是只读素材生成的，不在此列。）
   ============================================================ */

body {
  margin: 0;
  font-family: var(--c-font);
  color: var(--c-ink);
  letter-spacing: var(--c-ls);
  line-height: var(--c-lh);
  /* 极淡的冷灰做纸面，让白色卡片浮得起来又不至于对比刺眼 */
  background: #f4f6f9;
  -webkit-font-smoothing: antialiased;
}

.site {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px 72px;
}

/* ── 页头：与每讲扉页（.c-cover）同一个做法 ───────────────────── */

.site-head { padding: 56px 0 34px; }

.site-head::before {
  content: "";
  display: block;
  width: 66px; height: 5px;
  border-radius: 3px;
  background: var(--c-primary);
  margin-bottom: 20px;
}
.site-title {
  font-size: 2.6rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: 0.02em;
  margin: 0 0 0.34em;
  text-wrap: balance;
}
.site-sub {
  font-size: 1rem;
  color: var(--c-ink-soft);
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 0;
}
.site-meta {
  font-size: 0.84rem;
  color: var(--c-muted);
  letter-spacing: 0.08em;
  margin: 0.5em 0 0;
}
/* 教师区页头上的那枚提示徽章 */
.site-badge {
  display: inline-block;
  margin-left: 0.6em;
  padding: 0.28em 0.7em;
  border-radius: 999px;
  background: var(--c-alert-bg);
  border: 1px solid var(--c-alert-br);
  color: var(--c-alert-fg);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* ── 栏目 ──────────────────────────────────────────────────── */

.site-sec { margin-bottom: 46px; }

.site-sec > h2 {
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: 0.04em;
  margin: 0 0 16px;
  padding-bottom: 0.5em;
  border-bottom: 2px solid var(--c-rule);
}
.site-sec > h2 > .site-sec-count {
  float: right;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--c-muted);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* ── 卡片网格 ──────────────────────────────────────────────── */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
  gap: 14px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: var(--c-radius);
  padding: 18px 20px 16px;
  /* 阴影压到几乎看不见：满屏 shadow-lg 的圆角卡片是最没有性格的一种排版。
     层次交给「白卡片 + 冷灰纸面 + 发丝边框」，比投影更干净，也更像印刷品。 */
  box-shadow: 0 1px 2px rgb(16 32 46 / 0.04);
  transition: border-color .18s var(--c-ease), box-shadow .18s var(--c-ease),
              transform .18s var(--c-ease);
}
/* 左侧那条色带平时收着，hover 才展开——比整卡变色安静 */
.card::before {
  content: "";
  position: absolute; left: -1px; top: -1px; bottom: -1px;
  width: 3px;
  border-radius: var(--c-radius) 0 0 var(--c-radius);
  background: var(--c-primary);
  opacity: 0;
  transition: opacity .18s var(--c-ease);
}
.card:hover {
  border-color: #c3d2e2;
  box-shadow: 0 6px 18px rgb(16 32 46 / 0.09);
  transform: translateY(-2px);
}
.card:hover::before { opacity: 1; }

.card-no {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.35em;
}
.card-title {
  font-size: 1.04rem;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.4;
  margin: 0 0 0.4em;
}
.card-desc {
  font-size: 0.85rem;
  line-height: 1.66;
  color: var(--c-ink-soft);
  margin: 0 0 14px;
  flex: 1 1 auto;
}
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* 尚未定稿的讲次：卡片留在原位但压暗，不给链接。
   留着而不是删掉，是因为学生需要看到整门课有多少讲、下一讲讲什么；
   压暗＋一行说明比「首页上凭空少几张卡」清楚得多。 */
.card--soon {
  background: #fbfcfd;
  border-style: dashed;
  box-shadow: none;
}
.card--soon .card-no,
.card--soon .card-title { color: var(--c-muted); }
.card--soon .card-desc  { color: #94a3b8; }
/* 不做 hover 抬升，也不露左侧色带——它不可点，就不该有可点的暗示 */
.card--soon:hover {
  transform: none;
  border-color: var(--c-rule);
  box-shadow: none;
}
.card--soon:hover::before { opacity: 0; }
.card-soon {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-muted);
}

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

.btn {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.44em 0.95em;
  border-radius: 7px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s var(--c-ease), border-color .15s var(--c-ease),
              color .15s var(--c-ease);
}
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: #0a3a6e; }
.btn--ghost {
  background: transparent; color: var(--c-ink-soft); border-color: var(--c-rule);
}
.btn--ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn--amber { background: var(--c-alert-fg); color: #fff; }
.btn--amber:hover { background: #7a2c0b; }

/* ── 整块可点的宽卡（工具箱入口、教师区入口） ────────────────── */

.panel {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: var(--c-radius);
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgb(16 32 46 / 0.04);
  transition: border-color .18s var(--c-ease), box-shadow .18s var(--c-ease);
}
.panel:hover { border-color: #c3d2e2; box-shadow: 0 6px 18px rgb(16 32 46 / 0.09); }
.panel h3 {
  font-size: 1.06rem; font-weight: 700; color: var(--c-primary);
  margin: 0 0 0.45em;
}
.panel p { font-size: 0.86rem; line-height: 1.7; color: var(--c-ink-soft); margin: 0; }
.panel .panel-note { font-size: 0.8rem; color: var(--c-muted); margin-top: 0.6em; }
.panel--locked { border-color: var(--c-alert-br); background: var(--c-alert-bg); }
.panel--locked h3 { color: var(--c-alert-fg); }

/* ── 链接行（参考资料那种一排小链接） ─────────────────────────── */

.linkrow { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── 行内元素 ──────────────────────────────────────────────── */

kbd {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.82em;
  padding: 0.12em 0.42em;
  border: 1px solid var(--c-rule);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #f8fafc;
  color: var(--c-ink-soft);
}
code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.88em;
  padding: 0.08em 0.34em;
  border-radius: 4px;
  background: rgb(15 40 70 / .055);
  letter-spacing: 0;
}
/* 正文链接染蓝；按钮自带前景色，别被这一条扫进去。
   ⚠️ 之前写的是 `.site a {color:…}` 加一条 `.site .btn {color:inherit}` 去挡它，
   可 `.site .btn`（0,2,0）反过来压过了 `.btn--primary`（0,1,0）——
   主按钮的白字被换成正文近黑色 #16202e，落在复旦蓝 #0d4a8b 上
   **对比度只有 1.8:1**，「演示文稿」四个字整个糊在按钮里。
   补一条 `.btn--primary,.btn--amber{color:#fff}` 也救不回来，特指度还是低。
   正解是别让链接规则匹配到按钮。 */
.site a:not(.btn) { color: var(--c-block-fg); }

/* panel 里嵌语义块时，块的外边距不要顶到 panel 的内边距上 */
.panel > .c-block:last-child,
.panel > .c-alert:last-child { margin-bottom: 0; }
.site-sec > .c-alert { margin-top: 0; }

/* ── 页脚 ──────────────────────────────────────────────────── */

.site-foot {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--c-rule);
  font-size: 0.8rem;
  color: var(--c-muted);
  line-height: 1.8;
}
.site-foot a { color: var(--c-block-fg); }

/* ── 动效：与 deck 同一套（入场浮起，0.3s 以内） ──────────────── */

@media (prefers-reduced-motion: no-preference) {
  .site-head, .site-sec, .site-foot { animation: site-rise .32s var(--c-ease) both; }
  .site-sec:nth-of-type(1) { animation-delay: .05s; }
  .site-sec:nth-of-type(2) { animation-delay: .10s; }
  .site-sec:nth-of-type(3) { animation-delay: .14s; }
  .site-sec:nth-of-type(4) { animation-delay: .18s; }
  .site-foot { animation-delay: .22s; }
}
@keyframes site-rise {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

@media print {
  body { background: #fff; }
  .site-head, .site-sec, .site-foot { animation: none !important; }
  .card, .panel { box-shadow: none; break-inside: avoid; }
}

@media (max-width: 560px) {
  .site { padding: 0 16px 48px; }
  .site-title { font-size: 2rem; }
  .card-grid { grid-template-columns: 1fr; }
}