* {
    box-sizing: border-box;
}
.usa-form {
    max-width: unset;
    margin: 1rem 0;
}
.usa-form :where(.usa-input, .usa-textarea, .usa-select, .usa-range) {
    max-width: 20rem;
}

.usa-logo {
    margin-top: 0rem !important;
    margin-bottom: 0.5rem !important;
}

.usa-logo__text {
    font-size: 1.25rem;
}

.usa-header:nth-child(1) .usa-navbar .usa-logo__text::before {
    content: "";
    background-color: white;
    mask-image: url('/-/npm/lucide-static@0.577.0/icons/stone.svg');
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-repeat: no-repeat;
    background-size: 100%auto;
    margin-left: -2px;
    margin-right: .25rem;
    position: relative;
    top: .25rem;
}

body {
    background-color: var(--gray-cool-2);
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > div {
    flex-grow: 1;
}

.htmx-indicator {
    opacity: 0;
    visibility: hidden;

    &.htmx-request {
        opacity: 1;
        visibility: visible;
        transition: opacity 200ms ease-in;
    }
}

/* https://monaspace.githubnext.com/ */
/* https://fontsource.org/fonts/monaspace-neon/cdn */
/* monaspace-neon-latin-400-normal */
@font-face {
  font-family: 'Monaspace Neon';
  font-style: normal;
  font-display: auto;
  font-weight: 400;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/monaspace-neon@latest/latin-400-normal.woff2') format('woff2');
}
:root {
    /* partial from primer/github-vscode-theme, partial from light_vs */
    & ::highlight(k)  { color: #cf222e; }
    & ::highlight(f)  { color: #8250df; }
    & ::highlight(s)  { color: #0a3069; }
    & ::highlight(c)  { color: #008000; }
    & ::highlight(t)  { color: #953800; }
    & ::highlight(v)  { color: #1f2328; }
    & ::highlight(co) { color: #0550ae; }
    & ::highlight(n)  { color: #0550ae; }
    & ::highlight(tg) { color: #116329; }
    & ::highlight(at) { color: #0550ae; }
    & ::highlight(pr) { color: #0550ae; }
    & ::highlight(l)  { color: #8250df; }
    & ::highlight(tt) { color: #8250df; }
    & ::highlight(tx) { text-decoration: line-through; }
    & ::highlight(tu) { color: #0969da; }
}

header {
    background-color: var(--blue-cool-60v);
}

.usa-logo__text a {
    color: white;
    vertical-align: text-top;
}

.usa-header--extended .usa-nav {
    background-color: white;
    border-bottom: 2px solid var(--gray-cool-5);
    border-top: 0;
}
.usa-header--basic .usa-nav a {
    color: white;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

/* partial mobile reset */
/* default sheet turns nav into a sidebar */
.usa-nav {
    display: block;
    position: unset;
    width: unset;
    padding: initial;
}

.usa-alert {
    margin: 1rem 0;
}

.usa-nav__inner {
    display: flex;
    justify-content: space-between;
}

.usa-nav__primary:nth-child(2) {
    justify-content: end;
    margin-top: 0;
}

.usa-header:nth-child(2) .usa-navbar .usa-logo__text::before {
    content: "";
    background-color: white;
    mask-image: url('/-/npm/lucide-static@0.577.0/icons/book.svg');
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-repeat: no-repeat;
    background-size: 100%auto;
    margin-left: -2px;
    margin-right: .25rem;
    position: relative;
    top: .25rem;
}
body[data-repo-mirror="true"] .usa-header:nth-child(2) .usa-navbar .usa-logo__text::before {
    mask-image: url('/-/npm/lucide-static@0.577.0/icons/flip-horizontal-2.svg');
}
body[data-repo-mirror="false"][data-repo-visibility="unlisted"] .usa-header:nth-child(2) .usa-navbar .usa-logo__text::before {
    mask-image: url('/-/npm/lucide-static@0.577.0/icons/book-dashed.svg');
}
body[data-repo-mirror="false"][data-repo-visibility="private"] .usa-header:nth-child(2) .usa-navbar .usa-logo__text::before {
    mask-image: url('/-/npm/lucide-static@0.577.0/icons/book-lock.svg');
}

tr td.idleage {
    white-space: nowrap;
}

tr td.idleage.milliseconds,
tr td.idleage.seconds,
tr td.idleage.minutes {
    color: #080;
    font-weight: bold;
}
tr td.idleage.hours {
    color: #080;
}
tr td.idleage.days {
    color: #040;
}
tr td.idleage.weeks {
    color: #444;
}
tr td.idleage.months {
    color: #888;
}
tr td.idleage.years {
    color: #bbb;
}

.grid-container {
    max-width: 90rem;
}

#page-index {
    & table {
        margin: 1.25rem auto;
    }
}

#page-index td {
    white-space: nowrap;
}

#page-index td:nth-child(2) {
    white-space: initial;
}

#page-repository .grid-container {
    max-width: 65rem;
}

#page-repository {
    & pre {
        background-color: lightgray;
        padding: .5rem;
        border-radius: .25rem;
        font-family: 'Monaspace Neon', 'Courier New', Courier, monospace;
        overflow-y: scroll;
    }
}

#readme * {
    all: revert;
    max-width: 100%;
}
#readme {
    & table {
        border-collapse: collapse;

        & thead {
            text-align: left;
        }
        & th, td {
            border: 2px solid #ddd;
            padding: .25rem;
        }
    }
}

#readme p>code {
    background-color: var(--gray-cool-20);
    padding: .1rem;
    border-radius: .25rem;
}

#readme>pre {
    background-color: var(--gray-cool-90);
    color: var(--gray-cool-1);
    padding: 1rem;
    border-radius: .25rem;
    font-family: 'Monaspace Neon', 'Courier New', Courier, monospace;
    overflow-y: scroll;

    & a-k  { color: #c586c0; }  /* keyword */
    & a-f  { color: #dcdcaa; }  /* function */
    & a-s  { color: #ce9178; }  /* string */
    & a-c  { color: #008000; }  /* comment */
    & a-t  { color: #4ec9b0; }  /* type */
    & a-v  { color: #9cdcfe; }  /* variable */
    & a-co { color: #4fc1ff; }  /* constant */
    & a-n  { color: #b5cea8; }  /* number */
}

#page-tree table,
#page-log table,
#page-history table,
#page-tags table,
#page-heads table {
    width: 100%;
}

#page-tree table td,
#page-log table td,
#page-history table td,
#page-tags table td,
#page-heads table td {
    padding-top: .25rem;
    padding-bottom: .25rem;
}

#page-tags {
    & td:nth-child(1) {
        width: 3rem;
    }
}

#page-tag {
    & table {
        grid-template-columns: min-content 1fr;
        max-width: 70rem;
        line-height: 1;

        & pre {
            margin: 0;
            font-size: 1rem;
        }
    }
    & section {
        max-width: 70rem;
        margin: 1rem 0;

        & code {
            white-space: preserve;
        }
    }
}

#page-log table td:is(:nth-child(4), :nth-child(5), :nth-child(6)) {
    text-align: right;
}

:is(#page-log, #page-history) .usa-tag {
    &:first-of-type {
        margin-left: 0.25rem;
    }
    &.head {
        background-color: var(--red-40);
        color: var(--red-10);
    }
    &.branch {
        background-color: var(--green-cool-40v);
        color: var(--green-cool-10v);
    }
    &.tag {
        background-color: var(--blue-40);
        color: var(--blue-10);
    }
}

#page-log {
    & td:not(:nth-child(3)) {
        width: 1rem;
        white-space: nowrap;
    }
}

.va-middle-childs>* {
    vertical-align: middle;
}
.va-middle-img>img {
    vertical-align: middle;
}

.grid-nav > .grid-row {
    justify-content: center;
}
.grid-col-nav {
    max-width: 64rem;
    padding: 0 2rem;
}

.usa-breadcrumb {
    background-color: unset;
    color: unset;
    padding: unset;
}

.usa-breadcrumb__list {
    padding: 0;
}

.usa-breadcrumb__list-item:nth-child(1)::before {
    display: inline-block;
    content: "";
    width: 2ex;
    vertical-align: baseline;

    background: none;
    background-color: transparent;
    background-color: var(--gray-cool-50);
    mask-image: url("/-/npm/@uswds/uswds@3.11.0/dist/img/usa-icons/navigate_next.svg"), linear-gradient(transparent, transparent);
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: 2ex 2ex;

    bottom: -0.2em;
    margin-left: 0px;
    margin-right: 0px;
    height: 2ex;
    position: relative;
}

#page-tree table {
    grid-template-columns: calc(1rem + 20px) min-content 1fr min-content min-content;
    white-space: nowrap;
    margin-top: .25rem;
}

#page-tree table td:nth-child(1) {
    padding: .25rem .5rem;
}

#page-tree table td:nth-child(1) img {
    vertical-align: sub;
}

#page-tree table td:nth-child(3) {
    overflow-x: hidden;
    text-overflow: ellipsis;
}


#page-tree table td:nth-child(4),
#page-tree table td:nth-child(5) {
    text-align: right;
}

.usa-nav-container {
    max-width: unset;
}
:is(#page-blob, #page-blame, #page-history) .usa-breadcrumb {
    height: 2rem;
    display: flex;
    align-items: center;
}
:is(#page-blob, #page-tree, #page-blame, #page-history) .usa-search {
    margin: .5rem;
    max-width: 20rem;
}
.usa-search__submit-icon {
    mask-image: url("/-/npm/lucide-static@0.577.0/icons/search.svg"), linear-gradient(transparent, transparent);
    background-color: white;
}
:is(#page-blob, #page-blame) .grid-row .usa-nav {
    border-bottom-width: 0;
}

#page-blob {
    & > div {
        overflow-x: scroll;
    }
}

#page-blob table {
    min-width: 100%;
    font-family: 'Monaspace Neon', 'Courier New', Courier, monospace;
    border-top: 1px solid var(--gray-warm-40);
    margin-top: 0;
    margin-bottom: 0;

    & tr {
        & td {
            &:nth-child(1) {
                width: 1rem;
            }
        }
    }
}

#page-blob table tr:target td {
    background-color: var(--gold-5v);
}
#page-blob table tr:hover td {
    background-color: var(--cyan-5v);
}


#page-blob table td {
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    font-size: .9rem;
    line-height: 1.25;
}

#page-blob table td:nth-child(1) {
    user-select: none;
    text-align: right;
    background-color: var(--gray-warm-5);
}

#page-blob table td:nth-child(2) {
    white-space: preserve nowrap;
}

.usa-navbar,
.usa-nav__inner {
    margin: 0;
    max-width: 100vw !important;
}

:is(#page-blob, #page-blame, #page-history) .usa-breadcrumb {
    margin-left: 1rem;
}

:is(#page-blob, #page-tree, #page-blame, #page-history) .usa-breadcrumb .usa-breadcrumb__list-item:nth-child(1) {
    font-weight: bold;
}

#page-miller {
    & .mcolumn {
        display: flex;
        max-height: calc(100vh - 13rem);
    }
    & table {
        white-space: nowrap;
        height: min-content;
        margin: 0;
    }
    & .mcolumn-tree {
        border-right: 1px solid;
        height: 100%;
        background-color: white;
        overflow-y: scroll;
    }
    & td {
        border-right: 0;
        border-left: 0;
    }
    & a[hx-get]:hover {
        cursor: pointer;
    }
}

#page-commit {
    & .grid {
        margin: 0 1.25rem;
        padding: 0;
    }

    & table {
        width: 100%;
        white-space: nowrap;

        & td {
            padding-top: 0;
            padding-bottom: 0;
        }
    }

    & details summary code {
        font-size: 0.9rem;
        margin-right: 0.25rem;
    }
    & details summary span {
        font-weight: normal;
        margin-right: 0.25rem;
    }
    & details {
        border: 1px solid var(--gray-cool-20);

        & .subs { color: var(--red-50v); }
        & .adds { color: var(--green-cool-50v); }

        & summary {
            position: sticky;
            top: 0;
        }
        &:open summary {
            border-bottom: 1px solid var(--gray-cool-20);
        }
        & table {
            font-size: 1rem;
            font-family: 'Monaspace Neon', 'Courier New', Courier, monospace;
            line-height: 1.25;
        }
    }
}

#page-commit table.unified-diffs {
    grid-template-columns: min-content min-content 1fr;
    white-space: preserve;
    font-size: .9rem;
    margin: 0;

    & td {
        border-width: 0;
    }
    & tr.status td {
        background-color: var(--cyan-5v);
        user-select: none;
    }
    & tr:not(.status) td:nth-child(3)::before {
        content: " ";
    }
    & tr.added td {
        background-color: var(--green-cool-10v);

        &:is(:nth-child(1), :nth-child(2)) {
           background-color: var(--green-cool-20v);
           color: var(--green-cool-50v);
           font-weight: bold;
        }
        &:nth-child(3)::before {
            content: "+";
            color: var(--green-cool-50v);
            font-weight: bold;
        }
    }
    & tr.removed td {
        background-color: var(--red-10v);

        &:is(:nth-child(1), :nth-child(2)) {
            background-color: var(--red-20v);
            color: var(--red-50v);
            font-weight: bold;
        }
        &:nth-child(3)::before {
            content: "-";
            color: var(--red-50v);
            font-weight: bold;
        }
    }
    & td:is(:nth-child(1), :nth-child(2)) {
        user-select: none;
        text-align: right;
    }
}

#page-commit table.split-diffs {
    grid-template-columns: min-content 1fr min-content 1fr;
    white-space: preserve;
    font-size: .9rem;
    margin: 0;

    & td {
        border-width: 0;

        &:nth-child(odd) {
            user-select: none;
            text-align: right;
            color: var(--gray-40);
        }
    }
    & td:nth-child(3) {
        border-left-width: 1px;
    }
    & tr.status td {
        background-color: var(--cyan-5v);
        user-select: none;
    }
    & tr td.added {
        background-color: var(--green-cool-10v);

        &:nth-child(odd) {
           background-color: var(--green-cool-20v);
           color: var(--green-cool-50v);
           font-weight: bold;
        }
    }
    & tr td.removed {
        background-color: var(--red-10v);

        &:nth-child(odd) {
            background-color: var(--red-20v);
            color: var(--red-50v);
            font-weight: bold;
        }
    }
    & tr td.skipped {
        background-color: var(--gray-cool-10);

        &:nth-child(odd) {
            background-color: var(--gray-cool-20);
        }
    }
    & tr:not(.status) td:nth-child(even) {
        &::before {
            content: " ";
            font-weight: bold;
        }
        &.added::before {
            content: "+";
            color: var(--green-cool-50v);
        }
        &.removed::before {
            content: "-";
            color: var(--red-50v);
        }
    }
}

#page-commit #m-metainfo {
    max-width: 70rem;
    grid-template-columns: min-content 1fr;
}

#page-commit #m-message {
    max-width: 70rem;

    &> code {
        white-space: preserve;
        line-height: 1;
        font-size: .75em;
    }
}

#page-filesearch .usa-search {
    margin: 1rem 0;

    & input {
        max-width: unset;
    }
}

#page-user-settings {
    & table.tokens {
        grid-template-columns: max-content 1fr min-content min-content min-content;
        white-space: nowrap;
    }
    & #pat-display {
        max-width: 22rem;
    }
}

#page-blame {
    & table {
        min-width: 100%;
        font-family: 'Monaspace Neon', 'Courier New', Courier, monospace;
        grid-template-columns: min-content 20rem min-content min-content 1fr;
        margin-top: 0;

        & tr {
            &.fulldetail {
                border-top: 1px solid var(--gray-warm-40);
            }
            &:target td {
                background-color: var(--gold-5v);
            }
            &:hover td {
                background-color: var(--cyan-5v);
            }
        }
        & td {
            padding-top: 0;
            padding-bottom: 0;
            padding-right: 0;
            border-width: 0;
            font-size: .9rem;

            &:nth-child(2) {
                white-space: nowrap;
                overflow-x: hidden;
                text-overflow: ellipsis;
            }
            &:nth-child(3) {
                padding: 0;
                padding-left: 1rem;
                width: calc(1rem + 24px);
            }
            &:nth-child(4) {
                text-align: right;
            }
            &:nth-child(5) {
                white-space: preserve;
            }
        }
    }
}

#page-history {
    table {
        grid-template-columns: min-content 1fr min-content max-content max-content;
        white-space: nowrap;

        & td:nth-child(2) {
            overflow-x: hidden;
            text-overflow: ellipsis;
        }
        & td:nth-child(4) {
            padding: 0 0.25rem;
        }
        & td:nth-child(5) {
            padding: 0 0.25rem;
        }
    }
}

#page-search {
    & table {
        margin-top: 0;
        min-width: 100%;
        font-family: 'Monaspace Neon', 'Courier New', Courier, monospace;

        & tr {
            & td {
                padding-top: 0;
                padding-bottom: 0;
                border-width: 0;
                font-size: .9rem;

                &:nth-child(1) {
                    width: 1rem;
                    text-align: right;
                    user-select: none;
                    background-color: var(--gray-warm-5);
                }


                & a {
                    color: inherit;
                    text-decoration: none;
                    white-space: preserve nowrap;

                    &::highlight(match)  { background-color: var(--gold-20v); }
                }
            }
        }
    }
}

#page-newrepo {
    & .grid {
        margin: 0 2rem;
        max-width: 40rem;
    }
    & .usa-input {
        max-width: unset;
    }
}

#page-reposettings {
    & .grid {
        margin: 0 2rem;
        max-width: 40rem;
    }
    & .usa-input {
        max-width: unset;
    }
    & fieldset table {
        width: 100%;
    }
    & th {
        text-align: left;
    }
}

.issuelabel {
    text-decoration: none;
}

#page-new-issue {
    & .usa-input {
        max-width: 70rem;
    }
    & .usa-textarea {
        max-width: 70rem;
    }
}

#page-issues {
    & .flex-row {
        margin: 1rem 0;
    }
    & .usa-search .usa-input {
        width: 100%;
    }
    & .usa-table {
        width: 100%;
        margin-top: 0;
    }
}

#page-issue {
    & .flex-row > div:first-child {
        min-width: 14rem;
    }
    & .flex-row > div:last-child {
        width: 100%;
    }
    & .sidebar {
        margin: 4rem 0 0 1rem;
    }
    & h1 {
        margin: 1rem .5rem;
    }
    & .timeline {
        padding-left: 0;
        list-style-type: none;

        & li.comment {
            &::after {
                content: "";
                padding-bottom: 1rem;
                border-left: .25rem solid var(--blue-10);
                margin-left: .5rem;
            }
            &:last-child::after {
                content: unset;
            }
            & .usa-card {
                margin-bottom: 0;
                margin-right: 1rem;
            }
            & .usa-card__container {
                margin: 0;
            }
            & .n-card__header {
                border-bottom: 2px solid var(--gray-cool-10);
                background-color: var(--gray-cool-10);
                padding: 0 1rem;
                display: flex;
                gap: .5rem;
            }
            & .usa-card__body {
                padding: 1rem;
                padding-top: 0;
                padding-bottom: 0;
            }
        }
        & li:not(.comment) {
            position: relative;
            padding-left: 1rem;
            padding-bottom: 1rem;
            border-left: .25rem solid var(--blue-10);
            margin-left: .5rem;

            &:last-child {
                border-color: transparent;
                padding-bottom: 0;
            }
            &::before {
                content: "";
                display: inline-block;
                background-image: url('/-/npm/lucide-static@0.577.0/icons/circle-question-mark.svg');
                background-repeat: no-repeat;
                background-position: center;
                background-size: 1rem;
                width: 1.5rem;
                height: 1.5rem;
                position: absolute;
                left: -.85rem;
                top: -.25rem;

                background-color: var(--gray-cool-2);
                border: .25rem solid var(--gray-cool-2);
            }
            &.update_status_needs_triage::before {
                background-image: url('/-/npm/lucide-static@0.577.0/icons/triangle.svg');
            }
            &.update_status_incomplete::before {
                background-image: url('/-/npm/lucide-static@0.577.0/icons/triangle-alert.svg');
            }
            &.update_status_backlog::before {
                background-image: url('/-/npm/lucide-static@0.577.0/icons/circle-dashed.svg');
            }
            &.update_status_todo::before {
                background-image: url('/-/npm/lucide-static@0.577.0/icons/circle.svg');
            }
            &.update_status_in_progress::before {
                background-image: url('/-/npm/lucide-static@0.577.0/icons/chart-pie.svg');
            }
            &.update_status_done::before {
                background-image: url('/-/npm/lucide-static@0.577.0/icons/circle-check-big.svg');
            }
            &.update_status_not_planned::before {
                background-image: url('/-/npm/lucide-static@0.577.0/icons/ban.svg');
            }
            &.update_status_duplicate::before {
                background-image: url('/-/npm/lucide-static@0.577.0/icons/copy.svg');
            }
            &.add_label::before {
                background-image: url('/-/npm/lucide-static@0.577.0/icons/tag.svg');
            }
            &.remove_label::before {
                background-image: url('/-/npm/lucide-static@0.577.0/icons/tag.svg');
            }
            &.delete_comment::before {
                background-image: url('/-/npm/lucide-static@0.577.0/icons/trash-2.svg');
            }
        }
    }
}

.as-grid-table {
    display: grid;

    & :is(thead, tbody) {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;

        & tr {
            display: grid;
            grid-template-columns: subgrid;
            grid-column: 1 / -1;

            & :is(th, td) {
                display: block;

                &[colspan] {
                    grid-column: span attr(colspan);
                }
                /* ^ isnt supported in firefox or safari yet */
                &[colspan="2"] {
                    grid-column: span 2;
                }
                &[colspan="3"] {
                    grid-column: span 3;
                }

                &+ :is(th, td) {
                    border-left-width: 0;
                }

            }

            &+tr :is(th, td) {
                border-top-width: 0;
            }
        }
    }
}

details.m-usa-accordion {
    margin: 0.5rem 0;

    & summary.m-usa-accordion__heading {
        background-color: #f0f0f0;
        cursor: pointer;
        font-weight: 700;
        margin: 0;
        padding: 1rem 3.5rem 1rem 1.25rem;
        text-decoration: none;

        &:hover {
            background-color: #e6e6e6;
        }

        &:focus {
            outline: .25rem solid #2491ff;
            outline-offset: 0;
        }

        &:focus-visible {
            outline: 1px dotted;
        }
    }

    & div.m-usa-accordion__content {
        background-color: white;
        color: #1b1b1b;
        padding: 1rem 1.25rem calc(1rem - 0.25rem) 1.25rem;
    }
}

.usa-nav__primary > .usa-nav__primary-item > span {
    padding: 1rem;
    display: flex;
    font-weight: 700;
    color: var(--gray-cool-50);

    &.usa-nav-link--thin {
        padding-left: 0;
        padding-right: 0;
    }
}

button.usa-link {
  background-color: transparent;
  border: 0;
}