/* 选词浮层。三个页面共用：答题页、成绩页、错题本。
   ⚠️ 答题页的 exam.css 会把 body 放大到三档字号，所以这里一律用 px 不用 em ——
   跟着卷面字号一起放大的话，浮层会在 Large 档挡住半栏文字。 */

.wp-pop {
  position: fixed;
  /* 高于答题卡侧栏(55)与站点顶栏(1000)，低于交卷弹窗(200)——
     交卷确认弹出时浮层必须被盖住，否则学生会对着一个半截释义点确认。
     ⚠️ shell.css 的 .header 是 1000，成绩页/错题本上浮层要压过它，
     所以取 1200 并在弹窗打开时由 exam.js 主动收起（见 hide()）。 */
  z-index: 1200;
  display: none;
  max-width: min(360px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid #cbd5e0;
  border-radius: 10px;
  box-shadow: 0 10px 34px rgba(16, 24, 40, .18);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #1a202c;
  overflow: hidden;
}
.wp-pop[data-open="1"] { display: block; }

.wp-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.wp-word {
  font-weight: 700; font-size: 15px; letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px;
}
.wp-ph { color: #718096; font-size: 12.5px; white-space: nowrap; }
.wp-spacer { flex: 1 }

.wp-btn {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid #2b6cb0; background: #2b6cb0; color: #fff;
  border-radius: 7px; padding: 5px 11px; white-space: nowrap;
}
.wp-btn:hover { background: #245a94; }
.wp-btn.wp-on { background: #fff; color: #2b6cb0; }
.wp-btn[disabled] { opacity: .6; cursor: default; }

.wp-body { padding: 0 10px 10px; border-top: 1px solid #edf2f7; }
.wp-cn { white-space: pre-line; margin-top: 8px; font-size: 14px; }
.wp-en { margin-top: 6px; color: #4a5568; font-size: 12.5px; line-height: 1.55; font-style: italic; }
.wp-tag { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.wp-tag span {
  font-size: 11.5px; font-weight: 600; color: #2b6cb0;
  background: #EEF3F9; border-radius: 999px; padding: 1px 8px;
}
.wp-miss { padding: 8px 10px 10px; color: #718096; font-size: 12.5px; border-top: 1px solid #edf2f7; }
.wp-note { padding: 6px 10px 9px; color: #718096; font-size: 12px; border-top: 1px solid #edf2f7; }

/* 高亮。考试中会一直挂在卷面上，所以只能用背景色，不能动字号或行高 ——
   一动就整段重排，学生正在读的那一行会跳走。 */
mark.wp-hit {
  background: #FFF0A8;
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
  cursor: pointer;
}
/* 高对比度档（exam.css 的 data-contrast）下黄底黑字会糊成一片 */
[data-contrast="wb"] mark.wp-hit, [data-contrast="white-on-black"] mark.wp-hit {
  background: #4A4000; color: #FFFFFF;
}
/* 黄字黑底档：底色要够亮才看得出这个词被标过，但不能亮到把黄字吃掉 */
[data-contrast="yb"] mark.wp-hit, [data-contrast="yellow-on-black"] mark.wp-hit {
  background: #6B5E00; color: #FFFF00;
}

/* ---------------------------------------------------------------- 第一次的提示
   一个没人发现的功能等于没有。学生不会无缘无故去划卷面上的字，
   所以开卷时主动提示；确认或实际选词后才记为已读。
   ⚠️ 贴在卷面**底部**，不压正文、不挡题目：它是提示不是弹窗。 */
.wp-tip {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(8px);
  z-index: 1100;                 /* 低于浮层本身(1200)：一旦选中词，浮层要压过它 */
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(420px, calc(100vw - 24px));
  white-space: nowrap;
  padding: 10px 12px 10px 14px;
  background: #1a202c;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(16, 24, 40, .28);
  font: 13.5px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.wp-tip[data-open="1"] { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
/* ⛔ 「划一下」是这句话的动作本身，被拆成两行读起来就断了 */
.wp-tip b { color: #FFE58F; font-weight: 600; white-space: nowrap; }
.wp-tip button {
  flex: none;
  font: inherit; font-size: 13px; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.28); border-radius: 7px;
  padding: 4px 10px;
}
.wp-tip button:hover { background: rgba(255,255,255,.24); }

/* 答题页三档字号会放大 body，提示是固定件，不跟着放大 */
@media (max-width: 420px) {
  /* 手机上一行放不下：让它铺满宽度、文字自然换行，按钮别再挤占那一行 */
  .wp-tip {
    left: 8px; right: 8px; transform: translateY(8px);
    max-width: none; white-space: normal;
    font-size: 12.5px; padding: 9px 10px 9px 12px;
  }
  .wp-tip[data-open="1"] { transform: translateY(0); }
}