/*!
 * objective —— 客观题增强样式（见 installed-plugins.md 第 33 节）
 *
 * 全部限定在题目正文区 .problem-content 内，不碰站内别处的 radiobox
 * （比如偏好设置页、题目编辑页的单选）。
 * 字号用 rem：会跟着 uifont 插件的「整体字号」一起放大；没有 uifont 时按根字号 16px 算。
 */

/* ============ 选项：做成卡片 ============ */
.problem-content .typo label.radiobox {
  display: block;
  position: relative;
  box-sizing: border-box;
  margin: 10px 0;
  padding: 12px 16px 12px 46px;
  border: 1.5px solid #e2e6ee;
  border-radius: 10px;
  background: #fff;
  font-size: 1.0625rem;   /* 17px，原来是 14px */
  line-height: 1.75;
  color: #2b3140;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
}
.problem-content .typo label.radiobox:hover {
  border-color: #b9c3ff;
  background: #fafbff;
}

/* 选项前面的单选/复选框：绝对定位到左侧，避免 label 内联布局在各浏览器里乱掉 */
.problem-content .typo label.radiobox > input[type="radio"],
.problem-content .typo label.radiobox > input[type="checkbox"] {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  margin: 0;
  cursor: pointer;
  accent-color: #2f4fe0;
}

/* 选中态：边框加深 + 淡蓝底 + 加粗 + 外发光
   :has 是现代浏览器的写法；老一点的浏览器由 objective.js 补 is-checked 类 */
.problem-content .typo label.radiobox:has(> input:checked),
.problem-content .typo label.radiobox.is-checked {
  border-color: #2f4fe0;
  background: #e6ebff;
  box-shadow: 0 0 0 3px rgba(47, 79, 224, .13);
  color: #16225a;
  font-weight: 600;
}
.problem-content .typo label.radiobox.is-checked:hover,
.problem-content .typo label.radiobox:has(> input:checked):hover {
  border-color: #2f4fe0;
  background: #dfe6ff;
}

/* 选项内部若有多段内容，别把卡片撑破 */
.problem-content .typo label.radiobox > p { margin: 0; }
.problem-content .typo label.radiobox > p + p { margin-top: .4em; }
.problem-content .typo label.radiobox ul { margin: .3em 0 0; }

/* ============ 填空 / 下拉 ============ */
.problem-content .typo .objective-input.textbox,
.problem-content .typo .objective-input.select,
.problem-content .typo textarea.objective-input {
  font-size: 1rem;
  min-height: 42px;
  padding: 8px 12px;
  border: 1.5px solid #e2e6ee;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.problem-content .typo [class*="objective_"] select.objective-input { height: 42px; }
.problem-content .typo .objective-input.textbox:focus,
.problem-content .typo .objective-input.select:focus,
.problem-content .typo textarea.objective-input:focus {
  outline: none;
  border-color: #2f4fe0;
  box-shadow: 0 0 0 3px rgba(47, 79, 224, .13);
}

/* ============ 交卷按钮 ============ */
.problem-content .typo > input[type="submit"] {
  margin-top: 18px;
  /* 别再靠「固定 height + 加大 padding」来放大按钮了：
     主题 .button 定的是 height:35px / line-height:33px（差 2px 边框，靠这个把文字居中），
     这里只加 padding:10px 的话，内容区只剩 35-20-2=13px，而 line-height 还是 33px，
     文字就整个往下溢出 —— 这就是「递交两个字偏下、没居中」的原因。
     改成让高度由 line-height + 上下内边距自己撑开（height:auto），三者自洽，就永远居中。 */
  height: auto;
  line-height: 1.5;
  padding: .6875rem 1.875rem;   /* 11px / 30px */
  font-size: 1.0625rem;
  vertical-align: middle;
}

/* 题干整体也放大一点（只有客观题页会加 is-objective） */
body.is-objective .problem-content .typo { font-size: 1.0625rem; }
body.is-objective .problem-content .typo .objective-input.textbox,
body.is-objective .problem-content .typo .objective-input.select,
body.is-objective .problem-content .typo textarea.objective-input { font-size: 1rem; }

/* ============ 侧栏「第几题」的已作答标记 ============ */
#problem-navigation .contest-problems a.pending {
  background: #2f4fe0 !important;
  border-color: #2f4fe0 !important;
  color: #fff !important;
}

/* ============ 倒计时（右上角）============ */
.objective-timer {
  position: fixed;
  right: 20px;
  /* 站点的顶栏（nav）是 position:fixed、高 45px 的，所以右上角要往下让开它，别压在导航上。
     另外必须把 bottom 复位成 auto —— 否则 top/bottom 同时有值，浮层会被拉伸成整条。 */
  top: 58px;
  bottom: auto;
  z-index: 999;
  display: none;
  align-items: center;
  gap: 8px;
  max-width: 78vw;
  padding: 10px 16px;
  border: 1.5px solid #e2e6ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(20, 30, 60, .12);
  font-size: 13px;
  color: #454b57;
}
.objective-timer.is-on { display: flex; }
.objective-timer__label { font-size: 12.5px; color: #8a8f98; white-space: nowrap; }
.objective-timer__val {
  font-family: ui-monospace, Consolas, Menlo, monospace;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #2f4fe0;
}
.objective-timer__hint { font-size: 12px; color: #98a2b3; line-height: 1.4; max-width: 200px; }
.objective-timer.is-idle .objective-timer__val { color: #b6bcc6; }
.objective-timer.is-urgent { border-color: #e5484d; background: #fff5f5; }
.objective-timer.is-urgent .objective-timer__val,
.objective-timer.is-urgent .objective-timer__label { color: #e5484d; }
.objective-timer.is-done .objective-timer__val { color: #e5484d; }

/* ============ 小提示条 ============ */
.objective-toast {
  position: fixed;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  z-index: 10000;
  max-width: 80vw;
  padding: 10px 20px;
  border-radius: 8px;
  background: rgba(20, 26, 48, .88);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}
