/* capabilities.html (/capabilities) — full per-op catalog, styled to match
platform.html. Body has class="platform", so the palette (--text1..4,
--border, --border-hi, --panel, --surface) and the .op-spine / .op-section /
.op-rail primitives are all inherited from platform.css; this file adds only
what the catalog needs on top. No topbar: the monolith mark is the link
home, same as /platform.
The --accent / --accent-bar / --accent-line family this file used to name is
GONE, and deliberately: /platform's surface is monochrome by design — the
spine carries the structural rail, so the chromatic accent and the geometry
that came with it (eyebrow bars, left-accent card borders) were removed with
it. This file kept referencing the tokens after they were deleted, which is
a silent failure rather than a loud one: an undefined var() with no fallback
is invalid at computed-value time, so `color` quietly INHERITED and every
emphasis in this file — the stat figures, operation names, domain counts,
inline code, search hits — rendered as whatever its parent happened to be.
Non-inherited properties took their initial value instead, so the domain
hover border fell back to currentColor (near-white, not a faint rule) and
the linked-row marker bar computed to `none` and never drew at all.
Emphasis here now uses platform.css's own convention, the one its `.accent`
table cells already encode: --text1 for the emphasised run, --text3 for the
metadata beside it, weight carrying the difference where colour alone is not
enough. Do not reintroduce an --accent token without changing /platform with
it — the two pages share a spine and a ticker and must read as one surface.
Mono is 'IBM Plex Mono' here, as it is on / and /platform. This file used to
ask for JetBrains Mono, which is a real face in fonts.css and so really did
render — the catalog was set in a different typeface from the two pages it
sits between, for no reason anyone had decided on. It is a leftover from the
pre-.platform _caps.html, not a catalog-specific role. */
/* No .page override on purpose. platform.css sets max-width:var(--max) with a
* fluid var(--pad) gutter; this page used to hardcode 1100px/32px, which put
* the monolith and the spine at a different x than /platform and drifted
* further as the viewport changed. Toggling between the two pages moved them.
* Inheriting keeps both pinned to the same place at every width. */
/* ── dense section rail ──
Indexes every stop on the page in document order — both tier headings and
all 32 cards, 34 ticks — so rail 01 is the MCP surface rather than the first
tier-2 domain. 34 ticks at platform's 22px pitch would overflow a laptop
viewport, hence 14px (~476px tall). Ticks and hover flyout are otherwise
platform.css's. */
.platform .op-rail--dense { gap: 0; }
.platform .op-rail--dense .op-rail-item { height: 14px; text-decoration: none; }
.platform .op-rail--dense .op-rail-n { font-size: .6rem; min-width: 13px; }
/* Rail entries are scroll targets; clear the heading above them. Operation
rows too — /capabilities#ldap_search should land the row in view, not flush
against the viewport edge. */
.platform .op-domain { scroll-margin-top: 20px; }
.platform .tool-row { scroll-margin-top: 90px; }
/* :target covers a cold inbound link; .is-linked covers in-page jumps from the
rail or `/`, since pushState changes the URL without activating :target. */
.platform .tool-row:target,
.platform .tool-row.is-linked {
background: rgba(232, 228, 221, 0.05);
box-shadow: inset 2px 0 0 var(--text1);
}
/* ── rail opens into a table of contents ──
At rest it is the numeric tick column. On hover or keyboard focus it opens
leftward and shows every title at once, instead of one tooltip at a time.
34 stops is a lookup index, not a progress bar: before you know Active
Directory is 32, finding it means hovering numbers until the label appears. */
.platform .op-rail--dense:hover,
.platform .op-rail--dense:focus-within {
background: var(--bg);
border: 1px solid var(--border-hi);
border-radius: 4px;
padding: 10px 8px;
box-shadow: 0 10px 44px rgba(0, 0, 0, .6);
}
.platform .op-rail--dense:hover .op-rail-item,
.platform .op-rail--dense:focus-within .op-rail-item { height: 17px; }
/* The per-item flyout becomes a flat row in the open list — no box each. */
.platform .op-rail--dense:hover .op-rail-lbl,
.platform .op-rail--dense:focus-within .op-rail-lbl {
position: static;
transform: none;
opacity: 1;
background: none;
border: 0;
box-shadow: none;
padding: 0;
display: flex;
align-items: baseline;
gap: 7px;
}
/* Title before count, so a row reads "ACTIVE DIRECTORY · 11 ops 32 —". */
.platform .op-rail--dense .op-rail-lbl .lt { order: 1; }
.platform .op-rail--dense .op-rail-lbl .le { order: 2; margin-top: 0; }
.platform .op-rail--dense:hover .op-rail-lbl .lt,
.platform .op-rail--dense:focus-within .op-rail-lbl .lt { font-size: .72rem; }
.platform .op-rail--dense:hover .op-rail-lbl .le,
.platform .op-rail--dense:focus-within .op-rail-lbl .le {
font-size: .55rem; letter-spacing: .1em; color: var(--text3);
}
/* The count is a fixed column, not elastic. Each row is right-aligned as a
* whole, so a count that ranges from "1 OP" to "10 TOOLS" was pushing every
* title to its own x — the titles read ragged because this was fluid. Fixed
* width and left-aligned: the titles get a constant right edge, and the count
* keeps a constant gap from its own title instead of drifting away from it.
* Group rows are exempt — their .le carries the label itself. */
.platform .op-rail--dense:hover .op-rail-item:not(.is-group) .le,
.platform .op-rail--dense:focus-within .op-rail-item:not(.is-group) .le {
min-width: 56px; /* widest is "10 TOOLS" ≈ 49px; min- not width, so a
fallback font degrades one row rather than clipping */
text-align: left;
font-variant-numeric: tabular-nums;
}
/* The two tier entries become the group labels. Their eyebrow already reads
"mcp surface" / "operations catalog", so the long title is redundant here. */
.platform .op-rail--dense:hover .is-group .lt,
.platform .op-rail--dense:focus-within .is-group .lt { display: none; }
/* Group rows keep the same 17px height as every other row. Giving them extra
* height to breathe broke the vertical rhythm at exactly the two places the
* eye is already crossing a boundary, so the list snagged there. They stay
* distinct by weight and letter-spacing below, not by spacing. */
.platform .op-rail--dense:hover .is-group .le,
.platform .op-rail--dense:focus-within .is-group .le {
color: var(--text3); font-size: .58rem; letter-spacing: .18em;
}
/* ── persistent orientation ──
The domain heading scrolls out of sight inside the longer sections, leaving
a lit tick as the only context. One line, bottom-right above the ticker, no
chrome — it names where you are, it is not a toolbar. Hidden while the rail
is open, since the list already says it. */
/* Lives inside .anchor-ticker-inner, not floating above it.
*
* Free-floating at bottom:52px it sat inside the 60px strip .op-spine::before
* overhangs into (that overhang exists precisely to terminate on the ticker's
* top rule), so the spine ran straight through the text. It also answered to
* no column and had no background, so page content scrolled behind it.
*
* In the bar it inherits the ticker's grid and opaque background, and sits
* below where the spine ends. margin-left:auto pins it to the bar's right end
* WITHOUT moving the anchor stamps, which must stay at the left content edge
* exactly as they sit on /platform. */
.platform .op-rail-now {
display: flex; align-items: baseline; gap: 8px;
margin-left: auto;
white-space: nowrap;
min-width: 0;
overflow: hidden;
user-select: none;
}
.platform .op-rail-now .n { font-size: .6rem; color: var(--text3); font-variant-numeric: tabular-nums; }
.platform .op-rail-now .t { font-size: .68rem; color: var(--text2); letter-spacing: .04em; }
.platform .op-rail-now .e { font-size: .55rem; color: var(--text3); letter-spacing: .1em; text-transform: uppercase; }
/* Below the rail's own cutoff there is no rail to orient against, and the bar
* needs its width for the anchor stamps. */
@media (max-width: 1180px) {
.platform .op-rail-now { display: none; }
}
/* ── hero ──
The nav trunk descends the left gutter to meet the spine, so the hero and
stat bar move out of its path. 92px is not arbitrary: it is where an
.op-section's own content begins (20px section padding + 48px number column
+ 24px gap), so the hero lands in the same column as every domain card
below it and the page reads as one text column from the title down. */
.platform .caps-hero,
.platform .stat-bar { padding-left: 92px; }
@media (max-width: 720px) {
.platform .caps-hero,
.platform .stat-bar { padding-left: 0; }
}
/* 44px + the nav's own 12px bottom margin = 56px clear of the last nav row,
* matching the 56px an .op-section leaves above its first line on /platform.
* At 8px the title crowded the "capabilities" row directly above it. */
.caps-hero { margin: 44px 0 56px; }
/* .caps-hero-eyebrow removed with its markup — the eyebrow appears only on the
* spine's .op-section-eyebrow now, not above the h1. (It carried an accent bar
* once; the bar went with the accent, and .op-section-eyebrow is plain
* letter-spaced mono today.) */
.caps-hero-title {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: clamp(1.4rem, 3.4vw, 1.9rem);
font-weight: 500;
color: var(--text1);
line-height: 1.18;
letter-spacing: -0.005em;
margin-bottom: 14px;
}
.caps-hero-sub {
font-size: 0.95rem;
color: var(--text2);
line-height: 1.7;
max-width: 760px;
}
.caps-hero-sub code {
color: var(--text1);
font-size: 0.86em;
}
/* ── stat bar ── */
.stat-bar {
display: flex;
gap: 28px;
margin: 32px 0 12px;
flex-wrap: wrap;
}
.stat-item { display: flex; flex-direction: column; gap: 3px; }
.stat-num {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 1.4rem;
font-weight: 500;
color: var(--text1);
letter-spacing: -0.005em;
line-height: 1;
}
.stat-label {
font-size: 0.7rem;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.stat-sep {
width: 1px;
background: var(--border);
align-self: stretch;
flex-shrink: 0;
}
/* ── tier body copy ──
The old .caps-tier / .caps-tier-2 marker headings are gone: the two tiers are
now numbered .op-section chapters on the shared spine, so the accent-bar
eyebrow comes from platform.css's .op-section-eyebrow instead. */
.caps-tier-desc {
margin: 8px 0 28px;
color: var(--text2);
font-size: 0.92rem;
line-height: 1.6;
max-width: 760px;
}
.caps-tier-desc code {
color: var(--text1);
font-size: 0.86em;
}
/* No runner pill. It marked only 2 of 198 ops as "requires a connected
* runner", which was wrong twice over: both run in-VM as well, and the
* vantage-point rationale is true of every primitive — a runner in another
* network changes the vantage for all of them. /platform states that at the
* page level, which is the right altitude for it. */
/* ── domain blocks ── */
.domain {
margin-bottom: 36px;
padding: 18px 20px 12px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--panel);
transition: border-color 0.18s;
}
.domain:hover { border-color: var(--border-hi); }
.domain-header {
display: flex;
align-items: baseline;
gap: 12px;
margin: 0 0 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.domain-label {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 0.84rem;
color: var(--text1);
letter-spacing: 0;
flex: 1;
font-weight: 500;
/* This is an h3 (see capabilities.html) — the 23 domain sections had no
heading level at all, leaving the site's largest page with no document
outline under its two h2 section titles. font-size/weight above already
beat the UA defaults; margin is the one that would shift the flex
baseline, so zero it explicitly. */
margin: 0;
}
.domain-count {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 0.7rem;
/* Metadata, not emphasis. It shared the header baseline with .domain-label
* and, while both were resolving to the inherited text1, read at the same
* weight as the domain's name — two things claiming to be the heading. The
* count is the same role the rail's .le carries, and takes the same tone. */
color: var(--text3);
letter-spacing: 0.04em;
}
/* ── tool rows ──
Three columns: name | description | taxonomy chip. Grid rather than flex so
the chip gets a reserved track instead of trailing whatever the sentence
happened to end on. The track is a FIXED width, not auto: each row is its own
grid container, so an auto track would size to that row's own chip and the
column would still wobble line to line. 96px fits the longest chip
("flaw-specific"). Rows with no chip (all of tier 1) just leave it empty. */
.tool-row {
display: grid;
grid-template-columns: 230px 1fr 96px;
column-gap: 20px;
align-items: baseline;
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.025);
}
.tool-row:last-child { border-bottom: none; }
.tool-row > .tool-tag { grid-column: 3; justify-self: end; }
.tool-name {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 0.8rem;
color: var(--text1);
}
.tool-desc {
font-size: 0.85rem;
color: var(--text3);
line-height: 1.55;
}
.tool-desc code {
color: var(--text1);
font-size: 0.92em;
}
.tool-tag {
font-size: 0.65rem;
color: var(--text3);
border: 1px solid var(--border);
padding: 1px 6px;
border-radius: 3px;
font-family: 'IBM Plex Mono', ui-monospace, monospace;
white-space: nowrap;
flex-shrink: 0;
}
.tool-tag.taxo-protocol {
color: #8aa0c8;
border-color: rgba(138, 160, 200, 0.4);
background: rgba(138, 160, 200, 0.06);
}
.tool-tag.taxo-technique {
color: #9fb89a;
border-color: rgba(159, 184, 154, 0.4);
background: rgba(159, 184, 154, 0.06);
}
.tool-tag.taxo-flaw {
color: #c4a373;
border-color: rgba(196, 163, 115, 0.4);
background: rgba(196, 163, 115, 0.06);
}
/* No footer. Its border-top read as a stray rule across the page, and its
* ~170px of margin+padding sat between the spine and the ticker, stopping the
* spine's ::before overhang well short. With the spine last inside .page, that
* overhang now terminates at the ticker exactly as it does on /platform. */
/* ── jump-to (`/`) ──
One line over the page, not a filter: nothing on the catalog is hidden or
reordered, so native browser Find still covers the whole thing. */
.caps-jump {
position: fixed; inset: 0; z-index: 60;
background: rgba(0, 0, 0, .55);
display: flex; justify-content: center; align-items: flex-start;
padding-top: 18vh;
}
.caps-jump[hidden] { display: none; }
.caps-jump-box {
width: min(560px, calc(100vw - 40px));
background: var(--surface);
border: 1px solid var(--border-hi);
border-radius: 5px;
box-shadow: 0 24px 70px rgba(0, 0, 0, .65);
overflow: hidden;
}
.caps-jump-input {
width: 100%; box-sizing: border-box;
background: none; border: 0; outline: none;
padding: 14px 16px;
color: var(--text1);
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 0.9rem;
letter-spacing: 0.01em;
}
.caps-jump-input::placeholder { color: var(--text3); }
.caps-jump-list { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.caps-jump.has-hits .caps-jump-list { border-top: 1px solid var(--border); }
.caps-jump-hit {
display: flex; align-items: baseline; gap: 12px;
padding: 7px 16px; cursor: pointer;
font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
.caps-jump-hit .h-n { font-size: 0.78rem; color: var(--text1); }
.caps-jump-hit .h-m {
font-size: 0.62rem; color: var(--text3);
margin-left: auto; text-align: right;
text-transform: uppercase; letter-spacing: 0.08em;
}
/* No colour split between domain hits and operation hits any more: the
* override that existed here said text1 while everything else said --accent,
* and with the accent gone the two were the same declaration written twice.
* The meta column already tells them apart — a domain row reads "11 tools",
* an operation row names the domain it lives in. */
.caps-jump-hit.on { background: rgba(232, 228, 221, 0.07); }
/* ── responsive ── */
@media (max-width: 720px) {
.domain { padding: 14px 14px 8px; }
}
@media (max-width: 600px) {
/* Single column: name, description and chip stack, chip back to the left. */
.tool-row { grid-template-columns: 1fr; row-gap: 3px; }
.tool-row > .tool-tag { grid-column: 1; justify-self: start; }
.stat-sep { display: none; }
}