/* The daily streak band. See VisitStreakBand.razor.

   Shared by the website, the app and the admin's preview, so it is written against the
   --wx-* tokens every theme defines and nothing else. */

.vs {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--wx-line, #2c2c2c);
    border-radius: var(--wx-radius, 12px);
    background: var(--wx-surface, #1b1b1b);
    color: var(--wx-ink, #fff);
}

.vs-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.vs-count {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.vs-days {
    font-family: var(--wx-font-data, ui-monospace, Consolas, monospace);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--wx-signal, #d4af37);
    font-variant-numeric: tabular-nums;
}

.vs-unit {
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wx-muted, #9a9a9a);
}

.vs-done {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wx-good, #4caf50);
    white-space: nowrap;
}

/* ---------- the run ---------- */

.vs-strip {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vs-dot {
    flex: 1 1 0;
    max-width: 34px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--wx-line, #2c2c2c);
    background: var(--wx-surface-2, #151515);
    color: var(--wx-muted-dim, #555);
    font-size: 0.7rem;
}

.vs-dot.is-lit {
    border-color: var(--wx-signal, #d4af37);
    background: var(--wx-signal, #d4af37);
    color: var(--wx-signal-ink, #111);
}

/* A milestone day: a star, dim until it is reached. */
.vs-dot.is-milestone:not(.is-lit) { color: var(--wx-muted, #9a9a9a); }

/* The dot that just lit. Keyed on lit-ness in the markup so this is a fresh element and
   the animation plays once, on the press that counted. */
.vs-dot.is-today {
    animation: vs-pop 460ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--wx-signal, #d4af37) 30%, transparent);
}

@keyframes vs-pop {
    from { transform: scale(0.4); }
    to   { transform: scale(1); }
}

/* ---------- the words ---------- */

.vs-body { min-height: 1.4em; }

.vs-earned,
.vs-next {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.4;
}

.vs-earned { color: var(--wx-ink, #fff); }
.vs-earned b { color: var(--wx-signal, #d4af37); }
.vs-next { color: var(--wx-muted, #9a9a9a); }

.vs.is-fresh .vs-earned { animation: vs-rise 360ms 120ms ease-out both; }

@keyframes vs-rise {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- the button ---------- */

.vs-btn {
    width: 100%;
    padding: 12px 18px;
    border: none;
    border-radius: 999px;
    background: var(--wx-signal, #d4af37);
    color: var(--wx-signal-ink, #111);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.12s, filter 0.2s;
}

.vs-btn:disabled { opacity: 0.6; cursor: default; }

@media (hover: hover) {
    .vs-btn:not(:disabled):hover { filter: brightness(1.08); }
}

.vs-btn:not(:disabled):active { transform: translateY(1px) scale(0.99); }

/* ---------- with room ----------
   The stacked form above is a phone's. Across a desktop slot it read as a phone layout
   stretched: a small number, small dots and a sentence all hugging the left, then a
   button a metre wide. With room, it is one row - the number, the run, the button - and
   everything sizes to the row rather than to a screen it is not on.

   A container query, not a media query: the slot this sits in is a container, and it
   is the slot's width that matters. The admin's preview is a phone-shaped slot on a
   desktop window and gets the phone form, which is right. */
@container (min-width: 640px) {
    .vs {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "count strip button"
            "count words button";
        align-items: center;
        column-gap: 28px;
        row-gap: 8px;
        padding: 20px 26px;
    }

    .vs-head { grid-area: count; align-items: center; }
    .vs-strip { grid-area: strip; }
    .vs-body { grid-area: words; min-height: 0; }
    .vs-btn { grid-area: button; }

    /* The number becomes the left column: big, with its unit beneath it, and the
       checked-in mark under that rather than off to the side. */
    .vs-head { flex-direction: column; align-items: flex-start; gap: 4px; }
    .vs-count { flex-direction: column; align-items: flex-start; gap: 0; }
    .vs-days { font-size: 3.4rem; }
    .vs-unit { font-size: 0.74rem; }

    .vs-strip { gap: 10px; }
    .vs-dot { max-width: 44px; font-size: 0.85rem; }

    .vs-btn {
        width: auto;
        min-width: 180px;
        padding: 14px 28px;
        align-self: center;
    }
}

/* Wider still, and the dots can stop being the tallest thing in the row. */
@container (min-width: 960px) {
    .vs { column-gap: 40px; }
    .vs-dot { max-width: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .vs-dot.is-today,
    .vs.is-fresh .vs-earned { animation: none; }
}