/* 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; in .src--wrap
   (Markdown and plain text) they wrap instead. */

/* 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);
}

/* Prose: lines wrap at the box edge (words first, then anywhere for long paths and URLs), keeping leading
   whitespace and tabs. Wrapped continuation rows stay in the code column, clear of the line number. */
.src--wrap .src__body {
    width: auto;
}

.src--wrap .src__line {
    white-space: pre-wrap;
}

.src--wrap .src__code {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* A wrapped line is several rows tall: the copy button sits on its first row, not its middle. */
.src--wrap .src__copy.icon-btn {
    bottom: auto;
    margin: 0;
}

.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);
    /* Long words, paths and URLs break rather than widen the page; code blocks still scroll (.md pre). */
    overflow-wrap: break-word;
    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;
    overflow-wrap: normal;
    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));
    }
}