/* ── 首页以外页面的组件。只复用冻结基线的设计令牌，不改动 site.css 里的既有规则 ── */

/* 头部是 fixed（提示条 40px + 头部 72px），非首页内容要自己留出空间 */
.page{padding:132px 0 72px}
.page.soft{background:var(--sec)}
.crumb{font-size:13px;color:#3f3f47;margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap}
.crumb a{color:var(--blue)}
.crumb a:hover{text-decoration:underline}
.crumb span{color:#3f3f47}

.phead{margin-bottom:30px}
.phead h1{font-size:clamp(26px,3.4vw,42px);line-height:1.35;letter-spacing:-.01em;margin-bottom:14px}
.phead .lead{font-size:16px;color:#111111;line-height:1.9;max-width:860px}
.phead .meta{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.chip{font-size:12.5px;padding:6px 12px;border:1px solid var(--line2);border-radius:100px;color:#111111;background:#fff}
.chip b{color:var(--navy)}

/* 卡片与网格 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.cards.two{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.card{background:#fff;border:1px solid var(--line);box-shadow:var(--sh);border-radius:10px;padding:22px;
      display:flex;flex-direction:column;gap:10px}
.card h3{font-size:17px;color:var(--navy);line-height:1.5}
.card p{font-size:14px;color:#111111;line-height:1.85}
.card .price{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--amber)}
.card .price small{font-size:12px;color:#3f3f47;font-family:inherit;font-weight:400}
/* 精品商品主图（boutique_list.html 的 PRODUCTS 块）。
   原来写在行内 style="max-width:120px" 上，改成类是为了让「图片尺寸」这一条能统一维护；
   上限 120px + 等比缩放：运营上传的手机原图（实测常见 3000px 宽）不设上限会把卡片撑破。 */
img.bp-img{max-width:120px;height:auto;display:block}

/* ── 另外两处「图片没有尺寸约束」的补法（本波第 ④ 项）────────────────────────
   为什么要动：<img> 只有 max-width / height:auto 时，浏览器在图片下载完之前
   不知道要用多高，图一到位就把下面整段内容推下去（布局抖动，CLS）。
   能定宽高比的一律用 CSS aspect-ratio 预留，不写死像素高度。
   · .doc-thumb：资料库缩略图，原来写在行内 style="max-width:72px;height:auto" 上。
     改成类与 img.bp-img 同一套做法（尺寸口径一处维护），并给正方形预留框 +
     object-fit:contain（不裁切、不放大）。
     ⚠ 诚实说明：当前数据库里 LibraryDocument.image 六条全为空，所以这条规则
     现在没有任何页面在用它 —— 它防的是「运营一上传缩略图就开始抖」。
   · .loginpic img：登录 / 注册页配图（V5 8.3），原来**一条 CSS 都没有**。
     宽高比由运营上传决定，数据库没有尺寸字段，无法精确预留，所以这里只做
     「不超出容器 + 预留一屏常见高度」的处理；精确预留需要给 LoginPageImage
     加 width / height 字段，本次**没做**（见交付报告的诚实清单）。 */
.doc-thumb{width:72px;height:auto;aspect-ratio:1;max-width:72px;
           object-fit:contain;display:block}
.loginpic{margin:0 0 24px}
.loginpic img{display:block;max-width:100%;height:auto;min-height:180px;object-fit:contain}

/* 套餐表 */
.ptable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.ptable caption{text-align:left;font-size:13px;color:#3f3f47;padding:0 0 10px}
.ptable th,.ptable td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;font-size:14.5px;
                      color:#111111;vertical-align:middle}
.ptable th{background:var(--sec);color:var(--navy);font-size:13px;font-weight:bold;white-space:nowrap}
.ptable tr:last-child td{border-bottom:0}
.ptable td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.ptable td.p{font-family:var(--mono);font-weight:700;color:var(--amber);font-size:16px}
.ptable a{color:var(--blue)}
.ptable a:hover{text-decoration:underline}

.tagset{display:flex;gap:6px;flex-wrap:wrap}
.tagset .tag{font-size:11.5px;line-height:18px;padding:2px 9px;border:1px solid var(--line2);border-radius:100px;color:#111111}
.tagset .tag.a{border-color:var(--blue);color:var(--blue);font-weight:600}

/* 介质选择（eSIM / 实体卡） */
.mediatog{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.mediatog label{display:flex;align-items:center;gap:8px;padding:11px 18px;border:1px solid var(--line2);
                border-radius:100px;cursor:pointer;font-size:14.5px;color:#111111;background:#fff}
.mediatog label:hover{border-color:var(--blue);color:var(--blue)}
.mediatog input{accent-color:var(--blue)}
.mediatog input:checked + span{color:var(--navy);font-weight:700}

/* 表单 */
.form{background:#fff;border:1px solid var(--line);box-shadow:var(--sh);border-radius:10px;padding:26px;max-width:620px}
.frow{margin-bottom:18px}
.frow label{display:block;font-size:13.5px;color:var(--navy);font-weight:600;margin-bottom:8px}
.frow input[type=text],.frow input[type=email],.frow input[type=password],.frow select,.frow textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line2);background:#fff;font:inherit;font-size:15px;color:#111111}
.frow input:focus,.frow select:focus,.frow textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(75,116,251,.14)}
.frow .hint{font-size:12.5px;color:#3f3f47;margin-top:7px;line-height:1.7}
.btn{display:inline-block;padding:14px 30px;border:0;border-radius:100px;cursor:pointer;font:inherit;font-size:15px;
     font-weight:700;text-align:center}
.btn-primary{background:#3a5fd9;color:#fff!important}
.btn-primary:hover{background:#2f4fc0}
.btn-ghost{background:#fff;color:var(--navy)!important;border:1px solid var(--line2)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)!important}
.btn[disabled]{background:#c9cbd6;color:#4a4a53!important;cursor:not-allowed}

/* 提示块 */
.notice{border:1px solid var(--line2);background:#fff;border-left:4px solid var(--blue);padding:16px 20px;
        font-size:14px;line-height:1.85;color:#111111;border-radius:0 10px 10px 0}
.notice.warn{border-left-color:var(--amber)}
.notice b{color:var(--navy)}
.notice a{color:var(--blue);border-bottom:1px solid #c9d6ff}

/* 费用明细 */
.fees{max-width:420px;margin-left:auto;background:var(--sec);border:1px solid var(--line);padding:22px}
.fees .r{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:#111111;padding:9px 0;
         border-bottom:1px dashed var(--line2)}
.fees .r:last-of-type{border-bottom:0}
.fees .r b{font-family:var(--mono);color:var(--navy)}
.fees .tot{display:flex;justify-content:space-between;gap:16px;margin-top:12px;padding-top:14px;
           border-top:1px solid var(--line2);font-size:17px;font-weight:700;color:var(--navy)}
.fees .tot em{font-style:normal;font-family:var(--mono);color:var(--amber);font-size:22px}

/* 步骤 */
.steps{counter-reset:s;display:grid;gap:16px}
.steps li{list-style:none;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);padding:20px 22px 20px 62px;
          position:relative;font-size:14.5px;line-height:1.85;color:#111111}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:20px;top:18px;width:28px;height:28px;
                  background:#eef2fe;color:var(--blue);font-weight:700;display:grid;place-items:center;border-radius:100px;
                  font-family:var(--mono);font-size:14px}
.steps li b{color:var(--navy)}
.steps li .sub{display:block;font-size:13px;color:#3f3f47;margin-top:7px}

/* 资料库文章正文 */
.article{max-width:820px}
.article h2{font-size:24px;color:var(--navy);margin:30px 0 12px;line-height:1.5}
.article h3{font-size:18px;color:var(--navy);margin:24px 0 10px}
.article p{font-size:15px;line-height:1.95;color:#111111;margin-bottom:14px}
.article ul{margin:0 0 16px 22px}
.article li{font-size:15px;line-height:1.95;color:#111111;margin-bottom:8px}

/* 语言切换菜单（真实 <a>，可抓取） */
.lang-sel{position:relative;display:inline-block}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:130px;background:#fff;border:1px solid var(--line2);
           box-shadow:var(--sh);display:none;z-index:120;padding:6px 0}
.lang-sel:hover .lang-menu,.lang-sel:focus-within .lang-menu{display:block}
.lang-menu a{display:block;padding:9px 16px;font-size:13.5px;color:#111111}
.lang-menu a:hover{background:var(--sec);color:var(--blue)}
.lang-menu a.on{color:var(--blue);font-weight:700}

/* 列表型（覆盖国家等） */
.kv{background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.kv .row{display:flex;gap:16px;padding:13px 20px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.8}
.kv .row:last-child{border-bottom:0}
.kv .k{flex:none;width:180px;color:var(--navy);font-weight:600;font-size:13px}
.kv .v{color:#111111}

/* ── 对比度修正层 ──────────────────────────────────────────────────
   这一层加载在 site.css 之后，只覆盖「文字颜色」，不动任何布局与冻结基线规则。
   每一对都实测过（tools/check_contrast.py），白底上要求 ≥4.5:1：
     链接蓝  #4b74fb = 4.05:1 不达标 → 文字用 #3a63ea = 5.06:1（hover 用 #2f4fc0 = 7.00:1）
     价格橙  #ff6b3d = 2.83:1 不达标 → 文字用 #c2410c = 5.18:1（装饰性底色仍用原橙）
     浅灰    #8a8a94 = 3.42:1 不达标 → 文字用 #6b6b75 = 5.27:1
     离线态  #b26a00 = 4.24:1 不达标 → #9a5c00 = 5.38:1
     disabled 发送按钮 #7d92cf 白字 = 3.05:1 → 改浅灰底 + 深灰字 = 5.43:1
   颜色变量本身不改，避免影响边框、进度条等非文字用法。 */

/* 1. 链接文字 */
.nav a.on, .crumb a, .notice a, .card a, .ptable a, .article a, .kv a, .qa .an a,
.lang-menu a, .fees a, .steps a, .phead a, .dest .hot a, .compat .go {
  color: #3a63ea;
}
.nav a.on:hover, .crumb a:hover, .notice a:hover, .card a:hover, .ptable a:hover,
.article a:hover, .ft .col a:hover, .qa .an a:hover, .dest .hot a:hover {
  color: #2f4fc0;
}
.hd-r .sel:hover { color: #2f4fc0; border-color: #2f4fc0; }

/* 2. 价格等橙色文字 */
.card .price, .ptable td.p, .fees .tot em, .gc .pv, .ci .nm .md .lp em, .step .lk {
  color: #c2410c;
}

/* 3. 浅灰小字（占位、来源、次要说明） */
.frow input::placeholder, .frow textarea::placeholder, .frow select::placeholder,
input::placeholder, textarea::placeholder {
  color: #6b6b75;
  opacity: 1;
}
.amb-msg .src, #amb-panel .amb-msg .src { color: #6b6b75; }
.amb-input textarea::placeholder,
#amb-panel .amb-input textarea::placeholder { color: #6b6b75 !important; }
.phead .lead + .meta .chip, .kv .row .v small { color: #3f3f47; }

/* 4. 小艾面板：状态栏与来源 */
#amb-panel .amb-status { color: #6b6b75; }
#amb-panel .amb-status.on { color: #2f4fc0; }
#amb-panel .amb-status.off { color: #9a5c00; }
#amb-panel .amb-note a { color: #2f4fc0; border-bottom: 1px solid #c9d6ff; }
.amb-bubble .who { color: #2f4fc0; }

/* 5. 发送按钮 disabled：不再靠降透明度，改成浅灰底 + 深灰字 */
.amb-send[disabled], #amb-panel .amb-send[disabled], #amb-panel .amb-send[disabled]:hover {
  background: #c9cbd6 !important;
  color: #4a4a53 !important;
  -webkit-text-fill-color: #4a4a53 !important;
  opacity: 1 !important;
}

/* 多国/组地区没有国旗时的中性占位（尺寸与 .ci img 一致，保持栅格对齐） */
.ci-ph{width:68px;height:68px;min-width:68px;display:grid;place-items:center;
       background:var(--sec);border:1px solid var(--line)}

@media(max-width:900px){
  .page{padding:118px 0 56px}
  .ptable{display:block;overflow-x:auto;white-space:nowrap}
  .fees{margin-left:0;max-width:none}
  .kv .row{flex-direction:column;gap:4px}
  .kv .k{width:auto}
}

/* ── 320px 级窄屏：卡片网格退回单列 ──────────────────────────────────────
   .cards.two 用的是 repeat(auto-fill,minmax(320px,1fr))：容器一旦窄于 320px，
   轨道仍按 320px 排，卡片就会顶破容器。实测（headless Chrome，布局视口 320px）：
   /zh-hans/boutique-list/ 与 /zh-hans/database/ 的 scrollWidth = 340px，溢出 20px，
   溢出的元素是 article.card（left=20 right=340 w=320）。
   这条规则必须写在 pages.css（.cards 系列定义在这里，且 pages.css 在 site.css 之后加载；
   写到 site.css 里会因为同权重后加载者赢而不生效 —— 实测踩过一次）。
   375px 及以上不受影响。 */
@media(max-width:420px){
  .cards,.cards.two{grid-template-columns:1fr}
}

/* ── 窄屏输入框字号 16px（iOS 聚焦自动放大修正，本波第 ③ 项）──────────────────
   现象：iOS Safari 在**文本输入框** font-size < 16px 时，聚焦会强制把整页放大，
   用户看到的是「排版突然变大、退不回去」。站内表单的桌面字号是 15px
   （本文件第 60–61 行的 .frow 系列），所以登录 / 注册 / 结算 / 合作申请的
   每一个输入框在 iPhone 上都会触发。
   为什么这条必须写在本文件、而不是 site.css：.frow 的字号就定义在本文件，
   且本文件在 site.css 之后加载 —— 同权重下后加载者赢，写进 site.css 会被顶回去
   （本文件第 193–194 行记的正是同一个坑）。
   两段选择器的作用：第一段与第 60 行的原始选择器**逐字对齐**（同权重、靠后生效）；
   第二段用 .form .frow 前缀兜住「将来出现别的 input type」的情况。
   只改窄屏：桌面仍是 15px，版式与视觉完全不变。 */
@media (max-width:760px){
  .frow input[type=text],.frow input[type=email],.frow input[type=password],
  .frow select,.frow textarea{font-size:16px}
  .form .frow input,.form .frow select,.form .frow textarea{font-size:16px}
}