/* The repo dock at the end of page A (markup: tools/agentic-components/repo-dock.html), top to bottom: Karam's small photo, a line, Claude's avatar, a line, ONE big official GitHub mark, a line into a bus that branches into columns (3 when the dock is at least 1060 px wide, 2 from 600 px, otherwise 1; measured on the dock itself, so a card is never narrower than about 300 px) of repo cards. A card is one line: the small GitHub mark, the repo name (cut with an ellipsis when long, the full name in its tooltip) and, at the right end, its tags (Private shrinks to its lock on a narrow card). The mark grows and the line into the card brightens on hover and keyboard focus (transform and opacity only). A project group node (GourmetAI, eSIMs5G, Ka2s, personal-portfolio) is the same card with the project's icon, its name and "N repos" instead of a repo name, never a link; hover, focus and tap swap the tags for the caption "Private repos, N". */
.agentic-repos-end { margin: 8px 0 56px; } /* space around the end of the page */
.repo-dock { container: repodock / inline-size; --gap: 14px; --row-gap: 18px; --drop: 30px; text-align: center; } /* the dock measures its own width to choose the columns; the gaps and the length of the first line */
.repo-dock .tile-label { text-align: left; } /* the label stays at the left */
.repo-chain { display: grid; justify-items: center; margin-top: 22px; } /* photo, Claude, GitHub in one column */
.repo-chain-item { position: relative; display: grid; place-items: center; } /* a tile with its caption beside it */
.repo-chain .agentic-pair-tile { width: 64px; height: 64px; border-radius: 18px; } /* photo and avatar: small and equal */
.repo-mascot svg { width: 40px; height: 40px; } /* the official Claude Code mark, unmodified */
.repo-github-mark { width: 96px; height: 96px; fill: var(--paper); } /* the one big official GitHub mark, unmodified */
.repo-chain-name { position: absolute; top: 50%; left: calc(100% + 14px); color: var(--muted); font: 600 13px var(--body); transform: translateY(-50%); white-space: nowrap; } /* who is who, beside each tile */
.repo-chain .agentic-line { position: static; width: 2px; height: 34px; background: linear-gradient(180deg, rgb(217 119 87 / 0.85), rgb(243 239 230 / 0.35)); } /* the vertical links of the chain */
.repo-tree { --cols: 1; --col: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); position: relative; padding-top: var(--drop); } /* the width of one column, and the room for the first lines */
.repo-tree .repo-bus { position: absolute; top: 0; left: calc(var(--col) / 2 - 1px); right: calc(var(--col) / 2 - 1px); width: auto; height: 2px; background: rgb(217 119 87 / 0.5); } /* the bus: from the middle of the first column to the middle of the last */
.repo-dock .repo-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--row-gap) var(--gap); margin: 0; padding: 0; text-align: left; } /* the cards in columns, newest first, left to right and down */
.repo-card { position: relative; display: flex; } /* anchors the line above a card; the card fills its cell, so a row of cards has one height */
.repo-branch { position: absolute; top: auto; right: auto; bottom: 100%; left: calc(50% - 1px); width: 2px; height: var(--row-gap); background: var(--accent); opacity: 0.45; } /* the line into a card from the one above it */
.repo-card:nth-child(1) .repo-branch { height: var(--drop); } /* the first row's lines run up to the bus */
.project-more .repo-grid { padding-top: var(--row-gap); } /* the folded grid keeps the same spacing, and its first lines stay inside it */
.project-more .repo-card:nth-child(-n + 3) .repo-branch { height: var(--row-gap); } /* the folded grid continues the columns, so its first lines are short */
.repo-link { flex: 1; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; height: 52px; padding: 0 10px; border: 1px solid var(--edge); border-radius: 14px; background: rgb(255 255 255 / 0.03); color: var(--paper); text-decoration: none; transition: border-color 0.2s, background 0.2s; } /* one card, one line, always: mark, name, tags at the right end */
.repo-mark { flex: none; width: 18px; height: 18px; fill: var(--paper); transition: transform 0.2s ease-out; } /* the small official GitHub mark at the start of the card */
.repo-name { flex: 1 1 0; min-width: 0; overflow: hidden; font: 600 14px/1.25 var(--body); text-overflow: ellipsis; white-space: nowrap; } /* the repo's name, beside its mark; a long one ends in an ellipsis, never a break in the middle of a word */
.repo-link .project-tags { margin-left: auto; } /* the tags sit at the right end of the row */
.repo-card-private { cursor: default; } /* a private repo is a name alone, never a link */
.repo-card-private .repo-mark { opacity: 0.5; } /* its mark is quieter */
a.repo-link:hover, a.repo-link:focus-visible, a.repo-link:active, .repo-group-node:hover, .repo-group-node:focus, .repo-group-node:active { border-color: rgb(217 119 87 / 0.7); background: rgb(217 119 87 / 0.08); } /* hover, keyboard focus and tap: the card lights up */
a.repo-link:focus-visible, .repo-group-node:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } /* a clear focus outline, inside the card so nothing clips it */
a.repo-link:hover .repo-mark, a.repo-link:focus-visible .repo-mark, a.repo-link:active .repo-mark, .repo-group-node:hover .repo-group-icon, .repo-group-node:focus .repo-group-icon, .repo-group-node:active .repo-group-icon { transform: scale(1.4); } /* and its mark grows */
.repo-card:has(a.repo-link:hover) .repo-branch, .repo-card:has(a.repo-link:focus-visible) .repo-branch, .repo-card:has(.repo-group-node:hover) .repo-branch, .repo-card:has(.repo-group-node:focus) .repo-branch { opacity: 1; } /* the line into it brightens */
.repo-group-icon { flex: none; width: 22px; height: 22px; border-radius: 6px; object-fit: cover; transition: transform 0.2s ease-out; } /* a project group node: the project's own icon (its home card icon, or Karam's photo), growing like the GitHub mark on hover and focus */
.repo-group-node .repo-name { flex: 0 1 auto; } /* the count follows the name directly; a long name still ends in an ellipsis */
.repo-count { flex: none; color: var(--muted); font: 600 13px/1 var(--body); white-space: nowrap; } /* how many repos the group holds, quiet, never cut */
.repo-caption { display: none; flex: 0 1 auto; min-width: 0; margin-left: auto; overflow: hidden; color: var(--paper); font: 600 13px/1 var(--body); text-overflow: ellipsis; white-space: nowrap; } /* the caption "Private repos, N" waits for hover, focus or a tap */
.repo-group-node:hover .project-tags, .repo-group-node:focus .project-tags, .repo-group-node:active .project-tags { display: none; } /* the caption takes the tags' place, so the name and the count stay whole and no other card moves */
.repo-group-node:hover .repo-caption, .repo-group-node:focus .repo-caption, .repo-group-node:active .repo-caption { display: block; } /* caption shown */
@keyframes repo-caption-fade { from { opacity: 0; } to { opacity: 1; } } /* the caption fades in as it takes the tags' place */
.repo-group-node:hover .repo-caption, .repo-group-node:focus .repo-caption, .repo-group-node:active .repo-caption { animation: repo-caption-fade 0.18s ease-out; } /* a short fade, so the swap is not a jump */
.repo-group-node { outline: none; } /* the clear outline below replaces the browser's own */
.repo-link:has(.repo-project-note) .repo-name { flex: 0 1 auto; } /* a repo with a project note: the note follows the name directly */
.repo-project-note { flex: 0 100 auto; min-width: 0; overflow: hidden; color: var(--muted); font: 600 13px/1 var(--body); text-overflow: ellipsis; white-space: nowrap; } /* the project's name (GPT-2 Game of Thrones for LLMs), quiet, cut with an ellipsis before anything else */
@container tagrow (max-width: 309px) { .repo-project-note { display: none; } } /* a card under 310 px drops the project note; the GPT-2 card (316 px) keeps it on a 390 px phone and at 768 px */
.repo-note .repo-more-count { flex: 1; display: flex; align-items: center; justify-content: center; height: 52px; border: 1px dashed var(--edge-hi); border-radius: 14px; color: var(--muted); font: 700 14px var(--body); } /* the tile for the repos that are counted but not named */
.repo-tree .project-more[data-open="true"] { margin-top: 0; } /* the opened cards follow the first grid at the same row spacing */
.repo-more-button { display: flex; margin: 18px auto 0; } /* the shared button, centred under the grid */
.repo-more-button[hidden] { display: none; } /* nothing to fold */
@container repodock (min-width: 600px) { /* two columns */
  .repo-tree { --cols: 2; } /* two columns */
  .repo-card:nth-child(-n + 2) .repo-branch { height: var(--drop); } /* two lines run up to the bus */
}
@container repodock (min-width: 1060px) { /* three columns, only when each card is a roomy 340 px or more */
  .repo-tree { --cols: 3; } /* three columns */
  .repo-card:nth-child(-n + 3) .repo-branch { height: var(--drop); } /* three lines run up to the bus */
}
@container tagrow (max-width: 399px) { .repo-card:has(.project-tag-now) .project-tag-year { display: none; } .repo-card:has(.project-tag-now) .project-tag-private { width: 26px; padding: 0; font-size: 0; } } /* a card under 400 px with Working drops its year pill and shows Private as its lock alone, so its name stays whole */
@container tagrow (max-width: 459px) { .repo-card:has(.project-tag-now) .project-tag-private { width: 26px; padding: 0; font-size: 0; } } /* a Working card under 460 px (the 3-column cards at 1440 px are 401 px) shows Private as its lock alone, so "personal-portfolio" stays whole; the lock keeps its title and spoken label "Private" */
.repo-legend { display: none; margin: 8px 0 0; color: var(--muted); font: 500 12px/1.4 var(--body); } /* the one-line key to the dot and the lock, only on the narrowest phones */
@media (max-width: 359px) { .repo-legend { display: block; } } /* a phone this narrow shows the Working tag as a dot, and a touch screen has no tooltip, so the key is printed */
@container tagrow (max-width: 279px) { .repo-card .project-tag-year { display: none; } } /* a very narrow card drops every year pill and keeps Working and the lock */
@container tagrow (max-width: 399px) { .repo-name { font-size: 13px; } } /* a card under 400 px sets its name a little smaller, so a Working card's name stays whole */
@container tagrow (max-width: 279px) { .repo-link { gap: 6px; padding: 0 8px; } .repo-card .project-tag-private { width: 24px; } } /* the very narrow cards give back a few pixels to the name */
@container tagrow (max-width: 339px) { .repo-link { gap: 6px; } .repo-card .project-tag-private { width: 24px; } } /* a card under 340 px tightens its gaps and gives the name a few more pixels (the lock is 24 px) */
@container tagrow (max-width: 299px) { .repo-card .working-word { display: none; } .repo-card .project-tag-now { position: absolute; top: 4px; right: 6px; align-items: flex-start; justify-content: center; width: 10px; padding: 0; border: 0; background: transparent; } .repo-card .project-tag-now::before { content: ""; width: 8px; height: 8px; margin-top: 1px; border-radius: 99px; background: currentColor; } } /* a card under 300 px shows the tag as a small dot of the accent colour in its top-right corner (a pill-high, 10 px wide box above the lock), which takes no row width, so no name is cut; the tooltip and spoken label stay "Working on it right now" */
@container tagrow (max-width: 279px) { .repo-group-node:hover .repo-count, .repo-group-node:focus .repo-count, .repo-group-node:active .repo-count { display: none; } } /* a very narrow group node hides its count while the caption (which names the count) is shown, so the name stays whole and the caption is not cut */
@media (max-width: 479px) { .repo-github-mark { width: 72px; height: 72px; } } /* phones: the big mark a little smaller */
@media (prefers-reduced-motion: reduce) { .repo-link, .repo-mark, .repo-group-icon, .repo-branch { transition: none; } .repo-group-node .repo-caption { animation: none; } html { scroll-behavior: auto; } } /* the mark still grows, but jumps instead of gliding; anchor jumps do not glide either */