/* Study Clients page — accordion form + per-section live preview pane.
   Per-section preview wrappers use scoped CSS variables set inline by JS.
   The .vendor-style-preview / .study-clients-preview rules below render
   sample question content driven by those variables — a small re-impl of
   the survey runtime's engine.css scoped to this page so we don't have to
   load engine.css cross-origin into the builder. */

/* ===== Accordion ===== */
.study-clients-style-card { padding: 16px; }
.study-clients-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-primary);
}
.study-clients-dirty-badge {
    color: var(--warning, #b07a00);
    font-size: 0.85rem;
    margin-left: 8px;
}
.study-clients-accordion {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.study-clients-section {
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-surface);
}
.study-clients-section-head {
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    background: var(--bg-surface);
    transition: background 0.12s;
}
.study-clients-section-head:hover { background: var(--bg-surface-hover, #f5f8fc); }
.study-clients-section-caret {
    color: var(--text-muted);
    font-size: 12px;
    transition: transform 0.12s;
}
.study-clients-section-title {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}
.study-clients-section-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--accent-muted, #eaf3ff);
    color: var(--accent, #2563eb);
}
.study-clients-section-body {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border-primary);
    background: var(--bg-primary);
}

/* (hidden) tag in section header — visible when this section's element is
   marked for runtime hiding via the _hidden array. */
.study-clients-section-hidden-tag {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--bg-tertiary, #f0f0f0);
    color: var(--text-muted);
    font-style: italic;
}

/* "Hide this element" toggle row — top of every hideable section body. */
.study-clients-hide-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 4px;
    background: var(--bg-surface, #f8f9fa);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}
.study-clients-hide-row input[type=checkbox] {
    margin: 0;
}
.study-clients-hide-row-text { font-weight: 500; }
.study-clients-hide-row-help {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 4px 12px;
    line-height: 1.4;
}

/* When the section is hidden, dim the field grid so it's clear the overrides
   below are dormant until the element is un-hidden. The inputs stay editable
   (authors can keep tweaking the style for when they decide to show it again).
   The preview pane itself stays rendered — the per-section rules below hide
   only the specific element being controlled (WYSIWYG with the survey
   runtime, which display:none's that one element and keeps everything else). */
.study-clients-section-hidden .study-clients-field-grid {
    opacity: 0.5;
}

/* Per-section preview-pane hide rules: when a hideable section is marked
   hidden, suppress only the specific preview element it controls — not the
   surrounding context. Scoped by the section wrap's `data-section-id` so
   each rule fires inside the right section's preview only. */
.study-clients-section-hidden[data-section-id="next_hint"]     .pv-next-hint     { display: none !important; }
.study-clients-section-hidden[data-section-id="progress"]      .pv-progress      { display: none !important; }
.study-clients-section-hidden[data-section-id="instruction"]   .pv-q-instruction { display: none !important; }
.study-clients-section-hidden[data-section-id="banners"]       .pv-banner        { display: none !important; }
.study-clients-section-hidden[data-section-id="status_bar"]    .pv-status-bar    { display: none !important; }
.study-clients-section-hidden[data-section-id="quota_overlay"] .pv-quota-overlay { display: none !important; }
.study-clients-section-hidden[data-section-id="back_button"]   .pv-actions .pv-btn-secondary { display: none !important; }

/* ===== Field grid ===== */
.study-clients-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.study-clients-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.study-clients-field-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.study-clients-field-input {
    display: flex;
    align-items: center;
    gap: 6px;
}
.study-clients-field-input input[type=color] {
    width: 36px;
    height: 28px;
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
}
.study-clients-field-input .form-input-sm {
    flex: 1;
    min-width: 0;
}
.study-clients-field-input select.form-input-sm { padding: 4px 8px; }
.study-clients-field-reset {
    background: transparent;
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    line-height: 1;
}
.study-clients-field-reset:hover { color: var(--accent); border-color: var(--accent); }
.study-clients-field-help {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ===== Preview pane wrapper ===== */
.study-clients-preview-wrap {
    border-top: 1px solid var(--border-primary);
    padding-top: 12px;
    margin-top: 8px;
}
.study-clients-preview-header {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.study-clients-preview {
    border: 1px dashed var(--border-primary);
    border-radius: 6px;
    padding: 16px;
    background: #ffffff;
    color: #1a1a1a;
    /* Force light backdrop regardless of builder theme, so the preview
       matches the survey runtime's always-light look. */
    color-scheme: light;
}

/* ===== Preview-block sample content =====
   Mirrors engine.css's rule shapes for the same elements but scoped to
   .vendor-style-preview / .study-clients-preview so they don't leak.
   Each rule consumes the same CSS variables the survey runtime does, so
   the same `:root` override changes both. */
.study-clients-preview {
    font-family: var(--survey-font-family, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: var(--survey-font-size-base, 16px);
    line-height: var(--survey-line-height-base, 1.5);
}

/* Page preview */
.study-clients-preview .pv-page { padding: 8px; }
.study-clients-preview .pv-page p { margin: 0 0 8px; }

/* Banner preview */
.study-clients-preview .pv-banner {
    padding: 8px 16px;
    text-align: center;
    font-size: 14px;
    margin: 4px 0;
    border: 1px solid;
}
.study-clients-preview .pv-banner-practice {
    background: var(--c-banner-bg, #fff8e1);
    color: var(--c-banner-fg, #6b5400);
    border-color: #e9d791;
}
.study-clients-preview .pv-banner-test {
    background: var(--c-test-banner-bg, #e3f2fd);
    color: var(--c-test-banner-fg, #0d47a1);
    border-color: #90caf9;
}

/* Progress preview */
.study-clients-preview .pv-progress {
    height: 3px;
    background: transparent;
    overflow: hidden;
}
.study-clients-preview .pv-progress-bar {
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, #0066cc 0%, #00d4d4 50%, #00cc66 100%);
    background-size: 200% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
}

/* Loading preview */
.study-clients-preview .pv-loading {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px;
}
.study-clients-preview .pv-loading-spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--loading-spinner-ring, #d0d4d8);
    border-top-color: var(--loading-spinner-accent, #0066cc);
    border-radius: 50%;
    animation: study-clients-spin 0.9s linear infinite;
}
.study-clients-preview .pv-loading-text {
    color: var(--loading-text-color, #6c757d);
    font-size: 14px;
}
@keyframes study-clients-spin { to { transform: rotate(360deg); } }

/* Question label / instruction */
.study-clients-preview .pv-q-label {
    font-size: var(--q-label-font-size, 16px);
    font-weight: var(--q-label-font-weight, 500);
    color: var(--q-label-color, #1a1a1a);
    line-height: var(--q-label-line-height, 1.4);
    margin-bottom: var(--q-label-margin-bottom, 12px);
}
.study-clients-preview .pv-q-sublabel {
    color: var(--c-muted, #6c757d);
    font-size: 13px;
}
.study-clients-preview .pv-q-instruction {
    font-size: var(--q-instruction-font-size, 13px);
    color: var(--q-instruction-color, #6c757d);
    line-height: var(--q-instruction-line-height, 1.4);
    margin-top: calc(var(--q-instruction-margin, 8px) * -1);
    margin-bottom: var(--q-instruction-margin, 8px);
}

/* Action bar */
.study-clients-preview .pv-actions {
    display: flex; gap: 8px; margin-top: 12px;
}
.study-clients-preview .pv-actions .pv-btn-primary { margin-left: auto; }
.study-clients-preview .pv-btn {
    padding: var(--btn-padding-y, 10px) var(--btn-padding-x, 20px);
    border-radius: var(--btn-radius, 6px);
    font-size: var(--btn-font-size, 16px);
    font-weight: var(--btn-font-weight, 400);
    cursor: pointer;
    border: 1px solid var(--btn-secondary-border, #d0d4d8);
    background: var(--btn-secondary-bg, #ffffff);
    color: var(--btn-secondary-text, #1a1a1a);
}
.study-clients-preview .pv-btn-primary {
    background: var(--c-primary, #0066cc);
    color: var(--btn-primary-text, #ffffff);
    border-color: var(--c-primary, #0066cc);
}
.study-clients-preview .pv-btn-primary:hover { background: var(--c-primary-hover, #0050a0); }
.study-clients-preview .pv-btn-primary:disabled { opacity: var(--btn-disabled-opacity, 0.55); cursor: not-allowed; }

/* Error bar */
.study-clients-preview .pv-error {
    color: var(--c-error, #c0392b);
    background: var(--error-bg, #fdecea);
    border: 1px solid var(--error-border, #f5c6cb);
    padding: var(--error-padding, 10px);
    font-size: var(--error-font-size, 14px);
    border-radius: var(--radius, 6px);
}

/* Next hint */
.study-clients-preview .pv-next-hint {
    margin-top: 6px;
    font-size: var(--next-hint-font-size, 13px);
    color: var(--next-hint-color, #6c757d);
    font-style: var(--next-hint-font-style, italic);
    text-align: right;
}

/* Back-button preview note (the back_button section has no style fields,
   so its preview just shows the action bar + an explanatory caption). */
.study-clients-preview .pv-back-button-note {
    margin-top: 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.4;
}

/* Text input */
.study-clients-preview .pv-q-input {
    width: 100%;
    padding: var(--input-padding-y, 10px) var(--input-padding-x, 12px);
    border: 1px solid var(--input-border, #d0d4d8);
    border-radius: var(--input-radius, 6px);
    background: var(--input-bg, #ffffff);
    font-size: var(--input-font-size, 16px);
    font-family: inherit;
}
.study-clients-preview .pv-q-input:focus {
    outline: 2px solid var(--input-border-focus, #0066cc);
    outline-offset: -1px;
}
.study-clients-preview .pv-q-input::placeholder {
    color: var(--input-placeholder, #9ea4ab);
}

/* Enumerated list */
.study-clients-preview .pv-q-options {
    display: flex; flex-direction: column;
    gap: var(--q-options-gap, 4px);
}
.study-clients-preview .pv-q-option {
    display: flex; align-items: center; gap: 8px;
    padding: var(--q-option-padding-y, 8px) var(--q-option-padding-x, 12px);
    line-height: var(--q-option-line-height, 1.45);
    font-size: var(--q-option-font-size, 16px);
    color: var(--q-option-text-color, #1a1a1a);
    background: var(--q-option-bg, #ffffff);
    border: 1px solid var(--q-option-border, #d0d4d8);
    border-radius: var(--q-option-radius, 6px);
    cursor: pointer;
}
.study-clients-preview .pv-q-option:hover {
    background: var(--q-option-hover-bg, #f5f8fc);
    border-color: var(--q-option-hover-border, #b8c4d0);
}
.study-clients-preview .pv-q-option input[type=radio]:checked,
.study-clients-preview .pv-q-option input[type=checkbox]:checked {
    accent-color: var(--q-option-accent, #0066cc);
}

/* Dropdown native */
.study-clients-preview .pv-select {
    padding: var(--select-padding-y, 10px) var(--select-padding-x, 12px);
    border: 1px solid var(--select-border, #d0d4d8);
    background: var(--select-bg, #ffffff);
    font-size: var(--select-font-size, 16px);
    border-radius: var(--radius, 6px);
    width: 100%;
}

/* Searchable dropdown */
.study-clients-preview .pv-searchlist {
    border: 1px solid var(--searchlist-search-border, #d0d4d8);
    border-radius: var(--radius, 6px);
    overflow: hidden;
}
.study-clients-preview .pv-searchlist-search {
    width: 100%;
    padding: var(--searchlist-search-padding-y, 8px) var(--searchlist-search-padding-x, 12px);
    border: none;
    border-bottom: 1px solid var(--searchlist-search-border, #d0d4d8);
    font: inherit;
    box-sizing: border-box;
}
.study-clients-preview .pv-searchlist-list { max-height: 160px; overflow-y: auto; }
.study-clients-preview .pv-searchlist-row {
    display: flex; align-items: center; gap: 8px;
    padding: var(--searchlist-row-padding-y, 6px) var(--searchlist-row-padding-x, 12px);
    border-bottom: 1px solid var(--searchlist-row-border, #eef2f7);
    cursor: pointer;
}
.study-clients-preview .pv-searchlist-row:last-child { border-bottom: 0; }
.study-clients-preview .pv-searchlist-row:hover {
    background: var(--searchlist-row-hover-bg, #f5f8fc);
}

/* Multi-select tags */
.study-clients-preview .pv-dropdown-multi-tags {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
}
.study-clients-preview .pv-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: var(--tag-padding-y, 2px) var(--tag-padding-x, 8px);
    background: var(--tag-bg, #eef2f7);
    border: 1px solid var(--tag-border, #d3dae3);
    border-radius: var(--tag-radius, 14px);
    color: var(--tag-text, #1a1a1a);
    font-size: 13px;
}
.study-clients-preview .pv-tag button {
    background: transparent;
    border: 0;
    color: var(--tag-close-color, #555);
    cursor: pointer;
    font-size: 14px;
    padding: 0;
}

/* Matrix */
.study-clients-preview .pv-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--matrix-font-size, 14px);
}
.study-clients-preview .pv-matrix th,
.study-clients-preview .pv-matrix td {
    padding: var(--matrix-cell-padding-y, 8px) var(--matrix-cell-padding-x, 8px);
    border: 1px solid var(--matrix-border, #d0d4d8);
    text-align: center;
}
.study-clients-preview .pv-matrix thead th {
    background: var(--matrix-header-bg, #f8f9fa);
    color: var(--matrix-header-text, #1a1a1a);
}
.study-clients-preview .pv-matrix tbody td:first-child {
    background: var(--matrix-row-label-bg, #ffffff);
    text-align: left;
}
.study-clients-preview .pv-matrix tbody tr:nth-child(even) td:first-child {
    background: var(--matrix-alt-row-bg, #fafbfc);
}

/* Multiple Yes/No */
.study-clients-preview .pv-yesno-row {
    display: flex; align-items: center; gap: 8px;
    padding: var(--yesno-row-padding-y, 8px) 4px;
    border-bottom: 1px solid var(--yesno-row-border, #eef2f7);
}
.study-clients-preview .pv-yesno-row > span:first-child { flex: 1; }
.study-clients-preview .pv-yesno-btn {
    padding: 4px 12px;
    background: var(--yesno-btn-bg, #ffffff);
    color: var(--yesno-btn-text, #1a1a1a);
    border: 1px solid var(--yesno-btn-border, #d0d4d8);
    border-radius: 4px;
    cursor: pointer;
}
.study-clients-preview .pv-yesno-selected {
    background: var(--yesno-selected-bg, #0066cc);
    color: var(--yesno-selected-text, #ffffff);
    border-color: var(--yesno-selected-bg, #0066cc);
}

/* Pick N */
.study-clients-preview .pv-pickn-item {
    display: flex; align-items: center; gap: 8px;
    padding: var(--pickn-item-padding-y, 8px) var(--pickn-item-padding-x, 12px);
    border: 1px solid var(--pickn-item-border, #d0d4d8);
    border-radius: 6px;
    cursor: pointer;
}
.study-clients-preview .pv-pickn-item:hover { background: var(--pickn-item-hover-bg, #f5f8fc); }
.study-clients-preview .pv-pickn-item:has(input:checked) {
    background: var(--pickn-selected-bg, #eaf3ff);
    border-color: var(--pickn-selected-border, #0066cc);
}
.study-clients-preview .pv-pickn-item > span:nth-child(2) { flex: 1; }
.study-clients-preview .pv-pickn-badge {
    background: var(--pickn-badge-bg, #0066cc);
    color: var(--pickn-badge-text, #ffffff);
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Ranking */
.study-clients-preview .pv-ranking-list { display: flex; flex-direction: column; gap: 6px; }
.study-clients-preview .pv-ranking-item {
    display: flex; align-items: center; gap: 8px;
    padding: var(--ranking-item-padding-y, 10px) var(--ranking-item-padding-x, 12px);
    border: 1px solid var(--ranking-item-border, #d0d4d8);
    border-radius: 6px;
}
.study-clients-preview .pv-rank-num {
    background: var(--ranking-rank-bg, #0066cc);
    color: var(--ranking-rank-text, #ffffff);
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.study-clients-preview .pv-drag { color: var(--ranking-drag-handle, #9ea4ab); cursor: grab; }

/* Range */
.study-clients-preview .pv-range-row {
    display: flex; align-items: center; gap: 6px;
}
.study-clients-preview .pv-range-anchor { color: var(--range-anchor-color, #6c757d); font-size: 13px; }
.study-clients-preview .pv-range-btn {
    padding: var(--range-btn-padding-y, 8px) var(--range-btn-padding-x, 12px);
    background: var(--range-btn-bg, #ffffff);
    color: var(--range-btn-text, #1a1a1a);
    border: 1px solid var(--range-btn-border, #d0d4d8);
    border-radius: 4px;
    cursor: pointer;
}
.study-clients-preview .pv-range-selected {
    background: var(--range-selected-bg, #0066cc);
    color: var(--range-selected-text, #ffffff);
    border-color: var(--range-selected-bg, #0066cc);
}

/* Slider */
.study-clients-preview .pv-slider {
    position: relative;
    height: 6px;
    background: var(--slider-track-color, #d0d4d8);
    border-radius: 3px;
    margin: 16px 0 4px;
}
.study-clients-preview .pv-slider-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 50%;
    background: var(--slider-fill-color, #0066cc);
    border-radius: 3px;
}
.study-clients-preview .pv-slider-thumb {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--slider-thumb-size, 20px);
    height: var(--slider-thumb-size, 20px);
    background: var(--slider-thumb-color, #0066cc);
    border-radius: 50%;
}
.study-clients-preview .pv-slider-anchors {
    display: flex;
    justify-content: space-between;
    color: var(--slider-anchor-color, #6c757d);
    font-size: 13px;
}

/* Drag drop */
.study-clients-preview .pv-dragdrop-row { display: flex; gap: 8px; margin-bottom: 12px; }
.study-clients-preview .pv-dragdrop-item {
    padding: 8px 12px;
    background: var(--dragdrop-item-bg, #ffffff);
    border: 1px solid var(--dragdrop-item-border, #d0d4d8);
    border-radius: 6px;
    cursor: grab;
}
.study-clients-preview .pv-dragdrop-zone {
    padding: 24px;
    text-align: center;
    border: 2px dashed var(--dragdrop-zone-border, #d0d4d8);
    border-radius: 6px;
    color: var(--c-muted, #6c757d);
}

/* Highlight text */
.study-clients-preview .pv-selecttext {
    padding: 12px;
    background: var(--selecttext-bg, #f8f9fa);
    border-radius: 6px;
    line-height: 1.6;
}
.study-clients-preview .pv-selecttext-selected {
    background: var(--selecttext-selected-bg, #fff3a0);
    border-bottom: 2px solid var(--selecttext-selected-border, #bfa800);
}

/* Image map */
.study-clients-preview .pv-imagemap {
    position: relative;
    width: 100%;
    height: 120px;
    border: 1px solid var(--imagemap-image-border, #d0d4d8);
    border-radius: 6px;
}
.study-clients-preview .pv-imagemap-image {
    display: flex; align-items: center; justify-content: center;
    height: 100%;
    color: var(--c-muted, #6c757d);
    background: #fafafa;
}
.study-clients-preview .pv-imagemap-marker {
    position: absolute;
    left: 40%; top: 50%;
    width: var(--imagemap-marker-size, 20px);
    height: var(--imagemap-marker-size, 20px);
    background: var(--imagemap-marker-color, #ff0000);
    border: 2px solid var(--imagemap-marker-border, #ffffff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Heatmap */
.study-clients-preview .pv-heatmap {
    position: relative;
    width: 100%;
    height: 120px;
    background: #fafafa;
    border: 1px solid var(--c-border, #d0d4d8);
    border-radius: 6px;
}
.study-clients-preview .pv-heatmap-point {
    position: absolute;
    width: var(--heatmap-point-size, 12px);
    height: var(--heatmap-point-size, 12px);
    background: var(--heatmap-point-color, #ff0000);
    border-radius: 50%;
    opacity: 0.7;
    transform: translate(-50%, -50%);
}

/* Display text */
.study-clients-preview .pv-displaytext {
    padding: var(--displaytext-padding, 16px);
    background: var(--displaytext-bg, #f8f9fa);
    color: var(--displaytext-color, #1a1a1a);
    border-radius: var(--displaytext-radius, 6px);
}
.study-clients-preview .pv-displaytext p { margin: 0; }

/* Media */
.study-clients-preview .pv-media-controls {
    display: flex; gap: 8px; margin-bottom: 8px;
}
.study-clients-preview .pv-media-record {
    padding: 8px 16px;
    background: var(--media-record-bg, #0066cc);
    color: var(--media-record-text, #ffffff);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.study-clients-preview .pv-media-stop {
    padding: 8px 16px;
    background: var(--media-stop-bg, #c0392b);
    color: var(--media-stop-text, #ffffff);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.study-clients-preview .pv-media-preview {
    padding: 16px;
    border: 1px solid var(--media-preview-border, #d0d4d8);
    border-radius: 6px;
    text-align: center;
    color: var(--c-muted, #6c757d);
    margin-bottom: 8px;
}
.study-clients-preview .pv-media-status {
    color: var(--media-status-color, #6c757d);
    font-size: 13px;
}

/* Quota overlay */
.study-clients-preview .pv-quota-overlay {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 32px;
    background: var(--quota-overlay-bg, #ffffff);
    border: 1px solid var(--c-border, #d0d4d8);
    border-radius: 6px;
}
.study-clients-preview .pv-quota-spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--quota-spinner-ring, #d0d4d8);
    border-top-color: var(--quota-spinner-color, #0066cc);
    border-radius: 50%;
    animation: study-clients-spin 0.9s linear infinite;
}
.study-clients-preview .pv-quota-message {
    color: var(--quota-message-color, #6c757d);
    font-size: var(--quota-message-size, 16px);
}

/* Placeholder for previews not yet implemented */
.study-clients-preview .pv-placeholder {
    text-align: center;
    color: var(--c-muted, #6c757d);
    font-style: italic;
    padding: 16px;
}

/* ====================================================================== */
/* Phase 2 — new preview blocks                                            */
/* ====================================================================== */

/* status_bar */
.study-clients-preview .pv-status-bar {
    margin-top: var(--status-margin-top, 16px);
    font-size: var(--status-font-size, 13px);
    color: var(--status-color, #6c757d);
}

/* text_list — multi-box text_input */
.study-clients-preview .pv-textlist-row {
    display: flex;
    gap: var(--text-list-row-gap, 10px);
    align-items: center;
    margin-bottom: var(--text-list-rows-gap, 8px);
}
.study-clients-preview .pv-textlist-row:last-child { margin-bottom: 0; }
.study-clients-preview .pv-textlist-label {
    min-width: var(--text-list-label-min-width, 140px);
    color: var(--text-list-label-color, #444);
    font-weight: var(--text-list-label-font-weight, 500);
}
.study-clients-preview .pv-textlist-input {
    flex: 1;
    max-width: var(--text-list-input-max-width, 360px);
}

/* other_input */
.study-clients-preview .pv-other-row {
    display: flex;
    align-items: center;
    gap: var(--other-row-gap, 8px);
    margin-top: var(--other-panel-margin-top, 8px);
}
.study-clients-preview .pv-other-label {
    font-size: var(--other-label-font-size, 13px);
    color: var(--other-label-color, #555);
    white-space: nowrap;
}
.study-clients-preview .pv-other-input {
    flex: 1;
    max-width: var(--other-input-max-width, 360px);
    padding: var(--other-input-padding-y, 6px) var(--other-input-padding-x, 10px);
    border: 1px solid var(--c-border, #d0d4d8);
    border-radius: var(--radius, 6px);
    font: inherit;
}

/* signature */
.study-clients-preview .pv-signature-pad {
    border: var(--signature-pad-border-width, 1px)
            var(--signature-pad-border-style, dashed)
            var(--signature-pad-border-color, #aaa);
    background: var(--signature-pad-bg, #fff);
    border-radius: var(--signature-pad-radius, 4px);
    overflow: hidden;
}
.study-clients-preview .pv-signature-actions {
    display: flex;
    align-items: center;
    gap: var(--signature-actions-gap, 8px);
    margin-top: var(--signature-actions-margin, 6px);
}
.study-clients-preview .pv-signature-saved {
    color: var(--signature-saved-color, #777);
    font-size: var(--signature-saved-font-size, 12px);
}

/* permission_help — 3-state help blocks */
.study-clients-preview .pv-perm-help {
    padding: var(--perm-help-padding-y, 14px) var(--perm-help-padding-x, 12px);
    border-radius: var(--perm-help-radius, 8px);
    margin: var(--perm-help-margin-y, 10px) 0;
    line-height: 1.5;
}
.study-clients-preview .pv-perm-help p { margin: 4px 0 0 0; }
.study-clients-preview .pv-perm-asking {
    background: var(--perm-asking-bg, #eef6ff);
    border: 1px solid var(--perm-asking-border, #bfdbfe);
    color: var(--perm-asking-text, #334155);
}
.study-clients-preview .pv-perm-asking strong { color: var(--perm-asking-heading-color, #0f172a); }
.study-clients-preview .pv-perm-denied {
    background: var(--perm-denied-bg, #fef3c7);
    border: 1px solid var(--perm-denied-border, #fbbf24);
    color: var(--perm-denied-text, #451a03);
}
.study-clients-preview .pv-perm-denied strong { color: var(--perm-denied-heading-color, #7c2d12); }
.study-clients-preview .pv-perm-unavailable {
    background: var(--perm-unavailable-bg, #f1f5f9);
    border: 1px solid var(--perm-unavailable-border, #cbd5e1);
    color: var(--perm-unavailable-text, #475569);
}

/* capture_geolocation */
.study-clients-preview .pv-geo-status {
    color: var(--geo-status-color, #6c757d);
    font-size: var(--geo-status-font-size, 0.875rem);
    margin: 8px 0;
}
.study-clients-preview .pv-geo-retry {
    background: var(--geo-retry-bg, #fff);
    color: var(--geo-retry-text, #1a73e8);
    border: 1px solid var(--geo-retry-border, #dadce0);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
}

/* finish_page */
.study-clients-preview .pv-finish-page {
    padding: var(--finish-page-padding, 24px);
    text-align: center;
    font-size: var(--finish-page-font-size, 18px);
}
.study-clients-preview .pv-finish-heading {
    font-size: var(--thank-you-heading-font-size, 28px);
    margin: 0 0 var(--thank-you-heading-margin, 16px);
}
.study-clients-preview .pv-finish-body { margin: 0; }

/* lockdown — multi-tab takeover screen */
.study-clients-preview .pv-lockdown {
    background: var(--lockdown-bg, #fff);
    color: var(--lockdown-text-color, #222);
    padding: var(--lockdown-padding, 24px);
    text-align: center;
    border-radius: 8px;
    border: 1px solid var(--c-border, #d0d4d8);
}
.study-clients-preview .pv-lockdown-icon {
    font-size: var(--lockdown-icon-size, 48px);
    line-height: 1;
    margin-bottom: 16px;
}
.study-clients-preview .pv-lockdown-heading {
    color: var(--lockdown-heading-color, #c0392b);
    font-size: var(--lockdown-heading-font-size, 1.6rem);
    font-weight: 600;
    margin: 0 0 16px;
    line-height: 1.3;
}
.study-clients-preview .pv-lockdown-body {
    color: var(--lockdown-paragraph-color, #444);
    font-size: var(--lockdown-paragraph-font-size, 1rem);
    line-height: 1.55;
    margin: 0 0 12px;
}
.study-clients-preview .pv-lockdown-body-secondary {
    color: var(--lockdown-secondary-color, #666);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 24px;
}
.study-clients-preview .pv-lockdown-button {
    background: var(--lockdown-button-bg, #0066cc);
    color: var(--lockdown-button-text, #fff);
    border: 1px solid var(--lockdown-button-border, #0066cc);
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
}

/* resume_prompt */
.study-clients-preview .pv-resume {
    background: var(--resume-bg, #fff);
    color: var(--resume-color, #333);
    padding: var(--resume-padding-y, 40px) var(--resume-padding-x, 20px);
    border-radius: 8px;
    border: 1px solid var(--c-border, #d0d4d8);
}
.study-clients-preview .pv-resume-heading {
    color: var(--resume-heading-color, #222);
    margin: 0 0 12px;
    font-size: var(--resume-heading-font-size, 1.5rem);
}
.study-clients-preview .pv-resume-context {
    color: var(--resume-context-color, #555);
    font-size: 0.95rem;
    margin-bottom: 24px;
}
.study-clients-preview .pv-resume-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-weight: 500;
    margin-bottom: 12px;
}
.study-clients-preview .pv-resume-btn:last-child { margin-bottom: 0; }
.study-clients-preview .pv-resume-btn-primary {
    background: var(--resume-btn-bg, #0066cc);
    color: var(--resume-btn-text, #fff);
    border-color: var(--resume-btn-bg, #0066cc);
}
.study-clients-preview .pv-resume-btn-primary:hover {
    background: var(--resume-btn-hover-bg, #0050a0);
}
.study-clients-preview .pv-resume-btn-secondary:hover {
    background: var(--resume-btn-secondary-hover-bg, #f5f5f5);
}

/* error_page */
.study-clients-preview .pv-errpage {
    background: var(--errpage-bg, #fff);
    color: var(--errpage-color, #333);
    padding: var(--errpage-padding, 40px);
    max-width: var(--errpage-max-width, 600px);
    border-radius: 8px;
    border: 1px solid var(--c-border, #d0d4d8);
}
.study-clients-preview .pv-errpage-heading {
    color: var(--errpage-heading-color, #c0392b);
    margin: 0 0 16px;
}
.study-clients-preview .pv-errpage-code {
    background: var(--errpage-code-bg, #f4f4f4);
    padding: var(--errpage-code-padding, 2px 6px);
    border-radius: var(--errpage-code-radius, 3px);
    font-family: ui-monospace, monospace;
    font-size: 0.95em;
}

/* ===== Branding card (logo / favicon / redirects) =======================
   All colors pull from the theme tokens in css/variables.css so the card
   adapts to dark and light themes. Don't hardcode hex colors here. */

.study-clients-asset-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    min-height: 40px;
    padding: 4px 8px;
    margin-right: 8px;
    background: var(--bg-elevated);
    border: 1px dashed var(--border-primary);
    border-radius: 4px;
    vertical-align: middle;
    color: var(--text-secondary);
}
.study-clients-asset-thumb {
    object-fit: contain;
    display: block;
}
.study-clients-tokens-list {
    margin: 6px 0 12px 16px;
    padding: 0;
    list-style: disc;
    font-size: 0.9em;
    color: var(--text-secondary);
}
.study-clients-tokens-list code {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid var(--border-secondary);
    font-family: ui-monospace, monospace;
}
.study-clients-field-help {
    margin-top: 4px;
    font-size: 0.85em;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Branding card: single-column layout (URL fields are long; uploads are
   chunky) — override the multi-column grid the style card uses. Inputs
   stretch to fill the row width so long URLs are easy to read/edit. */
.study-clients-branding-card .study-clients-field-grid {
    grid-template-columns: 1fr;
}
.study-clients-branding-card .study-clients-field-input {
    flex-wrap: wrap;
}
.study-clients-branding-card .study-clients-field-input input[type=text],
.study-clients-branding-card .study-clients-field-input select {
    flex: 1 1 100%;
    min-width: 0;
}