/* FormEngine — S.C. Swiderski branding */
* {
    -webkit-tap-highlight-color: rgba(220, 166, 39, 0.2);
}

:root {
    --scs-black: #1a1a1a;
    --scs-gold: #dca627;
    --scs-gold-light: #e8c964;
    --bs-primary: #dca627;
    --bs-primary-rgb: 220, 166, 39;
    --bs-link-color: #b88718;
    --bs-link-hover-color: #dca627;
    --brand-surface-bg: #f4f6f9;
    --brand-emphasis-color: #1f2937;
    --app-bg: #f3f5f8;
    --app-surface-1: #ffffff;
    --app-surface-2: #f7f9fc;
    --app-border: #d9dee6;
    --app-text: #111827;
    --app-muted: #5f6b7a;
    --app-accent: var(--scs-gold);
    --app-accent-contrast: #000;
    --app-accent-soft: rgba(220, 166, 39, 0.12);
    --app-navbar-height: 56px;
    --app-sticky-offset: calc(var(--app-navbar-height) + 0.75rem);



    --bs-focus-ring-color: rgba(220, 166, 39, 0.35);
    --app-focus-ring-color: rgba(220, 166, 39, 0.35);

}

[data-bs-theme="dark"] {
    --bs-link-color: #e8c964;
    --bs-link-hover-color: #f0d98f;
    --brand-surface-bg: #242424;
    --brand-emphasis-color: #ededed;
    --app-bg: #121212;
    --app-surface-1: #202020;
    --app-surface-2: #2a2a2a;
    --app-border: #3b3b3b;
    --app-text: #f3f4f6;
    --app-muted: #b3b3b3;
    --app-accent: #e8c964;
    --app-accent-contrast: #14110b;
    --app-accent-soft: rgba(220, 166, 39, 0.18);
    --bs-focus-ring-color: rgba(232, 201, 100, 0.4);
    --app-focus-ring-color: rgba(232, 201, 100, 0.4);

}

@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) {
        --bs-link-color: #e8c964;
        --bs-link-hover-color: #f0d98f;
        --brand-surface-bg: #242424;
        --brand-emphasis-color: #ededed;
        --app-bg: #121212;
        --app-surface-1: #202020;
        --app-surface-2: #2a2a2a;
        --app-border: #3b3b3b;
        --app-text: #f3f4f6;
        --app-muted: #b3b3b3;
        --app-accent: #e8c964;
        --app-accent-contrast: #14110b;
        --app-accent-soft: rgba(220, 166, 39, 0.18);
    }
}

.brand-surface {
    background-color: var(--brand-surface-bg);
}

.brand-emphasis {
    color: var(--brand-emphasis-color);
}


body {
    background-color: var(--app-bg);
    color: var(--app-text);
}

[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-light-subtle {
    background-color: var(--app-surface-1) !important;
    color: var(--app-text) !important;
}

.signature-pad-wrap {
    background-color: #fffdf8 !important;
}

.signature-pad {
    display: block;
    min-height: 180px;
    background-color: #ffffff;
    border-radius: 0.25rem;
}

[data-bs-theme="dark"] .signature-pad-wrap {
    background-color: #fffdf8 !important;
    color: #1f2937;
}

[data-bs-theme="dark"] .signature-pad {
    background-color: #ffffff !important;
}

.submission-signature-preview {
    display: block;
    background-color: #ffffff !important;
}

[data-bs-theme="dark"] .submission-signature-preview {
    background-color: #ffffff !important;
}

[data-bs-theme="dark"] .card-header.bg-white,
[data-bs-theme="dark"] .card-header.bg-light,
[data-bs-theme="dark"] .card-header.bg-light-subtle {
    background-color: var(--app-surface-2) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.text-bg-light,
[data-bs-theme="dark"] .text-bg-light {
    background-color: #2f2f2f !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
}

[data-bs-theme="dark"] .table > thead > tr > th,
[data-bs-theme="dark"] .table > thead > tr > td {
    background-color: var(--app-surface-2) !important;
    color: var(--app-text) !important;
    border-bottom-color: var(--app-border) !important;
}

[data-bs-theme="dark"] .table-light {
    --bs-table-bg: var(--app-surface-2);
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
    --bs-table-striped-bg: #2d2d2d;
    --bs-table-hover-bg: #333333;
}

.app-surface-1 {
    background-color: var(--app-surface-1) !important;
}

.app-surface-2 {
    background-color: var(--app-surface-2) !important;
}

.app-border {
    border-color: var(--app-border) !important;
}

.app-text {
    color: var(--app-text) !important;
}

.app-muted {
    color: var(--app-muted) !important;
}

.app-accent-soft {
    background-color: var(--app-accent-soft) !important;
}

.app-card {
    background-color: var(--app-surface-1);
    border: 1px solid var(--app-border);
}

.origin-chip {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    line-height: 1;
}

.origin-chip-fe {
    background-color: var(--scs-gold);
    color: #1a1a1a;
}

.origin-chip-pa {
    background-color: #742774;
    color: #ffffff;
}
























/* Override Bootstrap primary */
.btn-primary {
    --bs-btn-color: var(--app-accent-contrast);
    --bs-btn-bg: var(--scs-gold);
    --bs-btn-border-color: var(--scs-gold);
    --bs-btn-hover-color: var(--app-accent-contrast);
    --bs-btn-hover-bg: var(--scs-gold-light);
    --bs-btn-hover-border-color: var(--scs-gold-light);
    --bs-btn-focus-shadow-rgb: 220, 166, 39;
    --bs-btn-active-color: var(--app-accent-contrast);
    --bs-btn-active-bg: var(--scs-gold-light);
    --bs-btn-active-border-color: var(--scs-gold-light);
    --bs-btn-disabled-color: var(--app-accent-contrast);
    --bs-btn-disabled-bg: var(--scs-gold);
    --bs-btn-disabled-border-color: var(--scs-gold);
    background-color: var(--scs-gold);
    border-color: var(--scs-gold);
    color: var(--app-accent-contrast);
}
.btn-primary:hover {
    background-color: var(--scs-gold-light);
    border-color: var(--scs-gold-light);
    color: var(--app-accent-contrast);
}
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--scs-gold-light);
    border-color: var(--scs-gold-light);
    color: var(--app-accent-contrast);
}
.btn-outline-primary {
    --bs-btn-color: var(--scs-gold);
    --bs-btn-border-color: var(--scs-gold);
    --bs-btn-hover-color: var(--app-accent-contrast);
    --bs-btn-hover-bg: var(--scs-gold);
    --bs-btn-hover-border-color: var(--scs-gold);
    --bs-btn-focus-shadow-rgb: 220, 166, 39;
    --bs-btn-active-color: var(--app-accent-contrast);
    --bs-btn-active-bg: var(--scs-gold);
    --bs-btn-active-border-color: var(--scs-gold);
    --bs-btn-disabled-color: var(--scs-gold);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--scs-gold);
    color: var(--scs-gold);
    border-color: var(--scs-gold);
}
.btn-outline-primary:hover {
    background-color: var(--scs-gold);
    border-color: var(--scs-gold);
    color: var(--app-accent-contrast);
}
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--scs-gold);
    border-color: var(--scs-gold);
    color: var(--app-accent-contrast);
}

.theme-toggle-group .theme-toggle-btn {
    border-color: var(--app-border);
    color: var(--app-muted);
    background: var(--app-surface-1);
}

.theme-toggle-group .theme-toggle-btn:hover {
    color: var(--app-text);
    border-color: var(--scs-gold);
    background: var(--app-accent-soft);
}

.theme-toggle-group .theme-toggle-btn.active,
.theme-toggle-group .theme-toggle-btn:active,
.theme-toggle-group .theme-toggle-btn[aria-pressed="true"] {
    color: var(--app-accent-contrast);
    border-color: var(--scs-gold);
    background: var(--scs-gold);
}


/* Gold focus ring consistency across fields and buttons */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus,
.btn:focus-visible,
.dropdown-toggle:focus,
.dropdown-toggle:focus-visible,
.page-link:focus,
.page-link:focus-visible {
    border-color: var(--scs-gold-light);
    box-shadow: 0 0 0 0.25rem var(--app-focus-ring-color);
}

/* Gold checked/selected states for checkbox and radio controls */
.form-check-input,
input[type="checkbox"],
input[type="radio"],
.likert-radio {
    accent-color: var(--scs-gold);
}

.form-check-input:checked {
    background-color: var(--scs-gold);
    border-color: var(--scs-gold);
}

.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--scs-gold);
    border-color: var(--scs-gold);
}

/* Builder field cards */
.field-card {
    --builder-section-level: 0;
    --builder-indent-step: 1rem;
    margin-left: calc(var(--builder-section-level) * var(--builder-indent-step));
    position: relative;
    border-radius: 0.5rem;
    transition: box-shadow 0.15s ease, margin-left 0.15s ease, border-color 0.15s ease;
    /* Land jumped-to cards (outline, Map, new fields) clear of the sticky navbar, builder header
       and canvas toolbar. */
    scroll-margin-top: calc(var(--app-sticky-offset) + 7rem);
}

.field-card > .card-body {
    padding: 0.75rem 1rem;
}

.builder-field-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* The title is the editor toggle (a real button for keyboard and screen readers); its ::after
   stretches the hit area over the summary, and the card's own controls sit above it. */
.builder-field-card-summary {
    position: relative;
    cursor: pointer;
}

.builder-field-card-summary:has(.builder-field-card-label:disabled) {
    cursor: default;
}

.builder-field-card-label {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--app-text);
    font: inherit;
    font-weight: 500;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: inherit;
}

.builder-field-card-label::after {
    content: "";
    position: absolute;
    inset: -0.25rem;
    border-radius: 0.375rem;
}

.builder-field-card-label:focus-visible {
    outline: none;
}

.builder-field-card-label:focus-visible::after {
    box-shadow: 0 0 0 3px var(--app-focus-ring-color);
}

/* Controls before the title in the DOM need lifting over its hit area. Later ones already paint
   above it once positioned, and must not get a z-index: that makes a stacking context which traps
   the ⋯ menu under the insert line and the next card. */
.builder-field-select-wrap,
.field-card .drag-handle {
    position: relative;
    z-index: 1;
}

.builder-field-card-actions,
.help-text-display a,
[data-field-logic-badge] {
    position: relative;
}

.builder-field-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
    min-width: 0;
}

.builder-field-card-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
    margin-left: auto;
}

@media (max-width: 575.98px) {
    /* On a phone the controls leave too little room beside the label, so it takes its own line. */
    .builder-field-card-header {
        flex-wrap: wrap;
    }

    .builder-field-card-label {
        order: 1;
        flex-basis: 100%;
    }
}

/* Quiet icon controls on cards (lock, collapse, ⋯): no frame until hovered or open. */
.builder-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--app-muted);
    line-height: 1;
}

.builder-icon-button:hover,
.builder-icon-button[aria-expanded="true"].show {
    background: var(--app-surface-2);
    color: var(--app-text);
}

.builder-icon-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--app-focus-ring-color);
}

.builder-icon-button:disabled {
    opacity: 0.5;
}

/* The card's ⋯ menu on the editor's type scale rather than Bootstrap's 16px default. */
.builder-card-menu {
    --bs-dropdown-min-width: 12rem;
    --bs-dropdown-padding-y: 0.25rem;
    --bs-dropdown-font-size: 0.8125rem;
    --bs-dropdown-border-color: var(--app-border);
    --bs-dropdown-border-radius: 0.375rem;
    --bs-dropdown-item-padding-x: 0.625rem;
    --bs-dropdown-item-padding-y: 0.375rem;
    --bs-dropdown-divider-margin-y: 0.25rem;
    padding-inline: 0.25rem;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.14);
}

.builder-card-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.25rem;
}

.builder-card-menu .dropdown-item > .bi {
    width: 1rem;
    color: var(--app-muted);
}

.builder-card-menu .dropdown-item.text-danger > .bi {
    color: inherit;
}

/* Cards take focus for keyboard shortcuts (tabindex -1, so not a Tab stop). */
.field-card:focus {
    outline: none;
}

.field-card:focus-visible {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px var(--app-focus-ring-color);
}

.builder-shortcuts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
}

.builder-shortcuts dt {
    font-weight: 400;
    white-space: nowrap;
}

.builder-shortcuts dd {
    margin: 0;
}

/* An insert line in the gap below each card, shown on hover or keyboard focus. It stays out of the
   way (and out of the pointer's path into the next card) until then. */
.builder-insert-point {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: calc(-0.25rem - 11px);
    z-index: 3;
    display: flex;
    align-items: center;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.builder-insert-point::before,
.builder-insert-point::after {
    content: "";
    flex: 1 1 auto;
    height: 2px;
    background: var(--app-accent);
}

.builder-insert-point-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--app-accent);
    color: var(--app-accent-contrast);
    font-size: 0.75rem;
}

.field-card:hover > .builder-insert-point,
.builder-insert-point:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

.builder-insert-point:focus-visible {
    outline: none;
}

.builder-insert-point:focus-visible .builder-insert-point-icon {
    box-shadow: 0 0 0 3px var(--app-focus-ring-color);
}

.builder-is-dragging .builder-insert-point {
    display: none;
}

/* Touch screens have no hover, so keep the button visible there. */
@media (hover: none) {
    .builder-insert-point {
        opacity: 1;
        pointer-events: auto;
    }

    .builder-insert-point::before,
    .builder-insert-point::after {
        opacity: 0;
    }
}

/* Landing marker after jumping to a field from the outline or the Map. */
@keyframes builder-field-flash {
    from { box-shadow: 0 0 0 3px var(--app-accent); }
    to { box-shadow: 0 0 0 3px transparent; }
}

.builder-field-flash {
    animation: builder-field-flash 1.6s ease-out;
}

/* The editor follows the card's own type scale (Actions artboard): small semibold labels,
   12px muted hints and a plain text tab strip, so an open card reads as one surface. */
.builder-field-editor {
    --builder-editor-gap: 0.75rem;
    padding-top: var(--builder-editor-gap);
}

.builder-field-editor-tabs {
    display: flex;
    gap: 1.25rem;
    margin: 0 0 var(--builder-editor-gap);
    border-bottom: 1px solid var(--app-border);
}

.builder-field-editor-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: -1px;
    padding: 0 0 0.5rem;
    color: var(--app-muted);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font-size: 0.8125rem;
}

.builder-field-editor-tab:hover {
    color: var(--app-text);
}

.builder-field-editor-tab.active {
    color: var(--app-text);
    font-weight: 600;
    border-bottom-color: var(--scs-gold);
}

.builder-field-editor-tab:focus-visible {
    outline: 2px solid var(--scs-gold);
    outline-offset: 2px;
}

.builder-field-editor [data-field-editor-panel="content"],
.builder-field-settings-wide,
.builder-field-settings-group {
    display: flex;
    flex-direction: column;
    gap: var(--builder-editor-gap);
}

.builder-field-editor .form-label {
    margin-bottom: 0.3rem;
    color: var(--app-text);
    font-size: 0.75rem;
    font-weight: 600;
}

.builder-field-editor .form-control-sm,
.builder-field-editor .form-select-sm,
.builder-field-editor .input-group-sm > .form-control,
.builder-field-editor .input-group-sm > .input-group-text {
    font-size: 0.8125rem;
    border-radius: 0.375rem;
}

.builder-field-editor .form-check-label {
    font-size: 0.8125rem;
}

.builder-field-editor .form-text,
.builder-field-editor-status {
    margin-top: 0.3rem;
    color: var(--app-muted);
    font-size: 0.75rem;
    line-height: 1rem;
}

.builder-field-editor-status {
    margin-top: var(--builder-editor-gap);
}

/* The status belongs to the Content/Settings form; Logic saves each change itself and sits after
   the form, so the line would otherwise float above it. */
.builder-field-editor:has([data-field-editor-panel="logic"]:not([hidden])) .builder-field-editor-status {
    display: none;
}

.builder-field-editor-pane[hidden] {
    display: none !important;
}

/* Settings tab: the type's own settings beside the general ones (key, tags, issue criteria)
   once the card is wide enough for two readable columns; wide blocks span both. */
.builder-field-settings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--builder-editor-gap) 1.5rem;
    align-items: start;
}

.builder-field-settings-wide {
    grid-column: 1 / -1;
    container-type: inline-size;
}

.builder-type-list {
    max-height: min(22rem, 50vh);
    margin-top: 0.5rem;
    overflow-y: auto;
    border: 1px solid var(--app-border);
    border-radius: 0.375rem;
    padding: 0.25rem;
}

.builder-type-group-label {
    padding: 0.5rem 0.5rem 0.25rem;
    color: var(--app-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.builder-type-option {
    padding: 0.4rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.builder-type-option[data-template-id] {
    display: flex;
    gap: 0.5rem;
}

.builder-type-option[hidden],
.builder-type-empty[hidden] {
    display: none;
}

/* One chip for everything a card says about a field (canvas artboards). Neutral by default;
   color only where it carries meaning: danger for constraints, info for the author's own tags.
   Tints are halved toward the surface so a row of chips stays quiet; the Bootstrap variables
   follow the dark theme. */
.builder-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    min-width: 0;
    padding: 0.0625rem 0.5rem;
    border: 1px solid var(--app-border);
    border-radius: 0.25rem;
    background: var(--app-surface-1);
    color: var(--app-text);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.125rem;
    white-space: nowrap;
}

.builder-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.builder-chip.is-danger {
    border-color: var(--bs-danger-border-subtle);
    background: color-mix(in srgb, var(--bs-danger-bg-subtle) 50%, var(--app-surface-1));
    color: var(--bs-danger-text-emphasis);
}

/* Only --bs-primary is rebranded gold; its -subtle variants keep Bootstrap's blue, the tag color
   in the artboards. */
.builder-chip.is-info {
    border-color: var(--bs-primary-border-subtle);
    border-radius: 0.625rem;
    background: color-mix(in srgb, var(--bs-primary-bg-subtle) 50%, var(--app-surface-1));
    color: var(--bs-primary-text-emphasis);
}

.builder-chip-remove {
    display: inline-flex;
    margin-right: -0.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    line-height: 1;
    opacity: 0.7;
}

.builder-chip-remove:hover {
    opacity: 1;
}

.builder-type-option-meta {
    color: var(--app-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.builder-type-option:hover,
.builder-type-option.is-active {
    background: var(--app-accent-soft);
}

.builder-type-option[aria-selected="true"] {
    font-weight: 600;
}

.builder-type-empty {
    margin: 0;
    padding: 0.5rem;
    color: var(--app-muted);
    font-size: 0.875rem;
}

/* Warnings inside a card: an icon and a sentence in the warning text color, not a Bootstrap
   alert box or the low-contrast text-warning yellow. */
.builder-notice {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.4rem;
    margin-top: 0.35rem;
    color: var(--bs-warning-text-emphasis);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.builder-notice.is-danger {
    color: var(--bs-danger-text-emphasis);
}

.builder-notice[hidden] {
    display: none;
}

/* Logic tab: one row per answer between rules, like the panel's related pages. */
.branching-rules {
    border-top: 1px solid var(--app-border);
}

.branching-rule-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 16rem);
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--app-border);
}

.branching-rule-option {
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.branching-rule-row > .bi {
    color: var(--app-muted);
}

.branching-rule-row > .builder-notice {
    grid-column: 1 / -1;
    margin-top: 0;
}

.builder-field-editor .input-group-sm > .input-group-text {
    border-color: var(--app-border);
    background: var(--app-surface-2);
    color: var(--app-muted);
}

/* Data source filter rows size to the editor, not the viewport: two columns per row when the
   editor is narrow, four when it is wide. In the four-column layout only the first row's labels
   show, reading as column headings; the rest stay for screen readers. */
.builder-ds-filters {
    display: grid;
    gap: 0.75rem;
}

.builder-ds-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.builder-ds-filter + .builder-ds-filter {
    padding-top: 0.75rem;
    border-top: 1px dashed var(--app-border);
}

@container (min-width: 36rem) {
    .builder-ds-filters {
        gap: 0.5rem;
    }

    .builder-ds-filter {
        grid-template-columns: 3fr 3fr 4fr 2fr;
    }

    .builder-ds-filter + .builder-ds-filter {
        padding-top: 0;
        border-top: 0;
    }

    .builder-ds-filter + .builder-ds-filter .form-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* The key is generated from the label, so present it as a value rather than an input to edit. */
.field-card input[name="key"][readonly] {
    font-family: var(--bs-font-monospace);
    font-size: 0.8125rem;
    background: var(--app-surface-2);
    color: var(--app-muted);
}

.builder-tab-status-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--scs-gold);
}

.field-card .drag-handle {
    cursor: grab;
}

.field-card .drag-handle.drag-handle-readonly {
    cursor: default;
}

/* Section headings are header rows over their fields (Main artboard): number, title, counts and
   quiet controls on one line above a rule. While open or selected they take a card's frame back
   so the editor has something to sit in. */
.field-card-heading {
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
}

.field-card + .field-card-heading {
    margin-top: 1rem;
}

/* Same side padding as a card, so checkboxes and grips line up down the list. */
.field-card-heading > .card-body {
    padding: 0.5rem 1rem 0.4rem;
}

.field-card-heading .builder-field-card-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.6rem;
}

.field-card-heading .builder-field-card-header {
    display: contents;
}

.field-card-heading .builder-field-card-label {
    font-size: 1rem;
    font-weight: 600;
}

.field-card-heading .builder-field-card-meta,
.field-card-heading .builder-section-meta {
    order: 1;
    margin: 0;
}

/* The row itself says "section"; the type chip would repeat it. */
.field-card-heading .builder-field-card-meta > .builder-chip:first-child {
    display: none;
}

.field-card-heading .builder-field-card-actions {
    order: 2;
}

.field-card-heading .help-text-display {
    order: 3;
    flex-basis: 100%;
}

.field-card-heading.field-card-editing,
.field-card-heading.builder-field-selected {
    border-width: 1px;
    border-radius: 0.5rem;
    background: var(--app-surface-1);
}

.field-card-heading.field-card-editing > .card-body,
.field-card-heading.builder-field-selected > .card-body {
    padding: 0.75rem 1rem;
}

.builder-section-number,
.builder-question-number {
    color: var(--app-muted);
    font-family: var(--bs-font-monospace);
    font-size: 0.75rem;
}

.builder-question-number {
    flex-shrink: 0;
}

body:not(.show-question-numbers) .builder-question-number {
    display: none;
}

.field-card-subsection::before,
.field-card-under-subsection::before {
    content: "";
    position: absolute;
    left: calc((-1 * var(--builder-indent-step)) + 0.45rem);
    top: 0;
    bottom: -0.5rem;
    width: 2px;
    background: var(--app-border);
    pointer-events: none;
}

.builder-section-meta {
    color: var(--app-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.builder-section-toggle {
    line-height: 1;
}

.field-card-section-collapsed {
    border-bottom-style: dashed;
}

.builder-section-collapsed-hidden {
    display: none;
}

.field-card:hover {
    border-color: color-mix(in srgb, var(--app-text) 22%, var(--app-border));
}

.field-card.field-card-editing {
    border-color: var(--scs-gold);
    box-shadow: 0 0 0 1px rgba(220, 166, 39, 0.35);
}

.field-card.builder-field-selected {
    border-color: var(--scs-gold);
    box-shadow: 0 0 0 2px rgba(220, 166, 39, 0.45);
}

/* Section locks are a per-session safety catch. The Locked chip on the section row marks the
   boundary; its fields lose their controls and quiet their titles, without graying the cards out
   as if the form were archived. */
.field-card.builder-section-locked:not(.field-card-heading) .builder-field-card-label {
    color: var(--app-muted);
}

.field-card.builder-section-locked .drag-handle {
    cursor: not-allowed;
}

.builder-field-select-wrap {
    min-height: auto;
}

.builder-field-select {
    margin-top: 0;
    cursor: pointer;
}

/* Keep long-form drag interactions focused on positioning rather than hover repainting. */
.builder-is-dragging .field-card {
    transition: none !important;
}

.builder-is-dragging .field-card:hover {
    box-shadow: none !important;
}

.field-card .drag-handle:hover {
    color: var(--app-text) !important;
}

.task-card-actions {
    border-top: 1px solid var(--app-border);
}

.task-card-link {
    color: var(--app-muted);
}

.task-card-link:hover {
    color: var(--app-text);
}

.task-card-link-danger {
    color: var(--bs-danger);
}

.task-card-link-danger:hover {
    color: var(--bs-danger-text-emphasis);
}

.task-card-delegate-form {
    padding: 0.625rem;
    border: 1px solid var(--app-border);
    border-radius: 0.5rem;
    background: var(--app-surface-1);
}

.builder-public-link {
    border: 1px solid var(--app-border);
    border-radius: 0.6rem;
    background: var(--app-surface-2);
    padding: 0.6rem 0.75rem;
}

.builder-public-link-url {
    color: var(--bs-body-color);
    text-decoration: none;
    word-break: break-all;
}

.builder-public-link-url:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}

.builder-access-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.builder-access-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Reads as a link, but it opens a dialog rather than navigating, so it is a button. */
.builder-text-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bs-link-color);
    font-size: 0.8125rem;
    font-weight: 500;
}

.builder-text-button:hover {
    color: var(--bs-link-hover-color);
    text-decoration: underline;
}

.builder-access-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
    font-size: 0.8125rem;
}

.builder-access-list dt {
    font-weight: 400;
}

.builder-access-list dd {
    margin: 0;
    color: var(--app-muted);
    text-align: right;
}

/* Related pages as plain rows between rules (Panels artboard), not a bordered list group. */
.builder-actions-list {
    border-top: 1px solid var(--app-border);
}

.builder-action-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--app-border);
    color: var(--app-text);
    font-size: 0.875rem;
    text-decoration: none;
}

.builder-action-link > span:first-child {
    flex: 1 1 auto;
}

.builder-action-link > .bi,
.builder-action-hint {
    color: var(--app-muted);
}

.builder-action-hint {
    font-size: 0.75rem;
}

.builder-action-link:hover {
    color: var(--app-text);
}

.builder-action-link:hover > span:first-child {
    text-decoration: underline;
}

/* Sortable ghost */
.sortable-ghost {
    opacity: 0.4;
    border: 2px dashed var(--scs-gold);
}

/* Rich help text rendering */
.help-text-display p {
    margin-bottom: 0.75rem;
}

.help-text-display p:last-child {
    margin-bottom: 0;
}

.help-text-display ul,
.help-text-display ol {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
}

.help-text-display table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: 0.85em;
}

.help-text-display th,
.help-text-display td {
    border: 1px solid var(--app-border);
    padding: 0.25rem 0.5rem;
}

.help-text-display img {
    max-width: 100%;
    height: auto;
}

/* Top navigation */
.navbar-formengine {
    background-color: var(--scs-black);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.navbar-formengine .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35);
}

.formengine-brand-icon {
    color: var(--scs-gold);
    font-size: 1.35rem;
}

.nav-task-badge {
    font-size: 0.7rem;
}

.avatar-initials {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--scs-gold);
    color: var(--app-accent-contrast);
    font-weight: 700;
    font-size: 0.72rem;
}

.navbar-account-toggle {
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
}

.navbar-account-toggle:hover,
.navbar-account-toggle:focus,
.navbar-account-toggle.show {
    border: 0;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.navbar-account-name {
    max-width: min(42vw, 14rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Keep support modal controls visible while long forms scroll independently. */
.support-report-modal .modal-content {
    max-height: calc(100vh - (var(--bs-modal-margin, 0.5rem) * 2));
    max-height: calc(100dvh - (var(--bs-modal-margin, 0.5rem) * 2));
    overflow: hidden;
}

.support-report-modal .support-report-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.support-report-modal .modal-header,
.support-report-modal .modal-footer {
    flex: 0 0 auto;
}

.support-report-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Issue reports: the reporter's thread and the admin detail share these. */
.support-report-conversation {
    overflow: hidden;
}

.support-report-detail-text,
.support-comment-body {
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.support-markdown > :first-child {
    margin-top: 0;
}

.support-markdown > :last-child {
    margin-bottom: 0;
}

.support-markdown h1,
.support-markdown h2,
.support-markdown h3,
.support-markdown h4,
.support-markdown h5,
.support-markdown h6 {
    margin: 1.35rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.support-markdown p,
.support-markdown ul,
.support-markdown ol,
.support-markdown blockquote,
.support-markdown pre,
.support-markdown table {
    margin-bottom: 1rem;
}

.support-markdown blockquote {
    padding-left: 1rem;
    color: var(--app-muted);
    border-left: 0.2rem solid var(--app-border);
}

.support-markdown pre {
    padding: 0.85rem;
    overflow-x: auto;
    background: var(--app-surface-2);
    border: 1px solid var(--app-border);
    border-radius: 0.5rem;
}

.support-markdown :not(pre) > code {
    padding: 0.1rem 0.3rem;
    background: var(--app-surface-2);
    border-radius: 0.25rem;
}

.support-markdown img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0.75rem 0;
    border: 1px solid var(--app-border);
    border-radius: 0.5rem;
}

.support-markdown table {
    width: 100%;
    border-collapse: collapse;
}

.support-markdown th,
.support-markdown td {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--app-border);
}

.support-comment-list {
    border-top: 1px solid var(--app-border);
}

.support-comment {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.85rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--app-border);
}

.support-comment-avatar {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    color: var(--app-text);
    background: var(--app-surface-2);
    border: 1px solid var(--app-border);
    border-radius: 50%;
    font-size: 0.82rem;
    font-weight: 700;
}

.support-comment-content {
    min-width: 0;
}

.support-comment-image-link {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    max-width: 100%;
    margin-top: 0.9rem;
    font-size: 0.78rem;
    text-decoration: none;
}

.support-comment-image {
    display: block;
    width: auto;
    max-width: min(100%, 38rem);
    max-height: 26rem;
    object-fit: contain;
    border: 1px solid var(--app-border);
    border-radius: 0.6rem;
}

.support-report-attachment-thumb {
    display: block;
    max-width: 16rem;
    max-height: 10rem;
    object-fit: cover;
    object-position: top left;
    border-radius: 2px;
}

.support-comment-form {
    padding: 1rem;
    background: var(--app-surface-2);
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
}

.support-comment-image-field {
    flex: 1 1 24rem;
    max-width: 36rem;
}

/* Form builder shell: a header over Outline/Settings | field canvas | Preview/Publish panels.
   From lg up the header and side panels pin under the navbar and the side panels scroll on their
   own, so the canvas keeps the page scroll; xl widens the side panels. Below lg everything stacks. */
.builder-header,
.builder-layout {
    --builder-header-height: 4rem;
    --builder-panel-top: calc(var(--app-navbar-height) + var(--builder-header-height));
}

.builder-header {
    display: flex;
    align-items: center;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
    min-height: var(--builder-header-height);
    padding: 0.5rem 1.5rem;
    background: var(--app-surface-1);
    border-bottom: 1px solid var(--app-border);
}

/* Title on the first row; status and save state share the second. The identity element is
   swapped out of band, so it lays out through the lead's grid rather than owning the row. */
.builder-header-lead {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    flex: 1 1 16rem;
    min-width: 0;
}

.builder-header-identity {
    display: contents;
}

.builder-header-title {
    grid-column: 1 / -1;
}

.builder-header-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--app-text);
    overflow-wrap: anywhere;
}

.builder-header-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--app-muted);
}

.builder-header-status-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--app-muted);
}

.builder-header-status.is-live .builder-header-status-dot {
    background: var(--bs-success);
}

.builder-header-status.is-live-changed {
    color: var(--bs-warning-text-emphasis);
}

.builder-header-status.is-live-changed .builder-header-status-dot {
    background: var(--app-accent);
}

.builder-header-status.is-archived .builder-header-status-dot {
    background: var(--app-text);
}

.builder-header-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.builder-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 1 20rem;
    min-width: 11rem;
    height: 2rem;
    padding: 0 0.6rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    background: var(--app-surface-2);
    color: var(--app-muted);
}

.builder-search:focus-within {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px var(--app-focus-ring-color);
}

.builder-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--app-text);
    font-size: 0.875rem;
}

.builder-search-count {
    flex-shrink: 0;
    font-size: 0.75rem;
    white-space: nowrap;
}

.builder-search-status {
    flex: 1 1 auto;
    margin: 0;
    color: var(--app-muted);
    font-size: 0.8125rem;
}

.builder-search-status[hidden],
.field-card.builder-search-hidden,
.builder-outline-item.builder-search-hidden {
    display: none !important;
}

/* Searching looks through collapsed sections too. */
#field-list.is-searching .field-card.builder-section-collapsed-hidden {
    display: flex;
}

.builder-layout mark {
    padding: 0;
    border-radius: 2px;
    background: color-mix(in srgb, var(--app-accent) 35%, transparent);
    color: inherit;
}

.builder-autosave-indicator {
    min-width: 0;
    overflow: hidden;
    color: var(--app-muted);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.builder-autosave-indicator::before {
    content: "·";
    margin: 0 0.4em;
}

.builder-autosave-indicator.is-error {
    color: var(--bs-danger-text-emphasis);
}

.builder-history {
    display: flex;
    gap: 0.125rem;
}

.builder-header .builder-icon-button {
    width: 2rem;
    height: 2rem;
}

.builder-primary-action .btn {
    --bs-btn-font-weight: 600;
}

/* List/Map: a track with the active view raised, like the editor's tab strip in spirit. */
.builder-segmented {
    display: inline-flex;
    gap: 0.125rem;
    padding: 0.125rem;
    border-radius: 0.5rem;
    background: var(--app-surface-2);
    box-shadow: inset 0 0 0 1px var(--app-border);
}

.builder-segmented > button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 1.75rem;
    padding: 0 0.65rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--app-muted);
    font-size: 0.8125rem;
}

.builder-segmented > button:hover {
    color: var(--app-text);
}

.builder-segmented > button.active {
    background: var(--app-surface-1);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.12), inset 0 0 0 1px var(--app-border);
    color: var(--app-text);
    font-weight: 500;
}

.builder-segmented > button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--app-focus-ring-color);
}

.builder-toolbar-group {
    display: flex;
    gap: 0.125rem;
}

/* Frameless text-and-icon controls for the canvas toolbar. */
.builder-toolbar-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 1.75rem;
    padding: 0 0.5rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--app-muted);
    font-size: 0.8125rem;
}

.builder-toolbar-button:hover {
    background: var(--app-surface-2);
    color: var(--app-text);
}

.builder-toolbar-button[aria-pressed="true"] {
    background: var(--app-surface-2);
    color: var(--app-text);
}

.builder-toolbar-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--app-focus-ring-color);
}

.builder-undo-toast {
    background: var(--scs-black);
    color: #fff;
}

.builder-undo-toast .btn-link {
    color: var(--scs-gold-light);
    font-weight: 600;
    text-decoration: none;
}

[data-bs-theme="dark"] .builder-layout .btn-light {
    background-color: var(--app-surface-2);
    border-color: var(--app-border);
    color: var(--app-text);
}

[data-bs-theme="dark"] .builder-layout .btn-light:hover {
    background-color: var(--app-border);
    color: var(--app-text);
}

.builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.builder-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--app-surface-1);
    border-bottom: 1px solid var(--app-border);
}

.builder-panel-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.5rem 0 1rem;
    border-bottom: 1px solid var(--app-border);
}

/* The right panel's toggle sits at its inner (left) edge, mirroring the left panel. */
.builder-right-column .builder-panel-tabs {
    padding: 0 1rem 0 0.5rem;
}

.builder-panel-tablist {
    display: flex;
    gap: 1.25rem;
    flex: 1 1 auto;
}

.builder-panel-tab {
    margin-bottom: -1px;
    padding: 0.75rem 0 0.6rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--app-muted);
    font-size: 0.875rem;
    font-weight: 500;
}

.builder-panel-tab:hover {
    color: var(--app-text);
}

.builder-panel-tab.active {
    color: var(--app-text);
    font-weight: 600;
    border-bottom-color: var(--app-accent);
}

.builder-panel-tab:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

.builder-panel-body {
    padding: 1rem;
}

.builder-panel-body > [role="tabpanel"][hidden] {
    display: none;
}

/* Collapsing is a desktop control; on phones the bottom bar decides what shows. A collapsed
   panel keeps only its toggle. */
@media (min-width: 992px) {
    .builder-panel.is-collapsed .builder-panel-tabs > :not([data-builder-sidebar-toggle]),
    .builder-panel.is-collapsed .builder-panel-body,
    .builder-panel.is-collapsed .builder-problems {
        display: none;
    }
}

.builder-center-column {
    min-width: 0;
    padding: 1.25rem 1.5rem 2rem;
}

.builder-canvas-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    /* Pinned so Collapse/Expand all and the bulk bar stay reachable deep in a long form. Below lg
       only the navbar is sticky; the lg+ rule adds the builder header. The opaque background
       keeps scrolled cards from showing through, and the z-index sits under the header so
       the dropdowns the bar opens still stack above the cards. */
    position: sticky;
    top: var(--app-navbar-height);
    z-index: 1010;
    padding-block: 0.375rem;
    background: var(--app-bg);
}

.builder-bulk-bar {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    align-items: center;
    gap: 0.125rem;
    padding: 0.2rem 0.5rem 0.2rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--scs-black);
    color: #fff;
    font-size: 0.875rem;
}

.builder-bulk-bar[hidden] {
    display: none;
}

.builder-bulk-bar .btn-link {
    padding-inline: 0.4rem;
    color: #fff;
    text-decoration: none;
}

.builder-bulk-bar .btn-link:hover {
    color: var(--scs-gold-light);
}

.builder-bulk-bar .btn-link:disabled {
    color: rgba(255, 255, 255, 0.6);
}

.builder-bulk-bar .builder-bulk-remove {
    color: #fca5a5;
}

.builder-bulk-divider {
    width: 1px;
    height: 1.25rem;
    margin: 0 0.25rem;
    background: rgba(255, 255, 255, 0.3);
}

.builder-bulk-tag-menu {
    min-width: 16rem;
}

.builder-add-field-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.75rem;
    margin-top: 0.5rem;
    border: 1px dashed var(--app-border);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--app-muted);
    font-size: 0.875rem;
}

.builder-add-field-button:hover,
.builder-add-field-button:focus-visible {
    border-color: var(--app-accent);
    color: var(--app-text);
}

.builder-outline {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.builder-outline-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.3rem 0.5rem 0.3rem calc(0.5rem + var(--outline-level, 0) * 1rem);
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    color: var(--app-muted);
    font-size: 0.8125rem;
    text-align: left;
    overflow-wrap: anywhere;
}

.builder-outline-item:hover,
.builder-outline-item:focus-visible {
    background: var(--app-accent-soft);
    color: var(--app-text);
}

.builder-outline-item.is-section {
    margin-top: 0.35rem;
    color: var(--app-text);
    font-weight: 600;
}

.builder-outline-label {
    flex: 1 1 auto;
}

.builder-outline-count {
    color: var(--app-muted);
    font-size: 0.75rem;
    font-weight: 400;
}

/* Type codes in the outline and the type picker; monospace so the labels after them line up. */
.builder-outline-code,
.builder-type-code {
    flex-shrink: 0;
    width: 2.6em;
    color: var(--app-muted);
    font-family: var(--bs-font-monospace);
    font-size: 0.6875rem;
}

.builder-type-code {
    display: inline-block;
    margin-right: 0.5rem;
}

.builder-outline-branch {
    flex-shrink: 0;
    color: var(--app-muted);
}

.builder-outline-add {
    margin-top: 0.5rem;
    padding-left: 0.5rem;
    font-weight: 500;
    text-decoration: none;
}

/* Problems: pinned under the outline/settings in the left panel, and reused in the Publish dialog. */
.builder-problems {
    flex-shrink: 0;
    max-height: 40%;
    overflow-y: auto;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--app-border);
}

.builder-problems[hidden] {
    display: none;
}

.builder-problems-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.builder-problems-title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
}

.builder-problem-list,
.builder-reference-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.builder-problem,
.builder-reference {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    padding: 0.35rem 0.4rem;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    color: var(--app-text);
    font-size: 0.8125rem;
    line-height: 1.35;
    text-align: left;
}

.builder-problem:hover,
.builder-problem:focus-visible,
.builder-reference:hover,
.builder-reference:focus-visible {
    background: var(--app-accent-soft);
}

.builder-problem > .bi {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--bs-warning-text-emphasis);
}

.builder-problem.is-error > .bi {
    color: var(--bs-danger-text-emphasis);
}

.builder-reference {
    text-decoration: none;
}

.builder-reference > .bi {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--app-muted);
}

.builder-confirm-references {
    margin-top: 1rem;
}

.builder-confirm-references-title {
    margin-bottom: 0.5rem;
    color: var(--bs-warning-text-emphasis);
    font-size: 0.875rem;
    font-weight: 600;
}

.builder-problem-title,
.builder-reference-title {
    display: block;
    font-weight: 500;
}

.builder-problem-detail,
.builder-reference-detail {
    display: block;
    color: var(--app-muted);
}

.builder-outline-item.has-problem::after {
    content: "";
    flex-shrink: 0;
    width: 0.45rem;
    height: 0.45rem;
    margin-left: auto;
    border-radius: 50%;
    background: var(--bs-warning);
}

.builder-outline-item.has-problem.is-error::after {
    background: var(--bs-danger);
}

/* Form settings as titled groups between rules, matching the Publish & Share panel's Access
   section rather than one long stack of Bootstrap form rows. */
.builder-settings .form-label {
    margin-bottom: 0.3rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.builder-settings .form-control,
.builder-settings .form-select {
    border-color: var(--app-border);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
}

.builder-settings-group + .builder-settings-group,
.builder-archive {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--app-border);
}

.builder-settings-heading {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.builder-setting + .builder-setting {
    margin-top: 1rem;
}

.builder-setting-hint {
    margin: 0.3rem 0 0;
    color: var(--app-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.builder-settings form > .builder-setting-hint {
    margin-top: 1.25rem;
}

.builder-setting-switch {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-left: 0;
}

.builder-setting-switch > label {
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
}

.builder-setting-switch-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
}

.builder-setting-switch .form-check-input {
    flex-shrink: 0;
    margin: 0.1rem 0 0;
    cursor: pointer;
}

.builder-share-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Bootstrap buttons keep their states but are re-skinned through their own variables to the
   artboard: 13px medium text, 6px corners, neutral outlines on the panel surface. */
.builder-share-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.builder-share-actions .btn {
    --bs-btn-font-size: 0.8125rem;
    --bs-btn-font-weight: 500;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-border-radius: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.builder-share-actions .btn-outline-secondary {
    --bs-btn-color: var(--app-text);
    --bs-btn-bg: var(--app-surface-1);
    --bs-btn-border-color: var(--app-border);
    --bs-btn-hover-color: var(--app-text);
    --bs-btn-hover-bg: var(--app-surface-2);
    --bs-btn-hover-border-color: var(--app-border);
    --bs-btn-active-color: var(--app-text);
    --bs-btn-active-bg: var(--app-surface-2);
    --bs-btn-active-border-color: var(--app-border);
}

.builder-share-actions .btn-outline-danger {
    --bs-btn-bg: var(--app-surface-1);
    --bs-btn-border-color: var(--bs-danger-border-subtle);
    --bs-btn-hover-color: var(--bs-danger-text-emphasis);
    --bs-btn-hover-bg: var(--bs-danger-bg-subtle);
    --bs-btn-hover-border-color: var(--bs-danger-border-subtle);
    --bs-btn-active-color: var(--bs-danger-text-emphasis);
    --bs-btn-active-bg: var(--bs-danger-bg-subtle);
    --bs-btn-active-border-color: var(--bs-danger-border-subtle);
}

/* Bootstrap's dark button sits on a near-black panel in dark mode, so invert it there. */
[data-bs-theme="dark"] .builder-share-panel .btn-dark {
    --bs-btn-bg: var(--app-text);
    --bs-btn-border-color: var(--app-text);
    --bs-btn-color: var(--app-bg);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-hover-color: var(--app-bg);
}

.builder-mobile-tabs {
    display: none;
}

@media (max-width: 991.98px) {
    /* One region at a time, chosen in the bottom bar; it replaces the panels' own tab rows. */
    .builder-layout {
        padding-bottom: 4.5rem;
    }

    .builder-layout:not([data-mobile-view="outline"]):not([data-mobile-view="settings"]) .builder-left-column,
    .builder-layout:not([data-mobile-view="fields"]) .builder-center-column,
    .builder-layout:not([data-mobile-view="share"]) .builder-right-column,
    .builder-layout .builder-panel-tabs,
    .builder-panel-resizer {
        display: none;
    }

    .builder-mobile-tabs {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
        display: flex;
        border-top: 1px solid var(--app-border);
        background: var(--app-surface-1);
    }

    .builder-mobile-tabs button {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
        min-height: 3.5rem;
        padding: 0.4rem 0;
        border: 0;
        background: transparent;
        color: var(--app-muted);
        font-size: 0.75rem;
    }

    .builder-mobile-tabs button .bi {
        font-size: 1.15rem;
    }

    .builder-mobile-tabs button[aria-pressed="true"] {
        color: var(--app-text);
        font-weight: 600;
    }

    .builder-mobile-tabs button[aria-pressed="true"] .bi {
        color: var(--scs-gold);
    }

    .builder-toast-container {
        margin-bottom: 4rem;
    }
}

@media (min-width: 992px) {
    .builder-header {
        position: sticky;
        top: var(--app-navbar-height);
        z-index: 1020;
        flex-wrap: nowrap;
        height: var(--builder-header-height);
    }

    .builder-canvas-toolbar {
        top: var(--builder-panel-top);
    }

    /* The header height is fixed here (the panels pin below it), so the controls stay on one line
       and the title and search give up the space; long titles truncate (full title in the tooltip). */
    .builder-header-controls {
        flex-wrap: nowrap;
        flex-shrink: 0;
    }

    .builder-header-title,
    .builder-header-status {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .builder-header-status {
        display: block;
    }

    .builder-header-status-dot {
        display: inline-block;
        margin-right: 0.4rem;
        vertical-align: 0.05rem;
    }

    /* --builder-*-size is the width dragged to (panels.js); the vw cap keeps a width saved on a
       wide monitor from crowding the canvas on a smaller one. */
    .builder-layout {
        --builder-left-width: min(var(--builder-left-size, 15rem), 35vw);
        --builder-right-width: min(var(--builder-right-size, 20rem), 35vw);
        grid-template-columns: var(--builder-left-width) minmax(0, 1fr) var(--builder-right-width);
        align-items: start;
    }

    .builder-layout.is-resizing-panel {
        cursor: col-resize;
        user-select: none;
    }

    /* A hit area straddling the panel's inner border; the border lights up while it's in play. */
    .builder-panel-resizer {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 2;
        width: 0.5rem;
        cursor: col-resize;
        touch-action: none;
    }

    .builder-left-column .builder-panel-resizer {
        right: -0.25rem;
    }

    .builder-right-column .builder-panel-resizer {
        left: -0.25rem;
    }

    .builder-panel-resizer::after {
        content: "";
        position: absolute;
        inset: 0 calc(50% - 1px);
        transition: background-color 0.15s;
    }

    .builder-panel-resizer:hover::after,
    .builder-panel-resizer:focus-visible::after,
    .builder-panel-resizer.is-active::after {
        background: var(--app-accent);
    }

    .builder-panel-resizer:focus-visible {
        outline: none;
    }

    .builder-panel.is-collapsed .builder-panel-resizer {
        display: none;
    }

    .builder-layout:has(> .builder-left-column.is-collapsed) {
        --builder-left-width: 3rem;
    }

    .builder-layout:has(> .builder-right-column.is-collapsed) {
        --builder-right-width: 3rem;
    }

    .builder-center-column {
        padding: 1.25rem 1rem 2rem;
    }

    .builder-panel {
        position: sticky;
        top: var(--builder-panel-top);
        height: calc(100vh - var(--builder-panel-top));
        border-bottom: 0;
    }

    .builder-left-column {
        border-right: 1px solid var(--app-border);
    }

    .builder-right-column {
        border-left: 1px solid var(--app-border);
    }

    .builder-panel-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    .builder-panel.is-collapsed .builder-panel-tabs {
        justify-content: center;
        padding: 0.25rem 0;
    }
}

@media (min-width: 1200px) {
    .builder-layout {
        --builder-left-width: min(var(--builder-left-size, 18rem), 35vw);
    }

    .builder-center-column {
        padding: 1.25rem 1.5rem 2rem;
    }
}

/* Admin shell */
.admin-main-container {
    max-width: 1700px;
    margin-left: auto;
    margin-right: auto;
    padding-left: max(1rem, calc(var(--bs-gutter-x, 1.5rem) * 0.5));
    padding-right: max(1rem, calc(var(--bs-gutter-x, 1.5rem) * 0.5));
}

.admin-shell {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

/* A flat rail on the page background, matching the flat admin pages: structure from spacing and
   small labels, and the active page marked by a thin accent bar (the vertical twin of a tab underline). */
.admin-sidebar {
    position: sticky;
    top: var(--app-sticky-offset);
    padding: 0.25rem 1rem 0.25rem 0;
    border-right: 1px solid color-mix(in srgb, var(--app-border) 60%, transparent);
    font-size: 0.875rem;
}

.admin-sidebar-title {
    margin: 0 0 1rem 0.75rem;
    color: var(--app-text);
    font-weight: 600;
}

.admin-sidebar-section {
    margin-bottom: 1.25rem;
}

.admin-sidebar-section:last-child {
    margin-bottom: 0;
}

.admin-sidebar-section-label {
    margin: 0 0 0.25rem 0.75rem;
    color: var(--app-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-sidebar-nav {
    display: flex;
    flex-direction: column;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.75rem;
    border-left: 2px solid transparent;
    border-radius: 0 2px 2px 0;
    color: var(--app-muted);
    text-decoration: none;
    white-space: nowrap;
}

.admin-nav-link i {
    width: 1rem;
}

.admin-nav-link:hover {
    background: var(--app-surface-1);
    color: var(--app-text);
}

.admin-nav-link.active {
    border-left-color: var(--app-accent);
    color: var(--app-text);
    font-weight: 600;
}

.admin-nav-link:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: -2px;
}

.admin-content {
    min-width: 0;
}

.admin-content .card {
    border: 1px solid var(--app-border);
    border-radius: 0.85rem;
    background: var(--app-surface-1);
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.06);
}

[data-bs-theme="dark"] .admin-content .card {
    box-shadow: none;
}

.admin-content .card-header {
    background: var(--app-surface-2) !important;
    border-bottom: 1px solid var(--app-border);
}

.admin-content .table-responsive {
    border-radius: 0.8rem;
}

.admin-content .table-responsive .table {
    margin-bottom: 0;
}

.admin-content .table > :not(caption) > * > * {
    border-bottom-color: var(--app-border);
}

.admin-content .table-hover > tbody > tr:hover > * {
    background: rgba(220, 166, 39, 0.08);
}

.admin-content .admin-row-hover-table > tbody > tr {
    transition: background-color 0.18s ease;
}

.admin-content .admin-row-hover-table > tbody > tr:hover > *,
.admin-content .admin-row-hover-table > tbody > tr:focus-within > * {
    background: rgba(220, 166, 39, 0.08);
}

[data-bs-theme="dark"] .admin-content .admin-row-hover-table > tbody > tr:hover > *,
[data-bs-theme="dark"] .admin-content .admin-row-hover-table > tbody > tr:focus-within > * {
    background: rgba(232, 201, 100, 0.14);
}

.admin-content .admin-row-hover-table .admin-row-actions-toggle {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.admin-content .admin-row-hover-table > tbody > tr:hover .admin-row-actions-toggle,
.admin-content .admin-row-hover-table > tbody > tr:focus-within .admin-row-actions-toggle,
.admin-content .admin-row-hover-table .admin-row-actions-toggle:focus,
.admin-content .admin-row-hover-table .admin-row-actions-toggle[aria-expanded="true"] {
    opacity: 1;
    pointer-events: auto;
}

@media (hover: none), (pointer: coarse) {
    .admin-content .admin-row-hover-table .admin-row-actions-toggle {
        opacity: 1;
        pointer-events: auto;
    }
}

.admin-content .form-control-sm,
.admin-content .form-select-sm {
    border-radius: 0.5rem;
}

.admin-settings-shell {
    display: grid;
    grid-template-columns: minmax(210px, 240px) minmax(0, 1fr);
    min-height: 680px;
}

.admin-settings-main-nav {
    border-right: 1px solid var(--app-border);
    background: var(--app-surface-2);
    padding: 0.9rem;
}

.admin-settings-main-nav .nav-link {
    color: var(--app-muted);
    border-radius: 0.65rem;
    border: 1px solid transparent;
    text-align: left;
    margin-bottom: 0.35rem;
    font-weight: 500;
}

.admin-settings-main-nav .nav-link:hover {
    color: var(--app-text);
    border-color: rgba(220, 166, 39, 0.25);
    background: rgba(220, 166, 39, 0.1);
}

.admin-settings-main-nav .nav-link.active {
    background: var(--scs-gold);
    color: var(--app-accent-contrast);
    border-color: var(--scs-gold-light);
    box-shadow: 0 7px 14px rgba(220, 166, 39, 0.26);
}

.admin-settings-content {
    padding: 1.25rem;
}

.admin-settings-sub-nav {
    border-bottom: 1px solid var(--app-border);
}

.admin-settings-sub-nav .nav-link {
    color: var(--app-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0.35rem 0.35rem 0 0;
    font-weight: 500;
}

.admin-settings-sub-nav .nav-link:hover {
    color: var(--app-text);
    border-bottom-color: rgba(220, 166, 39, 0.45);
}

.admin-settings-sub-nav .nav-link.active {
    color: var(--app-text);
    border-bottom-color: var(--scs-gold);
    background: rgba(220, 166, 39, 0.08);
}

.admin-settings-block {
    border: 1px solid var(--app-border);
    border-radius: 0.8rem;
    background: var(--app-surface-1);
    padding: 1rem;
}

.app-pagination {
    --bs-pagination-color: var(--scs-gold);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: var(--app-border);
    --bs-pagination-hover-color: var(--app-accent-contrast);
    --bs-pagination-hover-bg: var(--scs-gold);
    --bs-pagination-hover-border-color: var(--scs-gold);
    --bs-pagination-focus-color: var(--app-accent-contrast);
    --bs-pagination-focus-bg: var(--scs-gold-light);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--app-focus-ring-color);
    --bs-pagination-active-color: var(--app-accent-contrast);
    --bs-pagination-active-bg: var(--scs-gold);
    --bs-pagination-active-border-color: var(--scs-gold);
    --bs-pagination-disabled-color: var(--app-muted);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: var(--app-border);
}

.admin-branding-logo-preview {
    max-height: 96px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

.form-render-logo {
    max-height: 72px;
    max-width: 220px;
    width: auto;
    object-fit: contain;
}

@media (max-width: 991.98px) {
    .admin-shell {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* On narrow screens the rail becomes one scrolling row of links, so the page content stays on top. */
    .admin-sidebar {
        position: static;
        display: flex;
        overflow-x: auto;
        padding: 0;
        border-right: 0;
        border-bottom: 1px solid var(--app-border);
    }

    .admin-sidebar-title,
    .admin-sidebar-section-label {
        display: none;
    }

    .admin-sidebar-section,
    .admin-sidebar-section:last-child {
        margin: 0;
    }

    .admin-sidebar-nav {
        flex-direction: row;
    }

    .admin-nav-link {
        margin-bottom: -1px;
        padding: 0.5rem 0.75rem;
        border-left: 0;
        border-bottom: 2px solid transparent;
        border-radius: 0;
    }

    .admin-nav-link.active {
        border-bottom-color: var(--app-accent);
    }

    .admin-settings-shell {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .admin-settings-main-nav {
        border-right: 0;
        border-bottom: 1px solid var(--app-border);
        padding: 0.65rem;
    }

    .admin-settings-main-nav .nav {
        display: flex;
        flex-direction: row !important;
        flex-wrap: nowrap;
        gap: 0.4rem;
        overflow-x: auto;
        padding-bottom: 0.15rem;
    }

    .admin-settings-main-nav .nav-link {
        margin-bottom: 0;
        white-space: nowrap;
    }

    .admin-settings-content {
        padding: 0.9rem;
    }

    .form-render-logo {
        max-height: 56px;
        max-width: 160px;
    }
}

.likert-table th[scope="row"] {
    vertical-align: middle;
    background-color: transparent;
}

.likert-table thead th {
    border-bottom: 2px solid var(--bs-border-color);
}

.likert-table tbody tr:nth-of-type(odd) {
    background-color: var(--app-surface-2);
}

[data-bs-theme="dark"] .likert-table tbody tr:nth-of-type(odd) {
    background-color: var(--app-surface-2);
    color: var(--app-text);
}

.likert-radio {
    width: 1.1rem;
    height: 1.1rem;
}

/* ── Gold active/focus overrides ──────────────────────────────────────────
   Bootstrap 5 scopes dropdown and nav-pills variables to their own
   component selectors (.dropdown-menu, .nav-pills), so :root overrides
   are ignored. Re-declare them at the correct specificity level.        */

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--scs-gold);
    --bs-dropdown-link-active-color: #000;
}

/* Fallback explicit rule in case the variable still loses to Bootstrap */
.dropdown-item:active,
.dropdown-item.active {
    background-color: var(--scs-gold);
    color: #000;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--scs-gold);
    --bs-nav-pills-link-active-color: #000;
}

.draft-saved-fade {
    animation: draftSavedFade 1.6s ease-out;
}

@keyframes draftSavedFade {
    0%, 60% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.section-assignment-bar {
    border: 1px dashed var(--app-border);
    border-radius: 0.5rem;
    padding: 0.4rem 0.55rem;
    background: var(--app-surface-2);
}

/* Read-only repository-backed user guide */
.guide-container {
    max-width: 1440px;
}

.guide-layout {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 860px);
    justify-content: center;
    gap: 2rem;
    align-items: start;
}

.guide-sidebar {
    position: sticky;
    top: var(--app-sticky-offset);
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    background: var(--app-surface-1);
    padding: 0.75rem;
}

.guide-sidebar-heading {
    padding: 0.5rem 0.75rem 0.75rem;
    font-weight: 600;
    border-bottom: 1px solid var(--app-border);
    margin-bottom: 0.5rem;
}

.guide-sidebar .nav-link {
    color: var(--app-text);
    padding: 0.5rem 0.75rem;
}

.guide-sidebar .guide-nav-nested {
    padding-left: 1.5rem;
    font-size: 0.925rem;
}

.guide-article {
    min-width: 0;
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    background: var(--app-surface-1);
    padding: clamp(1.25rem, 3vw, 3rem);
}

.guide-content {
    line-height: 1.7;
}

.guide-content > :first-child {
    margin-top: 0;
}

.guide-content h1,
.guide-content h2,
.guide-content h3 {
    scroll-margin-top: var(--app-sticky-offset);
    margin-top: 1.65em;
    margin-bottom: 0.65em;
}

.guide-content h1 {
    margin-top: 0;
    padding-bottom: 0.4em;
    border-bottom: 1px solid var(--app-border);
}

.guide-content a.headerlink {
    margin-left: 0.4rem;
    color: var(--app-muted);
    text-decoration: none;
    opacity: 0;
}

.guide-content :is(h1, h2, h3, h4, h5, h6):hover .headerlink,
.guide-content .headerlink:focus {
    opacity: 1;
}

.guide-content pre {
    overflow-x: auto;
    padding: 1rem;
    border: 1px solid var(--app-border);
    border-radius: 0.5rem;
    background: var(--app-surface-2);
}

.guide-content :not(pre) > code {
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    background: var(--app-surface-2);
}

.guide-content blockquote {
    border-left: 4px solid var(--app-accent);
    padding: 0.25rem 1rem;
    color: var(--app-muted);
}

.guide-content table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.guide-content :is(th, td) {
    padding: 0.65rem;
    border: 1px solid var(--app-border);
}

.guide-content th {
    background: var(--app-surface-2);
}

@media (max-width: 767.98px) {
    .guide-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .guide-sidebar {
        position: static;
    }
}

.form-section[data-section-editable="false"] {
    opacity: 0.92;
}

.form-section[data-section-editable="false"] .section-assignment-bar {
    border-style: solid;
}