/* static/style.css */

/* --- Variables --- */
:root {
    --font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-size-base: 1rem; /* Typically 16px */
    --line-height-base: 1.6;

    --color-primary: #00529B; /* Professional Blue */
    --color-primary-darker: #003C75;
    --color-secondary: #6c757d; /* Grey */
    --color-secondary-darker: #5a6268;
    --color-danger: #dc3545; /* Red */
    --color-danger-darker: #c82333;
    --color-success: #28a745;
    --color-success-darker: #218838;
    --color-warning: #ffc107; /* Yellow */
    --color-info: #0dcaf0;   /* Cyan */

    --color-text: #212529; /* Dark Grey */
    --color-text-muted: #6c757d;
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-darker);
    --color-link-danger: var(--color-danger);
    --color-link-danger-hover: var(--color-danger-darker);


    --color-background: #f8f9fa; /* Very Light Grey */
    --color-card-bg: #ffffff;
    --color-sub-card-bg: #fdfdfd;
    --color-border: #dee2e6; /* Light Grey Border */
    --color-input-border: #ced4da;
    --color-input-focus-border: #86b7fe;
    --color-input-focus-shadow: rgba(13, 110, 253, 0.25);

    --border-radius: 0.375rem; /* ~6px */
    --border-radius-sm: 0.25rem; /* ~4px */
    --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --box-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

    --spacing-unit: 1rem; /* Base spacing */
}

/* --- Base & Body --- */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; /* Makes 1rem = 16px by default */ }

body {
    margin: 0;
    font-family: var(--font-family-sans-serif);
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent accidental horizontal scroll on body */
}

/* --- Container --- */
.container {
    width: 100%;
    padding-right: var(--spacing-unit);
    padding-left: var(--spacing-unit);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
    .container { max-width: 720px; }
}
@media (min-width: 992px) {
    .container { max-width: 960px; }
}
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

/* --- Header & Footer --- */
.main-header {
    padding: calc(var(--spacing-unit) * 1.5) 0;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    text-align: center;
}

.main-footer {
    margin-top: calc(var(--spacing-unit) * 2);
    padding: var(--spacing-unit) 0;
    text-align: center;
    font-size: 0.875em;
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-border);
}


/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-primary-darker); /* Slightly darker for headings */
    word-break: break-word; /* Prevent overflow from long words in headings */
}

h1 { font-size: calc(1.375rem + 1.5vw); } /* Responsive H1 */
@media (min-width: 1200px) { h1 { font-size: 2.5rem; } }
h2 { font-size: calc(1.3rem + 0.6vw); }
@media (min-width: 1200px) { h2 { font-size: 2rem; } }
h3 { font-size: calc(1.25rem + 0.3vw); }
@media (min-width: 1200px) { h3 { font-size: 1.75rem; } }
h4 { font-size: 1.15rem; }

p { margin-top: 0; margin-bottom: var(--spacing-unit); word-break: break-word; }
small { font-size: 0.875em; }
strong { font-weight: 600; }
pre {
    display: block;
    padding: var(--spacing-unit);
    margin-top: 0;
    margin-bottom: var(--spacing-unit);
    font-size: 0.9em;
    color: var(--color-text);
    background-color: #e9ecef; /* Light grey bg */
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    overflow: auto;
    word-wrap: break-word; /* Older browsers */
    word-break: break-all; /* More aggressive break for preformatted text */
    white-space: pre-wrap; /* Wrap whitespace */
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* --- Icons (using Font Awesome CDN linked in HTML) --- */
.icon-prefix {
    margin-right: 0.5em;
    color: var(--color-primary); /* Default icon color */
    opacity: 0.8;
    display: inline-block; /* Prevents breaking layout */
    width: 1.1em; /* Consistent width */
    text-align: center;
    flex-shrink: 0; /* Prevent icon from shrinking in flex context */
}
.icon-prefix-list {
    margin-right: 0.5em;
    color: var(--color-secondary);
    font-size: 0.9em;
    display: inline-block;
    width: 1.1em;
    text-align: center;
    flex-shrink: 0;
}
.btn .icon-prefix {
    color: inherit; /* Button icons inherit button text color */
    opacity: 0.9;
    width: auto; /* Allow button content to size naturally */
    text-align: left;
}
h2 .icon-prefix, h3 .icon-prefix {
    color: var(--color-primary); /* Icons in headings */
}
.message .icon-prefix { /* Icons within messages */
    margin-right: 0.6em;
    font-size: 1.1em;
    vertical-align: middle; /* Better alignment than top */
}
.message-error .icon-prefix { color: var(--color-danger) !important; } /* Ensure message colors override defaults */
.message-warning .icon-prefix { color: var(--color-warning) !important; }
.message-info .icon-prefix { color: var(--color-info) !important; }
.message-status .icon-prefix { color: var(--color-success) !important; }

/* --- Subtitles --- */
.subtitle {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-top: -0.5rem; /* Adjust spacing relative to H1 */
    margin-bottom: 1rem;
    font-weight: 300;
}


/* --- Cards --- */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: var(--color-card-bg);
    background-clip: border-box;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 1.25);
    box-shadow: var(--box-shadow);
}

.card h2, .card h3 {
    margin-bottom: var(--spacing-unit);
    color: var(--color-primary);
    display: flex; /* Align icon and text in card headers */
    align-items: center;
}
.card h2 { border-bottom: 1px solid var(--color-border); padding-bottom: calc(var(--spacing-unit)*0.5); }

.sub-card {
    border: 1px solid #eee;
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-unit);
    margin-top: var(--spacing-unit);
    margin-bottom: var(--spacing-unit);
    background-color: var(--color-sub-card-bg);
}
.sub-card h3, .sub-card h4 {
    margin-bottom: calc(var(--spacing-unit)*0.75);
    font-size: 1.1rem;
    color: var(--color-primary-darker);
    display: flex; /* Align icon and text in sub-card headers */
    align-items: center;
}


/* --- Forms --- */
label {
    display: inline-block;
    margin-bottom: calc(var(--spacing-unit) * 0.3);
    font-weight: 500;
    word-break: break-word; /* Prevent long labels from breaking layout */
}

.form-group {
    margin-bottom: var(--spacing-unit);
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-card-bg);
    background-clip: padding-box;
    border: 1px solid var(--color-input-border);
    appearance: none; /* Remove default styling */
    border-radius: var(--border-radius-sm);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
    color: var(--color-text);
    background-color: var(--color-card-bg);
    border-color: var(--color-input-focus-border);
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--color-input-focus-shadow);
}
.form-control::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}
.form-control:disabled, .form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}

textarea.form-control {
    min-height: calc(1.6em + 1rem + 2px); /* Base height + padding + border */
    resize: vertical;
}

.form-control-file {
    display: block;
    width: 100%;
    border: 1px solid var(--color-input-border);
    border-radius: var(--border-radius-sm);
    padding: 0.375rem 0.75rem;
    margin-bottom: var(--spacing-unit);
    font-size: 0.9rem;
}
.form-control-file:focus {
     border-color: var(--color-input-focus-border);
     outline: 0;
     box-shadow: 0 0 0 0.25rem var(--color-input-focus-shadow);
}

/* Inline form elements */
.inline-group {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping even before stacking column */
    align-items: center;
    gap: 0.5rem;
}
.inline-group label { margin-bottom: 0; flex-shrink: 0; } /* Prevent label shrinking */
.form-control-inline { display: inline-block; width: auto; vertical-align: middle; flex-grow: 1; min-width: 100px; } /* Allow growth but maintain base width */


/* Form Rows (Ticker/Num Filings) */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 1.5);
}
.form-row .form-group {
    flex: 1 1 auto; /* Allow growing and shrinking */
    min-width: 150px; /* Prevent getting too small before wrapping */
}

/* Checkbox/Radio Options */
.checkbox-group, .radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.checkbox-option, .radio-option {
    display: flex; /* Align input and label */
    align-items: flex-start; /* Align top for multi-line labels */
    padding: 0.3rem 0;
    position: relative; /* For pseudo-elements if needed later */
}
.checkbox-option label, .radio-option label {
    font-weight: 400;
    margin-left: 0.5rem;
    cursor: pointer;
    color: var(--color-text);
    flex-grow: 1; /* Allow label to take remaining space */
    word-break: break-word; /* Ensure long labels wrap */
}
.checkbox-option input[type="checkbox"],
.radio-option input[type="radio"] {
    margin-top: 0.2em; /* Align checkbox better with first line */
    flex-shrink: 0; /* Prevent input shrinking */
    cursor: pointer;
    /* Consider larger custom controls for better touch targets */
    width: 1.2em; /* Slightly larger tap target for checkbox/radio */
    height: 1.2em;
}
.checkbox-option label small, .radio-option label small {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.85em;
    line-height: 1.3;
    margin-top: 0.1rem;
}

/* Simplified Checklist */
.checklist-simple {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem; /* Row gap, Column gap */
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border);
    margin-top: 0.5rem;
}
.checkbox-option.simple { padding: 0; align-items: center; } /* Center align single line items */
.checkbox-option.simple label {
    margin-left: 0.3rem;
    font-size: 0.95em;
    /* white-space: nowrap; /* Kept for short items, but monitor if labels get long */
}
.checkbox-option.simple input[type="checkbox"] { margin-top: 0; }

/* Scrollable source lists */
.source-list.scrollable {
    max-height: 250px; /* Slightly reduced for smaller viewports */
    overflow-y: auto;
    border: 1px solid var(--color-border);
    padding: 0.75rem;
    margin-bottom: var(--spacing-unit);
    background-color: var(--color-background);
    border-radius: var(--border-radius-sm);
}
.source-item { border-bottom: 1px dotted #eee; padding-bottom: 0.5rem; margin-bottom: 0.5rem; }
.source-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }


/* --- Help Text & Form Hints --- */
.help-text {
    font-size: 0.9em;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-unit);
    margin-top: -0.5rem; /* Pull closer to element above */
    padding-left: 1.6em; /* Indent help text if icon present in heading */
    line-height: 1.4; /* Improved readability for smaller text */
}
/* Specific adjustments if header doesn't have icon */
.card h2:not(:has(.icon-prefix)) + .help-text,
.sub-card h3:not(:has(.icon-prefix)) + .help-text,
.sub-card h4:not(:has(.icon-prefix)) + .help-text {
    padding-left: 0; /* Remove indent if no icon */
}


.form-hint {
    display: block; /* Ensure it takes its own line */
    margin-top: 0.25rem;
    font-size: 0.85em;
    color: var(--color-text-muted);
    line-height: 1.4; /* Improved readability */
}
small.form-hint { /* Specificity for existing small hints */
     display: block;
     margin-top: 0.25rem;
}

.warning-inline {
    display: inline-block;
    margin-left: 0.75rem;
    font-size: 0.875em;
    color: var(--color-danger);
    vertical-align: middle;
}


/* --- Buttons --- */
.button-group {
    margin-top: calc(var(--spacing-unit) * 1.25); /* Increased top margin */
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem; /* Slightly increased gap for better touch separation */
}
/* Add a little more space above button groups within sub-cards */
.sub-card .button-group {
    margin-top: 1.25rem;
}


.btn {
    display: inline-block;
    font-weight: 400;
    line-height: var(--line-height-base);
    color: #fff; /* Default text color */
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.6rem 1.2rem; /* Slightly increased padding for better tap targets */
    font-size: var(--font-size-base);
    border-radius: var(--border-radius-sm);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    position: relative; /* For spinner */
}
/* Span inside button for text content and icon alignment */
.btn span {
    position: relative;
    z-index: 1;
    display: inline-flex; /* Align icon and text */
    align-items: center;
    gap: 0.4em; /* Space between icon and text */
}

/* Primary Button */
.btn-primary {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-primary:hover { background-color: var(--color-primary-darker); border-color: var(--color-primary-darker); }
.btn-primary:focus, .btn-primary:active { box-shadow: 0 0 0 0.25rem rgba(var(--color-primary), 0.5); background-color: var(--color-primary-darker); }
.btn-primary:disabled, .btn-primary.disabled { background-color: var(--color-primary); border-color: var(--color-primary); opacity: 0.65; cursor: not-allowed; }

/* Secondary Button */
.btn-secondary {
    color: #fff;
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.btn-secondary:hover { background-color: var(--color-secondary-darker); border-color: var(--color-secondary-darker); }
.btn-secondary:focus, .btn-secondary:active { box-shadow: 0 0 0 0.25rem rgba(var(--color-secondary), 0.5); background-color: var(--color-secondary-darker); }
.btn-secondary:disabled, .btn-secondary.disabled { background-color: var(--color-secondary); border-color: var(--color-secondary); opacity: 0.65; cursor: not-allowed; }

/* Danger Button */
.btn-danger {
    color: #fff;
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}
.btn-danger:hover { background-color: var(--color-danger-darker); border-color: var(--color-danger-darker); }
.btn-danger:focus, .btn-danger:active { box-shadow: 0 0 0 0.25rem rgba(var(--color-danger), 0.5); background-color: var(--color-danger-darker); }
.btn-danger:disabled, .btn-danger.disabled { background-color: var(--color-danger); border-color: var(--color-danger); opacity: 0.65; cursor: not-allowed; }

/* Success Button (e.g., for PDF Download) */
.btn-success {
    color: #fff;
    background-color: var(--color-success);
    border-color: var(--color-success);
}
.btn-success:hover { background-color: var(--color-success-darker); border-color: var(--color-success-darker); }
.btn-success:focus, .btn-success:active { box-shadow: 0 0 0 0.25rem rgba(var(--color-success), 0.5); background-color: var(--color-success-darker); }
.btn-success:disabled, .btn-success.disabled { background-color: var(--color-success); border-color: var(--color-success); opacity: 0.65; cursor: not-allowed; }

/* Link Button */
.btn-link {
    font-weight: 400;
    color: var(--color-link);
    text-decoration: underline;
    padding: 0.25em 0.5em; /* Add some padding for easier tapping */
    border: 0; background: none;
    border-radius: var(--border-radius-sm); /* Give it a subtle clickable area */
}
.btn-link:hover { color: var(--color-link-hover); background-color: rgba(0,0,0,0.05); }
.btn-link:focus { text-decoration: underline; box-shadow: none; outline: 1px dotted var(--color-link); }
.btn-link:disabled, .btn-link.disabled { color: var(--color-text-muted); pointer-events: none; background-color: transparent; }
.btn-link.btn-danger { color: var(--color-link-danger); }
.btn-link.btn-danger:hover { color: var(--color-link-danger-hover); background-color: rgba(var(--color-danger), 0.05); }
.btn-link.btn-danger:focus { outline-color: var(--color-danger); }


/* Button Loading Spinner */
.btn.is-loading { pointer-events: none; }
.btn.is-loading span { color: transparent !important; } /* Hide only text span */
.btn.is-loading::after {
    content: '';
    display: block;
    width: 1em; /* Size relative to font size */
    height: 1em;
    position: absolute;
    left: calc(50% - 0.5em);
    top: calc(50% - 0.5em);
    border: 2px solid rgba(255, 255, 255, 0.5); /* Lighter part of spinner */
    border-right-color: #fff; /* Solid part */
    border-radius: 50%;
    animation: btn-spin 0.75s linear infinite;
    z-index: 2;
}
/* Different spinner color for secondary/link buttons */
.btn-secondary.is-loading::after {
     border-color: rgba(255, 255, 255, 0.5);
     border-right-color: #fff;
}
.btn-link.is-loading::after {
    border: 2px solid rgba(var(--color-link-rgb, 0, 82, 155), 0.5); /* Use rgb if variable exists */
    border-right-color: var(--color-link);
}
.btn-link.btn-danger.is-loading::after {
     border: 2px solid rgba(var(--color-danger-rgb, 220, 53, 69), 0.5);
     border-right-color: var(--color-danger);
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* --- Messages --- */
.message {
    padding: var(--spacing-unit);
    margin-bottom: var(--spacing-unit);
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    font-size: 0.95em;
    display: flex; /* Align icon and text */
    align-items: flex-start; /* Align top */
}
.message-status, .message-success { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; }
.message-error { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; }
.message-warning { color: #664d03; background-color: #fff3cd; border-color: #ffecb5; }
.message-info { color: #055160; background-color: #cff4fc; border-color: #b6effb; }
.message > *:last-child { flex: 1; word-break: break-word; } /* Allow text content to fill space and wrap */


/* --- API Key Section --- */
.api-key-section .api-status { margin-bottom: var(--spacing-unit); font-size: 0.95em; }
.api-key-section .api-status strong { margin-right: 0.3rem; }
.api-key-section .status-user { color: var(--color-success); font-weight: bold; }
.api-key-section .status-admin { color: var(--color-primary); font-weight: bold; }
.api-key-section .status-admin_pending { color: var(--color-warning); }
.api-key-section .status-admin_nopass { color: var(--color-info); font-weight: bold; }
.api-key-section .status-none { color: var(--color-danger); font-weight: bold; }
.api-key-section .api-note { font-size: 0.9em; color: var(--color-text-muted); margin-top: 0.5rem; }
.api-key-section .admin-key-options { margin-top: var(--spacing-unit); border-top: 1px solid var(--color-border); padding-top: var(--spacing-unit); }
.api-key-section .reset-api-form { margin-top: var(--spacing-unit); padding-top: var(--spacing-unit); border-top: 1px dashed var(--color-border); }


/* --- Global Actions (Reset Button) --- */
.global-actions {
    margin-bottom: var(--spacing-unit);
    display: flex;
    justify-content: flex-end;
}

/* --- Company Context --- */
.company-context { margin-bottom: var(--spacing-unit); padding-bottom: var(--spacing-unit); border-bottom: 1px solid var(--color-border); }
.company-context p { margin-bottom: 0.5rem; }


/* --- Results Page --- */
.context-info .context-details { display: flex; flex-direction: column; gap: 0.75rem; }
.context-info .sources-list-display strong { display: block; margin-bottom: 0.25rem; }
.context-info .sources-list-display ul {
    list-style: none;
    padding-left: 0;
    margin: 0.25rem 0 0 0;
}
.context-info .sources-list-display li {
    background-color: transparent;
    padding: 0.1rem 0; /* Reduced padding */
    margin-bottom: 0.1rem;
    border-radius: var(--border-radius-sm);
    border: none;
    font-size: 0.95em; /* Slightly larger font */
    color: var(--color-text); /* Use standard text color */
    display: flex; /* Align icon and text */
    align-items: center;
}
.context-info .prompt-used-box { font-size: 0.9em; margin-bottom: 0; background: #e9ecef; border: 1px solid var(--color-border); }
.context-info .prompt-display strong { display: block; margin-bottom: 0.25rem; }
.context-info .prompt-display p { margin-bottom: 0; font-style: italic; }


.analysis-output .result-section { margin-bottom: calc(var(--spacing-unit) * 1.5); }
.analysis-output .result-section h3 {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: calc(var(--spacing-unit) * 0.4);
    margin-bottom: var(--spacing-unit);
    font-size: 1.3rem;
    color: var(--color-primary);
    display: flex; /* Align icon and text */
    align-items: center;
}
.analysis-output .result-section p > em { /* Style the 'N/A' text */
    color: var(--color-text-muted);
    display: inline-block; /* Allow padding/margins if needed */
    margin-top: 0.25rem;
}
.analysis-output .result-section-empty p,
.analysis-output .result-section-missing p {
    font-style: italic;
    color: var(--color-text-muted);
}
.analysis-output pre { max-height: 400px; /* Limit height of result blocks */ }


/* --- Navigation Buttons (Results) --- */
.navigation-buttons {
    margin-top: calc(var(--spacing-unit) * 1.5);
    padding-top: calc(var(--spacing-unit) * 1.5);
    border-top: 1px solid var(--color-border);
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 1rem;
}


/* --- Footnotes --- */
.footnote-ref {
    font-size: 0.75em;
    vertical-align: super;
    margin-left: 0.1em;
    line-height: 0; /* Prevent affecting line height */
}
.footnote-ref a {
    text-decoration: none;
    color: var(--color-link);
    padding: 0.2em 0.4em; /* Slightly increased padding for easier tap */
    border-radius: 3px;
    background-color: rgba(0, 82, 155, 0.05); /* Subtle background */
    transition: background-color 0.15s ease;
}
.footnote-ref a:hover,
.footnote-ref a:focus {
    background-color: rgba(0, 82, 155, 0.15);
    color: var(--color-link-hover);
    outline: none;
}

.footnotes {
    margin-top: calc(var(--spacing-unit) * 2);
    padding-top: var(--spacing-unit);
    /* Removed border-top here, added hr in HTML */
    font-size: 0.875em;
    color: var(--color-text-muted);
    line-height: 1.5; /* Improve readability of footnote text */
}
.footnotes hr { /* Style the hr added in HTML */
    border: 0;
    height: 1px;
    background-color: var(--color-border);
    margin: 0 0 var(--spacing-unit) 0; /* Top 0, Bottom spacing */
}
.footnotes h4 {
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: 0.75rem;
}
.footnotes ol {
    padding-left: 1.5rem; /* Indent list */
    margin-bottom: 0;
}
.footnotes li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}
.footnotes li:target { /* Highlight footnote when linked */
    background-color: #fff3cd; /* Light yellow highlight */
    border-radius: var(--border-radius-sm);
    margin-left: -0.5rem; /* Adjust for padding */
    padding-left: 0.5rem; /* Add padding for highlight */
    margin-right: -0.5rem;
    padding-right: 0.5rem;
}
.footnotes strong, .footnotes b { /* Style emphasis in footnotes */
    color: var(--color-text);
    font-weight: 600;
}


/* --- Responsive Adjustments --- */

/* Medium screens and down (e.g., tablets, large phones) */
@media (max-width: 991.98px) {
    /* You can add specific tablet-only adjustments here if needed */
}

/* Small screens (e.g., landscape phones, small tablets) */
@media (max-width: 767.98px) {
    .container {
        padding-right: calc(var(--spacing-unit)*0.75);
        padding-left: calc(var(--spacing-unit)*0.75);
    }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.3rem; }
    .card { padding: var(--spacing-unit); }
    .sub-card { padding: 0.75rem; }

    /* Stack inline groups vertically */
    .inline-group {
        flex-direction: column;
        align-items: stretch;
    }
    .form-control-inline {
        width: 100%; /* Make inline inputs full width */
        min-width: 0; /* Reset min-width if it conflicts */
    }
    .inline-group .btn {
        width: 100%; /* Make inline buttons full width */
    }
    .inline-group label {
        margin-bottom: calc(var(--spacing-unit) * 0.3); /* Add bottom margin back when stacked */
    }

    /* Ensure form rows stack if needed, though flex-wrap should handle it */
    .form-row {
        gap: var(--spacing-unit);
    }

    .navigation-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }
    .navigation-buttons form {
        display: block !important; /* if inline styles are present */
        width: 100%;
    }
    .navigation-buttons .btn {
        width: 100%;
    }

    .help-text {
        padding-left: 0; /* No indent needed when headers might stack or icons are less prominent */
    }

    .global-actions {
        justify-content: center; /* Center button on smaller screens */
    }
    .global-actions .btn {
        width: 100%; /* Make button full-width */
        max-width: 350px; /* But not excessively wide */
        margin-left: auto;
        margin-right: auto;
    }
    .warning-inline {
        display: block; /* Stack warning text below input/button */
        margin-left: 0;
        margin-top: 0.5rem;
        text-align: center;
    }
}

/* Extra-small screens (e.g., portrait phones) */
@media (max-width: 575.98px) {
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.35rem; }
    h3 { font-size: 1.2rem; }

    /* Further reduce padding on smallest screens */
    .container {
        padding-right: calc(var(--spacing-unit)*0.5);
        padding-left: calc(var(--spacing-unit)*0.5);
    }
    .card { padding: 0.75rem; }
    .sub-card { padding: 0.6rem; }

    /* Adjust button/input sizes for tap targets and space */
    .btn {
        font-size: 0.95rem;
        padding: 0.5rem 1rem; /* Adjusted for smaller font */
    }
    .form-control {
        font-size: 0.95rem;
        padding: 0.5rem 0.75rem; /* Adjusted for smaller font */
    }

    /* Stack form-row items explicitly */
    .form-row {
        flex-direction: column;
    }
    .form-row .form-group {
        min-width: 0; /* Reset min-width */
        width: 100%; /* Ensure full width when stacked */
    }

    .checklist-simple {
        gap: 0.4rem 0.8rem; /* Slightly adjust gaps */
    }
    .checkbox-option.simple label {
       /* If labels are short, white-space: nowrap; is fine. If they can be long: */
       /* white-space: normal; */
    }


    .message .icon-prefix {
        font-size: 1em; /* Slightly smaller icons in messages on small screens */
        margin-right: 0.4em;
    }
    .message {
        font-size: 0.9rem; /* Slightly smaller message text */
        padding: 0.75rem;
    }

    /* Ensure global action button is full width */
    .global-actions .btn {
        width: 100%;
        max-width: none; /* Allow full width if needed */
    }

    /* Adjust scrollable list height */
    .source-list.scrollable {
        max-height: 200px;
    }

    .analysis-output pre {
        max-height: 300px;
        font-size: 0.85em; /* Smaller pre text for more content fit */
    }
}