/* ===========================================================================
   The report card as the school's own document.

   These cards exist on paper first. The school has three Word templates — the
   kindergarten one landscape, the two prep ones portrait, all on LEGAL paper
   with half-inch margins — and parents know what they look like. So this
   stylesheet reproduces the document rather than styling a web page: the same
   paper, the same grid, the same grey headings, the same borders.

   It is deliberately NOT built from the portal's design tokens. Those make a
   screen pleasant to read; a report card has to come out of the printer
   matching the one that came before it.
   =========================================================================== */

/* ---- The sheet -----------------------------------------------------------
   215.9 x 355.6mm is US Legal, which is what the templates are set to. On
   screen the page is drawn at the same size so what you see is the sheet. */
.rcdoc {
    --rc-ink:    #000;
    --rc-rule:   #000;
    --rc-shade:  #d9d9d9;
    --rc-page-w: 215.9mm;
    --rc-page-h: 355.6mm;
    --rc-margin: 12.7mm;

    width: var(--rc-page-w);
    min-height: var(--rc-page-h);
    padding: var(--rc-margin);
    margin: 0 auto 18px;
    background: #fff;
    color: var(--rc-ink);
    font-family: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
    font-size: 9pt;
    line-height: 1.25;
    box-sizing: border-box;
    /* On screen only — a hint of the sheet's edge. Removed for print below. */
    box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
}

/* Kindergarten is landscape: the same sheet turned on its side. */
.rcdoc--kinder {
    --rc-page-w: 355.6mm;
    --rc-page-h: 215.9mm;
    font-family: "Times New Roman", Times, serif;
}

/* ---- The grid ------------------------------------------------------------
   Word's default table: hairline black borders, no gaps, text snug to the
   rule. fixed layout so the column widths taken from the template are the
   widths that print, rather than being renegotiated by the content. */
.rcdoc table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0 0 6px;
}
.rcdoc th,
.rcdoc td {
    border: 1px solid var(--rc-rule);
    padding: 2px 4px;
    vertical-align: top;
    text-align: left;
    font-weight: normal;
    word-wrap: break-word;
}
.rcdoc th,
.rcdoc .rc-shade { background: var(--rc-shade); font-weight: bold; }
.rcdoc .rc-c   { text-align: center; }
.rcdoc .rc-b   { font-weight: bold; }
.rcdoc .rc-mid { vertical-align: middle; }

/* A box a teacher writes a rating into. Empty on a blank card, and tall
   enough to write in by hand when one is printed before it is filled. */
.rcdoc .rc-box { height: 14px; text-align: center; vertical-align: middle; }

/* ---- The masthead --------------------------------------------------------
   Centre block at the top of every card: school, address, how to reach it. */
.rcdoc .rc-school { font-size: 14pt; font-weight: bold; text-align: center; line-height: 1.1; }
.rcdoc .rc-addr   { font-size: 10pt; font-weight: bold; text-align: center; }
.rcdoc .rc-contact{ font-size: 10pt; font-weight: bold; text-align: center; }
.rcdoc .rc-title  {
    font-size: 9pt; font-weight: bold; text-align: center;
    background: var(--rc-shade); border: 1px solid var(--rc-rule);
    padding: 2px; margin: 5px 0;
}

/* ---- The pupil's details -------------------------------------------------
   Rows of "LABEL: value" that wrap like the document's lines, with the value
   sitting on a rule so a blank card can be written on. */
.rcdoc .rc-fields { font-size: 9pt; font-weight: bold; margin: 0 0 6px; }
.rcdoc .rc-fields .rc-line {
    display: flex; flex-wrap: wrap; gap: 0 14px; margin-bottom: 3px; align-items: baseline;
}
.rcdoc .rc-fields .rc-f { display: flex; align-items: baseline; gap: 4px; }
.rcdoc .rc-fields .rc-f > u {
    display: inline-block; min-width: 26mm; border-bottom: 1px solid var(--rc-rule);
    text-decoration: none; font-weight: normal; padding: 0 3px;
}
.rcdoc .rc-fields .rc-f--wide > u { min-width: 70mm; }
.rcdoc .rc-fields .rc-f--full    { flex: 1 1 100%; }
.rcdoc .rc-fields .rc-f--full > u { flex: 1; min-width: 0; }

/* Yes / No the teacher rings. A box rather than a word, as on the paper. */
.rcdoc .rc-tick { display: inline-block; width: 11px; height: 11px;
                  border: 1px solid var(--rc-rule); margin: 0 3px -1px 0; }
.rcdoc .rc-tick--on { background: var(--rc-ink); }

/* The same box, clickable while the card is being filled in. The real
   checkbox stays — keyboard and screen readers use it — but is drawn as the
   paper's square, so the screen, and the card printed from it, look the same. */
.rcdoc .rc-pick { position: relative; display: inline-flex; align-items: center;
                  cursor: pointer; white-space: nowrap; margin-right: 6px; }
.rcdoc .rc-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.rcdoc .rc-pick input:checked + .rc-tick { background: var(--rc-ink);
                  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rcdoc .rc-pick input:focus-visible + .rc-tick { outline: 2px solid #2563eb; outline-offset: 1px; }
.rcdoc .rc-pick:hover .rc-tick { border-color: var(--rc-ink); }

/* ---- The remark bank -----------------------------------------------------
   The column of phrases a teacher chooses from. It is on the printed card in
   the school's template, so a parent can read what the chosen remark means. */
.rcdoc .rc-bank { font-size: 7pt; line-height: 1.22; }
.rcdoc .rc-bank b { display: block; font-size: 8pt; margin-bottom: 2px; }
.rcdoc .rc-bank ul { margin: 0; padding-left: 10px; }
.rcdoc .rc-bank li { margin: 0; }

/* ---- Keys and footers ----------------------------------------------------- */
.rcdoc .rc-key   { font-size: 8pt; line-height: 1.35; }
.rcdoc .rc-key b { display: block; }
.rcdoc .rc-sign  { height: 15mm; }
.rcdoc .rc-rule-line { display: inline-block; min-width: 45mm;
                       border-bottom: 1px solid var(--rc-rule); }

/* An inline label followed by a ruled space, used in the footers. */
.rcdoc .rc-ruled { display: flex; align-items: baseline; gap: 5px; }
.rcdoc .rc-ruled > span { flex: 1; border-bottom: 1px solid var(--rc-rule); }

/* The editable card: inputs that look like the paper rather than like a form. */
.rcdoc input[type="text"],
.rcdoc input[type="number"],
.rcdoc input[type="date"],
.rcdoc select,
.rcdoc textarea {
    font: inherit; color: inherit; width: 100%;
    border: 0; border-bottom: 1px solid var(--rc-rule);
    background: #fffbe8;                      /* only so staff can see what is fillable */
    padding: 0 2px; box-sizing: border-box; border-radius: 0;
}
.rcdoc td > input[type="text"],
.rcdoc td > input[type="number"],
.rcdoc td > select { border-bottom: 0; background: #fffbe8; text-align: center; }
.rcdoc textarea { resize: vertical; min-height: 13mm; border: 0; }

/* ===========================================================================
   PRINT
   The sheet is already the right size, so printing is mostly a matter of
   getting out of the way: no shadow, no portal around it, and the paper set
   explicitly so the browser does not fall back to Letter or A4.
   =========================================================================== */
@media print {
    .rcdoc {
        box-shadow: none;
        margin: 0;
        padding: 0;                 /* @page owns the margin when printing */
        width: auto;
        min-height: 0;
    }
    /* Grey headings must survive. Browsers drop background colours by default
       and the card's structure is carried by them. */
    .rcdoc th,
    .rcdoc .rc-shade,
    .rcdoc .rc-title {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    /* Nothing a teacher typed should read as a form on paper. */
    .rcdoc input, .rcdoc select, .rcdoc textarea {
        background: transparent !important;
        -webkit-appearance: none; appearance: none;
    }
    /* A card is one sheet; a row split across two is unreadable. */
    .rcdoc table { page-break-inside: auto; }
    .rcdoc tr    { page-break-inside: avoid; }
    .rcdoc--sheet { page-break-after: always; }
    .rcdoc--sheet:last-child { page-break-after: auto; }
}

/* ---- Masthead with the school's crest ------------------------------------
   The crest sits to the left of the name without pushing it off centre, so
   the block still reads as the document's centred heading. */
.rcdoc .rc-masthead { display: flex; align-items: center; justify-content: center; gap: 6mm; }
.rcdoc .rc-masthead__text { flex: 0 1 auto; }
.rcdoc .rc-crest { width: 20mm; height: 20mm; object-fit: contain; flex: none; }

/* ---- A table inside a cell (the conduct list on the Grades 4–6 card) ------ */
.rcdoc table.rc-inner { margin: 3px 0 0; }
.rcdoc table.rc-inner td,
.rcdoc table.rc-inner th { padding: 1px 3px; font-size: 8pt; }

/* ---- Kindergarten ---------------------------------------------------------
   Its list of skills is far too long for one column of a landscape sheet, so
   the school's template flows it across the page. Three tables side by side do
   the same thing and cannot break a row in half the way CSS columns would. */
.rcdoc--kinder .rc-cols { display: flex; gap: 4mm; align-items: flex-start; }
.rcdoc--kinder .rc-col  { flex: 1 1 0; min-width: 0; }
.rcdoc--kinder .rc-col table { font-size: 7.5pt; }
.rcdoc--kinder .rc-col td,
.rcdoc--kinder .rc-col th { padding: 1px 3px; }

/* The cover: a title page, so it is spaced down the sheet rather than packed. */
.rcdoc--kinder .rc-cover { min-height: 180mm; }
.rcdoc--kinder .rc-letter { max-width: 190mm; margin: 8mm auto 0; font-size: 10pt; line-height: 1.45; }
.rcdoc--kinder .rc-letter p { margin: 0 0 4mm; }
.rcdoc--kinder .rc-school { font-size: 16pt; }

/* Each part of the kindergarten card is its own sheet, as in the document. */
.rcdoc--kinder .rc-cover,
.rcdoc--kinder .rc-sheet2 { page-break-after: always; }

/* ---- On screen -------------------------------------------------------------
   The sheet is wider than most portal columns. Let it scroll sideways rather
   than squeezing the grid into something that is not the document. */
.portal-content .rcdoc { max-width: 100%; }
@media screen and (max-width: 1100px) {
    .rcdoc { transform-origin: top left; }
}

/* A sheet of columns that is followed by another starts a new page, exactly as
   the document's second landscape sheet does. */
.rcdoc--kinder .rc-cols--more { page-break-after: always; }

/* Kindergarten grades: the subject table and the tests behind this term's
   figures side by side, which a landscape sheet has the width for. */
.rcdoc--kinder .rc-grades { display: flex; gap: 4mm; align-items: flex-start; margin-bottom: 4mm; }
.rcdoc--kinder .rc-grades > * { flex: 1 1 0; min-width: 0; }
.rcdoc--kinder .rc-grades table { font-size: 8.5pt; }
/* Six figure columns share the sheet with the test list, so their headings are
   set smaller — and kept whole, rather than broken as "AVERAG / E". */
.rcdoc--kinder .rc-grades__sub th { font-size: 7pt; overflow-wrap: normal; word-wrap: normal; }

/* Where a figure came from, shown to staff while they fill the card in and
   never printed — the parent's copy should carry the mark, not its provenance. */
.rcdoc .rc-hint { display: block; font-size: 6.5pt; color: #666; line-height: 1.1; }
@media print { .rcdoc .rc-hint { display: none; } }

/* The worked breakdown under the subject table: the subtotal line that closes
   each subject is the figure carried up into the table above, so it is set off
   by a rule rather than looking like one more test. */
.rcdoc .rc-tests td { font-size: 8.5pt; }
.rcdoc .rc-tests .rc-subtotal td { border-top: 2px solid var(--rc-rule); background: #f3f3f3; }
@media print {
    .rcdoc .rc-tests .rc-subtotal td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}