/* File view header (sticky) and breadcrumb (design-language.md §5, docs/frontend-design.md §3.5). Tokens only. */

.file-head {
    position: sticky;
    /* Below 1200 px the page scrolls under the fixed top bar; from 1200 px the main column scrolls. */
    top: var(--topbar-h);
    z-index: var(--z-raised);
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex: none;
    height: var(--topbar-h);
    padding: 0 var(--s-5);
    background-color: var(--ink-0);
    border-bottom: 1px solid var(--rule);
}

.crumbs {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font: 400 var(--t-sm) / var(--lh-sm) var(--font-mono);
    color: var(--paper-lo);
}

/* Folders give way first; the file name keeps its full width (or wraps) so it is never cut to "T…". */
.crumbs > * {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crumbs > .crumbs__sep,
.crumbs > .crumbs__game,
.crumbs > .crumbs__corpus,
.crumbs > .crumbs__file {
    flex: none;
}

.crumbs > .crumbs__file {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.crumbs a {
    /* The game accent ink is derived for the rail surface and fails on the darker file head. */
    color: var(--paper-lo);
}

.crumbs a.crumbs__game {
    color: var(--paper-hi);
}

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

.crumbs [aria-current] {
    color: var(--paper-hi);
}

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

.crumbs__game b {
    font-weight: 500;
    text-transform: uppercase;
}

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

.file-head__meta {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex: none;
    font: 400 var(--t-xs) / var(--lh-xs) var(--font-mono);
    color: var(--paper-lo);
    white-space: nowrap;
}

.file-head__tag,
.file-head__version {
    color: var(--paper-lo);
}

.file-head__actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-left: auto;
    flex: none;
}

/* The corpus crumb already says SRC/DATA/NOTES; dropping the tag leaves the room to the folders. */
@media (min-width: 900px) {
    .file-head__tag {
        display: none;
    }
}

/* From 900 px the head wraps (actions drop to a second row) before the crumbs are cut; a folder name only
   ellipsizes when the path alone is wider than the head. */
@media (min-width: 900px) {
    .file-head {
        flex-wrap: wrap;
        height: auto;
        min-height: var(--topbar-h);
        padding-block: var(--s-1);
    }

    .crumbs {
        flex: 1 0 auto;
        max-width: 100%;
    }
}

/* Below 1560 px the version also steps aside, and Pin / Copy link become icon buttons (names stay in aria-label
   and title), so a typical path, the line count and the actions fit on one row. */
@media (min-width: 900px) and (max-width: 1559.98px) {
    .file-head__version,
    .file-head__copy-label,
    .file-head__actions .pin-toggle span {
        display: none;
    }
}

/* The Go to button is for touch (T opens it on a keyboard); Ask in chat is in the inspector from 1200 px. */
@media (min-width: 900px) and (pointer: fine) {
    .file-head__goto {
        display: none;
    }
}

@media (min-width: 1200px) {
    .file-head {
        top: 0;
    }
}

/* Below 1200 px the inspector bar carries "Ask in chat"; from 1200 px the inspector's selection box does. */
.file-head__ask {
    display: none;
}

/* Touch: crumb links get a 44 px hit area without changing their size. */
@media (max-width: 899.98px), (pointer: coarse) {
    .crumbs a {
        position: relative;
    }

    .crumbs a::after {
        content: "";
        position: absolute;
        inset-inline: calc(var(--s-2) * -1);
        top: 50%;
        height: var(--tap);
        transform: translateY(-50%);
    }
}

/* Phones and portrait tablets: row 1 is the file name (in full) with the folder path under it, row 2 the actions. */
@media (max-width: 899.98px) {
    .file-head {
        flex-wrap: wrap;
        align-items: center;
        gap: var(--s-1) var(--s-2);
        height: auto;
        padding: var(--s-2) var(--s-4);
    }

    .crumbs {
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 0 var(--s-1);
        overflow: visible;
        white-space: normal;
        font-size: var(--t-xs);
        line-height: var(--lh-xs);
    }

    .crumbs > * {
        overflow: visible;
    }

    .crumbs > .crumbs__file {
        order: -1;
        flex: 1 0 100%;
        margin-bottom: var(--s-1);
        font: 500 var(--t-md) / var(--lh-sm) var(--font-mono);
    }

    .crumbs__sep--file {
        display: none;
    }

    .file-head__actions {
        order: 1;
        flex: 1 1 auto;
        flex-wrap: wrap;
        margin-left: 0;
    }

    .file-head__meta {
        order: 2;
        margin-left: auto;
    }

    .file-head__meta .file-head__version {
        display: none;
    }

    .file-head__actions .btn {
        padding-inline: var(--s-3);
    }
}

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

    .file-head__goto-label,
    .file-head__copy-label,
    .file-head__actions .pin-toggle span {
        display: none;
    }

    .file-head__actions {
        gap: var(--s-1);
    }

    .file-head__actions .btn {
        padding-inline: var(--s-2);
    }
}