*, *::before, *::after { box-sizing: border-box; }

body {
   margin: 0;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   background: #f1f5f9;
   color: #1e293b;
   line-height: 1.6;
   font-size: 1rem;
}

.app {
   max-width: 680px;
   margin: 0 auto;
   padding: 2.5rem 1.25rem 5rem;
}

/* ── Cards ── */
.card {
   background: #fff;
   border-radius: 14px;
   padding: 2rem;
   margin-bottom: 1.5rem;
   border: 1px solid #e2e8f0;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.05);
}

.hidden { display: none; }

/* ── Typography ── */
h1 { font-size: 1.45rem; font-weight: 700; color: #0f172a; margin: 0 0 0.6rem; }
h2 { font-size: 1.2rem;  font-weight: 700; color: #0f172a; margin: 0 0 1.25rem; }

/* ── Hint text ── */
.hint {
   font-size: 0.82rem;
   color: #64748b;
   margin-top: 0.5rem;
   line-height: 1.5;
}

/* ── Form elements ── */
fieldset {
   border: 1px solid #e8edf3;
   border-radius: 10px;
   padding: 1.25rem 1.25rem 0.5rem;
   margin-bottom: 1.25rem;
}

legend {
   padding: 0 0.4rem;
   font-size: 0.68rem;
   font-weight: 700;
   letter-spacing: 0.09em;
   text-transform: uppercase;
   color: #94a3b8;
}

label {
   display: flex;
   flex-direction: column;
   margin-bottom: 0.85rem;
   font-size: 0.93rem;
   color: #334155;
   font-weight: 500;
}

input[type="number"],
input[type="text"],
select {
   margin-top: 0.35rem;
   padding: 0.5rem 0.7rem;
   border-radius: 7px;
   border: 1.5px solid #cbd5e1;
   font: inherit;
   font-size: 0.93rem;
   color: #1e293b;
   background: #fff;
   transition: border-color 0.15s, box-shadow 0.15s;
   appearance: auto;
}

input[type="number"]:focus,
input[type="text"]:focus,
select:focus {
   outline: none;
   border-color: #3b82f6;
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.13);
}

/* ── Buttons ── */
button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.6rem 1.4rem;
   border-radius: 7px;
   border: none;
   background: #2563eb;
   color: #fff;
   font: inherit;
   font-weight: 600;
   font-size: 0.9rem;
   cursor: pointer;
   transition: background 0.15s, opacity 0.15s, transform 0.1s;
   letter-spacing: 0.01em;
}

button:hover:not(:disabled) { background: #1d4ed8; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.38; cursor: default; }

.btn-record { background: #16a34a; }
.btn-record:hover:not(:disabled) { background: #15803d; }

.btn-stop { background: #dc2626; }
.btn-stop:hover:not(:disabled) { background: #b91c1c; }

/* ── Intro / participant ID ── */
.participant-id-label {
   display: flex;
   flex-direction: column;
   margin: 1.25rem 0;
   font-weight: 600;
   color: #334155;
}

.participant-id-label input {
   margin-top: 0.4rem;
   max-width: 220px;
}

/* ── Questionnaire preamble ── */
.questionnaire-preamble {
   font-size: 0.88rem;
   color: #475569;
   margin: 0 0 1.5rem;
   padding: 0.7rem 1rem;
   background: #f8fafc;
   border-left: 3px solid #93c5fd;
   border-radius: 0 6px 6px 0;
   line-height: 1.5;
}

/* ── Likert scale ── */
.likert-item { margin-bottom: 1.5rem; }
.likert-item:last-child { margin-bottom: 0.25rem; }

.likert-question {
   font-size: 0.93rem;
   line-height: 1.45;
   margin: 0 0 0.6rem;
   color: #1e293b;
   font-weight: 400;
}

.likert-scale {
   display: flex;
   gap: 0.3rem;
}

.likert-scale label {
   flex: 1;
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
   text-align: center;
   gap: 0;
   margin-bottom: 0;
   font-size: 0.68rem;
   line-height: 1.3;
   color: #64748b;
   cursor: pointer;
   padding: 0.6rem 0.15rem;
   border: 1.5px solid #e2e8f0;
   border-radius: 8px;
   transition: background 0.12s, border-color 0.12s, color 0.12s;
   user-select: none;
   position: relative;
   font-weight: 400;
}

.likert-scale label:hover {
   background: #f0f7ff;
   border-color: #93c5fd;
   color: #2563eb;
}

.likert-scale label:has(input:checked) {
   background: #eff6ff;
   border-color: #2563eb;
   color: #1d4ed8;
   font-weight: 700;
}

.likert-scale input[type="radio"] {
   position: absolute;
   opacity: 0;
   pointer-events: none;
   width: 0;
   height: 0;
}

/* ── Consent ── */
.consent-content {
   margin: 0 0 1.5rem;
   padding: 1.1rem 1.25rem;
   background: #f8fafc;
   border: 1px solid #e2e8f0;
   border-radius: 8px;
   font-size: 0.9rem;
   color: #334155;
}

.consent-content h3 {
   font-size: 0.98rem;
   font-weight: 700;
   color: #0f172a;
   margin: 1.4rem 0 0.5rem;
}
.consent-content h3:first-child { margin-top: 0; }
.consent-content p { margin: 0 0 0.7rem; }
.consent-content ul { margin: 0 0 0.7rem; padding-left: 1.2rem; }
.consent-content li { margin-bottom: 0.3rem; }
.consent-content a { color: #2563eb; }

/* Code display + inline code */
.code-display {
   margin: 1.2rem 0;
   padding: 1rem 1.15rem;
   background: #eff6ff;
   border: 1.5px solid #bfdbfe;
   border-radius: 10px;
   text-align: center;
}
.code-label {
   font-size: 0.78rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: #2563eb;
   margin: 0 0 0.4rem;
}
.code-value {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 1.75rem;
   font-weight: 700;
   letter-spacing: 0.18em;
   color: #0f172a;
   margin: 0 0 0.5rem;
}
.code-warning {
   font-size: 0.82rem;
   color: #92400e;
   margin: 0;
   line-height: 1.5;
}
.code-inline {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   letter-spacing: 0.1em;
   color: #1d4ed8;
}

#consentChecklist { margin-bottom: 1rem; }

.consent-note {
   font-size: 0.86rem;
   color: #475569;
   margin: 0 0 1.25rem;
}

.consent-footer {
   font-size: 0.78rem;
   color: #94a3b8;
   margin: 1.25rem 0 0;
   line-height: 1.6;
}
.consent-footer a { color: #64748b; }

.consent-checkbox,
.radio-option {
   flex-direction: row;
   align-items: flex-start;
   gap: 0.6rem;
   margin-bottom: 0.85rem;
   font-weight: 400;
   cursor: pointer;
}

.radio-option {
   padding: 0.7rem 0.85rem;
   border: 1.5px solid #e2e8f0;
   border-radius: 8px;
   line-height: 1.45;
   transition: background 0.12s, border-color 0.12s;
}

.radio-option:hover { background: #f0f7ff; border-color: #93c5fd; }
.radio-option:has(input:checked) { background: #eff6ff; border-color: #2563eb; }

.consent-checkbox input[type="checkbox"],
.radio-option input[type="radio"] {
   margin-top: 0.2rem;
   width: 1.05rem;
   height: 1.05rem;
   flex-shrink: 0;
   accent-color: #2563eb;
   cursor: pointer;
}

/* ── Demographics fields ── */
.field-description {
   display: block;
   font-size: 0.8rem;
   font-weight: 400;
   color: #64748b;
   margin-top: 0.2rem;
   line-height: 1.45;
}

.conditional {
   border-left: 3px solid #93c5fd;
   padding-left: 0.85rem;
}

/* ── Checkbox (multiple-choice) options ── */
.checkbox-option {
   display: flex;
   align-items: flex-start;
   gap: 0.6rem;
   margin-bottom: 0.5rem;
   padding: 0.7rem 0.85rem;
   border: 1.5px solid #e2e8f0;
   border-radius: 8px;
   font-size: 0.9rem;
   line-height: 1.45;
   color: #1e293b;
   cursor: pointer;
   transition: background 0.12s, border-color 0.12s;
}

.checkbox-option:last-child { margin-bottom: 0.25rem; }

.checkbox-option:hover {
   background: #f0f7ff;
   border-color: #93c5fd;
}

.checkbox-option:has(input:checked) {
   background: #eff6ff;
   border-color: #2563eb;
}

.checkbox-option input[type="checkbox"] {
   margin-top: 0.15rem;
   width: 1.05rem;
   height: 1.05rem;
   flex-shrink: 0;
   accent-color: #2563eb;
   cursor: pointer;
}

/* ── Audio section ── */
.audio-intro {
   font-size: 0.85rem;
   color: #475569;
   line-height: 1.5;
   margin: 0 0 1rem;
   padding: 0.7rem 1rem;
   background: #f8fafc;
   border-left: 3px solid #93c5fd;
   border-radius: 0 6px 6px 0;
}

#audioProgress {
   font-size: 0.8rem;
   font-weight: 700;
   color: #2563eb;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   margin: -0.5rem 0 1.5rem;
}

.audio-prompt {
   font-size: 1.1rem;
   font-weight: 500;
   line-height: 1.55;
   color: #0f172a;
   margin: 0 0 1.5rem;
}

.audio-controls {
   display: flex;
   gap: 0.65rem;
}

.audio-status {
   font-size: 0.82rem;
   color: #64748b;
   margin-top: 0.6rem;
   min-height: 1.2em;
}

.audio-widget audio {
   width: 100%;
   margin-top: 1rem;
}

.audio-nav {
   display: flex;
   justify-content: space-between;
   gap: 0.75rem;
   margin-top: 1.75rem;
   padding-top: 1.25rem;
   border-top: 1px solid #e2e8f0;
}

.btn-secondary {
   background: #e2e8f0;
   color: #334155;
}

.btn-secondary:hover:not(:disabled) { background: #cbd5e1; }

/* ── Done section ── */
#doneSection {
   text-align: center;
   padding: 3rem 2rem;
}

#doneSection h2 {
   font-size: 1.6rem;
   margin-bottom: 0.75rem;
}

.done-icon {
   width: 72px;
   height: 72px;
   border-radius: 50%;
   background: #dcfce7;
   border: 2px solid #16a34a;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2rem;
   line-height: 1;
   color: #16a34a;
   margin: 0 auto 1.75rem;
}

/* ── Dev bar ── */
.dev-bar {
   display: flex;
   align-items: center;
   gap: 1rem;
   max-width: 680px;
   margin: 1.25rem auto -1rem;
   background: #fef3c7;
   border: 1px solid #f59e0b;
   border-radius: 8px;
   padding: 0.6rem 0.75rem;
   font-size: 0.8rem;
   font-weight: 600;
   color: #92400e;
}

.dev-fill-btn {
   background: #f59e0b !important;
   font-size: 0.8rem;
   padding: 0.3rem 0.75rem;
}

.dev-fill-btn:hover:not(:disabled) { background: #d97706 !important; }