@layer reset, layout, components, accents;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { overflow-x: clip; }
}

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

  /* Repo nav items */
  .repo-nav-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    min-height: 50px;
    text-decoration: none;
    color: var(--primary);
    font-family: var(--font-mono);
    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; }

  .tag-message {
    font-family: var(--font-mono);
    padding: 1rem;
    margin: 0 1rem 1rem;
    background: var(--highlight);
    border-radius: 6px;
    white-space: pre-wrap;
    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-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 layout */
  .commit-graph-layout {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
  }

  .commit-graph-svg {
    flex-shrink: 0;
    max-width: 12rem;
    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-right: 1rem;
    min-width: max-content;
    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);
  }

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

  /* 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 { width: 1rem; height: 1rem; flex-shrink: 0; }

  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: 0 1rem .75rem; 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 {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    min-height: 50px;
    width: 100%;
    text-align: left;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-mono);
    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); }

  /* First span grows; truncates on overflow */
  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);
  }

  /* Clone rows: URL animates on copy */
  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);
  }

  /* Branch/tag rows: remaining spans fixed right */
  details ul li a span:not(:first-child) { flex-shrink: 0; color: var(--secondary); }
}

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