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 was removed in v1.11 along with the element it styled.
   The tool displays no percentage of its own anywhere. */
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;}

/* Evidence on file — the one optional control on the final page. Styled like
   the uplift box above it so it reads as part of finalising, not as an
   afterthought bolted below. */
.evidence-on-file-group {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}
.evidence-on-file-group h4 { margin: 0 0 12px 0; font-size: 1.1em; color: #222; }
/* The label wraps to two or three lines, so the box sits against the first
   line rather than floating in the middle of the sentence, and never shrinks
   as the text reflows. */
.evidence-on-file-group .checkbox-label-container { align-items: flex-start; line-height: 1.4; }
.evidence-on-file-group .checkbox-label-container input[type="checkbox"] { flex: 0 0 auto; margin-top: 3px; }
.evidence-on-file-group .form-text-muted-newline { margin-top: 10px; }


/* 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;
}
/* ═══════════════════════════════════════════════════════════════════════════
   v1.11 — threshold banner, "what counts?" panels, Stage 2 stems, drafts
   ═══════════════════════════════════════════════════════════════════════════ */

/* The `hidden` attribute is the mechanism this version uses to collapse the
   "what counts?" panels and to hide a carried-forward badge. A browser applies
   `[hidden] { display: none }` only as a user-agent rule, so ANY author rule
   that sets `display` on the same element silently defeats it — which is
   exactly what happened first time round: every Stage 2 item announced itself
   as carried forward from Stage 1, including the ones that have no Stage 1
   origin at all. Stated here once, with the weight to hold. */
[hidden] { display: none !important; }

/* Visually hidden but still read by screen readers. Used for labels that the
   visual design carries by position rather than by text. */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The Stage 1 threshold banner. It governs all eighteen ticks below it, so it is
   sized to be read rather than skipped — this is the sentence that stops a
   solicitor ticking everything that was merely above average. */
.threshold-banner {
    font-size: 1.02em;
    font-weight: 600;
    color: #4a3505;
    background-color: #fff8e6;
    border: 1px solid #f0d68a;
    border-left: 5px solid #d49b1f;
    border-radius: 3px;
    padding: 14px 18px;
    margin: 0 0 28px 0;
    line-height: 1.55;
}

/* The CAG paragraph a block comes from, under its heading. */
.cag-citation {
    font-size: 0.85em;
    color: #0056b3;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: -8px 0 12px 0;
}

/* The limb question on Stage 1 — a heading now, not a gate. */
.limb-question {
    font-size: 1em;
    color: #333;
    font-style: italic;
    margin: 0 0 12px 0;
}

/* --- "what counts?" --------------------------------------------------------
   Always-visible trigger, panel expanded in place. Deliberately understated:
   it must be findable beside every label without competing with the labels. */
.what-counts-toggle {
    background: none;
    border: none;
    padding: 0 0 0 24px;
    margin: 2px 0 0 0;
    font-family: inherit;
    font-size: 0.88em;
    color: #0066cc;
    cursor: pointer;
    text-align: left;
}
.what-counts-toggle:hover { text-decoration: underline; }
.what-counts-toggle:focus-visible { outline: 2px solid #0056b3; outline-offset: 2px; }
.what-counts-toggle::before { content: "▸ "; }
.what-counts-toggle.is-open::before { content: "▾ "; }

.what-counts-panel {
    margin: 6px 0 4px 24px;
    padding: 10px 14px;
    background-color: #f5f9fd;
    border-left: 3px solid #b6d4f0;
    border-radius: 3px;
    font-size: 0.9em;
    line-height: 1.5;
}
.what-counts-text { margin: 0; color: #333; }

/* CAG 12.7 — rendered once, beneath whichever panel is open. */
.what-counts-caveat {
    margin: 10px 0 0 0;
    padding-top: 8px;
    border-top: 1px dotted #b6d4f0;
    font-size: 0.95em;
    font-style: italic;
    color: #555;
}

/* --- Stage 2 --------------------------------------------------------------- */
.factor-description {
    font-size: 0.92em;
    color: #444;
    background-color: #f8f9fa;
    border-left: 3px solid #ccc;
    padding: 8px 12px;
    margin: 0 0 14px 0;
    line-height: 1.5;
}

/* CAG 12.16: instructing counsel makes this claim harder, not impossible. */
.counsel-note {
    font-size: 0.9em;
    color: #4a3505;
    background-color: #fffbe6;
    border: 1px solid #ffe58f;
    border-radius: 3px;
    padding: 10px 14px;
    margin: 0 0 14px 0;
    line-height: 1.5;
}

.optional-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: #e9ecef;
    color: #555;
    font-size: 0.72em;
    font-weight: normal;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Carried forward from Stage 1 — stated, not merely pre-ticked. */
.carried-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 1px 8px;
    border-radius: 10px;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    font-size: 0.72em;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.checkbox-item-container.carried-forward {
    border-left: 3px solid #6bbf7b;
    padding-left: 10px;
    margin-left: -13px;
}

/* The explanation block: stem, worked example, then the box. The example is a
   permanent sibling of the textarea rather than its placeholder — placeholders
   held the best-written content in this form and destroyed it on the first
   keystroke. */
.explanation-area {
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    background-color: #fbfcfe;
    border: 1px solid #e3ebf3;
    border-radius: 3px;
}
label.explanation-stem {
    display: block;
    font-weight: 600;
    color: #0056b3;
    font-size: 0.95em;
    margin-bottom: 6px;
}
.explanation-example {
    margin: 0 0 8px 0;
    padding: 8px 10px;
    background-color: #ffffff;
    border-left: 3px solid #d6e4f0;
    border-radius: 2px;
    font-size: 0.87em;
    font-style: italic;
    color: #5a6570;
    line-height: 1.45;
}
/* The base rule hides every .explanation-input; inside an explanation area the
   textarea is the point of the thing, so it is shown. */
.explanation-area textarea.explanation-input {
    display: block;
    margin-top: 0;
}

/* --- Final page: the ceiling, stated in words ------------------------------ */
.uplift-ceiling-statement {
    margin: 10px 0 0 0;
    font-size: 0.92em;
    line-height: 1.5;
    color: #333;
    background-color: #eef7ff;
    border-left: 3px solid #0056b3;
    border-radius: 3px;
    padding: 10px 14px;
}
.uplift-ceiling-statement.needs-court {
    background-color: #fff3e0;
    border-left-color: orange;
    color: #6b4d10;
}
.uplift-ceiling-warning {
    margin: 8px 0 0 0;
    font-size: 0.92em;
    line-height: 1.5;
    color: #7f1d1d;
    background-color: #fdecea;
    border-left: 3px solid #c62828;
    border-radius: 3px;
    padding: 10px 14px;
}

/* --- Draft restored -------------------------------------------------------- */
.draft-restored-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    max-width: 1100px;
    width: 95%;
    margin: 15px auto -5px auto;
    padding: 12px 18px;
    background-color: #e8f4ea;
    border: 1px solid #c3e6cb;
    border-left: 5px solid #2e7d32;
    border-radius: 3px;
    font-size: 0.92em;
    color: #1b5e20;
}
.btn-link-inline {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 1em;
    color: #0056b3;
    text-decoration: underline;
    cursor: pointer;
}
.btn-link-inline:hover { color: #003d80; }
.btn-link-inline:focus-visible { outline: 2px solid #0056b3; outline-offset: 2px; }

.review-summary-area p.review-note { padding-left: 0; color: #555; }

/* --- 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;
}