/* ── 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%;
}

.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;
  }

}