/*
 * 官网首页首屏：备考计划测算区。
 *
 * 依据 softexam-prototype 的 views/website/home.js 与 DESIGN.md「官网版式」一节：
 * 内容居中 1180、首屏浅蓝到白竖向渐变叠 24 像素点阵（点阵呼应「星图」，不用装饰性色块）、
 * 圆角与阴影沿用应用内同一套 token。
 *
 * **不依赖 Tailwind。** 本站的 assets/css/tailwind.css 是预编译产物（60K），
 * 只包含现有页面用到的类；这里新写的排版若用 Tailwind 类名会大面积落空。
 * 全部类名以 yp- 前缀独立命名，与页面其余部分零耦合。
 */

/*
 * 配色 token 放在 :root 而不是 .yp-hero。
 *
 * 原来定义在 .yp-hero 自身，而 CSS 自定义属性只沿后代继承、不给兄弟节点：
 * 同用 yp- 前缀的 .yp-links 取不到 --yp-line，于是
 * `border: 1px solid var(--yp-line)` 整条简写作废、算出来是 `0px none`，
 * 四个入口卡在页面上根本没有边框，只有 hover 时那条写死颜色的规则才显形。
 * 同理 --yp-ink 失效，标题颜色退回继承值。
 */
:root {
  --yp-ink: #1c2e4a;
  --yp-ink-2: #56647a;
  --yp-muted: #7a8aa2;
  --yp-line: #eef1f6;
  --yp-accent: #2f6aff;
  --yp-accent-soft: #f0f7ff;
  --yp-good: #52c41a;
  --yp-good-soft: #f6ffed;
  --yp-warn: #fa8c16;
  --yp-warn-soft: #fff7e6;
  --yp-bad: #f56c6c;
  --yp-bad-soft: #fff1f0;
}

.yp-hero {
  padding: 36px 0 40px;
  border-bottom: 1px solid #f0f2f5;
  color: var(--yp-ink);
  background:
    radial-gradient(circle at 1px 1px, rgba(47, 106, 255, 0.09) 1px, transparent 0) 0 0 / 24px 24px,
    linear-gradient(180deg, #f1f5ff 0%, #f8fafd 58%, #ffffff 100%);
}

.yp-wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.yp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 44px;
  align-items: start;
}

.yp-eyebrow {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--yp-accent-soft);
  color: var(--yp-accent);
  font-size: 13px;
}

.yp-hero h1 {
  margin: 10px 0 0;
  font-size: 38px;
  line-height: 1.26;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--yp-ink);
}

.yp-sub {
  max-width: 560px;
  margin-top: 10px;
  color: var(--yp-ink-2);
  font-size: 15px;
  line-height: 1.8;
}

.yp-card {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--yp-line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 12px rgba(31, 45, 61, 0.08);
}

.yp-field + .yp-field {
  margin-top: 16px;
}

.yp-field > label {
  display: block;
  margin-bottom: 8px;
  color: var(--yp-muted);
  font-size: 13px;
}

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

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

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

.yp-chip.on {
  border-color: var(--yp-accent);
  background: var(--yp-accent-soft);
  color: var(--yp-accent);
  font-weight: 600;
}

.yp-exam {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fafbfc;
}

.yp-exam b {
  font-size: 16px;
}

.yp-exam span {
  color: var(--yp-muted);
  font-size: 13px;
}

.yp-inputs {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.yp-inputs label {
  display: block;
  margin-bottom: 6px;
  color: var(--yp-ink-2);
  font-size: 14px;
}

.yp-inputs label b {
  color: var(--yp-accent);
}

.yp-inputs input[type="range"] {
  width: 100%;
  accent-color: var(--yp-accent);
}

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

.yp-result {
  position: sticky;
  top: 92px;
  padding: 18px;
  border: 1px solid var(--yp-line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(31, 45, 61, 0.1);
}

.yp-result-head {
  padding: 12px 14px;
  border-radius: 8px;
  background: #fafbfc;
}

.yp-result-head b {
  display: block;
  font-size: 18px;
}

.yp-result-head span {
  display: block;
  margin-top: 4px;
  color: var(--yp-muted);
  font-size: 13px;
  line-height: 1.65;
}

.yp-result-head.enough {
  background: var(--yp-good-soft);
}
.yp-result-head.enough b {
  color: var(--yp-good);
}
.yp-result-head.tight {
  background: var(--yp-warn-soft);
}
.yp-result-head.tight b {
  color: var(--yp-warn);
}
.yp-result-head.risk {
  background: var(--yp-bad-soft);
}
.yp-result-head.risk b {
  color: var(--yp-bad);
}

.yp-numbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 10px 0;
}

.yp-numbers > div {
  padding: 10px;
  border-radius: 8px;
  background: #fafbfc;
}

.yp-numbers span {
  display: block;
  color: var(--yp-muted);
  font-size: 12px;
}

.yp-numbers b {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}

.yp-numbers b.good {
  color: var(--yp-good);
}
.yp-numbers b.bad {
  color: var(--yp-bad);
}

.yp-week {
  padding: 12px;
  border-radius: 8px;
  background: #fafbfc;
}

.yp-week > span {
  display: block;
  margin-bottom: 8px;
  color: var(--yp-muted);
  font-size: 12px;
}

.yp-week-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid #eef1f6;
  font-size: 13px;
}

.yp-week-item:first-of-type {
  border-top: 0;
}

.yp-week-item time {
  flex: 0 0 auto;
  width: 46px;
  color: var(--yp-muted);
  font-size: 12px;
}

.yp-week-item em {
  flex: 1 1 auto;
  min-width: 0;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 任务类型：同一个知识点会连排「概览」与「练习」两项，不标出来就是两行一样的字 */
.yp-week-item em small {
  display: block;
  color: var(--yp-muted);
  font-size: 12px;
}

.yp-week-item i {
  flex: 0 0 auto;
  color: var(--yp-muted);
  font-style: normal;
  font-size: 12px;
}

.yp-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 11px 16px;
  border: 1px solid var(--yp-accent);
  border-radius: 8px;
  background: var(--yp-accent);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s ease;
}

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

/*
 * 次要出口「我还没确定科目」。
 *
 * 原来是与主按钮同宽的第二个块级按钮，两个大按钮上下并排占掉近 120px，
 * 首屏因此需要 915px 可视高才放得下——1366×768 的笔记本与开了 125% 缩放的
 * 1080p 屏都放不下。它不是这一屏要人做的那个动作，降成一行文字链接即可。
 */
.yp-alt {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 16px;
  border: 1px solid #dbe3f0;
  border-radius: 8px;
  background: #ffffff;
  color: var(--yp-accent);
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  transition: all 0.18s ease;
}

.yp-alt:hover {
  border-color: var(--yp-accent);
  background: var(--yp-accent-soft);
}

.yp-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.yp-hint {
  margin: 10px 0 0;
  color: var(--yp-muted);
  font-size: 12px;
  line-height: 1.7;
}

/* 测算失败或考期未定时替换整块数字区，不留半截结果误导人 */
.yp-note {
  margin: 10px 0;
  padding: 12px;
  border-radius: 8px;
  background: #fafbfc;
  color: var(--yp-ink-2);
  font-size: 13px;
  line-height: 1.8;
}

.yp-loading {
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

/* ---- 「先看清楚再决定」四个入口 ---- */

/* 分隔线挪到这里：科目矩阵与本节都是白底，中间不给条线就连成一片 */
.yp-links {
  padding: 48px 0;
  border-top: 1px solid #f0f2f5;
  background: #ffffff;
}

.yp-links-head h2 {
  margin: 10px 0 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--yp-ink);
}

.yp-links-head p {
  max-width: 720px;
  margin: 12px 0 0;
  color: var(--yp-ink-2);
  font-size: 15px;
  line-height: 1.9;
}

.yp-links-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.yp-links-grid a {
  display: block;
  padding: 18px;
  border: 1px solid var(--yp-line);
  border-radius: 12px;
  background: #ffffff;
  text-decoration: none;
  transition: all 0.18s ease;
}

.yp-links-grid a:hover {
  border-color: #c7d6f5;
  box-shadow: 0 6px 12px rgba(31, 45, 61, 0.08);
  transform: translateY(-2px);
}

.yp-links-grid b {
  display: block;
  color: var(--yp-ink);
  font-size: 16px;
}

.yp-links-grid small {
  display: block;
  margin-top: 8px;
  color: var(--yp-muted);
  font-size: 13px;
  line-height: 1.7;
}

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

@media (max-width: 1024px) {
  .yp-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .yp-result {
    position: static;
  }

  .yp-links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .yp-hero {
    padding: 32px 0;
  }

  .yp-hero h1 {
    font-size: 30px;
  }

  .yp-numbers {
    grid-template-columns: 1fr;
  }

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