/* Certificate controls reuse the V9 reading frame. */
.credential-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--sumi); text-decoration: underline; text-decoration-color: var(--sumi-3); text-underline-offset: 6px; }
.credential-link:hover { color: var(--mura); text-decoration-color: var(--mura); }
.credential-viewer { margin: auto; padding: 0; border: 1px solid var(--hair); background: var(--sand); color: var(--sumi); width: min(1120px, calc(100vw - 40px)); max-width: none; max-height: calc(100dvh - 40px); }
.credential-viewer:not([open]) { display: none; }
.credential-viewer::backdrop { background: rgb(25 23 21 / .7); }
.credential-viewer-bar { display: flex; align-items: center; gap: 20px; padding: 10px 20px; border-bottom: 1px solid var(--hair); }
.credential-viewer h2 { margin: 0 auto 0 0; font-size: 16px; font-weight: 400; }
.credential-viewer button { border: 0; background: transparent; color: var(--sumi); font: inherit; cursor: pointer; min-height: 44px; padding: 8px; text-decoration: underline; text-underline-offset: 5px; }
.credential-viewer button:hover { color: var(--mura); }
.credential-stage { display: flex; align-items: flex-start; overflow: auto; max-height: calc(100dvh - 120px); padding: 16px; }
.credential-stage img { display: block; width: 100%; height: auto; max-height: calc(100dvh - 154px); object-fit: contain; flex-shrink: 0; }
.credential-error { margin: 16px; }
body:has(.credential-viewer[open]) { overflow: hidden; }
@media (max-width: 719px) {
 .credential-viewer { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
 .credential-viewer-bar { padding: 8px 12px; gap: 10px; }
 .credential-stage { padding: 8px; max-height: calc(100dvh - 104px); }
}

.credential-viewer [hidden] { display: none; }
#credentials dd { align-self: center; }