/* 「模考」标签（index.html 顶部的 #tab_tmua → #mocksPanel；手机：账户 → 模考）。每页都加载；模考本身的样式在
   tmua-mocks.css，第一次打开时才由 tmua-mocks-tab.js 加载。id 保持不变，下面的选择器都依赖它。
   暖纸书房顶栏原本 5 个标签在 1200–1440px 已接近排满（右侧按钮列 minmax(0,1fr) 会被挤窄），
   多出这个常驻标签后，只在这些宽度把所有标签的左右留白收紧一点，让右侧按钮与账户信息保持原来的宽度。
   规则都以 :has(#tab_tmua) 为前提：去掉入口按钮，这里就不再生效。 */
@media (min-width: 768px) {
    body.skin-warm-paper #mainTabs > #tab_tmua { font-size: 14px !important; letter-spacing: .3px; }
}
/* 标签收紧规则沿用（v3 的「模考」比原来的「练习模考」窄约两个汉字，规则仍保留，给 1200px 一点余量）。
   实测（v3，2026-10-10，暖纸书房顶栏，Admin 账户）：1200/1280/1366/1440px 中文账户卡宽 153/153/153/153px
   （「练习模考」时为 138/153/153/153px）；Premium 账户 160/166/166/166px。顶栏标签不换行、不溢出。 */
@media (min-width: 1200px) and (max-width: 1439px) {
    body.skin-warm-paper #mainTabs:has(#tab_tmua) { gap: 0 !important; }
    body.skin-warm-paper #mainTabs:has(#tab_tmua) > button { padding-left: 8px !important; padding-right: 8px !important; gap: 6px; }
    body.skin-warm-paper #mainTabs > #tab_tmua { letter-spacing: 0; }
}
/* English tab names are ~125px wider (see warm-paper.css): tighten a little more from 1200 up to 1600px
   (the entry reads "Mocks"; its tooltip says "TMUA mock exams: past papers and auto mocks (75 min)"). */
/* EN 1200/1280/1366/1440px, Admin: account card 19/92/148/165px (with "Practice": 19/83/141/165px; Premium 19/93/152/179px).
   At 1200px EN the page is still 1 px wider than the window, as on the baseline before the TMUA entry existed. */
@media (min-width: 1200px) and (max-width: 1599px) {
    html[lang="en"] body.skin-warm-paper #mainTabs:has(#tab_tmua) { gap: 0 !important; }
    html[lang="en"] body.skin-warm-paper #mainTabs:has(#tab_tmua) > button { padding-left: 6px !important; padding-right: 6px !important; gap: 5px; }
    html[lang="en"] body.skin-warm-paper #mainTabs > #tab_tmua { letter-spacing: 0; }
}
/* 清爽原版 / 流光玻璃（暖纸书房的布局、不用它的皮肤：标签保留 emoji 和文件夹边框）。warm-layout-skins.css 从 1280px 起给这些
   标签 14px 左右留白；多了「模考」后英文标签行宽出约 80px，在 1280–1300px 又盖住了「文/A」切换（c929ae865 修过的那种重叠），
   账户卡片也被挤没。有「模考」标签时在这些宽度把标签间距和留白收紧一些，把宽度还给右侧按钮列。
   实测（deploy/tmua-20261010 冒烟）：1200–1600px 中英文下「文/A」都不再被盖住，账户卡片不窄于未加「模考」前。 */
@media (min-width: 1200px) and (max-width: 1279px) {
    html[lang="en"] body.layout-warm-paper:not(.skin-warm-paper) #mainTabs:has(#tab_tmua) { gap: 2px !important; }
    html[lang="en"] body.layout-warm-paper:not(.skin-warm-paper) #mainTabs:has(#tab_tmua) > button { padding-left: 8px !important; padding-right: 8px !important; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
    body.layout-warm-paper:not(.skin-warm-paper) #mainTabs:has(#tab_tmua) { gap: 2px !important; }
    body.layout-warm-paper:not(.skin-warm-paper) #mainTabs:has(#tab_tmua) > button { padding-left: 9px !important; padding-right: 9px !important; }
}
@media (min-width: 1440px) and (max-width: 1599px) {
    html[lang="en"] body.layout-warm-paper:not(.skin-warm-paper) #mainTabs:has(#tab_tmua) { gap: 2px !important; }
    html[lang="en"] body.layout-warm-paper:not(.skin-warm-paper) #mainTabs:has(#tab_tmua) > button { padding-left: 9px !important; padding-right: 9px !important; }
}
/* 暖纸书房给其余顶栏标签都配了线条图标（warm-paper.js 的标签表），TMUA 入口在这里补上同风格的图标。 */
body.skin-warm-paper #mainTabs > #tab_tmua::before {
    content: ""; display: inline-block; flex-shrink: 0; width: 20px; height: 20px;
    background: currentColor;
    -webkit-mask: url("/static/assets/ui/lucide/file-text.svg") center / contain no-repeat;
    mask: url("/static/assets/ui/lucide/file-text.svg") center / contain no-repeat;
}


/* ---------- the 模考 panel (desktop) and its loading state ---------- */
/* Same gutters as the hall and 收藏夹 (favorites.css mirrors warm-paper.css the same way). */
@media (min-width: 768px) {
    body.layout-warm-paper[class] #mocksPanel {
        width: 100%;
        max-width: 1520px;
        padding: 0 clamp(20px, 2.6vw, 44px) 40px clamp(14px, 1.8vw, 30px) !important;
    }
}
@media (min-width: 768px) and (max-width: 1279px) {
    #mocksPanel { padding-left: 24px !important; padding-right: 24px !important; }
    body.tablet-top-collapsed #mocksPanel { padding-top: 8px !important; }
}
.tmx-host-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    min-height: 220px; padding: 40px 16px; text-align: center;
    color: #64748b; font-size: 14px;
}
.tmx-host-state[data-tmx-host-state="loading"] { flex-direction: row; gap: 10px; }
.tmx-host-state p { margin: 0; }
.tmx-host-spinner {
    display: inline-block; width: 18px; height: 18px; flex-shrink: 0;
    border: 2px solid #cbd5e1; border-top-color: #dc2626; border-radius: 50%;
    animation: tmx-host-spin .8s linear infinite;
}
@keyframes tmx-host-spin { to { transform: rotate(360deg); } }
.tmx-host-retry {
    min-height: 38px; padding: 0 16px; border-radius: 9px;
    border: 1px solid #cbd5e1; background: #fff; color: #1f2937; font-weight: 600; cursor: pointer;
}
body.skin-warm-paper .tmx-host-spinner { border-top-color: #bc5143; }
body.theme-dark .tmx-host-state { color: #a4a59f; }
body.theme-dark .tmx-host-retry { background: #24282d; border-color: #4a5057; color: #edece7; }
@media (prefers-reduced-motion: reduce) { .tmx-host-spinner { animation: none; } }
.tmx-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Phone sheet (账户 → 模考): the sheet body keeps a 12px top padding (app.css .mobile-sheet-body), and a sticky element
   stops below its scroller's padding. The exam bar sticks to the very top instead, so the questions scrolling under it
   never show above it. */
.tmx-host-sheet > .tmx-scope.tmx-root { --tmx-sticky-top: -12px; }

/* ---------- the remaining time on the 模考 label while an exam runs (tmua-mocks-tab.js setClock) ---------- */
/* A badge on the tab's top-right corner: absolutely positioned, so the header keeps the widths measured above (tabs,
   round buttons, account card) in every skin and language. It is a child of the button: switchMainTab rewrites the
   button's className on every switch, so its state lives on the badge (data-level). */
#tab_tmua { position: relative; }
#tab_tmua > .tmx-tab-clock {
    position: absolute; top: -9px; right: -8px; z-index: 1;
    padding: 1px 5px; border-radius: 999px;
    background: #475569; color: #fff;
    font: 700 10.5px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums;
    letter-spacing: 0; white-space: nowrap; pointer-events: none;
}
#tab_tmua > .tmx-tab-clock[hidden] { display: none; }
#tab_tmua > .tmx-tab-clock[data-level="low"] { background: #c2410c; }
#tab_tmua > .tmx-tab-clock[data-level="critical"] { background: #dc2626; }
/* Warm paper: the tabs are text with an underline, the badge sits just above the label's end. */
body.skin-warm-paper #tab_tmua > .tmx-tab-clock { top: -1px; right: 0; background: #45464b; }
body.skin-warm-paper #tab_tmua > .tmx-tab-clock[data-level="low"] { background: #b04a3c; }
body.skin-warm-paper #tab_tmua > .tmx-tab-clock[data-level="critical"] { background: #b23b2c; }
body.theme-dark #tab_tmua > .tmx-tab-clock { background: #4a5057; color: #edece7; }
body.theme-dark #tab_tmua > .tmx-tab-clock[data-level="low"] { background: #bc4940; color: #fff; }
body.theme-dark #tab_tmua > .tmx-tab-clock[data-level="critical"] { background: #c9665a; color: #fff; }

/* Phone: the 模考 row of 账户 shows the clock instead of "TMUA"; the bottom bar's 账户 gets a small badge. */
[data-tmx-clock-slot][data-running] { font-variant-numeric: tabular-nums; font-weight: 700; }
[data-tmx-clock-slot][data-level="low"] { color: #c2410c; }
[data-tmx-clock-slot][data-level="critical"] { color: #dc2626; }
body.theme-dark [data-tmx-clock-slot][data-level="low"] { color: #e37b70; }
body.theme-dark [data-tmx-clock-slot][data-level="critical"] { color: #f2978b; }
.mobile-bottom-nav [data-mobile-nav="account"] { position: relative; }
.mobile-bottom-nav .tmx-nav-clock {
    position: absolute; top: 1px; right: 50%; transform: translateX(26px);
    min-width: 30px; padding: 1px 4px; border-radius: 999px;
    background: #475569; color: #fff;
    font: 700 9.5px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-style: normal; font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.mobile-bottom-nav .tmx-nav-clock[hidden] { display: none; }
.mobile-bottom-nav .tmx-nav-clock[data-level="low"] { background: #c2410c; }
.mobile-bottom-nav .tmx-nav-clock[data-level="critical"] { background: #dc2626; }
body.skin-warm-paper .mobile-bottom-nav .tmx-nav-clock { background: #45464b; }
body.skin-warm-paper .mobile-bottom-nav .tmx-nav-clock[data-level="low"] { background: #b04a3c; }
body.skin-warm-paper .mobile-bottom-nav .tmx-nav-clock[data-level="critical"] { background: #b23b2c; }