/* public.css - the public certificate page: the kiosk's design tokens and the shared building blocks
   (dialog, flask loader, section heading, buttons, toast) used by certificates.js / certificates.css. */
:root {
    --step: 1.12;
    --ink: #0A1A26; --ink-70: #3C4E5A; --ink-45: #6D7F8B;
    --glass: #EDF3F7; --paper: #FFFFFF; --bg: #EEF3F7;
    --cyan: #00ADEF; --cyan-deep: #007BB5; --secondary: #8d68ad;
    --etch: #C3D3DE; --etch-soft: #E2EAF0;
    --gradient-brand: linear-gradient(135deg, #00adef 0%, #8d68ad 100%);
    --display: "Archivo", "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
    --body: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --mono: "IBM Plex Mono", Consolas, "SF Mono", Menlo, "Courier New", monospace;
    --radius: 14px; --radius-lg: 22px; --tap: 46px;
    --t-xs: calc(11px * var(--step)); --t-sm: calc(13px * var(--step)); --t-md: calc(15px * var(--step));
    --t-xl: calc(22px * var(--step)); --t-2xl: calc(30px * var(--step));
    --shadow-sm: 0 4px 12px rgba(10, 26, 38, .05), 0 1px 3px rgba(10, 26, 38, .08);
    --shadow-lg: 0 24px 60px rgba(10, 26, 38, .18);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink);
       font-family: var(--body); font-size: var(--t-md); line-height: 1.45; }
a { color: var(--cyan-deep); }

/* ---------------------------------------------------------------- header / footer */
.pub-top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 18px; padding: 12px clamp(16px, 3vw, 40px);
           background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--etch-soft); }
.pub-brand { display: inline-flex; align-items: center; text-decoration: none; }
.pub-brand__logo { display: none; height: 46px; width: auto; }
.pub-brand.has-logo .pub-brand__logo { display: block; }
.pub-brand.has-logo .pub-brand__text { display: none; }
.pub-brand__text { display: inline-flex; flex-direction: column; line-height: .95; }
.pub-brand__b { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -.01em; color: #00ADEF; }
.pub-brand__b sup { font-size: 10px; vertical-align: top; }
.pub-brand__s { font-size: 21px; letter-spacing: .06em; color: #8d68ad; font-weight: 500; }
.pub-top__title { padding-left: 18px; border-left: 1px solid var(--etch); font-family: var(--mono); font-size: var(--t-xs);
                  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-45); }
.pub-top__link { margin-left: auto; font-weight: 600; text-decoration: none; font-size: var(--t-sm); white-space: nowrap; }
.pub-main { flex: 1; width: 100%; padding: clamp(16px, 3vw, 40px); }
.pub-foot { padding: 18px clamp(16px, 3vw, 40px) calc(18px + env(safe-area-inset-bottom, 0px)); color: var(--ink-45); font-size: var(--t-sm); text-align: center; }
.pub-foot a { color: var(--ink-70); }
@media (max-width: 560px) { .pub-top__link { display: none; } .pub-brand__logo { height: 38px; } .pub-brand__b { font-size: 20px; } .pub-brand__s { font-size: 17px; } }

/* ---------------------------------------------------------------- page, section heading */
.bsl-page { display: grid; gap: 18px; }
.section-head { display: flex; align-items: flex-end; gap: clamp(12px, 1.5vw, 28px); margin: clamp(22px, 2.4vw, 44px) 0 clamp(12px, 1.4vw, 22px); }
.section-head__ticks { flex: 1 1 auto; height: 14px; align-self: center; background: repeating-linear-gradient(to right, var(--etch) 0 1px, transparent 1px 10px); border-bottom: 1px solid var(--etch); opacity: .8; }
.section-head h2 { font-family: var(--display); font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.1; }
.section-head__count { font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-45); white-space: nowrap; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--tap); padding: 0 22px;
       border: 1px solid var(--etch); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit;
       font-size: var(--t-sm); font-weight: 650; cursor: pointer; white-space: nowrap; transition: transform .16s, box-shadow .16s; }
.btn:active { transform: scale(.96); }
.btn--primary { background: var(--gradient-brand); border-color: transparent; color: #fff; box-shadow: 0 4px 10px rgba(0, 173, 239, .3); }
.btn--ghost { background: transparent; }

/* ---------------------------------------------------------------- dialog */
.bsl-modal { position: fixed; inset: 0; z-index: 9000; background: rgba(10,26,38,.55); display: grid; place-items: center; padding: 20px; animation: bslFadeIn .2s ease; }
.bsl-modal__card { width: min(440px, 100%); max-height: 92vh; overflow: auto; background: var(--paper); border-radius: var(--radius-lg); padding: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.25); animation: bslRise .28s cubic-bezier(.16,1,.3,1); }
.bsl-modal__card h2 { font-family: var(--display); font-size: var(--t-xl); margin: 10px 0 4px; text-align: center; }
.bsl-modal__icon { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: var(--gradient-brand); display: grid; place-items: center; color: #fff; font-size: 24px; }
.bsl-muted { color: var(--ink-45); text-align: center; margin: 0 0 14px; }
@keyframes bslFadeIn { from { opacity: 0; } }
@keyframes bslRise { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* ---------------------------------------------------------------- the app's flask loader (identical to the kiosk; a file, so a strict Content-Security-Policy allows it) */
.bsl-loading { padding: 50px; text-align: center; color: var(--ink-45); }
.bsl-loading::before { content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 12px; background: url("flask.svg") center / contain no-repeat; }   /* the app's flask loader */

/* ---------------------------------------------------------------- toast */
.pub-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 9500; transform: translate(-50%, 20px);
             max-width: min(92vw, 520px); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 600;
             box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .25s ease; text-align: center; }
.pub-toast.on { opacity: 1; transform: translate(-50%, 0); }