/* 12-faq — DESKTOP (1024 px and wider). Owner: END-D (build 32). Scope: #faq .v-desktop
   White section. The ten questions (BRIEF-B32 §4) are raised white rows sitting directly on the white section
   (the app's row style: radius 16, a clear --edge, the lit top edge, --depth-1), no wrapper panel (brief §14). Open row = the --selected fill, the tint edge,
   --depth-2, and the chevron button turns blue.
   js/12-faq.desktop.js adds the smooth height animation (native <details> still works without it). */

/* spacing (brief §15): set centrally; Pro above is the same white → --section-y-tight on top */
#faq .v-desktop { background: #fff; padding-top: var(--section-y-tight); padding-bottom: var(--section-y); }

#faq .v-desktop .fd-head { text-align: center; }

/* ---- the rows, straight on the white section (no wrapper box) ---- */
#faq .v-desktop .fd-list { position: relative; display: grid; gap: 12px; max-width: 820px; margin: 56px auto 0; }

/* ---- a question row ---- */
#faq .v-desktop .fd-item {
  overflow: hidden;
  background: #fff; border: 1px solid var(--edge); border-radius: 16px;
  box-shadow: var(--highlight), var(--depth-1);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease), background-color .28s var(--ease);
}
@media (hover: hover) {
  #faq .v-desktop .fd-item:hover { transform: translateY(-2px); border-color: var(--edge-strong); box-shadow: var(--highlight), var(--depth-hover); }
}
/* visually open (the js adds .fd-closing while a row folds away, so it looks closed at once) */
#faq .v-desktop .fd-item[open]:not(.fd-closing) { background: var(--selected); border-color: var(--edge-tint); box-shadow: var(--highlight), var(--depth-2); }

#faq .v-desktop .fd-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 72px; padding: 18px 20px 18px 28px;
  list-style: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  border-radius: 15px;
}
#faq .v-desktop .fd-item summary::-webkit-details-marker { display: none; }
#faq .v-desktop .fd-item summary::marker { content: ""; }
#faq .v-desktop .fd-q { font-size: 19px; line-height: 1.4; font-weight: 500; letter-spacing: -0.008em; color: var(--ink); }

/* the chevron sits in a small round button: soft at rest, tinted on hover, blue when open */
#faq .v-desktop .fd-ic {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--soft); border: 1px solid var(--edge); color: var(--secondary);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
#faq .v-desktop .fd-chev { width: 20px; height: 20px; transition: transform .45s var(--ease); }
@media (hover: hover) {
  #faq .v-desktop .fd-item:hover .fd-ic { background: var(--tint); border-color: var(--edge-tint); color: var(--accent-edge); }
}
#faq .v-desktop .fd-item[open]:not(.fd-closing) .fd-ic { background: var(--accent); border-color: var(--accent); color: #fff; }
#faq .v-desktop .fd-item[open]:not(.fd-closing) .fd-chev { transform: rotate(180deg); }

/* keyboard focus rings the whole row */
#faq .v-desktop .fd-item summary:focus-visible { outline: none; }
#faq .v-desktop .fd-item:has(summary:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

#faq .v-desktop .fd-a { padding: 0 76px 26px 28px; }
#faq .v-desktop .fd-a p { max-width: 660px; font-size: 17px; line-height: 1.65; color: var(--body); text-wrap: pretty; }

/* ==== ONE TYPE SCALE (founder 30 Sep: "in some places size is big, in some size is small"; the hero is the reference) ====
   Section h2 44/500/1.08/-0.03em at every desktop width · lede 19/350/1.5 in --body · in-section titles 26/500 · body and lists 17/350/1.5 (scaled down 30 Sep: "reduce the size little").
   Kept identical in every desktop section file; RT-LOOP-D. */
#faq .v-desktop .fd-head .h2 { font-size: 44px; font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; }
#faq .v-desktop .fd-q { font-size: 17px; line-height: 1.4; font-weight: 500; }
#faq .v-desktop .fd-a p { font-size: 17px; font-weight: 350; line-height: 1.5; }

/* ==== CUTE PASS (founder 30 Sep: "reduce the size little and make the entire site cute") · RT-LOOP-D ====
   Rounder shapes, the app's pastel tints instead of lines, tiny playful motion on the art (never under reduced motion). */
#faq .v-desktop .fd-list { max-width: 760px; gap: 10px; }
#faq .v-desktop .fd-item { border-radius: 22px; }
#faq .v-desktop .fd-item summary { border-radius: 21px; min-height: 66px; }