/* 头像预设选择器（注册页 + 个人页设置弹窗共用）。
 *
 * ⚠️ 注释里不要出现 url 后跟左括号的写法 —— collectstatic 不剥注释，
 *    会被当成静态引用解析（本仓 2026-10-11 上线事故）。
 * ⚠️ 预设全部通过 <img> 渲染，不用 CSS 背景图。
 * ⚠️ radio 不能 display:none：会失去 Tab 序与方向键。用 1px + opacity:0，
 *    焦点环画在 label 的 :has(input:focus-visible) 上（与性别控件同款）。
 */
:root {
    --avp-gap: 8px;
    --avp-max-width: 240px;
    --avp-accent: #98e0ac;
    --avp-ring: rgba(152, 224, 172, 0.38);
    --avp-focus: rgba(152, 224, 172, 0.45);
    --avp-thumb-bg: #f6f6f6;
    --avp-hint: #666;
}

.avatar-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.avatar-picker__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.avatar-picker__fieldset {
    /* fieldset 默认 min-width:min-content + border/padding，320px 下会撑破布局 */
    min-width: 0;
    width: min(100%, var(--avp-max-width));
    margin: 10px auto 0;
    padding: 0;
    border: 0;
}

.avatar-picker__legend {
    display: block;
    width: 100%;
    margin: 0 0 8px;
    padding: 0;
    text-align: center;
    font-size: var(--dlg-font-caption, 0.82em);
    font-weight: 400;
    line-height: 1.4;
    color: var(--avp-hint);
}

.avatar-picker__grid {
    /* 4 个一行；7 项时最后一行 3 个居中（grid 会左对齐，留一个空位很难看）。 */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--avp-gap);
    width: 100%;
}

.avatar-picker__option {
    position: relative;
    display: block;
    /* 每行 4 个：宽度 = (容器 - 3 个间距) / 4；容器最宽 240 ⇒ 54px 封顶。 */
    flex: 0 0 calc((100% - 3 * var(--avp-gap)) / 4);
    max-width: 54px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    line-height: 0;
    /* 没有文字，但字号不能写 0：P9 白名单会扫弹窗内可见元素的 computed
       font-size，0px 不在 {12,13,14,16,24} 里。inline 间隙由 line-height:0 消除。 */
    font-size: var(--dlg-font-caption, 0.82em);
    font-weight: normal;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* 设置弹窗的 `.edit-profile-content label`（0,1,1）会给每个选项加 margin-bottom
   与 13px 字号；这里用更高特异性复位，否则 4×2 网格会被悄悄撑高、错位。 */
.edit-profile-content .avatar-picker .avatar-picker__option {
    margin: 0;
    padding: 0;
    font-size: var(--dlg-font-caption);
    font-weight: normal;
    line-height: 0;
    color: inherit;
}

/* 视觉隐藏 radio，但保留 Tab/方向键。特异性必须压过：
   - register.css 的 `.register-box input`（0,1,1）
   - profile.css 的 `.edit-profile-content input`（0,1,1） */
.register-box .avatar-picker__radio,
.edit-profile-content .avatar-picker .avatar-picker__radio,
.avatar-picker .avatar-picker__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    opacity: 0;
    pointer-events: none;
    background: transparent;
    transition: none;
}

.avatar-picker__thumb {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: var(--avp-thumb-bg);
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.avatar-picker__radio:checked + .avatar-picker__thumb {
    border-color: var(--avp-accent);
    box-shadow: 0 0 0 2px var(--avp-ring);
}

.avatar-picker__option:has(.avatar-picker__radio:focus-visible) {
    outline: none;
    box-shadow: 0 0 0 3px var(--avp-focus);
}

.avatar-picker__option:active .avatar-picker__thumb {
    transform: scale(0.97);
}

@media (hover: hover) {
    .avatar-picker__option:hover .avatar-picker__thumb {
        transform: scale(1.04);
    }
}

.avatar-picker .avatar-picker__hint {
    margin: 8px 0 0;
    font-size: var(--dlg-font-caption, 0.82em);
    font-weight: 400;
    line-height: 1.5;
    color: var(--avp-hint);
    text-align: center;
}

/* 弹窗内的字号必须落到 --dlg-font-caption token（P9 白名单），
   不要用 0.82em 的 fallback 值。 */
.edit-profile-content .avatar-picker .avatar-picker__hint,
.edit-profile-content .avatar-picker .avatar-picker__legend {
    font-size: var(--dlg-font-caption);
}

/* 短屏（含 320px 竖短屏）：提示语是冗余信息，隐藏避免被吸底保存键切半。 */
@media (max-height: 480px) {
    .avatar-picker .avatar-picker__hint {
        display: none;
    }
}

/* 短屏/横屏：预览在左、网格在右，避免新增的网格把首个字段顶出首屏。
   网格用 auto-fit，宽度不够时折 2 行，总高仍小于 84px 预览。
   ⚠️ 必须加 min-width:361 —— 320px 竖短屏（如 320×480 / 键盘弹起）放两列
   会把网格挤成 3 列、第 7 个换行贴到预览上；这一档回到上下布局，由弹窗滚动承载。 */
@media (max-height: 480px) and (min-width: 361px) {
    .avatar-picker {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 12px;
    }

    .avatar-picker__main {
        /* 只占预览所需宽度；状态文案在 45% 内折行，别把右侧网格挤没。 */
        flex: 0 1 auto;
        width: auto;
        max-width: 45%;
        min-width: 0;
    }

    .avatar-picker .avatar-tip,
    .avatar-picker .avatar-picker__fieldset legend {
        display: none;
    }

    .avatar-picker__fieldset {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        max-width: 100%;
        margin: 0;
    }

    .avatar-picker__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(26px, 1fr));
        gap: 4px;
    }

    .avatar-picker__option {
        flex: none;
        max-width: none;
    }

    .avatar-picker__legend,
    .avatar-picker .avatar-picker__hint {
        display: none;
    }
}

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