/* ============================================
   PEMBROKE SCHOOL REPORT STYLING
   Complete Report CSS
   ============================================ */

/* ============================================
   GLOBAL STYLES - ALL TEXT BLUE AND ARIAL
   ============================================ */

.summative-report *,
.summative-report .summative-content *,
.summative-report .summative-content h1,
.summative-report .summative-content h2,
.summative-report .summative-content h3,
.summative-report .summative-content h4,
.summative-report .summative-content h5,
.summative-report .summative-content h6,
.summative-report .summative-content p,
.summative-report .introduction strong,
.summative-report .introduction p,
.summative-report .introduction td {
    color: #00338D !important;
    font-family: Arial, sans-serif !important;
}

/* ============================================
   FIRST PAGE - COVER PAGE STYLING
   ============================================ */

/* Header content - Full page background container */
.summative-report .header-content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;

    /* Screen view – fill the viewport */
    min-height: 100vh;
}

/* Left container */
.summative-report .header-content .left {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Logo as full-page background - this will be your uploaded PNG */
.summative-report .header-content .logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 800px;
    max-width: none;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: top left;
    z-index: 0;
}

/* Report Title (h1) - "Semester One" - Arial Regular 22pt */
.summative-report .header-content h1 {
    font-size: 22pt;
    font-weight: 400;
    font-family: Arial, sans-serif !important;
    margin: 800px 0 0 410px;
    padding: 0;
    z-index: 2;
    text-align: left;
    line-height: 1.2;
}

/* School Name (h2) - Hidden */
.summative-report .header-content h2.school-name {
    display: none;
}

/* Student Card - Position according to design alignment */
.summative-report > .card {
    position: relative;
    display: block;
    margin: -320px 0 0 407px;
    padding: 0;
    text-align: left;
    z-index: 2;
    transform: translateY(-270px);
}

/* Page break after the student info card */
.summative-report > .card {
    page-break-after: always;
}

/* Hide student photo on cover page */
.summative-report > .card img {
    display: none;
}

/* Student Name (h3) - "Charlie Antic" - Arial Bold 33pt */
.summative-report .card h3.name {
    font-size: 33pt;
    font-weight: 700;
    font-family: Arial, sans-serif !important;
    margin: 0 0 0.3rem 0;
    line-height: 1.1;
}

/* Year Level - "Year 9" - Arial Regular 26pt */
.summative-report .card p.year {
    font-size: 26pt;
    font-weight: 400;
    font-family: Arial, sans-serif !important;
    margin: 0;
    line-height: 1.2;
}

/* ============================================
   INTRODUCTION PAGE STYLING
   ============================================ */

/* Introduction Section - Headings */
.summative-report .introduction strong {
    font-size: 1.4rem;
    font-weight: 700;
}

/* Center the headings */
.summative-report .introduction p strong {
    display: block;
    text-align: center;
}

/* Introduction Tables - Thicker outer border (3.5px), thinner inner borders (1.0px) */
.summative-report .introduction table.sb-ck-table {
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.5rem 0;
    width: 100%;
    border: 3.5px solid #00338D;
}

/* Introduction Tables - Thinner inner borders */
.summative-report .introduction table.sb-ck-table td {
    border-right: 1.0px solid #00338D;
    border-bottom: 1.0px solid #00338D;
    padding: 12px 16px;
}

/* Remove double borders on edges */
.summative-report .introduction table.sb-ck-table tr:last-child td {
    border-bottom: none;
}

.summative-report .introduction table.sb-ck-table td:last-child {
    border-right: none;
}

/* Left column - Bold, Center, Middle */
.summative-report .introduction table.sb-ck-table td:first-child {
    text-align: center;
    vertical-align: middle;
    font-weight: 700;
    width: 120px;
}

/* Right column - Left align, Middle */
.summative-report .introduction table.sb-ck-table td:last-child {
    vertical-align: middle;
    text-align: left;
}

/* Remove default padding from nested divs */
.summative-report .introduction table.sb-ck-table td div {
    padding: 0;
    margin: 0;
}

/* Style paragraphs inside table cells */
.summative-report .introduction table.sb-ck-table td p {
    margin: 0;
    line-height: 1.5;
}

/* ============================================
   SUBJECT PAGES STYLING - FIXED PAGE BREAKS
   ============================================ */

/* FIXED: Pastoral page (position 1) on its own, then academic subjects pair (2+3, 4+5, 6+7) */

/* First subject page (pastoral/home group) - always on its own page */
.summative-report .class-page:first-of-type {
    page-break-before: always !important;
}

/* Academic subjects - positions 4, 6, 8, 10... start new pages */
/* This is every EVEN position EXCEPT position 2 */
.summative-report .class-page:nth-of-type(even):not(:nth-of-type(2)) {
    page-break-before: always !important;
}

/* Ensure position 2 and other odd positions (3, 5, 7, 9) DON'T get page breaks */
.summative-report .class-page:nth-of-type(2),
.summative-report .class-page:nth-of-type(odd):not(:first-of-type) {
    page-break-before: avoid !important;
}

/* Class Page Background - Pembroke Blue (#00338D) with white text */
.summative-report .class-page {
    background: #00338D !important;
    border: none;
    border-radius: 10px 10px 0px 0px;
    padding: 1rem 1.5rem !important;
}

/* All text inside class-page boxes should be WHITE */
.summative-report .class-page *,
.summative-report .class-page h3,
.summative-report .class-page h4,
.summative-report .class-page h5,
.summative-report .class-page p {
    color: white !important;
}


/* Left side container - just the heading */
.summative-report .folder-title.class-page > .left {
    flex-grow: 0;
    flex-shrink: 0;
}

/* Class Heading */
.summative-report .class-page h3,
.summative-report .class-page h4 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

/* Teacher cards - inline */
.summative-report .class-page .card.compact {
    display: inline;
    margin: 0;
}

/* Teacher names - inline */
.summative-report .class-page .card.compact h4,
.summative-report .class-page .card.compact h5 {
    display: inline;
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
}

/* Add "and" between teachers */
.summative-report .class-page .card.compact:not(:last-of-type) h5::after,
.summative-report .class-page .card.compact:not(:last-of-type) h4::after {
    content: ' and ';
    font-weight: 400;
}

/* Hide Staff Photos */
.summative-report .class-page .card.compact img {
    display: none;
}

/* Hide Work Type */
.summative-report .summative-content .worktype {
    display: none;
}

/* Feedback Assessment Headings */
.summative-report .summative-content .feedback-assessment h4,
.summative-report .summative-content .feedback-assessment h5 {
    font-size: 1.15rem;
    font-weight: 700;
}

/* For Semester Grade specifically - make it inline */
.summative-report .feedback-assessment-container:has(h5:contains("Semester Grade")),
.summative-report .feedback-assessment:has(h5:contains("Semester Grade")) {
    display: block !important;
}

.summative-report .feedback-assessment:has(h5:contains("Semester Grade")) .left,
.summative-report .feedback-assessment:has(h5:contains("Semester Grade")) h5 {
    display: inline !important;
}

/* Change Semester Grade heading to include colon */
.summative-report .feedback-assessment:has(h5:contains("Semester Grade")) h5::after {
    content: ': ';
}

/* Make grade inline and normal size for Semester Grade */
.summative-report .feedback-assessment:has(h5:contains("Semester Grade")) .grade {
    display: inline !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Letter Grade - Blue and Larger (for other grades, not Semester Grade) */
.summative-report .grade {
    font-size: 2rem;
    font-weight: 700;
    color: #00338D !important;
}

/* ============================================
   HIDE DENOMINATORS (e.g., 3 / 190 becomes just 3)
   ============================================ */

/* Hide denominators by limiting width for all score-based grades */
.summative-report .feedback-assessment-container .grade {
    max-width: 4rem;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

/* Extra specific for Days Absent - even smaller */
.summative-report .feedback-assessment-container:has(h5:contains("Absent")) .grade {
    max-width: 3rem !important;
}

/* ============================================
   RUBRIC STYLING - APPROACHES TO LEARNING
   ============================================ */

/* Prevent page breaks inside rubrics */
.summative-report .rubric-wrap,
.summative-report .feedback-assessment-container {
    page-break-inside: avoid;
    break-inside: avoid;
}

/* Rubric Table - Collapsed borders with outer border 1.5px */
.summative-report .rb {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    border: 1.5px solid #00338D;
}

/* All rubric cells - Blue borders (1.0px inside) */
.summative-report .rb th,
.summative-report .rb td {
    border: 1.0px solid #00338D;
    padding: 10px 12px;
    color: #00338D !important;
}

/* CRITICAL: Hide the first header cell with colspan="2" completely */
.summative-report .rb thead tr th[colspan="2"] {
    display: none !important;
}

/* Create a visual row header column - white background */
.summative-report .rb thead tr::before {
    content: '';
    display: table-cell;
    width: 150px;
    border: 1.0px solid #00338D;
    background: white;
}

/* Rubric Header Row - Achievement Levels (Outstanding, Very Good, Good, Satisfactory, Needs Improvement) */
.summative-report .rb thead th {
    background: white;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    font-size: 0.95rem;
    padding: 12px 8px;
    border: 1.0px solid #00338D;
}

.summative-report .rb thead th p {
    font-weight: 700;
    text-align: center;
    margin: 0;
    line-height: 1.2;
}

/* First Column - Row Headers - white background with blue text */
.summative-report .rb tbody th:first-child {
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    background: white;
    width: 150px;
    padding: 12px 10px;
    font-size: 0.9rem;
    line-height: 1.3;
    word-wrap: break-word;
    border: 1.0px solid #00338D;
}

.summative-report .rb tbody th:first-child p {
    font-weight: 700;
    text-align: center;
    margin: 0;
    line-height: 1.3;
}

/* CRITICAL: Hide the criterion description column (2nd TH in each tbody row) */
.summative-report .rb tbody tr th.rb-criterion-name,
.summative-report .rb tbody tr th:nth-child(2) {
    display: none !important;
}

/* Alternative backup to ensure criterion column is hidden */
.summative-report .rb th.rb-criterion-name {
    display: none !important;
}

/* Hide descriptor text and values in data cells */
.summative-report .rb td .rb-description,
.summative-report .rb td .rb-value,
.summative-report .rb td .hide-for-large-up,
.summative-report .rb td .hide-on-print {
    display: none !important;
}

/* Hide all div content inside td cells */
.summative-report .rb td div,
.summative-report .rb td div * {
    display: none !important;
}

/* Empty white cells - proper sizing */
.summative-report .rb td {
    background: white !important;
    vertical-align: middle;
    text-align: center;
    height: 60px;
    width: auto;
}

/* Selected Cell - Light Blue background ONLY */
.summative-report .rb-selected,
.summative-report .rb td.rb-selected {
    background-color: #aac4e7 !important;
    border: 1.0px solid #00338D !important;
}

/* Remove any existing content from selected cells */
.summative-report .rb-selected *,
.summative-report .rb-selected div,
.summative-report .rb-selected span {
    display: none !important;
}

/* Professional Blue Check Mark - smaller and cleaner */
.summative-report .rb-selected::after,
.summative-report .rb td.rb-selected::after {
    content: '✔';
    font-size: 1.5rem;
    font-weight: 600;
    display: block !important;
    text-align: center;
    line-height: 1;
    color: #00338D;
    margin: 0;
    padding: 0;
}

/* Ensure rubrics display properly */
.summative-report .summative-content table.rb.markable {
    display: table;
    width: 100%;
}

/* Force equal column width for achievement level columns */
.summative-report .rb thead th:not(:first-child) {
    width: calc((100% - 150px) / 5);
}

.summative-report .rb tbody td {
    width: calc((100% - 150px) / 5);
}

/* ============================================
   SPACING OPTIMIZATION - FIT 2 SUBJECTS PER PAGE
   ============================================ */

/* Reduce spacing between subjects */
.summative-report .class-page:not(:first-of-type) {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Compact feedback assessments */
.summative-report .feedback-assessment-container {
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: none !important;
}

/* Remove any borders/lines under Semester Grade */
.summative-report .summative-content .feedback-assessment-container {
    border: none !important;
}

/* Remove gap between Semester Grade and Approaches to Learning */
.summative-report .feedback-assessment-container:has(h5:contains("Semester Grade")) {
    margin-bottom: 0 !important;
}

.summative-report .rubric-wrap {
    margin-top: 0.25rem !important;
}

/* Reduce course overview/description spacing */
.summative-report .course-overview-textbox {
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

/* Hide original course description text */
.summative-report .course-overview-textbox p,
.summative-report .course-overview-textbox article p {
    display: none;
}

/* Add Lorem ipsum placeholder text (approximately 400 characters) */
.summative-report .course-overview-textbox::before,
.summative-report .course-overview-textbox article::before {
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
    display: block;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.summative-report .course-overview-textbox p {
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

/* Compact paragraphs inside subject pages */
.summative-report .summative-content p {
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

/* Reduce rubric table height - smaller cells */
.summative-report .rb td {
    height: 45px !important;
    min-height: 45px;
    padding: 6px 8px;
}

.summative-report .rb th {
    padding: 8px 10px;
}

/* Compact rubric wrapper */
.summative-report .rubric-wrap {
    margin-top: 0.5rem;
    margin-bottom: 4rem;
}

/* Compact grade display */
.summative-report .grade {
    margin-bottom: 0.25rem;
}

/* Reduce space after "Semester Grade" heading */
.summative-report .summative-content h4,
.summative-report .summative-content h5 {
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

/* Compact "Approaches to Learning" heading */
.summative-report .summative-content h4:contains("Approaches to Learning") {
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

/* Reduce overall content padding if present */
.summative-report .summative-content {
    padding: 1.5rem 0;
}

/* ============================================
   PRINT OPTIMISATION
   ============================================ */

@media print {
    /* A4 with normal margins on every page */
    @page {
        size: A4 portrait;
        margin: 0.5in 0.5in 0.75in 0.5in;
    }

    /* Kill any default browser margins */
    html,
    body {
        margin: 0;
        padding: 0;
    }

    .summative-report {
        font-size: 11pt;
    }

    /* No extra padding on the inner content when printing */
    .summative-report .summative-content {
        padding: 0;
        box-sizing: border-box;
    }

    /* FIXED PAGE BREAKS FOR PRINT */

    /* Reset all default page breaks */
    .summative-report .class-page {
        page-break-before: avoid !important;
    }

    /* First pastoral/home group on own page */
    .summative-report .class-page:first-of-type {
        page-break-before: always !important;
    }

    /* Academic subjects - positions 4, 6, 8, 10... start new pages */
    .summative-report .class-page:nth-of-type(even):not(:nth-of-type(2)) {
        page-break-before: always !important;
    }

    /* Ensure positions 2, 3, 5, 7, 9... do not get page breaks */
    .summative-report .class-page:nth-of-type(2),
    .summative-report .class-page:nth-of-type(odd):not(:first-of-type) {
        page-break-before: avoid !important;
    }
}


Increase the font size of everything, just slightly. Make sure font of pastoral care page is the same size as academic pages

Thought for 4 seconds
Here’s a clean way to bump everything up slightly, while also guaranteeing the pastoral care subject box uses the same sizing rules as the academic ones.

Add this block near the top of your CSS (after your GLOBAL STYLES section is fine) so it overrides earlier defaults but is still overridden by anything you explicitly set later.

/* ============================================
   GLOBAL FONT SIZE LIFT (SLIGHT)
   Also ensures Pastoral + Academic subject pages match
   ============================================ */

/* Slight overall lift for the whole report */
.summative-report {
    font-size: 1.06em; /* small bump, adjust to 1.05–1.10 if needed */
}

/* Keep body text consistent (including intro + subject pages) */
.summative-report .summative-content,
.summative-report .summative-content p,
.summative-report .introduction,
.summative-report .introduction p,
.summative-report .introduction td {
    font-size: 1em; /* inherits the lifted base */
}

/* Ensure ALL class-page boxes, including the first (pastoral) page, match */
.summative-report .class-page,
.summative-report .class-page * {
    font-size: 1em; /* prevents the pastoral page drifting smaller/larger */
}

/* Nudge common headings slightly so the lift feels consistent */
.summative-report .summative-content h4,
.summative-report .summative-content h5 {
    font-size: 1.08em; /* small lift */
}

/* Teacher names stay readable after lift */
.summative-report .class-page .card.compact h4,
.summative-report .class-page .card.compact h5 {
    font-size: 1em;
}
If you want an even more subtle change, drop 1.06em to 1.04em. If you want it a touch more noticeable, go 1.08em.

Why this fixes the pastoral mismatch: by explicitly setting font-size: 1em on .class-page, .class-page *, you remove any chance the first subject box inherits a different scaling from surrounding containers or special-case markup differences.


give me full code for quick copy paste

/* ============================================
   PEMBROKE SCHOOL REPORT STYLING
   Complete Report CSS
   ============================================ */

/* ============================================
   GLOBAL STYLES - ALL TEXT BLUE AND ARIAL
   ============================================ */

.summative-report * ,
.summative-report .summative-content * ,
.summative-report .summative-content h1 ,
.summative-report .summative-content h2 ,
.summative-report .summative-content h3 ,
.summative-report .summative-content h4 ,
.summative-report .summative-content h5 ,
.summative-report .summative-content h6 ,
.summative-report .summative-content p ,
.summative-report .introduction strong ,
.summative-report .introduction p ,
.summative-report .introduction td {
    color: #00338D !important;
    font-family: Arial, sans-serif !important;
}

/* ============================================
   GLOBAL FONT SIZE LIFT (SLIGHT)
   Also ensures Pastoral + Academic subject pages match
   ============================================ */

.summative-report {
    font-size: 1.06em; /* small bump, tweak to 1.04–1.10 if needed */
}

.summative-report .summative-content,
.summative-report .summative-content p,
.summative-report .introduction,
.summative-report .introduction p,
.summative-report .introduction td {
    font-size: 1em; /* inherit lifted base */
}

/* Ensure ALL class-page boxes, including the first (pastoral) page, match */
.summative-report .class-page,
.summative-report .class-page * {
    font-size: 1em;
}

/* Nudge common headings slightly so the lift feels consistent */
.summative-report .summative-content h4,
.summative-report .summative-content h5 {
    font-size: 1.08em;
}

/* Teacher names stay readable after lift */
.summative-report .class-page .card.compact h4,
.summative-report .class-page .card.compact h5 {
    font-size: 1em;
}

/* ============================================
   FIRST PAGE - COVER PAGE STYLING
   ============================================ */

/* Header content - Full page background container */
.summative-report .header-content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;

    /* Screen view – fill the viewport */
    min-height: 100vh;
}

/* Left container */
.summative-report .header-content .left {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Logo as full-page background - this will be your uploaded PNG */
.summative-report .header-content .logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 800px;
    max-width: none;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: top left;
    z-index: 0;
}

/* Report Title (h1) - "Semester One" - Arial Regular 22pt */
.summative-report .header-content h1 {
    font-size: 22pt;
    font-weight: 400;
    font-family: Arial, sans-serif !important;
    margin: 800px 0 0 410px;
    padding: 0;
    z-index: 2;
    text-align: left;
    line-height: 1.2;
}

/* School Name (h2) - Hidden */
.summative-report .header-content h2.school-name {
    display: none;
}

/* Student Card - Position according to design alignment */
.summative-report > .card {
    position: relative;
    display: block;
    margin: -320px 0 0 407px;
    padding: 0;
    text-align: left;
    z-index: 2;
    transform: translateY(-270px);
}

/* Page break after the student info card */
.summative-report > .card {
    page-break-after: always;
}

/* Hide student photo on cover page */
.summative-report > .card img {
    display: none;
}

/* Student Name (h3) - "Charlie Antic" - Arial Bold 33pt */
.summative-report .card h3.name {
    font-size: 33pt;
    font-weight: 700;
    font-family: Arial, sans-serif !important;
    margin: 0 0 0.3rem 0;
    line-height: 1.1;
}

/* Year Level - "Year 9" - Arial Regular 26pt */
.summative-report .card p.year {
    font-size: 26pt;
    font-weight: 400;
    font-family: Arial, sans-serif !important;
    margin: 0;
    line-height: 1.2;
}

/* ============================================
   INTRODUCTION PAGE STYLING
   ============================================ */

/* Introduction Section - Headings */
.summative-report .introduction strong {
    font-size: 1.4rem;
    font-weight: 700;
}

/* Center the headings */
.summative-report .introduction p strong {
    display: block;
    text-align: center;
}

/* Introduction Tables - Thicker outer border (3.5px), thinner inner borders (1.0px) */
.summative-report .introduction table.sb-ck-table {
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.5rem 0;
    width: 100%;
    border: 3.5px solid #00338D;
}

/* Introduction Tables - Thinner inner borders */
.summative-report .introduction table.sb-ck-table td {
    border-right: 1.0px solid #00338D;
    border-bottom: 1.0px solid #00338D;
    padding: 12px 16px;
}

/* Remove double borders on edges */
.summative-report .introduction table.sb-ck-table tr:last-child td {
    border-bottom: none;
}

.summative-report .introduction table.sb-ck-table td:last-child {
    border-right: none;
}

/* Left column - Bold, Center, Middle */
.summative-report .introduction table.sb-ck-table td:first-child {
    text-align: center;
    vertical-align: middle;
    font-weight: 700;
    width: 120px;
}

/* Right column - Left align, Middle */
.summative-report .introduction table.sb-ck-table td:last-child {
    vertical-align: middle;
    text-align: left;
}

/* Remove default padding from nested divs */
.summative-report .introduction table.sb-ck-table td div {
    padding: 0;
    margin: 0;
}

/* Style paragraphs inside table cells */
.summative-report .introduction table.sb-ck-table td p {
    margin: 0;
    line-height: 1.5;
}

/* ============================================
   SUBJECT PAGES STYLING - FIXED PAGE BREAKS
   ============================================ */

/* FIXED: Pastoral page (position 1) on its own, then academic subjects pair (2+3, 4+5, 6+7) */

/* First subject page (pastoral/home group) - always on its own page */
.summative-report .class-page:first-of-type {
    page-break-before: always !important;
}

/* Academic subjects - positions 4, 6, 8, 10... start new pages */
/* This is every EVEN position EXCEPT position 2 */
.summative-report .class-page:nth-of-type(even):not(:nth-of-type(2)) {
    page-break-before: always !important;
}

/* Ensure position 2 and other odd positions (3, 5, 7, 9) DON'T get page breaks */
.summative-report .class-page:nth-of-type(2),
.summative-report .class-page:nth-of-type(odd):not(:first-of-type) {
    page-break-before: avoid !important;
}

/* Class Page Background - Pembroke Blue (#00338D) with white text */
.summative-report .class-page {
    background: #00338D !important;
    border: none;
    border-radius: 10px 10px 0px 0px;
    padding: 1rem 1.5rem !important;
}

/* All text inside class-page boxes should be WHITE */
.summative-report .class-page * ,
.summative-report .class-page h3 ,
.summative-report .class-page h4 ,
.summative-report .class-page h5 ,
.summative-report .class-page p {
    color: white !important;
}

/* Left side container - just the heading */
.summative-report .folder-title.class-page > .left {
    flex-grow: 0;
    flex-shrink: 0;
}

/* Class Heading */
.summative-report .class-page h3,
.summative-report .class-page h4 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

/* Teacher cards - inline */
.summative-report .class-page .card.compact {
    display: inline;
    margin: 0;
}

/* Teacher names - inline */
.summative-report .class-page .card.compact h4,
.summative-report .class-page .card.compact h5 {
    display: inline;
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
}

/* Add "and" between teachers */
.summative-report .class-page .card.compact:not(:last-of-type) h5::after,
.summative-report .class-page .card.compact:not(:last-of-type) h4::after {
    content: ' and ';
    font-weight: 400;
}

/* Hide Staff Photos */
.summative-report .class-page .card.compact img {
    display: none;
}

/* Hide Work Type */
.summative-report .summative-content .worktype {
    display: none;
}

/* Feedback Assessment Headings */
.summative-report .summative-content .feedback-assessment h4,
.summative-report .summative-content .feedback-assessment h5 {
    font-size: 1.15rem;
    font-weight: 700;
}

/* For Semester Grade specifically - make it inline */
.summative-report .feedback-assessment-container:has(h5:contains("Semester Grade")),
.summative-report .feedback-assessment:has(h5:contains("Semester Grade")) {
    display: block !important;
}

.summative-report .feedback-assessment:has(h5:contains("Semester Grade")) .left,
.summative-report .feedback-assessment:has(h5:contains("Semester Grade")) h5 {
    display: inline !important;
}

/* Change Semester Grade heading to include colon */
.summative-report .feedback-assessment:has(h5:contains("Semester Grade")) h5::after {
    content: ': ';
}

/* Make grade inline and normal size for Semester Grade */
.summative-report .feedback-assessment:has(h5:contains("Semester Grade")) .grade {
    display: inline !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Letter Grade - Blue and Larger (for other grades, not Semester Grade) */
.summative-report .grade {
    font-size: 2rem;
    font-weight: 700;
    color: #00338D !important;
}

/* ============================================
   HIDE DENOMINATORS (e.g., 3 / 190 becomes just 3)
   ============================================ */

/* Hide denominators by limiting width for all score-based grades */
.summative-report .feedback-assessment-container .grade {
    max-width: 4rem;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

/* Extra specific for Days Absent - even smaller */
.summative-report .feedback-assessment-container:has(h5:contains("Absent")) .grade {
    max-width: 3rem !important;
}

/* ============================================
   RUBRIC STYLING - APPROACHES TO LEARNING
   ============================================ */

/* Prevent page breaks inside rubrics */
.summative-report .rubric-wrap,
.summative-report .feedback-assessment-container {
    page-break-inside: avoid;
    break-inside: avoid;
}

/* Rubric Table - Collapsed borders with outer border 1.5px */
.summative-report .rb {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    border: 1.5px solid #00338D;
}

/* All rubric cells - Blue borders (1.0px inside) */
.summative-report .rb th,
.summative-report .rb td {
    border: 1.0px solid #00338D;
    padding: 10px 12px;
    color: #00338D !important;
}

/* CRITICAL: Hide the first header cell with colspan="2" completely */
.summative-report .rb thead tr th[colspan="2"] {
    display: none !important;
}

/* Create a visual row header column - white background */
.summative-report .rb thead tr::before {
    content: '';
    display: table-cell;
    width: 150px;
    border: 1.0px solid #00338D;
    background: white;
}

/* Rubric Header Row - Achievement Levels (Outstanding, Very Good, Good, Satisfactory, Needs Improvement) */
.summative-report .rb thead th {
    background: white;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    font-size: 0.95rem;
    padding: 12px 8px;
    border: 1.0px solid #00338D;
}

.summative-report .rb thead th p {
    font-weight: 700;
    text-align: center;
    margin: 0;
    line-height: 1.2;
}

/* First Column - Row Headers - white background with blue text */
.summative-report .rb tbody th:first-child {
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    background: white;
    width: 150px;
    padding: 12px 10px;
    font-size: 0.9rem;
    line-height: 1.3;
    word-wrap: break-word;
    border: 1.0px solid #00338D;
}

.summative-report .rb tbody th:first-child p {
    font-weight: 700;
    text-align: center;
    margin: 0;
    line-height: 1.3;
}

/* CRITICAL: Hide the criterion description column (2nd TH in each tbody row) */
.summative-report .rb tbody tr th.rb-criterion-name,
.summative-report .rb tbody tr th:nth-child(2) {
    display: none !important;
}

/* Alternative backup to ensure criterion column is hidden */
.summative-report .rb th.rb-criterion-name {
    display: none !important;
}

/* Hide descriptor text and values in data cells */
.summative-report .rb td .rb-description,
.summative-report .rb td .rb-value,
.summative-report .rb td .hide-for-large-up,
.summative-report .rb td .hide-on-print {
    display: none !important;
}

/* Hide all div content inside td cells */
.summative-report .rb td div,
.summative-report .rb td div * {
    display: none !important;
}

/* Empty white cells - proper sizing */
.summative-report .rb td {
    background: white !important;
    vertical-align: middle;
    text-align: center;
    height: 60px;
    width: auto;
}

/* Selected Cell - Light Blue background ONLY */
.summative-report .rb-selected,
.summative-report .rb td.rb-selected {
    background-color: #aac4e7 !important;
    border: 1.0px solid #00338D !important;
}

/* Remove any existing content from selected cells */
.summative-report .rb-selected *,
.summative-report .rb-selected div,
.summative-report .rb-selected span {
    display: none !important;
}

/* Professional Blue Check Mark - smaller and cleaner */
.summative-report .rb-selected::after,
.summative-report .rb td.rb-selected::after {
    content: '✔';
    font-size: 1.5rem;
    font-weight: 600;
    display: block !important;
    text-align: center;
    line-height: 1;
    color: #00338D;
    margin: 0;
    padding: 0;
}

/* Ensure rubrics display properly */
.summative-report .summative-content table.rb.markable {
    display: table;
    width: 100%;
}

/* Force equal column width for achievement level columns */
.summative-report .rb thead th:not(:first-child) {
    width: calc((100% - 150px) / 5);
}

.summative-report .rb tbody td {
    width: calc((100% - 150px) / 5);
}

/* ============================================
   SPACING OPTIMISATION - FIT 2 SUBJECTS PER PAGE
   ============================================ */

/* Reduce spacing between subjects */
.summative-report .class-page:not(:first-of-type) {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Compact feedback assessments */
.summative-report .feedback-assessment-container {
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: none !important;
}

/* Remove any borders/lines under Semester Grade */
.summative-report .summative-content .feedback-assessment-container {
    border: none !important;
}

/* Remove gap between Semester Grade and Approaches to Learning */
.summative-report .feedback-assessment-container:has(h5:contains("Semester Grade")) {
    margin-bottom: 0 !important;
}

.summative-report .rubric-wrap {
    margin-top: 0.25rem !important;
}

/* Reduce course overview/description spacing */
.summative-report .course-overview-textbox {
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

/* Hide original course description text */
.summative-report .course-overview-textbox p,
.summative-report .course-overview-textbox article p {
    display: none;
}

/* Add Lorem ipsum placeholder text (approximately 400 characters) */
.summative-report .course-overview-textbox::before,
.summative-report .course-overview-textbox article::before {
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
    display: block;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.summative-report .course-overview-textbox p {
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

/* Compact paragraphs inside subject pages */
.summative-report .summative-content p {
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

/* Reduce rubric table height - smaller cells */
.summative-report .rb td {
    height: 45px !important;
    min-height: 45px;
    padding: 6px 8px;
}

.summative-report .rb th {
    padding: 8px 10px;
}

/* Compact rubric wrapper */
.summative-report .rubric-wrap {
    margin-top: 0.5rem;
    margin-bottom: 4rem;
}

/* Compact grade display */
.summative-report .grade {
    margin-bottom: 0.25rem;
}

/* Reduce space after headings */
.summative-report .summative-content h4,
.summative-report .summative-content h5 {
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

/* Reduce overall content padding if present */
.summative-report .summative-content {
    padding: 1.5rem 0;
}

/* ============================================
   PRINT OPTIMISATION
   ============================================ */

@media print {
    /* A4 with normal margins on every page */
    @page {
        size: A4 portrait;
        margin: 0.5in 0.5in 0.75in 0.5in;
    }

    /* Kill any default browser margins */
    html,
    body {
        margin: 0;
        padding: 0;
    }

    .summative-report {
        font-size: 1.06em; /* keep the same print bump */
    }

    /* No extra padding on the inner content when printing */
    .summative-report .summative-content {
        padding: 0;
        box-sizing: border-box;
    }

    /* Reset all default page breaks */
    .summative-report .class-page {
        page-break-before: avoid !important;
    }

    /* First pastoral/home group on own page */
    .summative-report .class-page:first-of-type {
        page-break-before: always !important;
    }

    /* Academic subjects - positions 4, 6, 8, 10... start new pages */
    .summative-report .class-page:nth-of-type(even):not(:nth-of-type(2)) {
        page-break-before: always !important;
    }

    /* Ensure positions 2, 3, 5, 7, 9... do not get page breaks */
    .summative-report .class-page:nth-of-type(2),
    .summative-report .class-page:nth-of-type(odd):not(:first-of-type) {
        page-break-before: avoid !important;
    }
}

:root {
            --navigation-foreground-r: 255;
        --navigation-foreground-g: 255;
        --navigation-foreground-b: 255;
        --navigation-foreground-h: 0;
        --navigation-foreground-s: 0%;
        --navigation-foreground-l: 100%;
        --navigation-foreground-a: 1;
        --navigation-foreground:   hsla(
            var(--navigation-foreground-h),
            var(--navigation-foreground-s),
            var(--navigation-foreground-l),
            var(--navigation-foreground-a)
        );
            --navigation-foreground-contrast-r: 0;
        --navigation-foreground-contrast-g: 0;
        --navigation-foreground-contrast-b: 0;
        --navigation-foreground-contrast-h: 0;
        --navigation-foreground-contrast-s: 0%;
        --navigation-foreground-contrast-l: 0%;
        --navigation-foreground-contrast-a: 1;
        --navigation-foreground-contrast:   hsla(
            var(--navigation-foreground-contrast-h),
            var(--navigation-foreground-contrast-s),
            var(--navigation-foreground-contrast-l),
            var(--navigation-foreground-contrast-a)
        );
            --navigation-background-r: 0;
        --navigation-background-g: 51;
        --navigation-background-b: 141;
        --navigation-background-h: 218.3;
        --navigation-background-s: 100%;
        --navigation-background-l: 27.65%;
        --navigation-background-a: 1;
        --navigation-background:   hsla(
            var(--navigation-background-h),
            var(--navigation-background-s),
            var(--navigation-background-l),
            var(--navigation-background-a)
        );
            --navigation-background-contrast-r: 255;
        --navigation-background-contrast-g: 255;
        --navigation-background-contrast-b: 255;
        --navigation-background-contrast-h: 0;
        --navigation-background-contrast-s: 0%;
        --navigation-background-contrast-l: 100%;
        --navigation-background-contrast-a: 1;
        --navigation-background-contrast:   hsla(
            var(--navigation-background-contrast-h),
            var(--navigation-background-contrast-s),
            var(--navigation-background-contrast-l),
            var(--navigation-background-contrast-a)
        );
            --navigation-hover-r: 128;
        --navigation-hover-g: 188;
        --navigation-hover-b: 232;
        --navigation-hover-h: 205.38;
        --navigation-hover-s: 69.33%;
        --navigation-hover-l: 70.59%;
        --navigation-hover-a: 1;
        --navigation-hover:   hsla(
            var(--navigation-hover-h),
            var(--navigation-hover-s),
            var(--navigation-hover-l),
            var(--navigation-hover-a)
        );
            --navigation-hover-contrast-r: 0;
        --navigation-hover-contrast-g: 0;
        --navigation-hover-contrast-b: 0;
        --navigation-hover-contrast-h: 0;
        --navigation-hover-contrast-s: 0%;
        --navigation-hover-contrast-l: 0%;
        --navigation-hover-contrast-a: 1;
        --navigation-hover-contrast:   hsla(
            var(--navigation-hover-contrast-h),
            var(--navigation-hover-contrast-s),
            var(--navigation-hover-contrast-l),
            var(--navigation-hover-contrast-a)
        );
            --off-canvas-foreground-r: 255;
        --off-canvas-foreground-g: 255;
        --off-canvas-foreground-b: 255;
        --off-canvas-foreground-h: 0;
        --off-canvas-foreground-s: 0%;
        --off-canvas-foreground-l: 100%;
        --off-canvas-foreground-a: 1;
        --off-canvas-foreground:   hsla(
            var(--off-canvas-foreground-h),
            var(--off-canvas-foreground-s),
            var(--off-canvas-foreground-l),
            var(--off-canvas-foreground-a)
        );
            --off-canvas-foreground-contrast-r: 0;
        --off-canvas-foreground-contrast-g: 0;
        --off-canvas-foreground-contrast-b: 0;
        --off-canvas-foreground-contrast-h: 0;
        --off-canvas-foreground-contrast-s: 0%;
        --off-canvas-foreground-contrast-l: 0%;
        --off-canvas-foreground-contrast-a: 1;
        --off-canvas-foreground-contrast:   hsla(
            var(--off-canvas-foreground-contrast-h),
            var(--off-canvas-foreground-contrast-s),
            var(--off-canvas-foreground-contrast-l),
            var(--off-canvas-foreground-contrast-a)
        );
            --off-canvas-background-r: 0;
        --off-canvas-background-g: 51;
        --off-canvas-background-b: 141;
        --off-canvas-background-h: 218.3;
        --off-canvas-background-s: 100%;
        --off-canvas-background-l: 27.65%;
        --off-canvas-background-a: 1;
        --off-canvas-background:   hsla(
            var(--off-canvas-background-h),
            var(--off-canvas-background-s),
            var(--off-canvas-background-l),
            var(--off-canvas-background-a)
        );
            --off-canvas-background-contrast-r: 255;
        --off-canvas-background-contrast-g: 255;
        --off-canvas-background-contrast-b: 255;
        --off-canvas-background-contrast-h: 0;
        --off-canvas-background-contrast-s: 0%;
        --off-canvas-background-contrast-l: 100%;
        --off-canvas-background-contrast-a: 1;
        --off-canvas-background-contrast:   hsla(
            var(--off-canvas-background-contrast-h),
            var(--off-canvas-background-contrast-s),
            var(--off-canvas-background-contrast-l),
            var(--off-canvas-background-contrast-a)
        );
            --off-canvas-hover-r: 128;
        --off-canvas-hover-g: 188;
        --off-canvas-hover-b: 232;
        --off-canvas-hover-h: 205.38;
        --off-canvas-hover-s: 69.33%;
        --off-canvas-hover-l: 70.59%;
        --off-canvas-hover-a: 1;
        --off-canvas-hover:   hsla(
            var(--off-canvas-hover-h),
            var(--off-canvas-hover-s),
            var(--off-canvas-hover-l),
            var(--off-canvas-hover-a)
        );
            --off-canvas-hover-contrast-r: 0;
        --off-canvas-hover-contrast-g: 0;
        --off-canvas-hover-contrast-b: 0;
        --off-canvas-hover-contrast-h: 0;
        --off-canvas-hover-contrast-s: 0%;
        --off-canvas-hover-contrast-l: 0%;
        --off-canvas-hover-contrast-a: 1;
        --off-canvas-hover-contrast:   hsla(
            var(--off-canvas-hover-contrast-h),
            var(--off-canvas-hover-contrast-s),
            var(--off-canvas-hover-contrast-l),
            var(--off-canvas-hover-contrast-a)
        );
            --accounts-menu-foreground-r: 255;
        --accounts-menu-foreground-g: 255;
        --accounts-menu-foreground-b: 255;
        --accounts-menu-foreground-h: 0;
        --accounts-menu-foreground-s: 0%;
        --accounts-menu-foreground-l: 100%;
        --accounts-menu-foreground-a: 1;
        --accounts-menu-foreground:   hsla(
            var(--accounts-menu-foreground-h),
            var(--accounts-menu-foreground-s),
            var(--accounts-menu-foreground-l),
            var(--accounts-menu-foreground-a)
        );
            --accounts-menu-foreground-contrast-r: 0;
        --accounts-menu-foreground-contrast-g: 0;
        --accounts-menu-foreground-contrast-b: 0;
        --accounts-menu-foreground-contrast-h: 0;
        --accounts-menu-foreground-contrast-s: 0%;
        --accounts-menu-foreground-contrast-l: 0%;
        --accounts-menu-foreground-contrast-a: 1;
        --accounts-menu-foreground-contrast:   hsla(
            var(--accounts-menu-foreground-contrast-h),
            var(--accounts-menu-foreground-contrast-s),
            var(--accounts-menu-foreground-contrast-l),
            var(--accounts-menu-foreground-contrast-a)
        );
            --accounts-menu-background-r: 128;
        --accounts-menu-background-g: 188;
        --accounts-menu-background-b: 232;
        --accounts-menu-background-h: 205.38;
        --accounts-menu-background-s: 69.33%;
        --accounts-menu-background-l: 70.59%;
        --accounts-menu-background-a: 1;
        --accounts-menu-background:   hsla(
            var(--accounts-menu-background-h),
            var(--accounts-menu-background-s),
            var(--accounts-menu-background-l),
            var(--accounts-menu-background-a)
        );
            --accounts-menu-background-contrast-r: 0;
        --accounts-menu-background-contrast-g: 0;
        --accounts-menu-background-contrast-b: 0;
        --accounts-menu-background-contrast-h: 0;
        --accounts-menu-background-contrast-s: 0%;
        --accounts-menu-background-contrast-l: 0%;
        --accounts-menu-background-contrast-a: 1;
        --accounts-menu-background-contrast:   hsla(
            var(--accounts-menu-background-contrast-h),
            var(--accounts-menu-background-contrast-s),
            var(--accounts-menu-background-contrast-l),
            var(--accounts-menu-background-contrast-a)
        );
            --accounts-menu-hover-r: 128;
        --accounts-menu-hover-g: 188;
        --accounts-menu-hover-b: 232;
        --accounts-menu-hover-h: 205.38;
        --accounts-menu-hover-s: 69.33%;
        --accounts-menu-hover-l: 70.59%;
        --accounts-menu-hover-a: 1;
        --accounts-menu-hover:   hsla(
            var(--accounts-menu-hover-h),
            var(--accounts-menu-hover-s),
            var(--accounts-menu-hover-l),
            var(--accounts-menu-hover-a)
        );
            --accounts-menu-hover-contrast-r: 0;
        --accounts-menu-hover-contrast-g: 0;
        --accounts-menu-hover-contrast-b: 0;
        --accounts-menu-hover-contrast-h: 0;
        --accounts-menu-hover-contrast-s: 0%;
        --accounts-menu-hover-contrast-l: 0%;
        --accounts-menu-hover-contrast-a: 1;
        --accounts-menu-hover-contrast:   hsla(
            var(--accounts-menu-hover-contrast-h),
            var(--accounts-menu-hover-contrast-s),
            var(--accounts-menu-hover-contrast-l),
            var(--accounts-menu-hover-contrast-a)
        );
            --content-ui-foreground-r: 0;
        --content-ui-foreground-g: 51;
        --content-ui-foreground-b: 141;
        --content-ui-foreground-h: 218.3;
        --content-ui-foreground-s: 100%;
        --content-ui-foreground-l: 27.65%;
        --content-ui-foreground-a: 1;
        --content-ui-foreground:   hsla(
            var(--content-ui-foreground-h),
            var(--content-ui-foreground-s),
            var(--content-ui-foreground-l),
            var(--content-ui-foreground-a)
        );
            --content-ui-foreground-contrast-r: 255;
        --content-ui-foreground-contrast-g: 255;
        --content-ui-foreground-contrast-b: 255;
        --content-ui-foreground-contrast-h: 0;
        --content-ui-foreground-contrast-s: 0%;
        --content-ui-foreground-contrast-l: 100%;
        --content-ui-foreground-contrast-a: 1;
        --content-ui-foreground-contrast:   hsla(
            var(--content-ui-foreground-contrast-h),
            var(--content-ui-foreground-contrast-s),
            var(--content-ui-foreground-contrast-l),
            var(--content-ui-foreground-contrast-a)
        );
            --content-ui-background-r: 193;
        --content-ui-background-g: 229;
        --content-ui-background-b: 255;
        --content-ui-background-h: 205.16;
        --content-ui-background-s: 100%;
        --content-ui-background-l: 87.84%;
        --content-ui-background-a: 1;
        --content-ui-background:   hsla(
            var(--content-ui-background-h),
            var(--content-ui-background-s),
            var(--content-ui-background-l),
            var(--content-ui-background-a)
        );
            --content-ui-background-contrast-r: 0;
        --content-ui-background-contrast-g: 0;
        --content-ui-background-contrast-b: 0;
        --content-ui-background-contrast-h: 0;
        --content-ui-background-contrast-s: 0%;
        --content-ui-background-contrast-l: 0%;
        --content-ui-background-contrast-a: 1;
        --content-ui-background-contrast:   hsla(
            var(--content-ui-background-contrast-h),
            var(--content-ui-background-contrast-s),
            var(--content-ui-background-contrast-l),
            var(--content-ui-background-contrast-a)
        );
            --content-ui-hover-r: 209;
        --content-ui-hover-g: 236;
        --content-ui-hover-b: 255;
        --content-ui-hover-h: 204.78;
        --content-ui-hover-s: 100%;
        --content-ui-hover-l: 90.98%;
        --content-ui-hover-a: 1;
        --content-ui-hover:   hsla(
            var(--content-ui-hover-h),
            var(--content-ui-hover-s),
            var(--content-ui-hover-l),
            var(--content-ui-hover-a)
        );
            --content-ui-hover-contrast-r: 0;
        --content-ui-hover-contrast-g: 0;
        --content-ui-hover-contrast-b: 0;
        --content-ui-hover-contrast-h: 0;
        --content-ui-hover-contrast-s: 0%;
        --content-ui-hover-contrast-l: 0%;
        --content-ui-hover-contrast-a: 1;
        --content-ui-hover-contrast:   hsla(
            var(--content-ui-hover-contrast-h),
            var(--content-ui-hover-contrast-s),
            var(--content-ui-hover-contrast-l),
            var(--content-ui-hover-contrast-a)
        );
            --content-ui-selected-r: 229;
        --content-ui-selected-g: 244;
        --content-ui-selected-b: 255;
        --content-ui-selected-h: 205.38;
        --content-ui-selected-s: 100%;
        --content-ui-selected-l: 94.9%;
        --content-ui-selected-a: 1;
        --content-ui-selected:   hsla(
            var(--content-ui-selected-h),
            var(--content-ui-selected-s),
            var(--content-ui-selected-l),
            var(--content-ui-selected-a)
        );
            --content-ui-selected-contrast-r: 0;
        --content-ui-selected-contrast-g: 0;
        --content-ui-selected-contrast-b: 0;
        --content-ui-selected-contrast-h: 0;
        --content-ui-selected-contrast-s: 0%;
        --content-ui-selected-contrast-l: 0%;
        --content-ui-selected-contrast-a: 1;
        --content-ui-selected-contrast:   hsla(
            var(--content-ui-selected-contrast-h),
            var(--content-ui-selected-contrast-s),
            var(--content-ui-selected-contrast-l),
            var(--content-ui-selected-contrast-a)
        );
            --content-ui-submit-foreground-r: 255;
        --content-ui-submit-foreground-g: 255;
        --content-ui-submit-foreground-b: 255;
        --content-ui-submit-foreground-h: 0;
        --content-ui-submit-foreground-s: 0%;
        --content-ui-submit-foreground-l: 100%;
        --content-ui-submit-foreground-a: 1;
        --content-ui-submit-foreground:   hsla(
            var(--content-ui-submit-foreground-h),
            var(--content-ui-submit-foreground-s),
            var(--content-ui-submit-foreground-l),
            var(--content-ui-submit-foreground-a)
        );
            --content-ui-submit-foreground-contrast-r: 0;
        --content-ui-submit-foreground-contrast-g: 0;
        --content-ui-submit-foreground-contrast-b: 0;
        --content-ui-submit-foreground-contrast-h: 0;
        --content-ui-submit-foreground-contrast-s: 0%;
        --content-ui-submit-foreground-contrast-l: 0%;
        --content-ui-submit-foreground-contrast-a: 1;
        --content-ui-submit-foreground-contrast:   hsla(
            var(--content-ui-submit-foreground-contrast-h),
            var(--content-ui-submit-foreground-contrast-s),
            var(--content-ui-submit-foreground-contrast-l),
            var(--content-ui-submit-foreground-contrast-a)
        );
            --content-ui-submit-background-r: 0;
        --content-ui-submit-background-g: 51;
        --content-ui-submit-background-b: 141;
        --content-ui-submit-background-h: 218.3;
        --content-ui-submit-background-s: 100%;
        --content-ui-submit-background-l: 27.65%;
        --content-ui-submit-background-a: 1;
        --content-ui-submit-background:   hsla(
            var(--content-ui-submit-background-h),
            var(--content-ui-submit-background-s),
            var(--content-ui-submit-background-l),
            var(--content-ui-submit-background-a)
        );
            --content-ui-submit-background-contrast-r: 255;
        --content-ui-submit-background-contrast-g: 255;
        --content-ui-submit-background-contrast-b: 255;
        --content-ui-submit-background-contrast-h: 0;
        --content-ui-submit-background-contrast-s: 0%;
        --content-ui-submit-background-contrast-l: 100%;
        --content-ui-submit-background-contrast-a: 1;
        --content-ui-submit-background-contrast:   hsla(
            var(--content-ui-submit-background-contrast-h),
            var(--content-ui-submit-background-contrast-s),
            var(--content-ui-submit-background-contrast-l),
            var(--content-ui-submit-background-contrast-a)
        );
            --accent-foreground-r: 0;
        --accent-foreground-g: 51;
        --accent-foreground-b: 141;
        --accent-foreground-h: 218.3;
        --accent-foreground-s: 100%;
        --accent-foreground-l: 27.65%;
        --accent-foreground-a: 1;
        --accent-foreground:   hsla(
            var(--accent-foreground-h),
            var(--accent-foreground-s),
            var(--accent-foreground-l),
            var(--accent-foreground-a)
        );
            --accent-foreground-contrast-r: 255;
        --accent-foreground-contrast-g: 255;
        --accent-foreground-contrast-b: 255;
        --accent-foreground-contrast-h: 0;
        --accent-foreground-contrast-s: 0%;
        --accent-foreground-contrast-l: 100%;
        --accent-foreground-contrast-a: 1;
        --accent-foreground-contrast:   hsla(
            var(--accent-foreground-contrast-h),
            var(--accent-foreground-contrast-s),
            var(--accent-foreground-contrast-l),
            var(--accent-foreground-contrast-a)
        );
            --accent-background-r: 241;
        --accent-background-g: 249;
        --accent-background-b: 255;
        --accent-background-h: 205.71;
        --accent-background-s: 100%;
        --accent-background-l: 97.25%;
        --accent-background-a: 1;
        --accent-background:   hsla(
            var(--accent-background-h),
            var(--accent-background-s),
            var(--accent-background-l),
            var(--accent-background-a)
        );
            --accent-background-contrast-r: 0;
        --accent-background-contrast-g: 0;
        --accent-background-contrast-b: 0;
        --accent-background-contrast-h: 0;
        --accent-background-contrast-s: 0%;
        --accent-background-contrast-l: 0%;
        --accent-background-contrast-a: 1;
        --accent-background-contrast:   hsla(
            var(--accent-background-contrast-h),
            var(--accent-background-contrast-s),
            var(--accent-background-contrast-l),
            var(--accent-background-contrast-a)
        );
            --accent-hover-r: 255;
        --accent-hover-g: 255;
        --accent-hover-b: 255;
        --accent-hover-h: 0;
        --accent-hover-s: 0%;
        --accent-hover-l: 100%;
        --accent-hover-a: 1;
        --accent-hover:   hsla(
            var(--accent-hover-h),
            var(--accent-hover-s),
            var(--accent-hover-l),
            var(--accent-hover-a)
        );
            --accent-hover-contrast-r: 0;
        --accent-hover-contrast-g: 0;
        --accent-hover-contrast-b: 0;
        --accent-hover-contrast-h: 0;
        --accent-hover-contrast-s: 0%;
        --accent-hover-contrast-l: 0%;
        --accent-hover-contrast-a: 1;
        --accent-hover-contrast:   hsla(
            var(--accent-hover-contrast-h),
            var(--accent-hover-contrast-s),
            var(--accent-hover-contrast-l),
            var(--accent-hover-contrast-a)
        );
            --logo-background-r: 255;
        --logo-background-g: 255;
        --logo-background-b: 255;
        --logo-background-h: 0;
        --logo-background-s: 0%;
        --logo-background-l: 100%;
        --logo-background-a: 1;
        --logo-background:   hsla(
            var(--logo-background-h),
            var(--logo-background-s),
            var(--logo-background-l),
            var(--logo-background-a)
        );
            --logo-background-contrast-r: 0;
        --logo-background-contrast-g: 0;
        --logo-background-contrast-b: 0;
        --logo-background-contrast-h: 0;
        --logo-background-contrast-s: 0%;
        --logo-background-contrast-l: 0%;
        --logo-background-contrast-a: 1;
        --logo-background-contrast:   hsla(
            var(--logo-background-contrast-h),
            var(--logo-background-contrast-s),
            var(--logo-background-contrast-l),
            var(--logo-background-contrast-a)
        );
            --body-background-r: 239;
        --body-background-g: 237;
        --body-background-b: 237;
        --body-background-h: 0;
        --body-background-s: 5.88%;
        --body-background-l: 93.33%;
        --body-background-a: 1;
        --body-background:   hsla(
            var(--body-background-h),
            var(--body-background-s),
            var(--body-background-l),
            var(--body-background-a)
        );
            --body-background-contrast-r: 0;
        --body-background-contrast-g: 0;
        --body-background-contrast-b: 0;
        --body-background-contrast-h: 0;
        --body-background-contrast-s: 0%;
        --body-background-contrast-l: 0%;
        --body-background-contrast-a: 1;
        --body-background-contrast:   hsla(
            var(--body-background-contrast-h),
            var(--body-background-contrast-s),
            var(--body-background-contrast-l),
            var(--body-background-contrast-a)
        );
            --login-form-background-r: 0;
        --login-form-background-g: 0;
        --login-form-background-b: 0;
        --login-form-background-h: 0;
        --login-form-background-s: 0%;
        --login-form-background-l: 0%;
        --login-form-background-a: 0.4;
        --login-form-background:   hsla(
            var(--login-form-background-h),
            var(--login-form-background-s),
            var(--login-form-background-l),
            var(--login-form-background-a)
        );
            --login-form-background-contrast-r: 255;
        --login-form-background-contrast-g: 255;
        --login-form-background-contrast-b: 255;
        --login-form-background-contrast-h: 0;
        --login-form-background-contrast-s: 0%;
        --login-form-background-contrast-l: 100%;
        --login-form-background-contrast-a: 1;
        --login-form-background-contrast:   hsla(
            var(--login-form-background-contrast-h),
            var(--login-form-background-contrast-s),
            var(--login-form-background-contrast-l),
            var(--login-form-background-contrast-a)
        );
            --form-border-color-r: 193;
        --form-border-color-g: 229;
        --form-border-color-b: 255;
        --form-border-color-h: 205.16;
        --form-border-color-s: 100%;
        --form-border-color-l: 87.84%;
        --form-border-color-a: 1;
        --form-border-color:   hsla(
            var(--form-border-color-h),
            var(--form-border-color-s),
            var(--form-border-color-l),
            var(--form-border-color-a)
        );
            --form-border-color-contrast-r: 0;
        --form-border-color-contrast-g: 0;
        --form-border-color-contrast-b: 0;
        --form-border-color-contrast-h: 0;
        --form-border-color-contrast-s: 0%;
        --form-border-color-contrast-l: 0%;
        --form-border-color-contrast-a: 1;
        --form-border-color-contrast:   hsla(
            var(--form-border-color-contrast-h),
            var(--form-border-color-contrast-s),
            var(--form-border-color-contrast-l),
            var(--form-border-color-contrast-a)
        );
            --form-bg-hover-color-r: 209;
        --form-bg-hover-color-g: 236;
        --form-bg-hover-color-b: 255;
        --form-bg-hover-color-h: 204.78;
        --form-bg-hover-color-s: 100%;
        --form-bg-hover-color-l: 90.98%;
        --form-bg-hover-color-a: 1;
        --form-bg-hover-color:   hsla(
            var(--form-bg-hover-color-h),
            var(--form-bg-hover-color-s),
            var(--form-bg-hover-color-l),
            var(--form-bg-hover-color-a)
        );
            --form-bg-hover-color-contrast-r: 0;
        --form-bg-hover-color-contrast-g: 0;
        --form-bg-hover-color-contrast-b: 0;
        --form-bg-hover-color-contrast-h: 0;
        --form-bg-hover-color-contrast-s: 0%;
        --form-bg-hover-color-contrast-l: 0%;
        --form-bg-hover-color-contrast-a: 1;
        --form-bg-hover-color-contrast:   hsla(
            var(--form-bg-hover-color-contrast-h),
            var(--form-bg-hover-color-contrast-s),
            var(--form-bg-hover-color-contrast-l),
            var(--form-bg-hover-color-contrast-a)
        );
            --body-foreground-r: 155;
        --body-foreground-g: 154;
        --body-foreground-b: 154;
        --body-foreground-h: 0;
        --body-foreground-s: 0.5%;
        --body-foreground-l: 60.59%;
        --body-foreground-a: 1;
        --body-foreground:   hsla(
            var(--body-foreground-h),
            var(--body-foreground-s),
            var(--body-foreground-l),
            var(--body-foreground-a)
        );
            --body-foreground-h1-r: 36;
        --body-foreground-h1-g: 36;
        --body-foreground-h1-b: 36;
        --body-foreground-h1-h: 0;
        --body-foreground-h1-s: 0%;
        --body-foreground-h1-l: 14.12%;
        --body-foreground-h1-a: 1;
        --body-foreground-h1:   hsla(
            var(--body-foreground-h1-h),
            var(--body-foreground-h1-s),
            var(--body-foreground-h1-l),
            var(--body-foreground-h1-a)
        );
            --navigation-foreground-highlight-r: 255;
        --navigation-foreground-highlight-g: 255;
        --navigation-foreground-highlight-b: 255;
        --navigation-foreground-highlight-h: 0;
        --navigation-foreground-highlight-s: 0%;
        --navigation-foreground-highlight-l: 100%;
        --navigation-foreground-highlight-a: 1;
        --navigation-foreground-highlight:   hsla(
            var(--navigation-foreground-highlight-h),
            var(--navigation-foreground-highlight-s),
            var(--navigation-foreground-highlight-l),
            var(--navigation-foreground-highlight-a)
        );
    }