/* v7 FAQ (#faq, S10), paper. Overrides the old .faq rules in zh.css (not edited) from inside #faq.
   Tokens and primitives only (docs/11-design-system.md "v7 · 测试报告").
   Phones: WhatsApp link right under the H2 (top). Desktop: .ds-split, the head column is sticky (ds.css), so the link stays pinned. */

#faq .ds-h2 .l { display: block; }
#faq .ds-split { gap: var(--ds-s6); }

/* WhatsApp: a real tap target (48px), neutral, no brand green */
#faq .fq-more { display: grid; justify-items: start; gap: var(--ds-s2); margin: var(--ds-s5) 0 0; }
#faq .fq-more-k { font: 400 var(--ds-fs-small)/1.5 var(--ds-zh); color: var(--ds-mute); }
#faq .fq-wa { display: inline-flex; align-items: center; gap: var(--ds-s2); min-height: 48px; padding: 0 var(--ds-s4); border-radius: var(--ds-r-s);
  background: var(--ds-white); box-shadow: inset 0 0 0 1.5px var(--ds-line-strong); font: 700 15px/1.3 var(--ds-zh); color: var(--ds-text); text-decoration: none;
  transition: background var(--ds-t1) var(--ds-ease); }
#faq .fq-wa:hover { background: var(--ds-paper); }
#faq .fq-wa:focus-visible { outline: 3px solid var(--ds-y-deep); outline-offset: 2px; }
#faq .fq-wa-ico { width: 18px; height: 18px; flex: none; }

/* accordion */
#faq .faq { min-width: 0; max-width: 760px; margin: 0; border-top: 1.5px solid var(--ds-line-strong); }
#faq .faq details { border-bottom: 1px solid var(--ds-line); }
#faq .faq summary { display: flex; align-items: center; min-height: 56px; padding: 14px 44px 14px 0; font: 700 17px/1.45 var(--ds-zh); color: var(--ds-text); word-break: keep-all; cursor: pointer; transition: none; }
#faq .faq summary::-webkit-details-marker { display: none; }
#faq .faq summary::after { content: ""; right: 8px; width: 14px; height: 14px; font: inherit;
  background: linear-gradient(var(--ds-text), var(--ds-text)) center / 14px 2px no-repeat, linear-gradient(var(--ds-text), var(--ds-text)) center / 2px 14px no-repeat;
  transition: transform var(--ds-t2) var(--ds-ease); }
#faq .faq details[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
#faq .faq summary:focus-visible { outline: 3px solid var(--ds-y-deep); outline-offset: 2px; border-radius: 4px; }
#faq .faq .a { max-width: 36em; padding: 0 44px var(--ds-s5) 0; font: 400 16px/1.7 var(--ds-zh); color: var(--ds-text-2); text-wrap: pretty; line-break: strict; }
#faq .a .dn { font-family: var(--ds-num); font-weight: 700; color: var(--ds-dn-t); }
#faq .a .up { font-family: var(--ds-num); font-weight: 700; color: var(--ds-up-t); }

/* #how-tested: the 4 numbers as a small data table */
#faq .fq-p { margin: 0 0 var(--ds-s4); }
#faq .fq-sub { font-size: var(--ds-fs-small); color: var(--ds-mute); }
#faq .fq-sub .num { font-family: var(--ds-num); font-weight: 700; color: var(--ds-text-2); }
#faq .fq-nums { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ds-line); }
#faq .fq-nums li { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: var(--ds-s4); padding: 10px 0; border-bottom: 1px solid var(--ds-line); line-height: 1.5; }
#faq .fq-k { grid-row: 1 / 3; padding-top: 3px; font: 700 var(--ds-fs-small)/1.4 var(--ds-zh); color: var(--ds-text); }
#faq .fq-nums b { font: 800 20px/1.3 var(--ds-num); font-stretch: 88%; font-variant-numeric: tabular-nums; color: var(--ds-text); }
#faq .fq-nums em { font-style: normal; font-size: var(--ds-fs-fine); color: var(--ds-mute); }
#faq .fq-fine { margin-top: var(--ds-s4); }
#faq .fq-fine .ds-tag { margin-right: var(--ds-s1); }

/* v9 mobile polish: answers use the full column on phones (the 44px icon lane only belongs to the question row) */
@media (max-width: 959px) {
  #faq .faq .a { padding-right: 0; }
}
@media (min-width: 960px) {
  #faq .ds-split { gap: var(--ds-s9); }
  #faq .faq summary { min-height: 64px; font-size: 18px; }
  #faq .faq .a { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  #faq .faq summary::after, #faq .fq-wa { transition: none; }
}