/* ── the rail's two menus, the hover labels, and the tour ─────────────────
 *
 * Its own file for the same reason loading.css is: shell.css is four
 * thousand lines and the last two class names taken in there turned out to
 * be spoken for. Everything here is prefixed `xc-pop`, `xc-tip` or
 * `xc-tour`, and none of those existed before this file.
 */

/* ══ a menu that opens off the rail ═══════════════════════════════════════
 *
 * Built on <details>, so the browser owns open and closed and the keyboard
 * works without a line of script. See the comment in partials/rail.blade.php
 * for why that matters more here than anywhere else in the product.
 */
.xc-pop {
    position: relative;
}

.xc-pop__on {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    cursor: pointer;
    color: rgba(var(--rail-ink), .62);
    font-size: 14px;
    list-style: none;
    transition: background 160ms, color 160ms;
}

/* Safari draws its own triangle and ignores `list-style`. */
.xc-pop__on::-webkit-details-marker { display: none; }

.xc-pop__on:hover,
.xc-pop[open] > .xc-pop__on {
    background: rgba(var(--rail-ink), .08);
    color: var(--rail-text);
}

.xc-pop__word { flex: 1; text-align: start; }

/* ── the account row ─────────────────────────────────────────────────────*/

.xc-pop__on--you {
    background: rgba(var(--rail-ink), .05);
    border-radius: 14px;
    padding: 10px 8px;
}

.xc-pop__face {
    inline-size: 32px;
    block-size: 32px;
    border-radius: 50%;
    background: rgba(var(--rail-ink), .12);
    color: var(--rail-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    flex: none;
}

.xc-pop__who {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-inline-size: 0;
    flex: 1;
}

.xc-pop__name {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--rail-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xc-pop__role {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--peri);
}

.xc-pop__caret {
    flex: none;
    color: rgba(var(--rail-ink), .4);
    transition: transform 180ms;
}

.xc-pop[open] .xc-pop__caret { transform: rotate(180deg); }

/* ── the sheet ───────────────────────────────────────────────────────────
 *
 * Above the rail rather than below it. The rail is the full height of the
 * window and both of these sit at the bottom of it, so a menu dropping down
 * would open off the end of the screen.
 */
.xc-pop__sheet {
    position: absolute;
    inset-block-end: calc(100% + 8px);
    inset-inline-start: 0;
    min-inline-size: 232px;
    padding: 7px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 18px 44px rgba(var(--scrim), .26);
    display: flex;
    flex-direction: column;
    gap: 1px;
    z-index: 60;
    animation: xc-pop-in 150ms ease-out;
}

.xc-pop__sheet--wide { min-inline-size: 268px; }

@keyframes xc-pop-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .xc-pop__sheet { animation: none; }
}

.xc-pop__item {
    display: flex;
    align-items: center;
    gap: 11px;
    inline-size: 100%;
    box-sizing: border-box;
    appearance: none;
    background: transparent;
    border: 0;
    text-align: start;
    text-decoration: none;
    padding: 9px 10px;
    border-radius: 11px;
    font: inherit;
    font-size: 13.8px;
    color: rgba(var(--ink), .82);
    cursor: pointer;
    transition: background 140ms, color 140ms;
}

.xc-pop__item svg { flex: none; color: rgba(var(--ink), .45); }

.xc-pop__item:hover { background: rgba(var(--ink), .06); color: rgba(var(--ink), .95); }
.xc-pop__item:hover svg { color: rgba(var(--ink), .7); }

/* The one item here that teaches something, rather than moving somebody. */
.xc-pop__item--go { color: var(--peri); font-weight: 600; }
.xc-pop__item--go svg { color: var(--peri); }
.xc-pop__item--go:hover { background: rgba(var(--brand), .1); color: var(--peri); }

.xc-pop__item--out:hover { color: #b83636; }
.xc-pop__item--out:hover svg { color: #b83636; }

/* A label and what it is for, as respond.io's help menu does it. */
.xc-pop__item--two { align-items: flex-start; padding: 10px; }
.xc-pop__item--two svg { margin-block-start: 2px; }

.xc-pop__item--two span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

.xc-pop__item--two strong { font-weight: 600; font-size: 13.8px; }

.xc-pop__item--two em {
    font-style: normal;
    font-size: 12.2px;
    line-height: 1.45;
    color: rgba(var(--ink), .45);
    text-wrap: pretty;
}

/* Nowhere to go yet, and it says so rather than looking pressable. */
.xc-pop__item[data-off] { cursor: default; opacity: .55; }
.xc-pop__item[data-off]:hover { background: transparent; color: rgba(var(--ink), .82); }

.xc-pop__rule {
    margin: 5px 8px;
    border: 0;
    border-block-start: 1px solid var(--line);
}

.xc-pop__sheet form { margin: 0; }

/* ══ the hover label ══════════════════════════════════════════════════════
 *
 * For the collapsed rail, where every button is an icon and an icon is a
 * guess. Shown on hover and on keyboard focus — a tooltip only a mouse can
 * reach is a label half the people using this never see.
 *
 * `::after` on the element itself, so it costs no markup and cannot be left
 * behind on screen by a swap: it belongs to the button that is hovered and
 * goes when the button does.
 */
[data-tip] { position: relative; }

[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    inset-inline-start: calc(100% + 10px);
    inset-block-start: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    border-radius: 9px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: rgba(var(--ink), .88);
    box-shadow: 0 10px 26px rgba(var(--scrim), .22);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 70;
    transition: opacity 120ms 260ms, visibility 0s 260ms;
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

/* Only where the label is not already on screen. A tooltip repeating the
   word beside it is noise, so the full-width rail has none. */
@media (min-width: 1181px) {
    [data-r="rail"] [data-tip]::after { content: none; }
}

/* An open menu must not be labelled by the button that opened it. */
.xc-pop[open] > [data-tip]::after { content: none; }

/* ══ the tour ═════════════════════════════════════════════════════════════
 *
 * A spotlight and a card, walking somebody round the rail.
 *
 * The spotlight is four panels rather than a hole cut in one: `clip-path` on
 * a full-screen overlay does the same job and cannot be animated smoothly
 * between steps, and a box-shadow ring cannot dim what is behind a rail that
 * is itself dark. Four rectangles round a gap is the oldest way to do this
 * and the only one that behaves in both themes.
 */
.xc-tour__dim {
    position: fixed;
    background: rgba(var(--scrim), .55);
    z-index: 90;
    pointer-events: auto;
    transition: inset 220ms cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
    .xc-tour__dim { transition: none; }
}

/* The ring round what is being pointed at. Drawn over the gap, and
   `pointer-events:none` so the thing underneath is still a real control. */
.xc-tour__ring {
    position: fixed;
    z-index: 91;
    border-radius: 16px;
    box-shadow: 0 0 0 2px var(--peri), 0 0 0 7px rgba(var(--brand), .22);
    pointer-events: none;
    transition: inset 220ms cubic-bezier(.4, 0, .2, 1);
}

.xc-tour__card {
    position: fixed;
    z-index: 92;
    inline-size: min(322px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 17px 18px 15px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 22px 54px rgba(var(--scrim), .3);
    display: flex;
    flex-direction: column;
    gap: 9px;
    animation: xc-pop-in 180ms ease-out;
}

.xc-tour__title {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 16.5px;
    letter-spacing: -.01em;
    color: var(--text);
    text-wrap: pretty;
}

.xc-tour__say {
    margin: 0;
    font-size: 13.6px;
    line-height: 1.55;
    color: rgba(var(--ink), .6);
    text-wrap: pretty;
}

.xc-tour__feet {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-block-start: 4px;
}

.xc-tour__n {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: .1em;
    color: rgba(var(--ink), .38);
    flex: 1;
}

.xc-tour__btn {
    appearance: none;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: rgba(var(--ink), .7);
    border-radius: 10px;
    padding: 7px 13px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background 140ms, color 140ms, border-color 140ms;
}

.xc-tour__btn:hover { background: rgba(var(--ink), .07); color: rgba(var(--ink), .92); }

.xc-tour__btn--go {
    background: rgb(var(--brand));
    border-color: rgb(var(--brand));
    color: #fff;
    font-weight: 600;
}

.xc-tour__btn--go:hover { background: var(--peri); border-color: var(--peri); color: #fff; }

/* The skip, which is a way out rather than a choice — quiet, and always in
   the same corner so it can be found without reading. */
.xc-tour__btn--out {
    border-color: transparent;
    background: transparent;
    color: rgba(var(--ink), .42);
    padding-inline: 8px;
}

/* ══ a face ═══════════════════════════════════════════════════════════════
 *
 * Wherever a photograph stands in for the drawn avatar. `object-fit: cover`
 * rather than a square: people upload what their phone took, which is never
 * the shape of the circle it has to fill, and the alternative is a portrait
 * squeezed thin.
 */
.xc-face {
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    display: block;
    background: rgba(var(--ink), .08);
}

.xc-pop__face--img { padding: 0; object-fit: cover; }

/* ══ the search box ═══════════════════════════════════════════════════════
 *
 * A <dialog>, so the focus trap, the backdrop and Escape are the browser's
 * problem. Near the top rather than centred: the list grows downwards, and a
 * box that starts in the middle of the screen walks off the bottom of it by
 * the third result.
 */
.xc-lookup {
    inline-size: min(560px, calc(100vw - 32px));
    max-block-size: min(60vh, 520px);
    margin-block-start: 12vh;
    margin-inline: auto;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 30px 70px rgba(var(--scrim), .34);
    overflow: hidden;
}

.xc-lookup::backdrop { background: rgba(var(--scrim), .46); }

.xc-lookup__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px;
    border-block-end: 1px solid var(--line);
}

.xc-lookup__in {
    flex: 1;
    min-inline-size: 0;
    appearance: none;
    background: transparent;
    border: 0;
    outline: none;
    padding: 15px 0;
    font: inherit;
    font-size: 16px;
    color: var(--text);
}

.xc-lookup__in::placeholder { color: rgba(var(--ink), .34); }

.xc-lookup__esc {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: .11em;
    color: rgba(var(--ink), .38);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 3px 6px;
    flex: none;
}

.xc-lookup__rows {
    padding: 8px;
    overflow-y: auto;
    max-block-size: calc(min(60vh, 520px) - 58px);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.xc-lookup__kind {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(var(--ink), .38);
    padding: 10px 10px 5px;
}

.xc-lookup__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 11px;
    text-decoration: none;
    color: rgba(var(--ink), .85);
    font-size: 14px;
}

.xc-lookup__row strong { font-weight: 500; unicode-bidi: plaintext; }

.xc-lookup__row em {
    font-style: normal;
    font-size: 12.3px;
    color: rgba(var(--ink), .4);
    unicode-bidi: plaintext;
    margin-inline-start: auto;
    white-space: nowrap;
}

/* The highlight is on `data-on` rather than on :hover, because the keyboard
   owns it: a mouse resting anywhere on the list must not fight the arrows
   over which row Enter opens. */
.xc-lookup__row[data-on] { background: rgba(var(--brand), .12); color: var(--peri); }
.xc-lookup__row[data-on] em { color: var(--peri); opacity: .75; }

.xc-lookup__note {
    margin: 0;
    padding: 22px 12px;
    text-align: center;
    font-size: 13.5px;
    color: rgba(var(--ink), .4);
}

/* ══ the template wizard ══════════════════════════════════════════════════
 *
 * Three named steps rather than a progress bar. The steps are things —
 * "kind", "write", "check" — and their names say more than a bar filling up.
 * Only the ones already passed are clickable: forward is what the buttons at
 * the foot are for, because that is where the checking happens.
 */
.xc-wiz {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-block-end: 4px;
}

.xc-wiz__one {
    appearance: none;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 8px;
    border-radius: 11px;
    font: inherit;
    font-size: 13.5px;
    color: rgba(var(--ink), .38);
    cursor: default;
}

.xc-wiz__one:not(:disabled) { cursor: pointer; }
.xc-wiz__one:not(:disabled):hover { background: rgba(var(--ink), .05); }

.xc-wiz__n {
    inline-size: 22px;
    block-size: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ink), .08);
    color: rgba(var(--ink), .45);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    flex: none;
}

.xc-wiz__one[data-on="true"] { color: var(--text); font-weight: 600; }
.xc-wiz__one[data-on="true"] .xc-wiz__n { background: rgb(var(--brand)); color: #fff; }

.xc-wiz__one[data-done="true"] { color: rgba(var(--ink), .6); }
.xc-wiz__one[data-done="true"] .xc-wiz__n { background: rgba(var(--brand), .16); color: var(--peri); }

/* The sheet's footer, supplied by the form because that is where `step`
   lives. Sticky rather than in the flow: a long form would otherwise put the
   primary action below the fold on every screen. */
.xc-wiz__feet {
    position: sticky;
    inset-block-end: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 0 2px;
    margin-block-start: 6px;
    border-block-start: 1px solid var(--line);
    background: var(--surface);
    z-index: 2;
}

/* ── the category cards ──────────────────────────────────────────────────
 *
 * The most consequential choice on this form, asked as three cards rather
 * than as the third dropdown of a long form, where it read as metadata.
 *
 * The shape is a glyph, a name, what it means, and the thing it sounds like
 * drawn as a message bubble. The bubble is the part that does the work: a
 * rule about categories is abstract, and "Three new two-bed units just came
 * to market in JVC" in a bubble settles "is mine marketing" in one read.
 */
.xc-kinds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
    gap: 12px;
    align-items: stretch;
}

.xc-kind {
    appearance: none;
    text-align: start;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    cursor: pointer;
    font: inherit;
    color: var(--text);
    transition: border-color 160ms, box-shadow 160ms, background 160ms;
}

.xc-kind:hover:not(:disabled) {
    border-color: rgba(var(--tint), .5);
    box-shadow: 0 8px 22px rgba(var(--tint), .1);
}

/* Chosen: tinted through, the way the mark fills in. Not a border alone —
   three cards side by side need the answer visible from across the room. */
.xc-kind[data-on="true"] {
    border-color: rgb(var(--tint));
    background: rgba(var(--tint), .06);
}

.xc-kind[data-on="true"] .xc-kind__mark {
    background: rgb(var(--tint));
    color: #fff;
}

/* Offered and not enabled: authentication templates have a body Meta writes,
   and this form writes free text. Removing the card would leave somebody
   wondering where OTP went; the card says what it is for and says we have
   not built it. */
.xc-kind[data-soon] { cursor: default; opacity: .6; }
.xc-kind[data-soon]:hover { border-color: var(--line); box-shadow: none; }

.xc-kind__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.xc-kind__mark {
    inline-size: 38px;
    block-size: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--tint), .12);
    color: rgb(var(--tint));
    flex: none;
    transition: background 160ms, color 160ms;
}

.xc-kind__cost {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(var(--ink), .45);
    background: rgba(var(--ink), .06);
    border-radius: 20px;
    padding: 4px 9px;
    white-space: nowrap;
    flex: none;
    margin-block-start: 3px;
}

.xc-kind[data-on="true"] .xc-kind__cost {
    color: rgb(var(--tint));
    background: rgba(var(--tint), .14);
}

.xc-kind__name {
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 16.5px;
    letter-spacing: -.01em;
    margin-block-start: 2px;
}

/* What the category means, under what it is called. Meta's word goes on
   top, because that is the word the invoice and the API use. */
.xc-kind__what {
    font-size: 12.6px;
    color: rgb(var(--tint));
    margin-block-start: -5px;
}

.xc-kind__note {
    font-size: 12.8px;
    line-height: 1.55;
    color: rgba(var(--ink), .52);
    text-wrap: pretty;
    flex: 1;
}

.xc-kind__label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(var(--ink), .32);
    padding-block-start: 3px;
}

/* The example, as a message. A tail on the corner, because that is what
   makes it read as something somebody received rather than as a quotation. */
.xc-kind__eg { display: flex; }

.xc-kind__bubble {
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px 12px 12px 3px;
    padding: 9px 11px;
    font-size: 12.4px;
    line-height: 1.5;
    color: rgba(var(--ink), .72);
    text-wrap: pretty;
    unicode-bidi: plaintext;
}

.xc-kind[data-on="true"] .xc-kind__bubble {
    background: rgba(var(--tint), .09);
    border-color: rgba(var(--tint), .22);
    color: rgba(var(--ink), .85);
}

/* ── a button row ────────────────────────────────────────────────────────*/

.xc-btnrow {
    display: grid;
    grid-template-columns: minmax(120px, 160px) 1fr 38px;
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-2);
}

/* The dropdown and the bin sit on the same line as the first field, which
   means matching the height of an input rather than filling the row.
 *
 * The chevron is drawn on: `.xc-in` strips a select's native appearance so
 * every field in the product looks the same, which left this one looking
 * like a grey box with a word in it. Nobody opens a grey box with a word in
 * it — so "Reply" looked like a label, the other three kinds were invisible,
 * and a link button was unreachable. */
.xc-btnrow__pick {
    block-size: 40px;
    padding-inline-end: 30px;
    background-image: linear-gradient(45deg, transparent 50%, rgba(var(--ink), .45) 50%),
        linear-gradient(135deg, rgba(var(--ink), .45) 50%, transparent 50%);
    background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
    font-weight: 500;
}

[dir="rtl"] .xc-btnrow__pick {
    padding-inline-end: 12px;
    padding-inline-start: 30px;
    background-position: 12px 17px, 17px 17px;
}

.xc-btnrow__pick:hover { border-color: rgba(var(--brand), .4); }

.xc-btnrow__fields { display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; }

.xc-btnrow__note {
    font-size: 12.2px;
    line-height: 1.5;
    color: rgba(var(--ink), .45);
    text-wrap: pretty;
}

.xc-btnrow__bin {
    appearance: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    inline-size: 38px;
    block-size: 40px;
    padding: 0;
    cursor: pointer;
    color: rgba(var(--ink), .4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    transition: color 140ms, border-color 140ms, background 140ms;
}

.xc-btnrow__bin:hover {
    color: #b83636;
    border-color: rgba(214, 69, 69, .4);
    background: rgba(214, 69, 69, .06);
}

/* The note runs under everything, indented past the dropdown so it reads as
   a footnote to the row rather than as another field in it. */
.xc-btnrow__note { grid-column: 2 / -1; margin-block-start: -2px; }

.xc-btnrow__add {
    appearance: none;
    background: transparent;
    border: 1px dashed var(--line);
    border-radius: 12px;
    padding: 11px;
    font: inherit;
    font-size: 13.2px;
    color: var(--peri);
    cursor: pointer;
    transition: border-color 140ms, background 140ms;
}

.xc-btnrow__add:hover:not(:disabled) { border-color: var(--peri); background: rgba(var(--brand), .05); }
.xc-btnrow__add:disabled { color: rgba(var(--ink), .3); cursor: default; }

@media (max-width: 640px) {
    .xc-btnrow { grid-template-columns: 1fr 38px; }
    .xc-btnrow__pick { grid-column: 1 / -1; }
    .xc-btnrow__note { grid-column: 1 / -1; }
}

/* ══ a template card ══════════════════════════════════════════════════════
 *
 * The list was a table of five short values — a name in snake case, a
 * language, a category, a status — and made somebody open each row to find
 * out what the template actually said. A template is a piece of writing; the
 * writing is what anybody is looking for.
 */

/* The message, clamped rather than truncated. A template is written in whole
   sentences, and cutting one mid-word to fit a box is how a screen stops
   being readable. Four lines is enough to recognise one. */
.xc-card__say {
    margin: 0;
    font-size: 13.2px;
    line-height: 1.55;
    color: rgba(var(--ink), .72);
    text-wrap: pretty;
    unicode-bidi: plaintext;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    background: var(--surface-2);
    border-radius: 11px;
    padding: 10px 12px;
}

/* What sits under the message on the phone. Named `chip2` because `xc-chip`
   was already taken — the one lesson this stylesheet has learned twice. */
.xc-chip2 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.8px;
    color: rgba(var(--ink), .55);
    background: rgba(var(--ink), .05);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 4px 9px;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: plaintext;
}

.xc-chip2 svg { flex: none; color: rgba(var(--ink), .38); }

/* ══ the platform charts ══════════════════════════════════════════════════
 *
 * Drawn in CSS rather than fetched as a library. Three shapes — a stacked
 * bar, a ranked row and a split bar — and every one of them is a div with a
 * percentage on it. A charting library would be a hundred kilobytes and a
 * second design system for three shapes that already match this one.
 *
 * ── The animation is the data arriving ───────────────────────────────────
 *
 * Bars grow from nothing to their height, staggered a few milliseconds apart.
 * That is not decoration: a bar that grows is a bar whose height somebody
 * actually watches, where thirty that are simply *there* read as texture.
 *
 * It gates nothing. Every number is in the markup, and with motion reduced
 * the shapes are drawn at full size immediately.
 */

/* ── a day, stacked ──────────────────────────────────────────────────────*/

.xc-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    block-size: 190px;
    padding-block-start: 10px;
}

.xc-bars__col {
    flex: 1;
    min-inline-size: 0;
    block-size: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    position: relative;
}

/* The stack itself. `--h` is the day's share of the busiest day; the parts
   inside split that height between out and in. */
.xc-bars__stack {
    inline-size: 100%;
    max-inline-size: 26px;
    block-size: var(--h);
    border-radius: 4px 4px 2px 2px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: filter 140ms;
    transform-origin: bottom;
    animation: xc-bar-grow 520ms cubic-bezier(.2, .8, .25, 1) backwards;
    animation-delay: calc(var(--i) * 14ms);
}

/* A day with nothing in it still occupies its slot, so the axis does not
   shuffle. A ghost line says "nothing happened" where an absence says
   "this day does not exist". */
.xc-bars__stack:not([style*="--h:0"]) { background: transparent; }

.xc-bars__part { inline-size: 100%; block-size: var(--part); flex: none; }

.xc-bars__col:hover .xc-bars__stack { filter: brightness(1.12); }

.xc-bars__label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    color: rgba(var(--ink), .3);
    block-size: 12px;
    white-space: nowrap;
}

/* The figures, on hover. A title attribute as well, in the markup, so this
   is the convenience rather than the only way to read the chart. */
.xc-bars__tip {
    position: absolute;
    inset-block-end: calc(100% - 14px);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--bg);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    padding: 5px 9px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms;
    z-index: 3;
}

.xc-bars__col:hover .xc-bars__tip { opacity: 1; }

@keyframes xc-bar-grow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

/* ── a ranked workspace ──────────────────────────────────────────────────*/

.xc-rank {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: inherit;
    padding: 8px 10px;
    margin-inline: -10px;
    border-radius: 12px;
    transition: background 140ms;
    animation: xc-rank-in 420ms cubic-bezier(.2, .8, .25, 1) backwards;
    animation-delay: calc(var(--i) * 45ms);
}

.xc-rank:hover { background: rgba(var(--ink), .04); }

.xc-rank__n {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: rgba(var(--ink), .32);
    inline-size: 16px;
    text-align: end;
    flex: none;
}

.xc-rank__body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 5px; }

.xc-rank__top { display: flex; align-items: baseline; gap: 10px; }

.xc-rank__name {
    flex: 1;
    min-inline-size: 0;
    font-size: 13.6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: plaintext;
}

.xc-rank__count {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--ink), .55);
    flex: none;
}

.xc-rank__track {
    block-size: 6px;
    border-radius: 6px;
    background: rgba(var(--ink), .07);
    overflow: hidden;
}

.xc-rank__fill {
    display: block;
    block-size: 100%;
    inline-size: var(--w);
    border-radius: 6px;
    background: linear-gradient(90deg, rgb(var(--brand)), var(--peri));
    transform-origin: left;
    animation: xc-fill 620ms cubic-bezier(.2, .8, .25, 1) backwards;
    animation-delay: calc(var(--i) * 45ms + 120ms);
}

[dir="rtl"] .xc-rank__fill { transform-origin: right; }

@keyframes xc-rank-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes xc-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* ── one bar, split ──────────────────────────────────────────────────────*/

.xc-split {
    display: flex;
    block-size: 12px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(var(--ink), .07);
    gap: 2px;
}

.xc-split__part {
    inline-size: var(--w);
    block-size: 100%;
    transform-origin: left;
    animation: xc-fill 560ms cubic-bezier(.2, .8, .25, 1) backwards;
    animation-delay: 140ms;
    transition: filter 140ms;
}

[dir="rtl"] .xc-split__part { transform-origin: right; }

.xc-split:hover .xc-split__part { filter: saturate(1.15); }

/* Everything above draws at full size the moment it appears. The numbers
   were never behind the motion. */
@media (prefers-reduced-motion: reduce) {
    .xc-bars__stack,
    .xc-rank,
    .xc-rank__fill,
    .xc-split__part {
        animation: none;
    }
}

/* ══ a row of tabs ════════════════════════════════════════════════════════
 *
 * Not `.xc-subnav`, which is the 214px vertical sidebar the settings and
 * reports screens hang their sections off. That name reads like "a row of
 * secondary navigation" and is a column, which is how two screens ended up
 * with three links stacked in a narrow white box.
 *
 * This is the horizontal one: a filter across the top of a list, where the
 * options are few enough to show and the count on each is the point.
 */
.xc-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 4px;
    border-radius: 14px;
    background: rgba(var(--ink), .045);
    align-self: flex-start;
    max-inline-size: 100%;
}

.xc-tabs__one {
    padding: 7px 13px;
    border-radius: 10px;
    font-size: 13.2px;
    text-decoration: none;
    color: rgba(var(--ink), .52);
    white-space: nowrap;
    transition: background 150ms, color 150ms, box-shadow 150ms;
}

.xc-tabs__one:hover { color: var(--text); }

/* The chosen one lifts off the track rather than only changing colour: on a
   row of seven, colour alone is a difference somebody has to look for. */
.xc-tabs__one[data-on] {
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(var(--scrim), .1), 0 4px 10px rgba(var(--scrim), .06);
}

/* ── the count on a tab ──────────────────────────────────────────────────*/

.xc-tabs__one {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.xc-tabs__n {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--ink), .45);
    background: rgba(var(--ink), .07);
    border-radius: 20px;
    padding: 1px 6px;
    min-inline-size: 18px;
    text-align: center;
}

/* Zero is shown rather than hidden — "suspended 0" is the good news somebody
   came to confirm — but it is quiet enough not to be read as a figure. */
.xc-tabs__n[data-none] { opacity: .4; }

.xc-tabs__one[data-on] .xc-tabs__n { background: rgba(var(--brand), .13); color: var(--peri); }

/* ── fourteen days, as a shape ───────────────────────────────────────────
 *
 * Not a chart. It carries no axis, no figures and no tooltip: it is there to
 * answer "steady, spiking, or stopped" at a glance, and anything more would
 * make it a thing to study in a column 104 pixels wide.
 */
.xc-shape {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 2px;
    block-size: 26px;
}

.xc-shape__day {
    inline-size: 4px;
    block-size: var(--h);
    min-block-size: 2px;
    border-radius: 2px;
    background: rgba(var(--brand), .55);
    flex: none;
    transform-origin: bottom;
    animation: xc-bar-grow 420ms cubic-bezier(.2, .8, .25, 1) backwards;
    animation-delay: calc(var(--i) * 18ms);
}

/* A day with nothing in it is drawn as a floor rather than as an absence, so
   a gap in the middle reads as a gap rather than as a narrower chart. */
.xc-shape__day[style*="--h:0%"] { background: rgba(var(--ink), .1); }

.xc-tbl__row:hover .xc-shape__day { background: var(--peri); }

@media (prefers-reduced-motion: reduce) {
    .xc-shape__day { animation: none; }
}

/* ══ the audit trail ══════════════════════════════════════════════════════
 *
 * A log read back, not a table. Rows are dense and monospaced because that
 * is what makes a column of ids scannable — the eye finds a repeated prefix
 * in mono and cannot in a proportional face.
 */
.xc-log {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface-2);
}

.xc-log__row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 12px;
    border-block-end: 1px solid var(--line);
    animation: xc-log-in 300ms ease-out backwards;
    animation-delay: calc(var(--i) * 12ms);
}

.xc-log__row:last-child { border-block-end: 0; }
.xc-log__row:hover { background: rgba(var(--ink), .03); }

/* A warning or an error is the reason anybody scrolls this, so it gets an
   edge rather than only a coloured word. */
.xc-log__row[data-loud] {
    background: rgba(var(--tint), .05);
    box-shadow: inset 3px 0 0 rgb(var(--tint));
}

[dir="rtl"] .xc-log__row[data-loud] { box-shadow: inset -3px 0 0 rgb(var(--tint)); }

.xc-log__at {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: rgba(var(--ink), .32);
    flex: none;
    font-variant-numeric: tabular-nums;
}

.xc-log__body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 5px; }

.xc-log__event {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    color: var(--text);
    word-break: break-word;
}

.xc-log__ctx { display: flex; gap: 5px; flex-wrap: wrap; }

/* The ids beside an event are what somebody came for — a workspace, a
   template, a reason — so they are on the row rather than behind a
   disclosure nobody opens. */
.xc-log__pair {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 11.2px;
    background: rgba(var(--ink), .05);
    border-radius: 6px;
    padding: 2px 7px;
    max-inline-size: 100%;
    overflow: hidden;
}

.xc-log__pair em {
    font-style: normal;
    color: rgba(var(--ink), .4);
    flex: none;
}

.xc-log__pair b {
    font-weight: 500;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: rgba(var(--ink), .68);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: plaintext;
}

@keyframes xc-log-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .xc-log__row { animation: none; }
}

/* ══ looking at somebody else's workspace ═════════════════════════════════
 *
 * A strip across the top of the window, in a colour the product uses nowhere
 * else, that cannot be dismissed. The danger this guards against is
 * forgetting: every screen underneath looks exactly like the product, and a
 * support session goes wrong when somebody reads a figure, closes the tab and
 * quotes it back as their own.
 */
.xc-looking {
    position: sticky;
    inset-block-start: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    padding: 9px 18px;
    background: #7A2E8E;
    color: #fff;
    font-size: 13.2px;
    box-shadow: 0 4px 14px rgba(122, 46, 142, .3);
}

.xc-looking__say { flex: 1; min-inline-size: 180px; }
.xc-looking__say strong { font-weight: 600; }

.xc-looking__tag,
.xc-looking__left {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .18);
    border-radius: 20px;
    padding: 3px 9px;
    white-space: nowrap;
    flex: none;
}

.xc-looking__out {
    appearance: none;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: #7A2E8E;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 13px;
    cursor: pointer;
    transition: transform 140ms, box-shadow 140ms;
}

.xc-looking__out:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .2);
}

/* ══ the platform stat cards ══════════════════════════════════════════════
 *
 * Tinted through rather than white with a coloured icon. Six of them read as
 * a dashboard when each carries its own colour and as a spreadsheet when they
 * do not — and the colour is doing work: it is the same tint the figure links
 * to everywhere else on the console.
 */
.xc-figs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.xc-fig {
    background: rgba(var(--tint), .07);
    border: 1px solid rgba(var(--tint), .18);
    border-radius: 18px;
    padding: 16px 17px 15px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 9px;
    row-gap: 6px;
    min-inline-size: 0;
}

/*
 * A grid, so one component draws both of the design's card layouts.
 *
 * Column on analytics — chip and label on a line, the value beneath them at
 * the card's own left edge. Row on the companies screen — chip at the left
 * with the label, value and sentence stacked beside it. Two arrangements of
 * the same three facts, and very nearly two components that would have
 * drifted apart the first time either was touched.
 */
.xc-fig__chip { grid-row: 1; grid-column: 1; }
.xc-fig__top { grid-row: 1; grid-column: 2; display: flex; align-items: center; gap: 8px; min-inline-size: 0; }
.xc-fig__value { grid-column: 1 / -1; }
.xc-fig__sub { grid-column: 1 / -1; }

/* ── the quiet variant ───────────────────────────────────────────────────
 *
 * Three cards rather than six, drawn differently: a neutral card with only
 * the icon carrying colour. Six tinted cards read as a dashboard; three read
 * as three warnings, which is not what "companies: 6" is. The one figure
 * anybody quotes keeps its colour — see [data-loud].
 */
.xc-figs[data-calm] .xc-fig {
    background: rgba(var(--ink), .028);
    border-color: var(--line);
    align-items: start;
    column-gap: 12px;
    row-gap: 3px;
}

:root[data-theme="dark"] .xc-figs[data-calm] .xc-fig { background: rgba(var(--ink), .06); }

.xc-figs[data-calm] .xc-fig__chip { grid-row: 1 / -1; align-self: start; }

.xc-figs[data-calm] .xc-fig__value,
.xc-figs[data-calm] .xc-fig__sub {
    grid-column: 2;
}

.xc-figs[data-calm] .xc-fig__value { font-size: 25px; }

.xc-fig__value[data-loud] { color: rgb(var(--tint)); }

.xc-fig__chip {
    inline-size: 28px;
    block-size: 28px;
    border-radius: 9px;
    background: rgba(var(--tint), .16);
    color: rgb(var(--tint));
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.xc-fig__label {
    font-size: 12.5px;
    letter-spacing: .005em;
    color: rgba(var(--ink), .55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xc-fig__value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 30px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.025em;
    color: var(--text);
    line-height: 1.1;
}

.xc-fig__sub {
    font-size: 12.2px;
    line-height: 1.45;
    color: rgba(var(--ink), .48);
    text-wrap: pretty;
}

/* ── six months ──────────────────────────────────────────────────────────
 *
 * The figure sits above each bar rather than on an axis. Six months is few
 * enough to label every one, and somebody comparing two of them should not
 * have to measure.
 */
.xc-months {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    block-size: 180px;
    padding-block-start: 14px;
}

.xc-months__col {
    flex: 1;
    min-inline-size: 0;
    block-size: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

.xc-months__n {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    color: rgba(var(--ink), .42);
    font-variant-numeric: tabular-nums;
}

.xc-months__bar {
    inline-size: 100%;
    block-size: var(--h);
    border-radius: 8px 8px 4px 4px;
    background: rgba(var(--brand), .26);
    transform-origin: bottom;
    animation: xc-bar-grow 560ms cubic-bezier(.2, .8, .25, 1) backwards;
    animation-delay: calc(var(--i) * 60ms);
}

/* This month is the one being read; the five behind it are the comparison. */
.xc-months__bar[data-now] { background: linear-gradient(180deg, var(--peri), rgb(var(--brand))); }

.xc-months__n[data-now] { color: var(--text); font-weight: 500; }

.xc-months__label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: rgba(var(--ink), .32);
}

/* ── the funnel ──────────────────────────────────────────────────────────*/

.xc-funnel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: xc-rank-in 400ms cubic-bezier(.2, .8, .25, 1) backwards;
    animation-delay: calc(var(--i) * 70ms);
}

.xc-funnel__top { display: flex; align-items: baseline; gap: 10px; }

.xc-funnel__label { flex: 1; min-inline-size: 0; font-size: 13.4px; color: rgba(var(--ink), .72); }

.xc-funnel__n {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.xc-funnel__pc {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: rgba(var(--ink), .38);
    inline-size: 38px;
    text-align: end;
}

.xc-funnel__track {
    block-size: 7px;
    border-radius: 8px;
    background: rgba(var(--ink), .07);
    overflow: hidden;
}

.xc-funnel__fill {
    display: block;
    block-size: 100%;
    inline-size: var(--w);
    border-radius: 8px;
    background: rgb(var(--tint));
    transform-origin: left;
    animation: xc-fill 620ms cubic-bezier(.2, .8, .25, 1) backwards;
    animation-delay: calc(var(--i) * 70ms + 120ms);
}

[dir="rtl"] .xc-funnel__fill { transform-origin: right; }

@media (prefers-reduced-motion: reduce) {
    .xc-months__bar,
    .xc-funnel,
    .xc-funnel__fill {
        animation: none;
    }
}

/* ── the delta chip, and the two pills ───────────────────────────────────
 *
 * The chip in a card's top corner is a different fact from the sentence
 * underneath it: it answers "is this moving" where the value answers "what is
 * it". Three questions in three places is what lets six cards be taken in at
 * a glance rather than read one at a time.
 */
.xc-fig__delta {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: .03em;
    border-radius: 20px;
    padding: 3px 8px;
    flex: none;
    margin-inline-start: auto;
    white-space: nowrap;
    background: rgba(255, 255, 255, .7);
    color: rgba(var(--ink), .5);
}

:root[data-theme="dark"] .xc-fig__delta { background: rgba(var(--ink), .1); }

.xc-fig__delta[data-tone="up"] { color: var(--green); }
.xc-fig__delta[data-tone="down"] { color: #b83636; }
.xc-fig__delta[data-tone="warn"] { color: var(--amber); }

/*
 * Two ways off this screen, tinted to where they lead rather than both grey
 * — money is green everywhere else on this console.
 *
 * Named `xc-goto` because `xc-pill` is taken: it is the small uppercase
 * count on a card ("installed twice") in shell.css, and borrowing the name
 * rendered these two buttons as OPEN REVENUE and OPEN THE AUDIT LOG. Third
 * time this stylesheet has learned to check first.
 */
.xc-goto {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border-radius: 12px;
    font-size: 13px;
    text-decoration: none;
    color: rgb(var(--tint));
    background: rgba(var(--tint), .1);
    border: 1px solid rgba(var(--tint), .24);
    white-space: nowrap;
    transition: background 150ms, transform 150ms;
}

.xc-goto:hover { background: rgba(var(--tint), .17); transform: translateY(-1px); }

/* ── a slice of the list, as a dot and a count ───────────────────────────
 *
 * Named `xc-slice` and not `xc-dot`, which shell.css has had all along for the
 * 26x4px pill under a carousel. Same specificity, so whichever sheet loads
 * last wins each property it declares — and shell's `inline-size: 26px` was
 * never overridden because this rule had no reason to declare a width. The
 * chip was stuck at 54px with its text spilling, which looks like a design
 * that does not fit rather than a name that was already taken.
 *
 * scripts/cssclash.php exists to catch the next one.
 */

.xc-slice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1;
    text-decoration: none;
    color: rgba(var(--ink), .72);
    background: rgba(var(--tint), .12);
    border: 1px solid rgba(var(--tint), .26);
    border-radius: 20px;
    padding: 7px 13px;
    white-space: nowrap;
    flex: none;
    transition: background 150ms, transform 150ms;
}

.xc-slice:hover { background: rgba(var(--tint), .2); transform: translateY(-1px); }

.xc-slice > span {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: rgb(var(--tint));
    flex: none;
}

/* ── a workspace by volume ───────────────────────────────────────────────
 *
 * The bar runs the full width of the row rather than sitting in a column, so
 * ten of them can be compared down the page without measuring. The gradient
 * is the design's: it reads as a quantity rather than as a category.
 */
.xc-vol {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    padding: 4px 6px;
    margin-inline: -6px;
    border-radius: 10px;
    transition: background 150ms;
    animation: xc-rank-in 420ms cubic-bezier(.2, .8, .25, 1) backwards;
    animation-delay: calc(var(--i) * 50ms);
}

.xc-vol:hover { background: rgba(var(--ink), .035); }

.xc-vol__top { display: flex; align-items: center; gap: 9px; }

.xc-vol__name {
    flex: 1;
    min-inline-size: 0;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: plaintext;
}

.xc-vol__plan {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: .1em;
    color: rgb(var(--tint));
    background: rgba(var(--tint), .13);
    border-radius: 20px;
    padding: 3px 9px;
    flex: none;
}

.xc-vol__n,
.xc-vol__amt {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    flex: none;
    text-align: end;
}

.xc-vol__n { color: rgba(var(--ink), .45); }

.xc-vol__amt {
    color: var(--text);
    min-inline-size: 92px;
}

.xc-vol__track {
    block-size: 6px;
    border-radius: 6px;
    background: rgba(var(--ink), .06);
    overflow: hidden;
}

.xc-vol__fill {
    display: block;
    block-size: 100%;
    inline-size: var(--w);
    border-radius: 6px;
    background: linear-gradient(90deg, rgb(var(--brand)), var(--green));
    transform-origin: left;
    animation: xc-fill 640ms cubic-bezier(.2, .8, .25, 1) backwards;
    animation-delay: calc(var(--i) * 50ms + 140ms);
}

[dir="rtl"] .xc-vol__fill { transform-origin: right; }

/* ── the months, at the design's proportions ─────────────────────────────*/

/* ── growth beside the funnel ────────────────────────────────────────────
 *
 * Not equal halves. Six labelled bars need width — "AED 14,862" over a
 * 110px column wraps to two lines and the chart becomes a paragraph — and
 * four funnel rows are a label, a count and a share, which do not.
 */
.xc-duo {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 16px;
}

@media (max-width: 1020px) {
    .xc-duo { grid-template-columns: minmax(0, 1fr); }
}

.xc-months { gap: 13px; block-size: 196px; }

/*
 * Three is the design's row because the design draws six cards. Four cards
 * in three tracks leaves one alone on a second line looking like an
 * afterthought, so the row follows the count instead of the other way round.
 */
.xc-figs[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.xc-figs[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xc-figs[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xc-figs[data-n="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1180px) {
    .xc-figs,
    .xc-figs[data-n="4"],
    .xc-figs[data-n="5"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .xc-figs,
    .xc-figs[data-n="2"],
    .xc-figs[data-n="4"],
    .xc-figs[data-n="5"] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.xc-months__bar { border-radius: 10px 10px 3px 3px; }

@media (prefers-reduced-motion: reduce) {
    .xc-vol,
    .xc-vol__fill {
        animation: none;
    }
}

/* ══ the companies screen ═════════════════════════════════════════════════
 *
 * A table rather than cards, and that is a judgement rather than a default.
 * Somebody opens this screen to compare brokerages on the same four facts —
 * tier, size, health, area — and comparing down a column is the thing cards
 * make impossible. Templates and workflows are cards because each one is
 * read on its own.
 */

/* The word that says the figures above are not a report from last night. */
.xc-live {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: .16em;
    color: rgba(var(--ink), .3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.xc-live::before {
    content: '';
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--green);
    animation: xc-pulse 2.4s ease-in-out infinite;
}

@keyframes xc-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.82); }
}

/* ── a bordered button, beside the solid one ─────────────────────────────*/

.xc-mild {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 11px;
    border: 1px solid var(--line);
    background: var(--card);
    color: rgba(var(--ink), .72);
    font-size: 13px;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 150ms, background 150ms, transform 150ms;
}

.xc-mild:hover {
    border-color: rgba(var(--brand), .45);
    background: rgba(var(--brand), .05);
    transform: translateY(-1px);
}

/* ── the search, and the health chips beside it ──────────────────────────
 *
 * On one line on purpose. They are two halves of the same question — which
 * of these companies am I looking for — and stacking them puts a full-width
 * input between somebody and the three words they were reaching for.
 */
.xc-seekrow {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.xc-seek {
    flex: 1;
    min-inline-size: 240px;
    position: relative;
    display: flex;
    align-items: center;
}

.xc-seek > svg {
    position: absolute;
    inset-inline-start: 14px;
    color: rgba(var(--ink), .3);
    pointer-events: none;
}

.xc-seek > input {
    inline-size: 100%;
    padding: 11px 14px 11px 40px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(var(--ink), .022);
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
    transition: border-color 150ms, background 150ms;
}

[dir="rtl"] .xc-seek > input { padding: 11px 40px 11px 14px; }

.xc-seek > input:focus {
    outline: none;
    border-color: rgba(var(--brand), .5);
    background: var(--card);
}

.xc-seek > input::placeholder { color: rgba(var(--ink), .34); }

.xc-filt { display: flex; gap: 7px; flex-wrap: wrap; }

.xc-filt__one {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: var(--card);
    color: rgba(var(--ink), .6);
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 150ms, background 150ms, color 150ms;
}

.xc-filt__one:hover { border-color: rgba(var(--brand), .4); color: var(--text); }

.xc-filt__one[data-on] {
    background: rgba(var(--brand), .1);
    border-color: rgba(var(--brand), .3);
    color: rgb(var(--brand));
}

.xc-filt__n {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    opacity: .72;
}

/* ── the table ───────────────────────────────────────────────────────────*/

.xc-co { display: flex; flex-direction: column; }

.xc-co__head,
.xc-co__row {
    display: grid;
    align-items: center;
    gap: 14px;
    padding-inline: 6px;
}

.xc-co__head {
    padding-block: 0 10px;
    border-block-end: 1px solid var(--line);
}

.xc-co__head > span {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: .13em;
    color: rgba(var(--ink), .32);
    text-transform: uppercase;
}

.xc-co__row {
    padding-block: 13px;
    border-block-end: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    transition: background 150ms;
    animation: xc-rank-in 380ms cubic-bezier(.2, .8, .25, 1) backwards;
    animation-delay: calc(var(--i) * 40ms);
}

.xc-co__row:last-of-type { border-block-end: 0; }
.xc-co__row:hover { background: rgba(var(--ink), .028); }

/* The name, with the same tinted mark the rest of the console gives a
   workspace. Six identical grey marks would be decoration; tinted to the
   company's tier it is the column read second. */
.xc-co__name { display: flex; align-items: center; gap: 11px; min-inline-size: 0; }

.xc-co__mark {
    inline-size: 30px;
    block-size: 30px;
    border-radius: 9px;
    background: rgba(var(--tint), .13);
    color: rgb(var(--tint));
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.xc-co__title {
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: plaintext;
}

.xc-co__area {
    font-size: 13.4px;
    color: rgba(var(--ink), .55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: plaintext;
}

.xc-co__people {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: rgba(var(--ink), .55);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── the two pills a row carries ─────────────────────────────────────────*/

.xc-tier,
.xc-health {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    line-height: 1.35;
    border-radius: 20px;
    padding: 4px 11px;
    white-space: nowrap;
    flex: none;
    color: rgb(var(--tint));
    background: rgba(var(--tint), .12);
}

.xc-health { font-weight: 500; }

/* ── open, edit, suspend ─────────────────────────────────────────────────*/

.xc-rowact { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }

.xc-rowact__one {
    inline-size: 30px;
    block-size: 30px;
    border-radius: 9px;
    border: 1px solid rgba(var(--tint), .25);
    background: rgba(var(--tint), .09);
    color: rgb(var(--tint));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
    padding: 0;
    transition: background 150ms, transform 150ms;
}

.xc-rowact__one:hover { background: rgba(var(--tint), .18); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
    .xc-co__row,
    .xc-live::before {
        animation: none;
    }
}

/* The count on a rail entry. Mono because it is a quantity, and dim because
   it is the second thing read on that line, never the first. */
.xc-nav-n {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    flex: none !important;
    min-inline-size: 20px;
    text-align: center;
    border-radius: 20px;
    padding: 2px 6px;
    background: rgba(var(--rail-ink), .1);
    color: rgba(var(--rail-ink), .55);
}

/* ══ the new-company sheet ════════════════════════════════════════════════*/

/* ── seats, as a slider with the number said out loud ────────────────────
 *
 * A number field would be more precise and worse: the decision is "a few" or
 * "a lot", the range makes that one gesture, and the figure underneath means
 * nobody has to read a thumb position to know what they picked.
 */
.xc-range { display: flex; flex-direction: column; gap: 7px; }

.xc-range > input[type="range"] {
    inline-size: 100%;
    appearance: none;
    background: transparent;
    cursor: pointer;
    margin: 6px 0 0;
}

.xc-range > input[type="range"]::-webkit-slider-runnable-track {
    block-size: 4px;
    border-radius: 4px;
    background: rgba(var(--ink), .1);
}

.xc-range > input[type="range"]::-moz-range-track {
    block-size: 4px;
    border-radius: 4px;
    background: rgba(var(--ink), .1);
}

.xc-range > input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    inline-size: 16px;
    block-size: 16px;
    border-radius: 50%;
    background: var(--acc);
    border: 0;
    margin-block-start: -6px;
    box-shadow: 0 2px 8px var(--glow);
}

.xc-range > input[type="range"]::-moz-range-thumb {
    inline-size: 16px;
    block-size: 16px;
    border-radius: 50%;
    background: var(--acc);
    border: 0;
    box-shadow: 0 2px 8px var(--glow);
}

.xc-range > input[type="range"]:focus-visible { outline: 2px solid var(--peri); outline-offset: 4px; }

.xc-range__said {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--acc);
}

/* ── a person, and what they are allowed to see ──────────────────────────*/

.xc-mem {
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: rgba(var(--ink), .035);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 11px 12px;
}

.xc-mem__top { display: flex; align-items: center; gap: 9px; }

.xc-mem__face {
    inline-size: 28px;
    block-size: 28px;
    border-radius: 50%;
    background: rgba(154, 73, 214, .14);
    color: rgb(154, 73, 214);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 600;
    flex: none;
}

/* Underlined rather than boxed: four boxes stacked in a card is a form
   inside a form, and the card is already the thing being filled in. */
.xc-mem__in {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    border-block-end: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
    padding: 6px 2px;
    transition: border-color 150ms;
}

.xc-mem__in:focus { outline: none; border-block-end-color: var(--acc); }
.xc-mem__in::placeholder { color: rgba(var(--ink), .32); }

.xc-mem__x {
    inline-size: 28px;
    block-size: 28px;
    border-radius: 8px;
    border: 1px solid rgba(214, 69, 69, .25);
    background: rgba(214, 69, 69, .08);
    color: #d64545;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
    padding: 0;
    transition: background 150ms, opacity 150ms;
}

.xc-mem__x:hover:not(:disabled) { background: rgba(214, 69, 69, .16); }
.xc-mem__x:disabled { opacity: .3; cursor: not-allowed; }

.xc-roles { display: flex; gap: 6px; flex-wrap: wrap; padding-inline-start: 37px; }

.xc-roles__one {
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    background: rgba(var(--ink), .055);
    color: rgba(var(--ink), .55);
    transition: background 150ms, color 150ms, border-color 150ms;
}

.xc-roles__one:hover { background: rgba(var(--ink), .09); }

.xc-roles__one[data-on] {
    background: rgba(var(--tint), .12);
    border-color: rgba(var(--tint), .45);
    color: rgb(var(--tint));
    font-weight: 500;
}

/* Dashed, because it is an invitation to add rather than an action to take. */
.xc-addrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    inline-size: 100%;
    padding: 13px;
    border-radius: 14px;
    border: 1px dashed var(--line);
    background: transparent;
    color: rgba(var(--ink), .5);
    font-family: inherit;
    font-size: 13.5px;
    cursor: pointer;
    transition: border-color 150ms, color 150ms, background 150ms;
}

.xc-addrow:hover {
    border-color: var(--acc);
    color: var(--acc);
    background: rgba(var(--ink), .02);
}

/* ── the card that says what it will be ──────────────────────────────────*/

.xc-sum__cap {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(var(--ink), .3);
}

.xc-sum {
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background: var(--card);
}

.xc-sum__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 15px;
    background: var(--grad);
    color: #fff;
}

.xc-sum__icon {
    inline-size: 30px;
    block-size: 30px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.xc-sum__name {
    font-weight: 600;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: plaintext;
}

.xc-sum__body { padding: 15px; display: flex; flex-direction: column; gap: 11px; }

.xc-sum__big {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 27px;
    letter-spacing: -.02em;
    color: var(--text);
    line-height: 1.1;
}

.xc-sum__chips { display: flex; gap: 7px; flex-wrap: wrap; }

.xc-sum__list { margin: 4px 0 0; display: flex; flex-direction: column; gap: 9px; }

.xc-sum__list > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 12.5px;
}

.xc-sum__list dt { color: rgba(var(--ink), .45); flex: none; }

.xc-sum__list dd {
    margin: 0;
    flex: 1;
    min-inline-size: 0;
    text-align: end;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: plaintext;
}

.xc-sum__say {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(var(--ink), .45);
    text-wrap: pretty;
}

/*
 * A sheet's own colour, on the button that commits it.
 *
 * .xc-primary carries the product's indigo gradient, which is right nearly
 * everywhere and wrong here: a sheet passes its own accent for the header,
 * the segmented control and the slider, and the one button that finishes the
 * job was the only thing on it still indigo.
 */
.xc-sheet__foot .xc-primary {
    background: var(--grad);
    box-shadow: 0 12px 28px var(--glow);
}

/*
 * Let the member rows shrink.
 *
 * A grid item is `min-width: auto` by default, so it refuses to go narrower
 * than its content — and two text inputs have an intrinsic width of about
 * twenty characters each whatever `flex: 1` says. The chain from the grid cell
 * down to the input has to opt out at every step or the whole sheet grows a
 * horizontal scrollbar, which is how this was found.
 */
.xc-grp .xc-f--wide,
.xc-mem,
.xc-mem__top {
    min-inline-size: 0;
}

/*
 * A tooltip on a control at the right edge opens to the left.
 *
 * [data-tip] puts its bubble after the element, which is right for the rail
 * it was written for — icons against the left edge with a page to grow into.
 * On a row's trailing actions there is nothing to the right, so a 168px
 * bubble hung off the end of the sheet and gave the whole body a horizontal
 * scrollbar. Nothing about that looks like a tooltip; it looks like the form
 * is too wide.
 */
.xc-mem__x[data-tip]::after,
.xc-rowact__one[data-tip]::after {
    inset-inline-start: auto;
    inset-inline-end: calc(100% + 10px);
}

/* ══ the audit trail, as a table ══════════════════════════════════════════
 *
 * Five columns because there are five questions — who, in what capacity, did
 * what, from where, and what else. It was one line of mono text with every
 * fact as an identical grey chip, which made the answer to any one of them
 * cost the same reading as the answer to all five.
 */

.xc-au { display: flex; flex-direction: column; }

.xc-au__head,
.xc-au__row > summary {
    display: grid;
    align-items: center;
    gap: 14px;
    padding-inline: 8px;
}

.xc-au__head {
    padding-block: 0 10px;
    border-block-end: 1px solid var(--line);
}

.xc-au__head > span {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: .13em;
    color: rgba(var(--ink), .32);
    text-transform: uppercase;
}

.xc-au__row {
    border-block-end: 1px solid var(--line);
    border-radius: 10px;
    animation: xc-rank-in 340ms cubic-bezier(.2, .8, .25, 1) backwards;
    animation-delay: calc(var(--i) * 30ms);
}

.xc-au__row:last-of-type { border-block-end: 0; }

.xc-au__row > summary {
    padding-block: 12px;
    cursor: pointer;
    list-style: none;
    border-radius: 10px;
    transition: background 150ms;
}

/* Safari draws its own triangle and puts it in the first column. */
.xc-au__row > summary::-webkit-details-marker { display: none; }

.xc-au__row > summary:hover { background: rgba(var(--ink), .028); }
.xc-au__row[open] > summary { background: rgba(var(--tint), .05); }

.xc-au__row > summary:focus-visible {
    outline: 2px solid var(--peri);
    outline-offset: -2px;
}

/* ── who ─────────────────────────────────────────────────────────────────*/

.xc-au__who { display: flex; align-items: center; gap: 10px; min-inline-size: 0; }

.xc-au__robot {
    inline-size: 28px;
    block-size: 28px;
    border-radius: 50%;
    background: rgba(var(--ink), .07);
    color: rgba(var(--ink), .45);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.xc-au__names { display: flex; flex-direction: column; gap: 1px; min-inline-size: 0; }

.xc-au__name {
    font-size: 13.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: plaintext;
}

.xc-au__mail {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    color: rgba(var(--ink), .38);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── what they did ───────────────────────────────────────────────────────
 *
 * The colour is the point. A screen of identical grey rows makes somebody
 * read all of them to find the one that matters; four colours means the eye
 * finds it first and reads second. The dot carries it rather than the text,
 * because a whole column of coloured mono is a column nobody can scan.
 */
.xc-au__act {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    color: var(--text);
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xc-au__pip {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: rgb(var(--tint));
    flex: none;
    box-shadow: 0 0 0 3px rgba(var(--tint), .16);
}

/* ── from where, and when ────────────────────────────────────────────────*/

.xc-au__where { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }

.xc-au__at {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--ink), .7);
}

.xc-au__from {
    font-size: 11.5px;
    color: rgba(var(--ink), .38);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xc-au__none { font-size: 12.5px; color: rgba(var(--ink), .28); }

/* ── the rest of it ──────────────────────────────────────────────────────*/

.xc-au__open {
    display: flex;
    justify-content: flex-end;
    color: rgba(var(--ink), .3);
    transition: transform 200ms, color 150ms;
}

.xc-au__row[open] .xc-au__open { transform: rotate(180deg); color: rgb(var(--tint)); }

.xc-au__detail {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 8px 14px 46px;
    animation: xc-rank-in 220ms cubic-bezier(.2, .8, .25, 1);
}

[dir="rtl"] .xc-au__detail { padding: 0 46px 14px 8px; }

.xc-au__pair {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(var(--ink), .04);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 5px 10px;
    max-inline-size: 100%;
}

.xc-au__pair > em {
    font-style: normal;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(var(--ink), .38);
    flex: none;
}

.xc-au__pair > b {
    font-weight: 500;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: plaintext;
}

@media (prefers-reduced-motion: reduce) {
    .xc-au__row,
    .xc-au__detail {
        animation: none;
    }

    .xc-au__open { transition: none; }
}