/* 外壳页签到层：顶栏等级 chip（未登录隐藏）+「每日签到」弹窗。
   样式只用 index.css 已有的设计变量（--panel/--card/--line/--fg/--mut/--accent/--bone/--ff-*），
   不引入新色板 —— 顶栏与弹窗必须跟账号层同一套皮肤（深浅色靠变量自动跟随）。
   数字一律 500 字重（用户口径：数字元素不加粗），标签用 700/800。 */

/* ── 顶栏 chip ─────────────────────────────────────────────────────
   它是 `.shell-control` 的同族，但 `.bar .shell-control{padding:0 6px}`（hub.layout.css）
   比单类选择器更具体 ⇒ 这里必须同样写成 `.bar .checkin-chip` 才改得动内边距。 */
.bar .checkin-chip{padding:0 8px;border-color:var(--line);background:var(--card);color:var(--fg)}
.checkin-chip{display:inline-flex;align-items:center;gap:6px;height:34px;
  border:1px solid var(--line);background:var(--card);border-radius:5px;color:var(--fg);
  font:500 12px var(--ff-europa);letter-spacing:0;cursor:var(--cur-hover);white-space:nowrap}
/* ⚠️ `display:inline-flex` 会盖掉 UA 的 `[hidden]{display:none}`（作者样式优先于浏览器默认）
   ⇒ 必须自己写这一条，否则未登录时那个 chip 照样露在顶栏上。 */
.checkin-chip[hidden]{display:none}
.checkin-chip:hover{border-color:var(--accent);background:var(--card);color:var(--fg)}
.checkin-chip-lv{color:var(--accent);font-weight:500}
.checkin-chip-bar{display:block;flex:0 0 auto;width:26px;height:4px;border-radius:999px;
  background:var(--line);overflow:hidden}
.checkin-chip-fill{display:block;height:100%;width:0;border-radius:999px;background:var(--accent)}
/* 今天已签到：整块降噪（等级与进度条转 --mut），一眼能看出"今天这步做完了" */
.checkin-chip.is-done .checkin-chip-lv{color:var(--mut)}
.checkin-chip.is-done .checkin-chip-fill{background:var(--mut)}

/* ── 弹窗 ──────────────────────────────────────────────────────────
   与账号弹窗同构（原生 `<dialog>` + `showModal()`：居中 / 焦点陷阱 / Esc / 遮罩都是浏览器给的），
   `margin:auto` 是它默认居中所依赖的那一条。 */
.checkin-dlg{width:min(92vw,360px);max-width:min(92vw,360px);margin:auto;padding:0;border:0;
  background:transparent;color:var(--fg);border-radius:14px}
.checkin-dlg::backdrop{background:rgba(4,6,10,.62)}
.checkin-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:20px 18px 15px;box-shadow:0 24px 64px rgba(0,0,0,.5)}
.checkin-x{position:absolute;top:7px;right:7px;width:30px;height:30px;appearance:none;border:1px solid transparent;
  border-radius:7px;background:transparent;color:var(--mut);font-size:19px;line-height:1;cursor:var(--cur-hover)}
.checkin-x:hover{color:var(--fg);background:var(--card);border-color:var(--line)}
/* A real touch target and reserved heading space, not a tiny text close link. */
html body #checkin-dlg #checkin-x{display:grid;place-items:center;position:absolute;top:6px;right:6px;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:8px;background:transparent;color:var(--mut);font-size:0;line-height:1;cursor:var(--cur-hover);appearance:none}
html body #checkin-dlg #checkin-x::before,html body #checkin-dlg #checkin-x::after{content:'';position:absolute;width:16px;height:2px;top:21px;left:14px;border-radius:1px;background:currentColor;transform:rotate(45deg)}
html body #checkin-dlg #checkin-x::after{transform:rotate(-45deg)}
html body #checkin-dlg #checkin-x:hover{background:var(--card);color:var(--fg)}
html body #checkin-dlg #checkin-x:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
html body #checkin-dlg .checkin-head{padding-right:34px;flex-wrap:wrap;gap:4px 8px}
html body #checkin-dlg{max-height:90dvh;overflow:auto}


/* 上半：左边日期卡片（贴吧那张撕历），右边等级 + 经验条 */
.checkin-top{display:flex;gap:14px;align-items:stretch}
.checkin-date{flex:0 0 auto;width:64px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;padding:8px 4px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.checkin-date-day{font:500 26px/1 var(--ff-display);color:var(--fg)}
.checkin-date-mon{font:700 12px var(--ff-europa);color:var(--accent);text-transform:uppercase;letter-spacing:0}
.checkin-date-wd{font:400 12px var(--ff-europa);color:var(--mut)}
.checkin-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:7px}
.checkin-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.checkin-title{margin:0;font:800 17px var(--ff-display);letter-spacing:0}
.checkin-lv{padding:2px 8px;border-radius:4px;background:transparent;color:var(--fg);
  font:500 12px var(--ff-europa);letter-spacing:0}
.checkin-sub{margin:0;color:var(--mut);font-size:12px;line-height:1.5}
.checkin-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.checkin-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--accent)}
.checkin-xp{margin:0;color:var(--mut);font-size:12px;line-height:1.5;display:flex;
  justify-content:space-between;gap:8px;flex-wrap:wrap}
.checkin-xp b{font-weight:500;color:var(--fg)}

/* 中段：连续 / 累计 / 今日排名 */
.checkin-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  margin:14px 0 0;padding:11px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.checkin-stat{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.checkin-stat-v{font:500 17px/1.1 var(--ff-display);color:var(--fg)}
.checkin-stat-k{font:700 12px var(--ff-europa);color:var(--mut);letter-spacing:0;white-space:nowrap}

.checkin-today{margin:13px 0 0;min-height:17px;color:var(--mut);font-size:12.5px;line-height:1.5;text-align:center}
.checkin-today.done{color:var(--fg)}
/* 签到按钮：触控目标 46px（≥44px 那条硬约束） */
.checkin-go{display:block;width:100%;height:46px;margin-top:9px;appearance:none;border:0;border-radius:8px;
  background:var(--accent);color:#0a0a0b;font:800 14px var(--ff-europa);letter-spacing:.02em;cursor:var(--cur-hover)}
.checkin-go:hover{filter:brightness(1.08)}
.checkin-go:active{transform:translateY(1px)}
.checkin-go:disabled{cursor:default;filter:none;transform:none;background:var(--line);color:var(--mut)}
.checkin-history{display:flex;align-items:center;justify-content:center;min-height:44px;color:var(--accent);font-size:12px;text-underline-offset:3px}
.checkin-rule{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);
  color:var(--mut);font-size:12px;line-height:1.55}
.checkin-msg{margin:8px 0 0;min-height:17px;font-size:12.5px;line-height:1.5;text-align:center}
.checkin-msg.ok{color:#2aa76b}
.checkin-msg.err{color:#e5484d}

.checkin-game-level{display:inline-flex;align-items:center;gap:5px;color:#c4c1b9;font-variant-numeric:tabular-nums}
.checkin-game-level::before{content:'';width:26px;height:26px;flex:none;background:currentColor;mask:var(--checkin-level-image) center/contain no-repeat;-webkit-mask:var(--checkin-level-image) center/contain no-repeat}
.checkin-game-level:is([data-level="4"],[data-level="5"],[data-level="6"]){color:#8db9e8}
.checkin-game-level:is([data-level="7"],[data-level="8"],[data-level="9"]){color:#e1bb65}
[data-theme=light] .checkin-game-level{color:#514940}
[data-theme=light] .checkin-game-level:is([data-level="4"],[data-level="5"],[data-level="6"]){color:#255b91}
[data-theme=light] .checkin-game-level:is([data-level="7"],[data-level="8"],[data-level="9"]){color:#705011}

@media (max-width:760px){
  /* 顶栏在手机上要挤下「中文/浅色/签到/退出/头像」五件 ⇒ 收掉进度条，只留等级数字 */
  .checkin-chip-bar{display:none}
}
@media (max-width:560px){
  .checkin-dlg{width:94vw;max-width:94vw}
  .checkin-card{padding:17px 14px 13px}
  .checkin-date{width:56px}
  .checkin-date-day{font-size:23px}
}