/**
 * Quorum · Joomla core coverage (template.quorum.joomla).
 *
 * Studio community kit file (template-studio/kit/community): edit the kit, then run
 * sync-kit.mjs for every template. Designs restyle core output through the K knobs in
 * tokens.css and their own prefixed classes, never by editing this file.
 *
 * What it covers: the classes Joomla core front-end output emits that Bootstrap 5 does not style
 * (legacy/Atum vocabulary, joomla-core spec §1.4), the Joomla web components without a vendor
 * override file (joomla-dialog, fancy-select host, password meter, subform), tooltips and
 * front-end editing, blog layout modifiers, the Media Manager dialog and the editor-xtd lists.
 *
 * Island safety (contract §2.4): every selector names a Joomla class, id or custom element (or
 * sits under one), so extension apps mounted on the page are never reached. The only
 * unscoped class rule is the `.hidden` pair required by showon.js. Written only against
 * --ec-* (L0), --ts-* (L2/K) and --color-* / --space-* / --text-* (L3) tokens; works with and
 * without Bootstrap on the page.
 */

/* ==========================================================================
   1. Utilities core JavaScript and markup rely on
   ========================================================================== */

/* showon.js and subform toggle the CLASS `hidden`. Plain display:none, never visibility (apps use
   `.hidden` as a Tailwind utility with responsive overrides such as md:flex); the form-group form
   is important so no field layout can bring a hidden field back. */
.hidden {
    display: none;
}

:is(.control-group, .form-group, .subform-repeatable-group, .field-entry).hidden {
    display: none !important;
}

.element-invisible,
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.clr {
    clear: both;
}

/* ==========================================================================
   2. Headings and wrappers of core views (views without template overrides)
   ========================================================================== */

.page-header {
    margin: 0 0 var(--space-lg, 1.5rem);
}

.page-header > :is(h1, h2, h3),
:is(.com-finder, .com-content-archive, .com-content-categories, .contact-category, .content-category, .com-contact, .com-contact-featured, .com-contact-categories, .com-newsfeeds-category, .com-newsfeeds-categories, .com-newsfeeds-newsfeed, .com-tags-tag, .com-tags-tags, .com-privacy, .com-wrapper, .com-users-methods) > :is(h1, h2) {
    margin: 0;
    font-family: var(--ec-font-display);
    font-weight: var(--ec-disp-weight);
    font-style: var(--ec-disp-style);
    letter-spacing: var(--ec-disp-tracking);
    text-transform: var(--ec-disp-transform);
    line-height: 1.12;
    color: var(--ec-fg);
    text-wrap: balance;
}

.page-header > h1,
:is(.com-finder, .com-content-archive, .com-content-categories, .contact-category, .content-category, .com-contact, .com-contact-featured, .com-contact-categories, .com-newsfeeds-category, .com-newsfeeds-categories, .com-newsfeeds-newsfeed, .com-tags-tag, .com-tags-tags, .com-privacy, .com-wrapper, .com-users-methods) > h1 {
    margin-block-end: var(--space-lg, 1.5rem);
    font-size: var(--text-2xl, clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem));
}

.page-header > :is(h2, h3),
:is(.com-finder, .com-content-archive, .com-content-categories, .contact-category, .content-category, .com-contact, .com-contact-featured, .com-contact-categories, .com-newsfeeds-category, .com-newsfeeds-categories, .com-newsfeeds-newsfeed, .com-tags-tag, .com-tags-tags, .com-privacy, .com-wrapper, .com-users-methods) > h2 {
    font-size: var(--text-xl, clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem));
}

:is(.com-finder, .com-content-archive, .com-content-categories, .contact-category, .content-category, .com-contact, .com-contact-featured, .com-contact-categories, .com-newsfeeds-category, .com-newsfeeds-categories, .com-newsfeeds-newsfeed, .com-tags-tag, .com-tags-tags, .com-privacy, .com-wrapper, .com-users-methods) > h2 {
    margin-block-end: var(--space-md, 1rem);
}

.page-header > :is(h2, h3) > a {
    color: inherit;
    text-decoration: none;
}

.page-header > :is(h2, h3) > a:hover {
    color: var(--ts-link-hover);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

:is(.blog-items, .items-leading, .com-content-category-blog__items) .page-header {
    margin-block-end: var(--space-sm, 0.75rem);
}

/* Item titles of blog, featured and category lists (h2.item-title > a, h3.page-header.item-title) */
:is(.blog-items, .items-leading, .items-more, .blog-featured, .com-content-category-blog, .com-content-categories, .com-contact-categories, .categories-list) .item-title {
    margin: 0 0 var(--space-xs, 0.5rem);
    font-family: var(--ec-font-display);
    font-size: var(--text-xl, clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem));
    font-weight: var(--ec-disp-weight);
    font-style: var(--ec-disp-style);
    letter-spacing: var(--ec-disp-tracking);
    text-transform: var(--ec-disp-transform);
    line-height: 1.15;
    color: var(--ec-fg);
    text-wrap: balance;
}

:is(.blog-items, .items-leading, .items-more, .blog-featured, .com-content-category-blog, .com-content-categories, .com-contact-categories, .categories-list) .item-title > a {
    color: inherit;
    text-decoration: none;
}

:is(.blog-items, .items-leading, .items-more, .blog-featured, .com-content-category-blog, .com-content-categories, .com-contact-categories, .categories-list) .item-title > a:hover {
    color: var(--ts-link-hover);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
}

:is(.category-desc, .com-content-category-blog__description, .com-contact-category__description, .com-tags-tag__description, .com-newsfeeds-category__description) {
    margin-block-end: var(--space-lg, 1.5rem);
    color: var(--ec-fg-2);
}

.well {
    padding: var(--space-lg, 1.5rem);
    margin-block-end: var(--space-lg, 1.5rem);
    background-color: var(--ts-card-bg, var(--ec-surface));
    border: 1px solid var(--ts-card-border, var(--ec-border));
    border-radius: var(--ts-card-radius, var(--ec-radius));
    box-shadow: var(--ts-card-shadow, var(--ec-shadow));
}

.system-unpublished {
    padding: var(--space-md, 1rem);
    background-color: var(--ts-warning-bg);
    border: 1px dashed var(--ts-warning);
    border-radius: var(--ts-card-radius, var(--ec-radius));
}

/* ==========================================================================
   3. Forms (Joomla form layouts, validate.js, legacy classes)
   ========================================================================== */

.control-group {
    margin-block-end: var(--space-md, 1rem);
}

.control-label {
    margin-block-end: 0.375rem;
}

.control-label > label,
.control-label > .spacer {
    font-weight: 600;
    color: var(--ec-fg);
}

.controls > .form-text,
.controls > [id$="-desc"] {
    display: block;
    margin-block-start: 0.375rem;
    font-size: 0.9375rem;
    color: var(--ec-fg-2);
}

/* The required star is aria-hidden (the input carries `required`); quiet, not alarm red */
.star {
    color: var(--ec-fg-2);
    font-weight: 400;
}

:is(.form-validate, .form-horizontal, .form-vertical, .com-config form) > fieldset {
    min-inline-size: 0;
    margin: 0 0 var(--space-lg, 1.5rem);
    padding: 0;
    border: 0;
}

:is(.form-validate, .form-horizontal, .form-vertical, .com-config form) > fieldset > legend {
    float: none;
    width: 100%;
    margin-block-end: var(--space-md, 1rem);
    padding-block-end: var(--space-xs, 0.5rem);
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ec-fg);
    text-wrap: pretty;
    border-block-end: 1px solid var(--ec-border);
}

/* Stacked by default; side-by-side labels only where there is room. Rows that are not
   label/control pairs (remember me, submit) line up with the control column. */
@media (min-width: 48rem) {
    .form-horizontal .control-group {
        display: grid;
        grid-template-columns: 12rem minmax(0, 1fr);
        column-gap: var(--space-lg, 1.5rem);
        align-items: start;
    }

    .form-horizontal > fieldset > :not(.control-group, legend, input[type="hidden"]) {
        margin-inline-start: calc(12rem + var(--space-lg, 1.5rem));
    }

    .form-horizontal .control-group > .control-label {
        margin: 0;
        padding-block-start: calc((var(--ts-control-height, 2.75rem) - 1.5em) / 2);
    }

    .form-horizontal .control-group > :not(.control-label, .visually-hidden) {
        grid-column: 2;
    }

    .form-horizontal .control-group > .controls:empty {
        display: none;
    }
}

.form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs, 0.5rem);
}

.form-inline > :is(.form-select, select, input:not([type="hidden"])) {
    width: auto;
    max-width: 100%;
}

/* validate.js (`invalid`/`valid`, `form-control-feedback`) and aria-invalid */
.form-validate :is(input, select, textarea).invalid,
.form-validate [aria-invalid="true"]:is(input, select, textarea) {
    border-color: var(--ts-danger);
}

.form-validate :is(input, select, textarea).invalid:focus {
    border-color: var(--ts-danger);
}

.form-validate label.invalid,
.form-validate .control-label > .invalid {
    color: var(--ts-danger);
}

.form-validate :is(input, select, textarea).valid {
    border-color: var(--ts-success);
}

.form-control-feedback {
    display: block;
    margin-block-start: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ts-danger);
}

/* Bootstrap 4 .form-group wrappers core still prints (mod_login, com_users) */
:is(.mod-login, .com-users-login, .com-users-remind, .com-users-reset, .form-validate) .form-group {
    margin-block-end: var(--space-sm, 0.75rem);
}

.mod-login__options {
    display: grid;
    gap: 0.25rem;
    margin: var(--space-sm, 0.75rem) 0 0;
}

/* Inline help (com_config): the button toggles `d-none` on the help text */
.hide-aware-inline-help.d-none {
    display: none;
}

.button-inlinehelp {
    margin-inline-start: auto;
}

/* Password field: toggle button joins the input; strength meter from passwordstrength.js */
.password-group .input-group {
    flex-wrap: nowrap;
}

.password-group meter,
.com-users-profile__edit meter,
.com-users-registration meter {
    display: block;
    inline-size: 100%;
    block-size: 0.5rem;
    margin-block-start: 0.5rem;
    background: var(--ec-surface-2);
    border: 0;
    border-radius: 999px;
}

.password-group meter::-webkit-meter-bar,
.com-users-profile__edit meter::-webkit-meter-bar,
.com-users-registration meter::-webkit-meter-bar {
    background: var(--ec-surface-2);
    border: 0;
    border-radius: 999px;
    block-size: 0.5rem;
}

.password-group meter::-webkit-meter-optimum-value,
.com-users-profile__edit meter::-webkit-meter-optimum-value,
.com-users-registration meter::-webkit-meter-optimum-value {
    background: var(--ts-success);
    border-radius: 999px;
}

.password-group meter::-webkit-meter-suboptimum-value,
.com-users-profile__edit meter::-webkit-meter-suboptimum-value,
.com-users-registration meter::-webkit-meter-suboptimum-value {
    background: var(--ts-warning);
    border-radius: 999px;
}

.password-group meter::-webkit-meter-even-less-good-value,
.com-users-profile__edit meter::-webkit-meter-even-less-good-value,
.com-users-registration meter::-webkit-meter-even-less-good-value {
    background: var(--ts-danger);
    border-radius: 999px;
}

.password-group meter::-moz-meter-bar,
.com-users-profile__edit meter::-moz-meter-bar,
.com-users-registration meter::-moz-meter-bar {
    background: var(--ts-success);
    border-radius: 999px;
}

/* Fancy select host (the Choices.js skin is css/vendor/choicesjs/choices.css) */
joomla-field-fancy-select {
    display: block;
    max-width: 100%;
}

/* Modal content select field and media field rows */
.js-modal-content-select-field .input-group,
.field-media-wrapper .input-group {
    flex-wrap: nowrap;
}

.js-modal-content-select-field .input-group > .form-control {
    min-width: 0;
}

/* Subform (repeatable) */
.subform-repeatable-wrapper {
    margin-block-end: var(--space-md, 1rem);
}

.subform-repeatable-group {
    position: relative;
    margin-block-end: var(--space-sm, 0.75rem);
    padding: var(--space-md, 1rem);
    padding-block-start: calc(var(--ts-control-height-sm, 2.25rem) + var(--space-md, 1rem));
    background-color: var(--ec-surface);
    border: 1px solid var(--ec-border);
    border-radius: var(--ts-card-radius, var(--ec-radius));
}

.subform-table-layout :is(th, td) {
    vertical-align: middle;
}

/* ==========================================================================
   4. Tooltips (div[role=tooltip] after or inside the trigger) and front-end editing
   ========================================================================== */

:is(.jmodedit, .icons a, .container-popup a, .container-popup button, .subform-table-layout [tabindex]) + [role="tooltip"],
:is(.icons, .container-popup, .subform-table-layout) :is(a, button, [tabindex]) > [role="tooltip"],
.filter-search-bar__description[role="tooltip"] {
    position: absolute;
    z-index: 1070;
    display: none;
    inline-size: max-content;
    max-inline-size: 20rem;
    padding: 0.375rem 0.625rem;
    font-family: var(--ec-font-body);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: start;
    white-space: normal;
    color: var(--ts-tooltip-fg, var(--ec-bg));
    background: var(--ts-tooltip-bg, var(--ec-fg));
    border-radius: var(--ts-badge-radius, 0.375rem);
    box-shadow: var(--ts-overlay-shadow);
    pointer-events: none;
}

:is(.jmodedit, .icons a, .container-popup a, .container-popup button, .subform-table-layout [tabindex]):is(:hover, :focus-visible) + [role="tooltip"],
:is(.icons, .container-popup, .subform-table-layout) :is(a, button, [tabindex]):is(:hover, :focus-visible) > [role="tooltip"],
.filter-search-bar :is(input:hover, input:focus) + .filter-search-bar__description[role="tooltip"] {
    display: block;
}

.jmodedit + [role="tooltip"] {
    inset-block-start: calc(var(--ts-control-height, 2.75rem) + 0.25rem);
    inset-inline-end: 0;
}

.icons :is(a, button) > [role="tooltip"] {
    inset-block-start: calc(100% + 0.25rem);
    inset-inline-end: 0;
}

.filter-search-bar__description[role="tooltip"] {
    inset-block-end: calc(100% + 0.25rem);
}

/* The module edit pencil is inserted as the first child of the module's first element */
:is(.ts-module, .ts-sec, .ts-panel, .ts-bare, .ts-card, .moduletable, .mod-custom, .mod-menu, .mod-login, .mod-finder, .mod-languages, .mod-breadcrumbs__wrapper, .mod-footer, .mod-articles, .mod-list):has(> .jmodedit) {
    position: relative;
}

.jmodedit {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    z-index: 900;
    display: inline-grid;
    place-items: center;
    inline-size: var(--ts-control-height, 2.75rem);
    block-size: var(--ts-control-height, 2.75rem);
    min-height: 0;
    padding: 0;
    color: var(--ec-fg);
    background-color: var(--ec-surface);
    border: 1px solid var(--ts-control);
    border-radius: var(--ts-control-radius, var(--ec-btn-radius));
    box-shadow: var(--ts-overlay-shadow);
}

.jmodedit:hover {
    color: var(--ts-link-hover);
    background-color: var(--ec-surface-2);
}

.jmodedit:focus-visible,
.jmenuedit:focus-visible {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: 2px;
}

.jmenuedit {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.75rem;
    min-block-size: 1.75rem;
    margin-inline-end: 0.25rem;
    color: var(--ts-link);
    text-decoration: none;
    border-radius: var(--ts-badge-radius, 0.375rem);
}

.jmenuedit:hover {
    background-color: var(--ec-surface-2);
}

/* Article / contact edit icon */
.icons {
    display: flex;
    justify-content: flex-end;
    margin-block-end: var(--space-xs, 0.5rem);
}

.icons > .float-end > div {
    position: relative;
}

.icons a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-block-size: 2.25rem;
    padding: 0 0.75rem;
    font-weight: 600;
    color: var(--ec-fg);
    text-decoration: none;
    border: 1px solid var(--ts-control);
    border-radius: var(--ts-control-radius, var(--ec-btn-radius));
}

.icons a:hover {
    background-color: var(--ec-surface-2);
}

.icons a:focus-visible {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: 2px;
}

/* ==========================================================================
   5. System messages
   ========================================================================== */

#system-message-container:empty {
    display: none;
}

#system-message-container:has(joomla-alert, .alert) {
    display: grid;
    gap: var(--space-sm, 0.75rem);
    margin-block-end: var(--space-lg, 1.5rem);
}

#system-message-container > noscript > .alert {
    margin: 0;
}

/* ==========================================================================
   6. Article and blog content (com_content core layouts)
   ========================================================================== */

/* Info block: dl.article-info > dt (visually hidden) + dd items with icons */
.article-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem var(--space-md, 1rem);
    margin: 0 0 var(--space-md, 1rem);
    font-size: 0.9375rem;
    color: var(--ec-fg-2);
}

.article-info > .article-info-term {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.article-info > dd {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
}

.article-info > dd > [class^="icon-"],
.article-info > dd > [class*=" icon-"] {
    color: var(--ec-fg-2);
}

.article-info a {
    color: var(--ts-link);
}

/* Intro / full image, caption, legacy float values */
.item-image {
    margin: 0 0 var(--space-md, 1rem);
}

.item-image img {
    display: block;
    border-radius: var(--ec-img-radius);
}

.item-image > figcaption,
.item-image .caption {
    margin-block-start: 0.5rem;
    font-size: 0.875rem;
    color: var(--ec-fg-2);
}

@media (min-width: 40rem) {
    .item-image:is(.left, .float-start) {
        float: inline-start;
        max-inline-size: 50%;
        margin-inline-end: var(--space-lg, 1.5rem);
    }

    .item-image:is(.right, .float-end) {
        float: inline-end;
        max-inline-size: 50%;
        margin-inline-start: var(--space-lg, 1.5rem);
    }
}

.item-image.none {
    float: none;
}

:is(.com-content-article__body, .item-content, .blog-item)::after {
    content: "";
    display: table;
    clear: both;
}

/* Tags: ul.tags.list-inline > li > a.btn.btn-sm.btn-info (chip look comes from the bridge) */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs, 0.5rem);
    margin: var(--space-md, 1rem) 0;
    padding: 0;
    list-style: none;
}

/* Chips are spaced by the gap alone (the :not form also outweighs Bootstrap's
   .list-inline-item:not(:last-child) margin, so the spacing is the same without Bootstrap) */
.tags > li,
.tags > li:not(:last-child) {
    margin: 0;
}

/* Read more: p.readmore > a.btn.btn-secondary + chevron */
.readmore {
    margin: var(--space-sm, 0.75rem) 0 0;
}

.readmore > a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: normal;
}

/* Page navigation (prev/next) and the pagebreak TOC */
.pagenavigation {
    margin-block: var(--space-xl, 2.5rem) var(--space-md, 1rem);
}

.pagenavigation > .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs, 0.5rem);
    margin: 0;
}

.pagenavigation :is(.previous, .next) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.pagenavigation .next {
    margin-inline-start: auto;
}

.article-index h3 {
    margin-block-end: var(--space-sm, 0.75rem);
    font-family: var(--ec-font-display);
    font-size: var(--text-md, 1.25rem);
    font-weight: var(--ec-disp-weight);
}

.article-index .toclink {
    display: inline-block;
    padding-block: 0.25rem;
}

@media (max-width: 39.9988rem) {
    .article-index {
        float: none !important;
        margin-inline: 0 !important;
    }
}

@media (min-width: 40rem) {
    .article-index {
        max-inline-size: 18rem;
    }
}

.article-index .toclink.active {
    font-weight: 700;
    color: var(--ec-fg);
}

/* Links A/B/C and custom fields */
.content-links > ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs, 0.5rem);
    padding: 0;
    list-style: none;
}

.fields-container {
    display: grid;
    gap: 0.375rem;
    margin: var(--space-md, 1rem) 0;
    padding: 0;
    list-style: none;
}

.fields-container > .field-entry {
    margin: 0;
}

.field-label {
    font-weight: 700;
}

.field-label::after {
    content: " ";
}

/* Vote plugin */
.content_rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ec-fg-2);
}

.content_rating :is(.vote-star, .vote-star-half, .vote-star-empty) {
    inline-size: 1.125em;
    block-size: 1.125em;
    fill: currentColor;
    color: var(--ts-signal);
}

.content_rating .vote-star-empty {
    color: var(--ts-control);
}

.content_vote {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs, 0.5rem);
}

/* Blog lists: leading/intro items, links list, children, counter */
:is(.blog-items, .items-leading) {
    display: grid;
    gap: var(--space-xl, 2.5rem) var(--ec-grid-gap, 1.5rem);
    margin-block-end: var(--space-xl, 2.5rem);
}

.blog-item,
.items-leading > [class*="leading-"] {
    min-inline-size: 0;
}

.blog-items > .blog-item:not(:last-child) {
    padding-block-end: var(--space-xl, 2.5rem);
    border-block-end: 1px solid var(--ec-border);
}

:is(.blog-items[class*="columns-"], .blog-items[class*="masonry-"], .blog-items.boxed) > .blog-item {
    padding-block-end: 0;
    border-block-end: 0;
}

@media (min-width: 48rem) {
    .blog-items.columns-2,
    .blog-items.masonry-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-items.columns-3,
    .blog-items.masonry-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-items.columns-4,
    .blog-items.masonry-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .blog-items.columns-3,
    .blog-items.masonry-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .blog-items.columns-4,
    .blog-items.masonry-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Masonry: CSS columns keep the natural item order top-to-bottom per column */
@supports not (grid-template-rows: masonry) {
    @media (min-width: 48rem) {
        .blog-items:is(.masonry-2, .masonry-3, .masonry-4) {
            display: block;
            column-gap: var(--ec-grid-gap, 1.5rem);
            columns: 2;
        }

        .blog-items:is(.masonry-2, .masonry-3, .masonry-4) > .blog-item {
            margin-block-end: var(--space-xl, 2.5rem);
            break-inside: avoid;
        }
    }

    @media (min-width: 64rem) {
        .blog-items.masonry-3 {
            columns: 3;
        }

        .blog-items.masonry-4 {
            columns: 4;
        }
    }
}

/* Spanning items (Cassiopeia vocabulary, set per article in its Layout "CSS class") */
@media (min-width: 64rem) {
    .blog-items > .blog-item.span-col-2 { grid-column: span 2; }
    .blog-items > .blog-item.span-col-3 { grid-column: span 3; }
    .blog-items > .blog-item.span-col-4 { grid-column: span 4; }
    .blog-items > .blog-item.span-row-2 { grid-row: span 2; }
    .blog-items > .blog-item.span-row-3 { grid-row: span 3; }
    .blog-items > .blog-item.span-row-4 { grid-row: span 4; }
}

/* Boxed items: the card look */
:is(.blog-items, .items-leading).boxed > :is(.blog-item, [class*="leading-"]) {
    padding: var(--space-lg, 1.5rem);
    background-color: var(--ts-card-bg, var(--ec-surface));
    border: 1px solid var(--ts-card-border, var(--ec-border));
    border-radius: var(--ts-card-radius, var(--ec-radius));
    box-shadow: var(--ts-card-shadow, var(--ec-shadow));
}

/* Image placement modifiers (image-left/right/top/bottom, image-alternate) */
@media (min-width: 40rem) {
    :is(.blog-items, .items-leading):is(.image-left, .image-right, .image-alternate) > :is(.blog-item, [class*="leading-"]):has(> .item-image) {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        gap: var(--space-lg, 1.5rem);
        align-items: start;
    }

    :is(.blog-items, .items-leading).image-right > :is(.blog-item, [class*="leading-"]):has(> .item-image) {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }

    :is(.blog-items, .items-leading).image-right > :is(.blog-item, [class*="leading-"]) > .item-image {
        order: 2;
    }

    :is(.blog-items, .items-leading).image-alternate > :is(.blog-item, [class*="leading-"]):nth-child(even):has(> .item-image) {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }

    :is(.blog-items, .items-leading).image-alternate > :is(.blog-item, [class*="leading-"]):nth-child(even) > .item-image {
        order: 2;
    }

    :is(.blog-items, .items-leading):is(.image-left, .image-right, .image-alternate) .item-image {
        float: none;
        max-inline-size: none;
        margin: 0;
    }
}

:is(.blog-items, .items-leading).image-bottom > :is(.blog-item, [class*="leading-"]) {
    display: flex;
    flex-direction: column;
}

:is(.blog-items, .items-leading).image-bottom > :is(.blog-item, [class*="leading-"]) > .item-image {
    order: 2;
    margin: var(--space-md, 1rem) 0 0;
}

:is(.blog-items, .items-leading).image-top .item-image,
:is(.blog-items, .items-leading).image-bottom .item-image {
    float: none;
    max-inline-size: none;
}

.com-content-blog__links,
.com-content-category-blog__links {
    margin-block: var(--space-lg, 1.5rem);
}

.com-content-blog__links > ul,
.com-content-category-blog__links > ul,
ul.com-content-blog__links {
    display: grid;
    gap: 0.5rem;
    padding: 0;
    list-style: none;
}

.cat-children {
    margin-block: var(--space-lg, 1.5rem);
}

.cat-children > h3 {
    font-family: var(--ec-font-display);
    font-size: var(--text-lg, 1.375rem);
    font-weight: var(--ec-disp-weight);
}

.com-content-category-blog__children .page-header,
.com-content-categories__items .page-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs, 0.5rem);
}

/* Counters ("Page 1 of 3") and the pagination wrapper (nested .pagination by core) */
.counter,
:is(.com-content-category-blog__counter, .com-content-category__counter, .com-contact-category__counter, .com-finder__counter, .com-tags-tag__counter, .com-newsfeeds-category__counter) {
    font-size: 0.875rem;
    color: var(--ec-fg-2);
}

.pagination__wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm, 0.75rem);
    margin-block: var(--space-xl, 2.5rem) var(--space-md, 1rem);
}

.pagination__wrapper > .pagination-toolbar {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm, 0.75rem);
    margin: 0;
}

.pagination__wrapper > .pagination-toolbar > .pagination {
    margin: 0;
}

.pagination-toolbar > .limit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

:is(.com-content-category-blog__navigation, .com-content-category__navigation, .com-contact-category__navigation, .com-finder__navigation, .com-tags-tag__navigation, .com-newsfeeds-category__navigation) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm, 0.75rem);
    margin-block: var(--space-xl, 2.5rem) var(--space-md, 1rem);
}

:is(.com-content-category-blog__navigation, .com-content-category__navigation, .com-contact-category__navigation, .com-finder__navigation, .com-tags-tag__navigation, .com-newsfeeds-category__navigation) > :is(.counter, .com-content-category-blog__counter, .com-content-category__counter, .com-contact-category__counter, .com-finder__counter, .com-tags-tag__counter, .com-newsfeeds-category__counter) {
    order: 2;
    float: none !important;
    margin: 0;
    padding: 0 !important;
}

/* ==========================================================================
   7. Lists and tables of core list views (category list, contacts, tags, newsfeeds)
   ========================================================================== */

:is(.com-content-category__table, .com-contact-category__items table, .com-contact-featured__table, .com-tags-tag-list table, .com-newsfeeds-category__items table) {
    margin-block-end: var(--space-md, 1rem);
}

:is(.com-content-category__table, .com-contact-category__items table, .com-contact-featured__table, .com-tags-tag-list table) :is(th, td) {
    vertical-align: middle;
}

:is(.com-content-category__table, .com-tags-tag-list table) .list-title a {
    font-weight: 600;
    color: var(--ec-fg);
    text-decoration: none;
}

:is(.com-content-category__table, .com-tags-tag-list table) .list-title a:hover {
    color: var(--ts-link-hover);
    text-decoration: underline;
}

/* Wide tables scroll inside themselves on phones instead of widening the page */
@media (max-width: 47.9988rem) {
    :is(.com-content-category__table, .com-contact-category__items table, .com-contact-featured__table, .com-tags-tag-list table, .container-popup table) {
        display: block;
        max-inline-size: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.com-content__filter,
.com-contact-category__filter,
.com-tags-tag__filter,
.com-tags-tags__filter,
.com-newsfeeds-category__filter {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs, 0.5rem);
    margin-block-end: var(--space-md, 1rem);
}

.list-striped,
.list-condensed {
    padding: 0;
    list-style: none;
}

.list-striped > li {
    padding: 0.625rem 0.75rem;
    border-block-end: 1px solid var(--ec-border);
}

.list-striped > li:nth-child(odd) {
    background-color: rgba(var(--ts-fg-rgb), 0.04);
}

.list-condensed > li {
    padding: 0.25rem 0;
}

.dl-horizontal {
    display: grid;
    gap: 0.375rem var(--space-md, 1rem);
    margin: 0 0 var(--space-md, 1rem);
}

.dl-horizontal > dt {
    font-weight: 700;
    color: var(--ec-fg);
}

.dl-horizontal > dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (min-width: 40rem) {
    .dl-horizontal > dt {
        grid-column: 1;
    }

    .dl-horizontal > dd {
        grid-column: 2;
    }
}

@media (min-width: 40rem) {
    .dl-horizontal {
        grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    }
}

/* Categories tree (shared-categories-accordion.css hard-codes light borders) */
:is(.com-content-categories__item-title, .com-contact-categories__item-title, .com-newsfeeds-categories__item-title) > a {
    font-family: var(--ec-font-display);
    font-size: var(--text-lg, 1.375rem);
    font-weight: var(--ec-disp-weight);
    letter-spacing: var(--ec-disp-tracking);
    text-transform: var(--ec-disp-transform);
    color: var(--ec-fg);
    text-decoration: none;
}

:is(.com-content-categories__item-title, .com-contact-categories__item-title, .com-newsfeeds-categories__item-title) > a:hover {
    color: var(--ts-link-hover);
    text-decoration: underline;
}

.com-content-categories__items > [class*="__item"],
.com-contact-categories__items > [class*="__item"],
.com-newsfeeds-categories__items > [class*="__item"] {
    border-color: var(--ec-border);
}

.categories-list [id^="category-btn-"],
.com-content-categories__items [id^="category-btn-"] {
    border-color: var(--ts-control);
}

/* Contact */
.com-contact__thumbnail img,
.contact-image img {
    border-radius: var(--ec-img-radius);
}

.com-contact__address .jicons-icon,
.com-contact__address .jicons-image,
.contact-address .jicons-icon {
    color: var(--ec-fg-2);
}

.com-contact__form,
.contact-form {
    margin-block-start: var(--space-lg, 1.5rem);
}

/* Tag lists */
.com-tags__items,
.com-tags-tag__category,
.com-tags-compact__items {
    padding: 0;
    list-style: none;
}

.com-tags-tag__category > li > :is(h2, h3) {
    margin: 0;
    font-family: var(--ec-font-display);
    font-size: var(--text-md, 1.25rem);
    font-weight: var(--ec-disp-weight);
    letter-spacing: var(--ec-disp-tracking);
    line-height: 1.25;
}

.com-tags-tag__category > li > :is(h2, h3) > a {
    color: var(--ec-fg);
    text-decoration: none;
}

.com-tags-tag__category > li > :is(h2, h3) > a:hover {
    color: var(--ts-link-hover);
    text-decoration: underline;
}

/* Legacy .inputbox search fields in core list filters look like the other controls */
:is(.com-tags-tags__filter, .com-tags-tag__filter, .com-content__filter, .com-contact-category__filter, .com-newsfeeds-category__filter, .com-content-archive__filters) .inputbox {
    min-height: var(--ts-control-height, 2.75rem);
    min-inline-size: 0;
    padding: 0 0.75rem;
    font: inherit;
    color: var(--ec-fg);
    background-color: var(--ts-control-bg, var(--ec-surface));
    border: var(--ts-control-border-width, 1px) solid var(--ts-control);
    border-radius: var(--ts-control-radius, var(--ec-btn-radius));
}

:is(.com-tags-tags__filter, .com-tags-tag__filter, .com-content__filter, .com-contact-category__filter, .com-newsfeeds-category__filter, .com-content-archive__filters) .inputbox::placeholder {
    color: var(--ec-fg-2);
    opacity: 1;
}

/* Smart Search results: highlighted terms and the result list */
.js-highlight mark,
.com-finder__results mark {
    padding: 0 0.125em;
    color: var(--ec-fg);
    background-color: var(--ts-warning-bg);
    border-radius: 0.125em;
}

.com-finder__results-list {
    padding: 0;
    list-style: none;
}

.com-finder .result__item + .result__item {
    border-block-start-color: var(--ec-border);
}

.com-finder .result__title-link {
    text-decoration: none;
}

.com-finder .result__title-text {
    font-family: var(--ec-font-display);
    font-weight: var(--ec-disp-weight);
    letter-spacing: var(--ec-disp-tracking);
    color: var(--ts-link);
}

.com-finder .result__title-link:is(:hover, :focus-visible) .result__title-text {
    color: var(--ts-link-hover);
}

.com-finder .result__title-url {
    font-size: 0.875rem;
    color: var(--ec-fg-2);
    overflow-wrap: anywhere;
}

.com-finder :is(.result__description, .result__date) {
    color: var(--ec-fg-2);
}

/* The query field and its two buttons stack on phones */
@media (max-width: 39.9988rem) {
    .com-finder__search .form-inline,
    .com-finder__search .input-group {
        flex-wrap: wrap;
        row-gap: var(--space-xs, 0.5rem);
    }

    /* With suggestions on, awesomplete wraps the field and the wrapper is the flex item */
    .com-finder__search .input-group > :is(.form-control, .awesomplete) {
        flex: 1 1 100%;
    }

    .com-finder__search .input-group > .form-control,
    .com-finder__search .input-group > .awesomplete > .form-control {
        border-radius: var(--ts-control-radius, var(--ec-btn-radius)) !important;
    }

    .com-finder__search .input-group > button {
        flex: 1 1 auto;
        margin-inline-start: 0 !important;
        border-radius: var(--ts-control-radius, var(--ec-btn-radius)) !important;
    }

    .com-finder__search .input-group > button + button {
        margin-inline-start: var(--space-xs, 0.5rem) !important;
    }
}

.result__taxonomy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem var(--space-sm, 0.75rem);
    padding: 0;
    font-size: 0.875rem;
    list-style: none;
    color: var(--ec-fg-2);
}

/* Archive */
.com-content-archive__filters {
    margin-block-end: var(--space-lg, 1.5rem);
}

.com-content-archive__items {
    display: grid;
    gap: var(--space-lg, 1.5rem);
    padding: 0;
    list-style: none;
}

/* ==========================================================================
   8. Core modules (default layouts, when no template override is used)
   ========================================================================== */

.mod-list {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mod-list > li > a {
    display: inline-block;
    padding-block: 0.375rem;
}

.mod-menu__sub {
    padding-inline-start: var(--space-md, 1rem);
    list-style: none;
}

.mod-menu__heading,
.mod-menu__separator {
    font-weight: 700;
    color: var(--ec-fg-2);
}

.mod-breadcrumbs__wrapper .breadcrumb {
    flex-wrap: wrap;
}

.mod-breadcrumbs__here {
    color: var(--ec-fg-2);
}

.mod-languages__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs, 0.5rem);
    padding: 0;
    list-style: none;
}

.mod-languages .lang-active > a {
    font-weight: 700;
}

.mod-tagspopular,
.tagspopular > ul,
.mod-tagspopular-cloud {
    padding: 0;
    list-style: none;
}

.tagscloud,
.mod-tagspopular-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs, 0.5rem);
}

.tagscloud .tag-count,
.tagspopular .tag-count {
    margin-inline-start: 0.25rem;
    color: var(--ec-fg-2);
}

.newsflash-title,
.mod-articlesnews__item .newsflash-title {
    font-family: var(--ec-font-display);
    font-weight: var(--ec-disp-weight);
}

.mod-articlesnews-horizontal,
.newsflash-horiz {
    display: grid;
    gap: var(--ec-grid-gap, 1.5rem);
    padding: 0;
    list-style: none;
}

@media (min-width: 48rem) {
    .mod-articlesnews-horizontal,
    .newsflash-horiz {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }
}

.bannergroup .banneritem + .banneritem {
    margin-block-start: var(--space-sm, 0.75rem);
}

.mod-footer {
    color: var(--ec-fg-2);
}

.mod-randomimage img,
.random-image img {
    border-radius: var(--ec-img-radius);
}

/* ==========================================================================
   9. joomla-dialog (J5 modal system: editor-xtd buttons, modal-select, media field)
   ========================================================================== */

joomla-dialog dialog {
    display: flex;
    flex-direction: column;
    inline-size: min(96vw, 1700px);
    block-size: 96vh;
    max-inline-size: 96vw;
    max-block-size: 96vh;
    padding: 0;
    color: var(--ec-fg);
    background-color: var(--ec-surface);
    border: 1px solid var(--ec-border);
    border-radius: var(--ts-overlay-radius, var(--ec-radius));
    box-shadow: var(--ts-overlay-shadow);
}

joomla-dialog dialog:not([open]) {
    display: none;
}

joomla-dialog dialog::backdrop {
    background-color: var(--ts-scrim);
}

joomla-dialog dialog[open] {
    animation: ts-dialog-in var(--ec-dur-2, 0.2s) var(--ec-ease, ease-out);
}

@keyframes ts-dialog-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
}

@media (min-width: 90rem) {
    joomla-dialog dialog {
        inline-size: 80vw;
        block-size: 80vh;
    }
}

joomla-dialog :is(.joomla-dialog-alert, .joomla-dialog-confirm) dialog,
joomla-dialog[type="inline"]:not(.joomla-dialog-content-select-field) dialog {
    inline-size: min(34rem, 96vw);
    block-size: auto;
}

joomla-dialog .joomla-dialog-container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-block-size: 0;
}

joomla-dialog .joomla-dialog-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 0.75rem);
    padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
    border-block-end: 1px solid var(--ec-border);
}

joomla-dialog .joomla-dialog-header.empty,
joomla-dialog .joomla-dialog-footer.empty {
    display: none;
}

joomla-dialog .joomla-dialog-header > .header-icon {
    color: var(--ec-fg-2);
}

joomla-dialog .joomla-dialog-header > .buttons-holder {
    margin-inline-start: auto;
}

joomla-dialog .joomla-dialog-header h3 {
    margin: 0;
    font-family: var(--ec-font-display);
    font-size: var(--text-md, 1.25rem);
    font-weight: var(--ec-disp-weight);
    line-height: 1.2;
    color: var(--ec-fg);
}

joomla-dialog .joomla-dialog-body {
    position: relative;
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: auto;
}

joomla-dialog .joomla-dialog-body:not(:has(> .iframe-content)) {
    padding: var(--space-md, 1rem);
}

joomla-dialog .joomla-dialog-body > .iframe-content {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
}

joomla-dialog.loading .joomla-dialog-body::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: 3px solid var(--ec-border);
    border-block-start-color: var(--ts-signal);
    border-radius: 50%;
    animation: ts-dialog-spin 0.9s linear infinite;
}

@keyframes ts-dialog-spin {
    to {
        transform: rotate(360deg);
    }
}

joomla-dialog .joomla-dialog-footer {
    padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
    border-block-start: 1px solid var(--ec-border);
}

joomla-dialog .buttons-holder {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-xs, 0.5rem);
}

@media (prefers-reduced-motion: reduce) {
    joomla-dialog dialog[open] {
        animation: none;
    }

    joomla-dialog.loading .joomla-dialog-body::before {
        animation-duration: 3s;
    }
}

joomla-core-loader {
    z-index: 10000;
}

/* ==========================================================================
   10. Front-end editing forms (article/contact edit, com_config) and TinyMCE
   ========================================================================== */

:is(.edit.item-page, .com-config) .d-grid {
    margin-block-end: var(--space-md, 1rem);
}

:is(.edit.item-page, .com-config) joomla-tab {
    margin-block-end: var(--space-lg, 1.5rem);
}

.title-alias,
.options-form {
    margin-block-end: var(--space-md, 1rem);
}

.js-editor-tinymce .tox-tinymce {
    border: var(--ts-control-border-width, 1px) solid var(--ts-control);
    border-radius: var(--ts-control-radius, var(--ec-btn-radius));
}

.toggle-editor {
    margin-block-start: var(--space-sm, 0.75rem);
}

.editor-xtd-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-block-start: var(--space-xs, 0.5rem);
}

.alert-parent {
    margin-block-end: var(--space-md, 1rem);
}

/* Template settings (com_config "templates") mount the Template Studio app, which is light-only.
   In the dark scheme it sits on its own light panel, painted with the app's own surface token, so
   its text keeps the contrast it was designed for. */
[data-color-scheme="dark"] .templatestudio-app {
    color-scheme: light;
    margin-block-end: var(--space-md, 1rem);
    padding: var(--space-lg, 1.5rem);
    background-color: var(--tsa-surface-2, var(--ec-surface-2));
    border-radius: var(--ec-radius);
}

/* ==========================================================================
   11. Admin list markup served on the site (editor-xtd and modal-select lists in component.php)
   ========================================================================== */

.container-popup {
    padding: var(--space-md, 1rem);
}

.container-popup .w-1 { width: 1%; }
.container-popup .w-5 { width: 5%; }
.container-popup .w-10 { width: 10%; }
.container-popup .w-15 { width: 15%; }
.container-popup .w-20 { width: 20%; }
.container-popup .w-30 { width: 30%; }
.container-popup .w-40 { width: 40%; }

.container-popup .select-link {
    font-weight: 600;
    color: var(--ts-link);
    cursor: pointer;
}

.container-popup .select-link:hover {
    color: var(--ts-link-hover);
    text-decoration: underline;
}

.container-popup .tbody-icon {
    color: var(--ec-fg-2);
}

.container-popup .jgrid {
    color: var(--ec-fg-2);
}

.container-popup [class*="icon-publish"],
.container-popup .icon-check {
    color: var(--ts-success);
}

.container-popup [class*="icon-unpublish"],
.container-popup .icon-times {
    color: var(--ts-danger);
}

.container-popup .ordering-select {
    display: flex;
    gap: var(--space-xs, 0.5rem);
}

/* Core empty state (layouts/joomla/content/emptystate.php) */
.container-popup .display-5 {
    font-family: var(--ec-font-display);
    font-weight: var(--ec-disp-weight);
    color: var(--ec-fg);
}

.container-popup .fa-8x {
    color: var(--ts-control);
}

/* ==========================================================================
   12. Media Manager (com_media, rendered by component.php inside a joomla-dialog)
   ========================================================================== */

/* media-manager.css pulls .media-container out by 20px (Atum pads its parent) */
#com-media {
    padding-inline: 20px;
}

.ts-component > .subhead {
    padding: var(--space-sm, 0.75rem) 20px 0;
}

.media-container {
    color: var(--ec-fg);
}

.media-container .media-browser-item-preview {
    color: var(--ts-link);
    border-color: var(--ec-border);
}

.media-container :is(.file-background, .folder-background) {
    background-color: var(--ec-surface-2);
    border-color: var(--ec-border);
}

.media-container :is(.file-icon, .folder-icon) {
    color: var(--ec-fg-2);
}

.media-container .image-background,
.media-container .media-manager-edit {
    background-color: var(--ec-surface);
    background-image: linear-gradient(45deg, var(--ec-surface-2) 25%, transparent 25%, transparent 75%, var(--ec-surface-2) 75%), linear-gradient(45deg, var(--ec-surface-2) 25%, transparent 25%, transparent 75%, var(--ec-surface-2) 75%);
}

.media-container .image-placeholder,
.media-container .placeholder-icon {
    color: var(--ec-fg-2);
    border-color: var(--ec-border);
}

.media-container .media-browser-actions.active {
    border-color: var(--ec-border);
}

.media-container .media-browser-actions-list :is(button, a) {
    color: var(--ec-fg);
}

.media-container .media-breadcrumb-item:hover,
.media-container .media-tree-item.active > a .item-icon {
    color: var(--ts-link);
}

.media-container .media-dragoutline {
    background-color: rgba(var(--ts-surface-rgb), 0.92);
    border-color: var(--ts-control);
}

.media-container .media-dragoutline .upload-icon {
    color: var(--ts-link);
}

.media-container .media-browser-table .type {
    background-color: var(--ec-surface-2);
    border-color: var(--ec-border);
}

.media-container .media-browser-table .type::before {
    color: var(--ec-fg-2);
}

.media-container .media-browser-table :is(.type::after, .selected) {
    background-color: var(--ec-accent);
}

.media-container .media-browser-table .selected > :is(td, th),
.media-container .selected .media-browser-table .type::before,
.media-container .media-browser-table .selected .type::before {
    color: var(--ec-accent-fg);
    background-color: var(--ec-accent);
}

.media-container .media-infobar h2 {
    border-color: var(--ec-border);
}

.media-container .tab-pane {
    background-color: var(--ec-surface);
    border-color: var(--ec-border);
}

.media-container .media-toolbar-icon {
    color: var(--ec-fg-2);
}

.media-container .media-toolbar-icon:hover {
    color: var(--ec-fg);
    background-color: var(--ec-surface-2);
}

.media-container .media-toolbar-icon.active {
    color: var(--ec-accent-fg);
    background-color: var(--ec-accent);
}

.media-container .media-loader {
    background-image: linear-gradient(to right, var(--ts-signal), var(--ts-link));
}

.media-container .media-browser-select {
    background-color: rgba(var(--ts-fg-rgb), 0.72);
}

.media-container .selected .media-browser-select {
    color: var(--ec-accent-fg);
    background-color: var(--ec-accent);
}

.media-modal-backdrop {
    background-color: var(--ts-scrim);
}

.media-preview-modal .modal-body {
    color: var(--ec-fg);
    background-color: var(--ec-surface);
}

/* ==========================================================================
   13. Resilience baseline: the kit's markup and core output outside the apps
   --------------------------------------------------------------------------
   Two page conditions must not change how the page frame looks (contract addendum A6.3):
   - a global Tailwind Preflight: CjForum, GPS Tools, EasyForms and Sociable print one on their
     pages, on articles with their embeds and wherever their modules or content plugins show
     (h1-h6 and a inherit, p/ul/ol lose margins and markers, img/svg become blocks, buttons and
     inputs lose padding, border and background, `*{border:0 solid}`);
   - no Bootstrap (body.ts-bs-off: CjForum, Sociable, VidyaLMS, Polls, the EasyForms form, any
     page with a {poll} embed, and the error and offline documents): no Reboot, no components.
   13.1 re-declares what Reboot (or the browser) gives the kit's markup and the core output
   printed inside it, 13.2 draws the kit controls Bootstrap never styled, and 13.3 redraws the
   Bootstrap components that kit and core markup use, on Bootstrap-off pages only.

   Specificity is the whole mechanism: every rule starts with `html body` and keeps everything
   else inside :where(), so it weighs (0,0,2) to (0,0,4). That beats the element rules of
   Reboot and Preflight (0,0,1) wherever they print, even after the template CSS, and loses to
   any class rule (0,1,0): Bootstrap's components where Bootstrap is on, and every design rule
   in components.css. Designs restyle these elements exactly as before; whatever a design leaves
   unset falls back to the Bootstrap look instead of the browser's or Preflight's.

   Reach: the "closed" blocks below hold kit and core markup only. Article bodies, excerpts
   and descriptions (.ts-prose), plugin event output, module positions and the apps are never
   inside them, or are excluded with :not(:where(.ts-prose, .ts-prose *)), so no rule here
   reaches an extension island. Blocks that do print foreign output (the article header,
   post cards, mod_articles items, tag items) are covered element by element instead.
   ========================================================================== */

/* 13.1 Reboot and browser defaults ------------------------------------------------------ */

/* @ts-kit generated begin: 13.1 is written by resilience-css.mjs at the kit root (edit the lists there and run it, never this block) */

/* Headings (Reboot): closed blocks, kit heading classes and the chrome titles (any header_tag) */
html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(h1, h2, h3, h4, h5, h6):not(:where(.ts-prose, .ts-prose *)),
html body :where(h1, h2, h3, h4, h5, h6):where(.ts-card__title, .ts-panel__title, .ts-module__title, .ts-sec__title, .ts-article__pageheading, .ts-article__title, .ts-modarticles__title, .ts-modarticles-group__title, .ts-articles__title, .ts-tag-item__title) {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(h1):not(:where(.ts-prose, .ts-prose *)),
html body :where(h1):where(.ts-card__title, .ts-panel__title, .ts-module__title, .ts-sec__title, .ts-article__pageheading, .ts-article__title, .ts-modarticles__title, .ts-modarticles-group__title, .ts-articles__title, .ts-tag-item__title) {
    font-size: calc(1.375rem + 1.5vw);
}

html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(h2):not(:where(.ts-prose, .ts-prose *)),
html body :where(h2):where(.ts-card__title, .ts-panel__title, .ts-module__title, .ts-sec__title, .ts-article__pageheading, .ts-article__title, .ts-modarticles__title, .ts-modarticles-group__title, .ts-articles__title, .ts-tag-item__title) {
    font-size: calc(1.325rem + 0.9vw);
}

html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(h3):not(:where(.ts-prose, .ts-prose *)),
html body :where(h3):where(.ts-card__title, .ts-panel__title, .ts-module__title, .ts-sec__title, .ts-article__pageheading, .ts-article__title, .ts-modarticles__title, .ts-modarticles-group__title, .ts-articles__title, .ts-tag-item__title) {
    font-size: calc(1.3rem + 0.6vw);
}

html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(h4):not(:where(.ts-prose, .ts-prose *)),
html body :where(h4):where(.ts-card__title, .ts-panel__title, .ts-module__title, .ts-sec__title, .ts-article__pageheading, .ts-article__title, .ts-modarticles__title, .ts-modarticles-group__title, .ts-articles__title, .ts-tag-item__title) {
    font-size: calc(1.275rem + 0.3vw);
}

html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(h5):not(:where(.ts-prose, .ts-prose *)),
html body :where(h5):where(.ts-card__title, .ts-panel__title, .ts-module__title, .ts-sec__title, .ts-article__pageheading, .ts-article__title, .ts-modarticles__title, .ts-modarticles-group__title, .ts-articles__title, .ts-tag-item__title) {
    font-size: 1.25rem;
}

html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(h6):not(:where(.ts-prose, .ts-prose *)),
html body :where(h6):where(.ts-card__title, .ts-panel__title, .ts-module__title, .ts-sec__title, .ts-article__pageheading, .ts-article__title, .ts-modarticles__title, .ts-modarticles-group__title, .ts-articles__title, .ts-tag-item__title) {
    font-size: 1rem;
}

@media (min-width: 75rem) {
    html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(h1):not(:where(.ts-prose, .ts-prose *)),
    html body :where(h1):where(.ts-card__title, .ts-panel__title, .ts-module__title, .ts-sec__title, .ts-article__pageheading, .ts-article__title, .ts-modarticles__title, .ts-modarticles-group__title, .ts-articles__title, .ts-tag-item__title) {
        font-size: 2.5rem;
    }

    html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(h2):not(:where(.ts-prose, .ts-prose *)),
    html body :where(h2):where(.ts-card__title, .ts-panel__title, .ts-module__title, .ts-sec__title, .ts-article__pageheading, .ts-article__title, .ts-modarticles__title, .ts-modarticles-group__title, .ts-articles__title, .ts-tag-item__title) {
        font-size: 2rem;
    }

    html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(h3):not(:where(.ts-prose, .ts-prose *)),
    html body :where(h3):where(.ts-card__title, .ts-panel__title, .ts-module__title, .ts-sec__title, .ts-article__pageheading, .ts-article__title, .ts-modarticles__title, .ts-modarticles-group__title, .ts-articles__title, .ts-tag-item__title) {
        font-size: 1.75rem;
    }

    html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(h4):not(:where(.ts-prose, .ts-prose *)),
    html body :where(h4):where(.ts-card__title, .ts-panel__title, .ts-module__title, .ts-sec__title, .ts-article__pageheading, .ts-article__title, .ts-modarticles__title, .ts-modarticles-group__title, .ts-articles__title, .ts-tag-item__title) {
        font-size: 1.5rem;
    }
}

/* Flow elements: the Reboot margins (p, dl, figure, blockquote, lists) */
html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(p, dl, figure, blockquote, ul, ol):not(:where(.ts-prose, .ts-prose *)),
html body :where(p):where(.ts-card__title, .ts-panel__title, .ts-module__title, .ts-sec__title, .ts-article__pageheading, .ts-article__title, .ts-modarticles__title, .ts-modarticles-group__title, .ts-articles__title, .ts-tag-item__title, .ts-sec__sub, .ts-article__eyebrow, .ts-article__status, .ts-articles__eyebrow, .ts-articles__meta, .ts-articles__more, .ts-tag-item__status, .ts-tag-item__excerpt, .ts-tag-item__more, .ts-tags-empty, .ts-journal__empty),
html body :where(ul, ol):where(.ts-postlinks, .ts-catgrid, .ts-tags-cloud, .ts-modarticles, .ts-articles, .ts-tags-grid) {
    margin: 0 0 1rem;
}

/* Lists: Reboot indent, and the browser markers Preflight removes (nested lists follow the browser) */
html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(ul, ol):not(:where(.ts-prose, .ts-prose *)),
html body :where(ul, ol):where(.ts-postlinks, .ts-catgrid, .ts-tags-cloud, .ts-modarticles, .ts-articles, .ts-tags-grid) {
    padding-inline-start: 2rem;
    list-style-type: revert;
}

html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(ul ul, ul ol, ol ul, ol ol):not(:where(.ts-prose, .ts-prose *)),
html body :where(.ts-postlinks, .ts-catgrid, .ts-tags-cloud, .ts-modarticles, .ts-articles, .ts-tags-grid) :where(ul, ol) {
    margin-bottom: 0;
}

html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(dt):not(:where(.ts-prose, .ts-prose *)) {
    font-weight: 700;
}

html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(dd):not(:where(.ts-prose, .ts-prose *)) {
    margin-bottom: 0.5rem;
    margin-inline-start: 0;
}

html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(small):not(:where(.ts-prose, .ts-prose *)) {
    font-size: 0.875em;
}

/* Images and inline icons stay inline (Preflight makes them blocks) */
html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(img, svg):not(:where(.ts-prose, .ts-prose *)),
html body :where(.ts-article__eyebrow > a, .ts-modarticles__title > a, .ts-modarticles__titlelink, .ts-articles__link, .ts-articles__eyebrow a, .ts-articles__more > a, .ts-tag-item__title > a, .ts-tag-item__more > a) :where(img, svg) {
    display: revert;
    vertical-align: middle;
}

/* Links (Reboot a, through the bridge map: --bs-link-color is --ts-link) */
html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(a):not(:where(.ts-prose, .ts-prose *)),
html body :where(.ts-article__eyebrow > a, .ts-modarticles__title > a, .ts-modarticles__titlelink, .ts-articles__link, .ts-articles__eyebrow a, .ts-articles__more > a, .ts-tag-item__title > a, .ts-tag-item__more > a) {
    color: var(--ts-link);
    text-decoration: underline;
}

html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(a:hover):not(:where(.ts-prose, .ts-prose *)),
html body :where(.ts-article__eyebrow > a, .ts-modarticles__title > a, .ts-modarticles__titlelink, .ts-articles__link, .ts-articles__eyebrow a, .ts-articles__more > a, .ts-tag-item__title > a, .ts-tag-item__more > a):where(:hover) {
    color: var(--ts-link-hover);
}

/* Form elements (Reboot) */
html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(input, button, select, optgroup, textarea):not(:where(.ts-prose, .ts-prose *)) {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(button, select):not(:where(.ts-prose, .ts-prose *)) {
    text-transform: none;
}

html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(button, [type="button"], [type="reset"], [type="submit"]):not(:where(.ts-prose, .ts-prose *)) {
    -webkit-appearance: button;
}

html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled), [role="button"]):not(:where(.ts-prose, .ts-prose *)) {
    cursor: pointer;
}

html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(label):not(:where(.ts-prose, .ts-prose *)) {
    display: inline-block;
}

html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(fieldset):not(:where(.ts-prose, .ts-prose *)) {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(legend):not(:where(.ts-prose, .ts-prose *)) {
    float: left;
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 0;
    font-size: calc(1.275rem + 0.3vw);
    line-height: inherit;
}

@media (min-width: 75rem) {
    html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(legend):not(:where(.ts-prose, .ts-prose *)) {
        font-size: 1.5rem;
    }
}

html body :where(.ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search, .ts-langs, .ts-pager, .ts-postlinks, .ts-catgrid, .ts-catlist, .ts-journal__head, .ts-journal__section, .ts-auth, .ts-profile, .ts-finder, .ts-tags__head, .ts-tags-tag__head, .ts-tags-filter, .ts-tags-cloud, .ts-tags-table, .ts-tags-pagination, .ts-tag-card, .ts-tag-item__media, .ts-article__pager, .ts-article__links, .ts-article__aside, .ts-article__hero, .ts-postcard__media, .ts-postcard__body > :is(.page-header, .article-info, .tags, .readmore), .ts-modarticles__media, .ts-modarticles__meta, .ts-modarticles__tags, .ts-modarticles__readmore, .ts-articles__media, .ts-error__main, .ts-error__search, .ts-offline, .mod-menu, .mod-list) :where(legend + *):not(:where(.ts-prose, .ts-prose *)) {
    clear: left;
}

/* Article bodies, teasers, descriptions (.ts-prose) and module excerpts: the same Reboot defaults for
   their direct children and what sits inside those, through child combinators only (contract §2.4.2),
   so an embedded app root (a div) and its content are never matched. Designs set their typography
   on .ts-prose with (0,1,1) and more, which always wins over these. */
html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(p, ul, ol, dl, blockquote, figure, pre, table, address) {
    margin: 0 0 1rem;
}

html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(h1, h2, h3, h4, h5, h6) {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(h1) {
    font-size: calc(1.375rem + 1.5vw);
}

html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(h2) {
    font-size: calc(1.325rem + 0.9vw);
}

html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(h3) {
    font-size: calc(1.3rem + 0.6vw);
}

html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(h4) {
    font-size: calc(1.275rem + 0.3vw);
}

html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(h5) {
    font-size: 1.25rem;
}

html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(h6) {
    font-size: 1rem;
}

@media (min-width: 75rem) {
    html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(h1) {
        font-size: 2.5rem;
    }

    html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(h2) {
        font-size: 2rem;
    }

    html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(h3) {
        font-size: 1.75rem;
    }

    html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(h4) {
        font-size: 1.5rem;
    }
}

html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(ul, ol),
html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(ul, ol) :where(ul, ol) {
    padding-inline-start: 2rem;
    list-style-type: revert;
}

html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(ul, ol) :where(ul, ol) {
    margin-bottom: 0;
}

html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(dl) > :where(dt) {
    font-weight: 700;
}

html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(dl) > :where(dd) {
    margin-bottom: 0.5rem;
    margin-inline-start: 0;
}

html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(p, ul, ol, dl, blockquote, figure, table, address, h1, h2, h3, h4, h5, h6) :where(a) {
    color: var(--ts-link);
    text-decoration: underline;
}

html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(p, ul, ol, dl, blockquote, figure, table, address, h1, h2, h3, h4, h5, h6) :where(a:hover) {
    color: var(--ts-link-hover);
}

html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(img),
html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(p, figure, li) :where(img) {
    display: revert;
    vertical-align: middle;
}

html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(p, ul, ol, dl, blockquote, figure, table, address, h1, h2, h3, h4, h5, h6) :where(small) {
    font-size: 0.875em;
}

html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(pre),
html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(p, ul, ol, dl, blockquote, figure, table, address, h1, h2, h3, h4, h5, h6) :where(code) {
    font-family: var(--ts-font-mono, monospace);
    font-size: 0.875em;
}

html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(pre) {
    display: block;
    overflow: auto;
}

html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(p, ul, ol, dl, blockquote, figure, table, address, h1, h2, h3, h4, h5, h6) :where(code) {
    color: var(--ec-fg);
    overflow-wrap: break-word;
}

html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(table) {
    caption-side: bottom;
    border-collapse: collapse;
}

html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(table) :where(th) {
    text-align: inherit;
}

html body :where(.ts-prose, .ts-prose > :is(div, section, article), .ts-modarticles__intro, .ts-articles__excerpt) > :where(hr) {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: 1px solid;
    opacity: 0.25;
}

/* @ts-kit generated end */

/* 13.2 Kit controls Bootstrap never drew ------------------------------------------------ */

/* The login module's password reveal button: a control-sized square beside the field */
html body :where(.ts-modlogin__toggle) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--ts-control-height, 2.75rem);
    min-height: var(--ts-control-height, 2.75rem);
    margin: 0;
    padding: 0 0.75rem;
    color: var(--ec-fg);
    background-color: var(--ts-control-bg, var(--ec-surface));
    border: var(--ts-control-border-width, 1px) solid var(--ts-control);
    border-radius: var(--ts-control-radius, var(--ec-btn-radius));
    cursor: pointer;
}

html body :where(.ts-modlogin__toggle:hover) {
    background-color: var(--ec-surface-2);
}

/* Check boxes and radios take the text colour on every page (the browser's field text colour
   otherwise differs from Preflight's inherit; nothing is drawn in it, but marks may use it) */
html body :where(.ts-check) > :where(.form-check-input) {
    color: inherit;
}

/* Search fields keep the field look when a Preflight [type="search"] rule (0,1,0) prints after
   Bootstrap: only the appearance, at (0,1,2) */
html body :where(.ts-input)[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

/* Long request paths and messages on the error page wrap instead of widening it (390px) */
html body :where(.ts-error__path, .ts-error__detail, .ts-error__desc) {
    overflow-wrap: anywhere;
}

/* 13.3 Bootstrap-off pages: the components kit and core markup use -------------------- */

/* The check, dot and select chevron marks live in Bootstrap and the bridge's root map, absent here */
:root {
    --ts-mark-paper-check: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    --ts-mark-ink-check: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    --ts-mark-paper-dot: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
    --ts-mark-ink-dot: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23111'/%3e%3c/svg%3e");
    --ts-mark-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

:root[data-color-scheme="dark"] {
    --ts-mark-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Text fields and selects (.form-control, .form-select + the bridge): the kit's own fields and the
   core field layouts printed inside kit views (sign-in, filters, the finder's advanced search) */
html body:where(.ts-bs-off) :where(.ts-input),
html body:where(.ts-bs-off) :where(.ts-auth, .ts-profile, .ts-finder, .ts-tags, .ts-tags-tag, .ts-catlist, .ts-offline, .ts-error__search) :where(.form-control, .form-select) {
    display: block;
    width: 100%;
    min-height: var(--ts-control-height, 2.75rem);
    padding: calc((var(--ts-control-height, 2.75rem) - 1.5em - 2 * var(--ts-control-border-width, 1px)) / 2) 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ec-fg);
    appearance: none;
    background-color: var(--ts-control-bg, var(--ec-surface));
    background-clip: padding-box;
    border: var(--ts-control-border-width, 1px) solid var(--ts-control);
    border-radius: var(--ts-control-radius, var(--ec-btn-radius));
    transition: border-color var(--ec-dur-1, 0.15s) ease-in-out, box-shadow var(--ec-dur-1, 0.15s) ease-in-out;
}

html body:where(.ts-bs-off) :where(.ts-input)::placeholder,
html body:where(.ts-bs-off) :where(.ts-auth, .ts-profile, .ts-finder, .ts-tags, .ts-tags-tag, .ts-catlist, .ts-offline, .ts-error__search) :where(.form-control)::placeholder {
    color: var(--ec-fg-2);
    opacity: 1;
}

html body:where(.ts-bs-off) :where(.ts-input:focus),
html body:where(.ts-bs-off) :where(.ts-auth, .ts-profile, .ts-finder, .ts-tags, .ts-tags-tag, .ts-catlist, .ts-offline, .ts-error__search) :where(.form-control:focus, .form-select:focus) {
    border-color: var(--ts-control-focus-border, var(--ts-focus));
    outline: 0;
    box-shadow: 0 0 0 2px var(--ts-focus-gap);
}

html body:where(.ts-bs-off) :where(.ts-input:focus),
html body:where(.ts-bs-off) :where(.ts-auth, .ts-profile, .ts-finder, .ts-tags, .ts-tags-tag, .ts-catlist, .ts-offline, .ts-error__search) :where(.form-control:focus) {
    color: var(--ec-fg);
    background-color: var(--ec-bg);
}

html body:where(.ts-bs-off) :where(.ts-input:focus-visible),
html body:where(.ts-bs-off) :where(.ts-auth, .ts-profile, .ts-finder, .ts-tags, .ts-tags-tag, .ts-catlist, .ts-offline, .ts-error__search) :where(.form-control:focus-visible, .form-select:focus-visible) {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: 2px;
}

html body:where(.ts-bs-off) :where(.ts-input:disabled),
html body:where(.ts-bs-off) :where(.ts-auth, .ts-profile, .ts-finder, .ts-tags, .ts-tags-tag, .ts-catlist, .ts-offline, .ts-error__search) :where(.form-control:disabled, .form-select:disabled) {
    color: var(--ec-fg-2);
    background-color: var(--ec-surface-2);
    border-color: var(--ec-border);
    opacity: 1;
}

html body:where(.ts-bs-off) :where(.ts-auth, .ts-profile, .ts-finder, .ts-tags, .ts-tags-tag, .ts-catlist, .ts-offline, .ts-error__search) :where(.form-control[readonly]) {
    background-color: var(--ec-surface-2);
}

html body:where(.ts-bs-off) :where(.ts-auth, .ts-profile, .ts-finder, .ts-tags, .ts-tags-tag, .ts-catlist, .ts-offline, .ts-error__search) :where(textarea.form-control) {
    min-height: calc(var(--ts-control-height, 2.75rem) * 2);
}

/* Selects: room for the chevron, drawn in the scheme's text colour as Bootstrap does */
html body:where(.ts-bs-off) :where(.ts-auth, .ts-profile, .ts-finder, .ts-tags, .ts-tags-tag, .ts-catlist, .ts-offline, .ts-error__search) :where(.form-select) {
    padding-inline-end: 2.25rem;
    background-image: var(--ts-mark-chevron), none;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

html:where([dir="rtl"]) body:where(.ts-bs-off) :where(.ts-auth, .ts-profile, .ts-finder, .ts-tags, .ts-tags-tag, .ts-catlist, .ts-offline, .ts-error__search) :where(.form-select) {
    background-position: left 0.75rem center;
}

html body:where(.ts-bs-off) :where(.ts-auth, .ts-profile, .ts-finder, .ts-tags, .ts-tags-tag, .ts-catlist, .ts-offline, .ts-error__search) :where(.form-select[multiple], .form-select[size]:not([size="1"])) {
    padding-inline-end: 0.75rem;
    background-image: none;
}

/* Check boxes and radios (.form-check + .form-check-input + the bridge) */
html body:where(.ts-bs-off) :where(.ts-check) {
    display: block;
    min-height: 1.5rem;
    margin-bottom: 0.125rem;
    padding-inline-start: calc(var(--ts-check-size, 1.25em) + 0.5em);
}

html body:where(.ts-bs-off) :where(.ts-check) > :where(.form-check-input) {
    float: inline-start;
    flex-shrink: 0;
    width: var(--ts-check-size, 1.25em);
    height: var(--ts-check-size, 1.25em);
    margin: calc((1.5em - var(--ts-check-size, 1.25em)) / 2) 0 0;
    margin-inline-start: calc(-1 * (var(--ts-check-size, 1.25em) + 0.5em));
    padding: 0;
    vertical-align: top;
    appearance: none;
    background-color: var(--ts-control-bg, var(--ec-surface));
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: var(--ts-control-border-width, 1px) solid var(--ts-control);
    print-color-adjust: exact;
}

html body:where(.ts-bs-off) :where(.ts-check) > :where(.form-check-input[type="checkbox"]) {
    border-radius: min(var(--ts-control-radius, var(--ec-btn-radius)), 0.3125em);
}

html body:where(.ts-bs-off) :where(.ts-check) > :where(.form-check-input[type="radio"]) {
    border-radius: 50%;
}

html body:where(.ts-bs-off) :where(.ts-check) > :where(.form-check-input:checked) {
    background-color: var(--ts-check-bg, var(--ec-accent));
    border-color: var(--ts-check-bg, var(--ec-accent));
}

html body:where(.ts-bs-off) :where(.ts-check) > :where(.form-check-input[type="checkbox"]:checked) {
    background-image: var(--ts-check-mark, var(--ts-mark-paper-check));
}

html body:where(.ts-bs-off) :where(.ts-check) > :where(.form-check-input[type="radio"]:checked) {
    background-image: var(--ts-radio-mark, var(--ts-mark-paper-dot));
}

html body:where(.ts-bs-off) :where(.ts-check) > :where(.form-check-input: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);
}

html body:where(.ts-bs-off) :where(.ts-check) > :where(.form-check-input:disabled) {
    pointer-events: none;
    border-color: var(--ec-border);
    opacity: 0.5;
}

/* Menus: core mod_menu lists carry Bootstrap's .nav (a flex row that wraps, no markers) */
html body:where(.ts-bs-off) :where(.mod-menu.nav) {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
    padding-inline-start: 0;
    list-style: none;
}

/* Breadcrumbs (.breadcrumb + the bridge: no bottom margin, fg-2 dividers) */
html body:where(.ts-bs-off) :where(.ts-breadcrumbs__list) {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

html body:where(.ts-bs-off) :where(.ts-breadcrumbs__item + .ts-breadcrumbs__item) {
    padding-inline-start: 0.5rem;
}

html body:where(.ts-bs-off) :where(.ts-breadcrumbs__item + .ts-breadcrumbs__item)::before {
    float: inline-start;
    padding-inline-end: 0.5rem;
    color: var(--ec-fg-2);
    content: "/";
}

html body:where(.ts-bs-off) :where(.ts-breadcrumbs__item--current) {
    color: var(--ec-fg);
}

/* Buttons in core output: tag chips (btn-sm btn-info), article navigation (btn-sm
   btn-secondary), read-more links (btn-secondary), the password field's show/hide button
   (btn-secondary) in kit views and TinyMCE's "Toggle Editor" (btn-secondary, in extension
   editors such as CjForum's reply box), with the bridge's sizes and colours */
html body:where(.ts-bs-off) :where(.toggle-editor) {
    display: flex;
    justify-content: flex-end;
    margin-block: var(--space-sm, 0.75rem) 0;
}

html body:where(.ts-bs-off) :where(.toggle-editor) :where(.js-tiny-toggler-button) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

html body:where(.ts-bs-off) :where(.ts-article__aside .tags, .ts-journal__head .tags, .ts-postcard__body > .tags, .ts-modarticles__tags .tags) > :where(li) > :where(a),
html body:where(.ts-bs-off) :where(.pagenavigation) :where(a),
html body:where(.ts-bs-off) :where(.toggle-editor) :where(.js-tiny-toggler-button),
html body:where(.ts-bs-off) :where(.ts-postcard__body > .readmore, .ts-modarticles__readmore .readmore) > :where(a),
html body:where(.ts-bs-off) :where(.ts-auth, .ts-profile, .ts-finder, .ts-tags, .ts-tags-tag, .ts-catlist, .ts-offline, .ts-error__search) :where(.input-password-toggle) {
    display: inline-block;
    min-height: var(--ts-control-height, 2.75rem);
    padding: calc((var(--ts-control-height, 2.75rem) - 1.5em - 2 * var(--ts-btn-border-width, var(--ts-control-border-width, 1px))) / 2) var(--ts-btn-pad-x, 1.125rem);
    font-family: var(--ts-btn-font, var(--ec-font-body));
    font-size: 1rem;
    font-weight: var(--ts-btn-weight, 600);
    line-height: 1.5;
    letter-spacing: var(--ts-btn-tracking, normal);
    text-align: center;
    text-decoration: none;
    text-transform: var(--ts-btn-transform, none);
    vertical-align: middle;
    color: var(--ts-btn-secondary-fg, var(--ec-fg));
    background-color: var(--ts-btn-secondary-bg, transparent);
    border: var(--ts-btn-border-width, var(--ts-control-border-width, 1px)) solid var(--ts-btn-secondary-border, var(--ts-control));
    border-radius: var(--ts-control-radius, var(--ec-btn-radius));
    cursor: pointer;
    user-select: none;
    transition: color var(--ec-dur-1, 0.15s) ease-in-out, background-color var(--ec-dur-1, 0.15s) ease-in-out, border-color var(--ec-dur-1, 0.15s) ease-in-out;
}

html body:where(.ts-bs-off) :where(.ts-article__aside .tags, .ts-journal__head .tags, .ts-postcard__body > .tags, .ts-modarticles__tags .tags) > :where(li) > :where(a),
html body:where(.ts-bs-off) :where(.pagenavigation) :where(a) {
    min-height: var(--ts-control-height-sm, 2.25rem);
    padding: calc((var(--ts-control-height-sm, 2.25rem) - 1.5em - 2 * var(--ts-btn-border-width, var(--ts-control-border-width, 1px))) / 2) 0.75rem;
    font-size: 0.875rem;
    border-radius: calc(var(--ts-control-radius, var(--ec-btn-radius)) * 0.75);
}

html body:where(.ts-bs-off) :where(.pagenavigation) :where(a:hover),
html body:where(.ts-bs-off) :where(.toggle-editor) :where(.js-tiny-toggler-button:hover),
html body:where(.ts-bs-off) :where(.ts-postcard__body > .readmore, .ts-modarticles__readmore .readmore) > :where(a:hover),
html body:where(.ts-bs-off) :where(.ts-auth, .ts-profile, .ts-finder, .ts-tags, .ts-tags-tag, .ts-catlist, .ts-offline, .ts-error__search) :where(.input-password-toggle:hover) {
    color: var(--ts-btn-secondary-hover-fg, var(--ec-fg));
    background-color: var(--ts-btn-secondary-hover-bg, var(--ec-surface-2));
    border-color: var(--ts-btn-secondary-hover-border, var(--ec-fg));
}

html body:where(.ts-bs-off) :where(.ts-article__aside .tags, .ts-journal__head .tags, .ts-postcard__body > .tags, .ts-modarticles__tags .tags) > :where(li) > :where(a) {
    color: var(--ts-info);
    background-color: var(--ts-info-bg);
    border-color: var(--ts-info);
}

html body:where(.ts-bs-off) :where(.ts-article__aside .tags, .ts-journal__head .tags, .ts-postcard__body > .tags, .ts-modarticles__tags .tags) > :where(li) > :where(a:hover) {
    color: var(--ec-bg);
    background-color: var(--ts-info);
    border-color: var(--ts-info);
}

html body:where(.ts-bs-off) :where(.ts-article__aside .tags, .ts-journal__head .tags, .ts-postcard__body > .tags, .ts-modarticles__tags .tags) > :where(li) {
    display: inline-block;
}

html body:where(.ts-bs-off) :where(.ts-auth, .ts-profile, .ts-finder, .ts-tags, .ts-tags-tag, .ts-catlist, .ts-offline, .ts-error__search) :where(.input-password-toggle: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);
}

/* Input groups (the password field and its show/hide button; after the buttons, whose radius
   the joined edges override) */
html body:where(.ts-bs-off) :where(.ts-auth, .ts-profile, .ts-finder, .ts-tags, .ts-tags-tag, .ts-catlist, .ts-offline, .ts-error__search) :where(.input-group) {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

html body:where(.ts-bs-off) :where(.ts-auth, .ts-profile, .ts-finder, .ts-tags, .ts-tags-tag, .ts-catlist, .ts-offline, .ts-error__search) :where(.input-group) > :where(.form-control, .form-select) {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

html body:where(.ts-bs-off) :where(.ts-auth, .ts-profile, .ts-finder, .ts-tags, .ts-tags-tag, .ts-catlist, .ts-offline, .ts-error__search) :where(.input-group) > :where(:not(:first-child, .valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip)) {
    margin-inline-start: calc(-1 * var(--ts-control-border-width, 1px));
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

html body:where(.ts-bs-off) :where(.ts-auth, .ts-profile, .ts-finder, .ts-tags, .ts-tags-tag, .ts-catlist, .ts-offline, .ts-error__search) :where(.input-group) > :where(:not(:last-child)) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

html body:where(.ts-bs-off) :where(.ts-auth, .ts-profile, .ts-finder, .ts-tags, .ts-tags-tag, .ts-catlist, .ts-offline, .ts-error__search) :where(.input-group) > :where(button) {
    position: relative;
    z-index: 2;
}

/* The finder's advanced search panel: Bootstrap's collapse states (closed unless .show) */
html body:where(.ts-bs-off) :where(.ts-finder__advanced:not(.show, .collapsing)) {
    display: none;
}

html body:where(.ts-bs-off) :where(.ts-finder__advanced.collapsing) {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
    html body:where(.ts-bs-off) :where(.ts-finder__advanced.collapsing) {
        transition: none;
    }
}

/* Page links (.pagination + the bridge: gapped tiles, current page in the accent) */
html body:where(.ts-bs-off) :where(.ts-pager, .ts-tags-pagination, .ts-finder__navigation, .ts-catlist) :where(.pagination) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ts-page-gap, 0.375rem);
    margin-inline-start: 0;
    margin-bottom: 1.5rem;
    padding-inline-start: 0;
    list-style: none;
}

html body:where(.ts-bs-off) :where(.ts-pager, .ts-tags-pagination, .ts-finder__navigation, .ts-catlist) :where(.page-link) {
    position: relative;
    display: block;
    min-width: var(--ts-control-height, 2.75rem);
    padding: calc((var(--ts-control-height, 2.75rem) - 1.5rem - 2px) / 2) 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    color: var(--ec-fg);
    background-color: var(--ec-surface);
    border: 1px solid var(--ts-control);
    border-radius: var(--ts-control-radius, var(--ec-btn-radius));
    transition: color var(--ec-dur-1, 0.15s) ease-in-out, background-color var(--ec-dur-1, 0.15s) ease-in-out, border-color var(--ec-dur-1, 0.15s) ease-in-out;
}

html body:where(.ts-bs-off) :where(.ts-pager, .ts-tags-pagination, .ts-finder__navigation, .ts-catlist) :where(a.page-link:hover) {
    z-index: 2;
    color: var(--ec-fg);
    background-color: var(--ec-surface-2);
    border-color: var(--ec-fg-2);
}

html body:where(.ts-bs-off) :where(.ts-pager, .ts-tags-pagination, .ts-finder__navigation, .ts-catlist) :where(.page-item.active > .page-link, .page-link.active) {
    z-index: 3;
    color: var(--ts-page-current-fg, var(--ec-accent-fg));
    background-color: var(--ts-page-current-bg, var(--ec-accent));
    border-color: var(--ts-page-current-bg, var(--ec-accent));
}

html body:where(.ts-bs-off) :where(.ts-pager, .ts-tags-pagination, .ts-finder__navigation, .ts-catlist) :where(.page-item.disabled > .page-link, .page-link.disabled) {
    color: var(--ec-fg-2);
    pointer-events: none;
    background-color: transparent;
    border-color: var(--ec-border);
}