@layer tokens, reset, base, components, utilities;

@layer tokens {
    :root {
        --color-valid: light-dark(#1c7f44, oklch(76% 0.11 150));
        --color-invalid: light-dark(#c42b2b, oklch(76% 0.12 25));
        --color-void: light-dark(oklch(97.5% 0.012 255), oklch(14% 0.04 278));
        --color-ink: light-dark(oklch(25% 0.06 278), oklch(93% 0.015 260));
        --color-accent: light-dark(#6d28d9, #c4b5fd);

        --color-muted: color-mix(in oklab, var(--color-ink) 65%, transparent);
        --color-line: color-mix(in oklab, var(--color-ink) 14%, transparent);
        --color-panel: color-mix(in oklab, var(--color-ink) 5%, var(--color-void));
        --color-sunken: color-mix(in oklab, var(--color-ink) 10%, var(--color-void));

        --radius-control: 0.375rem;
        --radius-surface: 0.5rem;
    }
}

@layer reset {
    /*
    Sources:
    - Andy Bell, "A (more) Modern CSS Reset" - https://piccalil.li/blog/a-more-modern-css-reset/
    - Josh W. Comeau, "A Modern CSS Reset" - https://www.joshwcomeau.com/css/custom-css-reset/
    - Manuel Matuzovic, "UA+" - https://piccalil.li/links/ua-plus/
    - Chris Coyier, "CSS Starter" - https://piccalil.li/links/the-coyier-css-starter/
    - Effeilo, "browserux.css" and "browserux.lab.css" - https://github.com/Effeilo/browserux.css
    */

    :where(*, *::before, *::after) {
        box-sizing: border-box;
    }

    :where(*:not(dialog)) {
        margin: 0;
    }

    :where(html) {
        color-scheme: light dark;
        font-family: system-ui, sans-serif;
        font-size: clamp(1rem, 1rem + 0.25dvw, 1.25rem);
        hanging-punctuation: first allow-end last;
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }

    :where(body) {
        min-height: 100vh;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
    }

    :where(h1, h2, h3, h4, button, input, label) {
        line-height: 1.1;
    }

    :where(h1, h2, h3, h4, h5, h6) {
        text-wrap: balance;
    }

    :where(p, h1, h2, h3, h4, h5, h6) {
        overflow-wrap: break-word;
    }

    :where(p, li, blockquote) {
        text-wrap: pretty;
    }

    :where(ul[role="list"], ol[role="list"]) {
        list-style: none;
    }

    :where(ul, ol, dl) {
        padding: 0;
        list-style: inside;
    }

    :where(ul, ol, dl) :where(ul, ol, dl) {
        padding-inline-start: 2ch;
    }

    :where(a:not([class])) {
        color: currentColor;
        text-decoration-skip-ink: auto;
        text-underline-offset: 0.2em;
    }

    :where(img, picture, video, canvas, svg) {
        display: block;
        max-width: 100%;
    }

    :where(input, button, textarea, select) {
        font: inherit;
    }

    :where(
        input:not(
            :where(
                [type="submit"],
                [type="checkbox"],
                [type="radio"],
                [type="button"],
                [type="reset"]
            )
        )
    ) {
        inline-size: 100%;
    }

    :where(button, input:where([type="submit"], [type="reset"], [type="button"])) {
        background: CanvasText;
        color: Canvas;
        border: 1px solid transparent;
    }

    :where(textarea) {
        field-sizing: content;
        min-block-size: 5lh;
        inline-size: 100%;
        max-inline-size: 100%;
    }

    :where(table) {
        caption-side: bottom;
        border-collapse: collapse;
    }

    :where(:target) {
        scroll-margin-block: 5ex;
    }

    :where(hr) {
        border: none;
        border-top: 1px solid currentColor;
        height: 0;
        overflow: visible;
    }

    :where(abbr[title], dfn[title]) {
        cursor: help;
        text-decoration: underline dotted;
    }

    :where(sub, sup) {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    :where(sub) {
        bottom: -0.25em;
    }

    :where(sup) {
        top: -0.5em;
    }

    :where(code, kbd, samp, pre) {
        font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    }

    :where(code) {
        max-width: 100%;
        white-space: pre-wrap;
    }

    :where(dialog) {
        background: Canvas;
        border: none;
        color: CanvasText;
        margin: auto;
        max-width: 100%;
        padding: 0;
    }

    :where(dialog)::backdrop {
        background: rgb(0 0 0 / 50%);
    }

    :where([popover]) {
        background: Canvas;
        border: none;
        color: CanvasText;
        margin: auto;
        padding: 0;
    }

    :where([popover])::backdrop {
        background: rgb(0 0 0 / 50%);
    }

    :where(details)::details-content {
        opacity: 0;
        overflow: clip;
        transition:
            opacity 200ms ease,
            content-visibility 200ms ease allow-discrete;
    }

    :where(details[open])::details-content {
        opacity: 1;
    }

    :where(input, textarea, select):user-valid {
        background-color: color-mix(in oklab, var(--color-valid), Canvas 88%);
        border-color: var(--color-valid);
    }

    :where(input, textarea, select):user-invalid {
        background-color: color-mix(in oklab, var(--color-invalid), Canvas 88%);
        border-color: var(--color-invalid);
    }

    :where(input, textarea):user-invalid::placeholder {
        color: var(--color-invalid);
    }

    @media (prefers-reduced-motion: no-preference) {
        :where(html) {
            interpolate-size: allow-keywords;
        }

        :where(html:focus-within) {
            scroll-behavior: smooth;
        }

        @view-transition {
            navigation: auto;
        }

        :where(dialog) {
            opacity: 1;
            transform: translateY(0);
            transition:
                display 220ms allow-discrete,
                opacity 220ms,
                overlay 220ms allow-discrete,
                transform 220ms;
        }

        :where(dialog)::backdrop {
            transition:
                background-color 220ms,
                display 220ms allow-discrete,
                overlay 220ms allow-discrete;
        }

        @starting-style {
            :where(dialog[open]) {
                opacity: 0;
                transform: translateY(-8px);
            }

            :where(dialog[open])::backdrop {
                background-color: rgb(0 0 0 / 0%);
            }
        }

        :where([popover]:popover-open) {
            opacity: 1;
            transform: translateY(0);
            transition:
                display 220ms allow-discrete,
                opacity 220ms,
                overlay 220ms allow-discrete,
                transform 220ms;
        }

        @starting-style {
            :where([popover]:popover-open) {
                opacity: 0;
                transform: translateY(-8px);
            }
        }
    }

    @media (prefers-reduced-motion: reduce), (update: slow) {
        :where(*, *::before, *::after) {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }

    /*
     Stimulus controllers are hidden when JS is disabled, except for
     Live Components: they degrade gracefully.
     */
    @media (scripting: none) {
        [data-controller]:not([data-controller~="live"], [data-no-js-fallback]) {
            display: none !important;
        }
    }
}

@layer base {
    :where(html) {
        -webkit-tap-highlight-color: transparent;
        scrollbar-gutter: stable;
    }

    :where(
        a,
        button,
        input,
        select,
        textarea,
        summary,
        [contenteditable],
        [tabindex]
    ):focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }

    :where(
        input[type="checkbox"],
        input[type="radio"],
        input[type="range"],
        meter,
        select,
        progress
    ) {
        accent-color: currentColor;
    }

    :where(html)::selection {
        background-color: Highlight;
        color: HighlightText;
    }

    :where(input, textarea, select):-webkit-autofill,
    :where(input, textarea, select):-webkit-autofill:hover,
    :where(input, textarea, select):-webkit-autofill:focus {
        -webkit-text-fill-color: var(--color-ink);
        caret-color: var(--color-ink);
        transition:
            background-color 600000s ease-out,
            color 600000s ease-out;
    }

    :where(button, [type="button"], [type="reset"], [type="submit"], select):not(:disabled),
    :where(label[for]) {
        cursor: pointer;
    }

    :where([disabled], [aria-disabled="true"]) {
        cursor: not-allowed;
    }

    :where(button) {
        user-select: none;
    }

    :where(button, input, label, select, textarea) {
        touch-action: manipulation;
    }

    body {
        display: flex;
        flex-direction: column;
        min-height: 100dvh;

        --scene-star: light-dark(oklch(25% 0.06 278 / 48%), oklch(90% 0.02 260 / 55%));
        --scene-nebula-a: light-dark(oklch(85% 0.05 300 / 55%), oklch(40% 0.14 300 / 22%));
        --scene-nebula-b: light-dark(oklch(85% 0.05 235 / 55%), oklch(40% 0.14 245 / 22%));

        background-color: var(--color-void);
        background-image:
            radial-gradient(1.4px 1.4px at 22% 28%, var(--scene-star), transparent),
            radial-gradient(1px 1px at 68% 64%, var(--scene-star), transparent),
            radial-gradient(1.2px 1.2px at 44% 82%, var(--scene-star), transparent),
            radial-gradient(1px 1px at 86% 18%, var(--scene-star), transparent),
            radial-gradient(40rem 30rem at 12% -5%, var(--scene-nebula-a), transparent 70%),
            radial-gradient(36rem 28rem at 95% 110%, var(--scene-nebula-b), transparent 70%);
        background-repeat: repeat, repeat, repeat, repeat, no-repeat, no-repeat;
        background-size:
            200px 200px,
            260px 240px,
            230px 210px,
            280px 260px,
            100% 100%,
            100% 100%;
        color: var(--color-ink);
    }

    main {
        flex: 1;
    }
}

@layer components {
    body > header {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        min-block-size: 3rem;
        padding-block: 0.8rem;
        padding-inline: 1rem;
        border-block-end: 1px solid color-mix(in oklab, var(--color-ink) 12%, transparent);

        nav {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-items: center;
            gap: 0.5rem 1.25rem;

            .quiet-link[aria-current="page"] {
                color: var(--color-ink);
                text-decoration: underline;
                text-underline-offset: 0.2em;
            }

            form {
                display: flex;

                button[type="submit"] {
                    padding: 0;
                    border: 0;
                    border-radius: 0;
                    background: none;
                }
            }
        }
    }

    form {
        display: grid;
        gap: 1.25rem;

        .row {
            display: grid;
            gap: 0.4rem;

            label {
                font-size: 0.78rem;
                font-weight: 600;
            }
        }

        :where(input, select, textarea):not(
            :where(
                [type="hidden"],
                [type="checkbox"],
                [type="radio"],
                [type="submit"],
                [type="button"],
                [type="reset"]
            )
        ) {
            padding: 0.55em 0.75em;
            border: 1px solid color-mix(in oklab, var(--color-ink) 35%, transparent);
            border-radius: var(--radius-control);
            color: inherit;

            &:not(:user-valid):not(:user-invalid) {
                background-color: light-dark(Canvas, oklch(20% 0.03 278));
            }
        }
    }

    :where(form button[type="submit"], a.button) {
        display: inline-block;
        padding: 0.65em 1em;
        border-radius: var(--radius-control);
        background: var(--color-accent);
        color: var(--color-void);
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        transition:
            filter 120ms ease,
            translate 120ms ease;

        &:hover {
            filter: brightness(1.07);
        }

        &:disabled {
            opacity: 0.55;
        }

        &:active {
            translate: 0 1px;
            filter: brightness(0.98);
        }
    }

    /* Shared page scaffold: centered, capped-width single-column layout. */
    .page {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--page-gap, 1.5rem);
        align-content: start;
        inline-size: min(100% - 2.5rem, var(--page-max, 40rem));
        margin-inline: auto;
        padding-block: 1.5rem 3rem;
    }

    .page-header {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.5rem 1.25rem;

        h1 {
            margin-inline-end: auto;
            font-size: 1.9em;
            font-weight: 800;
            letter-spacing: -0.03em;
        }

        nav {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem 1.25rem;
        }
    }

    /* Stacked variant: actions above the title instead of beside it. */
    .page-header--stack {
        display: grid;
        gap: 0.5rem;
    }

    .quiet-link {
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-decoration: none;
        white-space: nowrap;
        color: var(--color-muted);

        &:hover {
            color: var(--color-ink);
            text-decoration: underline;
            text-underline-offset: 0.2em;
        }
    }

    .icon-link {
        display: inline-flex;
        align-items: center;
        gap: 0.45em;

        & svg {
            inline-size: 1em;
            block-size: 1em;
        }
    }

    .youtube-embed {
        inline-size: 100%;
        aspect-ratio: 16 / 9;
        border-radius: var(--radius-control);
        background-color: var(--color-sunken);
    }

    :where(.error[role="alert"], .flash[role="status"]) {
        display: flex;
        align-items: center;
        gap: 0.5em;
        padding: 0.6em 0.8em;
        border-radius: var(--radius-control);
        font-size: 0.85rem;
        font-weight: 500;
    }

    .error[role="alert"] {
        background-color: color-mix(in oklab, var(--color-invalid) 12%, transparent);
        color: color-mix(in oklab, var(--color-invalid) 78%, var(--color-ink));
    }

    .flash[role="status"] {
        background-color: color-mix(in oklab, var(--color-valid) 12%, transparent);
        color: color-mix(in oklab, var(--color-valid) 78%, var(--color-ink));

        > button {
            flex: none;
            inline-size: 1.25em;
            block-size: 1.25em;
            margin-inline-start: auto;
            padding: 0;
            border: 0;
            background: none;
            color: inherit;
            opacity: 0.65;

            &:hover {
                opacity: 1;
            }
        }
    }

    main.splash {
        display: grid;
        place-content: center;
        text-align: center;
    }

    main.login {
        display: grid;
        padding: clamp(2rem, 8dvh, 4rem) 1rem;

        section {
            margin: auto;
            inline-size: min(22rem, 100%);
        }

        header {
            display: grid;
            gap: 0.75rem;
        }

        h1 {
            font-size: 2em;
            font-weight: 800;
            letter-spacing: -0.03em;
        }

        header p {
            color: var(--color-muted);
        }

        .error[role="alert"],
        .flash[role="status"] {
            margin-block-start: 1.5rem;
        }

        form {
            margin-block-start: 2rem;

            button[type="submit"] {
                inline-size: 100%;
            }
        }
    }
}

@layer utilities {
    .visually-hidden {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
}