/* assets/qa.css · the one question-and-answer component (owner, 1 Nov 2026: questions open and close "like before,
   like on the AI Workspace page"). Imported by rivet.css; behaviour in assets/qa.js (loaded from the shared footer).
   Markup contract, the same everywhere (in-section questions and end-of-page FAQs):
     <div class="qa-list">
       <details class="qa"><summary class="qa__q">Question?</summary><div class="qa__a"><p>Answer.</p></div></details>
     </div>
   The look is the AIWS FAQ's, measured from /academy/ai-workspace-gtm-revenue-engineer: plain hairline rows 12px apart,
   the question 600 1.02rem/1.4 Plex Sans, a bare + that turns 45deg into × (cyan on dark, purple on light), the answer
   .92rem/1.6 pulled 4px under the question. qa.js animates the height both ways; without JS, or under reduced motion,
   the native open and close, nothing hidden.
   Grounds: light by default; dark on html[data-mode="dark"], body.gtm-dark, or any wrapper with data-ground="dark"
   (data-ground="light" brings a light band back on a dark page). --qa-accent overrides the + colour per page. */
.qa-list{
  --qa-line:#D1D1D9; --qa-ink:#000; --qa-soft:#4A4A68; --qa-mark:var(--qa-accent, #3B06D4);
  --qa-hover:#3B06D4; --qa-link:#3B06D4; --qa-focus:#3B06D4;
  display:grid; gap:12px; margin:clamp(32px,3.5vw,48px) 0 0; padding:0; max-inline-size:840px; min-inline-size:0;
}
html[data-mode="dark"] .qa-list, body.gtm-dark .qa-list, [data-ground="dark"] .qa-list, .qa-list[data-ground="dark"]{
  --qa-line:rgba(255,255,255,.13); --qa-ink:#fff; --qa-soft:rgba(255,255,255,.82); --qa-mark:var(--qa-accent, #4CF3FE);
  --qa-hover:#fff; --qa-link:#7B87FF; --qa-focus:#7B87FF;
}
[data-ground="light"] .qa-list, .qa-list[data-ground="light"]{
  --qa-line:#D1D1D9; --qa-ink:#000; --qa-soft:#4A4A68; --qa-mark:var(--qa-accent, #3B06D4);
  --qa-hover:#3B06D4; --qa-link:#3B06D4; --qa-focus:#3B06D4;
}
/* where it sits: first in its column, no top margin; beside a quote or in a course row it fills the column;
   after a centred paragraph it centres */
.qa-list:first-child{ margin-block-start:0; }
:is(.miniq__in, .pq-pair:not(.pq-pair--solo), .cl-row) > .qa-list{ max-inline-size:none; }
.wrap--faq > .qa-list{ margin-block-start:0; max-inline-size:none; }   /* the end-of-page FAQ: heading left, questions right */
:is(.center,.mx-auto) + .qa-list{ margin-inline:auto; }

/* the row (resets also beat the retired pages.css .qa card, which shares the class names) */
details.qa, .qa-list > details.qa{ margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
.qa-list > details.qa + details.qa{ border-block-start:1px solid var(--qa-line); }
.qa-list > details.qa:last-child{ border-block-end:1px solid var(--qa-line); }

/* the question */
details.qa > summary.qa__q{
  display:flex; align-items:center; justify-content:space-between; gap:16px; min-block-size:44px; inline-size:auto;
  margin:0; border:0; text-align:start; padding-block:17px; padding-inline:0 34px; cursor:pointer; list-style:none; background:none;
  font:600 1.02rem/1.4 var(--font-sans, "IBM Plex Sans", system-ui, sans-serif); letter-spacing:-.01em;
  color:var(--qa-ink); text-wrap:balance; -webkit-tap-highlight-color:transparent;
  transition:color var(--dur-quick, 200ms) var(--ease-standard, ease);
}
details.qa > summary.qa__q::-webkit-details-marker, details.qa > summary.qa__q::marker{ display:none; content:""; }
details.qa > summary.qa__q:hover{ color:var(--qa-hover); }
details.qa > summary.qa__q:focus{ outline:none; }
details.qa > summary.qa__q:focus-visible{ outline:3px solid var(--qa-focus); outline-offset:2px; border-radius:4px; }
/* the bare + that turns into × */
details.qa > summary.qa__q::after{
  content:"+"; flex:none; display:block; inline-size:auto; block-size:auto; margin:0; padding:0; border:0; border-radius:0; background:none;
  font:400 1.25rem/1 var(--font-sans, "IBM Plex Sans", system-ui, sans-serif); color:var(--qa-mark);
  transition:transform .25s cubic-bezier(.16,1,.3,1), color .2s ease;
}
details.qa[open]:not([data-qa="closing"]) > summary.qa__q::after,
details.qa[data-qa="opening"] > summary.qa__q::after{ transform:rotate(45deg); }

/* the answer */
details.qa > .qa__a{ margin-block-start:-4px; padding:0; padding-inline-end:34px; max-height:none; overflow:visible; transition:none; }
details.qa > .qa__a > *{ margin:0 0 10px; padding:0; max-width:none; }
details.qa > .qa__a > :last-child{ margin-block-end:0; padding-block-end:6px; }
details.qa > .qa__a, details.qa > .qa__a :is(p,li){ font-size:.92rem; line-height:1.6; color:var(--qa-soft); text-wrap:pretty; }
details.qa > .qa__a a{ color:var(--qa-link); text-decoration:underline; text-underline-offset:3px; }
details.qa > .qa__a :is(b,strong){ color:var(--qa-ink); }

@media (max-width:560px){
  details.qa > .qa__a, details.qa > .qa__a :is(p,li){ font-size:.95rem; line-height:1.55; }
}
:lang(ar) details.qa > summary.qa__q, :lang(ar) details.qa > summary.qa__q::after{ font-family:var(--font-arabic, "Almarai"), sans-serif; letter-spacing:0; }
:lang(ar) details.qa > summary.qa__q{ font-weight:700; }
@media (prefers-reduced-motion:reduce){
  details.qa > summary.qa__q, details.qa > summary.qa__q::after{ transition:none; }
}
@media print{
  details.qa > summary.qa__q::after{ display:none; }
}