@layer reset, layout, components, accents;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { overflow-x: clip; }
  * { scrollbar-width: thin; scrollbar-color: var(--highlight) transparent; }
  *::-webkit-scrollbar { width: 6px; height: 6px; }
  *::-webkit-scrollbar-track { background: none; }
  *::-webkit-scrollbar-thumb { background: var(--highlight); border-radius: 3px; }
}

@layer layout {
  body {
    font-family: var(--font-body);
    max-width: 860px;
    margin: 0 auto;
    padding: 0;
    background: var(--background);
    color: var(--primary);
  }

  header {
    padding: .75rem 1rem;
    margin-bottom: .75rem;
  }

  header ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: 1.2rem;
    min-width: 0;
  }

  header li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  header li:first-child { flex-shrink: 0; }
  header li:last-child { flex-shrink: 1; }

  header li + li::before {
    content: '/';
    margin-right: .25rem;
    color: var(--secondary);
  }

  header a {
    color: var(--primary);
    text-decoration: none;
  }

  header a:hover {
    color: var(--emphasized);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  main > h1, main > p { padding-inline: 1rem; }
  main > h1 { margin-bottom: .75rem; }
  main > p { margin-top: 0; }
  main > article { padding: 0 1rem; }

  footer {
    padding: 1rem;
    margin-top: 2rem;
    color: var(--secondary);
    font-size: .875rem;
    text-align: center;
  }

  footer a { color: var(--blue); text-decoration: none; }
  footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
}

@layer components {
  /* === Shared patterns === */

  :where(.repo-nav-item, .tree-row, details ul li a, details ul li button) {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    min-height: 50px;
    font-family: var(--font-mono);
  }

  :where(.diff-stat-type, .diff-line-marker, .tree-icon, .summary-icon) {
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
  }

  :where(.blame-linenum, .st-linenum) {
    min-width: 5ch;
    text-align: right;
    padding-right: 1.5ch;
    color: var(--secondary);
    user-select: none;
  }

  /* === Repo list === */

  .repo-list { display: flex; flex-direction: column; }

  .repo-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: inherit;
  }

  .repo-card:hover { background: var(--highlight); }
  .repo-name { font-size: 1.1rem; font-weight: 600; color: var(--emphasized); }
  .repo-desc { color: var(--primary); }
  .repo-meta { display: flex; justify-content: space-between; color: var(--secondary); }

  /* === Nav items === */

  .repo-nav-item {
    text-decoration: none;
    color: var(--primary);
    border-top: 1px solid var(--secondary);
  }

  .repo-nav-item + .repo-nav-item { border-top: 1px solid var(--highlight); }
  .repo-nav-item:last-child { border-bottom: 1px solid var(--secondary); }
  .repo-nav-item:active { background-color: var(--highlight); }
  .repo-nav-item:hover > span:first-of-type { text-decoration: underline; text-underline-offset: 3px; }
  .repo-nav-item-meta { margin-left: auto; color: var(--secondary); }
  .repo-nav-item-arrow { color: var(--secondary); }

  /* === Tag info === */

  .tag-info {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .2rem 1.5rem;
    font-family: var(--font-mono);
    margin: 1.5rem 1rem 1.5rem;
  }

  .tag-info dt { color: var(--secondary); }
  .tag-info dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
  .tag-info a { color: var(--primary); text-decoration: none; }
  .tag-info a:hover { text-decoration: underline; text-underline-offset: 3px; }

  .message {
    font-family: var(--font-mono);
    padding: 1rem;
    margin: 0;
    background: var(--highlight);
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--primary);
  }

  /* === Branch / tag lists === */

  .branch-list, .tag-list { display: flex; flex-direction: column; }

  .branch-row, .tag-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .75rem 1rem;
    text-decoration: none;
    color: inherit;
    font-family: var(--font-mono);
  }

  .branch-row:hover, .tag-row:hover { background: var(--highlight); }

  .branch-name, .tag-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .branch-default { color: var(--secondary); margin-right: 1rem; }

  .branch-date, .tag-date {
    display: flex;
    align-items: baseline;
    flex-shrink: 0;
    color: var(--secondary);
    padding-left: 1rem;
  }

  /* === Commit log === */

  .commit-log { display: flex; flex-direction: column; }

  .commit-row {
    display: grid;
    grid-template-columns: 5rem 1fr;
    grid-template-rows: auto auto;
    gap: .15rem 1rem;
    padding: .75rem 1rem;
    text-decoration: none;
    color: inherit;
    font-family: var(--font-mono);
  }

  .commit-row:hover { background: var(--highlight); }
  .commit-sha { color: var(--secondary); grid-row: 1; }
  .commit-parent, .commit-ref-row { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .commit-message {
    color: var(--primary);
    grid-row: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .commit-meta {
    display: flex;
    justify-content: space-between;
    color: var(--secondary);
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }

  .commit-meta span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .commit-meta span:last-child { flex-shrink: 0; padding-left: 1rem; }

  /* === Commit graph === */

  .commit-graph-layout { display: flex; align-items: flex-start; }

  .commit-graph-svg {
    flex-shrink: 0;
    max-width: 10rem;
    padding-left: 1rem;
    overflow-x: auto;
  }

  .commit-graph-svg > svg { display: block; }

  .commit-graph-rows {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .commit-graph-row {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem 0 .75rem;
    text-decoration: none;
    color: inherit;
    font-family: var(--font-mono);
  }

  .commit-graph-row:hover { background: var(--highlight); }

  .commit-graph-row .commit-message {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .commit-date { flex-shrink: 0; color: var(--secondary); }
  .commit-ref.commit-ref-branch { color: var(--blue); }
  .commit-ref.commit-ref-tag { color: var(--violet); }

  /* === Diff stat === */

  .diff-stat-type { text-align: center; }

  .diff-stat-path {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--primary);
  }

  .diff-stat-A { color: var(--green); }
  .diff-stat-D { color: var(--red); }
  .diff-stat-M { color: var(--blue); }
  .diff-stat-R { color: var(--violet); }

  /* === Inline diff === */

  .diff-files { margin: 0 0 1rem; }

  .diff-line { display: flex; gap: 1rem; }
  .diff-line > span { white-space: pre; }
  .diff-line-marker { text-align: center; }

  .diff-hunks { padding: 0; margin: 0; }

  .diff-hunk {
    font-family: var(--font-mono);
    line-height: 1.45;
    margin: 0;
    padding: .75rem 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    tab-size: 4;
    border-bottom: 1px solid var(--highlight);
  }

  .diff-line-ctx { color: var(--secondary); }
  .diff-line-\+ { color: var(--green); }
  .diff-line-- { color: var(--red); }

  /* === Pagination === */

  .pagination {
    display: flex;
    justify-content: space-between;
    padding: .75rem 1rem;
    font-size: 1rem;
    font-family: var(--font-mono);
  }

  .pagination a, .pagination span { flex: 1; text-align: center; }
  .pagination a { color: var(--secondary); text-decoration: none; }
  .pagination a:hover span:not(.pagination-sym) { text-decoration: underline; text-underline-offset: 3px; }

  @media (max-width: 640px) {
    .commit-graph-row .commit-sha,
    .commit-graph-row .commit-date { display: none; }
  }

  /* === Details / summary === */

  details { border-top: 1px solid var(--highlight); }
  details:first-of-type { border-top: 1px solid var(--secondary); }
  details:last-of-type { border-bottom: 1px solid var(--highlight); }

  summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    min-height: 50px;
    font-family: var(--font-mono);
    background: var(--highlight);
  }

  .summary-icon { height: 1rem; }

  details[open] summary { color: var(--emphasized); }
  summary::after { content: '[+]'; color: var(--secondary); }
  summary:not(:has(span))::after { margin-left: auto; }
  details[open] summary::after { content: '[-]'; }
  summary span { color: var(--secondary); margin-left: auto; }

  details > *:not(summary) { padding: .75rem 1rem; margin-bottom: 0; }
  details > ul { list-style: none; padding: 0; margin: 0; }
  details ul li + li { border-top: 1px solid var(--highlight); }

  details ul li {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 50px;
    padding: 0 1rem;
    color: var(--secondary);
    font-family: var(--font-mono);
  }

  details ul li:has(a), details ul li:has(button) { padding: 0; }

  details ul li a,
  details ul li button {
    width: 100%;
    text-align: left;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
  }

  details ul li a:active { background-color: var(--highlight); }

  details ul li a:hover span:first-child,
  details ul li button:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }

  details ul li a.see-all span:first-child { color: var(--secondary); }

  details ul li a span:first-child,
  details ul li button span:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--primary);
  }

  details ul li button span:first-child { transition: opacity .1s; }

  details ul li button span:nth-child(2) {
    flex-shrink: 0;
    min-width: 4rem;
    text-align: right;
    color: var(--secondary);
  }

  details ul li a span:not(:first-child) { flex-shrink: 0; color: var(--secondary); }

  /* === Tree listing === */

  .tree-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--secondary);
    border-bottom: 1px solid var(--highlight);
  }

  .tree-row { text-decoration: none; color: inherit; }
  .tree-icon { color: var(--secondary); }

  .tree-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--primary);
  }

  .tree-row:hover .tree-name { text-decoration: underline; text-underline-offset: 3px; }
  .tree-row:active { background-color: var(--highlight); }
  .tree-row + .tree-row { border-top: 1px solid var(--highlight); }
  .tree-size { flex-shrink: 0; color: var(--secondary); }

  /* === File view === */

  .file-view > .tree-row { border-top: 1px solid var(--secondary); }
  .file-view > .tree-row:first-child .tree-icon { color: var(--primary); }
  .file-view > .tree-row + .repo-nav > .repo-nav-item { border-top-color: var(--highlight); }

  .file-view > .repo-nav > .repo-nav-item:last-child {
    border-bottom: 1px solid var(--secondary);
  }

  .file-view .repo-nav-item-arrow { margin-left: auto; }

  .file-content { margin: 0; }

  .file-content pre {
    font-family: var(--font-mono);
    line-height: 1.45;
    padding: 1rem 1rem 1rem 0;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    tab-size: 4;
  }

  .file-content .st-pre {
    max-width: none;
    white-space: pre;
    background: transparent;
  }

  /* === Blame view === */

  .blame-table {
    font-family: var(--font-mono);
    line-height: 1.45;
    width: 100%;
    border-collapse: collapse;
  }

  .blame-wrap {
    overflow-x: auto;
    padding: 1rem 1rem 1rem 0;
  }

  .blame-row:nth-child(even) { background: var(--highlight); }

  .blame-sha {
    width: 8ch;
    padding: 0 .5rem 0 1rem;
    text-align: right;
    white-space: nowrap;
  }

  .blame-sha a { text-decoration: none; }
  .blame-sha a:hover { text-decoration: underline; text-underline-offset: 3px; }

  .blame-linenum {
    width: 5ch;
    padding: 0 1.5ch 0 .5ch;
    text-align: right;
    color: var(--secondary);
    user-select: none;
  }

  .blame-code {
    padding: 0 1rem 0 0;
    white-space: pre;
  }

  /* === Syntax highlighting === */

  .st-comment { color: var(--secondary); }
  .st-string { color: var(--green); }
  .st-keyword { color: var(--blue); }
  .st-type { color: var(--violet); }
  .st-constant { color: var(--orange); }
  .st-function { color: var(--cyan); }
  .st-variable { color: var(--cyan); }
  .st-operator { color: var(--primary); }
  .st-entity { color: var(--violet); }
  .st-attribute { color: var(--yellow); }
  .st-number { color: var(--orange); }
  .st-punctuation { color: var(--secondary); }
  .st-tag { color: var(--blue); }
  .st-storage { color: var(--blue); }
  .st-support { color: var(--violet); }
  .st-invalid { color: var(--red); }
  .st-inserted { color: var(--green); }
  .st-deleted { color: var(--red); }
  .st-changed { color: var(--yellow); }
  .st-heading { color: var(--emphasized); }
  .st-bold { font-weight: bold; }
  .st-italic { font-style: italic; }
  .st-link { color: var(--blue); }
  .st-raw { color: var(--green); }
  .st-meta { color: var(--primary); }
  .st-section { color: var(--blue); }
  .st-underline { text-decoration: underline; }
  .st-linenum { display: inline-block; }
}

@layer accents {
  .branch-name { color: var(--blue); }
  .tag-name { color: var(--violet); }
  .archive-link { color: var(--orange); }
  .commit-sha { color: var(--cyan); }
}