:root {
       --archival-blue: #1a4a73;
       --heritage-gold: #878441;
       --south-african-sun: #f59e0b;
   }

   body {
       background-color: #f8fafc;
       font-family: 'Inter', sans-serif;
   }

   .text-archival-blue {
       color: var(--archival-blue);
   }

   .sticky-main-header {
       position: sticky;
       top: 0;
       z-index: 1000;
       background-color: #f8fafc;
       padding-top: 1rem;
       padding-bottom: 1rem;
       border-bottom: 1px solid transparent;
       transition: all 0.3s ease;
   }

   .header-scrolled {
       border-bottom: 1px solid #e2e8f0;
       box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
   }

   .collapsible-content {
       display: none;
       overflow: hidden;
   }

   .active-section .collapsible-content {
       display: block;
       height: auto;
   }

   .step-header {
       cursor: pointer;
       transition: all 0.3s ease;
       background: white;
   }

   .active-section .step-header {
       background: var(--archival-blue);
       color: white !important;
   }

   .btn-blue {
       background-color: var(--archival-blue);
       color: white;
       padding: 10px 20px;
       border-radius: 6px;
       font-weight: 600;
       transition: transform 0.1s, background-color 0.2s;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }

   .btn-blue:hover {
       background-color: #133a5c;
   }

   .btn-blue:active {
       transform: translateY(1px);
   }

   .btn-blue:disabled {
       background-color: #9ca3af;
       cursor: not-allowed;
   }

   .card {
       background: white;
       border-radius: 12px;
       box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
       border: 1px solid #e2e8f0;
       margin-bottom: 1.5rem;
       overflow: hidden;
   }

   .step-completed {
       border-left: 6px solid #22c55e;
   }

   .step-number {
       width: 32px;
       height: 32px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 50%;
       background: #e2e8f0;
       color: #64748b;
       font-weight: bold;
       margin-right: 12px;
   }

   .active-section .step-number {
       background: var(--heritage-gold);
       color: white;
   }


   /* Debug Full Screen Logic - Updated for Scrolling */
   #debugSubSection.fullscreen {
       position: fixed;
       top: 0;
       left: 0;
       width: 100vw;
       height: 100vh;
       z-index: 9999;
       background: #0f172a;
       /* Slate 900 */
       padding: 0;
       margin: 0;
       display: flex;
       flex-direction: column;
       overflow-y: auto;
       /* Enable vertical scrolling for the whole modal */
   }

   #debugSubSection.fullscreen .debug-header {
       display: flex;
       position: sticky;
       /* Keep header visible while scrolling */
       top: 0;
       background: #1e293b;
       /* Slate 800 */
       padding: 1rem 2rem;
       align-items: center;
       justify-content: space-between;
       border-bottom: 1px solid #334155;
       z-index: 10001;
   }

   #debugSubSection.fullscreen #debugOutput {
       max-height: none;
       /* Remove height limit in fullscreen */
       height: auto;
       border-radius: 0;
       padding: 2rem;
       background: transparent;
   }

   /* Ensure the control buttons stay visible at the top when in FS */
   #debugSubSection.fullscreen .debug-controls {
       position: sticky;
       top: 60px;
       /* Below the header */
       background: #0f172a;
       padding: 1rem 2rem;
       z-index: 10000;
       border-bottom: 1px solid #1e293b;
   }

   #previewArea {
       background-color: #f1f5f9;
       padding: 1rem;
       border-radius: 8px;
       max-height: 32rem;
       display: flex;
       flex-direction: column;
   }

   #previewContent {
       background: white;
       box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
       padding: 40px;
       font-family: 'Source Serif 4', serif;
       border: 1px solid #e2e8f0;
       overflow-y: auto;
       flex-grow: 1;
   }

   #previewArea.fullscreen #previewContent {
       padding: 60px 10%;
   }

   #previewArea.fullscreen {
       position: fixed;
       top: 0;
       left: 0;
       width: 100vw;
       height: 100vh;
       max-height: 100vh;
       z-index: 9999;
       background: #f8fafc;
       padding: 0;
       margin: 0;
       border-radius: 0;
   }

   .fullscreen-header {
       display: none;
       background: white;
       border-bottom: 2px solid var(--archival-blue);
       padding: 1rem 2rem;
       align-items: center;
       justify-content: space-between;
   }

   #previewArea.fullscreen .fullscreen-header {
       display: flex;
   }

   .toggle-checkbox:checked+.toggle-label {
       background-color: var(--archival-blue);
   }

   .toggle-checkbox:checked {
       right: 0;
       border-color: var(--archival-blue);
   }

   /* Language Toggle Specific */
   .lang-toggle-wrap {
       display: flex;
       align-items: center;
       gap: 8px;
       background: #e2e8f0;
       padding: 4px;
       border-radius: 99px;
   }

   .lang-btn {
       padding: 4px 12px;
       border-radius: 99px;
       font-size: 10px;
       font-weight: 800;
       cursor: pointer;
       transition: all 0.2s;
   }

   .lang-btn.active {
       background: var(--archival-blue);
       color: white;
   }

   summary {
       list-style: none;
       display: flex;
       align-items: center;
   }

   summary::-webkit-details-marker {
       display: none;
   }

   .indi-arrow {
       display: inline-block;
       width: 24px;
       transition: transform 0.2s;
       color: var(--heritage-gold);
       font-weight: bold;
   }

   details[open]>summary .indi-arrow {
       transform: rotate(90deg);
   }

   footer {
       background: #1e293b;
       color: #94a3b8;
       padding: 2rem;
       text-align: center;
   }

/*

   @media print {
    /* Hide everything by default 
    body * {
        visibility: hidden;
    }
    /* Only show the preview area and its contents 
    #previewArea, #previewArea * {
        visibility: visible;
    }
    /* Position the preview area at the top left of the printed page 
    #previewArea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    /* Hide the UI buttons during print 
    #actionButtons, #previewControls {
        display: none !important;
    }
} */

@media print {
    /* 1. Hide the entire UI and background */
    body * {
        visibility: hidden;
    }

    /* 2. Reset the body so it can grow naturally with the content */
    body {
        background: white !important;
        overflow: visible !important;
        height: auto !important;
    }

    /* 3. Make the preview area visible and force it to be a standard block */
    #previewArea, #previewArea * {
        visibility: visible;
    }

    #previewArea {
        position: absolute !important; /* Overrides 'fixed' in Full Screen */
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
        background: white !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 4. Ensure the content container doesn't scroll/clip */
    #previewContent {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* 5. Hide UI-specific elements in the printout */
    #actionButtons, 
    #previewControls, 
    .fullscreen-header, 
    #stickyHeader,
    .indi-arrow {
        display: none !important;
    }
    
    /* 6. Prevent details from clipping across pages if possible */
    details {
        page-break-inside: avoid;
    }
}