/* PinkyDolly V2 · pd-v2-faq (T14)
 * Ported from handover/v2/pages/faq/styles.css's own FAQ block. .copy is
 * already shared (pd-v2-account-shared.css) — not redefined here.
 */

.faq{max-width:1180px;margin:0 auto;padding:calc(var(--navh) + clamp(36px,7vh,80px)) var(--gut) clamp(56px,10vh,110px)}
.faq__head{max-width:720px;margin-bottom:clamp(26px,4vh,40px)}
.faq__head .cap{color:var(--act2)}
html[data-mode="dark"] .faq__head .cap{color:var(--main1)}
.faq h1{font-size:clamp(36px,5.2vw,60px);font-weight:650;letter-spacing:-.022em;line-height:1.02}
.faq__sub{margin:14px 0 0;font-size:16px;color:var(--tx-dim)}
.faq__sub .copy{font-size:16px}
.empty a{color:var(--tx);text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .empty a:hover{color:var(--act)}
  html[data-mode="dark"] .empty a:hover{color:var(--main2)}
}

/* 搜索 */
.srch{position:relative;margin-top:24px;max-width:560px}
.srch>svg{position:absolute;left:16px;top:50%;translate:0 -50%;width:19px;height:19px;fill:none;stroke:var(--tx-dim);stroke-width:1.7;stroke-linecap:round;pointer-events:none}
.srch input{width:100%;min-height:52px;padding:0 48px 0 46px;border-radius:var(--pill);border:1.5px solid var(--tx-faint);
  background:var(--surface);color:var(--tx);font-size:16px;transition:border-color .2s,box-shadow .2s}
.srch input::placeholder{color:var(--tx-dim)}
@media (hover:hover) and (pointer:fine){.srch input:hover{border-color:var(--tx-dim)}}
.srch input:focus{outline:none;border-color:var(--act);box-shadow:0 0 0 3px color-mix(in srgb,var(--act) 28%,transparent)}
.srch input::-webkit-search-cancel-button{display:none}
.srch__x{position:absolute;right:6px;top:50%;translate:0 -50%;width:40px;height:40px;border:0;border-radius:50%;
  background:none;color:var(--tx-dim);display:grid;place-items:center;cursor:pointer}
@media (hover:hover) and (pointer:fine){.srch__x:hover{background:var(--raise);color:var(--tx)}}
.srch__x:focus-visible{outline:2px solid var(--act);outline-offset:0}
.srch__x[hidden]{display:none}
/* max-width:none — same pd-v2-base.css img,svg,video{max-width:100%} flex-collapse
   fix as .copy svg (pd-v2-account-shared.css); this exact icon was flagged once
   before as an unexplained "renders tiny" finding and wrongly written off as a
   tooling artifact — it's this. */
.srch__x svg{width:16px;height:16px;max-width:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.srch__n{margin:10px 0 0;min-height:1.4em;font-size:13.5px;color:var(--tx-dim)}

/* 分类:桌面左侧目录跟随滚动;手机横向滑动胶囊 */
.faq__grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.toc{position:sticky;top:calc(var(--navh) + 28px)}
.toc ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:1px solid var(--line)}
.toc a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 14px;margin-left:-1px;
  border-left:2px solid transparent;color:var(--tx-dim);text-decoration:none;font-size:14.5px;font-weight:600;transition:color .2s,border-color .2s}
.toc a span{font-size:12px;font-weight:700;color:var(--tx-dim);min-width:22px;text-align:center;padding:2px 6px;border-radius:var(--pill);background:var(--raise)}
.toc a span:empty{display:none}
@media (hover:hover) and (pointer:fine){.toc a:hover{color:var(--tx)}}
.toc a.on{color:var(--tx);border-left-color:var(--act)}
html[data-mode="dark"] .toc a.on{border-left-color:var(--main2)}
.toc a:focus-visible,.chips a:focus-visible{outline:2px solid var(--act);outline-offset:2px;border-radius:4px}
.toc a.is-dim{opacity:.4}
.chips{display:none}
@media (max-width:900px){
  .faq__grid{grid-template-columns:minmax(0,1fr)}
  .toc{display:none}
  .chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;position:sticky;top:var(--navh);z-index:5;
    margin:0 calc(var(--gut) * -1) 18px;padding:10px var(--gut);background:color-mix(in srgb,var(--bg) 92%,transparent);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .chips::-webkit-scrollbar{display:none}
  .chips a{flex:none;padding:8px 14px;border-radius:var(--pill);border:1px solid var(--tx-faint);color:var(--tx);
    text-decoration:none;font-size:13.5px;font-weight:700;white-space:nowrap}
  .chips a.on{background:var(--tx);color:var(--bg);border-color:var(--tx)}
  .chips a.is-dim{opacity:.4}
}

/* 分组 + 折叠 */
.grp{scroll-margin-top:calc(var(--navh) + 24px)}
.grp+.grp{margin-top:clamp(30px,5vh,48px)}
/* Display style even at its 22px mobile minimum — decided by role, not live
   size (SPEC-typography.md); ≤30px max so it also gets +0.02em tracking. */
.grp__h{font-size:clamp(22px,2.4vw,28px);font-weight:650;letter-spacing:.02em;margin-bottom:8px}
.grp[hidden]{display:none}
.qa{border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--navh) + 70px)}
.qa:last-child{border-bottom:0}
.qa[hidden]{display:none}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:18px 2px;cursor:pointer;border-radius:4px;min-height:44px}
.qa summary::-webkit-details-marker{display:none}
.qa__q{font-size:16.5px;font-weight:700;line-height:1.4;color:var(--tx);transition:color .2s}
.qa summary:focus-visible{outline:2px solid var(--act);outline-offset:2px}
.qa__i{flex:none;width:20px;height:20px;fill:none;stroke:var(--tx-dim);stroke-width:1.6;stroke-linecap:round;transition:transform .3s var(--e),stroke .2s}
.qa[open] .qa__i{transform:rotate(45deg);stroke:var(--tx)}
@media (hover:hover) and (pointer:fine){
  .qa summary:hover .qa__q{color:var(--act)}
  html[data-mode="dark"] .qa summary:hover .qa__q{color:var(--main2)}
  /* 悬停 / 键盘聚焦时,右侧 + 号和标题一起变色(展开与收起状态都一样) */
  .qa summary:hover .qa__i,.qa summary:focus-visible .qa__i{stroke:var(--act)}
  html[data-mode="dark"] .qa summary:hover .qa__i,html[data-mode="dark"] .qa summary:focus-visible .qa__i{stroke:var(--main2)}
}
.qa summary:focus-visible .qa__q{color:var(--act)}
html[data-mode="dark"] .qa summary:focus-visible .qa__q{color:var(--main2)}
.qa__a{padding:0 40px 20px 2px;color:var(--tx-dim);font-size:15.5px;line-height:1.7;max-width:68ch}
.qa__a p{margin:0}
.qa__a p+p{margin-top:10px}
.qa__a b,.qa__a strong{color:var(--tx);font-weight:700}
.qa__a ul{margin:0;padding-left:1.15em;display:grid;gap:6px}
.qa__a a{color:var(--tx);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.qa__a a:hover{color:var(--act)}}
.qa.is-target summary .qa__q{color:var(--act)}
html[data-mode="dark"] .qa.is-target summary .qa__q{color:var(--main2)}
mark{background:color-mix(in srgb,var(--lemon) 55%,transparent);color:inherit;border-radius:2px;padding:0 1px}
html[data-mode="light"] mark{background:#FFE58A}

.empty{padding:28px;border:1px dashed var(--tx-faint);border-radius:14px;color:var(--tx-dim)}
.empty p{margin:0}.empty p+p{margin-top:6px}
.empty__h{color:var(--tx);font-weight:700;font-size:17px}
.empty[hidden]{display:none}

/* 底部:直接问我们。2026-10-10:浅色模式下标题几乎看不见的 bug 和修法,见
   pd-v2-care.css 的同一条 .ask 规则(两处保持一致)——color:inherit 加浅色
   模式的浅底+粉紫光晕。 */
.ask{margin-top:clamp(48px,8vh,84px);padding:clamp(26px,4vw,48px);border-radius:14px;color:#FFF7F1;
  border:1px solid rgba(255,247,241,.14);
  background:radial-gradient(60% 90% at 0% 100%,rgba(254,3,115,.36),transparent 70%),
             radial-gradient(60% 90% at 100% 100%,rgba(197,39,243,.36),transparent 70%),#1A1118;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.ask .cap{color:var(--main2)}
.ask h2{font-size:clamp(26px,3vw,38px);font-weight:650;letter-spacing:-.02em;margin:2px 0 10px;color:inherit}
.ask p{margin:0;max-width:52ch;color:rgba(255,247,241,.76);line-height:1.6}
.ask__b{display:flex;gap:10px;flex-wrap:wrap}
.ask .pd-v2-action--2{border-color:rgba(255,247,241,.6);color:#FFF7F1}
@media (hover:hover) and (pointer:fine){
  .ask .pd-v2-action--2:hover{background:#FFF7F1;color:#262026;border-color:#FFF7F1}
}
.ask .pd-v2-action:focus-visible{outline:2px solid #FFF7F1;outline-offset:3px}
html[data-mode="light"] .ask{color:var(--tx);border-color:var(--line);
  background:radial-gradient(60% 90% at 0% 100%,rgba(254,3,115,.14),transparent 70%),
             radial-gradient(60% 90% at 100% 100%,rgba(197,39,243,.14),transparent 70%),var(--surface)}
html[data-mode="light"] .ask .cap{color:var(--act)}
html[data-mode="light"] .ask p{color:var(--tx-dim)}
html[data-mode="light"] .ask .pd-v2-action--2{border-color:var(--tx-faint);color:var(--tx)}
@media (hover:hover) and (pointer:fine){
  html[data-mode="light"] .ask .pd-v2-action--2:hover{background:var(--raise);color:var(--tx);border-color:var(--tx)}
}
html[data-mode="light"] .ask .pd-v2-action:focus-visible{outline-color:var(--act)}