/* A district's certificate of membership (district-certificate.js, #1005): form DC-1, an A4 sheet on the
   country's paper (`country-paper.is-{country}` sets its ink, wallet.css), ruled twice round its edge, the seal
   struck at the foot beside the founder's and the holder's signatures. Drawn at 595px wide (A4 at 72 dpi) on
   its page, scaled down where it lies in a showcase, and folded in the wallet. */
.certificate { position: relative; display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto auto; grid-template-areas: "head head head" "body body body" "seal sign sign" "foot foot foot"; gap: 22px 24px; box-sizing: border-box; width: 595px; aspect-ratio: 210 / 297; padding: 44px 46px 38px; border: 1px solid color-mix(in srgb, var(--ink) 60%, transparent); border-radius: 2px; background: var(--paper), linear-gradient(160deg, #fcf9f0, color-mix(in srgb, var(--ink) 7%, #f8f3e7)); box-shadow: 0 0 0 6px #fcf9f0, 0 0 0 7px color-mix(in srgb, var(--ink) 60%, transparent), 8px 10px 0 2px rgba(37, 37, 45, 0.16); color: #1c2742; font-family: Georgia, "Times New Roman", serif; text-align: left; overflow: hidden; }
.certificate::before { content: ''; position: absolute; inset: 10px; border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); pointer-events: none; }
.certificate::after { content: ''; position: absolute; inset: 13px; border: 3px double color-mix(in srgb, var(--ink) 30%, transparent); pointer-events: none; }
.certificate-head { grid-area: head; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding-bottom: 12px; border-bottom: 3px double var(--ink); color: var(--ink); }
.certificate-emblem, .certificate-emblem .bouzopp-passport-emblem { display: block; width: 64px; height: 64px; }
.certificate-heading { min-width: 0; }
.certificate-issuer { margin: 0; font: 800 12px/1.4 "Sora", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; }
.certificate-office { margin: 2px 0 6px; font-size: 14px; font-style: italic; }
.certificate-title { margin: 0; color: #1c2742; font: 700 24px/1.1 Georgia, "Times New Roman", serif; letter-spacing: 0; text-shadow: none; text-transform: none; }
.certificate-reference { display: grid; margin: 0; border: 1px solid var(--ink); background: rgba(255, 255, 255, 0.55); }
.certificate-reference div { display: grid; grid-template-columns: 52px auto; gap: 8px; align-items: baseline; padding: 5px 9px; }
.certificate-reference div + div { border-top: 1px solid var(--ink); }
.certificate-reference dt { font: 800 9px "Sora", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
.certificate-reference dd { margin: 0; color: #1c2742; font: 600 12px ui-monospace, "SFMono-Regular", Consolas, monospace; }
.certificate-body { grid-area: body; display: grid; gap: 18px; align-content: start; min-width: 0; }
.certificate-words { margin: 0; font-size: 16px; line-height: 1.6; }
.certificate-words b { color: var(--ink); font: 800 15px "Sora", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; }
.certificate-words a, .certificate-foot a { color: inherit; text-decoration: none; }
.certificate-words a:hover, .certificate-foot a:hover { text-decoration: underline; }
.certificate-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
.certificate-fields div { display: grid; gap: 3px; min-width: 0; }
.certificate-fields dt { color: color-mix(in srgb, var(--ink) 80%, #1c2742); font: 800 9px "Sora", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
.certificate-fields dd { min-height: 20px; margin: 0; padding: 6px 8px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent); border-bottom-width: 2px; background: rgba(255, 255, 255, 0.6); font: 600 14px/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.certificate-motto { margin: 0; padding: 8px 12px; border-left: 2px solid color-mix(in srgb, var(--ink) 40%, transparent); font-size: 14px; font-style: italic; line-height: 1.5; overflow-wrap: anywhere; }
.certificate-motto::before { content: '“'; }
.certificate-motto::after { content: '”'; }
.certificate-seal { grid-area: seal; display: grid; gap: 6px; align-self: end; justify-items: center; color: var(--ink); }
.certificate-seal .district-seal { display: block; width: 150px; height: 150px; rotate: -7deg; opacity: 0.88; }
.certificate-seal small { color: color-mix(in srgb, var(--ink) 75%, transparent); font: 800 8px "Sora", sans-serif; letter-spacing: 0.14em; text-align: center; text-transform: uppercase; }
.certificate-signing { grid-area: sign; display: grid; grid-template-columns: 1fr; gap: 16px; align-self: end; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); }
.certificate-signing > div { display: grid; gap: 4px; align-content: end; min-width: 0; }
.certificate-signing small { color: color-mix(in srgb, var(--ink) 80%, #1c2742); font: 800 8.5px "Sora", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
.certificate-ink { display: flex; align-items: flex-end; min-height: 50px; color: #111; }
.certificate-ink .signature-ink { display: block; width: auto; height: 46px; max-width: 100%; }
.certificate-unsigned { color: #716b79; font-size: 12px; }
.certificate-line { padding-top: 3px; border-top: 1px solid var(--ink); font-size: 12px; font-style: italic; }
.certificate-foot { grid-area: foot; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.certificate-foot p { margin: 0; color: #4a5068; font: italic 11px Georgia, "Times New Roman", serif; }

/* In the wallet (wallet.js): the sheet folded, its head out. Slipped into the passport when one is carried, its
   corner showing at the booklet's side; behind the ID in its window otherwise, its head over the card. It
   slides out when it is reached for. */
.wallet-window .wallet-id { z-index: 1; }
.wallet-window .wallet-certificate { position: absolute; top: -46px; left: 50%; z-index: 0; display: block; width: 150px; height: 92px; padding: 0; border: 0; border-radius: 1px; background: #fbf7ec; box-shadow: 0 1px 0 #d8d0bc, 0 3px 5px rgba(0, 0, 0, 0.45); overflow: hidden; transform: translateX(-47%) rotate(-3deg); transition: translate 0.22s cubic-bezier(0.3, 1.4, 0.5, 1); cursor: zoom-in; }
.wallet-window .wallet-certificate:hover, .wallet-window .wallet-certificate:active { transform: translateX(-47%) rotate(-3deg); background: #fbf7ec; box-shadow: 0 1px 0 #d8d0bc, 0 3px 5px rgba(0, 0, 0, 0.45); }
.wallet-window .wallet-certificate:hover, .wallet-window .wallet-certificate:focus-visible { translate: 0 -18px; outline: none; }
.wallet-window .wallet-certificate:focus-visible { outline: 3px solid #f2c55c; outline-offset: 4px; }
.wallet-certificate-fold { position: absolute; inset: 0; display: block; overflow: hidden; }
/* The fold: the sheet's lower half turned under, a crease along the bottom edge. */
.wallet-certificate-fold::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 28%, transparent 70%, rgba(60, 40, 10, 0.18)); pointer-events: none; }
.wallet-window .wallet-certificate .certificate { position: absolute; top: 0; left: 0; width: 595px; aspect-ratio: auto; height: 842px; box-shadow: none; transform: scale(0.252); transform-origin: 0 0; }
.wallet-window.has-passport .wallet-certificate { top: -48px; left: -44px; transform: rotate(-8deg); }
.wallet-window.has-passport .wallet-certificate:hover, .wallet-window.has-passport .wallet-certificate:active { transform: rotate(-8deg); }
.wallet-window.has-passport .wallet-certificate:hover, .wallet-window.has-passport .wallet-certificate:focus-visible { translate: -26px -6px; }
.motion-reduced .wallet-window .wallet-certificate { transition: none; }

/* Its page (wallet-page.html, like the ID's): the sheet on the stage, drawn 600px wide and fitted to the room
   it has (wallet-page.js `fit`), with its ink in the dark. */
.card-page-preview .certificate { width: 595px; text-align: left; }
.card-page-preview .inspector-object.is-certificate { max-width: 100%; }

/* Out in a showcase (showcase-layout.js `certificate`): the sheet drawn at its 595px and scaled to the room it
   has, like the ID and the passports (wallet.css). */
.certificate-showcase { width: 200px; }
.certificate-showcase .wallet-showcase-button { position: relative; display: block; width: 200px; height: 283px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 2px; background: transparent; box-shadow: none; cursor: zoom-in; }
.certificate-showcase .wallet-showcase-button:hover, .certificate-showcase .wallet-showcase-button:active { transform: none; background: transparent; box-shadow: none; }
.certificate-showcase .certificate { position: absolute; top: 0; left: 0; width: 595px; transform: scale(0.3361); transform-origin: 0 0; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); box-shadow: 0 0 0 4px #fcf9f0, 0 0 0 5px color-mix(in srgb, var(--ink) 60%, transparent); }

@media (max-width: 640px) {
    .certificate-page .certificate { grid-template-columns: 1fr; grid-template-areas: "head" "body" "seal" "sign" "foot"; aspect-ratio: auto; padding: 22px 18px 18px; }
    .certificate-page .certificate-head { grid-template-columns: 48px minmax(0, 1fr); }
    .certificate-page .certificate-reference { grid-column: 1 / -1; }
    .certificate-page .certificate-seal .district-seal { width: 110px; height: 110px; }
    .certificate-page .certificate-fields { grid-template-columns: 1fr; }
}