/* Printable certificates (grown-ups area): fields and a live preview on screen, one A4 landscape page in print.
   The sheet sizes everything in container units (--u is 1% of its own width), so the scaled preview and the
   297 mm page look the same and no inline styles are needed. */
.kcert .kcert-privacy{margin:6px 0 0}
.kcert-steps{margin:0 0 18px;padding-left:1.3em;max-width:850px}
.kcert-steps li{color:var(--k-ink-2)}
.kcert .kcert-needjs{color:var(--k-ink-2);margin:0 0 6px}
.kcert-blank{display:flex;flex-wrap:wrap;gap:0 24px;margin:0 0 12px}
.kcert-tips ul{margin:0;padding-left:1.3em;max-width:850px}
.kcert-tips li{color:var(--k-ink-2)}

/* ---------- Maker: fields and preview ---------- */
.kcert-layout{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:28px;align-items:start}
@media(max-width:900px){.kcert-layout{grid-template-columns:minmax(0,1fr);gap:22px}}
.kcert-fields{display:flex;flex-direction:column;gap:16px}
.kcert-field{margin:0;padding:0;border:0;min-width:0}
.kcert-label{display:block;margin:0 0 6px;padding:0;font-weight:800;font-size:.95rem;color:var(--k-ink)}
.kcert-input{display:block;width:100%;min-height:48px;padding:10px 14px;border-radius:12px;border:2px solid var(--k-line);background:var(--k-surface-2);color:var(--k-ink);font:inherit;color-scheme:dark}
.kcert-input:focus-visible,.kcert-style:has(input:focus-visible){outline:4px solid #ffb754;outline-offset:3px}
.kcert .kcert-hint{margin:6px 2px 0}
.kcert-style-row{display:grid;gap:10px}
.kcert-style{display:flex;align-items:flex-start;gap:12px;min-height:56px;padding:12px 14px;border:2px solid var(--k-line);border-radius:14px;background:var(--k-surface);cursor:pointer}
.kcert-style:has(input:checked){border-color:var(--k-cyan);background:var(--k-surface-2)}
.kcert-style input{flex:none;width:20px;height:20px;margin:3px 0 0;accent-color:var(--k-cyan)}
.kcert-style strong{display:block;color:var(--k-ink)}
.kcert-style .kp-small{display:block}
.kcert-stage{min-width:0}
.kp-main .kcert-preview-title{margin:0 0 10px;font-size:1.05rem;color:var(--k-ink)}
.kcert-actions{display:flex;justify-content:center;margin:18px 0 0}
.kcert .kcert-print{min-width:min(100%,280px)}
.kcert .kcert-status{min-height:1.4em;margin:8px 0 0;text-align:center}

/* ---------- The certificate sheet (screen preview and print page) ---------- */
.kcert-sheet{
 --u:1cqw;--ink:#1b2347;--soft:#4a527a;--accent:#5b3fc4;
 --zone-top:12%;--zone-side:22%;--zone-bottom:38%;
 --title-k:3.5;--name-k:6.4;--what-k:3.4;--g:1;
 position:relative;width:100%;max-width:960px;margin:0 auto;aspect-ratio:297/210;overflow:hidden;
 container-type:inline-size;background:#fff;color:var(--ink);border-radius:6px;box-shadow:var(--k-shadow);
 font-family:Manrope,Inter,system-ui,sans-serif;
}
@supports not (width:1cqw){.kcert-sheet{--u:.56rem}}
.kcert-border{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:fill}
.kcert-sheet[data-look="colourful"] .kcert-border-classic,.kcert-sheet[data-look="classic"] .kcert-border-colourful{display:none}

/* The empty middle of each border: the colourful one has Piko and friends along the bottom and corners.
   The lines are divs, not paragraphs, so the print rules for body text elsewhere cannot recolour them. */
.kcert-body{position:absolute;top:var(--zone-top);bottom:var(--zone-bottom);left:var(--zone-side);right:var(--zone-side);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.kcert-sheet .kcert-line{flex:none;max-width:100%;margin:0;color:var(--ink);overflow-wrap:anywhere;text-wrap:balance}
.kcert-sheet .kcert-brand{font-size:calc(var(--u)*1.35);font-weight:800;letter-spacing:.2em;color:var(--accent)}
.kcert-sheet .kcert-title{margin-top:calc(var(--u)*var(--g)*.7);font-size:calc(var(--u)*var(--title-k));font-weight:800;line-height:1.1;letter-spacing:-.01em}
.kcert-sheet .kcert-lead{margin-top:calc(var(--u)*var(--g)*1.1);font-size:calc(var(--u)*1.7);color:var(--soft)}
.kcert-sheet .kcert-name{margin-top:calc(var(--u)*var(--g)*.9);font-size:calc(var(--u)*var(--name-k));font-weight:800;line-height:1.12;color:var(--accent)}
.kcert-sheet .kcert-verb{margin-top:calc(var(--u)*var(--g)*1);font-size:calc(var(--u)*1.9);color:var(--soft)}
.kcert-sheet .kcert-what{margin-top:calc(var(--u)*var(--g)*.7);font-size:calc(var(--u)*var(--what-k));font-weight:800;line-height:1.15}
/* Nothing typed: a line to write on by hand. The grey hint shows on screen only. */
.kcert-sheet .is-blank{min-width:62%;min-height:calc(var(--u)*4.6);font-size:calc(var(--u)*2.2);font-weight:600;line-height:1.3;color:var(--soft);border-bottom:calc(var(--u)*.16) solid var(--ink)}
.kcert-sheet .kcert-foot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*5);width:100%;margin-top:calc(var(--u)*var(--g)*2)}
.kcert-sign{min-width:0}
.kcert-sheet .kcert-value{min-height:calc(var(--u)*3);padding-bottom:calc(var(--u)*.3);font-size:calc(var(--u)*1.9);font-weight:700;line-height:1.2;border-bottom:calc(var(--u)*.14) solid var(--ink)}
.kcert-sheet .kcert-label-small{margin-top:calc(var(--u)*.5);font-size:calc(var(--u)*1.4);line-height:1.2;color:var(--soft)}

/* Longer names and achievements step the type down (kids-certificates.js sets data-fit until the text fits the zone). */
.kcert-sheet[data-look="colourful"][data-fit="1"]{--name-k:5.4;--what-k:3}
.kcert-sheet[data-look="colourful"][data-fit="2"]{--name-k:4.5;--what-k:2.6}
.kcert-sheet[data-look="colourful"][data-fit="3"]{--name-k:3.8;--what-k:2.3}
.kcert-sheet[data-look="colourful"][data-fit="4"]{--name-k:3.2;--what-k:2}
.kcert-sheet[data-look="colourful"][data-fit="5"]{--name-k:2.8;--what-k:1.8;--g:.7}

/* Classic: a thin gold and navy frame with a wide empty middle. */
.kcert-sheet[data-look="classic"]{--zone-top:12%;--zone-side:14%;--zone-bottom:13%;--title-k:4.4;--name-k:7.8;--what-k:4;--g:1.7;--ink:#14204f;--soft:#4a527a;--accent:#8a6410}
.kcert-sheet[data-look="classic"][data-fit="1"]{--name-k:6.4;--what-k:3.4;--g:1.5}
.kcert-sheet[data-look="classic"][data-fit="2"]{--name-k:5.2;--what-k:2.9;--g:1.3}
.kcert-sheet[data-look="classic"][data-fit="3"]{--name-k:4.2;--what-k:2.5;--g:1.1}
.kcert-sheet[data-look="classic"][data-fit="4"]{--name-k:3.4;--what-k:2.1;--g:1}
.kcert-sheet[data-look="classic"][data-fit="5"]{--name-k:3;--what-k:1.9;--g:1}
.kcert-sheet[data-look="classic"] .kcert-title,.kcert-sheet[data-look="classic"] .kcert-name{font-family:Georgia,"Times New Roman",serif}
.kcert-sheet[data-look="classic"] .kcert-title{font-weight:700;letter-spacing:.01em}
.kcert-sheet[data-look="classic"] .kcert-name{font-style:italic;font-weight:700}

/* ---------- Print: the sheet alone, one A4 landscape page ---------- */
@media print{
 @page{size:A4 landscape;margin:0}
 html,body{width:297mm;height:210mm;margin:0;padding:0;overflow:hidden;background:#fff!important;color-scheme:light!important}
 .kp-header,.kids-skip,.kp-footer{display:none!important}
 .kp-main{width:297mm;max-width:none;height:210mm;margin:0;padding:0}
 .kcert{margin:0;padding:0}
 .kcert>:not(.kcert-maker){display:none!important}
 .kcert-maker{margin:0;padding:0;border:0}
 .kcert-maker>:not(.kcert-layout){display:none!important}
 .kcert-layout{display:block;margin:0}
 .kcert-layout>:not(.kcert-stage){display:none!important}
 .kcert-stage>:not(.kcert-sheet){display:none!important}
 .kcert-sheet{width:297mm;max-width:none;height:209.5mm;margin:0;border-radius:0;box-shadow:none;break-inside:avoid;break-after:avoid;page-break-after:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
 /* The shared Kids print rules turn every text black with !important; the sheet keeps its own inks. */
 .kcert-sheet .kcert-line{color:var(--ink)!important}
 .kcert-sheet .kcert-brand,.kcert-sheet .kcert-name{color:var(--accent)!important}
 .kcert-sheet .kcert-lead,.kcert-sheet .kcert-verb,.kcert-sheet .kcert-label-small{color:var(--soft)!important}
 .kcert-sheet .is-blank{color:transparent!important}
}