/* Repo listing — owned by views/index.html */

/* ---- Grid variant (.repo-row) ------------------------------------------
   minmax(0, …) lets the fr tracks shrink below their min-content width;
   bare `2fr` is minmax(auto, 2fr), so one long unbroken repo name would
   hold the track open and overflow the row. */
.repo-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
  gap: 1rem;
  align-items: center;
}
.repo-name a {
  color: var(--fg);
  font-weight: 600;
  /* `anywhere` (unlike `break-word`) also lowers min-content width, which
     is what actually lets the track shrink. */
  overflow-wrap: anywhere;
}
.repo-name a:hover { color: var(--accent); }
.repo-owner {
  display: inline-block;
  margin-left: .5rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  background: var(--bg-subtle, rgba(127, 127, 127, .15));
  color: var(--fg-subtle);
  font-size: .7rem;
  font-weight: 500;
  vertical-align: middle;
}
.repo-desc {
  color: var(--fg-muted);
  font-size: .85rem;
  overflow-wrap: anywhere;
}
.repo-meta {
  color: var(--fg-subtle);
  font-size: .8rem;
  text-align: right;
  overflow-wrap: break-word;
}

@media (max-width: 640px) {
  .repo-row {
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
  }
  .repo-meta { text-align: left; }
}

/* ---- Table variant (.table-repos) --------------------------------------
   Each section is its own <table>. Fixed layout with shared percentages
   keeps the columns aligned across sections. Two requirements:

   - The table needs a non-auto width. Without it, browsers fall back to
     auto layout (CSS 2.1 §17.5.2.1), which sizes columns from content
     per table and produces the cross-section drift.
   - The percentages must sum to 100%.

   col-meta at 17% fits "2026-09-03 15:04" on one line down to roughly a
   900px viewport. Narrower than that, the cell wraps at the space between
   date and time. This only works because the cell isn't `nowrap`:
   overflow-wrap never applies where white-space forbids wrapping. */
.table-repos {
  table-layout: fixed;
  width: 100%;
}
.table-repos .col-repo { width: 25%; }
.table-repos .col-desc { width: 58%; }
.table-repos .col-meta { width: 17%; }
.table-repos td:last-child { white-space: normal; }

/* Only the full header labels are shown. The narrow layout below hides the
   header row visually, so the short labels are no longer used; delete
   .label-short from the markup and this rule can go. */
.table-repos .label-short { display: none; }

/* Below 640px, columns are dropped and each row is stacked:

     name ............ date
     description

   Once nothing sits side by side, cross-section alignment no longer
   matters. The header is hidden visually but stays in the accessibility
   tree. Changing `display` on table elements can remove their implicit
   table roles in some engines, so add role="table" / "row" / "cell" in
   the markup if screen-reader semantics matter. */
@media (max-width: 640px) {
  .table-repos,
  .table-repos tbody,
  .table-repos td {
    display: block;
    width: auto;
  }
  .table-repos thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .table-repos tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "repo meta"
      "desc desc";
    gap: .25rem .75rem;
    padding: .6rem 0;
  }
  .table-repos td:nth-child(1) { grid-area: repo; }
  .table-repos td:nth-child(2) { grid-area: desc; }
  .table-repos td:nth-child(3) {
    grid-area: meta;
    text-align: right;
    /* Safe to keep on one line here: the `auto` track sizes to fit it. */
    white-space: nowrap;
  }
}