/* ==========================================================================
   certificate.css — Burnt Certificate of Completion
   --------------------------------------------------------------------------
   Self-contained feature layer. Does not modify existing dashboard styles.

   The sheet is authored in true millimetres (297 × 210 mm = A4 landscape) and
   scaled down for the on-screen preview with a CSS variable, so the printed
   copy and the PDF are all identical and exact.

   BRAND ASSET
   The official BURNT wordmark is the uploaded artwork
   images/burnt-cert-logo.png. That file is white lettering on an opaque
   charcoal plate, so the masthead band is set to the measured plate colour
   (#3a3432) and the logo is placed at full band height. The real file is used
   as supplied — never redrawn, traced or recoloured.
   ========================================================================== */

/* ---------- Locked / unlocked panels -------------------------------------- */

.cert-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: clamp(20px, 3vw, 32px);
  position: relative;
  overflow: hidden;
}

.cert-panel--locked {
  background: var(--paper-2);
  border-color: var(--line-strong);
}

/* the locked state reads as a sealed envelope, not an error */
.cert-panel--locked::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed #dcd8d0;
  border-radius: 10px;
  pointer-events: none;
}

.cert-panel__icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-3);
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.cert-panel__icon svg { width: 21px; height: 21px; color: var(--muted); }
.cert-panel--unlocked .cert-panel__icon { background: #fff; }
.cert-panel--unlocked .cert-panel__icon svg { color: var(--ink); }

.cert-panel h2 { margin-bottom: 8px; position: relative; z-index: 1; font-size: 1.26rem; }
.cert-panel h3 { margin-bottom: 6px; position: relative; z-index: 1; }
.cert-panel p { max-width: 62ch; position: relative; z-index: 1; }

.cert-panel--unlocked {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.cert-panel--unlocked h2,
.cert-panel--unlocked h3 { color: #fff; }
.cert-panel--unlocked p { color: rgba(255, 255, 255, .76); }
.cert-panel--unlocked .cert-name-hint { color: rgba(255, 255, 255, .55); }

/* inline variant sits inside the assessment result page */
.cert-panel--inline { padding: 22px; }
.cert-panel--inline h2 { font-size: 1.12rem; }
.cert-panel--inline h3 { font-size: 1rem; }
.cert-panel--inline .cert-kicker { margin-bottom: 8px; }

.cert-kicker {
  font-size: .63rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.cert-panel--unlocked .cert-kicker { color: rgba(255, 255, 255, .6); }

/* ---------- Name entry ---------------------------------------------------- */

.cert-name-field { margin-top: 22px; max-width: 460px; position: relative; z-index: 1; }

.cert-name-field label {
  display: block;
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .02em;
  margin-bottom: 7px;
  color: inherit;
}

.cert-name-field input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
}
.cert-name-field input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(11, 11, 12, .08);
}
.cert-name-field input::placeholder { color: #9a9a9f; }

.cert-name-hint {
  font-size: .72rem;
  color: var(--muted);
  margin-top: 6px;
  position: relative;
  z-index: 1;
}
.cert-name-hint--last { margin-top: 16px; max-width: 62ch; }

/* ---------- Buttons ------------------------------------------------------- */

.cert-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.cert-actions--tight { margin-top: 14px; }

.cert-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 99px;
  border: 1px solid #fff;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, transform .12s, border-color .15s;
  text-align: center;
}
.cert-cta:hover { background: #e9e7e2; }
.cert-cta:active { transform: translateY(1px); }
.cert-cta svg { width: 15px; height: 15px; flex: 0 0 15px; }
.cert-cta:disabled { opacity: .55; cursor: not-allowed; }

.cert-cta--sm { padding: 10px 17px; font-size: .72rem; }

.cert-cta--dark {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.cert-cta--dark:hover { background: #26262a; }

/* quiet buttons adapt to the surface they sit on */
.cert-cta--quiet {
  background: transparent;
  color: inherit;
  border-color: rgba(255, 255, 255, .32);
  letter-spacing: .04em;
  font-weight: 600;
  text-transform: none;
  font-size: .84rem;
  padding: 11px 18px;
}
.cert-cta--quiet:hover { background: rgba(255, 255, 255, .1); }

.cert-panel--locked .cert-cta--quiet,
.cert-cta--outline {
  border-color: var(--line-strong);
  color: var(--ink);
}
.cert-panel--locked .cert-cta--quiet:hover,
.cert-cta--outline:hover { background: var(--paper-3); }

/* ---------- Progress toward the gate ------------------------------------- */

.cert-gate { margin-top: 18px; max-width: 460px; position: relative; z-index: 1; }

.cert-gate__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  margin-bottom: 7px;
  color: var(--muted);
  gap: 12px;
}
.cert-gate__row b { color: var(--ink); font-size: .9rem; }
.cert-gate__row--last { margin: 8px 0 0; }

.cert-gate .bar { height: 7px; background: #dcd8d0; }
.cert-gate .bar > i { background: var(--ink); }
.cert-gate .bar > i.is-pass { background: var(--good); }

/* ---------- Stage / sheet ------------------------------------------------- */

.cert-stage { display: none; margin-top: 26px; }
.cert-stage.is-show { display: block; animation: rise .35s ease; }

.cert-stage__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cert-stage__head h3 { margin: 0; font-size: .98rem; }
.cert-stage__head .tiny { color: var(--muted); }

.cert-stage__status { color: var(--muted); font-size: .74rem; align-self: center; }

/* wrapper that scales the mm-authored sheet down to the container width */
.cert-frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 297 / 210;
  overflow: hidden;
  border-radius: 6px;
  background: #fffefb;
  box-shadow: 0 18px 44px rgba(11, 11, 12, .16), 0 0 0 1px rgba(11, 11, 12, .08);
}

.cert-sheet {
  /* authored at true A4 landscape so print and PDF are exact */
  width: 297mm;
  height: 210mm;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  transform: scale(var(--cert-scale, .32));
  background: #fffefb;
  color: #0b0b0c;
  font-family: var(--font);
  overflow: hidden;
  line-height: 1.5;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.cert-sheet * { box-sizing: border-box; }

/* ---------- Certificate furniture ---------------------------------------- */

.cert-frame-outer {
  position: absolute;
  inset: 9mm;
  border: 0.7mm solid #0b0b0c;
  pointer-events: none;
}
.cert-frame-inner {
  position: absolute;
  inset: 12.4mm;
  border: 0.2mm solid #cfc9bd;
  pointer-events: none;
}

/* corner ticks — the small "engraved plate" detailing */
.cert-tick {
  position: absolute;
  width: 6mm;
  height: 6mm;
  border-color: #0b0b0c;
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}
.cert-tick--tl { top: 5.5mm; left: 5.5mm; border-top-width: 0.5mm; border-left-width: 0.5mm; }
.cert-tick--tr { top: 5.5mm; right: 5.5mm; border-top-width: 0.5mm; border-right-width: 0.5mm; }
.cert-tick--bl { bottom: 5.5mm; left: 5.5mm; border-bottom-width: 0.5mm; border-left-width: 0.5mm; }
.cert-tick--br { bottom: 5.5mm; right: 5.5mm; border-bottom-width: 0.5mm; border-right-width: 0.5mm; }

/* ---------- Masthead: the official BURNT mark ---------------------------- */

/* The supplied artwork is white lettering on its own opaque charcoal plate.
   The band behind it is set to that measured plate colour and the artwork is
   drawn at full band height, so the plate and the band are one surface and no
   pasted-on rectangle is visible. */
.cert-band {
  position: absolute;
  left: 12.4mm;
  right: 12.4mm;
  top: 12.4mm;
  height: 26mm;
  background: #3a3432;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cert-brand {
  display: block;
  height: 26mm;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
}

.cert-body-wrap {
  position: absolute;
  inset: 46mm 26mm 13mm;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cert-headline {
  margin-top: 0;
  font-family: var(--display);
  font-size: 17pt;
  font-weight: 700;
  letter-spacing: .2em;
  text-indent: .2em;
  line-height: 1.1;
  color: #0b0b0c;
  text-transform: uppercase;
}

.cert-headline-rule {
  width: 40mm;
  height: 0.2mm;
  background: #cfc9bd;
  margin: 4mm auto 0;
}

.cert-awarded {
  margin-top: 5.2mm;
  font-size: 9.5pt;
  font-style: italic;
  letter-spacing: .03em;
  color: #6f6f74;
  font-weight: 400;
}

.cert-name {
  margin-top: 2.8mm;
  font-family: var(--display);
  font-size: 29pt;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.12;
  color: #0b0b0c;
  max-width: 226mm;
  word-break: break-word;
  min-height: 10.5mm;
}
.cert-name.is-empty { color: #c9c4ba; font-weight: 500; }

.cert-name-rule {
  width: 158mm;
  height: 0.25mm;
  background: #b9b3a6;
  margin: 2.8mm auto 0;
}

.cert-statement {
  margin: 5.4mm 0 0;
  font-size: 10pt;
  line-height: 1.58;
  color: #3d3d40;
  max-width: 172mm;
  font-weight: 400;
}

/* engraved seal sits between the statement and the result row */
.cert-sealmark {
  margin: 7mm 0 0;
  width: 19mm;
  height: 19mm;
  border-radius: 50%;
  border: 0.45mm solid #0b0b0c;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 19mm;
}
.cert-sealmark::before {
  content: "";
  position: absolute;
  inset: 1.4mm;
  border-radius: 50%;
  border: 0.2mm solid #cfc9bd;
}
.cert-sealmark b {
  font-family: var(--display);
  font-size: 12pt;
  font-weight: 700;
  letter-spacing: .02em;
  color: #0b0b0c;
}

/* ---------- Result / status / date row ----------------------------------- */

.cert-meta {
  margin-top: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
}
.cert-meta__item {
  padding: 0 11mm;
  position: relative;
  min-width: 52mm;
}
.cert-meta__item + .cert-meta__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5mm;
  bottom: 0.5mm;
  width: 0.2mm;
  background: #dcd8d0;
}
.cert-meta__label {
  display: block;
  font-size: 6.4pt;
  letter-spacing: .17em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8a8578;
  margin-bottom: 2.2mm;
  white-space: nowrap;
}
.cert-meta__value {
  display: block;
  font-family: var(--display);
  font-size: 13.5pt;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #0b0b0c;
  line-height: 1.15;
}
.cert-meta__value--pass { letter-spacing: .14em; font-size: 11.5pt; }

/* ---------- Footer -------------------------------------------------------- */

.cert-foot {
  margin-top: 6mm;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4mm;
  border-top: 0.2mm solid #e2ded6;
  font-size: 7.4pt;
  color: #8a8578;
  letter-spacing: .05em;
  gap: 6mm;
}
.cert-foot__id { text-align: left; }
.cert-foot__issuer { text-align: right; line-height: 1.5; }
.cert-foot__issuer b {
  display: block;
  color: #3d3d40;
  font-weight: 650;
  letter-spacing: .04em;
}

/* ---------- Dashboard banner --------------------------------------------- */

.cert-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 17px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.cert-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.cert-card:active { transform: translateY(1px); }

.cert-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-3);
  color: var(--muted);
}
.cert-card__icon svg { width: 19px; height: 19px; }

.cert-card__body { flex: 1 1 auto; min-width: 0; display: block; }

.cert-card__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.cert-card__title {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: .97rem;
  letter-spacing: -.01em;
  margin: 0 0 2px;
}
.cert-card__text { display: block; color: var(--muted); }

.cert-card__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 11px 18px;
  border-radius: 99px;
  border: 1px solid var(--line-strong);
  background: var(--paper-2);
  color: var(--ink);
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.cert-card:hover .cert-card__cta { background: var(--ink); border-color: var(--ink); color: #fff; }

/* unlocked banner turns ink, matching the dashboard hero */
.cert-card--unlocked {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.cert-card--unlocked:hover { border-color: #2c2c30; }
.cert-card--unlocked .cert-card__icon { background: #fff; color: var(--ink); }
.cert-card--unlocked .cert-card__text { color: rgba(255, 255, 255, .72); }
.cert-card--unlocked .cert-card__cta {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}
.cert-card--unlocked:hover .cert-card__cta { background: #e9e7e2; border-color: #e9e7e2; }

/* light badges that sit on the ink banner */
.cert-card__badge-light {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-color: rgba(255, 255, 255, .24);
}
.cert-card__badge-unlocked {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

/* ---------- Print / PDF copy --------------------------------------------- */

/* The printed copy lives at body level (outside .app, which print hides) so a
   print job always has a real sheet on the page. Hidden on screen. */
.cert-print-root { display: none; }

@media print {
  @page { size: A4 landscape; margin: 0; }

  html, body {
    background: #fffefb !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .app, .topbar, .sidebar, .scrim, .toast,
  .cert-stage, .cert-frame-wrap, .cert-actions, .assess-bar,
  .search-results, .searchbox {
    display: none !important;
  }

  .cert-print-root {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .cert-print-root .cert-sheet {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    page-break-after: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

/* ---------- Responsive --------------------------------------------------- */

@media (max-width: 900px) {
  .cert-card { flex-wrap: wrap; }
  .cert-card__cta { width: 100%; }
}

@media (max-width: 720px) {
  .cert-panel { padding: 20px 17px; }
  .cert-panel--inline { padding: 18px; }
  .cert-cta { width: 100%; }
  .cert-cta--quiet { width: 100%; }
  .cert-actions .cert-cta--sm { width: 100%; }
  .cert-frame-wrap { border-radius: 4px; }
  .cert-stage__head .tiny { width: 100%; }
  .cert-stage__status { width: 100%; }
  .cert-name-field { max-width: none; }
  .cert-gate { max-width: none; }
  .cert-meta__item { padding: 0 5mm; min-width: 0; }
  .cert-meta__label { font-size: 6pt; letter-spacing: .12em; }
}

@media (prefers-reduced-motion: reduce) {
  .cert-stage.is-show { animation: none; }
  .cert-card, .cert-cta, .cert-card__cta { transition: none; }
}