/* Stepped TypeForm-style questionnaire fill — shared by the couple portal filler and the
   public intake form. */

/* This stylesheet is loaded on its own by _FillLayout, so it has to carry its own sizing
   rule — connect.css and portal.css each do the same. Without it a `width:100%` control adds
   its padding and border on top of the column: the textarea rendered 26px wider than the
   question above it, hanging off to the right and reading as un-centred on a phone. */
* { box-sizing: border-box; }

.qf-wrap { max-width:640px; margin:0 auto; }
.qf-progress { height:4px; background:rgba(120,110,90,.16); border-radius:4px; overflow:hidden; margin-bottom:2.5rem; }
.qf-progress-bar { height:100%; width:0; background:#30382b; transition:width .3s ease; }
.qf-save-status { margin:-1.9rem 0 1.25rem; color:#6f746a; font-size:.82rem; text-align:right; }
.qf-save-status[data-state="saving"] { color:#8a704c; }
.qf-save-status[data-state="saved"] { color:#587252; }
.qf-save-status[data-state="error"] { color:#9c3f35; font-weight:600; }
.qf-step { display:none; }
.qf-step.is-active { display:block; animation:qf-fade .35s ease; }
@keyframes qf-fade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.qf-screen { text-align:center; padding:2rem 0; }
.qf-num { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; background:#30382b; color:#f7f6f2; font-weight:600; font-size:.85rem; margin-bottom:.75rem; }
.qf-h1 { font-family:"Playfair Display", serif; font-size:2rem; margin:0 0 1rem; }
.qf-h2 { font-family:"Playfair Display", serif; font-size:1.5rem; margin:0 0 .5rem; }
.qf-lead { color:#6b6353; font-size:1rem; line-height:1.6; margin:0 0 1.5rem; white-space:pre-line; }
.qf-time { color:#8a8270; font-size:.9rem; margin:1.5rem 0; }
.qf-q { margin:0 0 1.75rem; }
.qf-q-label { display:block; font-size:1.1rem; font-weight:500; margin-bottom:.3rem; }
.qf-req { color:#b4452f; }
.qf-q-help { color:#8a8270; font-size:.9rem; margin:0 0 .6rem; white-space:pre-line; }
/* Rich-text (sanitized HTML) rendered inside .qf-lead / .qf-q-help: normalise the margins of
   block children and give lists/links sensible defaults. */
.qf-richtext > :first-child { margin-top:0; }
.qf-richtext > :last-child { margin-bottom:0; }
.qf-richtext p { margin:0 0 .6rem; }
.qf-richtext ul, .qf-richtext ol { margin:.4rem 0; padding-left:1.4rem; text-align:left; }
.qf-richtext li { margin:.15rem 0; }
.qf-richtext a { color:inherit; text-decoration:underline; }
.qf-richtext strong, .qf-richtext b { font-weight:700; }
.qf-richtext em, .qf-richtext i { font-style:italic; }
/* Form controls don't inherit the page font. Left alone, the inputs fall back to Arial and the
   textareas to monospace — so the couple answers in a different typeface from the question
   they're reading, on the most client-facing page we have. */
.qf-input, .qf-file, .qf-btn, .qf-btn-ghost, .qf-star { font-family:inherit; }

.qf-input { width:100%; border:0; border-bottom:2px solid rgba(120,110,90,.3); background:transparent; padding:.5rem 0; font-size:1.1rem; color:inherit; }
.qf-input:focus { outline:none; border-bottom-color:#30382b; }
textarea.qf-input { border:2px solid rgba(120,110,90,.3); border-radius:10px; padding:.7rem; }
.qf-choices { display:flex; flex-direction:column; gap:.6rem; }
.qf-choices-inline { flex-direction:row; }
.qf-choices-inline .qf-choice { flex:1; justify-content:center; }
.qf-rating { display:flex; gap:.35rem; }
.qf-star { background:none; border:0; cursor:pointer; font-size:2rem; line-height:1; color:rgba(120,110,90,.3); padding:0; transition:color .12s ease; }
.qf-star.is-on { color:#c79a5b; }
.qf-file { width:100%; font-size:.95rem; }
/* Restyle the native "Choose File" button to match the qf design (separate rules: a
   selector a browser can't parse would drop the whole grouping). */
.qf-file::file-selector-button { margin-right:.75rem; padding:.5rem 1.1rem; border:0; border-radius:999px; background:#30382b; color:#f7f6f2; font-weight:600; font-size:.9rem; cursor:pointer; transition:background .12s ease; }
.qf-file::file-selector-button:hover { background:#3c4636; }
.qf-file::-webkit-file-upload-button { margin-right:.75rem; padding:.5rem 1.1rem; border:0; border-radius:999px; background:#30382b; color:#f7f6f2; font-weight:600; font-size:.9rem; cursor:pointer; transition:background .12s ease; }
.qf-file::-webkit-file-upload-button:hover { background:#3c4636; }
.qf-file-note { font-size:.82rem; color:#8a8270; margin:.4rem 0 0; }
.qf-choice { display:flex; align-items:center; gap:.75rem; border:1px solid rgba(120,110,90,.3); border-radius:12px; padding:.75rem 1rem; cursor:pointer; font-size:1rem; }
.qf-choice:hover { border-color:#30382b; background:rgba(255,255,255,.4); }
.qf-choice input { accent-color:#30382b; }
.qf-choice-key { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border:1px solid rgba(120,110,90,.4); border-radius:6px; font-size:.78rem; font-weight:600; }
.qf-actions { display:flex; align-items:center; gap:.75rem; margin-top:2rem; }
.qf-btn { display:inline-block; background:#30382b; color:#f7f6f2; border:0; text-decoration:none; padding:.75rem 2rem; border-radius:999px; font-weight:600; font-size:1rem; cursor:pointer; }
.qf-btn:hover { background:#3c4636; }
.qf-btn-ghost { background:transparent; border:1px solid rgba(120,110,90,.4); color:#6b6353; padding:.7rem 1.25rem; border-radius:999px; font-weight:600; cursor:pointer; }
.qf-q-invalid .qf-q-label { color:#b4452f; }
.qf-q-invalid .qf-input { border-bottom-color:#b4452f; }
.qf-error { color:#b4452f; font-size:.9rem; margin:.75rem 0 0; }
.qf-ending { padding:3rem 0; }
.qf-ending-mark { font-size:2.5rem; color:#c79a5b; margin-bottom:1rem; }

/* read-only "what you told us" summary shown when viewing a completed questionnaire */
.qf-summary .qf-ending { padding:2rem 0 1.5rem; }
.qf-summary-body { display:flex; flex-direction:column; gap:1.75rem; margin-bottom:2rem; }
.qf-summary-section { border-top:1px solid rgba(120,110,90,.18); padding-top:1.25rem; }
.qf-summary-heading { font-family:"Playfair Display", serif; font-size:1.15rem; margin:0 0 .9rem; }
.qf-summary-answers { display:flex; flex-direction:column; gap:.85rem; margin:0; }
.qf-summary-answers dt { font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; font-weight:500; color:#3c4636; margin:0 0 .2rem; }
.qf-summary-answers dd { margin:0; font-size:1.02rem; color:inherit; white-space:pre-wrap; }
.qf-summary-empty { color:#8a8270; font-size:.95rem; margin:0; }

/* "change my answers" — the way back into a questionnaire the couple already sent */
.qf-summary-actions { border-top:1px solid rgba(120,110,90,.18); padding-top:1.25rem; margin-bottom:1.5rem; }
.qf-summary-note { color:#8a8270; font-size:.85rem; margin:.75rem 0 0; max-width:34rem; }

/* a questionnaire with no questions yet — nothing to start */
.qf-empty-note { color:#8a8270; font-size:.95rem; margin:1.5rem 0 0; }

/* live character counter for limited long-text answers */
.qf-charcount {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--qf-muted, #8a857c);
    text-align: right;
}

/* --- Global link default ---------------------------------------------------------
   Keep stray links inside the questionnaire filler / public intake on-brand instead
   of the browser's default blue. :where() carries zero specificity, so themed links
   (e.g. .qf-btn) are untouched. */
:where(.inq-shell, .qf-wrap) a {
    color: #30382b;
    text-underline-offset: 2px;
}
:where(.inq-shell, .qf-wrap) a:hover,
:where(.inq-shell, .qf-wrap) a:focus {
    color: #9b4d31;
}

/* --- Admin preview banner --------------------------------------------------------
   Shown only on the admin-only /Admin/Questionnaires/Preview/{id} throwaway preview
   (no response is created, nothing is saved). Sits above the fill body to make the
   "this isn't the real thing" state unmistakable. */
.qf-preview-banner {
    max-width: 640px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.65rem 0.9rem;
    border-radius: 10px;
    background: #ecefe6;
    border: 1px solid #d7ddca;
    font-size: 0.9rem;
    color: #5b6150;
}
.qf-preview-badge {
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: #30382b;
    color: #f7f6f2;
}
.qf-preview-note { flex: 1 1 auto; min-width: 12rem; }
.qf-preview-close {
    font-weight: 600;
    white-space: nowrap;
    text-decoration: underline;
}
.qf-preview-restart { margin-top: 1.25rem; }