/* ALLCUT — question-and-answer pages (Product finder; the RPM calculator uses the same parts).
   data-mode="ask":    one question at a time in a card, "Your answers so far" beside it.
   data-mode="result": the answers become a list of rows (each one opens in place), the result sits beside it.
   static/js/qa-flow.js switches the mode and the `hidden` attributes; this file only sets layout and looks. */

.qa { --qa-pad: clamp(24px, 3vw, 40px); }
@media (max-width: 600px) { .qa { --qa-pad: 20px; } }
.qa [hidden] { display: none !important; }   /* grid and flex items would otherwise ignore `hidden` */

/* ───────────── layout ───────────── */
.qa__grid { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 380px); gap: 48px clamp(40px, 4.5vw, 72px); align-items: start; }
.qa[data-mode="result"] .qa__grid { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
@media (max-width: 1000px) {
  .qa[data-mode] .qa__grid { grid-template-columns: minmax(0, 1fr); }
  .qa[data-mode="result"] .qa__grid { row-gap: 20px; }   /* the result starts right under the "Your answers" bar */
}
.qa__main, .qa__side { min-width: 0; }
.qa[data-mode="ask"] .qa__main { padding: var(--qa-pad); background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--ink); }

/* result screen, wide and tall screens: the answers stay in view while you read the list */
@media (min-width: 1001px) and (min-height: 700px) {
  .qa[data-mode="result"] .qa__main {
    position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); max-height: calc(100dvh - var(--header-h) - 32px);
    overflow-y: auto; overscroll-behavior: contain; padding: 4px; margin: -4px;   /* room for the focus ring inside the scroll box */
  }
}

/* ───────────── count and progress ───────────── */
.qa-count { margin: 0 0 10px; font: 700 calc(15px * var(--fs))/1.3 var(--f-sans); color: var(--red-ink); }
.qa-progress { height: 4px; margin-bottom: 28px; background: var(--rule); overflow: hidden; }
.qa-progress__bar { display: block; height: 100%; background: var(--red); transform-origin: left center; transform: scaleX(0); }

/* ───────────── one question ───────────── */
.qa-form { min-width: 0; }
.qa[data-mode="ask"] .qa-item:not(.is-current) { display: none; }
.qa-item__ed { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }   /* fieldsets need min-width: 0 in flex and grid */
.qa-legend { display: block; width: 100%; padding: 0; margin: 0 0 12px; }
.qa-q { display: block; font-size: calc(clamp(26px, 2.6vw, 36px) * var(--fs)); font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.qa-q:focus, .qa-error:focus, .qa-ans-head__title:focus { outline: none; }   /* focus lands here from code, these are not controls */
.qa-hint { max-width: 56ch; margin: 0 0 10px; font-size: calc(16px * var(--fs)); line-height: 1.5; color: var(--ink-2); }
.qa-error { margin: 0 0 6px; padding: 10px 14px; border-left: 3px solid var(--red); background: var(--red-tint); font-weight: 700; }
.qa-note { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--red); background: var(--red-tint); font-size: calc(16px * var(--fs)); line-height: 1.5; }

.qa-nav { display: flex; gap: 12px; margin-top: 28px; }
.qa-nav .btn { min-height: 48px; }

/* ───────────── rows: used by "Your answers so far" and by the result screen ───────────── */
.qa-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name edit" "val edit"; column-gap: 16px; row-gap: 2px; align-items: center; padding: 12px 0; }
.qa-row__name { grid-area: name; font-size: calc(15.3px * var(--fs)); font-weight: 500; line-height: 1.35; color: var(--ink-2); }
.qa-row__val { grid-area: val; min-width: 0; font-size: calc(17px * var(--fs)); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.qa-row__flag { margin-left: 8px; font-size: calc(15px * var(--fs)); font-weight: 700; color: var(--red-ink); white-space: nowrap; }
.qa-row__note { display: block; font-size: calc(15.3px * var(--fs)); font-weight: 500; color: var(--ink-2); }
.qa-row__edit {
  grid-area: edit; display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--rule-2); border-radius: 0; background: transparent; color: var(--ink);
  font: 700 calc(15px * var(--fs))/1 var(--f-sans); transition: border-color .15s, background-color .15s;
}
.qa-row__edit:hover { border-color: var(--ink); background: var(--white); }
.qa-row__edit svg { width: 12px; height: 12px; flex: none; transition: transform .15s; }
.qa-row__edit[aria-expanded="true"] svg { transform: rotate(180deg); }

/* "Your answers so far" while asking */
.qa-sofar__title { margin: 0 0 12px; font-size: calc(22px * var(--fs)); font-weight: 800; line-height: 1.2; }
.qa-sofar__list { border-top: 1px solid var(--ink); }
.qa-sofar__list:empty { display: none; }
.qa-sofar__list > li { border-bottom: 1px solid var(--rule); }
.qa-sofar__empty { max-width: 34ch; }
.qa[data-mode="result"] .qa-sofar { display: none; }

/* ───────────── result screen: every question is a row that opens in place ───────────── */
.qa[data-mode="result"] .qa-form { border-top: 1px solid var(--ink); }
.qa[data-mode="result"] .qa-item { border-bottom: 1px solid var(--rule); }
.qa[data-mode="result"] .qa-item.is-off { display: none; }
.qa[data-mode="result"] .qa-item__sum { padding-left: 14px; }
.qa[data-mode="result"] .qa-item.is-open { box-shadow: inset 3px 0 0 var(--red); }
.qa[data-mode="result"] .qa-item__ed { padding: 4px 0 20px 14px; }
.qa[data-mode="result"] .qa-legend { height: 0; margin: 0; }
.qa[data-mode="result"] .qa-q {   /* the row already says what the question is; screen readers still get it as the group name */
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.qa-ans-head__title { margin: 0 0 12px; font-size: calc(22px * var(--fs)); font-weight: 800; line-height: 1.2; }
.qa-ans-head__from { margin: 0 0 12px; font-size: calc(15.3px * var(--fs)); font-weight: 500; color: var(--ink-2); }
.qa-ans-head__sum, .qa-ans-head__toggle { display: none; }
.qa-foot { margin-top: 20px; }

/* ───────────── one column (phones and tablets) ───────────── */
@media (max-width: 1000px) {
  /* Back / Next stay at the bottom of the screen while the question card is on screen */
  .qa-nav {
    position: sticky; bottom: 0; z-index: 5; margin: 24px calc(-1 * var(--qa-pad)) calc(-1 * var(--qa-pad)); padding: 12px var(--qa-pad);
    background: var(--white); border-top: 1px solid var(--rule);
  }
  .qa-nav [data-qa-back] { flex: 1 1 0; }
  .qa-nav [data-qa-next] { flex: 2 1 0; }
  .qa-nav [data-qa-back][hidden] + [data-qa-next] { flex: 1 1 100%; }

  /* result screen: a bar with the answers in one line; the list opens under it */
  .qa[data-mode="result"] .qa-ans-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px; background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--ink); }
  .qa[data-mode="result"] .qa-ans-head__title { margin: 0; font-size: calc(18px * var(--fs)); }
  .qa-ans-head__sum { display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(15.3px * var(--fs)); font-weight: 500; color: var(--ink-2); }
  .qa-ans-head__toggle { display: inline-flex; justify-self: start; min-height: 44px; margin-top: 8px; }
  .qa-ans-head__toggle svg { transition: transform .15s; }
  .qa-ans-head__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .qa-ans-head__from { margin: 8px 0 0; }
  .qa[data-mode="result"] .qa-form { display: none; }
  .qa[data-mode="result"] .qa-form.is-open { display: block; padding: 0 16px; background: var(--white); border: 1px solid var(--rule); border-top: 0; }
  .qa[data-mode="result"] .qa-item__sum { padding-left: 0; }
  .qa[data-mode="result"] .qa-item.is-open { box-shadow: none; }
  .qa[data-mode="result"] .qa-item__ed { padding-left: 0; }
  .qa[data-mode="result"] .qa-foot { padding-block: 4px; }
}

/* ───────────── before the script has run ───────────── */
/* a visitor with a link to an answer would see question 1 for a moment: keep it hidden until the script is ready (3 s at the most) */
html.qa-skip [data-qa]:not(.is-ready) { visibility: hidden; animation: qa-unhide 0s linear 3s forwards; }
@keyframes qa-unhide { to { visibility: visible; } }
/* no JavaScript: only the <noscript> text shows */
html:not(.js) .qa-top, html:not(.js) [data-qa-form], html:not(.js) .qa__side { display: none; }
html:not(.js) .qa__grid { grid-template-columns: minmax(0, 1fr); }