/* 选卷入口：login（可选）→ 考试 → 分类 → 卷子。
 *
 * 为什么做成下钻而不是一页平铺：33 套卷铺在一页上，学生第一眼看到的是一堵墙，
 * 得自己在里面找「我要的雅思听力」。分三步之后每一步只做一个决定，卡就能做大、字就能少。 */

/* 顶栏：面包屑 + 身份。下钻三层，每层都要能退回去 */
.bar { display: flex; justify-content: space-between; align-items: baseline;
       gap: 16px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 24px;
       border-bottom: 1px solid var(--border); }
.crumbs { font-size: 15px; }
.crumbs a { color: var(--link); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs i { color: var(--text-muted); font-style: normal; margin: 0 8px; }
.crumbs b { font-size: 19px; font-weight: 700; color: var(--heading); }
.who { font-size: 13.5px; color: var(--text-muted); }
.who a { color: var(--link); text-decoration: none; }

/* 选择卡 */
.picks { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.picks-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pick { display: block; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
        padding: 22px 20px; text-decoration: none; color: inherit;
        transition: border-color .15s; }
.pick:hover { border-color: var(--heading); text-decoration: none; color: inherit; }
.pick-name { font-size: 19px; font-weight: 700; margin-bottom: 4px; color: var(--heading); }
.pick-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.pick-n { font-size: 13px; color: var(--link); font-weight: 600; }
/* 暂无卷子的分类不隐藏而是置灰：让学生知道这一类存在、只是还没上 */
.pick.off { opacity: .45; cursor: default; }
.pick.off:hover { border-color: var(--border); }
.pick.off .pick-n { color: var(--text-muted); }

/* 卷子卡 */
.pcards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pcard { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
         display: flex; flex-direction: column; }
.pcard h3 { font-size: 16px; margin: 0 0 10px; line-height: 1.4; }
.pmeta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.pmeta span { font-size: 12px; background: var(--surface-2); color: var(--text-muted); padding: 2px 9px; border-radius: 999px; }
.pblurb { font-size: 13.5px; line-height: 1.7; color: var(--text-muted); margin: 0 0 14px; flex: 1; }
.pcard .btn { width: 100%; text-align: center; box-sizing: border-box; }

/* 登录（可选，不是关卡）
   ⚠️ 颜色一律走 /brand.css 的 token，不写色值，也不写回退色：
      站点换主色时登录页会被落下 —— 以前确实被落下过。 */
.lg-box {
  max-width: 440px; margin: 24px auto 48px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}

/* 顶部色块：官网的深色品牌面板（--panel），给这一页一点品牌存在感 */
.lg-top {
  padding: 30px 28px 24px;
  background: var(--panel);
  color: var(--on-panel);
}
.lg-badge {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  background: var(--accent-strong); color: var(--on-accent-strong); margin-bottom: 12px;
}
.lg-h { font-size: 25px; line-height: 1.3; margin: 0 0 8px; color: var(--on-panel); }
.lg-sub { font-size: 14px; line-height: 1.7; margin: 0; color: var(--on-panel-muted); }

.lg-body { padding: 26px 28px 28px; }
.lg-note {
  font-size: 12.5px; line-height: 1.75; color: var(--text-muted);
  margin: 0 0 18px; padding: 11px 13px; border-radius: var(--radius-xs);
  background: var(--surface); border: 1px solid var(--border);
}
.lg-note b { color: var(--text); }
.lg-go { width: 100%; padding: 13px; font-size: 16px; }
.lg-go:disabled { opacity: .6; cursor: default; }

/* 「或者」分隔线：关联页上「先不关联」与关联按钮之间 */
.lg-or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px; color: var(--text-muted); font-size: 12.5px;
}
.lg-or::before, .lg-or::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.lg-later, .lg-back {
  display: block; text-align: center; padding: 11px; border-radius: var(--radius-btn);
  border: 1.5px solid var(--border-strong); font-size: 14.5px; font-weight: 600;
  color: var(--heading); text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.lg-later:hover, .lg-back:hover {
  border-color: var(--heading); color: var(--heading); background: var(--surface); text-decoration: none;
}

@media (max-width: 480px) {
  .lg-box { margin: 12px auto 32px; }
  .lg-top { padding: 24px 20px 20px; }
  .lg-body { padding: 22px 20px 24px; }
  .lg-h { font-size: 22px; }
}

/* 开始考试：不列卷子让学生挑 —— 真考不给你选，让他挑会挑软柿子 */
.startbox { max-width: 480px; margin: 20px auto; background: var(--bg);
            border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; text-align: center; }
.start-n { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--heading);
           background: var(--tint); padding: 3px 12px; border-radius: 999px; margin-bottom: 14px; }
.start-h { font-size: 24px; margin: 0 0 14px; }
.start-h .nb { white-space: nowrap; }
.startbox .pmeta { justify-content: center; margin-bottom: 18px; }
.start-p { font-size: 14px; line-height: 1.8; color: var(--text-muted); margin: 0 0 22px; }
.start-p b { color: var(--text); }
.start-go { width: 100%; padding: 13px; font-size: 16px; }
/* 开卷练习：次要按钮，和「开始考试」明显分级 ——
   默认路径是模考，开卷是给「我就想边查边读」的那次用的 */
.start-practice { width: 100%; padding: 11px; font-size: 15px; margin-top: 10px; }
.start-hint { margin: 12px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--text-muted); text-align: left; }
.start-tip { margin: 14px 0 0; font-size: 13px; color: var(--text-muted); }
.start-tip a { color: var(--link); }
.start-err { background: var(--danger-bg); color: var(--danger-text); font-size: 13.5px;
             padding: 9px 12px; border-radius: 6px; margin-bottom: 14px; }
.start-err[hidden] { display: none; }

/* 选报考层级那一步的说明。
   ⚠️ 不能用 .lvl-tip { display:block } 之类会覆盖 [hidden] 的写法 ——
   这个坑本仓库踩过两次（.tnc-check 与 picker 的卡片），见 consent.css 的注释。 */
.lvl-tip {
  margin: -4px 0 18px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* 落地首屏：水獭 + 三个选项。
   原先这里是一屏 hero 文案 + 三步说明 + 一整块合规说明，学生要滚三屏才看得到能考什么。 */
.pick-hero { padding: 32px 0 48px; background: var(--surface); border-bottom: 1px solid var(--border); }
.pick-otter {
  display: block; width: auto; height: 132px; margin: 0 auto 10px;
  /* ⛔ 用抠好的透明底 PNG，不要拿带底色的原图去 mix-blend-mode 硬融 ——
     在浅色背景上会把整只压灰。这套素材本来就是「图生图 → 抠图」的做法。 */
}
.pick-foot {
  text-align: center; margin: 22px 0 0; font-size: 13.5px; color: var(--text-muted);
}
.pick-foot a { color: var(--link); }
.picks-3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .picks-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pick-group + .pick-group { margin-top: 28px; }
.pick-group-h { font-size: .875rem; font-weight: 600; letter-spacing: .02em; color: var(--text-muted); margin: 0 0 10px; }

@media (max-width: 520px) {
  .pick-hero { padding: 14px 0 32px; }
  .pick-otter { height: 96px; }
}


.pick-otter[hidden] {display:none}
/* FRAMEWORK §8.1：品牌视觉不用吉祥物插画。只藏不删 —— app.js 仍按 .pick-otter 切换 hidden。 */
.pick-otter { display: none !important; }

#lookup[hidden], #examLookupHint[hidden] {display:none}

/* G20: the page's one <h1>, for assistive technology and crawlers. The picker already shows its own title line (「考哪个」),
   so this heading is not drawn: visually hidden, still in the accessibility tree. The login view has its own <h1 class="lg-h">;
   it takes over there and this one steps aside (browsers without :has() simply keep both). */
.pick-h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
.pick-hero .container:has(.lg-h) > .pick-h1 { display: none; }

/* 首页首屏的 KTE 直达（app.js viewExams） */
.pick-quick { margin: -4px 0 18px; font-size: .9375rem; color: var(--text-muted); }
.pick-quick a { color: var(--link); font-weight: 600; }