/* Typed v3 document system. Every physical dimension below is part of the v2 compatibility contract. */
@page jpraxc-a4-portrait { size: A4 portrait; margin: 8mm; }
@page jpraxc-a4-landscape { size: A4 landscape; margin: 8mm; }

.jpraxc-rendered-preview { background: #dedbd9; }
.jpraxc-rendered-preview .print-preview-toolbar [data-preview-print] { color: #211719; background: var(--accent); }
.jpraxc-rendered-preview .print-preview-toolbar button:disabled { cursor: not-allowed; opacity: .42; }
.jpraxc-preview-warning { max-width: 440px; margin: 0 10px; color: #ffd9df; font-size: 9px; font-weight: 750; }
.jpraxc-document-stack {
  --doc-primary: var(--brand);
  --doc-secondary: var(--brand-deep);
  --doc-accent: var(--accent);
  --doc-canvas: var(--canvas);
  --doc-font: var(--ui-font);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12mm;
  min-width: max-content;
  color: #1d1819;
  font-family: var(--doc-font);
  font-variant-numeric: tabular-nums;
}
.jpraxc-document-stack,.jpraxc-document-stack * { box-sizing: border-box; font-family: var(--doc-font); }
.jpraxc-doc-page {
  position: relative;
  flex: none;
  overflow: hidden;
  padding: 5mm 5mm 10mm;
  border: 1px solid #d4cecb;
  color: #1d1819;
  background: #fff;
  box-shadow: 0 18px 55px rgba(32,20,23,.18);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.jpraxc-page--a4-portrait { page: jpraxc-a4-portrait; width: 194mm; height: 281mm; }
.jpraxc-page--a4-landscape { page: jpraxc-a4-landscape; width: 281mm; height: 194mm; }

.jpraxc-doc-letterhead {
  min-height: 25mm;
  display: grid;
  grid-template-columns: 20mm minmax(0,1fr);
  align-items: center;
  gap: 5mm;
  padding: 3mm 4mm;
  border: .35mm solid color-mix(in srgb,var(--doc-primary) 58%,#fff);
  border-bottom: 1.1mm solid var(--doc-primary);
  background: linear-gradient(90deg,color-mix(in srgb,var(--doc-primary) 5%,#fff),#fff 58%);
}
.jpraxc-doc-letterhead>img { width: 18mm; height: 18mm; object-fit: contain; }
.jpraxc-doc-letterhead>div { min-width: 0; text-align: center; }
.jpraxc-doc-letterhead span { display: block; margin-bottom: .8mm; color: var(--doc-accent); font-size: 6.5pt; font-weight: 900; letter-spacing: .13em; }
.jpraxc-doc-letterhead h1 { margin: 0; overflow-wrap: anywhere; color: var(--doc-secondary); font-size: 16pt; line-height: 1.05; }
/* The board, address and contact lines under the school name. Set heavier and
   darker than body text: at 6.4pt these are the lines a reader squints at on a
   printed page, and inheriting the 500 body weight left them faint. They stay
   neutral in colour — the school name is the only coloured line in the
   letterhead, and repeating that colour underneath flattens the hierarchy. */
.jpraxc-doc-letterhead p { margin: .6mm 0 0; color: #3a3335; font-size: 6.4pt; font-weight: 700; line-height: 1.28; }
.jpraxc-doc-letterhead p:first-of-type { font-weight: 800; }
.jpraxc-doc-letterhead .school-letterhead-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: .6mm 3mm; margin-top: .8mm; }
.jpraxc-doc-letterhead .school-letterhead-contact-item { display: inline-flex; align-items: center; max-width: 100%; margin: 0; color: #3a3335; font-size: 6.3pt; font-weight: 700; letter-spacing: 0; line-height: 1.25; }
.jpraxc-doc-letterhead .school-letterhead-contact-address { flex-basis: 100%; justify-content: center; }
.jpraxc-doc-letterhead .school-letterhead-contact-item svg { flex: 0 0 auto; width: 2.8mm; height: 2.8mm; margin-right: 1mm; fill: none; stroke: var(--doc-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jpraxc-doc-letterhead .school-letterhead-contact-item b { min-width: 0; overflow-wrap: anywhere; }

/* What the document is, set immediately under the letterhead. */
.jpraxc-doc-title { display: flex; justify-content: center; margin: 0 0 2.5mm; padding: 1.6mm 4mm; border: .35mm solid color-mix(in srgb,var(--doc-primary) 58%,#fff); border-top: 0; background: color-mix(in srgb,var(--doc-primary) 6%,#fff); }
.jpraxc-doc-title span { color: var(--doc-secondary); font-size: 9pt; font-weight: 900; letter-spacing: .17em; line-height: 1.1; text-align: center; text-transform: uppercase; }

.jpraxc-document-heading {
  min-height: 21mm;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6mm;
  padding: 3mm 1mm 2.5mm;
  border-bottom: .3mm solid color-mix(in srgb,var(--doc-primary) 54%,#fff);
}
.jpraxc-document-heading>div { min-width: 0; }
.jpraxc-document-heading span { color: var(--doc-primary); font-size: 6.5pt; font-weight: 900; letter-spacing: .11em; }
.jpraxc-document-heading h2 { margin: 1mm 0 0; color: var(--doc-secondary); font-size: 15pt; line-height: 1.08; }
.jpraxc-document-heading p { margin: .8mm 0 0; color: #6b6264; font-size: 7pt; }
.jpraxc-document-heading>strong { flex: none; max-width: 70mm; padding: 2mm 3mm; border-radius: 2mm; color: var(--doc-secondary); background: color-mix(in srgb,var(--doc-primary) 7%,#fff); font-size: 7.2pt; overflow-wrap: anywhere; }
.jpraxc-document-heading--compact { min-height: 16mm; padding-block: 2mm; }
.jpraxc-document-heading--compact h2 { font-size: 12.5pt; }
.jpraxc-document-heading--landscape { min-height: 15mm; padding: 2mm 1mm; }
.jpraxc-document-heading--landscape h2 { font-size: 13pt; }
.jpraxc-student-photo { width: 21mm; height: 25mm; flex: 0 0 21mm; object-fit: cover; border: .35mm solid var(--doc-primary); border-radius: 1.5mm; }
.jpraxc-photo-placeholder { display: grid; place-items: center; color: #81787a; background: #f4f1f0; font-size: 6pt; text-align: center; }

.jpraxc-field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: .25mm solid #d9d2d0; border-left: .25mm solid #d9d2d0; }
.jpraxc-field-grid--admission { margin-top: 2.2mm; }
/* The printed record is set in the numbered sections the entry form asks its
   questions in, so the paper and the screen read the same way. The heading
   carries the same numbered chip the form's legend does. */
.jpraxc-field-section { margin-top: 2.6mm; break-inside: avoid; }
.jpraxc-field-section > h3 { display: flex; align-items: center; gap: 1.6mm; margin: 0; color: var(--doc-secondary); font-size: 6.6pt; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.jpraxc-field-section > h3 > span { display: grid; place-items: center; min-width: 4.6mm; height: 4.6mm; padding: 0 .6mm; border-radius: 1.2mm; color: #fff; background: var(--doc-primary); font-size: 5pt; font-weight: 900; }
.jpraxc-field-section .jpraxc-field-grid--admission { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 1.2mm; }
.jpraxc-field-section .jpraxc-doc-field--wide { grid-column: 1 / -1; }
.jpraxc-field-section[data-section="qualifications"] .jpraxc-field-grid--admission { grid-template-columns: repeat(6,minmax(0,1fr)); }
.jpraxc-field-section[data-section="qualifications"] .jpraxc-doc-field { grid-column: span 3; }
.jpraxc-field-grid--four { grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 2.2mm; }
.jpraxc-doc-field { min-height: 7.5mm; padding: 1.35mm 2mm; border-right: .25mm solid #d9d2d0; border-bottom: .25mm solid #d9d2d0; }
.jpraxc-doc-field span,.jpraxc-doc-field strong { display: block; }
.jpraxc-doc-field span { color: var(--doc-primary); font-size: 5.4pt; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
.jpraxc-doc-field strong { margin-top: .7mm; overflow-wrap: anywhere; font-size: 6.8pt; line-height: 1.2; }
.jpraxc-declaration { margin-top: 2.2mm; padding: 2.2mm 3mm; border: .25mm solid color-mix(in srgb,var(--doc-primary) 50%,#fff); background: color-mix(in srgb,var(--doc-canvas) 52%,#fff); }
.jpraxc-declaration h3 { margin: 0 0 1mm; color: var(--doc-secondary); font-size: 7.2pt; }
.jpraxc-declaration ol { margin: 0; padding-left: 4mm; }
.jpraxc-declaration li { margin: .45mm 0; font-size: 5.3pt; line-height: 1.18; }
.jpraxc-signature-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25mm; align-items: end; margin: 2.5mm 4mm 0; }
.jpraxc-signature-row--end { margin-top: auto; }
.jpraxc-doc-signature { min-height: 13mm; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.jpraxc-doc-signature img { width: 33mm; height: 8mm; object-fit: contain; }
.jpraxc-doc-signature i { width: 100%; margin-top: auto; border-top: .25mm solid #4b4445; }
.jpraxc-doc-signature span { width: 100%; padding-top: 1mm; color: #332d2f; font-size: 6.2pt; font-weight: 800; text-align: center; }
.jpraxc-doc-footer { position: absolute; right: 5mm; bottom: 2.5mm; left: 5mm; display: grid; grid-template-columns: 1fr auto 1fr; gap: 4mm; padding-top: 1.3mm; border-top: .25mm solid #ded8d6; color: #766e70; font-size: 5.6pt; }
.jpraxc-doc-footer span:nth-child(2) { color: var(--doc-primary); font-weight: 800; text-align: center; }
.jpraxc-doc-footer span:last-child { text-align: right; }

.jpraxc-attachment-frame { height: 211mm; display: grid; place-items: center; margin-top: 4mm; padding: 3mm; border: .3mm solid #d9d2d0; background: #faf9f8; }
.jpraxc-attachment-media { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; border: 0; }
.jpraxc-attachment-unavailable { color: #756c6e; font-size: 10pt; }

.jpraxc-attendance-page { display: flex; flex-direction: column; }
.jpraxc-attendance-summary { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin-top: 2mm; border-top: .25mm solid #d9d2d0; border-left: .25mm solid #d9d2d0; }
.jpraxc-attendance-summary .jpraxc-doc-field { text-align: center; }
.jpraxc-attendance-summary .jpraxc-doc-field strong { color: var(--doc-secondary); font-size: 10pt; }
.jpraxc-attendance-legend { display: flex; justify-content: center; gap: 3mm; margin: 2mm 0 1.5mm; font-size: 5.5pt; font-weight: 800; }
.jpraxc-attendance-legend span::before { content: ""; display: inline-block; width: 2.2mm; height: 2.2mm; margin-right: .8mm; border-radius: .5mm; vertical-align: -.35mm; background: currentColor; }
.jpraxc-attendance-legend .is-present { color: #12834f; }.jpraxc-attendance-legend .is-absent { color: #c43b46; }.jpraxc-attendance-legend .is-leave { color: #bc870c; }.jpraxc-attendance-legend .is-school-off { color: #85888d; }
.jpraxc-attendance-months { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.5mm; }
.jpraxc-attendance-month { overflow: hidden; border: .25mm solid #d9d2d0; }
.jpraxc-attendance-month h4 { margin: 0; padding: 1mm; color: #fff; background: var(--doc-primary); font-size: 6pt; text-align: center; }
.jpraxc-calendar-weekdays,.jpraxc-calendar-grid { display: grid; grid-template-columns: repeat(7,1fr); }
.jpraxc-calendar-weekdays b { padding: .55mm 0; color: var(--doc-secondary); background: color-mix(in srgb,var(--doc-primary) 7%,#fff); font-size: 4.1pt; text-align: center; }
.jpraxc-calendar-day { min-height: 3.2mm; display: grid; place-items: center; border-top: .2mm solid #eee9e7; border-right: .2mm solid #eee9e7; color: #262122; background: #fff; font-size: 4.2pt; font-style: normal; }
.jpraxc-calendar-day.is-present { color: #075c35; background: #dff5e8; }.jpraxc-calendar-day.is-absent { color: #9e182b; background: #fde5e8; }.jpraxc-calendar-day.is-leave { color: #825900; background: #fff0c9; }.jpraxc-calendar-day.is-school-off { color: #64676c; background: #e8e9eb; }.jpraxc-calendar-day--empty { background: #faf9f8; }

.jpraxc-exam-register-page { display: flex; flex-direction: column; }
.jpraxc-exam-register-page .jpraxc-doc-letterhead { min-height: 21mm; grid-template-columns: 16mm minmax(0,1fr); padding: 2mm 4mm; }
.jpraxc-exam-register-page .jpraxc-doc-letterhead>img { width: 14mm; height: 14mm; }
.jpraxc-exam-register-page .jpraxc-doc-letterhead h1 { font-size: 14pt; }
.jpraxc-exam-register-page .jpraxc-doc-title { margin-bottom: 0; padding: 1.1mm 4mm; }
.jpraxc-exam-register-page .jpraxc-doc-title span { font-size: 8pt; }
.jpraxc-exam-table-wrap { flex: 1; min-height: 0; margin-top: 2mm; }
.jpraxc-exam-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 5.7pt; }
.jpraxc-exam-table th,.jpraxc-exam-table td { height: 4.65mm; padding: .6mm .75mm; border: .22mm solid #bdb6b4; overflow-wrap: anywhere; }
.jpraxc-exam-table th { height: 8mm; color: #fff; background: var(--doc-primary); font-size: 5.2pt; }
.jpraxc-exam-table th:nth-child(1),.jpraxc-exam-table td:nth-child(1) { width: 9mm; text-align: center; }
.jpraxc-exam-table th:nth-child(2),.jpraxc-exam-table td:nth-child(2) { width: 42mm; }
.jpraxc-exam-table th:nth-child(3),.jpraxc-exam-table td:nth-child(3) { width: 28mm; }
.jpraxc-exam-table th span,.jpraxc-exam-table th small { display: block; }
.jpraxc-exam-table th small { margin-top: .5mm; color: color-mix(in srgb,var(--doc-accent) 72%,#fff); font-size: 4.6pt; }
.jpraxc-exam-table tbody tr:nth-child(even) { background: color-mix(in srgb,var(--doc-canvas) 45%,#fff); }
.jpraxc-blank-cell { min-width: 12mm; }
.jpraxc-exam-register-page .jpraxc-signature-row { min-height: 10mm; margin-top: 2mm; }
.jpraxc-exam-register-page .jpraxc-doc-signature { min-height: 8mm; }

.jpraxc-salary-slip-page { display: flex; flex-direction: column; gap: 2mm; padding: 5mm 5mm 10mm; border: .4mm solid var(--doc-primary); outline: .22mm solid color-mix(in srgb,var(--doc-accent) 58%,#fff); outline-offset: -2mm; }
.jpraxc-salary-form-reference { min-height: 7mm; display: flex; align-items: center; justify-content: space-between; gap: 5mm; padding: 1.2mm 2mm; color: var(--doc-secondary); border-bottom: .35mm solid var(--doc-primary); }
.jpraxc-salary-form-reference span { overflow-wrap: anywhere; font-size: 6.2pt; font-weight: 750; }.jpraxc-salary-form-reference strong { flex: none; color: var(--doc-primary); font-size: 7pt; letter-spacing: .09em; }
.jpraxc-salary-establishment { min-height: 28mm; display: grid; grid-template-columns: 19mm minmax(0,1fr) 43mm; align-items: center; gap: 4mm; padding: 2.5mm 3mm; border: .3mm solid color-mix(in srgb,var(--doc-primary) 48%,#fff); background: linear-gradient(100deg,color-mix(in srgb,var(--doc-primary) 6%,#fff),#fff 68%); }
.jpraxc-salary-establishment>img { width: 17mm; height: 17mm; object-fit: contain; }.jpraxc-salary-establishment>div { min-width: 0; }.jpraxc-salary-establishment>div>span { color: var(--doc-primary); font-size: 5.2pt; font-weight: 900; letter-spacing: .07em; }.jpraxc-salary-establishment h1 { margin: 1mm 0 0; overflow-wrap: anywhere; color: var(--doc-secondary); font-size: 13pt; line-height: 1.08; }.jpraxc-salary-establishment p { margin: 1mm 0 0; overflow-wrap: anywhere; color: #544c4e; font-size: 6.2pt; line-height: 1.3; }
.jpraxc-salary-establishment dl { align-self: stretch; display: grid; align-content: center; gap: 1mm; margin: 0; padding-left: 3mm; border-left: .25mm solid color-mix(in srgb,var(--doc-primary) 40%,#fff); }.jpraxc-salary-establishment dl div { margin: 0; }.jpraxc-salary-establishment dt { color: var(--doc-primary); font-size: 5.2pt; font-weight: 850; text-transform: uppercase; }.jpraxc-salary-establishment dd { margin: .5mm 0 0; overflow-wrap: anywhere; color: #282223; font-size: 6.5pt; font-weight: 800; }
.jpraxc-salary-statutory,.jpraxc-salary-data-grid,.jpraxc-salary-work-strip,.jpraxc-salary-payment>div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: .22mm solid #d8d2d0; border-left: .22mm solid #d8d2d0; }
.jpraxc-salary-datum { min-height: 8mm; padding: 1.25mm 1.6mm; border-right: .22mm solid #d8d2d0; border-bottom: .22mm solid #d8d2d0; }.jpraxc-salary-datum.is-span-2 { grid-column: span 2; }.jpraxc-salary-datum span,.jpraxc-salary-datum strong { display: block; }.jpraxc-salary-datum span { color: var(--doc-primary); font-size: 4.9pt; font-weight: 850; letter-spacing: .025em; text-transform: uppercase; }.jpraxc-salary-datum strong { margin-top: .7mm; overflow-wrap: anywhere; color: #2a2425; font-size: 6.4pt; line-height: 1.2; }
.jpraxc-salary-section>h2,.jpraxc-salary-payment>h2 { margin: 0; padding: 1.5mm 2mm; color: var(--doc-secondary); background: color-mix(in srgb,var(--doc-primary) 8%,#fff); font-size: 7.2pt; letter-spacing: .035em; text-transform: uppercase; }
.jpraxc-salary-work-strip { grid-template-columns: repeat(4,minmax(0,1fr)); }
.jpraxc-salary-money-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2mm; align-items: stretch; }
.jpraxc-salary-money-grid article { overflow: hidden; border: .25mm solid color-mix(in srgb,var(--doc-primary) 44%,#fff); }.jpraxc-salary-money-grid h2 { min-height: 9mm; display: flex; align-items: center; justify-content: space-between; gap: 2mm; margin: 0; padding: 1.7mm 2mm; color: #fff; background: var(--doc-primary); font-size: 7pt; }.jpraxc-salary-money-grid h2 small { color: color-mix(in srgb,var(--doc-accent) 72%,#fff); font-size: 5pt; font-weight: 800; white-space: nowrap; }
.jpraxc-salary-money-grid table { width: 100%; border-collapse: collapse; table-layout: fixed; }.jpraxc-salary-money-grid th,.jpraxc-salary-money-grid td { height: 6mm; padding: 1mm 1.8mm; border-bottom: .2mm solid #e0dcd9; font-size: 6pt; }.jpraxc-salary-money-grid th { overflow-wrap: anywhere; color: #4b4446; font-weight: 650; text-align: left; }.jpraxc-salary-money-grid td { width: 34mm; color: #211c1d; font-weight: 800; text-align: right; white-space: nowrap; }.jpraxc-salary-money-grid tr:last-child th,.jpraxc-salary-money-grid tr:last-child td { border-bottom: 0; }.jpraxc-salary-money-grid tr.is-total { color: var(--doc-secondary); background: color-mix(in srgb,var(--doc-accent) 14%,#fff); }.jpraxc-salary-money-grid tr.is-total th,.jpraxc-salary-money-grid tr.is-total td { color: var(--doc-secondary); font-weight: 900; }
.jpraxc-salary-net-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2mm; }.jpraxc-salary-net-summary>div { min-height: 15mm; display: flex; align-items: center; justify-content: space-between; gap: 3mm; padding: 2.5mm 3mm; border: .35mm solid var(--doc-primary); background: color-mix(in srgb,var(--doc-canvas) 48%,#fff); }.jpraxc-salary-net-summary span { color: var(--doc-primary); font-size: 6pt; font-weight: 900; letter-spacing: .04em; }.jpraxc-salary-net-summary strong { color: var(--doc-secondary); font-size: 12pt; white-space: nowrap; }
.jpraxc-salary-payment>div { grid-template-columns: repeat(4,minmax(0,1fr)); }
.jpraxc-salary-compliance { padding: 2mm 2.5mm; border-left: .8mm solid var(--doc-accent); color: #514a4c; background: color-mix(in srgb,var(--doc-canvas) 45%,#fff); }.jpraxc-salary-compliance strong { color: var(--doc-secondary); font-size: 5.8pt; text-transform: uppercase; }.jpraxc-salary-compliance p { margin: .7mm 0 0; overflow-wrap: anywhere; font-size: 5.3pt; line-height: 1.3; }
.jpraxc-salary-signatures { min-height: 19mm; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25mm; align-items: end; margin: 0 6mm; }.jpraxc-salary-signatures>div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }.jpraxc-salary-signatures i { width: 100%; border-top: .25mm solid #4b4445; }.jpraxc-salary-signatures strong { margin-top: 1mm; color: #332d2e; font-size: 6.2pt; }.jpraxc-salary-signatures span { margin-top: .4mm; color: #756d6f; font-size: 4.8pt; }
.jpraxc-salary-slip-page--compact { gap: 1.35mm; }.jpraxc-salary-slip-page--compact .jpraxc-salary-establishment { min-height: 24mm; padding-block: 1.8mm; }.jpraxc-salary-slip-page--compact .jpraxc-salary-datum { min-height: 7mm; padding-block: .9mm; }.jpraxc-salary-slip-page--compact .jpraxc-salary-money-grid th,.jpraxc-salary-slip-page--compact .jpraxc-salary-money-grid td { height: 5.3mm; padding-block: .6mm; }.jpraxc-salary-slip-page--compact .jpraxc-salary-signatures { min-height: 15mm; }
.jpraxc-salary-slip-page--tight { gap: .8mm; }.jpraxc-salary-slip-page--tight .jpraxc-salary-form-reference { min-height: 5.5mm; padding-block: .6mm; }.jpraxc-salary-slip-page--tight .jpraxc-salary-establishment { min-height: 21mm; }.jpraxc-salary-slip-page--tight .jpraxc-salary-establishment h1 { font-size: 11pt; }.jpraxc-salary-slip-page--tight .jpraxc-salary-datum { min-height: 6.2mm; padding: .6mm 1mm; }.jpraxc-salary-slip-page--tight .jpraxc-salary-datum span { font-size: 4.4pt; }.jpraxc-salary-slip-page--tight .jpraxc-salary-datum strong { margin-top: .35mm; font-size: 5.7pt; }.jpraxc-salary-slip-page--tight .jpraxc-salary-money-grid h2 { min-height: 7mm; padding-block: 1mm; }.jpraxc-salary-slip-page--tight .jpraxc-salary-money-grid th,.jpraxc-salary-slip-page--tight .jpraxc-salary-money-grid td { height: 4.7mm; font-size: 5.4pt; }.jpraxc-salary-slip-page--tight .jpraxc-salary-net-summary>div { min-height: 12mm; padding-block: 1.5mm; }.jpraxc-salary-slip-page--tight .jpraxc-salary-net-summary strong { font-size: 10pt; }.jpraxc-salary-slip-page--tight .jpraxc-salary-compliance { padding-block: 1mm; }.jpraxc-salary-slip-page--tight .jpraxc-salary-signatures { min-height: 12mm; }

.jpraxc-notice-page { display: flex; flex-direction: column; padding: 6mm 6mm 10mm; border: .35mm solid var(--doc-primary); outline: .25mm solid color-mix(in srgb,var(--doc-accent) 65%,#fff); outline-offset: -2mm; }
.jpraxc-notice-meta { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 4mm; border: .25mm solid #d9d2d0; }
.jpraxc-notice-meta>div { min-height: 15mm; padding: 2.5mm; border-left: .25mm solid #d9d2d0; }
.jpraxc-notice-meta>div:first-child { border-left: 0; }
.jpraxc-notice-meta span,.jpraxc-notice-meta strong { display: block; }
.jpraxc-notice-meta span { color: var(--doc-primary); font-size: 5.5pt; font-weight: 850; text-transform: uppercase; }
.jpraxc-notice-meta strong { margin-top: 1.4mm; overflow-wrap: anywhere; font-size: 7.2pt; }
.jpraxc-notice-content { flex: 1; min-height: 0; padding: 10mm 9mm 5mm; }
.jpraxc-notice-content>span { color: var(--doc-primary); font-size: 6.5pt; font-weight: 900; letter-spacing: .12em; }
.jpraxc-notice-content h2 { margin: 2mm 0 7mm; padding-bottom: 3mm; border-bottom: .35mm solid var(--doc-primary); color: var(--doc-secondary); font-size: 17pt; line-height: 1.2; }
.jpraxc-notice-body { color: #302a2b; font-size: 10pt; line-height: 1.75; white-space: normal; }
.jpraxc-notice-content aside { margin-top: 5mm; padding: 3mm; border: .3mm solid #b9273d; color: #8a1428; background: #fff0f2; }
.jpraxc-notice-content aside strong { font-size: 7pt; }.jpraxc-notice-content aside p { margin: 1mm 0 0; font-size: 7.5pt; }
.jpraxc-notice-manual-signature { width: 60mm; min-height: 23mm; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; align-self: flex-end; margin: 0 8mm 5mm 0; }
.jpraxc-notice-manual-signature i { width: 100%; border-top: .3mm solid #3e3738; }
.jpraxc-notice-manual-signature span { margin-top: 1.5mm; font-size: 7pt; font-weight: 800; }.jpraxc-notice-manual-signature small { margin-top: .6mm; color: #7e7577; font-size: 5.5pt; }
.jpraxc-notice-watermark { position: absolute; top: 46%; left: 50%; z-index: 2; transform: translate(-50%,-50%) rotate(-24deg); color: rgba(185,39,61,.14); font-size: 52pt; font-weight: 950; letter-spacing: .12em; pointer-events: none; }
.jpraxc-notice-page--compact .jpraxc-notice-content { padding-top: 6mm; }.jpraxc-notice-page--compact .jpraxc-notice-content h2 { margin-bottom: 4mm; font-size: 15pt; }.jpraxc-notice-page--compact .jpraxc-notice-body { font-size: 9pt; line-height: 1.55; }
.jpraxc-notice-page--tight .jpraxc-notice-meta>div { min-height: 12mm; padding: 1.7mm; }.jpraxc-notice-page--tight .jpraxc-notice-content { padding: 4mm 7mm 3mm; }.jpraxc-notice-page--tight .jpraxc-notice-content h2 { margin: 1mm 0 3mm; font-size: 13pt; }.jpraxc-notice-page--tight .jpraxc-notice-body { font-size: 8.5pt; line-height: 1.38; }.jpraxc-notice-page--tight .jpraxc-notice-manual-signature { min-height: 16mm; margin-bottom: 2mm; }

.jpraxc-id-sheet { padding: 2mm; border: 0; }
.jpraxc-id-grid { width: 277mm; height: 190mm; display: grid; grid-template-columns: repeat(5,54mm); grid-template-rows: repeat(2,86mm); column-gap: 1.75mm; row-gap: 18mm; align-content: start; justify-content: start; }
/* When fronts and backs print together, one student owns one column: the
   front above, that same student's back directly below it. Cutting a column
   yields both faces of one card together, ready to fold or laminate,
   instead of a front whose back sits elsewhere on the sheet. */
.jpraxc-id-grid[data-card-orientation="portrait"][data-card-mode="front-back"] { grid-auto-flow: column; }
.jpraxc-id-face { position: relative; width: 54mm; height: 86mm; overflow: hidden; border: .45mm solid var(--doc-secondary); border-radius: 3mm; color: #17202a; background: #fff; }
.jpraxc-id-face::after { content: ""; position: absolute; right: -13mm; bottom: -15mm; width: 38mm; height: 38mm; border-radius: 50%; background: color-mix(in srgb,var(--doc-accent) 16%,transparent); box-shadow: 0 0 0 6mm color-mix(in srgb,var(--doc-primary) 6%,transparent); pointer-events: none; }
.jpraxc-id-face>header { min-height: 14mm; display: grid; grid-template-columns: 9mm minmax(0,1fr); align-items: center; gap: 2mm; padding: 2mm; color: #fff; background: linear-gradient(115deg,var(--doc-secondary),var(--doc-primary)); }
.jpraxc-id-face>header img { width: 8mm; height: 8mm; object-fit: contain; border-radius: 1.5mm; background: #fff; }
.jpraxc-id-face>header strong,.jpraxc-id-face>header span { display: block; overflow: hidden; text-overflow: ellipsis; }
.jpraxc-id-face>header strong { display: -webkit-box; max-height: 6.2mm; font-size: 6.2pt; line-height: 1.08; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.jpraxc-id-face>header span { margin-top: .5mm; color: color-mix(in srgb,var(--doc-accent) 75%,#fff); font-size: 4.1pt; white-space: nowrap; }
.jpraxc-id-type { padding: 1.2mm 2mm; color: var(--doc-secondary); background: color-mix(in srgb,var(--doc-accent) 24%,#fff); font-size: 4.6pt; font-weight: 950; letter-spacing: .075em; text-align: center; }
.jpraxc-id-person { display: grid; justify-items: center; padding: 2mm 2mm 1mm; }
.jpraxc-id-person>img,.jpraxc-id-photo-placeholder { width: 18mm; height: 21mm; object-fit: cover; border: .35mm solid var(--doc-primary); border-radius: 2mm; }
.jpraxc-id-photo-placeholder { display: grid; place-items: center; color: #756c6e; background: #f3f0ef; font-size: 4.5pt; }
.jpraxc-id-person h3 { max-width: 48mm; margin: 1.3mm 0 0; overflow: hidden; color: var(--doc-secondary); font-size: 8.5pt; line-height: 1.05; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.jpraxc-id-face dl { position: relative; z-index: 1; margin: 1mm 2.5mm 0; }
.jpraxc-id-face dl>div { display: grid; grid-template-columns: 19mm minmax(0,1fr); gap: 1mm; margin: .95mm 0; font-size: 5.2pt; line-height: 1.15; }
.jpraxc-id-face dt { color: #6e6567; font-weight: 700; }.jpraxc-id-face dd { margin: 0; overflow: hidden; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.jpraxc-id-face--front>small { position: absolute; z-index: 1; right: 2.5mm; bottom: 1.6mm; left: 2.5mm; overflow: hidden; color: var(--doc-primary); font-size: 3.8pt; font-weight: 850; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.jpraxc-id-face--back>header { min-height: 14mm; }
.jpraxc-id-school-details { display: grid; gap: .5mm; min-height: 12mm; align-content: center; color: #17202a; font-weight: 800; text-align: center; }
.jpraxc-id-school-details span { display: block; overflow: hidden; }
.jpraxc-id-contact { min-height: 12mm; padding: 2mm 3mm; border-bottom: .25mm solid #ded7d5; color: #51494b; font-size: 4.5pt; line-height: 1.35; text-align: center; }
.jpraxc-id-face--back>p { margin: 3mm 3mm 1mm; color: var(--doc-secondary); font-size: 4.9pt; font-weight: 800; text-align: center; }
.jpraxc-id-face--back dl { margin-top: 2mm; }
.jpraxc-id-signatures { position: absolute; z-index: 1; right: 2mm; bottom: 12.25mm; left: 2mm; display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; }
.jpraxc-id-signature { min-height: 10mm; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.jpraxc-id-signature img { width: 18mm; height: 6mm; object-fit: contain; }.jpraxc-id-signature i { width: 100%; margin-top: auto; border-top: .22mm solid #51494b; }.jpraxc-id-signature span { margin-top: .7mm; font-size: 4.1pt; font-weight: 750; text-align: center; }
.jpraxc-id-code { position: absolute; z-index: 1; right: 2mm; bottom: 2mm; left: 2mm; display: grid; justify-items: center; }
.jpraxc-id-barcode { width: 40mm; height: 6.75mm; }.jpraxc-id-code strong { max-width: 45mm; margin-top: .3mm; overflow: hidden; font-size: 3.7pt; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  .jpraxc-rendered-preview { padding-inline: 10px; }
  .jpraxc-preview-warning { display: none; }
}

@media print {
  html,body { width: auto!important; min-width: 0!important; margin: 0!important; background: #fff!important; }
  body.preview-open> :not(.print-preview-overlay) { display: none!important; }
  .jpraxc-rendered-preview { position: static!important; inset: auto!important; overflow: visible!important; padding: 0!important; background: #fff!important; }
  .jpraxc-rendered-preview .print-preview-toolbar { display: none!important; }
  .jpraxc-document-stack { display: block; min-width: 0; gap: 0; }
  .jpraxc-doc-page { margin: 0!important; border: 0!important; box-shadow: none!important; break-after: page; page-break-after: always; }
  .jpraxc-doc-page:last-child { break-after: auto; page-break-after: auto; }
  .jpraxc-page--a4-portrait { width: 194mm!important; height: 281mm!important; }
  .jpraxc-page--a4-landscape { width: 281mm!important; height: 194mm!important; }
  .jpraxc-id-face { break-inside: avoid; page-break-inside: avoid; }
}

/* Student directory: photo plus identifying details, twelve to a landscape sheet. */
.jpraxc-directory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6mm; margin-top: 4mm; }
.jpraxc-directory-card { display: flex; align-items: center; gap: 3mm; padding: 3mm; border: 0.3mm solid #d8d2d0; border-radius: 2mm; }
.jpraxc-directory-card img, .jpraxc-directory-nophoto { flex: none; width: 18mm; height: 22mm; object-fit: cover; border: 0.3mm solid #d8d2d0; border-radius: 1mm; }
.jpraxc-directory-nophoto { display: grid; place-items: center; color: #9a9090; background: #f6f3f2; font-size: 2.4mm; text-align: center; }
.jpraxc-directory-card > div { display: flex; flex-direction: column; gap: 0.6mm; min-width: 0; }
.jpraxc-directory-card strong { font-size: 3.1mm; line-height: 1.2; }
.jpraxc-directory-card em { color: var(--doc-primary); font-size: 2.6mm; font-style: normal; font-weight: 700; }
.jpraxc-directory-card span { color: #5f5658; font-size: 2.5mm; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Compact student records: five bands to a landscape sheet. Sized in millimetres
   so the density holds on paper rather than only on screen. The page furniture is
   compressed on this kind because the bands need the height. */
.jpraxc-record-page .jpraxc-doc-letterhead { padding-bottom: 1.5mm; margin-bottom: 0; }
.jpraxc-record-page .jpraxc-doc-title { margin-bottom: 1.5mm; padding: .9mm 4mm; }
.jpraxc-record-page .jpraxc-doc-title span { font-size: 2.6mm; letter-spacing: .14em; }
.jpraxc-record-page .jpraxc-doc-letterhead img { width: 10mm; height: 10mm; }
.jpraxc-record-page .jpraxc-doc-letterhead h1 { font-size: 4.2mm; }
.jpraxc-record-page .jpraxc-doc-letterhead p { font-size: 2.1mm; line-height: 1.3; }
.jpraxc-record-page .jpraxc-document-heading { min-height: 0; margin: 0 0 1.5mm; padding: 0 0 1.2mm; }
.jpraxc-record-page .jpraxc-document-heading h2 { font-size: 3.4mm; }
.jpraxc-record-page .jpraxc-document-heading span, .jpraxc-record-page .jpraxc-document-heading p { font-size: 2mm; }
.jpraxc-record-page { display: flex; flex-direction: column; padding-bottom: 16.5mm; }
.jpraxc-record-list { flex: 1 1 auto; min-height: 0; display: grid; grid-auto-rows: max-content; align-content: start; gap: 2.6mm; }
.jpraxc-record-band { align-content: start; min-height: 40mm; }
.jpraxc-record-band { display: grid; grid-template-columns: 21mm 1fr; gap: 3.2mm; padding: 1.6mm 3mm; border: 0.35mm solid color-mix(in srgb,var(--doc-primary) 34%,#d8d2d0); border-radius: 1.8mm; background: linear-gradient(180deg,color-mix(in srgb,var(--doc-primary) 3%,#fff),#fff 36%); break-inside: avoid; }
.jpraxc-record-band img, .jpraxc-record-nophoto { width: 21mm; height: 26mm; object-fit: cover; border: 0.35mm solid color-mix(in srgb,var(--doc-primary) 45%,#d8d2d0); border-radius: 1mm; }
.jpraxc-record-nophoto { display: grid; place-items: center; color: #9a9090; background: #f6f3f2; font-size: 1.7mm; text-align: center; }
.jpraxc-record-body { min-width: 0; }
.jpraxc-record-body h3 { margin: 0 0 0.6mm; color: var(--doc-secondary); font-size: 3.9mm; font-weight: 900; line-height: 1.05; }
.jpraxc-record-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1.4mm 2mm; }
.jpraxc-record-cell { min-width: 0; display: flex; flex-direction: column; }
.jpraxc-record-cell span { color: var(--doc-primary); font-size: 1.8mm; font-weight: 850; letter-spacing: .02em; line-height: 1; text-transform: uppercase; }
.jpraxc-record-cell strong { color: #1d1819; font-size: 2.35mm; font-weight: 800; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The free-text fields need the width, so they span the grid. */
/* Field widths, in columns of eight. Every row on the sheet totals eight, so it
   reads as a grid rather than as ragged wrapped text. */
.jpraxc-record-cell.jpraxc-span-1 { grid-column: span 1; }
.jpraxc-record-cell.jpraxc-span-2 { grid-column: span 2; }
.jpraxc-record-cell.jpraxc-span-3 { grid-column: span 3; }
.jpraxc-record-cell.jpraxc-span-4 { grid-column: span 4; }
.jpraxc-record-cell.jpraxc-span-5 { grid-column: span 5; }
.jpraxc-record-cell.jpraxc-span-6 { grid-column: span 6; }
/* Subjects is the one field that legitimately runs to several values, so it
   wraps rather than being clipped to an ellipsis. */
.jpraxc-record-cell.jpraxc-span-5 strong, .jpraxc-record-cell.jpraxc-span-6 strong { overflow: visible; white-space: normal; text-overflow: clip; line-height: 1.12; }
/* Ten and twelve digit numbers, condensed so they read in full in one column. */
.jpraxc-record-cell--tight strong { font-size: 1.95mm; letter-spacing: -.02em; }
/* Three students to a page leaves the last band close to the footer, and a
   long address or a Hindi caption that wraps is enough to tip it over. The
   grid gives back a few millimetres so the sheet keeps its clearance. */
.jpraxc-record-grid { gap: 1mm 1.8mm; }
.jpraxc-record-band { padding: 1.3mm 2.8mm; }
/* The same name as the family writes it, under the English one it belongs to.
   Set lighter than the value so the pair reads as one entry, and clipped like
   the value so a long name cannot push the row out of the eight-column grid. */
.jpraxc-record-cell em { color: #4a4143; font-size: 2.1mm; font-style: normal; font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jpraxc-record-body h3 span { margin-left: 1.8mm; color: #4a4143; font-size: 2.9mm; font-weight: 800; }
/* The photograph, with the document count in a box beneath it. */
.jpraxc-record-media { display: grid; gap: 1.2mm; align-content: start; }
.jpraxc-record-docs { display: grid; gap: .3mm; padding: .9mm 1mm; border: .3mm solid color-mix(in srgb,var(--doc-primary) 34%,#d8d2d0); border-radius: 1mm; background: color-mix(in srgb,var(--doc-primary) 5%,#fff); color: #4f4749; font-size: 1.6mm; font-weight: 800; letter-spacing: .02em; text-align: center; text-transform: uppercase; }
.jpraxc-record-docs b { color: var(--doc-secondary); font-size: 2.6mm; font-weight: 900; line-height: 1; }


/* Verification barcode in the printed footer. Sized so a phone scanner reads it
   from paper; kept pure black on white because scanners need the contrast. */
.jpraxc-doc-verify { display: flex; align-items: center; justify-content: center; }
.jpraxc-barcode { display: block; height: 7mm; width: auto; max-width: 54mm; }
@media print { .jpraxc-barcode { height: 7mm; } }


/* Attendance drawn as a wall calendar, portrait: weeks across, days down. */
.jpraxc-cal-month { margin-top: 3mm; break-inside: avoid; }
.jpraxc-cal-month h3 { margin: 0 0 1.5mm; color: var(--doc-primary); font-size: 3.6mm; }
.jpraxc-cal-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.jpraxc-cal-table th { padding: 1mm 0; border: 0.25mm solid #d8d2d0; background: #f6f3f2; font-size: 2.3mm; text-transform: uppercase; }
.jpraxc-cal-table td { height: 14mm; padding: 0.8mm; border: 0.25mm solid #d8d2d0; vertical-align: top; }
.jpraxc-cal-day { display: block; color: #8a8081; font-size: 2.1mm; text-align: right; }
.jpraxc-cal-blank { background: #fbfaf9; }
.jpraxc-cal-off { background: #f1eeed; }
.jpraxc-cal-off em { display: block; margin-top: 0.6mm; color: #7d7476; font-size: 1.9mm; font-style: normal; text-align: center; }
.jpraxc-cal-nodata { background: #fff; }
.jpraxc-cal-low { background: #fdf3f4; }
.jpraxc-cal-today { outline: 0.5mm solid var(--doc-primary); outline-offset: -0.5mm; }
.jpraxc-cal-mark { display: block; margin-top: 1.2mm; font-size: 6mm; font-weight: 800; text-align: center; line-height: 1; }
.jpraxc-cal-present { color: #14684a; }
.jpraxc-cal-absent { color: #b5182f; }
.jpraxc-cal-late { color: #9a6400; }
.jpraxc-cal-leave { color: #6b4ba8; }
.jpraxc-cal-none { color: #c2baba; }
.jpraxc-cal-tally { display: block; margin-top: 1.4mm; color: #4a4243; font-size: 2.4mm; text-align: center; }
.jpraxc-cal-tally b { font-size: 3.2mm; }
.jpraxc-cal-tally i { margin: 0 0.8mm; color: #b3aaa9; font-style: normal; }
.jpraxc-cal-summary { display: flex; gap: 6mm; margin-top: 3mm; padding-top: 2mm; border-top: 0.3mm solid #ded8d6; }
.jpraxc-cal-summary div { display: flex; flex-direction: column; }
.jpraxc-cal-summary span { color: #7a7071; font-size: 2.1mm; text-transform: uppercase; }
.jpraxc-cal-summary strong { color: var(--doc-primary); font-size: 4.4mm; }
.jpraxc-cal-legend { display: flex; flex-wrap: wrap; gap: 3.5mm; margin-top: 2.5mm; color: #6b6264; font-size: 2.1mm; }
.jpraxc-cal-legend b { color: var(--doc-primary); }
.jpraxc-cal-legend-off { padding: 0 1.5mm; background: #f1eeed; }

/* Yearly attendance register: the twelve month calendars grow into whatever
   height the page has left, instead of sitting in a band with the rest of the
   sheet blank. The page is already a flex column, so the months take the slack
   and each day cell shares it. */
.jpraxc-attendance-page .jpraxc-attendance-months { flex: 1 1 auto; min-height: 0; align-content: stretch; grid-auto-rows: 1fr; }
.jpraxc-attendance-page .jpraxc-attendance-month { display: flex; flex-direction: column; min-height: 0; }
.jpraxc-attendance-page .jpraxc-calendar-grid { flex: 1 1 auto; grid-auto-rows: 1fr; }
.jpraxc-attendance-page .jpraxc-calendar-day { min-height: 0; font-size: 5.4pt; }
.jpraxc-attendance-page .jpraxc-calendar-weekdays b { font-size: 5pt; }
.jpraxc-attendance-page .jpraxc-attendance-month h4 { font-size: 7.5pt; }

/* The authorised signature belongs on the right of a school document. */
.jpraxc-signature-row { justify-items: end; text-align: right; }
.jpraxc-signature-row > :first-child { justify-self: start; text-align: left; }
/* Signatures sit at the foot of the admission page, just above the footer. */
.jpraxc-admission-page { display: flex; flex-direction: column; }
.jpraxc-admission-page .jpraxc-signature-row { margin-top: auto; margin-bottom: 1.75mm; }

.jpraxc-signature-row > *:only-child { grid-column: 2; }

/* Per-person attendance report: a page each for a session, four to a page for
   a month, ten lines to a page for a single day. */
.jpraxc-roster-list { display: grid; gap: 3mm; margin-top: 2mm; }
.jpraxc-roster-page { padding-bottom: 14mm; }
.jpraxc-roster-page .jpraxc-roster-list { min-height: 0; }
.jpraxc-roster-page .jpraxc-roster-block--year { padding: 1.6mm 2.5mm 2mm; }
.jpraxc-roster-page .jpraxc-roster-block--year .jpraxc-roster-totals { margin: 1mm 0; }
.jpraxc-roster-page .jpraxc-roster-legend { margin-top: 1.3mm; padding-top: 1mm; }
.jpraxc-roster-identity strong { display: block; color: var(--doc-secondary); font-size: 3.1mm; font-weight: 900; }
.jpraxc-roster-identity small { display: block; margin-top: .4mm; color: #5c5456; font-size: 2.2mm; font-weight: 700; }
.jpraxc-roster-block { padding: 2.1mm 3mm; border: .35mm solid color-mix(in srgb,var(--doc-primary) 34%,#d8d2d0); border-radius: 1.6mm; break-inside: avoid; }
.jpraxc-roster-block--year { padding-bottom: 3.4mm; }
.jpraxc-roster-totals { display: flex; flex-wrap: wrap; gap: 4mm; margin: 2mm 0; }
.jpraxc-roster-totals span { display: grid; color: #5c5456; font-size: 2mm; font-weight: 750; text-transform: uppercase; }
.jpraxc-roster-totals b { color: var(--doc-secondary); font-size: 3.4mm; font-weight: 900; }
.jpraxc-roster-days { display: grid; grid-template-columns: repeat(16, minmax(0,1fr)); gap: 1mm; }
.jpraxc-roster-day { display: block; padding: 1.5mm 0; border-radius: 1mm; background: #f3f1f0; font-size: 2mm; font-weight: 800; line-height: 1.15; text-align: center; }
.jpraxc-roster-day b { font-size: 2.1mm; font-weight: 900; }
.jpraxc-roster-day.is-present { color: #0d5c34; background: #dff5e8; } .jpraxc-roster-day.is-absent { color: #9e182b; background: #fde5e8; }
.jpraxc-roster-day.is-late { color: #7a5200; background: #fff0c9; } .jpraxc-roster-day.is-leave { color: #1d4d7a; background: #e2eefb; }
.jpraxc-roster-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; margin-top: 1.5mm; font-size: 2.4mm; }
.jpraxc-roster-table th, .jpraxc-roster-table td { padding: 1.1mm 2mm; border: .25mm solid #d9d2d0; text-align: left; }
.jpraxc-roster-table th { color: var(--doc-primary); font-size: 2.1mm; font-weight: 850; text-transform: uppercase; }
.jpraxc-roster-line { display: grid; grid-template-columns: minmax(0,2.2fr) 24mm 30mm minmax(0,1.6fr); gap: 3mm; align-items: center; padding: 1.8mm 2.5mm; border: .3mm solid #d8d2d0; border-radius: 1.2mm; break-inside: avoid; }
.jpraxc-roster-status { font-size: 2.4mm; font-weight: 850; } .jpraxc-roster-status.is-present { color: #0d5c34; } .jpraxc-roster-status.is-absent { color: #9e182b; }
.jpraxc-roster-times, .jpraxc-roster-remarks { color: #4f4749; font-size: 2.3mm; font-weight: 700; }

/* A session narrowed to a few months is set out day by day, month by month. */
.jpraxc-roster-month { margin-top: 2.4mm; }
.jpraxc-roster-month h4 { margin: 0 0 1.2mm; color: var(--doc-primary); font-size: 2.4mm; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.jpraxc-roster-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 3mm; margin-top: 3mm; padding-top: 2mm; border-top: .25mm solid #ded8d6; font-size: 2.1mm; font-weight: 800; }
.jpraxc-roster-legend .is-present { color: #0d5c34; } .jpraxc-roster-legend .is-absent { color: #9e182b; }
.jpraxc-roster-legend .is-late { color: #7a5200; } .jpraxc-roster-legend .is-leave { color: #1d4d7a; }
.jpraxc-roster-legend .is-holiday, .jpraxc-roster-legend .is-school_closed { color: #5c5456; }
.jpraxc-roster-day.is-holiday, .jpraxc-roster-day.is-school_closed { color: #6b6264; background: #eceae9; }
.jpraxc-roster-day.is-unmarked { color: #8a8183; background: #f7f5f5; }

/* A whole academic session on one page: twelve month strips, each a single
   row of 31 day cells so the columns line up down the page and the year is
   read at a glance rather than turned over. */
.jpraxc-roster-year { display: grid; gap: 1mm; margin-top: 1.5mm; }
.jpraxc-roster-month h4 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3mm; margin: 0 0 .5mm; color: var(--doc-primary); font-size: 2.3mm; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.jpraxc-roster-month h4 em { color: #5c5456; font-size: 2.1mm; font-style: normal; font-weight: 800; letter-spacing: 0; text-transform: none; }
.jpraxc-roster-days--year { grid-template-columns: repeat(16, minmax(0,1fr)); gap: .5mm; }
.jpraxc-roster-days--year .jpraxc-roster-day { padding: .6mm 0; border-radius: .9mm; line-height: 1.08; }
.jpraxc-roster-days--year .jpraxc-roster-day, .jpraxc-roster-days--year .jpraxc-roster-day b { font-size: 1.95mm; }

/* The weekday above the date, so a run of blanks reads as a weekend rather
   than a lapse in marking. On the year strips it shares the date line, which
   is the only way twelve months still fit a single page. */
.jpraxc-roster-day i { margin-right: 1.1mm; color: #857c7e; font-size: 1.6mm; font-style: normal; font-weight: 800; letter-spacing: .04em; }
.jpraxc-roster-days--year .jpraxc-roster-day i { margin-right: .8mm; font-size: 1.6mm; }

/* The serial number, set in the theme colour ahead of the name. */
.jpraxc-roster-identity strong i { display: inline-block; min-width: 6mm; color: var(--doc-primary); font-style: normal; font-weight: 900; }

/* A single day of students carries who to telephone, so the line gives the
   father, the date of birth and the mobile columns of their own rather than a
   second line that would cost four names off every page. */
.jpraxc-roster-line--student { grid-template-columns: minmax(0,2.1fr) minmax(0,1.5fr) 22mm 24mm 20mm minmax(0,1fr); }
.jpraxc-roster-parent { display: grid; gap: .3mm; min-width: 0; overflow-wrap: anywhere; color: #332d2e; font-size: 2.3mm; font-weight: 750; }
.jpraxc-roster-parent i { color: var(--doc-primary); font-size: 1.8mm; font-style: normal; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }

/* The weekday, the date and the status letter read as three separate facts,
   so they are spaced apart rather than run together as one token. */
.jpraxc-roster-day em { margin-left: 1.1mm; font-style: normal; }
.jpraxc-roster-days--year .jpraxc-roster-day em { margin-left: .8mm; }

/* ---------------------------------------------------------------------------
   Black and white printing.

   A school office prints on whatever machine is in the corridor. On a mono
   printer every tint in this stylesheet — the brand wash behind a letterhead,
   the pale green of a Present cell, the pale red of an Absent one — arrives as
   nearly the same grey, and pale grey label text arrives as nothing at all.

   So the whole palette is redefined rather than desaturated: black text, white
   fills, and rules doing the work the colours did. Status is already carried by
   a letter or a word in every renderer, so no meaning is lost; what changes is
   that the letters now sit on backgrounds a mono printer can tell apart —
   white, hatched or solid black — instead of on three similar greys.
   --------------------------------------------------------------------------- */
.jpraxc-print-mono .jpraxc-document-stack {
  --doc-primary: #000;
  --doc-secondary: #000;
  --doc-accent: #000;
  --doc-canvas: #fff;
  color: #000;
}
.jpraxc-print-mono .jpraxc-document-stack * { color: #000 !important; }
.jpraxc-print-mono .jpraxc-doc-page { border-color: #000; background: #fff; box-shadow: none; }

.jpraxc-print-mono .jpraxc-doc-letterhead { border-color: #000; border-bottom-width: 1.1mm; background: #fff; }
.jpraxc-print-mono .jpraxc-doc-letterhead>img { filter: grayscale(1) contrast(1.35); }
.jpraxc-print-mono .jpraxc-doc-title { border-color: #000; background: #fff; }
.jpraxc-print-mono .jpraxc-document-heading { border-bottom-color: #000; }
.jpraxc-print-mono .jpraxc-document-heading>strong { background: #fff; box-shadow: inset 0 0 0 .3mm #000; }
.jpraxc-print-mono .jpraxc-student-photo { border-color: #000; filter: grayscale(1) contrast(1.2); }
.jpraxc-print-mono .jpraxc-photo-placeholder { background: #fff; }

.jpraxc-print-mono .jpraxc-field-grid,
.jpraxc-print-mono .jpraxc-doc-field,
.jpraxc-print-mono .jpraxc-attendance-summary { border-color: #000; }
.jpraxc-print-mono .jpraxc-declaration { border-color: #000; background: #fff; }
.jpraxc-print-mono .jpraxc-doc-signature i { border-top-color: #000; }
.jpraxc-print-mono .jpraxc-doc-signature img { filter: grayscale(1) contrast(1.4); }
.jpraxc-print-mono .jpraxc-doc-footer { border-top-color: #000; }

.jpraxc-print-mono table th { background: #fff; }
.jpraxc-print-mono th,
.jpraxc-print-mono td { border-color: #000 !important; }
.jpraxc-print-mono tr.is-total { background: #fff; }

/* Attendance and any other status cell. A letter on white is Present; a hatched
   cell is a school holiday or closure; a solid black cell reversed to white type
   is an absence. Three fills a mono printer cannot confuse. */
.jpraxc-print-mono .jpraxc-roster-block,
.jpraxc-print-mono .jpraxc-roster-line { border-color: #000; }
.jpraxc-print-mono .jpraxc-roster-day { background: #fff; box-shadow: inset 0 0 0 .2mm #000; }
.jpraxc-print-mono .jpraxc-roster-day.is-absent { color: #fff !important; background: #000; }
.jpraxc-print-mono .jpraxc-roster-day.is-absent b,
.jpraxc-print-mono .jpraxc-roster-day.is-absent i,
.jpraxc-print-mono .jpraxc-roster-day.is-absent em { color: #fff !important; }
.jpraxc-print-mono .jpraxc-roster-day.is-late,
.jpraxc-print-mono .jpraxc-roster-day.is-leave { background: repeating-linear-gradient(45deg,#fff,#fff 1mm,#c9c9c9 1mm,#c9c9c9 1.7mm); }
.jpraxc-print-mono .jpraxc-roster-day.is-holiday,
.jpraxc-print-mono .jpraxc-roster-day.is-school_closed { background: repeating-linear-gradient(-45deg,#fff,#fff .8mm,#dcdcdc .8mm,#dcdcdc 1.6mm); }
.jpraxc-print-mono .jpraxc-roster-day.is-unmarked { background: #fff; box-shadow: inset 0 0 0 .2mm #b4b4b4; }
.jpraxc-print-mono .jpraxc-roster-status.is-absent { text-decoration: underline; }
.jpraxc-print-mono .jpraxc-roster-legend { border-top-color: #000; }

/* The preview chrome itself, so what is on screen is what comes off the tray. */
.jpraxc-print-mono.jpraxc-rendered-preview { background: #9a9a9a; }
/* The period panel on the right of the report heading, and the class and
   section set bold on the left: the two facts a reader checks first. */
.jpraxc-roster-scope b { color: var(--doc-secondary); font-size: 7.6pt; font-weight: 900; }
.jpraxc-roster-period { display: grid; gap: .8mm; text-align: right; }
.jpraxc-roster-period b { color: var(--doc-secondary); font-size: 7.6pt; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.jpraxc-roster-period span { color: #3a3335; font-size: 6.6pt; font-weight: 750; }

/* The older receipt and letter shell, held to the same black and white rules
   so the toggle means the same thing wherever it is pressed. */
.jpraxc-print-mono .print-document, .jpraxc-print-mono .print-document * { color: #000 !important; }
.jpraxc-print-mono .print-document { border-color: #000; background: #fff; box-shadow: none; }
.jpraxc-print-mono .print-document > header { border-color: #000; }
.jpraxc-print-mono .print-logo { filter: grayscale(1) contrast(1.35); }
.jpraxc-print-mono .print-document-meta, .jpraxc-print-mono .print-document-meta > div { border-color: #000; }
.jpraxc-print-mono .print-amount { background: #fff; box-shadow: inset 0 0 0 .3mm #000; }
.jpraxc-print-mono .print-document footer i, .jpraxc-print-mono .print-document > small { border-color: #000; }

/* The black and white switch in the preview toolbar, marked when it is on. */
.jpraxc-rendered-preview .print-preview-toolbar .preview-mono,
.print-preview-toolbar .preview-mono { color: #f7f4f3; background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.print-preview-toolbar .preview-mono[aria-pressed="true"] { color: #211719; background: #f7f4f3; box-shadow: none; }

/* Admit cards, two to a page. Everything a candidate is checked against at
   the hall door has to be legible at arm's length. */
.jpraxc-admit-list { display: grid; gap: 6mm; margin-top: 3mm; }
.jpraxc-admit-card { padding: 4mm; border: .4mm solid color-mix(in srgb,var(--doc-primary) 45%,#d8d2d0); border-radius: 2mm; break-inside: avoid; }
.jpraxc-admit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 4mm; padding-bottom: 2.4mm; border-bottom: .3mm solid color-mix(in srgb,var(--doc-primary) 30%,#d8d2d0); }
.jpraxc-admit-head span { color: var(--doc-accent); font-size: 2.2mm; font-weight: 900; letter-spacing: .16em; }
.jpraxc-admit-head h3 { margin: .8mm 0 0; color: var(--doc-secondary); font-size: 4.4mm; font-weight: 900; line-height: 1.05; }
.jpraxc-admit-head p { margin: .6mm 0 0; color: #5c5456; font-size: 2.4mm; font-weight: 700; }
.jpraxc-admit-head img, .jpraxc-admit-nophoto { width: 20mm; height: 25mm; flex: none; object-fit: cover; border: .35mm solid var(--doc-primary); border-radius: 1mm; }
.jpraxc-admit-nophoto { display: grid; place-items: center; color: #8a8183; background: #f5f2f1; font-size: 2mm; text-align: center; }
.jpraxc-admit-identity { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 3mm 4mm; margin: 3.4mm 0; }
.jpraxc-admit-identity span { display: block; color: var(--doc-primary); font-size: 2mm; font-weight: 850; text-transform: uppercase; }
.jpraxc-admit-identity strong { display: block; margin-top: .5mm; font-size: 2.9mm; font-weight: 850; overflow-wrap: anywhere; }
.jpraxc-admit-papers { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; font-size: 2.5mm; }
.jpraxc-admit-papers th, .jpraxc-admit-papers td { padding: 1.2mm 2mm; border: .25mm solid #d9d2d0; text-align: left; }
.jpraxc-admit-papers th { color: var(--doc-primary); font-size: 2.1mm; font-weight: 850; text-transform: uppercase; background: color-mix(in srgb,var(--doc-primary) 5%,#fff); }
.jpraxc-admit-papers td { font-weight: 700; }
.jpraxc-admit-rules { margin-top: 2.4mm; }
.jpraxc-admit-rules strong { color: var(--doc-secondary); font-size: 2.3mm; font-weight: 900; text-transform: uppercase; }
.jpraxc-admit-rules ol { margin: 1mm 0 0; padding-left: 4mm; }
.jpraxc-admit-rules li { margin: .4mm 0; color: #4f4749; font-size: 2.1mm; line-height: 1.25; }
.jpraxc-admit-signatures { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8mm; margin-top: 6mm; }
.jpraxc-admit-signatures span { display: grid; gap: 1mm; color: #332d2f; font-size: 2.2mm; font-weight: 800; text-align: center; }
.jpraxc-admit-signatures i { border-top: .25mm solid #4b4445; }

/* One card a page, so the card can breathe: the number is the line an
   invigilator reads off a list, so it is set apart from the rest. */
.jpraxc-admit-card { padding: 6mm; }
.jpraxc-admit-list { gap: 0; }
.jpraxc-admit-head h3 { font-size: 5.6mm; }
.jpraxc-admit-head img, .jpraxc-admit-nophoto { width: 26mm; height: 32mm; }
.jpraxc-admit-identity strong { font-size: 3.4mm; }
.jpraxc-admit-number { margin-top: 2.2mm; padding: 1.6mm 2.4mm; border: .3mm solid color-mix(in srgb,var(--doc-primary) 40%,#d8d2d0); border-radius: 1.2mm; background: color-mix(in srgb,var(--doc-primary) 5%,#fff); }
.jpraxc-admit-number span { display: block; color: var(--doc-primary); font-size: 2mm; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.jpraxc-admit-number strong { display: block; margin-top: .4mm; color: var(--doc-secondary); font-size: 3.2mm; font-weight: 900; letter-spacing: 0; white-space: nowrap; }
.jpraxc-admit-papers { font-size: 3mm; }
.jpraxc-admit-papers th, .jpraxc-admit-papers td { padding: 2mm 2.4mm; }
.jpraxc-admit-papers th { font-size: 2.4mm; }
.jpraxc-admit-rules li { font-size: 2.5mm; }
.jpraxc-admit-rules strong { font-size: 2.8mm; }
.jpraxc-admit-signatures { margin-top: 14mm; }
.jpraxc-admit-signatures span { font-size: 2.7mm; }

/* The timetable is read at a glance, so a timing and a hall name each stay on
   their own single line rather than wrapping into two. */
.jpraxc-admit-papers th:nth-child(1), .jpraxc-admit-papers td:nth-child(1) { width: 15%; white-space: nowrap; }
.jpraxc-admit-papers th:nth-child(2), .jpraxc-admit-papers td:nth-child(2) { width: 7%; white-space: nowrap; }
.jpraxc-admit-papers th:nth-child(3), .jpraxc-admit-papers td:nth-child(3) { width: 19%; }
.jpraxc-admit-papers th:nth-child(4), .jpraxc-admit-papers td:nth-child(4) { width: 21%; white-space: nowrap; }
.jpraxc-admit-papers th:nth-child(5), .jpraxc-admit-papers td:nth-child(5) { width: 29%; white-space: nowrap; }
.jpraxc-admit-papers td:nth-child(5) { font-size: 2.75mm; }
.jpraxc-admit-papers th:nth-child(6), .jpraxc-admit-papers td:nth-child(6) { width: 9%; text-align: right; }

/* The fee receipt borrows the admit card's frame too: a bordered card, the
   number set apart, an identity grid, then the itemised table. What is new is
   the money — a totals band, the amount in words, and an amount-free variant
   for the copy a school hands over without the figures on it. */
.jpraxc-receipt-card { padding: 6mm; margin-top: 3mm; border: .4mm solid color-mix(in srgb,var(--doc-primary) 45%,#d8d2d0); border-radius: 2mm; break-inside: avoid; }
.jpraxc-receipt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 4mm; padding-bottom: 2.6mm; border-bottom: .3mm solid color-mix(in srgb,var(--doc-primary) 30%,#d8d2d0); }
.jpraxc-receipt-head > div:first-child > span { color: var(--doc-accent); font-size: 2.2mm; font-weight: 900; letter-spacing: .16em; }
.jpraxc-receipt-head h3 { margin: .8mm 0 0; color: var(--doc-secondary); font-size: 5.2mm; font-weight: 900; line-height: 1.05; }
.jpraxc-receipt-head p { margin: .6mm 0 0; color: #5c5456; font-size: 2.4mm; font-weight: 700; }
.jpraxc-receipt-number { display: inline-block; margin-top: 2.2mm; padding: 1.6mm 2.4mm; border: .3mm solid color-mix(in srgb,var(--doc-primary) 40%,#d8d2d0); border-radius: 1.2mm; background: color-mix(in srgb,var(--doc-primary) 5%,#fff); }
.jpraxc-receipt-number span { display: block; color: var(--doc-primary); font-size: 2mm; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.jpraxc-receipt-number strong { display: block; margin-top: .4mm; color: var(--doc-secondary); font-size: 3.4mm; font-weight: 900; white-space: nowrap; }
.jpraxc-receipt-issued { flex: none; text-align: right; }
.jpraxc-receipt-issued span { display: block; color: var(--doc-primary); font-size: 2mm; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.jpraxc-receipt-issued strong { display: block; margin-top: .5mm; font-size: 3.2mm; font-weight: 900; white-space: nowrap; }
/* A voided receipt has to say so on the paper, not only on the screen. */
.jpraxc-receipt-void { display: inline-block; margin-top: 2mm; padding: 1mm 2.2mm; border: .35mm solid var(--doc-danger, #b52d3f); border-radius: 1mm; color: var(--doc-danger, #b52d3f); font-size: 2.4mm; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.jpraxc-receipt-identity { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 3mm 4mm; margin: 3.4mm 0; }
.jpraxc-receipt-identity span { display: block; color: var(--doc-primary); font-size: 2mm; font-weight: 850; text-transform: uppercase; }
.jpraxc-receipt-identity strong { display: block; margin-top: .5mm; font-size: 3.2mm; font-weight: 850; overflow-wrap: anywhere; }
.jpraxc-receipt-lines { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; font-size: 3mm; }
.jpraxc-receipt-lines th, .jpraxc-receipt-lines td { padding: 2mm 2.4mm; border: .25mm solid #d9d2d0; text-align: left; }
.jpraxc-receipt-lines thead th { color: var(--doc-primary); font-size: 2.4mm; font-weight: 850; text-transform: uppercase; background: color-mix(in srgb,var(--doc-primary) 5%,#fff); }
.jpraxc-receipt-lines td { font-weight: 700; }
.jpraxc-receipt-lines th:first-child, .jpraxc-receipt-lines td:first-child { width: 9%; }
.jpraxc-receipt-lines th:nth-child(4), .jpraxc-receipt-lines td:nth-child(4) { white-space: nowrap; }
.jpraxc-receipt-lines .jpraxc-amount { width: 13%; text-align: right; white-space: nowrap; }
.jpraxc-receipt-lines tfoot th, .jpraxc-receipt-lines tfoot td { font-weight: 900; background: color-mix(in srgb,var(--doc-primary) 4%,#fff); }
.jpraxc-receipt-lines tfoot th { text-align: right; text-transform: uppercase; font-size: 2.5mm; }
.jpraxc-receipt-summary { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8mm; margin-top: 4mm; padding: 3mm 4mm; border: .3mm solid color-mix(in srgb,var(--doc-primary) 34%,#d8d2d0); border-radius: 1.4mm; background: color-mix(in srgb,var(--doc-primary) 4%,#fff); }
.jpraxc-receipt-summary div { display: grid; text-align: right; }
.jpraxc-receipt-summary span { color: #5c5456; font-size: 2.2mm; font-weight: 750; text-transform: uppercase; }
.jpraxc-receipt-summary strong { font-size: 3.6mm; font-weight: 900; }
.jpraxc-receipt-summary .is-net strong { color: var(--doc-secondary); font-size: 4.6mm; }
.jpraxc-receipt-words { margin: 3mm 0 0; padding: 2.2mm 3mm; border-left: .8mm solid var(--doc-accent); background: color-mix(in srgb,var(--doc-accent) 8%,#fff); font-size: 2.9mm; font-weight: 800; }
.jpraxc-receipt-words span { display: block; color: var(--doc-primary); font-size: 2mm; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.jpraxc-receipt-note { margin: 3mm 0 0; color: #4f4749; font-size: 2.3mm; line-height: 1.35; }
/* A receipt is signed by the two people at the counter, so its signature row
   is two columns rather than the admit card's three. */
.jpraxc-receipt-signatures { grid-template-columns: repeat(2, minmax(0,1fr)); }
/* The amount-free copy: every figure leaves, and the table closes up so the
   remaining columns still fill the width rather than trailing off mid-page.
   Each line keeps a settled mark in place of its figures, so the copy still
   reads as a receipt for those fees rather than a list of them. */
.jpraxc-paid-only { display: none; }
/* A salary receipt has no discount, no late fee and no due date — those belong
   to a fee. The columns leave rather than printing a column of zeroes. */
.jpraxc-receipt-card--salary .jpraxc-fee-only { display: none; }
.jpraxc-receipt-card--salary .jpraxc-receipt-lines .jpraxc-amount { width: 20%; }
.jpraxc-receipt--no-amount .jpraxc-amount { display: none; }
.jpraxc-receipt--no-amount .jpraxc-paid-only { display: table-cell; width: 22%; text-align: right; }
.jpraxc-receipt--no-amount td.jpraxc-paid-only { color: var(--doc-secondary); font-weight: 900; }
.jpraxc-receipt--no-amount .jpraxc-receipt-lines th:first-child, .jpraxc-receipt--no-amount .jpraxc-receipt-lines td:first-child { width: 12%; }
.jpraxc-receipt--no-amount .jpraxc-receipt-lines tfoot { display: none; }

/* A marksheet borrows the admit card's frame; only the totals band is new. */
.jpraxc-marksheet { padding: 6mm; border: .4mm solid color-mix(in srgb,var(--doc-primary) 45%,#d8d2d0); border-radius: 2mm; }
.jpraxc-marksheet-table th:nth-child(n), .jpraxc-marksheet-table td:nth-child(n) { width: auto; white-space: normal; }
.jpraxc-marksheet-table th:first-child, .jpraxc-marksheet-table td:first-child { width: 40%; }
.jpraxc-marksheet-table td:not(:first-child), .jpraxc-marksheet-table th:not(:first-child) { text-align: right; }
.jpraxc-marksheet-totals { display: flex; flex-wrap: wrap; gap: 10mm; margin-top: 4mm; padding: 3mm 4mm; border: .3mm solid color-mix(in srgb,var(--doc-primary) 34%,#d8d2d0); border-radius: 1.4mm; background: color-mix(in srgb,var(--doc-primary) 4%,#fff); }
.jpraxc-marksheet-totals span { display: grid; color: #5c5456; font-size: 2.2mm; font-weight: 750; text-transform: uppercase; }
.jpraxc-marksheet-totals b { color: var(--doc-secondary); font-size: 4.4mm; font-weight: 900; }

/* The class teacher's own sentence, and the ranks beside the totals. */
.jpraxc-marksheet-remarks { margin-top: 3mm; padding: 2.6mm 3.4mm; border-left: .8mm solid var(--doc-primary); background: color-mix(in srgb,var(--doc-primary) 4%,#fff); }
.jpraxc-marksheet-remarks span { display: block; color: var(--doc-primary); font-size: 2.1mm; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.jpraxc-marksheet-remarks p { margin: .8mm 0 0; font-size: 2.7mm; font-weight: 650; line-height: 1.3; }
.jpraxc-marksheet-totals span { min-width: 22mm; }

/* Eleven rows to a page leaves the sheet roomy, so the two signatures are
   pinned just above the footer rule instead of drifting under the last row. */
.jpraxc-exam-register-page, .jpraxc-blank-marksheet-page { display: flex; flex-direction: column; padding-bottom: 12mm; }
.jpraxc-exam-table-wrap { flex: 0 0 auto; }
.jpraxc-exam-signatures { margin-top: auto; margin-bottom: 0; padding-top: 2mm; }
.jpraxc-exam-signatures .jpraxc-doc-signature { min-height: 9mm; }

/* Ten candidates a page, so the sheet is roomy; a senior register carries two
   signing columns per subject and has to stay inside the page either way. */
.jpraxc-exam-table { width: 100%; table-layout: fixed; }
.jpraxc-exam-table th, .jpraxc-exam-table td { overflow: hidden; }
.jpraxc-exam-table th:nth-child(1), .jpraxc-exam-table td:nth-child(1) { width: 8mm; }
.jpraxc-exam-table th:nth-child(2), .jpraxc-exam-table td:nth-child(2) { width: 46mm; }
.jpraxc-exam-table th:nth-child(3), .jpraxc-exam-table td:nth-child(3) { width: 34mm; }
.jpraxc-exam-table th, .jpraxc-exam-table td { font-size: 2.2mm; font-weight: 800; }
.jpraxc-exam-table th { font-weight: 900; }
.jpraxc-exam-table th small { font-size: 1.9mm; font-weight: 800; }
.jpraxc-exam-table tbody td { color: #1d1819; }
.jpraxc-exam-table--senior th:nth-child(2), .jpraxc-exam-table--senior td:nth-child(2) { width: 38mm; }
.jpraxc-exam-table--senior th:nth-child(3), .jpraxc-exam-table--senior td:nth-child(3) { width: 28mm; }

/* The practical marks, said once beneath the timetable. Deliberately dateless:
   a practical runs on whichever day the batch is called. */
.jpraxc-admit-practical { margin: 2mm 0 0; padding: 1.8mm 2.4mm; border: .25mm solid color-mix(in srgb,var(--doc-primary) 30%,#d8d2d0); border-radius: 1.2mm; background: color-mix(in srgb,var(--doc-primary) 4%,#fff); font-size: 2.6mm; font-weight: 800; }
.jpraxc-admit-practical span { margin-right: 2mm; color: var(--doc-primary); font-size: 2.2mm; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

/* Nine columns for a senior sheet: the subject keeps its width, the six part
   columns share the middle, and the grouped head reads as two tiers. */
.jpraxc-marksheet-table--senior th:first-child, .jpraxc-marksheet-table--senior td:first-child { width: 22%; }
.jpraxc-marksheet-table--senior th, .jpraxc-marksheet-table--senior td { width: auto; font-size: 2.7mm; }
.jpraxc-marksheet-table--senior thead tr:first-child th:not(:first-child) { text-align: center; }
.jpraxc-marksheet-table--senior thead tr + tr th { font-size: 2.1mm; }

/* The timetable grid: periods across, days down, breaks shaded shut. */
.jpraxc-tt-table { width: 100%; margin-top: 2mm; table-layout: fixed; border-collapse: collapse; }
.jpraxc-tt-table th, .jpraxc-tt-table td { padding: 1.6mm 1.4mm; border: .25mm solid #d9d2d0; text-align: center; overflow: hidden; }
.jpraxc-tt-table thead th { background: color-mix(in srgb,var(--doc-primary) 7%,#fff); color: var(--doc-primary); font-size: 2.3mm; font-weight: 900; text-transform: uppercase; }
.jpraxc-tt-table thead th small { display: block; margin-top: .4mm; color: #5c5456; font-size: 2mm; font-weight: 800; text-transform: none; }
.jpraxc-tt-table thead th:first-child, .jpraxc-tt-table tbody th { width: 22mm; color: var(--doc-secondary); font-size: 2.2mm; font-weight: 900; letter-spacing: .02em; }
.jpraxc-tt-table td strong { display: block; font-size: 2.6mm; font-weight: 900; line-height: 1.15; }
.jpraxc-tt-table td small { display: block; margin-top: .5mm; color: #3a3335; font-size: 2.1mm; font-weight: 850; line-height: 1.15; }
.jpraxc-tt-break { color: #6b6264; background: #efecea; font-size: 2.2mm; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.jpraxc-tt-free { color: #a89f9f; font-weight: 800; }

/* The grid owns the rest of the page: six days share whatever height the
   letterhead and heading leave, so the sheet prints full rather than ending
   in a third of blank paper. */
.jpraxc-tt-wrap { flex: 1 1 auto; display: flex; min-height: 0; margin-bottom: 2mm; }
.jpraxc-tt-signatures { flex: 0 0 auto; display: flex; justify-content: flex-end; margin: 0 4mm 1.5mm 0; }
.jpraxc-tt-signatures .jpraxc-doc-signature { min-height: 8mm; width: 45mm; }
.jpraxc-tt-wrap .jpraxc-tt-table { height: 100%; }

/* SESSION FEE STRUCTURE: classes in school order, each closed by its session total. */
.jpraxc-feestruct-table { width: 100%; min-width: 0; margin-top: 2mm; table-layout: fixed; border-collapse: collapse; }
.jpraxc-feestruct-table th, .jpraxc-feestruct-table td { padding: 1.7mm 2mm; border: .25mm solid #d9d2d0; font-size: 2.5mm; text-align: left; }
.jpraxc-feestruct-table thead th { background: color-mix(in srgb,var(--doc-primary) 7%,#fff); color: var(--doc-primary); font-size: 2.3mm; font-weight: 900; text-transform: uppercase; }
.jpraxc-feestruct-table .jpraxc-feestruct-amount { text-align: right; font-variant-numeric: tabular-nums; }
.jpraxc-feestruct-group th { background: color-mix(in srgb,var(--doc-secondary) 9%,#fff); color: var(--doc-secondary); font-size: 2.6mm; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.jpraxc-feestruct-total th { background: #f4f1ef; font-size: 2.5mm; font-weight: 900; }

/* Income and expenditure statement — the register set out for the accountant. */
.jpraxc-statement-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2mm; margin-top: 3mm; }
.jpraxc-statement-summary div { padding: 2.4mm 2.6mm; border: .25mm solid #d9d2d0; border-radius: 1.4mm; background: color-mix(in srgb,var(--doc-primary) 4%,#fff); }
.jpraxc-statement-summary span { display: block; color: #6b6265; font-size: 2.1mm; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.jpraxc-statement-summary strong { display: block; margin-top: .8mm; font-size: 3.4mm; font-variant-numeric: tabular-nums; }
.jpraxc-statement-summary .is-surplus strong { color: #13855a; }
.jpraxc-statement-summary .is-deficit strong { color: #b9273d; }
.jpraxc-statement-block { min-width: 0; margin-top: 4mm; }
.jpraxc-statement-block h3 { margin: 0 0 1.4mm; color: var(--doc-primary); font-size: 2.9mm; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
/* min-width:0 so the table cannot push past the page: the stack sizes itself
   to its widest child, and a wide statement would carry the sheet with it. */
.jpraxc-statement-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; }
.jpraxc-statement-table th, .jpraxc-statement-table td { padding: 1.6mm 2mm; border: .25mm solid #d9d2d0; font-size: 2.5mm; text-align: left; }
.jpraxc-statement-table thead th { background: color-mix(in srgb,var(--doc-primary) 7%,#fff); color: var(--doc-primary); font-size: 2.3mm; font-weight: 900; text-transform: uppercase; }
.jpraxc-statement-table tfoot th { background: color-mix(in srgb,var(--doc-primary) 4%,#fff); font-size: 2.5mm; font-weight: 900; }
.jpraxc-statement-table .jpraxc-statement-amount { text-align: right; font-variant-numeric: tabular-nums; }
.jpraxc-statement-table .jpraxc-statement-count { width: 16mm; text-align: right; font-variant-numeric: tabular-nums; }
/* Landscape is wide and short: heads run down two columns, and the three
   cross-tables sit side by side, so the statement closes in three sheets. */
.jpraxc-statement-split { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; min-width: 0; }
.jpraxc-statement-split.is-single { grid-template-columns: 1fr; }
.jpraxc-statement-split > table { min-width: 0; }
.jpraxc-statement-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5mm; align-items: start; min-width: 0; }
.jpraxc-statement-columns > .jpraxc-statement-block { min-width: 0; margin-top: 3mm; }
.jpraxc-statement-columns .jpraxc-statement-table th, .jpraxc-statement-columns .jpraxc-statement-table td { padding: 1.2mm 1.4mm; font-size: 2.2mm; }
.jpraxc-statement-columns .jpraxc-statement-table thead th { font-size: 2mm; }
.jpraxc-statement-total { display: flex; align-items: baseline; justify-content: space-between; gap: 4mm; margin: 2mm 0 0; padding: 1.8mm 2.4mm; border: .25mm solid #d9d2d0; border-radius: 1.4mm; background: color-mix(in srgb,var(--doc-primary) 6%,#fff); }
.jpraxc-statement-total span { color: var(--doc-primary); font-size: 2.3mm; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.jpraxc-statement-total strong { font-size: 3.2mm; font-variant-numeric: tabular-nums; }
/* Tightened only when a year's heads would otherwise take a fourth sheet. */
.jpraxc-statement-page--compact .jpraxc-statement-table th, .jpraxc-statement-page--compact .jpraxc-statement-table td { padding: 1.1mm 1.6mm; font-size: 2.3mm; }
.jpraxc-statement-page--compact .jpraxc-statement-summary div { padding: 1.8mm 2.2mm; }
.jpraxc-statement-page--compact .jpraxc-statement-summary strong { font-size: 3mm; }
.jpraxc-statement-page--compact .jpraxc-statement-block { margin-top: 3mm; }
.jpraxc-statement-page--compact .jpraxc-statement-signatures { margin-top: 9mm; }
.jpraxc-statement-page--tight .jpraxc-statement-table th, .jpraxc-statement-page--tight .jpraxc-statement-table td { padding: .8mm 1.3mm; font-size: 2.1mm; }
.jpraxc-statement-page--tight .jpraxc-statement-declaration p { font-size: 2.2mm; line-height: 1.45; }
.jpraxc-statement-page--tight .jpraxc-statement-signatures { margin-top: 6mm; }
.jpraxc-statement-declaration { margin-top: 5mm; }
.jpraxc-statement-declaration h3 { margin: 0 0 1.2mm; color: var(--doc-primary); font-size: 2.9mm; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.jpraxc-statement-declaration p { margin: 0; font-size: 2.5mm; line-height: 1.55; }
.jpraxc-statement-signatures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm; margin-top: 14mm; }
.jpraxc-statement-signatures i { display: block; border-top: .3mm solid #2b2224; }
.jpraxc-statement-signatures strong { display: block; margin-top: 1.2mm; font-size: 2.6mm; }
.jpraxc-statement-signatures span { display: block; color: #6b6265; font-size: 2.2mm; }

/* A school certificate: one ruled sheet, the letterhead pressed up against the
   rule the way an engraved certificate is printed, the wording set to be read
   aloud, and the signatures that make it worth anything. One rule, 8mm in from
   the trimmed edge, with the whole certificate set 2mm inside it; the foot of
   the sheet keeps more, so the rule stops above the pinned footer. */
.jpraxc-certificate-page { position: relative; display: flex; flex-direction: column; padding: 8mm 8mm 17mm; }
.jpraxc-cert-frame { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 2mm; border: .8mm solid var(--doc-primary); }
.jpraxc-cert-title { margin-top: 5mm; text-align: center; }
.jpraxc-cert-title span { color: #6b6265; font-size: 2.4mm; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.jpraxc-cert-title h2 { margin: 1.4mm 0 0; color: var(--doc-secondary); font-size: 8mm; font-weight: 800; letter-spacing: .02em; }
.jpraxc-cert-title i { display: block; width: 46mm; height: .6mm; margin: 3mm auto 0; background: var(--doc-accent); }
/* The particulars in three columns with the photograph beside them: the panel
   answers who the certificate is about before a word of it is read. */
.jpraxc-cert-panel { display: grid; grid-template-columns: 1fr 25mm; gap: 5mm; align-items: start; margin-top: 6mm; padding: 4mm 5mm; border: .25mm solid #d9d2d0; border-radius: 1.6mm; background: color-mix(in srgb,var(--doc-primary) 3%,#fff); }
.jpraxc-cert-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4mm 5mm; min-width: 0; }
.jpraxc-cert-facts dt { color: #6b6265; font-size: 2.1mm; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.jpraxc-cert-facts dd { margin: .6mm 0 0; font-size: 3mm; font-weight: 800; overflow-wrap: anywhere; }
.jpraxc-cert-facts .is-wide { grid-column: 1 / -1; }
.jpraxc-cert-facts .is-wide dd { font-weight: 750; line-height: 1.45; }
.jpraxc-cert-photo { width: 25mm; height: 32mm; margin: 0; overflow: hidden; border: .3mm solid #b9b0ae; border-radius: 1.2mm; background: #fff; }
.jpraxc-cert-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jpraxc-cert-photo.is-empty { display: flex; align-items: center; justify-content: center; border-style: dashed; }
.jpraxc-cert-photo.is-empty span { color: #8d8482; font-size: 2.3mm; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* The wording is what is certified, so it is set in the weight the eye reads
   first rather than in the weight of a note. */
.jpraxc-cert-body { position: relative; margin-top: 6mm; }
.jpraxc-cert-body p { margin: 0 0 3.4mm; font-size: 3.5mm; font-weight: 700; line-height: 1.8; text-align: justify; }
/* The terms the certificate is issued on, in the small type such terms are
   read in: present on the sheet, never competing with the wording above it. */
.jpraxc-cert-terms { margin-top: 6mm; padding-top: 2.5mm; border-top: .25mm solid #d9d2d0; }
.jpraxc-cert-terms h3 { margin: 0 0 1.2mm; color: #6b6265; font-size: 2.2mm; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.jpraxc-cert-terms ol { margin: 0; padding-left: 4.5mm; }
.jpraxc-cert-terms li { margin-bottom: .6mm; font-size: 2.3mm; font-weight: 600; line-height: 1.4; }
.jpraxc-cert-close { margin-top: auto; }
.jpraxc-cert-signs { display: grid; grid-template-columns: 1fr 1fr; gap: 16mm; margin-top: 14mm; text-align: center; }
.jpraxc-cert-signs i { display: block; border-top: .3mm solid #2b2224; }
.jpraxc-cert-signs img { display: block; height: 12mm; margin: 0 auto -1mm; object-fit: contain; }
.jpraxc-cert-signs strong { display: block; margin-top: 1.4mm; font-size: 2.9mm; }
.jpraxc-cert-signs span { display: block; color: #6b6265; font-size: 2.4mm; }
/* The transfer certificate closes on the same signature block, so its close is
   given the same top margin the letter certificates take, and sits against the
   foot of the rule rather than floating above it. */
.jpraxc-tc-page .jpraxc-cert-close { margin-top: auto; }
.jpraxc-tc-page .jpraxc-cert-signs { margin-top: 8mm; }
/* The school's own mark behind the particulars and nowhere else: off the
   letterhead and off the signatures, printed whole rather than cropped. */
.jpraxc-tc-body { position: relative; }
.jpraxc-tc-body::before { content: ""; position: absolute; inset: 6mm 22mm; background-image: var(--jpraxc-watermark); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .06; pointer-events: none; }
.jpraxc-tc-body > * { position: relative; }
/* Where and when it was signed, under the hand that signed it: the place at
   the left margin and the date at the right, on one line. */
.jpraxc-cert-where { display: flex; justify-content: space-between; gap: 2mm 10mm; margin-top: 7mm; padding-top: 3mm; border-top: .25mm solid #d9d2d0; }
.jpraxc-cert-where span { font-size: 3mm; font-weight: 800; }
.jpraxc-cert-where span:last-child { text-align: right; }
.jpraxc-cert-where i { display: block; color: #6b6265; font-size: 2.1mm; font-style: normal; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
/* The school's own mark behind the wording and nowhere else: faint enough to
   read through, and kept off the letterhead, the particulars and the
   signatures, which are read rather than looked at. Printed, not stamped. */
.jpraxc-cert-body::before { content: ""; position: absolute; inset: 4mm 10mm; background-image: var(--jpraxc-watermark); background-repeat: no-repeat; background-position: center; /* contain, so a logo of any proportion is printed whole rather than trimmed to a square */ background-size: contain; opacity: .06; pointer-events: none; }
.jpraxc-cert-body p { position: relative; }

/* The transfer certificate on the form the board asks for it on: one ruled
   sheet, the particulars in boxes and the class history year by year. Every
   label is set in both languages, because the office that receives it reads
   one of them and the parent who carries it reads the other. */
.jpraxc-tc-page { position: relative; display: flex; flex-direction: column; padding: 7mm 7mm 14mm; }
.jpraxc-tc-frame { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 1.5mm; border: .8mm solid var(--doc-primary); }
.jpraxc-tc-page .jpraxc-doc-letterhead { padding-bottom: 2mm; border-bottom: .5mm solid var(--doc-primary); }
.jpraxc-tc-title { padding: 1.6mm 0 2mm; text-align: center; }
.jpraxc-tc-title h2 { margin: 0; color: var(--doc-secondary); font-size: 4.6mm; font-weight: 850; letter-spacing: .04em; }
.jpraxc-tc-title p { margin: .6mm 0 0; color: var(--doc-secondary); font-size: 3.4mm; font-weight: 700; }
.jpraxc-tc-grid, .jpraxc-tc-classes { width: 100%; min-width: 0; border-collapse: collapse; table-layout: fixed; }
/* The labels are read as sentences, not shouted as headings. */
.jpraxc-tc-grid th, .jpraxc-tc-classes th { text-transform: none; }
.jpraxc-tc-classes { margin-top: -.25mm; }
.jpraxc-tc-grid th, .jpraxc-tc-grid td, .jpraxc-tc-classes th, .jpraxc-tc-classes td { padding: .7mm 1.2mm; border: .25mm solid #2b2224; vertical-align: top; text-align: left; }
.jpraxc-tc-grid th span, .jpraxc-tc-classes th span { display: block; font-size: 2.5mm; font-weight: 700; line-height: 1.25; }
.jpraxc-tc-grid th i, .jpraxc-tc-classes th i { display: block; font-size: 2.3mm; font-style: normal; font-weight: 600; line-height: 1.25; }
.jpraxc-tc-grid td span { display: block; font-size: 2.6mm; font-weight: 700; line-height: 1.25; }
/* Each particular is a box that names what it holds: the label above in small
   caps, the entry under it in the weight it is read in. */
.jpraxc-tc-grid td i { display: block; margin-bottom: .3mm; color: #6b6265; font-size: 2.1mm; font-style: normal; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.jpraxc-tc-grid td { height: 6.8mm; }
/* A band names the section under it, so the particulars are read in groups
   rather than as one long row of boxes. */
.jpraxc-tc-band th { padding: .7mm 1.4mm; color: #fff; background: var(--doc-primary); }
.jpraxc-tc-band th, .jpraxc-tc-band th span { font-size: 2.4mm; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
/* The class register: twelve ruled lines, filled where the school's own
   promotion register has something to say and left ruled where it has not. */
.jpraxc-tc-classes { margin-top: 2mm; }
.jpraxc-tc-classes th[scope="row"], .jpraxc-tc-classes td { height: 4.5mm; padding: .5mm 1.4mm; font-size: 2.5mm; font-weight: 700; }
.jpraxc-tc-classes th[scope="row"] { text-align: center; }
.jpraxc-tc-classes .jpraxc-tc-cause { font-size: 2.3mm; font-weight: 600; }
.jpraxc-tc-classes tr > *:nth-child(1) { width: 12%; }
.jpraxc-tc-classes tr > *:nth-child(2) { width: 11%; }
.jpraxc-tc-classes tr > *:nth-child(3) { width: 11%; }
.jpraxc-tc-classes tr > *:nth-child(4) { width: 11%; }
.jpraxc-tc-classes tr > *:nth-child(5) { width: 16%; }
.jpraxc-tc-classes tr > *:nth-child(6) { width: 9%; }
.jpraxc-tc-classes tr > *:nth-child(7) { width: 9%; }
.jpraxc-tc-classes tr > *:nth-child(8) { width: 9%; }
.jpraxc-tc-notes { margin-top: 2mm; }
.jpraxc-tc-notes p { margin: 0 0 .5mm; font-size: 2.3mm; font-weight: 700; line-height: 1.3; }

/* A staff card carries the principal's signature alone, so the row is one
   column wide rather than a signed half beside an empty half. */
.jpraxc-id-face--back[data-card-type="staff"] .jpraxc-id-signatures { grid-template-columns: minmax(0,26mm); justify-content: end; }

/* ============================================================
   Identity cards: one card, ten layouts, either way up.

   Every layout draws the same card - the same school, photograph and
   particulars in the same order - and takes every colour from the school's own
   theme, so all ten work under all ten themes, and a change to the card
   reaches all ten at once.
   ============================================================ */

/* A landscape card is 86 x 54mm and ten fill an A4 portrait sheet: five rows
   of front-beside-back with the scissor line down the middle. */
.jpraxc-id-grid[data-card-orientation="landscape"] { width: 190mm; height: 277mm; grid-template-columns: repeat(2,86mm); grid-template-rows: repeat(5,54mm); column-gap: 18mm; row-gap: 1.75mm; }
.jpraxc-id-grid[data-card-orientation="landscape"] .jpraxc-id-face,
.jpraxc-id-preview-stage[data-card-orientation="landscape"] .jpraxc-id-face { width: 86mm; height: 54mm; }

/* Landscape rearranges rather than shrinks: the photograph takes a column of
   its own and the particulars sit beside it, which is the only way five lines
   of detail read on a card 54mm tall. */
[data-card-orientation="landscape"] .jpraxc-id-face--front { display: grid; grid-template-columns: 24mm minmax(0,1fr); grid-template-rows: auto auto minmax(0,1fr) auto; }
[data-card-orientation="landscape"] .jpraxc-id-face--front > header { grid-column: 1 / -1; min-height: 10mm; }
[data-card-orientation="landscape"] .jpraxc-id-face--front > .jpraxc-id-type { grid-column: 1 / -1; padding: .8mm 2mm; }
[data-card-orientation="landscape"] .jpraxc-id-face--front > .jpraxc-id-person { grid-column: 1; align-content: start; padding: 1.6mm 1mm 0; }
[data-card-orientation="landscape"] .jpraxc-id-face--front > .jpraxc-id-person > img,
[data-card-orientation="landscape"] .jpraxc-id-face--front .jpraxc-id-photo-placeholder { width: 17mm; height: 20mm; }
[data-card-orientation="landscape"] .jpraxc-id-face--front > .jpraxc-id-person h3 { max-width: 22mm; font-size: 6pt; }
[data-card-orientation="landscape"] .jpraxc-id-face--front > dl { grid-column: 2; align-self: center; margin: 0 2.5mm; }
[data-card-orientation="landscape"] .jpraxc-id-face--front > small { grid-column: 1 / -1; position: static; padding: 0 2.5mm 1.2mm; }
[data-card-orientation="landscape"] .jpraxc-id-face--back > header { min-height: 11mm; }
[data-card-orientation="landscape"] .jpraxc-id-contact { min-height: 0; padding: 1.2mm 3mm; }
[data-card-orientation="landscape"] .jpraxc-id-face--back > p { margin: 1.2mm 3mm .5mm; }
[data-card-orientation="landscape"] .jpraxc-id-face--back dl { margin-top: .8mm; }
[data-card-orientation="landscape"] .jpraxc-id-signatures { right: 3mm; bottom: 8.6mm; left: 3mm; width: auto; gap: 12mm; }
[data-card-orientation="landscape"] .jpraxc-id-signature { min-height: 7mm; }
[data-card-orientation="landscape"] .jpraxc-id-code { display: flex; align-items: center; gap: 2mm; right: 3mm; bottom: 2mm; left: 3mm; }
[data-card-orientation="landscape"] .jpraxc-id-code strong { margin-top: 0; }
[data-card-orientation="landscape"] .jpraxc-id-barcode { width: 34mm; height: 5.6mm; flex: 0 0 34mm; }

/* 2 - Banner: a deep colour head with the photograph set into its edge. */
[data-card-template="banner"].jpraxc-id-face--front > header { min-height: 19mm; }
[data-card-template="banner"] .jpraxc-id-type { background: color-mix(in srgb,var(--doc-primary) 12%,#fff); }
[data-card-template="banner"].jpraxc-id-face--front .jpraxc-id-person { margin-top: -7mm; }
[data-card-template="banner"] .jpraxc-id-person > img, [data-card-template="banner"] .jpraxc-id-photo-placeholder { border: .7mm solid #fff; box-shadow: 0 0 0 .3mm var(--doc-primary); }
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front > header { min-height: 13mm; }
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front .jpraxc-id-person { margin-top: -4mm; }

/* 3 - Sidebar: a colour spine down the binding edge. */
[data-card-template="sidebar"].jpraxc-id-face { padding-left: 5mm; }
[data-card-template="sidebar"].jpraxc-id-face::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; width: 5mm; background: linear-gradient(180deg,var(--doc-secondary),var(--doc-primary)); }
[data-card-template="sidebar"].jpraxc-id-face > header { color: var(--doc-secondary); background: color-mix(in srgb,var(--doc-accent) 16%,#fff); }
[data-card-template="sidebar"].jpraxc-id-face > header span { color: color-mix(in srgb,var(--doc-primary) 70%,#fff); }
[data-card-template="sidebar"] .jpraxc-id-type { color: #fff; background: var(--doc-primary); }

/* 4 - Portrait: the photograph carries the card, the name plated across it. */
[data-card-template="portraitframe"] .jpraxc-id-person { padding: 0; }
[data-card-template="portraitframe"] .jpraxc-id-person > img, [data-card-template="portraitframe"] .jpraxc-id-photo-placeholder { width: 100%; height: 30mm; border: 0; border-radius: 0; }
[data-card-template="portraitframe"] .jpraxc-id-person h3 { width: 100%; max-width: none; margin: -4.6mm 0 0; padding: 1mm; color: #fff; background: color-mix(in srgb,var(--doc-secondary) 82%,transparent); font-size: 7pt; }
[data-card-orientation="landscape"] [data-card-template="portraitframe"] .jpraxc-id-person > img,
[data-card-orientation="landscape"] [data-card-template="portraitframe"] .jpraxc-id-photo-placeholder { height: 22mm; }

/* 5 - Minimal: white card, thin rules, the mark small. */
[data-card-template="minimal"].jpraxc-id-face { border-color: color-mix(in srgb,var(--doc-primary) 30%,#fff); }
[data-card-template="minimal"].jpraxc-id-face::after { display: none; }
[data-card-template="minimal"].jpraxc-id-face > header { color: var(--doc-secondary); background: #fff; border-bottom: .3mm solid var(--doc-primary); }
[data-card-template="minimal"].jpraxc-id-face > header span { color: #7c7375; }
[data-card-template="minimal"] .jpraxc-id-type { color: #6e6567; background: #fff; border-bottom: .2mm solid #e3dedc; font-weight: 800; letter-spacing: .12em; }
[data-card-template="minimal"] .jpraxc-id-person > img, [data-card-template="minimal"] .jpraxc-id-photo-placeholder { border-color: #ded7d5; }

/* 6 - Crest: the school mark behind a centred name. */
[data-card-template="crest"].jpraxc-id-face--front::after { right: 50%; bottom: 26%; width: 30mm; height: 30mm; transform: translate(50%,50%); background: color-mix(in srgb,var(--doc-primary) 10%,transparent); box-shadow: none; }
[data-card-template="crest"] .jpraxc-id-person h3 { color: var(--doc-primary); font-size: 9pt; }
[data-card-template="crest"] dl > div { grid-template-columns: minmax(0,1fr); gap: 0; text-align: center; }
[data-card-template="crest"] dt { font-size: 3.9pt; letter-spacing: .06em; text-transform: uppercase; }

/* 7 - Stripe: an accent bar cut across the head. */
[data-card-template="stripe"].jpraxc-id-face > header { position: relative; overflow: hidden; }
[data-card-template="stripe"].jpraxc-id-face > header::after { content: ""; position: absolute; top: 0; right: -6mm; bottom: 0; width: 16mm; background: color-mix(in srgb,var(--doc-accent) 70%,transparent); transform: skewX(-18deg); }
[data-card-template="stripe"] .jpraxc-id-type { color: #fff; background: linear-gradient(90deg,var(--doc-primary),color-mix(in srgb,var(--doc-accent) 60%,var(--doc-primary))); }

/* 8 - Badge: a round photograph on a tinted panel. */
[data-card-template="badge"] .jpraxc-id-person { margin: 1.5mm 2mm 0; padding: 2mm; border-radius: 2.5mm; background: color-mix(in srgb,var(--doc-primary) 7%,#fff); }
[data-card-template="badge"] .jpraxc-id-person > img, [data-card-template="badge"] .jpraxc-id-photo-placeholder { width: 20mm; height: 20mm; border-width: .5mm; border-radius: 50%; }
[data-card-orientation="landscape"] [data-card-template="badge"] .jpraxc-id-person > img,
[data-card-orientation="landscape"] [data-card-template="badge"] .jpraxc-id-photo-placeholder { width: 16mm; height: 16mm; }

/* 9 - Panel: a tinted half holds the photograph, the other the details. */
[data-card-template="panel"].jpraxc-id-face--front { display: grid; grid-template-columns: 20mm minmax(0,1fr); grid-template-rows: auto auto minmax(0,1fr) auto; }
[data-card-template="panel"].jpraxc-id-face--front > header, [data-card-template="panel"].jpraxc-id-face--front > .jpraxc-id-type { grid-column: 1 / -1; }
[data-card-template="panel"].jpraxc-id-face--front > .jpraxc-id-person { grid-column: 1; grid-row: 3; align-content: start; padding: 2mm 1mm; background: color-mix(in srgb,var(--doc-primary) 8%,#fff); }
[data-card-template="panel"].jpraxc-id-face--front > .jpraxc-id-person > img, [data-card-template="panel"] .jpraxc-id-photo-placeholder { width: 16mm; height: 19mm; }
[data-card-template="panel"].jpraxc-id-face--front > .jpraxc-id-person h3 { max-width: 18mm; font-size: 5.6pt; white-space: normal; }
[data-card-template="panel"].jpraxc-id-face--front > dl { grid-column: 2; grid-row: 3; align-self: start; margin: 2mm 2mm 0; }
[data-card-template="panel"].jpraxc-id-face--front > dl > div { grid-template-columns: minmax(0,1fr); gap: 0; }
[data-card-template="panel"].jpraxc-id-face--front > small { grid-column: 1 / -1; position: static; padding: 0 2.5mm 1.2mm; }

/* 10 - Ledger: ruled rows, for a school that reads a card as a record. */
[data-card-template="ledger"].jpraxc-id-face::after { display: none; }
[data-card-template="ledger"] .jpraxc-id-type { letter-spacing: .1em; }
[data-card-template="ledger"] dl { margin-right: 2mm; margin-left: 2mm; border: .2mm solid color-mix(in srgb,var(--doc-primary) 35%,#fff); }
[data-card-template="ledger"] dl > div { margin: 0; padding: .55mm 1.2mm; border-bottom: .2mm solid color-mix(in srgb,var(--doc-primary) 22%,#fff); }
[data-card-template="ledger"] dl > div:last-child { border-bottom: 0; }
[data-card-template="ledger"] dl > div:nth-child(odd) { background: color-mix(in srgb,var(--doc-primary) 5%,#fff); }

/* The chooser's thumbnails: the printed card itself, scaled down, so what is
   chosen by eye is what comes off the printer. */
.jpraxc-id-preview { position: relative; overflow: hidden; border-radius: 2.4mm; }
.jpraxc-id-preview-stage { position: absolute; top: 0; left: 0; transform-origin: top left; }


/* An identity card is read at arm's length, across a gate, by someone who is
   not looking for detail. The card is 54mm wide and was set at four and a half
   point, which fills a third of it and reads at none of those distances. Every
   line is set as large as its own space allows, and the particulars stack their
   label over their value so a value takes the full width of the card rather
   than a third of it - which is what lets the type grow without truncating an
   admission number or overrunning the line below. */
.jpraxc-id-face > header { min-height: 15mm; }
.jpraxc-id-face > header img { width: 9mm; height: 9mm; }
.jpraxc-id-face > header strong { max-height: 8mm; font-size: 7.6pt; line-height: 1.1; }
.jpraxc-id-face > header span { font-size: 5pt; }
.jpraxc-id-type { padding: 1.1mm 2mm; font-size: 5.8pt; letter-spacing: .06em; }
.jpraxc-id-person { padding: 2mm 2mm .8mm; }
.jpraxc-id-person > img, .jpraxc-id-photo-placeholder { width: 20mm; height: 24mm; }
.jpraxc-id-photo-placeholder { font-size: 5.2pt; }
.jpraxc-id-person h3 { max-width: 49mm; margin-top: 1.1mm; font-size: 10.5pt; line-height: 1.05; }
.jpraxc-id-face dl { margin: 1.2mm 2.5mm 0; }
.jpraxc-id-face dl > div { grid-template-columns: minmax(0,1fr); gap: .2mm; margin: .9mm 0; font-size: 6.6pt; line-height: 1.12; }
.jpraxc-id-face dt { font-size: 4.5pt; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.jpraxc-id-face dd { font-size: 6.6pt; }
.jpraxc-id-face--front > small { font-size: 4.6pt; }
.jpraxc-id-contact { min-height: 0; padding: 1.8mm 3mm; font-size: 5.4pt; line-height: 1.3; }
.jpraxc-id-face--back > p { margin: 2.2mm 3mm .8mm; font-size: 5.8pt; }
.jpraxc-id-signature span { font-size: 5pt; }
.jpraxc-id-code strong { font-size: 4.4pt; }

/* Landscape has half the height and twice the width, so the particulars keep
   their two columns there - a stacked label and value would run the card out
   of room - and the name sits beside the photograph rather than under it. */
[data-card-orientation="landscape"] .jpraxc-id-face dl > div { grid-template-columns: 17mm minmax(0,1fr); gap: 1.2mm; margin: .55mm 0; font-size: 5.8pt; }
[data-card-orientation="landscape"] .jpraxc-id-face dt { font-size: 4.3pt; }
[data-card-orientation="landscape"] .jpraxc-id-face dd { font-size: 5.8pt; }
[data-card-orientation="landscape"] .jpraxc-id-face > header strong { max-height: 6mm; font-size: 6.6pt; }
[data-card-orientation="landscape"] .jpraxc-id-face > header span { font-size: 4.5pt; }
[data-card-orientation="landscape"] .jpraxc-id-type { font-size: 5.2pt; }
[data-card-orientation="landscape"] .jpraxc-id-face--front > .jpraxc-id-person > img,
[data-card-orientation="landscape"] .jpraxc-id-face--front .jpraxc-id-photo-placeholder { width: 19mm; height: 23mm; }
[data-card-orientation="landscape"] .jpraxc-id-face--front > .jpraxc-id-person h3 { max-width: 23mm; font-size: 6.4pt; }
[data-card-orientation="landscape"] .jpraxc-id-contact { padding: 1.1mm 3mm; font-size: 4.9pt; }
[data-card-orientation="landscape"] .jpraxc-id-face--back > p { font-size: 5.2pt; }

/* Two of the layouts hold their particulars in a column of their own, so they
   keep the paired label and value that fits a narrow measure. */
[data-card-template="panel"].jpraxc-id-face--front > dl > div,
[data-card-template="crest"] dl > div { font-size: 5.8pt; }
[data-card-template="panel"].jpraxc-id-face--front > dl > div { margin: .7mm 0; }
[data-card-template="ledger"] dl > div { margin: 0; padding: .7mm 1.4mm; }


/* A second pass, made by measuring: every layout was still leaving space at the
   foot of the card, and space at the foot of an identity card is type that
   could have been read from further away. Landscape had the most to give. */
[data-card-orientation="landscape"] .jpraxc-id-face dl > div { gap: 1.4mm; margin: 1mm 0; font-size: 6.6pt; }
[data-card-orientation="landscape"] .jpraxc-id-face dt { font-size: 4.8pt; }
[data-card-orientation="landscape"] .jpraxc-id-face dd { font-size: 6.6pt; }
[data-card-orientation="landscape"] .jpraxc-id-face > header strong { font-size: 7.2pt; }
[data-card-orientation="landscape"] .jpraxc-id-face > header span { font-size: 4.9pt; }
[data-card-orientation="landscape"] .jpraxc-id-type { font-size: 5.6pt; }
[data-card-orientation="landscape"] .jpraxc-id-face--front > .jpraxc-id-person h3 { font-size: 7pt; }
[data-card-orientation="landscape"] .jpraxc-id-contact { font-size: 5.2pt; }
[data-card-orientation="landscape"] .jpraxc-id-face--back > p { font-size: 5.6pt; }
[data-card-orientation="landscape"] .jpraxc-id-signature span { font-size: 4.8pt; }

/* The panel layout keeps its particulars in a column of their own, which was
   ending less than half way down it. */
[data-card-template="panel"].jpraxc-id-face--front > dl > div { margin: 2mm 0; font-size: 7pt; }
[data-card-template="panel"].jpraxc-id-face--front > dl > div dt { font-size: 4.6pt; }
[data-card-template="panel"].jpraxc-id-face--front > .jpraxc-id-person h3 { font-size: 6.4pt; }
[data-card-orientation="landscape"] [data-card-template="panel"].jpraxc-id-face--front > dl > div { margin: 1.1mm 0; }

/* Everything else gains a line's worth of air between the particulars, which
   reads as larger type even where the point size is already at its limit. */
.jpraxc-id-face--front:not([data-card-template="ledger"]) dl > div { margin: 1.25mm 0; }
.jpraxc-id-person h3 { font-size: 11pt; }
[data-card-orientation="landscape"] .jpraxc-id-face--front:not([data-card-template="ledger"]) dl > div { margin: 1mm 0; }


/* Banner and Portrait both worked by pulling one block over another with a
   negative margin, which is a collision waiting for a longer name or a larger
   photograph - and once the type grew, it collided. Both are rebuilt so that
   nothing is pulled over anything: each block owns its own band of the card. */

/* Banner: the head, then a deep colour band holding the photograph and the
   name in white, then the card's own line and the particulars under it. */
[data-card-template="banner"].jpraxc-id-face--front { display: flex; flex-direction: column; }
[data-card-template="banner"].jpraxc-id-face--front > header { order: 1; min-height: 15mm; }
[data-card-template="banner"].jpraxc-id-face--front > .jpraxc-id-person { order: 2; margin-top: 0; padding: 2.5mm 2mm 2.2mm; color: #fff; background: linear-gradient(180deg,var(--doc-primary),color-mix(in srgb,var(--doc-primary) 76%,#000)); }
[data-card-template="banner"].jpraxc-id-face--front > .jpraxc-id-type { order: 3; color: var(--doc-secondary); background: color-mix(in srgb,var(--doc-accent) 30%,#fff); }
[data-card-template="banner"].jpraxc-id-face--front > dl { order: 4; }
[data-card-template="banner"].jpraxc-id-face--front > small { order: 5; }
[data-card-template="banner"] .jpraxc-id-person h3 { color: #fff; }
[data-card-template="banner"] .jpraxc-id-person > img, [data-card-template="banner"] .jpraxc-id-photo-placeholder { border: .6mm solid #fff; box-shadow: none; }
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front { display: grid; }
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front > header { min-height: 10mm; }
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front > .jpraxc-id-person { padding: 1.6mm 1mm; }

/* Portrait: the photograph runs the width of the card and the name sits on a
   solid plate directly under it, rather than half over it. */
[data-card-template="portraitframe"] .jpraxc-id-person { padding: 0; }
[data-card-template="portraitframe"] .jpraxc-id-person > img, [data-card-template="portraitframe"] .jpraxc-id-photo-placeholder { width: 100%; height: 32mm; border: 0; border-radius: 0; }
[data-card-template="portraitframe"] .jpraxc-id-person h3 { width: 100%; max-width: none; margin: 0; padding: 1.4mm 2mm; color: #fff; background: var(--doc-secondary); font-size: 9.5pt; }
[data-card-orientation="landscape"] [data-card-template="portraitframe"] .jpraxc-id-person > img,
[data-card-orientation="landscape"] [data-card-template="portraitframe"] .jpraxc-id-photo-placeholder { height: 23mm; }
[data-card-orientation="landscape"] [data-card-template="portraitframe"] .jpraxc-id-person h3 { padding: .8mm 1mm; font-size: 6.4pt; }


/* Landscape places the blocks itself, by column and row, so the reading order
   the portrait banner sets must not be imposed on it: an ordered grid item
   lands in the next free cell rather than in the cell it was written for, and
   the photograph ends up under the letterhead. */
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front > header,
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front > .jpraxc-id-person,
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front > .jpraxc-id-type,
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front > dl,
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front > small { order: 0; }

/* A photograph the width of the card, with a name plate under it, takes six
   millimetres more than a passport photograph does. The particulars give it
   back rather than running off the foot of the card. */
[data-card-template="portraitframe"] .jpraxc-id-person > img,
[data-card-template="portraitframe"] .jpraxc-id-photo-placeholder { height: 27mm; }
[data-card-template="portraitframe"].jpraxc-id-face--front dl > div { margin: .85mm 0; }
[data-card-orientation="landscape"] [data-card-template="portraitframe"] .jpraxc-id-person > img,
[data-card-orientation="landscape"] [data-card-template="portraitframe"] .jpraxc-id-photo-placeholder { height: 22mm; }


/* Auto-placement put the photograph beside the card's own line instead of under
   it, so the banner names its rows outright in landscape. */
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front > header { grid-row: 1; grid-column: 1 / -1; }
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front > .jpraxc-id-type { grid-row: 2; grid-column: 1 / -1; }
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front > .jpraxc-id-person { grid-row: 3; grid-column: 1; }
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front > dl { grid-row: 3; grid-column: 2; }
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front > small { grid-row: 4; grid-column: 1 / -1; }

/* The banner's colour band is deeper than a plain photograph block, so in
   landscape it gets its own row heights rather than the shared ones: the rows
   are named in millimetres and the photograph is cut to fit the band, which is
   what stops the band and the card's own line sharing a row. */
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front { grid-template-columns: 24mm minmax(0,1fr); grid-template-rows: 12mm 4.6mm minmax(0,1fr) 4.2mm; }
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front > .jpraxc-id-person { padding: 1.4mm 1mm; }
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front > .jpraxc-id-person > img,
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front .jpraxc-id-photo-placeholder { width: 17mm; height: 19.5mm; }
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front > .jpraxc-id-person h3 { margin-top: .6mm; font-size: 5.6pt; }

/* In landscape the banner keeps the geometry every other layout uses - the
   photograph in its own column, the particulars beside it - and states itself
   in colour instead: a deep head and a colour bar carrying the card's own line.
   A colour band around the photograph belongs to a tall card, not a wide one. */
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front { grid-template-columns: 24mm minmax(0,1fr); grid-template-rows: auto auto minmax(0,1fr) auto; }
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front > .jpraxc-id-person { padding: 1.6mm 1mm 0; color: inherit; background: none; }
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front > .jpraxc-id-person h3 { color: var(--doc-secondary); font-size: 6.4pt; }
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front > .jpraxc-id-person > img,
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front .jpraxc-id-photo-placeholder { width: 19mm; height: 23mm; border-width: .4mm; }
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front > .jpraxc-id-type { color: #fff; background: linear-gradient(90deg,var(--doc-secondary),var(--doc-primary)); }
/* The first draft of the banner pulled the photograph up over the card's own
   line by four millimetres. That is the overlap; the negative margin goes. */
[data-card-orientation="landscape"] [data-card-template="banner"].jpraxc-id-face--front > .jpraxc-id-person { margin-top: 0; }

/* A name too long for one line at this size takes two rather than an ellipsis:
   a card that abbreviates the holder's name is worth less than one that sets it
   a shade smaller. The tall card has the room for a second line; the wide one
   does not, so there the name stays on one. */
.jpraxc-id-person h3 { display: -webkit-box; overflow: hidden; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
[data-card-orientation="landscape"] .jpraxc-id-face--front > .jpraxc-id-person h3 { -webkit-line-clamp: 2; font-size: 6pt; }

/* Banner and Ledger are the two fullest tall layouts - a colour band and a
   ruled grid both cost height - so they give back the few millimetres a
   two-line name needs rather than running off the foot of the card. */
[data-card-template="banner"].jpraxc-id-face--front > .jpraxc-id-person { padding: 1.8mm 2mm 1.6mm; }
[data-card-template="banner"].jpraxc-id-face--front dl > div { margin: .75mm 0; }
[data-card-template="ledger"].jpraxc-id-face--front dl > div { padding: .5mm 1.4mm; }
[data-card-template="ledger"].jpraxc-id-face--front .jpraxc-id-person { padding-bottom: .4mm; }
/* Ledger's last rule sat on the trim line with a two-line name; a fifth of a
   millimetre off each row keeps it inside the card. */
[data-card-template="ledger"].jpraxc-id-face--front dl { margin-top: .9mm; }
[data-card-template="ledger"].jpraxc-id-face--front dl > div { padding: .42mm 1.4mm; }

/* The preview's own magnification. It is a screen affordance: `zoom` reflows
   the page so the overlay scrolls correctly around an enlarged sheet, and the
   printer is handed the original millimetres regardless. */
@media screen {
  .print-preview-overlay .jpraxc-document-stack { zoom: var(--jpraxc-preview-zoom,1); }
}
@media print {
  .print-preview-overlay .jpraxc-document-stack { zoom: 1 !important; }
}

/* A birthday card: one template, the school's own colours, the child's own
   face. Printed at A5 on the sheet, or saved from the preview and sent. */
.jpraxc-birthday-page { position: relative; display: flex; flex-direction: column; padding: 10mm; }
.jpraxc-birthday-frame { position: relative; flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 12mm 10mm; border: .7mm solid var(--doc-primary); border-radius: 6mm; text-align: center; background: linear-gradient(180deg,color-mix(in srgb,var(--doc-accent) 12%,#fff),#fff 55%); }
.jpraxc-birthday-mark { position: absolute; top: 6mm; left: 8mm; right: 8mm; display: flex; align-items: center; gap: 3mm; text-align: left; }
.jpraxc-birthday-mark img { width: 12mm; height: 12mm; object-fit: contain; }
.jpraxc-birthday-mark strong { display: block; color: var(--doc-secondary); font-size: 3.6mm; }
.jpraxc-birthday-mark span { display: block; color: #6b6265; font-size: 2.5mm; }
/* Confetti, drawn rather than illustrated: it prints in the school's colours
   and needs no artwork to ship with the product. */
.jpraxc-birthday-art { position: absolute; inset: 0; pointer-events: none; }
.jpraxc-birthday-art i { position: absolute; width: 4mm; height: 4mm; border-radius: 1mm; opacity: .5; }
.jpraxc-birthday-art i:nth-child(1) { top: 26mm; left: 12mm; background: var(--doc-accent); transform: rotate(18deg); }
.jpraxc-birthday-art i:nth-child(2) { top: 40mm; right: 14mm; background: var(--doc-primary); transform: rotate(-24deg); }
.jpraxc-birthday-art i:nth-child(3) { bottom: 30mm; left: 18mm; background: var(--doc-secondary); transform: rotate(35deg); }
.jpraxc-birthday-art i:nth-child(4) { bottom: 44mm; right: 20mm; background: var(--doc-accent); transform: rotate(-12deg); }
.jpraxc-birthday-art i:nth-child(5) { top: 62mm; left: 26mm; width: 2.6mm; height: 2.6mm; border-radius: 50%; background: var(--doc-primary); }
.jpraxc-birthday-art i:nth-child(6) { bottom: 62mm; right: 28mm; width: 2.6mm; height: 2.6mm; border-radius: 50%; background: var(--doc-accent); }
.jpraxc-birthday-photo { position: relative; z-index: 1; width: 46mm; height: 46mm; margin: 22mm 0 6mm; overflow: hidden; border: 1.2mm solid var(--doc-primary); border-radius: 50%; background: color-mix(in srgb,var(--doc-primary) 8%,#fff); }
.jpraxc-birthday-photo img { width: 100%; height: 100%; object-fit: cover; }
.jpraxc-birthday-photo span { display: grid; place-items: center; width: 100%; height: 100%; color: var(--doc-primary); font-size: 18mm; font-weight: 900; }
.jpraxc-birthday-page h2 { position: relative; z-index: 1; margin: 0; color: var(--doc-primary); font-size: 13mm; font-weight: 900; letter-spacing: -.02em; }
.jpraxc-birthday-name { position: relative; z-index: 1; margin-top: 2mm; color: var(--doc-secondary); font-size: 7mm; }
.jpraxc-birthday-seat { position: relative; z-index: 1; margin-top: 1.5mm; color: #6b6265; font-size: 3.4mm; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.jpraxc-birthday-line { position: relative; z-index: 1; max-width: 100mm; margin: 7mm 0 0; font-size: 4.4mm; font-weight: 700; line-height: 1.6; }
.jpraxc-birthday-from { position: relative; z-index: 1; margin: auto 0 0; color: var(--doc-secondary); font-size: 3.6mm; font-weight: 800; }
.jpraxc-birthday-wish { position: relative; z-index: 1; max-width: 108mm; margin: 4mm 0 0; color: #4b4446; font-size: 3.8mm; font-weight: 600; line-height: 1.65; }
.jpraxc-birthday-from { max-width: 110mm; }

/* The school's postal address is one line of the letterhead: street, city,
   state and PIN together, kept as one line where the page has room for it. */
.jpraxc-doc-letterhead .jpraxc-doc-address { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .jpraxc-doc-letterhead .jpraxc-doc-address { white-space: normal; } }

/* The school's own logo behind every printed page.
   The certificates and the transfer certificate have always carried it; this
   is the same watermark, at the same weight, on every other document the ERP
   prints. It is stamped by the page rather than by each renderer, so a document
   added later is watermarked without anyone remembering to ask for it. */
.jpraxc-doc-page::before {
  content: "";
  position: absolute;
  inset: 14mm;
  background-image: var(--jpraxc-watermark);
  background-repeat: no-repeat;
  background-position: center;
  /* contain, so a logo of any proportion prints whole rather than trimmed */
  background-size: contain;
  opacity: .05;
  pointer-events: none;
}
/* A page that draws its own watermark inside its frame, and the two that are
   not a sheet of paper at all — a sheet of cards, and a greeting card whose
   own artwork fills it — are left alone. */
.jpraxc-doc-page[data-document-kind="certificate"]::before,
.jpraxc-doc-page[data-document-kind="transfer-certificate"]::before,
.jpraxc-doc-page[data-document-kind="id-cards"]::before,
.jpraxc-doc-page[data-document-kind="birthday-card"]::before { content: none; }

/* The two older document shells — the print preview and the generic document —
   carry the same watermark, so a printed page looks the same wherever in the
   ERP it was raised from. */
.print-document, .jpraxc-generic-document { position: relative; }
.print-document::before, .jpraxc-generic-document::before {
  content: "";
  position: absolute;
  inset: 14mm;
  background-image: var(--jpraxc-watermark);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .05;
  pointer-events: none;
}