/**
 * OPC 登录/注册页共享：微信扫码登录三步引导。
 *
 * 消费方：templates/opc-auth-wechat-qr.php（由 login/register 两个页面模板引入）
 * 加载：opc-functions.php → opc_enqueue_module_styles()，条件为 login/register 会员页
 *
 * 【所有 var(--ds-*) 必须带兜底值】
 * 这批 token 不在 tokens.css 里，只在 opc-login-page.php / opc-register-page.php
 * 各自的内联 :root 中声明。带兜底值后本文件自洽，消费方声明了 token 则仍生效。
 */

/* ===== 右栏容器 ===== */
/* 2026-07-31 用户要求放大：16 → 19px。左栏「登录」标题是 24px，19px 在其之下，
   保持左右栏的主次层级不被拉平。 */
.opc-col-qr .qr-title {
    font-size: 19px; font-weight: 600; margin-bottom: 18px;
    color: var(--ds-text, #1a1a1a);
}

/* ===== 三步骨架栅格 =====
   2026-07-31 右栏由 360 加宽到 410（shell 960→1010）。
   注意 flex-basis 是 content-box 之外的总宽：410 − 48(padding-left) − 1(border) = 361 给 grid，
   再减 140(二维码) + 16(gap) → 文字列实际 205px（不是 410−140−16）。
   实测单行自然宽度 ① 253px、② 257px，均超 205，故 ①② 仍各占 2 行。
   要让它们收到 1 行需文字列 ≥260px，即右栏 ~465、shell ~1065 —— 当前不做。 */
.opc-wx-guide {
    display: grid;
    grid-template-columns: 140px 1fr;   /* 二维码 | 文字；≥1024px 时文字列 205px */
    column-gap: 16px;
    row-gap: 14px;
    text-align: left;
    align-items: start;
}
.opc-wx-qrwrap { grid-row: 1 / span 2; }            /* 竖跨 ①② */
.opc-wx-step.s3,
.opc-wx-guide .member-form-qr-text { grid-column: 1 / -1; }   /* ③ 与状态行通栏 */

/* ===== 二维码盒子 ===== */
.opc-qr-box {
    width: 140px; height: 140px;
    border: 1px solid var(--ds-border, #eceef1); border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; background: #fff;
}
.opc-qr-box img, .opc-qr-box canvas, .opc-qr-box iframe {
    max-width: 100%; max-height: 100%; border: 0;
}
/* 【必须覆盖，否则二维码扫不出来】
   插件 wpcom-member/css/style.css 把 .member-form-qr-img 写死成
   width/height:200px + padding:3px + box-shadow。二维码盒子从 200px 收到 140px 后，
   这个 wrapper 仍是 200px 高，于是 <img> 被渲染成 132x194（源图 258x258 是正方形，
   比例被压成 0.68），再被盒子的 overflow:hidden 上下各裁掉 27px。
   源图 quiet zone 上下仅约 7%（18px/258），27px 已切进定位图案，叠加非等比拉伸
   破坏模块网格 —— 实测 BarcodeDetector 对可见区域返回 NO_DECODE（原图可正常解码）。
   这是确定性失效，不是「140px 偏小、成功率下降」。 */
.opc-qr-box .member-form-qr-img {
    width: 100%; height: 100%;
    padding: 0; margin: 0; box-shadow: none;
    display: flex; align-items: center; justify-content: center;
}
.opc-qr-box .member-form-qr-img img,
.opc-qr-box .member-form-qr-img canvas {
    width: 100%; height: 100%; object-fit: contain;   /* contain 保等比，绝不可用 fill */
}
/* 微信开放平台走 iframe（qrconnect 页面），原生尺寸 240x267；
   沿用 140px 会把二维码下沿连同状态提示一起裁掉，故命中 iframe 时放开盒子尺寸。 */
.opc-qr-box.is-iframe {
    width: 240px; height: 267px; border: 0; border-radius: 0; background: transparent;
}
.opc-qr-box.is-iframe .member-form-qr-img {
    width: 240px; height: 267px; box-shadow: none; padding: 0; background: transparent;
}
.opc-qr-box .member-form-qr-iframe {
    display: block; width: 240px; height: 267px; border: 0; margin: 0 auto;
}

/* 移动端提示：默认隐藏，≤560px 才出现 */
.opc-wx-longpress {
    display: none;
    margin-top: 8px; font-size: 12px; line-height: 1.5;
    color: var(--ds-muted, #8a8f99); text-align: center;
}

/* ===== 单步：序号 + 标题 ===== */
/* 2026-07-31：13 → 15 → 14px（用户两次调整后定为 14）。序号同步，保持与标题基线对齐。 */
.opc-wx-step { font-size: 14px; line-height: 1.6; color: var(--ds-text, #1a1a1a); }
.opc-wx-head { display: flex; align-items: baseline; gap: 6px; }
.opc-wx-num {
    flex: 0 0 auto;
    color: var(--ds-blue, #4d6bfe); font-weight: 600; font-size: 14px;
}
.opc-wx-title { flex: 1 1 auto; min-width: 0; }
/* 标题内的内联强调（由 PHP 直出 / JS 的 TITLE 常量写入） */
.opc-wx-title b { color: #2aae67; font-weight: 600; }
.opc-wx-title .wechat { color: #2aae67; font-weight: 500; }

/* 关键词 chip：可选中，供用户核对；不做复制按钮（用户在手机微信内打字） */
.opc-wx-kw {
    display: inline-block;
    padding: 1px 6px; margin: 0 1px;
    border: 1px solid var(--ds-border, #eceef1); border-radius: 5px;
    background: var(--ds-field-bg, #f4f5f7);
    color: #2aae67; font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px; line-height: 1.5;   /* 随三步文字 13→15 同步 12→14，等宽字体视觉偏小故比正文小 1px */
    user-select: all;   /* 点一下即全选，方便核对 */
}

/* ===== 状态/报错行 =====
   正常时为空、不占高度；qrFail() 写入文字后才显示（JS 会一并 css('color','red')）。
   插件 style.css 的 .member-form-qr-text 带 width:200px + 灰底 + 圆角 + padding:10px 5px
   + text-align:center + margin:10px auto，若不覆盖，报错文案会渲染成通栏里居中的
   200px 灰底小方块（实测被挤成 3 行），与左对齐的三步清单视觉断裂。 */
.opc-wx-guide .member-form-qr-text {
    width: auto; background: transparent; border-radius: 0;
    padding: 0; margin: 0; text-align: left;
    font-size: 14px; line-height: 1.6;   /* 随三步文字同步，最终 14px */
}
.opc-wx-guide .member-form-qr-text:empty { display: none; }

/* ===== 验证码表单 =====
   原挂在 .opc-qr-hint 下（opc-login-page.php:178-197），表单搬入 .s3 后必须改挂
   .opc-wx-step，否则全部失配、输入框与按钮退回浏览器默认样式。
   【结构不可改】.wechat-code 为按钮父级 / input 与 button 同级 —— 插件 login.js
   的 document 级委托依赖这两条，见 spec 5.2。 */
.opc-wx-step .wechat-code {
    display: flex; align-items: center; gap: 8px;
    width: 100%; margin-top: 8px;
}
.opc-wx-step .wechat-code-input {
    flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px;
    border: 1px solid var(--ds-border, #eceef1); border-radius: 8px;
    /* 2026-07-31：先前按用户要求改成 #fff，本次又改回浅灰底 var(--ds-field-bg)，
       与左栏 .form-input 的底色一致。加 !important 是因为插件 style.css 对
       .wechat-code-input 有同类声明，不加会被它按加载顺序盖掉。 */
    background: var(--ds-field-bg, #f4f5f7) !important; color: var(--ds-text, #1a1a1a);
    font-size: 14px; line-height: 40px; outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.opc-wx-step .wechat-code-input:focus {
    border-color: var(--ds-blue, #4d6bfe);
    box-shadow: 0 0 0 3px rgba(19, 76, 255, .12);
}
.opc-wx-step .wechat-code-input.error {
    border-color: #e5484d;
    box-shadow: 0 0 0 3px rgba(229, 72, 77, .12);
}
.opc-wx-step .wechat-code-input::placeholder { color: var(--ds-placeholder, #9aa0aa); }
.opc-wx-step .wechat-code-btn {
    flex: 0 0 auto; height: 40px; padding: 0 18px;
    border: none; border-radius: 8px;
    background: var(--ds-blue, #4d6bfe); color: #fff;
    font-size: 14px; font-weight: 600; line-height: 40px;
    cursor: pointer; white-space: nowrap;
    transition: background .2s ease;
}
.opc-wx-step .wechat-code-btn:hover { background: var(--ds-blue-hover, #3f5bea); }
.opc-wx-step .wechat-code-btn:active { background: var(--ds-blue-active, #3550d8); }
.opc-wx-step .wechat-code-btn.loading { opacity: .65; pointer-events: none; }

/* ===== 模式门控 =====
   JS 只改 data-mode 属性，显示/隐藏全由这里决定（applyMode 不操作 display）。
   mode 0 = 开放平台/公众号直接授权（扫码即登录）
   mode 1 = 公众号关注后登录（轮询扫码事件）
   mode 3 = 公众号关注并回复关键词换验证码（不轮询，手动提交）
   仅 mode 3 是三步流程；0/1 只剩一步，序号一并隐藏——单步编号是噪音。 */
.opc-wx-guide:not([data-mode="3"]) .s2,
.opc-wx-guide:not([data-mode="3"]) .s3,
.opc-wx-guide:not([data-mode="3"]) .opc-wx-num { display: none; }
/* 单步时二维码不必再竖跨两行 */
.opc-wx-guide:not([data-mode="3"]) .opc-wx-qrwrap { grid-row: auto; }

/* ===== 二维码加载动画 =====
   注册页此前只有 .wechat-qrcode-loading 的 markup 而无 CSS（裸 icon 不转），本文件一并覆盖。 */
.wechat-qrcode-loading {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; background: rgba(255, 255, 255, .95);
}
.wechat-qrcode-loading .wpcom-icon {
    font-size: 32px; color: var(--ds-blue, #4d6bfe);
    animation: opc-wx-spin 1s linear infinite;
}
@keyframes opc-wx-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ===== 未启用兜底分支（partial 的 else 分支）===== */
.opc-qr-disabled {
    color: var(--ds-placeholder, #9aa0aa); font-size: 13px;
    padding: 0 6px; line-height: 1.7;
}
.opc-qr-hint { margin-top: 16px; font-size: 13px; line-height: 1.6; }
.opc-qr-hint .wechat { color: #2aae67; font-weight: 500; }

/* ===== 769–1023px：中段收窄 =====
   为使 768px 折叠断点在数学上成立（769px 视口 → shell 内容 721px）：
   721 = 340(表单) + 32(gap) + 32(padding) + 1(border) + 316(右栏)
   不引入新行为，只是把 gap/padding/列宽压到能容纳两栏并列。 */
@media (min-width: 769px) and (max-width: 1023px) {
    .opc-login-cols { gap: 32px; }
    .opc-col-qr { flex: 0 0 316px; padding-left: 32px; }
    .opc-wx-guide { column-gap: 12px; }   /* 文字列 164px */
}

/* ===== ≤768px：沿用各模板既有的堆叠断点 =====
   断点位置与堆叠行为由模板内联样式负责（本文件不改），这里只防止堆叠后行宽被拉到 700px。 */
@media (max-width: 768px) {
    .opc-wx-guide { max-width: 360px; margin: 0 auto; }
}

/* ===== ≤560px：切单列 ===== */
@media (max-width: 560px) {
    .opc-wx-guide {
        grid-template-columns: 1fr;
        row-gap: 16px;
        max-width: 320px;
    }
    .opc-wx-qrwrap { grid-row: auto; justify-self: center; }
    .opc-wx-longpress { display: block; }   /* 手机扫不了自己的屏幕，提示长按识别 */
}