/* Element defaults and primitives shared by both applications. Colour comes
   entirely from the token contract, so this file is theme agnostic. */

@layer base {
    *,
    ::after,
    ::before {
        border-color: var(--tk-line);
    }

    html {
        -webkit-text-size-adjust: 100%;
        scrollbar-gutter: stable;
    }

    body {
        background-color: var(--tk-canvas);
        color: var(--tk-fg);
        font-family: var(--tk-font-sans);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    :focus-visible {
        outline: 2px solid var(--tk-primary);
        outline-offset: 2px;
    }

    [hidden] {
        display: none !important;
    }
}

@layer components {
    /* Inertia's progress bar, tinted from the live brand colour. */
    #nprogress .bar {
        background: var(--tk-primary) !important;
        height: 2px !important;
    }

    #nprogress .peg {
        box-shadow: 0 0 10px var(--tk-primary), 0 0 5px var(--tk-primary) !important;
    }

    .tk-scrollbar {
        scrollbar-width: thin;
        scrollbar-color: var(--tk-line-strong) transparent;
    }

    .tk-scrollbar::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .tk-scrollbar::-webkit-scrollbar-thumb {
        background-color: var(--tk-line-strong);
        border-radius: 999px;
    }

    .tk-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* Escapes the centred content column so a band can run to the viewport edge.
   The layout root clips what this leaves behind the stable scrollbar gutter. */
@utility tk-bleed {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
}

@utility tk-truncate-* {
    display: -webkit-box;
    -webkit-line-clamp: --value(integer);
    -webkit-box-orient: vertical;
    overflow: hidden;
}