/* The اطلاعنومه document: identity block, mark sections, achievement badge
   and the school stamp.

   Its own stylesheet because the card is a document, not a screen - it has to
   hold together on an A4 sheet from a shared shop printer as well as on a
   phone. Anything in here that only matters on paper lives in the @media
   print block at the bottom, next to the rules it overrides. */

/* ---------------------------------------------------------------- identity */

.idblock {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-alt);
  padding: 18px;
  margin-block-end: 22px;
}
.idblock__head {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-block-end: 16px;
}

/* One panel, hairline-ruled, rather than six bordered boxes.

   The earlier version said it was "a coloured rule on the reading edge
   rather than a full border ... without drawing a box around six things",
   and then drew a box around six things anyway - a 1px border AND a teal
   rule, repeated six times. Two costs to that. The identity block ended up
   heavier than the marks table below it, which is inverted: the marks are
   what the parent opened the page for. And six teal rules sat directly above
   a table full of teal pass chips, so the one colour that carries meaning in
   this document was also the one used as decoration.

   So the rule survives, once, on the block that actually is one thing. The
   dividers are the grid gap showing the container's background through it -
   which never leaves a ragged edge the way per-cell borders do, and matches
   the ruled rows of the marks table underneath.

   Fixed column counts rather than auto-fit: there are exactly six fields, and
   3/2/1 all divide into six evenly. auto-fit could settle on four or five on
   a wide screen and leave the last row half-drawn in divider colour. */
.idgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--teal);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.idfield {
  background: var(--surface);
  padding: 11px 14px;
}

/* The label was 650 against a 700 value, which is not a hierarchy - at a
   glance the six labels read as loudly as the six answers. Dropping the
   label and lifting the value separates them by size, weight and colour at
   once, so the eye lands on the data first. */
.idfield__label {
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
  font-weight: 600;
  margin-block-end: 1px;
}
.idfield__value {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.35;
}

/* A missing grandfather's name is not a fact about the student, and it should
   not hold the eye like one. The em dash stays - the field is still there and
   still enumerated on the printed record - it just stops competing. */
.idfield--empty .idfield__value {
  color: var(--fg-subtle);
  font-weight: 500;
}

@media (max-width: 700px) {
  .idgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  .idgrid { grid-template-columns: minmax(0, 1fr); }
}

/* Grouping wrappers that only mean something on paper. On screen they must
   not exist as far as layout is concerned. */
.print-pair,
.print-footer { display: contents; }

/* Filled only for the duration of a print, by the office print button. */
#print-root { display: none; }

/* ---------------------------------------------------------------- sections */

.section { margin-block-end: 22px; }
.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-block-end: 10px;
}
.section__head h4 { margin: 0; }

/* ------------------------------------------------------------ achievement */

.achievement {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
  border-radius: var(--r);
  border: 1px solid var(--grass);
  background: var(--grass-soft);
  margin-block-end: 22px;
}
/* The panel follows the badge. Without this a C in amber sat inside a green
   box, which read as two opinions about the same result. Pass or fail is
   still said in words on the line beside it, which is where it belongs. */
.achievement[data-grade='a-plus'] { border-color: var(--grass); background: var(--grass-soft); }
.achievement[data-grade='a'] { border-color: var(--teal); background: var(--teal-soft); }
.achievement[data-grade='b'] { border-color: var(--sky); background: var(--sky-soft); }
.achievement[data-grade='c'] { border-color: var(--marigold); background: var(--marigold-soft); }
.achievement[data-grade='d'] { border-color: var(--coral); background: var(--coral-soft); }
/* FAILING BEATS THE BAND, and the extra class in the selector is what makes
   it. A student can average 67% - band د - and still fail on a required
   subject, and the first version coloured that card in encouraging amber
   because [data-grade='c'] and .achievement--fail have the same specificity.
   The card said "Failed" in words while every colour on it said otherwise. */
.achievement.achievement--fail[data-grade],
.achievement[data-grade='f'] {
  border-color: var(--berry);
  background: var(--berry-soft);
}
.achievement.achievement--fail[data-grade] .achievement__badge {
  background: #b3006f;
}

.achievement__badge {
  width: 84px;
  height: 84px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 22px;
  /* The neutral fallback. A card rendered before the server sent a band key
     still gets a badge rather than a transparent square. */
  background: var(--teal-deep);
  color: #fff;
  /* The band letter is Pashto/Dari or Latin with the reader's language, so
     the page's own font, and no tracking: it would break الف's joins. */
  font-family: inherit;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  /* Flat, like every other surface: the gradient and coloured glow were the
     last of the effects removed from the app for looking machine-made. */
  box-shadow: none;
}

/* --- one colour per band -------------------------------------------------

   Every passing grade used to get the same teal square, so an A+ and a D were
   indistinguishable at a glance - the one thing on the card a student looks
   at first. The palette already assigns a colour to a meaning everywhere else
   in the app, so the bands borrow it: green down through amber to red.

   These are literal hex, NOT the crayon tokens, and that is deliberate twice
   over.

   First, the vivid tokens are decoration colours: white on --sky is 2.94:1
   and on --marigold 2.18:1, so half the badges would have failed. These are
   the darker -ink shades, where the worst case is 4.82:1 on the D badge
   against the 3:1 this size needs - one white letter works on all six.

   Second, the tokens FLIP in dark mode: --marigold-ink resolves to a pale
   #fae27a there, which would put white on 1.7:1. A grade badge is a fixed
   object with a fixed meaning, like the sign-in card - it should be the same
   green or the same amber whichever theme the office is running. Only the
   panel tint behind it follows the theme, because that sits under body
   text. */
.achievement[data-grade='a-plus'] .achievement__badge {
  background: #177e3d;
}
.achievement[data-grade='a'] .achievement__badge {
  background: #157b69;
}
.achievement[data-grade='b'] .achievement__badge {
  background: #0375a8;
}
.achievement[data-grade='c'] .achievement__badge {
  background: #856c00;
}
.achievement[data-grade='d'] .achievement__badge {
  background: #dd001c;
}
.achievement[data-grade='f'] .achievement__badge {
  background: #b3006f;
}

.achievement__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 650;
  margin-block: 2px 6px;
}
.achievement__note {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* ------------------------------------------------------------------ stamp */

.stamp {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r);
  background: var(--surface-alt);
  flex-wrap: wrap;
}

.stamp__qr {
  width: 108px;
  height: 108px;
  flex: none;
  padding: 6px;
  background: #fff;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
.stamp__qr svg { display: block; width: 100%; height: 100%; }

.stamp__title {
  font-family: var(--font-display);
  font-weight: 650;
  margin-block-end: 6px;
}
.stamp__rows {
  display: flex;
  gap: 6px 20px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
}
/* The fingerprint is the value a parent actually compares, so it is the one
   thing in this strip allowed to be loud. */
.stamp__print {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--primary);
}
.stamp__hint {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  line-height: 1.6;
  max-width: 42ch;
}

/* The seal. Round, two rings, the school's teal - it reads as a stamp at a
   glance, and it carries the fingerprint so it cannot be lifted onto a card
   whose numbers were changed. */
.stamp__seal {
  width: 104px;
  height: 104px;
  flex: none;
  border-radius: 50%;
  border: 2.5px solid var(--teal);
  display: grid;
  place-items: center;
  color: var(--teal);
  /* Slightly off true so it looks applied by hand rather than printed as
     part of the form. */
  transform: rotate(-7deg);
}
.stamp__seal-ring {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1px solid var(--teal);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 6px;
}
.stamp__seal-top,
.stamp__seal-bottom {
  font-size: 8px;
  font-weight: 700;
  line-height: 1.25;
  opacity: 0.85;
}
.stamp__seal-code {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-block: 3px;
  direction: ltr;
}

@media (max-width: 560px) {
  .achievement { flex-direction: column; text-align: center; }
  .stamp { justify-content: center; text-align: center; }
  .stamp__hint { max-width: none; }
}

/* ------------------------------------------------------- print letterhead */

.letterhead {
  align-items: center;
  gap: 14px;
  padding-block-end: 12px;
  margin-block-end: 16px;
  border-block-end: 2px solid var(--border-strong);
}
.letterhead__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}
.letterhead__sub { font-size: 12px; color: var(--fg-muted); }

.footnote {
  margin-block-start: 18px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 10pt;
  color: var(--fg-muted);
  text-align: center;
}

/* ------------------------------------------------- the verification page */

/* The whole point of the page: four characters, big enough to compare with a
   printout held next to the screen without reading them twice. */
.fingerprint-compare {
  text-align: center;
  padding: 20px;
  border: 2px dashed var(--teal);
  border-radius: var(--r);
  background: var(--teal-soft);
}
.fingerprint-compare__label {
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--fg-muted);
}
.fingerprint-compare__value {
  font-family: var(--font-mono);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.2;
  color: var(--secondary);
  margin-block: 6px;
  /* The trailing letter-spacing would push it off-centre otherwise. */
  padding-inline-start: 0.18em;
}
.fingerprint-compare__hint {
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  max-width: 46ch;
  margin-inline: auto;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .fingerprint-compare__value { font-size: 34px; }
}

/* The access code on the office copy of the card. Same treatment as the
   fingerprint: this is a value someone copies down, not prose. */
.stamp__access {
  letter-spacing: 0.14em;
  color: var(--secondary);
}