/* =============================================================================
Parts: one table, the rail of controls beside it, and the few things
page.css does not already do.
WHAT THE PAGE IS. A judge lands here to find a part and leave for the
Registry. Since 19 October 2026 the table is the collection as the Registry
holds it: thirty-one published parts and two drafts, each published row a
link, in seven groups that climb the assembly ladder; under it the eleven
parts ours are built on, and the references. The controls used to be a frosted track pinned over the table
and are now a panel in the left column under the contents rail. page.css
already owns the disclosure (.disclose), the contents rail and the
callouts; this file owns the rail panel, the table, the marks in it and
the key under it.
THE TABLE READS LEFT TO RIGHT in the order a judge needs: the part's name
exactly as the Registry spells it, the link off to its entry (or the quiet
word that says why there is none), what it is, what documentation its entry
carries, and the chevron that opens one sentence of meaning. Five columns,
and no length: a sixth column pushed the table into a sideways scroll on a
laptop. Basic or composite is the first word of that sentence. The group is
not a column either: it is the section the row sits in, named once above
it with its assembly level. A sort takes those headers away, so each row
then carries its group under its name.
THE REGISTRY LINK IS THE POINT OF THE PAGE, so it is the only coloured,
raised, pressable-looking thing in a row: a green capsule with the
accession and an arrow. Everything else is set in ink and grey, the
evidence capsules included, so nothing competes with it. Kit and New are
deliberately quiet: they are not links and must not read as though they
were.
COLOUR MARKS THE HALF OF THE SYSTEM, not the group: blue for the light
circuit and the cassettes it switches, green for the protectant side,
slate for the kit elements and the designs, amber for the two whole
devices. Seven groups and four of the five pipeline colours, because the
colour sorts the collection instead of labelling each group. The documentation capsules
stay out of that scheme: they are grey with one green dot where a
measurement exists, so nothing in a row competes with the link.
APPLE SURFACES, the same ones engage.css gives the Engagement pages: one
white card at 24px with a hairline and a long soft shadow, hairline rules
at 6-7% black and no vertical rules anywhere, a frosted header row, 15px
text at 1.6, section headers with air above them, and colour used once.
The 11 October stripes and 2px coloured rules are gone with the grey
bands they replaced.
NOTHING IN A ROW WRAPS. Every cell is nowrap and the table is auto-layout,
so each column is exactly as wide as its longest entry; where the card is
too narrow for the lot it scrolls sideways. With five columns the table
wants about 975px, so 85rem is the width above which the whole of it fits
the card: that is where the card stops being a scroller and the header row
can pin to the window.
HOUSE RULES THIS FILE OBEYS
1. One white ground, and that is the whole table: no grey band behind a
module header, no grey panel behind an open function sentence. A module
is marked by air, a small coloured dot and a hairline; an open row and
its sentence share a 4% leaf wash, not a grey one.
2. Argument flat, evidence folded. Both tables are flat. What a row does
not need in order to be found and followed to the Registry is not on the
page at all now; the references are the one fold left.
3. No usage hints. The panel has a search field and chips, the table has a
chevron at the head of every row, and not one sentence tells anyone to
use them. The count under the chips reports a result, which is a result
and not an instruction.
WIDTH. The frame opens to 1480px and the rail gives up 2rem of the house
15rem; every pixel they give up is a pixel the table can use to keep a
category on one line. The body column opens to 70rem. Nothing is
ever laid out wider than the box it sits in, which is what used to push
the page to 167,000px on a phone.
COLOUR. Four documentation capsules are earned by rows in the table, and
they are one grey capsule with a four-step dot: green for a measurement,
dark grey for a build, light grey for a design, a hollow ring for an entry
that carries neither. Beside them the table carries the five IHP pipeline
colours as a dot and an eyebrow only. A status colour is never a
background.
========================================================================== */
.parts .pagebody { max-width: 70rem; }
/* A fold can be the target of a link, from the contents rail or from a URL
somebody shared, so it needs the same clearance under the sticky nav that
page.css gives a section. */
.parts .pagebody details[id] { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.parts .pagebody .sec > p,
.parts .pagebody .sec > ul:not([class]),
.parts .pagebody .sec > ol:not([class]),
.parts .pagebody .sec > dl,
.parts .pagebody .sec > blockquote,
.parts .pagebody .sec > .callout,
.parts .pagebody .sec > .fix,
.parts .pagebody .sec > .todo,
.parts .pagebody > .callout,
.parts .pagebody .disclose__body > p,
.parts .pagebody .disclose__body > ul,
.parts .pagebody .disclose__body > ol,
.parts .pagebody .disclose__body > .callout,
.parts .pagebody .disclose__body > .fix,
.parts .pagebody .disclose__body > .todo,
.parts .pagebody .sec > .status { max-width: var(--measure); }
.parts .pagebody .callout,
.parts .pagebody .callout--unproven,
.parts .pagebody .callout--borrowed,
.parts .pagebody .callout--medal {
background: var(--white);
border-left-width: 3px;
}
/* ============================================================= THE RAIL ====
The page is one table, so the controls over it are the page's furniture,
and since 11 October they are furniture in the left column: the contents
rail, and under it a frosted panel holding the search field and three
groups of chips under their own labels. They were a pill track pinned
across the top of the table. In the rail they are in view beside the rows
for the whole scroll, the table gets the body column back, and the header
row of the table now parks under the site nav alone.
There is no microcopy here telling anyone to type or to click. The three
labels name what a group filters; the count under them reports a result,
which is a different thing: it says how many rows are showing out of how
many there are. */
.parts {
/* the table needs more than the 1280px house frame before a column wraps,
so Parts runs at the Engagement pages' width and caps its prose instead */
--max: 1480px;
--ink: #1d1d1f; --ink-2: #424245; --ink-3: #6e6e73;
--well: #f5f5f7;
--ease: cubic-bezier(.25, .8, .25, 1);
--pl: var(--leaf-700);
--c1: #3f5468; --c2: #23684a; --c3: #8a5a0b; --c4: #7a3b67; --c5: #1f5f8b;
}
.parts .pl-1 { --pl: var(--c1); } .parts .pl-2 { --pl: var(--c2); }
.parts .pl-3 { --pl: var(--c3); } .parts .pl-4 { --pl: var(--c4); }
.parts .pl-5 { --pl: var(--c5); }
/* The rail stacks: contents, then the panel. Above 1040px the rail itself is
what sticks, so the contents block inside it must not — a sticky child of a
sticky parent is held inside the parent's own box and stops moving with the
page. If the two together are taller than the window the rail scrolls on
its own rather than pushing the filters off the bottom. */
.parts .prail { display: grid; gap: var(--sp-5); align-content: start; min-width: 0; }
/* the rail is narrower than the house 15rem: every pixel it gives up is a
pixel the table can use to keep a category on one line */
@media (min-width: 1040px) { .parts .pagewrap { grid-template-columns: 13rem minmax(0, 1fr); } }
@media (min-width: 1040px) {
.parts .prail {
position: sticky; top: calc(var(--nav-h) + var(--sp-5));
align-self: start; order: -1;
max-height: calc(100vh - var(--nav-h) - var(--sp-6));
overflow-y: auto; overscroll-behavior-y: contain;
}
.parts .prail .toc { position: static; top: auto; }
}
.parts .ptools {
display: grid; gap: var(--sp-2);
padding: .6rem;
border-radius: 20px;
background: rgb(240 240 244 / .82);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .07), 0 8px 24px -16px rgb(0 0 0 / .35);
}
/* -- the search field -- */
.parts .ptools__search { position: relative; }
.parts .ptools__mag {
position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
width: 1rem; height: 1rem; color: var(--ink-3); pointer-events: none;
}
.parts .ptools__search input {
width: 100%;
padding: .55rem .7rem .55rem 2.1rem;
border: 0; border-radius: 999px;
background: #fff;
box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .08);
font: inherit; font-size: var(--text-sm); color: var(--ink);
-webkit-appearance: none; appearance: none;
}
.parts .ptools__search input::placeholder { color: var(--ink-3); }
.parts .ptools__search input:focus-visible { outline: 2px solid var(--leaf-700); outline-offset: 1px; }
.parts .ptools__search input::-webkit-search-cancel-button { cursor: pointer; }
/* -- the chips, in three labelled groups -- */
.parts .ptools__set { display: grid; gap: 2px; }
/* the reset chip is a set of one, so it would stretch the full width of the
panel; in a row of pills that is wrong, in the rail it is right */
.parts .ptools__set > .pchip { justify-self: start; }
.parts .ptools__lab {
margin: .4rem 0 .15rem; padding-left: .6rem;
font-size: .625rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--ink-3);
}
.parts .ptools__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.parts .pchip {
display: inline-flex; align-items: center; gap: .45rem;
padding: .5rem .8rem;
border: 0; border-radius: 999px;
background: none;
font: inherit; font-size: var(--text-xs); font-weight: 500; letter-spacing: -.005em;
color: var(--ink-2); white-space: nowrap; text-align: left; cursor: pointer;
transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.parts .pchip > i {
flex: none; width: .5rem; height: .5rem; border-radius: 50%;
background: var(--pl); opacity: .5; transition: opacity .2s ease;
}
.parts .pchip:hover { color: var(--ink); background: rgb(255 255 255 / .6); }
.parts .pchip.is-on {
background: #fff; color: var(--ink); font-weight: 600;
box-shadow: 0 2px 6px rgb(0 0 0 / .1), 0 0 0 .5px rgb(0 0 0 / .05);
}
.parts .pchip.is-on > i { opacity: 1; }
.parts .pchip:focus-visible { outline: 2px solid var(--leaf-700); outline-offset: 1px; }
.parts .ptools__count {
margin: .5rem 0 .15rem; padding-left: .6rem;
font-size: var(--text-xs); font-variant-numeric: tabular-nums;
color: var(--gray-500);
}
/* In the rail a chip is a full-width row, like a row of the contents rail
above it, and a long module name is allowed to take a second line rather
than be cut off. Type is two chips, so they share one line. */
@media (min-width: 1040px) {
.parts .ptools__chips { display: grid; gap: 2px; }
.parts .ptools__chips--pair { grid-template-columns: 1fr 1fr; }
.parts .pchip {
width: 100%; justify-content: flex-start;
padding: .45rem .6rem; border-radius: 12px;
white-space: nowrap; line-height: 1.3;
}
.parts .ptools__chips--pair .pchip { justify-content: center; padding-inline: .35rem; }
.parts .ptools__set > .pchip { justify-self: stretch; }
.parts .pchip--all { font-weight: 600; }
}
/* ======================================================= THE COLLECTION ====
One table, thirty-two rows, five module groups. Each group opens with a
whose single cell carries the module number, name, row count and the
module's lead-in from the docx; when a sort is applied those group headers
are hidden by the script and the Module column carries the information
instead, which is why that column exists at all.
Every row has a second row behind it holding the function sentence. It is
hidden until the chevron is pressed, so the table stays scannable; the
chevron is the only affordance and it does not need a sentence to explain
it. Widths are set once here in percentages so the five groups line up as
one table and not as five. */
.parts .ptable__scroll {
margin: 0;
border-radius: 24px;
background: #fff;
box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 24px 44px -34px rgb(0 0 0 / .35);
overflow-x: auto;
overscroll-behavior-x: contain;
}
/* Above this width the whole table fits the card, and the card must stop
being a scroll container, because a sticky | sticks to its nearest
scrolling ancestor: with overflow-x:auto here the header row pinned to the
card instead of the window and sat 221px down, over the first part of
module 01. Below it the card scrolls again and the header row is static
(see the rule further down), so the two never apply at once. */
@media (min-width: 85rem) {
.parts .ptable__scroll { overflow-x: visible; }
}
.parts .ptable {
width: 100%; min-width: 52rem;
/* auto, not fixed: every cell in a row is nowrap (below), so each column
takes exactly the width of its longest entry and nothing is broken
across lines. The five groups are five tbodies of one table, so they
still line up. Where the card is too narrow for them it scrolls
sideways; it never breaks a cell across two lines. */
table-layout: auto;
/* separate, not collapse: a sticky | inside a collapsed table has its
offset mis-measured and the header row sits 24px down over the first part
in the group. Spacing is zeroed and every rule on this table is a
border-top, so nothing doubles up. */
border-collapse: separate; border-spacing: 0;
font-size: .9375rem;
}
/* -- the header row -- */
/* Frosted, like every other pinned surface on the wiki, so the rows pass
under it rather than disappearing at a hard white edge. */
.parts .ptable thead th {
position: sticky; top: calc(var(--nav-h) + .5rem); z-index: 3;
padding: 0;
background: rgb(255 255 255 / .82);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
box-shadow: inset 0 -1px 0 rgb(0 0 0 / .08);
text-align: left; vertical-align: bottom;
}
.parts .ptable thead th button {
display: flex; align-items: center; gap: .3rem;
width: 100%; padding: 1rem 1rem .7rem;
border: 0; background: none;
font: inherit; font-size: .6875rem; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
color: var(--ink-3); white-space: nowrap; text-align: left;
cursor: pointer; transition: color .2s ease;
}
.parts .ptable thead th button:hover { color: var(--ink); }
.parts .ptable thead th button:focus-visible { outline: 2px solid var(--leaf-700); outline-offset: -2px; }
/* the sort arrow is drawn in, so no glyph font is involved and it can sit on
the baseline of a small uppercase label without shifting it */
.parts .ptable thead th button::after {
content: ""; width: .5rem; height: .5rem; flex: none;
background: currentColor; opacity: 0;
clip-path: polygon(50% 100%, 0 25%, 100% 25%);
transition: opacity .2s ease, transform .2s ease;
}
.parts .ptable thead th[aria-sort] button::after { opacity: .75; }
.parts .ptable thead th[aria-sort="descending"] button::after { transform: rotate(180deg); }
/* Nothing in a row wraps. The Category column holds the longest entry in the
table, "Chromophore biosynthesis operon", and it is the one that used to
break into three lines in a fixed 17% column. */
.parts .ptable__row > th, .parts .ptable__row > td { white-space: nowrap; }
/* -- a module group header -- */
/* A section header in the iOS sense: air above it, a coloured dot, the
module's number small and grey, its name large, and the lead-in under
them. No band, no fill, no rule in colour. */
.parts .ptable__head th {
padding: 2.25rem 1rem 1rem;
border-top: 1px solid rgb(0 0 0 / .07);
background: #fff;
font-weight: 400; text-align: left;
}
.parts .ptable__grp:first-of-type .ptable__head th { border-top: 0; padding-top: 1.75rem; }
.parts .ptable__gno {
display: inline-flex; align-items: center; gap: .45rem; margin-right: .7rem;
font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
text-transform: uppercase; color: var(--ink-3);
}
.parts .ptable__gno::before {
content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--pl);
}
.parts .ptable__gname {
font-size: 1.1875rem; font-weight: 650; letter-spacing: -.015em; color: var(--ink);
}
.parts .ptable__gn {
margin-left: .55rem;
font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--ink-3);
white-space: nowrap;
}
.parts .ptable__gtext {
display: block; max-width: min(74ch, calc(100vw - 4.5rem)); margin-top: .5rem;
font-size: .9375rem; line-height: 1.62; color: var(--ink-2);
white-space: normal;
}
/* -- a part row -- */
.parts .ptable__row > th, .parts .ptable__row > td {
padding: .9rem 1rem;
border-top: 1px solid rgb(0 0 0 / .06);
text-align: left; vertical-align: middle;
}
.parts .ptable__grp .ptable__head + .ptable__row > th,
.parts .ptable__grp .ptable__head + .ptable__row > td { border-top: 0; }
.parts .ptable__row { transition: background .15s ease; cursor: pointer; }
.parts .ptable__row:hover { background: rgb(0 0 0 / .022); }
.parts .ptable__row.is-open { background: color-mix(in srgb, var(--leaf-700) 4%, #fff); }
.parts .ptable__part { font-weight: 400; }
/* The name is the Registry's own title for the part, spelled its way, so that
a judge can match the row to the page it opens. Set a step smaller than the
cards were: the longest of them is 48 characters. */
.parts .ptable__nm {
font-family: var(--font-mono); font-size: .8125rem; font-weight: 600;
letter-spacing: -.01em; color: var(--ink);
}
/* Which module a row belongs to is written once, in the header above it. A
sort takes those headers away, so the line comes back here, under the name. */
.parts .ptable__rmod {
display: none; margin-top: .25rem; white-space: nowrap;
font-size: .75rem; color: var(--ink-3);
}
.parts .ptable__grp--flat .ptable__rmod { display: block; }
.parts .ptable__cat { color: var(--ink-2); }
.parts .mdot {
display: inline-block; width: .4rem; height: .4rem; margin-right: .4rem;
border-radius: 50%; background: var(--pl); vertical-align: .05em;
}
/* -- the Registry link, which is the point of the page -------------------- */
/* A judge comes here to leave for the Registry, so the accession is the one
thing in a row that is coloured, raised and shaped like something to press.
The two words that stand in for a missing accession are deliberately
quiet: they are not links and must not read as though they were. */
.parts .reglink {
display: inline-flex; align-items: center; gap: .3rem;
padding: .3rem .6rem;
border-radius: 999px;
background: color-mix(in srgb, var(--leaf-700) 10%, #fff);
font-family: var(--font-mono); font-size: .78125rem; font-weight: 600;
letter-spacing: -.01em; color: var(--leaf-900); text-decoration: none;
transition: background .2s ease, box-shadow .2s ease, transform .15s var(--ease);
}
.parts .reglink span { transition: transform .15s var(--ease); }
.parts .reglink:hover {
background: color-mix(in srgb, var(--leaf-700) 17%, #fff);
box-shadow: 0 3px 10px -4px color-mix(in srgb, var(--leaf-700) 55%, transparent);
}
.parts .reglink:hover span { transform: translate(.12rem, -.12rem); }
.parts .reglink:focus-visible { outline: 2px solid var(--leaf-700); outline-offset: 2px; }
.parts .noreg {
font-size: .8125rem; color: var(--ink-3);
}
/* The first word of the sentence under a row: composite or basic, set as a
label rather than a sentence so the sentence can start with the part. */
.parts .pmeta {
margin-right: .55rem;
font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
text-transform: uppercase; color: var(--ink-3);
}
/* -- the chevron, and the function row behind it -- */
.parts .ptable__x { text-align: right; }
.parts .pfx {
display: grid; place-items: center;
width: 1.75rem; height: 1.75rem; margin-left: auto;
border: 0; border-radius: 50%;
background: none; color: var(--ink-3);
cursor: pointer; transition: background .2s ease, color .2s ease;
}
.parts .pfx svg { width: 1.15rem; height: 1.15rem; transition: transform .3s var(--ease); }
.parts .pfx:hover { background: var(--well); color: var(--ink); }
.parts .pfx:focus-visible { outline: 2px solid var(--leaf-700); outline-offset: 1px; }
.parts .pfx[aria-expanded="true"] svg { transform: rotate(-180deg); }
.parts .pfx[aria-expanded="true"] { color: var(--ink); }
/* Shipped visible, folded away only once the js class is on : with
scripting off there is no chevron to press, so the sentences have to stay
on the page. */
html.js .parts .ptable__fn { display: none; }
html.js .parts .ptable__fn.is-open { display: table-row; }
/* The sentence belongs to the row above it, so it carries that row's wash
rather than a ground of its own. The wash is a 4% leaf, not a grey: a grey
panel under every open sentence turned the table into a stack of boxes. */
.parts .ptable__fn > td { padding: 0; background: color-mix(in srgb, var(--leaf-700) 4%, #fff); }
.parts .ptable__fnin { padding: 0 1rem 1.1rem; }
.parts .ptable__fnin p {
margin: 0; max-width: 80ch;
font-size: .9375rem; line-height: 1.68; color: var(--ink-2);
white-space: normal;
}
.parts .ptable__none {
margin: var(--sp-5) 0 0; padding: var(--sp-5);
border-radius: 24px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .07);
font-size: var(--text-sm); color: var(--ink-3); text-align: center;
}
/* A row hidden by a filter, and a group left with nothing in it, are both
taken out of the table rather than faded: a greyed row still costs a judge
a read. [hidden] on a |
needs the !important because the UA sheet's
display:table-row wins against it. */
.parts .ptable tr[hidden], .parts .ptable tbody[hidden] { display: none !important; }
/* A pinned header row showing three of six columns is worth less than the
line of the module lead-in it would cover, so where the card scrolls it
scrolls away too. This has to sit after the sticky rule above, not with
the other narrow-screen overrides, which come before it and lose on source
order. */
@media (max-width: 84.9375rem) {
.parts .ptable thead th { position: static; }
}
/* ====================================================== THE NARROW CARD ====
Under 52rem there is no honest way to keep five columns on one line, and a
card that scrolls sideways hides the one thing the page is for: on a phone
the Registry link sat off the right edge until the reader dragged the card.
So below that width the row stops being a row and becomes a small block -
the name, the link under it, then what it is and what its entry carries on
one line, with the chevron held at the right through all of them. The card
itself stops scrolling, and the name is the only text on the page allowed
to break mid-word, because a 48-character accession name has nowhere else
to go. */
@media (max-width: 52rem) {
.parts .ptable__scroll { overflow-x: visible; }
.parts .ptable { min-width: 0; }
.parts .ptable thead { display: none; }
.parts .ptable__grp, .parts .ptable__head, .parts .ptable__row,
.parts .ptable__fn { display: block; }
.parts .ptable__head th, .parts .ptable__fn > td { display: block; }
.parts .ptable__row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto 1.75rem;
align-items: center; column-gap: .6rem; row-gap: .5rem;
padding: .9rem 1rem;
}
.parts .ptable__row > th, .parts .ptable__row > td {
padding: 0; border-top: 0; white-space: normal;
}
.parts .ptable__part { grid-area: 1 / 1 / 2 / 3; }
.parts .ptable__nm { overflow-wrap: anywhere; line-height: 1.45; }
.parts .ptable__reg { grid-area: 2 / 1 / 3 / 3; }
.parts .ptable__cat { grid-area: 3 / 1 / 4 / 2; font-size: .8125rem; color: var(--ink-3); }
.parts .ptable__st { grid-area: 3 / 2 / 4 / 3; }
.parts .ptable__x { grid-area: 1 / 3 / 4 / 4; align-self: start; }
.parts .ptable__row + .ptable__row,
.parts .ptable__fn + .ptable__row { border-top: 1px solid rgb(0 0 0 / .06); }
.parts .ptable__fnin { padding: 0 3.3rem 1.1rem 1rem; }
html.js .parts .ptable__fn.is-open { display: block; }
}
/* ============================================================== STATUS =====
Two words are earned by rows in this table: sequence-confirmed, with the
assembly level it was read at, and designed. Both are quiet neutral
capsules with a dot in front, green for a read and grey for a drawing:
the one green, raised, pressable-looking thing in a row has to be the
Registry link, so nothing else competes with it. Never an outline, which
would read as a control, and these are not pressable. */
.parts .st {
display: inline-flex; align-items: center; gap: .35rem;
padding: .25rem .6rem;
border-radius: 999px;
background: var(--well);
font-size: .78125rem; font-weight: 500; letter-spacing: -.005em;
color: var(--ink-3); white-space: nowrap;
}
.parts .st::before {
content: ""; width: .4rem; height: .4rem; flex: none;
border-radius: 50%; background: var(--gray-400);
}
.parts .st i {
font-style: normal; font-size: .6875rem; font-weight: 600;
opacity: .72;
}
/* The four words a Registry entry earns, deepest first. Only the one that
means a measurement is green. */
.parts .st--char { color: var(--ink-2); }
.parts .st--char::before { background: var(--leaf-700); }
.parts .st--expe { color: var(--ink-2); }
.parts .st--expe::before { background: var(--gray-600); }
.parts .st--desi::before { background: var(--gray-400); }
.parts .st--none { color: var(--ink-3); }
.parts .st--none::before { background: none; box-shadow: inset 0 0 0 1.5px var(--gray-400); }
/* the two rows that are on no Registry page at all have nothing to report */
.parts .pnone { color: var(--ink-3); }
/* =============================================================== PRINT ===== */
@media print {
.parts .ptable__scroll { box-shadow: none; }
.parts .ptable tbody { break-inside: avoid; }
.sitenav-spacer { display: none !important; }
}
/* ====================================================== PARTS WE BUILT ON ==
The eleven Registry parts our own entries cite in their construct lists.
Same card, same hairlines, no chevron and no fold: three columns, the first
two set like the table above it and the third a sentence that is allowed to
wrap, because this table is read down the page rather than scanned across
it. */
.parts .ptable__scroll--flat { overflow-x: visible; }
.parts .rtable {
width: 100%;
border-collapse: separate; border-spacing: 0;
font-size: .9375rem;
}
.parts .rtable thead th {
padding: 1rem 1rem .7rem;
box-shadow: inset 0 -1px 0 rgb(0 0 0 / .08);
font-size: .6875rem; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
color: var(--ink-3); text-align: left; vertical-align: bottom;
white-space: nowrap;
}
.parts .rtable tbody th, .parts .rtable tbody td {
padding: .9rem 1rem;
border-top: 1px solid rgb(0 0 0 / .06);
text-align: left; vertical-align: baseline;
}
.parts .rtable tbody tr:first-child th,
.parts .rtable tbody tr:first-child td { border-top: 0; }
.parts .rtable__nm {
font-family: var(--font-mono); font-size: .8125rem; font-weight: 600;
color: var(--ink); white-space: nowrap;
}
.parts .rtable td:nth-child(2) { white-space: nowrap; }
.parts .rtable__what { color: var(--ink-2); line-height: 1.6; }
@media (max-width: 52rem) {
.parts .rtable__nm { white-space: normal; }
}