/* Question builder (vetting, questionnaires, interview templates, reference questions).
   Cards reuse the template's .box surface; everything inside is scoped under .qb. */

.qb {
    --qb-surface: #ffffff;
    --qb-subtle: rgb(var(--default-background));
    --qb-hover: rgb(var(--list-hover-focus-bg));
    --qb-line: rgb(0 0 0 / 0.08);
    --qb-line-strong: rgb(0 0 0 / 0.14);
    --qb-text: rgb(var(--default-text-color));
    --qb-muted: rgb(var(--default-text-color) / 0.6);
    --qb-faint: rgb(var(--default-text-color) / 0.38);
    --qb-accent: rgb(var(--primary));
    --qb-accent-soft: rgb(var(--primary) / 0.1);
    --qb-accent-line: rgb(var(--primary) / 0.4);
    --qb-danger: rgb(var(--danger));
    --qb-danger-soft: rgb(var(--danger) / 0.1);
    --qb-warning: rgb(var(--warning));
    --qb-warning-soft: rgb(var(--warning) / 0.14);
    --qb-success: rgb(var(--success));
    --qb-success-soft: rgb(var(--success) / 0.12);
    --qb-radius: 8px;
    color: var(--qb-text);
}

.dark .qb {
    --qb-surface: rgb(var(--body-bg));
    --qb-subtle: rgb(255 255 255 / 0.03);
    --qb-hover: rgb(255 255 255 / 0.05);
    --qb-line: rgb(255 255 255 / 0.08);
    --qb-line-strong: rgb(255 255 255 / 0.16);
    --qb-text: rgb(255 255 255 / 0.85);
    --qb-muted: rgb(255 255 255 / 0.55);
    --qb-faint: rgb(255 255 255 / 0.32);
    --qb-accent-soft: rgb(var(--primary) / 0.18);
}

/* Toolbar */
.qb-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }
.qb-title { font-size: 0.95rem; font-weight: 600; margin: 0; }
.qb-subtitle { font-size: 0.8rem; color: var(--qb-muted); margin: 0.1rem 0 0; }
.qb-toolbar-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.qb-segmented { display: inline-flex; border: 1px solid var(--qb-line-strong); border-radius: var(--qb-radius); overflow: hidden; }
.qb-segmented button { padding: 0.35rem 0.75rem; font-size: 0.8rem; color: var(--qb-muted); background: transparent; display: inline-flex; gap: 0.35rem; align-items: center; }
.qb-segmented button + button { border-left: 1px solid var(--qb-line-strong); }
.qb-segmented button.qb-active { background: var(--qb-accent-soft); color: var(--qb-accent); font-weight: 600; }

/* Sections */
.qb-section { margin-bottom: 1.5rem; }
.qb-section:last-child { margin-bottom: 0; }
.qb-section-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.6rem; }
.qb-section-title { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--qb-muted); margin: 0; }
.qb-section-hint { font-size: 0.8rem; color: var(--qb-faint); margin: 0; }

.qb-empty { text-align: center; padding: 2.5rem 1rem; border: 1px dashed var(--qb-line-strong); border-radius: var(--qb-radius); color: var(--qb-muted); }
.qb-empty p { margin: 0 0 0.75rem; }

.qb-notice { display: flex; gap: 0.6rem; padding: 0.75rem 0.9rem; border-radius: var(--qb-radius); font-size: 0.85rem; margin-bottom: 1rem; }
.qb-notice-warning { background: var(--qb-warning-soft); }
.qb-notice-info { background: var(--qb-accent-soft); }
.qb-notice ul { margin: 0.4rem 0 0; padding: 0; list-style: none; }
.qb-notice li { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.3rem; }

/* Question cards */
.qb-list { display: flex; flex-direction: column; gap: 0.5rem; }

.qb-card { border: 1px solid var(--qb-line-strong); border-radius: var(--qb-radius); background: var(--qb-surface); transition: border-color 0.15s, box-shadow 0.15s; }
.qb-card-open { border-color: var(--qb-accent-line); box-shadow: 0 1px 6px rgb(0 0 0 / 0.06); }
.qb-card-dragging { opacity: 0.45; }
.qb-card-drop { border-color: var(--qb-accent); box-shadow: 0 -3px 0 var(--qb-accent); }
.qb-card-highlight { animation: qb-flash 1.6s ease-out; }
@keyframes qb-flash { 0% { box-shadow: 0 0 0 3px var(--qb-accent-line); } 100% { box-shadow: none; } }

.qb-card-head { display: flex; gap: 0.6rem; align-items: center; padding: 0.6rem 0.75rem; cursor: pointer; }
.qb-card-head:hover { background: var(--qb-hover); border-radius: var(--qb-radius); }
.qb-grip { cursor: grab; color: var(--qb-faint); display: inline-flex; padding: 0.2rem; }
.qb-grip:active { cursor: grabbing; }

.qb-num { flex: none; min-width: 2.1rem; height: 1.6rem; padding: 0 0.4rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; background: var(--qb-accent-soft); color: var(--qb-accent); }
.qb-num-follow { background: var(--qb-subtle); color: var(--qb-muted); border: 1px solid var(--qb-line-strong); }

.qb-card-title { flex: 1; min-width: 0; }
.qb-q { margin: 0; font-size: 0.9rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-q-untitled { color: var(--qb-faint); font-style: italic; }
.qb-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: center; margin-top: 0.2rem; font-size: 0.75rem; color: var(--qb-muted); }
.qb-meta span { display: inline-flex; gap: 0.25rem; align-items: center; }

.qb-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.72rem; background: var(--qb-subtle); border: 1px solid var(--qb-line); color: var(--qb-muted); white-space: nowrap; }
.qb-chip-warning { background: var(--qb-warning-soft); border-color: transparent; color: var(--qb-text); }
.qb-chip-action { background: var(--qb-success-soft); border-color: transparent; color: var(--qb-text); }

.qb-card-actions { display: flex; gap: 0.3rem; align-items: center; flex: none; }
.qb-chevron { color: var(--qb-faint); margin-left: 0.25rem; }

.qb-card-body { border-top: 1px solid var(--qb-line); padding: 1rem 0.9rem 1rem; display: flex; flex-direction: column; gap: 1.25rem; }

/* Forms */
.qb-form { display: grid; grid-template-columns: 1fr; gap: 1.1rem; padding-top: 0.6rem; }
@media (min-width: 992px) {
    .qb-form-2 { grid-template-columns: 2fr 1fr; }
}
.qb-form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; align-items: center; }
.qb-error { color: var(--qb-danger); font-size: 0.8rem; margin: 0.3rem 0 0; }
.qb-hint { color: var(--qb-faint); font-size: 0.78rem; margin: 0; }

.qb-input { width: 100%; height: 2.1rem; padding: 0 0.7rem; font-size: 0.85rem; border: 1px solid var(--qb-line-strong); border-radius: 6px; background: transparent; color: var(--qb-text); }
.qb-input:focus { outline: none; border-color: var(--qb-accent); box-shadow: 0 0 0 2px var(--qb-accent-soft); }
.qb-input-invalid { border-color: var(--qb-danger); }

/* Answers and rules */
.qb-answers { display: flex; flex-direction: column; gap: 0.5rem; }
.qb-answer { border: 1px solid var(--qb-line); border-radius: var(--qb-radius); background: var(--qb-subtle); padding: 0.55rem 0.7rem; }
.qb-answer-row { display: flex; gap: 0.5rem; align-items: center; }
.qb-answer-text { flex: 1; min-width: 0; font-size: 0.85rem; font-weight: 500; }
.qb-answer-desc { display: block; font-weight: 400; font-size: 0.75rem; color: var(--qb-muted); }

.qb-rules { margin: 0.4rem 0 0 0.6rem; padding-left: 0.75rem; border-left: 2px solid var(--qb-line-strong); display: flex; flex-direction: column; gap: 0.35rem; }
.qb-rule { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.8rem; }
.qb-rule-target { color: var(--qb-accent); font-weight: 500; cursor: pointer; background: none; padding: 0; text-align: left; }
.qb-rule-target:hover { text-decoration: underline; }
.qb-rule-actions { margin-left: auto; display: flex; gap: 0.25rem; }
.qb-link { font-size: 0.8rem; color: var(--qb-accent); background: none; padding: 0; display: inline-flex; gap: 0.25rem; align-items: center; }
.qb-link:hover { text-decoration: underline; }
.qb-link-muted { color: var(--qb-muted); }

.qb-add-answer { display: flex; gap: 0.5rem; align-items: center; }

.qb-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 6px; color: var(--qb-muted); background: transparent; }
.qb-icon-btn:hover:not(:disabled) { background: var(--qb-hover); color: var(--qb-text); }
.qb-icon-btn:disabled { opacity: 0.35; cursor: default; }
.qb-icon-btn-danger:hover:not(:disabled) { background: var(--qb-danger-soft); color: var(--qb-danger); }

/* Inline rule editor */
.qb-editor { border: 1px solid var(--qb-accent-line); border-radius: var(--qb-radius); background: var(--qb-surface); padding: 0.9rem; display: flex; flex-direction: column; gap: 1.1rem; margin-top: 0.5rem; }
.qb-editor-title { font-size: 0.8rem; font-weight: 600; margin: 0; }
.qb-editor-group { display: flex; flex-direction: column; gap: 1.1rem; padding-top: 0.25rem; }
.qb-editor-sub { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--qb-muted); margin: 0; }

/* Flow view */
.qb-flow { display: flex; flex-direction: column; gap: 0.35rem; }
.qb-flow-node { display: flex; flex-direction: column; }
.qb-flow-q { display: flex; gap: 0.5rem; align-items: center; padding: 0.35rem 0.5rem; border-radius: 6px; cursor: pointer; font-size: 0.85rem; text-align: left; background: none; width: 100%; }
.qb-flow-q:hover { background: var(--qb-hover); }
.qb-flow-q-text { flex: 1; min-width: 0; }
.qb-flow-branch { margin-left: 1.1rem; padding-left: 0.9rem; border-left: 2px solid var(--qb-line-strong); display: flex; flex-direction: column; gap: 0.2rem; }
.qb-flow-answer { display: flex; gap: 0.35rem; align-items: center; font-size: 0.78rem; color: var(--qb-muted); padding: 0.2rem 0 0.1rem; }
.qb-flow-answer strong { color: var(--qb-text); font-weight: 600; }
.qb-flow-end { font-size: 0.75rem; color: var(--qb-faint); padding: 0.1rem 0 0.2rem 1.25rem; }
.qb-flow-loop { font-size: 0.78rem; color: var(--qb-danger); padding-left: 1.25rem; }

/* Preview */
.qb-preview { width: min(640px, 92vw); }
.qb-preview-progress { height: 4px; border-radius: 999px; background: var(--qb-line); overflow: hidden; margin-bottom: 1rem; }
.qb-preview-progress div { height: 100%; background: var(--qb-accent); transition: width 0.2s; }
.qb-preview-step { font-size: 0.75rem; color: var(--qb-muted); margin: 0 0 0.25rem; }
.qb-preview-q { font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem; }
.qb-preview-desc { font-size: 0.85rem; color: var(--qb-muted); margin: 0 0 1rem; }
.qb-preview-options { display: flex; flex-direction: column; gap: 0.45rem; }
.qb-preview-option { display: flex; gap: 0.6rem; align-items: center; padding: 0.6rem 0.75rem; border: 1px solid var(--qb-line-strong); border-radius: var(--qb-radius); cursor: pointer; font-size: 0.875rem; }
.qb-preview-option:hover { background: var(--qb-hover); }
.qb-preview-option-selected { border-color: var(--qb-accent); background: var(--qb-accent-soft); }
.qb-preview-option input { accent-color: rgb(var(--primary)); }
.qb-preview-textarea { width: 100%; min-height: 6rem; padding: 0.6rem 0.75rem; border: 1px solid var(--qb-line-strong); border-radius: var(--qb-radius); background: transparent; color: var(--qb-text); font-size: 0.875rem; }
.qb-preview-footer { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 1.25rem; }
.qb-preview-triggered { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.qb-preview-summary { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.85rem; }
.qb-preview-summary div { padding: 0.5rem 0.7rem; border-radius: 6px; background: var(--qb-subtle); }
.qb-preview-summary span { display: block; color: var(--qb-muted); font-size: 0.75rem; }

@media (max-width: 640px) {
    .qb-card-head { flex-wrap: wrap; }
    .qb-card-title { flex-basis: 60%; }
}