/**
 * LightSNS 电脑端登录内页 `/login`
 *
 * 版面固定，不进后台设置 —— 理由见 pc/js/login-page.js 的文件头。
 * 配色一律走 ui.css 那套 `--ls-*` 变量：站长在后台改了主色，这一页跟着变。
 *
 * 表单本身的样式不在这里，在 login-dialog.js 自带的那段 CSS 里
 *（`.ls-login-inline` 变体已经把浮层外观抹平）。这个文件只管两件事：
 * 整页的版面骨架，和左栏那面「最近加入」头像墙。
 */

/* ========================================
   整页骨架
   ======================================== */

/* body 上那 68px（`--ls-header-height`）是给固定页头留的位置。
   这一页不出页头，留着就是顶上一条白边，而渐变背景从它下面才开始 ——
   看起来像页面没对齐。`route-login` 由服务端写在 body 上
   （`shell::body_class`），本来就是给 CSS 分支用的。 */
body.route-login {
    padding-top: 0;
}

/* common.css 给 main 定的是 `width: var(--ls-width)` 的居中栏宽。
   登录页没有页头页脚，要的是铺满视口的两栏，所以在这里覆盖掉。 */
main.ls-login-page {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: var(--ls-bg-light);
    /* 两团很淡的光斑，给纯色底一点纵深。位置固定在左上和右下，
       不跟随滚动 —— 这一页本来也不该滚动。 */
    background-image:
        radial-gradient(60rem 40rem at 8% 4%, rgba(var(--ls-primary-rgb), 0.16), transparent 62%),
        radial-gradient(48rem 36rem at 96% 96%, rgba(139, 92, 246, 0.13), transparent 64%);
    background-repeat: no-repeat;
}

.ls-login-page-shell {
    width: 100%;
    max-width: 960px;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 56px;
    align-items: center;
}

/* ========================================
   左栏：品牌与最近加入
   ======================================== */

.ls-login-page-brand {
    min-width: 0;
    padding-right: 8px;
}

.ls-login-page-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 32px;
}

.ls-login-page-logo-mark {
    width: 44px;
    height: 44px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ls-radius-xl);
    background: linear-gradient(135deg, var(--ls-primary), #6366f1);
    color: #fff;
    font-size: 22px;
}

.ls-login-page-logo-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--ls-text-primary);
    /* 站点名可能很长，别把 logo 撑出栏外 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}

.ls-login-page-slogan {
    margin: 0 0 12px;
    font-size: 38px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--ls-text-primary);
    letter-spacing: -0.5px;
}

.ls-login-page-lead {
    margin: 0 0 32px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ls-text-secondary);
    max-width: 30em;
}

/* ---- 头像墙 ---- */

/* 一个人都没有（新站）时整块不出 —— 空着一片头像位比没有这块更难看。 */
.ls-login-page-wall-empty {
    display: none;
}

.ls-login-page-wall {
    margin-bottom: 0;
}

/* 6 列三行，与接口里的 `WALL_SIZE = 18` 对应。
   改行列数要同步 server-api/src/page/pc_login.rs 的那个常量，
   否则最后一行会缺角。 */
.ls-login-page-faces {
    display: grid;
    grid-template-columns: repeat(6, 44px);
    gap: 12px;
}

/* 这些头像**不可点击**：它是「站里有人」的一个信号，不是通往谁主页的入口。
   所以用 div 不用 a，光标也保持默认箭头 —— 手型光标等于在骗人去点。 */
.ls-login-page-face {
    width: 44px;
    height: 44px;
    border-radius: var(--ls-radius-full);
    overflow: hidden;
    background: var(--ls-bg-hover);
    box-shadow: 0 0 0 2px var(--ls-bg-white);
    cursor: default;
    transition: transform var(--ls-transition);
}

.ls-login-page-face:hover {
    transform: translateY(-2px);
}

.ls-login-page-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ========================================
   右栏：表单卡片
   ======================================== */

.ls-login-page-card {
    background: var(--ls-bg-white);
    border: 1px solid var(--ls-border-light);
    border-radius: 20px;
    box-shadow: var(--ls-shadow-elevated);
    padding: 40px 36px 28px;
}

/* 表单加载完成前先占住位置，避免卡片从零高度弹开 */
.ls-login-page-form {
    min-height: 320px;
}

/* 卡片里不再出现第二个页头。
   那一块（logo + 标题 + 副标题）是后台 `ls_login_dialog_tabs` 第一档配的，
   在弹窗里它是唯一的标题，在这一页里左栏已经有站点 logo 和「欢迎回来」——
   两个标题上下叠着，而且一个是站长配的、一个是固定版面，怎么配都别扭。
   版面固定，所以由版面说了算：卡片只留表单。 */
.ls-login-page-form .ls-login-header {
    display: none;
}

/* 登录组件没加载出来时那一句话。正常情况下走不到这里。 */
.ls-login-page-fallback {
    padding: 48px 0;
    text-align: center;
    font-size: 14px;
    color: var(--ls-text-muted);
}

.ls-login-page-back {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--ls-border-light);
    text-align: center;
}

.ls-login-page-back a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--ls-text-muted);
    text-decoration: none;
    transition: color var(--ls-transition);
}

.ls-login-page-back a:hover {
    color: var(--ls-primary);
}

/* ========================================
   窄屏
   ======================================== */

/* 1080 以下先收紧栏距，再往下整个左栏让位给表单 ——
   登录页上表单是唯一必须能用的东西。 */
@media (max-width: 1080px) {
    .ls-login-page-shell {
        max-width: 840px;
        gap: 36px;
        grid-template-columns: 1fr 380px;
    }

    .ls-login-page-slogan {
        font-size: 32px;
    }
}

@media (max-width: 860px) {
    main.ls-login-page {
        padding: 32px 20px;
        align-items: flex-start;
    }

    .ls-login-page-shell {
        max-width: 460px;
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* 左栏收成一个页头：留下 logo 和标题，头像墙收起来。
       小屏上它会把表单挤到首屏之外。 */
    .ls-login-page-wall,
    .ls-login-page-lead {
        display: none;
    }

    .ls-login-page-brand {
        padding-right: 0;
        text-align: center;
    }

    .ls-login-page-logo {
        margin-bottom: 16px;
    }

    .ls-login-page-slogan {
        font-size: 26px;
        margin-bottom: 0;
    }

    .ls-login-page-card {
        padding: 32px 24px 24px;
    }
}