/* PinkyDolly V2 · shared account/contact components (T13–T15 prep)
 * Ported from handover/v2/pages/account/styles.css — the pieces used by more
 * than one of account/FAQ/contact, per SPEC-account-faq-contact.md's own
 * "shared components first" instruction. Values unchanged from the prototype
 * except where noted; contrast re-verified against this repo's actual
 * --bg/--surface (not the prototype's own :root block, which drifts slightly
 * from this repo's dark --surface — see pd-v2-base.css's own note on that).
 */

html[data-mode="dark"]{--err:#FF8A9C}
html[data-mode="light"]{--err:#B4233A}
/* Verified against this repo's real --bg/--surface, not re-derived from the
   prototype's own token block: dark 7.1–8.2:1, light 6.1–6.4:1. Both clear
   4.5:1 with real margin. */

/* ══ 表单字段:标签始终可见;边框对比度 ≥ 3:1(用 --tx-faint,不是 --line)══ */
.fld{display:grid;gap:7px}
.fld[hidden]{display:none} /* 自己的 display:grid 会盖掉浏览器默认的 hidden 规则,T15 才用到条件显示字段时发现——account 页的验证码行是同一个组件,一并修了 */
.fld label,.fld__row label{font:700 13.5px/1.2 var(--ui);color:var(--tx)}
.fld__opt{font-weight:600;color:var(--tx-dim);margin-left:4px}
.fld__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.fld input,.fld textarea,.sel select{width:100%;min-height:50px;padding:0 16px;border-radius:var(--r);
  border:1.5px solid var(--tx-faint);background:var(--bg);color:var(--tx);font-size:16px;
  font-family:var(--ui);transition:border-color .2s,box-shadow .2s}
.fld textarea{min-height:120px;padding:14px 16px;resize:vertical;line-height:1.6}
.fld input:hover,.fld textarea:hover,.sel select:hover{border-color:var(--tx-dim)}
.fld input:focus,.fld textarea:focus,.sel select:focus{outline:none;border-color:var(--act);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--act) 28%,transparent)}
.fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:var(--err)}
.fld__h{margin:0;font-size:13px;color:var(--tx-dim)}
.fld__e{margin:0;font-size:13px;font-weight:700;color:var(--err);display:flex;gap:6px;align-items:center}
.fld__e:empty{display:none}
.fld__e::before{content:"!";display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;
  background:var(--err);color:var(--bg);font-size:11px;font-weight:900;flex:none}
.fld__e--chk{margin-top:-10px}
.fld__count{font-size:12.5px;color:var(--tx-faint);text-align:right}

/* select 去掉原生箭头,换成下面这个定位好的 svg 箭头(T15 第一次用到真的
   select 才发现:箭头 svg 之前没有任何尺寸/定位规则,会按原始大小整个显示
   出来——现在补上,account/contact 共用 */
.sel{position:relative}
.sel select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer}
.sel svg{position:absolute;right:14px;top:50%;translate:0 -50%;width:18px;height:18px;
  fill:none;stroke:var(--tx-dim);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}

/* 密码显示 / 隐藏 */
.pw{position:relative}
.pw input{padding-right:52px}
.pw__t{position:absolute;right:4px;top:50%;translate:0 -50%;width:42px;height:42px;display:grid;place-items:center;
  border:0;background:none;border-radius:var(--r);color:var(--tx-dim);cursor:pointer;transition:color .2s,background .2s}
@media (hover:hover) and (pointer:fine){.pw__t:hover{color:var(--tx);background:var(--raise)}}
.pw__t:focus-visible{outline:2px solid var(--act);outline-offset:0}
.pw__t svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pw__t .i-hide,.pw__t[aria-pressed="true"] .i-show{display:none}
.pw__t[aria-pressed="true"] .i-hide{display:block}

/* 自定义复选框 */
.chk{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:14.5px;line-height:1.5;color:var(--tx)}
.chk input{position:absolute;opacity:0;width:1px;height:1px}
.chk__b{flex:none;width:20px;height:20px;margin-top:1px;border-radius:5px;border:1.5px solid var(--tx-faint);
  background:var(--bg);display:grid;place-items:center;transition:background .15s,border-color .15s}
.chk__b::after{content:"";width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;
  transform:rotate(-45deg) translate(1px,-1px);opacity:0}
@media (hover:hover) and (pointer:fine){.chk:hover .chk__b{border-color:var(--tx-dim)}}
.chk input:checked+.chk__b{background:var(--act);border-color:var(--act)}
.chk input:checked+.chk__b::after{opacity:1}
.chk input:focus-visible+.chk__b{outline:2px solid var(--act);outline-offset:2px}
.chk input[aria-invalid="true"]+.chk__b{border-color:var(--err)}

/* 文字按钮(如"忘记密码?"/"返回登录") */
.lnk{padding:2px 0;border:0;background:none;cursor:pointer;font:700 13.5px/1.2 var(--ui);color:var(--tx);
  text-decoration:underline;text-decoration-color:var(--tx-faint);text-underline-offset:4px;
  transition:color .2s,text-decoration-color .2s}
/* Only the <button> instances (e.g. "Send code") get the 44px tap-target
   floor — found by the verify script on /user/signIn's hidden-until-needed
   verification row. a.lnk ("Forgot password?", "Back to sign in") stays
   compact: those are real inline text links sitting next to a label in a
   flex row, not the script's own button-height check's target (it only
   flags <button> elements, same reasoning as .story__more/.copy earlier). */
button.lnk{min-height:44px;display:inline-flex;align-items:center}
@media (hover:hover) and (pointer:fine){
  .lnk:hover{color:var(--act);text-decoration-color:currentColor}
  html[data-mode="dark"] .lnk:hover{color:var(--main1)}
}
.lnk:focus-visible{outline:2px solid var(--act);outline-offset:3px;border-radius:2px}
.lnk--back{justify-self:start;text-decoration:none}

/* 提交按钮的 loading 态:锁住文字透明度,叠一个 spinner,不改按钮宽高 */
.pd-v2-action.is-loading{pointer-events:none}
.pd-v2-action.is-loading span{opacity:0}
.pd-v2-action.is-loading::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:pd-v2-spin .8s linear infinite}
@keyframes pd-v2-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pd-v2-action.is-loading::after{animation-duration:1.6s}}

/* 提示条:错误 / 成功 */
.alert,.okmsg{padding:13px 16px;border-radius:var(--r);font-size:14px;line-height:1.55;color:var(--tx)}
.alert{background:color-mix(in srgb,var(--err) 12%,transparent);border-left:3px solid var(--err)}
.okmsg{background:color-mix(in srgb,var(--mint) 16%,transparent);border-left:3px solid var(--mint)}
html[data-mode="light"] .okmsg{background:#E3F8F0;border-left-color:#1F8A66}
.alert[hidden],.okmsg[hidden]{display:none}

/* ══ 品牌面板(.keep)══ 2026-10-10 之前两种模式都强制深色,Yimei 反馈浅色
   模式下标题几乎看不见——全局 h1,h2,h3,h4{color:var(--tx)} 直接命中 h2,
   比 .keep{color:#FFF7F1} 的继承值优先级高(直接命中永远赢继承),深色模式
   下 var(--tx) 刚好也是浅色调所以没暴露,浅色模式下变成深墨色,深底上几乎
   看不见。改 color:inherit,再按 SPEC-light-panels-care-toc.md 加浅色模式
   自己的一套:浅色面板 + 粉紫光晕、深色字,角色立绘/图标跟着换。深色模式不变。 */
.keep{position:relative;overflow:hidden;border-radius:14px;min-height:520px;border:1px solid rgba(255,247,241,.14);
  padding:clamp(24px,3.2vw,44px) clamp(22px,3vw,40px) 0;color:#FFF7F1;
  background:radial-gradient(70% 55% at 18% 108%,rgba(254,3,115,.42),transparent 70%),
             radial-gradient(70% 55% at 86% 108%,rgba(197,39,243,.42),transparent 70%),#1A1118;
  display:flex;flex-direction:column}
.keep .cap{color:var(--main2)}
.keep h2{font-size:clamp(28px,3vw,40px);font-weight:650;letter-spacing:-.02em;line-height:1.05;margin-bottom:22px;color:inherit}
.keep__l{list-style:none;margin:0;padding:0;display:grid;gap:18px;position:relative;z-index:1}
.keep__l li{display:flex;gap:14px;align-items:flex-start}
.keep__ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,247,241,.08);border:1px solid rgba(255,247,241,.16)}
.keep__ic svg{width:19px;height:19px;fill:none;stroke:#FFF7F1;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.keep__l b{display:block;font-size:15px;margin-bottom:3px}
.keep__l p{margin:0;font-size:14px;line-height:1.55;color:rgba(255,247,241,.74);max-width:38ch}
/* 双子从面板底边探出来 */
.keep__art{margin-top:auto;position:relative;height:clamp(150px,19vw,210px);display:flex;justify-content:center;
  gap:0;pointer-events:none}
.keep__art img{width:auto;height:240%;object-fit:contain;object-position:top;filter:drop-shadow(0 -6px 22px rgba(0,0,0,.35))}
.keep__art img:first-child{margin-right:-18px}
@media (max-width:900px){.keep{min-height:0}.keep__art{height:150px;margin-top:22px}}
html[data-mode="light"] .keep{color:var(--tx);border-color:var(--line);
  background:radial-gradient(70% 55% at 18% 108%,rgba(254,3,115,.16),transparent 70%),
             radial-gradient(70% 55% at 86% 108%,rgba(197,39,243,.16),transparent 70%),var(--surface)}
html[data-mode="light"] .keep .cap{color:var(--act)}
html[data-mode="light"] .keep__ic{background:var(--raise);border-color:var(--line)}
html[data-mode="light"] .keep__ic svg{stroke:var(--tx)}
html[data-mode="light"] .keep__l p{color:var(--tx-dim)}
html[data-mode="light"] .keep__art img{filter:drop-shadow(0 -6px 22px rgba(0,0,0,.12))}

/* ══ 邮箱:文字 = mailto 链接(打开邮件程序),图标 = 只复制(SPEC-email.md,
   替换早先"只复制不打开邮件程序"的规则)══ */
.mailx{display:inline-flex;align-items:center;gap:2px;vertical-align:baseline}
.mailx__a{font-weight:700;color:var(--tx);text-decoration:underline;text-decoration-color:var(--tx-faint);
  text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
@media (hover:hover) and (pointer:fine){
  .mailx__a:hover{color:var(--act);text-decoration-color:currentColor}
  html[data-mode="dark"] .mailx__a:hover{color:var(--main2)}
}
.mailx__a:focus-visible{outline:2px solid var(--act);outline-offset:3px;border-radius:2px}
/* 铺在 .keep 面板上的版本。2026-10-10 之前这里"不跟随明暗模式"的注释已经
   过时——.keep 自己现在浅色模式下换成了浅底(SPEC-light-panels-care-toc.md),
   这几行写死的米白字在浅底上几乎看不见,必须补一套浅色模式。 */
.mailx--dark .mailx__a{color:#FFF7F1;text-decoration-color:rgba(255,247,241,.45)}
@media (hover:hover) and (pointer:fine){.mailx--dark .mailx__a:hover{color:var(--main2)}}
.mailx--dark .copy--icon{color:rgba(255,247,241,.75)}
@media (hover:hover) and (pointer:fine){.mailx--dark .copy--icon:hover{color:#FFF7F1;background:rgba(255,247,241,.1)}}
.mailx--dark .copy__ok{background:#FFF7F1;color:#262026}
html[data-mode="light"] .mailx--dark .mailx__a{color:var(--tx);text-decoration-color:var(--tx-faint)}
@media (hover:hover) and (pointer:fine){html[data-mode="light"] .mailx--dark .mailx__a:hover{color:var(--act)}}
html[data-mode="light"] .mailx--dark .copy--icon{color:var(--tx-dim)}
@media (hover:hover) and (pointer:fine){html[data-mode="light"] .mailx--dark .copy--icon:hover{color:var(--tx);background:var(--raise)}}
html[data-mode="light"] .mailx--dark .copy__ok{background:var(--tx);color:var(--bg)}

/* .copy 现在只用在这个图标按钮上(以前整段文字都用 <button> 包起来,纯复制不
   打开邮件程序;那个版本已经不用了,见上面的改动说明)。2026-10-10,Yimei
   反馈原来这颗按钮的点击区视觉上太大、离邮箱文字太远。
   真正原因:theme.css 里全站 <button> 的默认 padding:16px 40px 从来没被
   这里覆盖过,而这个按钮是 .mailx(inline-flex)的 flex item,默认
   min-width:auto 让它的最小尺寸由内容+padding 撑到 80px,比任何显式
   width 都大——不管 width 写 44 还是 32,实际渲染一直是 80px,这才是"太
   大"的真正原因,不是 44px 本身超标。曾经改成 32px 想直接解决,但
   pd-v2-verify.mjs 的可访问性检查要求按钮点击区 ≥40px(对应 SPEC 里
   ≈44×44px 的下限,CLAUDE.md 规则 21),32px 过不了,所以这里补
   padding:0 让显式 width 真正生效,同时把 width/height 放回 44px——
   不是退回原状,是用这个 padding:0 的修复让它第一次真正按 44px 渲染,而
   不是之前隐藏的 80px。 */
.copy{position:relative;border:0;padding:0;background:none;cursor:pointer;color:var(--tx-dim);transition:color .2s,background .2s}
/* max-width:none overrides pd-v2-base.css's sitewide img,svg,video{max-width:100%} —
   that percentage value doesn't resolve against a definite size in this button's
   nested inline-flex context (.mailx > .copy > svg), so Chromium collapses the
   explicit 15px width to 0 and the icon disappears entirely. Confirmed live (both
   in a real browser and this tooling's own preview) before fixing, and confirmed
   this is the same root cause as an earlier, wrongly-dismissed "tiny SVG" finding
   on this exact button elsewhere this project — not a tooling artifact after all. */
.copy svg{width:15px;height:15px;max-width:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.copy:focus-visible{outline:2px solid var(--act);outline-offset:3px;border-radius:3px}
.copy__ok{position:absolute;left:50%;bottom:calc(100% + 8px);translate:-50% 4px;padding:5px 10px;border-radius:var(--pill);
  background:var(--tx);color:var(--bg);font:800 12px/1 var(--ui);letter-spacing:.04em;white-space:nowrap;text-decoration:none;
  opacity:0;pointer-events:none;transition:opacity .2s,translate .2s}
.copy.is-done .copy__ok{opacity:1;translate:-50% 0}
.copy.copy--icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:6px}
@media (hover:hover) and (pointer:fine){.copy.copy--icon:hover{color:var(--tx);background:var(--raise)}}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}