/**
 * UX2 readability — so text holds up on corporate Windows laptops and meeting-room projectors (HR demos).
 *
 * 1. Greys: Metronic's text greys are below the 4.5:1 minimum for small text on white — text-muted / gray-500
 *    2.4:1 (≈1,000 uses), gray-600 3.8:1 (372), gray-400 2.0:1 (233). Same hierarchy, readable values.
 * 2. Smallest sizes: fs-8 was 11.1px and fs-9 9.8px (13px base). Floors of 12px / 11px.
 * 3. UX2 tables: body text dark ink at 14px (pages set tbody text-gray-600).
 * 4. SkoAI reading area (#curriculumAIResults — curriculum and PDF agent answers): reading size, line height,
 *    line length, brand headings, tables, code.
 */

/* ============================================
   1. GREYS (contrast on white)
   ============================================ */
.text-muted,
.text-gray-500,
.text-gray-400 {
    color: #6b6f85 !important; /* 5.0:1 — was #a1a5b7 2.4:1 / #b5b5c3 2.0:1 */
}

.text-gray-600 {
    color: #5e6278 !important; /* 6.0:1 — was #7e8299 3.8:1 */
}

.text-gray-700 {
    color: #4b4f63 !important; /* 8.0:1 — kept a step darker than gray-600 */
}

/* UX2 components' own muted text */
.ux2-dt,
.ux2-card {
    --ux2-muted: #6b6f85;
}

/* ============================================
   2. SMALLEST SIZES
   ============================================ */
.fs-8 {
    font-size: 12px !important; /* was 11.1px */
}

.fs-9 {
    font-size: 11px !important; /* was 9.8px */
}

/* ============================================
   3. UX2 TABLES
   ============================================ */
.ux2-dt table.dataTable > tbody,
.ux2-dt table.dataTable > tbody.text-gray-600 {
    color: #3f4254 !important; /* 9.9:1 */
}

.ux2-dt table.dataTable > tbody > tr > td {
    font-size: 14px;
}

.ux2-dt table.dataTable > thead > tr > th {
    color: #6b6f85 !important;
}

/* ============================================
   4. SKOAI READING AREA
   ============================================ */
#curriculumAIResults #curriculumContent {
    max-width: 72ch; /* comfortable line length for long answers */
    font-size: 15px;
    line-height: 1.7;
    color: #3f4254;
}

#curriculumAIResults #curriculumContent p,
#curriculumAIResults #curriculumContent li {
    font-size: 15px;
    line-height: 1.7;
}

#curriculumAIResults #curriculumContent p {
    margin-bottom: 0.9em;
}

#curriculumAIResults #curriculumContent .skoai-h2,
#curriculumAIResults #curriculumContent h2 {
    margin-top: 2em;
    padding-bottom: 0.4em;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sko-primary, #1e5f69) !important; /* the page set Metronic blue */
    border-bottom: 1px solid #eff2f5;
}

#curriculumAIResults #curriculumContent .skoai-h3,
#curriculumAIResults #curriculumContent h3 {
    margin-top: 1.6em;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: #181c32;
}

#curriculumAIResults #curriculumContent .skoai-h4,
#curriculumAIResults #curriculumContent h4 {
    margin-top: 1.2em;
    font-size: 15px;
    font-weight: 600;
    color: #181c32;
}

#curriculumAIResults #curriculumContent > :first-child {
    margin-top: 0;
}

#curriculumAIResults #curriculumContent strong {
    font-weight: 600;
    color: #181c32;
}

#curriculumAIResults #curriculumContent li {
    margin-bottom: 0.35em;
}

#curriculumAIResults #curriculumContent table {
    width: 100%;
    margin: 1.2em 0;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    border-collapse: collapse;
}

#curriculumAIResults #curriculumContent th,
#curriculumAIResults #curriculumContent td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #eff2f5;
}

#curriculumAIResults #curriculumContent th {
    font-weight: 600;
    color: #181c32;
    background: #f7f8fa;
}

#curriculumAIResults #curriculumContent code {
    padding: 1px 5px;
    color: #3f4254; /* Metronic's pink reads like an error */
    font-family: var(--ux2-font-mono, ui-monospace, monospace);
    font-size: 0.9em;
    background: #f3f4f7;
    border-radius: 4px;
}

#curriculumAIResults #curriculumContent pre {
    padding: 14px 16px;
    overflow-x: auto;
    background: #f7f8fa;
    border-radius: 8px;
}

#curriculumAIResults #curriculumContent pre code {
    padding: 0;
    background: none;
}

/* Links inside running text (a sentence, a text list) are underlined, so they don't rely on colour alone (WCAG 1.4.1).
   Not tabs, navs, menus, breadcrumbs, pagination, dropdowns, buttons, or a link that is a whole table cell. */
:is(p, blockquote, .ux2-hint) > a:not(.btn):not(.ux2-btn):not(.hj-btn):not(.menu-link):not(.ux2-link):not(.nav-link):not(.dropdown-item):not(.page-link):not([role]),
:is(ul, ol):not(.nav):not(.menu):not(.pagination):not(.breadcrumb):not(.dropdown-menu):not(.list-unstyled):not([role]) > li:not(.nav-item):not(.menu-item):not(.page-item):not(.breadcrumb-item) > a:not(.btn):not(.ux2-btn):not(.hj-btn):not(.menu-link):not(.ux2-link):not(.nav-link):not(.dropdown-item):not(.page-link):not([role]) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

#curriculumAIResults #curriculumContent blockquote {
    margin: 1.2em 0;
    padding: 2px 0 2px 14px;
    color: #5e6278;
    border-left: 3px solid var(--sko-primary-light, #d4e0e2);
}