/*
 * 官网首页「如何选科」里的选科问卷（#yp-quiz）。
 *
 * 题目、推荐逻辑与文案全在服务端（jkt-web 的 /api/open/fitTest/*），与小程序、
 * 电脑端同一套；本文件只负责把接口下发的结构排出来，不含任何业务口径。
 *
 * **不依赖 Tailwind。** 与 plan-hero.css、course-matrix.css 同理：
 * assets/css/tailwind.css 是预编译产物，只含现有页面用过的类，
 * 这里新写的类名若走 Tailwind 会大面积落空。
 *
 * 与 plan-hero.css 的关系：共用 :root 上那套 --yp-* 配色 token 与 .yp-wrap 容器，
 * 因此本文件必须在 plan-hero.css 之后加载。
 */

/* 由脚本切换的显隐一律用 hidden 属性，别再各处写 display:none 的工具类 */
#yp-quiz [hidden] {
  display: none !important;
}

/*
 * 本模块的小字一律用 --yp-quiz-dim，不用全局的 --yp-muted(#7a8aa2)。
 * 状态行、理由、难点、免责声明都是 12–13px 正文，#7a8aa2 落在浅底上只有约
 * 3.4:1，达不到 WCAG AA 对普通文字的 4.5:1。这里压深一档到约 5.4:1。
 */
/*
 * 问卷是「如何选科」这一节的主任务，所以它是这一节唯一抬起来的卡：
 * 白底 + 阴影 + 淡蓝描边。上面四张事实页入口卡相应压成浅灰平面卡（见 home.css）。
 */
.yp-quiz {
  --yp-quiz-dim: #5a6a80;
  --yp-quiz-bad: #cf1322;
  --yp-quiz-good: #237804;

  margin-top: 24px;
  padding: 26px 28px 28px;
  border: 1px solid #dbe6fb;
  border-radius: var(--yp-radius-featured, 16px);
  background: #ffffff;
  box-shadow: var(--yp-shadow-1, 0 4px 14px rgba(20, 36, 61, 0.06));
}

/* 标题在左、进度在右：进度是这块里唯一会变的东西，放在标题行末最容易被注意到 */
.yp-quiz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.yp-quiz-head h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--yp-ink);
}

.yp-quiz-title {
  min-width: 0;
}

/* ---- 进度 ---- */

.yp-quiz-meter {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.yp-quiz-bar {
  width: 132px;
  height: 6px;
  border-radius: 999px;
  background: #e8eef8;
  overflow: hidden;
}

.yp-quiz-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--yp-accent);
  transition: width 0.25s ease;
}

.yp-quiz-meter b {
  color: var(--yp-quiz-dim);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* 答满了把计数染成品牌蓝，给一个「到齐了」的信号 */
.yp-quiz-meter.done b {
  color: var(--yp-accent);
}

.yp-quiz-head p {
  max-width: 62em;
  margin: 8px 0 0;
  color: var(--yp-quiz-dim);
  font-size: 14px;
  line-height: 1.85;
}

/* 进度与错误共用这一行：同一位置只会有一句话，不会上下堆两条状态 */
.yp-quiz-status {
  margin: 8px 0 0 !important;
  color: var(--yp-quiz-dim) !important;
  font-size: 13px !important;
}

.yp-quiz-status.err {
  color: var(--yp-quiz-bad) !important;
}

/* ---- 题目 ---- */

/*
 * 用多列而不是两列栅格。
 *
 * 七道题的选项条数从 3 到 6 不等，题干也有长有短。栅格会按行对齐，
 * 同一行里矮的那道题下面就空出一大片，七道题排下来空白比内容还多。
 * 多列是按内容流排的，一列填满才换下一列，中间不留缝。
 * 代价是阅读顺序变成「先走完左列再走右列」——每道题都带着序号，认得出来。
 */
.yp-quiz-list {
  columns: 2;
  column-gap: 16px;
  margin-top: 20px;
}

/* fieldset 的默认边框与内边距在各浏览器上不一致，一律清掉自己画 */
.yp-quiz-q {
  min-width: 0;
  /* 多列里必须显式禁止跨列断开，否则一道题的选项会被切到下一列去 */
  break-inside: avoid;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--yp-line);
  border-radius: 10px;
  background: #ffffff;
}

.yp-quiz-q legend {
  padding: 0;
  color: var(--yp-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

.yp-quiz-q legend i {
  margin-right: 6px;
  color: var(--yp-muted);
  font-style: normal;
  font-weight: 400;
}

.yp-quiz-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/*
 * 选项是 <label><input type=radio><span>文字</span></label>。
 *
 * radio 本体挪出视线但**不能用 display:none 或 visibility:hidden**——那样它就
 * 不可聚焦了，方向键切换与读屏都会失效，等于白换回原来的按钮组。
 * 用 position:absolute + opacity:0 把它压在胶囊底下，焦点仍然落得进来。
 */
.yp-quiz-opt {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.yp-quiz-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.yp-quiz-opt span {
  padding: 7px 14px;
  border: 1px solid #e3e8f0;
  border-radius: 999px;
  background: #ffffff;
  color: var(--yp-ink-2);
  font-size: 14px;
  transition: all 0.18s ease;
}

.yp-quiz-opt:hover span {
  border-color: #c7d6f5;
  color: var(--yp-accent);
}

/* 焦点画在胶囊上而不是那个透明的 radio 上，否则键盘走查时看不见落点 */
.yp-quiz-opt input:focus-visible + span {
  outline: 2px solid var(--yp-accent);
  outline-offset: 2px;
}

.yp-quiz-opt input:checked + span {
  border-color: var(--yp-accent);
  background: var(--yp-accent-soft);
  color: var(--yp-accent);
  font-weight: 600;
}

/* ---- 结果 ---- */

.yp-quiz-result {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--yp-line);
}

.yp-quiz-result > h4 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--yp-ink);
}

.yp-quiz-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.yp-quiz-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--yp-line);
  border-radius: 12px;
  background: #ffffff;
}

/*
 * 第一名要一眼看出来。只加一圈边和一点阴影不够——三张卡并排时那点差别看不出。
 * 现在是：淡蓝底 + 强调色描边 + 左上角「最推荐」标，另外两张退回白底细边。
 */
.yp-quiz-card:first-child {
  border-color: var(--yp-accent);
  background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 62%);
  box-shadow: var(--yp-shadow-2, 0 12px 28px rgba(20, 36, 61, 0.1));
}

.yp-quiz-best {
  position: absolute;
  top: -10px;
  left: 18px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--yp-accent);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.yp-quiz-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.yp-quiz-rank {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--yp-accent);
  color: #ffffff;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.yp-quiz-card-top em {
  color: var(--yp-muted);
  font-size: 13px;
  font-style: normal;
}

.yp-quiz-card h5 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--yp-ink);
}

.yp-quiz-term {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 4px;
  background: #f6f8fb;
  color: var(--yp-quiz-dim);
  font-size: 12px;
}

/* 开考那一档压深一档绿：浅底上的小字，--yp-good 那档亮绿对比度不够 */
.yp-quiz-term.on {
  background: var(--yp-good-soft);
  color: var(--yp-quiz-good);
}

/*
 * list-style 要显式写回来：tailwind.css 的 preflight 把 ul 的项目符号清成了 none，
 * 不写的话三条理由会连成一段，看不出是并列的三条。
 */
.yp-quiz-why {
  margin: 0;
  padding-left: 18px;
  list-style: disc outside;
  color: var(--yp-ink-2);
  font-size: 13px;
  line-height: 1.8;
}

.yp-quiz-why li + li {
  margin-top: 4px;
}

.yp-quiz-hard {
  margin: 0;
  color: var(--yp-quiz-dim);
  font-size: 12px;
  line-height: 1.75;
}

.yp-quiz-use {
  margin-top: auto;
  padding: 9px 16px;
  border: 1px solid var(--yp-accent);
  border-radius: 8px;
  background: var(--yp-accent);
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s ease;
}

.yp-quiz-use:hover {
  background: #1f4fd8;
  border-color: #1f4fd8;
}

.yp-quiz-use:focus-visible {
  outline: 2px solid var(--yp-accent);
  outline-offset: 2px;
}

/* 只有第一名是实心主按钮；另外两张是备选，给描边按钮，不三个一样抢 */
.yp-quiz-card:not(:first-child) .yp-quiz-use {
  border-color: #dbe3f0;
  background: #ffffff;
  color: var(--yp-accent);
}

.yp-quiz-card:not(:first-child) .yp-quiz-use:hover {
  border-color: var(--yp-accent);
  background: var(--yp-accent-soft);
}

/* ---- 底部说明与失败降级 ---- */

.yp-quiz-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.yp-quiz-foot p {
  flex: 1 1 260px;
  margin: 0;
  color: var(--yp-quiz-dim);
  font-size: 12px;
  line-height: 1.75;
}

.yp-quiz-again,
.yp-quiz-retry {
  padding: 8px 14px;
  border: 1px solid #dbe3f0;
  border-radius: 8px;
  background: #ffffff;
  color: var(--yp-accent);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.yp-quiz-again:hover,
.yp-quiz-retry:hover {
  border-color: var(--yp-accent);
  background: var(--yp-accent-soft);
}

/* 问卷取不到时占掉整块：留一句解释、一个重试、两个不依赖问卷的去处 */
.yp-quiz-down {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border-radius: 8px;
  background: #ffffff;
}

.yp-quiz-down p {
  flex: 1 1 260px;
  margin: 0;
  color: var(--yp-ink-2);
  font-size: 13px;
  line-height: 1.8;
}

.yp-quiz-down a {
  color: var(--yp-accent);
  font-size: 13px;
  text-decoration: none;
}

.yp-quiz-down a:hover {
  text-decoration: underline;
}

/* ---- 窄屏 ---- */

@media (max-width: 1024px) {
  .yp-quiz-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .yp-quiz {
    padding: 20px 18px;
  }

  .yp-quiz-head {
    flex-direction: column;
    gap: 12px;
  }

  .yp-quiz-meter {
    width: 100%;
    padding-top: 0;
  }

  .yp-quiz-bar {
    flex: 1 1 auto;
    width: auto;
  }

  .yp-quiz-list {
    columns: 1;
  }

  .yp-quiz-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .yp-quiz-opt span,
  .yp-quiz-use,
  .yp-quiz-again,
  .yp-quiz-retry {
    transition: none;
  }
}