/* =========================================================
   晋升权限（modules/rank.js）· 极简
   ---------------------------------------------------------
   没有纸、没有装订、没有阴影、没有噪声。
   整块只有三样东西：一条 1px 的线、一行字、一组数字。

     ┌──────────────────────────────┐
     │ 晋升权限            3 阶 · …  │  ← 顶栏
     ├──────────────────────────────┤
     │ 异象调查终端            LV 3  │  ← 工位卡（编号 / 阶名）
     │ 3  特勤官                    │
     │    CLEARANCE · LV 3          │
     │                  ID 0003-…   │
     ├──────────────────────────────┤
     │ 阶位进度              3 / 10  │  ← 刻度尺
     │ ││││││││││                   │
     ├──────────────────────────────┤
     │ 下一阶 · 高级调查员    12,000 │  ← 申请单
     │ ✓ 高危及以上登记      3/5     │
     │ ✕ 一级封存层 解封     未解封  │
     ├──────────────────────────────┤
     │        提交晋升申请           │
     └──────────────────────────────┘
                            ◣ 权限    ← 折角

   翻页：折角一点，整张直接翻过去，不做任何过渡动画。
   ========================================================= */

/* ================= 面板 ================= */
#rank-box.rank-panel {
  padding: 0;
  border: 1px solid var(--border);
  background: var(--panel);
}

.rank-paper {
  position: relative;
  background: var(--panel);
  color: var(--text);
}

/* ================= 翻页：正反两面 =================
   不做 3D、不加 transition——翻就是换一面，中间不留过程。 */
.rank-stage {
  position: relative;
}

#rank-box.flipped .rank-side-a,
#rank-box:not(.flipped) .rank-side-b {
  display: none;
}

.rank-side {
  position: relative;
  padding-bottom: 34px;          /* 给右下角的折角留位置 */
}

/* 背面：清单自己排，长了自己滚 */
.rank-side-b {
  display: flex;
  flex-direction: column;
}

/* 未接入：没有背面可翻，折角也不存在 */
#rank-box.locked .rank-side {
  padding-bottom: 0;
}

#rank-box.locked .rank-ear {
  display: none;
}

/* ================= 折角 =================
   一块 34px 的方，被对角线切成两个三角：
     左上 = 折上来的纸背，亮一档
     右下 = 折走后露出来的底页，暗一档
   中间那道斜线就是折缝。点它翻页。 */
.rank-ear {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 5;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background:
    linear-gradient(135deg,
      transparent calc(50% - 0.5px),
      #39414d calc(50% - 0.5px),
      #39414d calc(50% + 0.5px),
      transparent calc(50% + 0.5px)),
    linear-gradient(135deg, #1d232b 0 50%, #060708 50% 100%);
}

/* 三角已经由背景画完了，这两层不再需要 */
.rank-ear .re-under,
.rank-ear .re-fold {
  display: none;
}

.rank-ear .re-label {
  position: absolute;
  right: 3px;
  bottom: 3px;
  font-family: monospace;
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0;
  color: #6b7380;
  pointer-events: none;
}

.rank-ear:hover .re-label {
  color: var(--text);
}

.rank-ear:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -2px;
}

/* ================= 顶栏 ================= */
.rank-plate {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px 9px;
  border-bottom: 1px solid var(--border);
}

.rank-plate-title {
  font-size: 10px;
  letter-spacing: 3px;
  color: #fff;
}

.rank-plate-meta {
  margin-left: auto;
  font-family: monospace;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ================= 工位卡 =================
   一张卡该有的信息全留着：编号、阶名、许可级别、序列号。
   卡本身不是实物，只是一组对齐的字。 */
.rank-badge {
  margin: 12px 14px 0;
}

.rb-sleeve {
  padding: 9px 10px 8px;
  border: 1px solid var(--border);
}

.rb-strip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
  font-size: 8.5px;
  letter-spacing: 1.6px;
  color: var(--text-dim);
}

.rb-strip-lv {
  font-family: monospace;
  letter-spacing: 0.6px;
  color: var(--accent);
}

.rb-main {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 9px;
}

/* 照片框：空着，只放编号 */
.rb-photo {
  flex: none;
  width: 38px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-light);
}

.rb-no {
  font-family: monospace;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.rb-id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.rb-name {
  font-size: 13px;
  letter-spacing: 2.5px;
  line-height: 1.3;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rb-sub {
  margin-top: 4px;
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 1.2px;
  color: var(--text-dim);
}

.rb-foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
}

.rb-serial {
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* 极简之后不再有这些东西：条码、反光 */
.rb-bars,
.rb-gloss {
  display: none;
}

/* 空白卡：未接入时所有字退成暗色 */
.rank-badge.blank .rb-no,
.rank-badge.blank .rb-name {
  color: var(--text-dim);
}

.rank-badge.blank .rb-strip-lv {
  color: var(--text-dim);
}

.rank-badge.blank .rb-name {
  letter-spacing: 4px;
}

/* ================= 阶位刻度尺 ================= */
.rank-scale {
  margin: 14px 14px 0;
}

.rs-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-family: monospace;
  font-size: 8.5px;
  letter-spacing: 1.2px;
  color: var(--text-dim);
}

.rs-count {
  color: var(--text);
  letter-spacing: 0.5px;
}

/* 一根细线 + 一排竖刻度 */
.rs-track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 12px;
  padding: 0 2px;
}

.rs-track::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 1px;
  background: var(--border);
}

.rs-track i {
  position: relative;
  display: block;
  width: 1px;
  height: 5px;
  background: var(--border-light);
}

.rs-track i.on {
  background: var(--text-dim);
}

.rs-track i.cur {
  height: 9px;
  background: var(--accent);
}

/* ================= 晋升申请单 ================= */
.rank-doc {
  position: relative;
  margin: 16px 14px 0;
}

.rd-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.rd-title {
  font-size: 11.5px;
  letter-spacing: 1px;
  color: #fff;
}

.rd-cost {
  font-family: monospace;
  font-size: 11px;
  color: var(--gold);
  white-space: nowrap;
}

.rd-desc {
  font-size: 10px;
  line-height: 1.7;
  color: var(--text-dim);
  margin-bottom: 8px;
}

/* 授予栏：一条红线挂在左边，跟档案页的共鸣收益同一套写法 */
.rd-grant {
  font-size: 10px;
  line-height: 1.6;
  color: #a06062;
  padding-left: 7px;
  margin-bottom: 9px;
  border-left: 1px solid var(--accent);
}

.rd-grant:empty {
  display: none;
}

.rp-tag {
  display: inline-block;
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--accent);
  border: 1px solid rgba(158, 42, 43, 0.42);
  padding: 0 4px;
  margin-right: 6px;
  vertical-align: 1px;
}

/* ================= 核对项 ================= */
.rank-req {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 18px;   /* 底部留白是给状态标记的，不是失误 */
}

.rq {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: monospace;
  font-size: 10px;
  line-height: 1.6;
}

/* 带数字进度的行，在行底压一条 1px 细线 */
.rq[data-p]::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(95, 158, 120, 0.6) var(--p, 0%),
    var(--border) var(--p, 0%)
  );
}

.rq.no[data-p]::after {
  background: linear-gradient(
    90deg,
    rgba(158, 42, 43, 0.55) var(--p, 0%),
    var(--border) var(--p, 0%)
  );
}

.rq-mark {
  flex: none;
  width: 8px;
  font-size: 8px;
  line-height: 1;
  text-align: center;
  color: var(--text-dim);
}

.rq.ok .rq-mark { color: #5f9e78; }
.rq.no .rq-mark { color: var(--accent); }

.rq-t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim);
}

.rq-v {
  flex: none;
  color: var(--text-dim);
  white-space: nowrap;
}

.rq.ok .rq-t { color: var(--text); }
.rq.ok .rq-v { color: #5f9e78; }
.rq.no .rq-v { color: var(--accent); }

/* ================= 状态 =================
   一枚平的标记，不歪、不弹、不盖章。 */
.rd-stamp {
  position: absolute;
  right: 0;
  bottom: 0;
  font-family: monospace;
  font-size: 8.5px;
  letter-spacing: 1.5px;
  line-height: 1.5;
  padding: 0 5px;
  color: var(--text-dim);
  border: 1px solid var(--border-light);
  pointer-events: none;
}

.rd-stamp.ok {
  color: var(--accent);
  border-color: rgba(158, 42, 43, 0.6);
}

.rd-stamp.no {
  color: var(--text-dim);
  border-color: var(--border-light);
}

.rd-stamp.max {
  color: var(--text-dim);
  border-color: var(--border);
}

/* ================= 提交键 ================= */
.rank-go {
  width: calc(100% - 28px);
  margin: 12px 14px 0;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 0;
  background: transparent;
  font-size: 11px;
  letter-spacing: 2px;
  color: #fff;
  cursor: pointer;
}

.rank-go:active:not(:disabled) {
  background: #14171d;
}

/* 不可提交：只剩一条暗框，字退成灰 */
.rank-go:disabled {
  border-color: var(--border);
  color: var(--text-dim);
  opacity: 1;          /* .btn 自带 0.3，极简这里靠颜色区分，不靠透明度 */
  cursor: not-allowed;
}

#rank-go-label {
  letter-spacing: 2px;
}

#rank-go-state {
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

/* ================= 权限册（纸的背面） ================= */
.rank-perk-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  max-height: 340px;      /* 十条权限封顶，再长就在这一栏里滚 */
  padding: 0 14px;
  overflow-y: auto;
  scrollbar-width: none;
}

.rank-perk-list::-webkit-scrollbar {
  display: none;
}

.rp-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  font-family: monospace;
  font-size: 10px;
  line-height: 1.55;
  border-bottom: 1px solid var(--border);
}

.rp-row:last-child {
  border-bottom: none;
}

.rp-lv {
  flex: none;
  width: 12px;
  font-size: 9px;
  line-height: 1.7;
  text-align: right;
  color: var(--accent);
}

.rp-row .rp-txt {
  flex: 1;
  min-width: 0;
  color: var(--text);
}

.rp-empty {
  padding: 10px 0;
  font-family: monospace;
  font-size: 10px;
  line-height: 1.7;
  color: var(--text-dim);
}