/* Question cards (owner, 20/10/2026): one numbered card per question, so a missed one is easy to find on a phone. */
.form[data-questions] { counter-reset: q; }
.q { margin: var(--s3) 0 0; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--white); min-width: 0; scroll-margin-top: calc(var(--header-h) + var(--s4)); }
.q > input[type="number"], .q > select { display: block; width: 100%; max-width: 320px; margin-top: 0; }
.q__title { display: block; float: left; width: 100%; margin: 0 0 var(--s3); padding: 0; font-size: 18px; line-height: 26px; font-weight: 600; text-wrap: balance; }
.q__title + * { clear: both; }
.form[data-questions] .q__title::before { counter-increment: q; content: counter(q); display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: var(--s2); border-radius: 50%; background: var(--blue-tint); color: var(--charcoal); font-size: 14px; line-height: 1; font-weight: 600; vertical-align: 2px; }
.q__hint { display: block; margin-top: var(--s1); font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text-2); }
.q__more { margin-top: var(--s3); }
.q__more summary { cursor: pointer; font-weight: 500; color: var(--blue-text); }
.q__more select { margin-top: var(--s2); max-width: 320px; }
.q .flag-slot:empty { display: none; }

/* A missed question: red edge and number, and a short line under it. */
.q[data-q-missed] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.form[data-questions] .q[data-q-missed] .q__title::before { background: var(--danger); color: var(--white); }
.q__missing { margin: var(--s2) 0 0; }

.q-summary { margin: var(--s3) 0 0; }
.q-summary ul { margin: var(--s2) 0 0; padding-left: var(--s4); }
.q-summary a { font-weight: 600; }

/* "2 of 3 answered", in the sticky bar on phones and beside the buttons on wider screens. */
.q-count { margin: 0 auto 0 0; align-self: center; font-size: 14px; line-height: 20px; color: var(--text-2); }
@media (max-width: 767px) {
  .action-bar:has(.q-count) { flex-wrap: wrap; }
  .action-bar .q-count { flex: 1 1 100%; margin: 0; }
}

/* In a card the title and messages take the full width, and the answers sit one per row on a phone. */
.q > .q__title, .q > .field-error, .q > .flag-slot { grid-column: 1 / -1; }
.page--step .q.choices { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.page--step .q.choices--pills { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.page--step #q-systems { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }