/* 备考信息浮层（UX_DESIGN_2026_09_08 §5.1）
 *
 * 形态、材质、开合过渡、落位全部由基件给：节点带 `.dl-dialog`（style.css §1.4 那节），
 * 定位在 floating-dialog.js 里。本文件只补这张浮层自己的东西：宽度、两行的排布、
 * 卷别胶囊、省份下拉的尺寸、行末状态位、省份说明行。
 *
 * 省份用原生 <select>：这一项是一次性填完就不再动的长期信息，原生下拉在每个平台上
 * 都是研友最熟的那个控件，自绘一份只会多一套要维护的键盘与滚动行为。
 */

/* 宽度取 340（§1.4 锚定形态 300–360）：行末要放得下最长的那条状态字
   「未保存 · 重试」，同时卷别两枚胶囊一行排得开。 */
.exam-prefs {
    width: 340px;
}

.exam-prefs__row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.exam-prefs__row + .exam-prefs__row {
    margin-top: 10px;
}

.exam-prefs__label {
    flex: 0 0 auto;
    font-size: var(--dl-fs-body);
    line-height: var(--dl-lh-body);
    color: var(--dl-ink-2);
}

/* 卷别二选一：与试卷列表页的切换器（.papers-view-switch）同款胶囊 ——
   灰轨底 + 选中那枚是白胶囊。同一件事在两个地方长同一个样，研友不用重新认。
   这里不做滑动指示器：只有两个格子，直接给选中项上底色，少一层绝对定位的元素。 */
.exam-prefs__tracks {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 3px;
    border-radius: var(--dl-r-pill);
    background: var(--dl-surface-2);
}

.exam-prefs__track {
    min-height: 28px;
    padding: 0 14px;
    font-family: inherit;
    font-size: var(--dl-fs-body);
    font-weight: 450;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: var(--dl-ink-2);
    background: transparent;
    border: 0;
    border-radius: var(--dl-r-pill);
    cursor: pointer;
    transition: color var(--dl-t-state) ease, background-color var(--dl-t-state) ease;
}

@media (hover: hover) {
    .exam-prefs__track:not(.is-active):hover {
        color: var(--dl-ink);
    }
}

.exam-prefs__track.is-active {
    font-weight: 500;
    color: var(--dl-ink);
    background: var(--dl-surface);
    box-shadow: var(--dl-sh-1);
}

/* 零位移（§1.2）：按下只加深底色，不做 scale */
.exam-prefs__track:active {
    background: var(--dl-pressed);
}

.exam-prefs__track:focus-visible {
    outline: none;
    box-shadow: var(--dl-focus-ring);
}

/* 尺寸、边框、焦点全走 .dl-field（§1.3），这里只改宽度：
   固定宽度而不是 flex 撑满 —— 行末的状态字出现时占的是剩下的空白，下拉不跟着缩。 */
.exam-prefs__select {
    flex: 0 0 auto;
    width: 132px;
}

/* 行末状态位（§1.5 就地状态字）：宽度由剩余空间给、内容右对齐。
   状态字出现或消失时挤掉的是这段空白，卷别胶囊与省份下拉一个像素都不动，
   浮层尺寸也不变——所以显示状态字时不需要重新给浮层落位。 */
.exam-prefs__status {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: auto;
}

.exam-prefs__status-pin {
    display: inline-block;
    width: 0;
}

/* 「未保存 · 重试」是常驻的，点它就重发那一次改动 */
.exam-prefs__status .dl-inline-status[data-tone="err"] {
    pointer-events: auto;
    cursor: pointer;
}

/* 省份说明行（§5.1）：选定后 120ms 淡入。位置常驻占 16px，
   出现与消失都不推动浮层，也就不会把浮层顶得重新落位。 */
.exam-prefs__note {
    min-height: 16px;
    margin: 8px 0 0;
    font-size: var(--dl-fs-caption);
    line-height: var(--dl-lh-caption);
    color: var(--dl-ink-3);
    opacity: 0;
    transition: opacity var(--dl-t-state) ease;
}

.exam-prefs__note.is-on {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .exam-prefs__note {
        transition: none;
    }
}

/* 试卷列表页切换器右侧的齿轮钮（§9.1）。28px 见方，与切换器同一条基线。 */
.papers-exam-prefs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--dl-ink-3, #8a8a8e);
    background: none;
    border: 0;
    border-radius: var(--dl-r-item, 6px);
    cursor: pointer;
    transition: background-color var(--dl-t-state) ease, color var(--dl-t-state) ease;
}

.papers-exam-prefs-btn:hover {
    color: var(--dl-ink, #1d1d1f);
    background: var(--dl-hover, rgba(0, 0, 0, .05));
}

.papers-exam-prefs-btn:focus-visible {
    outline: none;
    box-shadow: var(--dl-focus-ring);
}

.papers-exam-prefs-btn svg {
    display: block;
}