/* `/auth/` 四个页面的共用样式（票 U4，方向 B：左右分栏）。

   **刻意不引 `static/css/style.css`**（188A⑤）：登录页是大门，不该依赖
   只有登录之后才有意义的页头、二级导航、看板表格那一整套；`style.css`
   开头还会设 `html, body`。颜色一律取 `tokens.css` 的变量，本文件里
   **不出现任何十六进制颜色值**。

   窄屏（≤ 768px）分栏塌成上下两栏——这是方向 B 已知的代价：左侧品牌区
   收成一条窄横幅，定位文案在窄屏隐藏，只留产品名，把首屏让给表单。 */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

.auth-split {
    display: flex;
    min-height: 100vh;
}

/* ---------- 左：品牌区 ---------- */

.auth-brand {
    flex: 0 0 42%;
    background: var(--color-navy);
    color: var(--color-surface);
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* 登录页标志：自带白色圆角底板（S 使用说明 v1：CSS 64×64）。 */
.auth-logo-img {
    display: block;
    width: 64px;
    height: 64px;
    flex: none;
}

.auth-logo-name {
    font-size: var(--type-page-title-size);
    font-weight: 700;
    letter-spacing: 0.2px;
}

.auth-pitch {
    margin: auto 0;
    max-width: 30em;
}

.auth-pitch h2 {
    font-size: var(--type-page-title-size);
    line-height: 1.35;
    font-weight: 600;
    margin: 0 0 14px;
}

.auth-pitch p {
    margin: 0;
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    color: var(--color-border);  /* 深色品牌区上的浅字，不是角色默认字色 */
}

/* 底部小字：深蓝底上用 `--color-text-muted` 对比度只有 2.4:1，
   读不清；改用与正文同一个浅色再压低不透明度，**不引入新颜色**。 */
.auth-brand-foot {
    font-size: var(--type-meta-size);
    color: var(--color-border);
    opacity: 0.62;
    margin: 0;
}

/* ---------- 右：表单区 ---------- */

/* 竖排：卡片上下 auto 外边距居中，备案号页脚（templates/_site_footer.html）落在表单区底部。 */
.auth-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px 0;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    margin: auto 0;
}

/* 全站页脚：页面底色上 meta 字号配正文色（tokens.css 的 meta 用色规则），与应用页 style.css 同值。 */
.site-footer {
    padding: 32px 0 48px;  /* 底边距与左栏「邀请制 · 内测中」的 48px 对齐 */
    text-align: center;
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
    color: var(--type-body-color);
}

.site-footer-disclaimer {
    margin: 0 0 4px;
}

.site-footer a {
    color: inherit;
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

.auth-card h1 {
    font-size: var(--type-page-title-size);
    font-weight: 600;
    margin: 0 0 6px;
}

.auth-card-sub {
    font-size: var(--type-body-size);
    color: var(--type-body-color);
    margin: 0 0 24px;
}

label {
    display: block;
    font-size: var(--type-control-form-size);
    color: var(--color-text);
    margin-bottom: 14px;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-md);
    font-size: var(--type-control-form-size);
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-surface);
}

/* 键盘焦点：2px 实线强调蓝、外扩 2px（page-style-S-v2 第五节，白底 6.55）。 */
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="checkbox"]:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

button[type="submit"],
.auth-button {
    width: 100%;
    padding: 11px;
    background: var(--color-accent);
    color: var(--color-surface);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--type-control-large-size);
    font-family: inherit;
    cursor: pointer;
    margin-top: 8px;
}

button[disabled] { opacity: 0.6; cursor: not-allowed; }

.auth-error {
    color: var(--color-error);
    font-size: var(--type-body-size);
    margin-top: 12px;
}

/* 提示文字默认**左对齐**（`password_reset` 的说明句是整段话，居中会很怪）；
   只有登录页那两条纯链接沿用改版前的居中，靠 `.auth-hint-center` 显式要。 */
.auth-hint {
    color: var(--type-body-color);
    font-size: var(--type-body-size);
    margin: 14px 0 0;
}

.auth-hint-center { text-align: center; }

/* 面板顶部的引导句：紧贴 `<h1>`，但下面要跟表单拉开距离，否则第一个
   `<label>` 会贴着它。 */
.auth-hint-lead { margin-top: 0; margin-bottom: 20px; }

.auth-hint a { color: var(--color-accent); }

/* ---------- 注册页 ---------- */

.phone-row { display: flex; gap: 8px; }
.phone-row label { flex: 1; }

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--type-control-form-size);
}
.checkbox-row input { margin-top: 3px; }
.checkbox-row a { color: var(--color-accent); }

.auth-notice { color: var(--type-body-color); font-size: var(--type-body-size); }

.auth-success { font-size: var(--type-body-size); }
.auth-success p { margin: 0 0 12px; color: var(--color-text); }

/* ---------- 重置密码页 ---------- */

.auth-status {
    font-size: var(--type-body-size);
    color: var(--type-body-color);
    margin: 0 0 12px;
}

/* ---------- 邮箱验证页 ---------- */

#verify-status { font-size: var(--type-body-size); color: var(--type-body-color); }

/* 登录页的 JS 驱动初始态（**一字不能变**）：先显示「正在检查登录状态…」、
   表单先藏起来，由 `static/js/auth_login.js` 在检查完成后切成
   `loginForm.style.display = "block"`。 */
#checking-panel { font-size: var(--type-body-size); color: var(--type-body-color); }
#login-form { display: none; }

/* 重置密码页的三个面板同理：**初始全部隐藏**，由
   `static/js/auth_password_reset.js` 按 URL fragment 决定显示哪一个。 */
#reset-request-panel,
#reset-confirm-panel,
#reset-done-panel { display: none; }

/* ---------- 窄屏：分栏塌成上下两栏 ---------- */

@media (max-width: 760px) {
    .auth-split { flex-direction: column; min-height: 100vh; }

    .auth-brand {
        flex: none;
        padding: 18px 20px;
        flex-direction: row;
        align-items: center;
    }

    /* 定位文案与底部小字在窄屏隐藏，首屏留给表单。 */
    .auth-pitch, .auth-brand-foot { display: none; }

    /* 品牌条：换页头那版 40×40 图标（<picture> 的窄屏 source），名称 16px／700。S 使用说明补充二。 */
    .auth-logo-img { width: 40px; height: 40px; }
    .auth-logo-name { font-size: var(--type-section-title-size); }

    .auth-panel { padding: 32px 20px 0; }
    .auth-card { margin: 0 0 auto; }
    .site-footer { padding: 32px 0 24px; }
}