/* Source listing, notfound region, Markdown body and code-token colours for the file view.
   Tokens only (scripts/ci/check-css-tokens.sh). Long lines scroll inside .src, never the page. */

/* Set by js/source-view.js: the fixed bar plus the sticky file head. */
:root {
    --src-chrome: 0px;
}

.file-view {
    padding: var(--s-4) var(--s-5);
    min-width: 0;
}

.src {
    overflow-x: auto;
    color: var(--paper);
    background-color: var(--code-bg);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    font: 400 var(--t-sm) / var(--lh-sm) var(--font-mono);
    tab-size: 4;
    scrollbar-width: thin;
    scrollbar-color: var(--rule-strong) transparent;
}

.src__body {
    width: max-content;
    min-width: 100%;
    padding: var(--s-1) 0;
}

.src__line {
    /* --src-chrome (js/source-view.js) is the fixed bar plus the sticky file head, so a jumped-to line clears them. */
    scroll-margin-top: calc(var(--src-chrome, 0px) + var(--s-3));
    position: relative;
    display: grid;
    grid-template-columns: var(--s-8) 1fr;
    /* Transparent by default so the highlight bar does not shift the code. */
    border-left: .1875rem solid transparent;
    white-space: pre;
}

.src__ln {
    padding-right: var(--s-3);
    color: var(--paper-lo);
    text-align: right;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.src__ln:hover {
    color: var(--paper-hi);
}

.src__code {
    font: inherit;
    padding-right: var(--s-4);
}

.src__line.is-hl {
    background-color: var(--accent-wash);
    border-left-color: var(--accent);
}

.src__line.is-hl .src__ln {
    /* The accent wash lightens the light theme's surface, which drops paper-lo below 4.5:1. */
    color: var(--paper);
}

.src__copy.icon-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--s-2);
    width: var(--lh-sm);
    height: var(--lh-sm);
    margin: auto 0;
    opacity: 0;
}

.src__line:hover .src__copy,
.src__copy:focus-visible {
    opacity: 1;
}

/* Token classes written by the highlighter (see docs/frontend-design.md §2.4). */
.src .k { color: var(--code-keyword); }
.src .t { color: var(--code-type); }
.src .s { color: var(--code-string); }
.src .n { color: var(--code-number); }
.src .c { color: var(--code-comment); }
.src .a { color: var(--code-attr); }

.def-link {
    color: inherit;
    text-decoration: underline dotted var(--paper-faint);
}

.def-link:hover {
    text-decoration-color: var(--accent);
}

.codefoot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2) var(--s-4);
    padding: var(--s-3) 0;
    font: 400 var(--t-xs) / var(--lh-xs) var(--font-mono);
    color: var(--paper-lo);
}

.codefoot__more {
    color: var(--paper-lo);
}

.codefoot__more:hover {
    color: var(--paper-hi);
}

.notfound-region {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 15rem;
    margin: var(--s-4) var(--s-5);
    padding: var(--s-7) var(--s-4);
    font: 400 var(--t-sm) / var(--lh-sm) var(--font-ui);
    color: var(--paper-lo);
    text-align: center;
}

.notfound-region__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
    max-width: var(--col-max);
}

.notfound-region__title {
    font-size: var(--t-xl);
    font-weight: 800;
    color: var(--paper-hi);
}

.notfound-region__body p {
    margin: 0;
    overflow-wrap: anywhere;
}

.notfound-region__actions {
    margin-top: var(--s-2);
}

.notfound-region__label {
    margin-top: var(--s-2);
    font: 400 var(--t-xs) / var(--lh-xs) var(--font-mono);
    color: var(--paper-lo);
}

.notfound-region__list {
    margin: var(--s-2) 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-mono);
}

.notfound-region__list a {
    color: var(--paper-hi);
}

.md {
    max-width: var(--col-max);
    font: 400 var(--t-md) / var(--lh-md) var(--font-ui);
    color: var(--paper);
}

.md h1,
.md h2,
.md h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--lh-lg);
    margin: var(--s-6) 0 var(--s-3);
}

.md h1 {
    font-size: var(--t-xl);
}

.md h2 {
    font-size: var(--t-lg);
}

.md h3 {
    font-size: var(--t-md);
}

.md p,
.md ul,
.md ol {
    margin: 0 0 var(--s-4);
}

.md code {
    font: 400 var(--t-sm) / var(--lh-sm) var(--font-mono);
    padding: 0 var(--s-1);
    background-color: var(--code-bg);
    border-radius: var(--r-1);
}

.md pre {
    overflow-x: auto;
    margin: 0 0 var(--s-4);
    padding: var(--s-3) var(--s-4);
    background-color: var(--code-bg);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
}

.md pre code {
    padding: 0;
    background: none;
}

.md a {
    color: var(--accent);
}

.md .align-left {
    text-align: left;
}

.md .align-center {
    text-align: center;
}

.md .align-right {
    text-align: right;
}

/* Long lines scroll inside the box: an edge fade says there is more. The cover layers scroll with the content
   (local) and hide the fade at each end, so a fade shows only on the side that has more to show. */
@media (max-width: 899.98px) {
    .src {
        background:
            linear-gradient(to right, var(--code-bg) 30%, transparent) left center / 2rem 100% no-repeat local,
            linear-gradient(to left, var(--code-bg) 30%, transparent) right center / 2rem 100% no-repeat local,
            linear-gradient(to right, var(--rule-strong), transparent) left center / 1rem 100% no-repeat scroll,
            linear-gradient(to left, var(--rule-strong), transparent) right center / 1rem 100% no-repeat scroll,
            var(--code-bg);
    }
}

@media (max-width: 599.98px) {
    .file-view {
        padding: var(--s-3) var(--s-2);
    }

    .src__line {
        grid-template-columns: var(--s-7) 1fr;
    }

    .src__ln {
        padding-right: var(--s-2);
    }

    .notfound-region {
        margin: var(--s-3) var(--s-2);
    }
}

/* Touch: the gutter is a full-width target (a row is one code line tall, so the height stays), the hover-only
   copy button would sit invisibly over the code, and the last lines clear the inspector bar. */
@media (pointer: coarse) {
    .src__ln {
        padding-inline: var(--s-2) var(--s-3);
    }

    .src__copy.icon-btn {
        display: none;
    }
}

@media (max-width: 1199.98px) {
    .file-view {
        padding-bottom: calc(var(--inspector-bar-h) + env(safe-area-inset-bottom) + var(--s-4));
    }
}