/* pages-profile.css —— 个人页（#/progress，导航「我的」）

   老师 2026-09-21 定：
     · **昵称可改，但要审核** —— 提交后不生效（.pf-pending 那一行说明状态）
     · **真实姓名不可改** —— 只读那一块（.pf-fixed）刻意做成**没有输入框**，
       样式上也别给它留一个「看起来能点」的位置。
   ★ 依赖 theme.css 的令牌与 components.css 的 .panel / .btn*，不重复定义。
*/

.pf {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}

.pf-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------------- 头部：头像 + 名字 ---------------- */

.pf-head {
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.pf-av {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-input);
}

.pf-head-mid {
  min-width: 0;
}

.pf-name {
  font-size: var(--fs-xl);
  color: var(--t-bright);
  word-break: break-all;
}

.pf-sub {
  font-size: var(--fs-sm);
}

/* ---------------- 说明文字 ---------------- */

.pf-note {
  font-size: var(--fs-sm);
  color: var(--t-muted);
  line-height: 1.6;
}

/* ---------------- 待审核 / 被驳回 ---------------- */

.pf-pending {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  background: var(--c-input);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--t-primary);
}

/* ★ 被驳回时换个边框色 —— 只能用 theme.css 里**真有**的令牌。
   第一版写了 --c-warn，theme.css 里根本没这个变量，
   `_selftest.py` 的「CSS 引用的变量全部有定义」当场抓到（红色系是 --c-red-a）。 */
.pf-pending.is-bad {
  border-color: var(--c-red-a);
}

.pf-pending-tag {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--c-accent-dim);
  color: var(--t-bright);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

/* ---------------- 改昵称的输入行 ---------------- */

.pf-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pf-input {
  flex: 1 1 200px;
  min-width: 0;
  min-height: var(--tap);
  padding: 0 12px;
  background: var(--c-input);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  color: var(--t-primary);
}

.pf-input:focus {
  border-color: var(--c-accent-dim);
  outline: none;
}

/* ---------------- 只读的学籍信息 ---------------- */

.pf-fixed {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--c-line);
}

.pf-fixed:last-of-type {
  border-bottom: 0;
}

.pf-label {
  flex: none;
  width: 84px;
  font-size: var(--fs-sm);
  color: var(--t-muted);
}

.pf-value {
  font-size: var(--fs-md);
  color: var(--t-primary);
  word-break: break-all;
}

/* ---------------- 待审的昵称申请（教师 / admin） ----------------
   全站不弹原生窗，所以驳回理由是**行内**展开的一行输入。 */

.pf-review {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pf-rrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--c-line);
}

.pf-rrow:last-child {
  border-bottom: 0;
}

.pf-rwho {
  flex: 1 1 140px;
  min-width: 0;
  color: var(--t-primary);
}

.pf-rnick {
  flex: none;
  color: var(--t-bright);
}

.pf-racts {
  display: flex;
  gap: 8px;
  flex: none;
}

.pf-rwhy {
  display: flex;
  flex: 1 1 100%;
  gap: 8px;
  margin-top: 4px;
}

/* ---------------- 窄屏：头像收小、标签不再占固定宽 ---------------- */

@media (max-width: 599px) {
  .pf-head {
    gap: 12px;
  }

  .pf-av {
    width: 44px;
    height: 44px;
  }

  .pf-label {
    width: 68px;
  }
}

/* ---------------- 「最近动态」：成就（按日）+ 练习（最近十条）（2026-09-22） ----------------
   老师要求：个人页撤掉「学籍信息」，换成这两块。
   ★ 「按照日期从远到近，依次向上，以日为单位」= 时间轴往上走 ⇒ 最新的一天在最上面；
     日期靠左固定一列（tabular-nums 对齐），右边是那一天的成就。
   ★ 两条列表都用**虚线分隔 + 首行无分隔**，不用卡片套卡片 ——
     个人页已经有两张卡了，里面再堆卡片会碎成一地。 */
.pf-sec {
  margin: 0 0 10px;
  font-size: var(--fs-lg);
}

/* 身份切换（只有教师看得到）——一行两个按钮，当前那个高亮 */
.btn-sm {
  padding: 4px 10px;
  font-size: var(--fs-sm);
}

.pf-badge-switch {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.pf-badge-switch .btn.is-on {
  color: var(--c-gold);
  border-color: rgba(212, 175, 55, 0.55);
  background: rgba(212, 175, 55, 0.12);
}

.pf-subsec {
  margin: 12px 0 8px;
  font-size: var(--fs-md);
  color: var(--t-muted);
}

.pf-day {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px dashed var(--c-line-soft);
}

.pf-day:first-of-type {
  border-top: none;
}

.pf-day-date {
  flex: none;
  width: 92px;
  font-size: var(--fs-sm);
  color: var(--t-dim);
  font-variant-numeric: tabular-nums;
}

.pf-day-items {
  flex: 1 1 auto;
  min-width: 0;
}

.pf-ach {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0;
}

.pf-ach-icon {
  flex: none;
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--c-gold);
}

.pf-ach-icon svg {
  width: 16px;
  height: 16px;
}

.pf-ach-name {
  font-size: var(--fs-md);
  color: var(--t-bright);
}

.pf-ach-desc {
  font-size: var(--fs-sm);
}

.pf-plist {
  display: flex;
  flex-direction: column;
}

.pf-prow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: var(--fs-sm);
  border-top: 1px dashed var(--c-line-soft);
}

.pf-prow:first-child {
  border-top: none;
}

.pf-pwhen {
  flex: none;
  width: 78px;
  color: var(--t-dim);
  font-variant-numeric: tabular-nums;
}

.pf-pwhat {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pf-pmode {
  flex: none;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  color: var(--t-muted);
  background: var(--c-input);
}

.pf-pmode.is-ch {
  color: var(--c-gold);
}

.pf-pres {
  flex: none;
  color: var(--c-green-a);
}

.pf-pres.is-abort {
  color: var(--t-dim);
}

/* ---------------- 自定义头像 + 成就点锁位（2026-09-30） ---------------- */

.pf-lock {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  background: var(--c-input);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--t-primary);
}

.pf-lock-tag {
  flex: none;
  color: var(--c-gold);
}

.pf-av-now {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pf-av-note {
  font-size: var(--fs-sm);
  color: var(--t-muted);
}

.pf-avgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pf-avopt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  min-width: 64px;
  background: var(--c-input);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  cursor: pointer;
}

.pf-avopt:hover {
  border-color: var(--c-gold);
}

.pf-avopt.is-on {
  border-color: var(--c-gold);
  background: var(--c-hover);
}

.pf-avopt .avatar {
  width: 44px;
  height: 44px;
}

.pf-avopt-name {
  font-size: var(--fs-xs);
  color: var(--t-primary);
}

/* =====================================================================
   词汇量测评 · 晋级考 · 保级考（老师 2026-09-30）
   ---------------------------------------------------------------------
   三条约束（改样式前先读）：
     · 只用 theme.css 里**真有**的令牌（`_audit_css_syntax.py` 会查未定义变量）；
     · 学生那一屏（.pf-exam* / .pf-quiz*）与老师那一屏（.pf-win*）**不改段位卡**，
       段位卡那套 .rk-* 样式在 components.css，这里不重定义；
     · 交互单位不许小于 --tap（44px）——触屏是主设备。
   ===================================================================== */

/* ---------------- 我的词汇量：三个数（当前 / 学到 / 测评） ---------------- */

.pf-exam-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pf-exam-nums {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pf-num {
  flex: 1 1 120px;
  min-width: 0;
  padding: 8px 12px;
  background: var(--c-input);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.pf-num.is-main {
  border-color: var(--c-accent-dim);
}

.pf-num-k {
  font-size: var(--fs-xs);
  color: var(--t-muted);
}

.pf-num-v {
  font-size: var(--fs-2xl);
  color: var(--t-bright);
  font-variant-numeric: tabular-nums;
}

.pf-exam-inv,
.pf-exam-rule {
  font-size: var(--fs-sm);
  color: var(--t-muted);
  line-height: 1.6;
}

.pf-exam-warn {
  padding: 6px 10px;
  border: 1px solid var(--c-red-a);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--t-primary);
}

.pf-exam-hint {
  padding: 6px 10px;
  background: var(--c-input);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--t-primary);
}

/* ---------------- 一条考试 ---------------- */

.pf-exam-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px dashed var(--c-line-soft);
}

.pf-exam-row:first-of-type {
  border-top: none;
}

.pf-exam-row.is-off {
  opacity: 0.72;
}

.pf-exam-main {
  flex: 1 1 auto;
  min-width: 0;
}

.pf-exam-title {
  color: var(--t-bright);
  font-size: var(--fs-md);
}

.pf-exam-meta,
.pf-exam-note,
.pf-exam-why {
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.pf-exam-done {
  font-size: var(--fs-sm);
  color: var(--c-green-a);
}

/* ---------------- 答题屏 ---------------- */

.pf-quiz-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.pf-quiz-pos {
  color: var(--t-bright);
  font-variant-numeric: tabular-nums;
}

.pf-quiz-clock {
  color: var(--c-gold);
  font-variant-numeric: tabular-nums;
}

.pf-quiz-tip {
  font-size: var(--fs-xs);
}

.pf-quiz-ask {
  padding: 14px 12px;
  background: var(--c-input);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--fs-lg);
  color: var(--t-bright);
  word-break: break-word;
}

.pf-quiz-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-quiz-opt {
  min-height: var(--tap);
  padding: 10px 12px;
  text-align: left;
  background: var(--c-card-hi);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  color: var(--t-primary);
  cursor: pointer;
}

.pf-quiz-opt:hover {
  border-color: var(--c-accent-dim);
  background: var(--c-hover);
}

.pf-quiz-opt.is-pick {
  border-color: var(--c-gold);
  color: var(--t-bright);
}

.pf-quiz-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pf-quiz-res {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.pf-res-score {
  font-size: var(--fs-2xl);
  color: var(--t-bright);
  font-variant-numeric: tabular-nums;
}

.pf-quiz-marks {
  font-size: var(--fs-md);
  color: var(--c-green-a);
  word-break: break-all;
  line-height: 1.8;
}

/* ---------------- 考试记录 ---------------- */

.pf-hist {
  display: flex;
  flex-direction: column;
}

.pf-hist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: var(--fs-sm);
  border-top: 1px dashed var(--c-line-soft);
}

.pf-hist-row:first-child {
  border-top: none;
}

.pf-hist-when {
  flex: none;
  width: 78px;
  color: var(--t-dim);
  font-variant-numeric: tabular-nums;
}

.pf-hist-kind {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--t-primary);
}

.pf-hist-score {
  flex: none;
  color: var(--t-muted);
  font-variant-numeric: tabular-nums;
}

.pf-hist-res {
  flex: none;
  color: var(--t-dim);
}

.pf-hist-res.is-on {
  color: var(--c-gold);
}

/* ---------------- 老师：开窗选人 ---------------- */

.pf-win-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-win-formrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pf-win-formrow .pf-input {
  flex: 1 1 180px;
  min-width: 0;
}

.pf-win-logins {
  min-height: 72px;
  padding: 8px 12px;
  resize: vertical;
}

.pf-winlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pf-winwrap {
  border-top: 1px dashed var(--c-line-soft);
  padding-top: 8px;
}

.pf-winrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.pf-winmain {
  flex: 1 1 200px;
  min-width: 0;
}

.pf-wintitle {
  color: var(--t-bright);
}

.pf-winmeta {
  font-size: var(--fs-sm);
}

.pf-winactions {
  display: flex;
  gap: 8px;
  flex: none;
}

.pf-winres {
  margin-top: 6px;
}

.pf-winres-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: var(--fs-sm);
}

.pf-winres-who {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--t-primary);
}

.pf-winres-score {
  flex: none;
  color: var(--t-muted);
  font-variant-numeric: tabular-nums;
}

.pf-winres-res {
  flex: none;
  color: var(--c-gold);
}

.pf-win-ok {
  color: var(--c-green-a);
}

.pf-win-bad {
  color: var(--c-red-a);
}