/**
 * Quorum · views: the core views, extended from the boards (design spec §9).
 *
 *   1. Article: category tag, page title, byline (avatar, author, mono dates and minutes), the
 *      body on a 68ch measure; a meta rail on the right when the page has no sidebar
 *   2. Blog and featured (inner pages): the feature card with the reading-minutes numeral, then
 *      a ruled board of index-numbered cells, the link rows, subcategories
 *   3. Category list (table), categories (tiles), archive
 *   4. Sign-in, registration, reminders, reset, profile and the MFA screens: one ruled board,
 *      the form cell and the tinted "why join" cell
 *   5. Smart Search: the search band, filter tabs, results as index-numbered rows
 *   6. Tags: the directory board, a tag's items
 *   7. Contact, newsfeeds, privacy, front-end editing and module editing
 *
 * Asset template.quorum.views (depends on utilities; not in the preset). The head partial
 * enables it on com_content (except the designed home, community.css), com_users, com_finder,
 * com_tags, com_contact, com_newsfeeds, com_privacy and com_config, so the preset CSS on every
 * other page stays within the A6.2 budget. Same authoring rules as components.css.
 *
 * @copyright   Copyright (C) 2026 BulaSikku Technologies Private Limited. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

/* ==========================================================================
   1. Article (§9 "Article")
   ========================================================================== */

.ts-article {
    display: block;
    margin: 0;
}

.ts-article__header > :is(.ts-article__title, .ts-article__pageheading) {
    max-inline-size: 56rem;
}

/* The category as a neutral tag above the title (the same data as the info block's category,
   which the byline therefore leaves out). */
.ts-article__eyebrow {
    display: flex;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.25;
}

.ts-article__eyebrow > a {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.5rem;
    padding: 0.125rem 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.25;
    text-decoration: none;
}

.ts-article__status {
    display: flex;
    flex-wrap: wrap;
    gap: var(--q-s2);
    margin: 0;
}

.ts-article__hero {
    margin: 0 0 var(--q-s8);
}

.ts-article__hero .item-image {
    float: none;
    max-inline-size: none;
    margin: 0;
}

.ts-article__hero .item-image img {
    display: block;
    inline-size: 100%;
    border: var(--q-hair-w) solid var(--ec-border);
    border-radius: var(--ec-img-radius);
}

.ts-article__hero figcaption {
    margin: var(--q-s2) 0 0;
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Layout: one column, the details (byline) right under the title; with no sidebar on a wide
   page the details become a sticky rail of 4 columns beside the 8-column body. */
.ts-article__layout {
    display: flex;
    flex-direction: column;
    gap: var(--q-s8);
}

.ts-article__main {
    min-inline-size: 0;
}

.ts-article__aside {
    display: flex;
    flex-direction: column;
    gap: var(--q-s4);
    order: -1;
    min-inline-size: 0;
}

/* The prev/next board spans the text measure, so a lone Next ends flush with the prose. */
.ts-article__body,
.ts-article__pager {
    max-inline-size: 68ch;
}

.ts-article__pager {
    font-size: 1.125rem; /* the prose size, so its 68ch is the same measure */
}

/* Byline strip: avatar and author, then mono dates, minutes and hits. The labels of core's
   info block ("Written by:") stay for assistive technology; the category is in the eyebrow. On
   the article the strip is the title block's byline row (partials/article-byline.php). */
.ts-article__meta .article-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--q-s2) var(--q-s5);
    margin: 0;
    padding: var(--q-s3) 0;
    border-block: var(--q-hair-w) solid var(--ec-border);
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    line-height: 1.3;
}

.ts-article__meta .article-info > dd,
.ts-postcard__body > .article-info > dd {
    display: inline-flex;
    align-items: center;
    gap: var(--q-s3);
    margin: 0;
    padding: 0;
}

/* The category is the eyebrow tag on the article, and the page itself on a blog. */
:is(.ts-article__meta, .ts-postcard__body) .article-info :is([class*="icon-"], .category-name) {
    display: none;
}

.ts-article__byline {
    inline-size: 100%;
    max-inline-size: 56rem;
}

:is(.ts-article__meta, .ts-postcard__body) .article-info > .createdby {
    gap: 0;
    font-size: 0;
}

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

/* The 32px byline avatar (initial and tone from info_block.php; alt text empty). */
body:not(.ts-home) .article-info > .createdby[data-q-initial]::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-avatar-1);
    color: #FFFFFF;
    font-family: var(--ec-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    margin-inline-end: var(--q-s3);
}

body:not(.ts-home) .article-info > .createdby.q-byline--tone-1::before { background-color: var(--q-avatar-2); }
body:not(.ts-home) .article-info > .createdby.q-byline--tone-2::before { background-color: var(--q-avatar-3); }
body:not(.ts-home) .article-info > .createdby.q-byline--tone-3::before { background-color: var(--q-avatar-4); }
body:not(.ts-home) .article-info > .createdby.q-byline--tone-4::before { background-color: var(--q-avatar-5); }
body:not(.ts-home) .article-info > .createdby.q-byline--tone-5::before { background-color: var(--q-avatar-6); }

/* Dates: the short date in capitals; the "Published:" sentence stays for assistive technology
   (info_block/*_date.php wrap the date in span.q-date). */
:is(.ts-article__meta, .ts-postcard__body) .article-info > :is(.published, .create, .modified) > time {
    font-size: 0;
}

:is(.ts-article__meta, .ts-postcard__body) .article-info .q-date {
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ts-article__tags {
    margin: 0;
}

.ts-article__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--q-s2);
}

@media (min-width: 64rem) {
    .ts-row[data-ts-row="content"]:not(:has(> .ts-col:not(.ts-pos-main):not(:empty))) .ts-article__layout:not(.ts-article__layout--full) {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        align-items: start;
        column-gap: var(--q-s8);
    }

    .ts-row[data-ts-row="content"]:not(:has(> .ts-col:not(.ts-pos-main):not(:empty))) .ts-article__aside {
        position: sticky;
        inset-block-start: calc(var(--ts-sticky-offset, 0px) + var(--q-s6));
        grid-column: 2;
        grid-row: 1;
        order: 0;
        padding: var(--q-s5) var(--q-s6) var(--q-s6);
        border-block-start: var(--q-rule-w) solid var(--q-rule);
        background-color: var(--ec-surface);
    }

    .ts-row[data-ts-row="content"]:not(:has(> .ts-col:not(.ts-pos-main):not(:empty))) .ts-article__aside .ts-article__meta .article-info {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        border: 0;
    }

    .ts-row[data-ts-row="content"]:not(:has(> .ts-col:not(.ts-pos-main):not(:empty))) .ts-article__aside .ts-article__meta .article-info > dd {
        min-block-size: 2.75rem;
        border-block-end: var(--q-hair-w) solid var(--ec-border);
    }

    .ts-row[data-ts-row="content"]:not(:has(> .ts-col:not(.ts-pos-main):not(:empty))) .ts-article__aside .ts-article__meta .article-info > :is(.published, .create, .modified) > time {
        font-size: 0.875rem;
    }
}

/* Links A/B/C, custom fields, the page-break table of contents */
.ts-article__links .content-links > ul > li > a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    color: var(--ts-link);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.ts-article__main .article-index {
    margin: 0 0 var(--q-s8);
    padding: var(--q-s5) var(--q-s6);
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    background-color: var(--ec-surface);
}

/* ==========================================================================
   2. Blog and featured views on inner pages (§9 "Blog / category list", §6.18)
   ========================================================================== */

.ts-journal {
    display: flex;
    flex-direction: column;
    gap: var(--q-s8);
    counter-reset: q-post var(--q-post-start, 0);
}

body:not(.ts-home) .ts-journal__head:not(.ts-journal__head--section) {
    margin: 0;
}

.ts-journal__head:has(> .ts-sr-only:first-child) {
    padding-block-start: var(--q-s3);
}

.ts-journal__count {
    order: -1;
    margin: 0;
    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;
}

.ts-journal__head > .ts-journal__title + .ts-journal__count,
.ts-journal__head > .ts-journal__pageheading ~ .ts-journal__count {
    order: 0;
}

.ts-journal__desc {
    margin: 0;
}

.ts-journal__desc .ts-prose,
.ts-journal__desc-text.ts-prose {
    color: var(--ec-fg-2);
    font-size: clamp(1.0625rem, 0.286vw + 0.993rem, 1.25rem);
    line-height: 1.5;
}

/* The boards: lead items and intro items are gap-ruled grids of white cells. */
body:not(.ts-home) .ts-postgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--q-hair-w);
    margin: 0;
    padding: var(--q-hair-w);
    background-color: var(--ec-border);
}

body:not(.ts-home) .ts-postgrid--lead {
    padding-block-start: 0;
    border-block-start: var(--q-rule-w) solid var(--q-rule);
}

body:not(.ts-home) .ts-postgrid--lead + .ts-postgrid {
    margin-block-start: calc(-1 * var(--q-s8) - var(--q-hair-w));
    padding-block-start: 0;
}

@media (min-width: 48rem) {
    body:not(.ts-home) .ts-postgrid[data-columns]:not([data-columns="1"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 75rem) {
    body:not(.ts-home) .ts-postgrid:is([data-columns="3"], [data-columns="4"], [data-columns="5"], [data-columns="6"]) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

body:not(.ts-home) .ts-postcard {
    position: relative;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    column-gap: var(--q-s5);
    align-content: start;
    min-inline-size: 0;
    margin: 0;
    padding: var(--q-s6) var(--q-s7);
    border: 0;
    border-radius: 0;
    background-color: var(--ec-surface);
    box-shadow: none;
    counter-increment: q-post;
    transition: background-color var(--ec-dur-1) var(--ec-ease);
}

body:not(.ts-home) .ts-postcard::before {
    content: counter(q-post, decimal-leading-zero);
    grid-column: 1;
    grid-row: 1 / span 2;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
}

/* List cells show a real intro image when the article has one, never the numeral. */
body:not(.ts-home) .ts-postcard__media {
    display: none;
}

body:not(.ts-home) .ts-postgrid:not(.ts-postgrid--lead) .ts-postcard__media:has(img) {
    display: block;
    grid-column: 1 / -1;
    margin: calc(-1 * var(--q-s6)) calc(-1 * var(--q-s7)) var(--q-s5);
}

body:not(.ts-home) .ts-postcard__media .item-image {
    float: none;
    max-inline-size: none;
    margin: 0;
}

body:not(.ts-home) .ts-postcard__media img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    object-fit: cover;
}

body:not(.ts-home) .ts-postcard__body {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--q-s3);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
}

body:not(.ts-home) .ts-postcard__body > .page-header {
    margin: 0;
    padding: 0;
    border: 0;
}

body:not(.ts-home) .ts-postcard__body > .page-header > :is(h2, h3) {
    margin: 0;
    padding: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.25rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}

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

/* One link target per cell: the title's ::after covers the cell; tags, the category and the
   read-more link sit above it. The focus ring is drawn on the cell edge. */
body:not(.ts-home) .ts-postcard__body > .page-header a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
}

body:not(.ts-home) .ts-postcard__body > .page-header a:focus-visible {
    outline: none;
    box-shadow: none;
}

body:not(.ts-home) .ts-postcard__body > .page-header a:focus-visible::after {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: -4px;
    box-shadow: inset 0 0 0 6px var(--ts-focus-gap);
}

body:not(.ts-home) .ts-postcard__body :is(.tags, .readmore, .article-info a, .icons, .ts-postcard__excerpt a) {
    position: relative;
    z-index: 1;
}

body:not(.ts-home) .ts-postcard__body > .article-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--q-s2) var(--q-s4);
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    line-height: 1.3;
}

body:not(.ts-home) .ts-postcard__body > .article-info > .category-name {
    font-size: 0;
}

body:not(.ts-home) .ts-postcard__body > .article-info > .category-name > :is(a, span:not([class*="icon-"])) {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.5rem;
    padding: 0.125rem 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.25;
    text-decoration: none;
}

body:not(.ts-home) .ts-postcard__body > .ts-postcard__excerpt {
    display: -webkit-box;
    min-inline-size: 0;
    max-inline-size: 68ch;
    overflow: hidden;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

body:not(.ts-home) .ts-postcard__body > .ts-postcard__excerpt > p {
    display: inline;
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

body:not(.ts-home) .ts-postcard__body > .ts-postcard__excerpt > p + p::before {
    content: " ";
}

/* The teaser is two lines of text: an app embedded in the intro text ({gpstrack}, {poll} …) or a
   block element stays on the article page, where it has room. */
body:not(.ts-home) .ts-postcard__body > .ts-postcard__excerpt :is(div, figure, iframe, table, img, video) {
    display: none;
}

/* Read more as the text-arrow link (§6.2), not a button. Its 44px target reaches into the
   card's bottom padding, so the visible text sits as far from the cell's foot as the title from
   its head. */
body:not(.ts-home) .ts-postcard__body > .readmore {
    margin: 0 0 -1.625rem;
}

body:not(.ts-home) .ts-postcard__body > .readmore > a {
    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.3;
    text-align: start;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    white-space: normal;
}

body:not(.ts-home) .ts-postcard__body > .readmore > a > [class*="icon-chevron"] {
    display: none;
}

body:not(.ts-home) .ts-postcard__body > .readmore > a::after {
    content: "";
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    background-color: currentColor;
    -webkit-mask: var(--q-icon-arrow) center / contain no-repeat;
    mask: var(--q-icon-arrow) center / contain no-repeat;
    transition: transform var(--ec-dur-1) var(--ec-ease);
}

/* The feature card (§6.18): the reading-minutes numeral panel, cropped by the cell's bottom
   edge, then index, title in Big Shoulders 700 and the byline. */
body:not(.ts-home) .ts-postgrid--lead .ts-postcard {
    display: flex;
    column-gap: 0;
    min-block-size: 19.9375rem;
    padding: 0;
}

body:not(.ts-home) .ts-postgrid--lead .ts-postcard::before {
    position: absolute;
    inset-block-start: var(--q-s8);
    inset-inline-start: calc(16.5rem + var(--q-s8));
}

body:not(.ts-home) .ts-postgrid--lead .ts-postcard__media {
    display: flex;
    flex: 0 0 16.5rem;
    align-items: flex-end;
    margin: 0;
    overflow: hidden;
    background-color: var(--q-tint);
    transition: background-color var(--ec-dur-1) var(--ec-ease);
}

body:not(.ts-home) .ts-postgrid--lead .ts-postcard__media--placeholder {
    display: none;
}

body:not(.ts-home) .ts-postgrid--lead .ts-postcard__media:has(img) {
    align-items: stretch;
}

body:not(.ts-home) .ts-postgrid--lead .ts-postcard__media img {
    block-size: 100%;
    aspect-ratio: auto;
}

.q-numeral {
    padding-inline-start: var(--q-s5);
    line-height: 0.75;
}

body:not(.ts-home) .q-numeral__value {
    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;
    font-synthesis: none;
    user-select: none;
}

body:not(.ts-home) .ts-postgrid--lead .ts-postcard__body {
    flex: 1 1 auto;
    gap: var(--q-s4);
    padding: calc(var(--q-s8) + 2.5rem) var(--q-s8) var(--q-s8);
}

body:not(.ts-home) .ts-postgrid--lead .ts-postcard__body > .page-header > :is(h2, h3) {
    font-family: var(--ec-font-display);
    font-size: clamp(2rem, 1.143vw + 1.721rem, 2.75rem);
    font-weight: 700;
    line-height: 1;
    text-wrap: balance;
    font-synthesis: none;
}

body:not(.ts-home) .ts-postgrid--lead .ts-postcard__body > .article-info {
    margin-block-start: auto;
}

@media (width < 48rem) {
    body:not(.ts-home) .ts-postgrid--lead .ts-postcard {
        flex-direction: column;
        min-block-size: 0;
    }

    body:not(.ts-home) .ts-postgrid--lead .ts-postcard::before {
        position: static;
        padding: var(--q-s6) var(--q-s5) 0;
    }

    body:not(.ts-home) .ts-postgrid--lead .ts-postcard__media {
        flex: 0 0 10rem;
        order: -1;
    }

    body:not(.ts-home) .q-numeral__value {
        margin-block-end: -2.25rem;
        font-size: 15rem;
    }

    body:not(.ts-home) .ts-postgrid--lead .ts-postcard__body {
        padding: var(--q-s3) var(--q-s5) var(--q-s6);
    }

    body:not(.ts-home) .ts-postcard {
        padding: var(--q-s5) var(--q-s4);
        column-gap: var(--q-s3);
    }
}

@media (hover: hover) and (pointer: fine) {
    body:not(.ts-home) .ts-postcard:has(.page-header a:hover) {
        background-color: var(--q-hover);
    }

    body:not(.ts-home) .ts-postcard:has(.page-header a:hover) .ts-postcard__media {
        background-color: var(--q-tint-hover);
    }

    body:not(.ts-home) .ts-postcard__body > .page-header a:hover {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    body:not(.ts-home) .ts-postcard__body > .readmore > a:hover {
        color: var(--q-accent-strong);
        text-decoration-thickness: 3px;
    }

    body:not(.ts-home) .ts-postcard__body > .readmore > a:hover::after {
        transform: translateX(2px);
    }
}

/* More articles: a ruled list of link rows with mono dates. */
body:not(.ts-home) .ts-journal__section {
    margin: 0;
}

body:not(.ts-home) .ts-journal__section-title {
    margin: 0 0 var(--q-s4);
    padding: var(--q-s5) 0 0;
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

body:not(.ts-home) .ts-postlinks {
    display: flex;
    flex-direction: column;
    gap: var(--q-hair-w);
    margin: 0;
    padding: var(--q-hair-w);
    background-color: var(--ec-border);
    list-style: none;
}

body:not(.ts-home) .ts-postlinks__item {
    margin: 0;
    padding: 0;
    background-color: var(--ec-surface);
}

body:not(.ts-home) .ts-postlinks__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--q-s4);
    row-gap: var(--q-s1);
    min-block-size: 4rem;
    padding: var(--q-s3) var(--q-s6);
    color: var(--ec-fg);
    text-decoration: none;
}

body:not(.ts-home) .ts-postlinks__link:focus-visible {
    outline-offset: -4px;
}

body:not(.ts-home) .ts-postlinks__title {
    grid-column: 1;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
}

body:not(.ts-home) .ts-postlinks__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--q-s3);
    grid-column: 1;
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    line-height: 1.3;
}

/* The same date as the cards above: short date in capitals (one format per page). */
body:not(.ts-home) .ts-postlinks__date {
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

body:not(.ts-home) .ts-postlinks__arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--ec-accent);
}

@media (hover: hover) and (pointer: fine) {
    body:not(.ts-home) .ts-postlinks__link:hover {
        background-color: var(--q-hover);
    }

    body:not(.ts-home) .ts-postlinks__link:hover .ts-postlinks__title {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }
}

.ts-journal__actions {
    display: flex;
    gap: var(--q-s3);
}

/* ==========================================================================
   3. Category list (core table), categories (tiles, §6.10), archive
   ========================================================================== */

.com-content-category .com-content-category__table,
.com-content-category table.category {
    margin: 0;
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    background-color: var(--ec-surface);
    font-size: 1rem;
}

.com-content-category .com-content-category__table :is(th, td) {
    padding: var(--q-s3) var(--q-s4);
    vertical-align: middle;
}

.com-content-category .com-content-category__table thead th {
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
}

.com-content-category .com-content-category__table thead th a {
    color: var(--ec-fg-2);
    text-decoration: none;
}

.com-content-category .com-content-category__table tbody th a,
.com-content-category .com-content-category__table .list-title a {
    color: var(--ec-fg);
    font-weight: 600;
    text-decoration: none;
}

.com-content-category .com-content-category__table :is(.list-date, .list-hits, .list-author) {
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    white-space: nowrap;
}

.com-content-category .com-content-category__table .list-hits {
    text-align: end;
}

.com-content-category :is(.com-content-category__filter, .filters) {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--q-s3);
    margin: 0 0 var(--q-s4);
}

@media (hover: hover) and (pointer: fine) {
    .com-content-category .com-content-category__table tbody th a:hover,
    .com-content-category .com-content-category__table .list-title a:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* The list layout's own header (core markup): the page title block. */
.ts-catlist > .content-category > :is(h1, h2) {
    margin: 0 0 var(--q-s3);
    padding: var(--q-s5) 0 0;
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: clamp(2.5rem, 2.3vw + 1.9rem, 3.5rem);
    font-weight: 700;
    line-height: 1;
    text-wrap: balance;
}

.ts-catlist > .content-category > .category-desc {
    max-inline-size: 42.5rem;
    margin: 0 0 var(--q-s8);
    color: var(--ec-fg-2);
    font-size: clamp(1.0625rem, 0.286vw + 0.993rem, 1.25rem);
    line-height: 1.5;
}

.ts-catlist > .content-category > .category-desc > p {
    margin: 0;
}

/* Hits are a number in the count column, not a coloured badge. */
.com-content-category .com-content-category__table .list-hits > span {
    padding: 0;
    background: none;
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    font-weight: 400;
}

/* A short last row leaves no filled hole: the hairlines are each cell's 1px outline laid into the
   1px gaps (adjacent outlines coincide), so the space after the last cell stays the paper ground. */
body:not(.ts-home) .ts-postgrid,
.ts-catlist .ts-catgrid {
    background-color: transparent;
}

body:not(.ts-home) .ts-postgrid > *,
.ts-catgrid > * {
    outline: var(--q-hair-w) solid var(--ec-border);
}

/* The kit's list spacing (.blog-items > .blog-item:not(:last-child): a bottom rule and 28px) is
   for unruled lists; in the board every cell keeps the one outline and the same padding. */
body:not(.ts-home) .ts-postgrid.blog-items > .blog-item {
    padding-block-end: var(--q-s7);
    border-block-end: 0;
}

/* Categories as tiles: an accent square with a folder pictogram, the article count, the name. */
.ts-catgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--q-hair-w);
    margin: 0;
    padding: 0 var(--q-hair-w) var(--q-hair-w);
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    background-color: var(--ec-border);
    list-style: none;
}

.ts-catgrid__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--q-s3);
    min-block-size: 10rem;
    margin: 0;
    padding: var(--q-s5) var(--q-s6);
    background-color: var(--ec-surface);
}

.ts-catgrid__head {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: var(--q-s3);
}

/* With a description, the name sits under the icon so names line up across a row. */
.ts-catgrid__head:has(+ .ts-catgrid__desc) {
    flex: 0 0 auto;
}

.ts-catgrid__head::before {
    content: "";
    inline-size: 2.5rem;
    block-size: 2.5rem;
    background-color: var(--ec-accent);
    -webkit-mask: none;
    mask: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M9 13h8l2 3h12v12H9z' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

[data-color-scheme="dark"] .ts-catgrid__head::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M9 13h8l2 3h12v12H9z' fill='none' stroke='%23141312' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
}

.ts-catgrid__title {
    order: 2;
    margin: auto 0 0;
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
}

.ts-catgrid__title > a {
    color: var(--ec-fg);
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: none;
}

.ts-catgrid__title > a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.ts-catgrid__title > a:focus-visible {
    outline: none;
    box-shadow: none;
}

.ts-catgrid__title > a:focus-visible::after {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: -4px;
    box-shadow: inset 0 0 0 6px var(--ts-focus-gap);
}

.ts-catgrid__count {
    position: absolute;
    inset-block-start: var(--q-s5);
    inset-inline-end: var(--q-s6);
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    line-height: 1.2;
}

.ts-catgrid__toggle {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    margin: 0;
    padding: 0;
    border: var(--q-hair-w) solid var(--ts-control);
    border-radius: 0;
    background: var(--ec-surface);
    color: var(--ec-fg);
    cursor: pointer;
}

.ts-catgrid__desc {
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.45;
}

.ts-catgrid__children {
    position: relative;
    z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
    .ts-catgrid__item:has(.ts-catgrid__title > a:hover) {
        background-color: var(--q-hover);
    }

    .ts-catgrid__title > a:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* Archive: the month filter, then each article as a ruled row. */
.com-content-archive .filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--q-s3);
    margin: 0 0 var(--q-s6);
}

.com-content-archive .com-content-archive__items {
    display: flex;
    flex-direction: column;
    gap: var(--q-hair-w);
    margin: 0;
    padding: var(--q-hair-w);
    background-color: var(--ec-border);
    list-style: none;
}

.com-content-archive .com-content-archive__item {
    margin: 0;
    padding: var(--q-s5) var(--q-s6);
    background-color: var(--ec-surface);
}

.com-content-archive .com-content-archive__item .page-header :is(h2, h3) {
    margin: 0 0 var(--q-s2);
    font-family: var(--ec-font-body);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

.com-content-archive .com-content-archive__item .page-header a {
    color: var(--ec-fg);
    text-decoration: none;
}

.com-content-archive .com-content-archive__item .article-info {
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
}

/* ==========================================================================
   4. Sign-in, registration, reminders, reset, profile (§9 "Login / registration / reset")
   One ruled board centred over the ground: the form cell, and beside it (from 64rem) the
   tinted "why join" cell of the auth-aside partial.
   ========================================================================== */

.ts-auth-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--q-hair-w);
    max-inline-size: 40rem;
    margin: 0 auto;
    padding: 0 var(--q-hair-w) var(--q-hair-w);
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    background-color: var(--ec-border);
}

.ts-auth-page--aside {
    max-inline-size: 64rem;
}

@media (min-width: 64rem) {
    .ts-auth-page--aside {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}

.ts-auth {
    display: flex;
    flex-direction: column;
    gap: var(--q-s6);
    min-inline-size: 0;
    margin: 0;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 0;
    border-radius: 0;
    background-color: var(--ec-surface);
    box-shadow: none;
}

.ts-auth__title {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: clamp(2.5rem, 2.3vw + 1.9rem, 3.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    text-wrap: balance;
    font-synthesis: none;
}

.ts-auth__desc,
.ts-auth > :is(p, .ts-prose) {
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1.0625rem;
    line-height: 1.5;
}

.ts-auth__form,
.ts-auth__fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--q-s5);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Remind and reset print their instruction as the fieldset legend: an intro sentence. */
.ts-auth .ts-auth__fieldset > legend.ts-auth__desc {
    float: inline-start;
    inline-size: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.5;
}

/* Registration and profile edit: numbered fieldsets "01 Account", "02 Profile"
   (ordinal in fg-2, legend BS 700 24) under a hairline. */
.ts-auth--wide .ts-auth__form {
    counter-reset: q-fieldset;
}

.ts-auth--wide .ts-auth__fieldset {
    counter-increment: q-fieldset;
}

/* Floated, so it is not drawn into the fieldset border; the hairline is the legend's own. */
.ts-auth--wide .ts-auth__fieldset > .ts-auth__legend {
    float: inline-start;
    inline-size: 100%;
    padding-block-start: var(--q-s5);
    border-block-start: var(--q-hair-w) solid var(--ec-border);
}

.ts-auth .ts-auth__fieldset > .ts-auth__legend {
    display: flex;
    align-items: baseline;
    gap: var(--q-s3);
    float: none;
    inline-size: auto;
    margin: 0 0 var(--q-s1);
    padding: 0;
    border: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.ts-auth--wide .ts-auth__fieldset > .ts-auth__legend::before {
    content: counter(q-fieldset, decimal-leading-zero);
    color: var(--ec-fg-2);
    font-weight: 800;
}

/* Joomla's field layouts inside the board: label PS 600 16, 8px, the control. */
:is(.ts-auth, .ts-profile, .com-users-profile__edit, .com-contact__form, .edit.item-page, .ts-main > form.form-validate, .com-privacy-request, .com-privacy-confirm, .com-privacy-remind) .control-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--q-s2);
    margin: 0;
}


:is(.ts-auth, .ts-profile, .com-users-profile__edit, .com-contact__form, .edit.item-page, .ts-main > form.form-validate, .com-privacy-request, .com-privacy-confirm, .com-privacy-remind) .control-label > label,
:is(.ts-auth, .ts-profile, .com-users-profile__edit, .com-contact__form, .edit.item-page, .ts-main > form.form-validate) .form-label {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

:is(.ts-auth, .ts-profile, .com-users-profile__edit, .com-contact__form, .edit.item-page, .ts-main > form.form-validate) .control-label .star {
    color: var(--q-danger);
}

:is(.ts-auth, .ts-profile, .com-users-profile__edit, .com-contact__form, .edit.item-page, .ts-main > form.form-validate) :is(.form-text, small.form-text) {
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.4;
}

:is(.ts-auth, .ts-profile, .com-users-profile__edit, .com-contact__form, .edit.item-page, .ts-main > form.form-validate) .form-control-feedback,
:is(.ts-auth, .ts-profile, .com-users-profile__edit, .com-contact__form, .edit.item-page, .ts-main > form.form-validate) .invalid-feedback {
    color: var(--q-danger);
    font-size: 1rem;
}

:is(.ts-auth, .com-users-profile__edit, .com-contact__form, .edit.item-page, .ts-main > form.form-validate) :is(.form-control, .form-select).invalid {
    border-color: var(--q-danger);
    box-shadow: inset 0 0 0 1px var(--q-danger);
}

/* Bootstrap paints a focused field in the page ground; Quorum keeps the white cell. */
:is(.ts-auth, .ts-profile, .com-users-profile__edit, .com-contact__form, .edit.item-page, .ts-main > form.form-validate, .ts-finder, .ts-tags, .com-privacy-request, .com-privacy-confirm, .com-privacy-remind, .com-content-archive, .com-content-category) :is(.form-control, .form-select):focus {
    background-color: var(--ts-control-bg, var(--ec-surface));
}

/* The password reveal cell beside the field is square and flush. */
:is(.ts-auth, .com-users-profile__edit) .password-group .input-group > .input-password-toggle {
    min-inline-size: var(--ts-control-height, 3rem);
    border-radius: 0;
}

.ts-auth__remember {
    margin: 0;
}

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

.ts-auth__actions > .ts-btn,
.ts-auth__submit {
    inline-size: 100%;
    font-size: 1.0625rem;
}

.ts-auth__divider {
    display: flex;
    align-items: center;
    gap: var(--q-s3);
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    text-transform: uppercase;
}

.ts-auth__divider::before,
.ts-auth__divider::after {
    content: "";
    flex: 1 1 auto;
    border-block-start: var(--q-hair-w) solid var(--ec-border);
}

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

.ts-auth__extra {
    inline-size: 100%;
}

.ts-auth__options {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border-block-start: var(--q-hair-w) solid var(--ec-border);
    list-style: none;
}

.ts-auth__options > li {
    margin: 0;
    padding: 0;
    border-block-end: var(--q-hair-w) solid var(--ec-border);
    font-size: 1rem;
    line-height: 1.3;
}

.ts-auth__options > li > a {
    display: flex;
    align-items: center;
    min-block-size: 2.75rem;
    color: var(--ts-link);
    font-weight: 400;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ts-auth__options .ts-auth__register {
    font-weight: 600;
}

/* The "why join" cell (partial auth-aside): tint panel, numbered benefits. */
.ts-auth-page__aside {
    min-inline-size: 0;
    margin: 0;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background-color: var(--q-tint);
    color: var(--ec-fg);
}

.q-why__title {
    margin: 0 0 var(--q-s6);
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1;
}

.q-why__list {
    display: flex;
    flex-direction: column;
    gap: var(--q-s5);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: q-why;
}

.q-why__item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    column-gap: var(--q-s4);
    margin: 0;
    padding: 0;
    counter-increment: q-why;
}

.q-why__item::before {
    content: counter(q-why);
    grid-row: 1 / span 2;
    color: var(--ec-accent);
    font-family: var(--ec-font-display);
    font-size: 3rem;
    font-weight: 800;
    line-height: 0.85;
}

.q-why__name {
    margin: 0;
    color: var(--ec-fg);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.q-why__text {
    margin: var(--q-s1) 0 0;
    color: var(--ec-fg);
    font-size: 1rem;
    line-height: 1.45;
}

@media (width < 64rem) {
    .ts-auth-page--login .ts-auth-page__aside {
        display: none;
    }
}

/* Logout (member): the greeting and one secondary action. */
.ts-auth-page--logout .ts-auth {
    align-items: flex-start;
}

/* Profile: the header board with the edit action, then the details as a ledger. */
.ts-profile {
    display: flex;
    flex-direction: column;
    gap: var(--q-s8);
}

.ts-profile__head {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0;
}

.ts-profile__title {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: clamp(2.5rem, 2.3vw + 1.9rem, 3.5rem);
    font-weight: 700;
    line-height: 1;
    text-wrap: balance;
}

.ts-profile__actions {
    margin: 0;
}

/* The header board's identity cell (partials/profile-identity.php, §9 "Profile"): a 96px initials
   avatar, the name in Big Shoulders 700 44, the joined date in mono capitals. */
.ts-profile__head:has(> .q-identity) {
    align-items: center;
    gap: var(--q-s5);
    padding: var(--q-s6);
    background-color: var(--ec-surface);
}

.q-identity {
    display: flex;
    align-items: center;
    gap: var(--q-s6);
    min-inline-size: 0;
}

.q-identity__avatar.ts-avatar {
    inline-size: 6rem;
    block-size: 6rem;
    font-size: 2.25rem;
    font-weight: 700;
}

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

.q-identity .ts-profile__title {
    font-size: 2.75rem;
    overflow-wrap: anywhere;
}

.q-identity__meta {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

@media (width < 40rem) {
    .q-identity {
        gap: var(--q-s4);
    }

    .q-identity__avatar.ts-avatar {
        inline-size: 4rem;
        block-size: 4rem;
        font-size: 1.5rem;
    }

    .q-identity .ts-profile__title {
        font-size: 2rem;
    }
}

.ts-profile__body {
    display: flex;
    flex-direction: column;
    gap: var(--q-s8);
}

.ts-profile__body fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    background-color: var(--ec-surface);
}

.ts-profile__body legend {
    float: inline-start;
    inline-size: 100%;
    margin: 0;
    padding: var(--q-s5) var(--q-s6) var(--q-s3);
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.ts-profile__body legend + * {
    clear: both;
}

.ts-profile__body dl {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: 0; /* one continuous hairline per row: the label and value rules meet */
    margin: 0;
    padding: 0 var(--q-s6) var(--q-s3);
}

.ts-profile__body :is(dt, dd) {
    margin: 0;
    padding: var(--q-s3) 0;
    border-block-start: var(--q-hair-w) solid var(--ec-border);
    font-size: 1rem;
    line-height: 1.4;
}

.ts-profile__body dt {
    padding-inline-end: var(--q-s4);
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4rem; /* the value's line box, so label and value share a baseline */
    text-transform: uppercase;
}

.ts-profile__body dd {
    color: var(--ec-fg);
    overflow-wrap: anywhere;
}

@media (width < 40rem) {
    .ts-profile__body dl {
        grid-template-columns: minmax(0, 1fr);
    }

    .ts-profile__body dd {
        padding-block-start: 0;
        border: 0;
    }
}

/* Profile edit, MFA screens and the method list share the form board. */
:is(.com-users-profile__edit, .com-users-methods, .com-users-method, .com-users-captive) > form,
:is(.com-users-profile__edit, .com-users-methods, .com-users-method, .com-users-captive) > .com-users-methods-list {
    display: flex;
    flex-direction: column;
    gap: var(--q-s6);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    background-color: var(--ec-surface);
}

.com-users-profile__edit fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--q-s5);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

:is(.com-users-profile__edit, .com-contact, .edit.item-page, .ts-main > form.form-validate, .com-privacy-request, .com-privacy-confirm, .com-privacy-remind) :is(.form-validate, .form-horizontal, .form-vertical, form) > fieldset > legend,
.com-users-profile__edit legend {
    float: none;
    inline-size: auto;
    margin: 0;
    padding: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

/* Profile edit: the legend clears its first field; the MFA method titles are row labels under
   the fieldset legend (PS 600 18), not a second heading size. */
.ts-auth.ts-auth--wide .ts-auth__fieldset > .ts-auth__legend {
    margin-block-end: var(--q-s4);
}

.ts-auth__mfa .com-users-methods-list-method-title > h2 {
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
}

/* ==========================================================================
   5. Smart Search (§9 "Search results"): the search band, then results as index-numbered
   rows: type tag and mono date, title PS 600 18 with the hits on the accent tint, a two-line
   snippet, the taxonomy in mono.
   ========================================================================== */

.ts-finder {
    display: flex;
    flex-direction: column;
    gap: var(--q-s6);
}

.ts-finder__form {
    margin: 0;
    padding: var(--q-s5) var(--q-s6) var(--q-s6);
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    background-color: var(--ec-surface);
}

.ts-finder__search {
    display: flex;
    flex-direction: column;
    gap: var(--q-s2);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ts-finder__label {
    margin: 0;
    color: var(--ec-fg);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.ts-finder__inputrow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--q-s3);
}

.ts-finder__field {
    position: relative;
    flex: 1 1 20rem;
    min-inline-size: 0;
}

.ts-finder__field-icon {
    position: absolute;
    z-index: 1;
    inset-block-start: 50%;
    inset-inline-start: var(--q-s4);
    color: var(--ec-fg-2);
    transform: translateY(-50%);
    pointer-events: none;
}

.ts-finder__input.ts-input {
    min-block-size: 3.5rem;
    padding-inline-start: 3rem;
    font-size: 1.125rem;
}

.ts-finder__submit,
.ts-finder__advanced-toggle {
    min-block-size: 3.5rem;
}

.ts-finder__advanced {
    margin: var(--q-s5) 0 0;
    padding: var(--q-s5) 0 0;
    border: 0;
    border-block-start: var(--q-hair-w) solid var(--ec-border);
}

.ts-finder__tips {
    max-inline-size: 68ch;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.5;
}

.ts-finder__tips > p {
    margin: 0 0 var(--q-s2);
}

.ts-finder__filter .filter-branch {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    gap: var(--q-s4);
    margin: var(--q-s4) 0 0;
}

.ts-finder__results {
    display: flex;
    flex-direction: column;
    gap: var(--q-s4);
}

.ts-finder__explained,
.ts-finder__explained > p {
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.5;
}

.ts-finder__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--q-s3) var(--q-s6);
}

.ts-finder__count {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    line-height: 1.3;
}

.ts-finder__count strong {
    color: var(--ec-fg);
    font-weight: 600;
}

/* Sort options as a ruled tab strip (§6.21). */
.ts-finder__sorting {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--q-s3);
}

.ts-finder__sort-label {
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
}

.ts-finder__sort-list {
    display: flex;
    margin: 0;
    padding: 0;
    border-block-end: var(--q-hair-w) solid var(--ec-border);
    list-style: none;
}

.ts-finder__sort-item {
    margin: 0;
    padding: 0;
}

.ts-finder__sort-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    padding: 0 var(--q-s4);
    border-inline-end: var(--q-hair-w) solid var(--ec-border);
    color: var(--ec-fg-2);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
}

.ts-finder__sort-link[aria-current] {
    color: var(--ec-fg);
    box-shadow: inset 0 calc(-1 * var(--q-current-w)) 0 var(--ec-accent);
}

.ts-finder__sort-link:focus-visible {
    outline-offset: -4px;
}

.ts-finder__list {
    display: flex;
    flex-direction: column;
    gap: var(--q-hair-w);
    margin: 0;
    padding: 0 var(--q-hair-w) var(--q-hair-w);
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    background-color: var(--ec-border);
    list-style: none;
    counter-reset: q-result var(--q-start, 0);
}

.ts-finder__result {
    position: relative;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    column-gap: var(--q-s4);
    margin: 0;
    padding: var(--q-s5) var(--q-s6);
    background-color: var(--ec-surface);
    counter-increment: q-result;
}

.ts-finder__result::before {
    content: counter(q-result, decimal-leading-zero);
    color: var(--ec-fg-2);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
}

.ts-finder__result-image {
    display: none;
}

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

.ts-finder__result-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--q-s3);
    order: -1;
    margin: 0;
}

.ts-finder__result-date {
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
}

.ts-finder__result-title {
    margin: 0;
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
}

.ts-finder__result-link {
    color: var(--ec-fg);
    text-decoration: none;
}

.ts-finder .result__title-text {
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: 0;
}

.ts-finder__result-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.ts-finder__result-link:focus-visible {
    outline: none;
    box-shadow: none;
}

.ts-finder__result-link:focus-visible::after {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: -4px;
    box-shadow: inset 0 0 0 6px var(--ts-focus-gap);
}

.ts-finder__result-url {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    font-style: normal;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ts-finder__result-url cite {
    font-style: normal;
}

.ts-finder__result-desc {
    display: -webkit-box;
    max-inline-size: 68ch;
    margin: 0;
    overflow: hidden;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.ts-finder__result-taxonomy {
    display: flex;
    flex-wrap: wrap;
    gap: var(--q-s1) var(--q-s4);
    margin: 0;
    padding: 0;
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    list-style: none;
}

.ts-finder__result-tax {
    margin: 0;
}

.ts-finder__result-tax-label {
    color: var(--ec-fg-2);
}

.ts-finder__list mark {
    padding: 0 0.125em;
    background-color: var(--q-signal);
    color: var(--q-signal-fg);
    font-weight: 600;
}

/* Every empty list is the same board cell (design spec §6.22): the rule, a poster "0" (silent to
   assistive technology) and the sentence. */
.ts-finder__empty,
.ts-journal__empty,
.ts-tags-empty {
    display: flex;
    flex-direction: column;
    gap: var(--q-s3);
    margin: 0;
    padding: var(--q-s8);
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    background-color: var(--ec-surface);
    color: var(--ec-fg);
    font-size: 1rem;
    line-height: 1.5;
}

:is(.ts-finder__empty, .ts-journal__empty, .ts-tags-empty)::before {
    content: "0";
    content: "0" / "";
    color: var(--ec-fg-2);
    font-family: var(--ec-font-display);
    font-size: 4rem;
    font-weight: 800;
    line-height: 0.85;
}

.ts-finder__empty-title {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1;
}

.ts-finder__empty-body,
.ts-finder__empty-body > p {
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.5;
}

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

@media (hover: hover) and (pointer: fine) {
    .ts-finder__result:has(.ts-finder__result-link:hover) {
        background-color: var(--q-hover);
    }

    .ts-finder__result-link:hover {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    .ts-finder__sort-link:hover {
        background-color: var(--q-hover);
        color: var(--ec-fg);
    }
}

@media (width < 40rem) {
    .ts-finder__form {
        padding: var(--q-s4);
    }

    .ts-finder__inputrow > .ts-btn {
        flex: 1 1 auto;
    }

    .ts-finder__result {
        padding: var(--q-s4);
        column-gap: var(--q-s3);
    }
}

/* ==========================================================================
   6. Tags: the filter row, the directory as a board of tag cells, a tag's items
   ========================================================================== */

.ts-tags,
.ts-tags-tag {
    display: flex;
    flex-direction: column;
    gap: var(--q-s6);
}

.ts-tags__items,
.ts-tags-tag__items {
    display: flex;
    flex-direction: column;
    gap: var(--q-s6);
}

.ts-tags-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--q-s3);
    margin: 0;
}

.ts-tags-filter__search {
    display: flex;
    flex: 1 1 24rem;
    flex-wrap: wrap;
    gap: var(--q-s3);
}

.ts-tags-filter__input {
    flex: 1 1 14rem;
    min-inline-size: 0;
}

.ts-tags-filter__limit .form-select {
    min-inline-size: 6rem;
}

.ts-tags-cloud,
.ts-tags-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
    gap: var(--q-hair-w);
    margin: 0;
    padding: 0 var(--q-hair-w) var(--q-hair-w);
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    background-color: var(--ec-border);
    list-style: none;
}

:is(.ts-tags-cloud__item, .ts-tags-grid__item) {
    margin: 0;
    padding: 0;
    background-color: var(--ec-surface);
}

.ts-tag-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--q-s2);
    block-size: 100%;
    margin: 0;
    padding: var(--q-s5) var(--q-s6);
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.ts-tag-card__media img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.ts-tag-card__title {
    margin: 0;
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
}

.ts-tag-card__link {
    color: var(--ec-fg);
    text-decoration: none;
}

.ts-tag-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.ts-tag-card__link:focus-visible {
    outline: none;
    box-shadow: none;
}

.ts-tag-card__link:focus-visible::after {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: -4px;
    box-shadow: inset 0 0 0 6px var(--ts-focus-gap);
}

:is(.ts-tag-card__desc, .ts-tag-card__hits) {
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.45;
}

.ts-tag-card__hits {
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
}

/* A tag's items: the same ruled rows as the search results. */
.ts-tags-tag-list__items,
.ts-tags-tag__items > ul {
    display: flex;
    flex-direction: column;
    gap: var(--q-hair-w);
    margin: 0;
    padding: 0 var(--q-hair-w) var(--q-hair-w);
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    background-color: var(--ec-border);
    list-style: none;
    counter-reset: q-result;
}

.ts-tag-item {
    position: relative;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    column-gap: var(--q-s4);
    margin: 0;
    padding: var(--q-s5) var(--q-s6);
    background-color: var(--ec-surface);
    counter-increment: q-result;
}

.ts-tag-item::before {
    content: counter(q-result, decimal-leading-zero);
    color: var(--ec-fg-2);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
}

.ts-tag-item__media {
    display: none;
}

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

.ts-tag-item__title {
    margin: 0;
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
}

.ts-tag-item__title a {
    color: var(--ec-fg);
    text-decoration: none;
}

.ts-tag-item__excerpt {
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.5;
}

.ts-tags-table {
    inline-size: 100%;
    border-collapse: collapse;
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    background-color: var(--ec-surface);
}

.ts-tags-table :is(th, td) {
    padding: var(--q-s3) var(--q-s4);
    border-block-end: var(--q-hair-w) solid var(--ec-border);
    text-align: start;
}

.ts-tags-table th {
    background-color: var(--ec-surface-2);
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
}

.ts-tags-table__title a {
    color: var(--ec-fg);
    font-weight: 600;
    text-decoration: none;
}

.ts-tags-table__date {
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    white-space: nowrap;
}

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

@media (hover: hover) and (pointer: fine) {
    :is(.ts-tags-cloud__item, .ts-tags-grid__item):has(.ts-tag-card__link:hover),
    .ts-tag-item:has(.ts-tag-item__title a:hover) {
        background-color: var(--q-hover);
    }

    .ts-tag-card__link:hover,
    .ts-tag-item__title a:hover,
    .ts-tags-table__title a:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* ==========================================================================
   7. Contact, newsfeeds, privacy, front-end editing, module editing (core markup)
   ========================================================================== */

.com-contact .com-contact__container,
.com-contact__form > form,
:is(.com-privacy-request, .com-privacy-confirm, .com-privacy-remind) > form {
    display: flex;
    flex-direction: column;
    gap: var(--q-s5);
    margin: 0 0 var(--q-s8);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    background-color: var(--ec-surface);
}

.com-contact :is(h2, h3):not(.page-header *) {
    margin: 0 0 var(--q-s3);
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.com-contact .com-contact__address,
.com-contact dl {
    margin: 0;
    color: var(--ec-fg);
    font-size: 1rem;
    line-height: 1.5;
}

.com-contact fieldset,
:is(.com-privacy-request, .com-privacy-confirm, .com-privacy-remind) fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--q-s5);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.com-contact legend,
:is(.com-privacy-request, .com-privacy-confirm, .com-privacy-remind) legend {
    float: none;
    inline-size: auto;
    margin: 0;
    padding: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

:is(.com-contact-featured, .com-contact-category, .com-newsfeeds-category) table {
    border-block-start: var(--q-rule-w) solid var(--q-rule);
}

/* Front-end article edit and module edit: the form on a surface cell under the ink rule,
   joomla-tab as the ruled tab strip (the kit's vendor skin reads the tab knobs), the action
   toolbar first. */
.edit.item-page > form,
.ts-main > form.form-validate {
    display: flex;
    flex-direction: column;
    gap: var(--q-s6);
    padding: clamp(1rem, 3vw, 2.5rem);
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    background-color: var(--ec-surface);
}

:is(.edit.item-page, .ts-main > form.form-validate) :is(fieldset, .tab-pane) {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

:is(.edit.item-page, .ts-main > form.form-validate) .control-group + .control-group {
    margin-block-start: var(--q-s5);
}