/* ==========================================================================
   Health questions (#FeosHealthQuestions; views/health-questions.js) and the panels on the advice process and the
   questionnaire version. The page sits inside .feos-ff to share the fact find's header, cards and rail.
   ========================================================================== */

.feos-hq { max-width: 1200px; }
.feos-hq-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; align-items: start; }
.feos-hq-main { min-width: 0; }
.feos-hq-h { font-size: 19px; font-weight: 600; margin: 2px 0 8px; color: var(--feos-ink); }
.feos-hq-sub { font-size: 15px; font-weight: 600; margin: 18px 0 8px; color: var(--feos-accent-dark); }
.feos-hq-lead { color: var(--feos-muted); }
.feos-hq-q { padding: 12px 0; border-top: 1px solid var(--feos-line); }
.feos-hq-q.follow { margin-left: 18px; padding-left: 12px; border-left: 3px solid var(--feos-accent-soft); }
.feos-hq-q.missing { background: #fff8f7; }
.feos-hq-label { font-weight: 500; color: var(--feos-ink); margin-bottom: 4px; }
.feos-hq-guide { font-size: 12.5px; color: var(--feos-muted); margin-bottom: 6px; }
.feos-hq-guide p { margin: 0 0 4px; }
.feos-hq-guide ul { margin: 0 0 4px 16px; padding: 0; }
.feos-hq-help { font-size: 12px; color: var(--feos-muted); margin-top: 4px; }
.feos-hq-answer { font-weight: 500; }
.feos-hq-opts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.feos-hq-opt { border: 1px solid var(--feos-line); background: #fff; border-radius: 18px; padding: 5px 14px; font-size: 13px; cursor: pointer; }
.feos-hq-opt:hover { border-color: var(--feos-accent); }
.feos-hq-opt.on { background: var(--feos-accent); border-color: var(--feos-accent); color: #fff; }
.feos-hq-multi label { display: block; font-weight: normal; margin: 3px 0; }
.feos-hq-num, .feos-hq-month { max-width: 200px; }
.feos-hq-chip { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 9px; margin: 0 4px 4px 0;
    background: var(--feos-accent-soft); color: var(--feos-accent-dark); }
.feos-hq-chip.warn { background: #fff3d6; color: #8a5a00; }
.feos-hq-pill { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 10px; background: #eef1f4; color: #4a5866; }
.feos-hq-pill.ok { background: #e3f5ea; color: #1d7a43; }
.feos-hq-pill.warn { background: #fff3d6; color: #8a5a00; }
.feos-hq-pill.pre { background: #e6f0fa; color: #0a5f9c; }
.feos-hq-pill.muted { background: #eef1f4; color: #6b7785; }
.feos-hq-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: #d5dce3; }
.feos-hq-dot.done { background: #1d7a43; }
.feos-hq-dot.pre { background: #e0a100; }
.feos-hq-count { display: inline-block; min-width: 18px; text-align: center; font-size: 11px; border-radius: 9px; background: #fff3d6; color: #8a5a00; padding: 0 5px; }
.feos-hq-foot { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 30px; }
.feos-hq-hint { background: var(--feos-accent-soft); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; color: var(--feos-accent-dark); }
.feos-hq-done { background: #e3f5ea; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; color: #1d5a35; }
.feos-hq-note { background: #fff8e6; border: 1px solid #f2dfae; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; color: #6b4b00; }
.feos-hq-both { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.feos-hq-sum { margin-bottom: 0; }
.feos-hq-sum td { vertical-align: top; }
.feos-hq-sum td:first-child { width: 60%; color: #42505e; }
.feos-hq-sumh { display: flex; justify-content: space-between; margin-bottom: 6px; }
.feos-hq-decl { display: flex; gap: 10px; align-items: flex-start; font-weight: normal; padding: 8px 0; border-top: 1px solid var(--feos-line); }
.feos-hq-decl input { margin-top: 4px; }
.feos-hq-decl .fas { margin-top: 3px; color: #8a96a3; }
.feos-hq-decl.on .fas { color: #1d7a43; }
.feos-hq-code { margin-top: 8px; }
.feos-hq-code-row { display: flex; gap: 8px; margin-top: 10px; max-width: 320px; }
/* eSign (docs/modules/e-signature.md S3): the signature box, the agreement, email or SMS */
[data-sign-pad] { max-width: 640px; margin: 6px 0 12px; }
.feos-hq-agree { border: 2px solid #0a72ba; background: #eef5fb; border-radius: 10px; padding: 10px 12px; max-width: 640px; }
.feos-hq-ch { display: flex; gap: 16px; flex-wrap: wrap; margin: 4px 0 10px; }
.feos-hq-ch label { font-weight: normal; display: flex; gap: 6px; align-items: center; margin: 0; }
.feos-hq-review { display: grid; gap: 6px; margin-top: 8px; }
.feos-hq-table td { vertical-align: middle; }
.feos-hq-actions .btn { margin: 2px 2px 2px 0; }
.feos-hq-table .feos-hq-actions { white-space: nowrap; text-align: right; }
.feos-hq-table .feos-hq-signed { white-space: nowrap; }
.feos-hq-table td { padding-top: 6px; padding-bottom: 6px; }
.feos-hq-reuse { white-space: normal; }
.feos-hq-check { font-weight: normal; margin-right: 14px; }
.feos-hq-vs { margin-top: 18px; }
.feos-hq-rule { color: #0a5f9c; }

@media (max-width: 900px) {
    .feos-hq-body { grid-template-columns: 1fr; }
    .feos-hq-body .feos-ff-rail { position: static; }
}
/* an answer the server did not take stays in its box, marked (0.8.91) */
.feos-hq .feos-hq-bad { border-color: #b42318; background: #fff6f5; }
.feos-hq-bad-msg { color: #b42318; font-size: 13px; margin-top: 4px; }

/* Peter's walk-through, 6 Oct 2026: units, BMI, text size, the client's language, GP finder, Next with gaps */
.feos-hq-tools { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; margin: -4px 0 10px; }
.feos-hq-lang { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; margin: 0; }
.feos-hq-lang select { width: auto; }
.feos-hq-sizes .btn { min-width: 34px; }
.feos-hq-sizes .btn.active { background: var(--feos-accent); border-color: var(--feos-accent); color: #fff; }
.feos-hq.fs-1 .feos-hq-main { zoom: 1.12; }
.feos-hq.fs-2 .feos-hq-main { zoom: 1.26; }
.feos-hq-tr { display: block; font-weight: normal; font-style: italic; color: #4a6a86; margin-top: 2px; font-size: 0.95em; }
.feos-hq-tr-o { display: block; font-size: 11px; opacity: .8; font-style: italic; }
.feos-hq-multi .feos-hq-tr-o { display: inline; }
.feos-hq-units { display: flex; align-items: center; gap: 10px; padding: 8px 0 4px; font-weight: 500; }
.feos-hq-measure { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.feos-hq-mbox { display: inline-flex; align-items: center; gap: 6px; }
.feos-hq-mbox span { color: var(--feos-muted); }
.feos-hq-bmi { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feos-hq-bmi-note { color: #8a5a00; font-size: 13px; }
.feos-bmi-guide { margin-top: 6px; padding: 8px 10px; background: #fff8e6; border-left: 3px solid #e0a100; border-radius: 4px; line-height: 1.5; }
.feos-hq-gp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.feos-hq-gp select { width: auto; max-width: 100%; }
.feos-hq-gaps { background: #fff6f5; border: 1px solid #f3c4bf; color: #8f1d14; border-radius: 8px; padding: 8px 12px; margin: -4px 0 10px; }
.feos-hq-gaps .fas { margin-right: 6px; }
.feos-hq-q.missing { border-left: 3px solid #b42318; padding-left: 10px; }