/* «شهاداتي» (/certificates) and «شهادة إتمام» (/certificate?code=…), with «الشهادة» in «إحصاءات الدفعة» (Task
   certificates, part b). Right to left first: logical properties only. Colours and sizes come from tokens.css only; the
   sheet has its own (--cert-*), the same in both modes, as paper is, and its sizes are shares of its width (container
   units), so it keeps its shape on a phone and prints the same. Its print rules are certificate-print.css's, which the
   certificate's page adds while it shows one. Nothing moves. */

/* ── «شهاداتي» ── */

.certificates-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.certificates-page > h1,
.cert-lead {
  margin: 0;
}

.cert-name-card,
.cert-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cert-name-card h2,
.cert-list h2 {
  margin: 0;
  font-size: var(--font-size-card-title);
}

.cert-name-card h2:focus {
  outline: none;
}

.cert-name-form {
  max-inline-size: var(--card-width);
  margin: 0;
}

/* a certificate waits for his name: said above the form */
.cert-name-waiting {
  margin: 0;
  padding: var(--space-3);
  border-inline-start: 4px solid var(--color-on);
  border-radius: var(--radius);
  background: var(--color-info-soft);
}

.cert-name-shown p {
  margin: 0;
  overflow-wrap: anywhere;
}

.cert-name-ar {
  font-size: var(--font-size-lead);
  font-weight: 700;
}

/* his English name, written left to right, lined up with the rest */
.cert-name-en {
  color: var(--color-muted);
  text-align: end;
}

/* «ستصدر شهادتك بهذا الاسم…», with the name as it will be */
.cert-ask {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-info-soft);
}

.cert-ask p,
.cert-ask ul {
  margin: 0;
}

.cert-ask-lines {
  padding-inline-start: var(--space-5);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.cert-empty p {
  margin: 0;
}

.cert-items {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cert-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cert-item-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-card-title);
}

/* what people wrote (a course's title, a run's name, a reason) wraps, never widening the page */
.cert-item-title,
.cert-item-run,
.cert-item-state {
  overflow-wrap: anywhere;
}

.cert-item-icon {
  color: var(--color-on-text);
}

/* made: a trophy in the stars' colour; taken back: quiet */
.cert-item.is-made .cert-item-icon {
  color: var(--color-star);
}

.cert-item.is-cancelled .cert-item-icon {
  color: var(--color-muted);
}

.cert-item-run,
.cert-item-state {
  margin: 0;
}

.cert-item-run {
  color: var(--color-muted);
}

.cert-item .notice {
  margin-block-start: var(--space-1);
}

.cert-copy-field {
  inline-size: 100%;
  margin-block-start: var(--space-2);
}

/* ── The certificate ── */

.certificate-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.certificate-page > h1 {
  margin: 0;
}

/* that it's real, above it */
.cert-real {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-success);
  border-radius: var(--radius);
  background: var(--color-success-soft);
}

.cert-real-icon {
  color: var(--color-success);
}

/* the sheet's width is what its sizes are shares of; while its words are fitted to its page it's hidden, and measured
   at its printed width (never painted so) */
.cert-frame {
  container-type: inline-size;
}

.cert-frame.is-fitting {
  visibility: hidden;
}

.cert-frame.is-measured {
  inline-size: var(--cert-printed-width);
}

/* A4 across: its paper (a margin of it round the band, inside what a printer prints), the blue band, and the gold line
   inside it; its colours printed as they are */
.cert-sheet {
  aspect-ratio: 297 / 210;
  overflow: hidden;
  padding: var(--cert-margin);
  border-radius: var(--radius-paper);
  background: var(--cert-paper);
  color: var(--cert-ink);
  line-height: 1.5;
  text-align: center;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.cert-inner {
  block-size: 100%;
  padding: var(--cert-gap);
  border: var(--cert-band) solid var(--cert-blue);
}

/* inside the gold line: every size here a share of the sheet's width times its fit (--cert-scale, 1 till the page sets
   it lower: certificate-page.js's #fit) */
.cert-content {
  --cert-space: calc(var(--cert-gap) * var(--cert-scale));
  display: flex;
  flex-direction: column;
  align-items: center;
  block-size: 100%;
  padding: calc(var(--cert-pad-block) * var(--cert-scale)) var(--cert-pad-inline);
  border: var(--cert-thin) solid var(--cert-gold);
  font-size: calc(var(--cert-size-text) * var(--cert-scale));
  /* what people wrote wraps, a long word too: never wider than its sheet */
  overflow-wrap: anywhere;
}

/* (as few as a class: each part's own margins below win) */
.cert-content :where(p, h1, dl, dd) {
  margin: 0;
}

.cert-brand {
  display: flex;
  align-items: center;
  gap: var(--cert-space);
  color: var(--cert-blue);
  font-size: calc(var(--cert-size-brand) * var(--cert-scale));
  font-weight: 700;
}

.cert-robot {
  inline-size: calc(var(--cert-robot) * var(--cert-scale));
  block-size: calc(var(--cert-robot) * var(--cert-scale));
  border-radius: var(--cert-space);
}

/* the middle: as far from the brand as from the foot */
.cert-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block: auto;
}

.cert-title {
  color: var(--cert-blue);
  font-size: calc(var(--cert-size-title) * var(--cert-scale));
  font-weight: 700;
  line-height: 1.3;
}

.cert-rule {
  inline-size: var(--cert-rule-width);
  margin-block: var(--cert-space);
  border-block-start: var(--cert-thin) solid var(--cert-gold);
}

.cert-given,
.cert-for,
.cert-run {
  color: var(--cert-muted);
}

.cert-name {
  margin-block-start: var(--cert-thin);
  font-size: calc(var(--cert-size-name) * var(--cert-scale));
  font-weight: 700;
  line-height: 1.35;
}

.cert-name.is-long {
  font-size: calc(var(--cert-size-name-long) * var(--cert-scale));
}

.cert-sheet .cert-name-en {
  color: var(--cert-muted);
  font-size: calc(var(--cert-size-name-en) * var(--cert-scale));
  text-align: center;
}

.cert-sheet .cert-name-en.is-long {
  font-size: calc(var(--cert-size-name-en-long) * var(--cert-scale));
}

.cert-for {
  margin-block-start: var(--cert-space);
}

.cert-course {
  color: var(--cert-blue);
  font-size: calc(var(--cert-size-course) * var(--cert-scale));
  font-weight: 700;
  line-height: 1.35;
}

.cert-course.is-long {
  font-size: calc(var(--cert-size-course-long) * var(--cert-scale));
}

.cert-facts {
  margin-block-start: var(--cert-space);
  text-wrap: balance;
}

/* the foot over a light line: its trainers (twice as wide as each of the others, its names kept whole on their lines,
   its lines balanced), the day it was made and its code */
.cert-foot {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: calc(var(--cert-pad-block) * var(--cert-scale));
  inline-size: 100%;
  padding-block-start: var(--cert-space);
  border-block-start: var(--cert-thin) solid var(--cert-line);
}

.cert-foot-part.is-trainers {
  grid-column: span 2;
}

.cert-foot dt {
  color: var(--cert-muted);
  font-size: calc(var(--cert-size-small) * var(--cert-scale));
}

.cert-foot dd {
  font-weight: 700;
  text-wrap: balance;
}

.cert-trainer {
  display: inline-block;
  max-inline-size: 100%;
}

.cert-check {
  margin-block-start: var(--cert-thin);
  color: var(--cert-muted);
  font-size: calc(var(--cert-size-small) * var(--cert-scale));
}

/* the address, left to right as written, broken where it must be */
.cert-link {
  unicode-bidi: isolate;
}

.cert-tools {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cert-tools > p {
  margin: 0;
}

/* ── «الشهادة» in «إحصاءات الدفعة» ── */

.stats-cert-line {
  margin: 0;
  overflow-wrap: anywhere;
}

.stats-cert-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-inline-size: var(--card-width);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.stats-cert-form-title {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.stats-cert-form .field-hint,
.stats-cert-form .field-error {
  margin: 0;
}

.stats-cert-reason {
  inline-size: 100%;
  resize: vertical;
}