/* =====================================================================
 * CSS Custom Properties (Design Tokens)
 * Must be defined before any var() references
 * ===================================================================== */

/* Design tokens for the NSF HERD survey prototype.
 * Colors come from the official HERD Survey Styles guide.
 * USWDS-aligned tokens (--color-primary-dark, --color-accent-warm) match the
 * National Center for Science and Engineering Statistics (NCSES) site chrome.
 */

:root {
    /* === USWDS-aligned site chrome === */
    --color-primary-dark: #1c2434; /* Deep navy used for header, footer, group bars, primary buttons */
    --color-primary: #005ea2; /* USWDS primary blue */
    --color-primary-darker-hover: #0f1623;
    --color-accent-warm: #ffbe2e; /* USWDS accent-warm (Search button yellow) */
    --color-accent-warm-dark: #e5a000;
    /* === Status / role colors (from styles doc) === */
    --color-success: #10B981; /* completed */
    --color-error: #EF4444; /* review */
    --color-warning: #F59E0B; /* warning */
    --color-info: #3B82F6; /* primary accent for survey UI */
    /* Pale variants for banner backgrounds */
    --color-success-bg: #F0FDF4;
    --color-error-bg: #FEF2F2;
    --color-warning-bg: #FEF9C3;
    --color-info-bg: #EFF6FF;
    /* === Surfaces === */
    --color-surface: #FFFFFF;
    --color-page-bg: #f6f8fb; /* gentle page tint */
    --color-nav-bg: #F9FAFB;
    --color-section-header: #F3F3F3;
    --color-group-header: #1c2434; /* dark band above each section group (same as primary-dark) */
    /* === Strokes === */
    --color-stroke-active: #3B82F6;
    --color-bullet: #60A5FA;
    --color-input-border: #D4D4D4;
    --color-card-border: #e6e8ec;
    /* === Text === */
    --color-text: #000000;
    --color-text-muted: #333333;
    --color-text-subtle: #5e6573;
    --color-placeholder: #ADAEBC;
    --color-text-disabled: #9CA5B8;
    /* === Disabled states === */
    --color-disabled-bg: #D1D9E2;
    --color-disabled-field-bg: #F9FAFB;
    /* === Spacing scale (4px base) === */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    /* === Type === */
    --font-sans: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Merriweather", "Source Serif Pro", Georgia, "Times New Roman", serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    /* === Radii & shadows === */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
    /* === Layout dimensions === */
    --header-height: 64px;
    --sidebar-width: 280px;
    --content-max-width: 1280px;
}
/* Bootstrap 3 forces html { font-size: 10px }, which shrinks every rem-based
 * design token to 62.5% of its intended size (1rem = 10px instead of 16px).
 * Restore the standard root size so the --text-* tokens resolve correctly.
 * herd.css loads after bootstrap.min.css, so this wins without !important. */
html {
    font-size: 100%; /* = 16px on default browsers */
}

/* Apply new font stack globally */
body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-text);
}
/* Apply new font stack globally */
body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
    /*font-family: var(--font-display);*/
}

/* app-shell layout. custom css grid layered on top of uswds so we get
 * uswds components inside our own page chrome.
 */

.app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* === site header (navy ncses bar) === */

.site-header {
    background-color: var(--color-primary-dark); /* deep navy — matches footer and group headers */
    color: #fff;
    position: relative;
    z-index: 10;
}

.site-header__inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-3) var(--space-6);
    min-height: var(--header-height);
}

.site-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: #fff;
}

.site-brand__logo {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.site-brand__title {
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

    .site-brand__title .small {
        display: block;
        font-size: var(--text-xs);
        font-weight: 500;
        opacity: 0.85;
        letter-spacing: 0.05em;
        margin-bottom: 2px;
    }

.site-nav {
    display: flex;
    gap: var(--space-5);
    justify-content: center;
}

.site-nav__link {
    color: #fff;
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-2) 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

    .site-nav__link:hover {
        text-decoration: underline;
    }

.site-nav__caret {
    font-size: 0.625rem;
    opacity: 0.7;
}

.site-search {
    background-color: var(--color-accent-warm);
    color: var(--color-text);
    border: none;
    padding: var(--space-3) var(--space-5);
    font-weight: 700;
    font-size: var(--text-sm);
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

    .site-search:hover {
        background-color: var(--color-accent-warm-dark);
    }

/* === page title band (light gray section under the header) === */

.page-title-band {
    background-color: var(--color-page-bg);
    border-bottom: 1px solid var(--color-card-border);
    padding: var(--space-5) 0 var(--space-4);
}

.page-title-band__inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-6);
    align-items: start;
}

.page-title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    margin: 0 0 var(--space-3) 0;
    line-height: 1.15;
}

.page-title__divider {
    color: var(--color-text-subtle);
    font-weight: 400;
    margin: 0 var(--space-2);
}

.page-title__year {
    font-weight: 400;
}

.page-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-end;
}

/* === main content area: two-column (sidebar + main) === */

.app-body {
    flex: 1;
    background-color: var(--color-page-bg);
}

.app-body__inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--space-6);
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    gap: var(--space-6);
    align-items: start;
}

/* sidebar is a card that sticks while the main scrolls */
.app-sidebar {
    position: sticky;
    top: var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) 0 var(--space-3);
    box-shadow: var(--shadow-sm);
    max-height: calc(100vh - var(--space-8));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.app-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0; /* allow flex children to shrink */
}

    /* The legacy `.bottom` wrapper (style.css) hard-codes width: 1080px, which
 * pins the .app-main grid track open and blocks --content-max-width from
 * taking effect. Let it fill the column instead. */
    .app-main .bottom {
        width: auto;
        margin: 0;
    }

.question-list-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-3);
}

/* === site footer (minimal placeholder) === */

.site-footer {
    background-color: var(--color-primary-dark); /* deep navy — matches header and group headers */
    color: #fff;
    text-align: right;
    padding: var(--space-5) var(--space-6);
    font-size: var(--text-sm);
    margin-top: var(--space-6);
}

/* paperwork reduction act display: the omb control number + expiration date,
 * shown the way federal information-collection sites present it. */
.site-footer__omb {
    margin: 0;
    font-weight: 600;
}

.site-footer__sep {
    margin: 0 var(--space-2);
    color: rgba(255, 255, 255, 0.5);
}

/* === responsive (basic) === */

@media (max-width: 1024px) {
    .app-body__inner {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        position: static;
        max-height: none;
    }

    .site-header__inner {
        grid-template-columns: auto auto;
    }

    .site-nav {
        display: none;
    }
}



/* Add these additional styles for the dashboard icons and issue states */

.dashboard-item__icon.mustfix {
    color: var(--color-error);
}

.dashboard-item__label.mustfix,
.dashboard-item__value.mustfix {
    color: var(--color-error);
}

/* Key Information links: black by default, underline only on hover */
.dashboard-question-link {
    color: var(--color-text) !important;
    text-decoration: none !important;
}

    .dashboard-question-link:hover,
    .dashboard-question-link:focus {
        text-decoration: underline !important;
    }

/* Keep issue lists readable black even when parent item is in must-fix state */
.dashboard-item__value.mustfix {
    color: var(--color-text);
}

.dashboard-item__value span.none {
    font-style: italic;
    color: var(--color-text-muted);
}

/* Submit button states */
.submit-banner__button.not-ready {
    background-color: var(--color-disabled-bg);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}


/* PRINT TREND REPORT*/
.pdf-table {
    border: 0;
    border-right: 1px;
    border-bottom: 1px;
}

    .pdf-table tr td {
        border: 0;
        border-left: 1px;
        border-top: 1px;
    }

span.disabled-link {
    color: #999;
    text-decoration: underline;
    margin-left: 1em;
}

span.bold {
    font-weight: bold;
}

.question-instructions h3 {
    white-space: nowrap;
    margin: 0 10px 0 0;
    font-size: 1em;
    line-height: 1.43em;
}

.question-instructions td {
    vertical-align: top;
}

.question-instructions ul {
    padding-left: 1em;
}

.contact td {
    vertical-align: top;
    padding-bottom: 1em;
}

.indented-row {
    margin-left: 30px;
}

.underline {
    text-decoration: underline;
}

body {
    background-color: #E2EAF1;
    font-family: Arial, san-serif;
    font-size: 12px;
    color: #333;
}

label {
    font-weight: inherit;
}

img {
    border: 0;
}

div.content table {
    font-size: 12px;
}
/* Generic classes */
.center {
    text-align: center;
}

.hidden {
    display: none;
}

.error {
    color: red;
}

.c {
    text-align: center
}

.clear-trail:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.l {
    text-align: left;
}

/* OVERALL LAYOUT */
#browser_warning, .hide {
    display: none;
}

/* Header */
#wf-header {
    padding: 15px 15px 10px;
}

    #wf-header img {
        vertical-align: -27px;
    }

    #wf-header span {
        color: #000066;
        font-family: "Georgia, Times New Roman", Times, serif;
        font-size: 25px;
        margin-left: 10px;
        white-space: nowrap;
    }

/* Navigation */
#globalNav {
    float: right;
    line-height: 1.3em;
    margin: 0;
    padding: 5px 15px 5px;
    text-align: right;
    top: 4px;
    width: 1030px;
}

    #globalNav li {
        border-left: 1px solid #333;
        display: inline;
        list-style: none;
        margin-right: 2px;
        padding: 0 0 0 4px;
    }

        #globalNav li:FIRST-CHILD {
            border: 0;
        }

#primaryNav {
    background-color: #FFF;
    border: 1px solid #ccc;
    border-left: 0;
    border-right: 0;
}

    #primaryNav ul {
        background-color: #C2C8D4;
        color: #fff;
        float: left;
        margin: 1px 0px;
        padding: 0px;
        width: 100%;
    }

        #primaryNav ul li {
            display: inline;
            font-size: 14px;
            font-weight: bold;
            padding: 2px;
        }

            #primaryNav ul li img {
                border: 0;
            }

            #primaryNav ul li a {
                background: url(nav-btn-bg.png) repeat-x;
                background-color: #C2C8D4;
                border: 0;
                border-right: 1px solid #8a8a8a;
                color: #000000;
                float: left;
                padding: 7px 36px;
                text-decoration: none;
            }

                #primaryNav ul li a:hover {
                    background-image: url(nav-btn-selected.png);
                    color: #FFF;
                }

/* Container */
#container, #footer {
    width: 1004px;
    margin: 0 auto;
}

#container {
    background-color: #FFF;
    border: 1px solid #999;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    margin-top: 18px;
}

#main-content {
    padding: 12px 10px;
}

ul.spaced li {
    margin-bottom: 1em;
}

ul.clean {
    padding-left: 0;
}

    ul.clean li {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
    }

ul.no-indent {
    padding-left: 0;
}

    ul.no-indent li {
        margin-left: 11px;
    }



h1.green, h2.green, h3.green {
    color: #095;
}

#information_pane {
    float: left;
    margin: 0 0 20px;
    padding: 0;
    width: 570px;
}

#navigation_pane {
    border-left: 1px solid #bfbfbf;
    float: right;
    margin: 0 0 20px;
    padding: 1em 0 0 10px;
    width: 370px;
}

.action-form {
    /* padding: 20px 0 10px; */
    /*background-color: #ffc; */
    /*
	border-radius:10px;
  border: 1px solid #ffc;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
*/
}

#login-form {
    padding-left: 10px;
    padding-bottom: 15px;
}

.divided-from-above {
    margin-top: 20px;
    border-top: 1px solid #bfbfbf;
    padding-top: 10px;
}

.action-form p.error {
    text-align: left;
    color: red;
    padding: 0 10px 0 20px;
}

.action-form h2, .action-form h3 {
    margin: 0 0 1em 0;
    text-align: center;
}

#login-form h2 {
    margin: 0 0 1em 10px;
    text-align: left;
}


/* Footer */
#footer {
    font-size: 10px;
    padding: 2px 0 0 4px;
}

/* QUESTION PAGE */

#overall-status {
    font-size: 14px;
    text-align: left;
    background-color: #ffc;
    float: left;
}

#export-options {
    float: right;
}

    #export-options img {
        height: 16px;
        margin-right: 6px;
        width: 16px;
    }

#status-legend {
    float: right;
    font-size: 10px;
    padding: 10px 10px 0 0;
    text-align: right;
}

    #status-legend img {
        margin-left: 5px;
        vertical-align: middle;
    }

#all-required-notice {
    clear: both;
    font-size: 14px;
    text-align: left;
    float: left;
}


/* question category */
.category-title {
    color: #006600;
    clear: both;
    float: left;
    margin-top: 14px;
    padding-left: 1em;
    font-family: "Lucida Grande",Verdana,Arial,Helvetica,Sans-serif;
    font-size: 1.1em;
    font-weight: bold;
}

.category-status-header {
    float: right;
    font-size: 14px;
    font-weight: bold;
    margin: 24px 20px 6px 0;
}

/* question */

/* Question title */
.Q {
    clear: both;
    margin: 10px 0;
    padding: 0;
    /*border-radius: 2px;
	border: 1px solid #999;*/
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    background-color: #D0E8D0;
}

    .Q a {
        color: blue;
        text-decoration: underline;
    }

a.combobox_button {
    text-decoration: none;
}

.Q .title {
    background-repeat: no-repeat;
    background-position: 5px 7px;
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
}

.expanded-question .title {
    background-image: url(../images/herd_ui_v3/pointer2a.png);
}

.collapsed-question .title {
    background-image: url(../images/herd_ui_v3/pointer1a.png);
}

.Q.expanded-question .title, .Q.active .title {
    background-color: #C4EAB3;
}

.Q.active .title {
    background-color: #c4d0fe;
}

.Q.disabledForEntry .title {
    background-color: #ccc;
}

.Q .title:hover {
    background-color: #C4EAB3;
}

div.content {
    padding: 10px;
}

.collapsed-question div.content {
    display: none;
}

/* expanded question*/
.expanded-question div.content {
    display: block;
    clear: both;
    background-color: #e5ffe5
}

span.question-title, a.question-title, a.question-title:VISITED, span.question-collapse-link {
    display: block;
    float: left;
    /*font-weight: normal;*/
    /*font-size: 12px;*/
    margin: 6px 0;
    padding: 0;
    padding-left: 25px;
    /*  
  color: #333;
  text-decoration: none;
  
  width: 900px;
*/
}

span.question-collapse-link {
    font-size: 0.95em;
    display: none;
}

span.question-collapse-link {
    padding-left: 1em;
}

.question-status {
    float: right;
    margin: 0;
    padding: 5px 30px 0 0;
}

/* Combobox  */
.combobox, .exp_input {
    background-color: #fff;
    border: 2px solid #9bc;
}

    .exp_input.text {
        font: inherit;
        padding: 3px 1px 3px 2px;
        font-size: 12px;
    }

.combobox_button {
    background-image: url('../images/herd_ui_v3/drop.png');
    background-position: center;
    background-repeat: no-repeat;
    text-decoration: none;
}

    .combobox_button:hover {
        text-decoration: none;
    }

.combobox_button {
    * top: 1px !important;
}

.combobox_selector {
    background-color: #fff;
    font-size: 11px;
    z-index: 100;
}

    .combobox_selector ul {
        border: 1px solid #CCC;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .combobox_selector li {
        padding: 2px 3px;
        text-align: left;
    }

        .combobox_selector li:hover, .combobox_selector li.selected {
            background-color: #0066CC;
            color: #FFF;
        }


div.input {
    text-align: center;
    margin: 0 auto;
    padding: 0 0;
    display: inline-table;
}

.wf-input {
    text-align: left;
    z-index: 90;
}

.exp-total {
    margin: 1px auto 0;
    width: 92px;
}

.wf-dollar {
    display: block;
    margin: 4px 0 0 5px;
    position: absolute;
}

    .na label, .wf-input label.invisible, .wf-dollar.invisible {
        display: none;
    }


/* note, padding is directly related to width - increase in one should be accompanied by the decrease in the other to retain same size */
.disabled_input {
    /*border: 1px solid #999;*/
    background-color: #fff;
    padding: 2px 4px 4px 11px;
    text-align: right;
}

.wf-input .combobox input.number {
    background: transparent;
    border: 0;
    width: 68px;
}

.wf-input input.number {
    font: inherit;
    padding: 3px 1px 3px 0;
    width: 92px;
    text-align: right;
    font-size: 12px;
}
/* Hack to remove Safari's extra padding. Remove if you don't care about pixel-perfection. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .wf-input input {
        padding: 2px;
    }
}

.wf-input.dimmed .combobox {
    /* background-color: #e5ffe5; */
}

.exp-total .disabled_input, .wf-input.disabled input {
    background-color: #e7e7e7;
}

select.trend {
    background-color: #ff9;
}

.wf-input.trend .combobox, .wf-input.trend input, .exp-total.trend .disabled_input, div.f-w-inp div.trend input {
    background-color: #ff9;
}

.wf-input.err input, .wf-input.err .combobox, .wf-input.blank .combobox, .exp-total.err .disabled_input,
.wf-input.dqi input, .wf-input.dqi .combobox, select.dqi, .wf-input.dqi .combobox, .exp-total.dqi .disabled_input,
div.dqi input.other-input, div.err input.other-input {
    background-color: #fdd;
}

select.err {
    background-color: #fdd;
}

div.err .exp_input, div.dqi .exp_input,
div.err .select2-selection, div.dqi .select2-selection,
.combobox-wrapper.disabled.dqi input,
select.dqi:disabled, div.dqi .select2-container--disabled .select2-selection {
    background-color: #fdd;
}

/* Q10 agency name dropdowns (select2): keep the error/DQI highlight even when the
   widget is disabled/read-only (e.g. while impersonating before "begin data entry").
   Uses !important to win over selectWoo.css's disabled grey background. */
.q10-block.err .select2-container--disabled .select2-selection--single,
.q10-block.dqi .select2-container--disabled .select2-selection--single,
.q10-block.err .select2-selection--single,
.q10-block.dqi .select2-selection--single {
    background-color: #fdd !important;
}


div.error_toggler {
    background-color: #ff9;
    background-position: 5px 5px;
    background-repeat: no-repeat;
    clear: both;
    margin-bottom: 1em;
}

    div.error_toggler p.error {
        color: red;
    }

    div.error_toggler div.details {
        padding: 0 10px 10px;
    }

a.toggler, a.toggler:VISITED {
    display: block;
    color: blue;
    font-size: 14px;
    font-weight: bold;
    padding: 4px 10px 4px 25px;
    text-decoration: none;
}

div.error_toggler.collapsed {
    background-image: url(pointer1a.png);
}

div.error_toggler.expanded {
    background-image: url(pointer2a.png);
}

div.error_toggler.collapsed div.details {
    display: none;
}

div.error_toggler a.toggler {
    font-weight: normal;
    text-decoration: underline;
}

.blank-options dt {
    float: left;
    clear: both;
}

    .blank-options dt input {
        width: 220px;
        margin: 10px 10px 0 5px;
    }

.blank-options dd {
    float: left;
    padding-top: 5px;
    margin: 10px 0 0 0;
}

.blank-options input:disabled {
    color: #666;
}

.status-icon {
    display: inline-block;
    float: right;
    margin-top: 5px;
    margin-right: 3em;
    background-size: 20px 20px;
}

.question-comment {
    margin-top: 1em;
    margin-bottom: 1em;
}

.question-comment > .comment-text {
    display: none;
}

.trend-comment div:FIRST-CHILD {
    float: left;
    margin-right: .5em;
}

.trend-comment .title {
    font-weight: bold;
}

.trend-comment .comment {
    margin-bottom: 1em;
}

div.admin {
    width: 1030px;
    margin: 0 auto;
    font-size: .8em;
}

#admin_actions {
    text-align: right;
}

#recent_activity {
    float: left;
}



.contacts-question select, .contacts-question input {
    font-size: 13px;
}

.contacts-question .wf-input {
    display: inline;
}

.contacts-question input {
    padding: 1px 1px 2px 1px;
}

.list-identifier {
    float: left;
    width: 5%;
    font-weight: bold;
    text-align: left;
}

.list-item {
    width: 90%;
    float: left;
    text-align: left;
    font-weight: normal;
    margin-bottom: 4px;
}

    .list-item .list-item-label, .list-item label {
        font-weight: bold;
        display: block;
        margin-bottom: 4px;
    }


/** footer table grids */
.footer-table {
    width: 100%;
    font-size: .9em;
    border-collapse: collapse;
}

    .footer-table tr td, .footer-table tr th {
        background-color: #fff;
        text-align: left;
        padding: 4px 5px 4px 15px;
        vertical-align: top;
    }

    .footer-table.with-grid tr td, .footer-table.with-grid tr th {
        border: 1px solid #333;
    }

table tr td.b, table tr th.b {
    font-weight: bold;
}

table tr td.r, table tr th.r {
    text-align: right;
}

table tr td.q {
    font-weight: bold;
    font-size: 1.2em;
    vertical-align: top;
}

table tr td.t, table tr th.t {
    vertical-align: top;
}

table tr td.t, table tr td.t {
    vertical-align: top;
}

table tr td.nw, table tr td.nw {
    white-space: nowrap;
}


.grid-title {
    margin-bottom: 0;
}

.grid tr td.indented {
    text-indent: -1.1em;
    padding-left: 3em;
}

.grid tr td.group-header {
    font-size: 14px;
    font-weight: bold;
    text-align: left;
}

.grid tr td {
    text-align: left;
    font-weight: normal;
}

tr.vb td {
    vertical-align: bottom;
}

.subnote, table tr.c-head .subnote {
    font-size: .9em;
    display: block;
    margin-top: 2px;
}

table tr.c-head td, table tr.c-head2 td {
    padding-bottom: 5px;
    font-weight: bold;
    vertical-align: bottom;
}

table tr.c-head2 td {
    vertical-align: top;
}

    table tr.c-head2 td.t {
        vertical-align: bottom;
        font-weight: normal;
        white-space: nowrap;
    }

.grid tr td {
    text-align: center;
    vertical-align: top;
    padding: 4px 0;
}

    .grid tr td:first {
        background-color: yellow;
    }

    .grid tr td.sp {
        margin: 0 6px;
        padding: 0 5px 8px 4px;
    }

    .grid tr td.l {
        text-align: left;
    }

.grid tr.footer td {
    text-align: left;
}

acronym {
    text-decoration: none;
    border: 0;
}



.one-page {
    clear: both;
    page-break-after: always;
    width: 875px;
}

    .one-page .noprint {
        display: none;
    }

    .one-page .cmntinput {
        width: 1000px;
        border: none;
        background-color: transparent;
        font-size: 1em;
    }

.cmntinput-reviewer {
    background-color: #ffecec;
}

body#print .content {
    border: 1px solid #000;
    background-color: #e5ffe5;
    padding: 10px 4px 0;
}

body#print input.exp_input,
body#print .exp-total {
    width: 70px;
}

body#print {
    background-color: #fff;
}

.question-block {
    padding: 0 25px 25px;
    border: 1px solid #000;
    background-color: #e5ffe5;
    margin-top: 10px;
}

.one-page .question-block {
    margin-top: 25px;
}

.padded {
    padding: 25px;
    margin-bottom: 25px;
}


.banner {
    clear: both;
    background-color: #FFFFA0;
    border: 1px solid #AAA;
    border-left: none;
    border-right: none;
    padding: 5px 10px;
    margin: 5px 0 0;
}

#trend-expl {
    display: none;
    padding-top: 15px;
    text-align: center;
}

#trend-counter {
    text-align: left;
}

.save-form {
    padding: 0 1.6em;
}

.clear-form {
    margin-left: 2em;
}

.explanation {
    display: none;
}

.f-w-inp {
    width: 94px;
}

#top_submit {
    clear: both;
    float: left;
    padding: 10px 0;
}

#blockScreen {
    display: none;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
}

    #blockScreen .background {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #CCC;
        filter: alpha(opacity = 45);
        opacity: .45;
    }

    #blockScreen .animation {
        position: fixed;
        top: 50%;
        left: 50%;
        margin-left: -50px; /* half width of the loader gif */
        margin-top: -50px; /* half height of the loader gif */
        text-align: center;
        z-index: 9999;
        overflow: auto;
        width: 100px; /* width of the loader gif */
        height: 102px; /*hight of the loader gif +2px to fix IE8 issue */
    }

.contacts-question select, .contacts-question input {
    font-size: 13px;
}

.contacts-question input {
    padding: 1px 1px 2px 1px;
}

table.contact-info {
    border-collapse: collapse;
    width: 900px;
    margin-bottom: 15px;
}

    table.contact-info tr td {
        padding: 10px 0 0 0;
    }

    table.contact-info tr th {
        text-align: left;
        font-weight: normal;
        vertical-align: bottom;
    }

    table.contact-info input, table.contact-info select {
        border: 1px solid #999;
        margin: 0 .25em 0 0;
    }

    table.contact-info tr td.column-header {
        text-align: center;
        border-bottom: 1px solid #999;
        font-weight: bold;
    }

span.required {
    color: red;
}





.jquery-checkbox {
    padding-top: 1px;
    display: inline;
    font-size: 20px;
    line-height: 20px;
    cursor: pointer;
    cursor: hand;
}

    .jquery-checkbox .mark {
        display: inline;
        width: 18px;
        height: 18px;
    }

    .jquery-checkbox img {
        vertical-align: middle;
        width: 18px;
        height: 18px;
    }

    .jquery-checkbox img {
        background: transparent url(checkbox.png) no-repeat;
    }

    .jquery-checkbox img {
        background-position: 0 0;
    }

.jquery-checkbox-hover img {
}

.jquery-checkbox-checked img {
    background-position: -18px 0;
}

.jquery-checkbox-disabled img {
    background-position: 0 -18px;
}

.jquery-checkbox-checked .jquery-checkbox-disabled img {
    background-position: -18px -18px;
}

div.question-details {
    margin: 0.5em 0;
}


div.subagencies-expl.smaller table {
    font-size: .8em;
}

div.subagencies-expl div.agency {
    font-weight: bold;
    margin-bottom: 1em;
}

    div.subagencies-expl div.agency ul {
        margin-top: .5em;
    }

    div.subagencies-expl div.agency li {
        font-weight: normal;
        margin-left: 1em;
    }

div.subagencies-expl table {
    border-collapse: collapse;
    ;
}

    div.subagencies-expl table td {
        padding: 1em 1em 0;
        vertical-align: top;
        border: 1px solid #999;
        width: 25%;
    }

div.subagencies-expl div.letter-marker {
    color: #060;
    font-weight: bold;
}

div.subagencies-expl ul {
    margin: 0 0 2em;
    padding: 0;
}

    div.subagencies-expl ul li {
        margin: 0 0 .5em 1em;
    }

div.Q.disabledForEntry {
    background-color: #ccc;
}

    div.Q.disabledForEntry div.content {
        background-color: #ccc;
    }

.block {
    display: block;
}

div.help {
    background-color: #FFC;
    padding: 6px 9px;
    border: 1px solid #ccc;
    font-weight: bold;
}

div.exclusion-reason {
    border: 2px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
}

select:disabled {
    background-color: #ddd;
}

.q10-block {
    padding: 3px;
}

table.q10-grid tr td:FIRST-CHILD, table.q10-grid tr td.q10-other-text {
    padding-top: 12px;
}

table.q10-grid .wf-input {
    margin-top: 2px;
}

table.wide-identifier div.list-identifier {
    margin-right: .5em;
    font-weight: normal;
}

    table.wide-identifier div.list-identifier.b {
        font-weight: bold;
    }


#edit-lock-message {
    display: none;
    height: 1em;
    padding-bottom: 16px;
}

    #edit-lock-message div {
        background-color: #D83933;
        box-sizing: border-box;
        font-size: 1.25em;
        font-weight: bold;
        line-height: 1.5;
        text-align: center;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 12px 16px;
        z-index: 1000;
        color: #fff;
    }

a.disabled, a.disabled:HOVER, a.disabled:VISITED {
    text-decoration: none;
    color: #333;
    cursor: default;
}

a.subagencies {
    font-weight: normal;
}

.controls input.form-button:HOVER {
    cursor: pointer;
}

.controls input.form-button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 36px;
    min-width: 92px;
    padding: 0 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid #9ca3af;
    background-color: #fff;
    color: #1f2937;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.controls input.form-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

    .controls input.form-button:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

.controls input.save-button {
    background-color: var(--color-stroke-active);
    border-color: #1d4ed8;
    color: #fff;
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
}

    .controls input.save-button:HOVER {
        background-color: #1e40af;
        border-color: #1e40af;
    }

    .controls input.save-button:disabled,
    .controls input.save-button:disabled:HOVER {
        background-color: #9ca3af;
        border-color: #9ca3af;
        color: #f3f4f6;
    }

.controls input.cancel-button {
    background: none;
    border: none;
    color: var(--color-text-subtle);
    text-decoration: underline;
    cursor: pointer;
    font-size: var(--text-base);
    font-family: inherit;
    padding: var(--space-2) 0;
}

    .controls input.cancel-button:HOVER {
        color: var(--color-text);
    }

    .controls input.cancel-button:disabled,
    .controls input.cancel-button:disabled:HOVER {
        color: #9ca3af;
        text-decoration: none;
    }

p.unresolved-dqi {
    color: red;
}

.navigation-review-title {
    font-weight: bold;
    color: red;
}


#review-respose-form .review-response-note {
    margin-left: 2em;
    font-style: italic;
}

#review-respose-form .error-message {
    color: #F61C00;
}

#review-respose-form table td {
    vertical-align: top;
}

#review-respose-form {
    padding: 0 1em;
    min-height: 200px;
    font-weight: 1.2em;
}

#dqi-resolve-dialog {
    background-color: #e9eeff;
}

.question-dqi-list {
    background-color: #e9eeff;
    border: 1px dotted #ccc;
    margin-bottom: .5em;
    padding: 1em 2em .5em;
    color: #444;
}

    .question-dqi-list a {
        color: #00C;
    }

    .question-dqi-list span.review-resolution {
        color: green;
        font-weight: bold;
        font-style: italic;
    }

div.question-dqi-explanations {
    border: 1px dashed #797979;
    color: #333;
    background-color: #eee;
    padding: 1em 2em;
}


/* NEW STUFF for 2013 */

#overall-status {
    background-color: #FFF;
    padding: 3px;
    border: 1px dotted #999;
    margin-bottom: 12px;
}

    #overall-status table {
        border-collapse: collapse;
        width: 970px;
        margin: 0 auto;
    }

        #overall-status table th {
            text-align: left;
            font-weight: bold;
            font-size: 11px;
            padding: 4px 9px;
            border-left: 3px solid #999;
            background-color: #eee;
            border-bottom: 2px solid #fff;
        }

            #overall-status table th.col1 {
                width: 100px;
            }

            #overall-status table th.col2 {
                width: 200px;
            }

        #overall-status table td {
            font-size: 12px;
            padding: 4px 24px 4px 6px;
            border-left: 3px solid #fff;
            border-bottom: 2px solid #fff;
        }

        #overall-status table th.mustfix {
            border-right: none;
            background-color: #FFEBEB;
            color: #A30000;
            border-left: 3px solid red;
        }

        #overall-status table td.mustfix {
            border-left: none;
            background-color: #FFEBEB;
        }

span.none {
    font-style: italic;
    color: #595959;
}

h1 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 12px;
    padding-left: 3px;
    font-size: 18px;
}

#survey-submit {
    text-align: right;
    margin: 0px 1px;
    padding: 7px;
    color: #005700;
}

    #survey-submit.not-ready {
        color: #666;
        font-size: 12px;
        font-style: italic;
    }

        #survey-submit.not-ready input {
            font-size: 12px;
        }


#info-pane h1 {
    border: none;
    padding: 0;
    margin: 0;
    margin-top: 1em;
}

#info-pane h2, #nav-pane h2 {
    color: #d2784a;
    font-size: 1.15em;
}

#nav-pane h2 {
    margin-left: 25px;
}

#info-pane h3 {
    font-size: 1.1em;
}

#nav-pane ul.spaced-out li {
    margin-bottom: 1em;
    padding-right: 50px;
}

#nav-pane a:VISITED {
    color: blue;
}

#nav-pane a {
    text-decoration: none;
    font-weight: bold;
}

#nav-pane .nav-action {
    margin: 0 4em 0 25px;
    padding: 1em;
    text-align: center;
    background-color: #ffc;
    border: 1px solid #aaa;
}

span.grey {
    color: #595959;
}

table.instructions {
    border-collapse: collapse;
    margin-bottom: 1em;
}

    table.instructions tr td, table.instructions tr th {
        border: 1px solid #333;
        vertical-align: top;
        font-weight: normal;
        padding-right: 1em;
    }

        table.instructions tr td li {
            margin-top: .4em;
        }

.trends p, .errors p, .warnings p, .dqis p {
    margin: .4em 0;
}

.unresolved-trend, .unresolved-error, .unresolved-dqi {
    background-color: #ff9;
    padding: .5em 0 1em 3em;
    margin-bottom: 1em;
    border: 2px solid red;
    background-image: url('../images/herd_ui_v3/ico_error.png');
    background-size: 20px 20px;
    background-position: 1em 1em;
    background-repeat: no-repeat;
    clear: both;
}

.unresolved-warning {
    background-color: #ff9;
    padding: .5em 0 1em 3em;
    margin-bottom: 1em;
    border: 2px solid #eee;
    background-image: url('../images/herd_ui_v3/ico_warn.png');
    background-size: 20px 20px;
    background-position: 1em 1em;
    background-repeat: no-repeat;
    clear: both;
}

.unresolved-trend p.trend-title, .unresolved-error p.error-title, .unresolved-dqi p.dqi-title {
    color: red;
}

.currentlyEditing {
    border: 2px solid transparent;
}

.Q.currentlyEditing div.title {
    background-color: transparent;
}

    .Q.currentlyEditing div.title .question-title {
        color: #000000;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
    }

.bottom-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: var(--space-5) 0 0;
}

    .bottom-controls > div {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

#navigation_pane h3 {
    text-align: left;
    padding-left: .6em;
}

span.comment-text {
    display: block;
    padding: .5em 0;
}

    span.comment-text span.comment-text-content {
        display: inline;
        margin-right: 1em;
        background-color: white;
        box-shadow: 0.2em 0 0 white,-0.2em 0 0 white;
        -moz-box-shadow: 0.2em 0 0 white,-0.2em 0 0 white;
        -webkit-box-shadow: 0.2em 0 0 white,-0.2em 0 0 white;
    }


ul.status-box li img {
    margin-right: 0;
}


table.form td {
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-right: 2rem;
}


.jquery-checkbox .mark {
    background-color: transparent;
}

table.question td {
    padding-right: 3px;
}

.footer-table ul {
    list-style: none;
    text-indent: -.6em;
}

.footer-table ol > li {
    font-weight: bold;
    margin-bottom: .7em;
}

    .footer-table ol > li > ul {
        margin-left: 0;
    }

        .footer-table ol > li > ul > li {
            font-weight: normal;
        }

.footer-table td.header {
    border-top: 1px solid black;
    font-weight: bold;
}

.footer-table {
    border-bottom: 1px solid black;
}

    .footer-table tr td {
        border: none;
    }

div.split-up {
    padding: 1rem;
    margin: 0 0 2rem 0;
    -moz-column-count: 4;
    -moz-column-gap: 0px;
    -webkit-column-count: 4;
    -webkit-column-gap: 0px;
    column-count: 4;
    column-gap: 0px;
}

.wf-input.disabled .combobox_button {
    background-image: url('../images/herd_ui_v3/drop_disabled.png');
}

.wf-input.disabled, .wf-input.disabled .combobox input, .wf-input.disabled a {
    background-color: #f4f4f4;
}

.herd-list li h5 {
    font-size: 16px;
    font-weight: bold;
}

.herd-list2 li {
    list-style: disc;
}

    .herd-list2 li a {
        font-size: 14px;
    }

.ui-button-icon-only {
    text-indent: -9999px;
}

fieldset.contacts {
    margin-top: .5em;
    margin-bottom: 2em;
}

    fieldset.contacts div {
        margin-bottom: .2em;
    }

    fieldset.contacts legend {
        font-size: 1.2em;
        font-weight: bold;
    }

    fieldset.contacts fieldset legend {
        font-size: 1em;
        border-bottom: 0;
        margin-bottom: 0;
    }

    fieldset.contacts div.divider {
        border-bottom: 1px solid #E2EAF1;
        margin: 1em 0;
    }

.jump-to-question {
    color: #193752;
}

.qb-title {
    font-weight: bold;
}

div.qb-title {
    margin-bottom: 10px;
}

div.qb-number {
    width: 95px;
    display: inline-block;
    float: left;
}

div.qb-number-text {
    display: inline-block;
    width: 950px;
}

div.qb-instructions {
    margin-left: 90px;
    padding-right: 40px;
}

    div.qb-instructions ul {
        padding-inline-start: 0px;
        margin-left: 24px;
    }


.qb-subtitle {
    font-weight: bold;
    margin-left: 3em;
}

p.qb-explanation {
    margin-left: 6em;
}

ul.qb-explanation {
    margin-left: 4em;
}

.qb-entry .entry-title {
    font-weight: bold;
    margin-left: 2em;
    margin-top: .5em;
}

.qb-entry_indented .qb-entry .entry-title {
    font-weight: normal;
    margin-left: 3em;
}

.qb-entry .entry-title.l {
    text-align: left;
}

.qb-entry .entry-title.r {
    text-align: right;
    padding-right: 2em;
}

.qb-entry .entry-summary {
    margin-left: 3em;
}

.qb-entry {
    margin-bottom: 1em;
}

    .qb-entry dfn {
        font-style: normal;
    }

    .qb-entry .c1 {
        float: left;
        width: 500px;
    }

.qb-single-column .qb-entry .c1 {
    width: 650px;
}

.qb-four-column .qb-entry .c1 {
    width: 400px;
}

.qb-entry .c2 {
    float: left;
    width: 150px;
    text-align: center;
}

    .qb-entry .c2.double {
        width: 300px;
    }

    .qb-entry .c2.triple {
        width: 450px;
    }

.qb-entry:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


#survey-status {
    /*border: 1px solid #c4c4c4;
	border-top: 4px solid #01bced;
	max-width: 1100px;
	margin: .5em auto 1em;
	padding: 15px;*/
}

    #survey-status .entry-block {
        float: left;
        width: 50%;
        min-width: 500px;
    }

#survey-summary {
    padding: 0 2em;
}

#survey-status .entry-label {
    float: left;
    width: 40%;
    margin-bottom: 2px;
}

#survey-status .entry-value {
    float: left;
    width: 60%;
    margin-bottom: 2px;
}

#survey-status .mustfix {
    /*	background-color: #FFEBEB;
*/ /*color: #A30000;*/
}

#survey-status .entry-label,
#survey-status .entry-value {
    padding: 4px 9px;
}

#survey-status .entry-label {
    border-left: 3px solid #e98412;
    background-color: #eee;
    font-weight: bold;
}

    #survey-status .entry-label.mustfix {
        background-color: #FFEBEB;
        border-left: 3px solid red;
    }


.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


.select2-selection__placeholder {
    color: #595959 !important;
}

.data-input.checkbox {
    -webkit-appearance: none;
    background-color: #fafafa;
    border: 1px solid #cacece;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 9px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    top: 5px;
}

    .data-input.checkbox:active, .data-input.checkbox:checked:active {
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
    }

    .data-input.checkbox:checked {
        background-color: #fafafa;
        border: 1px solid #adb8c0;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
        color: #99a1a7;
    }

        .data-input.checkbox:checked:after {
            content: '\2714';
            font-size: 14px;
            position: absolute;
            top: 0px;
            left: 3px;
            color: #565656;
        }



/* ARIA combobox */
.annotate {
    font-style: italic;
    color: #366ED4;
}

.hidden {
    display: none;
}

.combobox-wrapper {
    display: inline-block;
    position: relative;
    font-size: 1em;
}

.combobox-label {
    font-size: 14px;
    font-weight: bold;
    margin-right: 5px;
}

.listbox, .combobox-wrapper .grid {
    min-width: 74px;
    background: white;
    border: 1px solid #ccc;
    list-style: none;
    margin: 0;
    padding: 3px !important;
    text-align: right !important;
    position: absolute;
    top: 2.2em;
    left: 2px;
    z-index: 1;
}

    .listbox .result {
        cursor: default;
        margin: 0;
    }

        .listbox .result:hover, .combobox-wrapper .grid .result-row:hover {
            background: rgb(139, 189, 225);
        }

    .listbox .focused, .combobox-wrapper .grid .focused {
        background: rgb(139, 189, 225);
    }

    .combobox-wrapper .grid .focused-cell {
        outline-style: dotted;
        outline-color: green;
    }

.combobox-wrapper input {
    font-size: 1em;
    border: 2px solid #9bc;
    padding: 4px 19px 3px 0;
    border-radius: 2px;
    width: 93px;
}

.wide-inputs .combobox-wrapper input {
    width: 110px;
}

.combobox-wrapper input.number {
    text-align: right;
}

.combobox-wrapper.disabled input {
    background-color: #eee;
    /*border: 2px solid #ccc;*/
}

/* Validation highlighting must take priority over the disabled grey background,
   so disabled/read-only fields (e.g. while impersonating before "begin data entry")
   still show error/trend/DQI highlighting. Placed after the disabled rule so it
   wins by source order at equal specificity. */
.combobox-wrapper.err input,
.combobox-wrapper.dqi input,
.combobox-wrapper.disabled.err input,
.combobox-wrapper.disabled.dqi input {
    background-color: #fdd;
}

.combobox-wrapper.trend input,
.combobox-wrapper.disabled.trend input {
    background-color: #ff9;
}

.combobox-wrapper .combobox-dropdown {
    position: absolute;
    right: 4px;
    top: 6px;
    width: 15px;
    background-image: url('../images/herd_ui_v3/drop.png');
    background-position: center;
    background-repeat: no-repeat;
    text-decoration: none;
}

.combobox-wrapper.disabled .combobox-dropdown {
    background-image: url('../images/herd_ui_v3/drop_disabled.png');
}

.combobox-wrapper input.has-dollar {
    padding-left: 1em;
}

.combobox-wrapper span.dollar-sign {
    position: absolute;
    left: 5px;
    /*top: 6px;*/
    font-size: inherit;
}

.combobox-wrapper .grid .result-row {
    padding: 2px;
    cursor: default;
    margin: 0;
}

.combobox-wrapper .grid .result-cell {
    display: inline-block;
    cursor: default;
    margin: 0;
    padding: 0 5px;
}

    .combobox-wrapper .grid .result-cell:last-child {
        float: right;
        font-size: 12px;
        font-weight: 200;
        color: #333;
        line-height: 24px;
    }

col.col50 {
    width: 50%
}

col.col30 {
    width: 30%;
}

col.col70 {
    width: 70%;
}

h3 {
    font-size: 16px;
    font-weight: bold;
}

h4 {
    font-size: 14px;
    font-weight: bold;
}

td.question-id {
    font-weight: bold;
    white-space: nowrap;
    padding-right: .4em;
}

.required_bullet {
    color: red;
}

.qb-multipart {
    margin: 1em 0 2em 2em;
    clear: both;
}

    .qb-multipart > div {
        float: left;
    }

        .qb-multipart > div.continued {
            clear: both;
            margin-left: 2em;
            margin-top: 2em;
        }

    .qb-multipart div.index {
        margin-right: .3em;
        font-weight: bold;
    }

    .qb-multipart .arrow {
        padding: 0 3em 0 1em;
    }

    .qb-multipart label {
        margin: 0 1em 1em;
    }

    .qb-multipart:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }



/* HERD_UI_V3 FY23 ui changes */
/* blue footer links */
#ui-v3-footer-blue-enclosure, #ui-v3-footer-blue-enclosure div {
    background-color: #005699;
}

#ui-v3-footer-blue {
    color: #ffffff;
    margin: auto;
    width: 1336px;
    position: relative;
    display: flex;
    padding: 48px 52px;
    align-items: flex-start;
    gap: 32px;
    flex-shrink: 0;
    font-size: 16px;
    font-style: normal;
    line-height: 24px;
}

#ui-v3-notice-enclosure, #ui-v3-notice-enclosure div {
    background-color: #D83933;
    color: #fffff;
}

#ui-v3-notice img {
    margin-right: 16px;
}

#ui-v3-notice {
    color: #fff;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#ui-v3-notice {
    width: 1440px;
    margin: auto;
    padding: 24px 54px;
}

    #ui-v3-notice a:hover {
        background-color: #cf6d69;
        color: #badefe;
    }

    #ui-v3-footer-blue a, #ui-v3-navigation a, #ui-v3-notice a {
        color: #FFF;
        text-decoration: underline;
    }

        #ui-v3-footer-blue a:hover, #ui-v3-navigation a:hover {
            background-color: #0768b6;
            color: #badefe;
        }

#ui-v3-footer-logo {
    margin: auto;
    padding: 32px 52px;
    height: 134px;
    width: 1336px;
    position: relative;
}


#ui-v3-navigation-enclosure, #ui-v3-navigation-enclosure div {
    background-color: #005699;
}

#ui-v3-navigation {
    color: #ffffff;
    margin: auto;
    height: 56px;
    width: 1336px;
    position: relative;
    padding: 16px 62px;
    flex-shrink: 0;
    font-size: 16px;
    font-style: normal;
    line-height: 24px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    justify-content: flex-end;
    gap: 8px;
}


#ui-v3-footer-omb-notice {
    float: right;
    color: #1B1B1B;
    text-align: right;
    vertical-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    position: absolute;
    margin: 0;
    top: 50%;
    right: 52px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#ui-v3-header-enclosure, #ui-v3-header-enclosure div {
    background-color: #ffffff;
}

#ui-v3-header {
    width: 1440px;
    height: 114px;
    padding: 16px 52px;
    margin: auto;
}

    #ui-v3-header img {
        margin-right: 32px;
    }

/*    class="row sign-in-box" */
#ui-v3-sign-in-box {
    background-image: url(/images/hero-specs-bkg.png);
    background-size: cover;
}

.ui-v3-sign-in-form {
    width: 340px;
    height: 40px;
}

.ui-v3-reminder-link {
    color: white;
}

a.ui-v3-ncses-link {
    color: NSF-Blue-100;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 125% */
    text-decoration-line: underline;
}

div.ui-v3-ncses-block {
    height: 384px;
    width: 424px;
    float: left;
    margin-right: 32px;
    text-align: center;
    padding: 80px 0;
}



#ui-v3-whats-new {
    padding: 48px 52px;
    margin: auto;
    width: 1440px;
    flex-shrink: 0;
}

.ui-v3-blue-bar {
    background-color: #005699;
    width: 120px;
    height: 8px;
    margin-bottom: 40px;
}

#ui-v3-whats-new ul {
    margin-bottom: 16px;
    margin-top: 10px;
    font-size: 16px;
}

.ui-v3-error {
    color: #D3B34E;
    font-size: 15px;
}

#ui-v3-sign-in-box a {
    color: #fff;
}

    #ui-v3-sign-in-box a:hover {
        color: #eee;
    }

#ui-v3-survey-links {
    float: right;
    font-size: 16px;
    width: 500px;
    padding: 48px 0;
}

    #ui-v3-survey-links p {
        padding-right: 20px;
    }

    #ui-v3-survey-links a {
        text-decoration: underline;
    }

    #ui-v3-survey-links > div {
        width: 500px;
    }

#ui-v3-welcome-block {
    padding: 48px 52px;
    margin: auto;
    width: 1440px;
    flex-shrink: 0;
    background-color: #CCDDEA;
    color: #1B1B1B;
    font-size: 16px;
}

a.as-a-button {
    border: 1px solid white;
    background: #005699;
    padding: 14px;
    text-transform: uppercase;
    font-size: 15px;
    width: 108px;
    height: 48px;
    color: white;
}







/* Component styles for the survey landing page.
 * Loaded after USWDS so we can override its defaults where needed.
 */

/* =====================================================================
 * Status badges (4 states: not-started, completed, warning, review)
 * The colored variants (completed/warning/review) carry an icon and now
 * appear only in the legend at the top of the dashboard. The sidebar and
 * the issues list use the neutral default circle (status-badge--not-started).
 * ===================================================================== */

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.status-badge--not-started {
    background-color: transparent;
    border: 1.5px solid var(--color-input-border);
    color: transparent;
}

.status-badge--completed {
    background-color: var(--color-success);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.7rem;
}

.status-badge--review {
    background-color: var(--color-error);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Crect x='10' y='4' width='4' height='10.5' rx='2'/%3E%3Ccircle cx='12' cy='19' r='2.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.62rem;
}

/* Warning is rendered as a yellow triangle, not a circle, to match the wireframe. */
.status-badge--warning {
    background-color: transparent;
    border-radius: 0;
    width: 1.1rem;
    height: 1rem;
    position: relative;
    color: transparent;
}

    .status-badge--warning::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border-left: 0.55rem solid transparent;
        border-right: 0.55rem solid transparent;
        border-bottom: 1rem solid var(--color-warning);
    }

    /* Exclamation inside the warning triangle. Dark navy for legibility —
 * white on amber (#F59E0B) would fail contrast. Sits in the triangle's
 * wider lower half. */
    .status-badge--warning::after {
        content: "!";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -0.01rem;
        text-align: center;
        font-size: 0.6rem;
        font-weight: 800;
        line-height: 1;
        color: var(--color-primary-dark);
    }

.status-legend {
    display: flex;
    font-size: var(--text-sm);
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.status-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* =====================================================================
 * Sidebar — Survey Progress
 * ===================================================================== */

.sidebar-header {
    font-size: var(--text-base);
    font-weight: 700;
    padding: 0 var(--space-5) var(--space-3);
    border-bottom: 1px solid var(--color-card-border);
    margin: 0 0 var(--space-2);
}

.sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
}

.sidebar-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-2);
    align-items: start;
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    background: none;
    border: none;
    border-left: 3px solid transparent;
    width: 100%;
    text-align: left;
    line-height: 1.35;
    cursor: pointer;
}

    .sidebar-item:hover {
        background-color: var(--color-section-header);
    }

    .sidebar-item[aria-current="true"] {
        background-color: var(--color-info-bg);
        border-left-color: var(--color-stroke-active);
        color: var(--color-text);
        font-weight: 600;
    }

.sidebar-item__number {
    color: var(--color-text-subtle);
    font-weight: 500;
    min-width: 1.25rem;
}

.sidebar-item__label {
    min-width: 0;
    word-break: break-word;
}

.sidebar-item__status {
    margin-top: 2px;
}

.sidebar-submit {
    margin: var(--space-3) var(--space-5) 0;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-disabled-bg);
    color: var(--color-text-disabled);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--text-sm);
}

    .sidebar-submit:not([disabled]) {
        background-color: var(--color-primary-dark);
        color: #fff;
        cursor: pointer;
    }

/* =====================================================================
 * Dashboard cards (Key Information + Issues & Variances)
 * ===================================================================== */

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
}

.dashboard-section__heading {
    font-size: var(--text-lg);
    font-weight: 700;
    margin: 0 0 var(--space-3) 0;
}

.dashboard-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.dashboard-item {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: var(--space-2);
    align-items: start;
    line-height: 1.25;
}

.dashboard-item__icon {
    color: var(--color-text-subtle);
    font-size: var(--text-base);
    line-height: 1.25;
    margin-top: 2px;
}

.dashboard-item__label {
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
    margin: 0 0 2px 0;
    line-height: 1.2;
}

.dashboard-item__value {
    font-weight: 700;
    font-size: var(--text-base);
    margin: 0;
    color: var(--color-text);
    line-height: 1.2;
}

.dashboard-item__value--inline {
    font-weight: 400;
}

    .dashboard-item__value--inline strong {
        font-weight: 700;
    }

/* =====================================================================
 * Submit info banner (just above the "Survey Changes" callout)
 * ===================================================================== */

.submit-banner {
    background-color: var(--color-surface);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.submit-banner__text {
    color: var(--color-text);
    margin: 0;
    font-size: var(--text-sm);
}

.submit-banner__button {
    background-color: var(--color-disabled-bg);
    color: var(--color-text-disabled);
    border: none;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--text-sm);
}

    .submit-banner__button:not([disabled]) {
        background-color: var(--color-primary-dark);
        color: #fff;
        cursor: pointer;
    }

/* =====================================================================
 * Survey Changes summary box
 * (Uses our own card styling rather than USWDS .usa-summary-box because
 * the wireframe uses a softer blue tint.)
 * ===================================================================== */

.changes-card {
    /* Yellow, not blue: info-blue is reserved for genuine data-mismatch alerts
   * (cross-question totals, validation hints). This card is a "draw attention"
   * surface, which is what warning-yellow is for. */
    background-color: var(--color-warning-bg);
    border: 1px solid #FDE68A;
    border-left: 4px solid var(--color-warning);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
}

.changes-card__title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin: 0 0 var(--space-3) 0;
}

.changes-card__subtitle {
    font-size: var(--text-base);
    font-weight: 700;
    margin: 0 0 var(--space-2) 0;
}

.changes-card__body {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* =====================================================================
 * Group headers (dark bands that separate section groups)
 * ===================================================================== */

.group-header {
    background-color: var(--color-group-header);
    color: #fff;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-5);
    font-weight: 700;
    font-size: var(--text-base);
    margin-top: var(--space-3);
    margin-bottom: var(--space-2);
}

.group-header + .usa-accordion {
    margin-top: var(--space-2);
}

.getting-started-accordion {
    margin-bottom: var(--space-2) !important;
}

.getting-started-accordion + .usa-accordion {
    margin-top: var(--space-2) !important;
}

.getting-started-accordion + .Q.usa-accordion {
    margin-top: var(--space-2) !important;
}

#groups-container > .group-header:first-child {
    margin-top: 0;
}

/* =====================================================================
 * Accordion drawers (override USWDS .usa-accordion to match wireframe)
 * ===================================================================== */

.usa-accordion {
    margin: 0;
    background: none;
}

    .usa-accordion + .usa-accordion {
        margin-top: var(--space-2);
    }

.usa-accordion__heading {
    margin: 0;
}

    .usa-accordion__button .question-title {
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        line-height: 1.25;
    }

    .usa-accordion__button .accordion-chevron {
        justify-self: end;
    }

    .usa-accordion__button.accordion-button--no-number .question-title {
        margin: 0 !important;
        padding-left: 25px !important;
        float: none !important;
        line-height: 1.25;
    }

.usa-accordion__button {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-2);
    align-items: center;
    width: 100%;
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    font-size: var(--text-base) !important;
    font-weight: 500 !important;
    padding: var(--space-3) var(--space-5) !important;
    border: 1px solid var(--color-card-border) !important;
    border-radius: var(--radius-md) !important;
    background-image: none !important;
    text-align: left;
    position: relative;
    margin: 0;
}

    .usa-accordion__button:hover {
        background-color: var(--color-section-header) !important;
    }

    .usa-accordion__button[aria-expanded="true"] {
        border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    }

.accordion-number {
    font-weight: 500;
    color: var(--color-text);
    display: none;
}

.accordion-button--no-number .accordion-number {
    display: none;
}

.question-title--numbered {
    display: inline-flex !important;
    align-items: baseline;
    margin: 0 !important;
    padding-left: 25px !important;
    float: none !important;
    line-height: 1.25;
}

.question-label-number {
    display: inline-block;
    margin-right: 0.55rem;
}

.question-label-text {
    display: inline-block;
}

.accordion-chevron {
    width: 1rem;
    height: 1rem;
    color: var(--color-text-subtle);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.usa-accordion__button[aria-expanded="true"] .accordion-chevron {
    transform: rotate(180deg);
}

.usa-accordion__content {
    background-color: var(--color-surface) !important;
    /*	border: 1px solid var(--color-card-border) !important;
*/ border-top: none !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
    padding: var(--space-5) !important;
    margin-top: -1 * var(--space-2);
}

/* State emphasis: open drawers lift, closed drawers recede.
 * Driven by the inner button's aria-expanded so we can style the
 * whole wrapper as a single unit via :has(). De-emphasis uses real
 * color tokens, not opacity, so contrast stays WCAG-AA on closed drawers. */

.usa-accordion {
    transition: box-shadow 0.15s ease;
}

.usa-accordion__button {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

/* Open: wrapper carries a drop shadow; button + content panel share a slightly
 * darker border to look like a single raised card; title text gains weight. */
.usa-accordion:has(button[aria-expanded="true"]) {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10);
    border-radius: var(--radius-md);
}

    .usa-accordion:has(button[aria-expanded="true"]) .usa-accordion__button {
        border-color: #d2d6de !important;
        color: var(--color-primary-dark) !important;
        font-weight: 600 !important;
    }

    .usa-accordion:has(button[aria-expanded="true"]) .usa-accordion__content {
        border-color: #d2d6de !important;
    }

/* Closed: only the button is visible. Quiet gray surface + subtle text.
 * #5e6573 on #f3f5f8 ≈ 5.05:1, comfortably above the WCAG AA 4.5:1 floor. */
.usa-accordion:has(button[aria-expanded="false"]) .usa-accordion__button {
    background-color: #f3f5f8 !important;
    border-color: #e0e3e8 !important;
    color: var(--color-text-subtle) !important;
}

.usa-accordion:has(button[aria-expanded="false"]) .accordion-number {
    color: var(--color-text-subtle);
}

@media (prefers-reduced-motion: reduce) {
    .usa-accordion,
    .usa-accordion__button {
        transition: none !important;
    }
}

/* =====================================================================
 * Bottom submit area
 * ===================================================================== */

.main-submit {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

.main-submit__button {
    background-color: var(--color-primary-dark);
    color: #fff;
    border: none;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--text-base);
    cursor: pointer;
}

    .main-submit__button:hover {
        background-color: var(--color-primary-darker-hover);
    }

    .main-submit__button:disabled {
        background-color: var(--color-disabled-bg);
        color: var(--color-text-disabled);
        cursor: not-allowed;
    }

/* =====================================================================
 * Content blocks (rendered inside accordion bodies)
 * Types: callout, heading, paragraph, definition-list
 * ===================================================================== */

.content-callout {
    background-color: var(--color-info-bg);
    border: 1px solid #d8e6fb;
    border-left: 4px solid var(--color-stroke-active);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    color: var(--color-primary-dark);
    line-height: 1.5;
    margin: 0 0 var(--space-5) 0;
    font-size: var(--text-sm);
}

    .content-callout strong {
        font-weight: 700;
    }

.content-heading {
    font-size: var(--text-base);
    font-weight: 700;
    margin: var(--space-5) 0 var(--space-2) 0;
    color: var(--color-text);
    line-height: 1.3;
}

.content-callout + .content-heading,
.usa-accordion__content > .content-heading:first-child {
    margin-top: 0;
}

.content-paragraph {
    margin: 0 0 var(--space-3) 0;
    color: var(--color-text);
    line-height: 1.55;
    font-size: var(--text-sm);
}

.content-definitions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-2) 0 var(--space-4) 0;
    font-size: var(--text-sm);
}

.content-definition {
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-stroke-active);
    line-height: 1.5;
}

.content-definition__term {
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
}

.content-definition__text {
    margin: 0;
    color: var(--color-text);
    line-height: 1.5;
}

.content-placeholder {
    margin: 0;
    color: var(--color-text-subtle);
    font-style: italic;
    font-size: var(--text-sm);
}

/* =====================================================================
 * Form blocks used inside accordion content
 * subheader, field, field-row, textarea, bullet-list, contact-card
 * ===================================================================== */

.content-subheader {
    font-size: var(--text-base);
    font-weight: 700;
    margin: var(--space-5) 0 var(--space-2) 0;
    color: var(--color-text);
    line-height: 1.3;
}

.usa-accordion__content > .content-subheader:first-child,
.content-callout + .content-subheader {
    margin-top: 0;
}

.content-bullets {
    margin: 0 0 var(--space-4) 0;
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    color: var(--color-text);
    line-height: 1.55;
    font-size: var(--text-sm);
}

/* Nested sub-bullets (e.g. Q7 "Examples:" under a top-level bullet). Square
 * markers and a tighter rhythm distinguish them from the parent list. */
.content-subbullets {
    list-style-type: square;
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* ---- Field (label + one or more inputs sharing the label) ---- */

.content-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
    min-width: 0;
    flex: 1;
}

.content-field__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.content-field__inputs {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.content-field__inputs-with-ext {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.content-field__ext {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.content-field__ext-label {
    font-size: var(--text-sm);
    color: var(--color-text);
}

/* Row of multiple labeled field groups laid out horizontally */
.content-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

@media (max-width: 640px) {
    .content-field-row {
        grid-template-columns: 1fr;
    }
}

/* ---- Inputs ---- */

.form-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
    font-size: var(--text-base);
}

.form-input--small {
    width: 4rem;
    flex: 0 0 auto;
}

.form-input--medium {
    width: 16rem;
    flex: 0 0 auto;
}

.form-input::placeholder {
    color: var(--color-placeholder);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-stroke-active);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Auto-populated text appears lighter so the user can see what was
 * prefilled vs. what they have entered themselves. The class is removed
 * on the first input event (wirePrefilledInputs in app.js). */
.form-input.is-prefilled,
.form-textarea.is-prefilled {
    color: var(--color-text-subtle);
}

/* ---- Textarea ---- */

.content-textarea {
    margin: var(--space-2) 0 var(--space-4) 0;
}

.form-textarea {
    width: 100%;
    min-height: 5rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    line-height: 1.4;
    resize: vertical;
    font-size: var(--text-base);
}

    .form-textarea:focus {
        outline: none;
        border-color: var(--color-stroke-active);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }

.content-textarea__hint {
    margin: var(--space-1) 0 0 0;
    text-align: right;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

/* ---- Contact card ---- */

.content-contact-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-3) 0;
}

.content-checkbox-row {
    display: flex;
    gap: var(--space-5);
    margin-top: var(--space-2);
}

.content-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    cursor: pointer;
    font-size: var(--text-sm);
}

    .content-checkbox input[type="checkbox"] {
        width: 1rem;
        height: 1rem;
        margin: 0;
        accent-color: var(--color-info);
        cursor: pointer;
    }

/* =====================================================================
 * Question content blocks
 * Used by lettered/numbered currency-input questions (e.g. Q1 R&D
 * expenditures by source). Builds on existing tokens; no new colors.
 * ===================================================================== */

/* ---- Question intro: number column + question text + "see definition" link ---- */

.question-intro {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: baseline;
    margin: 0 0 var(--space-4);
}

.question-intro__number {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
}

.question-intro__text {
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.4;
    margin: 0;
}

.question-intro__definition {
    grid-column: 2;
    margin: var(--space-1) 0 0;
    font-size: var(--text-base);
}

    .question-intro__definition a {
        color: var(--color-stroke-active);
        text-decoration: underline;
    }

.question-intro__definition-tag {
    color: var(--color-text-subtle);
    margin-left: var(--space-3);
}

/* ---- Currency column header aligned with the input column ---- */

.currency-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    column-gap: var(--space-6);
    text-align: center;
    margin: var(--space-2) 0 var(--space-3);
}

.currency-header > * {
    grid-column: 2;
}

.currency-header > :not(.currency-header__lead),
.entry-list__caption {
    transform: translateX(calc(0px - var(--space-1)));
}

.currency-header__title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.currency-header__subtitle {
    font-size: var(--text-base);
    color: var(--color-text-subtle);
    margin: 2px 0 0;
}

.currency-header__hint {
    font-size: var(--text-base);
    color: var(--color-text-subtle);
    margin: 0;
}

/* Split variant: a left-aligned section label sits beside the centered
 * R&D expenditures heading in the input column. */
.currency-header--split {
    align-items: flex-end;
}

.currency-header__lead {
    grid-column: 1;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
    text-align: left;
    margin: 0;
}

.currency-header__main {
    text-align: center;
}

/* ---- Currency row: text column on the left, input column on the right ---- */

.currency-row {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: var(--space-6);
    align-items: start;
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-card-border);
}

    .currency-row:first-of-type,
    .currency-group + .currency-row,
    .currency-group__children .currency-row {
        border-top: none;
    }

.currency-row__label {
    font-size: var(--text-base);
    font-weight: 700;
    margin: 0 0 var(--space-2);
    color: var(--color-text);
    line-height: 1.3;
}

/* Regular-weight aside inside an otherwise-bold row label (e.g. the
 * "(including ...)" qualifier on Q3 row a). */
.currency-row__label-note {
    font-weight: 400;
}

.currency-row__description {
    font-size: var(--text-sm);
    margin: 0 0 var(--space-2);
    color: var(--color-text-muted);
    line-height: 1.5;
}

    .currency-row__description:last-child {
        margin-bottom: 0;
    }

.currency-row__bullets {
    font-size: var(--text-sm);
    margin: var(--space-1) 0 0;
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* ---- Currency input: bordered text input with leading "$" ---- */

.currency-input {
    position: relative;
}

    .currency-input::before {
        content: "$";
        position: absolute;
        left: var(--space-3);
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-text-subtle);
        font-size: var(--text-base);
        pointer-events: none;
    }

    .currency-input input {
        width: 100%;
        padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + 12px);
        border: 1px solid var(--color-input-border);
        border-radius: var(--radius-md);
        background-color: var(--color-surface);
        color: var(--color-text);
        font-family: inherit;
        line-height: 1.4;
    }

        .currency-input input:focus {
            outline: none;
            border-color: var(--color-stroke-active);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
        }

/* Count inputs (e.g. Q15 headcount) reuse the currency field but drop the "$"
 * adornment and its extra left padding. */
.currency-input--plain::before {
    content: none;
}

.currency-input--plain input {
    padding-left: var(--space-3);
}

/* Computed total fields: not editable, shown in the same lighter text used for
 * auto-populated values elsewhere so the user reads them as system-generated. */
.currency-input input.is-total {
    color: var(--color-text-subtle);
    cursor: default;
}

    .currency-input input.is-total:focus {
        border-color: var(--color-input-border);
        box-shadow: none;
    }

/* Failed numeric validation: red border, plus a short message below the field. */
.currency-input input.is-invalid,
.currency-input input.is-invalid:focus {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.currency-input__error {
    margin: var(--space-1) 0 0;
    color: var(--color-error);
    text-align: right;
    line-height: 1.3;
}

/* "Confidential" annotation under the input — small, right-aligned. */
.currency-row__confidential {
    width: 94px;
    margin: var(--space-1) auto 0;
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    transform: translateX(var(--space-3));
}

/* ---- Currency group: parent row (no input) with indented numbered children ---- */

.currency-group {
    padding: var(--space-4) 0 var(--space-2);
    border-top: 1px solid var(--color-card-border);
}

.currency-group__label {
    font-size: var(--text-base);
    font-weight: 700;
    margin: 0 0 var(--space-3);
    color: var(--color-text);
    line-height: 1.3;
}

/* When the group carries a description, the label hugs it; the description then
 * provides the gap before the indented children. */
.currency-group:has(.currency-group__description) .currency-group__label {
    margin-bottom: var(--space-1);
}

.currency-group__description {
    margin: 0 0 var(--space-3);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.currency-group__children {
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

    .currency-group__children .currency-row {
        padding: var(--space-2) 0;
    }

/* ---- Currency matrix: multi-column currency table (e.g. Q5 part B:
 * Federal / Nonfederal / auto Total). A single grid holds a centered caption
 * spanning the input columns, a column-header row, then one data row per item.
 * grid-template-columns is set inline by renderCurrencyMatrix from the column
 * count. Computed Total cells reuse the .currency-input is-total treatment. */

.currency-matrix {
    display: grid;
    gap: var(--space-2) var(--space-4);
    align-items: start;
    margin: var(--space-3) 0;
}

/* Left-column header (e.g. "Type of research"), aligned with the column heads. */
.currency-matrix__lead {
    align-self: end;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
    font-size: var(--text-sm);
}

/* Full-width rule before a totals row (spans every column). */
.currency-matrix__divider {
    grid-column: 1 / -1;
    border-top: 1px solid var(--color-card-border);
    height: 0;
    margin: var(--space-1) 0;
}

/* Inputs sit at the top of their row, aligned with the bold row title. */
.currency-matrix__cell {
    align-self: start;
}

.currency-matrix__caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.2;
}

.currency-matrix__caption-title {
    font-weight: 700;
    color: var(--color-text);
}

.currency-matrix__caption-sub {
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
}

.currency-matrix__colhead {
    font-size: var(--text-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}

.currency-matrix__rowlabel {
    align-self: start;
}

.currency-matrix__row-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
}

.currency-matrix__row-desc {
    font-size: var(--text-sm);
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* Optional smaller sub-note under the lead label (e.g. "(Examples listed below)"). */
.currency-matrix__lead-sub {
    display: block;
    font-weight: 400;
    color: var(--color-text-subtle);
}

/* "Set N: Sections X–Y" examples link in the lead column header. */
.currency-matrix__lead-link {
    color: var(--color-stroke-active);
    text-decoration: underline;
    font-weight: 600;
}

/* Full-width section heading inside a matrix (e.g. "B. Engineering"); the rows
 * that follow are its sub-fields and indent their labels. */
.currency-matrix__group {
    grid-column: 1 / -1;
    font-weight: 700;
    color: var(--color-text);
    margin-top: var(--space-1);
}

div[id^='Qq09_'] .currency-matrix__group,
div[id^='Qq11_'] .currency-matrix__group,
div[id^='Qq14_'] .currency-matrix__group {
    font-size: 14px;
    font-weight: 700;
}

.currency-matrix__rowlabel--indent {
    padding-left: var(--space-4);
}

/* Sub-field rows (e.g. the 9 engineering fields) render at regular weight and a
 * smaller size; the "R&D Fields" header, the lettered section rows, and totals
 * stay bold at the base size. */
.currency-matrix__rowlabel--regular .currency-matrix__row-title {
    font-weight: 400;
}

/* Section band behind a wide field-matrix's header row and its section-group
 * rows (e.g. "B. Engineering") — a light strip that marks where each section
 * begins. Data rows are left white. It spans every column and stretches to the
 * full row height, sitting behind the labels/inputs, which paint over it. */
.currency-matrix__band {
    align-self: stretch;
    background: var(--color-section-header);
    border-radius: var(--radius-sm);
    margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2));
}

/* In the wide field matrices, the column header cells stretch to the full header
 * row height and pack their contents to the bottom, so the (a)–(h) keys and the
 * agency names all bottom-align just above the inputs. */
.currency-matrix--banded .currency-matrix__colhead {
    align-self: stretch;
    justify-content: flex-end;
}

/* ---- Entry list: prefixed write-in rows + an amount each (e.g. Q10
 * "list up to 10 agencies"). 3-column grid: letter prefix, write-in name or
 * fixed label, currency amount. The lead label spans the first two columns. */

.entry-list {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 180px;
    gap: var(--space-4) var(--space-3);
    align-items: center;
    margin: var(--space-3) 0;
}

.entry-list__lead {
    grid-column: 1 / 3;
    align-self: end;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
    font-size: var(--text-base);
}

.entry-list__caption {
    font-size: var(--text-base);
    align-self: end;
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 1.2;
}

.entry-list__caption-title {
    font-weight: 700;
    color: var(--color-text);
}

.entry-list__caption-sub {
    color: var(--color-text-subtle);
}

.entry-list__prefix {
    color: var(--color-text);
    white-space: nowrap;
}

.entry-list__name {
    min-width: 0;
}

/* Q10 agency dropdowns (SelectWoo): match redesigned input height */
.entry-list .q10-block .select2-container .select2-selection--single {
    min-height: 40px;
    height: 40px;
    border-radius: 6px;
    border-color: var(--color-input-border);
    box-sizing: border-box;
}

.entry-list .q10-block .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
    padding-left: 12px;
    padding-right: 32px;
   font-size: var(--text-base);
}

.entry-list .q10-block .select2-container .select2-selection--single .select2-selection__arrow {
    height: 38px;
    right: 6px;
}

.entry-list__label {
    font-size: var(--text-base);
    margin: 0;
    color: var(--color-text);
    line-height: 1.3;
}

.entry-list__label--total {
    font-weight: 700;
}

.entry-list__desc {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* ---- Headcount matrix (Q15): sectioned count table. Borderless; row labels
 * left, count columns right. Section headers + the "researchers only" note use
 * native colspan/rowspan. Count cells reuse the currency field sans "$". */

.headcount-matrix {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-3) 0;
}

    .headcount-matrix th,
    .headcount-matrix td {
        padding: var(--space-2);
        vertical-align: middle;
        text-align: left;
    }

    /* Column headers: prefix (a)/(b)… stacked above the label, centered. */
    .headcount-matrix thead th {
        text-align: center;
        vertical-align: bottom;
        width: 120px;
        font-size: var(--text-sm);
        font-weight: 700;
        color: var(--color-text);
        line-height: 1.2;
    }

.headcount-matrix__colnum {
    display: block;
}

/* The label column flexes to fill the remaining width. */
.headcount-matrix__corner {
    width: auto;
}

.headcount-matrix__rowlabel {
    font-weight: 400;
    line-height: 1.3;
}

.headcount-matrix__rowlabel--bold {
    font-weight: 700;
}

/* Section header rows (B. Sex, C. Citizenship, …) */
.headcount-matrix__section th {
    text-align: left;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
    padding-top: var(--space-5);
}

.headcount-matrix__confidential {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-text-subtle);
}

/* Section D: "Researchers only" sub-header + the spanning note. */
.headcount-matrix__subhead th {
    text-align: center;
    vertical-align: bottom;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
}

.headcount-matrix__note {
    text-align: center;
    vertical-align: middle;
    padding: 0 var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.headcount-matrix__cell .currency-input input {
    width: 100%;
}

/* ---- Checkbox question: conditional follow-up (e.g. Q1.1 under row e1) ----
 * A nested sub-question whose two-column layout mirrors .currency-row:
 * funding-type text on the left, an "Included" checkbox on the right.
 * Rendered hidden by default; shown or hidden at runtime by
 * refreshConditionals() in app.js. */

.checkbox-question {
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-card-border);
}

.checkbox-question__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.checkbox-question__number {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary-dark);
}

.checkbox-question__text {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

.checkbox-question__columns {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: var(--space-6);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-card-border);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
}

    .checkbox-question__columns span:last-child {
        text-align: center;
    }

.checkbox-question__row {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: var(--space-6);
    align-items: start;
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-card-border);
    cursor: pointer;
}

    .checkbox-question__row:first-of-type {
        border-top: none;
    }

.checkbox-question__label {
    font-size: var(--text-base);
    font-weight: 700;
    margin: 0 0 var(--space-2);
    color: var(--color-text);
    line-height: 1.3;
}

.checkbox-question__description {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.checkbox-question__check {
    display: flex;
    justify-content: center;
    padding-top: var(--space-1);
}

    .checkbox-question__check input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
        margin: 0;
        accent-color: var(--color-info);
        cursor: pointer;
    }

/* ---- Yes/No branch question (e.g. Q4 part A: "medical school?") ----
 * Question text on the left, a Yes/No radio pair stacked on the right —
 * mirrors the .currency-row / .checkbox-question two-column rhythm. The chosen
 * answer can gate a following .subquestion via a disableIf rule. */

.yesno-question {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: var(--space-6);
    align-items: start;
    margin: 0 0 var(--space-5);
}

.yesno-question__text {
    font-size: var(--text-base);
    font-weight: 700;
    margin: 0;
    color: var(--color-text);
    line-height: 1.3;
}

.yesno-question__options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.yesno-question__option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}

    .yesno-question__option input[type="radio"] {
        width: 1.25rem;
        height: 1.25rem;
        margin: 0;
        accent-color: var(--color-info);
        cursor: pointer;
    }

/* ---- Subquestion: a lettered sub-part (e.g. Q4 part B) that wraps its own
 * child blocks and can be disabled by an earlier answer. The .is-disabled
 * state mutes the text and greys the input. De-emphasis uses real color
 * tokens (never opacity), so any visible text stays WCAG-AA. */

.subquestion {
    margin: 0 0 var(--space-2);
}

.subquestion__label {
    font-size: var(--text-base);
    font-weight: 700;
    margin: 0 0 var(--space-2);
    color: var(--color-text);
    line-height: 1.3;
}

.subquestion__description {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Disabled state applied by any disableIf wrapper (.subquestion or
 * .content-group). Text drops to subtle (#5e6573, ≈5:1, still AA); the input
 * takes the inactive field fill. De-emphasis uses real tokens, never opacity,
 * so any visible text stays WCAG-AA. The "$" adornment dips to the disabled
 * token since it is decorative. */
.is-disabled .subquestion__label,
.is-disabled .subquestion__description,
.is-disabled .currency-header__title,
.is-disabled .currency-header__subtitle,
.is-disabled .currency-row__label,
.is-disabled .currency-matrix__caption-title,
.is-disabled .currency-matrix__caption-sub,
.is-disabled .currency-matrix__colhead,
.is-disabled .currency-matrix__row-title,
.is-disabled .currency-matrix__row-desc,
.is-disabled .content-paragraph,
.is-disabled .content-bullets,
.is-disabled .content-heading,
.is-disabled .content-subheader {
    color: var(--color-text-subtle);
}

.is-disabled .currency-input::before {
    color: var(--color-text-disabled);
}

.currency-input input:disabled {
    background-color: var(--color-disabled-field-bg);
    color: var(--color-text-disabled);
    border-color: var(--color-input-border);
    cursor: not-allowed;
}

/* ---- Divider used before the grand total ---- */

.q-divider {
    border: none;
    border-top: 1px solid var(--color-card-border);
    margin: var(--space-3) 0 0;
}

/* ---- Footnote (e.g. "automatically generated on the Web survey") ---- */

.content-footnote {
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    line-height: 1.4;
}

/* Inline footnote reference marker (e.g. the ¹ in "(Confidential¹)" or after a
   total label). Sits lighter and smaller than its surrounding text. */
.footnote-ref {
    font-size: 0.7em;
    font-weight: 400;
}

/* ---- Comments block ---- */

.comments-block {
    margin: var(--space-5) 0 0;
}

.comments-block__label {
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0 0 var(--space-2);
    color: var(--color-text);
}

/* ---- Action bar (Cancel / Save) ---- */

.action-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-5);
    margin: var(--space-5) 0 0;
}

.action-bar__cancel {
    background: none;
    border: none;
    color: var(--color-text-subtle);
    text-decoration: underline;
    cursor: pointer;
    font-size: var(--text-base);
    font-family: inherit;
    padding: var(--space-2) 0;
}

    .action-bar__cancel:hover {
        color: var(--color-text);
    }

.action-bar__save {
    background-color: var(--color-stroke-active);
    color: #fff;
    border: none;
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--text-base);
    font-family: inherit;
    cursor: pointer;
}

    .action-bar__save:hover {
        background-color: #2563eb;
    }

/* ---- Prefill actions (helper text + "...in Blank Fields" buttons) ----
 * Sits between the question instructions and the data grid on the matrix
 * questions (Q9, Q11, Q14). The two outline buttons document the live
 * survey's bulk-fill behavior; they are non-functional in the prototype. */
.prefill-actions {
    margin: 0 0 var(--space-5);
}

.prefill-actions__notes {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0 0 var(--space-3);
}

.prefill-actions__note {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text);
}

.prefill-actions__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.prefill-actions__button {
    background-color: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

    .prefill-actions__button:hover {
        background-color: var(--color-nav-bg);
        border-color: var(--color-text-subtle);
    }

/* =====================================================================
 * Reusable modal (native <dialog>) + its trigger link + generic data table.
 * A trigger is any element with data-modal-target="<id>"; the matching
 * <dialog id="modal-<id>"> opens via showModal() (dim backdrop, focus trap,
 * Esc all native). Reuse across questions by pairing a `modal` block with a
 * `.modal-link` (or any data-modal-target element).
 * ===================================================================== */

/* Link-styled trigger button (no navigation, so a <button> not an <a>). */
.modal-link,
.confidentiality-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-stroke-active);
    text-decoration: underline;
    cursor: pointer;
}

    .modal-link:hover,
    .confidentiality-link:hover {
        color: #2563eb;
    }

/* The dialog box itself is reset to a transparent, viewport-filling flex
 * container so the inner panel can be centered and clicks landing outside the
 * panel hit the dialog (handled as "click-outside → close" in app.js). */
.modal {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;
}

    .modal[open] {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal::backdrop {
        background: rgba(15, 23, 42, 0.55);
    }

.modal__panel {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.35);
    width: min(900px, calc(100vw - 2 * var(--space-8)));
    max-height: calc(100vh - 2 * var(--space-8));
    overflow: auto;
    /* extra top padding leaves room for the top-left close button */
    padding: var(--space-10) var(--space-6) var(--space-6);
}

.modal__close {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-subtle);
    cursor: pointer;
}

    .modal__close:hover {
        background: var(--color-section-header);
        color: var(--color-text);
    }

    .modal__close:focus-visible {
        outline: none;
        border-color: var(--color-stroke-active);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
    }

/* Optional visible title bar for prose popups (e.g. Q16 FTE examples). Styled
 * to match the .data-table title bar so it reads the same as the table popups. */
.modal__title {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    text-align: center;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
    background-color: var(--color-section-header);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-sm);
}

/* Tidy the first block's top margin inside a modal body. */
.modal__body > :first-child {
    margin-top: 0;
}

/* ---- "Examples of Disciplines" reference grid (examples modals) ---- */
.examples-grid__group {
    margin: 0 0 var(--space-6);
}

.examples-grid__heading {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-card-border);
}

/* Multi-column flow: a flat discipline list (section A) flows its items into
 * columns; a sub-field group (B/C/D) flows its sub-blocks into columns. */
.examples-grid__flow {
    column-count: 3;
    column-gap: var(--space-8);
}

.examples-grid__subgroup {
    break-inside: avoid;
    margin: 0 0 var(--space-4);
}

.examples-grid__subheading {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--space-1);
}

.examples-grid__list {
    margin: 0;
    padding-left: var(--space-4);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text);
}

    .examples-grid__list li {
        break-inside: avoid;
    }

/* Notes inside the examples grid: a sub-field's parenthetical (e.g. Chemistry's
 * "except Biochemistry…"), "(no specific examples)", or a group's guidance
 * sentence ("I. Other Sciences"). */
.examples-grid__note {
    margin: 0 0 var(--space-2);
    padding-left: var(--space-4);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* ---- Generic data table (e.g. Q6 "Examples") ---- */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

    .data-table th,
    .data-table td {
        border: 1px solid var(--color-input-border);
        padding: var(--space-3);
        text-align: left;
        vertical-align: top;
        line-height: 1.45;
    }

/* Full-width title row (the "Examples" bar). */
.data-table__title th {
    text-align: center;
    font-size: var(--text-base);
    font-weight: 700;
    background-color: var(--color-section-header);
    color: var(--color-text);
}

.data-table thead th {
    font-weight: 700;
    color: var(--color-text);
}

.data-table tbody td {
    color: var(--color-text-muted);
}

/* Full-width body row spanning all columns (e.g. the Q15 "Researcher versus
 * R&D technician" comparison paragraph). */
.data-table__full {
    text-align: left;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Question title links inside accordion buttons should look like plain text */
.usa-accordion__button a.question-title {
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
    pointer-events: auto;
}

    .usa-accordion__button a.question-title:hover {
        color: inherit;
        text-decoration: none;
    }

/* =====================================================================
 * Font-family override: legacy style.css hard-codes "Arial, Helvetica,
 * san-serif" on a handful of classes, and form controls / plugin CSS
 * (selectWoo, jquery-ui) don't reliably inherit. Re-assert the sans token
 * on those surfaces. Headings keep --font-display (selectors below don't
 * target h1–h6, so the earlier heading rule still wins).
 * ===================================================================== */
body,
input,
select,
textarea,
button,
table,
.content-space,
.footer-titles,
.footer-gray,
.footer-gray .container,
.footer-white .container {
    font-family: var(--font-sans);
}

/* The popup options list (0 / Unavailable). Sibling of div[role='combobox'],
   built by aria_combo.js as <li class="result" role="option">. No base CSS,
   so it shrink-wraps — size it explicitly here. */
.currency-row__input .listbox {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    width: 150px; /* match the field width */
    margin: 2px 0 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #6b7280;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
    box-sizing: border-box;
}

    .currency-row__input .listbox.hidden {
        display: none; /* JS toggles .hidden to show/hide */
    }

    .currency-row__input .listbox .result {
        padding: 8px 12px;
        font-size: 1rem; /* was inheriting tiny text */
        line-height: 1.2;
        text-align: left;
        cursor: pointer;
        white-space: nowrap;
    }

        .currency-row__input .listbox .result:hover,
        .currency-row__input .listbox .result.focused,
        .currency-row__input .listbox .result[aria-selected='true'] {
            background: #eef2ff;
        }
/* ── Confidentiality / help modal: jQuery-UI dialog restyled to match the modal__panel mockup ── */
.herd-modal.ui-dialog {
    padding: 0;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .25);
    background: #fff;
    overflow: hidden;
    font-family: "Source Sans 3", Arial, sans-serif;
}

.herd-modal .ui-dialog-titlebar {
    position: relative;
    padding: 24px 60px 0 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.herd-modal .ui-dialog-title {
    float: none;
    width: auto;
    white-space: normal; /* jQuery UI defaults to nowrap */
    margin: 0;
    font-family: Merriweather, Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
}

.herd-modal .ui-dialog-content {
    padding: 12px 28px 28px;
    color: #334155;
    font-size: 15px;
    line-height: 1.6;
}

.submit-survey-overlay.ui-widget-overlay {
    background: #0f172a;
    opacity: .55;
}

.submit-confirm-dialog .ui-dialog-buttonpane {
    margin: 0;
    border: 0;
    border-top: 1px solid #e2e8f0;
    padding: 0 28px 24px;
    background: #fff;
}

.submit-confirm-dialog .ui-dialog-buttonset {
    float: none;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.submit-confirm-dialog .ui-dialog-buttonpane button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0;
    padding: 0 20px;
    height: 36px;
    min-width: 92px;
    border-radius: 6px;
    border: 1px solid #9ca3af;
    background: #fff;
    color: #1f2937;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.submit-confirm-dialog .ui-dialog-buttonpane button.submit-confirm-yes {
    background-color: var(--color-stroke-active);
    border-color: #1d4ed8;
    color: #fff;
}

.submit-confirm-dialog .ui-dialog-buttonpane button.submit-confirm-yes:hover {
    background-color: #1e40af;
    border-color: #1e40af;
}

.submit-confirm-dialog .ui-dialog-buttonpane button.submit-confirm-no {
    background: none;
    border: none;
    color: var(--color-text-subtle);
    text-decoration: underline;
    min-width: 0;
    padding: var(--space-2) 0;
}

.submit-confirm-dialog .ui-dialog-buttonpane button.submit-confirm-no:hover {
    color: var(--color-text);
}

    .herd-modal .ui-dialog-content .content-paragraph {
        margin: 0 0 1em;
    }

    .herd-modal .ui-dialog-content .content-bullets {
        margin: 0 0 .5em;
        padding-left: 1.25em;
    }

        .herd-modal .ui-dialog-content .content-bullets li {
            margin: .4em 0;
        }

/* Close → clean circular X in the top-right corner */
.herd-modal .ui-dialog-titlebar-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    font-size: 0; /* hides jQuery UI's "Close" text */
    cursor: pointer;
    transition: background .15s ease;
}

    .herd-modal .ui-dialog-titlebar-close:hover {
        background: #e2e8f0;
    }

    .herd-modal .ui-dialog-titlebar-close:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

    .herd-modal .ui-dialog-titlebar-close .ui-button-icon,
    .herd-modal .ui-dialog-titlebar-close .ui-icon {
        display: none;
    }
    /* drop default icon */
    .herd-modal .ui-dialog-titlebar-close::before,
    .herd-modal .ui-dialog-titlebar-close::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 16px;
        height: 2.5px;
        border-radius: 2px;
        background: #334155;
    }

    .herd-modal .ui-dialog-titlebar-close::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .herd-modal .ui-dialog-titlebar-close::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

/* Icon-only trigger for help/example dialogs (matches the old Help_2.png slot) */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #2563eb;
    cursor: pointer;
    vertical-align: middle;
    transition: background .15s ease, color .15s ease;
}

    .help-icon:hover {
        background: #eef2ff;
        color: #1d4ed8;
    }

    .help-icon:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }
/* Grid highlight states for q09/q11/q14 */
/* Grid cross-highlight visibility (q09/q11/q14) */
.grid-active-row-cell,
.grid-active-col-cell,
.grid-active-cell {
    transition: background-color 120ms ease-in-out;
}

    /* Row highlight */
    .grid-active-row-cell,
    .grid-active-row-cell .wf-input,
    .grid-active-row-cell .combobox-wrapper,
    .grid-active-row-cell div[role='combobox'],
    .grid-active-row-cell .exp-total,
    .grid-active-row-cell .disabled_input,
    .grid-active-row-cell input.data-input {
        background-color: #eef6ff !important;
    }

    /* Column highlight */
    .grid-active-col-cell,
    .grid-active-col-cell .wf-input,
    .grid-active-col-cell .combobox-wrapper,
    .grid-active-col-cell div[role='combobox'],
    .grid-active-col-cell .exp-total,
    .grid-active-col-cell .disabled_input,
    .grid-active-col-cell input.data-input {
        background-color: #fff6e8 !important;
    }

    /* Active cell highlight (strongest) */
    .grid-active-cell,
    .grid-active-cell .wf-input,
    .grid-active-cell .combobox-wrapper,
    .grid-active-cell div[role='combobox'],
    .grid-active-cell .exp-total,
    .grid-active-cell .disabled_input,
    .grid-active-cell input.data-input {
        background-color: #dbeafe !important;
    }

        /* Keep active cell border obvious */
        .grid-active-cell .wf-input,
        .grid-active-cell div[role='combobox'],
        .grid-active-cell .exp-total {
            box-shadow: inset 0 0 0 2px #2563eb !important;
        }

.sidebar-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0 var(--space-3) var(--space-2);
}

.sidebar-toggle {
    border: 1px solid var(--color-card-border);
    background: #fff;
    color: var(--color-primary-dark);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

    .sidebar-toggle:hover {
        background: var(--color-page-bg);
    }

/* Collapsed mode */
.app-body__inner.sidebar-collapsed {
    grid-template-columns: 56px 1fr;
    gap: var(--space-4);
}

    .app-body__inner.sidebar-collapsed .app-sidebar {
        padding: var(--space-3) 0;
        overflow: hidden;
    }

    .app-body__inner.sidebar-collapsed .sidebar-header {
        display: none;
    }

    .app-body__inner.sidebar-collapsed #nav-pane {
        display: none;
    }

    .app-body__inner.sidebar-collapsed .sidebar-toggle {
        width: 40px;
        height: 32px;
        margin: 0 auto;
        justify-content: center;
        padding: 0;
    }

    .app-body__inner.sidebar-collapsed .sidebar-toggle__text {
        display: none;
    }

    .app-body__inner.sidebar-collapsed .sidebar-toggle__icon {
        transform: rotate(180deg);
    }

.grid-active-row-label,
.grid-active-col-label {
    background-color: #dbeafe;
    border-radius: 4px;
}
/* Spacing after validation messages in question editor */
.Q .content .errors,
.Q .content .warnings,
.Q .content .dqis {
    margin-bottom: var(--space-4);
}

    /* Slightly larger gap between the final message and question body */
    .Q .content .errors:last-of-type,
    .Q .content .warnings:last-of-type,
    .Q .content .dqis:last-of-type {
        margin-bottom: var(--space-6);
    }