/* ============================================================
   科德大陆 · 符文试炼 —— 管理端**共用**样式
   ⚠️ 由**四个页面**共用：
        admin.html（班级开号）· players.html（玩家运维）· skip.html（教师补通）
        · class.html（我的班级）

   加载顺序（硬约束，顺序错会被后加载者覆盖）：
     vendor/bootstrap.min.css → theme.css → style.css
       → admin-common.css → admin.css（开号页）/ players.css（运维页）/ skip.css（补通页）

   ⚠️ 本文件**只放多页真的共用**的东西：
        · 提示文案 .hint 一族
        · 选项行 .options（含「输入框与按钮等高」规则）
        · 结果摘要 .summary
        · 单列三段布局 .console / .panel--grow（运维页与补通页共用）
        · 可折叠卡片 .disclosure（同上，两页的"管理身份"卡）
      只属于某一页的样式一律写进该页专属文件 ——
      **同名选择器只允许在这一处定义**，不要在页面文件里再写一遍 ✗
      （写两遍就会"改一处漏一处"，两边慢慢跑偏）

   页面外壳 .app / .topbar / .brand / .panel / .actions / .chip → 来自 style.css
   ============================================================ */

/* ---------------- 提示文案 ---------------- */
.hint {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-dim);
}
/* <code> 的着色已由 theme.css 的 --bs-code-color 接管，这里只换等宽字体 */
.hint code { font-family: var(--mono); }

/* 紧跟在输入框下方的说明（上面那行 .options 已带 10px 上边距，这里不再叠） */
.hint--tight { margin-top: -4px; }

/* 需要老师注意的提示（如"密码前缀太短"） */
.hint--warn { color: var(--danger); }

/* 面板底部的说明：压到最下方，与上面的操作区区分开 */
.hint--foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

/* ---------------- 选项行 ---------------- */
.options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;   /* 行内混排「输入框 + 按钮」时按中线对齐（见下方等高规则） */
  gap: 10px;
  margin-top: 10px;
}

.options label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
}

/* 尺寸 / 边框 / 圆角 / 焦点态由 Bootstrap .form-control 提供，
   这里只补宽度、内边距与配色 */
.options input {
  width: 150px;
  padding: 5px 8px;
  background-color: var(--bg-panel-2);
  font-family: var(--mono);
  font-size: 12px;
}
/* 覆盖 .form-control:focus 的深色底，避免聚焦时输入框变暗 */
.options input:focus { background-color: var(--bg-panel-2); }

/* ---------------- 输入框与按钮「同行 + 等高」----------------
   ⚠️ 两者**高度的来源不同**，放同一行会明显错位（差 ~7px）：
     · `.options input` ：padding 5+5 + 行高 18 + 边框 2 = **30px**
     · Bootstrap `.btn` ：padding 8+8 + 行高 19.5 + 边框 2 ≈ **37.5px**
       （theme.css 把 `--bs-btn-padding-y` 调成了 8px）
   所以这里统一**由 height 决定**，不再让两边各算各的；
   30px 正是输入框原本的高度 ⇒ 视觉零变化 ✓ */
.options input,
.options .btn {
  height: 30px;
}
/* 按钮改成 flex 容器：垂直居中（抵消 Bootstrap 的上下 padding）
   ⚠️ `inline-flex` 的默认 `justify-content: flex-start` 会让文字**靠左** ✗ ——
      原本的 `inline-block` + `text-align:center` 是居中的，所以这里必须显式补回居中 ✓ */
.options .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------------- 单列三段布局（运维页 / 补通页共用）----------------
   ⚠️ 这段原本写在 players.css 里，做「教师补通」页时**上移**到这里 ——
      两页用的是同一套外壳（身份 → 操作 → 结果），复制一份必然"改一处漏一处" ✗
   ⚠️ 它与开号页的「左输入 / 右结果」对称双栏（.admin，见 admin.css）是**两种**布局 ✓ */
.console {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

/* 上面的卡按内容高度（身份卡折叠后只占一行） */
.console > .panel { flex: none; }

/* 只有一张卡**吃掉剩余高度**（结果 / 列表区）：
   列表内滚，标题与操作区始终可见 ✓ */
.console > .panel--grow {
  flex: 1;
  min-height: 0;
}

/* ---------------- 可折叠卡片（①「管理身份」）----------------
   用原生 <details>：零 JS、键盘可达、状态可被脚本设置（各页据此决定默认开合）
   ⚠️ 收起只是**视觉**隐藏 —— 内部的 <input> 仍在 DOM 里 ✓
      所以 admin-api.js 照常按 data-role 查找、登录逻辑不受影响 ✓ */
.disclosure > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;                     /* 去掉默认三角，改用自绘 ▸/▾ */
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before {
  content: '▸';
  font-size: 11px;
  color: var(--text-dim);
  transition: transform .15s;
}
.disclosure[open] > summary::before { content: '▾'; }

/* 标题沿用 .panel__title 的字号字重（HTML 里两个类一起写），只去掉它的下边距 */
.disclosure__title { margin: 0; }

/* 摘要右侧的身份徽标（.chip 外观来自 theme.css），推到最右 */
.disclosure__badge { margin-left: auto; }

/* 展开后的内容与摘要之间留距离 */
.disclosure__body { margin-top: 12px; }

/* ---------------- 「管理身份」卡里的**令牌折叠块**（2026-09-20 加 ✓）----------------
   口径（见 `Plan/5` §9.31 ③）：老师账号是**主推**路径 ✓；
   令牌是"脚本 / 应急"通道 ⇒ **默认收起** ✓（摊在表单里会显得"令牌是常规用法" ✗）
   外观刻意比外层 `.disclosure` **更轻** ✓：一行小字 + ▸/▾，不再套一层卡片边框 ✓
   ⚠️ 它由 `admin-api.js` 的 `mountAuthCard` 渲染 ✓（四页共用 ✓ —— 别在页面里再写一遍 ✗） */
.auth-token { margin-top: 10px; }

.auth-token > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-dim);
  list-style: none;                     /* 去掉默认三角，改用自绘 ▸/▾（同 .disclosure ✓）*/
}
.auth-token > summary::-webkit-details-marker { display: none; }
.auth-token > summary::before {
  content: '▸';
  font-size: 11px;
  margin-right: 4px;
}
.auth-token[open] > summary::before { content: '▾'; }
.auth-token > summary:hover { color: var(--accent); }
/* 摘要里那句说明：`.hint` 自带上下边距，会把这行撑高 ✗ ⇒ 这里压平 ✓ */
.auth-token > summary .hint { margin: 0; display: inline; }

/* ---------------- 危险操作确认区（多页共用）----------------
   虚线描边提醒"这一步不可逆"（运维页=删号，补通页=改进度）*/
.confirm {
  margin-top: 10px;
  padding: 10px;
  font-size: 12px;
  line-height: 1.9;
  border: 1px dashed var(--danger);
  border-radius: 8px;
}
.confirm code { font-family: var(--mono); }
.confirm__row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* ---------------- 结果摘要 ---------------- */
.summary {
  padding: 12px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.8;
}
.summary b { color: var(--accent); }
.summary .bad { color: var(--danger); }