/*
 * 统一的「加载中」（js/components/loading.js）。
 *
 * 全站只有这一种长相：转圈图标（一圈珠子，见下面「转圈图标」）在上、文字在下，在所加载的内容区里水平垂直居中。
 * 此前各模块各写一套——十几份转圈 keyframes，有的贴在内容区顶部、有的排在列表下方、有的没有动画。
 * 新增加载态一律用 Loading.markup() / Loading.mount()，不要在组件 CSS 里再写转圈动画。
 * 按钮内的加载态（登录中… / 保存中…）不归这里管，见 docs/theme-control-states.md。
 */

.kb-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    /* 容器有确定高度时撑满它，图标与文字落在正中 */
    min-height: 100%;
    padding: 32px 16px;
    color: var(--kb-ink-muted, #827a6d);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}

.kb-loading__icon {
    font-size: 1.5rem;
    line-height: 1;
    animation: kb-loading-spin 1s linear infinite;
}

.kb-loading__text:empty {
    display: none;
}

/* 行内小块（展开某一组时在组里占一行）：不撑高、图标与文字小一号 */
.kb-loading--sm {
    min-height: 0;
    gap: 6px;
    padding: 12px;
    font-size: 0.8125rem;
}

.kb-loading--sm .kb-loading__icon {
    font-size: 1.125rem;
}

.kb-loading--lg .kb-loading__icon {
    font-size: 2rem;
}

/* 盖在已有内容上（重新加载时旧内容还在）：垫一层纸面色，旧内容淡下去但位置不跳 */
.kb-loading-host {
    position: relative;
}

.kb-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--kb-paper, #fbfaf5);
    background: color-mix(in srgb, var(--kb-paper, #fbfaf5) 82%, transparent);
}

/* 盖层期间滚动区按住不动（Loading._lockScroll）：触屏上连回弹也不要 */
.kb-loading-scroll-locked {
    overscroll-behavior: contain;
    touch-action: none;
}

/* 内容比可视区长时，由 Loading.fit 把这一块对到「看得见的那一段」上，否则会居中到屏幕之外 */
.kb-loading-overlay > .kb-loading {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-height: 0;
}

/* 整屏（导出、开通试用这类要挡住操作的等待） */
.kb-loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.kb-loading-screen.is-visible {
    opacity: 1;
}

.kb-loading-screen--top {
    align-items: flex-start;
    padding-top: 20vh;
}

.kb-loading-screen__card {
    min-width: 120px;
    max-width: 300px;
    border: 1px solid var(--kb-paper-line, rgba(96, 84, 62, 0.15));
    border-radius: 12px;
    background: var(--kb-paper-panel, #fffdf8);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.kb-loading-screen__card > .kb-loading {
    min-height: 0;
    padding: 24px;
    color: var(--kb-ink-soft, #5e584e);
}

@keyframes kb-loading-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
 * 转圈图标：一圈珠子（2026-11-05）
 *
 * 以前是 remixicon 的 ri-loader-4-line 字形整个转：字形的墨迹不在字框正中，
 * 而 <i> 是行内盒、宽高也不相等，转起来看着左右晃。现在全站只有这一种长相：
 * 8 颗珠子由大到小、由实到淡排成一圈，一格一格地走（steps(8)，每格 45° 正好挪一颗），
 * 画在 ::before 这个正方形盒子上、只转它自己，圆心不动。
 *
 * --kb-spinner-beads 是珠子本身（只用 currentColor，跟着所在元素的文字色走），
 * 用 CSS 画转圈的地方（边框圈）一律改用它，别再画新的边框圈。
 * ============================================================ */
:root {
    --kb-spinner-beads:
        radial-gradient(11.5% 11.5% at 50.0% 12.0%, currentColor 72%, transparent),
        radial-gradient(6.5% 6.5% at 76.9% 23.1%, color-mix(in srgb, currentColor 18%, transparent) 72%, transparent),
        radial-gradient(7.0% 7.0% at 88.0% 50.0%, color-mix(in srgb, currentColor 26%, transparent) 72%, transparent),
        radial-gradient(7.6% 7.6% at 76.9% 76.9%, color-mix(in srgb, currentColor 35%, transparent) 72%, transparent),
        radial-gradient(8.3% 8.3% at 50.0% 88.0%, color-mix(in srgb, currentColor 45%, transparent) 72%, transparent),
        radial-gradient(9.0% 9.0% at 23.1% 76.9%, color-mix(in srgb, currentColor 57%, transparent) 72%, transparent),
        radial-gradient(9.8% 9.8% at 12.0% 50.0%, color-mix(in srgb, currentColor 70%, transparent) 72%, transparent),
        radial-gradient(10.6% 10.6% at 23.1% 23.1%, color-mix(in srgb, currentColor 85%, transparent) 72%, transparent);
}

@keyframes kb-loading-beads {
    to { transform: rotate(360deg); }
}

/* 字形换成珠子；<i> 本身不再转（各模块给它写的 spin 动画一并作废），只转 ::before */
.ri-loader-4-line {
    animation: none !important;
}

:is(i, span).ri-loader-4-line::before {
    content: '' !important;
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background: var(--kb-spinner-beads);
    animation: kb-loading-beads 0.96s steps(8, end) infinite;
}

/* 减弱动态效果时转慢而不是停住：停住的图标看不出是在加载还是卡死了 */
@media (prefers-reduced-motion: reduce) {
    .kb-loading__icon,
    :is(i, span).ri-loader-4-line::before {
        animation-duration: 2.4s;
    }

    .kb-loading-screen {
        transition: none;
    }
}