` and `
`
elements — leaving `pre-wrap` on would count every source newline twice and
double the gap between paragraphs. (The comment thread hit exactly this;
see the note above `.pc-body` in `sx-comments.css`.)
Then the scale: `.rt-body` is sized for a review column at 15px, and this is
a 13.5px chat bubble, so its heading and code sizes are pulled down to the
bubble's own. Everything else — list indents, blockquote rule, link colour —
is inherited rather than re-declared. */
.cr-msg--rich {
white-space: normal;
font-size: 13.5px;
color: var(--sx-text-2);
}
.cr-msg--rich h4 {
margin: 13px 0 5px;
font-size: 13.5px;
font-weight: 700;
color: var(--sx-text);
}
.cr-msg--rich > :first-child {
margin-top: 0;
}
.cr-msg--rich code,
.cr-msg--rich pre {
font-size: 12px;
}
/* The routing decision, stated as a chip rather than prose: it is the one
line of the transcript that is the product. */
.cr-route {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 11px;
padding: 5px 11px;
border-radius: 999px;
border: 1px solid var(--cr-manager-line);
background: var(--cr-manager-soft);
color: var(--cr-manager);
font-family: var(--ig-mono);
font-size: 11px;
letter-spacing: 0.04em;
}
.cr-foot {
display: flex;
align-items: center;
gap: 9px;
padding: 12px 16px;
border-top: 1px dashed var(--sx-line-2);
font-size: 12.5px;
color: var(--sx-text-3);
}
.cr-foot svg {
flex: none;
color: var(--sx-text-3);
}
/* ── the owned panel (section 02, with access) ───────────────────────────
The shell's `.ig-open` frame holds a *text* artifact on every other v4
type, between a head and a foot that both bring their own padding. This
type has no text to open — what an owner needs is the way in — so the
middle is a lede plus the shell's own `.ig-incl` inventory, and all this
variant adds is the padding the missing `.ig-pre` would have carried. The
26px sides are the shell's, matched so head, body and foot line up. */
.cr-open-body {
padding: 22px 26px 6px;
}
.cr-open-lede {
margin: 0 0 6px;
font-size: 14px;
line-height: 1.6;
color: var(--sx-text-2);
text-wrap: pretty;
}
/* The roster jump sits opposite the owned tick, so it reads as the secondary
half of the head rather than as a third button beside the foot's pair. */
.cr-open .ig-open-head .ig-jump {
flex: none;
}
/* ── the roster ──────────────────────────────────────────────────────────
A manager above its members, joined by a rail. Every row is a link, because
every member is a published listing in its own right — which is the fact the
section exists to make. */
.cr-mgr {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 16px;
align-items: center;
padding: 18px 20px;
border: 1px solid color-mix(in srgb, var(--cr-manager) 32%, var(--sx-line));
border-radius: 16px;
background: linear-gradient(
140deg,
color-mix(in srgb, var(--cr-manager) 13%, var(--sx-surface)) 0%,
var(--sx-surface) 64%
);
text-decoration: none;
color: inherit;
}
.cr-av {
width: 38px;
height: 38px;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--ig-mono);
font-size: 13px;
font-weight: 600;
flex: none;
background: var(--sx-surface-2);
border: 1px solid var(--sx-line-2);
color: var(--sx-text-2);
}
.cr-av--mgr {
background: var(--cr-manager-soft);
border-color: var(--cr-manager-line);
color: var(--cr-manager);
}
.cr-role {
display: block;
font-family: var(--ig-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sx-text-3);
margin-bottom: 5px;
}
.cr-mgr h3 {
font-family: var(--ig-display);
font-size: 17px;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0 0 5px;
}
.cr-mgr p {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: var(--sx-text-2);
max-width: 70ch;
text-wrap: pretty;
}
.cr-tail {
display: flex;
align-items: center;
gap: 10px;
flex: none;
}
/* The rail is decoration only — it draws the manager-to-members join the grid
already states in markup order, so it carries aria-hidden and no text.
The prototype hard-codes three members and positions three drop lines at
16.66% / 50% / 83.33%, which are exactly the card centres *for three*. A live
crew has as many members as the seller linked, so those literals point at the
gaps between cards for any other count — two members drew a line down the
middle of the space between them.
So the rail keeps only what does not depend on the count: the manager's stub
and a bar across the row. Each drop line is drawn by the card it belongs to
(`.cr-mem::before`), which is centred on itself and therefore right for every
count. The bar is hidden for a lone member, where a full-width line above one
card reads as a mistake rather than as a join. */
.cr-rail {
position: relative;
height: 30px;
}
.cr-rail::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 1px;
height: 16px;
background: var(--sx-line-2);
}
.cr-rail::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 15px;
height: 1px;
background: var(--sx-line-2);
}
.cr-rail:has(+ .cr-members > .cr-mem:only-child)::after {
display: none;
}
.cr-rail:has(+ .cr-members > .cr-mem:only-child)::before {
height: 30px;
}
.cr-members {
display: grid;
/* auto-fit, not `repeat(3, 1fr)`: the prototype has exactly three members and
a live crew has however many the seller linked, so a fixed three left a
two-member roster with an empty third of the row. `minmax(0, …)` because a
bare `1fr` floors at min-content (CLAUDE.md). */
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
gap: 14px;
position: relative;
}
/* Each card draws its own drop line up to the rail's bar — centred on itself,
so it is correct for any member count. */
.cr-mem::before {
content: "";
position: absolute;
top: -15px;
left: 50%;
width: 1px;
height: 15px;
background: var(--sx-line-2);
}
.cr-mem {
position: relative;
}
.cr-mem {
display: flex;
flex-direction: column;
gap: 10px;
padding: 17px 18px;
border: 1px solid var(--sx-line);
border-radius: 14px;
background: var(--sx-surface);
transition: border-color 0.15s, transform 0.12s;
text-decoration: none;
color: inherit;
}
.cr-mem:hover {
border-color: var(--sx-line-2);
transform: translateY(-2px);
}
.cr-mem-top {
display: flex;
align-items: center;
gap: 11px;
}
.cr-mem h4 {
font-family: var(--ig-display);
font-size: 15.5px;
font-weight: 700;
letter-spacing: -0.018em;
margin: 0;
}
.cr-mem p {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: var(--sx-text-2);
text-wrap: pretty;
}
/* The trigger condition, which is what the manager actually routes on. Its
own pill rather than a line of the description, because it is the only
part of a member card a buyer reads to predict behaviour. */
.cr-when {
display: inline-flex;
align-items: center;
gap: 7px;
align-self: flex-start;
min-height: 23px;
padding: 3px 10px;
border-radius: 7px;
border: 1px solid var(--sx-line-2);
background: var(--sx-bg-2);
font-family: var(--ig-mono);
font-size: 10.5px;
line-height: 1.45;
letter-spacing: 0.06em;
color: var(--cr-member);
text-wrap: pretty;
}
.cr-when b {
flex: none;
align-self: flex-start;
color: var(--sx-text-3);
font-weight: 400;
letter-spacing: 0.14em;
}
.cr-mem-foot {
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--sx-line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-family: var(--ig-mono);
font-size: 11px;
color: var(--sx-text-3);
}
.cr-mem-foot .go {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--ig-brand);
font-weight: 500;
}
.cr-mem:hover .cr-mem-foot .go {
text-decoration: underline;
}
.cr-fallthrough {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 18px;
padding: 13px 17px;
border: 1px dashed var(--sx-line-2);
border-radius: 13px;
font-size: 13px;
line-height: 1.55;
color: var(--sx-text-3);
}
.cr-fallthrough svg {
flex: none;
margin-top: 2px;
color: var(--sx-text-3);
}
@media (max-width: 1080px) {
.cr-members {
grid-template-columns: minmax(0, 1fr);
}
/* One column, so the bar joins nothing and the stub reaches the first card
on its own. */
.cr-rail::after {
display: none;
}
.cr-rail::before {
height: 30px;
}
.cr-mem::before {
display: none;
}
}
@media (max-width: 760px) {
.cr-mgr {
grid-template-columns: auto minmax(0, 1fr);
row-gap: 12px;
}
.cr-tail {
grid-column: 1 / -1;
}
.cr-jump {
top: 56px;
}
}