/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-0cpldbyw29] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-0cpldbyw29] {
    flex: 1;
    min-width: 0;
}

.sidebar[b-0cpldbyw29] {
    background-color: var(--tm-rail);
}

.top-row[b-0cpldbyw29] {
    background-color: var(--tm-surface);
    border-bottom: 1px solid var(--tm-border);
    /* The toggle is the bar's only occupant, and it sits hard right at every width. This was
       `space-between`, which with a single child is indistinguishable from flex-start -- so the
       button sat at the left of an otherwise empty full-width bar. If the brand span in the markup
       above ever comes back, restore `space-between` here rather than adding a second rule. */
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Centered editorial content column; the topbar stays full-width. */
.content[b-0cpldbyw29] {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    /* Vertical breathing room lives here rather than on each page, because every page opens straight into
       its own <h1> and none of them carried any: the heading sat flush against the sticky topbar's border
       and the last card ended flush with the bottom of the scroll. Asymmetric on purpose -- the top gap
       only has to clear a border, while the bottom is what tells a reader the page has actually ended.
       Block-only, so the inline padding from px-4 and the wider desktop override below still apply. */
    padding-block: 1.75rem 3rem;
}

@media (min-width: 641px) {
    .page[b-0cpldbyw29] {
        flex-direction: row;
    }

    .sidebar[b-0cpldbyw29] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-0cpldbyw29] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-0cpldbyw29], article[b-0cpldbyw29] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-0cpldbyw29] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-0cpldbyw29] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-3rm6aefgff] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-3rm6aefgff] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-3rm6aefgff] {
    min-height: 3.5rem;
    background-color: rgba(0, 0, 0, 0.18);
    border-bottom: 1px solid var(--tm-rail-border);
}

.navbar-brand[b-3rm6aefgff] {
    font-family: var(--tm-font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
}

.bi[b-3rm6aefgff] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-3rm6aefgff] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-3rm6aefgff] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-3rm6aefgff] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-people-fill-nav-menu[b-3rm6aefgff] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-people-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5'/%3E%3C/svg%3E");
}

.bi-card-list-nav-menu[b-3rm6aefgff] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-card-list' viewBox='0 0 16 16'%3E%3Cpath d='M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z'/%3E%3Cpath d='M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-1-5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-info-circle-fill-nav-menu[b-3rm6aefgff] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3E%3C/svg%3E");
}

.bi-speedometer2-nav-menu[b-3rm6aefgff] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z'/%3E%3Cpath fill-rule='evenodd' d='M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z'/%3E%3C/svg%3E");
}

.nav-item[b-3rm6aefgff] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-3rm6aefgff] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-3rm6aefgff] {
        padding-bottom: 1rem;
    }

    .nav-item[b-3rm6aefgff]  .nav-link {
        color: var(--tm-rail-text);
        background: none;
        border: none;
        border-radius: 6px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-3rm6aefgff]  a.active {
    background-color: var(--tm-rail-active);
    color: #fff;
    box-shadow: inset 0.18rem 0 0 var(--tm-accent);
}

.nav-item[b-3rm6aefgff]  .nav-link:hover {
    background-color: var(--tm-rail-hover);
    color: #fff;
}

.nav-scrollable[b-3rm6aefgff] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-3rm6aefgff] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-3rm6aefgff] {
        display: none;
    }

    .nav-scrollable[b-3rm6aefgff] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-tyznvd6nip],
.components-reconnect-repeated-attempt-visible[b-tyznvd6nip],
.components-reconnect-failed-visible[b-tyznvd6nip],
.components-pause-visible[b-tyznvd6nip],
.components-resume-failed-visible[b-tyznvd6nip],
.components-rejoining-animation[b-tyznvd6nip] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-tyznvd6nip],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-tyznvd6nip],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-tyznvd6nip],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-tyznvd6nip],
#components-reconnect-modal.components-reconnect-retrying[b-tyznvd6nip],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-tyznvd6nip],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-tyznvd6nip],
#components-reconnect-modal.components-reconnect-failed[b-tyznvd6nip],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-tyznvd6nip] {
    display: block;
}


#components-reconnect-modal[b-tyznvd6nip] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-tyznvd6nip 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-tyznvd6nip 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-tyznvd6nip 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-tyznvd6nip]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-tyznvd6nip 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-tyznvd6nip {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-tyznvd6nip {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-tyznvd6nip {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-tyznvd6nip] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-tyznvd6nip] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-tyznvd6nip] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-tyznvd6nip] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-tyznvd6nip] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-tyznvd6nip] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-tyznvd6nip] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-tyznvd6nip 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-tyznvd6nip] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-tyznvd6nip {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Scoring.razor.rz.scp.css */
/* Page-specific layout only. Colours come from the shared veracity-* / tm-verdict-* classes in app.css. */

/* Segmented 0–100 scale bar (section 1). */
.tm-scale-bar[b-2om2nd2ijo] {
    display: flex;
    height: 2.25rem;
    border-radius: 0.375rem;
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 600;
}

.tm-scale-bar > div[b-2om2nd2ijo] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Inline "pills → result" rows (averaging) and the lifecycle flow. */
.tm-flow[b-2om2nd2ijo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.tm-flow-arrow[b-2om2nd2ijo] {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 1.25rem;
    font-weight: 700;
}
/* /Components/Pages/ScoringSimple.razor.rz.scp.css */
/* Page-specific layout only. Colours come from the shared veracity-* classes in app.css.
   Deliberately not a copy of Scoring.razor.css: this bar carries the band name as well as the range,
   because this page has no verdict-label section beneath it to supply the words. */

.tm-simple-bar[b-zlcz6f202u] {
    display: flex;
    height: 3.5rem;
    border-radius: 0.375rem;
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

.tm-simple-bar > div[b-zlcz6f202u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem;
}

.tm-simple-bar span[b-zlcz6f202u] {
    font-weight: 400;
    font-size: 0.75rem;
    opacity: 0.9;
}
/* /Components/Pages/SessionDetailPage.razor.rz.scp.css */
/* The session's provenance block, which is inline on a wide viewport and a disclosure on a narrow one.

   Exactly one of the two copies is rendered visible, switching at the layout's own breakpoint -- the same
   641px the back link uses, and for the same reason: below it the sidebar stops sitting beside the content
   and the column has no width to spare. display:none rather than visibility, because it also takes the
   hidden copy out of the accessibility tree, so these lines are announced once however wide the screen.

   Scoped to this page rather than dropped into app.css because every element these rules touch is written
   in SessionDetailPage.razor and so carries this page's scope attribute. The paragraphs inside carry
   SessionMeta's instead, which is why nothing here reaches past the wrappers. */
.tm-session-meta-narrow[b-kmh4p5w9a3] {
    display: none;
}

@media (max-width: 640.98px) {
    .tm-session-meta-wide[b-kmh4p5w9a3] {
        display: none;
    }

    .tm-session-meta-narrow[b-kmh4p5w9a3] {
        display: block;
        margin-bottom: 0.5rem;
    }
}

/* The summary reads as a button, not as a heading with a triangle beside it. It is the only control in
   this part of the page and the one thing on it that has to look tappable, and the app-wide
   `details > summary` rule -- accent-coloured and bold -- reads as a link, which invites a navigation
   that never happens.

   The marker is removed twice on purpose. `list-style: none` is the standard route and does nothing in
   Safari, which still paints ::-webkit-details-marker; dropping either line leaves a triangle sitting
   inside the pill on one engine and not the other. */
.tm-session-meta-narrow > summary[b-kmh4p5w9a3] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--tm-border-strong);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    list-style: none;
}

.tm-session-meta-narrow > summary[b-kmh4p5w9a3]::-webkit-details-marker {
    display: none;
}

/* Breathing room between the button and what it opened, and nothing at all when it is shut: a closed
   <details> renders only the summary, so this margin never applies to a collapsed block. */
.tm-session-meta-body[b-kmh4p5w9a3] {
    margin-top: 0.5rem;
}
/* /Components/Shared/ProviderStatus.razor.rz.scp.css */
/* The card header doubles as the <details> toggle, so make it read as clickable. */
.tm-provider-status > summary[b-6r25yg5xng] {
    cursor: pointer;
    user-select: none;
}

.tm-provider-status > summary[b-6r25yg5xng]::marker {
    color: var(--bs-secondary-color);
}

/* Model ids and endpoints are identifiers — keep them monospaced and let long URLs wrap. */
.tm-provider-status dd[b-6r25yg5xng] {
    font-family: var(--bs-font-monospace);
    overflow-wrap: anywhere;
}
/* /Components/Shared/TranscriptPanel.razor.rz.scp.css */
/* The transcript is the one place in the app that shows raw pasted text, so it gets the only <pre> block:
   speaker lines and "[mm:ss.fff - mm:ss.fff]" headers only read correctly with their line breaks intact.
   Wrapped rather than side-scrolled — a transcript line can be a paragraph long, and a horizontal scrollbar
   would make it unreadable — and capped in height so a long debate cannot bury the statements above it. */
.tm-transcript-text[b-6eppvmh3if] {
    max-height: 32rem;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.85rem;
    line-height: 1.5;
    padding: 0.75rem;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-sm);
}
/* /Components/Shared/TwoAxesPanel.razor.rz.scp.css */
/* Layout and the context accent only. Every colour that carries meaning — the veracity ramp on the sample
   badges, the outlined context badge — comes from the shared classes in app.css, so this panel shows the
   reader the same chips they will meet on a statement row rather than a drawing of them. */

.tm-axes[b-vdqpm2anca] {
    display: grid;
    /* Two columns wherever they fit, stacked below ~36rem. Deliberately not a Bootstrap row/col pair: the
       cards must be equal height so the two axes read as peers, and auto-fit gives that for free. */
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.tm-axes-card[b-vdqpm2anca] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.9rem 1rem 1rem;
    border: 1px solid var(--tm-border);
    /* The same 3px top rule .tm-archetype uses to carry a hue, so a panel that names an axis and a panel
       that reports one are recognisably the same device. */
    border-top: 3px solid var(--tm-border-strong);
    border-radius: var(--tm-radius-lg);
    background: var(--tm-surface);
    box-shadow: var(--tm-shadow-sm);
}

/* The omissions axis wears its hue on the card that introduces it — rule, eyebrow, title and a tinted
   ground. This is the one place the convention is being taught rather than used, so it is stated at full
   strength; everywhere else the hue is a badge or a hairline. */
.tm-axes-context[b-vdqpm2anca] {
    border-top-color: var(--tm-context);
    background: var(--tm-context-soft);
}

.tm-axes-rank[b-vdqpm2anca] {
    font-family: var(--tm-font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tm-ink-faint);
}

.tm-axes-context .tm-axes-rank[b-vdqpm2anca] {
    color: var(--tm-context);
}

.tm-axes-name[b-vdqpm2anca] {
    font-family: var(--tm-font-serif);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
    color: var(--tm-ink);
}

.tm-axes-context .tm-axes-name[b-vdqpm2anca] {
    color: var(--tm-context);
}

.tm-axes-body[b-vdqpm2anca] {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--tm-ink-soft);
    margin: 0;
}

/* Pushed to the foot so the sample chips line up across the two cards whatever length the copy runs to. */
.tm-axes-marks[b-vdqpm2anca] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.tm-axes-key[b-vdqpm2anca] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--tm-ink-soft);
}

/* The colour itself, so the sentence naming it has the thing it names sitting next to it. */
.tm-axes-swatch[b-vdqpm2anca] {
    flex: 0 0 auto;
    width: 0.85rem;
    height: 0.85rem;
    margin-top: 0.3rem;
    border-radius: 3px;
    background: var(--tm-context);
}