/* =============================================================================
   THE REPORT CARD.

   Loaded twice and written once: the app links it so the wizard can show the
   card beside the form, and the printer reads the same file into the blank
   tab it prints from. Nothing in here knows about the app around it, which is
   what lets the printed sheet look like the preview.

   Sizes are in px against a base the caller sets on .rp-card: the wizard
   shrinks it to sit in a column, the printer draws it at reading size.
   ========================================================================== */

/* =============================================================================
   THE CARD ITSELF.

   Scaled down but laid out exactly as the printed one: the same twelve bands in
   the same order, taken from the school's own legacy templates.
   ========================================================================== */

/* Behind everything, faint, the way it prints. */
.rp-card.rp-watermarked { position: relative; }
.rp-card.rp-watermarked::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--rp-watermark);
  background-repeat: no-repeat; background-position: center;
  background-size: 55%; opacity: .08; pointer-events: none;
}
.rp-card > * { position: relative; }

.rp-header { display: block; width: 100%; margin-bottom: 6px; }
.rp-header--missing {
  background: #fee2e2; color: #b91c1c; text-align: center;
  padding: 10px; border-radius: 3px; font-size: 9px;
}
.rp-title {
  text-align: center; font-size: 12px; font-weight: 700;
  margin: 4px 0 8px; text-transform: uppercase;
}

.rp-top { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.rp-identity { flex: 1; border-collapse: collapse; }
.rp-identity td { border: 1px solid #cbd5e1; padding: 2px 5px; }
.rp-label { color: #475569; white-space: nowrap; }
.rp-value { background: #fff; font-weight: 600; }
.rp-photo {
  width: 58px; height: 62px; border: 2px solid #fff; background: #e2e8f0;
  display: flex; align-items: center; justify-content: center;
  color: #94a3b8; font-size: 8px; flex: 0 0 auto;
}

.rp-table { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.rp-table th, .rp-table td { border: 1px solid #000; padding: 2px 4px; }
.rp-table thead th { background: #ccc; font-size: 8px; text-align: left; }
.rp-num { text-align: center; white-space: nowrap; }
.rp-bold { font-weight: 700; color: #b91c1c; }
.rp-grade { font-weight: 700; color: #15803d; }
.rp-w { font-weight: 400; font-size: 7px; }
/* The raw mark beside its contribution, where the column asks for both. */
.rp-sub { color: #64748b; font-size: 8px; }
.rp-subject { font-weight: 600; }
.rp-remark, .rp-teacher { font-size: 8px; }
.rp-average td { background: #f1f5f9; font-weight: 700; }
.rp-section {
  font-weight: 700; font-size: 9px; margin: 6px 0 3px; text-align: center;
}
.rp-points td { background: #f8fafc; font-size: 8px; }
.rp-projects thead th { background: #ddd; }

.rp-comment {
  display: flex; justify-content: space-between; gap: 10px;
  align-items: flex-start; margin: 6px 0; font-size: 8px;
}
.rp-signblock { display: flex; align-items: flex-start; gap: 8px; }
.rp-sign { text-align: center; min-width: 90px; }
.rp-signline {
  display: block; border-bottom: 1px solid #64748b; height: 18px; margin-bottom: 2px;
}
.rp-signature { display: block; max-height: 26px; margin: 0 auto 2px; }
.rp-signname { display: block; font-weight: 700; }
.rp-stamp { max-height: 46px; opacity: .8; }
.rp-stamp--missing {
  display: inline-block; border: 1px dashed #cbd5e1; border-radius: 50%;
  width: 44px; height: 44px; color: #94a3b8; font-size: 7px;
  display: flex; align-items: center; justify-content: center;
}

.rp-positions, .rp-strip {
  border: 1px solid #cbd5e1; background: #fff;
  padding: 3px 6px; margin: 4px 0; font-size: 8px;
}
.rp-keytitle { font-weight: 700; margin: 6px 0 2px; font-size: 8px; }
.rp-key th, .rp-key td { font-size: 7px; }
.rp-next { text-align: center; color: #15803d; font-weight: 600; margin-top: 6px; }
.rp-invalid {
  text-align: center; color: #b91c1c; font-style: italic;
  font-weight: 700; margin-top: 4px; font-size: 8px;
}

/* -----------------------------------------------------------------------------
   THE BANDS THE SCHOOLS' OWN CARDS HAVE AND OURS DID NOT.

   Read off six printed cards from three schools: the serial number at the top
   left of the title, the identity block in two columns, the QR line, the motto
   above the validity note, and the scaled/deviation colours in the
   computed-to-100 table.
   -------------------------------------------------------------------------- */
.rp-titlerow { position: relative; margin: 4px 0 8px; }
.rp-serial {
  position: absolute; left: 0; top: 0; font-size: 8px; color: #475569;
}
.rp-titlerow .rp-title { margin: 0; }

.rp-idgrid { display: flex; gap: 6px; flex: 1; align-items: flex-start; }
.rp-idgrid .rp-identity { flex: 1; }

.rp-scaled { color: #1d4ed8; }
.rp-up   { color: #15803d; }
.rp-down { color: #b91c1c; }

.rp-strip-table th { background: #ccc; font-size: 7px; text-align: center; }

.rp-qr { display: flex; align-items: center; gap: 6px; margin: 5px 0; font-size: 8px; }
.rp-qrbox {
  width: 26px; height: 26px; border: 1px solid #94a3b8; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  color: #94a3b8; font-size: 7px; flex: 0 0 auto;
}

.rp-terms td { font-size: 7px; }
.rp-motto {
  text-align: center; font-style: italic; font-weight: 600;
  margin-top: 6px; font-size: 9px;
}


/* Said on the card itself: a preview printed by mistake declares itself. */
.rp-sample {
  margin: 4px 0; padding: 3px 6px; border: 1px dashed #f59e0b;
  background: #fffbeb; color: #92400e; font-size: 8px; text-align: center;
}


/* =============================================================================
   THE CARD AT READING SIZE, AND ON PAPER.

   The wizard shrinks the card to 9px so it sits beside the form. Everywhere
   else — the printer's blank tab, a card opened on its own — it is drawn at
   the size a parent reads it at, and these are the rules that do that.
   ========================================================================== */
.rp-card {
  background: #faf9d0;           /* the paper colour the school prints on */
  color: #111; line-height: 1.35;
  font-size: 11px;
  padding: 14px;
}

/* One card, one sheet.

   `break-after` rather than the old `page-break-after`, with the old spelling
   kept beside it: a school printing 300 cards on whatever browser is on the
   bursar's machine is not the place to find out which one it understands. The
   last card takes no break, or every run ends on a blank sheet. */
.rp-sheet { break-after: page; page-break-after: always; }
.rp-sheet:last-child { break-after: auto; page-break-after: auto; }

/* A card must never be split across two sheets: half a marks table on page one
   and the signatures on page two is a card nobody can hand to a parent. */
.rp-card { break-inside: avoid; page-break-inside: avoid; }

/* A NAMED page, claimed by the cards alone. This stylesheet is loaded on every
   screen of the app, and an unnamed @page here overrode the landscape paper a
   wide report tab asks for, so exam mark sheets came out portrait.
   6 mm top and bottom: no room for the browser's own header and footer. */
@page rpcard { size: A4 portrait; margin: 6mm 8mm; }
.rp-card, .rp-sheet { page: rpcard; }

@media print {
  body { background: #fff; margin: 0; }
  /* The paper tint is the SCHOOL'S paper, not ours to print over it — a solid
     fill across every sheet is a cartridge nobody agreed to spend. */
  .rp-card { background: #fff; box-shadow: none; padding: 0; }
  .rp-watermarked::before { opacity: .07; }
}

/* Room to write on the printed sheet, where no comment was typed. */
.rp-blankline {
  display: inline-block; min-width: 55%; border-bottom: 1px dotted #94a3b8;
  height: 1em; vertical-align: bottom;
}