/* ============================================================
   PEMBROKE SCHOOL - SENIOR SCHOOL REPORT STYLING v1.18 (SACE + IB)
   (This sheet now drives Senior School, Middle School AND IMT - the MS-specific
   sheet is retired; SS handles MS correctly.)

   v1.18 = v1.17 FIXED: IMT duplicate "Achievement" actually hidden (v1.17's
   rule matched nothing). Real IMT DOM from the live page source: the FIRST
   "Achievement" is the container's <h5> OUTSIDE .rubric-wrap (the standard
   feedback-container heading, [data-test="...container-Achievement"]); the
   SECOND is the rubric TITLE that the Vue "rubric-readonly" component renders
   INSIDE .rubric-wrap: <div class="u-pad-s"><h3>Achievement</h3></div>. v1.17
   assumed BOTH sat inside .rubric-wrap and hid only a heading FOLLOWING
   another heading there - only one exists inside, so nothing matched. v1.18
   hides ANY h3 inside .rubric-wrap, plus its .u-pad-s wrapper (kills the
   leftover padding gap). The h5 stays as the single visible heading,
   consistent with the other sections. Inert on regular MS/SS subjects: their
   .rubric-wrap holds only .scrollable + table (no h3, no .u-pad-s).
   Paint-only.

   v1.17 = v1.16 + first attempt at the IMT duplicate-heading hide (sibling
   selectors inside .rubric-wrap - WRONG DOM ASSUMPTION, superseded by v1.18).

   v1.16 = v1.15 + HIDE the Government Student Number on the student card.
   Schoolbox emits <h4 class="govtStudentNumber"> between the name and the year;
   hiding that class removes the label + value so it never prints. One rule,
   paint-only.

   v1.15 = v1.14 + MODIFIED-CURRICULUM word value sized to match JS. The v1.14
   selector fix brought the modified-curriculum row into the achievement styling,
   but the value inherited the 1.5rem grade size meant for short SACE letters /
   IB numbers, so a word like "Emerging" rendered oversized. Dropped just the
   "(Modified Curriculum)" value to 1rem (the size JS uses for its word
   descriptors), scoped ends-with so letter/number grades keep 1.5rem. One rule,
   paint-only.

   v1.14 = v1.13 + MODIFIED-CURRICULUM achievement now styled. The Academic
   Achievement selectors were EXACT (=) so they missed students whose field is
   "Academic Achievement (Modified Curriculum)" - those rows rendered raw
   (unstyled Schoolbox: no inline caption, no grade styling, not hidden when
   empty). Changed all 7 to STARTS-WITH (^=) so both the standard and modified
   field are caught. Caption stays "Academic Achievement:" for both (no
   distinction on the report face). Paint/scope only - no order/layout risk.
   See the ACHIEVEMENT row block for the full rationale.

   v1.13 = v1.12 (v1.9 order baseline) + the MS v13-v16 intro/border work, ported
   for SS's fragile flex order (so NO print-color-adjust, NO table-layout:fixed):
   - LINE UP the two intro tables: colgroup col:auto so the first-column width
     governs both (no table-layout:fixed - it broke flex order).
   - FIRST COLUMN via <th> (CKEditor header column; td:first-child fallback):
     centred, bold, 150px, tint. A <th> bg PRINTS natively, so the tint now
     prints with NO print-color-adjust (which breaks SS order). The first column
     must be a CKEditor HEADER COLUMN for print shading.
   - vertical-align: middle + borders forced !important over CKEditor inline.
   - EQUAL row heights (height:52px) - GUESS; and a HEIGHT change on the fragile
     SS flex order: VERIFY ORDER in the export; if it breaks, delete the height
     line (everything else is paint-only).
   - RIGHT outer border pinned to 3.5px on intro + rubric (border-collapse made
     it look thin). Matches MS v16. Lockstep with MS v16 / JS v2.9.

   v1.12 = v1.9 order baseline after abandoning v1.10/v1.11 (table-layout:fixed,
   row-height, print-color-adjust all scrambled the fragile flex order).

   --- version history (full detail in each SS-report-styling-vX.css) ---
   v1.9: parity pagination + CSS-drawn tick; reverts the v1.7/v1.8 natural-flow
     dead end (printed 1 subject/page). Known limit: a missing/extra course
     description orphans the tail (data fix = one description per subject).
   v1.6: Instrumental "Achievement" rubric shows its criterion column (scoped).
   v1.5: base font 1.06em; uniform class-bar; teacher list "A, B and C".
   v1.4: Academic/IB Achievement value no longer width-clipped ("Not Assessed").
   v1.3: uniform 1.5px grid via border-collapse on intro + .rb (from JS v2.0).
   v1.2: info-page readability + links keep underline. (PAIRING still nth-of-type
     parity; breaks for description-less subjects.)
   v1.1: rebuilt from MS v4.22 + SS deltas (IB Achievement marker/caption sibling
     to the SACE Academic Achievement rules). Shares MS cover image (78923f8).
   ============================================================ */


/* ============================================================
   BRAND TOKENS
   ============================================================ */

.summative-report {
    --pem-navy:    #00338D;
    --pem-gold:    #FFCC00;
    --pem-tint:    #AAC4E7;    /* used on info-page + rubric header band */
    --pem-bg-soft: #eef2f8;
    --pem-rule:    #cfd6e4;
}


/* ============================================================
   GLOBAL TYPE
   ============================================================ */

.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: var(--pem-navy) !important;
    font-family: Arial, sans-serif !important;
}

/* CKEditor scope: course descriptions and pastoral comments are
   saved through CKEditor, which wraps content in inline spans
   like <span style="color: rgb(0,0,0)"> and sometimes
   <span style="font-family: ..."> from teachers who paste from
   Word. These need !important to lose the cascade fight to our
   rules. */
.summative-report .course-overview-textbox,
.summative-report .course-overview-textbox *,
.summative-report .comment article,
.summative-report .comment article * {
    color: var(--pem-navy) !important;
    font-family: Arial, sans-serif !important;
}

/* v4.20: FLATTEN all teacher formatting in comments + course descriptions to
   uniform body text. The colour/font rule above wins those two fights; this
   strips everything else CKEditor or a Word paste carries in: bold, italic,
   underline/strikethrough, highlight, and custom font sizes (including pasted
   headings). font-size:1em means 100% of the parent, so the container size
   propagates and any inline size is dropped. Paragraph breaks are preserved. */
.summative-report .comment article *,
.summative-report .course-overview-textbox * {
    font-weight: 400 !important;
    font-style: normal !important;
    text-decoration: none !important;
    background: transparent !important;
    font-size: 1em !important;
}

/* Flatten any pasted lists to plain lines (no bullets / indent). */
.summative-report .comment article ul,
.summative-report .comment article ol,
.summative-report .course-overview-textbox ul,
.summative-report .course-overview-textbox ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* v4.21: info-page links keep their underline and a consistent weight. The
   flatten only targets comments/descriptions (not .introduction), but make
   link styling explicit so one link can't render bold while another doesn't. */
.summative-report .introduction a {
    text-decoration: underline !important;
    font-weight: 400 !important;
    color: var(--pem-navy) !important;
}

/* v1.2 (#2): links in course descriptions + comments keep their underline. The
   flatten rule sets text-decoration:none on every descendant, which stripped it
   off links there; restore it on anchors (higher specificity than the `*` rule). */
.summative-report .course-overview-textbox a,
.summative-report .comment article a {
    text-decoration: underline !important;
    color: var(--pem-navy) !important;
}

.summative-report { font-size: 1.06em; }   /* v1.5: reverted 1.12 -> 1.06 (bleed headroom + cross-report parity) */

.summative-report .summative-content,
.summative-report .summative-content p,
.summative-report .introduction,
.summative-report .introduction p,
.summative-report .introduction td { font-size: 1em; }

.summative-report .class-page,
.summative-report .class-page * { font-size: 1em; }

.summative-report .summative-content h4,
.summative-report .summative-content h5 { font-size: 1.08em; }

.summative-report .class-page .card.compact h4,
.summative-report .class-page .card.compact h5 { font-size: 1em; }


/* ============================================================
   COVER PAGE
   ============================================================ */

.summative-report .header-content {
    position: relative;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* Under the flex parent (.summative-report), flex-shrink: 0
       stops the cover being compressed below 100vh, which made
       the info page bleed onto page 1. page-break-after is the
       older syntax - Schoolbox's sanitiser rejects the modern
       `break-after: page` and that takes the whole stylesheet
       down with it (see v4.8). */
    flex-shrink: 0 !important;
    page-break-after: always !important;
}

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

.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;
}

.summative-report .header-content h1 {
    font-size: 22pt;
    font-weight: 400;
    margin: 800px 0 0 410px;
    padding: 0;
    z-index: 2;
    text-align: left;
    line-height: 1.2;
}

.summative-report .header-content h2.school-name { display: none; }

.summative-report > .card {
    /* Absolute positioning takes the card out of flex flow.
       Without this, the card's `margin-top: -320px` pushed its
       layout box into header-content's space and made the
       intro start at y=836 (bleeding onto page 1). Now the
       card is a pure visual overlay anchored to the cover.
       z-index keeps it above the logo. */
    position: absolute !important;
    top: 700px !important;
    left: 407px !important;
    display: block;
    padding: 0;
    margin: 0 !important;
    text-align: left;
    z-index: 2;
}

.summative-report > .card img { display: none; }

.summative-report .card h3.name {
    font-size: 33pt;
    font-weight: 700;
    margin: 0 0 0.3rem 0;
    line-height: 1.1;
}

.summative-report .card p.year {
    font-size: 26pt;
    font-weight: 400;
    margin: 0;
    line-height: 1.2;
}

/* v1.16: hide the Government Student Number line on the student card. Schoolbox
   emits <h4 class="govtStudentNumber">Government Student Number: <span>NNN</span></h4>
   between the name and the year; it should not appear on the printed report.
   Hiding the whole h4 removes both the label and the value. */
.summative-report .govtStudentNumber { display: none !important; }


/* ============================================================
   INFORMATION PAGE
   ============================================================ */

.summative-report .introduction {
    page-break-after: always !important;
    flex-shrink: 0 !important;
    /* v1.2 (#1): natural top-aligned flow with even, comfortable spacing (an
       earlier draft floated the PYP logo to the page bottom via flex
       space-between). NO min-height/flex: Schoolbox renders the intro taller
       than a local render so it CANNOT bleed - the only safe lever is content
       size (table font + padding + heading), tuned below. */
}

/* v4.22: tighten body paragraphs so the two tables + headings fit one page */
.summative-report .introduction p { line-height: 1.45; margin: 0 0 0.6rem 0; }

.summative-report .introduction strong {
    font-size: 1.25rem;   /* v(#1): section heading readability */
    font-weight: 700;
}

.summative-report .introduction p strong {
    display: block;
    text-align: center;
    margin: 0.5rem 0 0.25rem 0;   /* v4.22: tighten space around section headings */
}

.summative-report .introduction table.sb-ck-table {
    /* v1.3: border-collapse:collapse for a uniform internal grid (was separate
       + per-cell border-right/border-bottom, which left the tinted first-column
       rows looking uneven). Table's 3.5px border still wins on the outer edge. */
    border-collapse: collapse;
    margin: 0.75rem 0;   /* v1.2: 0.5 -> 0.75 breathing room */
    width: 100%;
    border: 3.5px solid var(--pem-navy) !important;   /* v1.13: !important beats CKEditor inline table border */
    font-size: 0.88em;   /* v1.2: 0.82 -> 0.88 readability (Schoolbox-safe) */
}

/* v1.13 align (ported MS v13): the two intro tables ship different CKEditor
   colgroup widths so they don't line up. Drop the colgroup % so the first-column
   width below governs both. NO table-layout:fixed (broke flex order on MS/SS). */
.summative-report .introduction table.sb-ck-table colgroup col { width: auto !important; }

/* All data cells (th label + td descriptions): uniform 1.5px grid, middle
   vertical align, equal row height (ported MS v14/v16). !important beats CKEditor
   inline borders + inline vertical-align:top. *** height = HEIGHT change on the
   fragile SS flex order; if order breaks in the export, delete the height line
   (border/align are independent). *** */
.summative-report .introduction table.sb-ck-table th,
.summative-report .introduction table.sb-ck-table td {
    border: 1.5px solid var(--pem-navy) !important;
    vertical-align: middle !important;
    height: 52px;   /* v1.13: equal rows (IB 1-7 / SACE). GUESS - raise if a descriptor wraps past it */
}

/* v1.13: RIGHT outer edge renders thin under border-collapse rounding; pin the
   last cell in each row to the 3.5px frame. Paint-only, order-safe. */
.summative-report .introduction table.sb-ck-table td:last-child,
.summative-report .introduction table.sb-ck-table th:last-child {
    border-right: 3.5px solid var(--pem-navy) !important;
}

/* DESCRIPTION cells (the only <td> once the first column is a header column):
   left-aligned, regular weight, roomy padding. */
.summative-report .introduction table.sb-ck-table td {
    padding: 6px 12px;
    text-align: left;
    font-weight: 400 !important;
}
.summative-report .introduction table.sb-ck-table td * { font-weight: 400 !important; }

/* LABEL / HEADER column. v1.13: this column is now a CKEditor HEADER column, so
   it is <th> (that's how the shading works); td:first-child kept as fallback.
   A <th> background PRINTS natively (unlike <td>), so the tint is the live
   print-shading route - NO print-color-adjust (it breaks SS flex order). */
.summative-report .introduction table.sb-ck-table th,
.summative-report .introduction table.sb-ck-table td:first-child {
    text-align: center;
    font-weight: 700;
    width: 150px;
    padding: 6px 8px;
    white-space: nowrap;
    background-color: #AAC4E7 !important;
}
.summative-report .introduction table.sb-ck-table th *,
.summative-report .introduction table.sb-ck-table td:first-child * { font-weight: 700 !important; }

.summative-report .introduction table.sb-ck-table th div,
.summative-report .introduction table.sb-ck-table td div { padding: 0; margin: 0; }
.summative-report .introduction table.sb-ck-table th p,
.summative-report .introduction table.sb-ck-table td p   { margin: 0; line-height: 1.3; }


/* ============================================================
   CLASS PAGE LAYOUT
   ============================================================ */

/* Navy heading bar with white text. background, color, and
   print-color-adjust are all !important so nothing - not
   Schoolbox base CSS, not CKEditor inline spans, not the
   browser's print pipeline - can quietly drop the navy
   background or change the text colour and leave the
   heading white-on-white invisible. */
.summative-report .class-page {
    background: var(--pem-navy) !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 1.25rem 2rem !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    /* v1.5: uniform bar height - min-height floors short bars (single-line title,
       boarding) to the common title+teacher height; align-items centres .left. */
    min-height: 2.75rem;
    align-items: center;
}

.summative-report .class-page,
.summative-report .class-page *,
.summative-report .class-page h1,
.summative-report .class-page h2,
.summative-report .class-page h3,
.summative-report .class-page h4,
.summative-report .class-page h5,
.summative-report .class-page h6,
.summative-report .class-page p {
    color: #fff !important;
}

.summative-report .folder-title.class-page > .left {
    flex-grow: 0;
    flex-shrink: 0;
}

.summative-report .class-page h3,
.summative-report .class-page h4 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.2rem 0;     /* small gap before the teacher line */
}

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

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

/* Teacher list: comma-separated with "and" before the last (A, B and C).
   :nth-last-of-type on the .card.compact compound class is sanitiser-safe. */
.summative-report .class-page .card.compact:not(:last-of-type):not(:nth-last-of-type(2)) h4::after,
.summative-report .class-page .card.compact:not(:last-of-type):not(:nth-last-of-type(2)) h5::after {
    content: ', ';
    font-weight: 400;
}
.summative-report .class-page .card.compact:nth-last-of-type(2) h4::after,
.summative-report .class-page .card.compact:nth-last-of-type(2) h5::after {
    content: ' and ';
    font-weight: 400;
}

.summative-report .class-page .card.compact img { display: none; }

.summative-report .class-page:not(:first-of-type) {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}


/* ============================================================
   FEEDBACK / ASSESSMENT ROWS
   ============================================================ */

.summative-report .summative-content .worktype { display: none; }

.summative-report .summative-content .feedback-assessment h4,
.summative-report .summative-content .feedback-assessment h5 {
    font-size: 1.25rem;   /* v(#1): section heading readability */
    font-weight: 700;
}

.summative-report .feedback-assessment-container {
    margin-bottom: 0.4rem;
    padding-bottom: 0.2rem;
    border: none;
}

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

.summative-report .summative-content h4,
.summative-report .summative-content h5 {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}


/* ----- ACHIEVEMENT row: caption label + 1.5rem grade letter inline -----
   Hide the database h5 text ("Grade" / "Overall Achievement" /
   "Academic Achievement") and inject "ACHIEVEMENT:" via ::before.
   All three data-test values are covered so the rule keeps working
   whether the field is renamed or different classes use different
   names.

   v1.14: the Academic Achievement selectors use ^= (STARTS-WITH), not =
   (exact). Modified-curriculum students carry the field "Academic Achievement
   (Modified Curriculum)" - a different data-test string that the old exact
   match missed, so those students got the raw unstyled Schoolbox row (no
   inline caption, no grade styling, never hidden when empty). ^= catches both
   "...Academic Achievement" AND "...Academic Achievement (Modified Curriculum)"
   in one selector; it cannot leak to "IB Achievement" (different prefix) or to
   the Instrumental "Achievement" rubric (no "Academic" prefix). Caption stays
   "Academic Achievement:" for both (no modified/standard distinction on the
   face of the report, per decision). The grade value itself is a word
   descriptor like the JS scale and is handled by the existing .grade rule +
   the v1.4 width un-clip. Applied to all 7 Academic Achievement selectors
   (layout / .left / h5 hide / caption / grade / un-clip / hide-when-empty).
*/

.summative-report [data-test="summative-preview-feedback-container-Grade"]                .feedback-assessment,
.summative-report [data-test="summative-preview-feedback-container-Overall Achievement"]  .feedback-assessment,
.summative-report [data-test^="summative-preview-feedback-container-Academic Achievement"] .feedback-assessment,
.summative-report [data-test="summative-preview-feedback-container-IB Achievement"]       .feedback-assessment {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
}

.summative-report [data-test="summative-preview-feedback-container-Grade"]                .feedback-assessment .left,
.summative-report [data-test="summative-preview-feedback-container-Overall Achievement"]  .feedback-assessment .left,
.summative-report [data-test^="summative-preview-feedback-container-Academic Achievement"] .feedback-assessment .left,
.summative-report [data-test="summative-preview-feedback-container-IB Achievement"]       .feedback-assessment .left {
    flex-grow: 0;
}

/* Hide the underlying h5 text */
.summative-report [data-test="summative-preview-feedback-container-Grade"]                .feedback-assessment h5,
.summative-report [data-test="summative-preview-feedback-container-Overall Achievement"]  .feedback-assessment h5,
.summative-report [data-test^="summative-preview-feedback-container-Academic Achievement"] .feedback-assessment h5,
.summative-report [data-test="summative-preview-feedback-container-IB Achievement"]       .feedback-assessment h5 {
    font-size: 0;
    line-height: 0;
    margin: 0;
}

/* Inject "Academic Achievement" caption (title case) */
.summative-report [data-test="summative-preview-feedback-container-Grade"]                .feedback-assessment h5::before,
.summative-report [data-test="summative-preview-feedback-container-Overall Achievement"]  .feedback-assessment h5::before,
.summative-report [data-test^="summative-preview-feedback-container-Academic Achievement"] .feedback-assessment h5::before {
    content: "Academic Achievement:";
    font-size: 1rem;
    line-height: 1;
    font-weight: 600;
    font-family: Arial, sans-serif !important;
    color: var(--pem-navy) !important;
    opacity: 0.75;
}

/* SS: IB subjects carry an "IB Achievement" marker - same treatment, IB caption.
   Separate rule because the injected content differs (default wording, change
   here if Schoolbox uses a different IB label). */
.summative-report [data-test="summative-preview-feedback-container-IB Achievement"] .feedback-assessment h5::before {
    content: "IB Achievement:";
    font-size: 1rem;
    line-height: 1;
    font-weight: 600;
    font-family: Arial, sans-serif !important;
    color: var(--pem-navy) !important;
    opacity: 0.75;
}

/* Grade letter - medium, prominent, sits inline with the caption.
   font-family: Arial !important because the print pipeline was
   falling back to a serif on the bold grade glyph. */
.summative-report [data-test="summative-preview-feedback-container-Grade"]                .grade,
.summative-report [data-test="summative-preview-feedback-container-Overall Achievement"]  .grade,
.summative-report [data-test^="summative-preview-feedback-container-Academic Achievement"] .grade,
.summative-report [data-test="summative-preview-feedback-container-IB Achievement"]       .grade {
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 700;
    font-family: Arial, sans-serif !important;
    color: var(--pem-navy) !important;
    text-align: left;
    min-width: 0;
    padding: 0;
    margin: 0;
}

/* "Attitudes to Learning" caption - title case, matches the
   Academic Achievement label */
.summative-report
    [data-test="summative-preview-feedback-container-Attitudes to Learning"]
    .feedback-assessment h5 {
    font-size: 1rem;
    font-weight: 600;
    font-family: Arial, sans-serif !important;
    color: var(--pem-navy) !important;
    opacity: 0.75;
    margin: 0.25rem 0 0.4rem 0;
}

/* Default grade size for any other grade-like field still rendered */
.summative-report .grade {
    font-size: 2rem;
    font-weight: 700;
    color: var(--pem-navy);
    margin-bottom: 0.25rem;
}


/* ----- Denominator clipping ----- */
.summative-report .feedback-assessment-container .grade {
    max-width: 5rem;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.summative-report
    [data-test="summative-preview-feedback-container-Days Absent"]
    .grade {
    max-width: 3rem;
}

/* v1.4: don't width-clip the Academic / IB Achievement value. The 5rem cap above
   truncated an error like "Not Assessed" to "Not Ass" (Stage 2 Outdoor Ed on the
   Standley export); real grades ("A","B+",IB number) are short and unaffected.
   Scoped to the achievement containers (SACE + IB) so the Days Absent / numeric
   clip stays in force. !important beats the cap. */
.summative-report [data-test="summative-preview-feedback-container-Grade"] .grade,
.summative-report [data-test="summative-preview-feedback-container-Overall Achievement"] .grade,
.summative-report [data-test^="summative-preview-feedback-container-Academic Achievement"] .grade,
.summative-report [data-test="summative-preview-feedback-container-IB Achievement"] .grade {
    max-width: none !important;
    overflow: visible !important;
    white-space: normal !important;
}

/* v1.15: WORD achievement values (modified-curriculum scale: Emerging /
   Developing / Sound / Proficient / Exemplary) read too large at the 1.5rem
   grade size, which is tuned for SHORT SACE letters / IB numbers. Drop just the
   modified-curriculum value to 1rem so the word sits inline with the caption at
   the same size JS uses for its word descriptors (JS .grade = 1rem). Scoped
   ends-with "(Modified Curriculum)" so standard letter/number grades keep the
   prominent 1.5rem. !important guards against source-order shifts. */
.summative-report [data-test$="(Modified Curriculum)"] .grade {
    font-size: 1rem !important;
}


/* ============================================================
   PASTORAL CONTENT
   ============================================================ */

/* Hide the Days Late row entirely */
.summative-report [data-test="summative-preview-feedback-container-Days Late"] {
    display: none !important;
}

/* Pastoral comment full-width.
   Schoolbox base CSS sets .feedback-assessment to display: flex
   with .left flex-grow: 2, which squeezes the comment into the
   left column with an empty right column beside it. Override
   the flex so the Comment block uses the full content width.
   The v4 max-width: 65ch line-length cap is dropped - at print
   size the page itself is the wrap. */
.summative-report
    [data-test="summative-preview-feedback-container-Comment"]
    .feedback-assessment {
    display: block !important;
}

.summative-report
    [data-test="summative-preview-feedback-container-Comment"]
    .feedback-assessment > .left {
    width: 100% !important;
    flex-grow: 1 !important;
}

.summative-report
    [data-test="summative-preview-feedback-container-Comment"]
    .comment article {
    max-width: none !important;
    line-height: 1.55;
}

.summative-report
    [data-test="summative-preview-feedback-container-Comment"]
    .comment article p {
    margin: 0 0 0.7em 0;
}

/* Co-Curricular: single column by default. Switch to 2 columns
   only when there are 7+ items - uses `:has()` which Chromium
   105+ supports (Schoolbox's print pipeline should). If `:has()`
   isn't supported, the fallback is single column - harmless. */
.summative-report
    [data-test="summative-preview-feedback-container-Co-Curricular"]
    .comment article {
    column-count: 1;
}

.summative-report
    [data-test="summative-preview-feedback-container-Co-Curricular"]
    .comment article:has(p:nth-child(7)) {
    column-count: 2;
    column-gap: 2rem;
    column-fill: balance;
}

.summative-report
    [data-test="summative-preview-feedback-container-Co-Curricular"]
    .comment p {
    break-inside: avoid;
    margin: 0 0 0.25rem 0;
}


/* HIDE INCOMPLETE FIELDS (v4.21): an ungraded Academic/IB Achievement (Schoolbox
   omits the .grade element) or an unmarked rubric (no .rb-selected) is hidden via
   a single non-nested :has() on the container itself - sanitiser-safe because it
   hides the matched element, no relational/nested :has() needed. */
.summative-report [data-test="summative-preview-feedback-container-Grade"]:not(:has(.grade)),
.summative-report [data-test="summative-preview-feedback-container-Overall Achievement"]:not(:has(.grade)),
.summative-report [data-test^="summative-preview-feedback-container-Academic Achievement"]:not(:has(.grade)),
.summative-report [data-test="summative-preview-feedback-container-IB Achievement"]:not(:has(.grade)) { display: none !important; }

.summative-report [data-test="summative-preview-feedback-container-Attitudes to Learning"]:not(:has(.rb-selected)) { display: none !important; }


/* HIDE EMPTY (moved-class) CLUSTERS - NOT POSSIBLE template-wide in CSS.
   The empty marks div is hideable, but the header + description need a nested /
   combinator :has() or :empty to detect emptiness, all dropped by the sanitiser,
   and there is no per-class marker to target. Full removal is Schoolbox-side
   (unenrol). No rules here. */


/* ============================================================
   REPORT LAYOUT - flex column + order to attempt pastoral-first

   Make .summative-report a vertical flex container and use
   `order:` to lift the pastoral cluster (currently the last 3
   children Schoolbox emits) to visual positions 4, 5, 6 - right
   after the info page. Per the CSS Flexbox spec, page breaks in
   a fragmented flex column follow visual order, so if the print
   pipeline complies, pastoral renders on page 3 instead of last.

   If the pipeline ignores `order:` for pagination, pastoral
   falls back to its DOM position (last). Everything else still
   prints correctly because page-break rules below are tied to
   elements, not page numbers.

   Positional selectors only - no :has() - because v4.3 showed
   complex :has() is silently ignored by Schoolbox's CSS engine.
   ============================================================ */

.summative-report {
    display: flex;
    flex-direction: column;
    /* position: relative gives the absolutely-positioned .card
       a positioning context. Without this, the card would
       anchor to the viewport, not the report. */
    position: relative;
}

.summative-report > * { order: 100; }

.summative-report > *:nth-child(1) { order: 1; }  /* cover */
.summative-report > *:nth-child(2) { order: 2; }  /* student card */
.summative-report > *:nth-child(3) { order: 3; }  /* intro / info page */

/* ---- Reorder pastoral + boarding to the FRONT (v4.19) ----
   `order:` is honoured ONLY from plain positional selectors in Schoolbox's
   print pipeline (a :has() on the ordered element is honoured for ::after /
   content but NOT for `order:` - that is why v4.18 fell back to DOM order).
   So set `order:` on positional children, and use a SIMPLE :has() on the
   PARENT only to tell boarders from non-boarders. No batch, no orphan. */

/* Base = NON-BOARDER: pastoral is the last 2 children -> 5/6 */
.summative-report > *:nth-last-child(2) { order: 5; }
.summative-report > *:nth-last-child(1) { order: 6; }

/* BOARDER override: pastoral = 4th/3rd-last (5/6), boarding = 2nd/1st-last (7/8).
   The extra :has() on the parent raises specificity so these beat the base
   rules for boarders; the ordered child itself stays positional. */
.summative-report:has([data-test="summative-preview-feedback-container-Boarding Comment"]) > *:nth-last-child(4) { order: 5; }
.summative-report:has([data-test="summative-preview-feedback-container-Boarding Comment"]) > *:nth-last-child(3) { order: 6; }
.summative-report:has([data-test="summative-preview-feedback-container-Boarding Comment"]) > *:nth-last-child(2) { order: 7; }
.summative-report:has([data-test="summative-preview-feedback-container-Boarding Comment"]) > *:nth-last-child(1) { order: 8; }

/* Page-break before each lifted cluster HEADER + cancel the academic pair-math
   margin. nth-last-child(2) is always a cluster header (pastoral for
   non-boarders, boarding for boarders); boarders also break before the pastoral
   header at nth-last-child(4). The .folder-title.class-page.summative-content
   chain out-specifies the pair-math rule. */
.summative-report > .folder-title.class-page.summative-content:nth-last-child(2) { page-break-before: always !important; margin-top: 0 !important; }
.summative-report:has([data-test="summative-preview-feedback-container-Boarding Comment"]) > .folder-title.class-page.summative-content:nth-last-child(4) { page-break-before: always !important; margin-top: 0 !important; }

/* BOARDING (v4.18 #2) - Head of Boarding name INSIDE the navy bar (white,
   under "Boarding Community"), mirroring the academic teacher line. Schoolbox
   emits no staff card for boarding, so inject the name via ::after on the
   header's .left column (NOT the flex-row header itself, or it lands inline
   beside the title instead of below it). */
.summative-report > div.folder-title.class-page:has(+ div.summative-content [data-test="summative-preview-feedback-container-Boarding Comment"]) > .left::after {
    content: "Mr Doug Fawcett";
    display: block;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-weight: 400;
    font-size: 1rem;
    margin: 0.2rem 0 0 0;
}


/* ============================================================
   PAGE-BREAK LOGIC - nth-of-type pair math (2 subjects per page):
   even (not 2nd) -> page-break-before; odd (not first) -> avoid + top margin.
   Pastoral/boarding own-page is handled by the positional headers above.

   v1.9: REVERTED v1.7/v1.8's natural-flow (it printed ONE subject per page - the
   flex container, needed for pastoral-first, won't pack two items onto a page
   without a FORCED break). Parity forces breaks so it pairs. Known limit: a
   missing OR extra course description shifts the div count and orphans the tail
   (CSS can't count subjects; `:nth-child(N of S)` is banned). Lockstep with MS v8.
   ============================================================ */

/* Default: every class-page header sticks to its content (no orphan headers) */
.summative-report .class-page {
    page-break-after: avoid !important;
}

/* Course description sticks to feedback that follows it */
.summative-report [data-subject-overview-homepage] {
    page-break-after: avoid !important;
}

/* The feedback wrapper (h5 grade + rubric) tries not to break inside */
.summative-report .summative-content {
    page-break-inside: avoid;
    break-inside: avoid;
}

.summative-report .rubric-wrap,
.summative-report .feedback-assessment-container {
    page-break-inside: avoid;
    break-inside: avoid;
}

/* First subject - keep the :first-of-type line (matches nothing in current DOM,
   the first div sibling is .header-content; harmless parity with the v1 file). */
.summative-report .class-page:first-of-type {
    page-break-before: always !important;
}

/* Academic subjects at EVEN DOM positions start new pages */
.summative-report .class-page:nth-of-type(even):not(:nth-of-type(2)) {
    page-break-before: always !important;
}

/* Academic subjects at ODD DOM positions pair with previous + breathing room */
.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;
    margin-top: 6rem !important;
}

/* INSTRUMENTAL MUSIC on its own page (whole-school rule). Instrumental classes
   carry a unique "Attendance" marker (regular subjects do not) and a tall custom
   "Achievement" rubric, so they must not pair. Break BEFORE the instrumental
   header (overriding the even/odd merge) via relational :has(+ …) - the same
   selector style the Boarding header uses - and break AFTER its marks. */
.summative-report > div.folder-title.class-page:has(+ div.summative-content [data-test*="Attendance"]) {
    page-break-before: always !important;
    margin-top: 0 !important;
}
.summative-report .summative-content:has([data-test*="Attendance"]) {
    page-break-after: always !important;
}

/* PASTORAL page-break + margin reset are now handled by the marker-based
   pastoral header rule in the REPORT LAYOUT section above. The old positional
   :nth-last-of-type(3) override is gone (fragile; matched nothing once
   boarding shifted the tail). Boarding name injection moved into the navy
   bar (see the ::after rule above). */


/* ============================================================
   COURSE DESCRIPTION
   ============================================================ */

.summative-report .course-overview-textbox {
    /* container size: descendants use font-size:1em (= 100% of parent) so this
       0.95em propagates to all of them while inline sizes are stripped */
    font-size: 0.95em;
    margin-top: 0.4rem;
    /* v4.18 #4: extra breathing room before the Academic Achievement row */
    margin-bottom: 1.2rem;
    /* v4.18 #3: match base .feedback-assessment 0.75rem left pad so the
       description lines up with the body instead of outdenting left */
    padding-left: 0.75rem;
}

.summative-report .course-overview-textbox p,
.summative-report .course-overview-textbox article p {
    margin-bottom: 0.2rem;
    line-height: 1.4;
    font-size: 0.95em;
}


/* ============================================================
   ATTITUDES TO LEARNING - RUBRIC
   Now matches the info-page table styling:
     - 3.5px navy outer frame
     - 1px navy inner gridlines
     - header row + first column tinted with --pem-tint
   ============================================================ */

.summative-report .rubric-wrap {
    margin-top: 0.4rem;
    margin-bottom: 1.5rem;
}

/* v1.18: IMT duplicate "Achievement". The Vue rubric-readonly component
   renders the rubric TITLE inside .rubric-wrap as
   <div class="u-pad-s"><h3>Achievement</h3></div>, duplicating the
   container's own <h5>Achievement</h5> that sits just above. Hide the
   in-rubric title (any h3, any nesting depth - the Vue mount depth varies)
   and its .u-pad-s wrapper so the padding gap goes too. The h5 stays as the
   single heading. Regular MS/SS rubric-wraps hold only .scrollable + table
   (no h3 / .u-pad-s), so both rules are inert there. Kept as SEPARATE rules:
   if the sanitiser drops the :has() one, the plain h3 hide still lands. */
.summative-report .rubric-wrap h3 {
    display: none !important;
}
.summative-report .rubric-wrap .u-pad-s:has(h3) {
    display: none !important;
}

.summative-report .rb {
    /* v1.3: border-collapse:collapse (was separate + border-spacing:0 1px). The
       row gap made horizontal dividers read thicker than verticals, so the grid
       looked non-uniform and the thinner verticals dropped out first when zoomed
       out. Collapse merges every shared edge into one identical line; the table's
       3.5px border still wins on the outer edge. */
    border-collapse: collapse;
    background: #fff;
    table-layout: fixed;
    width: 100%;
    border: 3.5px solid var(--pem-navy);
}

.summative-report .rb th,
.summative-report .rb td {
    border: 1.5px solid var(--pem-navy);   /* v1.3: uniform 1.5px grid */
    padding: 6px 10px;
    color: var(--pem-navy);
}

/* v1.13: pin the rubric's right outer edge to 3.5px (border-collapse rounding
   made it look thinner than the left). Paint-only, order-safe. */
.summative-report .rb td:last-child,
.summative-report .rb th:last-child {
    border-right: 3.5px solid var(--pem-navy) !important;
}

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

/* Synthetic first column in the header row - tinted */
.summative-report .rb thead tr::before {
    content: '';
    display: table-cell;
    width: 180px;
    background: var(--pem-tint);
    border: 1.5px solid var(--pem-navy);   /* v1.3: uniform 1.5px grid */
}

/* Header row (Exemplary / Proficient / Sound / Developing / Limited) - tinted */
.summative-report .rb thead th {
    background: var(--pem-tint);
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    font-size: 0.95rem;
    padding: 10px 8px;
    border: 1.5px solid var(--pem-navy);   /* v1.3: uniform 1.5px grid */
}

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

/* First column (Respect for Learning / Self-Management / ...) - tinted */
.summative-report .rb tbody th:first-child {
    background: var(--pem-tint);
    width: 180px;
    padding: 8px 12px;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.3;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;   /* v4.21: keep each label (e.g. Respect for Learning) on one line */
    border: 1.5px solid var(--pem-navy);   /* v1.3: uniform 1.5px grid */
}

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

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

/* v1.6: show the criterion column for Instrumental Music ONLY ("Achievement"
   container; $= is safe vs Academic/IB/Overall Achievement). See JS v2.2. */
.summative-report [data-test$="container-Achievement"] .rb thead tr th[colspan="2"] {
    display: table-cell !important; background: #AAC4E7 !important;   /* tint corner to match level headers */
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
}
.summative-report [data-test$="container-Achievement"] .rb thead tr::before { display: none !important; }
.summative-report [data-test$="container-Achievement"] .rb th.rb-criterion-name {
    display: table-cell !important; background: #fff !important; width: auto !important;
    text-align: left !important; vertical-align: middle !important;
    font-weight: 400 !important; white-space: normal !important;
}
.summative-report [data-test$="container-Achievement"] .rb th.rb-criterion-name p {
    margin: 0 !important; font-weight: 400 !important; text-align: left !important;
    font-size: 0.9rem !important; line-height: 1.3 !important;
}
/* 5 tick columns 11% (=55%); corner splits the rest into group + criterion */
.summative-report [data-test$="container-Achievement"] .rb thead th:not(:first-child),
.summative-report [data-test$="container-Achievement"] .rb tbody td { width: 11% !important; }

/* Hide descriptor text inside 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,
.summative-report .rb td div,
.summative-report .rb td div * { display: none !important; }

/* Default data cell - empty white */
.summative-report .rb td {
    background: #fff;
    text-align: center;
    vertical-align: middle;
    height: 38px;
    min-height: 38px;
}

/* SELECTED cell - same white background as unselected cells.
   The selection is shown by a navy tick alone, not by a
   coloured cell fill. Schoolbox base CSS sets
   `.rb-selected { background-color: lightgray !important;
   border-left: 2px solid black !important; }` so we need
   !important on both background and border to win. */
.summative-report .rb td.rb-selected {
    background: #fff !important;
    border: 1.5px solid var(--pem-navy) !important;   /* v1.3: uniform 1.5px grid */
}

.summative-report .rb td.rb-selected * { display: none !important; }

/* v1.8: CSS-drawn checkmark (was the \2714 glyph) - rotated box, right+bottom
   borders = the strokes. Keep this as the ONLY rb-selected::after rule (the
   sanitiser can expose a commented-out alt rule and let it override). GLYPH
   FALLBACK if Schoolbox strips transform (L-corner / no mark): restore
   content:'\2713'; color:var(--pem-navy); font:700 1.5rem/1 Arial. See JS v2.3. */
.summative-report .rb td.rb-selected::after {
    content: '' !important;
    display: inline-block !important;
    width: 0.4rem !important;
    height: 0.8rem !important;
    border: solid var(--pem-navy) !important;
    border-width: 0 0.16rem 0.16rem 0 !important;
    transform: rotate(45deg) !important;
    vertical-align: middle !important;
    margin-bottom: 0.18rem !important;
}

.summative-report .summative-content table.rb.markable {
    display: table;
    width: 100%;
}

/* Even widths across the five achievement-level columns */
.summative-report .rb thead th:not(:first-child),
.summative-report .rb tbody td {
    width: calc((100% - 180px) / 5);
}


/* ============================================================
   SUMMATIVE CONTENT PADDING
   ============================================================ */

.summative-report .summative-content {
    padding: 1.5rem 0;
}


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

@media print {
    @page {
        size: A4 portrait;
        margin: 0.5in 0.5in 0.75in 0.5in;
    }

    html, body { margin: 0; padding: 0; }

    .summative-report          { font-size: 1.06em; }   /* v1.5 */
    .summative-report .summative-content { padding: 0; box-sizing: border-box; }

    /* Re-state break-after avoid + the parity pair rules (v1.9 revert) */
    .summative-report .class-page          { page-break-after: avoid !important; }
    .summative-report [data-subject-overview-homepage] { page-break-after: avoid !important; }

    .summative-report .class-page:first-of-type {
        page-break-before: always !important;
    }
    .summative-report .class-page:nth-of-type(even):not(:nth-of-type(2)) {
        page-break-before: always !important;
    }
    .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;
        margin-top: 6rem !important;
    }
    /* Instrumental music on its own page (whole-school) - see main section. */
    .summative-report > div.folder-title.class-page:has(+ div.summative-content [data-test*="Attendance"]){page-break-before:always!important;margin-top:0!important}
    .summative-report .summative-content:has([data-test*="Attendance"]){page-break-after:always!important}
    /* PASTORAL / BOARDING (v4.19) - own page via positional headers (mirrors
       the general-section rule). nth-last-child(2) = pastoral header (non-
       boarder) or boarding header (boarder); nth-last-child(4) = boarder
       pastoral header. */
    .summative-report > .folder-title.class-page.summative-content:nth-last-child(2){page-break-before:always!important;margin-top:0!important}
    .summative-report:has([data-test="summative-preview-feedback-container-Boarding Comment"]) > .folder-title.class-page.summative-content:nth-last-child(4){page-break-before:always!important;margin-top:0!important}

    .summative-report .introduction {
        page-break-after: always !important;
    }
    .summative-report .header-content {
        page-break-after: always !important;
        flex-shrink: 0 !important;
    }
    .summative-report > .card {
        flex-shrink: 0 !important;
    }

    .summative-report .rubric-wrap,
    .summative-report .feedback-assessment-container,
    .summative-report .summative-content {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

:root {
                --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)
        );
            --body-background-r: 239;
        --body-background-g: 237;
        --body-background-b: 237;
        --body-background-h: 0;
        --body-background-s: 5.9%;
        --body-background-l: 93.3%;
        --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)
        );
            --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.6%;
        --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-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-hover-r: 128;
        --navigation-hover-g: 188;
        --navigation-hover-b: 232;
        --navigation-hover-h: 205.4;
        --navigation-hover-s: 69.3%;
        --navigation-hover-l: 70.6%;
        --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-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.6%;
        --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-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-hover-r: 128;
        --off-canvas-hover-g: 188;
        --off-canvas-hover-b: 232;
        --off-canvas-hover-h: 205.4;
        --off-canvas-hover-s: 69.3%;
        --off-canvas-hover-l: 70.6%;
        --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)
        );
            --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)
        );
            --accounts-menu-background-r: 128;
        --accounts-menu-background-g: 188;
        --accounts-menu-background-b: 232;
        --accounts-menu-background-h: 205.4;
        --accounts-menu-background-s: 69.3%;
        --accounts-menu-background-l: 70.6%;
        --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-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-hover-r: 128;
        --accounts-menu-hover-g: 188;
        --accounts-menu-hover-b: 232;
        --accounts-menu-hover-h: 205.4;
        --accounts-menu-hover-s: 69.3%;
        --accounts-menu-hover-l: 70.6%;
        --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.6%;
        --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.2;
        --content-ui-background-s: 100%;
        --content-ui-background-l: 87.8%;
        --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.8;
        --content-ui-hover-s: 100%;
        --content-ui-hover-l: 91%;
        --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.4;
        --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)
        );
            --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.6%;
        --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.7;
        --accent-background-s: 100%;
        --accent-background-l: 97.3%;
        --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)
        );
            --form-border-color-r: 193;
        --form-border-color-g: 229;
        --form-border-color-b: 255;
        --form-border-color-h: 205.2;
        --form-border-color-s: 100%;
        --form-border-color-l: 87.8%;
        --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.8;
        --form-bg-hover-color-s: 100%;
        --form-bg-hover-color-l: 91%;
        --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)
        );
            --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.6%;
        --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)
        );
            --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.6%;
        --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: 35;
        --body-foreground-h1-g: 34;
        --body-foreground-h1-b: 34;
        --body-foreground-h1-h: 0;
        --body-foreground-h1-s: 1.4%;
        --body-foreground-h1-l: 13.5%;
        --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)
        );
    }