/**
 * Vesper · the community home: module chromes, the facade and every community block
 * (design spec §6.5–§6.7, §7, §8; boards ref/vesper-desktop and ref/vesper-mobile).
 *
 *  1. Avatars, stacks, the count bubble
 *  2. Shared pieces: tags, CTA links, large / ink buttons, meters, card links, blocks
 *  3. Module chromes: tsSection (section head row), tsPanel, tsCard, tsBare
 *  4. Home rows: spanning heads, stacking, column rhythm
 *  5. Welcome back strip
 *  6. Hero: copy, calls to action, the sign row and the facade
 *  7. Talking now: thread bubbles
 *  8. Around the club and Groups panels
 *  9. On this week: week strip and event cards
 * 10. Route map
 * 11. The board, badges, your standing
 * 12. Your turn: quiz and poll cards
 * 13. Learn something and From the editors
 * 14. The marigold band and the ride-sheet link
 * 15. Phones (< 40rem)
 * 16. Hover (fine pointers only)
 *
 * Every rule sits under a template class and declares its own type, spacing and list styles,
 * so Tailwind Preflight or a Bootstrap-off page changes nothing (addendum A6.3). Colours are
 * tokens only, so the three presets and both schemes follow; the band is scheme-invariant.
 *
 * @copyright   Copyright (C) 2026 BulaSikku Technologies Private Limited. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

/* ==========================================================================
   1. Avatars, stacks, the count bubble
   ========================================================================== */

/* The module picks a tone from user_id % 6; Vesper has five avatar grounds, so tone 5 reuses
   the slate ground of tone 1. */
.ts-avatar {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    overflow: hidden;
    border-radius: 50%;
    background-color: var(--vs-avatar-1);
    box-shadow: inset 0 0 0 1px var(--vs-hairline);
    color: var(--vs-avatar-fg);
    font-family: var(--ec-font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
}

.ts-avatar--tone-0 { background-color: var(--vs-avatar-1); }
.ts-avatar--tone-1 { background-color: var(--vs-avatar-2); }
.ts-avatar--tone-2 { background-color: var(--vs-avatar-3); }
.ts-avatar--tone-3 { background-color: var(--vs-avatar-4); }
.ts-avatar--tone-4 { background-color: var(--vs-avatar-5); }
.ts-avatar--tone-5 { background-color: var(--vs-avatar-2); }

.ts-avatar__img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.ts-avatar__initials {
    letter-spacing: 0.02em;
}

.ts-avatar .vs-art {
    inline-size: 100%;
    block-size: 100%;
    color: var(--ec-fg-2);
}

/* Presence: a ground-coloured gap, then a 2px signal ring (focus uses the same geometry). */
.ts-avatar--online {
    overflow: visible;
    box-shadow: 0 0 0 2px var(--vs-ring-gap, var(--ec-bg)), 0 0 0 4px var(--vs-signal);
}

.ts-avatar--online .ts-avatar__img {
    border-radius: inherit;
}

/* Stacked avatars: the hero's "inside right now" (28px, ringed) and the event attendees (22px). */
.vs-stack {
    display: inline-flex;
    flex: none;
    align-items: center;
    padding: 0.25rem;
}

.vs-stack__item {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    font-size: 0.625rem;
}

.vs-stack__item .ts-avatar__initials {
    letter-spacing: 0;
}

.vs-stack__item + .vs-stack__item {
    margin-inline-start: -0.5rem;
}

.vs-stack__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--ec-surface-2);
    box-shadow: 0 0 0 2px var(--vs-ring-gap, var(--ec-bg)), 0 0 0 4px var(--vs-signal);
    color: var(--ec-fg);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.vs-stack--s {
    padding: 0;
}

/* Event attendees (§6.5): 24px discs, initials at 40% (10px), a 2px ground ring, a 4px overlap. */
.vs-stack--s {
    padding-inline-start: 2px;
}

.vs-stack--s .vs-stack__item {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    box-shadow: 0 0 0 2px var(--vs-ring-gap, var(--ec-surface));
    font-size: 0.625rem;
}

.vs-stack--s .vs-stack__item + .vs-stack__item {
    margin-inline-start: -0.25rem;
}

/* Count bubble: marigold with ink in the dark; a lit chip with a brass edge in the light,
   where ink on brass would fall short of 4.5:1. */
.vs-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.125rem;
    block-size: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: 0.5625rem;
    background-color: var(--ec-accent);
    color: var(--ec-accent-fg);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
}

[data-color-scheme="light"] .vs-count {
    background-color: var(--vs-lit);
    box-shadow: inset 0 0 0 1px var(--vs-signal);
    color: var(--vs-accent-ink);
}

/* ==========================================================================
   2. Shared pieces
   ========================================================================== */

/* Line art: 1.5px strokes in the text-2 colour, one stroke in the signal colour. */
.vs-art {
    display: block;
    color: var(--ec-fg-2);
}

.vs-art .vs-art__hot {
    stroke: var(--vs-signal);
}

/* Tags and badges: 24px, bold 14px single-line labels (lead decision A4.1). */
.vs-tag {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.25rem;
    block-size: 1.5rem;
    margin: 0;
    padding: 0 0.5rem;
    border-radius: var(--vs-r-tag);
    background-color: var(--ec-surface-2);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: var(--vs-t-tag);
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.vs-tag svg {
    flex: none;
    inline-size: 0.875rem;
    block-size: 0.875rem;
    stroke-width: 2;
}

.vs-tag--success {
    background-color: var(--vs-success-bg);
    color: var(--vs-success);
}

.vs-tag--success svg {
    stroke-width: 2.25;
}

.vs-tag--lit {
    background-color: var(--vs-lit);
    color: var(--vs-accent-ink);
}

.vs-tag--danger {
    background-color: var(--vs-danger-bg);
    color: var(--vs-danger);
}

.vs-tag--outline {
    box-shadow: inset 0 0 0 1px var(--ec-border);
    background-color: var(--ec-surface);
    color: var(--ec-fg-2);
}

/* CTA link: marigold ink, bold, 2px underline, trailing arrow (signature detail 12). */
.vs-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--vs-accent-ink);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    cursor: pointer;
}

.vs-link-cta svg {
    flex: none;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    stroke-width: 1.75;
    transition: transform var(--ec-dur-2) var(--ec-ease);
}

.vs-link-cta--l {
    min-block-size: 3.25rem;
    padding: 0 0.25rem;
    font-size: 1.125rem;
    text-underline-offset: 5px;
}

/* Large buttons (hero and band) and the ink button on marigold. */
.vs-btn--l {
    min-block-size: 3.25rem;
    padding: 0 1.5rem;
    font-size: 1.125rem;
}

.vs-btn--ink {
    background-color: var(--vs-ink);
    box-shadow: none;
    color: var(--ec-accent);
}

.vs-btn--ink:focus-visible {
    outline: 2px solid var(--vs-ink);
    outline-offset: 3px;
}

.vs-btn--ink:active {
    background-color: #000;
}

/* Meter: 10px, lit track, signal fill (poll options, standing, course progress). */
.vs-meter {
    display: block;
    block-size: 0.625rem;
    overflow: hidden;
    border-radius: var(--vs-r-bar);
    background-color: var(--vs-lit);
}

.vs-meter__fill {
    display: block;
    block-size: 100%;
    background-color: var(--vs-signal);
}

/* A block's main part, its "more" link and meta line (the section chrome moves them into its
   head row, 3). Outside a section they simply stack. */
.vs-block {
    display: flex;
    flex-direction: column;
    gap: var(--vs-s-4);
    margin: 0;
}

.vs-block__main {
    min-inline-size: 0;
}

.ts-sec__meta {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: var(--vs-t-label);
    font-weight: 400;
    line-height: 1.5rem;
}

.ts-sec__more {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.2;
}

/* ==========================================================================
   3. Module chromes
   ========================================================================== */

/* tsSection: one head row (H2, subtitle or the block's meta line, the block's "All …" link on
   the right), 32px above the content. The head and body boxes dissolve into the section grid. */
.ts-sec {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--vs-s-4);
    row-gap: var(--vs-s-8);
    margin: 0;
    padding: 0;
}

.ts-sec > .ts-sec__head,
.ts-sec > .ts-sec__body,
.ts-sec > .ts-sec__body > .vs-block {
    display: contents;
}

.ts-sec > .ts-sec__body > *,
.ts-sec > .ts-sec__body > .vs-block > * {
    grid-column: 1 / -1;
}

.ts-sec .ts-sec__title {
    grid-row: 1;
    grid-column: 1;
    align-self: baseline;
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: var(--vs-t-h2);
    font-stretch: var(--vs-disp-stretch);
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-transform: none;
    text-wrap: balance;
}

.ts-sec .ts-sec__sub,
.ts-sec > .ts-sec__body > .vs-block > .ts-sec__meta {
    grid-row: 1;
    grid-column: 2;
    align-self: baseline;
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: var(--vs-t-label);
    font-weight: 400;
    line-height: 1.5rem;
}

.ts-sec:has(.ts-sec__sub) .ts-sec__meta,
.ts-sec--untitled .ts-sec__meta {
    display: none;
}

.ts-sec > .ts-sec__body > .vs-block > .ts-sec__more {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
}

.ts-sec--untitled,
.ts-sec--untitled > .ts-sec__body > .vs-block {
    display: block;
}

/* tsPanel: a bubble card with an H3 in Mona Sans and a head link at the top right. */
.ts-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--vs-s-4);
    margin: 0;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--vs-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--vs-glow);
    --vs-ring-gap: var(--ec-surface);
}

.ts-panel .ts-panel__title {
    min-block-size: 1.5rem;
    margin: 0;
    padding-inline-end: 6rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.25rem;
    font-stretch: var(--vs-disp-stretch);
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.5rem;
    text-transform: none;
}

.vs-panel__more {
    position: absolute;
    inset-block-start: 1.25rem;
    inset-inline-end: 1.5rem;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5rem;
}

.vs-panel__more a {
    display: inline-block;
    margin-block: -0.625rem;
    padding-block: 0.625rem;
    color: var(--vs-accent-ink);
    font-weight: 700;
    text-decoration: none;
}

/* tsCard: a plain bubble card (the poll). On the surface band it is raised to surface-2. */
.ts-card {
    display: flex;
    flex-direction: column;
    gap: var(--vs-s-4);
    margin: 0;
    padding: 1.375rem 1.5rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--vs-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--vs-glow);
}

.ts-card .ts-card__title {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: var(--vs-t-title-l);
    font-style: normal;
    font-weight: 700;
    line-height: 1.625rem;
    text-transform: none;
}

.ts-bare {
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   4. Home rows
   ========================================================================== */

/* Several modules in one column: panels 16px apart, the board and its badges 20px. */
.ts-pos-top-b,
.ts-pos-bottom-a,
.ts-pos-bottom-b {
    display: flex;
    flex-direction: column;
    gap: var(--vs-s-4);
}

.ts-pos-bottom-a {
    gap: var(--vs-s-5);
}

.ts-row[data-ts-row="band"] .ts-card,
.ts-row[data-ts-row="band"] .vs-quiz {
    background-color: var(--ec-surface-2);
    --vs-ring-gap: var(--ec-surface-2);
}

/* Paired sections stack until there is room for two columns side by side (design §4.2). */
@media (width < 60rem) {
    .ts-row:is([data-ts-row="top-1"], [data-ts-row="top-2"], [data-ts-row="band"], [data-ts-row="bottom-2"]) > .ts-col {
        grid-column: 1 / -1;
    }
}

@media (min-width: 60rem) {
    /* "Talking now" and "On this week" head the whole row: their "All …" link sits at the row's
       right edge and the second column starts level with the first list. */
    .ts-row:is([data-ts-row="top-1"], [data-ts-row="top-2"]) {
        position: relative;
    }

    .ts-row[data-ts-row="top-1"] > .ts-pos-top-a .ts-sec > .ts-sec__body > .vs-block > .ts-sec__more,
    .ts-row[data-ts-row="top-2"] > .ts-pos-top-c .ts-sec > .ts-sec__body > .vs-block > .ts-sec__more {
        position: absolute;
        inset-block-start: 0.125rem;
        inset-inline-end: 0;
    }

    .ts-row[data-ts-row="top-1"]:has(> .ts-pos-top-a .ts-sec__title) > .ts-pos-top-b,
    .ts-row[data-ts-row="top-2"]:has(> .ts-pos-top-c .ts-sec__title) > .ts-pos-top-d {
        padding-block-start: 5rem;
    }

    /* The board and Your turn: 680 / 552 at 1440 (design §4.2), not the 7 / 5 grid split. */
    .ts-row[data-ts-row="band"]:has(> .ts-pos-bottom-a:not(:empty)):has(> .ts-pos-bottom-b:not(:empty)) {
        grid-template-columns: minmax(0, 680fr) minmax(0, 552fr);
    }

    .ts-row[data-ts-row="band"]:has(> .ts-pos-bottom-a:not(:empty)):has(> .ts-pos-bottom-b:not(:empty)) > .ts-col {
        grid-column: auto;
    }
}

/* ==========================================================================
   5. Welcome back strip (members, below-top)
   ========================================================================== */

.vs-welcome {
    display: flex;
    align-items: center;
    gap: var(--vs-s-3);
    min-block-size: 4.25rem;
    margin-inline-end: -0.5rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
}

.vs-welcome__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--vs-r-bubble-s);
    background-color: var(--vs-lit);
    box-shadow: inset 0 3px 0 var(--vs-signal);
    color: var(--vs-lit-fg);
}

.vs-welcome__icon svg {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    stroke-width: 1.75;
}

.vs-welcome__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-inline-size: 0;
}

.vs-welcome__title {
    margin: 0;
    color: var(--ec-fg);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.375rem;
}

.vs-welcome__note {
    margin: 0;
    overflow: hidden;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vs-welcome__lead {
    color: var(--ec-fg);
    font-weight: 700;
}

.vs-welcome__link {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.125rem;
    min-block-size: 2.75rem;
    padding: 0 0.5rem;
    color: var(--vs-accent-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.vs-welcome__link svg {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    stroke-width: 1.75;
}

/* ==========================================================================
   6. Hero: copy, calls to action, the sign row and the facade
   ========================================================================== */

/* The hero position holds up to four modules (visitor or member copy, the actions, the rooms).
   Their boxes dissolve so the copy, actions, presence line and facade share one layout. */
.ts-pos-hero {
    display: flex;
    flex-direction: column;
}

.ts-pos-hero > .ts-bare:has(> .vs-hero, > .vs-herocta, > .vs-rooms),
.ts-pos-hero .vs-hero,
.ts-pos-hero .vs-rooms {
    display: contents;
}

.ts-pos-hero > :is(.ts-bare, .ts-module, .moduletable) { order: 9; }
.vs-hero > :is(h1, h2) { order: 1; }
.vs-hero > p,
.vs-rooms__sentence { order: 2; }
.vs-herocta { order: 3; }
.vs-rooms__sign { order: 4; }
.vs-facade { order: 5; }

.vs-hero > :is(h1, h2) {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: var(--vs-t-display-xl);
    font-stretch: var(--vs-disp-stretch);
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    text-transform: none;
    text-wrap: balance;
}

.vs-hero > p,
.vs-rooms__sentence {
    max-inline-size: 37.5rem;
    margin: 0;
    padding-block-start: 0.75rem;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: var(--vs-t-lede);
    font-weight: 400;
    line-height: 1.42;
    text-wrap: pretty;
}

.vs-hero > p a {
    color: var(--vs-accent-ink);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

/* The presence sentence is the members' lede; visitors read the club blurb and the sign row. */
.ts-guest .vs-rooms__sentence {
    display: none;
}

.vs-herocta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vs-s-3) var(--vs-s-6);
    margin: 0;
    padding-block-start: 1.25rem;
}

/* Sign row: who is inside, and how to read the rooms. */
.vs-rooms__sign {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--vs-s-3) var(--vs-s-6);
    min-block-size: 2.75rem;
    margin: var(--vs-s-12) 0 0;
    font-family: var(--ec-font-body);
}

.vs-rooms__presence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.625rem;
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.5rem;
}

.vs-rooms__presence .vs-stack {
    margin-inline-end: 0.25rem;
}

.vs-rooms__inside {
    color: var(--ec-fg);
    font-size: var(--vs-t-label);
    font-weight: 700;
}

.vs-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem var(--vs-s-6);
    margin: 0;
    padding: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.25rem;
    list-style: none;
}

.vs-legend__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    white-space: nowrap;
}

.vs-legend__item::before {
    content: "";
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    border-radius: var(--vs-r-bar);
}

.vs-legend__item--busiest::before {
    background-color: var(--ec-accent);
}

.vs-legend__item--lit::before {
    background-color: var(--vs-lit);
    box-shadow: inset 0 3px 0 var(--vs-signal);
}

.vs-legend__item--quiet::before {
    background-color: var(--ec-surface);
    box-shadow: inset 0 0 0 1px var(--vs-control);
}

/* The facade: roofline, then the mullion grid (signature detail 1). */
.vs-facade {
    display: flex;
    flex-direction: column;
    gap: var(--vs-s-3);
    margin: var(--vs-s-3) 0 0;
}

.vs-facade__roof {
    display: block;
    block-size: var(--vs-mullion);
    margin-inline: -1rem;
    background-color: var(--ec-border);
}

.vs-facade__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: 12.5rem 12.5rem;
    grid-template-areas:
        "busy busy r1 r2 r3 r3"
        "busy busy r4 r5 r6 r6";
    gap: var(--vs-mullion);
    margin: 0;
    padding: var(--vs-mullion);
    overflow: hidden;
    border-radius: var(--vs-r-bubble);
    background-color: var(--ec-border);
    list-style: none;
}

.vs-facade--n6 .vs-facade__grid { grid-template-areas: "busy busy r1 r2 r3 r3" "busy busy r4 r5 r5 r5"; }
.vs-facade--n5 .vs-facade__grid { grid-template-areas: "busy busy r1 r1 r2 r2" "busy busy r3 r3 r4 r4"; }
.vs-facade--n4 .vs-facade__grid { grid-template-areas: "busy busy r1 r1 r2 r2" "busy busy r3 r3 r3 r3"; }
.vs-facade--n3 .vs-facade__grid { grid-template-areas: "busy busy r1 r1 r2 r2" "busy busy r1 r1 r2 r2"; }
.vs-facade--n2 .vs-facade__grid { grid-template-rows: 15rem; grid-template-areas: "busy busy busy r1 r1 r1"; }

.vs-facade__cell {
    display: flex;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
}

.vs-facade__cell--busy { grid-area: busy; }
.vs-facade__cell--r1 { grid-area: r1; }
.vs-facade__cell--r2 { grid-area: r2; }
.vs-facade__cell--r3 { grid-area: r3; }
.vs-facade__cell--r4 { grid-area: r4; }
.vs-facade__cell--r5 { grid-area: r5; }
.vs-facade__cell--r6 { grid-area: r6; }

.vs-pane {
    display: flex;
    flex: 1;
    gap: var(--vs-s-4);
    min-inline-size: 0;
    padding: 1.25rem 1.375rem;
    background-color: var(--ec-surface);
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    text-decoration: none;
    transition: background-color var(--ec-dur-1) var(--ec-ease);
}

.vs-pane:focus-visible {
    outline: 2px solid var(--ts-focus);
    outline-offset: -4px;
}

.vs-pane__main {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--vs-s-3);
    min-inline-size: 0;
}

.vs-pane__head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-block-size: 1.5rem;
}

.vs-pane__label {
    display: contents;
}

.vs-pane__label > span {
    order: 0;
    font-size: var(--vs-t-label);
    font-weight: 700;
    line-height: 1.5rem;
}

.vs-pane__label > svg {
    flex: none;
    order: 1;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    margin-inline-start: auto;
    stroke-width: 1.75;
}

.vs-pane__head--icon-first .vs-pane__label > svg,
.vs-pane--busiest .vs-pane__label > svg {
    order: -1;
    margin-inline-start: 0;
}

.vs-pane__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-inline-size: 0;
}

.vs-pane__figure {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.vs-pane__value {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: var(--vs-t-numeral-l);
    font-stretch: var(--vs-disp-stretch);
    font-weight: var(--vs-num-weight);
    line-height: 1;
}

.vs-pane__unit {
    font-size: var(--vs-t-body);
    font-weight: 500;
    line-height: 1.375rem;
}

.vs-pane__lines {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-inline-size: 0;
}

.vs-pane__line {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-inline-size: 0;
    font-size: 1rem;
    line-height: 1.25rem;
}

.vs-pane__text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.vs-pane:not(.vs-pane--wide):not(.vs-pane--busiest) .vs-pane__line + .vs-pane__line {
    display: none;
}

.vs-pane--wide .vs-pane__text {
    -webkit-line-clamp: 2;
}

.vs-pane__art {
    flex: none;
    align-self: center;
    inline-size: 9.375rem;
    block-size: 7.5rem;
}

/* Lit: a room with company in the last hour (amber-brown fill, 3px lintel). */
.vs-pane--lit {
    background-color: var(--vs-lit);
    box-shadow: inset 0 3px 0 var(--vs-signal);
    color: var(--ec-fg);
}

.vs-pane--lit .vs-pane__value,
.vs-pane--lit .vs-pane__label > svg {
    color: var(--vs-lit-fg);
}

.vs-pane--lit .vs-pane__line {
    color: var(--ec-fg-2);
}

/* Busiest: the one solid marigold window, ink text, ink focus ring. */
.vs-pane--busiest {
    padding: 1.75rem 2rem;
    background-color: var(--ec-accent);
    color: var(--vs-ink);
    --ts-focus: var(--vs-ink);
}

.vs-pane--busiest .vs-pane__head {
    min-block-size: 1.75rem;
}

.vs-pane--busiest .vs-pane__label > span {
    font-size: 1.375rem;
    line-height: 1.75rem;
}

.vs-pane--busiest .vs-pane__label > svg {
    inline-size: 1.5rem;
    block-size: 1.5rem;
}

.vs-pane__badge {
    display: inline-flex;
    flex: none;
    order: 2;
    align-items: center;
    block-size: 1.625rem;
    margin-inline-start: auto;
    padding: 0 0.625rem;
    border: 1.5px solid var(--vs-ink);
    border-radius: var(--vs-r-tag);
    font-size: var(--vs-t-tag);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.vs-pane--busiest .vs-pane__body {
    gap: var(--vs-s-4);
}

.vs-pane--busiest .vs-pane__value {
    color: var(--vs-ink);
    font-size: var(--vs-t-numeral-hero);
    letter-spacing: -0.02em;
    line-height: 0.9;
}

.vs-pane--busiest .vs-pane__unit {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.75rem;
}

.vs-pane--busiest .vs-pane__lines {
    gap: 0.5rem;
    padding-block-start: var(--vs-s-4);
    border-block-start: 2px solid rgb(11 21 23 / 0.2);
}

.vs-pane--busiest .vs-pane__line {
    font-size: var(--vs-t-body);
    line-height: 1.5rem;
}

.vs-pane--busiest .vs-pane__text {
    -webkit-line-clamp: 2;
}

.vs-pane__disc {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 50%;
    background-color: var(--vs-ink);
    color: var(--ec-accent);
}

.vs-pane__disc svg {
    inline-size: 0.75rem;
    block-size: 0.75rem;
    stroke-width: 2;
}

/* ==========================================================================
   7. Talking now: thread bubbles
   ========================================================================== */

.vs-threads__list {
    display: flex;
    flex-direction: column;
    gap: var(--vs-s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.vs-thread {
    display: flex;
    align-items: flex-start;
    gap: var(--vs-s-3);
    margin: 0;
}

.vs-thread__avatar {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--vs-r-avatar);
    font-size: 1rem;
}

.vs-thread__bubble {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    min-inline-size: 0;
    min-block-size: 5.75rem;
    padding: 1rem calc(1.5rem + 4rem + 1.5rem) 1rem 1.25rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--vs-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--vs-glow);
    transition: border-color var(--ec-dur-1) var(--ec-ease), box-shadow var(--ec-dur-1) var(--ec-ease);
}

.vs-thread--mine .vs-thread__bubble {
    border-color: var(--vs-highlight);
}

.vs-thread__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    min-inline-size: 0;
}

.vs-thread__title {
    margin: 0;
    overflow: hidden;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.625rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vs-thread__link {
    color: inherit;
    text-decoration: none;
}

.vs-thread__link:focus-visible {
    outline: none;
}

.vs-thread__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--vs-r-bubble);
}

/* Card links: the whole bubble is the target, so the focus ring draws round the bubble. */
:is(.vs-thread__link, .vs-event__link, .vs-feature__link, .vs-course__link):focus-visible::after {
    outline: 2px solid var(--ts-focus);
    outline-offset: 2px;
}

/* Event, course and feature cards clip their media (overflow: hidden), which would clip a ring drawn
   outside the stretched link: the card itself carries the ring, or the ring moves inside the edge. */
:is(.vs-event, .vs-course, .vs-feature):has(:is(.vs-event__link, .vs-course__link, .vs-feature__link):focus-visible) {
    outline: 2px solid var(--ts-focus);
    outline-offset: 2px;
}

@supports not selector(:has(*)) {
    :is(.vs-event__link, .vs-feature__link, .vs-course__link):focus-visible::after {
        outline-offset: -3px;
    }
}

.vs-thread__meta {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-block-size: 1.5rem;
    margin: 0;
    overflow: hidden;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.5rem;
    white-space: nowrap;
}

.vs-thread__count {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    inline-size: 4rem;
    transform: translateY(-50%);
}

.vs-thread__count-value {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: var(--vs-t-numeral-s);
    font-stretch: var(--vs-disp-stretch);
    font-weight: var(--vs-num-weight);
    line-height: 1;
}

.vs-thread--hot .vs-thread__count-value {
    color: var(--vs-accent-ink);
}

.vs-thread__count-label {
    color: var(--ec-fg-2);
    font-size: var(--vs-t-tag);
    line-height: 1.125rem;
}

/* Unread: the title keeps its weight, read ones soften (design §6.6). */
.ts-member .vs-thread:not(.vs-thread--unread) .vs-thread__title {
    font-weight: 700;
}

/* ==========================================================================
   8. Around the club and Groups
   ========================================================================== */

.vs-activity,
.vs-groups {
    display: flex;
    flex-direction: column;
    gap: var(--vs-s-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.vs-activity__item {
    display: flex;
    align-items: flex-start;
    gap: var(--vs-s-3);
    margin: 0;
}

.vs-activity__avatar {
    border-radius: var(--vs-r-avatar);
    font-size: 0.9375rem;
}

.vs-activity__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    min-inline-size: 0;
}

.vs-activity__text {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: var(--vs-t-body);
    line-height: 1.375rem;
}

.vs-activity__actor {
    color: var(--ec-fg);
    font-weight: 700;
    text-decoration: none;
}

.vs-activity__group {
    color: var(--ec-fg);
}

.vs-activity__media {
    display: flex;
    gap: 0.375rem;
    margin: 0;
}

.vs-activity__thumb,
.vs-activity__more {
    display: block;
    flex: none;
    inline-size: 3.5rem;
    block-size: 2.5rem;
    border-radius: var(--vs-r-bubble-xs);
    background-color: var(--ec-surface-2);
    object-fit: cover;
}

.vs-activity__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    font-weight: 700;
}

.vs-groups {
    gap: 0.375rem;
}

.vs-groups > li {
    margin: 0;
}

.vs-group {
    display: flex;
    align-items: center;
    gap: var(--vs-s-3);
    min-block-size: 2.25rem;
    margin-block: -0.25rem;
    padding-block: 0.25rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    text-decoration: none;
}

.vs-group__tile {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    overflow: hidden;
    border-radius: var(--vs-r-bubble-s);
    color: var(--vs-avatar-fg);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
}

.vs-group__tile img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.vs-group__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-inline-size: 0;
}

.vs-group__name {
    overflow: hidden;
    font-size: var(--vs-t-body);
    font-weight: 700;
    line-height: 1.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vs-group__count {
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    line-height: 1.125rem;
}

.vs-group__chevron {
    flex: none;
    color: var(--ec-fg-2);
    transition: transform var(--ec-dur-2) var(--ec-ease);
}

/* ==========================================================================
   9. On this week: week strip and event cards
   ========================================================================== */

.vs-events > .vs-block__main {
    display: flex;
    flex-direction: column;
    gap: var(--vs-s-4);
}

.vs-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--vs-mullion);
    min-block-size: 4.5rem;
    margin: 0;
    padding: var(--vs-mullion);
    overflow: hidden;
    border-radius: var(--vs-r-bubble);
    background-color: var(--ec-border);
    list-style: none;
}

.vs-week__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    margin: 0;
    background-color: var(--ec-surface);
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
}

.vs-week__name {
    font-size: var(--vs-t-tag);
    font-weight: 700;
    line-height: 1.125rem;
}

.vs-week__num {
    font-family: var(--ec-font-display);
    font-size: 1.375rem;
    font-stretch: var(--vs-disp-stretch);
    font-weight: var(--vs-num-weight);
    line-height: 1.625rem;
}

.vs-week__day--today {
    background-color: var(--ec-surface-2);
    color: var(--ec-fg);
}

.vs-week__day--lit {
    background-color: var(--vs-lit);
    box-shadow: inset 0 3px 0 var(--vs-signal);
    color: var(--ec-fg);
}

.vs-week__day--lit .vs-week__num {
    color: var(--vs-lit-fg);
}

.vs-events__list {
    display: flex;
    flex-direction: column;
    gap: var(--vs-s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.vs-events__item {
    margin: 0;
}

.vs-event {
    position: relative;
    display: flex;
    min-block-size: 7.25rem;
    overflow: hidden;
    border: 1px solid var(--ec-border);
    border-radius: var(--vs-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--vs-glow);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    transition: border-color var(--ec-dur-1) var(--ec-ease), box-shadow var(--ec-dur-1) var(--ec-ease);
    --vs-ring-gap: var(--ec-surface);
}

.vs-event--going {
    border-color: var(--vs-highlight);
}

.vs-datechip {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    inline-size: 6rem;
    margin: 0;
    border-inline-end: 2px solid var(--ec-border);
    color: var(--ec-fg-2);
}

.vs-datechip__weekday,
.vs-datechip__month {
    font-size: var(--vs-t-tag);
    font-weight: 700;
    line-height: 1.125rem;
}

.vs-datechip__day {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: var(--vs-t-numeral-m);
    font-stretch: var(--vs-disp-stretch);
    font-weight: var(--vs-num-weight);
    line-height: 1;
}

.vs-event--past .vs-datechip__day,
.vs-event--past .vs-event__title {
    color: var(--ec-fg-2);
}

.vs-event__body {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--vs-s-4);
    min-inline-size: 0;
    padding: 1.125rem 1.25rem;
}

.vs-event__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.25rem;
    min-inline-size: 0;
}

.vs-event__title {
    margin: 0;
    overflow: hidden;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vs-event__link {
    color: inherit;
    text-decoration: none;
}

.vs-event__link:focus-visible {
    outline: none;
}

.vs-event__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--vs-r-bubble);
}

.vs-event__meta {
    margin: 0;
    overflow: hidden;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.375rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vs-event__meta-sm {
    display: none;
}

.vs-event__people {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-block-size: 1.5rem;
    margin: 0;
}

.vs-event__going {
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    line-height: 1.25rem;
}

.vs-event__rsvp {
    position: relative;
    z-index: 1;
    flex: none;
    min-block-size: 2.75rem;
    padding: 0 1rem;
    font-size: 1rem;
}

.vs-event__rsvp--on {
    border-color: var(--vs-signal);
    background-color: var(--vs-lit);
    color: var(--vs-lit-fg);
}

.vs-event__rsvp svg {
    inline-size: 1rem;
    block-size: 1rem;
}

.vs-event__chevron {
    display: none;
    flex: none;
    color: var(--ec-fg-2);
}

.vs-event__chevron svg {
    display: block;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    stroke-width: 1.75;
}

/* ==========================================================================
   10. Route map
   ========================================================================== */

.vs-map {
    display: grid;
    grid-template-rows: 3rem minmax(12rem, 17.875rem) auto;
    gap: var(--vs-mullion);
    padding: var(--vs-mullion);
    overflow: hidden;
    border-radius: var(--vs-r-bubble);
    background-color: var(--ec-border);
    font-family: var(--ec-font-body);
}

.vs-map__bar {
    display: flex;
    align-items: stretch;
    gap: var(--vs-s-6);
    min-inline-size: 0;
    padding: 0 1.25rem;
    background-color: var(--ec-surface);
}

.vs-map__tracks {
    display: flex;
    gap: var(--vs-s-6);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.vs-map__tracks > li {
    display: flex;
    min-inline-size: 0;
    margin: 0;
}

.vs-map__track {
    display: block;
    overflow: hidden;
    padding-block-start: 3px;
    text-overflow: ellipsis;
    border-block-end: 3px solid transparent;
    color: var(--ec-fg-2);
    font-size: var(--vs-t-body);
    font-weight: 500;
    line-height: 2.625rem;
    text-decoration: none;
    white-space: nowrap;
}

.vs-map__track--current {
    border-block-end-color: var(--vs-signal);
    color: var(--ec-fg);
    font-weight: 700;
}

.vs-map__track:focus-visible {
    outline-offset: -2px;
}

.vs-map__open {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.375rem;
    margin-inline-start: auto;
    color: var(--vs-accent-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.vs-map__open svg {
    inline-size: 1rem;
    block-size: 1rem;
    stroke-width: 1.75;
}

.vs-map__ground {
    position: relative;
    min-block-size: 0;
    background-color: var(--vs-map-ground);
    background-image:
        linear-gradient(var(--vs-map-street) 2px, transparent 2px),
        linear-gradient(90deg, var(--vs-map-street) 2px, transparent 2px);
    background-position: 14px 30px;
    background-size: 5.75rem 4.5rem;
}

.vs-map__sketch {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    padding: 1rem;
    overflow: visible;
}

.vs-map__casing,
.vs-map__line,
.vs-map__pin,
.vs-map__pin-ring {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vs-map__casing {
    stroke: var(--vs-map-casing);
    stroke-width: 8;
}

.vs-map__line {
    stroke: var(--vs-map-route);
    stroke-width: var(--vs-map-route-width, 3);
}

.vs-map__pin-ring {
    stroke: var(--vs-ink);
    stroke-width: 18;
}

.vs-map__pin {
    stroke: var(--vs-live);
    stroke-width: 14;
}

.vs-map__key {
    position: absolute;
    inset-block-end: 0.75rem;
    inset-inline-start: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--ec-fg);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25rem;
}

.vs-map__key-pin {
    inline-size: 0.875rem;
    block-size: 0.875rem;
    border-radius: 50%;
    background-color: var(--vs-live);
    box-shadow: 0 0 0 2px var(--vs-ink);
}

.vs-map__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--vs-mullion);
    margin: 0;
    padding: 0;
    list-style: none;
}

.vs-stat {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.375rem;
    min-inline-size: 0;
    margin: 0;
    padding: 1.125rem 1.25rem;
    background-color: var(--ec-surface);
}

.vs-stat__value {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: var(--vs-t-numeral-m);
    font-stretch: var(--vs-disp-stretch);
    font-weight: var(--vs-num-weight);
    line-height: 1;
}

.vs-stat__label {
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.375rem;
}

.vs-stat__profile {
    display: block;
    inline-size: 100%;
    block-size: 3rem;
}

.vs-stat__profile-fill {
    fill: var(--vs-lit);
}

.vs-stat__profile-line {
    fill: none;
    stroke: var(--vs-signal);
    stroke-width: 2;
    stroke-linejoin: round;
}

/* ==========================================================================
   11. The board, badges, your standing
   ========================================================================== */

.vs-board {
    display: grid;
    grid-auto-rows: minmax(5rem, auto);
    gap: var(--vs-mullion);
    margin: 0;
    padding: var(--vs-mullion);
    overflow: hidden;
    border-radius: var(--vs-r-bubble);
    background-color: var(--ec-border);
    list-style: none;
}

.vs-leader {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--vs-s-5);
    min-inline-size: 0;
    margin: 0;
    padding: 0.75rem 1.75rem 0.75rem 1.5rem;
    background-color: var(--ec-surface-2);
    font-family: var(--ec-font-body);
    --vs-ring-gap: var(--ec-surface-2);
}

.vs-leader--you {
    background-color: var(--vs-lit);
    --vs-ring-gap: var(--vs-lit);
}

.vs-leader__rank {
    flex: none;
    inline-size: 3.5rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: var(--vs-t-numeral-l);
    font-stretch: var(--vs-disp-stretch);
    font-weight: var(--vs-num-weight);
    line-height: 1;
}

.vs-leader--first .vs-leader__rank {
    color: var(--vs-accent-ink);
}

.vs-leader__avatar {
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: var(--vs-r-avatar);
    font-size: 1.0625rem;
}

.vs-leader__who {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-inline-size: 0;
}

.vs-leader__name {
    max-inline-size: 100%;
    overflow: hidden;
    color: var(--ec-fg);
    font-size: var(--vs-t-title-l);
    font-weight: 700;
    line-height: 1.5rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The row is the name's target (44px+), ringed like the card links. */
.vs-leader__name::after {
    content: "";
    position: absolute;
    inset: 0;
}

.vs-leader__name:focus-visible {
    outline: none;
}

.vs-leader__name:focus-visible::after {
    outline: 2px solid var(--ts-focus);
    outline-offset: -2px;
}

.vs-leader__points {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
}

.vs-leader__value {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: var(--vs-t-numeral-xs);
    font-stretch: var(--vs-disp-stretch);
    font-weight: var(--vs-num-weight);
    line-height: 2rem;
}

.vs-leader__unit {
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    line-height: 1.125rem;
}

.vs-board__gap {
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: center;
}

.vs-board--you {
    margin-block-start: 0.25rem;
}

.vs-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem var(--vs-s-5);
    min-block-size: 3rem;
    font-family: var(--ec-font-body);
}

.vs-badges__label {
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.25rem;
}

.vs-badges__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem var(--vs-s-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.vs-badges__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--ec-fg);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25rem;
    white-space: nowrap;
}

.vs-badges__tag {
    flex: none;
    inline-size: 1.5rem;
    block-size: 2.5rem;
}

.vs-badges__item--open .vs-badges__name {
    color: var(--ec-fg-2);
}

.vs-standing {
    display: flex;
    flex-direction: column;
    gap: var(--vs-s-5);
    padding: 1.25rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--vs-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--vs-glow);
    font-family: var(--ec-font-body);
}

.ts-row[data-ts-row="band"] .vs-standing {
    background-color: var(--ec-surface-2);
    --vs-ring-gap: var(--ec-surface-2);
}

.ts-row[data-ts-row="band"] .vs-standing .vs-tag,
.ts-row[data-ts-row="band"] .vs-neighbour--you {
    background-color: var(--ec-surface);
}

.vs-standing__top {
    display: flex;
    align-items: center;
    gap: var(--vs-s-4);
    min-block-size: 4rem;
}

.vs-standing__place {
    display: flex;
    align-items: baseline;
    margin: 0;
    color: var(--vs-accent-ink);
    font-family: var(--ec-font-display);
    font-stretch: var(--vs-disp-stretch);
}

.vs-standing__rank {
    font-size: 4.5rem;
    font-weight: var(--vs-num-weight);
    letter-spacing: -0.02em;
    line-height: 4rem;
}

.vs-standing__ordinal {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.75rem;
}

.vs-standing__rule {
    flex: none;
    inline-size: 2px;
    block-size: 3rem;
    background-color: var(--ec-border);
}

.vs-standing__score {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    min-inline-size: 0;
}

.vs-standing__points,
.vs-standing__level {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem 0.5rem;
    margin: 0;
}

.vs-standing__level {
    align-items: center;
}

.vs-standing__value {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.625rem;
    font-stretch: var(--vs-disp-stretch);
    font-weight: var(--vs-num-weight);
    line-height: 1.75rem;
}

.vs-standing__unit {
    color: var(--ec-fg);
    font-size: var(--vs-t-body);
    font-weight: 700;
    line-height: 1.375rem;
}

.vs-standing__period,
.vs-standing__of {
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    line-height: 1.25rem;
}

.vs-standing__gap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vs-standing__gap-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin: 0;
}

.vs-standing__behind {
    margin: 0;
    color: var(--ec-fg);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.375rem;
}

.vs-standing__neighbours {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vs-neighbour {
    display: flex;
    align-items: center;
    gap: var(--vs-s-3);
    min-block-size: 3.25rem;
    margin: 0;
    padding: 0 0.5rem;
    border-block-start: 1px solid var(--ec-border);
}

.vs-neighbour--you {
    border-radius: var(--vs-r-bubble-s);
    background-color: var(--ec-surface-2);
}

.vs-neighbour__rank {
    flex: none;
    inline-size: 1.25rem;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-display);
    font-size: 1.375rem;
    font-stretch: var(--vs-disp-stretch);
    font-weight: var(--vs-num-weight);
    line-height: 1.5rem;
}

.vs-neighbour--you .vs-neighbour__rank {
    color: var(--ec-fg);
}

.vs-neighbour__avatar {
    inline-size: 2rem;
    block-size: 2rem;
    font-size: 0.75rem;
}

.vs-neighbour__who {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-inline-size: 0;
}

.vs-neighbour__name {
    overflow: hidden;
    color: var(--ec-fg);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vs-neighbour__level {
    color: var(--ec-fg-2);
    font-size: var(--vs-t-tag);
    line-height: 1.125rem;
}

.vs-neighbour__value {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.125rem;
    font-stretch: var(--vs-disp-stretch);
    font-weight: var(--vs-num-weight);
    line-height: 1.5rem;
}

/* On wide screens the board itself follows, so the card keeps to the numbers. */
@media (min-width: 60rem) {
    .ts-pos-bottom-a:has(.vs-leaders) .vs-standing__neighbours,
    .ts-pos-bottom-a:has(.vs-leaders) .vs-standing-block > .ts-sec__more {
        display: none;
    }
}

/* ==========================================================================
   12. Your turn: quiz and poll cards
   ========================================================================== */

.vs-quiz {
    display: grid;
    grid-template-columns: 10.5rem minmax(0, 1fr);
    min-block-size: 12.25rem;
    overflow: hidden;
    border: 1px solid var(--ec-border);
    border-radius: var(--vs-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--vs-glow);
    font-family: var(--ec-font-body);
}

.vs-quiz__media {
    display: flex;
    align-items: center;
    justify-content: center;
    border-inline-end: 2px solid var(--ec-border);
    background-color: var(--ec-surface);
}

.vs-quiz__media .vs-art {
    inline-size: 100%;
    max-inline-size: 10.375rem;
    block-size: 100%;
    max-block-size: 12.125rem;
}

.vs-quiz__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--vs-s-4);
    min-inline-size: 0;
    padding: 1.375rem 1.5rem;
}

.vs-quiz__text {
    display: flex;
    flex-direction: column;
    gap: var(--vs-s-3);
}

.vs-quiz__title,
.vs-poll__title {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: var(--vs-t-title-l);
    font-style: normal;
    font-weight: 700;
    line-height: 1.625rem;
    text-transform: none;
}

.vs-quiz__meta {
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.375rem;
}

.vs-quiz__action {
    display: flex;
    margin: 0;
}

.vs-quiz__action .ts-button {
    padding: 0 1.125rem;
}

.vs-poll {
    display: flex;
    flex-direction: column;
    gap: var(--vs-s-4);
    font-family: var(--ec-font-body);
}

.vs-poll__question {
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.375rem;
}

.vs-poll__results,
.vs-poll__form {
    display: flex;
    flex-direction: column;
    gap: var(--vs-s-4);
    margin: 0;
}

.vs-poll__results[hidden],
.vs-poll__form[hidden] {
    display: none;
}

.vs-poll__results:focus-visible {
    border-radius: var(--vs-r-bubble-xs);
    outline: 2px solid var(--ts-focus);
    outline-offset: 4px;
}

.vs-poll__options,
.vs-poll__choices,
.vs-poll__plain {
    display: flex;
    flex-direction: column;
    gap: var(--vs-s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.vs-poll__option {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
}

.vs-poll__row {
    display: flex;
    justify-content: space-between;
    gap: var(--vs-s-4);
    font-size: var(--vs-t-body);
    line-height: 1.375rem;
}

.vs-poll__label {
    color: var(--ec-fg);
    font-weight: 500;
}

.vs-poll__pct {
    color: var(--ec-fg);
    font-weight: 700;
}

.vs-poll__option--lead .vs-poll__label {
    font-weight: 700;
}

.vs-poll__option--lead .vs-poll__pct {
    color: var(--vs-accent-ink);
}

.vs-poll__choices > li,
.vs-poll__plain > li {
    margin: 0;
    color: var(--ec-fg);
    font-size: var(--vs-t-body);
    line-height: 1.5rem;
}

.vs-poll__choice {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-block-size: 2.75rem;
    cursor: pointer;
}

.vs-poll__input {
    flex: none;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    margin: 0;
    accent-color: var(--ec-accent);
}

.vs-poll__error {
    margin: 0;
    color: var(--vs-danger);
    font-size: 0.9375rem;
    line-height: 1.25rem;
}

.vs-poll__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem var(--vs-s-4);
    min-block-size: 1.5rem;
    margin: 0;
}

.vs-poll__total,
.vs-poll__state {
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.25rem;
}

.vs-poll__action {
    min-block-size: 2.75rem;
    font-size: 1rem;
}

/* ==========================================================================
   13. Learn something and From the editors
   ========================================================================== */

.vs-courses__list,
.vs-editors > .vs-block__main {
    display: flex;
    flex-direction: column;
    gap: var(--vs-s-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.vs-courses__item {
    margin: 0;
}

.vs-course {
    position: relative;
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    min-block-size: 13rem;
    overflow: hidden;
    border: 1px solid var(--ec-border);
    border-radius: var(--vs-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--vs-glow);
    font-family: var(--ec-font-body);
}

.vs-course__media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 0;
    border-inline-end: 2px solid var(--ec-border);
    background-color: var(--ec-surface-2);
}

.vs-course__image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.vs-course__media .vs-art {
    inline-size: 100%;
    block-size: 100%;
}

.vs-course__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--vs-s-4);
    min-inline-size: 0;
    padding: 1.375rem 1.5rem;
}

.vs-course__head {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-inline-size: 0;
}

.vs-course__title {
    margin: 0;
    overflow: hidden;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.375rem;
    font-stretch: var(--vs-disp-stretch);
    font-style: normal;
    font-weight: 700;
    line-height: 1.75rem;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.vs-course__count {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    margin: 0;
}

.vs-course__value {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: var(--vs-t-numeral-l);
    font-stretch: var(--vs-disp-stretch);
    font-weight: var(--vs-num-weight);
    line-height: 1;
}

.vs-course__unit {
    color: var(--ec-fg-2);
    font-size: var(--vs-t-label);
    line-height: 1.5rem;
}

.vs-course__progress {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    color: var(--ec-fg);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.375rem;
}

.vs-course__foot {
    display: flex;
    align-items: center;
    gap: var(--vs-s-3);
    min-block-size: 2.5rem;
}

.vs-course__avatar,
.vs-feature__avatar {
    border-radius: var(--vs-r-avatar);
    font-size: 0.9375rem;
}

.vs-course__who {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-inline-size: 0;
    margin: 0;
}

.vs-course__name {
    color: var(--ec-fg);
    font-size: var(--vs-t-body);
    font-weight: 700;
    line-height: 1.25rem;
}

.vs-course__role {
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    line-height: 1.25rem;
}

.vs-course__link {
    flex: none;
    margin-inline-start: auto;
    color: var(--vs-accent-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.vs-course__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--vs-r-bubble);
}

.vs-course__link:focus-visible {
    outline: none;
}

.vs-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ec-border);
    border-radius: var(--vs-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--vs-glow);
    font-family: var(--ec-font-body);
}

.vs-feature__media {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 9.375rem;
    overflow: hidden;
    border-block-end: 2px solid var(--ec-border);
    background-color: var(--ec-surface-2);
}

.vs-feature__media .vs-art {
    inline-size: 100%;
    max-inline-size: 38.375rem;
    block-size: 100%;
}

.vs-feature__image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.vs-feature__body {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.25rem 1.5rem;
}

.vs-feature__title {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-stretch: var(--vs-disp-stretch);
    font-style: normal;
    font-weight: 700;
    line-height: 1.875rem;
    text-transform: none;
    text-wrap: pretty;
}

.vs-feature__link {
    color: inherit;
    text-decoration: none;
}

.vs-feature__link:focus-visible {
    outline: none;
}

.vs-feature__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--vs-r-bubble);
}

.vs-feature__byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem var(--vs-s-3);
    min-block-size: 2.5rem;
    margin: 0;
}

.vs-feature__author {
    color: var(--ec-fg);
    font-size: var(--vs-t-body);
    font-weight: 700;
    line-height: 1.25rem;
}

.vs-feature__time {
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.25rem;
}

.vs-feature__badge {
    margin-inline-start: auto;
}

.vs-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vs-rows > li {
    margin: 0;
    border-block-start: 1px solid var(--ec-border);
}

.vs-row {
    display: flex;
    align-items: center;
    gap: var(--vs-s-4);
    min-block-size: 3.1875rem;
    padding: 0 0.25rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    text-decoration: none;
}

.vs-row__thumb {
    display: flex;
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    overflow: hidden;
    border-radius: var(--vs-r-bubble-s);
    background-color: var(--ec-surface-2);
}

.vs-row__thumb .vs-art,
.vs-row__thumb img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.vs-row__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-inline-size: 0;
}

.vs-row__title {
    overflow: hidden;
    font-size: var(--vs-t-body);
    font-weight: 700;
    line-height: 1.375rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--ec-dur-1) var(--ec-ease);
}

.vs-row__meta {
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    line-height: 1.125rem;
}

.vs-row__arrow {
    flex: none;
    color: var(--ec-fg-2);
    transition: transform var(--ec-dur-2) var(--ec-ease);
}

/* ==========================================================================
   14. The marigold band and the ride-sheet link (footer-top)
   ========================================================================== */

.ts-pos-footer-top {
    display: flex;
    flex-direction: column;
    gap: var(--vs-s-5);
    color: var(--vs-band-fg);
}

.ts-pos-footer-top > .ts-bare:has(> .vs-band, > .vs-bandcta, > .vs-news),
.ts-pos-footer-top .vs-band {
    display: contents;
}

.vs-band__stool {
    display: none;
    inline-size: 8.5rem;
    block-size: 13.5rem;
    color: var(--vs-ink);
}

.vs-band__copy {
    display: flex;
    flex-direction: column;
    gap: var(--vs-s-3);
    font-family: var(--ec-font-body);
}

.vs-band__copy > :is(h2, h3) {
    margin: 0;
    color: var(--vs-ink);
    font-family: var(--ec-font-display);
    font-size: var(--vs-t-display-l);
    font-stretch: var(--vs-disp-stretch);
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-transform: none;
    text-wrap: balance;
}

.vs-band__copy > p {
    max-inline-size: 37.5rem;
    margin: 0;
    color: var(--vs-ink);
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    line-height: 1.45;
    text-wrap: balance;
}

.vs-bandcta {
    display: flex;
    margin: 0;
    padding-block-start: 0.5rem;
}

.vs-news {
    display: flex;
    flex-direction: column;
    gap: var(--vs-s-3);
    margin-block-start: var(--vs-s-3);
    font-family: var(--ec-font-body);
}

.vs-news > :is(h2, h3, h4) {
    margin: 0;
    color: var(--vs-ink);
    font-family: var(--ec-font-body);
    font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
    font-style: normal;
    font-weight: 700;
    line-height: 1.375;
    text-transform: none;
}

.vs-news > p {
    margin: 0;
    color: var(--vs-ink);
    font-size: 1.0625rem;
    line-height: 1.5rem;
}

.vs-news > p:last-child {
    display: flex;
}

.vs-news > p:last-child > a:last-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 3.25rem;
    padding: 0 1.25rem;
    border: 2px solid var(--vs-ink);
    border-radius: var(--ec-btn-radius);
    color: var(--vs-ink);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color var(--ec-dur-1) var(--ec-ease);
}

.vs-news > p:last-child > a:last-child:active {
    background-color: rgb(11 21 23 / 0.16);
}

@media (min-width: 60rem) {
    .ts-pos-footer-top {
        display: grid;
        grid-template-columns: 8.5rem minmax(0, 1fr) minmax(16rem, 27.5rem);
        align-items: end;
        column-gap: var(--vs-s-12);
        row-gap: 0;
    }

    .ts-pos-footer-top > :is(.ts-bare, .ts-module, .moduletable) {
        grid-column: 1 / -1;
    }

    .vs-band__stool {
        display: block;
        grid-row: 1 / span 2;
        grid-column: 1;
    }

    .vs-band__copy {
        grid-row: 1;
        grid-column: 2;
        gap: var(--vs-s-4);
    }

    .vs-band__copy > :is(h2, h3) {
        line-height: 1.0625;
    }

    .vs-bandcta {
        grid-row: 2;
        grid-column: 2;
        padding-block-start: var(--vs-s-7);
    }

    /* The sign-up is one composed row in an ink well (the board's email well + button): the
       sentence and the button share the well, so no button floats alone in the band. */
    .vs-news {
        grid-row: 1 / span 2;
        grid-column: 3;
        flex-flow: row wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--vs-s-3) var(--vs-s-4);
        margin: 0;
        padding: var(--vs-s-4) var(--vs-s-4) var(--vs-s-4) var(--vs-s-5);
        border-radius: var(--vs-r-bubble);
        background-color: rgb(11 21 23 / 0.1);
    }

    .vs-news > :is(h2, h3, h4) {
        flex: 1 1 12rem;
    }

    /* Without the stool column's company (no copy module), the actions keep to the left. */
    .ts-pos-footer-top:not(:has(.vs-band)) {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 27.5rem);
    }

    .ts-pos-footer-top:not(:has(.vs-band)) .vs-bandcta { grid-column: 1; }
    .ts-pos-footer-top:not(:has(.vs-band)) .vs-news { grid-column: 2; }
}

/* ==========================================================================
   Hero and facade from 40rem (tablet) and 60rem (desktop)
   ========================================================================== */

@media (min-width: 60rem) {
    .ts-pos-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        column-gap: var(--vs-s-12);
    }

    .ts-pos-hero > :is(.ts-bare, .ts-module, .moduletable) {
        grid-column: 1 / -1;
    }

    .vs-hero > :is(h1, h2) {
        grid-row: 1;
        grid-column: 1 / -1;
        margin-block-end: var(--vs-s-7);
        white-space: nowrap;
    }

    .vs-hero > p,
    .vs-rooms__sentence {
        grid-row: 2;
        grid-column: 1;
        align-self: end;
        padding: 0;
    }

    .vs-herocta {
        grid-row: 2;
        grid-column: 2;
        align-self: end;
        justify-content: flex-end;
        padding: 0;
    }

    .vs-rooms__sign {
        grid-row: 3;
        grid-column: 1 / -1;
    }

    .vs-facade {
        grid-row: 4;
        grid-column: 1 / -1;
    }

    /* Members read the presence sentence as their lede; the sign row keeps the legend. */
    .ts-member .vs-rooms__presence {
        display: none;
    }

    .ts-member .vs-rooms__sign {
        justify-content: flex-end;
    }
}

@media (width < 75rem) {
    /* Rows grow for two-line captions. */
    .vs-facade__grid,
    .vs-facade--n7 .vs-facade__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: minmax(12.5rem, auto) minmax(12.5rem, auto) minmax(10.625rem, auto);
        grid-template-areas: "busy busy r1 r2" "busy busy r3 r3" "r4 r5 r6 r6";
    }

    .vs-facade--n6 .vs-facade__grid { grid-template-areas: "busy busy r1 r2" "busy busy r3 r3" "r4 r4 r5 r5"; }
    .vs-facade--n5 .vs-facade__grid { grid-template-rows: 12.5rem 12.5rem; grid-template-areas: "busy busy r1 r2" "busy busy r3 r4"; }
    .vs-facade--n4 .vs-facade__grid { grid-template-rows: 12.5rem 12.5rem; grid-template-areas: "busy busy r1 r2" "busy busy r3 r3"; }
    .vs-facade--n3 .vs-facade__grid { grid-template-rows: 12.5rem 12.5rem; grid-template-areas: "busy busy r1 r2" "busy busy r1 r2"; }
    .vs-facade--n2 .vs-facade__grid { grid-template-rows: 15rem; grid-template-areas: "busy busy r1 r1"; }

    .vs-pane__art {
        display: none;
    }
}

/* ==========================================================================
   15. Phones (< 40rem): the member board (design §8.1)
   ========================================================================== */

@media (width < 40rem) {
    /* Columns and rows whose every module is curated away on phones (ts-hide-sm) vanish too,
       so no empty band keeps its padding. */
    .ts-row > .ts-col:not(:has(> :not(.ts-hide-sm))) {
        display: none;
    }

    .ts-row:not(:has(> .ts-col > :not(.ts-hide-sm))) {
        display: none;
    }

    /* Section heads: 44px, 28/36 titles, the "All …" link underlined without its arrow. */
    .ts-sec {
        row-gap: 0.5rem;
    }

    .ts-sec .ts-sec__title {
        line-height: 2.25rem;
    }

    .ts-sec .ts-sec__sub,
    .ts-sec > .ts-sec__body > .vs-block > .ts-sec__meta {
        display: none;
    }

    .ts-sec > .ts-sec__body > .vs-block > .ts-sec__more {
        grid-column: 2 / -1;
    }

    .ts-sec__more .vs-link-cta {
        font-size: 1rem;
    }

    .ts-sec__more .vs-link-cta svg {
        display: none;
    }

    /* Hero */
    .vs-hero > p,
    .vs-rooms__sentence {
        line-height: 1.625rem;
    }

    .vs-rooms__sign {
        display: none;
    }

    .ts-pos-hero .vs-facade {
        margin-block-start: var(--vs-s-7);
    }

    .vs-herocta {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .vs-herocta .ts-button {
        min-block-size: 3rem;
        font-size: 1.0625rem;
    }

    .vs-herocta .vs-link-cta {
        align-self: center;
        min-block-size: 2.75rem;
        margin-block-start: 0.5rem;
        font-size: 1.0625rem;
    }

    .vs-herocta--member .vs-link-cta {
        display: none;
    }

    .vs-facade {
        gap: 0.625rem;
    }

    .vs-facade__roof {
        margin-inline: -0.5rem;
    }

    .vs-facade__grid,
    .vs-facade--n7 .vs-facade__grid,
    .vs-facade--n6 .vs-facade__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: minmax(9.375rem, auto) repeat(3, minmax(8.5rem, auto));
        grid-template-areas: "busy busy" "r1 r2" "r3 r4" "r5 r6";
    }

    .vs-facade--n6 .vs-facade__grid { grid-template-areas: "busy busy" "r1 r2" "r3 r4" "r5 r5"; }
    .vs-facade--n5 .vs-facade__grid { grid-template-rows: minmax(9.375rem, auto) repeat(2, minmax(8.5rem, auto)); grid-template-areas: "busy busy" "r1 r2" "r3 r4"; }
    .vs-facade--n4 .vs-facade__grid { grid-template-rows: minmax(9.375rem, auto) repeat(2, minmax(8.5rem, auto)); grid-template-areas: "busy busy" "r1 r2" "r3 r3"; }
    .vs-facade--n3 .vs-facade__grid { grid-template-rows: minmax(9.375rem, auto) minmax(8.5rem, auto); grid-template-areas: "busy busy" "r1 r2"; }
    .vs-facade--n2 .vs-facade__grid { grid-template-rows: minmax(9.375rem, auto) minmax(8.5rem, auto); grid-template-areas: "busy busy" "r1 r1"; }

    .vs-pane {
        padding: 0.875rem 1rem;
    }

    .vs-pane__main {
        gap: 0.5rem;
    }

    .vs-pane__head {
        min-block-size: 1.25rem;
    }

    .vs-pane__label > span {
        font-size: 1rem;
        line-height: 1.25rem;
    }

    .vs-pane__label > svg {
        inline-size: 1.125rem;
        block-size: 1.125rem;
    }

    .vs-pane__body,
    .vs-pane__figure {
        gap: 0.125rem;
    }

    .vs-pane__unit,
    .vs-pane__line {
        overflow: hidden;
        font-size: 0.9375rem;
        line-height: 1.125rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Captions wrap to two lines in the half-width panes instead of breaking mid-word. */
    .vs-pane__line {
        white-space: normal;
    }

    .vs-pane__text,
    .vs-pane--wide .vs-pane__text {
        display: -webkit-box;
        overflow: hidden;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .vs-pane .vs-pane__line + .vs-pane__line {
        display: none;
    }

    .vs-pane--busiest {
        padding: 1rem 1.25rem;
    }

    .vs-pane--busiest .vs-pane__head {
        min-block-size: 1.5rem;
    }

    .vs-pane--busiest .vs-pane__label > span {
        font-size: var(--vs-t-label);
        line-height: 1.5rem;
    }

    .vs-pane--busiest .vs-pane__label > svg {
        inline-size: 1.25rem;
        block-size: 1.25rem;
    }

    .vs-pane__badge {
        block-size: 1.5rem;
        padding: 0 0.5rem;
    }

    .vs-pane--busiest .vs-pane__body {
        gap: 0.375rem;
    }

    .vs-pane--busiest .vs-pane__figure {
        flex-direction: row;
        align-items: baseline;
        gap: 0.75rem;
    }

    .vs-pane--busiest .vs-pane__value {
        line-height: 0.89;
    }

    .vs-pane--busiest .vs-pane__unit {
        font-size: var(--vs-t-label);
        line-height: 1.375rem;
    }

    .vs-pane--busiest .vs-pane__lines {
        padding: 0;
        border: 0;
    }

    .vs-pane--busiest .vs-pane__line {
        font-size: 1rem;
        line-height: 1.25rem;
    }

    .vs-pane--busiest .vs-pane__line:not(:last-child) {
        display: none;
    }

    .vs-pane--busiest .vs-pane__line:last-child {
        display: flex;
    }

    .vs-pane__disc {
        display: none;
    }

    /* Threads: four bubbles, two-line titles, the count folded into the meta row, the author
       carried by the avatar (still read out), the member's own thread highlighted. */
    .vs-threads__list > li:nth-child(n + 5) {
        display: none;
    }

    .vs-thread {
        gap: 0.625rem;
    }

    .vs-thread__avatar {
        inline-size: 2.5rem;
        block-size: 2.5rem;
        font-size: 0.9375rem;
    }

    .vs-thread__bubble {
        align-items: stretch;
        min-block-size: 6.625rem;
        padding: 0.875rem 1rem;
    }

    .vs-thread__body {
        justify-content: space-between;
    }

    .vs-thread__title {
        display: -webkit-box;
        font-size: var(--vs-t-body);
        line-height: 1.375rem;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .vs-thread__meta {
        flex-wrap: wrap;
        gap: 0 0.5rem;
        font-size: 0.9375rem;
        line-height: 1.25rem;
    }

    .vs-thread__author {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .vs-thread__dot {
        display: none;
    }

    :is(.vs-thread--solved, .vs-thread--pinned, .vs-thread--locked) .vs-thread__time {
        display: none;
    }

    .vs-thread__count {
        position: static;
        flex-direction: row;
        align-items: baseline;
        gap: 0.25rem;
        flex: none;
        inline-size: auto;
        margin-inline-start: auto;
        transform: none;
    }

    .vs-thread__count-value {
        font-size: 1.375rem;
        line-height: 1.5rem;
    }

    /* Events: no week strip, no buttons; the card links, "N going" joins the meta line. */
    .vs-week {
        display: none;
    }

    .vs-events__list {
        gap: 0.625rem;
    }

    .vs-event {
        min-block-size: 6.25rem;
    }

    .vs-datechip {
        inline-size: 4rem;
    }

    .vs-datechip__weekday,
    .vs-datechip__month {
        line-height: 1rem;
    }

    .vs-datechip__day {
        font-size: 2.25rem;
        line-height: 2.375rem;
    }

    .vs-event__body {
        gap: 0.5rem;
        padding: 0.875rem 0.75rem 0.875rem 1rem;
    }

    .vs-event__text {
        gap: 0.375rem;
    }

    .vs-event__title {
        display: -webkit-box;
        font-size: var(--vs-t-body);
        line-height: 1.3125rem;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .vs-event__meta {
        font-size: 0.9375rem;
        line-height: 1.25rem;
    }

    .vs-event__meta-lg,
    .vs-event__people,
    .vs-event__rsvp {
        display: none;
    }

    .vs-event__chevron {
        display: inline;
    }

    /* The place gives way first; the going count is never cut. */
    .vs-event__meta-sm {
        display: flex;
        min-inline-size: 0;
    }

    .vs-event__meta-place {
        overflow: hidden;
        min-inline-size: 0;
        text-overflow: ellipsis;
    }

    .vs-event__meta-count {
        flex: none;
        white-space: pre;
    }

    /* Standing: members see their card; the board's rows move to its full page. */
    .ts-member .ts-pos-bottom-a:has(.vs-standing) > .ts-sec:has(.vs-leaders) {
        display: none;
    }

    .vs-leader {
        gap: var(--vs-s-3);
        padding: 0.5rem 0.75rem;
    }

    .vs-leader__rank {
        inline-size: 2rem;
        font-size: 2rem;
    }

    .vs-leader__avatar {
        inline-size: 2.25rem;
        block-size: 2.25rem;
        font-size: 0.8125rem;
    }

    .vs-leader__name {
        font-size: 1rem;
        line-height: 1.25rem;
    }

    .vs-leader__value {
        font-size: 1.125rem;
        line-height: 1.5rem;
    }

    .vs-badges__list {
        flex-wrap: nowrap;
        max-inline-size: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .vs-badges__item {
        scroll-snap-align: start;
    }

    /* Cards */
    .vs-quiz,
    .vs-course {
        grid-template-columns: 6rem minmax(0, 1fr);
        min-block-size: 8.25rem;
    }

    .vs-course__value {
        font-size: 2.5rem;
    }

    /* Band */
    .vs-bandcta .ts-button,
    .vs-news > p:last-child > a:last-child {
        flex: 1;
        min-block-size: 3rem;
        font-size: 1.0625rem;
    }

    .vs-news {
        margin-block-start: var(--vs-s-3);
    }
}

/* ==========================================================================
   16. Hover (fine pointers only; touch gets :active feedback)
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
    .vs-pane--quiet:hover {
        background-color: var(--ec-surface-2);
    }

    .vs-pane--lit:hover {
        background-color: color-mix(in srgb, var(--vs-lit) 85%, var(--ec-accent));
    }

    .vs-pane--busiest:hover {
        background-color: var(--vs-accent-hover);
    }

    .vs-thread__bubble:hover,
    .vs-event:hover,
    .vs-course:hover,
    .vs-feature:hover {
        border-color: var(--vs-control);
        box-shadow: inset 0 1px 0 var(--vs-glow-hover);
    }

    .vs-link-cta:hover {
        color: var(--vs-accent-ink-hover);
        text-underline-offset: 2px;
    }

    .vs-link-cta:hover svg,
    .vs-row:hover .vs-row__arrow {
        transform: translateX(3px);
    }

    .vs-group:hover .vs-group__name,
    .vs-row:hover .vs-row__title {
        color: var(--vs-accent-ink);
    }

    .vs-group:hover .vs-group__chevron {
        transform: translateX(2px);
    }

    .vs-panel__more a:hover,
    .vs-map__open:hover,
    .vs-welcome__link:hover,
    .vs-activity__actor:hover,
    .vs-leader__name:hover {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
    }

    .vs-map__track:not(.vs-map__track--current):hover {
        border-block-end-color: var(--ec-border);
        color: var(--ec-fg);
    }

    .vs-btn--ink:hover {
        background-color: #1b2a2e;
        color: var(--ec-accent);
    }

    .vs-news > p:last-child > a:last-child:hover {
        background-color: rgb(11 21 23 / 0.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vs-link-cta svg,
    .vs-row__arrow,
    .vs-group__chevron {
        transition: none;
    }
}