/* Certificates of completion (/certificate/, assets/js/cert.js) and the check page (/verify/, assets/js/verify.js).
   The certificate is paper: light in both themes, one A4 landscape page when printed. It scales as one piece (container
   units, the aspect ratio kept) so a phone shows the same certificate, smaller, with no text below about 9px.
   Corners: one radius on the sheet; the course panel shares it on its outer corners and has none inside. */
.cert-page, .verify-page { padding-bottom: clamp(40px, 5vw, 80px); }
.cert-head .lede { margin-top: 10px; }

/* the list */
.cert-rows { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.cert-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px; border: 2px solid var(--rule); border-radius: 14px; background: var(--paper-0); }
.cert-row > div:nth-child(2) { min-width: 0; flex: 1 1 220px; }
.cr-b .glyph { width: 40px; height: 40px; border-radius: 10px; font-size: 14px; }
.cr-t { font-weight: 700; font-size: 18px; }
.cr-s { margin-top: 2px; font-size: 15px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }

/* one course: the form, the certificate and its actions */
.cert-back { margin: 18px 0 14px; }
.cert-back a, .cert-fine a { color: var(--teal-text); font-weight: 650; overflow-wrap: anywhere; }
.cert-h { font-size: clamp(24px, 1vw + 18px, 32px); line-height: 1.15; }
.cert-h + .lede { margin-top: 8px; }
.cert-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 20px; }
.cert-form { max-width: 440px; }
.cert-form .fl { margin-top: 18px; }
.cert-help { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
.cert-form .form-err { min-height: 0; margin: 6px 0 0; }
.cert-form .form-err:empty { display: none; }
.cert-form .cert-acts { margin-top: 16px; }
.cert-fine { margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.cert-more:empty { display: none; }
.cert-more { margin-top: 20px; padding-top: 16px; border-top: 2px solid var(--rule); }
.cert-confirm p:first-child { max-width: 60ch; }
.btn-danger { background: var(--bad-tint); color: var(--bad); --edge: color-mix(in srgb, var(--bad) 55%, transparent); }
.cert-out .lede { margin-top: 20px; }
@media (max-width: 599.98px) {
  .cert-acts { flex-direction: column; align-items: stretch; gap: 10px; }
  .cert-acts .btn { width: 100%; min-height: 48px; justify-content: center; }
  .cert-form { max-width: none; }
}

/* the sheet */
.cert-wrap { container-type: inline-size; }
.cert-sheet {
  --cs-ink: #10213a; --cs-soft: #4a5a72; --cs-paper: #fffdf8; --cs-band: #d7efef; --cs-accent: #0d9aa7; --cs-text: #066570;
  --cs-r: clamp(14px, 2.6cqw, 26px);
  display: grid; grid-template-columns: minmax(0, 1fr) 33%; aspect-ratio: 297 / 210; overflow: hidden;
  border-radius: var(--cs-r); background: var(--cs-paper); color: var(--cs-ink); font-family: var(--font);
  box-shadow: 0 0 0 1px #e4d9c6, 0 12px 32px rgba(10, 26, 47, .14);
}
.cert-sheet.t-python { --cs-band: #fcecc0; --cs-accent: #ffc83d; --cs-text: #7f5b00; }
.cert-sheet.t-web { --cs-band: #fdd9c4; --cs-accent: #ff7a3d; --cs-text: #a8420f; }
.cert-sheet.t-sql { --cs-band: #cfe3f4; --cs-accent: #3a9be8; --cs-text: #1b65a6; }
.cert-sheet.t-c { --cs-band: #f9d3db; --cs-accent: #f0567e; --cs-text: #b8204b; }
.ce-main { display: grid; grid-template-rows: auto 1fr auto; gap: 2.4cqw; min-width: 0; padding: 5.5cqw 4.5cqw 5cqw 6.5cqw; }
.ce-brand { display: flex; align-items: center; gap: .45em; font-weight: 700; font-size: clamp(11px, 2cqw, 19px); letter-spacing: -.01em; }
.ce-mark svg { display: block; width: 2.1em; height: auto; }
.ce-code-w { color: #066570; }
.ce-body { display: grid; align-content: center; gap: clamp(5px, 1.7cqw, 18px); }
.ce-k { display: inline-flex; align-items: center; gap: .8em; font: 650 clamp(9px, 1.6cqw, 15px)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cs-text); }
.ce-badge .glyph { width: 3em; height: 3em; border-radius: .7em; font-size: 1em; letter-spacing: -.04em; text-transform: none; }
.ce-name { font-size: clamp(22px, 7.4cqw, 72px); line-height: 1.04; font-weight: 750; letter-spacing: -.025em; overflow-wrap: anywhere; }
.ce-name:focus { outline: none; }
.ce-what { max-width: 26em; font-size: clamp(11.5px, 2.45cqw, 23px); line-height: 1.4; color: var(--cs-soft); }
.ce-what strong { color: var(--cs-ink); }
.ce-date { display: flex; align-items: baseline; gap: .6em; font-weight: 650; font-size: clamp(11px, 1.8cqw, 17px); }
.ce-dt { font: 600 .72em/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cs-soft); }
/* the launch audit (#13): said plainly on the sheet itself, so a printout or a photo of it carries it too */
.ce-foot { display: grid; gap: clamp(2px, .6cqw, 6px); }
.ce-not { font-size: clamp(9px, 1.35cqw, 13px); line-height: 1.3; color: var(--cs-soft); }
.ce-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; min-width: 0; padding: 3.5cqw 2.5cqw; background: var(--cs-band); }
.ce-noodle { width: 82%; }
.ce-noodle svg { display: block; width: 100%; height: auto; }
.ce-check { display: grid; justify-items: center; gap: clamp(2px, .5cqw, 6px); text-align: center; }
.ce-qr { display: block; width: max(60px, 15.5cqw); }
.ce-qr svg { display: block; width: 100%; height: auto; border-radius: clamp(4px, .8cqw, 8px); }
.ce-code { font: 650 clamp(9px, 1.35cqw, 13px)/1.2 var(--mono); letter-spacing: .02em; color: var(--cs-ink); }
.ce-url { font-size: clamp(9px, 1.2cqw, 12px); line-height: 1.2; color: var(--cs-soft); }
/* a phone-sized sheet: the link is spelt out under the certificate instead */
@container (max-width: 520px) { .ce-url { display: none; } .ce-side { gap: 2cqw; } .cert-sheet { grid-template-columns: minmax(0, 1fr) 37%; } .ce-code { white-space: nowrap; letter-spacing: 0; } .ce-k { letter-spacing: .02em; gap: .6em; } }

/* /verify/ */
.vf-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; max-width: 520px; margin-top: 22px; }
.vf-l { flex: 1 1 240px; }
.vf-l .fl { margin-top: 0; }
.vf-form .input { font-family: var(--mono); text-transform: uppercase; }
.vf-form .btn { min-height: 52px; }
[data-vf-result] { margin-top: 24px; max-width: 640px; }
.vf-card { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: 18px; border: 2px solid var(--rule); background: var(--paper-0); }
.vf-yes { grid-template-columns: minmax(0, 1fr) clamp(96px, 26%, 160px); border: 0; background: #fffdf8; color: #10213a;
  --cs-band: #d7efef; --cs-text: #066570; box-shadow: 0 0 0 1px #e4d9c6, 0 10px 28px rgba(10, 26, 47, .12); }
.vf-yes.t-python { --cs-band: #fcecc0; --cs-text: #7f5b00; } .vf-yes.t-web { --cs-band: #fdd9c4; --cs-text: #a8420f; }
.vf-yes.t-sql { --cs-band: #cfe3f4; --cs-text: #1b65a6; } .vf-yes.t-c { --cs-band: #f9d3db; --cs-text: #b8204b; }
.vf-main { display: grid; gap: 8px; min-width: 0; padding: 20px 22px; }
.vf-side { display: grid; place-items: center; padding: 12px; background: var(--cs-band); }
.vf-side svg { width: 100%; height: auto; }
.vf-k { display: inline-flex; align-items: center; gap: 10px; font: 700 15px/1.2 var(--font); color: var(--ink-3); }   /* sentence case: the site around the sheet (coordinator, 12 Oct) */
.vf-yes .vf-k { color: var(--cs-text); }
.vf-k .glyph { width: 30px; height: 30px; border-radius: 8px; font-size: 12px; }
.vf-name { font-size: clamp(26px, 1.4vw + 18px, 36px); line-height: 1.08; font-weight: 750; letter-spacing: -.02em; overflow-wrap: anywhere; }
.vf-what { font-size: 16px; line-height: 1.5; }
.vf-yes .vf-what { color: #4a5a72; } .vf-yes .vf-what strong { color: #10213a; }
.vf-facts { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 6px 0 0; }
.vf-facts dt { font: 600 11.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #4a5a72; }
.vf-facts dd { margin: 3px 0 0; font-weight: 650; }
.vf-code { font-family: var(--mono); }
.vf-fine { margin-top: 12px; font-size: 14.5px; color: var(--ink-3); }
.vf-wait { font-size: 14.5px; color: var(--ink-3); }
.vf-bad { color: var(--bad); font-weight: 600; }
@media (max-width: 599.98px) {
  .vf-form .btn { width: 100%; min-height: 48px; justify-content: center; }
  .vf-yes { grid-template-columns: minmax(0, 1fr) 88px; }
  .vf-main { padding: 16px; }
}

/* print: the certificate alone, one A4 landscape page (cert.css is loaded by /certificate/ and /verify/ only) */
@page { size: A4 landscape; margin: 0; }
@media print {
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; }
  body > :not(main), [data-cert-view] > :not(.cert-wrap), .topbar, .site-foot, .skip, .no-print, .cert-head, .cert-out, .toast-bl { display: none !important; }
  main, .cert-page { padding: 0 !important; margin: 0 !important; width: auto !important; max-width: none !important; }
  .cert-wrap { width: 281mm; margin: 8mm auto 0; }
  .cert-sheet { box-shadow: none; outline: 1px solid #e4d9c6; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* certificates v2: the link to the skills record, and the groups (Courses, Paths, GCSE Python) */
.cert-skills { margin: 0 0 14px; }
.cert-skills a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 700; }
[dir="rtl"] .cert-skills svg { transform: scaleX(-1); }
.cert-gh { margin: 18px 0 6px; list-style: none; font: 700 14px/1 var(--font); color: var(--ink-3); }

/* certificates v2: the list in folded groups of plain rows (owner, 12 Oct: never overwhelming, graphics over words) */
.cert-grp { margin: 8px 0 0; border-bottom: 1px solid var(--rule); }
.cert-grp > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; list-style: none; font: 700 17px/1.2 var(--font); color: var(--ink); border-radius: 10px; }
.cert-grp > summary::-webkit-details-marker { display: none; }
.cert-grp > summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.cert-n { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; background: var(--paper-2, rgba(0,0,0,.06)); color: var(--ink-2); font-size: 13px; }
.cert-chev { width: 8px; height: 8px; margin-inline-start: 4px; border: solid var(--ink-3); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.cert-grp[open] .cert-chev { transform: rotate(225deg) translateY(-2px); }
.cert-list2 { margin: 0 0 8px; padding: 0; list-style: none; }
.cert-row2 { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); }
.cert-row2 .cr-in { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: 44px; color: inherit; text-decoration: none; border-radius: 10px; }
.cert-row2 a.cr-in:hover .cr-t { text-decoration: underline; text-underline-offset: 3px; }
.cert-row2 a.cr-in:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.cert-row2 .cr-b { flex: none; line-height: 0; }
.cr-m { display: grid; gap: 4px; flex: 1; min-width: 0; }
.cert-row2 .cr-t { font-size: 16px; line-height: 1.3; }
.cert-row2 .cr-s { margin: 0; font-size: 14px; color: var(--ink-3); }
.cr-bar { display: block; height: 6px; border-radius: 999px; background: var(--rule); overflow: hidden; max-width: 260px; }
.cr-bar i { display: block; height: 100%; border-radius: inherit; background: var(--teal); }
.cr-go { flex: none; color: var(--ink-3); }
[dir="rtl"] .cr-go, [dir="rtl"] .cert-skills svg { transform: scaleX(-1); }
.cert-row2 .btn { flex: none; min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .cert-chev { transition: none; } }
/* v2: one primary action with the name as an icon beside it, the rest folded under More (owner, 12 Oct) */
.cert-acts2 { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.cert-acts2 .btn { min-height: 48px; justify-content: center; }
.cert-acts2 .btn-primary { flex: 1 1 auto; max-width: 360px; }
.cert-ic { flex: none; width: 56px; padding: 0; }
.cert-x { margin-top: 12px; }
.cert-x > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; color: var(--ink-2); font-weight: 650; border-radius: 8px; }
.cert-x > summary::-webkit-details-marker { display: none; }
.cert-x > summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.cert-x[open] .cert-chev { transform: rotate(225deg) translateY(-2px); }
.cert-x-b { display: grid; justify-items: start; }
.cert-x-i { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--teal-text); font: 650 15.5px var(--font); text-decoration: none; cursor: pointer; }
.cert-x-i:hover { text-decoration: underline; text-underline-offset: 3px; }
.cert-how { margin: 4px 0 0; }
.cert-how > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; color: var(--teal-text); font-weight: 650; border-radius: 8px; }
.cert-how > summary::-webkit-details-marker { display: none; }
.cert-how > summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.cert-how[open] .cert-chev { transform: rotate(225deg) translateY(-2px); }
.cert-how p { margin: 4px 0 8px; max-width: 60ch; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
/* each path's own icon and a GCSE board's letters (tools/path_icons.py): no two rows share an icon */
.pico { flex: none; display: block; color: var(--teal-text); }
.cert-row2 .cr-b .glyph, .cert-row2 .cr-b .pico { width: 32px; height: 32px; }
.cert-row2 .cr-b .glyph { border-radius: 8px; font-size: 12px; }
.ce-badge .pico { width: 3em; height: 3em; }
.vf-k .pico { width: 30px; height: 30px; }
.glyph.g-gcse { background: var(--teal-tint); color: var(--teal-text); font: 800 10.5px/1 var(--font); letter-spacing: .02em; }
.cert-back a { display: inline-flex; align-items: center; min-height: 44px; }