/* =============================================================
   QMerse — p-faq.css (FAQ page only; loads after site.css)
   One rail (search, count, open all, topics) beside the questions; the answers keep their tables,
   flows and callouts, set as plain ruled text.
   ============================================================= */

.fq-hero { padding: clamp(40px, 5vw, 72px) 0 clamp(40px, 5vw, 64px); }
html[data-theme="light"] .fq-hero { border-bottom: 0; }
html[data-theme="light"] .faqp[data-tone] { --tp-bg: #ffffff; }
.faqp.section { padding-top: clamp(32px, 4vw, 56px); }
/* dark palette: the questions sit on midnight; the closing band stays the one paper band */
html[data-theme="dark"] .faqp[data-tone] { --tp-field: var(--ink-2); }

.fq-in { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }

/* ---- The rail: search, count and open all, then the topics ---- */
.fq-side { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 22px; }
.fq-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; }
.fq-search { grid-column: 1 / -1; }
.fq-search input { width: 100%; padding: 11px 14px 11px 40px; border: 1px solid var(--tp-line); border-radius: 999px; color: var(--tp-ink);
  background: var(--tp-field, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%23727a7c' stroke-width='1.6'/%3E%3Cpath d='M11 11l3.5 3.5' stroke='%23727a7c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 14px center / 15px 15px;
  font: 400 15px/1.4 var(--font-sans); transition: border-color 0.2s, box-shadow 0.2s; }
.fq-search input::placeholder { color: var(--tp-dim); opacity: 1; }
.fq-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 3l8 8M11 3l-8 8' stroke='%23727a7c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.fq-search input:focus { outline: none; border-color: var(--tp-acc); box-shadow: 0 0 0 3px rgba(var(--acc-rgb),0.22); }
.fq-count { font-size: 13.5px; color: var(--tp-dim); }
.fq-all { justify-self: end; padding: 2px 0; border-bottom: 1px solid var(--tp-line); font-size: 13.5px; font-weight: 500; color: var(--tp-ink); transition: border-color 0.25s, color 0.25s; }
.fq-all:hover { border-color: var(--tp-acc); color: var(--tp-acc); }
html:not(.js) .fq-tools { display: none; }
.fq-nav { display: flex; flex-direction: column; gap: 2px; }
.fq-nav a { position: relative; padding: 7px 0; font-size: 16px; line-height: 1.35; color: var(--tp-mute); transition: color 0.25s; }
.fq-nav a::before { content: ''; position: absolute; inset-inline-start: -14px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--tp-acc); transform: scaleY(0); transition: transform 0.35s var(--ease); }
.fq-nav a:hover { color: var(--tp-ink); }
.fq-nav a.on { color: var(--tp-ink); }
.fq-nav a.on::before { transform: none; }
.fq-nav a[hidden] { display: none; }
.fq-none { margin-bottom: 18px; color: var(--tp-mute); }
.fq-none a, .fq-end a { color: var(--tp-acc); border-bottom: 1px solid currentColor; }
.fq-end { margin-top: 40px; font-size: 16px; line-height: 1.6; color: var(--tp-mute); }

/* ---- Groups and questions ---- */
.fq-group { scroll-margin-top: 100px; }
.fq-group + .fq-group { margin-top: clamp(40px, 5vw, 60px); }
.fq-group[hidden] { display: none; }
.fq-gt { margin-bottom: 10px; font-size: clamp(26px, 2.6vw, 36px); }
.faqp details { scroll-margin-top: 100px; }
.faqp details[hidden] { display: none; }

/* ---- The answers: an article measure; tables, flows and figures use the full column ---- */
.faqp .faq-a { padding-inline-end: 0; max-width: none; font-size: 17px; padding-bottom: 28px; }
.faqp .faq-a > :is(p, ul, .qflow) { max-width: 40em; }
.faqp .faq-a > * + * { margin-top: 12px; }
.faqp .faq-a strong { color: var(--tp-ink); font-weight: 500; }
.faqp .faq-a ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; }
.faqp .faq-a li { position: relative; padding-inline-start: 18px; font-size: 17px; line-height: 1.5; color: var(--tp-mute); }
.faqp .faq-a li::before { content: ''; position: absolute; inset-inline-start: 0; top: 0.75em; width: 8px; height: 1px; background: var(--tp-dim); }
/* comparison tables as ruled rows */
.fq-table { margin: 20px 0; }
.fq-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.5; }
.fq-t th, .fq-t td { padding: 13px 20px 13px 0; text-align: start; vertical-align: top; border-top: 1px solid var(--tp-line); color: var(--tp-mute); font-weight: 400; }
.fq-t thead th, .fq-t thead td { border-top: 0; padding-bottom: 10px; font-size: 14px; font-weight: 500; color: var(--tp-dim); }
.fq-t thead th:last-child, .fq-t td:last-child { color: var(--tp-ink); }
.fq-t tbody th { width: 24%; font-weight: 500; color: var(--tp-ink); }
.fq-t tbody tr:last-child > * { border-bottom: 1px solid var(--tp-line); }
/* an example flow: one line of plain steps */
.qflow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 14px 0; }
.qflow span { font-size: 17px; color: var(--tp-ink); }
.qflow em { font-style: normal; color: var(--tp-dim); }
.faqp .faq-a .fq-callout { margin-top: 20px; }
.fq-callout { font-family: var(--font-serif); font-size: clamp(22px, 2vw, 27px); line-height: 1.3; letter-spacing: -0.01em; color: var(--tp-ink); max-width: 26em; }
/* figures: the recording at full width; the palette beside the list of blocks */
.fq-fig { margin: 22px 0 4px; }
.fq-fig img, .fq-fig video { display: block; width: 100%; height: auto; border: 1px solid var(--tp-line); border-radius: 10px; }
.fq-fig video { background: #0b1017; }
.faqp .faq-a.fq-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 48px; align-items: start; }
.fq-split > * { grid-column: 1; }
.fq-split > .fq-fig { grid-column: 2; grid-row: 1 / span 4; margin: 4px 0 0; }
.fq-split > .fq-fig img { aspect-ratio: 606 / 980; object-fit: cover; object-position: top; }
.faqp .faq-a.fq-split ul { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 980px) {
  .fq-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .fq-side { position: static; gap: 12px; }
  .fq-nav { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
  .fq-nav a { padding: 6px 0; font-size: 15px; }
  .fq-nav a::before { display: none; }
  .fq-nav a.on { box-shadow: inset 0 -2px 0 var(--tp-acc); }
  .faqp .faq-a.fq-split { grid-template-columns: minmax(0, 1fr); }
  .fq-split > .fq-fig { grid-column: 1; grid-row: auto; max-width: 340px; margin-top: 18px; }
}
@media (max-width: 640px) {
  .faqp .faq-a ul { grid-template-columns: minmax(0, 1fr); }
  .fq-t, .fq-t thead, .fq-t tbody, .fq-t tr, .fq-t th, .fq-t td { display: block; }
  .fq-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fq-t tbody { border-bottom: 1px solid var(--tp-line); }
  .fq-t tbody tr { border-top: 1px solid var(--tp-line); }
  .fq-t tbody tr:last-child > * { border-bottom: 0; }
  .fq-t tbody th { width: auto; border-top: 0; padding: 14px 0 4px; }
  .fq-t td { border-top: 0; padding: 2px 0; }
  .fq-t td:last-child { padding-bottom: 14px; }
  .fq-t td::before { content: attr(data-label) ": "; font-weight: 500; color: var(--tp-ink); }
}
@media (prefers-reduced-motion: reduce) { .fq-nav a, .fq-nav a::before { transition: none; } }