.dochub {/* --- WebKit Fixes & General Reset --- */
html, body {
    overflow-x: hidden; /* Prevents the whole page from sliding horizontally on iOS */
    width: 100%; 
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%; /* Stops iOS from arbitrarily enlarging text */
}

*, *:before, *:after {
    box-sizing: inherit; /* Ensures padding never breaks 100% widths */
}

body {
    font-family: "aileron", Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: #f5f7fa; 
    margin: 0;
    padding: 20px;
    color: #292929;
    line-height: 1.6;
}

/* Container for the Cards */
#da4117ab-1d94-405e-bdd0-af806dc5e1c7, 
.section.common-section {
    max-width: 950px; /*changed from 800px */
    width: 100%;
    margin: 0 auto 15px auto; 
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

/* --- Typography Hierarchy --- */

/* Main Title Card (h1) */
h1, .field.heading {
    margin: 0;
    font-size: 24px;
    color: #11316E;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Synonym / Subtitle Card (h2) */
h2 {
    margin: 0;
    font-size: 18px;
    color: #4a4a4a;
    font-weight: 700;
}

/* Labels and Emphasis */
em[data-indesign-style], 
.field-heading,
strong {
    display: inline-block;
    text-transform: uppercase;
    font-size: 16px;
    color: #11316E;
    font-weight: bold;
    letter-spacing: 0.5px;
    font-style: normal;
    margin-bottom: 5px;
    margin-right: 5px;
}

/* --- Table Styling (Laboratory Data) --- */

/* Wrapper added via JS to hold the absolute arrows */
.table-scroll-wrapper {
    position: relative;
    width: 100%;
    margin-top: 10px;
}

/* Scrolling wrapper specifically locked down for WebKit */
.field.refRange-table-small,
.field.refRange-table-medium,
.field.refrange-table-large,
.field.matusage-table-small,
.field.matusage-table-medium,
.field.matusage-table-large,
.field.refrange-table-medium,
.field.refrange-table,
.field.matusage-table,
.field.table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Crucial for smooth native scrolling on iOS */
    width: 100%;
    max-width: 100%; /* Forces WebKit to respect parent card boundaries */
    display: block; 
    /* Scrollbar styling for WebKit to keep it clean */
    scrollbar-width: thin; 
}

/* Hide scrollbar visually but keep functionality for cleaner UI with arrows */
.field.refRange-table-small::-webkit-scrollbar,
.field.refRange-table-medium::-webkit-scrollbar,
.field.refrange-table-large::-webkit-scrollbar,
.field.matusage-table-small::-webkit-scrollbar,
.field.matusage-table-medium::-webkit-scrollbar,
.field.matusage-table-large::-webkit-scrollbar,
.field.refrange-table-medium::-webkit-scrollbar,
.field.matusage-table::-webkit-scrollbar,
.field.refrange-table::-webkit-scrollbar,
.field.table::-webkit-scrollbar {
    height: 6px;
}
.field.table::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 10px;
}

table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    white-space: nowrap; 
}

/* Header rows within tables */
.headerRowClass td {
    padding-bottom: 10px;
}

/* Table Cells */
td {
    padding: 8px 4px;
    border-bottom: 1px solid #f0f0f0;
}

.quantitativeLowestValue, 
.quantitativeHighestValue {
    font-weight: bold;
    color: #11316E;
}

/* --- Specific Field Adjustments --- */

/* Methodology section */
.field.methodology p {
    white-space: pre-line; 
}

.field.methodology em {
    font-style: italic;
    text-transform: none;
    color: inherit;
    font-size: inherit;
}

/* Save Date */
.field.save-date {
    font-size: 12px;
    color: #7f8c8d;
}

/* --- Dynamic Scroll Arrows --- */
.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background-color: rgba(17, 49, 110, 0.9);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, background-color 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    font-size: 12px;
    user-select: none;
}

.scroll-arrow:hover {
    background-color: #11316E;
}

.scroll-arrow.visible {
    opacity: 1;
    pointer-events: auto;
}

.arrow-left {
    left: -10px; 
}

.arrow-right {
    right: -10px;
}

/* --- Mobile Responsiveness --- */
@media screen and (max-width: 600px) {
    body {
        padding: 10px;
    }

    .section.common-section {
        padding: 15px;
        margin-bottom: 10px;
    }

    h1 {
        font-size: 20px;
    }

    table {
        font-size: 16px; 
    }
    
    /* Bring arrows inside slightly so they aren't cut off on narrow screens */
    .arrow-left { left: 0px; }
    .arrow-right { right: 0px; }
}}