/* PUBLIC KIOSK SHORT LINK (2026-10) - the locked card (countdown, closed, switched off, not
   found) that kiosk/index.php draws before the link opens or when it cannot show the kiosk.
   Loaded after kiosk_leaderboard.css. The look is the live tracking map's card, value for value
   (js/track/src/components/PublicLinkGate.tsx in the pemba repo, Tailwind's default greys), so
   the two public pages feel the same: grey screen, white card, logos, small dark tiles.
   Always light, whatever the kiosk theme. Tailwind's md breakpoint is 768px. */

/* the page behind, seen only while the card fades over to the leaderboard */
body {
    background: #f3f4f6;
}

.kpub-locked {
    background: #f3f4f6;                         /* bg-gray-100 */
    color: #111827;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: opacity 0.4s ease;
}

/* the empty kiosk underneath (kiosk_leaderboard.js still runs it) */
.kpub-locked #kiosk-cards-viewport,
.kpub-locked #kiosk-footer {
    display: none !important;
}

.kpub-screen {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;                          /* py-8 px-4 */
    overflow-y: auto;
}

.kpub-card {
    width: 100%;
    max-width: 28rem;                            /* max-w-md */
    padding: 1.5rem;                             /* p-6 */
    background: #ffffff;
    border-radius: 0.75rem;                      /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);   /* shadow-lg */
    text-align: center;
}

.kpub-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 0.75rem;                                /* gap-3 */
    margin-bottom: 1.25rem;                      /* mb-5 */
}

/* a logo on a small white tag (the Amberstation logo, and an event logo without its own background) */
.kpub-logo-tag {
    padding: 0.25rem 0.625rem;                   /* py-1 px-2.5 */
    background: rgba(255, 255, 255, 0.9);
    border-radius: 0.5rem;                       /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);    /* shadow-md */
    line-height: 0;
}

.kpub-logo-tag img {
    display: block;
    height: 1.75rem;                             /* h-7 */
    width: auto;
    max-width: 100%;
}

/* an event logo with its own background, shown as it is */
.kpub-logo-own {
    display: block;
    height: 2.25rem;                             /* h-9 */
    width: auto;
    max-width: 100%;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.kpub-event {
    margin-bottom: 0.5rem;                       /* mb-2 */
    font-size: 0.875rem;                         /* text-sm */
    line-height: 1.25rem;
    font-weight: 500;
    color: #6b7280;                              /* gray-500 */
}

.kpub-headline {
    margin: 0;
    font-size: 1.125rem;                         /* text-lg */
    line-height: 1.75rem;
    font-weight: 600;
    color: #111827;                              /* gray-900 */
}

.kpub-countdown {
    display: flex;
    justify-content: center;
    gap: 0.5rem;                                 /* gap-2 */
    margin: 1.25rem 0;                           /* my-5 */
}

.kpub-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 4rem;
    padding: 0.75rem 0.5rem;                     /* py-3 px-2 */
    background: #111827;                         /* gray-900 */
    color: #ffffff;
    border-radius: 0.5rem;
}

.kpub-num {
    font-size: 1.875rem;                         /* text-3xl */
    line-height: 1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kpub-label {
    margin-top: 0.25rem;
    font-size: 0.65rem;
    line-height: 1rem;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: #d1d5db;                              /* gray-300 */
}

.kpub-detail {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #6b7280;
}

.kpub-headline + .kpub-detail {
    margin-top: 0.5rem;                          /* mt-2 */
}

/* the kiosk's own fullscreen button (same id), quiet in the corner of the grey screen */
.kpub-fs-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.7);
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1;
    opacity: 0.7;
    cursor: pointer;
}

.kpub-fs-btn:hover,
.kpub-fs-btn:focus {
    opacity: 1;
    outline: none;
}

@media (min-width: 768px) {
    .kpub-logo-tag {
        padding: 0.375rem 0.75rem;               /* md:py-1.5 md:px-3 */
    }
    .kpub-logo-tag img {
        height: 2.5rem;                          /* md:h-10 */
    }
    .kpub-logo-own {
        height: 3.25rem;                         /* md:h-[3.25rem] */
    }
}

/* when the link opens (kiosk_public.js): the card fades out, then the leaderboard fades in */
.kpub-locked.kpub-fade-out {
    opacity: 0;
}

.kpub-reveal #kiosk-leaderboard {
    animation: kpub-fade-in 0.7s ease-out both;
}

@keyframes kpub-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}