/* ==========================================================================
   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-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; }
.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-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; }
}