html {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    padding-top: 0;
    font-family: var(--font-sans);
    color: var(--text-default);
    background: var(--surface-page);
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

body.auth-page {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
}

body.page-transitioning main,
body.page-transitioning .container-fluid {
    opacity: 0;
    transition: opacity 0.12s ease-out;
}

main.container {
    margin-top: 0;
    background: var(--surface-page);
    border-radius: var(--radius-xl);
    box-shadow: none;
    padding: var(--space-6);
    /* Auto side margins, never a fixed one. Bootstrap gives .container
       width: 100%, so a fixed side margin pushed the frame 32px wider than the
       viewport; overflow-x on body clipped the surplus off the right, and the
       page ended up 40px from the left edge but 8px from the right. Auto
       margins collapse to 0 while the frame fills the width, and they centre it
       as soon as the 1400px max-width binds on a wide screen, the way every
       page with its own layout rule already does. */
    margin: var(--space-4) auto;
    flex: 1 0 auto;
    overflow: visible;
    min-width: 0;
}

/* A phone cannot spare 24px of empty frame on each side before the page's own
   card even starts. Pages with their own padding rule are not affected. */
@media (max-width: 640px) {
    main.container {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
}

body.auth-page main.container {
    flex: none;
    overflow: visible;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    max-width: 520px;
    margin: var(--space-3) auto var(--space-6);
    padding: var(--space-3);
}

/* Editorial layout for redesigned auth pages (login). */
body.auth-page-wide main.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* Phone value of the rule above. The matching rule in style.css never won:
   this file loads later with the same specificity. */
@media (max-width: 540px) {
    body.auth-page-wide main.container {
        padding: 20px 16px;
        align-items: flex-start;
    }
}

main.container > .container-fluid {
    height: auto;
    min-height: 100%;
}

body.auth-page main.container > .container-fluid {
    height: auto;
}

main.container .mt-4,
main.container .mt-3 {
    margin-top: 0 !important;
}

.survey-page main.container,
body.survey-page main.container {
    background: transparent;
    box-shadow: none;
    padding: 1rem;
    border-radius: 0;
    margin-top: 1rem;
}

body.survey-flow-page main.container {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    margin-top: 0;
    max-width: var(--page-width-narrow, 960px);
}

.edit-breadcrumb {
    margin-bottom: var(--space-2);
    padding: var(--space-2) 0;
}

.flash-toast-stack {
    position: fixed;
    top: calc(var(--header-height, 64px) + var(--space-4));
    right: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    z-index: 1200;
    pointer-events: none;
    width: min(360px, calc(100vw - 32px));
}

.flash-toast {
    pointer-events: auto;
    background: var(--surface-panel);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--border-strong);
    box-shadow: var(--elevation-lg);
    padding: 14px 14px 14px 12px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
    align-items: start;
    animation: flashToastIn 160ms ease-out both;
}

.flash-toast.is-hiding {
    animation: flashToastOut 180ms ease-in forwards;
}

.flash-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    margin-top: 1px;
    flex-shrink: 0;
}

.flash-toast-content {
    min-width: 0;
}

.flash-toast-title {
    color: var(--text-strong);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    line-height: 1.2;
    margin: 0 0 var(--space-1);
}

.flash-toast-message {
    color: var(--text-muted);
    font-size: var(--font-size-sm-plus);
    line-height: 1.4;
    margin: 0;
    word-break: break-word;
}

.flash-toast-close {
    background: none;
    border: none;
    color: var(--text-soft);
    cursor: pointer;
    padding: 2px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: var(--radius-xs);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.flash-toast-close:hover {
    color: var(--gray-600);
    background: var(--surface-panel-muted);
}

.flash-toast-error {
    border-left-color: var(--danger-500);
}

.flash-toast-error .flash-toast-icon {
    color: var(--danger-500);
}

.flash-toast-warning {
    border-left-color: var(--warning-500);
}

.flash-toast-warning .flash-toast-icon {
    color: var(--warning-500);
}

.flash-toast-success {
    border-left-color: var(--success-500);
}

.flash-toast-success .flash-toast-icon {
    color: var(--success-500);
}

.flash-toast-info {
    border-left-color: var(--info-500);
}

.flash-toast-info .flash-toast-icon {
    color: var(--info-500);
}

.archive-view-banner {
    background: linear-gradient(135deg, #fd7e14, #e65100);
    color: white;
    padding: 12px 0;
    border-bottom: 3px solid #bf360c;
    box-shadow: var(--shadow-corporate-md);
}

.admin-view-as-banner {
    background: #102a43;
    border-bottom: 3px solid #2f9e44;
    color: #ffffff;
    padding: 10px 0;
    box-shadow: var(--shadow-corporate-sm);
}

.admin-view-as-banner-note {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
}

.header-project-paused {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--warning-50);
    color: var(--warning-700);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
}

/* Canonical software control chrome. Keep participant survey theming scoped out. */
:root {
    --software-control-border: var(--gray-900);
    --software-control-focus-ring: rgba(15, 23, 42, 0.16);
    --software-control-focus-ring-strong: rgba(15, 23, 42, 0.22);
}

body:not(.survey-page) :focus-visible {
    outline-color: var(--software-control-border) !important;
}

body:not(.survey-page) :is(
    .form-control,
    .form-select,
    .form-control-enhanced,
    .corporate-form-input,
    .corporate-form-select,
    .choicery-auth-input,
    .settings-input,
    .settings-select,
    .settings-textarea,
    .settings-color-text,
    .c-input,
    .c-select,
    .input-modern,
    .select-modern,
    .textarea-modern,
    .html-editor,
    .mini-rich-editor,
    .filter-input,
    .filter-select,
    .search-input,
    .hb-form-control,
    .ix-form-control,
    .notify-modal-input,
    .sos-input,
    .sos-select,
    .pe-input,
    .pe-select,
    .sa-select,
    .param-input,
    .param-select,
    .method-input,
    .attr-input,
    .product-name-input,
    .linear-attr-input,
    .wtp-sim-select,
    .dl-inline-select,
    .mini-input,
    .mini-select,
    .rich-editor-container,
    .custom-select,
    .dt-input,
    .flatpickr-input,
    .selectize-input,
    .dataTables_filter input,
    input:not(.page-name-input):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
):not(:disabled):not([readonly]) {
    border-color: var(--software-control-border) !important;
    /* Project rule: user-editable fields use a 1.5px border, never a faint 1px.
       Width-only override: elements with border-style none stay borderless. */
    border-width: 1.5px !important;
}

body:not(.survey-page) :is(
    .form-control,
    .form-select,
    .form-control-enhanced,
    .corporate-form-input,
    .corporate-form-select,
    .choicery-auth-input,
    .settings-input,
    .settings-select,
    .settings-textarea,
    .settings-color-text,
    .c-input,
    .c-select,
    .input-modern,
    .select-modern,
    .textarea-modern,
    .html-editor,
    .mini-rich-editor,
    .filter-input,
    .filter-select,
    .search-input,
    .hb-form-control,
    .ix-form-control,
    .notify-modal-input,
    .sos-input,
    .sos-select,
    .pe-input,
    .pe-select,
    .sa-select,
    .param-input,
    .param-select,
    .method-input,
    .attr-input,
    .product-name-input,
    .linear-attr-input,
    .wtp-sim-select,
    .dl-inline-select,
    .mini-input,
    .mini-select,
    .rich-editor-container,
    .custom-select,
    .dt-input,
    .flatpickr-input,
    .selectize-input,
    .dataTables_filter input,
    input:not(.page-name-input):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
):focus {
    border-color: var(--software-control-border) !important;
    box-shadow: 0 0 0 0.2rem var(--software-control-focus-ring) !important;
    outline: 0 !important;
}

/* Custom variable pickers (multi-selects, covariate pickers) are fields too:
   same dark 1.5px border, dark placeholder and chevron as a native select,
   so an empty picker never looks disabled next to a select. */
body:not(.survey-page) :is(
    .sa-ms-trigger,
    .tn-select-trigger,
    .hb-cov-trigger,
    .as-cov-trigger,
    .ch-cov-trigger,
    .pv-select,
    .lc-membership-toolbar-select
):not(.disabled):not(:disabled) {
    border-color: var(--software-control-border) !important;
    border-width: 1.5px !important;
}

body:not(.survey-page) :is(
    .sa-ms-placeholder,
    .tn-select-placeholder,
    .hb-cov-placeholder,
    .as-cov-placeholder,
    .ch-cov-placeholder,
    .sa-ms-chevron,
    .tn-select-chevron,
    .hb-cov-chevron,
    .as-cov-chevron,
    .ch-cov-chevron
) {
    color: var(--text-strong);
}

body:not(.survey-page) :is(.sa-ms-trigger, .tn-select-trigger, .hb-cov-trigger, .as-cov-trigger, .ch-cov-trigger).disabled :is(
    .sa-ms-placeholder,
    .tn-select-placeholder,
    .hb-cov-placeholder,
    .as-cov-placeholder,
    .ch-cov-placeholder,
    .sa-ms-chevron,
    .tn-select-chevron,
    .hb-cov-chevron,
    .as-cov-chevron,
    .ch-cov-chevron
) {
    color: var(--text-soft);
}

body.survey-flow-hub-page .survey-flow-container input.page-name-input:not(:disabled):not([readonly]),
body.survey-flow-hub-page .survey-flow-container input.page-name-input:focus,
body.survey-flow-hub-page .survey-flow-container input.page-name-input:focus-visible {
    border-color: var(--border-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

body:not(.survey-page) :is(
    .rich-editor-container,
    .input-group-enhanced,
    .editor-container
):focus-within {
    border-color: var(--software-control-border) !important;
    box-shadow: 0 0 0 0.2rem var(--software-control-focus-ring) !important;
}

body:not(.survey-page) :is(
    .dropdown-toggle,
    .run-dropdown-btn,
    .ix-run-dropdown-btn,
    .tn-select-trigger,
    .hb-cov-trigger,
    .as-cov-trigger,
    .ch-cov-trigger,
    .sa-ms-trigger,
    .ps-cov-select,
    .pv-select,
    .lc-membership-toolbar-select
):focus {
    border-color: var(--software-control-border) !important;
    box-shadow: 0 0 0 0.2rem var(--software-control-focus-ring) !important;
    outline: 0 !important;
}

/* Run-selector name truncation, shared by the HB run selector partial and the
   TasteNet / Latent Class / Interaction Search selectors that each roll their
   own copy of the same component. Run names reach 50 unbreakable snake_case
   characters, which pushed the trigger out of its card; a flex button cannot
   ellipsize a bare text node, so the name sits in its own span and every flex
   ancestor needs min-width: 0. Lives here because base.html loads this sheet
   for every page, which the analysis stylesheets do not. */
:is(.run-selector-group, .ix-run-selector-group),
:is(.run-selector-group .run-dropdown, .ix-run-selector-group .dropdown) {
    min-width: 0;
    max-width: 100%;
}

:is(.run-dropdown-btn, .ix-run-dropdown-btn) {
    max-width: 100%;
}

:is(.run-dropdown-btn-text, .ix-run-dropdown-btn-text) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.survey-page) :is(
    .choices__inner,
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple,
    .ts-control
) {
    border-color: var(--software-control-border) !important;
}

body:not(.survey-page) :is(
    .choices.is-focused .choices__inner,
    .select2-container--default.select2-container--focus .select2-selection--single,
    .select2-container--default.select2-container--focus .select2-selection--multiple,
    .select2-container--default.select2-container--open .select2-selection--single,
    .select2-container--default.select2-container--open .select2-selection--multiple,
    .ts-wrapper.focus .ts-control
) {
    border-color: var(--software-control-border) !important;
    box-shadow: 0 0 0 0.2rem var(--software-control-focus-ring) !important;
}

body:not(.survey-page) :is(
    input,
    select,
    textarea,
    .form-control,
    .form-select,
    .form-control-enhanced,
    .corporate-form-input,
    .corporate-form-select,
    .c-input,
    .c-select
).is-valid,
body:not(.survey-page) .was-validated :is(
    input,
    select,
    textarea,
    .form-control,
    .form-select
):valid {
    border-color: var(--software-control-border) !important;
}

body:not(.survey-page) :is(
    input,
    select,
    textarea,
    .form-control,
    .form-select,
    .form-control-enhanced,
    .corporate-form-input,
    .corporate-form-select,
    .c-input,
    .c-select
).is-invalid,
body:not(.survey-page) .was-validated :is(
    input,
    select,
    textarea,
    .form-control,
    .form-select
):invalid {
    border-color: var(--danger-500) !important;
}

body:not(.survey-page) :is(
    input,
    select,
    textarea,
    .form-control,
    .form-select,
    .form-control-enhanced,
    .corporate-form-input,
    .corporate-form-select,
    .c-input,
    .c-select
).is-invalid:focus,
body:not(.survey-page) .was-validated :is(
    input,
    select,
    textarea,
    .form-control,
    .form-select
):invalid:focus {
    box-shadow: 0 0 0 0.2rem var(--danger-tint-20) !important;
}

body:not(.survey-page) :is(
    .btn,
    .c-btn,
    .dropdown-toggle
):focus-visible {
    box-shadow: 0 0 0 0.2rem var(--software-control-focus-ring-strong) !important;
}

/* User-defined run names must stay inside the bounded dropdown surface. */
.run-dropdown-menu .run-item {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
}

.run-dropdown-menu .run-item-content {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.run-dropdown-menu .run-item-name,
.run-dropdown-menu .run-item-meta {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

@keyframes flashToastIn {
    from {
        opacity: 0;
        transform: translate3d(10px, -6px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes flashToastOut {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(10px, -4px, 0);
    }
}

@media (max-width: 768px) {
    .flash-toast-stack {
        top: calc(var(--header-height, 56px) + var(--space-3));
        right: var(--space-3);
        left: var(--space-3);
        width: auto;
    }
}