/* Project tags and folded lists, shared by the home page and the repo dock on page A: refined small pills of one height (Working a soft accent, the year quiet and outlined, Private muted with a lock drawn in CSS), dark pills with their own fill on the colour panels so every tag keeps 4.5 : 1 contrast, and the "N more" button that opens the rest of the list in place. Built by scripts/project-tags.js (shared), project-list.js (home) and repo-dock.js (page A). */
.project-tags { display: inline-flex; flex: none; align-items: center; gap: 5px; white-space: nowrap; } /* the tag row: pills side by side, never wrapping inside */
.project-tag { --tag-ink: #d3cec4; --tag-edge: rgb(243 239 230 / 0.3); --tag-fill: transparent; position: relative; display: inline-flex; align-items: center; box-sizing: border-box; height: 22px; padding: 0 8px; border: 1px solid var(--tag-edge); border-radius: 99px; background: var(--tag-fill); color: var(--tag-ink); font: 500 12px/1 var(--mono); letter-spacing: 0; white-space: nowrap; } /* one pill: the year, quiet and outlined, on a dark surface */
.project-tag-now { --tag-ink: #f6c660; --tag-edge: rgb(242 181 68 / 0.5); --tag-fill: rgb(242 181 68 / 0.14); font-weight: 700; } /* Working: a soft accent */
.project-tag-private { --tag-ink: #c2bdb3; --tag-edge: rgb(243 239 230 / 0.38); padding-left: 22px; border-style: dashed; } /* Private: muted, dashed, with room for the lock */
.project-tag-private::before { content: ""; position: absolute; left: 9px; top: calc(50% - 1px); width: 8px; height: 6px; border-radius: 1px; background: currentColor; } /* the lock's body */
.project-tag-private::after { content: ""; position: absolute; left: 10.5px; top: calc(50% - 5px); width: 5px; height: 4px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 3px 3px 0 0; } /* the lock's shackle */
.panel .project-tag { --tag-ink: var(--world-on-color); --tag-edge: transparent; --tag-fill: rgb(0 0 0 / 0.1); } /* on a colour panel: a faint dark fill under the panel's own text colour (dark text on the light worlds) */
.world-esims5g .project-tag, .world-ka2s .project-tag, .world-gpt2 .project-tag { --tag-fill: rgb(0 0 0 / 0.34); } /* the worlds with white text: a darker fill, so the tags keep 4.5 : 1 */
.panel .project-tag-now { --tag-ink: var(--world-background); --tag-fill: var(--world-on-color); } /* Working on a panel: the panel's colours swapped */
.world-esims5g .project-tag-now, .world-ka2s .project-tag-now, .world-gpt2 .project-tag-now { --tag-ink: var(--world-deep); } /* Working on a white-text world: the panel's deep shade on white, so it keeps 4.5 : 1 */
.panel .project-tag-private { --tag-edge: var(--world-on-color); } /* Private on a panel: a dashed edge in the panel's text colour */
.work-card.world-msc .project-tag { --tag-ink: #f2fff8; --tag-edge: transparent; --tag-fill: rgb(0 0 0 / 0.34); } /* the green M.Sc. card: white text on a dark fill */
.repo-card, .panel-top, .work-card-head { container: tagrow / inline-size; } /* these rows measure themselves, so a narrow one can show Private as a lock alone */
.panel-top { flex-wrap: wrap; row-gap: 8px; } /* the label stays on one line; only in the very narrowest case do the tags drop below it */
.panel-top .project-tags { margin-left: auto; } /* on a panel the tags sit at the right end of the top line */
.work-card-head { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; } /* a card's name with its tags at the right end */
.work-card-head h3 { flex: 1 1 0; min-width: 0; } /* the name takes what the tags leave, and wraps inside its own space */
.project-more { display: grid; grid-template-rows: 0fr; margin-top: 0; visibility: hidden; opacity: 0; } /* the folded cards: no height while closed */
.project-more > * { min-height: 0; overflow: hidden; } /* what is inside shrinks to nothing with its row */
.project-more[data-open="true"] { grid-template-rows: 1fr; margin-top: 14px; visibility: visible; opacity: 1; } /* open: the cards take their place */
.project-more-button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 18px; padding: 8px 20px; border: 1px solid var(--ink-line); border-radius: 99px; background: var(--ink-raised); color: var(--paper); font: 600 15px var(--body); cursor: pointer; } /* the real button, at least 44 px tall */
.project-more-button::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); } /* a small arrow drawn in CSS */
.project-more-button[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); } /* pointing up when open */
.project-more-button[hidden] { display: none; } /* nothing to fold */
.project-more-button:hover { border-color: var(--amber); } /* a quiet hover cue */
.project-more-button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; } /* keyboard focus */
@media (prefers-reduced-motion: no-preference) { /* a short height and fade, only when allowed */
  .project-more { transition: grid-template-rows 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease, visibility 0s linear 0.3s; } /* closing waits for the fade */
  .project-more[data-open="true"] { transition-delay: 0s; } /* opening starts at once */
}
@media (max-width: 760px) { .project-tag { padding: 3px 9px; } .project-tag-private { padding-left: 25px; } } /* phones: the tags stay at 12 px */
@container tagrow (max-width: 339px) { /* a narrow row: Private shrinks to its lock, so the tags never take a second line */
  .project-tag-private { width: 26px; padding: 0; font-size: 0; } /* the lock alone (the word stays for screen readers and as a tooltip) */
}