/* Capstone bank — a faceted catalogue and a detail sheet. Trap: the sheet is a modal. Its open state also sets overflow:hidden on , so any path that hides the overlay must clear that too or the page underneath is left unscrollable. Trap: cards are uniform hairline on all four sides. Track, difficulty and status are said in words and glyphs inside the card — there is no per-track tint, and adding one would be the half-painted border the house rules forbid. */ /* The overlay, the extra facet row and the empty note are all toggled by the `hidden` attribute, and every one of them is also given a display by a class below. A class beats the attribute's UA default, so without this the sheet hangs open and empty on a page with no hash. */ [hidden] { display: none !important; } .vh { position: absolute; width: 1px; height: 1px; margin: -2px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .bank-head { margin: 18px 0 20px; } .bank-head h1 { font-size: var(--fs-title); } .bank-head .sub { max-width: 66ch; margin-top: 10px; font-size: var(--fs-md); line-height: 1.6; color: var(--muted-foreground); } /* ---------- controls ---------- */ .controls { padding: 16px 18px; border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--card); } .control-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .search { flex: 1 1 260px; } .search input { width: 100%; padding: 8px 12px; border: var(--hairline) solid var(--border); border-radius: var(--radius-sm); background: var(--background); color: var(--foreground); font: inherit; font-size: var(--fs-md); } .search input::placeholder { color: var(--muted-foreground); } .sort { display: flex; align-items: center; gap: 8px; } .sort-label { font-family: var(--label); font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); user-select: none; -webkit-user-select: none; } .sort select { padding: 8px 10px; border: var(--hairline) solid var(--border); border-radius: var(--radius-sm); background: var(--background); color: var(--foreground); font: inherit; font-size: var(--fs-sm); cursor: pointer; } .facets { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 14px; } .facets.extra { padding-top: 14px; border-top: var(--hairline) solid var(--border); } .facet-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .facet-name { font-family: var(--label); font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); user-select: none; -webkit-user-select: none; } .facet-opts { display: flex; flex-wrap: wrap; gap: 4px; } .facet-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: var(--hairline) solid var(--border); border-radius: 999px; background: var(--background); color: var(--foreground); font: inherit; font-size: var(--fs-xs); cursor: pointer; user-select: none; -webkit-user-select: none; transition: border-color .15s ease, background .15s ease; } .facet-chip:hover:not(:disabled) { border-color: var(--ring); } .facet-chip[aria-pressed='true'] { border-color: var(--ring); background: var(--muted); font-weight: 600; } .facet-chip:disabled { opacity: .4; cursor: not-allowed; } .facet-chip .n { font-family: var(--label); font-size: var(--fs-2xs); color: var(--muted-foreground); } .active-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; padding-top: 14px; border-top: var(--hairline) solid var(--border); } .active-label { font-family: var(--label); font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); user-select: none; -webkit-user-select: none; } .active-chips { display: flex; flex-wrap: wrap; gap: 4px; } .active-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: var(--hairline) solid var(--ring); border-radius: 999px; background: var(--muted); color: var(--foreground); font: inherit; font-size: var(--fs-xs); cursor: pointer; user-select: none; -webkit-user-select: none; } .active-chip .x { color: var(--muted-foreground); font-size: var(--fs-md); line-height: 1; } .active-chip:hover .x { color: var(--foreground); } .result-count { margin-top: 14px; font-family: var(--label); font-size: var(--fs-xs); color: var(--muted-foreground); } .result-count b { color: var(--foreground); } /* ---------- cards ---------- */ .bank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 22px; } /* The track heading spans the whole grid so the run of cards under it reads as one group rather than a stray full-width card. */ .track-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin-top: 10px; } .track-head .name { font-family: var(--label); font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--brand-ink); } .track-head .rule { flex: 1; height: var(--hairline); background: var(--border); } .track-head .n { font-family: var(--label); font-size: var(--fs-2xs); color: var(--muted-foreground); } .cap-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--card); color: inherit; text-decoration: none; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; } .cap-card:hover { border-color: var(--ring); transform: translateY(-2px); box-shadow: var(--shadow-soft); } .card-top { display: flex; align-items: center; gap: 8px; } .card-track { font-family: var(--label); font-size: var(--fs-2xs); letter-spacing: .05em; text-transform: uppercase; color: var(--muted-foreground); } .card-top .spacer { flex: 1; } .status { display: inline-flex; align-items: center; gap: 4px; font-family: var(--label); font-size: var(--fs-2xs); color: var(--muted-foreground); } /* One fixed advance for every state mark. ● ◐ ○ ◆ ▲ are not the same width in this face, so a bare glyph pushed the word beside it and cards sitting in a row disagreed on where "draft" or "core" began. Width, not the glyph's own advance, is what lines the words up. */ .g { display: inline-block; width: 1.15em; text-align: center; } .status .g { font-size: var(--fs-2xs); } .cap-card h2 { font-size: var(--fs-lg); line-height: 1.3; } .cap-card .summary { font-size: var(--fs-sm); line-height: 1.55; color: var(--muted-foreground); } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 10px; padding: 10px 0; border-top: var(--hairline) solid var(--border); border-bottom: var(--hairline) solid var(--border); } .stat { display: flex; flex-direction: column; gap: 2px; } .stat .k { font-family: var(--label); font-size: var(--fs-2xs); letter-spacing: .05em; text-transform: uppercase; color: var(--muted-foreground); } .stat .v { font-family: var(--display); font-size: var(--fs-lg); font-weight: 500; } .stat .v .u { font-family: var(--label); font-size: var(--fs-2xs); font-weight: 400; color: var(--muted-foreground); } /* A derived number, not one the author wrote. Said in the tooltip and by the lighter weight — never by hue alone. */ .stat.derived .v { color: var(--muted-foreground); } .card-meta { display: flex; flex-wrap: wrap; gap: 4px; } .card-meta .chip .g { font-size: var(--fs-2xs); } /* The course-fit marker, same idiom as .chip.done: a word plus a tick, never the tint on its own. */ .chip.fit { color: var(--brand-ink); border-color: color-mix(in srgb, var(--brand-ink) 40%, var(--border)); } .chip.fit::before { content: '✓'; } .card-foot { display: flex; align-items: flex-end; gap: 12px; margin-top: auto; } .card-foot .deliverable { flex: 1; font-size: var(--fs-xs); line-height: 1.45; color: var(--muted-foreground); } .card-foot .open-cue { font-family: var(--label); font-size: var(--fs-2xs); color: var(--brand-ink); white-space: nowrap; } .empty { margin-top: 26px; font-size: var(--fs-md); color: var(--muted-foreground); } .link-btn { border: 0; background: transparent; color: var(--brand-ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .bank-note { margin: 28px 0 8px; } /* ---------- contribute card ---------- */ /* The bank is generated from verification-capstones/*.md in a public repo, so the two ways to change it are a new file and a fix to an existing one. Both rows open a prefilled issue on that repo — real destinations, because a contribute card that goes nowhere is worse than none at all. Uniform hairline on all four sides; the accent lives inside, in the glyph discs. It takes the column's full width, like every other card in this flow — a card that stops short of the edge its neighbours share reads as a layout fault rather than a choice. The rows go two-up when there is room for them, which is what fills that width instead of one label adrift in it. Trap: the rows are pressable, so nothing in them may take a text selection. */ .contribute { margin: 24px 0 8px; padding: 18px 20px; border: var(--hairline) solid var(--border); border-radius: var(--radius); } .contribute h2 { margin: 0; font-size: var(--fs-md); font-weight: 500; color: var(--muted-foreground); } .contribute ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .contribute a { display: flex; align-items: center; gap: 12px; margin: 0 -8px; padding: 8px; border-radius: var(--radius); color: var(--foreground); text-decoration: none; user-select: none; } .contribute a:hover { background: var(--muted); } /* No destination supplied yet: the row still reads, but it is plainly not a control — dimmed, not a link, and its disc stays hairline on hover because there is no hover. */ .contribute .pending { display: flex; align-items: center; gap: 12px; margin: 0 -8px; padding: 8px; color: var(--muted-foreground); user-select: none; } .contribute .pending .g { color: var(--muted-foreground); } .contribute a:hover .g { border-color: var(--primary); } .contribute .g { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: var(--hairline) solid var(--border); border-radius: 50%; color: var(--brand-ink); transition: border-color .15s ease; } .contribute .g svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* max-width here is a line-length measure on a sentence, not a card edge — the card itself takes the column. */ .contribute .out { margin: 12px 0 0; max-width: 60ch; font-size: var(--fs-2xs); color: var(--muted-foreground); } /* ---------- detail sheet ---------- */ .overlay { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: center; padding: 40px 20px; overflow-y: auto; background: color-mix(in srgb, var(--foreground) 45%, transparent); } .sheet { position: relative; width: 100%; max-width: 760px; height: max-content; padding: 30px 34px 26px; border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-soft-lg); } .sheet-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: var(--hairline) solid var(--border); border-radius: var(--radius-sm); background: var(--background); color: var(--muted-foreground); font-size: var(--fs-xl); line-height: 1; cursor: pointer; user-select: none; -webkit-user-select: none; } .sheet-close:hover { color: var(--foreground); border-color: var(--ring); } .sheet-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-family: var(--label); font-size: var(--fs-2xs); letter-spacing: .05em; text-transform: uppercase; color: var(--muted-foreground); } .sheet-body h1 { font-size: var(--fs-3xl); margin: 10px 0; padding-right: 40px; } .sheet-summary { font-size: var(--fs-lg); line-height: 1.6; color: var(--muted-foreground); } .sheet-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 14px; margin: 20px 0; padding: 14px 0; border-top: var(--hairline) solid var(--border); border-bottom: var(--hairline) solid var(--border); } .sheet-stats .stat .v { font-size: var(--fs-2xl); } .facts { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 18px; margin-bottom: 22px; } .facts dt { font-family: var(--label); font-size: var(--fs-2xs); letter-spacing: .05em; text-transform: uppercase; color: var(--muted-foreground); padding-top: 2px; } .facts dd { font-size: var(--fs-md); line-height: 1.55; } .tags { display: flex; flex-wrap: wrap; gap: 4px; } .tag { padding: 2px 8px; border: var(--hairline) solid var(--border); border-radius: 999px; background: var(--background); font-family: var(--label); font-size: var(--fs-2xs); color: var(--muted-foreground); } /* The brief body, rendered at build time from the markdown. */ .sheet .body { font-size: var(--fs-md); line-height: 1.68; } .sheet .body > * + * { margin-top: 14px; } .sheet .body h2 { font-size: var(--fs-xl); margin-top: 26px; } .sheet .body h3 { font-size: var(--fs-lg); margin-top: 22px; } .sheet .body ul, .sheet .body ol { padding-left: 22px; display: grid; gap: 6px; } .sheet .body li { line-height: 1.6; } .sheet .body a { color: var(--brand-ink); text-underline-offset: 3px; } .sheet .body code { font-family: var(--label); font-size: .89em; padding: 2px 4px; border-radius: var(--radius-xs); background: var(--muted); } .sheet .body blockquote { padding: 10px 14px; border: var(--hairline) solid var(--border); border-radius: var(--radius-sm); background: var(--muted); color: var(--muted-foreground); } .sheet .body table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .sheet .body th, .sheet .body td { padding: 8px 10px; border: var(--hairline) solid var(--border); text-align: left; } .sheet .body th { font-family: var(--label); font-size: var(--fs-2xs); text-transform: uppercase; font-weight: 400; color: var(--muted-foreground); } .sheet .body hr { border: 0; border-top: var(--hairline) solid var(--border); } .sources { margin-top: 26px; padding: 14px 16px; border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--muted); } .sources h3 { font-size: var(--fs-md); margin-bottom: 8px; } .sources ul { padding-left: 20px; display: grid; gap: 6px; font-size: var(--fs-sm); line-height: 1.55; } .sources a { color: var(--brand-ink); text-underline-offset: 3px; } /* Cross-links: closed by default, the + is the affordance and flips to − via ::before so the summary's text never changes. The summary is chrome — it must never take a text selection — and the default disclosure marker is dropped because the sign carries the state. */ .similar { margin-top: 14px; } .similar summary { cursor: pointer; list-style: none; user-select: none; -webkit-user-select: none; font-family: var(--label); font-size: var(--fs-sm); color: var(--muted-foreground); width: fit-content; } .similar summary::-webkit-details-marker { display: none; } .similar summary::before { content: '+ '; } .similar[open] summary::before { content: '\2212\00a0'; } .similar summary:hover { color: var(--foreground); } .similar ul { margin-top: 8px; padding-left: 20px; display: grid; gap: 6px; font-size: var(--fs-sm); line-height: 1.55; } .similar a { color: var(--brand-ink); text-underline-offset: 3px; } .sheet-actions { margin-top: 24px; } .sheet-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; margin-top: 22px; padding-top: 14px; border-top: var(--hairline) solid var(--border); font-family: var(--label); font-size: var(--fs-2xs); color: var(--muted-foreground); } @media (max-width: 700px) { .overlay { padding: 0; } .sheet { max-width: none; min-height: 100%; border: 0; border-radius: 0; padding: 26px 18px 24px; } .facts { grid-template-columns: minmax(0, 1fr); gap: 4px; } .facts dt { margin-top: 10px; } } /* The whole card is one link, so a drag anywhere inside it is a mis-drag. The brief's prose lives in the sheet, which stays selectable. */ .cap-card, .cap-card *, .sort select, .sort option, .track-head { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }