/**
 * FlintHub — 登录注册左栏 · 样式
 *
 * 只做一件事：把 `.mn-auth-box`（核心登录/注册卡片）从「420px 居中」改成
 * 「左栏说明 + 右栏表单」两栏。卡片内部的表单结构一个字节都不动。
 *
 * ⚠️ 本文件在 modern.css **之前**加载（layout_head_end 在 </head> 前的更早位置），
 *    所以覆盖核心规则必须靠**特异性**取胜，不能靠源序。
 *    例：`.fh-lsa-wrap > .mn-auth-box`（0,2,0）> `.mn-auth-box`（0,1,0）✓
 * ⚠️ 只用 modern.css 里**真实存在**的 --mn-* 变量（不存在的名字会静默回退成空值）。
 * ⚠️ `.is-keyboard` 那类状态样式一律放 @media 之外 —— 放进媒体查询会在宽屏整段失效。
 *
 * @file plugins/auth_hero/assets/style.css
 * @package Plugin\AuthHero
 * @version 1.1.0
 */

/* ============================================================
   1. 源容器：JS 未执行 / 未启用时保持隐藏
   ------------------------------------------------------------
   左栏 DOM 由 layout_body_end 输出在 </body> 前，靠 JS 搬进中栏。
   JS 没跑（被 CSP 挡、加载失败、旧浏览器）→ 这一段永远不出现，
   页面退化成核心原样，不会多出一条空白栏。
   ============================================================ */
.fh-lsa-src {
    display: none !important;
}

/* ============================================================
   2. 两栏容器 —— 它才是「那一张卡片」
   ------------------------------------------------------------
   融合的关键：卡片的白底 / 边框 / 圆角 / 阴影全部上移到 wrap，
   左栏降级成卡片内的**浅色分区**（无独立圆角、无独立边框），
   右栏的核心卡片 `.mn-auth-box` 被「透明化」只留内容。
   → 视觉上是「一张卡片里分了左右两块」，而不是两块板子并排。
   ============================================================ */
.fh-lsa-wrap {
    display: flex;
    gap: 0;
    /* stretch：左栏必须撑满整张卡片的高度，否则底部会露出一截白 */
    align-items: stretch;
    /* 固定宽度 + 居中：卡片不跟着中栏宽度伸缩（页面两侧栏已隐藏，中栏会变很宽） */
    width: 780px;
    max-width: 100%;
    margin: 40px auto;
    background: var(--mn-bg-card);
    border: 1px solid var(--mn-border);
    border-radius: var(--mn-radius-lg);
    box-shadow: var(--mn-shadow-sm);
    /* 裁掉内部区块的直角，让它们跟随卡片圆角 */
    overflow: hidden;
}

/* ============================================================
   3. 左栏（卡片内的说明区）
   ------------------------------------------------------------
   底色与右栏一致（都是卡片白底），两栏的区分**只靠中间那条线**。
   → 想换底色，后台「左栏背景色」填 #rrggbb 即可（JS 写 inline style，优先级高于这里）。
   ============================================================ */
.fh-lsa-side {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    padding: 32px 28px;
    /* 与右栏同色；不写死 var(--mn-bg-card) 是为了让后台自定义背景色能直接盖住 */
    background: transparent;
    color: var(--mn-text);
    overflow-wrap: break-word;
    /* 左栏文字通常比表单短 → 垂直居中，避免底部一大片空白
       ⚠️ 用 `safe center`：内容超长时自动退回顶部对齐，不会被裁掉开头 */
    display: flex;
    flex-direction: column;
    justify-content: safe center;
}

/* 分隔线：不贯穿、两端渐隐
   ------------------------------------------------------------
   ⚠️ 不能用 `border-right`：边框必然贯穿整个高度，两端是硬切口。
   改用伪元素 + 上下留白 + 渐变 → 线从内容区顶部开始、在两端自然淡出，
   两张白底并排时才不会像「被切开」，而是「被一条细线轻轻分开」。
   上下留白取 28px（与左右内边距同量级），比内容区略收一点更透气。 */
.fh-lsa-side::after {
    content: "";
    position: absolute;
    top: 28px;
    bottom: 28px;
    right: 0;
    width: 1px;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--mn-border) 18%,
        var(--mn-border) 82%,
        transparent 100%
    );
}

.fh-lsa-img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 18px;
    border-radius: var(--mn-radius);
}

/* 占位图：没传配图时由 layout_body_end 内联生成
   ------------------------------------------------------------
   ⚠️ `color` 决定整张图的**底色**（背景渐变 + 两个柔光圆都是 currentColor），
      所以站点换主题色时占位图自动跟随。品牌图形与字标是固定品牌色，不跟主题走。
   ⚠️ 必须显式写 `aspect-ratio`：内联 <svg> 没有 intrinsic size，
      只给 `height: auto` 会退化成浏览器默认的 150px 高。 */
.fh-lsa-ph {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: 18px;
    border-radius: var(--mn-radius);
    color: var(--mn-primary);
    overflow: hidden;
}

/* 品牌图形的渐变端点：跟随主题主色
   ------------------------------------------------------------
   ⚠️ SVG 的 `fill` / `stroke` **属性**不接受 `var(--mn-*)`（属性不是 CSS 上下文），
      但 `stop-color` 是**标准 CSS 属性** → 可以被 CSS 规则设置，也就能吃 var()。
      所以渐变两端的颜色在这里定；SVG 里那两行 `stop-color="#4D6BFE"` 只是
      「CSS 没加载」时的兜底，正常情况会被这两条规则覆盖。
   ⚠️ 深浅不靠写死色号，靠第二端**降透明度**（0.55）—— 换任何主题色都成立，
      包括深色主题下主色变亮的情况。 */
.fh-lsa-ph .fh-lsa-g1 {
    stop-color: var(--mn-primary);
}

.fh-lsa-ph .fh-lsa-g2 {
    stop-color: var(--mn-primary);
    stop-opacity: 0.55;
}

.fh-lsa-title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--mn-text);
}

.fh-lsa-desc {
    font-size: 13px;
    line-height: 1.75;
    color: var(--mn-text-secondary);
    /* 后台录入的换行原样保留（不做富文本，杜绝注入面） */
    white-space: pre-line;
}

/* 左栏最后一项不留多余下边距 */
.fh-lsa-side > :last-child {
    margin-bottom: 0;
}

/* ============================================================
   4. 右栏：核心表单卡片「透明化」
   ------------------------------------------------------------
   `.mn-section` 自带 background / border / border-radius / box-shadow
   （modern.css:874），在这里全部抹掉 —— 卡片的那些外观已经由 wrap 提供。
   抹不干净就会出现「卡片里再套一张卡片」的双层边框。
   ============================================================ */
.fh-lsa-wrap > .mn-auth-box {
    flex: 0 0 400px;
    max-width: 400px;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ============================================================
   5. 桌面端：隐藏页面两侧栏
   ------------------------------------------------------------
   登录页是「访客第一屏」，论坛的应用列表 / 排行榜在这里只是干扰。
   ⚠️ 只在 ≥901px 生效 —— 两端本来就没有侧栏：
      · ≤1024px 核心已隐藏右栏（modern.css:2384）
      · ≤768px  核心已隐藏左栏（modern.css:2537）
      移动端连抽屉逻辑一起别碰。
   ⚠️ 用 `.mn-body >` 把特异性提到 (0,2,0) 压过核心 `.mn-left` (0,1,0)；
      本文件在 modern.css **之前**加载，同特异性会被反超。
   ============================================================ */
@media (min-width: 901px) {
    .mn-body > .mn-left,
    .mn-body > .mn-right {
        display: none;
    }
}

/* ============================================================
   6. 窄屏：退回单栏，左栏隐藏
   ------------------------------------------------------------
   900px 是实测拐点：再窄下去左栏只剩 200 出头，说明文字会碎成一列。
   隐藏后 wrap 的卡片外观必须**全部撤掉**，并把 `.mn-auth-box` 的
   核心外观**原样还回去** —— 否则就是「裸表单浮在页面上」。
   ============================================================ */
@media (max-width: 900px) {
    .fh-lsa-wrap {
        display: block;
        /* 撤掉固定宽度，回到「占满中栏」 */
        width: auto;
        margin: 0;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    .fh-lsa-side {
        display: none;
    }

    .fh-lsa-wrap > .mn-auth-box {
        flex: none;
        max-width: 420px;
        margin: 40px auto;
        background: var(--mn-bg-card);
        border: 1px solid var(--mn-border);
        border-radius: var(--mn-radius-lg);
        box-shadow: var(--mn-shadow-sm);
    }
}

/* ============================================================
   7. 后台配置页
   ------------------------------------------------------------
   作用域一律挂在 `.fh-ah-admin` 下 —— 同一个 style.css 也服务前台，
   不圈作用域会污染其它后台页。
   ⚠️ 本文件在 admin.css **之前**加载，覆盖核心类只能靠特异性取胜。
   ============================================================ */
.fh-ah-admin .form-group {
    margin-bottom: 18px;
}

.fh-ah-admin .fh-ah-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--mn-text);
}

.fh-ah-admin .fh-ah-check input[type="checkbox"] {
    margin: 0;
    accent-color: var(--mn-primary);
    cursor: pointer;
}

/* 生效页面：四个 checkbox 横排，窄屏自动折行 */
.fh-ah-admin .fh-ah-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 4px 0 6px;
}

.fh-ah-admin .fh-ah-input {
    max-width: 420px;
}

.fh-ah-admin .fh-ah-textarea {
    max-width: 620px;
    min-height: 110px;
    line-height: 1.7;
    resize: vertical;
}

.fh-ah-admin .fh-ah-file {
    font-size: 13px;
    color: var(--mn-text-secondary);
}

.fh-ah-admin .fh-ah-hint {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.65;
    color: var(--mn-text-muted);
}

/* 配图预览：限高，避免竖图把后台撑成一屏 */
.fh-ah-admin .fh-ah-preview {
    max-width: 360px;
    margin-top: 4px;
    border: 1px solid var(--mn-border);
    border-radius: var(--mn-radius);
    overflow: hidden;
    background: var(--mn-primary-subtle);
}

.fh-ah-admin .fh-ah-preview img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
}

.fh-ah-admin .fh-ah-actions {
    padding-top: 6px;
}