/* Wylore maintenance page: only the kit tokens and styles this page uses (shared/kit/tokens.css). */

:root {
    --space-1: 0.382rem;
    --space-2: 0.618rem;
    --space-3: 1rem;
    --space-4: 1.618rem;
    --space-5: 2.618rem;

    --control-padding: 0.85rem;
    --control-text: 0.9rem;
    --control-radius: 1rem;
    --container-padding: 1rem;
    --surface-radius: calc(var(--container-padding) + var(--control-radius));

    --text-big-title: 1.4rem;
    --text-subtitle: 1.05rem;
    --text-body: 0.9rem;
    --text-small: 0.8rem;
    --text-weight: 500;
    --badge-weight: 600;

    --icon-body: 1.1rem;
    --font-body: Manrope, sans-serif;

    --color-purple: rgb(124, 77, 255);
    --color-yellow: rgb(240, 180, 0);
    --color-green: rgb(17, 141, 87);
    --color-blue: rgb(18, 80, 232);

    --color-text: #0b1220;
    --color-description: #3f4756;
    --color-primary-bg: #e7eaef;
    --color-secondary-bg: #fff;
    --color-tertiary-bg: #f3f4f6;
    --color-border: #d6dae1;
    --control-hover-brightness: 96%;

    --bg-yellow: #fdf3d6;
    --border-yellow: #f6d266;
    --bg-green: #d9ede4;
    --border-green: #70bb9a;
    --bg-blue: #d9e3fb;
    --border-blue: #7196f1;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-text: #fff;
        --color-description: #afbce7;
        --color-primary-bg: #0d0e10;
        --color-secondary-bg: #060607;
        --color-tertiary-bg: #0f1012;
        --color-border: #2f3235;
        --control-hover-brightness: 90%;

        --bg-yellow: #2b2206;
        --border-yellow: #926e03;
        --bg-green: #081c14;
        --border-green: #0d5737;
        --bg-blue: #08122b;
        --border-blue: #0d328e;
    }
}

* {
    box-sizing: border-box;
    margin: 0;
}

html {
    font-family: var(--font-body);
    font-weight: var(--text-weight);
    color: var(--color-text);
    background: var(--color-primary-bg);
    -webkit-font-smoothing: antialiased;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--color-primary-bg);
}

.card {
    width: 100%;
    max-width: 32rem;
    display: flex;
    flex-direction: column;
    gap: var(--container-padding);
    padding: var(--container-padding);
    background: var(--color-secondary-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--surface-radius);
}

@media only screen and (max-width: 767.98px) {
    body {
        padding: var(--space-3);
        background: var(--color-secondary-bg);
    }

    html {
        background: var(--color-secondary-bg);
    }

    .card {
        padding: 0;
        border: none;
        border-radius: 0;
    }
}

.head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3) var(--space-2);
    text-align: center;
}

.logo {
    width: 3.5rem;
    height: 3.5rem;
}

h1 {
    font-size: var(--text-big-title);
    font-weight: var(--text-weight);
    line-height: 1.3;
}

p {
    font-size: var(--text-body);
    line-height: 1.6;
    color: var(--color-description);
}

.alert {
    display: flex;
    gap: var(--space-2);
    padding: var(--container-padding);
    border-radius: var(--control-radius);
    border: 1px solid;
    font-size: var(--text-body);
    line-height: 1.6;
    color: var(--color-text);
}

.alert svg {
    flex: none;
    width: var(--icon-body);
    height: var(--icon-body);
    margin-top: calc((1.6em - var(--icon-body)) / 2);
}

.alert.yellow {
    background: var(--bg-yellow);
    border-color: var(--border-yellow);
}

.alert.yellow svg {
    color: var(--color-yellow);
}

.alert.blue {
    background: var(--bg-blue);
    border-color: var(--border-blue);
}

.alert.blue svg {
    color: var(--color-blue);
}

.alert.green {
    background: var(--bg-green);
    border-color: var(--border-green);
}

.alert.green svg {
    color: var(--color-green);
}

.box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--container-padding);
    background: var(--color-tertiary-bg);
    border-radius: var(--control-radius);
    text-align: center;
}

.label {
    font-size: var(--text-small);
    color: var(--color-description);
}

.countdown {
    display: flex;
    gap: var(--space-3);
    font-variant-numeric: tabular-nums;
}

.unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.5rem;
}

.unit strong {
    font-size: 1.8rem;
    font-weight: var(--text-weight);
    line-height: 1.2;
}

.unit span {
    font-size: var(--text-small);
    color: var(--color-description);
}

.done {
    font-size: var(--text-subtitle);
    color: var(--color-text);
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--control-padding);
    border-radius: var(--control-radius);
    background: var(--color-green);
    color: #fff;
    font-size: var(--control-text);
    line-height: 1.2;
    text-decoration: none;
    transition: filter 0.05s linear;
}

.button:hover {
    filter: brightness(var(--control-hover-brightness));
}

.button svg {
    width: var(--icon-body);
    height: var(--icon-body);
}

.footer {
    font-size: var(--text-small);
    color: var(--color-description);
    text-align: center;
}

[hidden] {
    display: none !important;
}