/* WebKit explicit fill available to fix mobile browser URL bar bugs */
html {
    height: -webkit-fill-available;
}

body {
    background-color: #000000;
    color: #e0e0e0;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    /* Cascade of fallbacks for perfect mobile viewport height */
    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: 100dvh;
}

.container {
    width: 100%;
    max-width: 500px;
    /* Balanced bottom padding to give the support button exactly 30px of clear space */
    padding: 20px 20px 50px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: 100dvh;
}

.card {
    background-color: #222222;
    border-radius: 12px;
    padding: 35px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-grow: 1;
    justify-content: space-between;
    /* Centers vertically within the container's inner space */
    margin-top: auto;
    margin-bottom: auto;
}

/* Inputs and textareas */
input, textarea {
    background-color: #333333;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 15px;
    font-size: 16px;
    box-sizing: border-box;
    width: 100%;
    font-family: inherit;
}

input:focus, textarea:focus {
    outline: none;
    background-color: #3a3a3a;
}

textarea {
    resize: vertical;
    min-height: 250px;
}

/* Universal Button Styling */
button {
    background-color: #444444;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 15px;
    font-size: 16px;
    box-sizing: border-box;
    width: 100%;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

button:hover {
    background-color: #555555;
}

.field-label {
    font-size: 12px;
    color: #888888;
    margin-bottom: -10px;
}

#loadingMessage {
    text-align: center;
    color: #888888;
    padding: 40px;
}

/* ==========================================
   GLOBAL STATIC GREYSCALE LINK CONFIGURATION
   ========================================== */
a, a:visited {
    color: #888888; 
    text-decoration: underline;
    font-weight: normal;
    transition: none !important;
}

a:hover, a:active {
    color: #ffffff; 
    transition: none !important;
}

/* Common wrapper for descriptive footers within app cards */
.footer-text {
    margin-top: 25px;
    font-size: 14px;
    line-height: 1.6;
    color: #e0e0e0; 
}

.footer-text p {
    margin: 0 0 12px 0;
}

.footer-text p:last-child {
    margin-bottom: 0;
}

/* ==========================================
   FLEXIBLE CARD LAYOUT & TYPOGRAPHY
   ========================================== */

.card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    gap: 20px;
}

.card-footer {
    margin-top: auto;
}

.card-title {
    font-size: 28px;
    font-style: italic;
    line-height: 1.2;
    margin: 0 0 20px 0;
    color: #ffffff;
}

.card-top {
    flex-shrink: 0;
}

.card-middle {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    gap: 20px;
}

.card-bottom {
    flex-shrink: 0;
    margin-top: 20px;
}

/* ==========================================
   MODAL OVERLAY & STICKY HEADER MODALS
   ========================================== */
.modal-overlay {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    /* Match the container's 50px bottom padding to push the modal up to the same visual center */
    padding: 20px 20px 50px 20px;
    box-sizing: border-box;
}

.modal-card {
    background-color: #222222;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    /* Reduced from 90vh to 80vh to prevent the window from feeling too massive */
    max-height: 80vh; 
    max-height: 80dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-overlay.hidden {
    display: none !important;
}

.modal-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 25px 20px 15px 20px;
    background-color: #222222;
    border-bottom: 1px solid #333333;
    z-index: 10;
    flex-shrink: 0;
}

.close-x {
    background: transparent;
    border: none;
    color: #888888;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: auto;
    line-height: 1;
    margin-top: -4px; 
}

.close-x:hover {
    background: transparent;
    color: #ffffff;
}

.modal-title {
    font-size: 20px;
    color: #ffffff;
    margin: 0;
    font-weight: bold;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    font-size: 15px;
    line-height: 1.6;
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-grow: 1;
}

.modal-footer {
    padding: 15px 20px 20px 20px;
    background-color: #222222;
    border-top: 1px solid #333333;
    flex-shrink: 0;
}

/* ==========================================
   MINIMAL CARD LAYOUT
   ========================================== */
.step-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
}

.minimal-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    padding-top: 30px; 
    gap: 20px; 
    padding-bottom: 20px;
}

.minimal-text {
    min-height: 160px; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    gap: 15px; 
}

.help-section {
    margin-top: auto; 
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.help-label {
    font-size: 12px;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

.subtle-divider {
    border: none;
    border-top: 1px solid #2a2a2a;
    margin: 10px 0 0 0;
    width: 100%;
}

/* ==========================================
   BUTTON VARIANTS
   ========================================== */
.btn-emphasized {
    background-color: #eeeeee;
    color: #000000;
}

.btn-emphasized:hover {
    background-color: #ffffff;
}

.btn-emphasized:disabled {
    background-color: #eeeeee;
    color: #aaaaaa;
    cursor: not-allowed;
}

.btn-muted {
    background-color: #333333;
    color: #aaaaaa;
    font-weight: normal;
}

.btn-muted:hover {
    background-color: #3a3a3a;
    color: #ffffff;
}

/* ==========================================
   UTILITY BAR (Undo/Redo/Clear)
   ========================================== */
.util-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.btn-util {
    flex: 1; /* Causes all three buttons to stretch and share space equally */
    padding: 10px;
    font-size: 13px;
    background-color: #333333;
    color: #888888;
}

.btn-util:hover {
    background-color: #444444;
    color: #ffffff;
}
/* ==========================================
   GLOBAL RESET & BASE
   ========================================== */
html, body {
    height: auto;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

body {
    background-color: #000000;
    color: #e0e0e0;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
}
/* ==========================================
   CONTAINERS & LAYOUT
   ========================================== */
.container {
    width: 100%;
    max-width: 500px;
    padding: 20px 20px 50px 20px;
    box-sizing: border-box;
    margin: 0 auto;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: 100dvh; /* Forces container to respect dynamic mobile URL bars */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card {
    background-color: #222222;
    border-radius: 12px;
    padding: 35px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    /* This combination makes a single card stretch to fill the screen, 
       but also allows it to push past 100vh if the content is long */
    flex: 1 0 auto; 
    box-sizing: border-box;
    height: auto !important; /* Overrides the inline style="height: 100%" on all pages */
}

.card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 20px;
}

.card-footer {
    display: flex;
    gap: 15px;
    margin-top: auto; /* Pushes the buttons to the very bottom of the card */
    padding-top: 20px;
}

/* ==========================================
   TYPOGRAPHY
   ========================================== */
.display-text {
    font-size: 22px;
    line-height: 1.4;
    color: #ffffff;
    margin: 0 0 10px 0;
    text-align: left;
}

.sub-text {
    font-size: 14px;
    line-height: 1.4;
    color: #b0b0b0;
    margin-bottom: 15px;
    text-align: left;
}

.field-label {
    font-size: 14px;
    color: #b0b0b0;
    margin-bottom: 5px;
    margin-top: 10px;
    font-weight: bold;
}

/* ==========================================
   INPUTS & BUTTONS
   ========================================== */
/* ==========================================
   INPUTS & TEXTAREAS (EMPHASIZED GLOBAL STYLES)
   ========================================== */

input[type="text"], 
input[type="number"], 
select, 
textarea {
    background-color: #2a2a2a;         /* Slightly distinct tone from the card (#222222) */
    color: #ffffff;
    border: 1px solid #666666;          /* Mid-grey border to clearly delineate an editable field */
    border-radius: 8px;
    padding: 15px;
    font-size: 16px;
    box-sizing: border-box;
    width: 100%;
    font-family: inherit;
    transition: border-color 0.2s, background-color 0.2s;
}

/* Active typing state */
input[type="text"]:focus, 
input[type="number"]:focus, 
select:focus, 
textarea:focus {
    outline: none;
    background-color: #333333;         /* Brighter on focus for direct feedback */
    border-color: #aaaaaa;             /* Elevated border brightness while active */
}

/* Optional: Soften placeholder text so it doesn't look like typed content */
::placeholder {
    color: #888888;
    opacity: 1;
}

textarea {
    resize: vertical;
    min-height: 150px;
}

.input-row-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Standard Buttons */
button {
    background-color: #444444;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 15px;
    font-size: 16px;
    box-sizing: border-box;
    width: 100%;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

button:hover { background-color: #555555; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-emphasized {
    background-color: #eeeeee;
    color: #000000;
}
.btn-emphasized:hover:not(:disabled) { background-color: #ffffff; }
.btn-emphasized:disabled { background-color: #555555; color: #888888; }

.btn-muted {
    background-color: #333333;
    color: #aaaaaa;
    font-weight: normal;
}
.btn-muted:hover:not(:disabled) { background-color: #3a3a3a; color: #ffffff; }

/* Option Selection Buttons */
.type-btn {
    background-color: #3a3a3a;
    border: 2px solid transparent;
    color: #e0e0e0;
    padding: 12px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 15px;
    font-family: inherit;
    text-align: left;
    font-weight: normal;
}
.type-btn:hover { background-color: #4a4a4a; }
.type-btn.selected {
    background-color: #555555;
    border-color: #888888;
    color: #ffffff;
    font-weight: bold;
}

/* ==========================================
   GRIDS & SPECIAL LAYOUTS
   ========================================== */
.grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.grid-icon-cells {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    background-color: #3a3a3a;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 15px 10px;
    color: #e0e0e0;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    height: 100%;
    box-sizing: border-box;
}
.icon-btn img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    flex-shrink: 0;
}
.icon-btn span {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}
.icon-btn.selected {
    background-color: #555555;
    border-color: #888888;
    color: #ffffff;
    font-weight: bold;
}

/* Final Report Editable Rows */
.report-row-inline {
    background-color: #2a2a2a;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid transparent;
    transition: border-color 0.2s;
}
.report-row-inline:hover {
    border-color: #666;
}
.report-row-title-inline {
    font-size: 16px;
    color: #888;
    font-weight: bold;
    white-space: nowrap;
}
.report-row-value-inline {
    font-size: 16px;
    color: #fff;
    line-height: 1.3;
}

/* Spinner */
.spinner-container { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 30px 0; }
.spinner {
    border: 4px solid #333; border-top: 4px solid #e0e0e0; border-radius: 50%;
    width: 40px; height: 40px; animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* ==========================================
   HUB & SPOKE / QUESTIONNAIRE SPECIFICS
   ========================================== */

.grid-spokes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.spoke-btn {
    background-color: #2a2a2a;
    border: 2px solid #444;
    border-radius: 12px;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.spoke-btn:hover {
    background-color: #333333;
    border-color: #666;
}

.spoke-btn img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.spoke-btn span {
    font-size: 14px;
    color: #ffffff;
    font-weight: bold;
    line-height: 1.2;
}

.spoke-btn.spoke-completed {
    background-color: #1a1a1a;
    border-color: #333;
    filter: grayscale(100%);
    opacity: 0.6;
}

.progress-container {
    width: 100%;
    background-color: #333;
    border-radius: 8px;
    height: 12px;
    margin: 5px 0 25px 0;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: #ffffff;
    border-radius: 8px;
    width: 0%;
    transition: width 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Tooltip & Modals */
.help-btn {
    background: none;
    border: 2px solid #666;
    color: #aaa;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 10px;
    flex-shrink: 0;
    transition: 0.2s;
}

.help-btn:hover {
    background: #444;
    color: #fff;
    border-color: #aaa;
}

.custom-modal-overlay {
    display: none; 
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85); z-index: 1000;
    justify-content: center; align-items: center; padding: 20px;
}

.custom-modal-content {
    background-color: #222; width: 100%; max-width: 400px;
    padding: 30px 25px; border-radius: 12px; position: relative;
    line-height: 1.5; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Native Sliders */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    margin: 15px 0;
}

input[type="range"]:focus { outline: none; }

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #444;
    border-radius: 3px;
}

input[type="range"]::-webkit-slider-thumb {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -9px;
    box-shadow: 0 0 6px rgba(0,0,0,0.5);
}

.scale-labels {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #b0b0b0;
    margin-bottom: 5px;
}

.slider-group {
    margin-bottom: 35px;
}

.slider-group-title {
    font-size: 16px;
    color: #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Animations */
.fade-out {
    animation: fadeOut 1.5s forwards;
}

@keyframes fadeOut {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}
/* ==========================================
   SYSTEM NOTIFICATION / SMALL WINDOW MODAL (From previous update)
   ========================================== */
.sys-modal-overlay {
    position: fixed; 
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7); 
    z-index: 2000;
    display: flex;
    justify-content: center; 
    align-items: center; 
    padding: 20px;
}

.sys-modal-overlay.hidden {
    display: none !important;
}

.sys-modal-content {
    background-color: #1e1e1e; 
    width: 100%; 
    max-width: 350px;
    padding: 30px 25px; 
    border-radius: 12px; 
    position: relative;
    line-height: 1.5; 
    color: #fff; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.05);
}

/* ==========================================
   REBUILT & ACCURATE SLIDER CONTROLS
   ========================================== */
.slider-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 5px;
}

/* Base Range Reset */
input[type="range"].custom-slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 44px; /* Touch-friendly hit target */
    background: transparent;
    margin: 0;
    cursor: pointer;
}

input[type="range"].custom-slider:focus {
    outline: none;
}

/* WebKit Track */
input[type="range"].custom-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #444444;
    border-radius: 3px;
    border: none;
}

/* Firefox Track */
input[type="range"].custom-slider::-moz-range-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #444444;
    border-radius: 3px;
    border: none;
}

/* WebKit Thumb */
input[type="range"].custom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    margin-top: -13px; /* (32px thumb - 6px track) / 2 = 13px negative margin */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    border: none;
}

/* Firefox Thumb */
input[type="range"].custom-slider::-moz-range-thumb {
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    border: none;
}

/* Unanswered State (Grey Thumb) */
input[type="range"].custom-slider.unanswered::-webkit-slider-thumb {
    background: #555555;
    box-shadow: inset 0 0 0 2px #333333;
}
input[type="range"].custom-slider.unanswered::-moz-range-thumb {
    background: #555555;
    box-shadow: inset 0 0 0 2px #333333;
}

/* Centered Value Badge Overlay */
.thumb-val {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    color: #000000;
    font-weight: bold;
    font-size: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.thumb-val.hidden {
    display: none !important;
}

/* Accelerated Fade Animation */
.fade-out {
    animation: fadeOut 0.8s forwards;
}

@keyframes fadeOut {
    0% { opacity: 1; }
    40% { opacity: 1; }
    100% { opacity: 0; }
}

/* ==========================================
   REPORT PROCESSING MODULE NEW STYLES
   ========================================== */
.cause-btn {
    background-color: #3a3a3a;
    border: 2px solid transparent;
    color: #e0e0e0;
    padding: 18px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
}

.cause-btn:hover { 
    background-color: #4a4a4a; 
}

.cause-btn.selected {
    background-color: #555555;
    border-color: #888888;
    color: #ffffff;
}

.cause-title {
    font-size: 18px;
    font-weight: bold;
}

.cause-sub {
    font-size: 13px;
    font-weight: normal;
    color: #aaaaaa;
    line-height: 1.3;
}

.cause-btn.selected .cause-sub {
    color: #dddddd;
}

/* Review Card Condensation */
.condensed-row {
    padding: 10px 15px;
    margin-bottom: 8px;
}
/* ==========================================
   MOMENT SELECTION MODULE (process report v2)
   ========================================== */
/* The selected moment excerpt shown on the moment-pick / naming pages */
.moment-quote {
    font-size: 18px;
    line-height: 1.5;
    font-style: italic;
    color: #ffffff;
    margin: 0;
    text-align: left;
    white-space: pre-wrap;
}
/* Selectable moment excerpts on the "pick a different moment" page */
.moment-option {
    font-weight: normal;
    font-size: 15px;
    line-height: 1.5;
    white-space: pre-wrap;
}
.moment-option.selected {
    font-weight: normal;
}

/* ==========================================================================
   ADDITIONS FOR THE SECRET-CODE SYSTEM
   ========================================================================== */

/* Loading overlay card ("Logging you in...", "Generating your secret code...").
   The backdrop and card chrome come from your existing .modal-overlay and
   .modal-card classes; these rules only add the spinner layout. */
.et-loading-card {
    max-width: 320px;
    text-align: center;
    padding: 2rem 1.5rem;
}

.et-spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 1rem auto;
    border: 4px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: 0.8;
    animation: et-spin 0.9s linear infinite;
}

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

.et-loading-text {
    margin: 0;
    font-weight: bold;
}

/* The assigned secret code, displayed large so it is easy to write down or
   screenshot. user-select keeps it copyable even if the site disables
   selection elsewhere. */
.code-display {
    font-weight: bold;
    font-size: 1.6em;
    letter-spacing: 0.03em;
    text-align: center;
    padding: 0.9em 0.6em;
    margin: 1em 0;
    border: 2px dashed currentColor;
    border-radius: 12px;
    -webkit-user-select: text;
    user-select: text;
    word-break: break-word;
}

/* Small background upload status line ("Saving your responses..."). */
.upload-status {
    text-align: center;
    font-size: 0.9em;
    opacity: 0.75;
    min-height: 1.2em;
    margin: 0.75em 0 0 0;
}

.upload-status.is-error {
    opacity: 1;
    font-weight: bold;
}

/* Respect reduced-motion preferences: slow the spinner right down. */
@media (prefers-reduced-motion: reduce) {
    .et-spinner {
        animation-duration: 2.5s;
    }
}

/* ==========================================================================
   "PART X OF Y" PROGRESS SUB-PAGES
   Added for 007_instructions.html, 015_process_report.html, and
   036_questionnaire.html. These are small standalone screens shown at the
   start of each of the three experiment parts (and, for the process report,
   right before its own "Next, some questions..." intro) so participants can
   see how far along they are.
   ========================================================================== */

/* --- Border toggle -------------------------------------------------------
   This is the "visual presence" border that sets a part sub-page apart from
   normal question cards. It is deliberately isolated in its own class so it
   is easy to edit or turn off entirely:
     - To change appearance: edit the border/border-radius values below.
     - To remove entirely: delete (or comment out) this rule, or simply stop
       adding the "part-page-border" class in the HTML.
   -------------------------------------------------------------------------- */
.part-page-border {
    border: 2px solid #3a3a3a;
    border-radius: 12px;
}

/* --- Layout ---------------------------------------------------------------
   Fills the available card space with the header pinned to the top and the
   footer (Begin button) pinned near the bottom. Applied to a direct child of
   .card (process report / questionnaire) or directly alongside
   .step-container (instructions), so the outer .card / .step-container size
   never changes based on this inner content. The padding here keeps the
   heading and button clear of the border above, rather than hugging it -
   edit these values to adjust the inset.
   -------------------------------------------------------------------------- */
.part-page {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    height: 100%;
    gap: 20px;
    padding: 24px 20px;
    box-sizing: border-box;
}

.part-page-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

/* "Part X of Y:" label - part of the heading rather than a small caption,
   so it's sized/weighted close to the title beneath it. */
.part-page-eyebrow {
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
}

.part-page-title {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3;
    color: #ffffff;
    margin: 0;
}

.part-page-footer {
    display: flex;
    justify-content: center;
    /* Lifts the Begin button off the bottom edge/border rather than letting
       it sit flush against it. */
    margin-bottom: 16px;
}

/* "Begin" button: centered and narrower than a full-width Continue button,
   so it reads as visually distinct from the rest of the button set. */
.btn-begin {
    max-width: 220px;
    background-color: #eeeeee;
    color: #000000;
}

.btn-begin:hover {
    background-color: #ffffff;
}

/* ==========================================================================
   ENVIRONMENT WATERMARK

   Injected by experiment-tools.js, and ONLY on the staging site
   (hallucination-staging.netlify.app). If you can see this on
   hallucinationexperiment.com, something is very wrong with the deploy.

   pointer-events: none is deliberate - the help-and-support button also
   lives in this corner on most pages, and the watermark must never be able
   to swallow a click meant for it. z-index sits below .modal-overlay (1000)
   and .sys-modal-overlay (2000) so dialogs still cover it.

   If it collides with the help button on your screen, adjust bottom/right
   here - nothing else references these values.
   ========================================================================== */
.et-staging-watermark {
    position: fixed;
    bottom: 6px;
    right: 10px;
    z-index: 900;
    pointer-events: none;
    user-select: none;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.30);
    background: rgba(0, 0, 0, 0.35);
    padding: 2px 7px;
    border-radius: 4px;
}

/* ==========================================================================
   CODE RECOVERY FORM (#view-recovery on 045_secretCode.html)

   Carried over from code_recovery.html so the in-page recovery form matches
   the standalone page. Kept here rather than in a page <style> block.
   ========================================================================== */
#view-recovery {
    overflow-y: auto;
}

#view-recovery .field-label {
    margin-bottom: 6px;
}

.input-unit {
    display: flex;
    flex-direction: column;
}

.input-unit input,
.input-unit textarea {
    width: 100%;
    box-sizing: border-box;
}

.input-unit textarea {
    min-height: 70px;
    resize: vertical;
}

.form-error {
    color: #ff6b6b;
    font-weight: bold;
    font-size: 14px;
}


/* ==========================================================================
   Visual Analogue Scale (VAS) Image Layout
   ========================================================================== */

.lowlands-scale-images {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 4px;
}

.lowlands-scale-images.lowlands-img-missing {
    display: none !important;
}

.lowlands-scale-img {
    flex: 1 1 0;
    aspect-ratio: 1 / 1;
    max-width: 96px;
    border-radius: 8px;
    background-color: #2a2a2a;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.lowlands-scale-img.lowlands-img-loaded {
    opacity: 1;
}

.lowlands-scale-img.lowlands-img-failed {
    opacity: 0;
}