html {
    scroll-behavior: smooth;
}

/* --- Global Resets & Body --- */
body {
    font-family: 'Aptos', Arial, sans-serif; /* Aptos preferred */
    font-size: 10pt;
    background-color: #f0f2f5; /* Light neutral background for the whole page */
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

* {
    box-sizing: border-box;
}

/* --- Woodruff Billing Header --- */
.wb-header {
    background-color: #000000; /* Black background for full width */
    color: white;
}

.wb-header-inner-constrained { /* Constrains header content */
    max-width: 1100px; /* Match .wb-main-container */
    width: 95%;        /* Match .wb-main-container */
    margin: 0 auto;    /* Center it */
    padding: 10px 25px; /* Adjusted side padding for content alignment */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Changed as help button is removed */
}

.wb-header-logo-title { display: flex; align-items: center; }
.wb-logo { max-height: 45px; margin-right: 15px; }
.wb-titles { display: flex; flex-direction: column; }
.wb-main-title { font-size: 1.3em; font-weight: bold; }
.wb-sub-title { font-size: 1.0em; }

.wb-accent-bar {
    height: 8px;
    background-color: #0056b3; /* MODIFIED: Changed to vibrant blue */
    max-width: 1100px; /* Match .wb-main-container */
    width: 95%;        /* Match .wb-main-container */
    margin: 0 auto;    /* Center it */
}


/* --- Main Content Area --- */
.wb-main-container {
    display: flex;
    flex-grow: 1;
    max-width: 1100px;
    width: 95%;
    margin: 20px auto;
    gap: 30px;
}

.wb-left-column {
    flex: 2.5; /* Approx 70% */
    background-color: #ffffff;
    padding: 25px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
}

.wb-right-column {
    flex: 1; /* Approx 30% */
    padding-top: 10px; /* Original padding-top for alignment with left column title */
    /* Removed direct padding on wb-right-column to ensure content aligns correctly with constrained header/footer */
    display: flex;
    flex-direction: column;
}


.wb-form-title { /* Main title in left column, e.g., "Uplift Justification Collator - Case Details & Panel" */
    font-size: 1.5em;
    font-weight: bold;
    color: #222;
    margin-top: 0;
    margin-bottom: 25px;
}

.page-title { /* Titles on Page 2, 3, 4 like "Stage 1: ..." */
    font-size: 1.4em; font-weight: bold; color: #000; /* Black as per template */
    margin-top: 0; margin-bottom: 20px; padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

/* --- Form Elements in Left Column --- */
.form-section { margin-bottom: 25px; }
.form-section h3 { /* Section titles like "Case Details", "Family Panel Membership" */
    font-size: 1.15em; font-weight: bold; color: #000; /* Black for these titles */
    margin-top: 0; margin-bottom: 15px;
}

.case-details-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 15px 25px;
    align-items: start;
}
.form-group { margin-bottom: 10px; }
.form-group label { display: block; font-weight: normal; margin-bottom: 6px; font-size: 1em; color: #333; }
.form-control {
    width: 100%; padding: 9px 12px; border: 1px solid #767676;
    border-radius: 2px; box-sizing: border-box; font-family: 'Aptos', Arial, sans-serif;
    font-size: 1em; background-color: #fff;
}
.form-control.needs-input-highlight.attention { /* Orange highlight for required empty fields */
    border: 2px solid orange !important;
    background-color: #fff3e0 !important;
}

select.form-control {
    height: 38px;
    appearance: none;         /* MODIFIED: Removes default system appearance */
    -webkit-appearance: none; /* MODIFIED: Removes default system appearance for WebKit browsers */
    -moz-appearance: none;    /* ADDED: Removes default system appearance for Firefox */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 8px 10px;
    padding-right: 30px; /* Ensures text doesn't overlap the custom arrow */
}
input::placeholder { color: #aaa; font-style: italic; font-size: 0.95em; }

.contextual-help-link {
    display: inline-block;
    font-size: 0.9em; color: #0066cc; text-decoration: none;
}
.contextual-help-link:hover { text-decoration: underline; }
.contextual-help-link::before { content: "► "; }


.input-with-guidance { display: flex; align-items: center; margin-bottom: 5px; }
.uplift-input { width: 70px !important; flex-grow: 0 !important; flex-shrink: 0 !important; margin-right: 10px; text-align: center; padding: 8px 10px;}
.suggested-percentage { margin-left: 0; font-size: 0.95em; color: #333; font-style: italic; white-space: nowrap; line-height: 36px; }
small.form-text-muted { display: block; margin-top: .25rem; font-size: 0.8em; color: #6c757d; }
.form-text-muted-newline { display: block; font-size: 0.85em; color: #555; margin-top: 16px; line-height: 1.3; }
.form-text-muted-newline .contextual-help-link { margin-left: 5px; font-size: 1em; vertical-align: baseline; }

#finalUpliftHelpLink {
    display: block;
    margin-top: 6px;
    margin-left: 0;
}


/* In style.css */

/* Styling for LAA Enhancement Process Overview text (on Stage 1 Page) */
.intro-guidance-text {
    font-size: 0.95em;
    color: #333;
    margin-top: 0;      /* Will be spaced by the main page H2 */
    margin-bottom: 40px; /* Space before the first question block */
    padding: 0;          /* No specific padding for the overall container */
    line-height: 1.6;
}

/* Style the new H3 heading for the intro text */
.intro-guidance-text h3.intro-subheading { /* More specific selector */
    font-size: 1.15em; /* Same as .form-section h3 */
    font-weight: bold;   /* Same as .form-section h3 */
    color: #000;       /* Same as .form-section h3 (black) */
    margin-top: 0;       /* Remove top margin if it's the first element */
    margin-bottom: 12px; /* Space after this sub-heading */
    /* Remove any border-bottom if you don't want it here */
    border-bottom: none;
    padding-bottom: 0;
}

.intro-guidance-text p {
    margin-bottom: 10px; /* Consistent paragraph spacing */
    margin-left: 0;
}
.intro-guidance-text p:first-of-type { /* The paragraph directly after the H3 */
     margin-top: 0; /* No extra top margin */
}


.intro-guidance-text ul.intro-list {
    list-style-type: disc; /* Standard bullets, or 'none' if you prefer */
    padding-left: 20px;  /* Indentation for the list */
    margin-top: 5px;    /* Space above the list */
    margin-bottom: 10px; /* Space below the list */
}

.intro-guidance-text ul.intro-list li {
    margin-bottom: 5px; /* Space between list items */
}

/* Strong and em inside this specific intro section */
.intro-guidance-text strong {
    font-weight: bold;
    color: #000000;
}

.intro-guidance-text em {
    font-style: italic;
    color: #000000;
}


/* Ensure existing .form-section h3 is not affected if it's too general */
/* This is your existing rule for question block titles */
.form-section h3 {
    font-size: 1.15em;
    font-weight: bold;
    color: #000;
    margin-top: 0; /* This might need adjustment if it's the first form section */
    margin-bottom: 15px;
}

/* Add specific margin to the first form section title on page 2 if needed */
#page2 > .form-section:first-of-type > h3 {
     margin-top: 10px; /* Or more, to space it from the intro text */
}

.page-instruction { font-size: 0.95em; font-style: normal; color: #333; margin-top: 0; margin-bottom: 25px; padding: 12px 15px; background-color: #eef7ff; border-left: 3px solid #0056b3; border-radius: 3px; line-height: 1.5; }
.stage-feedback { text-align: center; font-weight: bold; color: #155724; padding: 10px; background-color: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px; margin-bottom: 20px; font-size: 1.05em; }
.stage2-disabled-banner { font-size: 0.95em; color: #6b4d10; background-color: #fff8e6; border-left: 3px solid #d49b1f; border-radius: 3px; padding: 12px 15px; margin-bottom: 20px; line-height: 1.5; }
.stage2-disabled-banner strong { display: block; margin-bottom: 4px; color: #5b3f0a; }
.s2-disabled { opacity: 0.5; pointer-events: none; user-select: none; }

#panelMembershipContainer .form-section { margin-top: 0; }
#pageContainer .form-section:first-child { margin-top: 0; }

.question-block { margin-bottom: 20px; }
.main-question-label {
    display: block; font-weight: normal;
    font-size: 1em; margin-bottom: 10px;
    padding: 8px; background-color: #f0f8ff; border: 1px solid #ddeeff;
    border-radius: 3px; cursor: pointer;
}
.main-question-label input[type="checkbox"] { margin-right: 8px; vertical-align: middle; }

.sub-options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-left: 20px;
    margin-top: 10px;
}

.panel-options { padding-left: 0; }
.panel-options .checkbox-item-container { margin-bottom: 5px; }
.checkbox-item-container { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 10px; }
.checkbox-label-container { display: flex; align-items: center; margin-bottom: 4px; font-size: 1em; }
.checkbox-label-container input[type="checkbox"] { margin-right: 8px; }

textarea.explanation-input {
    width: 100%;
    padding: 8px; border: 1px solid #ccc; border-radius: 3px;
    font-size: 1em; margin-top: 5px; box-sizing: border-box; display: none;
    min-height: 50px; line-height: 1.4; resize: vertical; font-family: 'Aptos', Arial, sans-serif;
    background-color: #fff;
}
textarea.explanation-input.needs-attention { border: 2px solid orange !important; background-color: #fff3e0; }

/* Right Column Navigation ("Filing of Evidence") */
.right-column-title { font-size: 1.2em; font-weight: bold; margin-bottom: 10px; color: #333; }
.evidence-navigation { list-style: none; padding: 0; margin: 0 0 20px 0; }
.evidence-navigation .nav-step {
    padding: 7px 0 7px 0;
    font-size: 1em;
    color: #555; /* Default color for upcoming/unvisited steps */
    cursor: default;
    border-bottom: 1px solid #f0f0f0;
}
.evidence-navigation .nav-step:last-child { border-bottom: none; }

.evidence-navigation .nav-step.active {
    font-weight: bold;
    color: #0056b3; /* Active is dark blue */
}
.evidence-navigation .nav-step.completed {
    font-weight: bold; /* Completed steps are bold */
    color: #333333; /* Completed is black */
}

/* Span (number) styling */
.evidence-navigation .nav-step span {
    margin-right: 5px;
    font-weight: normal; /* Default for numbers in upcoming steps */
}
.evidence-navigation .nav-step.active span {
    font-weight: bold; /* Number for active step is bold */
}
.evidence-navigation .nav-step.completed span {
    font-weight: bold; /* Number for completed step is bold */
}


.right-column-tools { margin-top: auto; padding-top: 20px; }
.right-column-links { margin-bottom: 15px; }
.right-column-link { display: block; color: #007bff; text-decoration: none; margin-bottom: 8px; font-size: 0.95em; }
.right-column-link:hover { text-decoration: underline; }
.btn-help-large { background: none; border: none; padding: 0; cursor: pointer; display: block; margin-left:0; }
.btn-help-large img { width: 90px; height: auto; }
.version-info-sidebar { font-size: 0.8em; color: #777; margin-top: 15px; text-align: left; }


/* Form Navigation Buttons (Continue/Back at bottom of left column) */
.form-navigation-buttons {
    margin-top: auto;
    padding-top: 20px; border-top: 1px solid #eee;
    display: flex; justify-content: space-between; align-items: center;
}
.btn-primary-wb, .btn-secondary-wb, .btn-danger-wb {
    padding: 9px 20px; border: none; border-radius: 2px;
    font-size: 1em; font-weight: normal;
    cursor: pointer; transition: background-color 0.2s;
}
.btn-primary-wb { background-color: #0056b3; color: white; }
.btn-primary-wb:hover { background-color: #007bff; }
.btn-secondary-wb { background-color: #f0f0f0; color: #333; border: 1px solid #ccc; }
.btn-secondary-wb:hover { background-color: #e0e0e0; }
.btn-danger-wb { background-color: #c62828; color: white; }
.btn-danger-wb:hover { background-color: #b71c1c; }
.btn-danger-wb:disabled { background-color: #ccc; cursor: not-allowed; opacity: 0.7;}


/* Review Page Summary Area & Final Uplift Group */
.review-summary-area {
    border: 1px solid #d1e7dd; background-color: #f8f9fa; padding: 15px;
    border-radius: 5px; margin-bottom: 20px; font-size: 1em;
    max-height: 500px; overflow-y: auto;
}
.review-summary-area h3 { font-size: 1.15em; color: #0056b3; margin-top: 15px; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid #d1e7dd; }
.review-summary-area h3:first-child { margin-top: 0; }
.review-summary-area p { margin-bottom: 4px; padding-left: 10px; }
.review-summary-area p strong { color: #333; }
.review-summary-area .explanation-review {
    display: block; margin-left: 25px; font-style: italic; color: #444;
    padding: 8px; background-color: #eef7ff; border-left: 3px solid #0056b3;
    border-radius: 3px; margin-top: 3px; margin-bottom: 10px; white-space: pre-wrap;
    font-size: 0.95em;
}
.review-summary-area .explanation-review.needs-attention-review {
    border-left-color: orange;
    background-color: #fff3e0;
    color: #856404;
}
.final-uplift-group {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}
.final-uplift-group label { font-size: 1.1em; font-weight: bold; margin-bottom: 10px; display: block; color: #222;}


/* Footer */
.wb-footer {
    background-color: #e9ecef;
    color: #495057;
    font-size: 0.85em;
    margin-top: 20px;
    border-top: 1px solid #dee2e6;
}

.wb-footer-inner-constrained {
    max-width: 1100px;
    width: 95%;
    margin: 0 auto;
    padding: 15px 25px; /* Adjusted side padding for content alignment */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wb-footer a { color: #007bff; text-decoration: none; }
.wb-footer a:hover { text-decoration: underline; }

/* Page Visibility Control */
.page { display: none; animation: fadeInPage 0.4s ease-out; }
.page.active-page { display: block; }
@keyframes fadeInPage { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* General Button Styles (for header help button, if not covered by .btn-secondary-wb .btn-sm) */
.btn-secondary.btn-sm {
    padding: 6px 12px; font-size: 0.9em; background-color: #6c757d;
    color: white; border:none; border-radius: 4px; cursor: pointer;
}
.btn-secondary.btn-sm:hover { background-color: #5a6268;}

/* Modals */
.modal {
    display: none; position: fixed; z-index: 1000;
    left: 0; top: 0; width: 100%; height: 100%;
    overflow: auto; background-color: rgba(0,0,0,0.5);
    animation: fadeInModalBg 0.3s ease-out;
}
@keyframes fadeInModalBg { from { opacity: 0; } to { opacity: 1; } }

.modal-content {
    background-color: #fefefe; margin: 8% auto; padding: 25px 30px;
    border: 1px solid #bbb; width: 80%; max-width: 750px;
    border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    animation: slideInModal 0.3s ease-out;  position: relative;
}
@keyframes slideInModal { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal-content.small-modal { max-width: 550px; font-size: 0.95em; }
.modal-content h4 { margin-top: 0; font-size: 1.3em; color: #0056b3; margin-bottom: 15px; }

.markdown-missing-msg {
    color: #c00; font-style: italic; font-size: 0.9em;
    padding: 8px; background-color: #ffe0e0; border: 1px solid #ffc0c0;
    border-radius: 3px; margin-bottom: 10px;
}

.markdown-render-area { line-height: 1.5; font-size: 0.95em; }
.markdown-render-area h1 {font-size: 1.6em; color: #0056b3; margin-bottom: 0.7em; padding-bottom: 0.3em; border-bottom: 1px solid #eee;}
.markdown-render-area h2 {font-size: 1.4em; color: #111; margin-top: 1.2em; margin-bottom: 0.6em; padding-bottom: 0.2em; border-bottom: 1px dotted #ddd;}
.markdown-render-area h3 {font-size: 1.2em; color: #222; font-weight: bold; margin-top: 1em; margin-bottom: 0.4em;}
.markdown-render-area p { margin-bottom: 0.8em; }
.markdown-render-area ul, .markdown-render-area ol { margin-bottom: 0.8em; padding-left: 25px; }
.markdown-render-area li { margin-bottom: 0.3em; }
.markdown-render-area strong { font-weight: bold; color: #000; }
.markdown-render-area em { font-style: italic; }
.markdown-render-area code { background-color: #f0f0f0; padding: 2px 5px; border-radius: 3px; font-family: monospace; font-size: 0.9em;}
.markdown-render-area pre { background-color: #f0f0f0; padding: 10px; border-radius: 3px; overflow-x: auto; font-family: monospace; font-size: 0.9em;}
.markdown-render-area blockquote { border-left: 4px solid #ccc; padding-left: 15px; margin-left: 0; color: #555; font-style: italic; }
.markdown-render-area a { color: #0066cc; text-decoration: underline; }
.markdown-render-area table { border-collapse: collapse; width: 100%; margin-bottom: 1em; }
.markdown-render-area th, .markdown-render-area td { border: 1px solid #ddd; padding: 8px; text-align: left; }
.markdown-render-area th { background-color: #f7f7f7; font-weight: bold; }

.close-button {
    color: #aaa; float: right; font-size: 28px; font-weight: bold;
    line-height: 1; position: absolute; top: 10px; right: 15px;
}
.close-button:hover, .close-button:focus {
    color: black; text-decoration: none; cursor: pointer;
}

.enhancement-expectation-box {
    background-color: #fffbe6; /* Light yellow */
    border: 1px solid #ffe58f; /* Amber border */
    border-left: 4px solid #ffc107; /* Stronger amber left border */
    padding: 15px 20px;
    margin-bottom: 25px;
    border-radius: 4px;
    font-size: 0.9em;
}
.enhancement-expectation-box h4 {
    margin-top: 0;
    color: #856404; /* Dark amber for heading */
    font-size: 1.1em;
    margin-bottom: 10px;
}
.enhancement-expectation-box p {
    margin-bottom: 10px;
    line-height: 1.5;
}
.enhancement-expectation-box strong {
    font-weight: bold;
    color: #533f03; /* Darker amber for strong text */
}

/* --- Privacy and Disclaimer Box (Added from previous response) --- */
.privacy-disclaimer-box {
    background-color: #eef7ff; /* Light blue background */
    border: 1px solid #add8e6; /* Light blue border */
    border-left: 4px solid #0056b3; /* Darker blue left border for emphasis */
    padding: 15px 20px;
    margin-bottom: 25px;
    border-radius: 4px;
    font-size: 0.9em; /* Slightly smaller font for this box */
}
.privacy-disclaimer-box h4 {
    margin-top: 0;
    color: #0056b3; /* Darker blue for the heading */
    font-size: 1.1em; /* Relative to the box's font size */
    margin-bottom: 10px;
}
.privacy-disclaimer-box p,
.privacy-disclaimer-box ul {
    margin-bottom: 10px;
    line-height: 1.5;
}
.privacy-disclaimer-box ul {
    padding-left: 20px;
}
.privacy-disclaimer-box li {
    margin-bottom: 5px;
}
.privacy-disclaimer-box strong {
    font-weight: bold; /* Ensure it's bold */
    color: #004085; /* Even darker blue for emphasis within the box */
}

/* --- Welcome Screen Styles --- */
.welcome-screen {
    display: flex; /* Default state, will be controlled by JS if password logic is added */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #f0f2f5; /* Same as body background */
    padding: 20px;
    text-align: center;
    position: fixed; /* Cover the whole screen */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000; /* Ensure it's above other content */
}

.welcome-content {
    background-color: #ffffff;
    padding: 40px 50px;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    max-width: 450px;
    width: 100%;
}

.welcome-logo {
    max-height: 70px; /* Adjust as needed */
    margin-bottom: 20px;
}

.welcome-title {
    font-size: 2em;
    font-weight: bold;
    color: #000000; /* Black, like header main title */
    margin-bottom: 5px;
}

.welcome-subtitle {
    font-size: 1.2em;
    color: #333; /* Dark grey */
    margin-bottom: 30px;
}

.password-entry {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

/* ADDED/MODIFIED STYLES FOR PRIVACY NOTE */
.welcome-privacy-note {
    font-size: 0.8em; /* Smaller font */
    color: #555;      /* Slightly muted color */
    margin-top: 10px; /* Space above this note */
    margin-bottom: 15px; /* Space below, before the error message */
    line-height: 1.3;
}

.password-entry input[type="password"] {
    flex-grow: 1;
    /* Uses .form-control styles already defined */
}

.password-entry button {
    flex-shrink: 0;
    /* Uses .btn .btn-primary-wb styles */
}

.password-error-message {
    color: #c62828; /* Red, like .btn-danger-wb */
    font-size: 0.9em;
    margin-top: 10px;
}
/* --- Version Badge Styles --- */
.version-badge {
    display: inline-block;
    background-color: #0056b3;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: normal;
    margin-left: 10px;
    vertical-align: middle;
}