/* Surveys.css - Marketing Survey Builder (TLP-184). Layout only, design tokens. */
.sv-modal-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sv-section-label {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-top: var(--space-2);
}

.sv-questions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* One question: the label line, its topic + condition, then its options.
   A conditional question indents under the question that decides it, so the
   list reads as the tree the guest walks -- the stored array stays flat and
   the indent is computed from the condition, never from nesting. */
.sv-question {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-layer-2);
}

.sv-question[data-depth="1"] { margin-left: var(--space-5); }
.sv-question[data-depth="2"] { margin-left: var(--space-8); }
.sv-question[data-depth="3"] { margin-left: var(--space-10); }

/* A follow-up is visibly subordinate to the question above it. */
.sv-question:not([data-depth="0"]) {
    border-left: var(--border-width-2) solid var(--color-primary);
}

.sv-question-main,
.sv-question-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.sv-question-main .sv-q-label {
    flex: 1 1 var(--space-40);
    min-width: 0;
}

.sv-q-type { flex: 0 0 auto; }

.sv-q-meta-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.sv-q-topic { flex: 0 0 auto; }

.sv-q-threshold {
    width: var(--space-15);
    flex: 0 0 auto;
}

/* The condition restated in words, so the rule is readable without
   re-parsing the controls that set it. */
.sv-q-summary {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-style: italic;
}

.sv-question-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-left: var(--space-4);
}

.sv-option-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sv-option-row .sv-o-label {
    flex: 1 1 auto;
    min-width: 0;
}

/* Up/down reorder buttons (compact square icon-button pattern; the
   RequestTaskTemplates .step-checklist-reorder original was retired with
   the checklist authoring surface, card 3123352297). */
.sv-reorder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-5);
    height: var(--space-5);
    background: transparent;
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}

.sv-reorder:hover:not([disabled]) {
    background: var(--bg-layer-3);
    border-color: var(--color-primary);
    color: var(--text-primary);
}

.sv-reorder[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}