/**
 * Kinfolk components and Joomla content surfaces.
 * Interactive controls implement default, hover, focus, active, disabled,
 * loading, error and success states without changing border geometry.
 */

.kf-core {
    color: var(--color-ink);
}

.kf-core :where(p, li, dd) {
    max-inline-size: var(--measure);
}

.kf-core :where(h1, h2, h3, h4, h5, h6) a {
    color: inherit;
    text-decoration: none;
}

.kf-core h1,
.kf-core .page-header h1 {
    font-size: var(--text-3xl);
}

.kf-core h2,
.kf-core .page-header h2 {
    font-size: var(--text-2xl);
}

.kf-core h3 {
    font-size: var(--text-xl);
}

.kf-core h4 {
    font-size: var(--text-lg);
}

.kf-core :where(p, ul, ol, dl, blockquote, pre, table) + :where(p, ul, ol, dl, blockquote, pre, table) {
    margin-block-start: var(--space-md);
}

.kf-core :where(h1, h2, h3, h4, h5, h6) + :where(p, ul, ol, dl) {
    margin-block-start: var(--space-md);
}

.kf-core :where(p, ul, ol, dl, figure, table, blockquote) + :where(h2, h3, h4) {
    margin-block-start: var(--space-xl);
}

.kf-core blockquote {
    max-inline-size: 48ch;
    padding-inline-start: var(--space-lg);
    border-inline-start: var(--rule-strong) solid var(--color-accent);
    color: var(--color-neutral);
    font-size: var(--text-md);
}

.kf-core hr {
    margin-block: var(--space-xl);
    border: 0;
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.kf-core img {
    border-radius: var(--ec-img-radius);
}

.kf-core figure {
    display: grid;
    gap: var(--space-xs);
}

.kf-core figcaption {
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.ts-btn,
button.ts-btn,
.kf-core input[type="submit"],
.kf-core input[type="button"],
.kf-core .btn,
.kf-core .readmore a,
.kf-core .pager a {
    appearance: none;
    position: relative;
    display: inline-flex;
    min-block-size: var(--target-min);
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    border: var(--rule-hair) solid var(--color-ink);
    border-radius: var(--radius-pill);
    background: var(--color-ink);
    color: var(--color-paper);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--dur-short) var(--ease-out),
        color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out),
        transform var(--dur-micro) var(--ease-out);
}

.ts-btn--outline,
.ts-btn--ghost,
.kf-core .btn-secondary,
.kf-core .btn-outline-primary {
    background: var(--color-transparent);
    color: var(--color-ink);
    border-color: var(--color-rule-2);
}

.ts-btn:active,
button.ts-btn:active,
.kf-core input[type="submit"]:active,
.kf-core input[type="button"]:active,
.kf-core .btn:active,
.kf-core .readmore a:active,
.kf-core .pager a:active {
    transform: translateY(1px);
}

.ts-btn:disabled,
.ts-btn[aria-disabled="true"],
button.ts-btn:disabled,
.kf-core input[type="submit"]:disabled,
.kf-core input[type="button"]:disabled,
.kf-core .btn.disabled,
.kf-core .btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

.ts-btn[data-state="loading"],
.kf-core .btn[data-state="loading"] {
    cursor: progress;
}

.ts-btn[data-state="loading"]::before,
.kf-core .btn[data-state="loading"]::before {
    content: "";
    inline-size: var(--space-md);
    block-size: var(--space-md);
    flex: 0 0 auto;
    border: var(--rule-strong) solid currentColor;
    border-inline-end-color: var(--color-transparent);
    border-radius: var(--radius-pill);
    animation: kinfolk-spin 700ms linear infinite;
}

.ts-btn[data-state="error"],
.kf-core .btn[data-state="error"] {
    border-color: var(--color-error);
    background: var(--color-error-soft);
    color: var(--color-error);
}

.ts-btn[data-state="success"],
.kf-core .btn[data-state="success"] {
    border-color: var(--color-success);
    background: var(--color-success-soft);
    color: var(--color-success);
}

.ts-link,
.kf-core .readmore:not(:has(.btn)) a {
    position: relative;
    display: inline-flex;
    min-block-size: var(--target-min);
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-ink);
    font-weight: 600;
    text-decoration-line: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: var(--rule-hair);
    text-underline-offset: var(--underline-offset);
    white-space: nowrap;
}

.ts-link::after {
    content: "→";
    color: var(--color-accent);
    transition: transform var(--dur-micro) var(--ease-out);
}

.ts-card,
.ts-module--card {
    min-inline-size: 0;
    padding: var(--space-lg);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-md);
    background: var(--color-paper-2);
    color: var(--color-ink);
    box-shadow: var(--ec-shadow);
}

.ts-card__title,
.ts-module__title {
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.ts-card__body,
.ts-module__body {
    margin-block-start: var(--space-sm);
    color: var(--color-neutral);
}

.ts-col .ts-module + .ts-module {
    margin-block-start: var(--ec-grid-gap);
}

.ts-field,
.kf-core .control-group {
    display: grid;
    gap: var(--space-xs);
}

.ts-field + .ts-field,
.kf-core .control-group + .control-group {
    margin-block-start: var(--space-md);
}

.ts-field label,
.kf-core .control-label,
.kf-core .control-label label,
.kf-core fieldset legend {
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 600;
}

.ts-input,
.kf-core .form-control,
.kf-core input[type="text"],
.kf-core input[type="email"],
.kf-core input[type="password"],
.kf-core input[type="search"],
.kf-core input[type="url"],
.kf-core input[type="tel"],
.kf-core input[type="number"],
.kf-core input[type="date"],
.kf-core select,
.kf-core textarea {
    inline-size: 100%;
    min-block-size: var(--target-min);
    padding: var(--space-sm) calc(var(--space-xl) + var(--space-xs)) var(--space-sm) var(--space-md);
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-sm);
    outline: var(--rule-strong) solid var(--color-transparent);
    outline-offset: var(--focus-offset);
    background: var(--color-paper-2);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    transition:
        background-color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out);
}

.kf-core textarea {
    min-block-size: 8rem;
    resize: vertical;
}

.ts-input::placeholder,
.kf-core .form-control::placeholder,
.kf-core input::placeholder,
.kf-core textarea::placeholder {
    color: var(--color-muted);
    opacity: 1;
}

.ts-input:focus-visible,
.kf-core .form-control:focus-visible,
.kf-core input:focus-visible,
.kf-core select:focus-visible,
.kf-core textarea:focus-visible {
    border-color: var(--color-ink-2);
    outline-color: var(--color-focus);
}

.ts-input:disabled,
.kf-core .form-control:disabled,
.kf-core input:disabled,
.kf-core select:disabled,
.kf-core textarea:disabled,
[aria-disabled="true"].ts-input,
.kf-core [aria-disabled="true"].form-control {
    cursor: not-allowed;
    opacity: 0.55;
}

.ts-input[aria-invalid="true"],
.kf-core .form-control[aria-invalid="true"],
.kf-core .is-touched:invalid,
.ts-field[data-state="error"] :where(input, select, textarea) {
    border-color: var(--color-error);
    background: var(--color-error-soft);
}

.ts-input[data-state="success"],
.kf-core .form-control[data-state="success"],
.ts-field[data-state="success"] :where(input, select, textarea) {
    border-color: var(--color-success);
    background: var(--color-success-soft);
}

.ts-input[aria-busy="true"],
.kf-core .form-control[aria-busy="true"],
.ts-field[data-state="loading"] :where(input, select, textarea) {
    cursor: progress;
}

.ts-field__help,
.kf-core .form-text,
.kf-core .help-block {
    min-block-size: 1lh;
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.ts-field__error,
.kf-core .invalid-feedback,
.kf-core .form-error {
    min-block-size: 1lh;
    color: var(--color-error);
    font-size: var(--text-sm);
}

.kf-core input[type="checkbox"],
.kf-core input[type="radio"] {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    accent-color: var(--color-accent);
}

.kf-core .form-check,
.ts-check {
    display: flex;
    min-block-size: var(--target-min);
    align-items: center;
    gap: var(--space-xs);
}

.kf-core fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.kf-core .input-group {
    display: flex;
    align-items: stretch;
}

.kf-core .input-group > .form-control {
    min-inline-size: 0;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.kf-core .input-password-toggle,
.kf-core .input-group-text {
    display: inline-grid;
    min-inline-size: var(--target-min);
    place-items: center;
    border: var(--rule-hair) solid var(--color-rule-2);
    border-inline-start: 0;
    border-start-end-radius: var(--radius-sm);
    border-end-end-radius: var(--radius-sm);
    background: var(--color-paper-3);
    color: var(--color-ink);
}

.kf-core .alert {
    display: grid;
    gap: var(--space-xs);
    margin-block-end: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-sm);
    background: var(--color-paper-3);
    color: var(--color-ink);
}

.kf-core .alert-danger,
.kf-core .alert-error {
    border-color: var(--color-error);
    background: var(--color-error-soft);
    color: var(--color-error);
}

.kf-core .alert-success {
    border-color: var(--color-success);
    background: var(--color-success-soft);
    color: var(--color-success);
}

.kf-core .alert-warning {
    border-color: var(--color-warning);
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.kf-core .joomla-alert--close,
.kf-core .btn-close {
    min-inline-size: var(--target-min);
    min-block-size: var(--target-min);
}

.kf-core .table-responsive {
    max-inline-size: 100%;
    overflow-x: auto;
}

.kf-core table {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.kf-core th,
.kf-core td {
    padding: var(--space-sm) var(--space-md);
    border-block-end: var(--rule-hair) solid var(--color-rule);
    text-align: start;
    vertical-align: top;
}

.kf-core th {
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 600;
}

.kf-core td {
    color: var(--color-neutral);
}

.kf-core .pagination,
.kf-core .pager,
.kf-core .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-block: var(--space-xl) 0;
    padding: 0;
    list-style: none;
}

.kf-core .page-link,
.kf-core .page-link {
    display: inline-grid;
    min-inline-size: var(--target-min);
    min-block-size: var(--target-min);
    place-items: center;
    padding-inline: var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-paper-2);
    color: var(--color-ink);
    text-decoration: none;
    white-space: nowrap;
}

.kf-core .page-item.active .page-link,
.kf-core .page-link[aria-current="page"] {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.kf-core .page-item.disabled .page-link {
    cursor: not-allowed;
    opacity: 0.5;
}

.kf-core .breadcrumb,
.ts-module--mod_breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    margin: 0 0 var(--space-lg);
    padding: 0;
    color: var(--color-muted);
    font-size: var(--text-sm);
    list-style: none;
}

.kf-core .breadcrumb a,
.ts-module--mod_breadcrumbs a {
    color: var(--color-neutral);
    white-space: nowrap;
}

.kf-core .article-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-lg);
    margin-block: var(--space-md);
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.kf-core .article-info dd {
    margin: 0;
}

.kf-core .article-info-term {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    clip-path: inset(50%);
    white-space: nowrap;
}

.kf-core .tags,
.kf-core .com-tags-tag__category,
.kf-core .com-tags-tags__category {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kf-core .tags a,
.kf-core .tag-category a {
    display: inline-flex;
    min-block-size: var(--target-min);
    align-items: center;
    padding-inline: var(--space-md);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-pill);
    color: var(--color-ink);
    font-size: var(--text-sm);
    text-decoration: none;
    white-space: nowrap;
}

.kf-core .blog-items,
.kf-core .items-leading,
.kf-core .category-list,
.kf-core .com-tags-tag__category,
.kf-core .com-tags-tags__category {
    display: grid;
    gap: var(--space-xl);
}

.kf-core .blog-item,
.kf-core .items-leading > div,
.kf-core .category-list > * {
    min-inline-size: 0;
    padding-block-end: var(--space-xl);
    border-block-end: var(--rule-hair) solid var(--color-rule);
}

.ts-auth,
.ts-profile {
    inline-size: min(100%, 42rem);
    margin-inline: auto;
    padding: clamp(var(--space-lg), 6vw, var(--space-2xl));
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-md);
    background: var(--color-paper-2);
    color: var(--color-ink);
}

.ts-auth__title,
.ts-profile__title {
    font-size: var(--text-2xl);
}

.ts-auth__desc {
    margin-block-start: var(--space-sm);
    color: var(--color-neutral);
}

.ts-auth__form,
.ts-auth__actions,
.ts-auth__extra {
    display: grid;
    gap: var(--space-md);
    margin-block-start: var(--space-xl);
}

.ts-auth__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    margin-block-start: var(--space-lg);
}

.ts-auth__options a {
    min-block-size: var(--target-min);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.ts-auth__divider {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.ts-auth__divider::before,
.ts-auth__divider::after {
    content: "";
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.ts-profile__body dl {
    display: grid;
    grid-template-columns: minmax(8rem, 0.4fr) minmax(0, 1fr);
    gap: var(--space-sm) var(--space-lg);
    margin-block-start: var(--space-xl);
}

.ts-profile__body dt {
    font-weight: 600;
}

.ts-profile__body dd {
    margin: 0;
    color: var(--color-neutral);
}

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

.ts-article__header {
    display: grid;
    gap: var(--space-md);
    margin-block-end: var(--space-xl);
}

.ts-article__title {
    max-inline-size: 20ch;
    font-size: var(--text-display-s);
}

.ts-article__hero {
    margin-block: var(--space-xl);
}

.ts-article__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
}

.ts-article__body {
    min-inline-size: 0;
    max-inline-size: var(--measure);
    font-size: clamp(var(--text-base), 1.5vw, 1.1rem);
}

.ts-article__aside {
    display: grid;
    gap: var(--space-md);
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.kf-core .finder,
.kf-core .com-finder,
.kf-core .search-results {
    display: grid;
    gap: var(--space-lg);
}

.kf-core .result-title,
.kf-core .search-results__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
}

.kf-core .result-text,
.kf-core .search-results__description {
    color: var(--color-neutral);
}

.ts-error-page,
.ts-offline-page {
    min-block-size: 100svh;
    display: grid;
    place-items: center;
    padding: var(--page-gutter);
    background: var(--color-paper);
    color: var(--color-ink);
}

.ts-error,
.ts-offline {
    inline-size: min(100%, 70rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    padding: clamp(var(--space-lg), 7vw, var(--space-3xl));
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-lg);
    background: var(--color-paper-2);
    color: var(--color-ink);
}

.ts-error__card,
.ts-error__main,
.ts-error__aside {
    min-inline-size: 0;
}

.ts-error__code {
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.ts-error__title,
.ts-offline__title {
    margin-block-start: var(--space-md);
    font-size: var(--text-2xl);
}

.ts-error__desc,
.ts-offline__message {
    margin-block-start: var(--space-md);
    color: var(--color-neutral);
}

.ts-error__actions,
.ts-offline__form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: var(--space-xl);
}

.ts-error__tips,
.ts-error__detail,
.ts-error__module {
    padding-block-start: var(--space-lg);
    border-block-start: var(--rule-hair) solid var(--color-rule);
    color: var(--color-neutral);
}

.kf-core details {
    border-block-end: var(--rule-hair) solid var(--color-rule);
}

.kf-core summary {
    min-block-size: var(--target-min);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: var(--space-md);
    color: var(--color-ink);
    font-weight: 600;
    cursor: pointer;
}

.kf-core details[open] > :not(summary) {
    padding-block-end: var(--space-lg);
}

@media (hover: hover) and (pointer: fine) {
    .ts-btn:hover,
    button.ts-btn:hover,
    .kf-core input[type="submit"]:hover,
    .kf-core input[type="button"]:hover,
    .kf-core .btn:hover,
    .kf-core .readmore a:hover,
    .kf-core .pager a:hover {
        transform: translateY(-1px);
    }

    .ts-btn--outline:hover,
    .ts-btn--ghost:hover,
    .kf-core .btn-secondary:hover,
    .kf-core .btn-outline-primary:hover {
        border-color: var(--color-ink);
        background: var(--color-paper-3);
        color: var(--color-ink);
    }

    .ts-link:hover::after {
        transform: translateX(var(--space-2xs));
    }

    .ts-input:hover,
    .kf-core .form-control:hover,
    .kf-core input:hover,
    .kf-core select:hover,
    .kf-core textarea:hover {
        background: var(--color-paper-3);
    }

    .kf-core .page-link:hover,
    .kf-core .tags a:hover,
    .kf-core .tag-category a:hover {
        border-color: var(--color-ink);
        background: var(--color-paper-3);
        color: var(--color-ink);
    }
}

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

    .ts-error,
    .ts-offline {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}

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

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

    .ts-article__layout {
        grid-template-columns: minmax(0, 8fr) minmax(12rem, 3fr);
        gap: var(--space-3xl);
    }

    .ts-article__aside {
        position: sticky;
        inset-block-start: calc(var(--space-3xl) + var(--space-md));
        align-self: start;
    }
}

.ts-profile__body dl {
    grid-template-columns: minmax(0, 1fr);
}

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

/* Companion skins for the native Joomla overrides. Keep interaction rules
   inside these surfaces so extension-owned Bootstrap components are untouched. */
.ts-finder,
.ts-finder__results,
.ts-modlogin,
.ts-modlogin__userdata,
.ts-modlogout,
.ts-modarticles-groups,
.ts-tags,
.ts-tags-tag {
    display: grid;
    gap: var(--space-lg);
    min-inline-size: 0;
}

:where(.ts-finder, .ts-modlogin, .ts-modlogout, .ts-modarticles, .ts-tags, .ts-tags-tag) svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex: 0 0 auto;
}

.ts-finder__inputrow,
.ts-finder__toolbar,
.ts-finder__sort,
.ts-tags-filter,
.ts-tags-filter__search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.ts-finder__label,
.ts-modlogin__label {
    display: block;
    margin-block-end: var(--space-xs);
    font-weight: 600;
}

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

.ts-finder__field .awesomplete { display: block; }
.ts-finder__field-icon,
.ts-modlogin__icon {
    position: absolute;
    z-index: 1;
    inset-inline-start: var(--space-md);
    inset-block-start: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
    pointer-events: none;
}

.ts-finder .ts-finder__input { padding-inline-start: 3rem; }
.ts-finder__advanced,
.ts-finder__empty {
    margin-block-start: var(--space-lg);
    padding: var(--space-lg);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-md);
    background: var(--color-paper-2);
}

.ts-finder .collapse:not(.show) { display: none; }
.ts-finder .collapsing {
    height: 0;
    overflow: hidden;
    transition: height var(--dur-short) var(--ease-out);
}

.ts-finder__tips {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}
.ts-finder__filter { margin-block-start: var(--space-lg); }
.ts-finder__filter .filter-branch { display: grid; gap: var(--space-md); }
.ts-finder__toolbar { justify-content: space-between; }
.ts-finder__count,
.ts-finder__result-url,
.ts-finder__result-date { color: var(--color-muted); font-size: var(--text-sm); }
.ts-finder__sort-select { position: relative; }
.ts-finder .ts-finder__sort-list {
    display: none;
    position: absolute;
    z-index: var(--z-dropdown);
    inset-block-start: 100%;
    inset-inline-end: 0;
    min-inline-size: 12rem;
    max-inline-size: 90vw;
    margin: var(--space-xs) 0 0;
    padding: var(--space-xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-sm);
    background: var(--color-paper-2);
    box-shadow: var(--ec-shadow);
    list-style: none;
}
.ts-finder .ts-finder__sort-list.show { display: block; }
.ts-finder__sort-link { display: block; padding: var(--space-sm); text-decoration: none; }
.ts-finder__sort-link:is(:hover, :focus-visible, [aria-current="true"]) { background: var(--color-accent-soft); }
.ts-finder__list { display: grid; gap: var(--space-xl); padding: 0; list-style: none; }
.ts-finder__result { display: flex; align-items: flex-start; gap: var(--space-lg); padding-block-end: var(--space-xl); border-block-end: 1px solid var(--color-rule); }
.ts-finder__result-body { flex: 1 1 0; min-inline-size: 0; }
.ts-finder__result-image { flex: 0 0 22%; max-inline-size: 10rem; }
.ts-finder__result-image img { inline-size: 100%; border-radius: var(--ec-img-radius); }
.ts-finder__result-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }
.ts-finder__result-link { text-decoration: none; }
.ts-finder__result-title-text { display: flex; align-items: baseline; gap: var(--space-xs); }
.ts-finder__result-mime { display: inline-flex; align-self: center; }
.ts-finder__result-url { display: block; overflow-wrap: anywhere; font-family: var(--font-body); font-weight: 400; font-style: normal; }
.ts-finder__result-date { display: block; margin-block-end: var(--space-xs); }
.ts-finder__result-taxonomy { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: 0; list-style: none; }
.ts-finder__result-tax { padding: var(--space-2xs) var(--space-xs); background: var(--color-paper-3); border-radius: var(--radius-sm); font-size: var(--text-xs); }

.ts-modlogin__control { position: relative; }
.ts-modlogin .ts-modlogin__control input.ts-modlogin__input--icon { padding-inline-start: 3rem; }
.ts-modlogin .ts-modlogin__control input.ts-modlogin__input--toggle { padding-inline-end: 3.25rem; }
.ts-modlogin .ts-modlogin__control .ts-modlogin__toggle { position: absolute; inset-block: 0; inset-inline-end: 0; min-inline-size: var(--target-min); border: 0; background: transparent; cursor: pointer; }
.ts-modlogin .ts-modlogin__eye-off,
.ts-modlogin .icon-eye-slash .ts-modlogin__eye-on { display: none; }
.ts-modlogin .icon-eye-slash .ts-modlogin__eye-off { display: block; }
.ts-modlogin__btn { inline-size: 100%; }
.ts-modlogin__options,
.ts-modlogout__options { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.ts-modlogin__register,
.ts-modlogout__options a,
.ts-modlogout__greeting { display: flex; align-items: center; gap: var(--space-xs); }
.ts-modlogin__divider { border-block-start: var(--rule-hair) solid var(--color-rule); }

.ts-modarticles,
.ts-tags-grid,
.ts-tags-cloud { display: grid; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.ts-modarticles__cell,
.ts-tags-grid > li,
.ts-tags-cloud__item { min-inline-size: 0; }
.ts-modarticles__item,
.ts-tag-item,
.ts-tag-card { display: block; block-size: 100%; overflow: hidden; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--ec-radius); background: var(--color-paper-2); }
.ts-modarticles__body,
.ts-tag-item__body,
.ts-tag-card__body { display: grid; gap: var(--space-sm); padding: var(--space-lg); }
.ts-modarticles__media { margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) var(--space-xs); }
.ts-modarticles__media :is(figure, a),
.ts-tag-item__media,
.ts-tag-card__media { display: block; margin: 0; }
.ts-modarticles__media img,
.ts-tag-item__media img,
.ts-tag-card__media img { inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; }
.ts-modarticles__meta { display: grid; gap: var(--space-xs); margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
.ts-modarticles__meta > dt { margin: 0; }
.ts-modarticles__meta-item { display: flex; align-items: center; gap: var(--space-xs); margin: 0; }
.ts-modarticles__meta--inline { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
.ts-modarticles__titlelink { display: flex; align-items: center; gap: var(--space-sm); min-block-size: var(--target-min); padding-block: var(--space-xs); border-block-end: 1px solid var(--color-rule); text-decoration: none; }
.ts-modarticles__bullet { display: inline-flex; }
.ts-modarticles-group__title { margin-block-end: var(--space-md); }
.ts-modarticles--cols-1 { --ts-article-columns: 1; }
.ts-modarticles--cols-2 { --ts-article-columns: 2; }
.ts-modarticles--cols-3 { --ts-article-columns: 3; }
.ts-modarticles--cols-4 { --ts-article-columns: 4; }
.ts-modarticles--cols-5 { --ts-article-columns: 5; }
.ts-modarticles--cols-6 { --ts-article-columns: 6; }

.ts-tags__head,
.ts-tags-tag__head { display: grid; gap: var(--space-md); }
.ts-tags-tag__title,
.ts-tag-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.ts-tags__title-icon,
.ts-tags-tag__title-icon,
.ts-tag-card__icon,
.ts-tags-filter__icon { display: inline-flex; }
.ts-tags-filter { margin-block-end: var(--space-lg); }
.ts-tags-filter__search { flex: 1 1 20rem; }
.ts-tags-filter__search .ts-tags-filter__input { flex: 1 1 10rem; inline-size: auto; min-inline-size: 0; }
.ts-tags-filter__btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }
.ts-tags-empty { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-xl); background: var(--color-paper-3); border-radius: var(--radius-md); }
.ts-tag-card { color: inherit; text-decoration: none; }
.ts-tag-card:hover { border-color: var(--color-accent); }
.ts-tag-card__hits,
.ts-tag-item__badge { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; background: var(--color-accent-soft); color: var(--color-accent); padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-sm); }
.ts-tag-card__desc,
.ts-tag-item__excerpt { color: var(--color-neutral); font-size: var(--text-sm); line-height: 1.65; }
.ts-tag-item__more { display: flex; align-items: center; gap: var(--space-xs); min-block-size: var(--target-min); font-size: var(--text-sm); }
.ts-tags-pagination { margin-block-start: var(--space-xl); }
.ts-tags-table__wrap { overflow-x: auto; }
.ts-tags-table__row--unpublished { background: var(--color-warning-soft); }
.ts-postcard__media > figure,
.ts-postcard__media > figure > a { display: block; margin: 0; }

/* Journal: a generous lead story followed by a scannable editorial grid.
   Keep Joomla's image, metadata, plugin and read-more markup intact. */
.ts-journal { padding-block: clamp(1rem, 3vw, 2.5rem) var(--space-xl); }
.ts-journal__head {
    display: grid;
    gap: var(--space-lg);
    padding-block-end: clamp(2rem, 5vw, 4rem);
    margin-block-end: clamp(2rem, 4vw, 3rem);
    border-block-end: 1px solid var(--color-rule);
}
.ts-journal .ts-journal__title {
    max-inline-size: 15ch;
    font-size: clamp(2.7rem, 5.5vw, 5.5rem);
    line-height: 1.02;
    text-wrap: balance;
}
.ts-journal__eyebrow { margin-block-start: var(--space-md); font-size: var(--text-md); color: var(--color-accent); }
.ts-journal__count {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-neutral);
    font-size: var(--text-sm);
}
.ts-journal__count-num {
    display: inline-grid;
    place-items: center;
    min-inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-weight: 700;
}
.ts-journal__desc { max-inline-size: 42ch; color: var(--color-neutral); font-size: var(--text-md); line-height: 1.6; }
.ts-journal__desc > * + * { margin-block-start: var(--space-md); }
.ts-journal__desc > img { max-block-size: 15rem; object-fit: cover; border-radius: var(--ec-img-radius); }
.ts-postgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
.ts-postgrid + .ts-postgrid { margin-block-start: clamp(2rem, 4vw, 3.5rem); }
.ts-postcard { display: flex; flex-direction: column; min-inline-size: 0; }
.ts-postcard__media { display: block; min-inline-size: 0; overflow: hidden; border-radius: var(--ec-img-radius); background: var(--color-paper-3); }
.ts-postcard__media img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; }
.ts-postcard__media figcaption { padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); color: var(--color-neutral); }
.ts-postcard__media--placeholder { display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--color-accent-soft); color: var(--color-accent); text-decoration: none; }
.ts-postcard__monogram { font-family: var(--font-display); font-size: clamp(5rem, 12vw, 10rem); line-height: 1; }
.ts-postcard__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--space-md); padding-block-start: var(--space-lg); }
.ts-postcard__body .page-header { margin: 0; padding: 0; border: 0; }
.ts-postcard__body .page-header h2 { font-size: clamp(1.6rem, 2.6vw, 2.5rem); line-height: 1.14; text-wrap: balance; }
.ts-postcard__body .page-header a { color: var(--color-ink); text-decoration: none; }
.ts-postcard__body .page-header a:hover { color: var(--color-accent); }
.ts-postcard__excerpt { color: var(--color-neutral); font-size: 1.0625rem; line-height: 1.7; }
.ts-postcard__excerpt > * + * { margin-block-start: var(--space-md); }
.ts-postcard__body .readmore { margin-block-start: auto; padding-block-start: var(--space-xs); }
.ts-postcard__body .readmore a {
    min-block-size: var(--target-min);
    padding: var(--space-xs) 0;
    border: 0;
    border-block-end: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--color-accent);
    font-size: 1rem;
    text-align: start;
}
.ts-postcard__body .readmore a::after { content: '\2197'; margin-inline-start: var(--space-sm); font-size: 1.25em; }
.ts-postcard__body .readmore a:hover { background: transparent; color: var(--color-ink); transform: none; }
.ts-postcard__body .article-info { margin: 0; color: var(--color-neutral); font-size: var(--text-sm); }
.ts-postgrid--lead > .ts-postcard,
.ts-postgrid--feature-first > .ts-postcard:first-child { background: var(--color-accent-soft); border-radius: var(--radius-lg); overflow: hidden; }
.ts-postgrid--lead > .ts-postcard > .ts-postcard__media,
.ts-postgrid--feature-first > .ts-postcard:first-child > .ts-postcard__media { border-radius: 0; }
.ts-postgrid--lead > .ts-postcard > .ts-postcard__body,
.ts-postgrid--feature-first > .ts-postcard:first-child > .ts-postcard__body { padding: clamp(1.5rem, 3.5vw, 3rem); justify-content: center; }
.ts-postgrid--lead .readmore,
.ts-postgrid--feature-first > .ts-postcard:first-child .readmore { margin-block-start: var(--space-xs); }
.ts-journal__empty { padding: var(--space-xl); background: var(--color-paper-3); border-radius: var(--radius-lg); }
.ts-journal :is(.ts-pager, .items-more, .ts-journal__section, .ts-journal__actions) { margin-block-start: var(--space-xl); }

/* Reading pages opt in through the article title; full-width Studio and
   sample landing compositions retain their own spacing and layout. */
.ts-article--story:not(:has(.kf-community-page, .kf-learning, .kf-home, .ts-pages)) .ts-article__header { padding-block: var(--space-lg); }
.ts-article--story:not(:has(.kf-community-page, .kf-learning, .kf-home, .ts-pages)) .ts-article__pageheading { font-size: var(--text-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); }
.ts-article--story:not(:has(.kf-community-page, .kf-learning, .kf-home, .ts-pages)) .ts-article__title { max-inline-size: 20ch; font-size: var(--text-display-s); text-wrap: balance; line-height: 1.05; }
.ts-article--story:not(:has(.kf-community-page, .kf-learning, .kf-home, .ts-pages)) .ts-article__hero { margin-block: var(--space-lg) clamp(2rem, 5vw, 4rem); }
.ts-article--story:not(:has(.kf-community-page, .kf-learning, .kf-home, .ts-pages)) .ts-article__hero figure { margin: 0; float: none; }
.ts-article--story:not(:has(.kf-community-page, .kf-learning, .kf-home, .ts-pages)) .ts-article__hero img { display: block; inline-size: 100%; max-block-size: 30rem; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--radius-lg); }
.ts-article--story:not(:has(.kf-community-page, .kf-learning, .kf-home, .ts-pages)) .ts-article__hero figcaption { margin-block-start: var(--space-sm); color: var(--color-neutral); font-size: var(--text-sm); }
.ts-article--story:not(:has(.kf-community-page, .kf-learning, .kf-home, .ts-pages)) .ts-article__layout--full { grid-template-columns: minmax(0, 1fr); }
.ts-article--story:not(:has(.kf-community-page, .kf-learning, .kf-home, .ts-pages)) .ts-article__layout--full > .ts-article__main { inline-size: min(100%, 46rem); margin-inline: auto; }
.ts-article--story:not(:has(.kf-community-page, .kf-learning, .kf-home, .ts-pages)) .ts-article__body { max-inline-size: none; font-size: clamp(1.0625rem, 1.7vw, 1.1875rem); line-height: 1.85; overflow-wrap: anywhere; }
.ts-article--story:not(:has(.kf-community-page, .kf-learning, .kf-home, .ts-pages)) .ts-article__body > * + * { margin-block-start: 1.4em; }
.ts-article--story:not(:has(.kf-community-page, .kf-learning, .kf-home, .ts-pages)) .ts-article__body > p:first-child { font-size: 1.18em; line-height: 1.65; color: var(--color-neutral); }
.ts-article--story:not(:has(.kf-community-page, .kf-learning, .kf-home, .ts-pages)) .ts-article__body :is(h2, h3, h4) { margin-block: 1.6em .6em; line-height: 1.2; }
.ts-article--story:not(:has(.kf-community-page, .kf-learning, .kf-home, .ts-pages)) .ts-article__body h2 { font-size: clamp(1.6rem, 2.8vw, 2rem); }
.ts-article--story:not(:has(.kf-community-page, .kf-learning, .kf-home, .ts-pages)) .ts-article__body :is(ul, ol) { padding-inline-start: 1.5em; }
.ts-article--story:not(:has(.kf-community-page, .kf-learning, .kf-home, .ts-pages)) .ts-article__body li + li { margin-block-start: .5em; }
.ts-article--story:not(:has(.kf-community-page, .kf-learning, .kf-home, .ts-pages)) .ts-article__body blockquote { margin-inline: 0; padding: var(--space-lg) var(--space-xl); border-inline-start: 3px solid var(--color-accent); background: var(--color-accent-soft); font-family: var(--font-display); font-size: 1.3em; line-height: 1.5; }
.ts-article--story:not(:has(.kf-community-page, .kf-learning, .kf-home, .ts-pages)) .ts-article__body a { text-underline-offset: .2em; }
.ts-article--story:not(:has(.kf-community-page, .kf-learning, .kf-home, .ts-pages)) .ts-article__body figure { margin-inline: 0; }
.ts-article--story:not(:has(.kf-community-page, .kf-learning, .kf-home, .ts-pages)) .ts-article__body img { border-radius: var(--ec-img-radius); }

@media (min-width: 48rem) {
    .ts-journal__head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--space-2xl); align-items: end; }
    .ts-journal__heading { grid-column: 1; grid-row: 1 / span 2; }
    .ts-journal__count, .ts-journal__desc { grid-column: 2; }
    .ts-postgrid:not(.ts-postgrid--lead) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ts-postgrid--lead > .ts-postcard,
    .ts-postgrid--feature-first > .ts-postcard:first-child { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
    .ts-postgrid--lead > .ts-postcard > .ts-postcard__media,
    .ts-postgrid--feature-first > .ts-postcard:first-child > .ts-postcard__media { align-self: stretch; }
    .ts-postgrid--lead .ts-postcard__media img,
    .ts-postgrid--feature-first > .ts-postcard:first-child .ts-postcard__media img { aspect-ratio: 4 / 3; min-block-size: 22rem; block-size: 100%; }
    .ts-postgrid--lead .ts-postcard__media > figure,
    .ts-postgrid--lead .ts-postcard__media > figure > a,
    .ts-postgrid--feature-first > .ts-postcard:first-child .ts-postcard__media > figure,
    .ts-postgrid--feature-first > .ts-postcard:first-child .ts-postcard__media > figure > a { block-size: 100%; }
    .ts-postcard__media > figure:has(figcaption) { display: flex; flex-direction: column; }
    .ts-postcard__media > figure:has(figcaption) > a { flex: 1; min-block-size: 0; block-size: auto; }
    .ts-postcard__media > figure:has(figcaption) img { block-size: auto; min-block-size: 0; }
}

@media (max-width: 47.99rem) {
    .ts-article--story:not(:has(.kf-community-page, .kf-learning, .kf-home, .ts-pages)) .ts-article__hero img { aspect-ratio: 4 / 3; }
}

@media (min-width: 40rem) {
    .ts-modarticles--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ts-modarticles--grid.ts-modarticles--cols-1 { grid-template-columns: minmax(0, 1fr); }
    .ts-tags-grid,
    .ts-tags-cloud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ts-finder__filter .filter-branch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
    .ts-modarticles--grid { grid-template-columns: repeat(var(--ts-article-columns, 3), minmax(0, 1fr)); }
    .ts-tags-grid,
    .ts-tags-cloud { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .ts-finder .collapsing { transition: none; }
}