/* Rahmah identity, Phase 3 (b): the questionnaire (#screen-questions) and the chapter-complete screen (#screen-chapter-complete).
 * Presentation only. Source: docs/design/mockups/questionnaire/questionnaire.html (approved by the owner, 2026-10-10)
 * and the handoff pack (docs/bym/rahmah). Corners: 4px controls, 8px media, otherwise square.
 *
 * SCOPE: two screens. Every rule starts with #screen-questions or #screen-chapter-complete.
 * TO REVERT: delete the one <link href="rahmah-questionnaire.css"> in index.html's <head>. No markup was changed.
 *
 * Tokens come from bym/styles/rahmah.css (--bym-*). The font alias "BYM Afacad" is declared in rahmah-landing.css.
 * Behaviour is untouched: the questions still render as one scrolling chapter, answers/tags/notes work exactly as before.
 */
:is(#screen-questions, #screen-chapter-complete) {
  --font-display: "BYM Afacad", "Afacad Flux", "Avenir Next", Arial, sans-serif;
  --font-body: var(--font-display); --font-ui: var(--font-display); --font-mono: var(--font-display);
  --r-sm: 4px; --r-md: 4px; --r-lg: 8px; --r-pill: 4px;
  --line: var(--bym-rule); --line-soft: var(--bym-rule); --line-faint: var(--bym-rule);
  --text: var(--bym-text); --text-body: var(--bym-text); --muted: var(--bym-text-muted); --muted-2: var(--bym-text-muted); --faint: var(--bym-text-muted);
  --surface: var(--bym-surface); --surface-2: var(--bym-surface-soft); --bg: var(--bym-canvas);
  font-family: var(--font-display); font-size: var(--bym-text-base); line-height: 1.55; color: var(--bym-text);
}
:is(#screen-questions, #screen-chapter-complete) *, :is(#screen-questions, #screen-chapter-complete) *::before, :is(#screen-questions, #screen-chapter-complete) *::after { box-shadow: none !important; text-shadow: none !important; }
:is(#screen-questions, #screen-chapter-complete) :where(a, button, input, textarea, [tabindex], .ch-step):focus-visible { outline: 3px solid var(--bym-focus); outline-offset: 3px; }

/* ---- Top bar: Fig ---- */
#screen-questions .topbar { background: var(--bym-primary); border-bottom: 0; padding: 8px 16px; min-height: 56px; }
#screen-questions .topbar-title { color: var(--bym-on-primary); font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
#screen-questions .topbar-progress, #screen-questions #topbar-code { color: var(--bym-on-primary) !important; opacity: .9; font-size: .9375rem; }
#screen-questions .save-indicator { color: var(--bym-on-primary); opacity: .9; font-size: .9375rem; }
#screen-questions .topbar-right { gap: 8px; }
#screen-questions .topnav-link, #screen-questions .topbar-right .leave-link { color: var(--bym-on-primary); font-size: .9375rem; min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; text-decoration: none; }
#screen-questions .topnav-link:hover { text-decoration: underline; text-underline-offset: 4px; }
#screen-questions .topbar .btn, #screen-questions .topbar .btn-outline { min-height: 44px; padding: 0 14px; border-radius: 4px; background: transparent; color: var(--bym-on-primary); border: 1px solid rgba(251,245,237,.55); font-family: var(--font-display); font-weight: 500; font-size: .9375rem; }
#screen-questions #topbar-user { background: rgba(251,245,237,.1) !important; border: 1px solid rgba(251,245,237,.4) !important; border-radius: 4px !important; color: var(--bym-on-primary) !important; min-height: 44px; }
#screen-questions #topbar-user, #screen-questions #topbar-user * { color: var(--bym-on-primary) !important; }
#screen-questions #topbar-profile-meter { background: rgba(251,245,237,.12) !important; border-radius: 4px !important; color: var(--bym-on-primary) !important; min-height: 44px; }
#screen-questions .account-menu-dropdown { background: var(--bym-surface); border: 1px solid var(--bym-rule); border-radius: 4px; }
#screen-questions .account-menu-dropdown .topnav-link, #screen-questions .account-menu-dropdown .leave-link { color: var(--bym-primary); }

/* ---- Notices above the questions ---- */
#screen-questions #guided-path-banner { background: var(--bym-surface-soft); border-bottom: 1px solid var(--bym-rule); }
#screen-questions .guided-path-step { color: var(--bym-text-muted); font-size: .875rem; }
#screen-questions .guided-path-step.done { color: var(--bym-success); }
#screen-questions .guided-path-step.active { color: var(--bym-primary); }
#screen-questions .guided-path-desc { color: var(--bym-text); font-size: 1rem; }
#screen-questions .video-reminder-banner { background: var(--bym-surface-soft); border: 0; border-inline-start: 3px solid var(--bym-human); border-radius: 0; font-size: 1rem; color: var(--bym-text); }
#screen-questions .video-reminder-banner strong { color: var(--bym-primary); }
#screen-questions .video-reminder-banner a.vrb-cta { color: var(--bym-primary); font-weight: 600; }
#screen-questions #section-tip { background: var(--bym-surface-soft) !important; border-bottom: 0 !important; border-inline-start: 3px solid var(--bym-primary); padding: 12px 16px !important; font-size: 1rem !important; color: var(--bym-text) !important; text-align: left !important; margin: 16px 16px 8px; }
#screen-questions .pdf-actions-bar { justify-content: flex-start; background: transparent; border-bottom: 0; padding: 8px 16px; }
#screen-questions .pdf-btn { min-height: 44px; padding: 0 16px; border: 1px solid var(--bym-primary); border-radius: 4px; background: transparent; color: var(--bym-primary); font-family: var(--font-display); font-weight: 600; font-size: .9375rem; }
#screen-questions .pdf-btn:hover { background: var(--bym-surface-soft); }
#screen-questions .pdf-btn-hint { color: var(--bym-text-muted); font-size: .875rem; }

/* ---- Chapter list (phone: a scrolling row; desktop: a left rail) ---- */
#screen-questions .tabs-wrap { background: var(--bym-surface); top: 56px; border-bottom: 1px solid var(--bym-rule); }
#screen-questions .tabs { background: var(--bym-surface); border-bottom: 0; padding: 10px 12px; gap: 8px; }
#screen-questions .tabs-fade-left { background: linear-gradient(to right, var(--bym-surface), rgba(255,250,245,0)); }
#screen-questions .tabs-fade-right { background: linear-gradient(to left, var(--bym-surface), rgba(255,250,245,0)); }
#screen-questions .tabs-scroll-track { background: var(--bym-rule); }
#screen-questions .tabs-scroll-thumb { background: var(--bym-primary); border-radius: 0; }
#screen-questions .tabs-scroll-hint { color: var(--bym-primary); }
#screen-questions .ch-step { background: var(--bym-surface); border: 1px solid var(--bym-rule); border-radius: 4px; min-height: 52px; padding: 8px 12px; min-width: 190px; transform: none; }
#screen-questions .ch-step:hover { border-color: var(--bym-primary); transform: none; }
#screen-questions .ch-step.ch-active, #screen-questions .ch-step.ch-active.ch-mine-done, #screen-questions .ch-step.ch-active.ch-both-done { background: var(--bym-surface-soft); border: 2px solid var(--bym-primary); }
#screen-questions .ch-step.ch-mine-done, #screen-questions .ch-step.ch-both-done { background: var(--bym-surface); border-color: var(--bym-rule); }
#screen-questions .ch-circle { background: #fff; border: 1.5px solid var(--bym-border); color: var(--bym-text-muted); font-family: var(--font-display); font-weight: 600; }
#screen-questions .ch-circle-mine { background: var(--bym-surface-soft); border-color: var(--bym-primary); color: var(--bym-primary); }
#screen-questions .ch-circle-both { background: var(--bym-primary); border-color: var(--bym-primary); color: var(--bym-on-primary); }
#screen-questions .ch-active .ch-circle:not(.ch-circle-mine):not(.ch-circle-both) { border-color: var(--bym-primary); color: var(--bym-primary); }
#screen-questions .ch-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--bym-text); white-space: normal; }
#screen-questions .ch-active .ch-title { color: var(--bym-primary); }
#screen-questions .ch-tally { font-family: var(--font-display); font-size: .875rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--bym-text-muted); white-space: normal; }
#screen-questions .ch-cleared-note, #screen-questions .ch-new-note { font-family: var(--font-display); font-size: .875rem; color: var(--bym-human-text); }
#screen-questions .ch-stage2-badge { font-family: var(--font-display); background: var(--bym-surface-soft); color: var(--bym-primary); border-radius: 4px; text-transform: none; letter-spacing: 0; font-size: .8125rem; }
#screen-questions .ch-connector { background: var(--bym-rule); }

@media (min-width: 861px) {
  #screen-questions.active { display: grid; grid-template-columns: 288px minmax(0, 1fr); align-items: start; }
  #screen-questions > * { grid-column: 2; min-width: 0; }
  #screen-questions > .topbar { grid-column: 1 / -1; }
  #screen-questions > .tabs-wrap { grid-column: 1; grid-row: 2 / span 12; position: sticky; top: 56px; max-height: calc(100vh - 56px); overflow-y: auto; border-bottom: 0; border-right: 1px solid var(--bym-rule); align-self: stretch; }
  #screen-questions .tabs { overflow: visible; padding: 20px 12px; display: block; }
  #screen-questions .tabs-fade, #screen-questions .tabs-scroll-hint, #screen-questions .tabs-scroll-track { display: none; }
  #screen-questions .chapter-timeline { flex-direction: column; align-items: stretch; min-width: 0; gap: 2px; }
  #screen-questions .ch-step { min-width: 0; width: 100%; border: 0; border-inline-start: 3px solid transparent; border-radius: 0; background: transparent; padding: 8px 10px; }
  #screen-questions .ch-step:hover { background: var(--bym-surface-soft); }
  #screen-questions .ch-step.ch-active, #screen-questions .ch-step.ch-active.ch-mine-done, #screen-questions .ch-step.ch-active.ch-both-done { background: var(--bym-surface-soft); border: 0; border-inline-start: 3px solid var(--bym-primary); }
  #screen-questions .ch-step.ch-mine-done, #screen-questions .ch-step.ch-both-done { background: transparent; border: 0; border-inline-start: 3px solid transparent; }
  #screen-questions .ch-connector { display: none; }
  #screen-questions .container-wide { max-width: 760px; margin: 0; padding: 24px clamp(16px, 4vw, 48px) 120px; }
}

/* ---- Questions ---- */
#screen-questions .container-wide { padding-bottom: 120px; }
#screen-questions .q-card, #screen-practice-question .q-card { background: var(--bym-surface); border: 1px solid var(--bym-rule); border-radius: 0; padding: 24px; margin-bottom: 20px; }
#screen-questions .q-card.q-unanswered, #screen-practice-question .q-card.q-unanswered { border: 1px solid var(--bym-rule) !important; border-inline-start: 4px solid var(--bym-error) !important; }
#screen-questions .q-number, #screen-practice-question .q-number { font-family: var(--font-display); font-size: .875rem; font-weight: 600; letter-spacing: .08em; color: var(--bym-human-text); margin-bottom: 8px; }
#screen-questions .q-text, #screen-practice-question .q-text { font-family: var(--font-display); font-size: var(--bym-text-lg); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: var(--bym-primary); margin-bottom: 8px; }
#screen-questions .q-note { font-style: normal; font-size: 1rem; color: var(--bym-text-muted); margin-bottom: 16px; }
#screen-questions .tag-help-btn, #screen-practice-question .tag-help-btn { width: 28px; height: 28px; border: 1px solid var(--bym-border); background: transparent; color: var(--bym-primary); font-family: var(--font-display); font-size: .875rem; }
#screen-questions .q-essential-row, #screen-practice-question .q-essential-row { margin-bottom: 16px; }
#screen-questions .essential-toggle, #screen-practice-question .essential-toggle { min-height: 44px; border: 1px solid var(--bym-primary); border-radius: 4px; background: transparent; color: var(--bym-primary); font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
#screen-questions .essential-toggle:hover, #screen-practice-question .essential-toggle:hover { background: var(--bym-surface-soft); }
#screen-questions .essential-toggle.marked, #screen-practice-question .essential-toggle.marked { background: var(--bym-primary); border-color: var(--bym-primary); color: var(--bym-on-primary); }
#screen-questions .essential-note { font-style: normal; font-size: .9375rem; color: var(--bym-text-muted); }
#screen-questions .essential-note b { color: var(--bym-primary); }

#screen-questions .q-options, #screen-practice-question .q-options { flex-direction: column; flex-wrap: nowrap; gap: 14px; }
#screen-questions .q-opt, #screen-practice-question .q-opt { display: flex; flex-direction: column; gap: 6px; width: 100%; }
#screen-questions .q-opt-btn, #screen-practice-question .q-opt-btn { width: 100%; min-height: 56px; padding: 12px 16px; border: 1px solid var(--bym-border); border-radius: 4px; background: var(--bym-surface); color: var(--bym-text); font-family: var(--font-display); font-size: var(--bym-text-base); font-weight: 500; line-height: 1.35; transform: none; text-align: left; }
#screen-questions .q-opt-btn:hover, #screen-practice-question .q-opt-btn:hover { border-color: var(--bym-primary); background: var(--bym-surface); transform: none; }
#screen-questions .q-opt-btn:active, #screen-practice-question .q-opt-btn:active { transform: none; }
#screen-questions .q-opt-btn.selected, #screen-questions .q-opt-btn.selected:hover, #screen-practice-question .q-opt-btn.selected, #screen-practice-question .q-opt-btn.selected:hover { background: var(--bym-primary); border-color: var(--bym-primary); color: var(--bym-on-primary); }
#screen-questions .q-rank-move { color: inherit; }
#screen-questions .opt-detail-toggle { color: var(--bym-primary); font-size: .9375rem; text-decoration: underline; text-underline-offset: 4px; min-height: 28px; }
#screen-questions .opt-detail-body { background: var(--bym-surface-soft); border: 0; border-inline-start: 3px solid var(--bym-primary); border-radius: 0; color: var(--bym-text); font-size: 1rem; }
#screen-questions .opt-default-badge { background: var(--bym-surface-soft); color: var(--bym-primary); border-radius: 4px; font-family: var(--font-display); font-size: .875rem; text-transform: none; letter-spacing: 0; }

/* Tags: one row of three small, readable buttons under each option */
#screen-questions .tag-row, #screen-practice-question .tag-row { justify-content: flex-start; gap: 8px; }
#screen-questions .tag-btn, #screen-practice-question .tag-btn { min-height: 44px; padding: 0 14px; border-radius: 4px; font-family: var(--font-display); font-size: .9375rem; font-weight: 500; letter-spacing: 0; text-transform: none; border: 1px solid var(--bym-border); background: var(--bym-surface); color: var(--bym-text); }
#screen-questions .tag-btn.red, #screen-practice-question .tag-btn.red { background: var(--bym-error-surface); color: var(--bym-error); border-color: #d9a9a9; }
#screen-questions .tag-btn.amber, #screen-practice-question .tag-btn.amber { background: #f6ede2; color: #7a5530; border-color: #d9c3a6; }
#screen-questions .tag-btn.cherry, #screen-practice-question .tag-btn.cherry { background: #f6e6e4; color: #8c4a47; border-color: #d9b3b0; }
#screen-questions .tag-btn:hover, #screen-practice-question .tag-btn:hover { border-color: var(--bym-primary); }
#screen-questions .tag-btn.red.active, #screen-practice-question .tag-btn.red.active { background: var(--bym-error); border-color: var(--bym-error); color: #fff; font-weight: 600; }
#screen-questions .tag-btn.amber.active, #screen-practice-question .tag-btn.amber.active { background: #7a5530; border-color: #7a5530; color: #fff; font-weight: 600; }
#screen-questions .tag-btn.cherry.active, #screen-practice-question .tag-btn.cherry.active { background: #8c4a47; border-color: #8c4a47; color: #fff; font-weight: 600; }
#screen-questions .tag-row-note, #screen-practice-question .tag-row-note { font-style: normal; font-size: .875rem; text-align: left; color: var(--bym-text-muted); margin: 0; }

/* Notes and video */
#screen-questions .q-note-label { color: var(--bym-primary); font-family: var(--font-display); font-size: 1rem; font-weight: 500; min-height: 44px; display: flex; align-items: center; gap: 6px; }
#screen-questions .q-note-textarea { min-height: 96px; border: 1px solid var(--bym-border); border-radius: 4px; background: #fff; color: var(--bym-text); font-family: var(--font-display); font-size: 1rem; }
#screen-questions .q-note-textarea:focus { border-color: var(--bym-primary); }
#screen-questions .q-video-wrap { border-top-color: var(--bym-rule) !important; }
#screen-questions .q-card .btn, #screen-questions .q-card .btn-outline { min-height: 44px; border-radius: 4px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; background-image: none; transform: none; }
#screen-questions .q-card .btn-outline { background: transparent; color: var(--bym-primary); border: 1px solid var(--bym-primary); }

/* Next / back at the end of a chapter */
#screen-questions .chapter-nav { border-top: 1px solid var(--bym-rule); }
#screen-questions .chapter-nav .btn { min-height: 48px; padding: 0 24px; border-radius: 4px; font-family: var(--font-display); font-size: 1rem; font-weight: 600; transform: none; background-image: none; }
#screen-questions .chapter-nav .btn.btn-outline { background: transparent; color: var(--bym-primary); border: 1px solid var(--bym-primary); }
#screen-questions .chapter-nav .btn.btn-outline:hover { background: var(--bym-surface-soft); border-color: var(--bym-primary); }
#screen-questions .chapter-nav .btn.btn-gold { background: var(--bym-primary); color: var(--bym-on-primary); border: 1px solid var(--bym-primary); }
#screen-questions .chapter-nav .btn.btn-gold:hover { background: #30222e; transform: none; }

/* Toast */
#screen-questions .chapter-complete-toast { background: var(--bym-primary); color: var(--bym-on-primary); border-radius: 4px; font-family: var(--font-display); }
#screen-questions .chapter-complete-toast .cct-check { color: var(--bym-on-primary); }

/* Phone: sticky progress bar with Next Chapter */
@media (max-width: 860px) {
  #screen-questions #section-tip { margin: 12px 12px 4px; }
  #screen-questions .container-wide { padding: 16px 12px 130px; }
  #screen-questions .q-card { padding: 16px; }
  #screen-questions .mobile-progress-bar { background: var(--bym-surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid var(--bym-rule); }
  #screen-questions .mpb-progress-label { font-family: var(--font-display); font-size: .9375rem; text-transform: none; letter-spacing: 0; color: var(--bym-text); font-weight: 500; }
  #screen-questions .mpb-progress-track { height: 6px; border-radius: 0; background: var(--bym-rule); }
  #screen-questions .mpb-progress-fill { border-radius: 0; background: var(--bym-primary); }
  #screen-questions .mpb-next-btn { min-height: 48px; padding: 0 20px; border-radius: 4px; background: var(--bym-primary); color: var(--bym-on-primary); font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
  #screen-questions .q-opt-btn { padding: 12px 14px; font-size: 1.0625rem; }
  #screen-questions .chapter-nav .btn { width: 100%; }
}
/* the floating Report an issue button must clear the phone progress bar */
@media (max-width: 860px) { body:has(#screen-questions.active) .bym-ri-btn { bottom: 76px; } }

/* ---- Chapter complete ---- */
#screen-chapter-complete .cr-screen-frame { max-width: 640px; margin: 0 auto; padding: 40px 16px 96px; text-align: left; }
#screen-chapter-complete .cr-check-circle { width: 64px; height: 64px; background: var(--bym-primary); color: var(--bym-on-primary); margin: 0 0 16px; font-size: 1.75rem; }
#screen-chapter-complete .cr-title { font-family: var(--font-display); font-size: var(--bym-text-title); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: var(--bym-primary); margin-bottom: 8px; }
#screen-chapter-complete .cr-subtitle { font-family: var(--font-display); font-size: var(--bym-text-base); color: var(--bym-text-muted); line-height: 1.55; }
#screen-chapter-complete .cr-progress-bar { height: 6px; border-radius: 0; background: var(--bym-rule); }
#screen-chapter-complete .cr-progress-fill { border-radius: 0; background: var(--bym-primary); }
#screen-chapter-complete .cr-progress-label { font-family: var(--font-display); font-size: 1rem; color: var(--bym-text); }
#screen-chapter-complete .cr-next-card { background: var(--bym-surface-soft); border: 0; border-inline-start: 3px solid var(--bym-primary); border-radius: 0; text-align: left; }
#screen-chapter-complete .cr-next-label { font-family: var(--font-display); font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bym-human-text); }
#screen-chapter-complete .cr-next-title { font-family: var(--font-display); font-size: var(--bym-text-lg); font-weight: 600; color: var(--bym-primary); }
#screen-chapter-complete .cr-next-time { font-family: var(--font-display); font-size: 1rem; color: var(--bym-text-muted); }
#screen-chapter-complete .cr-essentials-review { background: var(--bym-surface-soft); border: 0; border-inline-start: 3px solid var(--bym-human); border-radius: 0; }
#screen-chapter-complete .cr-er-title { font-family: var(--font-display); color: var(--bym-primary); }
#screen-chapter-complete .cr-er-sub, #screen-chapter-complete .cr-er-text { font-family: var(--font-display); font-size: 1rem; color: var(--bym-text); }
#screen-chapter-complete .cr-er-check { border-radius: 4px; }
#screen-chapter-complete .cr-btn { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 4px; background: var(--bym-primary); color: var(--bym-on-primary); border: 1px solid var(--bym-primary); font-family: var(--font-display); font-size: 1rem; font-weight: 600; background-image: none; }
#screen-chapter-complete .cr-btn:hover { background: #30222e; }
#screen-chapter-complete .cr-pause-link { font-family: var(--font-display); font-size: 1rem; color: var(--bym-primary); text-decoration: underline; text-underline-offset: 4px; min-height: 44px; line-height: 44px; }
@media (max-width: 860px) { #screen-chapter-complete .cr-btn { width: 100%; } }

/* The top bar already has a Dashboard link, so the floating "Dashboard" pill (bottom left) is hidden on this screen: it sat on top of the
 * chapter rail on desktop and on the progress bar on phones. Delete this rule to bring it back. */
body:has(#screen-questions.active) .floating-dashboard-btn { display: none !important; }
@media (min-width: 861px) { #screen-questions .tabs { padding-bottom: 96px; } }
#screen-chapter-complete .cr-subtitle { max-width: 56ch; margin: 0 0 22px; text-align: left; }
#screen-chapter-complete .cr-progress-row { max-width: 460px; margin: 0 0 26px; }
#screen-chapter-complete .cr-next-card { max-width: 460px; margin: 0 0 22px; }
#screen-chapter-complete .cr-essentials-review { max-width: 560px; text-align: left; }

/* Confirm my answers (end of each section) */
#screen-questions .confirm-answers { margin: 24px 0 8px; padding: 16px; background: var(--bym-surface); border: 1px solid var(--bym-rule); border-inline-start: 3px solid var(--bym-primary); }
#screen-questions .confirm-answers-hint { margin: 0 0 12px; color: var(--bym-text); font-size: .9375rem; line-height: 1.5; }
#screen-questions .confirm-answers .btn { min-height: 48px; padding: 0 24px; border-radius: 4px; font-family: var(--font-display); font-size: 1rem; font-weight: 600; transform: none; background-image: none; background: var(--bym-primary); color: var(--bym-on-primary); border: 1px solid var(--bym-primary); }
#screen-questions .confirm-answers .btn:hover:not(:disabled) { background: #30222e; transform: none; }
#screen-questions .confirm-answers .btn:disabled { opacity: .6; }
#screen-questions .confirm-answers-status { margin-top: 10px; font-size: .9375rem; font-weight: 600; min-height: 1.4em; }

/* First-screen fix (CSS only): on a phone the PDF how-to line and spacing pushed the first question below the fold. */
@media (max-width: 480px) {
  #screen-questions .pdf-btn-hint { display: none; }
  #screen-questions #section-tip { padding: 8px 16px; }
}

/* Shown when a finished section could not be recorded automatically */
#screen-questions .confirm-needed-banner { margin: 12px 16px; }


/* ---- Practice question (first-time screen) ---- */
#screen-practice-question .pq-wrap { max-width: 680px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 32px) 80px; }
#screen-practice-question .pq-checks { background: var(--bym-surface); border: 1px solid var(--bym-rule); border-radius: 0; padding: 12px 16px; margin: 0 0 16px; list-style: none; }
#screen-practice-question .pq-checks li { padding: 6px 0; font-size: 1rem; color: var(--bym-text-muted); display: flex; gap: 10px; }
#screen-practice-question .pq-checks li.done { color: var(--bym-success); font-weight: 600; }
#screen-practice-question .pq-checks li i { font-style: normal; width: 18px; display: inline-block; }
#screen-practice-question .pq-prompt { background: var(--bym-surface-soft); border: 0; border-inline-start: 3px solid var(--bym-accent); border-radius: 0; padding: 12px 14px; margin: 0 0 16px; font-size: 1rem; color: var(--bym-text); line-height: 1.5; }
#screen-practice-question .pq-prompt.ok { background: var(--bym-success-surface); border-inline-start-color: var(--bym-success); color: var(--bym-success); }

/* "I would rather not answer this one" (migration 343): a quiet text button under the options, and a calm card once chosen. Neutral colours, no warning tones. */
#screen-questions .q-skip-row { margin: 6px 0 2px; }
#screen-questions .q-skip-btn { background: none; border: 0; padding: 12px 4px; min-height: 44px; font: inherit; font-size: 0.9375rem; color: var(--bym-muted, #70586B); text-decoration: underline; cursor: pointer; }
#screen-questions .q-skip-btn:hover { color: var(--bym-primary, #412B3F); }
#screen-questions .q-declined { background: var(--bym-surface, #FBF5ED); border: 1px solid var(--bym-border, #D8C8CE); padding: 14px 16px; margin: 10px 0; color: var(--bym-muted, #70586B); }
#screen-questions .q-declined-btn { margin-top: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--bym-primary, #412B3F); border-radius: 4px; background: #fff; color: var(--bym-primary, #412B3F); font: inherit; font-weight: 600; cursor: pointer; }

/* A decisive question asks once more before it is skipped (owner-approved, 19 Oct 2026). Fig border, no warning colour: it is plain, not alarming. */
#screen-questions .q-skip-confirm { border: 2px solid var(--bym-primary, #412B3F); background: var(--bym-surface, #FBF5ED); padding: 14px 16px; margin: 10px 0; color: var(--bym-ink, #30222E); line-height: 1.5; }
#screen-questions .q-skip-confirm strong { color: var(--bym-primary, #412B3F); }
#screen-questions .q-skip-confirm-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
#screen-questions .q-skip-confirm-btns button { min-height: 44px; padding: 0 16px; border: 1px solid var(--bym-primary, #412B3F); border-radius: 4px; font: inherit; font-weight: 600; cursor: pointer; }
#screen-questions .q-skip-answer { background: var(--bym-primary, #412B3F); color: #FBF5ED; }
#screen-questions .q-skip-anyway { background: #fff; color: var(--bym-primary, #412B3F); }