@import url('https://fonts.bunny.net/css?family=ibm-plex-sans:400,600|ibm-plex-mono:400');

:root {
  --background: #fdf6e3;
  --highlight:  #eee8d5;
  --secondary:  #93a1a1;
  --primary:    #657b83;
  --emphasized: #586e75;

  --font-body:    "IBM Plex Sans", sans-serif;
  --font-mono:    "IBM Plex Mono", monospace;
  --font-heading: "IBM Plex Sans", sans-serif;

  --yellow:  #b58900;
  --orange:  #cb4b16;
  --red:     #dc322f;
  --magenta: #d33682;
  --violet:  #6c71c4;
  --blue:    #268bd2;
  --cyan:    #2aa198;
  --green:   #859900;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #002b36;
    --highlight:  #073642;
    --secondary:  #586e75;
    --primary:    #839496;
    --emphasized: #93a1a1;
  }
}

@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); }
}

article { line-height: 1.6; word-wrap: break-word; }

article h1, article h2, article h3,
article h4, article h5, article h6 {
  margin: 1.5rem 0 .5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--emphasized);
}

article h1 { font-size: 2em; border-bottom: 1px solid var(--highlight); padding-bottom: .3em; }
article h2 { font-size: 1.5em; border-bottom: 1px solid var(--highlight); padding-bottom: .3em; }
article h3 { font-size: 1.25em; }
article h4 { font-size: 1em; }

article p { margin: 0 0 1rem; }

article a { color: var(--blue); text-decoration: none; }
article a:hover { text-decoration: underline; text-underline-offset: .2rem; }

article strong, article b { font-weight: 600; }
article em, article i { font-style: italic; }

article ul, article ol { margin: 0 0 1rem; padding-left: 2rem; }
article li { margin: .25rem 0; }
article li > p { margin-top: .25rem; }

article blockquote {
  margin: 0 0 1rem;
  padding: 0 1em;
  color: var(--secondary);
  border-left: .25em solid var(--highlight);
}
article blockquote > :first-child { margin-top: 0; }
article blockquote > :last-child { margin-bottom: 0; }

article hr {
  height: .25em;
  margin: 1.5rem 0;
  padding: 0;
  border: 0;
  background-color: var(--highlight);
}

article img { max-width: 100%; box-sizing: content-box; }

article code {
  font-family: var(--font-mono);
  padding: .2em .4em;
  background-color: var(--highlight);
  border-radius: 4px;
  white-space: break-spaces;
}

article pre {
  font-family: var(--font-mono);
  line-height: 1.45;
  padding: 1rem;
  margin: 0 0 1rem;
  overflow-x: auto;
  min-width: 0;
  background-color: var(--highlight);
  border-radius: 6px;
}

article pre code {
  font-size: 100%;
  padding: 0;
  background: transparent;
  border-radius: 0;
  white-space: pre;
}

article table {
  border-spacing: 0;
  border-collapse: collapse;
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 1rem;
}

article table th {
  font-weight: 600;
}

article table th,
article table td {
  padding: 6px 13px;
  border: 1px solid var(--highlight);
}

article table tr { border-top: 1px solid var(--highlight); }
article table tr:nth-child(2n) { background-color: var(--highlight); }