/* Countdown timer (/countdown-timer): what is its own, the clean and flip displays, the finished message, the confetti,
   full screen and the embed mode. The mode control, buttons, progress bar, fields, saved list and colours come from the
   app kit (css/app-kit, docs/app-kit.md); the accent is the time category's violet. Loaded only on this app's page
   (StylePaths). */

/* The flip cards: dark in both themes. */
.countdown-landing-app {
    --ct-flip: #1e293b;
    --ct-flip-text: #f8fafc;
}

.countdown-landing-app[data-theme="dark"] > .filter-landing-stage {
    --ct-flip: #020617;
}

/* --- Stage: the confetti canvas covers it; full screen and the embed centre the countdown ------------------------ */

.countdown-landing-app > [data-ct-stage] {
    position: relative;
    overflow: hidden;
}

/* The display spans the stage; the mode control, the progress bar and the message sit in the middle. Set on the
   children because on phones the site sets align-items: start on the stage (seo-pages.css, body.filter-app-mode). */
.countdown-landing-app > [data-ct-stage] > * {
    align-self: stretch;
}

.countdown-landing-app .ct-modes,
.countdown-landing-app .ct-progress,
.countdown-landing-app .ct-done {
    align-self: center;
}

.countdown-landing-app > [data-ct-stage]:fullscreen {
    justify-content: center;
    width: 100%;
    height: 100%;
    /* 1.6rem, smaller on a phone so the four units still fit side by side. */
    font-size: clamp(1rem, 4.2vw, 1.6rem);
}

.countdown-landing-app[data-ct-embed="1"] > [data-ct-stage] {
    min-height: 100vh;
    justify-content: center;
}

/* Embed (?embed=1): the frame loads the whole page, so everything but the countdown is hidden behind it. */
html.ct-embed-page,
html.ct-embed-page body {
    overflow: hidden;
}

html.ct-embed-page body {
    visibility: hidden;
}

html.ct-embed-page .countdown-landing-app[data-ct-embed="1"] {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    margin: 0;
    visibility: visible;
}

html.ct-embed-page .countdown-landing-app[data-ct-embed="1"] > [data-ct-stage] {
    box-sizing: border-box;
    flex: 1;
    min-height: 0;
    box-shadow: none;
}

.countdown-landing-app .ct-actions {
    justify-content: center;
}

.countdown-landing-app .ct-start {
    min-width: 7rem;
}

/* --- The countdown: equal columns, as wide as the widest unit (its label decides, and labels differ per language) */

.countdown-landing-app .ct-title {
    margin: 0;
    font-size: 1.4em;
    text-align: center;
    overflow-wrap: anywhere;
}

.countdown-landing-app .ct-display {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    justify-content: center;
    gap: 0.75rem;
    max-width: 100%;
}

.countdown-landing-app .ct-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 4.5em;
}

.countdown-landing-app .ct-num {
    font-size: 2.8em;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease;
}

.countdown-landing-app .ct-lbl {
    max-width: 100%;
    margin-top: 0.15em;
    overflow-wrap: anywhere;
    text-align: center;
    color: var(--ak-accent);
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Clean: the numbers sit on soft cards with an accent edge. */
.countdown-landing-app .ct-display[data-style="clean"] .ct-unit {
    padding: 0.55em 0.5em 0.5em;
    border: 1px solid var(--ak-border);
    border-top: 3px solid var(--ak-accent);
    border-radius: 0.6em;
    background: var(--ak-panel);
}

/* Flip: dark cards with a fold line; a changed number flips in. */
.countdown-landing-app .ct-display[data-style="flip"] .ct-num {
    position: relative;
    padding: 0.15em 0.3em;
    border-radius: 0.2em;
    background: var(--ct-flip);
    color: var(--ct-flip-text);
    box-shadow: 0 0.15em 0.3em rgba(0, 0, 0, 0.25);
}

.countdown-landing-app .ct-display[data-style="flip"] .ct-num::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(0, 0, 0, 0.45);
}

.countdown-landing-app .ct-num.ct-tick {
    animation: ct-flip 0.35s ease-out;
}

@keyframes ct-flip {
    0% { transform: rotateX(70deg); }
    100% { transform: rotateX(0); }
}

/* The date line and the progress text (em, so they grow with the full screen font). */
.countdown-landing-app .ct-sub {
    margin: 0;
    color: var(--ak-muted);
    font-size: 0.9em;
    text-align: center;
    overflow-wrap: anywhere;
}

/* An empty line (no date in Timer mode) would still take a gap. */
.countdown-landing-app .ct-sub:empty {
    display: none;
}

.countdown-landing-app .ct-progress {
    width: min(100%, 24rem);
}

/* Reached: the numbers turn to the accent and the message stands out. */
.countdown-landing-app[data-ct-finished] .ct-display[data-style="clean"] .ct-num {
    color: var(--ak-accent);
}

.countdown-landing-app .ct-done {
    margin: 0;
    padding: 0.35em 1em;
    border-radius: var(--ak-radius-pill);
    background: color-mix(in srgb, var(--ak-accent) 14%, transparent);
    color: var(--ak-accent);
    font-size: 1.4em;
    font-weight: 700;
    text-align: center;
    overflow-wrap: anywhere;
    animation: ct-done 0.5s ease-out;
}

@keyframes ct-done {
    0% { opacity: 0; transform: scale(0.92); }
    100% { opacity: 1; transform: scale(1); }
}

.countdown-landing-app .ct-confetti {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* --- Settings ------------------------------------------------------------------------------------------------------ */

/* Date and time (and minutes and seconds) side by side. */
.countdown-landing-app .ct-two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ak-space-2);
}

.countdown-landing-app .ct-code {
    font-size: var(--ak-fs-xs);
}

.countdown-landing-app .ct-saved-title {
    margin-top: var(--ak-space-2);
}

/* Saved countdowns: an accent edge, the name wraps. */
.countdown-landing-app [data-ct-saved] > .ak-item {
    padding: 0.4rem 0.5rem;
    border-inline-start: 3px solid var(--ak-accent);
    font-size: var(--ak-fs-sm);
}

.countdown-landing-app [data-ct-saved] > .ct-saved-empty {
    border-inline-start-color: var(--ak-border);
    color: var(--ak-muted);
}

.countdown-landing-app .ct-saved-name {
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .countdown-landing-app .ct-display {
        gap: 0.4rem;
    }

    .countdown-landing-app .ct-unit {
        min-width: 0;
    }

    .countdown-landing-app .ct-num {
        font-size: 2.2em;
    }

    .countdown-landing-app .ct-lbl {
        font-size: 0.68em;
        letter-spacing: 0.03em;
    }

    .countdown-landing-app .ct-display[data-style="clean"] .ct-unit {
        min-width: 4.1em;
        padding: 0.45em 0.35em 0.4em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .countdown-landing-app .ct-num.ct-tick,
    .countdown-landing-app .ct-done {
        animation: none;
    }
}