/* ============================================================================
   GEPA — the certificate, and the pages that verify one.

   The certificate is a print artefact first and a web page second, so it is
   sized in A4 landscape and everything inside it is expressed relative to the
   sheet's own inline size. One container query unit (1cqw) is 2.97mm of paper,
   which is what lets a single set of rules render identically on screen at any
   width and on paper at 297 x 210mm. Nothing here is raster: the frame, the
   guilloche and the QR are all vector or type, so the sheet stays crisp
   whether it is viewed at 320px or printed at 300dpi.

   Two sides:
     side 1  the face      — for the wall
     side 2  the record    — the assessment transcript, for an employer

   Colours come from the token layer with literal fallbacks, so the sheet
   prints correctly even if this file is ever loaded on its own.

   Conversions used throughout, for anyone editing against the design file:
     1mm = 0.3367cqw       1pt = 0.1188cqw
   ========================================================================== */

/* --------------------------------------------------------------- actions --
   Off the print, and full-width on a phone rather than three right-aligned
   pills stacking into a staircase. */

.cert-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--s3, 12px);
    margin-bottom: var(--s5, 24px);
}
@media (max-width: 560px) {
    .cert-actions { justify-content: stretch; }
    .cert-actions > * { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- sheets -- */

.cert-doc {
    display: flex;
    flex-direction: column;
    gap: var(--s5, 24px);
    margin: 0 auto;
    max-width: 1120px;
}

.cert-sheet {
    position: relative;
    width: 100%;
    aspect-ratio: 297 / 210;              /* A4 landscape */
    container-type: inline-size;
    overflow: hidden;

    background: var(--paper, #fbf8f1);
    color: var(--ink, #0a2e28);
    font-family: var(--font-ui, 'Manrope', system-ui, sans-serif);
    box-shadow: 0 50px 90px -40px rgba(10, 46, 40, .6);

    /* the frame is the certificate — never let a browser drop it */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* A woven guilloche built from three overlapping gradients rather than an
   image, so it costs nothing to load and cannot go missing. */
.cert-sheet::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .55;
    background:
        repeating-linear-gradient(45deg, rgba(10, 70, 60, .055) 0 1px, transparent 1px 8px),
        repeating-linear-gradient(-45deg, rgba(176, 138, 46, .055) 0 1px, transparent 1px 8px),
        radial-gradient(62% 72% at 50% 40%, rgba(176, 138, 46, .08), transparent 72%);
}

/* ============================================================ side 1 — face */

/* The sheet carries no padding of its own: a cqw padding on a query container
   makes its own content box depend on itself, and browsers resolve that cycle
   by shrinking the box — which quietly took every point size on the sheet 7%
   under the design, and the 6.5pt floor below 6.5pt. The 13mm margin is set as
   an inset on the frame instead, so 1cqw stays exactly 2.97mm of paper. */
.cert-face { padding: 0; }

/* Double rule: a forest band with a gilt hairline set 1.4mm inside it. */
.cert-face-frame {
    position: absolute;
    inset: 4.377cqw;
    z-index: 2;
    display: flex;
    border: max(1.5px, .19cqw) solid var(--ink-title, #0a463c);
    padding: .471cqw;
}
.cert-face-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: max(.5px, .059cqw) solid var(--gilt, #b08a2e);
    padding: 3.03cqw 4.714cqw 2.694cqw;
}

/* Four 11mm corner brackets, drawn as two crossing hairlines each. */
.cert-corner {
    position: absolute;
    width: 3.704cqw;
    height: 3.704cqw;
    pointer-events: none;
}
.cert-corner::before,
.cert-corner::after { content: ""; position: absolute; background: var(--gilt, #b08a2e); }
.cert-corner::before { inset: 0 0 auto 0; height: max(.5px, .059cqw); }
.cert-corner::after  { inset: 0 auto 0 0; width: max(.5px, .059cqw); }
.cert-corner.is-tl { top: 1.347cqw; left: 1.347cqw; }
.cert-corner.is-tr { top: 1.347cqw; right: 1.347cqw; transform: scaleX(-1); }
.cert-corner.is-bl { bottom: 1.347cqw; left: 1.347cqw; transform: scaleY(-1); }
.cert-corner.is-br { bottom: 1.347cqw; right: 1.347cqw; transform: scale(-1); }

.cert-mark { width: 5.051cqw; height: auto; }

.cert-academy {
    margin-top: 1.01cqw;
    font-size: 1.069cqw;
    font-weight: 800;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--ink-title, #0a463c);
}
.cert-academy-sub {
    margin-top: .539cqw;
    font-size: .891cqw;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-soft, #4a5f59);
}

/* Gilt ornament: two fading rules either side of a rotated 1.6mm diamond. */
.cert-ornament {
    display: flex;
    align-items: center;
    gap: .842cqw;
    margin-top: 1.684cqw;
}
.cert-ornament i { display: block; }
.cert-ornament i:nth-child(1),
.cert-ornament i:nth-child(3) { width: 7.407cqw; height: max(.5px, .059cqw); }
.cert-ornament i:nth-child(1) { background: linear-gradient(90deg, transparent, var(--gilt, #b08a2e)); }
.cert-ornament i:nth-child(3) { background: linear-gradient(270deg, transparent, var(--gilt, #b08a2e)); }
.cert-ornament i:nth-child(2) {
    width: .539cqw; height: .539cqw;
    background: var(--gilt, #b08a2e);
    transform: rotate(45deg);
}

.cert-title {
    margin: 1.515cqw 0 0;
    font-family: var(--font-display, 'Petrona', Georgia, serif);
    font-weight: 400;
    font-size: 3.563cqw;
    line-height: 1;
    letter-spacing: .012em;
    color: var(--ink-title, #0a463c);
}

.cert-lede {
    margin: 2.02cqw 0 0;
    font-size: 1.188cqw;
    font-style: italic;
    color: var(--ink-soft, #4a5f59);
}
.cert-lede.is-tight { margin-top: 1.347cqw; }

.cert-name {
    margin: .842cqw 0 0;
    font-family: var(--font-display, 'Petrona', Georgia, serif);
    font-weight: 500;
    font-size: 4.514cqw;
    line-height: 1.04;
    color: var(--ink, #0a2e28);
}
.cert-name-rule {
    display: block;
    width: min(39.73cqw, 100%);
    height: max(.5px, .048cqw);
    margin-top: 1.347cqw;
    background: rgba(10, 46, 40, .3);
}

.cert-course {
    margin: .842cqw auto 0;
    max-width: 58.92cqw;
    font-family: var(--font-display, 'Petrona', Georgia, serif);
    font-weight: 400;
    font-size: 2.257cqw;
    line-height: 1.18;
    color: var(--ink-title, #0a463c);
}

/* The line that separates a credential from a certificate of attendance. */
.cert-assessment-line {
    margin: .842cqw 0 0;
    font-size: 1.128cqw;
    color: var(--ink-soft, #4a5f59);
}

/* -------------------------------------------------------- face footer row -- */

.cert-foot {
    margin-top: auto;
    padding-top: 2.357cqw;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 3.367cqw;
}
.cert-foot-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .471cqw;
}
.cert-foot-col.is-verify { gap: .539cqw; }

.cert-foot-rule {
    display: block;
    width: 100%;
    max-width: 17.508cqw;
    height: max(.5px, .048cqw);
    background: rgba(10, 46, 40, .5);
}
.cert-foot-value {
    font-size: 1.128cqw;
    font-weight: 700;
    color: var(--ink, #0a2e28);
}
.cert-foot-value.is-data {
    font-family: var(--font-data, 'IBM Plex Mono', ui-monospace, monospace);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Ac-3: 6.5pt is the floor, and it is letterspaced ink-soft, not pale grey. */
.cert-foot-label,
.cert-scan-label {
    font-size: .831cqw;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-soft, #4a5f59);
}
.cert-scan-label { font-size: .772cqw; letter-spacing: .16em; }

.cert-qr {
    display: block;
    width: 7.407cqw;
    height: 7.407cqw;
    padding: .404cqw;
    background: #fff;
    border: max(.5px, .048cqw) solid rgba(10, 70, 60, .35);
}
.cert-qr svg { display: block; width: 100%; height: 100%; }

/* T-4: the reference number, not a 60-character development URL. */
.cert-reference {
    display: inline-block;
    padding: .337cqw .808cqw;
    border: max(.5px, .048cqw) solid rgba(176, 138, 46, .65);
    font-family: var(--font-data, 'IBM Plex Mono', ui-monospace, monospace);
    font-size: 1.069cqw;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--ink-title, #0a463c);
}

.cert-note {
    margin: 1.684cqw auto 0;
    max-width: 60.61cqw;
    font-size: .95cqw;
    line-height: 1.5;
    color: var(--ink-soft, #4a5f59);
}

/* A revoked certificate is still a real record, so the print says so on its
   face rather than looking exactly like a live one. It sits below the frame's
   own stacking layer, so it reads as a watermark under the type: unmissable
   diagonally across the sheet, and it hides neither the award nor the QR that
   would let a reader confirm the withdrawal for themselves. */
.cert-void {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-16deg);
    font-size: 7.5cqw;
    font-weight: 800;
    letter-spacing: .26em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--danger-on-paper, #b5443f);
    opacity: .22;
    pointer-events: none;
}

/* ========================================================== side 2 — record */

.cert-record { padding: 0; }
.cert-record-inner {
    position: absolute;
    inset: 5.387cqw 6.734cqw;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.cert-record-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4.04cqw;
    padding-bottom: 1.347cqw;
    border-bottom: max(1px, .143cqw) solid var(--ink-title, #0a463c);
}
.cert-record-brand { display: flex; align-items: center; gap: 1.178cqw; }
.cert-record-brand .cert-mark { width: 3.704cqw; }
.cert-record-academy {
    font-size: .95cqw;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-title, #0a463c);
}
.cert-record-title {
    margin: .337cqw 0 0;
    font-family: var(--font-display, 'Petrona', Georgia, serif);
    font-size: 1.782cqw;
    font-weight: 500;
    color: var(--ink, #0a2e28);
}
.cert-record-ref { text-align: right; }
.cert-record-ref-n {
    margin-top: .337cqw;
    font-family: var(--font-data, 'IBM Plex Mono', ui-monospace, monospace);
    font-size: 1.307cqw;
    font-weight: 600;
    color: var(--ink-title, #0a463c);
}

/* the small letterspaced label used everywhere on this side */
.cert-label {
    font-size: .831cqw;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-soft, #4a5f59);
}
.cert-label-gold { color: var(--gold-lit, #ffdd86); }

.cert-identity {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.02cqw;
    padding: 1.684cqw 0;
    border-bottom: max(.5px, .048cqw) solid rgba(10, 46, 40, .2);
}
.cert-identity-v {
    margin-top: .471cqw;
    font-size: 1.307cqw;
    font-weight: 700;
    line-height: 1.25;
}
.cert-identity-v.is-data {
    font-family: var(--font-data, 'IBM Plex Mono', ui-monospace, monospace);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.cert-record-body {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 4.04cqw;
    padding-top: 2.02cqw;
    flex: 1;
    min-height: 0;
}

.cert-h2 {
    margin: 0 0 1.178cqw;
    font-family: var(--font-display, 'Petrona', Georgia, serif);
    font-weight: 500;
    font-size: 1.544cqw;
    color: var(--ink-title, #0a463c);
}
.cert-h2.is-later { margin-top: 2.357cqw; }

/* ------------------------------------------------- the assessment table -- */

.cert-table { width: 100%; border-collapse: collapse; }
.cert-table caption {
    caption-side: top;
    text-align: left;
    padding-bottom: .673cqw;
    font-size: .891cqw;
    color: var(--ink-soft, #4a5f59);
}
.cert-table th {
    padding: .673cqw 0;
    text-align: left;
    border-bottom: max(1px, .095cqw) solid var(--ink-title, #0a463c);
    font-size: .831cqw;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-title, #0a463c);
}
.cert-table td {
    padding: .875cqw 0;
    border-bottom: max(.5px, .036cqw) solid rgba(10, 46, 40, .16);
    font-size: 1.128cqw;
    font-weight: 600;
    vertical-align: top;
}
.cert-table .is-count,
.cert-table th.is-count { text-align: center; padding-inline: 1.01cqw; }
.cert-table .is-score,
.cert-table th.is-score { text-align: right; }
.cert-table td.is-count,
.cert-table td.is-score {
    font-family: var(--font-data, 'IBM Plex Mono', ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
}
.cert-table td.is-count { color: var(--ink-soft, #4a5f59); font-weight: 500; }

.cert-table tr.is-overall td {
    border-bottom: max(1px, .095cqw) solid var(--ink-title, #0a463c);
    font-weight: 700;
}
.cert-table tr.is-overall td.is-count { color: var(--ink, #0a2e28); font-weight: 600; }
.cert-table tr.is-overall td.is-score { font-size: 1.307cqw; color: var(--ink-title, #0a463c); }

.cert-empty {
    margin: 0;
    font-size: 1.01cqw;
    line-height: 1.55;
    color: var(--ink-soft, #4a5f59);
}

/* ------------------------------------------------------------- capstone -- */

.cert-capstone {
    padding: 1.347cqw 1.684cqw;
    background: var(--paper-card, #fffdf8);
    border: max(.5px, .048cqw) solid rgba(10, 46, 40, .22);
}
.cert-capstone-t { font-size: 1.128cqw; font-weight: 700; margin-bottom: .539cqw; }
.cert-capstone-s {
    margin: 0 0 .842cqw;
    font-size: 1.069cqw;
    line-height: 1.55;
    color: var(--ink-soft, #4a5f59);
}
.cert-capstone-m {
    display: flex;
    flex-wrap: wrap;
    gap: .673cqw 2.02cqw;
    font-size: 1.01cqw;
    color: var(--ink-soft, #4a5f59);
}
.cert-capstone-m strong { color: var(--ink, #0a2e28); }
.cert-capstone-m .is-outcome { color: var(--ink-title, #0a463c); }

/* -------------------------------------------------------- verify column -- */

.cert-verify-col { display: flex; flex-direction: column; }

/* T-4: a forest panel carrying a short readable path and the number, so the
   certificate can be verified from a photocopy. The full URL is in the QR. */
.cert-verify-panel {
    padding: 1.684cqw;
    background: var(--ink-title, #0a463c);
    color: var(--paper, #fbf8f1);
}
.cert-verify-host {
    margin-top: .673cqw;
    font-family: var(--font-data, 'IBM Plex Mono', ui-monospace, monospace);
    font-size: 1.307cqw;
    font-weight: 600;
    line-height: 1.45;
    word-break: break-word;
}
.cert-verify-sep {
    height: max(.5px, .048cqw);
    background: rgba(251, 248, 241, .35);
    margin: 1.178cqw 0;
}
.cert-verify-number {
    margin-top: .673cqw;
    font-family: var(--font-data, 'IBM Plex Mono', ui-monospace, monospace);
    font-size: 1.425cqw;
    font-weight: 600;
    letter-spacing: .04em;
}

.cert-verify-p {
    margin: 1.347cqw 0 0;
    font-size: 1.01cqw;
    line-height: 1.6;
    color: var(--ink-soft, #4a5f59);
}
.cert-verify-p + .cert-verify-p { margin-top: 1.01cqw; }

.cert-status {
    margin-top: auto;
    padding-top: 1.684cqw;
    border-top: max(.5px, .048cqw) solid rgba(10, 46, 40, .2);
}
.cert-status-row {
    display: flex;
    align-items: center;
    gap: .842cqw;
    margin-top: .673cqw;
}
/* Status carries colour AND shape AND word — a filled disc for valid, a bar
   for revoked — so it survives a greyscale photocopy. */
.cert-status-mark {
    display: block;
    width: 1.347cqw;
    height: 1.347cqw;
    border-radius: 99cqw;
    background: var(--link, #0b5f54);
}
.cert-status-w { font-size: 1.307cqw; font-weight: 700; color: var(--ink-title, #0a463c); }
.cert-status.is-revoked .cert-status-mark {
    border-radius: 0;
    height: .471cqw;
    width: 1.684cqw;
    background: var(--danger-on-paper, #b5443f);
}
.cert-status.is-revoked .cert-status-w { color: var(--danger-on-paper, #b5443f); }
.cert-status-p {
    margin: .842cqw 0 0;
    font-size: .95cqw;
    line-height: 1.55;
    color: var(--ink-soft, #4a5f59);
}

/* ---------------------------------------------------------- narrow screens --
   Below 700px an A4 landscape sheet renders type at 3-4px. The face keeps its
   proportions because it is a piece of artwork and is meant to be printed; the
   record is a document an employer reads, so it leaves the paper geometry
   behind entirely and becomes an ordinary responsive page.

   Dropping it to one column is not enough on its own: every element on this
   side carries its own cqw font-size, and a cqw stays 1% of a 335px sheet no
   matter what the wrapper inherits — which rendered the whole transcript
   between 2.8px and 5.2px on a 375px phone. So the type, the rhythm and the
   status marker are all restated here in absolute units.                    */

@media (max-width: 700px) {
    .cert-sheet { aspect-ratio: auto; }
    .cert-face { aspect-ratio: 297 / 210; }
    .cert-record-inner { position: static; padding: var(--s5, 24px); }

    /* masthead */
    .cert-record-head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s3, 12px);
        padding-bottom: var(--s4, 16px);
        border-bottom-width: 1px;
    }
    .cert-record-brand { gap: var(--s3, 12px); }
    .cert-record-brand .cert-mark { width: 30px; }
    .cert-record-academy { font-size: 11px; }
    .cert-record-title { font-size: 21px; margin-top: 2px; }
    .cert-record-ref { text-align: left; }
    .cert-record-ref-n { font-size: 15px; margin-top: 3px; }

    /* identity strip */
    .cert-identity {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s4, 16px);
        padding: var(--s4, 16px) 0;
    }
    .cert-identity-v { font-size: 15px; margin-top: 3px; }

    .cert-label { font-size: 10.5px; letter-spacing: .14em; }
    .cert-record-body { grid-template-columns: 1fr; gap: var(--s6, 32px); padding-top: var(--s5, 24px); }
    .cert-h2 { font-size: 19px; margin-bottom: var(--s3, 12px); }
    .cert-h2.is-later { margin-top: var(--s6, 32px); }

    /* what was assessed */
    .cert-table caption { font-size: 12.5px; padding-bottom: var(--s2, 8px); }
    .cert-table th { font-size: 10.5px; padding: var(--s2, 8px) 0; border-bottom-width: 1px; }
    .cert-table td { font-size: 14px; padding: 10px 0; border-bottom-width: 1px; }
    .cert-table .is-count, .cert-table th.is-count { padding-inline: var(--s3, 12px); }
    .cert-table tr.is-overall td { border-bottom-width: 1px; }
    .cert-table tr.is-overall td.is-score { font-size: 15px; }
    .cert-empty { font-size: 13.5px; }

    /* capstone */
    .cert-capstone { padding: var(--s4, 16px); border-width: 1px; }
    .cert-capstone-t { font-size: 15px; margin-bottom: var(--s2, 8px); }
    .cert-capstone-s { font-size: 13.5px; margin-bottom: var(--s3, 12px); }
    .cert-capstone-m { font-size: 13px; gap: var(--s2, 8px) var(--s4, 16px); }

    /* verification */
    .cert-verify-panel { padding: var(--s4, 16px); border-radius: var(--r-sm, 8px); }
    .cert-verify-host { font-size: 15px; margin-top: var(--s2, 8px); }
    .cert-verify-sep { height: 1px; margin: var(--s4, 16px) 0; }
    .cert-verify-number { font-size: 16px; margin-top: var(--s2, 8px); }
    .cert-verify-p { font-size: 13.5px; margin-top: var(--s4, 16px); }
    .cert-verify-p + .cert-verify-p { margin-top: var(--s3, 12px); }

    /* status at issue */
    .cert-status { margin-top: 0; padding-top: var(--s5, 24px); border-top-width: 1px; }
    .cert-status-row { gap: var(--s3, 12px); margin-top: var(--s2, 8px); }
    .cert-status-mark { width: 14px; height: 14px; border-radius: 999px; }
    .cert-status.is-revoked .cert-status-mark { width: 18px; height: 5px; border-radius: 0; }
    .cert-status-w { font-size: 16px; }
    .cert-status-p { font-size: 13px; margin-top: var(--s3, 12px); }
}

/* ============================================================== the print --
   @page carries the size; everything that is not the certificate is removed
   rather than merely hidden, so it cannot claim a blank sheet of its own. */

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

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

    /* Layout chrome. The :not() is load-bearing, not tidiness: the record
       side's own <header> carries the certificate number and the sheet's
       identity, and a bare `header` selector with !important swept it off
       the printed page — the one element a transcript cannot be missing.
       Written with :where() so the element names contribute no specificity. */
    :where(header, footer, nav, aside, .no-print, .toast-region, .skip-link):not(.cert-doc, .cert-doc *) {
        display: none !important;
    }
    :where(main, .page, .console, .hub, .hub-shell, .app-shell, .container, .section) {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        max-width: none !important;
        background: transparent !important;
    }

    .cert-doc { max-width: none; gap: 0; }

    .cert-sheet {
        width: 297mm;
        height: 210mm;
        aspect-ratio: auto;
        box-shadow: none;
        break-inside: avoid;
        break-after: page;
    }
    .cert-sheet:last-child { break-after: auto; }
}

/* ============================================================================
   Public verification.

   Three states, not two. A revoked certificate is a real record that has been
   withdrawn; a number that matches nothing is a record that never existed.
   They used to share one red panel and one sentence of copy (backlog T-2,
   Ac-4). Each state now has its own colour, its own marker shape and its own
   explanation, so the difference survives both colour blindness and a hurried
   read.
   ========================================================================== */

/* Head chrome matched to the rest of the public site: the gilt tick on the
   eyebrow and an 18px lead, so verification does not read as a page from a
   different product. */
.verify-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--action); }
.verify-eyebrow::before {
    content: "";
    flex: none;
    width: 26px;
    height: 1.5px;
    background: var(--gilt, #b08a2e);
}
.verify-lead {
    margin: 0;
    max-width: 62ch;
    font: 400 18px/1.65 var(--font-ui, 'Manrope', system-ui, sans-serif);
    color: var(--text-2, #4a5f59);
}

/* The token grid only hands out span helpers from 1024px, so the form and the
   result use their own two-up rather than collapsing to a sixth of a row
   through the 768-1023 band. */
.verify-layout { display: grid; gap: var(--s5, 24px); align-items: start; }
@media (min-width: 860px) {
    .verify-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6, 32px); }
}

.verify-result {
    display: grid;
    gap: var(--s4, 16px);
    padding: var(--s5, 24px);
    border: 1px solid var(--rule, rgba(10, 46, 40, .14));
    border-left: 4px solid var(--verify-accent, var(--rule-strong, rgba(10, 46, 40, .24)));
    border-radius: var(--r-md, 12px);
    background: var(--card, #fffdf8);
}
.verify-result.is-valid    { --verify-accent: var(--link, #0b5f54); }
.verify-result.is-revoked  { --verify-accent: var(--danger-on-paper, #b5443f); }
.verify-result.is-missing  { --verify-accent: var(--ink-soft, #4a5f59); }

.verify-head { display: flex; align-items: flex-start; gap: var(--s3, 12px); }
.verify-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-pill, 999px);
    color: var(--verify-accent);
    background: color-mix(in srgb, var(--verify-accent) 12%, transparent);
}
.verify-head-b { min-width: 0; }

.verify-facts {
    display: grid;
    gap: var(--s3, 12px) var(--s5, 24px);
    margin: 0;
    padding: var(--s4, 16px);
    border-radius: var(--r-sm, 8px);
    background: var(--well, #efe8da);
}
@media (min-width: 600px) { .verify-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.verify-facts div { min-width: 0; }
.verify-facts dt {
    font: 800 12px/1.4 var(--font-ui, 'Manrope', system-ui, sans-serif);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted, #4a5f59);
}
.verify-facts dd {
    margin: 5px 0 0;
    font: 600 16px/1.4 var(--font-ui, 'Manrope', system-ui, sans-serif);
    color: var(--text, #0a2e28);
    overflow-wrap: anywhere;
}
.verify-facts dd.is-data {
    font-family: var(--font-data, 'IBM Plex Mono', ui-monospace, monospace);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.verify-disclosure {
    display: flex;
    align-items: flex-start;
    gap: var(--s2, 8px);
    margin: 0;
    font: 500 13px/1.55 var(--font-ui, 'Manrope', system-ui, sans-serif);
    color: var(--text-muted, #4a5f59);
}

/* ============================================================================
   Admin — the certificate registry record.

   Everything below is layout for data the console already holds. The registry
   is internal, so the full verification URL is shown here in full; it is only
   the printed sheet that must not carry it.
   ========================================================================== */

.cert-admin-grid {
    display: grid;
    gap: var(--s4, 16px);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.cert-admin-split { display: grid; gap: var(--s5, 24px); }
@media (min-width: 900px) { .cert-admin-split { grid-template-columns: 1.1fr 1fr; align-items: start; } }

.cert-admin-dl { display: grid; gap: var(--s4, 16px); margin: 0; }
.cert-admin-dl dt {
    font: 800 12px/1.4 var(--font-ui, 'Manrope', system-ui, sans-serif);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted, #4a5f59);
}
.cert-admin-dl dd {
    margin: 5px 0 0;
    font: 500 14px/1.5 var(--font-data, 'IBM Plex Mono', ui-monospace, monospace);
    color: var(--text, #0a2e28);
    overflow-wrap: anywhere;
}

.cert-admin-qr {
    width: 132px;
    height: 132px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--rule-strong, rgba(10, 46, 40, .24));
    border-radius: var(--r-sm, 8px);
}
.cert-admin-qr svg { display: block; width: 100%; height: 100%; }