/* Live exam countdown inside the hero target card.
   Shared by the portal and the study app — index.html links this file directly,
   app/src/styles/main.css imports it.

   The exam card keeps a dark surface in both themes (see .exam-card in
   portal.css / premium-ui.css), so these colours are fixed light-on-dark
   instead of following the theme tokens. Selectors are two classes deep to beat
   the plain `.exam-card strong` / `.exam-card span` rules; the colours also
   carry !important because premium-ui.css paints every span in the card with
   `color: ... !important`, which specificity alone cannot outrank. */

/* Laid out on ONE line — the days and the clock used to stack, which made this
   card twice as tall as it needed to be and gave the countdown more of the
   dashboard than the dashboard. Wrapping is kept for the narrowest cards. */
.exam-card .exam-countdown {
    --ec-accent: #37d7b2;

    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    line-height: 1;
    white-space: normal;
    overflow: visible;
}

.exam-card .exam-countdown.is-flat {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff !important;
}

.exam-card .exam-countdown.is-past {
    color: rgba(255, 255, 255, 0.6) !important;
}

.exam-card .exam-countdown.is-soon {
    --ec-accent: #ffc46b;
}

.exam-card .exam-countdown.is-urgent {
    --ec-accent: #ff7a7a;
}

/* mobileShell.js skeletonises this card on a cold start, and .skl only blanks
   the element's own text — the mounted children have to be hidden too, or the
   digits show through the placeholder block. */
.exam-card .exam-countdown.skl>* {
    visibility: hidden;
}

/* ── Days ─────────────────────────────────────────────────────────────── */

.exam-card .exam-countdown .ec-primary {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: inherit;
}

.exam-card .exam-countdown .ec-num {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    /* Tabular figures: without them the row nudges sideways every time a 1
       replaces a wider digit. */
    font-variant-numeric: tabular-nums;
    color: #fff !important;
}

/* Gradient fill needs the clip to be supported, otherwise transparent text
   would leave the number invisible — hence the guard. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .exam-card .exam-countdown .ec-num {
        background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.68) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent !important;
    }

    .exam-card .exam-countdown.is-soon .ec-num,
    .exam-card .exam-countdown.is-urgent .ec-num {
        background: linear-gradient(180deg, #ffffff 0%, var(--ec-accent) 130%);
        -webkit-background-clip: text;
        background-clip: text;
    }
}

.exam-card .exam-countdown .ec-word {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55) !important;
}

/* ── Hours / minutes / seconds ────────────────────────────────────────── */

.exam-card .exam-countdown .ec-clock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.9) !important;
}

.exam-card .exam-countdown .ec-seg {
    display: inline-flex;
    align-items: baseline;
    /* Inherit, or `.exam-card span` in premium-ui.css would reset the digits to
       its own 0.85rem and break the pill's proportions. */
    font-size: inherit;
    color: inherit !important;
}

.exam-card .exam-countdown .ec-seg i {
    font-style: normal;
    font-size: 0.7em;
    font-weight: 600;
    margin-left: 1px;
    color: rgba(255, 255, 255, 0.45);
}

.exam-card .exam-countdown .ec-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--ec-accent);
    box-shadow: 0 0 8px var(--ec-accent);
    animation: ec-pulse 2s ease-in-out infinite;
}

@keyframes ec-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(0.6);
        opacity: 0.35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .exam-card .exam-countdown .ec-dot {
        animation: none;
    }
}

/* ── Compact card (mobile home layouts in both apps) ──────────────────── */

@media (max-width: 900px) {
    .exam-card .exam-countdown {
        gap: 5px;
    }

    .exam-card .exam-countdown.is-flat {
        font-size: 1.3rem;
    }

    .exam-card .exam-countdown .ec-num {
        font-size: 1.5rem;
    }

    .exam-card .exam-countdown .ec-word {
        font-size: 0.6rem;
        letter-spacing: 0.1em;
    }

    .exam-card .exam-countdown .ec-clock {
        gap: 6px;
        padding: 4px 9px 4px 7px;
        font-size: 0.68rem;
    }
}