/**
 * Quorum · community: the designed home and the community blocks (design spec §6.6–6.20, §7, §8).
 *
 * Gap-ruled boards on the paper ground, a 2px ink rule over each section, counter ordinals (they
 * close up when a section is absent), Big Shoulders numerals, mono metadata, square except people.
 * Every element declares its own type, spacing and list styles (addendum A6.3).
 *
 * Sections: 1 avatars and primitives · 2 section chrome on the home · 3 hero board and stats ·
 * 4 welcome strip · 5 latest discussions and boards · 6 this week · 7 top helpers, badges,
 * standing · 8 poll and quiz · 9 courses · 10 routes · 11 worth reading · 12 newsletter ·
 * 13 tablet · 14 phone · 15 hover.
 *
 * @copyright   Copyright (C) 2026 BulaSikku Technologies Private Limited. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

/* ==========================================================================
   1. Avatars and primitives
   Only people are round. mod_studio_community picks a tone from user_id % 6; the six tones map
   onto the first six of Quorum's seven avatar fills (white initials, >= 6.3:1 on every fill).
   ========================================================================== */

.ts-avatar {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    margin: 0;
    border-radius: 50%;
    background-color: var(--q-avatar-1);
    color: #FFFFFF;
    font-family: var(--ec-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
}

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

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

.ts-avatar__initials {
    text-transform: uppercase;
}

/* Presence: a 10px success dot with a 2px surface ring at the bottom-right. */
.ts-avatar--online::after {
    content: "";
    position: absolute;
    inset-block-end: -1px;
    inset-inline-end: -1px;
    inline-size: 0.625rem;
    block-size: 0.625rem;
    border: 2px solid var(--ec-surface);
    border-radius: 50%;
    background-color: var(--q-success);
}

.ts-icon,
.q-glyph {
    display: block;
    flex: none;
}

.q-glyph {
    overflow: visible;
}

/* Tags (design spec §6.5): square, 24px, 14px/600, never pill-shaped. */
.q-tag {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.375rem;
    block-size: 1.5rem;
    margin: 0;
    padding: 0 0.5rem;
    border: 0;
    border-radius: 0;
    background-color: var(--ec-surface-2);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
}

.q-tag > .q-glyph {
    inline-size: 0.875rem;
    block-size: 0.875rem;
}

.q-tag--signal,
.q-tag--you {
    background-color: var(--q-signal);
    color: var(--q-signal-fg);
}

.q-tag--you {
    block-size: 1.375rem;
    padding: 0 0.375rem;
    font-weight: 700;
}

.q-tag--success {
    gap: 0.25rem;
    background-color: var(--q-success-soft);
    color: var(--q-success);
}

.q-tag--accent {
    background-color: var(--q-tint);
    color: var(--q-accent-strong);
}

.q-tag--danger {
    background-color: var(--q-danger-soft);
    color: var(--q-danger);
}

/* Text-arrow link (design spec §6.2 ".q-more"): teal, 2px underline, a trailing arrow. */
.ts-more {
    display: inline-flex;
    align-items: center;
    gap: var(--q-s2);
    min-block-size: 2.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--ec-accent);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: start;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
}

.ts-more__label {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.ts-more--l {
    font-size: 1.125rem;
}

.ts-more--l .ts-more__label {
    text-underline-offset: 6px;
}

.ts-more__icon {
    transition: transform var(--ec-dur-1) var(--ec-ease);
}

/* Large primary button of the hero (design spec §6.2, L 56px). */
.ts-button.q-btn--l {
    gap: var(--q-s3);
    min-block-size: 3.5rem;
    padding: 0 1.75rem;
    font-size: 1.125rem;
}

.q-dot {
    display: inline-block;
    flex: none;
    inline-size: 0.625rem;
    block-size: 0.625rem;
    border-radius: 50%;
    background-color: var(--q-success);
}

/* Square progress bar (design spec §6.14): track on the ground, teal fill; the quartile ticks
   are hairlines over the track and "cut" the fill in the surface colour. */
.q-bar {
    position: relative;
    display: block;
    block-size: 0.875rem;
    margin: 0;
    overflow: hidden;
    background-color: var(--q-track);
}

.q-bar__fill {
    position: relative;
    z-index: 1;
    display: block;
    inline-size: var(--q-fill, 0%);
    block-size: 100%;
    background-color: var(--ec-accent);
}

.q-bar--ticks::before,
.q-bar--ticks::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg,
        transparent calc(25% - 1px), var(--q-tick-c) calc(25% - 1px), var(--q-tick-c) 25%, transparent 25%,
        transparent calc(50% - 1px), var(--q-tick-c) calc(50% - 1px), var(--q-tick-c) 50%, transparent 50%,
        transparent calc(75% - 1px), var(--q-tick-c) calc(75% - 1px), var(--q-tick-c) 75%, transparent 75%);
    pointer-events: none;
}

.q-bar--ticks::before {
    --q-tick-c: var(--ec-border);
}

.q-bar--ticks::after {
    --q-tick-c: var(--ec-surface);
    z-index: 2;
    clip-path: inset(0 calc(100% - var(--q-fill, 0%)) 0 0);
}

/* ==========================================================================
   2. Section chrome on the home (tsSection / tsPanel / tsBare), design spec §6.7
   A numbered section is one grid: the ordinal (a CSS counter, never read aloud) spans the title
   and intro rows, the "more" link sits at the end of the head row, the board follows 28px below.
   The block's own wrapper and the chrome body are "display: contents", so a block can hand its
   intro and its "more" link to the head row. Hidden sections do not count, so the ordinals stay
   consecutive.
   ========================================================================== */

.ts-home .ts-shell {
    counter-reset: q-sec;
}

.ts-home .ts-sec {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "title more"
        "sub   more";
    column-gap: var(--q-s6);
    align-items: end;
    margin: 0;
    padding: var(--q-s5) 0 0;
    border: 0;
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.ts-home .ts-sec.ts-numbered {
    grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr) auto;
    grid-template-areas:
        "num title more"
        "num sub   more";
    counter-increment: q-sec;
}

.ts-home .ts-sec.ts-numbered::before {
    content: counter(q-sec, decimal-leading-zero);
    grid-area: num;
    align-self: end;
    block-size: 5.625rem;
    color: var(--ec-accent);
    font-family: var(--ec-font-display);
    font-size: clamp(4rem, 4.571vw + 2.886rem, 7rem);
    font-weight: 800;
    line-height: 0.8;
    letter-spacing: 0;
    display: flex;
    align-items: flex-end;
    overflow: visible;
}

.ts-home .ts-sec > .ts-sec__head {
    display: contents;
}

.ts-home .ts-sec > .ts-sec__body:has(> .q-block),
.ts-home .ts-sec > .ts-sec__body > .q-block {
    display: contents;
}

.ts-home .ts-sec > .ts-sec__body:not(:has(> .q-block)) {
    grid-column: 1 / -1;
    margin-block-start: var(--q-s7);
}

.ts-home .ts-sec .ts-sec__title {
    grid-area: title;
    margin: 0;
    padding: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: clamp(2rem, 1.143vw + 1.721rem, 2.75rem);
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

.ts-home .ts-sec .ts-sec__sub,
.ts-home .ts-sec .q-sec__intro {
    grid-area: sub;
    text-wrap: pretty;
    margin: var(--q-s2) 0 0;
    padding: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
}

/* Every head alike (design §1.3, §6.7): ordinal, title block and "more" link are bottom-aligned;
   the link spans the title and intro rows and its 44px box ends with the intro line, as on the
   boards. */
.ts-home .ts-sec .q-sec__actions {
    grid-area: more;
    justify-self: end;
    align-self: end;
}

.ts-home .ts-sec > .ts-sec__body > .q-block > :not(.q-sec__intro, .q-sec__actions) {
    grid-column: 1 / -1;
    min-inline-size: 0;
    margin-block-start: var(--q-s7);
}

/* A section that continues the one above it in the same column (the quiz under the poll in
   "Have your say") drops its head and counter and joins that board as its next cell. */
.ts-home .ts-sec + .ts-sec.q-joins {
    padding-block-start: 0;
    border-block-start: 0;
    counter-increment: none;
}

.ts-home .ts-sec + .ts-sec.q-joins::before,
.ts-home .ts-sec + .ts-sec.q-joins > .ts-sec__head {
    display: none;
}

.ts-home .ts-sec + .ts-sec.q-joins > .ts-sec__body > .q-block > :not(.q-sec__intro, .q-sec__actions) {
    margin-block-start: -1px;
}

.q-sec__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--q-s3) var(--q-s6);
    margin: 0;
}

/* The designed home needs no trail: it is the top of every trail (the row stays on inner pages). */
.ts-home .ts-row[data-ts-row="breadcrumbs"] {
    display: none;
}

/* Bare blocks carry no chrome of their own. */
.ts-home .ts-bare {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* ==========================================================================
   3. Hero board and stats (design spec §7.2 rows 2-4, §6.8)
   The hero row and the stats row are one gap-ruled board (layout.css); here the cells' insides.
   ========================================================================== */

.ts-home .ts-pos-hero-left {
    display: flex;
    flex-direction: column;
    min-block-size: 31.5rem;
    padding: 2.75rem 3rem;
}

.ts-home .ts-pos-hero-left > .ts-bare:first-child {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.q-hero {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--q-s8);
    margin: 0;
    padding: 0;
}

.q-hero > h1,
.q-hero > h2 {
    margin: 0;
    padding: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: clamp(4rem, 5.333vw + 2.7rem, 7.5rem);
    font-weight: 900;
    font-style: normal;
    line-height: 0.9;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    text-wrap: balance;
}

.q-hero > p {
    max-inline-size: 42.5rem;
    margin: auto 0 0;
    padding: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: clamp(1.0625rem, 0.286vw + 0.993rem, 1.25rem);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
}

.q-hero > p a {
    color: var(--ec-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.q-herocta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--q-s4) var(--q-s8);
    margin: var(--q-s8) 0 0;
}

.q-herocta__primary > .q-glyph {
    inline-size: 1.125rem;
    block-size: 1.125rem;
}

.q-herocta__note {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

/* "Today on the board" (tsPanel in hero-right; design spec §6.19). */
.ts-home .ts-pos-hero-right > .ts-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr auto;
    column-gap: var(--q-s4);
    block-size: 100%;
    margin: 0;
    padding: var(--q-s8);
    border: 0;
    border-radius: 0;
    background-color: var(--ec-surface);
    box-shadow: none;
}

.ts-home .ts-pos-hero-right > .ts-panel > .ts-panel__title {
    grid-column: 1;
    grid-row: 1;
    align-self: baseline;
    margin: 0;
    padding: 0 0 var(--q-s4);
    border: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: clamp(1.5rem, 0.571vw + 1.36rem, 1.875rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

.ts-home .ts-pos-hero-right > .ts-panel > .ts-panel__body,
.ts-home .ts-pos-hero-right > .ts-panel > .ts-panel__body > .q-activity-block {
    display: contents;
}

.q-activity__time {
    grid-column: 2;
    grid-row: 1;
    align-self: baseline;
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1;
}

.q-activity__time > time,
.q-activity__time > .ts-time {
    color: inherit;
    font: inherit;
}

.q-activity {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.q-activity__item {
    display: flex;
    align-items: flex-start;
    gap: var(--q-s4);
    margin: 0;
    padding: 1.125rem 0;
    border-block-start: 1px solid var(--ec-border);
    list-style: none;
}

.q-activity__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--q-s2);
    min-inline-size: 0;
}

.q-activity__text {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* A member's own activity title keeps its capitals: it follows the name after a middot. */
.q-activity__said::before {
    content: "\00B7\00A0" / "";
    color: var(--ec-fg-2);
}

.q-activity__actor,
.q-activity__link {
    color: var(--ec-fg);
    font-weight: 600;
    text-decoration: none;
}

.q-activity__link {
    font-weight: 400;
}

/* Inline links in the activity sentence: vertical padding on an inline box widens the hit area
   to 44px (contract §2.12) without changing the line box. */
.q-activity__actor,
.q-activity__link {
    padding-block: 0.8125rem;
}

.q-activity__quote {
    color: var(--ec-fg-2);
}

.q-activity__more {
    grid-column: 1 / -1;
    grid-row: 4;
    margin: 0;
    padding: var(--q-s3) 0 0;
    border-block-start: 1px solid var(--ec-border);
}

/* Stats row: one ruled cell per live figure (the row itself is the board's last line). */
.q-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--q-hair-w);
    margin: 0;
    padding: 0;
    list-style: none;
}

.q-stats[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.q-stats[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.q-stats[data-count="5"],
.q-stats[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.q-stats[data-count="5"] > :last-child { grid-column: span 2; }

.q-stat {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: var(--q-s4);
    min-block-size: 9.5rem;
    margin: 0;
    padding: var(--q-s7) var(--q-s8);
    background-color: var(--ec-surface);
    list-style: none;
}

.q-stat__figure {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--q-s4);
    min-inline-size: 0;
    margin: 0;
}

.q-stat__value {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: clamp(3rem, 2.286vw + 2.443rem, 4.5rem);
    font-weight: 800;
    line-height: 0.8;
    letter-spacing: 0;
}

.q-stat__label {
    display: flex;
    align-items: center;
    gap: var(--q-s2);
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
}

a.q-stat__label::after {
    content: "";
    position: absolute;
    inset: 0;
}

.q-stat__icon {
    display: flex;
    flex: 0 0 2.5rem;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: 1px solid var(--ec-border);
    color: var(--ec-fg);
}

/* Below the full header width the four cells are too narrow for a 72px numeral and a tile. */
@media (width < 75rem) {
    .q-stat__icon {
        display: none;
    }
}

/* ==========================================================================
   4. Welcome strip (members; design spec §6.20): the only bordered box in Quorum.
   ========================================================================== */

.q-welcome {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-block-size: 4.5rem;
    margin: 0;
    padding: 0 0.875rem 0 var(--q-s4);
    border: 1px solid var(--ec-border);
    background-color: var(--ec-surface);
    color: var(--ec-fg);
    text-decoration: none;
}

.q-welcome__icon {
    display: flex;
    flex: 0 0 2.5rem;
    align-items: center;
    justify-content: center;
    block-size: 2.5rem;
    background-color: var(--ec-accent);
    color: var(--ec-accent-fg);
}

.q-welcome__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.125rem;
    min-inline-size: 0;
    padding-block: var(--q-s2);
}

.q-welcome__title {
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.q-welcome__note {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.q-welcome__text {
    margin: 0;
}

.q-welcome__note {
    text-decoration: none;
}

/* The notification is the link; its hit area is the whole strip (the greeting stays outside
   the link, so the link's name is the notification alone). */
.q-welcome__note::after {
    content: "";
    position: absolute;
    inset: 0;
}

.q-welcome__note:focus-visible {
    outline: 0;
    box-shadow: none;
}

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

.q-welcome__chevron {
    color: var(--ec-accent);
    transition: transform var(--ec-dur-1) var(--ec-ease);
}

/* ==========================================================================
   5. Latest discussions (design spec §6.9) and the category tiles (§6.10)
   ========================================================================== */

.q-threads__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ec-border);
    background-color: var(--ec-surface);
    list-style: none;
}

.q-thread {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    min-block-size: 6rem;
    margin: 0;
    padding: 0;
    border-block-start: 1px solid var(--ec-border);
    background-color: var(--ec-surface);
    list-style: none;
}

.q-thread:first-child {
    border-block-start: 0;
}

.q-thread--pinned,
.q-thread--pinned:first-child {
    border-block-start: var(--q-pin-w) solid var(--q-signal);
}

.q-thread__main {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: 2rem 2.5rem minmax(0, 1fr);
    grid-template-areas:
        "index avatar title"
        "index avatar meta";
    column-gap: var(--q-s4);
    row-gap: var(--q-s2);
    align-content: center;
    align-items: center;
    min-inline-size: 0;
    padding: var(--q-s3) var(--q-s6);
}

.q-thread--unread .q-thread__main {
    box-shadow: inset var(--q-current-w) 0 0 var(--ec-accent);
}

.q-thread__index {
    grid-area: index;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.q-thread__avatar {
    grid-area: avatar;
}

.q-thread__title {
    grid-area: title;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
}

.q-thread--unread .q-thread__title {
    font-weight: 700;
}

.q-thread__link {
    display: block;
    color: var(--ec-fg);
    text-decoration: none;
    overflow-wrap: break-word;
}

.q-thread__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.q-thread__link:focus-visible {
    outline: 0;
    box-shadow: none;
}

.q-thread__link:focus-visible::after {
    outline: 2px solid var(--ts-focus);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 4px var(--ts-focus-gap);
}

.q-thread__meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--q-s2) var(--q-s3);
    min-inline-size: 0;
}

.q-thread__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--q-s3);
    margin: 0;
}

.q-thread__category {
    position: relative;
    z-index: 1;
}

.q-thread__byline {
    display: flex;
    align-items: center;
    gap: var(--q-s3);
    min-inline-size: 0;
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
}

.q-thread__time {
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    font-weight: 400;
    white-space: nowrap;
}

.q-thread__count,
.q-leader__points {
    display: flex;
    flex: 0 0 7rem;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: var(--q-s1);
    margin: 0;
    padding: 0 var(--q-s6);
    border-inline-start: 1px solid var(--ec-border);
    text-align: end;
}

.q-thread__num,
.q-leader__num {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: clamp(2rem, 0.762vw + 1.814rem, 2.5rem);
    font-weight: 800;
    line-height: 0.85;
}

.q-thread__unit,
.q-leader__unit {
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
}

/* Tiles: a 2-up board beside the list (from 64rem), 3-up under it on tablets. */
.q-boards__head {
    display: none;
    margin: 0;
}

.q-boards__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 7.5rem;
    gap: var(--q-hair-w);
    margin: -1px 0 0;
    padding: var(--q-hair-w);
    background-color: var(--ec-border);
    list-style: none;
}

.q-board {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "icon count"
        "name name";
    gap: var(--q-s3);
    margin: 0;
    padding: var(--q-s5) var(--q-s6);
    background-color: var(--ec-surface);
    list-style: none;
}

.q-board__icon {
    grid-area: icon;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    background-color: var(--ec-accent);
    color: var(--ec-accent-fg);
}

.q-board__count {
    grid-area: count;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--q-s1);
    text-align: end;
}

.q-board__num {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 2rem;
    font-weight: 800;
    line-height: 0.85;
}

.q-board__unit {
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
}

.q-board__name {
    grid-area: name;
    align-self: end;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.q-board__name::after {
    content: "";
    position: absolute;
    inset: 0;
}

.q-board__name:focus-visible {
    outline: 0;
    box-shadow: none;
}

.q-board__name:focus-visible::after {
    outline: 2px solid var(--ts-focus);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 4px var(--ts-focus-gap);
}

.q-board--highlight {
    background-color: var(--q-tint);
}

.q-board--highlight .q-board__num {
    color: var(--ec-accent);
}

.q-board--highlight .q-board__name {
    color: var(--q-accent-strong);
}

/* ==========================================================================
   6. This week (design spec §6.11): calendar board on wide screens, strip + agenda on phones
   ========================================================================== */

.q-week {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: var(--q-hair-w);
    margin: 0;
    padding: var(--q-hair-w);
    background-color: var(--ec-border);
    list-style: none;
}

.q-week:not(:has(.q-day--next)) {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.q-day {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--q-s3);
    min-block-size: 13.5rem;
    min-inline-size: 0;
    margin: 0;
    padding: var(--q-s4);
    background-color: var(--ec-surface);
    list-style: none;
}

.q-day:not(.q-day--events, .q-day--today) {
    justify-content: flex-start;
}

.q-day--events {
    padding: var(--q-s4) var(--q-s3) var(--q-s3) var(--q-s4);
}

.q-day--today {
    background-color: var(--q-signal);
    color: var(--q-signal-fg);
}

.q-day--next {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "date label"
        "chip chip";
    background-color: var(--ec-bg);
}

.q-day--next > .q-day__date { grid-area: date; }
.q-day--next > .q-chip { grid-area: chip; align-self: end; padding: 0.625rem var(--q-s3); }

.q-day__date {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "wd  wd"
        "num mon";
    column-gap: 0.375rem;
    row-gap: 0.375rem;
    align-items: baseline;
    margin: 0;
}

.q-day__weekday {
    grid-area: wd;
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.q-day__num {
    grid-area: num;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 0.85;
}

.q-day__month {
    grid-area: mon;
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

.q-day--today .q-day__weekday,
.q-day--today .q-day__month,
.q-day--today .q-day__num {
    color: var(--q-signal-fg);
}

.q-day__today,
.q-day__label {
    margin: 0;
    color: var(--q-signal-fg);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
}

.q-day__label {
    grid-area: label;
    color: var(--ec-fg-2);
}

.q-day__more {
    color: var(--ec-accent);
    font-family: var(--ec-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.q-chip {
    display: flex;
    flex-direction: column;
    gap: var(--q-s1);
    min-inline-size: 0;
    margin: 0;
    padding: 0.625rem;
    background-color: var(--q-tint);
    color: var(--ec-fg);
    text-decoration: none;
}

.q-chip__time,
.q-agenda__time {
    color: var(--q-accent-strong);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
}

/* Three lines at most (the full title stays the link's name); a long word breaks rather than
   growing the week strip. */
.q-chip__title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
    hyphens: auto;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.q-going {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
}

.q-going__num {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 0.9;
}

.q-going__label {
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25;
}

.q-rsvp {
    display: inline-flex;
    align-items: center;
    gap: var(--q-s1);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
}

/* The text is ink on every chip tint (AA at rest and on hover); the success colour marks the check. */
.q-rsvp > svg {
    flex: none;
    color: var(--q-success);
}

.q-agenda {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.q-agenda__item {
    position: relative;
    display: flex;
    align-items: stretch;
    margin: 0;
    background-color: var(--ec-surface);
    list-style: none;
}

.q-agenda__item--next {
    background-color: var(--ec-bg);
}

.q-agenda__date {
    display: flex;
    flex: 0 0 4.5rem;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding: var(--q-s4) 0;
    border-inline-end: 1px solid var(--ec-border);
}

.q-agenda__num {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 0.85;
}

.q-agenda__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--q-s1);
    min-inline-size: 0;
    padding: 0.875rem var(--q-s4);
}

.q-agenda__time {
    line-height: 1.3;
}

.q-agenda__title {
    margin: 0;
    padding: 0;
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
}

.q-agenda__link {
    color: var(--ec-fg);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.q-agenda__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.q-agenda__link:focus-visible {
    outline: 0;
    box-shadow: none;
}

.q-agenda__link:focus-visible::after {
    outline: 2px solid var(--ts-focus);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 4px var(--ts-focus-gap);
}

.q-agenda__place {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.35;
}

.q-agenda .q-going__num {
    font-size: 1.5rem;
}

/* ==========================================================================
   7. Top helpers (§6.12), badges (§6.13), your standing
   ========================================================================== */

.q-leaders {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ec-border);
    background-color: var(--ec-surface);
    list-style: none;
}

.q-leader {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    min-block-size: 5.75rem;
    margin: 0;
    border-block-start: 1px solid var(--ec-border);
    list-style: none;
}

.q-leader:first-child {
    border-block-start: 0;
}

.q-leader--you,
.q-leader--you:first-child {
    border-block-start: var(--q-pin-w) solid var(--q-signal);
}

.q-leader__main {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--q-s5);
    min-inline-size: 0;
    padding: 0 var(--q-s6);
}

.q-leader__rank {
    flex: 0 0 2.75rem;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-display);
    font-size: 3rem;
    font-weight: 800;
    line-height: 0.85;
}

.q-leader--you .q-leader__rank {
    color: var(--ec-fg);
}

.q-leader__avatar {
    inline-size: 3rem;
    block-size: 3rem;
    font-size: 1.0625rem;
}

.q-leader__who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--q-s1) var(--q-s3);
    min-inline-size: 0;
    margin: 0;
}

.q-leader__name {
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    overflow-wrap: anywhere;
    min-inline-size: 0;
}

a.q-leader__name::after {
    content: "";
    position: absolute;
    inset: 0;
}

a.q-leader__name:focus-visible {
    outline: 0;
    box-shadow: none;
}

a.q-leader__name:focus-visible::after {
    outline: 2px solid var(--ts-focus);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 4px var(--ts-focus-gap);
}

.q-leader__points {
    flex-basis: 9rem;
}

.q-leaders__gap {
    margin: 0;
    padding: 0;
    border-block-start: 1px solid var(--ec-border);
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    line-height: 2rem;
    text-align: center;
    list-style: none;
}

.q-badges {
    display: flex;
    flex-direction: column;
    gap: var(--q-s4);
    margin: 0;
    padding: var(--q-s6);
    border: 1px solid var(--ec-border);
    background-color: var(--ec-surface);
}

.ts-sec + .ts-bare > .q-badges,
.ts-sec + .ts-bare > .q-standing {
    margin-block-start: -1px;
}

.q-badges__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--q-s2) var(--q-s6);
}

.q-badges__title {
    margin: 0;
    padding: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

.q-badges__hint {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
}

.q-badges__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--q-s4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.q-medal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--q-s2);
    min-inline-size: 0;
    margin: 0;
    text-align: center;
    list-style: none;
}

.q-medal__disc {
    display: flex;
    flex: 0 0 3.5rem;
    align-items: center;
    justify-content: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border: 2px solid var(--ec-accent);
    border-radius: 50%;
    background-color: var(--q-tint);
    color: var(--ec-accent);
}

.q-medal--locked .q-medal__disc {
    border-style: dashed;
    border-color: var(--q-control);
    background-color: var(--ec-surface-2);
    color: var(--ec-fg-2);
}

.q-medal__name {
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
}

.q-badges__more {
    margin: 0;
}

/* Your standing: shown only when the ledger does not already mark the member's own row. */
.q-standing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--q-s3) var(--q-s5);
    margin: 0;
    padding: var(--q-s4) var(--q-s6);
    border: 1px solid var(--ec-border);
    border-block-start: var(--q-pin-w) solid var(--q-signal);
    background-color: var(--ec-surface);
}

.ts-col:has(.q-leader--you) .q-standing {
    display: none;
}

.q-standing__rank {
    display: flex;
    align-items: baseline;
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-weight: 800;
    line-height: 0.85;
}

.q-standing__num {
    font-size: 3rem;
}

.q-standing__ord {
    font-size: 1.5rem;
}

.q-standing__body {
    display: flex;
    flex: 1 1 14rem;
    flex-direction: column;
    gap: var(--q-s2);
    min-inline-size: 0;
}

.q-standing__title,
.q-standing__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--q-s2);
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.q-standing__line {
    color: var(--ec-fg-2);
    font-weight: 400;
}

.q-standing__line > strong {
    color: var(--ec-fg);
    font-weight: 600;
}

/* ==========================================================================
   8. Have your say: poll (§6.14) and quiz (§6.15)
   ========================================================================== */

.q-poll,
.q-quiz {
    display: flex;
    flex-direction: column;
    gap: var(--q-s4);
    min-inline-size: 0;
    margin: 0;
    padding: var(--q-s7);
    border: 1px solid var(--ec-border);
    background-color: var(--ec-surface);
}

.q-poll__head,
.q-quiz__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--q-s2) var(--q-s4);
    margin: 0;
}

.q-poll__votes {
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.2;
}

.q-quiz__time {
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
}

.q-poll__title,
.q-quiz__title {
    margin: 0;
    padding: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: clamp(1.1875rem, 0.286vw + 1.118rem, 1.375rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}

.q-poll__question {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    line-height: 1.4;
}

.q-poll__results,
.q-poll__form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--q-s4);
    margin: 0;
}

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

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

.q-poll__option,
.q-poll__choices > li,
.q-poll__plain > li {
    display: flex;
    flex-direction: column;
    gap: var(--q-s2);
    margin: 0;
    list-style: none;
}

.q-poll__plain > li {
    display: block;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    line-height: 1.4;
}

.q-poll__row {
    display: flex;
    align-items: baseline;
    gap: var(--q-s3);
    margin: 0;
}

.q-poll__index {
    flex: 0 0 1.5rem;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.q-poll__label {
    flex: 1 1 auto;
    min-inline-size: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3;
}

.q-poll__option--lead .q-poll__label {
    font-weight: 600;
}

.q-poll__pct {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.q-poll__option--lead .q-poll__pct {
    color: var(--ec-accent);
}

.q-poll__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--q-s2) var(--q-s4);
    margin: auto 0 0;
    padding: var(--q-s2) 0 0;
    border-block-start: 1px solid var(--ec-border);
}

.q-poll__form .q-poll__foot {
    padding-block-start: var(--q-s4);
}

/* Phones (design spec §7.3): Vote is the full-width primary, the results link sits under it. */
@media (width < 48rem) {
    .q-poll__form .q-poll__foot > .mod-cp-poll-submit {
        flex: 1 1 100%;
        inline-size: 100%;
    }
}

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

.q-poll__state {
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
}

.q-poll__choices {
    gap: 0;
}

.q-poll__choices > li + li {
    border-block-start: 1px solid var(--ec-border);
}

/* The control sits on the column edge (with the question, the rules and Vote); the chosen row's
   tint and 2px accent bar hang 12px into the card's padding. */
.q-poll__choice {
    display: flex;
    align-items: center;
    gap: var(--q-s3);
    min-block-size: 3.5rem;
    margin-inline: calc(-1 * var(--q-s3));
    padding: 0 var(--q-s3);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    line-height: 1.3;
    cursor: pointer;
}

.q-poll__choice:has(:checked) {
    background-color: var(--q-tint);
    box-shadow: inset 2px 0 0 var(--ec-accent);
}

/* Design §6.4: a 24px control with a 2px --q-control ring (radio round, checkbox square); checked,
   the radio shows a 10px accent dot and the checkbox an accent fill with the scheme's check. */
.q-poll__input {
    flex: none;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin: 0;
    border: 2px solid var(--q-control);
    border-radius: 0;
    background: var(--ec-surface) no-repeat center / 1rem;
    appearance: none;
    cursor: pointer;
}

.q-poll__input[type="radio"] {
    border-radius: 50%;
}

.q-poll__input[type="radio"]:checked {
    background-image: radial-gradient(circle, var(--ec-accent) 0 4.5px, transparent 5px);
}

.q-poll__input[type="checkbox"]:checked {
    border-color: var(--ec-accent);
    background-color: var(--ec-accent);
    background-image: var(--ts-check-mark);
}

.q-poll__error {
    margin: 0;
    color: var(--q-danger);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    line-height: 1.4;
}

.q-quiz {
    justify-content: space-between;
    min-block-size: 13.5rem;
}

.q-quiz__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--q-s4);
}

.q-quiz__figures {
    display: flex;
    align-items: stretch;
    margin: 0;
}

.q-quiz__figure {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--q-s1);
    padding-inline-end: var(--q-s6);
}

.q-quiz__figure + .q-quiz__figure {
    padding-inline: var(--q-s6) 0;
    border-inline-start: 1px solid var(--ec-border);
}

.q-quiz__num {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: clamp(2.5rem, 0.762vw + 2.314rem, 3rem);
    font-weight: 800;
    line-height: 0.85;
}

.q-quiz__label {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
}

/* The secondary button (2px ink frame) of the quiz and the newsletter. */
.ts-button.ts-button--secondary.q-quiz__cta,
.ts-button.ts-button--secondary.q-newsletter__button {
    border-color: var(--q-rule);
    background-color: transparent;
    color: var(--ec-fg);
}

/* ==========================================================================
   9. Learn together (§6.16): numeral panel, title, instructor, lesson segments
   ========================================================================== */

.q-courses {
    display: grid;
    grid-auto-rows: minmax(0, 1fr);
    gap: var(--q-hair-w);
    margin: 0;
    padding: var(--q-hair-w);
    background-color: var(--ec-border);
    list-style: none;
}

.q-course {
    position: relative;
    display: flex;
    min-block-size: 12rem;
    margin: 0;
    overflow: hidden;
    background-color: var(--ec-surface);
    list-style: none;
}

.q-course__panel {
    display: flex;
    flex: 0 0 9.25rem;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    background-color: var(--q-tint);
}

.q-course__numeral {
    margin-block-end: -2.75rem;
    color: var(--ec-accent);
    font-family: var(--ec-font-display);
    font-size: 14.5rem;
    font-weight: 900;
    line-height: 0.75;
}

.q-course__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--q-s4);
    min-inline-size: 0;
    padding: var(--q-s6) var(--q-s7);
}

.q-course__top {
    display: flex;
    flex-direction: column;
    gap: var(--q-s3);
}

.q-course__title {
    margin: 0;
    padding: 0;
    font-family: var(--ec-font-body);
    font-size: clamp(1.1875rem, 0.286vw + 1.118rem, 1.375rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
}

.q-course__link {
    color: var(--ec-fg);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.q-course__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.q-course__link:focus-visible {
    outline: 0;
    box-shadow: none;
}

.q-course__link:focus-visible::after {
    outline: 2px solid var(--ts-focus);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 4px var(--ts-focus-gap);
}

.q-course__by {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
}

.q-course__avatar {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    font-size: 0.6875rem;
    font-weight: 700;
}

.q-course__foot {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.q-segments {
    display: grid;
    grid-template-columns: repeat(var(--q-seg, 6), minmax(0, 1fr));
    gap: var(--q-s1);
}

.q-segments__seg {
    display: block;
    block-size: 0.625rem;
    background-color: var(--ec-surface-2);
}

.q-segments__seg--done {
    background-color: var(--ec-accent);
}

.q-segments__seg--current {
    background-color: var(--q-accent-strong);
}

.q-course__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--q-s2) var(--q-s4);
}

.q-course__continue {
    position: relative;
    z-index: 1;
}

.q-course__count {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
}

/* ==========================================================================
   10. Ride these routes (§6.17): the route map cell and the route rows
   ========================================================================== */

.q-routes {
    display: grid;
    grid-template-rows: minmax(16.375rem, 1fr) auto;
    gap: var(--q-hair-w);
    block-size: 100%;
    margin: 0;
    padding: var(--q-hair-w);
    background-color: var(--ec-border);
}

.q-map {
    --q-grid-line: color-mix(in srgb, var(--ec-border) 60%, var(--ec-bg));
    position: relative;
    margin: 0;
    overflow: hidden;
    background-color: var(--ec-bg);
    background-image:
        linear-gradient(var(--q-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--q-grid-line) 1px, transparent 1px);
    background-position: -1px -1px;
    background-size: 4rem 4rem;
}

.q-map__svg {
    position: absolute;
    inset: var(--q-s4);
    display: block;
    inline-size: calc(100% - 2rem);
    block-size: calc(100% - 2rem);
    overflow: visible;
}

.q-map__track {
    fill: none;
    stroke: var(--ec-accent);
    stroke-width: 5px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.q-map__box {
    fill: var(--ec-accent);
}

.q-map__box--ink {
    fill: var(--q-inverse-bg);
}

.q-map__plus {
    fill: none;
    stroke: var(--q-inverse-fg);
    stroke-width: 2.5px;
    stroke-linecap: square;
}

.q-map__num {
    fill: var(--ec-accent-fg);
    font-family: var(--ec-font-display);
    font-size: 17px;
    font-weight: 800;
}

.q-map__north {
    position: absolute;
    inset-block-start: var(--q-s4);
    inset-inline-start: var(--q-s4);
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 1px solid var(--ec-border);
    background-color: var(--ec-surface);
    color: var(--ec-fg);
}

.q-routes__list {
    display: grid;
    gap: var(--q-hair-w);
    margin: 0;
    padding: 0;
    list-style: none;
}

.q-route {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 8.25rem 8.25rem;
    align-items: stretch;
    min-block-size: 4.75rem;
    margin: 0;
    background-color: var(--ec-surface);
    list-style: none;
}

.q-route__marker {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    inline-size: 2rem;
    block-size: 2rem;
    margin-inline-start: var(--q-s6);
    background-color: var(--q-inverse-bg);
    color: var(--q-inverse-fg);
    font-family: var(--ec-font-display);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
}

.q-route--featured .q-route__marker {
    background-color: var(--ec-accent);
    color: var(--ec-accent-fg);
}

/* Only the featured route is drawn on the sketch; the other rows keep a plain index numeral, so
   no square marker points at a line that is not on the map. */
.q-route:not(.q-route--featured) .q-route__marker {
    background-color: transparent;
    color: var(--ec-fg-2);
}

/* Route names come from GPX uploads and are often one long token: they wrap anywhere. */
.q-route__name {
    align-self: center;
    min-inline-size: 0;
    margin: 0;
    padding: 0 var(--q-s4);
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.q-route__link {
    color: var(--ec-fg);
    text-decoration: none;
}

.q-route__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.q-route__link:focus-visible {
    outline: 0;
    box-shadow: none;
}

.q-route__link:focus-visible::after {
    outline: 2px solid var(--ts-focus);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 4px var(--ts-focus-gap);
}

.q-route__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: var(--q-s1);
    margin: 0;
    padding: 0 var(--q-s5);
    border-inline-start: 1px solid var(--ec-border);
    text-align: end;
}

.q-route__value {
    color: var(--ec-fg);
    font-family: var(--q-font-mono);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.q-route__label {
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
}

/* ==========================================================================
   11. Worth reading: the featured view on the home (§6.18), the last numbered section
   ========================================================================== */

.ts-home .ts-journal--featured {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-auto-rows: auto;
    margin: 0;
    padding: var(--q-s5) 0 0;
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    counter-increment: q-sec;
}

.ts-home .ts-journal--featured > .q-reading__head {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr) auto;
    grid-template-areas:
        "num title more"
        "num sub   more";
    column-gap: var(--q-s6);
    align-items: end;
    margin: 0 0 var(--q-s7);
    padding: 0;
    border: 0;
}

.ts-home .ts-journal--featured > .q-reading__head::before {
    content: counter(q-sec, decimal-leading-zero);
    grid-area: num;
    display: flex;
    align-items: flex-end;
    block-size: 5.625rem;
    color: var(--ec-accent);
    font-family: var(--ec-font-display);
    font-size: clamp(4rem, 4.571vw + 2.886rem, 7rem);
    font-weight: 800;
    line-height: 0.8;
}

.q-reading__head > .q-reading__title {
    grid-area: title;
    margin: 0;
    padding: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: clamp(2rem, 1.143vw + 1.721rem, 2.75rem);
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

.q-reading__head > .q-reading__intro {
    grid-area: sub;
    margin: var(--q-s2) 0 0;
    padding: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.5;
}

.q-reading__head > .q-reading__more {
    grid-area: more;
    align-self: end;
    margin: 0;
}

.ts-home .ts-journal--featured > .ts-postgrid--lead,
.ts-home .ts-journal--featured > .items-more {
    display: block;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ec-border);
    background-color: var(--ec-surface);
}

.ts-home .ts-journal--featured > .items-more {
    margin-inline-start: -1px;
}

.ts-home .ts-journal--featured > .ts-postgrid--lead:only-of-type,
.ts-home .ts-journal--featured > .items-more:not(.ts-postgrid--lead ~ .items-more) {
    grid-column: 1 / -1;
}

/* The lead article: a tinted panel with the cropped poster glyph, then the index, category tag,
   Big Shoulders title and the author. */
.ts-home .ts-journal--featured .ts-postcard {
    display: flex;
    min-block-size: 19.9375rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    counter-reset: q-read;
}

.ts-home .ts-journal--featured .ts-postcard__media {
    display: flex;
    flex: 0 0 16.5rem;
    align-items: flex-end;
    justify-content: flex-start;
    margin: 0;
    padding: 0 0 0 var(--q-s5);
    overflow: hidden;
    border-radius: 0;
    background-color: var(--q-tint);
    aspect-ratio: auto;
}

.ts-home .ts-journal--featured .ts-postcard__media:not(.ts-postcard__media--placeholder) {
    padding: 0;
}

.ts-home .ts-journal--featured .ts-postcard__media img {
    inline-size: 100%;
    block-size: 100%;
    border-radius: 0;
    object-fit: cover;
}

.ts-home .ts-journal--featured .ts-postcard__monogram {
    display: block;
    margin: 0 0 -3.5rem;
    color: var(--ec-accent);
    font-family: var(--ec-font-display);
    font-size: 25rem;
    font-weight: 900;
    line-height: 0.75;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ts-home .ts-journal--featured .ts-postcard__body {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: var(--q-s3);
    row-gap: var(--q-s4);
    align-content: start;
    min-inline-size: 0;
    margin: 0;
    padding: var(--q-s8);
}

.ts-home .ts-journal--featured .ts-postcard__body::before {
    content: "01";
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.ts-home .ts-journal--featured .ts-postcard__body > .page-header {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    padding: 0;
    border: 0;
}

.ts-home .ts-journal--featured .ts-postcard__body > .page-header > :is(h2, h3) {
    margin: 0;
    padding: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: clamp(2rem, 1.143vw + 1.721rem, 2.75rem);
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

.ts-home .ts-journal--featured .ts-postcard__body > .page-header a {
    color: var(--ec-fg);
    text-decoration: none;
}

.ts-home .ts-journal--featured .ts-postcard__body > .article-info {
    display: contents;
}

.ts-home .ts-journal--featured .ts-postcard__body > .article-info > .article-info-term,
.ts-home .ts-journal--featured .ts-postcard__body > .article-info [class*="icon-"] {
    display: none;
}

.ts-home .ts-journal--featured .ts-postcard__body > .article-info > dd {
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 1;
}

.ts-home .ts-journal--featured .ts-postcard__body > .article-info > .category-name {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    align-self: center;
}

.ts-home .ts-journal--featured .ts-postcard__body > .article-info > .category-name > a,
.ts-home .ts-journal--featured .ts-postcard__body > .article-info > .category-name > span:not([class*="icon-"]) {
    display: inline-flex;
    align-items: center;
    block-size: 1.5rem;
    padding: 0 var(--q-s2);
    background-color: var(--ec-surface-2);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}

/* Lead byline (§6.18): 32px initials avatar, the author, "N min read" in mono. */
/* Gap 0: the zero-size "Written by:" text is a flex item too; the avatar and the reading time
   carry their own 12px, the same spacing as the link rows. */
.ts-home .ts-journal--featured .ts-postcard__body > .article-info > .createdby {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    grid-column: 1 / -1;
    grid-row: 4;
    align-self: end;
}

.ts-home .ts-journal--featured .ts-postcard__body > .article-info > .createdby:has(~ .q-readtime) {
    grid-column: 1 / span 2;
    justify-self: start;
}

.ts-home .ts-journal--featured .article-info > .createdby[data-q-initial]::before,
.ts-home .ts-journal--featured .ts-postlinks__author[data-ts-initials]::before {
    content: attr(data-q-initial) / "";
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    background-color: var(--q-av, var(--q-avatar-1));
    color: #FFFFFF;
    font-family: var(--ec-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.ts-home .ts-journal--featured .ts-postlinks__author[data-ts-initials]::before {
    content: attr(data-ts-initials) / "";
}

.ts-home .ts-journal--featured .article-info > .createdby[data-q-initial]::before {
    margin-inline-end: var(--q-s3);
}

.ts-home .ts-journal--featured .ts-postcard__body > .article-info > .createdby[data-q-readtime]::after {
    content: attr(data-q-readtime);
    margin-inline-start: var(--q-s3);
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.3;
}

.ts-home .ts-journal--featured .ts-postcard__body > .article-info > .createdby[data-q-readtime] ~ .q-readtime {
    display: none;
}

.ts-home .ts-journal--featured :is(.q-byline--tone-1, [data-ts-tone="1"]) { --q-av: var(--q-avatar-2); }
.ts-home .ts-journal--featured :is(.q-byline--tone-2, [data-ts-tone="2"]) { --q-av: var(--q-avatar-3); }
.ts-home .ts-journal--featured :is(.q-byline--tone-3, [data-ts-tone="3"]) { --q-av: var(--q-avatar-4); }
.ts-home .ts-journal--featured :is(.q-byline--tone-4, [data-ts-tone="4"]) { --q-av: var(--q-avatar-5); }
.ts-home .ts-journal--featured :is(.q-byline--tone-5, [data-ts-tone="5"]) { --q-av: var(--q-avatar-6); }

.ts-home .ts-journal--featured .ts-postcard__body > .article-info > .q-readtime,
.ts-home .ts-journal--featured .ts-postlinks__readtime {
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.3;
}

.ts-home .ts-journal--featured .ts-postcard__body > .article-info > .q-readtime {
    grid-column: 2;
    grid-row: 4;
    align-self: end;
    justify-self: end;
    padding-block-end: 0.375rem;
}

.ts-home .ts-journal--featured .ts-postcard__body > .article-info > .createdby > span:not([class*="icon-"]),
.ts-home .ts-journal--featured .ts-postcard__body > .article-info > .createdby > a {
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.ts-home .ts-journal--featured .ts-postcard__body > :is(.ts-postcard__excerpt, .readmore, .icons, .tags) {
    display: none;
}

/* The two link rows: index, title, author and date. */
.ts-home .ts-journal--featured .ts-postlinks {
    display: grid;
    grid-auto-rows: minmax(0, 1fr);
    block-size: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: q-read 1;
}

.ts-home .ts-journal--featured .ts-postlinks__item {
    position: relative;
    display: flex;
    gap: var(--q-s5);
    min-block-size: 9.9375rem;
    margin: 0;
    padding: var(--q-s6) var(--q-s7);
    border-block-start: 1px solid var(--ec-border);
    list-style: none;
    counter-increment: q-read;
}

.ts-home .ts-journal--featured .ts-postlinks__item:first-child {
    border-block-start: 0;
}

.ts-home .ts-journal--featured .ts-postlinks__item::before {
    content: counter(q-read, decimal-leading-zero);
    flex: 0 0 2rem;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
}

.ts-home .ts-journal--featured .ts-postlinks__link {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--q-s4);
    min-inline-size: 0;
    color: var(--ec-fg);
    text-decoration: none;
}

.ts-home .ts-journal--featured .ts-postlinks__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.ts-home .ts-journal--featured .ts-postlinks__link:focus-visible {
    outline: 0;
    box-shadow: none;
}

.ts-home .ts-journal--featured .ts-postlinks__link:focus-visible::after {
    outline: 2px solid var(--ts-focus);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 4px var(--ts-focus-gap);
}

.ts-home .ts-journal--featured .ts-postlinks__title {
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: clamp(1.125rem, 0.19vw + 1.079rem, 1.25rem);
    font-weight: 600;
    line-height: 1.3;
}

.ts-home .ts-journal--featured .ts-postlinks__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--q-s3);
}

.ts-home .ts-journal--featured .ts-postlinks__author {
    display: inline-flex;
    align-items: center;
    gap: var(--q-s3);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.ts-home .ts-journal--featured .ts-postlinks__date {
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.3;
}

.ts-home .ts-journal--featured .ts-postlinks__arrow,
.ts-home .ts-journal--featured .ts-postlinks__meta:has(.ts-postlinks__readtime) > .ts-postlinks__date {
    display: none;
}

/* ==========================================================================
   12. Newsletter card on the footer band (§5.4): a link to the real form page, never a field
   ========================================================================== */

.q-newsletter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--q-s6) var(--q-s8);
    margin: 0;
    padding: var(--q-s7) var(--q-s8) var(--q-s8);
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    background-color: var(--ec-surface);
}

.q-newsletter__copy {
    display: flex;
    flex-direction: column;
    gap: var(--q-s2);
    min-inline-size: 0;
}

.q-newsletter__copy > :is(h2, h3) {
    margin: 0;
    padding: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: clamp(1.75rem, 1.143vw + 1.471rem, 2.5rem);
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

.q-newsletter__copy > p {
    margin: 0;
    padding: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.5;
}

.q-newsletter__copy > p a {
    color: var(--ec-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.q-newsletter__action {
    margin: 0;
}

/* ==========================================================================
   13. Wide screens: split bands side by side, the discussions board with its tiles
   ========================================================================== */

@media (min-width: 64rem) {
    /* Split bands: both halves as tall as the taller, each board filling its half. */
    .ts-home .ts-row[data-ts-row="s03"],
    .ts-home .ts-row[data-ts-row="s05"] {
        align-items: stretch;
    }

    .ts-home .ts-row[data-ts-row="s03"] > .ts-col,
    .ts-home .ts-row[data-ts-row="s05"] > .ts-col {
        display: flex;
        flex-direction: column;
    }

    .ts-home .ts-row[data-ts-row="s03"] > .ts-col > .ts-sec:first-child,
    .ts-home .ts-row[data-ts-row="s05"] > .ts-col > .ts-sec:first-child {
        flex: 1 0 auto;
    }

    /* Below the full width a half is too narrow for a 44px title, an ordinal and a "more" link
       on one line: the two sections of a split band stack, each full width. */
    .ts-home :is(.ts-row[data-ts-row="s03"], .ts-row[data-ts-row="s05"]) > .ts-col {
        grid-column: 1 / -1;
    }
}

/* Split bands side by side (from 1280px, where a half holds a 44px title, its ordinal and its
   "more" link beside the title block). */
@media (min-width: 80rem) {
    .ts-home .ts-row:is([data-ts-row="s03"], [data-ts-row="s05"]) > .ts-col.ts-span-5 { grid-column: span 5; }
    .ts-home .ts-row:is([data-ts-row="s03"], [data-ts-row="s05"]) > .ts-col.ts-span-6 { grid-column: span 6; }
    .ts-home .ts-row:is([data-ts-row="s03"], [data-ts-row="s05"]) > .ts-col.ts-span-7 { grid-column: span 7; }

    /* A link in the narrow half wraps its intro: both intro rows take two lines (paired titles and
       boards stay on one line; each link ends on its head's last row). */
    .ts-home .ts-row:is([data-ts-row="s03"], [data-ts-row="s05"]):has(> .ts-col.ts-span-5 > .ts-sec.ts-numbered:first-child .q-sec__actions) > .ts-col > .ts-sec.ts-numbered:first-child {
        grid-template-rows: auto minmax(calc(3.1875rem + var(--q-s2)), auto) 1fr;
    }

    .ts-home .ts-row:is([data-ts-row="s03"], [data-ts-row="s05"]):has(> .ts-col.ts-span-5 > .ts-sec.ts-numbered:first-child .q-sec__actions) > .ts-col > .ts-sec.ts-numbered:first-child :is(.ts-sec__sub, .q-sec__intro) {
        align-self: start;
    }
}

@media (min-width: 64rem) {
    .ts-home .ts-sec > .ts-sec__body > .q-block > .q-leaders,
    .ts-home .ts-sec > .ts-sec__body > .q-block > .q-poll,
    .ts-home .ts-sec > .ts-sec__body > .q-block > .q-courses,
    .ts-home .ts-sec > .ts-sec__body > .q-block > .q-routes {
        align-self: stretch;
    }

    /* Stretched, not 100% of the track: the board's top margin would push it past its half. */
    .ts-home .ts-sec > .ts-sec__body > .q-block > .q-routes {
        block-size: auto;
    }

    /* 01: the list (8 columns) and the tiles (4) are one ruled board under one head. The two
       columns share the head's rows (subgrid down to the head and the boards), so the tiles'
       "Open the forum" ends with the 01 intro like every head's link (.q-sec__actions) and both
       boards start on one line, however many lines the intro takes. */
    .ts-home .ts-row[data-ts-row="s01"]:has(> .ts-pos-top-c .q-boards) {
        grid-template-rows: auto auto 1fr;
        gap: 0;
        align-items: stretch;
    }

    .ts-home .ts-row[data-ts-row="s01"]:has(> .ts-pos-top-c .q-boards) > .ts-pos-top-b,
    .ts-home .ts-row[data-ts-row="s01"]:has(> .ts-pos-top-c .q-boards) > .ts-pos-top-c,
    .ts-home .ts-row[data-ts-row="s01"]:has(> .ts-pos-top-c .q-boards) > .ts-pos-top-b > .ts-sec,
    .ts-home .ts-row[data-ts-row="s01"] > .ts-pos-top-c > .ts-bare,
    .ts-home .ts-row[data-ts-row="s01"] > .ts-pos-top-c .q-boards {
        display: grid;
        grid-row: 1 / span 3;
        grid-template-rows: subgrid;
    }

    .ts-home .ts-row[data-ts-row="s01"]:has(> .ts-pos-top-c .q-boards) > .ts-pos-top-b .q-threads__list {
        align-self: stretch;
    }

    /* The tiles carry "Open the forum" in the head row; members keep "Start a thread" in the header
       and the hero, so the list's own action row would only push its head out of line. */
    .ts-home .ts-row[data-ts-row="s01"]:has(> .ts-pos-top-c .q-boards) > .ts-pos-top-b .q-sec__actions {
        display: none;
    }

    .ts-home .ts-row[data-ts-row="s01"] > .ts-pos-top-c {
        margin-inline-start: -1px;
    }

    /* The rule and its padding sit on the 3-row subgrid, as on the section beside it. */
    .ts-home .ts-row[data-ts-row="s01"] > .ts-pos-top-c .q-boards {
        padding-block-start: var(--q-s5);
        border-block-start: var(--q-rule-w) solid var(--q-rule);
    }

    .ts-home .ts-row[data-ts-row="s01"] > .ts-pos-top-c .q-boards__head {
        display: grid;
        grid-row: 1 / span 2;
        grid-template-rows: subgrid;
        justify-items: end;
    }

    .ts-home .ts-row[data-ts-row="s01"] > .ts-pos-top-c .q-boards__head > .ts-more {
        grid-row: 2;
        align-self: end;
    }

    .ts-home .ts-row[data-ts-row="s01"] > .ts-pos-top-c .q-boards__grid {
        grid-row: 3;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(10rem, 1fr);
        margin: var(--q-s7) 0 0;
    }
}

/* This week below 64rem: nine calendar cells get too narrow for their chips, so the week becomes
   the phone board's 7-day strip (event days underlined in teal) over the agenda. */
@media (width < 64rem) {
    .q-week,
    .q-week:not(:has(.q-day--next)) {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    /* Every cell alike (plain, today, event days), so weekdays and numerals share one line; the
       event underline is an inset shadow and moves nothing. */
    .q-day,
    .q-day:not(.q-day--events, .q-day--today),
    .q-day--events {
        align-items: center;
        justify-content: center;
        gap: 0;
        min-block-size: 4.5rem;
        padding: 0;
    }

    .q-day--events {
        box-shadow: inset 0 calc(-1 * var(--q-current-w)) 0 var(--ec-accent);
    }

    .q-day--next,
    .q-day > .q-chip,
    .q-day__today,
    .q-day__more,
    .q-day__month {
        display: none;
    }

    .q-day__date {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.375rem;
    }

    .q-day__weekday {
        font-size: 0.8125rem;
        line-height: 1;
    }

    .q-day__num {
        font-size: 1.75rem;
    }

    .q-agenda {
        display: flex;
        flex-direction: column;
        gap: var(--q-hair-w);
        padding: 0 var(--q-hair-w) var(--q-hair-w);
        background-color: var(--ec-border);
    }

    .q-agenda .q-day__weekday,
    .q-agenda .q-day__month {
        display: block;
        font-size: 0.875rem;
        line-height: 1;
    }

}

/* ==========================================================================
   14. Phones (< 48rem): the member board (design spec §8)
   ========================================================================== */

@media (width < 48rem) {
    .ts-home .ts-sec {
        padding-block-start: var(--q-s4);
    }

    /* The ordinal spans the title and intro rows; the title row takes the ordinal's height, so
       the title (and the kept intro) sit on the numeral's baseline, as on the board (§6.7). */
    .ts-home .ts-sec.ts-numbered {
        grid-template-columns: minmax(3.25rem, auto) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto auto;
        grid-template-areas:
            "num title"
            "num sub";
        column-gap: 0.875rem;
    }

    .ts-home .ts-sec.ts-numbered .ts-sec__title {
        align-self: end;
    }

    .ts-home .ts-sec:not(.ts-numbered) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "sub";
    }

    .ts-home .ts-sec.ts-numbered::before {
        block-size: auto;
    }

    .ts-home .ts-sec .ts-sec__sub,
    .ts-home .ts-sec .q-sec__intro {
        display: none;
    }

    .ts-home .ts-sec .q-sec__intro--keep {
        display: block;
        margin-block-start: var(--q-s1);
        font-size: 1rem;
        line-height: 1.3;
    }

    .ts-home .ts-sec > .ts-sec__body > .q-block > :not(.q-sec__intro, .q-sec__actions) {
        margin-block-start: var(--q-s5);
    }

    /* The agenda hangs off the 7-day strip: one board, the strip's bottom hairline shared. */
    .ts-home .ts-sec > .ts-sec__body > .q-block > .q-week + .q-agenda {
        margin-block-start: 0;
    }

    .ts-home .ts-sec .q-sec__actions {
        grid-area: auto;
        grid-column: 1 / -1;
        justify-self: stretch;
        justify-content: space-between;
        margin-block: var(--q-s5) -0.5rem;
    }

    /* Hero: 24/20 cell padding, the member's block "Start a thread". */
    .ts-home .ts-pos-hero-left {
        min-block-size: 0;
        padding: var(--q-s6) var(--q-s5);
    }

    .q-hero {
        gap: var(--q-s8);
    }

    .q-herocta {
        margin-block-start: var(--q-s5);
    }

    .q-herocta--member .q-herocta__primary {
        flex: 1 1 100%;
        gap: 0.625rem;
        min-block-size: 3rem;
        font-size: 1.0625rem;
    }

    .q-herocta--guest {
        gap: var(--q-s3) var(--q-s6);
    }

    .ts-home .ts-pos-hero-right > .ts-panel {
        padding: var(--q-s6) var(--q-s5);
    }

    .q-stats,
    .q-stats[data-count] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* An odd count never leaves an empty cell: the last tile spans the row. */
    .q-stats[data-count="1"] > :last-child,
    .q-stats[data-count="3"] > :last-child,
    .q-stats[data-count="5"] > :last-child {
        grid-column: 1 / -1;
    }

    .q-stat {
        min-block-size: 6.5rem;
        padding: 1.125rem var(--q-s5);
    }

    .q-stat__figure {
        gap: var(--q-s2);
    }

    .q-stat__icon {
        display: none;
    }

    /* 01: each row its own cell, three rows, the title wraps. */
    .q-threads__list {
        gap: var(--q-hair-w);
        padding: var(--q-hair-w);
        border: 0;
        background-color: var(--ec-border);
    }

    .q-thread {
        min-block-size: 0;
        border-block-start: 0;
    }

    .q-thread--pinned {
        border-block-start: var(--q-pin-w) solid var(--q-signal);
    }

    .q-thread:nth-child(n + 4) {
        display: none;
    }

    .q-thread__main {
        grid-template-columns: 1.5rem minmax(0, 1fr);
        grid-template-areas:
            "index  tags"
            "title  title"
            "avatar byline";
        column-gap: var(--q-s2);
        align-content: start;
        padding: var(--q-s4);
    }

    .q-thread--pinned .q-thread__main {
        padding-block-start: 0.875rem;
    }

    .q-thread__index {
        font-size: 1.375rem;
    }

    .q-thread__avatar {
        inline-size: 1.5rem;
        block-size: 1.5rem;
        font-size: 0.625rem;
        font-weight: 700;
    }

    .q-thread__meta {
        display: contents;
    }

    .q-thread__tags {
        grid-area: tags;
        gap: var(--q-s2);
    }

    .q-thread__byline {
        grid-area: byline;
        gap: var(--q-s2);
        line-height: 1.2;
    }

    .q-thread__title {
        font-size: 1.0625rem;
    }

    .q-thread__link {
        overflow: visible;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .q-thread__count {
        flex-basis: 4.75rem;
        padding: 0 0.875rem;
    }

    .q-thread__num,
    .q-leader__num {
        font-size: 2rem;
    }

    .q-thread__unit,
    .q-leader__unit {
        font-size: 0.875rem;
    }

    .q-threads__start {
        padding-inline: 1.125rem;
    }

    /* 03: compact ledger rows, the level as text, badges two by two. */
    .q-leaders {
        gap: var(--q-hair-w);
        border: 0;
        padding: var(--q-hair-w);
        background-color: var(--ec-border);
    }

    .q-leader {
        min-block-size: 4.5rem;
        border-block-start: 0;
        background-color: var(--ec-surface);
    }

    .q-leader--you {
        min-block-size: calc(4.5rem + var(--q-pin-w));
        border-block-start: var(--q-pin-w) solid var(--q-signal);
    }

    .q-leader:nth-child(5):not(.q-leader--you) {
        display: none;
    }

    .q-leader__main {
        gap: var(--q-s3);
        padding: 0 var(--q-s4);
    }

    .q-leader__rank {
        flex-basis: 1.875rem;
        font-size: 2rem;
    }

    .q-leader__avatar {
        inline-size: 2.25rem;
        block-size: 2.25rem;
        font-size: 0.8125rem;
        font-weight: 700;
    }

    .q-leader__who {
        column-gap: var(--q-s2);
        row-gap: 0.125rem;
    }

    .q-leader__name {
        font-size: 1.0625rem;
    }

    .q-leader__level {
        flex-basis: 100%;
        block-size: auto;
        padding: 0;
        background: none;
        color: var(--ec-fg-2);
        line-height: 1.25;
    }

    .q-leader__level.q-tag--accent {
        color: var(--q-accent-strong);
    }

    /* A fixed column (wide enough for "1,240"), so the count rule runs straight down the board. */
    .q-leader__points {
        flex: 0 0 6.5rem;
        inline-size: 6.5rem;
        min-inline-size: 6.5rem;
        gap: 0.125rem;
        padding: 0 var(--q-s4);
    }

    .ts-sec + .ts-bare > .q-badges {
        margin-block-start: 0;
        border-block-start: 0;
        box-shadow: inset 0 1px 0 var(--ec-border);
    }

    .q-badges {
        padding: var(--q-s5) var(--q-s4);
    }

    .q-badges__head {
        display: contents;
    }

    .q-badges__title {
        order: 1;
    }

    .q-badges__list {
        order: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--q-s3);
    }

    .q-badges__hint {
        order: 3;
        padding-block-start: var(--q-s3);
        border-block-start: 1px solid var(--ec-border);
    }

    .q-badges__more {
        order: 4;
    }

    .q-medal {
        flex-direction: row;
        gap: 0.625rem;
        text-align: start;
    }

    .q-medal__disc {
        flex-basis: 2.5rem;
        inline-size: 2.5rem;
        block-size: 2.5rem;
    }

    .q-medal__disc > .q-glyph {
        inline-size: 1.25rem;
        block-size: 1.25rem;
    }

    /* 04-07 (invented for phones by the design spec §7.3). */
    .q-poll,
    .q-quiz {
        padding: var(--q-s5);
    }

    .q-poll__pct {
        font-size: 1.75rem;
    }

    .q-quiz__foot .q-quiz__cta {
        flex: 1 1 100%;
    }

    .q-course {
        min-block-size: 10rem;
    }

    .q-course__panel {
        flex-basis: 6rem;
    }

    .q-course__numeral {
        margin-block-end: -1.75rem;
        font-size: 9.375rem;
    }

    .q-course__body {
        padding: var(--q-s4) var(--q-s5);
    }

    .q-routes {
        grid-template-rows: auto auto;
        block-size: auto;
    }

    /* The ledger's "Full leaderboard" link closes the column, after the badges (the board). */
    .ts-home .ts-pos-slot-1:has(.q-leaders-block .q-sec__actions):has(.q-badges) {
        position: relative;
        padding-block-end: calc(2.75rem + var(--q-s5));
    }

    .ts-home .ts-pos-slot-1:has(.q-badges) .q-leaders-block > .q-sec__actions {
        position: absolute;
        inset-block-end: 0;
        inset-inline-start: 0;
        margin: 0;
    }

    .q-map {
        min-block-size: 0;
        aspect-ratio: 16 / 10;
    }

    .q-route {
        grid-template-columns: auto auto minmax(0, 1fr);
        grid-template-areas:
            "marker name name"
            "marker dist climb";
        align-content: center;
        row-gap: var(--q-s1);
        padding: var(--q-s3) var(--q-s4) var(--q-s3) 0;
    }

    .q-route__marker {
        grid-area: marker;
        margin-inline-start: var(--q-s4);
    }

    .q-route__name {
        grid-area: name;
        padding: 0 0 0 var(--q-s3);
        font-size: 1.0625rem;
    }

    /* One inline pair, "23.4 km · 140 m" (design spec §6.17 phone): distance, a middot, climb. */
    .q-route__stat {
        flex-direction: row;
        align-items: baseline;
        align-self: baseline;
        justify-content: flex-start;
        justify-self: start;
        padding: 0 0 0 var(--q-s3);
        border: 0;
    }

    .q-route__stat--distance {
        grid-area: dist;
    }

    .q-route__stat--climb {
        grid-area: climb;
        padding-inline-start: 0;
    }

    .q-route__stat--climb::before {
        content: "\00B7" / "";
        margin-inline: var(--q-s2);
        color: var(--ec-fg-2);
        font-family: var(--q-font-mono);
        font-size: 1rem;
        line-height: 1;
    }

    .q-route__value {
        font-size: 1rem;
    }

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

    .ts-home .ts-journal--featured {
        grid-template-columns: minmax(0, 1fr);
        padding-block-start: var(--q-s4);
    }

    .ts-home .ts-journal--featured > .q-reading__head {
        grid-template-columns: minmax(3.25rem, auto) minmax(0, 1fr);
        grid-template-areas:
            "num title"
            "num sub"
            "more more";
        column-gap: 0.875rem;
        margin-block-end: var(--q-s5);
    }

    .ts-home .ts-journal--featured > .q-reading__head::before {
        block-size: auto;
    }

    .q-reading__head > .q-reading__intro {
        display: none;
    }

    /* Section links close their section on phones (after the board), as in 01, 02, 03 and 06. */
    .ts-home .ts-journal--featured:has(> .q-reading__head > .q-reading__more) {
        display: block;
        position: relative;
        padding-block-end: calc(2.75rem + var(--q-s5));
    }

    .q-reading__head > .q-reading__more {
        position: absolute;
        inset-block-end: 0;
        inset-inline-start: 0;
        margin: 0;
    }

    /* 04: poll and quiz are one board (shared hairline) and "All polls" follows the quiz. */
    .ts-home .ts-pos-slot-2:has(.q-poll-block > .q-sec__actions):has(.q-quiz) {
        position: relative;
        padding-block-end: calc(2.75rem + var(--q-s5));
    }

    .ts-home .ts-pos-slot-2:has(.q-quiz) .q-poll-block > .q-sec__actions {
        position: absolute;
        inset-block-end: 0;
        inset-inline-start: 0;
        margin: 0;
    }

    .ts-home .ts-journal--featured > .items-more {
        margin: -1px 0 0;
    }

    .ts-home .ts-journal--featured .ts-postcard {
        flex-direction: column;
        min-block-size: 0;
    }

    .ts-home .ts-journal--featured .ts-postcard__media {
        flex: 0 0 10rem;
        block-size: 10rem;
    }

    .ts-home .ts-journal--featured .ts-postcard__monogram {
        margin-block-end: -2.25rem;
        font-size: 15rem;
    }

    .ts-home .ts-journal--featured .ts-postcard__body {
        padding: var(--q-s5);
    }

    .ts-home .ts-journal--featured .ts-postlinks__item {
        min-block-size: 0;
        padding: var(--q-s5);
    }

    .q-newsletter {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--q-s6) var(--q-s5);
    }

    .q-newsletter__button {
        inline-size: 100%;
    }
}

/* A column whose only modules are phone-hidden (ts-hide-sm) must not leave its row gap behind. */
@media (width < 40rem) {
    .ts-home .ts-row > .ts-col:not(:has(> :not(.ts-hide-sm))) {
        display: none;
    }
}

/* Phones (QuorumMobile): no poll, quiz, courses or routes section; a column left empty goes too. */
@media (width < 40rem) {
    .ts-home .ts-col > .ts-module:has(> .ts-sec__body > :is(.q-poll-block, .q-quiz-block, .q-courses-block, .q-routes-block)),
    .ts-home .ts-row > .ts-col:has(> .ts-module > .ts-sec__body > :is(.q-poll-block, .q-quiz-block, .q-courses-block, .q-routes-block)):not(:has(> :not(.ts-module, .ts-hide-sm))):not(:has(> .ts-module:not(.ts-hide-sm) > .ts-sec__body > :not(.q-poll-block, .q-quiz-block, .q-courses-block, .q-routes-block))) {
        display: none;
    }
}

/* Tablets and small laptops (48–64rem): every section full width; tiles 3-up under the list. */
@media (min-width: 48rem) and (width < 64rem) {
    .ts-home .ts-pos-hero-left {
        min-block-size: 0;
    }

    .ts-home .ts-sec > .ts-sec__body > .q-block > .q-routes {
        block-size: auto;
    }
}

/* ==========================================================================
   15. Hover (fine pointers only; touch gets the same affordances statically)
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
    .ts-more:hover {
        color: var(--q-accent-strong);
    }

    .ts-more:hover .ts-more__label {
        text-decoration-thickness: 3px;
    }

    .ts-more:hover .ts-more__icon,
    .q-herocta__primary:hover > .q-glyph:last-child,
    .q-welcome:hover .q-welcome__chevron {
        transform: translateX(2px);
    }

    a.q-tag:hover {
        background-color: var(--ec-border);
    }

    .q-welcome:hover,
    .q-thread:hover,
    .q-leader:has(a.q-leader__name):hover,
    .q-agenda__item:hover,
    .q-route:hover,
    .q-board:hover,
    .q-stat--link:hover,
    .ts-home .ts-journal--featured .ts-postlinks__item:hover {
        background-color: var(--q-hover);
    }

    .q-board--highlight:hover,
    .q-chip:hover {
        background-color: var(--q-tint-hover);
    }

    .q-course:hover .q-course__body {
        background-color: var(--q-hover);
    }

    .q-course:hover .q-course__panel {
        background-color: var(--q-tint-hover);
    }

    .q-thread:hover .q-thread__link,
    .q-agenda__item:hover .q-agenda__link,
    .q-route:hover .q-route__link,
    .q-board:hover .q-board__name,
    .q-course:hover .q-course__link,
    .q-chip:hover .q-chip__title,
    .q-leader:hover a.q-leader__name,
    .q-stat--link:hover .q-stat__label,
    .q-activity__actor:hover,
    .q-activity__link:hover,
    .ts-home .ts-journal--featured .ts-postlinks__item:hover .ts-postlinks__title,
    .ts-home .ts-journal--featured .ts-postcard__body > .page-header a:hover {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    .q-routes:has(.q-route--featured:hover) .q-map__track {
        stroke-width: 7px;
    }
}