/* ==========================================================================
   Math Memory — 📜 the table certificate, on screen and in print
   --------------------------------------------------------------------------
   The same layout js/certificate.js draws onto a canvas, sized in container
   units so the card is the same picture at any width: a phone's win screen,
   the Pond, or a sheet on a laptop.

   Logical properties only, so RTL needs no work here.
   ========================================================================== */

.cert {
  container-type: inline-size;
  position: relative;
  inline-size: 100%;
  max-inline-size: 380px;
  aspect-ratio: 1080 / 1350;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 7cqw;
  background: linear-gradient(180deg, #fffdf6, #ffefc6);
  border: 2.6cqw solid #f2a917;
  box-shadow: inset 0 0 0 1.6cqw #fffdf6, inset 0 0 0 2.2cqw #d98e12, 0 10px 0 #d98e12;
  color: #2a1350;
  text-align: center;
  overflow: hidden;
}

.cert__ribbon {
  margin-block-start: 6cqw;
  padding-block: 2cqw;
  padding-inline: 8cqw;
  border-radius: 999px;
  background: #5b3ad6;
  color: #fff;
  font: 600 5.6cqw/1 var(--font-display, Fredoka, sans-serif);
  letter-spacing: .04em;
}

.cert__face {
  display: grid;
  place-items: center;
  inline-size: 28cqw;
  block-size: 28cqw;
  margin-block-start: 5cqw;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd76a, #ffb62e);
  border: 1.3cqw solid #fff;
  box-shadow: 0 1.3cqw 0 #d98e12;
  font-size: 16cqw;
  line-height: 1;
}

.cert__name {
  margin-block-start: 4cqw;
  max-inline-size: 84%;
  font: 600 10cqw/1.1 var(--font-display, Fredoka, sans-serif);
  overflow-wrap: anywhere;
}

.cert__title {
  margin-block-start: 2cqw;
  font: 600 8.4cqw/1.1 var(--font-display, Fredoka, sans-serif);
  color: #8b3dff;
}

.cert__date {
  margin-block-start: 2.4cqw;
  font: 700 4.4cqw/1.2 var(--font-ui, Nunito, sans-serif);
  color: #55506b;
}

.cert__foot {
  position: absolute;
  inset-inline: 9cqw;
  inset-block-end: 6cqw;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.cert__duck .dk { --duck: 22cqw; inline-size: 22cqw; block-size: 22cqw; }
.cert__brand {
  margin-block-end: 3cqw;
  font: 600 5cqw/1 var(--font-display, Fredoka, sans-serif);
  color: #5b3ad6;
}

/* Browsers without container units get a fixed-size card that still reads. */
@supports not (container-type: inline-size) {
  .cert { inline-size: 320px; }
  .cert__ribbon { font-size: 18px; }
  .cert__face { inline-size: 90px; block-size: 90px; font-size: 52px; }
  .cert__name { font-size: 32px; }
  .cert__title { font-size: 26px; }
  .cert__date { font-size: 14px; }
  .cert__brand { font-size: 16px; }
}

/* ---- The actions under it: 📥 🖨️ 📤 ---------------------------------------- */

.cert-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.cert-actions .qa-btn {
  flex-direction: column;
  gap: 4px;
  min-block-size: 72px;
  padding-inline: 6px;
  font-size: 16px;
}
.cert-actions .qa-btn__icon { font-size: 26px; }

/* ---- Printing just the certificate ---------------------------------------- */

#mm-print { display: none; }

@media print {
  html.mm-printing body > *:not(#mm-print) { display: none !important; }
  html.mm-printing, html.mm-printing body { background: #fff !important; }
  html.mm-printing #mm-print {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 100vh;
  }
  html.mm-printing #mm-print img {
    max-inline-size: 100%;
    max-block-size: 100vh;
  }
}