/* =============================================================
   煤朋友 CoalPal · 电脑版（桌面大屏）
   -------------------------------------------------------------
   加载条件：访问设备不是手机（见 app/device.py 与 static/device.js）。

   这一份只写「只有大屏才成立」的东西，三类：

     1. 用得上宽度：宽内容栏、多栏栅格、侧栏
     2. 鼠标才有意义：悬停反馈（触屏上悬停会「粘住」，所以那边不加载）
     3. 触屏不需要：小一号的点击目标、紧凑的间距（鼠标精度远高于手指）

   ★ 与 tokens.css 的分工 ★
     配色、圆角、阴影、基础字号在 tokens.css；这里只覆盖版式与交互。
     凡是「手机版也要一样的」规则，不要抄到这里来。

   ★ 最小宽度 760px（不是 1024，这个数字很关键）★
     本站按设备类型分版，不按窗口宽度：电脑把窗口拖窄，拿到的仍是电脑版，
     而不是悄悄变成手机版（否则拖一下窗口页面就重排一次）。
     这个下限的作用只有一个：保证横向滚动时至少还是「一个完整的电脑版页面」，
     不会挤成一条。

     ⚠️ 为什么不是 1024 这种「看起来更像电脑」的值：
       浏览器缩放 125% / 150% 时，CSS 视口宽度是**物理宽度除以缩放倍数** ——
       1366 的笔记本在 150% 缩放下只有 910px，1280 在 125% 下只有 1024px。
       把下限设成 1024，这些机器会平白多出一条横向滚动条，
       而当事人只会觉得「这个网站排版坏了」。
       760 的依据：现有版式真正需要宽度的只有两处 ——
         · 首屏两栏：760 减去左右内边距 40，两栏各约 350，能读
         · 后台「表单 + sticky 侧栏」：侧栏最少 208 + 间距 18 + 表单约 460
       再低就不该硬撑了，那种情况本来也不是电脑版该覆盖的场景。 */

html { min-width: 760px; }

/* ---------- 站头：一行放下品牌 + 全部导航 ---------- */

.site-header {
  justify-content: space-between;
  padding: 8px 20px;
}
.brand-logo { height: 40px; width: auto; display: block; }

.site-nav { gap: 16px; font-size: 14px; flex-wrap: wrap; }
.nav-cta { padding: 6px 14px; }
/* 悬停直接翻成煤黑：橙底黑字 → 黑底白字，品牌的两个主色都用上了，
   而且对比度比「橙底深橙字」高得多（后者在小字上会糊成一片）。 */
.nav-cta:hover { background: var(--brand-ink); color: #fff !important; }

/* ---------- 内容栏 ----------
   ★ 不是「把所有页面都拉宽」★
     大屏优化的关键不是用满像素，而是别让一行字长到读不下去。
     所以分两档：
       默认       780px —— 正文、表单、问卷，行宽落在舒适区间
       .page-wide 1080px —— 首屏、匹配结果、信息中心这类确实横向有内容的页
     由模板的 body class 决定用哪档（见 home.html / landing.html 等）。
   ★ 手机版会把这两个值一起废掉，一律满宽（见 mobile.css）★ */

.site-main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px 20px 64px;
}
body.page-wide .site-main { max-width: var(--maxw-wide); }

.env-banner { padding: 8px 20px; }

/* ---------- 页脚 ---------- */

.site-footer { padding: 28px 20px; margin-top: 40px; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; }
body.page-wide .footer-inner { max-width: var(--maxw-wide); }
body.admin .footer-inner { max-width: var(--maxw-wide); }

/* ---------- 首屏：左文右图 ----------
   左栏放标题与主要内容（标签 / 标语 / 倒计时 / 按钮），右栏放宣传图。
   电脑版永远是两栏 —— 窄屏回退成「上图下文」是手机版的事。 */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 30px;
  align-items: center;
}
.hero-main { text-align: left; }
.hero-main .badge-row { display: flex; gap: 8px; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 18px; }
/* 倒计时和按钮行在基础样式里是居中的，左栏里要改成靠左 */
.hero-main .countdown { justify-content: flex-start; }
.hero-main .btn-row { justify-content: flex-start; }
/* 跨校那一行：与按钮拉开一点距离，字号比正文小一档 */
.hero-note { margin: 14px 0 0; }

/* ---------- 大屏上把纵向长清单铺开 ----------
   破冰任务是「一天一件」的平级清单，7 条在一米高的屏幕里堆成一长条
   很浪费右边半屏。DOM 顺序不变，屏幕阅读器朗读顺序也不变。

   ★ 不再限定 body.page-wide ★
     这个清单出现在 match_detail / onboarding / guide_chsi / verify_chsi 四类页面上，
     其中只有第一类带 page-wide。原来绑在 page-wide 上的结果是：另外三页在电脑上
     仍是单列长条 —— 而那三页恰恰是最需要「一眼看完全流程有几件事」的。
     minmax(300px, 1fr) 会按可用宽度自己定列数：780 档内容宽约 740 → 2 栏，
     1080 档 → 3 栏，窗口更窄时回落 1 栏，不会出现挤出来的半栏。 */
.task-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* 首页的「已接入的学校」不需要额外版式：胶囊卡本来就并排 wrap，
   学校多到自己换行即可（原来是列表行，才需要用 grid 铺开）。
   ★ `:hover` 必须写在电脑版 ★ 触屏上悬停会「粘住」，手机版只用 `:active`。 */
.school-chip:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ---------- 信息表：标签列固定占比 ---------- */

.info-table th { width: 38%; }

/* ---------- 倒计时 / 匹配结果：大屏字号大一档 ---------- */

.countdown-cell { padding: 10px 14px; min-width: 62px; }
.countdown-num { font-size: 22px; }

.match-head { padding: 22px; }
.match-body { padding: 20px 22px; }
.match-score { font-size: 34px; }

/* ---------- 品牌块：图标与文字并排居中对齐 ---------- */

.brand-block { align-items: center; }

/* ---------- 联系方式编辑器：类型列定宽 ----------
   中间的 1fr 加 0（理由见 mobile.css 首屏那段，属零成本保险）：输入框默认有
   约 20 个字符的固有宽度，理论上可能把这一列撑开。 */
.contact-row { grid-template-columns: 110px minmax(0, 1fr) auto; }

/* ---------- 单选组：两个意向并排铺开 ---------- */

.radio-item-wide { flex: 1 1 160px; }

/* ---------- 错误页留白 ---------- */

.error-page { padding: 60px 20px; }

/* ---------- 悬停反馈（电脑专属）----------
   ★ 这一整块是「电脑版」最实质的区别之一 ★
     触屏没有真正的悬停：手指点过的元素会一直停在 :hover 状态上，
     于是「点完变灰不恢复」这种毛病就来了。把悬停规则集中放在这一份，
     手机版天然不加载它，也就不需要再写一遍覆盖规则去抵消。 */

a:hover { text-decoration: underline; }

.site-nav a:hover { color: var(--accent-text); text-decoration: none; }
.link-btn:hover { color: var(--accent-text); }
.footer-links a:hover { color: var(--accent-text); }
.contact-email a:hover { text-decoration: underline; }

.btn:hover { background: var(--brand-orange-deep); text-decoration: none; color: var(--brand-ink); }
.btn-ghost:hover { background: var(--line-soft); color: var(--text); }
.btn-danger:hover { background: #991b1b; }

.option:hover { border-color: #ded8cc; background: #fdfbf7; }
.radio-item:hover { border-color: var(--accent); }
.faq-item > summary:hover { color: var(--accent-text); }
/* 数据表的行悬停。★ 必须留在这里而不是跟着 table.data 进 tokens.css ★
   触屏的 :hover 会「粘住」—— 手机上点过的那一行会一直保持高亮，
   看起来像坏了。所以悬停规则只存在于电脑版。 */
table.data tr:hover td { background: #fdfbf7; }

/* ---------- 运营后台（只有电脑版）----------

   ★★ 这个块里只允许放「后台专属」的规则 ★★
     判断标准是「有没有前台页面也用这个类」，不是「这段原本写在哪」。
     一条前台也在用的规则被留在这里，就等于**手机版下凭空消失**，
     而且不会报错（实测事故：table.data / .table-wrap 曾因此消失，
     手机上看隐私政策那张 5 列表格完全没有样式 —— 见 tokens.css 的说明）。
     自查脚本：tests/test_layout_css.py 会断言「前台模板用到的类不得只存在于 desktop.css」。

   ★ 后台没有手机版 ★
     核验、审核是坐在电脑前做的重表格工作：一屏要同时看到规则判定、
     表单字段和用户提交的材料。手机上把这些摊成单列的可用性极低，
     强行适配的产物没人会用。所以后台固定加载电脑版，并且**锁定**
     （见 app/templating.py 的 layout_locked 与 static/device.js 的短路）。 */

body.admin { background: #f3f0ea; }
/* 后台比前台更需要宽度（表格列多、还有表单 + 侧栏两栏），
   直接复用加宽档，避免再引入一个只此一处的魔法数字。 */
body.admin .site-main { max-width: var(--maxw-wide); }

.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
}
.stat-num { font-size: 24px; font-weight: 700; line-height: 1.2; }
.stat-label { font-size: 12px; color: var(--text-mute); margin-top: 4px; }
.stat-warn .stat-num { color: var(--warn); }

.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tab {
  padding: 6px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: 13px; color: var(--text-soft);
}
.tab:hover { text-decoration: none; border-color: var(--accent); color: var(--accent-text); }
.tab.active {
  background: var(--brand-orange); border-color: var(--brand-orange);
  color: var(--brand-ink); font-weight: 600;
}

/* table.data / .table-wrap 已上移到 tokens.css —— 前台 privacy.html 也在用，
   放在这里会让手机版没有这张表。*/

.rule-list { list-style: none; padding: 0; margin: 0; }
.rule-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--radius-sm);
  margin-bottom: 6px; font-size: 13px;
}
.rule-pass { background: var(--ok-soft); }
.rule-fail { background: var(--err-soft); }
.rule-icon { flex: 0 0 16px; font-weight: 700; }
.rule-pass .rule-icon { color: var(--ok); }
.rule-fail .rule-icon { color: var(--err); }

/* ---------- 主栏 + 侧栏（后台核验详情页） ----------

   用途：左边是要动手填的表单，右边是「填表时的参考依据」（规则引擎判定）。
   运营的动线是「打开学信网查询页 → 对照着往表单里逐项填」，
   判定结果需要在**整个填表过程中始终可见**，滚到哪儿都在手边。

   ★ 光有 position: sticky 是不够的 ★
     这是最容易做错的一点：sticky 元素一旦**比视口还高**，
     贴住顶部之后它的下半部分就永远看不到、也滚不到 —— 越是想「固定」，
     越是看不到全貌。规则条目一多（5-8 条，窄栏里每条还要折两三行）
     就会撞上这个问题。
     所以这里给侧栏加了「视口高度上限 + 内部滚动」：
       · 侧栏整体不超出视口（max-height）
       · 结论那一条固定在面板顶部，永远可见
       · 只有判定明细列表自己滚动（overscroll-behavior 防止滚到底把整页带走）
     这样「结论永远在手边、明细也能看全」两件事同时成立。

   ★ min-width 陷阱 ★
     栅格里的 minmax(0, 1fr) 那个 0 不能省：默认的 min-width:auto 会让
     表格 / 长文本把栅格撑破，表现是页面横向溢出。

   ★ 这段只在电脑版出现 ★
     手机版没有 sticky 侧栏 —— 单列堆叠时「固定住」反而会挡住正文。 */

.detail-layout {
  display: grid;
  /* 侧栏宽度可伸缩：空间够时 264px，不够时缩到 208px 也不塌成单栏。
     写死 264px 的话，中等宽度的窗口只能靠断点降级成单栏 ——
     而「降级成单栏」在人眼里就是「侧栏又跑到下面去了」。 */
  grid-template-columns: minmax(0, 1fr) minmax(208px, 264px);
  gap: 18px;
  align-items: start;
}
.detail-side {
  position: sticky;
  /* 避开顶部那条 sticky 的站点头（8px 内边距 ×2 + 40px 字标 ≈ 57px），
     留一点呼吸空间 */
  top: 68px;
  /* 视口高度上限：64px 底部留白 + 66px 顶部偏移 */
  max-height: calc(100vh - 130px);
  display: flex;
  flex-direction: column;
}
.detail-side .card {
  display: flex;
  flex-direction: column;
  /* min-height:0 是关键：不加的话内部滚动区无法被压缩，
     面板还是会被内容撑高，sticky 的老问题原样复现。 */
  min-height: 0;
  margin-bottom: 0;
  padding: 16px;
}
.detail-side .rule-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
}
/* 窄栏里条目要更紧凑，否则三两条就占满一屏 */
.detail-side .rule-item { padding: 8px 10px; font-size: 12px; border-radius: 6px; }
.detail-side .rule-icon { flex: 0 0 14px; }