/* Diploma generator /dyplom/: the form + a live A4 diploma (variant A «Класичний», same layout as the pack diplomas
   in sheets/_base/diploma.css). Everything runs in the browser (static/js/dyplom.js); printing shows only the diploma.
   Diploma classes start with d- so landing.css (.kicker, .name…) never styles them. */
@font-face { font-family: 'Andika'; font-weight: 400; font-display: swap;
  src: url("../fonts/andika-400-cyrillic.eef0d93f43e0.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Andika'; font-weight: 400; font-display: swap;
  src: url("../fonts/andika-400-latin.d3b664e808ca.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Andika'; font-weight: 700; font-display: swap;
  src: url("../fonts/andika-700-cyrillic.a03e00ea2b1b.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Andika'; font-weight: 700; font-display: swap;
  src: url("../fonts/andika-700-latin.86ae62508c72.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── page ── */
.maker { display: grid; gap: 28px; padding-top: 8px; border-top: 0; }
.maker form { display: grid; gap: 18px; align-content: start; }
.maker label, .maker legend { font: 700 15px var(--sans); }
.maker .field { display: grid; gap: 6px; }
.maker input[type=text], .maker input[type=date], .maker select {
  font: 600 17px var(--sans); color: var(--ink); background: var(--paper); padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 8px; width: 100%; }
.maker fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.maker fieldset legend { width: 100%; margin-bottom: 6px; padding: 0; }
.maker fieldset label { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.maker input[type=radio] { width: 20px; height: 20px; accent-color: var(--ink); }
.maker .swatch { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
.maker .hint { margin: -10px 0 0; font-size: 14px; color: var(--muted); }
.maker .print { justify-self: start; }
.maker input:focus-visible, .maker select:focus-visible, .maker .print:focus-visible { outline: 3px solid #2f6fdb; outline-offset: 2px; }
.maker .preview { max-width: 520px; width: 100%; justify-self: center; }
@media (min-width: 900px) {
  .maker { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; gap: 48px; }
  .maker .preview { position: sticky; top: 16px; }
}

/* ── the diploma: an A4 box, sizes in cqw like the printed sheets ── */
.d-sheet { --ink: #2b2b33; --muted: #8a8a94; --accent: #e0202e; --display: "Andika", "Trebuchet MS", sans-serif;
  aspect-ratio: 210 / 297; container-type: inline-size; position: relative; background: #fff; color: var(--ink);
  box-shadow: 0 6px 24px rgb(0 0 0 / .14); font-family: var(--display); }
.d-sheet.blue { --accent: #2f6fdb; }
.d-sheet.green { --accent: #1f8a4c; }
.d-page { position: absolute; inset: 5cqw; border: .5cqw solid var(--ink); padding: 1.6cqw; }
.d-inner { box-sizing: border-box; height: 100%; border: .3cqw solid var(--accent); padding: 4cqw 6cqw 3cqw;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.6cqw; }
.d-stitch { width: 60%; height: 2.4cqw; flex: none; }
.d-kicker { font: 700 2.2cqw var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.d-title { margin: 0; font: 700 10cqw/1 var(--display); color: var(--accent); letter-spacing: 0; }
.d-title small { display: block; margin-top: 1.4cqw; font: 700 3.8cqw/1.25 var(--display); color: var(--ink); }
.d-mascot { width: 22cqw; height: auto; }
.d-given { font: 400 3cqw var(--display); }
.d-name { width: 74%; min-height: 8cqw; flex: none; border-bottom: .35cqw solid var(--ink);
  font: 700 6.4cqw/8cqw var(--display); color: var(--ink); overflow-wrap: anywhere; }
.d-for { margin: 1cqw 0 0; max-width: 80%; font: 700 3.4cqw/1.4 var(--display); color: var(--accent); overflow-wrap: anywhere; }
.d-stars { display: flex; gap: 2cqw; }
.d-stars svg { width: 8cqw; height: 8cqw; }
.d-note { font: 400 2.2cqw var(--display); color: var(--muted); }
.d-sign { margin-top: auto; width: 100%; display: flex; justify-content: space-between; align-items: flex-end; font: 400 2.2cqw var(--display); }
.d-sign > div { display: flex; flex-direction: column; gap: .8cqw; align-items: center; min-width: 26cqw; }
.d-line { width: 100%; height: 5cqw; border-bottom: .25cqw solid var(--ink); font: 700 3.2cqw/5cqw var(--display); }
.d-sig { font: 700 4cqw/5cqw var(--display); color: var(--accent); }
.d-sign span:last-child { color: var(--muted); }
.d-stamp { width: 16cqw; height: 16cqw; transform: rotate(-12deg); }

/* ── print: only the diploma, one A4 page ── */
@media print {
  @page { size: A4; margin: 0; }
  html, body { height: 296mm; overflow: hidden; margin: 0; background: #fff; }
  body > :not(main), main > :not(.maker), .maker > :not(.preview) { display: none !important; }
  main.wrap, .maker, .maker .preview { display: block; position: static; max-width: none; width: auto; margin: 0; padding: 0; border: 0; }
  .d-sheet { width: 210mm; height: 296mm; aspect-ratio: auto; box-shadow: none;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}