/* Certificate page (student layout) and the certificate sheet. The sheet is sized in container query
   units (cqi: 1cqi = 1% of the sheet's content box, which is 84% of its width), so one markup is the page view,
   the style-guide thumbnail and the A4 landscape print. A container cannot query itself, so the sheet's own
   padding is in % of its width. */

/* Page */
.cert, .cert-view { display: grid; gap: var(--space-7); min-width: 0; }
.cert-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5) var(--gutter); align-items: end; }
.cert-head__copy { grid-column: 1 / span 7; display: grid; gap: var(--space-4); justify-items: start; }
.cert-head__copy h1 { max-width: 13ch; }
.cert-head__copy .lead { max-width: 50ch; }
.cert-head__actions { grid-column: 9 / -1; display: grid; gap: var(--space-3); justify-items: start; }
.cert-head__hint { max-width: 36ch; font-size: var(--fs-small); color: var(--text-muted); }
@media (max-width: 1023px) {
  .cert-head__copy, .cert-head__actions { grid-column: 1 / -1; }
}

.demo-bar__note { flex-basis: 100%; margin: 0; font-size: var(--fs-small); color: var(--text-muted); }

/* Locked: the two requirements, and a quiet outline of the certificate to come */
.cert-locked { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-7) var(--gutter); align-items: start; }
.cert-locked > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 1280px) {
  .cert-reqs-panel { grid-column: 1 / span 7; }
  .cert-ghost { grid-column: 9 / -1; }
}
.cert-reqs { display: grid; margin: 0; }
.cert-req { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: var(--space-2) var(--space-4); padding-block: var(--space-5); border-top: 1px solid var(--line); }
.cert-req:first-child { padding-top: 0; border-top: 0; }
.cert-req:last-child { padding-bottom: 0; }
.cert-req__mark { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--gold-500); border-radius: var(--radius-pill); color: var(--gold-600); }
.cert-req__mark .icon { width: 18px; height: 18px; }
.cert-req[data-status='todo'] .cert-req__mark { border-style: dashed; border-color: var(--teal-500); color: var(--teal-500); }
.cert-req[data-status='done'] .cert-req__mark { border-color: var(--teal-700); background: var(--teal-700); color: var(--on-dark); }
.cert-req__body { display: grid; gap: var(--space-2); min-width: 0; padding-top: var(--space-1); }
.cert-req__title { font: 400 1.5rem / 1.2 var(--font-display); }
.cert-req__meta { color: var(--text-muted); }
p.cert-req__meta:not(.mono) { font-size: var(--fs-small); }
.cert-req .progress { margin-top: var(--space-2); }
.cert-req__status { margin-top: var(--space-1); }
.cert-req[data-status='progress'] .cert-req__status { border-color: var(--gold-600); color: var(--gold-700); }
@media (max-width: 479px) {
  .cert-req { grid-template-columns: 40px minmax(0, 1fr); }
  .cert-req__status { grid-column: 2; justify-self: start; }
}

.cert-ghost { display: grid; gap: var(--space-4); margin: 0; }
.cert-ghost__sheet {
  container-type: inline-size;
  position: relative; display: grid; justify-items: center; align-content: center; gap: 2.4cqi;
  aspect-ratio: 297 / 210; padding: 6%;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-1);
  text-align: center;
}
.cert-ghost__sheet::before { content: ''; position: absolute; inset: 3.4cqi; border: 1px dashed var(--gold-500); pointer-events: none; }
.cert-ghost__star { width: 6cqi; height: 6cqi; color: var(--gold-500); }
.cert-ghost__title { font: 400 7.4cqi / 1 var(--font-display); color: var(--text-muted); }
.cert-ghost__title em { color: var(--gold-700); }
.cert-ghost__name { display: block; width: 50cqi; margin-block: 3cqi 1cqi; border-top: 1px dashed var(--teal-500); }
.cert-ghost__lock {
  display: inline-flex; align-items: center; gap: 1.6cqi; padding: 1.4cqi 3.2cqi;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--paper);
  font: 400 3.4cqi / 1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}
.cert-ghost__lock .icon { width: 4cqi; height: 4cqi; color: var(--gold-600); }
.cert-ghost__caption { max-width: 46ch; font-size: var(--fs-small); color: var(--text-muted); }

/* Unlocked: the sheet on a paper mount, then its details */
.cert-stage { padding: clamp(var(--space-3), 4vw, var(--space-8)); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-card); }
.cert-stage__hint { display: none; margin-top: calc(-1 * var(--space-5)); font-size: var(--fs-small); color: var(--text-muted); }
@media (max-width: 767px) { .cert-stage__hint { display: block; } }
.cert-below { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.cert-below > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 1280px) {
  .cert-details { grid-column: 1 / span 7; }
  .cert-share { grid-column: 8 / -1; }
}
.cert-share { display: grid; gap: var(--space-4); justify-items: start; }
.cert-share__id {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; padding: var(--space-3) var(--space-4);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-field);
}
.cert-share__id .facts__code { font-size: 1.125rem; }

/* The certificate sheet: A4 landscape (297 × 210) */
.certificate {
  container-type: inline-size;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  aspect-ratio: 297 / 210;
  padding: 6.4% 8% 5.6%;
  background: var(--card); color: var(--text);
  border-radius: var(--radius-1); /* a printed sheet, not a card */
  box-shadow: var(--shadow-card);
}
.certificate__monogram { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; pointer-events: none; }
.certificate__monogram::before { content: attr(data-text); font: 400 52cqi / 1 var(--font-display); letter-spacing: -.04em; color: color-mix(in srgb, var(--gold-500) 5%, transparent); }
/* The wave sits in the gap between the body and the foot, clipped to the inner frame rule so it emerges from the frame */
.certificate__path { position: absolute; left: 0; bottom: 17.5%; z-index: 0; width: 100%; height: 11%; overflow: hidden; clip-path: inset(0 3.2cqi 0 3.2cqi); opacity: .55; pointer-events: none; }
.certificate__path path { fill: none; stroke: var(--gold-500); stroke-width: 1.25; stroke-linecap: round; }
.certificate__frame { position: absolute; inset: 2.4cqi; z-index: 0; border: 1px solid var(--gold-500); pointer-events: none; }
.certificate__frame::after { content: ''; position: absolute; inset: .8cqi; border: 1px solid color-mix(in srgb, var(--gold-500) 45%, transparent); }
.certificate__corner { position: absolute; z-index: 1; width: 2.4cqi; height: 2.4cqi; color: var(--gold-500); }
.certificate__corner--tl { top: 1.2cqi; left: 1.2cqi; }
.certificate__corner--tr { top: 1.2cqi; right: 1.2cqi; }
.certificate__corner--bl { bottom: 1.2cqi; left: 1.2cqi; }
.certificate__corner--br { bottom: 1.2cqi; right: 1.2cqi; }
.certificate__top, .certificate__body, .certificate__foot { position: relative; z-index: 1; min-width: 0; }

.certificate__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 4cqi; }
.certificate__brand { display: grid; gap: 1cqi; justify-items: start; }
.certificate__wordmark { display: block; font-family: var(--font-display); line-height: 1; white-space: nowrap; }
.certificate__ee { font-size: 4cqi; }
.certificate__medpath { font-size: 2.7cqi; }
.certificate__brand-star { display: inline-block; width: 1.4cqi; height: 1.4cqi; margin-left: .4cqi; vertical-align: top; color: var(--gold-500); }
.certificate__sub { display: block; font: 400 1.25cqi / 1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-700); }
.certificate__verify { display: flex; align-items: center; gap: 1.8cqi; }
.certificate__ref { display: grid; gap: .6cqi; justify-items: end; text-align: right; }
.certificate__label { font: 400 1.25cqi / 1.3 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.certificate__number { font: 400 1.75cqi / 1.2 var(--font-mono); letter-spacing: .06em; color: var(--teal-950); }
.certificate__qr-wrap { display: grid; justify-items: center; gap: .6cqi; flex: none; }
.certificate__qr-note { text-align: center; }
.certificate__qr { width: 9cqi; height: 9cqi; flex: none; color: var(--teal-950); }

.certificate__body { display: grid; justify-items: center; align-content: center; gap: 1.3cqi; padding-block: 1.8cqi; text-align: center; }
.certificate__star { width: 3cqi; height: 3cqi; color: var(--gold-500); }
.certificate__title { font-size: 6.2cqi; line-height: 1; letter-spacing: -.01em; }
.certificate .certificate__title em { color: var(--gold-700); }
.certificate__line { font: italic 400 2.2cqi / 1.3 var(--font-display); color: var(--text-muted); }
.certificate__holder { margin-top: .5cqi; font: 400 7.6cqi / 1.05 var(--font-display); letter-spacing: -.015em; color: var(--teal-950); }
.certificate__holder--long { font-size: 5.6cqi; }
.certificate__rule { display: flex; align-items: center; gap: 1.4cqi; width: 52cqi; color: var(--gold-500); }
.certificate__rule::before, .certificate__rule::after { content: ''; flex: 1; height: 1px; background: currentColor; }
.certificate__rule svg { width: 1.6cqi; height: 1.6cqi; flex: none; }
.certificate__course { font: 400 3.6cqi / 1.15 var(--font-display); }

.certificate__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 4.6cqi; }
.certificate__sign, .certificate__date { display: grid; gap: 1cqi; }
.certificate__sign { justify-items: start; }
.certificate__date { justify-items: end; text-align: right; }
.certificate__signature { font: italic 400 3.3cqi / 1 var(--font-display); color: var(--teal-950); }
.certificate__value { font: 400 2.4cqi / 1.1 var(--font-display); color: var(--teal-950); }
.certificate__foot .certificate__label { min-width: 26cqi; padding-top: 1.2cqi; border-top: 1px solid var(--gold-500); }
.certificate__seal { width: 13cqi; height: 13cqi; color: var(--gold-500); }
.certificate__seal-ring { fill: none; stroke: currentColor; stroke-width: .75; }
/* The wave passes behind a stamped seal: the outer ring is backed by an opaque disc in the sheet colour */
.certificate__seal-ring:first-of-type { fill: var(--card); }
.certificate__seal-text { fill: var(--gold-700); font: 400 7px / 1 var(--font-mono); letter-spacing: .1em; }

/* Gold foil shimmer: one pass on unlock (certificate.js). Shown only while it plays; only transform animates. */
.certificate__shimmer {
  display: none; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, color-mix(in srgb, var(--gold-500) 20%, transparent) 45%, color-mix(in srgb, var(--card) 85%, transparent) 50%, color-mix(in srgb, var(--gold-500) 20%, transparent) 55%, transparent 68%);
  transform: translateX(-100%);
}
.certificate[data-shimmer='playing'] .certificate__shimmer { display: block; will-change: transform; }

/* Certificate verification (public layout, ivory body) */
.verify { padding-block: calc(var(--header-h) + var(--space-8)) var(--section-pad); }
.verify:focus { outline: none; }
.verify__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-7) var(--gutter); align-items: start; }
.verify__grid > * { grid-column: 1 / -1; min-width: 0; }
.verify__head { display: grid; gap: var(--space-4); }
.verify__head h1 { max-width: 12ch; }
.verify__head .lead { max-width: 46ch; }
.verify__form-col { display: grid; gap: var(--space-5); }
.verify__help { max-width: 52ch; font-size: var(--fs-small); color: var(--text-muted); }
@media (min-width: 1024px) {
  .verify__head { grid-column: 1 / span 7; }
  .verify__form-col { grid-column: 1 / span 6; grid-row: 2; }
  .verify__result { grid-column: 8 / -1; grid-row: 2; }
}

.verify-form { display: grid; gap: var(--space-5); padding: clamp(var(--space-5), 3vw, var(--space-6)); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.verify-form__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); }
.verify-form__input { font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 479px) { .verify-form__row { grid-template-columns: minmax(0, 1fr); } }

/* Result cards: the valid card echoes the certificate's gold double rule; "not found" is dashed */
.verify-card { position: relative; display: grid; gap: var(--space-5); padding: clamp(var(--space-6), 4vw, var(--space-7)); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.verify-card--valid { border-color: transparent; box-shadow: var(--shadow-card); }
.verify-card--valid::before { content: ''; position: absolute; inset: var(--space-3); border: 1px solid color-mix(in srgb, var(--gold-500) 55%, transparent); border-radius: var(--radius-field); pointer-events: none; }
.verify-card--missing { border-style: dashed; border-color: var(--warning); }
.verify-card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.verify-card__seal { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--gold-500); border-radius: var(--radius-pill); color: var(--gold-500); }
.verify-card__seal svg { width: 26px; height: 26px; }
.verify-card--missing .verify-card__seal { border-style: dashed; border-color: var(--warning); color: var(--warning); }
.verify-card__status {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 28px; padding: 0 var(--space-3);
  border: 1px solid var(--success); border-radius: var(--radius-pill);
  font: 400 var(--fs-mono) / 1 var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--success);
}
.verify-card__status .icon { width: 14px; height: 14px; }
.verify-card--missing .verify-card__status { border-color: var(--warning); color: var(--warning); }
.verify-card__title { font-size: var(--fs-h3); }
.verify-card__id { font-weight: 500; white-space: nowrap; }
.verify-card__note { font-size: var(--fs-small); color: var(--text-muted); }