/* Psychopathia Machinalis - Custom Styles - ADAPTED FOR SAFER AGENTIC AI */

/* Title spacing */
.title {
    line-height: 1.2;
}

.title-first-line,
.title-second-line {
    display: block;
}

.title-second-line {
    margin-top: 0.3em;
}


/* Button styling - light blue theme for header navigation */
.blog-title .info .button.icon {
    background-color: #dce5eb !important;
    color: #2c3e50 !important;
    border: none;
}

.blog-title .info .button.icon:hover {
    background-color: #c8d4db !important;
    color: #2c3e50 !important;
    opacity: 1 !important;
}

.blog-title .info .button.icon:active {
    background-color: #b4c3cc !important;
    color: #2c3e50 !important;
    opacity: 1 !important;
}

.blog-title .info .button.icon i {
    color: #2c3e50 !important;
}

/* Citation box styling */
pre code.plaintext {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 25px !important;
    border: 1px solid #3d566f !important;
}

pre:has(code.plaintext) {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 0 !important;
    border: 1px solid #3d566f !important;
}

/* Table-specific styles from original psychopathia-styles - Review if needed for new tables */
.glossary-table td:first-child { 
    font-weight: bold; 
    color: #2c3e50; 
}
.abbreviations-table td:first-child { 
    font-weight: bold; 
    color: #2c3e50; 
}

/* General Code blocks styling (if not citation) */
pre:not(:has(code.plaintext)) {
    background: linear-gradient(135deg, #f0f2f5 0%, #e6e9ed 100%); /* Lighter for general code */
    color: #2c3e50; 
    padding: 20px;
    border-radius: 5px;
    overflow-x: auto;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 0.9em;
    border: 1px solid #d1d5da;
    margin-top: 10px;
    margin-bottom: 20px;
}
pre:not(:has(code.plaintext)) code {
    background: transparent !important; /* Ensure inner code tag is transparent */
    color: inherit !important;
}


/* Dysfunction category intro boxes (Navy boxes for Driver/Inhibitor Titles) */
.dysfunction-intro {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: #f8f8f2;
    padding: 28px 32px 28px 36px;
    border-radius: 12px;
    margin: 56px 0 28px 0;
    border: 1px solid #3d566f;
    box-shadow: 0 8px 24px rgba(44, 62, 80, 0.25);
}

.dysfunction-intro h1 {
    color: #f8f8f2 !important;
    border-bottom: none !important; /* No border for title in navy box */
    margin-top: 0 !important;
    margin-bottom: 0 !important; /* No bottom margin for title in navy box */
    padding-bottom: 0 !important;
    font-size: 1.8em; /* Slightly smaller for section titles if needed */
}

/* Individual disorder alternating backgrounds (for G.X.Y items) */
.disorder-white {
    background-color: #ffffff;
    padding: 24px 28px;
    border-radius: 10px;
    margin: 14px 0;
    border: 1px solid #e8e9ea;
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.04);
    transition: all 0.25s ease;
}

.disorder-grey {
    background-color: #fbfcfd;
    padding: 24px 28px;
    border-radius: 10px;
    margin: 14px 0;
    border: 1px solid #e8e9ea;
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.04);
    transition: all 0.25s ease;
}

.disorder-white h3,
.disorder-grey h3 {
    color: #2c3e50 !important;
    font-size: 1.15em;
    font-weight: 700;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e8e9ea;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

/* Definition paragraph after H3 inside disorder-white/grey */
.disorder-white > h3 + p,
.disorder-grey > h3 + p {
    font-style: italic;
    color: #555;
    margin-top: 5px; /* Space after H3 */
    margin-bottom: 15px; /* Space before table */
    padding: 10px 0px; /* Minimal padding, rely on parent box */
    background: none; /* No distinct background for this p */
    border-radius: 0;
    border: none;
    font-size: 0.9em;
    line-height: 1.5;
}


/* Table styling for G.X.Y items */
.disorder-white table,
.disorder-grey table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 0.78em; /* Smaller text for tables */
    line-height: 1.45;
    box-shadow: none; 
    border-radius: 0;
    border: 1px solid #dde5eb; /* Light border around table */
}

.disorder-white table th,
.disorder-grey table th {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    font-weight: 600;
    text-align: center !important;
    padding: 12px 10px;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9em;
    letter-spacing: 0.02em;
}

.disorder-white table td,
.disorder-grey table td {
    padding: 8px 10px; 
    border: 1px solid #e0e6ec;
    vertical-align: top;
    word-break: break-word; 
}

.disorder-white table td ul,
.disorder-grey table td ul,
.disorder-white table td ol,
.disorder-grey table td ol {
    margin: 5px 0 5px 0; /* Adjusted margins */
    padding-left: 18px; 
    font-size: 1em; /* Relative to td font size */
}

.disorder-white table td ul li,
.disorder-grey table td ul li,
.disorder-white table td ol li,
.disorder-grey table td ol li {
    margin-bottom: 4px; 
}

/* Ensure p tags inside td don't inherit large padding from general rules */
.disorder-white table td p,
.disorder-grey table td p {
    padding: 0 !important; 
    margin: 0 0 5px 0 !important; 
    background: none !important;
    border-radius: 0 !important;
    border: none !important;
    max-width: none !important; 
    hyphens: none !important;
    word-spacing: normal !important;
    font-size: 1em !important; 
    line-height: 1.45 !important;
    font-style: normal !important; /* Override italic from definition p if needed */
    color: #333 !important; /* Ensure good contrast */
}


/* Responsive improvements (Review if needed for tables) */
@media (max-width: 768px) {
    .disorder-white,
    .disorder-grey {
        padding: 20px 15px;
        margin: 15px 0;
    }
    
    /* Framework tables - make them scrollable with better formatting */
    .container.blog table {
        min-width: 800px !important; /* Ensure table has enough width to be readable */
        font-size: 14px !important; /* Larger font for mobile */
    }
    
    /* Ensure all table cells have adequate padding and sizing */
    .container.blog table th,
    .container.blog table td {
        padding: 12px 10px !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    /* First column (AAI-SFRs) needs more space */
    .container.blog table th:first-child,
    .container.blog table td:first-child {
        min-width: 300px !important;
        padding-right: 20px !important;
    }
    
    /* N/I column should be narrow */
    .container.blog table th:nth-child(2),
    .container.blog table td:nth-child(2) {
        min-width: 60px !important;
        max-width: 60px !important;
        text-align: center !important;
    }
    
    /* Stakeholder column */
    .container.blog table th:nth-child(3),
    .container.blog table td:nth-child(3) {
        min-width: 100px !important;
        max-width: 120px !important;
        text-align: center !important;
    }
    
    /* Evidence column needs space */
    .container.blog table th:nth-child(4),
    .container.blog table td:nth-child(4) {
        min-width: 250px !important;
    }
    
    /* Better mobile table handling for framework.html */
    .disorder-white table,
    .disorder-grey table {
        font-size: 0.9em !important; /* Increase from 0.78em for better readability */
        table-layout: auto !important; /* Allow table to adjust naturally */
        width: 100% !important;
    }
    
    /* Remove fixed column widths on mobile to allow natural flow */
    .disorder-white table td,
    .disorder-grey table td,
    .disorder-white table th,
    .disorder-grey table th {
        width: auto !important;
        min-width: unset !important;
        max-width: none !important;
        padding: 10px 8px !important; /* More vertical padding for touch */
        font-size: 0.9em !important;
        line-height: 1.5 !important;
    }
    
    /* Make first column (AAI-SFRs) take more space on mobile */
    .disorder-white table td:first-child,
    .disorder-grey table td:first-child {
        min-width: 200px !important;
        padding-right: 15px !important;
    }
    
    /* Make the N/I column narrower */
    .disorder-white table td:nth-child(2),
    .disorder-grey table td:nth-child(2),
    .disorder-white table th:nth-child(2),
    .disorder-grey table th:nth-child(2) {
        min-width: 30px !important;
        max-width: 50px !important;
        text-align: center !important;
    }
    
    /* Stakeholder column */
    .disorder-white table td:nth-child(3),
    .disorder-grey table td:nth-child(3) {
        min-width: 80px !important;
        white-space: normal !important;
    }
    
    /* Evidence column */
    .disorder-white table td:nth-child(4),
    .disorder-grey table td:nth-child(4) {
        min-width: 150px !important;
    }
    
    /* Improved mobile table styles for framework.html */
    .container.blog table {
        font-size: 0.85em !important; /* Slightly larger than 0.75em */
        border: none;
    }
    
    /* Stack table cells on very small screens for better readability */
    @media (max-width: 480px) {
        .container.blog table thead {
            display: none; /* Hide headers on very small screens */
        }
        
        .container.blog table tr {
            display: block;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            background: #f9f9f9;
        }
        
        .container.blog table td {
            display: block;
            width: 100% !important;
            padding: 8px 0 !important;
            border: none !important;
            position: relative;
            padding-left: 40% !important;
        }
        
        .container.blog table td:before {
            content: attr(data-label);
            position: absolute;
            left: 0;
            width: 35%;
            padding-right: 10px;
            font-weight: bold;
            text-align: left;
        }
        
        .container.blog table td.sfr-align {
            text-align: left !important;
            padding-left: 40% !important;
        }
    }
    
    .disorder-white h3,
    .disorder-grey h3 {
        font-size: 1.2em;
    }

    .disorder-white table,
    .disorder-grey table {
        font-size: 0.75em; /* Further reduce for mobile if very cramped */
    }
    .disorder-white table th, .disorder-grey table th,
    .disorder-white table td, .disorder-grey table td {
        padding: 6px 8px;
    }

    /* Make all framework and glossary tables horizontally scrollable on mobile */
    .container.blog table,
    .disorder-white table,
    .disorder-grey table,
    .glossary-table,
    .abbreviations-table {
        display: block;
        overflow-x: auto;
        width: 100% !important;
        margin-bottom: 20px;
    }
    
    /* Ensure tables have minimum width for readability */
    .disorder-white table,
    .disorder-grey table {
        min-width: 650px; /* Minimum width to prevent crushing */
    }
    
    /* Add visual indicator for scrollable tables */
    .disorder-white:has(table):after,
    .disorder-grey:has(table):after {
        content: "← Scroll horizontally for more →";
        display: block;
        text-align: center;
        font-size: 0.85em;
        color: #666;
        padding: 10px 0;
        font-style: italic;
        margin-top: -10px;
    }

    /* Better mobile table styles for readability */
    table thead tr th,
    table tbody tr td {
        width: auto !important;
        min-width: unset !important;
        max-width: 100% !important;
        white-space: normal !important; /* allow wrapping */
        word-break: break-word;
        padding: 10px 8px !important; /* More padding for touch targets */
        line-height: 1.5 !important;
    }
    
    /* Minimum widths for specific columns to prevent crushing */
    .container.blog table td:nth-child(1) {
        min-width: 200px !important; /* AAI-SFRs column */
    }
    
    .container.blog table td:nth-child(2) {
        min-width: 80px !important; /* N/I column */
        text-align: center !important;
    }
    
    .container.blog table td:nth-child(3) {
        min-width: 100px !important; /* Stakeholder column */
        text-align: center !important;
    }
    
    .container.blog table td:nth-child(4) {
        min-width: 180px !important; /* Evidence column */
    }
}

/* Hover effects for interactivity - refined */
.disorder-white:hover,
.disorder-grey:hover {
    box-shadow: 0 6px 20px rgba(44, 62, 80, 0.10);
    transform: translateY(-1px);
    border-color: #d8dce0;
}

/* Contact Form Styling (from original, seems fine) */
.contact-form {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 40px;
    background: rgba(44, 62, 80, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(44, 62, 80, 0.1);
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.08);
}

/* Mobile responsive contact form */
@media (max-width: 768px) {
    .contact-form {
        padding: 20px;
        max-width: none;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .contact-form {
        padding: 15px;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
    }
}

.contact-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    margin-top: 20px;
    color: #353535;
    font-size: 16px;
    font-family: "Poppins", serif;
    line-height: 1.6;
}

.contact-form label:first-child {
    margin-top: 0;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px 18px;
    margin-bottom: 20px;
    border: 2px solid rgba(44, 62, 80, 0.15);
    border-radius: 8px;
    font-size: 16px;
    font-family: "Charter", sans-serif;
    line-height: 1.6;
    color: #353535;
    background: #ffffff;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #2c3e50;
    box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
    background: #fafbfc;
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(53, 53, 53, 0.6);
    font-family: "Charter", sans-serif;
    font-size: 16px;
}

.send-button {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #3d5a73 100%);
    color: white;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    font-family: "Poppins", serif;
    line-height: 1.6;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.2);
}

.send-button:hover {
    background: linear-gradient(135deg, #34495e 0%, #3d5a73 50%, #465c7a 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.3);
}

.send-button:active {
    transform: translateY(0px);
    box-shadow: 0 2px 6px rgba(44, 62, 80, 0.2);
}

.send-button i {
    margin-left: 8px;
}

@media (max-width: 768px) {
    .contact-form {
        padding: 30px 20px;
        margin: 0 10px;
    }
    
    .contact-form label {
        font-size: 15px;
    }
    
    .contact-form input,
    .contact-form textarea {
        padding: 12px 15px;
        font-size: 16px; /* Prevents iOS auto-zoom on focus */
    }
    
    .contact-form input::placeholder,
    .contact-form textarea::placeholder {
        font-size: 15px;
    }
    
    .send-button {
        padding: 14px 28px;
        font-size: 15px;
    }
}


/* --- Header Image Glow Effect & Box Fix --- */


/* Target the container in the header that holds the blog cover image area.
   This is typically a direct child of .blog-title in the Clarity template. */
.container.blog#first-content div.blog-title > div.blog-cover {
    background: none !important; /* Attempt to remove any background image or complex background */
    background-color: transparent !important; /* Force transparent background */
    padding: 0 !important; /* Remove any padding that would show the parent's background */
    border: none !important; /* Ensure no border is creating a box */
    box-shadow: none !important; /* Ensure no shadow is creating a box effect */
    
    /* Flex properties to control the inner image container.
       Adjust justify-content if the image should be left/right aligned in its slot. */
    display: flex !important;
    align-items: center !important; /* Vertically center content */
    justify-content: center !important; /* Horizontally center content */
    
    /* If the template gives this slot a fixed size that's too large, try to override */
    min-height: auto !important;
    height: auto !important; /* Let content determine height */
    
    /* Adjust flex properties if it's taking up too much space or not enough */
    /* Example: allow it to shrink, and set a basis - this depends heavily on original template */
    flex-shrink: 1 !important; 
    flex-grow: 0 !important; /* Don't let it grow unnecessarily */
    /* flex-basis: 40%; */ /* Remove or adjust: Let content size dictate or set specific %/px */
    /* If the image should be on the right and text on left, this div might have margin-left: auto or similar */
}

/* Your inner container that actually holds the two images (foreground and background) for the glow */
/* This class "blog-cover" is the one you are adding to your div inside the template's slot */
.container.blog#first-content div.blog-title > div.blog-cover > div.blog-cover {
    position: relative !important;
    display: inline-block !important; /* So it sizes to the image */
    max-width: 100%; /* It will be constrained by the parent .blog-title > .blog-cover's width/flex-basis */
                     /* You can set an explicit max-width in pixels here if you want to cap logo size, e.g., max-width: 350px; */
    line-height: 0 !important; /* Prevents extra space below inline-block images */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important; /* Ensure this inner one is also transparent */
}

/* Styles for the actual <img> tags */
/* Targeting any image inside your glow div.blog-cover */
.container.blog#first-content div.blog-title > div.blog-cover > div.blog-cover img {
    display: block !important;
    width: 100% !important; /* Images fill their immediate parent (your inner div.blog-cover) */
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    /* If your logo image has rounded corners, add: */
    /* border-radius: 8px; */
}

/* Background image creating the glow */
.container.blog#first-content div.blog-title > div.blog-cover > div.blog-cover img.background {
    filter: blur(20px) brightness(1.3) contrast(1.1) !important;
    opacity: 0.5 !important;
    animation: glow-pulse 3s ease-in-out infinite alternate !important;
    transform: scale(1.15) !important; /* Make blurred bg slightly larger */
}

/* Foreground image (the sharp one) */
.container.blog#first-content div.blog-title > div.blog-cover > div.blog-cover img.foreground {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 2 !important; /* On top of the background image */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25) !important; /* Drop shadow */
}

/* Glow pulse animation */
@keyframes glow-pulse {
    0% {
        filter: blur(20px) brightness(1.3) contrast(1.1) !important;
        opacity: 0.5 !important;
        transform: scale(1.15) !important;
    }
    100% {
        filter: blur(21px) brightness(1.4) contrast(1.15) !important;
        opacity: 0.6 !important;
        transform: scale(1.20) !important; /* Slightly larger pulse for background */
    }
}

/* Mobile adjustments for header image spacing */
@media (max-width: 768px) {
    .container.blog#first-content div.blog-title > div.blog-cover {
        padding: 0 !important;
        margin-bottom: 25px !important;
    }
    
    /* Reduce the general blog-cover spacing on mobile */
    .blog-cover {
        margin-bottom: 25px !important;
        padding-bottom: 0 !important;
    }
    
    /* Adjust button section spacing for better mobile flow */
    .blog-title .info {
        padding-bottom: 20px !important;
        margin-bottom: 10px !important;
    }
    
    /* Ensure proper spacing between sections on mobile */
    .container.blog.main {
        padding-top: 15px !important;
    }
    
    /* Adjust the blog intro section on mobile */
    .blog-intro {
        padding-bottom: 10px !important;
    }
    
    /* Fix image container on mobile */
    .container.blog#first-content div.blog-title > div.blog-cover > div.blog-cover {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    .container.blog#first-content div.blog-title > div.blog-cover {
        margin-bottom: 20px !important;
    }
    
    .blog-title .info {
        padding-bottom: 15px !important;
        margin-bottom: 5px !important;
    }
}

/* --- End of Header Image Glow Effect & Box Fix --- */


/* Reduce excessive spacing around carousel section */
#carousel-section {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* Also reduce padding on the container after carousel */
#carousel-section + .container.blog.main {
    padding-top: 0 !important;
}

/* Style for the 'b' in inhibitor G-numbers like G1.1b */
.inhibitor-char {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: currentColor;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
}


/* Abbreviations and Glossary Table Styles */
.abbreviations-table,
.glossary-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.9em;
}

.abbreviations-table td,
.glossary-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
}

.abbreviations-table td:first-child,
.glossary-table td:first-child {
    font-weight: bold;
    color: #2c3e50;
    width: 25%;
    background-color: #f8f9fa;
}

.abbreviations-table td:last-child,
.glossary-table td:last-child {
    width: 75%;
    line-height: 1.6;
}

.abbreviations-table tr:hover,
.glossary-table tr:hover {
    background-color: #f5f5f5;
}


@media (max-width: 768px) {
    .contact-form {
        padding: 0 20px;
    }
    
    .abbreviations-table td:first-child,
    .glossary-table td:first-child {
        width: 30%;
    }
    
    .abbreviations-table td:last-child,
    .glossary-table td:last-child {
        width: 70%;
    }
}

/* Framework Table Alignment - Make N/I and stakeholder codes align with each SFR paragraph */
table thead tr th {
    vertical-align: middle;
    text-align: center !important;
    padding: 10px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    font-weight: bold;
}

table tbody tr td {
    border: 1px solid #dee2e6;
    padding: 15px;
    vertical-align: top;
}

/* Remove zebra striping from framework tables */
table tbody tr:nth-child(odd),
table tbody tr:nth-child(even) {
    background-color: transparent !important;
}

/* SFR column styling - establish baseline for paragraph spacing */
table tbody tr td:nth-child(1) {
    line-height: 1.6em;
    padding-right: 20px;
}

/* This class will be added to the cells that need vertical alignment. */
table tbody td.sfr-align {
    vertical-align: middle !important;
    text-align: center;
    font-weight: bold;
}

/* Column width controls for framework tables - DESKTOP ONLY */
@media (min-width: 769px) {
    /* SFR column - needs substantial space */
    table thead tr th:nth-child(1),
    table tbody tr td:nth-child(1),
    .disorder-white table thead tr th:nth-child(1),
    .disorder-white table tbody tr td:nth-child(1),
    .disorder-grey table thead tr th:nth-child(1),
    .disorder-grey table tbody tr td:nth-child(1) {
        width: 32% !important;
        min-width: 32% !important;
        max-width: 32% !important;
    }

    /* Normative/Instructive column - minimal space */
    table thead tr th:nth-child(2),
    table tbody tr td:nth-child(2),
    .disorder-white table thead tr th:nth-child(2),
    .disorder-white table tbody tr td:nth-child(2),
    .disorder-grey table thead tr th:nth-child(2),
    .disorder-grey table tbody tr td:nth-child(2) {
        width: 12% !important;
        min-width: 12% !important;
        max-width: 12% !important;
    }

    /* Stakeholder column - MORE SPACE for D, I, O, M, U, R to fit on 2 lines */
    table thead tr th:nth-child(3),
    table tbody tr td:nth-child(3),
    .disorder-white table thead tr th:nth-child(3),
    .disorder-white table tbody tr td:nth-child(3),
    .disorder-grey table thead tr th:nth-child(3),
    .disorder-grey table tbody tr td:nth-child(3) {
        width: 20% !important;
        min-width: 20% !important;
        max-width: 20% !important;
    }

    /* Evidence column - substantial space */
    table thead tr th:nth-child(4),
    table tbody tr td:nth-child(4),
    .disorder-white table thead tr th:nth-child(4),
    .disorder-white table tbody tr td:nth-child(4),
    .disorder-grey table thead tr th:nth-child(4),
    .disorder-grey table tbody tr td:nth-child(4) {
        width: 36% !important;
        min-width: 36% !important;
        max-width: 36% !important;
    }
}

/* Fix font family for underlined digits using Unicode combining underline character */


/* Navigation elements font fix */
.nav-container * {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", sans-serif;
}

/* Ensure proper rendering of combining characters */
body {
    font-variant-ligatures: common-ligatures;
    font-feature-settings: "kern" 1;
}

/* Proper underline styling for inhibitor framework numbers */
.underlined-digit {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
    text-decoration-color: currentColor;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
}

/* Ensure underline looks good in headings */
h1 .underlined-digit,
h2 .underlined-digit, 
h3 .underlined-digit {
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Navigation underline styling */
.nav-container .underlined-digit {
    text-decoration-thickness: 1px;
    text-underline-offset: 1px;
}

/* Add a wrapper for tables to make them horizontally scrollable on mobile */
.table-wrapper {
    overflow-x: auto;
    margin: 20px -15px; /* Negative margin to allow full-width scrolling */
    padding: 0 15px;
    position: relative;
}

/* Add scroll indicator for mobile */
@media (max-width: 768px) {
    .table-wrapper::after {
        content: "→ Scroll horizontally for more →";
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        color: #666;
        font-style: italic;
        white-space: nowrap;
    }
}

/* Add shadow indicators for scrollable content */
.table-wrapper {
    background: 
        linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%,
        linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)),
        linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)) 0 100%;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-position: 0 0, 100%, 0 0, 100%;
    background-attachment: local, local, scroll, scroll;
}

/* On larger screens where scrolling is not needed, remove the wrapper's overflow property */
@media (min-width: 769px) {
    .table-wrapper {
        overflow-x: visible;
        margin: 20px 0;
        padding: 0;
        background: none;
    }
}

/* ============================================================
   Video explainer overlay (adapted from Psychopathia Machinalis)
   Diaphanous grid + soft depth glow over a slate scrim, with a
   centred play button, title/subtitle card, and duration badge.
   These styles live here because framework.html loads
   framework-extra.css (not css/index.min.css, where the older,
   plainer overlay rules sit unused for the homepage).
   ============================================================ */
.video-wrapper {
    position: relative;
    background: #000;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.video-player {
    width: 100%;
    display: block;
    background: #000;
}

.video-overlay {
    position: absolute;
    inset: 0;
    /* layer order top->bottom: grid, grid, glow, slate base scrim
       (the ~92% scrim covers the poster's baked-in branding so the
       overlay's own title/subtitle read cleanly) */
    background:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 46px 46px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 46px 46px,
        radial-gradient(130% 100% at 50% 38%, rgba(94, 160, 255, 0.14), rgba(0, 0, 0, 0) 62%),
        linear-gradient(135deg, rgba(40, 56, 74, 0.96) 0%, rgba(52, 73, 94, 0.96) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.video-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.play-button {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-overlay:hover .play-button,
.video-overlay:focus-visible .play-button {
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.video-overlay:focus-visible {
    outline: 3px solid #7fb3d5;
    outline-offset: -3px;
}

.play-icon {
    width: 0;
    height: 0;
    border-left: 25px solid #2c3e50;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    margin-left: 5px;
}

.video-title {
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 10px;
    text-align: center;
    padding: 0 20px;
}

.video-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    margin: 0;
    text-align: center;
    padding: 0 20px;
}

.video-duration {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

/* Error fallback sits outside the wrapper on the white section
   background, so dark text (not the inline white) keeps it legible. */
#video-error {
    text-align: center;
    padding: 20px;
    color: #555;
}

#video-error a {
    color: #2c3e50;
    font-weight: 600;
}

@media (max-width: 768px) {
    .video-wrapper {
        border-radius: 14px;
    }

    .play-button {
        width: 64px;
        height: 64px;
        margin-bottom: 16px;
    }

    .play-icon {
        border-left: 20px solid #2c3e50;
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        margin-left: 4px;
    }

    .video-title {
        font-size: 22px;
    }

    .video-subtitle {
        font-size: 14px;
    }

    .video-duration {
        bottom: 12px;
        right: 12px;
        padding: 4px 8px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .play-button {
        width: 56px;
        height: 56px;
        margin-bottom: 12px;
    }

    .play-icon {
        border-left: 17px solid #2c3e50;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
    }

    .video-title {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .video-subtitle {
        font-size: 12.5px;
    }
}

/* Honour reduced-motion: no scale/opacity animation */
@media (prefers-reduced-motion: reduce) {
    .video-overlay,
    .play-button {
        transition: none;
    }

    .video-overlay:hover .play-button,
    .video-overlay:focus-visible .play-button {
        transform: none;
    }
}