/* ── Alumni certificate ────────────────────────────────────
   Two things live here: the CERTIFICATE SHEET itself (.alcert*, printed in
   English, LTR) and the Hebrew RTL VERIFICATION PAGE around it (.alv*) served
   at /alumni/cert/:code.

   ONE TYPE SCALE, DRIVEN BY THE CONTAINER
   .alcert-stage is the query container; .alcert takes its font-size from it in
   `cqw` and every dimension inside the sheet is in `em`. Consequences worth
   knowing before editing:
     - The sheet is identical at 380px on a phone, at 1414px in the export, and
       on paper. There is no second "print" stylesheet that could drift.
     - A magic px value anywhere below breaks that. Use em.
     - A container cannot query itself, which is why the stage element exists
       and why .alcert may never carry `container-type` of its own.

   The export (scripts/export-certificate.mjs) screenshots .alcert at a stage
   width of 1414px, where 1cqw = 14.14px and the base font-size lands on 20px.
   Every em below can be read as "x20px at export size". */

.alcert-stage {
  container-type: inline-size;
  width: 100%;
  max-width: 1414px;
  margin-inline: auto;
}

.alcert {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1414 / 1000;
  /* 1.4144cqw = exactly 20px at the 1414px export width, and it scales all the
     way down with NO floor. A floor was tried and removed: it stopped the type
     shrinking but not the box, so on a phone the sheet had to scroll sideways
     and the visitor met their own certificate cropped down the middle. Complete
     and small beats legible and cropped - at phone width this is a THUMBNAIL of
     the document, and the readable copy is the facts table right below it plus
     the PNG behind the download button. */
  font-size: 1.4144cqw;
  font-family: var(--font-body);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3.4em 3.6em 2.8em;
  /* Paper. A cool near-white with two very wide, very faint tints - the
     white -> pale-blue move the marketing pages use, dialled far down: on a
     document, texture must never compete with the text sitting on it. */
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(8, 148, 255, 0.055) 0%, rgba(8, 148, 255, 0) 58%),
    radial-gradient(110% 85% at 92% 100%, rgba(189, 50, 214, 0.045) 0%, rgba(189, 50, 214, 0) 55%),
    #FFFFFF;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Inner hairline, inset from the edge - the frame device every formal
   certificate carries, at one hairline instead of the usual three. */
.alcert__rule {
  position: absolute;
  inset: 1.1em;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

/* Oversized faint brand mark - depth without distraction (the
   .landing-hero::before technique). Behind everything via z-index; the sheet
   sets `isolation: isolate` so this can never escape into the page. */
.alcert__watermark {
  position: absolute;
  inset-inline-start: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  width: 62%;
  /* Low enough that it reads as paper texture rather than as a second piece of
     content competing with the holder's name, which sits directly on top of it.
     Anything above ~0.035 and the "0" bowl starts drawing a ring around the
     name. */
  opacity: 0.03;
  z-index: 0;
  pointer-events: none;
}

.alcert__watermark .logo-10x-mark {
  display: block;
  width: 100%;
}

.alcert__watermark svg {
  display: block;
  width: 100%;
  height: auto;
}

.alcert__head,
.alcert__body,
.alcert__foot,
.alcert__hairline {
  position: relative;
  z-index: 1;
}

/* ── Header: the issuing school + what this document is ──── */

.alcert__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15em;
}

.alcert__issuer {
  height: 1.5em;
}

.alcert__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72em;
  font-weight: 400;
  letter-spacing: 0.34em;
  /* The tracking above adds a trailing gap after the last letter that reads as
     an off-centre line. Half of it back. */
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ── Body: the actual assertion ──────────────────────────── */

.alcert__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  text-align: center;
  width: 100%;
}

.alcert__lede {
  margin: 0;
  font-size: 0.95em;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
}

/* Solid ink, weight 300. The gradient is deliberately absent here: it is
   forbidden on heavy characters, and even at a light weight a graduating
   name is the one element on the sheet that must read as authoritative
   rather than decorative. */
.alcert__name {
  margin: 0.15em 0 0;
  font-family: var(--font-display);
  font-size: 3.5em;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-color);
}

.alcert__name-rule {
  width: 12em;
  height: 1px;
  margin: 0.2em 0 0.6em;
  background: var(--border-default);
}

.alcert__course {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5em;
  margin: 0.1em 0 0.15em;
}

.alcert__course .logo-10x,
.alcert__course .logo-10x-architect {
  height: 100%;
}

/* The whole-programme mark (track: 'course') is roughly 9:1, against about 4:1
   for the two single-course marks, so it cannot share their 2.5em slot height -
   at that height it would run off both edges of the sheet. It gets its own,
   shorter height and lets its width follow.

   Sizing it by WIDTH instead does not work and is worth the warning: the shared
   rule in logo-10x-course.css is `svg { height: 100%; width: auto }`, so a
   wrapper with `height: auto` collapses to zero and the mark vanishes with no
   error - an empty gap where the course name should be. Always give this
   wrapper a height. */
.alcert__course .logo-10x-course {
  height: 2.6em;
}

.alcert__scope {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.76em;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
}

/* The global 3-stop hairline, sized for the sheet's own rhythm. */
.alcert__hairline {
  width: 6.5em;
  margin: 0.6em auto 1.5em;
}

/* ── Footer: who signed it, the seal, how to verify it ───── */

.alcert__foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1.5em;
  width: 100%;
}

/* Signature block, then the instructor's credential badge to its right.
   Order matters: the NAME keeps the left margin, the way a signature does on
   every formal document, and the badge tucks inward toward the seal rather
   than pushing the signer off the edge. */
.alcert__signature {
  display: flex;
  align-items: center;
  gap: 1.5em;
}

.alcert__sign-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Height-driven so the vendor's own proportions are preserved exactly (480x267);
   the brand rules on the mascot apply to somebody else's mark too - never
   redraw, recolour or distort it. Sized to sit UNDER the signature name
   optically: the badge is three stacked lines of type, so matching it to the
   name's cap height would make it the loudest thing in the footer. */
.alcert__sign-badge {
  height: 3.1em;
  width: auto;
  display: block;
  flex: none;
}

/* Typeset, not a handwriting facsimile. A drawn "signature" on a digitally
   issued credential is decoration pretending to be evidence; the verification
   URL two columns over is what actually proves the document. */
.alcert__sign-name {
  margin: 0 0 0.35em;
  font-family: var(--font-display);
  font-size: 1.15em;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--text-color);
}

.alcert__sign-rule {
  width: 11em;
  height: 1px;
  background: var(--text-color);
  opacity: 0.28;
}

.alcert__sign-role {
  margin: 0.5em 0 0;
  font-family: var(--font-mono);
  font-size: 0.62em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.alcert__seal {
  position: relative;
  width: 8.6em;
  height: 8.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -0.4em;
}

/* Gradient ring: a 3-stop brand conic-free border drawn as a masked gradient
   disc, so the ring itself carries the brand colours at hairline weight - the
   only weight the gradient reads cleanly at. */
.alcert__seal-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
  -webkit-mask:
    radial-gradient(circle, transparent 0 calc(50% - 1.5px), #000 calc(50% - 1.5px) 50%, transparent 50%),
    radial-gradient(circle, transparent 0 calc(42% - 1px), #000 calc(42% - 1px) 42%, transparent 42%);
  mask:
    radial-gradient(circle, transparent 0 calc(50% - 1.5px), #000 calc(50% - 1.5px) 50%, transparent 50%),
    radial-gradient(circle, transparent 0 calc(42% - 1px), #000 calc(42% - 1px) 42%, transparent 42%);
  opacity: 0.85;
}

/* Clearance, not taste: the mascot is a SQUARE box inside a round one, so its
   corners sit at radius x 1.414. At 4.9em inside an 8.6em seal that lands at
   40% of the disc, just inside the 42% inner ring. Enlarge the art without
   moving the ring and the robot's arms get sliced by it. */
.alcert__seal-art {
  width: 4.9em;
  height: 4.9em;
}

.alcert__seal-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.alcert__credential {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 1.2em;
}

.alcert__cred-rows {
  display: grid;
  grid-template-columns: auto;
  justify-items: end;
  text-align: right;
  gap: 0;
}

.alcert__cred-label {
  margin: 0.75em 0 0.15em;
  font-family: var(--font-mono);
  font-size: 0.58em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.alcert__cred-label:first-child {
  margin-top: 0;
}

.alcert__cred-value {
  margin: 0;
  font-size: 0.8em;
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-color);
}

.alcert__cred-value--mono {
  font-family: var(--font-mono);
  font-size: 0.74em;
  letter-spacing: 0.03em;
}

.alcert__cred-nowrap {
  white-space: nowrap;
}

.alcert__qr {
  width: 5.2em;
  height: 5.2em;
  display: block;
  border-radius: 2px;
}

/* ── Specimen overprint ──────────────────────────────────── */

.alcert--specimen .alcert__name {
  color: var(--text-tertiary);
}

.alcert__specimen {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-22deg);
  margin: 0;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 5.4em;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: rgba(0, 60, 130, 0.1);
  pointer-events: none;
  white-space: nowrap;
}

/* ── Verification page (Hebrew, RTL) ─────────────────────── */

.alv-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
}

.alv-head {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.alv-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 14px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  border: 1px solid var(--primary-border);
  font-size: 14px;
  font-weight: 500;
  color: var(--primary-color);
}

.alv-status i {
  font-size: 15px;
  line-height: 0;
}

.alv-status i svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.alv-status--specimen {
  background: rgba(105, 53, 216, 0.07);
  border-color: rgba(105, 53, 216, 0.2);
  color: var(--accent-warm);
}

.alv-status--missing {
  background: var(--bg-secondary);
  border-color: var(--border-default);
  color: var(--text-secondary);
}

.alv-title {
  margin: var(--space-md) 0 8px;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--text-color);
}

.alv-sub {
  margin: 0;
  font-size: 17px;
  font-weight: 300;
  color: var(--text-secondary);
}

/* FLEX-wrap, not grid, and the difference is the whole point.
   Separators are 1px gaps letting the container's colour through - the usual
   trick, and it works in a grid right up until the item count does not divide
   by the column count: five facts in four grid columns left a wide grey slab
   beside the lone fifth, so the card looked broken rather than merely uneven.
   A wrapped FLEX row has no empty tracks - `flex-grow: 1` makes whatever landed
   on the last row expand to fill it - so the same 1px trick can never expose
   backing again, at any width, for any number of facts. */
.alv-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-top: var(--space-xl);
  background: var(--border-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.alv-fact {
  flex: 1 1 180px;
  background: var(--bg-surface);
  padding: var(--space-lg);
}

/* The scope cell carries a whole sentence where its neighbours carry a word or
   a number. On the shared 180px basis it broke over three lines and set the
   height of the entire row. */
.alv-fact--wide {
  flex-basis: 260px;
}

.alv-fact dt {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.alv-fact dd {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  color: var(--text-color);
}

/* nowrap, not cosmetics: left to wrap, the credential id broke as "10XD-2026-"
   over "T4K2ME", and a reader comparing it against a printed sheet cannot tell
   a line break from a character. It widens this one flex item instead. */
.alv-fact dd.alv-fact-mono {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.04em;
  direction: ltr;
  text-align: right;
  white-space: nowrap;
}

.alv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-xl);
}

.alv-actions .btn-secondary i,
.alv-actions .btn-primary i {
  margin-inline-start: 8px;
  font-size: 14px;
  line-height: 0;
}

.alv-actions i svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.alv-note {
  max-width: 620px;
  margin: var(--space-xl) auto 0;
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-tertiary);
}

.alv-missing {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.alv-missing p {
  color: var(--text-secondary);
}

.alv-missing-code {
  font-family: var(--font-mono);
  font-size: 15px;
  direction: ltr;
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-color);
}

@media (max-width: 767px) {
  .alv-page {
    padding: var(--space-xl) var(--space-md) var(--space-2xl);
  }

  .alv-title {
    font-size: 30px;
  }

}