/**
 * Quorum · components: the parts every page shares (design spec §6, §9 "general rule").
 *
 *   1. Buttons (.ts-btn, .ts-button, .q-btn--l/--s/--block/--danger), the text-arrow link, links
 *   2. Fields: labels, 48px square controls, selects, textareas, checks, the inline field row
 *   3. Tags and badges (square), core tag chips, the reading-minutes and byline bits
 *   4. Boards, cells, tabs, empty states, tables in content
 *   5. Page title block (a 2px ink rule, then BS 700 40->56 sentence case) and the intro
 *   6. Breadcrumbs, pagination, article prev/next, system messages
 *   7. Prose (.ts-prose): article body, teasers, descriptions, the error and offline copy
 *   8. Module chromes on inner pages (tsCard, tsPanel, tsSection, tsClean) and core modules
 *      in them: menu, login/logout, articles
 *   9. component.php (print, modals) and print
 *
 * The home's section chrome, hero and community blocks live in community.css (scoped to
 * .ts-home or to the block classes); the shared primitives .ts-avatar, .q-tag, .ts-more, .q-bar
 * and .q-dot are defined there too and used here as they are. Core views that only some pages
 * show (sign-in, search, tags, contact, the editor, the article and blog views) are in views.css.
 *
 * Authoring (contract §2.4, kit README §6.1): every rule carries a template class outside
 * :where(), and declares its own type, spacing, list and link styles, so Tailwind Preflight and
 * Bootstrap-off pages change nothing. No radius beyond the Studio button/outer-frame radius, no
 * shadow, no scale; hover only for fine pointers.
 *
 * @copyright   Copyright (C) 2026 BulaSikku Technologies Private Limited. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

/* ==========================================================================
   1. Buttons (§6.2). .ts-button (community blocks) and .ts-btn (kit overrides; the EasyCommerce
   contract) share one look: a square teal fill under a 2px border of the same colour, or the
   secondary 2px ink frame. Hover deepens the fill to --q-accent-strong and nudges a trailing
   arrow 2px; pressed "stamps" to the inverse ink.
   ========================================================================== */

.ts-button,
.ts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--q-s2);
    min-block-size: var(--ts-control-height, 3rem);
    margin: 0;
    padding: 0 var(--ts-btn-pad-x, 1.375rem);
    border: var(--ts-btn-border-width, 2px) solid var(--ts-btn-primary-border);
    border-radius: var(--ec-btn-radius);
    background-color: var(--ts-btn-primary-bg);
    color: var(--ts-btn-primary-fg);
    font-family: var(--ts-btn-font, var(--ec-font-body));
    font-size: 1rem;
    font-weight: var(--ts-btn-weight, 600);
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--ec-dur-1) var(--ec-ease), border-color var(--ec-dur-1) var(--ec-ease), color var(--ec-dur-1) var(--ec-ease);
}

.ts-button > svg,
.ts-btn > svg {
    flex: none;
    transition: transform var(--ec-dur-1) var(--ec-ease);
}

.ts-button:focus-visible,
.ts-btn:focus-visible {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--ts-focus-gap);
}

.ts-button:active,
.ts-btn:active {
    border-color: var(--q-inverse-bg);
    background-color: var(--q-inverse-bg);
    color: var(--q-inverse-fg);
}

.ts-button--secondary,
.ts-btn.ts-btn--outline {
    border-color: var(--ts-btn-secondary-border);
    background-color: var(--ts-btn-secondary-bg);
    color: var(--ts-btn-secondary-fg);
}

.ts-button--secondary:active,
.ts-btn.ts-btn--outline:active {
    box-shadow: inset 0 calc(-1 * var(--q-current-w)) 0 var(--ec-accent);
}

/* Danger (INVENTED): the secondary construction in the danger colour; hover fills it. */
:is(.ts-button, .ts-btn).q-btn--danger {
    border-color: var(--q-danger);
    background-color: transparent;
    color: var(--q-danger);
}

/* Sizes: L 56 (hero, submit of a form page), S 40 (toolbars, table rows), block (phones). */
:is(.ts-button, .ts-btn).q-btn--l {
    gap: var(--q-s3);
    min-block-size: 3.5rem;
    padding: 0 1.75rem;
    font-size: 1.125rem;
}

:is(.ts-button, .ts-btn).q-btn--s {
    min-block-size: 2.5rem;
    padding: 0 var(--q-s4);
    font-size: 0.9375rem;
}

:is(.ts-button, .ts-btn).q-btn--block {
    inline-size: 100%;
    font-size: 1.0625rem;
    white-space: normal;
}

.ts-button[aria-disabled="true"],
.ts-btn:disabled,
.ts-btn[aria-disabled="true"] {
    border-color: var(--ec-border);
    background-color: var(--q-disabled-bg);
    color: var(--q-disabled-fg);
    cursor: not-allowed;
}

/* Loading: the label is swapped for the "Working…" string by the page; the width stays. */
:is(.ts-button, .ts-btn)[aria-busy="true"] {
    cursor: progress;
}

@media (hover: hover) and (pointer: fine) {
    .ts-button:not([aria-disabled="true"]):hover,
    .ts-btn:not(:disabled, [aria-disabled="true"]):hover {
        border-color: var(--ts-btn-primary-hover-bg);
        background-color: var(--ts-btn-primary-hover-bg);
        color: var(--ts-btn-primary-hover-fg);
    }

    .ts-button--secondary:not([aria-disabled="true"]):hover,
    .ts-btn.ts-btn--outline:not(:disabled, [aria-disabled="true"]):hover {
        border-color: var(--ts-btn-secondary-hover-border);
        background-color: var(--ts-btn-secondary-hover-bg);
        color: var(--ts-btn-secondary-hover-fg);
    }

    :is(.ts-button, .ts-btn).q-btn--danger:not(:disabled, [aria-disabled="true"]):hover {
        border-color: var(--q-danger);
        background-color: var(--q-danger);
        color: var(--ec-surface);
    }

    .ts-button:hover > svg:last-child,
    .ts-btn:hover > svg:last-child,
    .ts-more:hover > .ts-more__icon {
        transform: translateX(2px);
    }

    .ts-more:hover {
        color: var(--q-accent-strong);
    }

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

/* Visited text-arrow links keep their colour (no purple). */
.ts-more:visited {
    color: var(--ec-accent);
}

/* ==========================================================================
   2. Fields (§6.4): label PS 600 16 over a 48px square control with a 1px --ts-control border
   (>= 3:1 on every surface); focus thickens the border to 2px ink and adds the two-colour
   ring; invalid is a 2px danger border. Kit overrides print form-control + ts-input; the
   bridge's .form-control prints first, so these win by order. Help text 16 fg-2, error text
   16 danger with an x-circle.
   ========================================================================== */

:root {
    --q-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
    --q-icon-x-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E");
}

.ts-field {
    display: flex;
    flex-direction: column;
    gap: var(--q-s2);
    margin: 0;
}

.ts-field > label,
.ts-field > .form-label,
.q-label {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.ts-input,
.q-input {
    inline-size: 100%;
    min-block-size: var(--ts-control-height, 3rem);
    margin: 0;
    padding: 0 0.875rem;
    border: var(--q-hair-w) solid var(--ts-control);
    border-radius: var(--ec-btn-radius);
    background-color: var(--ts-control-bg, var(--ec-surface));
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.3;
    appearance: none;
    transition: border-color var(--ec-dur-1) var(--ec-ease);
}

textarea:is(.ts-input, .q-input) {
    min-block-size: 9rem;
    padding: var(--q-s3) 0.875rem;
    line-height: 1.5;
    resize: vertical;
}

/* Select chevron: a 16px square-cap chevron, 14px from the inline end. */
select:is(.ts-input, .q-input) {
    padding-inline-end: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%2357534E' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
    background-position: right 0.875rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
}

[data-color-scheme="dark"] select:is(.ts-input, .q-input) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23B4AFA7' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
}

:is(.ts-input, .q-input)::placeholder {
    color: var(--ec-fg-2);
    opacity: 1;
}

:is(.ts-input, .q-input):focus {
    border-color: var(--ts-control-focus-border);
    box-shadow: inset 0 0 0 1px var(--ts-control-focus-border);
    outline: none;
}

:is(.ts-input, .q-input):focus-visible {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: 2px;
    box-shadow: inset 0 0 0 1px var(--ts-control-focus-border), 0 0 0 2px var(--ts-focus-gap);
}

:is(.ts-input, .q-input)[aria-invalid="true"],
.ts-field[data-state="error"] .ts-input,
:is(.ts-input, .q-input).invalid {
    border-color: var(--q-danger);
    box-shadow: inset 0 0 0 1px var(--q-danger);
}

:is(.ts-input, .q-input):disabled {
    border-color: var(--ec-border);
    background-color: var(--q-disabled-bg);
    color: var(--q-disabled-fg);
    cursor: not-allowed;
}

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

.q-error {
    display: flex;
    gap: var(--q-s2);
    align-items: flex-start;
    margin: 0;
    color: var(--q-danger);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
}

.q-error::before {
    content: "";
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    margin-block-start: 0.1875rem;
    background-color: currentColor;
    -webkit-mask: var(--q-icon-x-circle) center / contain no-repeat;
    mask: var(--q-icon-x-circle) center / contain no-repeat;
}

/* Checks: 24px boxes, the whole row a 44px target (kit markup: .ts-check > input + label). */
.ts-check {
    display: flex;
    align-items: center;
    gap: var(--q-s3);
    min-block-size: 2.75rem;
    margin: 0;
    padding: 0;
}

.ts-check > .form-check-input {
    flex: none;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin: 0;
    float: none;
    border-width: 2px;
    border-color: var(--ts-control);
    border-radius: 0;
}

.ts-check > .form-check-input[type="radio"] {
    border-radius: 50%;
}

.ts-check > .form-check-label {
    margin: 0;
    color: var(--ec-fg);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
}

/* Inline field row (newsletter, search): input flex 1 + a button, 12px apart; stacks < 30rem. */
.q-fieldrow {
    display: flex;
    gap: var(--q-s3);
    align-items: stretch;
}

.q-fieldrow > :is(.ts-input, .q-input) {
    flex: 1 1 auto;
    min-inline-size: 0;
}

@media (width < 30rem) {
    .q-fieldrow {
        flex-direction: column;
    }
}

@media (hover: hover) and (pointer: fine) {
    :is(.ts-input, .q-input):not(:focus, :disabled, [aria-invalid="true"]):hover {
        border-color: var(--ec-fg-2);
    }
}

/* ==========================================================================
   3. Tags and badges (§6.5): square, 24px, PS 600 14 (a label, never a sentence). The kit's
   .ts-tag/.ts-badge and core's tag chips (ul.tags > li > a, Bootstrap .btn-info by default)
   take the neutral construction; a linked tag hovers to the hairline colour.
   ========================================================================== */

.ts-tag,
.ts-badge,
:is(.ts-article__tags, .ts-journal__tags, .ts-postcard__body, .ts-tags-tag__head, .q-tags) .tags > li > a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-block-size: 1.5rem;
    margin: 0;
    padding: 0.125rem var(--q-s2);
    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.25;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
}

/* Linked chips keep a 44px-tall hit area without growing the drawn tag. */
:is(.ts-article__tags, .ts-journal__tags, .ts-postcard__body, .ts-tags-tag__head, .q-tags) .tags > li > a,
a.ts-tag {
    position: relative;
}

:is(.ts-article__tags, .ts-journal__tags, .ts-postcard__body, .ts-tags-tag__head, .q-tags) .tags > li > a::after,
a.ts-tag::after {
    content: "";
    position: absolute;
    inset: -0.625rem 0;
}

.ts-badge--stock {
    background-color: var(--q-warning-soft);
    color: var(--q-warning);
}

:is(.ts-article__tags, .ts-journal__tags, .ts-postcard__body, .ts-tags-tag__head, .q-tags) .tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--q-s2);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (hover: hover) and (pointer: fine) {
    :is(.ts-article__tags, .ts-journal__tags, .ts-postcard__body, .ts-tags-tag__head, .q-tags) .tags > li > a:hover,
    a.ts-tag:hover {
        background-color: var(--ec-border);
        color: var(--ec-fg);
    }
}

/* The reading time and dates: Overpass Mono labels (§3.3), never sentences. */
.q-mono,
.q-readtime {
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   4. Boards (§4.3): a gap-ruled grid over the hairline colour with white cells, never cards
   with borders. Tabs (§6.21) are a ruled strip with a 4px current bar. Empty states (§6.22)
   stay inside their cell: a big fg-2 "0", one sentence, one text-arrow action.
   ========================================================================== */

/* .q-ruled, not .q-board: the home's boards block (community.css) owns .q-board. */
.q-ruled {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--q-hair-w);
    margin: 0;
    padding: var(--q-hair-w);
    background-color: var(--ec-border);
}

.q-ruled--top {
    padding-block-start: 0;
    border-block-start: var(--q-rule-w) solid var(--q-rule);
}

.q-ruled > * {
    grid-column: 1 / -1;
    min-inline-size: 0;
    background-color: var(--ec-surface);
}

.q-tabs {
    display: flex;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    border-block-end: var(--q-hair-w) solid var(--ec-border);
    list-style: none;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.q-tabs > * {
    flex: none;
    scroll-snap-align: start;
}

.q-tabs__tab {
    display: inline-flex;
    align-items: center;
    min-block-size: 3rem;
    margin: 0;
    padding: 0 var(--q-s5);
    border: 0;
    border-inline-end: var(--q-hair-w) solid var(--ec-border);
    border-radius: 0;
    background: none;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.q-tabs__tab:is([aria-selected="true"], [aria-current="page"], .is-active) {
    color: var(--ec-fg);
    box-shadow: inset 0 calc(-1 * var(--q-current-w)) 0 var(--ec-accent);
}

.q-tabs__tab:focus-visible {
    outline-offset: -4px;
    box-shadow: inset 0 0 0 6px var(--ts-focus-gap);
}

.q-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--q-s3);
    margin: 0;
    padding: var(--q-s8);
    background-color: var(--ec-surface);
    color: var(--ec-fg);
    font-size: 1rem;
    line-height: 1.5;
}

.q-empty::before {
    content: "0";
    color: var(--ec-fg-2);
    font-family: var(--ec-font-display);
    font-size: 4rem;
    font-weight: 800;
    line-height: 0.85;
}

@media (hover: hover) and (pointer: fine) {
    .q-tabs__tab:hover {
        background-color: var(--q-hover);
        color: var(--ec-fg);
    }
}

/* ==========================================================================
   5. Page title block (§9 general rule): a 2px ink rule, 20px, then the H1 in Big Shoulders
   700 40->56, sentence case (the 120px poster face is the home hero's alone); the intro or
   description in PS 20 fg-2. Covers the kit views and the core views without overrides.
   ========================================================================== */

:is(.ts-article__header, .ts-tags__head, .ts-tags-tag__head, .ts-auth__head, .ts-profile__head, .q-pagehead),
.ts-journal__head:not(:where(.ts-journal__head--section)),
:is(.ts-main, .ts-component) > :is(.com-contact, .com-content-archive, .com-newsfeeds-category, .com-newsfeeds-newsfeed, .com-privacy-request, .com-privacy-confirm, .com-privacy-remind, .ts-main > form.form-validate, .com-users-methods, .com-users-method, .com-users-captive, .com-contact-featured, .com-contact-category, .com-contact-categories, .com-newsfeeds-categories, .edit.item-page, .com-users-profile__edit, .com-users-profile-edit) > .page-header {
    display: flex;
    flex-direction: column;
    gap: var(--q-s3);
    margin: 0 0 var(--q-s8);
    padding: var(--q-s5) 0 0;
    border: 0;
    border-block-start: var(--q-rule-w) solid var(--q-rule);
}

:is(.ts-article__title, .ts-article__pageheading, .ts-journal__pageheading, .ts-tags__title, .ts-tags-tag__title, .ts-tags-tag__pageheading, .q-pagehead__title),
.ts-journal__head:not(:where(.ts-journal__head--section)) > .ts-journal__title,
:is(.com-contact, .com-content-archive, .com-newsfeeds-category, .com-newsfeeds-newsfeed, .com-privacy-request, .com-privacy-confirm, .com-privacy-remind, .ts-main > form.form-validate, .com-users-methods, .com-users-method, .com-users-captive, .com-contact-featured, .com-contact-category, .com-contact-categories, .com-newsfeeds-categories, .edit.item-page, .com-users-profile__edit, .com-users-profile-edit) > .page-header > :is(h1, h2) {
    margin: 0;
    padding: 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;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    text-wrap: balance;
    overflow-wrap: break-word;
    font-synthesis: none;
}

/* Kit views that print a bare h1 (categories and archive without a menu item of their own,
   Smart Search): the same title block, rule included. */
:is(.ts-catlist, .ts-archive, .ts-finder) :is(h1.ts-catlist__title, h1.ts-archive__title, h1.ts-finder__heading) {
    margin: 0 0 var(--q-s6);
    padding: var(--q-s5) 0 0;
    border: 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;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    text-wrap: balance;
    overflow-wrap: break-word;
}

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

.ts-archive__filters > :is(input, select) {
    inline-size: auto;
    min-inline-size: 0;
    flex: 0 1 auto;
}

/* A head that only holds a visually hidden heading (the menu hides the title) draws nothing. */
:is(.ts-tags__head, .ts-tags-tag__head, .ts-journal__head):not(:has(> :not(.ts-sr-only))) {
    margin: 0;
    padding: 0;
    border: 0;
}

/* A page heading above an item title: the heading is the H1, the title steps down to 32->44. */
:is(.ts-article__pageheading, .ts-journal__pageheading, .ts-tags-tag__pageheading) + :is(.ts-article__eyebrow, .ts-article__title, .ts-journal__title, .ts-tags-tag__title),
.ts-article__pageheading ~ .ts-article__title {
    font-size: clamp(2rem, 1.143vw + 1.721rem, 2.75rem);
}

.q-pagehead__intro,
:is(.ts-tags__intro, .ts-tags-tag__intro-text, .ts-journal__desc-text).ts-prose > p:first-child {
    max-inline-size: 42.5rem;
    margin: 0;
    color: var(--ec-fg-2);
    font-size: clamp(1.0625rem, 0.286vw + 0.993rem, 1.25rem);
    line-height: 1.5;
}

/* ==========================================================================
   6. Breadcrumbs, pagination, prev/next, system messages (§6.22; tooltips: the kit's knobs)
   ========================================================================== */

/* Breadcrumbs: PS 16 fg-2, mono "/" separators in --q-control, the current item fg 600 and not
   a link, 16px above the title block. The nav is labelled (the kit chromes print no module
   title for it), so the "You are here" prefix is left to assistive technology. */

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

.ts-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    background: none;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    line-height: 1.3;
    list-style: none;
}

/* 0,2,0 so Bootstrap's .breadcrumb-item + .breadcrumb-item padding never applies: the trail is
   the same with and without Bootstrap (A6.3). */
.ts-breadcrumbs__list > .ts-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.3;
}

.ts-breadcrumbs__item + .ts-breadcrumbs__item::before {
    content: "/";
    float: none;
    padding: 0 var(--q-s3);
    color: var(--q-control);
    font-family: var(--q-font-mono);
    font-weight: 400;
}

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

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

@media (hover: hover) and (pointer: fine) {
    .ts-breadcrumbs__item > a:hover {
        color: var(--q-accent-strong);
        text-decoration-thickness: 2px;
    }
}

/* Pagination: one ruled row of 44px square cells (board construction); the current page is
   the inverse ink; prev/next are text cells; disabled cells are fg-2 with no hover. */
:is(.ts-pager, .pagination__wrapper, .ts-finder__pagination, .ts-tags-pagination__links, .com-contact-category__pagination, .com-newsfeeds-category__pagination, .com-content-category__navigation, .com-content-archive__navigation) .pagination {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--q-hair-w);
    margin: 0;
    padding: var(--q-hair-w);
    background-color: var(--ec-border);
    list-style: none;
}

:is(.ts-pager, .pagination__wrapper, .ts-finder__pagination, .ts-tags-pagination__links, .com-contact-category__pagination, .com-newsfeeds-category__pagination, .com-content-category__navigation, .com-content-archive__navigation) .page-item {
    margin: 0;
    padding: 0;
}

:is(.ts-pager, .pagination__wrapper, .ts-finder__pagination, .ts-tags-pagination__links, .com-contact-category__pagination, .com-newsfeeds-category__pagination, .com-content-category__navigation, .com-content-archive__navigation) .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    margin: 0;
    padding: 0 var(--q-s3);
    border: 0;
    border-radius: 0;
    background-color: var(--ec-surface);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}

:is(.ts-pager, .pagination__wrapper, .ts-finder__pagination, .ts-tags-pagination__links, .com-contact-category__pagination, .com-newsfeeds-category__pagination, .com-content-category__navigation, .com-content-archive__navigation) .active > .page-link,
:is(.ts-pager, .pagination__wrapper, .ts-finder__pagination, .ts-tags-pagination__links) .page-link[aria-current] {
    background-color: var(--q-inverse-bg);
    color: var(--q-inverse-fg);
}

:is(.ts-pager, .pagination__wrapper, .ts-finder__pagination, .ts-tags-pagination__links, .com-contact-category__pagination, .com-newsfeeds-category__pagination, .com-content-category__navigation, .com-content-archive__navigation) .disabled > .page-link {
    background-color: var(--ec-surface);
    color: var(--ec-fg-2);
}

:is(.ts-pager, .pagination__wrapper, .ts-finder__pagination, .ts-tags-pagination__links, .com-contact-category__pagination, .com-newsfeeds-category__pagination, .com-content-category__navigation, .com-content-archive__navigation) .page-link:focus-visible {
    position: relative;
    z-index: 1;
}

.ts-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--q-s4);
    margin: var(--q-s10) 0 0;
}

:is(.ts-pager__counter, .ts-tags-pagination__counter, .counter) {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    line-height: 1.3;
}

@media (hover: hover) and (pointer: fine) {
    :is(.ts-pager, .pagination__wrapper, .ts-finder__pagination, .ts-tags-pagination__links, .com-contact-category__pagination, .com-newsfeeds-category__pagination, .com-content-category__navigation, .com-content-archive__navigation) .page-item:not(.active, .disabled) > .page-link:hover {
        background-color: var(--q-hover);
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* Article prev/next (html/plg_content_pagenavigation): a 2-cell ruled board, each cell a mono
   "Previous"/"Next" label over the neighbour's title (PS 600 18); an absent side is page ground
   with no frame, so the one link reads as intentional, not as a blank control. */
.ts-article__pager .pagenavigation {
    margin: var(--q-s10) 0 0;
}

.ts-article__pager .pagenavigation > .pagination {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    background: none;
}

.ts-article__pager .pagenavigation :is(.previous, .next, .q-pagenav__empty) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--q-s1);
    min-block-size: 5.5rem;
    margin: 0;
    padding: var(--q-s4) var(--q-s6);
    border: var(--q-hair-w) solid var(--ec-border);
    border-radius: 0;
    background-color: var(--ec-surface);
    color: var(--ec-fg);
    text-decoration: none;
}

.ts-article__pager .pagenavigation :is(.previous, .next, .q-pagenav__empty) + * {
    margin-inline-start: calc(-1 * var(--q-hair-w));
}

.ts-article__pager .pagenavigation .q-pagenav__empty {
    border-color: transparent;
    background-color: transparent;
}

.ts-article__pager .pagenavigation .next {
    align-items: flex-end;
    text-align: end;
}

.ts-article__pager .q-pagenav__label {
    color: var(--ec-fg-2);
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ts-article__pager .q-pagenav__title {
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: break-word;
}

@media (hover: hover) and (pointer: fine) {
    .ts-article__pager .pagenavigation :is(.previous, .next):hover {
        background-color: var(--q-hover);
    }

    .ts-article__pager .pagenavigation :is(.previous, .next):hover .q-pagenav__title {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

@media (width < 40rem) {
    .ts-article__pager .pagenavigation > .pagination {
        grid-template-columns: minmax(0, 1fr);
    }

    /* One column: an absent side takes no row (the base rule above sets display at 0,3,0). */
    .ts-article__pager .pagenavigation .q-pagenav__empty {
        display: none;
    }

    .ts-article__pager .pagenavigation :is(.previous, .next, .q-pagenav__empty) + * {
        margin-inline-start: 0;
        margin-block-start: calc(-1 * var(--q-hair-w));
    }
}

/* System messages (§6.22): the soft status fill, a 2px top rule in the status colour, 16/20
   padding, the title 700 and a 44px close cell. The kit's joomla-alert skin draws the grid. */
#system-message-container:not(:empty) {
    display: grid;
    gap: var(--q-s3);
    margin: 0 0 var(--q-s8);
}

#system-message-container joomla-alert {
    padding: var(--q-s4) var(--q-s5);
    border: 0;
    border-block-start: var(--q-rule-w) solid var(--ts-alert-accent);
    border-radius: 0;
    font-family: var(--ec-font-body);
    font-size: 1rem;
    line-height: 1.5;
}

#system-message-container joomla-alert .alert-message {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

#system-message-container joomla-alert .joomla-alert--close {
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    margin: calc(-1 * var(--q-s3)) calc(-1 * var(--q-s4)) calc(-1 * var(--q-s3)) 0;
    border-radius: 0;
}

/* ==========================================================================
   7. Prose (.ts-prose): the article body and teasers, category and tag descriptions, the
   custom-module layouts, the error and offline copy. PS 18/1.65 on a 68ch measure; H2 BS 700
   32, H3 PS 700 22; ordered lists with Big Shoulders index numerals; blockquote = a 6px
   signal bar + PS 20 italic; code in Overpass Mono on surface-2; tables per §6.22.
   Written as :is(.ts-prose, .ts-prose > wrapper) > element (0,1,1) with child combinators
   only, so an app mounted in an article is never reached (contract §2.4.2, kit README §6.1).
   ========================================================================== */

.ts-prose {
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    line-height: 1.65;
    overflow-wrap: break-word;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, dl, blockquote, figure, table, pre, hr, h2, h3, h4, h5, h6) {
    max-inline-size: 68ch;
    margin: 0 0 1.25rem;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, dl, blockquote, figure, table, pre, h2, h3, h4, h5, h6):last-child {
    margin-block-end: 0;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > p {
    font-size: inherit;
    line-height: inherit;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > h2 {
    margin: 2.5rem 0 1rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 2rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1.05;
    letter-spacing: 0;
    text-transform: none;
    font-synthesis: none;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > h3 {
    margin: 2rem 0 0.75rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.375rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: 0;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(h4, h5, h6) {
    margin: 1.75rem 0 0.5rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(h2, h3, h4, h5, h6):first-child {
    margin-block-start: 0;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, dl, blockquote, figure, table) a,
:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(h2, h3, h4) > a {
    color: var(--ts-link);
    font-weight: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    :is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, dl, blockquote, figure, table) a:hover,
    :is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(h2, h3, h4) > a:hover {
        color: var(--ts-link-hover);
        text-decoration-thickness: 2px;
    }
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, dl, blockquote, figure, table) :is(strong, b) {
    font-weight: 700;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(ul, ol) {
    padding: 0 0 0 1.5rem;
    list-style: disc outside;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(ul, ol) > li {
    margin: 0 0 0.5rem;
    padding: 0 0 0 0.25rem;
    font-size: inherit;
    line-height: inherit;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(ul, ol) > li::marker {
    color: var(--ec-fg-2);
}

/* Ordered lists: a real sequence, so the index numerals of the boards (BS 800 20 fg-2). */
:is(.ts-prose, .ts-prose > :is(div, section, article)) > ol {
    padding: 0;
    list-style: none;
    counter-reset: q-ol;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > ol > li {
    position: relative;
    padding: 0 0 0 2.5rem;
    counter-increment: q-ol;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > ol > li::before {
    content: counter(q-ol, decimal-leading-zero);
    position: absolute;
    inset-block-start: 0.1em;
    inset-inline-start: 0;
    inline-size: 2rem;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-display);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > blockquote {
    padding: var(--q-s1) 0 var(--q-s1) var(--q-s6);
    border: 0;
    border-inline-start: var(--q-pin-w) solid var(--q-signal);
    color: var(--ec-fg);
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.5;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > blockquote > p {
    margin: 0 0 0.75rem;
    font-size: inherit;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > blockquote > :last-child {
    margin-block-end: 0;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, blockquote, table) code,
:is(.ts-prose, .ts-prose > :is(div, section, article)) > pre {
    padding: 0.0625rem 0.3125rem;
    border-radius: 0;
    background-color: var(--ec-surface-2);
    color: var(--ec-fg);
    font-family: var(--q-font-mono);
    font-size: 0.9375rem;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > pre {
    max-inline-size: 100%;
    padding: var(--q-s4) var(--q-s5);
    overflow-wrap: anywhere;
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    line-height: 1.55;
    white-space: pre-wrap; /* wraps rather than scrolls: no scroll box out of keyboard reach */
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > hr {
    block-size: 0;
    border: 0;
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    opacity: 1;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > figure > img,
:is(.ts-prose, .ts-prose > :is(div, section, article)) > p > img {
    border: var(--q-hair-w) solid var(--ec-border);
    border-radius: var(--ec-img-radius);
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > figure > 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;
}

/* Tables in content: surface-2 header row with mono uppercase labels, hairline rows, numbers
   in mono. Wide tables scroll inside their own box instead of the page. */
:is(.ts-prose, .ts-prose > :is(div, section, article)) > table {
    display: block;
    inline-size: max-content;
    max-inline-size: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    font-size: 1rem;
    line-height: 1.4;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > table :is(th, td) {
    padding: var(--q-s3) var(--q-s4);
    border: 0;
    border-block-end: var(--q-hair-w) solid var(--ec-border);
    text-align: start;
    vertical-align: top;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > 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;
}

/* The yellow's natural job in text (search hits, highlights): ink on signal. */
:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, blockquote) mark {
    padding: 0 0.125em;
    background-color: var(--q-signal);
    color: var(--q-signal-fg);
}

/* ==========================================================================
   8. Module chromes on inner pages. The home styles its own sections (community.css, scoped
   to .ts-home); everywhere else a module is a board cell: surface, a 2px ink rule on top,
   the title in Big Shoulders 700 24 (the "sub-panel" title), 20/24 padding.
   ========================================================================== */

body:not(.ts-home) :is(.ts-card, .ts-panel),
body:not(.ts-home) .ts-sec:not(.ts-sec--untitled) {
    display: block;
    margin: 0 0 var(--q-s8);
    padding: var(--q-s5) var(--q-s6) var(--q-s6);
    border: 0;
    border-block-start: var(--q-rule-w) solid var(--q-rule);
    border-radius: 0;
    background-color: var(--ec-surface);
    box-shadow: none;
}

body:not(.ts-home) .ts-sec:not(.ts-sec--untitled) {
    padding: var(--q-s5) 0 0;
    background: none;
}

body:not(.ts-home) :is(.ts-card, .ts-panel, .ts-sec):last-child {
    margin-block-end: 0;
}

body:not(.ts-home) :is(.ts-card__title, .ts-panel__title, .ts-sec__title),
body:not(.ts-home) .ts-module > .ts-module__title {
    margin: 0 0 var(--q-s4);
    padding: 0;
    border: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    font-synthesis: none;
}

body:not(.ts-home) .ts-sec__title {
    font-size: clamp(2rem, 1.143vw + 1.721rem, 2.75rem);
}

body:not(.ts-home) .ts-sec__head {
    margin: 0 0 var(--q-s7);
}

body:not(.ts-home) .ts-sec__head > .ts-sec__title {
    margin: 0;
}

body:not(.ts-home) .ts-sec__sub {
    margin: var(--q-s2) 0 0;
    color: var(--ec-fg-2);
    font-size: 1.0625rem;
    line-height: 1.5;
}

/* tsClean modules outside the chrome bands (bottom rows, sidebars) stack 32px apart. */
:is(.ts-pos-sidebar-left, .ts-pos-sidebar-right, [class*="ts-pos-bottom"], [class*="ts-pos-top"]) > .ts-module:not(.ts-card, .ts-panel, .ts-sec) + .ts-module {
    margin-block-start: var(--q-s8);
}

/* mod_menu in a module chrome: a ruled list of 44px rows, the current item with a 4px bar. */
:is(.ts-card__body, .ts-panel__body, .ts-sec__body, .ts-module) > .mod-menu {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border-block-start: var(--q-hair-w) solid var(--ec-border);
    list-style: none;
}

:is(.ts-card__body, .ts-panel__body, .ts-sec__body, .ts-module) > .mod-menu > li {
    margin: 0;
    padding: 0;
    border-block-end: var(--q-hair-w) solid var(--ec-border);
}

:is(.ts-card__body, .ts-panel__body, .ts-sec__body, .ts-module) > .mod-menu :is(a, .mod-menu__heading, .mod-menu__separator) {
    display: flex;
    align-items: center;
    min-block-size: 2.75rem;
    padding: var(--q-s2) var(--q-s3);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

:is(.ts-card__body, .ts-panel__body, .ts-sec__body, .ts-module) > .mod-menu :is(.current, .active) > a {
    box-shadow: inset var(--q-current-w) 0 0 var(--ec-accent);
}

:is(.ts-card__body, .ts-panel__body, .ts-sec__body, .ts-module) > .mod-menu ul {
    margin: 0;
    padding: 0 0 0 var(--q-s4);
    list-style: none;
}

:is(.ts-card__body, .ts-panel__body, .ts-sec__body, .ts-module) > .mod-menu ul a {
    font-weight: 400;
}

:is(.ts-card__body, .ts-panel__body, .ts-sec__body, .ts-module) > .mod-menu a:focus-visible {
    outline-offset: -4px;
}

@media (hover: hover) and (pointer: fine) {
    :is(.ts-card__body, .ts-panel__body, .ts-sec__body, .ts-module) > .mod-menu a:hover {
        background-color: var(--q-hover);
        color: var(--ec-fg);
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* mod_login (kit markup): 48px fields with the glyph inside, a square reveal cell, a 24px
   remember check, a full-width primary button, then the help links as a ruled list. */
.ts-modlogin__userdata {
    display: flex;
    flex-direction: column;
    gap: var(--q-s4);
}

.ts-modlogin__field {
    display: flex;
    flex-direction: column;
    gap: var(--q-s2);
    margin: 0;
}

.ts-modlogin__field > label:not(.ts-sr-only) {
    margin: 0;
    color: var(--ec-fg);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.ts-modlogin__control {
    position: relative;
    display: flex;
    align-items: stretch;
}

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

.ts-modlogin__control > .ts-modlogin__input,
.ts-modlogin__control > input {
    flex: 1 1 auto;
    min-inline-size: 0;
    min-block-size: var(--ts-control-height, 3rem);
    margin: 0;
    padding: 0 0.875rem 0 2.75rem;
    border: var(--q-hair-w) solid var(--ts-control);
    border-radius: var(--ec-btn-radius);
    background-color: var(--ts-control-bg, var(--ec-surface));
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    line-height: 1.3;
}

.ts-modlogin__control > .ts-modlogin__input:focus,
.ts-modlogin__control > input:focus {
    border-color: var(--ts-control-focus-border);
    box-shadow: inset 0 0 0 1px var(--ts-control-focus-border);
    outline: none;
}

.ts-modlogin__control > .ts-modlogin__input:focus-visible,
.ts-modlogin__control > input:focus-visible {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: 2px;
    box-shadow: inset 0 0 0 1px var(--ts-control-focus-border), 0 0 0 2px var(--ts-focus-gap);
}

.ts-modlogin__control > .ts-modlogin__toggle {
    flex: none;
    inline-size: var(--ts-control-height, 3rem);
    min-block-size: var(--ts-control-height, 3rem);
    margin: 0 0 0 calc(-1 * var(--q-hair-w));
    padding: 0;
    border: var(--q-hair-w) solid var(--ts-control);
    border-radius: 0;
    background-color: var(--ec-surface);
    color: var(--ec-fg);
    font-size: 1rem;
    line-height: 1;
}

.ts-modlogin__remember {
    margin: 0;
}

.ts-modlogin__submit {
    margin: var(--q-s2) 0 0;
}

.ts-modlogin__submit > .ts-btn {
    inline-size: 100%;
}

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

.ts-modlogin__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-modlogin__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;
}

:is(.ts-modlogin__pretext, .ts-modlogin__posttext, .ts-modlogout__greeting) {
    margin: 0 0 var(--q-s4);
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.5;
}

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

.ts-modlogout__submit > .ts-btn {
    inline-size: 100%;
}

@media (hover: hover) and (pointer: fine) {
    .ts-modlogin__options > li > a:hover {
        color: var(--ts-link-hover);
        text-decoration-thickness: 2px;
    }

    .ts-modlogin__control > .ts-modlogin__toggle:hover {
        background-color: var(--q-hover);
    }
}

/* mod_articles (kit default, titles and studio layouts) in a chrome: an index-numbered ruled
   list, PS 600 18 titles as entity links, mono dates. */
:is(.ts-modarticles, .ts-articles) {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: q-mod;
}

:is(.ts-modarticles__item, .ts-articles__item) {
    position: relative;
    margin: 0;
    padding: var(--q-s4) 0 var(--q-s4) 2.5rem;
    border-block-start: var(--q-hair-w) solid var(--ec-border);
    list-style: none;
    counter-increment: q-mod;
}

:is(.ts-modarticles__item, .ts-articles__item)::before {
    content: counter(q-mod, decimal-leading-zero);
    position: absolute;
    inset-block-start: var(--q-s4);
    inset-inline-start: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

:is(.ts-modarticles__title, .ts-articles__title) {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
}

:is(.ts-modarticles__title, .ts-articles__title) a,
.ts-modarticles__titlelink,
.ts-articles__link {
    color: var(--ec-fg);
    font-weight: 600;
    text-decoration: none;
}

:is(.ts-modarticles__meta, .ts-articles__meta, .ts-modarticles__intro, .ts-articles__excerpt) {
    margin: var(--q-s2) 0 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.45;
}

:is(.ts-modarticles__meta, .ts-articles__meta) {
    font-family: var(--q-font-mono);
    font-size: 0.875rem;
}

@media (hover: hover) and (pointer: fine) {
    :is(.ts-modarticles__title, .ts-articles__title) a:hover,
    .ts-modarticles__titlelink:hover,
    .ts-articles__link:hover {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }
}

/* ==========================================================================
   9. component.php (print, modals, full-screen apps) and print
   ========================================================================== */

.ts-component {
    padding: var(--q-s6) clamp(1rem, 3vw, 2rem);
}

.ts-print :is(.ts-article__actions, .ts-article__pager) {
    display: none;
}

@media print {
    .ts-topbar,
    .ts-header,
    .ts-footer,
    .ts-skip-link,
    .ts-article__actions,
    .ts-article__pager,
    .ts-pos-breadcrumbs,
    .ts-pos-sidebar-left,
    .ts-pos-sidebar-right {
        display: none !important;
    }

    .ts-article__aside {
        position: static;
    }
}