/* 选词浮层。三个页面共用：答题页、成绩页、错题本。
   ⚠️ 答题页的 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: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-pop);
  font: 14px/1.6 var(--font);
  color: var(--text);
  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: var(--text-muted); 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 var(--primary); background: var(--primary); color: var(--on-primary);
  border-radius: var(--radius-sm); padding: 5px 11px; white-space: nowrap;
}
.wp-btn:hover { background: var(--heading); border-color: var(--heading); }
.wp-btn.wp-on { background: transparent; color: var(--heading); border-color: var(--border-strong); }
.wp-btn[disabled] { opacity: .6; cursor: default; }
/* 触屏：按钮至少 44px 高（Apple HIG 44pt；WCAG 2.5.8 最低 24px） */
@media (pointer: coarse) {
  .wp-btn { min-height: 44px; min-width: 44px; padding: 10px 14px; font-size: 14px; }
  .wp-tip button { min-height: 44px; min-width: 44px; }
}

.wp-body { padding: 0 10px 10px; border-top: 1px solid var(--border); }
.wp-cn { white-space: pre-line; margin-top: 8px; font-size: 14px; }
.wp-en { margin-top: 6px; color: var(--text-muted); 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: var(--link);
  background: var(--info-bg); border-radius: 999px; padding: 1px 8px;
}
.wp-miss { padding: 8px 10px 10px; color: var(--text-muted); font-size: 12.5px; border-top: 1px solid var(--border); }
.wp-note { padding: 6px 10px 9px; color: var(--text-muted); font-size: 12px; border-top: 1px solid var(--border); }

/* 高亮。考试中会一直挂在卷面上，所以只能用背景色，不能动字号或行高 ——
   一动就整段重排，学生正在读的那一行会跳走。 */
mark.wp-hit {
  background: var(--wp-hit, #FFF0A8);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
  cursor: pointer;
}
:root[data-theme="dark"] { --wp-hit: #4A4000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --wp-hit: #4A4000; } }
/* 高对比度档（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: var(--panel);
  color: var(--on-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-pop);
  font: 13.5px/1.55 var(--font);
  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: var(--accent-on-panel); font-weight: 600; white-space: nowrap; }
.wp-tip button {
  flex: none;
  font: inherit; font-size: 13px; cursor: pointer;
  background: transparent; color: var(--on-panel);
  border: 1px solid var(--on-panel-muted); border-radius: var(--radius-sm);
  padding: 4px 10px;
}
.wp-tip button:hover { background: var(--overlay-fade); }

/* 答题页三档字号会放大 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); }
}