/**
 * Mimeo · components (design spec §6) and the parts of the core pages that show on every page.
 *
 *  1. Buttons            2. Links             3. Fields, checks, selects
 *  4. Tags, badges       5. Rubber stamp      6. Cards, module chromes, index rows
 *  7. Tabs, pagination   8. Page head, breadcrumbs, misregistration
 *  9. Prose              10. Messages, tables, tooltips, overlays, empty states
 * 11. Core modules (login, articles)            12. component.php and print
 *
 * The core views that are not on every page (article, blog, lists, sign-in, profile, search,
 * tags, contact, archive, editing) live in views.css, which the head partial enables on those
 * views only; error and offline pages add documents.css.
 *
 * joomla.css (kit) prints after this file and its §13 baseline weighs (0,0,2), so every rule
 * here carries at least one class outside :where(). The only shadow is the hard 3px riso-blue
 * misprint; hover rules live in (hover: hover); motion collapses under reduced motion
 * (tokens.css zeroes --ec-dur-*). Zilla numerals stay old-style except in tables and forms.
 *
 * @copyright   Copyright (C) 2026 BulaSikku Technologies Private Limited. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

/* ==========================================================================
   1. Buttons (§6.1). .mm-btn is the design's family; .ts-btn (kit overrides, the EasyCommerce
      contract) and .ts-button (community block defaults) take the primary look, their
      outline/secondary variants the ghost look.
   ========================================================================== */

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

.mm-btn svg,
.ts-btn svg,
.ts-button svg {
    flex: none;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    stroke-width: 1.75;
}

@media (hover: hover) {
    .mm-btn--primary:hover,
    .mm-btn--paper:hover,
    .ts-btn:not(.ts-btn--outline, .mm-btn--action, .mm-btn--ghost):hover,
    .ts-button:not(.ts-button--secondary):hover {
        box-shadow: 4px 4px 0 0 var(--mm-offset);
        transform: translate(-1px, -1px);
    }

    .mm-btn--primary:hover,
    .ts-btn:not(.ts-btn--outline, .mm-btn--action, .mm-btn--ghost, .mm-btn--paper):hover,
    .ts-button:not(.ts-button--secondary):hover {
        background-color: var(--mm-accent-hover);
        color: var(--mm-btn-primary-fg);
    }
}

.mm-btn--primary:active,
.mm-btn--paper:active,
.ts-btn:not(.ts-btn--outline, .mm-btn--action, .mm-btn--ghost):active,
.ts-button:not(.ts-button--secondary):active {
    box-shadow: 0 0 0 0 var(--mm-offset);
    transform: translate(3px, 3px);
}

/* Paper (band only): paper with an ink label on the magenta flood. */
.mm-btn--paper {
    background-color: var(--mm-paper);
    color: var(--mm-paper-ink);
}

/* Action: the riso-blue "process" button; no shadow. */
.mm-btn--action {
    background-color: var(--mm-action);
    box-shadow: none;
    color: var(--mm-action-fg);
}

/* Outline (RSVP) and ghost (footer and drawer tools): 2px borders, transparent. */
.mm-btn--outline,
.mm-btn--ghost,
.ts-btn--outline,
.ts-button--secondary {
    border: 2px solid currentColor;
    background-color: transparent;
    box-shadow: none;
}

.mm-btn--outline {
    border-color: var(--mm-action);
    color: var(--mm-action-ink);
}

.mm-btn--ghost,
.ts-btn--outline,
.ts-button--secondary {
    min-block-size: 2.75rem;
    padding-inline: 0.875rem;
    border-color: var(--ec-fg);
    color: var(--ec-fg);
    font-size: 0.9375rem;
}

/* Strip (the issue line): 32px text buttons on the band; the 48px row is the target. */
.mm-btn--strip {
    gap: 0.375rem;
    min-block-size: 2rem;
    padding: 0 var(--mm-s-2);
    background-color: transparent;
    box-shadow: none;
    color: inherit;
    font-size: 0.9375rem;
}

/* 44px hit areas (contract §2.12) for small inline targets, without changing the printed
   size: the strip buttons, tags and meta links reach past their text with an invisible layer
   (a leader's name, which clips its ellipsis, pads out instead: community.css). */
:is(.mm-btn--strip, a.mm-tag, .mm-meta.article-info a, .ts-article__eyebrow > a) {
    position: relative;
}

:is(.mm-btn--strip, a.mm-tag, .mm-meta.article-info a, .ts-article__eyebrow > a)::after {
    content: "";
    position: absolute;
    inset: min(0px, calc((100% - 2.75rem) / 2)) 0;
}

.mm-btn--strip svg {
    inline-size: 1rem;
    block-size: 1rem;
}

/* Sizes: L 52 (cover, form submit), S 44 (cards), block = full width. */
.mm-btn--l {
    min-block-size: 3.25rem;
    padding-inline: 1.5rem;
    font-size: 1.125rem;
}

.mm-btn--l svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
}

.mm-btn--s {
    min-block-size: 2.75rem;
    padding-inline: 1.125rem;
}

.mm-btn--block {
    inline-size: 100%;
    min-block-size: 3.25rem;
}

@media (hover: hover) {
    .mm-btn--action:hover {
        background-color: var(--mm-action-hover);
        color: var(--mm-action-fg);
    }

    .mm-btn--outline:hover {
        background-color: var(--mm-tag-bg);
    }

    /* A pressed/on outline button (RSVP "Going") stays a solid action fill with its own text
       colour on hover (the tint under white text was 1.2:1). */
    .mm-btn--outline:is(.mm-btn--on, [aria-pressed="true"]):hover {
        border-color: var(--mm-action-hover);
        background-color: var(--mm-action-hover);
        color: var(--mm-action-fg);
    }

    .mm-btn--ghost:hover,
    .ts-btn--outline:hover,
    .ts-button--secondary:hover {
        background-color: var(--ec-surface-2);
        color: var(--ec-fg);
    }

    .mm-btn--strip:hover {
        text-decoration: underline 2px var(--mm-yellow);
        text-underline-offset: 5px;
    }
}

.mm-btn--action:active,
.mm-btn--outline:active,
.mm-btn--ghost:active,
.ts-btn--outline:active,
.ts-button--secondary:active {
    transform: translateY(1px);
}

/* Pressed toggles (the scheme buttons, RSVP "Going"): printed solid. */
.mm-btn--ghost[aria-pressed="true"] {
    background-color: var(--ec-fg);
    color: var(--ec-bg);
}

.mm-btn--outline[aria-pressed="true"] {
    background-color: var(--mm-action);
    color: var(--mm-action-fg);
}

.mm-btn--strip[aria-pressed="true"] {
    text-decoration: underline 2px var(--mm-yellow);
    text-underline-offset: 5px;
}

/* Disabled: "unprinted", never faded (§6.0). Loading: Courier "working…" and aria-busy. */
.mm-btn:disabled,
.mm-btn[aria-disabled="true"],
.ts-btn:disabled,
.ts-btn[aria-disabled="true"],
.ts-button:disabled {
    border: 1px dashed var(--ec-border);
    background-color: var(--ec-surface-2);
    box-shadow: none;
    color: var(--ec-fg-2);
    cursor: not-allowed;
    transform: none;
}

:is(.mm-btn, .ts-btn)[aria-busy="true"] {
    font-family: var(--ts-font-mono);
    font-weight: 700;
    cursor: progress;
}

/* The ink focus ring sits outside the misprint; on the band it is the yellow band ring. */
:is(.mm-btn, .ts-btn, .ts-button):focus-visible {
    outline: 3px solid var(--ts-focus);
    outline-offset: 3px;
}

/* ==========================================================================
   2. Links (§6.2)
   ========================================================================== */

.mm-link {
    display: inline-flex;
    align-items: center;
    gap: var(--mm-s-2);
    min-block-size: 2.75rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-weight: 600;
    text-decoration: underline 2px var(--mm-accent-ink);
    text-underline-offset: 5px;
    transition: color var(--ec-dur-1) var(--ec-ease);
}

.mm-link svg {
    flex: none;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    transition: transform var(--ec-dur-1) var(--ec-ease);
}

@media (hover: hover) {
    .mm-link:hover {
        color: var(--mm-accent-hover);
        text-decoration-thickness: 3px;
    }

    .mm-link:hover svg {
        transform: translateX(3px);
    }
}

[dir="rtl"] .mm-link svg {
    scale: -1 1;
}

/* ==========================================================================
   3. Fields (§6.3): labels 16/600, 52px inputs on paper with a 1px border, the ink border on
      hover and focus, 2px error border with a message row. The bridge draws .form-control and
      .form-select from the K knobs; Mimeo sets the size, voice and states on its forms.
   ========================================================================== */

:is(.ts-auth, .ts-profile, .ts-offline, .ts-error, .mm-form, .ts-finder__form, .contact-form, .com-users-profile__edit, .com-contact, .mm-sheet) {
    --ts-control-height: 3.25rem;
}

.ts-input,
:is(.ts-auth, .ts-profile, .ts-offline, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet) :is(.form-control, .form-select) {
    min-block-size: var(--ts-control-height);
    border: 1px solid var(--ec-border);
    border-radius: var(--mm-r);
    background-color: var(--ec-surface);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    font-variant-numeric: lining-nums tabular-nums;
}

.ts-input::placeholder,
:is(.ts-auth, .ts-profile, .ts-offline, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet) .form-control::placeholder {
    color: var(--ec-fg-2);
    opacity: 1;
}

@media (hover: hover) {
    .ts-input:hover:not(:focus, :disabled),
    :is(.ts-auth, .ts-profile, .ts-offline, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet) :is(.form-control, .form-select):hover:not(:focus, :disabled) {
        border-color: var(--ec-fg);
    }
}

.ts-input:focus,
:is(.ts-auth, .ts-profile, .ts-offline, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet) :is(.form-control, .form-select):focus {
    border-color: var(--ec-fg);
    outline: 3px solid var(--ts-focus);
    outline-offset: 2px;
    box-shadow: none;
}

.ts-input[readonly],
:is(.ts-auth, .ts-profile, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet) .form-control[readonly] {
    background-color: var(--ec-surface-2);
}

.ts-input:disabled,
:is(.ts-auth, .ts-profile, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet) :is(.form-control, .form-select):disabled {
    border-style: dashed;
    background-color: var(--ec-surface-2);
    color: var(--ec-fg-2);
}

.ts-input[aria-invalid="true"],
:is(.ts-auth, .ts-profile, .ts-offline, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet) :is(.form-control, .form-select):is(.invalid, [aria-invalid="true"]) {
    border: 2px solid var(--mm-error);
}

:is(.ts-auth, .ts-profile, .ts-offline, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet) :is(.control-label label, .form-label, label.ts-label) {
    display: inline-block;
    margin: 0 0 var(--mm-s-2);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
}

/* The required marker is quiet Courier fg-2, never alarm red. */
:is(.ts-auth, .ts-profile, .ts-offline, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet) .star {
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-weight: 700;
}

:is(.ts-auth, .ts-profile, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet) :is(.form-text, .small.text-muted, [id$="-rules"], [id$="-desc"]) {
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    line-height: 1.4;
}

:is(.ts-auth, .ts-profile, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet) .control-group {
    margin: 0 0 var(--mm-s-6);
}

:is(.ts-auth, .ts-profile, .ts-offline, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet) :is(.invalid-feedback, .form-control-feedback, label.invalid + .form-control-feedback) {
    display: flex;
    align-items: center;
    gap: var(--mm-s-2);
    margin-block-start: var(--mm-s-2);
    color: var(--mm-error);
    font-size: 0.9375rem;
    font-weight: 600;
}

:is(.ts-auth, .ts-profile, .ts-offline, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet) label.invalid {
    color: var(--mm-error);
}

:is(.ts-auth, .ts-profile, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet) textarea.form-control {
    min-block-size: 10rem;
    padding: 0.75rem 1rem;
    line-height: 1.55;
    resize: vertical;
}

/* Select: native appearance off, a 20px chevron at the end. */
:is(.ts-auth, .ts-profile, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet, .ts-finder) .form-select {
    padding-inline-end: 2.75rem;
    background-image: var(--mm-icon-chevron-down);
    background-position: right 0.875rem center;
    background-repeat: no-repeat;
    background-size: 1.25rem;
    appearance: none;
}

[data-color-scheme="dark"] :is(.ts-auth, .ts-profile, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet, .ts-finder) .form-select {
    background-image: var(--mm-icon-chevron-down-dark);
}

/* Checks and radios: 22px, 2px ink border, square boxes; checked = accent ink with a mark. */
:is(.ts-check, .ts-auth, .ts-profile, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet, .ts-modlogin) .form-check-input {
    inline-size: 1.375rem;
    block-size: 1.375rem;
    margin-block-start: 0;
    border: 2px solid var(--ec-fg);
    background-color: var(--ec-surface);
}

:is(.ts-check, .ts-auth, .ts-profile, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet, .ts-modlogin) .form-check-input[type="checkbox"] {
    border-radius: 0;
}

:is(.ts-check, .ts-auth, .ts-profile, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet, .ts-modlogin) .form-check-input:checked {
    border-color: var(--mm-accent-ink);
    background-color: var(--mm-accent-ink);
}

:is(.ts-check, .ts-auth, .ts-profile, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet, .ts-modlogin) .form-check-input[type="radio"]:checked {
    border-color: var(--ec-fg);
    background: radial-gradient(circle, var(--mm-accent-ink) 0 0.3125rem, var(--ec-surface) 0.34rem);
}

:is(.ts-check, .ts-auth, .ts-profile, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet, .ts-modlogin) .form-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-block-size: 2.75rem;
    margin: 0;
    padding: 0;
}

:is(.ts-check, .ts-auth, .ts-profile, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet, .ts-modlogin) .form-check .form-check-input {
    float: none;
    flex: none;
    margin: 0;
}

:is(.ts-check, .ts-auth, .ts-profile, .mm-form, .contact-form, .com-users-profile__edit, .mm-sheet, .ts-modlogin) .form-check-label {
    color: var(--ec-fg);
    font-size: 1.0625rem;
    line-height: 1.4;
}

/* Toggle switch: a 44x24 square track with a 16px square thumb; on = action blue. */
:is(.mm-form, .ts-profile, .com-users-profile__edit, .mm-sheet) .form-switch .form-check-input {
    inline-size: 2.75rem;
    block-size: 1.5rem;
    border-radius: 0;
    background-image: linear-gradient(var(--ec-fg), var(--ec-fg));
    background-position: 0.1875rem center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
}

:is(.mm-form, .ts-profile, .com-users-profile__edit, .mm-sheet) .form-switch .form-check-input:checked {
    border-color: var(--mm-action);
    background-color: var(--mm-action);
    background-image: linear-gradient(var(--mm-action-fg), var(--mm-action-fg));
    background-position: calc(100% - 0.1875rem) center;
}

/* Password strength (passwordstrength.js meter): the 8px bar, error -> warning -> success. */
:is(.ts-auth, .ts-profile, .com-users-profile__edit) meter {
    inline-size: 100%;
    block-size: 0.5rem;
    margin-block-start: var(--mm-s-2);
}

/* ==========================================================================
   4. Tags and badges (§6.4). Core's tag list (ul.tags > li > a.btn-info) and the kit's
      .ts-tag / .ts-badge print as the riso-blue tag: 32px, 15/600, radius 2.
   ========================================================================== */

.ts-tag,
.ts-badge,
:is(.ts-article__tags, .ts-postcard__body, .ts-journal__tags, .ts-tag-item__body, .ts-modarticles__tags, .ts-articles) .tags > li > a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2rem;
    margin: 0;
    padding: 0 0.625rem;
    border: 0;
    border-radius: min(var(--mm-r), 2px);
    background-color: var(--mm-tag-bg);
    box-shadow: none;
    color: var(--mm-tag-fg);
    font-family: var(--ec-font-body);
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    vertical-align: middle;
}

.ts-badge {
    min-block-size: 1.625rem;
    padding-inline: 0.5rem;
}

/* A status badge (unpublished, not yet published, expired): the outline chip in Courier. */
.ts-badge--stock {
    border: 1px solid var(--ec-border);
    background-color: transparent;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-weight: 700;
}

:is(.ts-article__tags, .ts-postcard__body, .ts-journal__tags, .ts-tag-item__body, .ts-modarticles__tags, .ts-articles) .tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mm-s-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

:is(.ts-article__tags, .ts-postcard__body, .ts-journal__tags, .ts-tag-item__body, .ts-modarticles__tags, .ts-articles) .tags > li {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

@media (hover: hover) {
    a.ts-tag:hover,
    :is(.ts-article__tags, .ts-postcard__body, .ts-journal__tags, .ts-tag-item__body, .ts-modarticles__tags, .ts-articles) .tags > li > a:hover {
        background-color: var(--mm-tag-bg);
        color: var(--mm-tag-fg);
        text-decoration: underline 2px;
        text-underline-offset: 3px;
    }
}

/* ==========================================================================
   5. The rubber stamp (§6.4, §6.15, §9.3, §9.8): html/layouts/mimeo/pages/rubber.php prints an
      SVG disc (double ring, text on a path, a centre word), rotated; the colour is currentColor.
   ========================================================================== */

.mm-rubber {
    display: block;
    flex: none;
    inline-size: var(--mm-rubber-size, 7.5rem);
    block-size: var(--mm-rubber-size, 7.5rem);
    overflow: visible;
    color: var(--mm-accent-ink);
    transform: rotate(var(--mm-rot, -6deg));
}

.mm-rubber__ring,
.mm-rubber__word {
    fill: currentColor;
    font-family: var(--ec-font-display);
    font-weight: 700;
    letter-spacing: 1px;
}

.mm-rubber__ring {
    font-size: 13px;
}

.mm-rubber__word {
    font-size: 17px;
}

/* ==========================================================================
   6. Cards and module chromes (§6.6, §9: sidebar modules are paper cards with index-list
      styling). The home composes its own sections (community.css, scoped to .ts-home).
   ========================================================================== */

.mm-card,
.ts-card,
.ts-panel {
    border: 1px solid var(--ec-border);
    border-radius: var(--mm-r);
    background-color: var(--ec-surface);
    color: var(--ec-fg);
}

.ts-card,
.ts-panel {
    margin: 0;
    padding: var(--mm-s-5) var(--mm-s-6) var(--mm-s-6);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    line-height: 1.5;
}

/* Card titles: Zilla 22 over a 2px ink rule. */
.ts-card__title,
.ts-panel__title,
.ts-module__title {
    margin: 0 0 var(--mm-s-4);
    padding: 0 0 0.625rem;
    border-block-end: 2px solid var(--mm-rule-strong);
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    font-synthesis: none;
}

/* Section chrome on inner pages: the 2px rule, then the misregistered Zilla heading. */
body:not(.ts-home) .ts-sec {
    margin: 0;
    padding: 0;
}

body:not(.ts-home) .ts-sec + :is(.ts-sec, .ts-card, .ts-panel, .ts-module, .ts-bare),
:is(.ts-card, .ts-panel, .ts-module, .ts-bare) + :is(.ts-sec, .ts-card, .ts-panel) {
    margin-block-start: var(--mm-s-8);
}

body:not(.ts-home) .ts-sec__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--mm-s-2) var(--mm-s-6);
    margin: 0 0 var(--mm-s-5);
    padding: 0.875rem 0 0;
    border-block-start: 2px solid var(--mm-rule-strong);
}

body:not(.ts-home) .ts-sec__title {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
    font-style: normal;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.015em;
    text-shadow: 0.04em 0.03em 0 var(--mm-misreg);
    text-wrap: balance;
    font-synthesis: none;
}

body:not(.ts-home) .ts-sec__sub {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Index lists in cards (mod_menu, category and tag lists): Zilla accent numerals, 1px dashed
   rows, a hover underline on the label only. */
:is(.ts-card, .ts-panel) :is(.mod-menu, .ts-modarticles:not(.ts-modarticles--grid), .mod-articlescategories, .categories-module, .tagspopular, .mod-tagspopular) {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: mm-index;
}

:is(.ts-card, .ts-panel) :is(.mod-menu, .mod-articlescategories, .categories-module, .tagspopular, .mod-tagspopular) > li {
    display: flex;
    align-items: baseline;
    gap: 0.875rem;
    margin: 0;
    padding: 0;
    border-block-end: 1px dashed var(--mm-rule);
    counter-increment: mm-index;
}

:is(.ts-card, .ts-panel) :is(.mod-menu, .mod-articlescategories, .categories-module, .tagspopular, .mod-tagspopular) > li:last-child {
    border-block-end: 0;
}

:is(.ts-card, .ts-panel) :is(.mod-menu, .mod-articlescategories, .categories-module, .tagspopular, .mod-tagspopular) > li::before {
    content: counter(mm-index, decimal-leading-zero);
    flex: none;
    min-inline-size: 1.75rem;
    color: var(--mm-accent-ink);
    font-family: var(--ec-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
}

:is(.ts-card, .ts-panel) :is(.mod-menu, .mod-articlescategories, .categories-module, .tagspopular, .mod-tagspopular) > li > a {
    display: flex;
    flex: 1;
    align-items: center;
    min-block-size: 3rem;
    padding: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

:is(.ts-card, .ts-panel) .mod-menu > li.current > a {
    font-weight: 700;
}

:is(.ts-card, .ts-panel) .mod-menu > li.current::before {
    box-shadow: inset 0 -0.35em 0 var(--mm-yellow);
    color: var(--mm-yellow-ink);
}

@media (hover: hover) {
    :is(.ts-card, .ts-panel) :is(.mod-menu, .mod-articlescategories, .categories-module, .tagspopular, .mod-tagspopular) > li > a:hover {
        text-decoration: underline 2px var(--mm-accent-ink);
        text-underline-offset: 4px;
    }
}

/* ==========================================================================
   7. Folder tabs (§6.12, Bootstrap .nav-tabs through the bridge knobs) and pagination (§6.15)
   ========================================================================== */

:is(.ts-main, .ts-card, .ts-panel, .mm-sheet) .nav-tabs {
    --bs-nav-tabs-border-width: 1px;
    --bs-nav-tabs-border-color: var(--ec-border);
    --bs-nav-tabs-border-radius: 2px;
    --bs-nav-tabs-link-hover-border-color: var(--ec-border);
    --bs-nav-tabs-link-active-color: var(--ec-fg);
    gap: 0.25rem;
    align-items: flex-end;
    border-block-end: 1px solid var(--ec-border);
}

:is(.ts-main, .ts-card, .ts-panel, .mm-sheet) .nav-tabs .nav-link {
    min-block-size: 2.75rem;
    margin-block-end: -1px;
    padding: 0 1.25rem;
    border: 1px solid var(--ec-border);
    border-block-end: 0;
    border-radius: 2px 2px 0 0;
    background-color: var(--ec-surface-2);
    box-shadow: none;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 2.75rem;
}

:is(.ts-main, .ts-card, .ts-panel, .mm-sheet) .nav-tabs .nav-link.active,
:is(.ts-main, .ts-card, .ts-panel, .mm-sheet) .nav-tabs .nav-link[aria-selected="true"] {
    min-block-size: 3rem;
    padding-inline: 1.375rem;
    background-color: var(--ec-surface);
    color: var(--ec-fg);
    line-height: 3rem;
}

:is(.ts-main, .ts-card, .ts-panel, .mm-sheet) .nav-tabs .nav-link:focus-visible {
    outline: 3px solid var(--ts-focus);
    outline-offset: -3px;
}

:is(.ts-main, .ts-card, .ts-panel, .mm-sheet) .nav-tabs + .tab-content {
    padding: var(--mm-s-6);
    border: 1px solid var(--ec-border);
    border-block-start: 0;
    border-radius: 0 2px 2px 2px;
    background-color: var(--ec-surface);
}

@media (hover: hover) {
    :is(.ts-main, .ts-card, .ts-panel, .mm-sheet) .nav-tabs .nav-link:not(.active):hover {
        background-color: var(--ec-surface);
        color: var(--ec-fg);
    }
}

/* Pagination: Courier 700 16 numbers in 44px squares with a 1px border; the current page is
   an ink fill (the bridge knobs), prev/next ghost squares with chevrons. */
:is(.ts-pager, .ts-tags-pagination, .ts-finder__navigation, .ts-main) .pagination {
    --bs-pagination-padding-x: 0;
    --bs-pagination-padding-y: 0;
    --bs-pagination-border-color: var(--ec-border);
    --bs-pagination-border-radius: 0;
    --bs-pagination-bg: var(--ec-surface);
    --bs-pagination-color: var(--ec-fg);
    --bs-pagination-hover-bg: var(--ec-surface-2);
    --bs-pagination-hover-color: var(--ec-fg);
    --bs-pagination-hover-border-color: var(--ec-fg);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-color: var(--ec-fg-2);
    --bs-pagination-disabled-border-color: var(--mm-rule);
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    font-family: var(--ts-font-mono);
    font-size: 1rem;
    font-weight: 700;
}

:is(.ts-pager, .ts-tags-pagination, .ts-finder__navigation, .ts-main) .pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    margin: 0;
    border-radius: 0;
    font-variant-numeric: lining-nums tabular-nums;
    text-decoration: none;
}

:is(.ts-pager, .ts-tags-pagination, .ts-finder__navigation, .ts-main) .pagination .disabled .page-link {
    border-style: dashed;
}

.ts-pager,
.ts-tags-pagination,
.ts-finder__navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mm-s-3);
    margin: var(--mm-s-12) 0 0;
    padding: 0;
}

:is(.ts-pager__counter, .ts-tags-pagination__counter, .ts-finder__pagination .counter),
:is(.ts-pager, .ts-tags-pagination, .ts-finder__navigation) .counter {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
}

/* ==========================================================================
   8. Page head (§9): breadcrumbs in Courier, the 2px ink rule, a misregistered Zilla H1.
   ========================================================================== */

.ts-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

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

.ts-breadcrumbs .ts-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.625rem;
    margin: 0;
    padding: 0;
    background: none;
    font-size: inherit;
    list-style: none;
}

.ts-breadcrumbs .ts-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    color: var(--ec-fg-2);
    font-size: inherit;
    line-height: inherit;
}

.ts-breadcrumbs .ts-breadcrumbs__item + .ts-breadcrumbs__item::before {
    content: "/";
    float: none;
    padding: 0;
    color: var(--mm-rule);
}

.ts-breadcrumbs .ts-breadcrumbs__item a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    color: var(--ec-fg-2);
    font: inherit;
    text-decoration: none;
}

.ts-breadcrumbs .ts-breadcrumbs__item--current {
    color: var(--ec-fg);
}

@media (hover: hover) {
    .ts-breadcrumbs .ts-breadcrumbs__item a:hover {
        color: var(--ec-fg);
        text-decoration: underline 2px var(--mm-accent-ink);
        text-underline-offset: 4px;
    }
}

/* Phones keep the last two crumbs. */
@media (width < 40rem) {
    .ts-breadcrumbs .ts-breadcrumbs__list {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        min-inline-size: 0;
        max-inline-size: 100%;
    }

    .ts-breadcrumbs .ts-breadcrumbs__item:not(:nth-last-child(-n + 2)) {
        display: none;
    }

    .ts-breadcrumbs .ts-breadcrumbs__item:nth-last-child(2) {
        flex: none;
    }

    .ts-breadcrumbs .ts-breadcrumbs__item--current::before {
        margin-inline-end: 0.625rem;
    }

    /* The current page wraps instead of clipping (no loss of content at 320px / 400% zoom). */
    .ts-breadcrumbs .ts-breadcrumbs__item--current {
        display: block;
        flex: 0 1 auto;
        min-inline-size: 0;
        padding-block: 0.625rem;
        overflow-wrap: break-word;
        white-space: normal;
    }

    .ts-breadcrumbs .ts-breadcrumbs__item:nth-last-child(2)::before {
        content: none;
    }
}

/* The page H1 of every core view: Zilla 700 36 -> 64 with the magenta misregistration. The core
   view roots carry 'body' so they outrank the kit's joomla.css view H1 size (0,1,1, loaded later). */
.mm-page-title,
.ts-article__title,
.ts-journal__pageheading,
.ts-journal__head > .ts-journal__title,
.ts-catlist > h1,
.ts-tags__title,
.ts-tags-tag__title,
.ts-profile__title,
.ts-auth__title,
.ts-finder__title,
body :is(.com-contact, .com-content-archive, .content-category, .com-contact-category, .com-newsfeeds-category, .com-users-profile__edit, .com-privacy, .com-config, .edit, .categories-list) > :is(h1, .page-header > h1) {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: clamp(2.25rem, 1.4rem + 2.8vw, 4rem);
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.015em;
    text-shadow: 0.04em 0.03em 0 var(--mm-misreg);
    text-transform: none;
    text-wrap: balance;
    overflow-wrap: break-word;
    font-synthesis: none;
}

/* Courier kicker and meta line; the lede. */
.mm-kicker,
.mm-meta {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
}

.mm-lede {
    max-inline-size: 37.5rem;
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
    line-height: 1.5;
    text-wrap: pretty;
}

/* Info block (html/layouts/joomla/content/info_block.php): one Courier line of items split by
   middle dots; labels are for screen readers only. */
.mm-meta.article-info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0;
    padding: 0;
}

.mm-meta.article-info > dd {
    display: inline-flex;
    align-items: baseline;
    margin: 0;
    color: var(--ec-fg-2);
    font: inherit;
}

/* Separators lead each item and hang into the column gap; the list clips them at its inline
   edges, so an item that starts a line (wrapped, or stacked in the article aside) shows no dot
   and no line ever ends in one. The small inline padding keeps focus rings inside the clip. */
.mm-meta.article-info:not(:where(.ts-home .ts-journal--featured) *) {
    column-gap: 1.5em;
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
    overflow-x: clip;
}

.mm-meta.article-info:not(:where(.ts-home .ts-journal--featured) *) > dd {
    column-gap: 0;
    margin-inline-start: -1.5em;
}

.mm-meta.article-info:not(:where(.ts-home .ts-journal--featured) *) > dd::before {
    content: "·" / "";
    flex: none;
    inline-size: 1.5em;
    color: var(--ec-fg-2);
    text-align: center;
}

.mm-meta.article-info a {
    color: var(--ec-fg-2);
    font: inherit;
    text-decoration: underline 2px var(--mm-accent-ink);
    text-underline-offset: 4px;
}

.mm-meta.article-info > dd.createdby {
    color: var(--ec-fg);
}

@media (hover: hover) {
    .mm-meta.article-info a:hover {
        color: var(--mm-accent-hover);
    }
}

/* ==========================================================================
   9. Prose (.ts-prose: article body and teaser, descriptions, error and offline copy, Studio
      rich text). Child combinators through at most one wrapper (contract §2.4.2); every
      property is explicit (A6.3). Body 19/1.65 on a 68ch measure (17/1.6 on phones).
   ========================================================================== */

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

@media (min-width: 48rem) {
    .ts-prose {
        font-size: 1.1875rem;
        line-height: 1.65;
    }
}

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

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, dl, address) {
    margin: 0 0 1.25em;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    line-height: inherit;
    text-wrap: pretty;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(h2, h3, h4, h5, h6) {
    margin: 2.25rem 0 0.75rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-style: normal;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    text-wrap: balance;
    font-synthesis: none;
}

/* H2: Zilla 32 with a 2px ink rule 18px above; no misregistration inside the text. */
:is(.ts-prose, .ts-prose > :is(div, section, article)) > h2 {
    padding-block-start: 1.125rem;
    border-block-start: 2px solid var(--mm-rule-strong);
    font-size: clamp(1.625rem, 1.4rem + 0.8vw, 2rem);
    line-height: 1.12;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > h3 {
    font-size: clamp(1.3125rem, 1.2rem + 0.4vw, 1.5rem);
    line-height: 1.2;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(h4, h5, h6) {
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    line-height: 1.35;
}

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

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

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6, table, figure, address) a {
    color: var(--ec-fg);
    font-weight: inherit;
    text-decoration: underline 2px var(--mm-accent-ink);
    text-underline-offset: 4px;
    transition: color var(--ec-dur-1) var(--ec-ease);
}

@media (hover: hover) {
    :is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6, table, figure, address) a:hover {
        color: var(--mm-accent-hover);
        text-decoration-thickness: 3px;
    }
}

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

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, dl, blockquote, table) :is(em, i) {
    font-style: italic;
}

/* Lists: ordered markers are Zilla accent-ink numerals; unordered ones are 8px squares. */
:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(ul, ol) {
    padding-inline-start: 1.75rem;
    list-style-position: outside;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > ol {
    list-style-type: decimal;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > ul {
    list-style-type: none;
}

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

:is(.ts-prose, .ts-prose > :is(div, section, article)) > ol > li::marker {
    color: var(--mm-accent-ink);
    font-family: var(--ec-font-display);
    font-weight: 700;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > ul > li::before {
    content: "";
    position: absolute;
    inset-block-start: 0.62em;
    inset-inline-start: -1.25rem;
    inline-size: 8px;
    block-size: 8px;
    background-color: var(--mm-accent-ink);
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(ul, ol) > li > :is(ul, ol) {
    margin: 0.5em 0 0;
    padding-inline-start: 1.5rem;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > dl > dt {
    margin: 1rem 0 0.25rem;
    font-weight: 700;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > dl > dd {
    margin: 0 0 0.5rem;
    color: var(--ec-fg-2);
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > hr {
    block-size: 0;
    margin: 2.5rem 0;
    border: 0;
    border-block-start: 1px dashed var(--mm-rule);
    background: none;
    opacity: 1;
}

/* Blockquote: Zilla 28/1.25 behind a yellow highlighter stroke (solid in the Night edition). */
:is(.ts-prose, .ts-prose > :is(div, section, article)) > blockquote {
    margin: 2rem 0;
    padding: 0;
    border: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
    font-style: normal;
    font-weight: 700;
    line-height: 1.25;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > blockquote > p {
    display: inline;
    margin: 0;
    padding: 0 0.15em;
    background: linear-gradient(transparent 58%, var(--mm-yellow) 58%);
    font: inherit;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > blockquote > p + p::before {
    content: "";
    display: block;
    block-size: 0.75em;
}

[data-color-scheme="dark"] :is(.ts-prose, .ts-prose > :is(div, section, article)) > blockquote > p {
    --ts-focus: var(--mm-yellow-ink);
    background: var(--mm-yellow);
    color: var(--mm-yellow-ink);
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > blockquote :is(cite, footer) {
    display: block;
    margin-block-start: 0.75rem;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 700;
}

/* Images and figures: 1px border, square corners; captions in Courier fg-2. */
:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(figure, p) > img,
:is(.ts-prose, .ts-prose > :is(div, section, article)) > figure > a > img {
    display: inline-block;
    max-inline-size: 100%;
    block-size: auto;
    border: 1px solid var(--ec-border);
    border-radius: 0;
    vertical-align: middle;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > figure {
    margin: 2rem 0;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > figure > figcaption {
    margin: 0.5rem 0 0;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.35;
}

/* Code: Courier 700 at 0.9em on surface-2; blocks wrap (no keyboard-unreachable scroll box). */
:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, table, dl) :is(code, kbd, samp) {
    padding: 0.1em 0.3em;
    border-radius: 0;
    background-color: var(--ec-surface-2);
    color: var(--ec-fg);
    font-family: var(--ts-font-mono);
    font-size: 0.9em;
    font-weight: 700;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > pre {
    display: flow-root;
    margin: 0 0 1.25em;
    padding: 1rem 1.25rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--mm-r);
    background-color: var(--ec-surface-2);
    color: var(--ec-fg);
    font-family: var(--ts-font-mono);
    font-size: 0.9em;
    font-weight: 700;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, blockquote, table) mark {
    padding: 0 0.15em;
    background-color: var(--mm-yellow);
    color: var(--mm-yellow-ink);
}

/* Tables (§6.15): Courier header cells on surface-2 over a 2px ink rule, dashed rows,
   lining tabular figures. Wide tables scroll inside their own box. */
:is(.ts-prose, .ts-prose > :is(div, section, article)) > table {
    display: block;
    clear: both;
    inline-size: max-content;
    max-inline-size: 100%;
    margin: 0 0 1.5em;
    overflow-x: auto;
    border: 1px solid var(--ec-border);
    border-collapse: collapse;
    background-color: var(--ec-surface);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-variant-numeric: lining-nums tabular-nums;
    line-height: 1.4;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > table :is(th, td) {
    padding: 0.75rem 1rem;
    border: 0;
    border-block-end: 1px dashed var(--mm-rule);
    color: var(--ec-fg);
    text-align: start;
    vertical-align: top;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > table th {
    border-block-end: 2px solid var(--ec-fg);
    background-color: var(--ec-surface-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > table caption {
    padding: 0.5rem 1rem;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    caption-side: bottom;
    text-align: start;
}

/* Descriptions read as one lede paragraph. */
:is(.ts-journal__desc-text, .ts-tags-tag__intro-text, .ts-tags__intro).ts-prose > p {
    max-inline-size: 42rem;
    color: var(--ec-fg-2);
    font-size: 1.0625rem;
    line-height: 1.55;
}

/* ==========================================================================
   10. Messages, tables, tooltips, overlays, empty states (§6.15)
   ========================================================================== */

/* System messages: soft fill, 4px status bar, radius 0 (the joomla-alert knobs); a Courier lead. */
#system-message-container joomla-alert,
.ts-offline__card joomla-alert {
    font-family: var(--ec-font-body);
    font-size: 1rem;
    line-height: 1.5;
}

#system-message-container joomla-alert .alert-heading .visually-hidden,
.ts-offline__card joomla-alert .alert-heading .visually-hidden {
    font-family: var(--ts-font-mono);
    font-weight: 700;
}

#system-message-container joomla-alert[type="info"] {
    --jui-alert-info-background-color: var(--mm-tag-bg);
    --ts-alert-accent: var(--mm-action-ink);
}

/* Tables of the core list views: no zebra, Courier heads over a 2px ink rule, dashed rows. */
:is(.ts-catlist, .com-contact-category, .com-newsfeeds-category, .com-content-archive, .ts-tags-tag, .mm-sheet) table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: var(--ec-surface-2);
    --bs-table-border-color: var(--mm-rule);
    margin: 0 0 var(--mm-s-6);
    border: 0;
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    font-variant-numeric: lining-nums tabular-nums;
}

:is(.ts-catlist, .com-contact-category, .com-newsfeeds-category, .ts-tags-tag, .mm-sheet) table > :is(thead, tbody) > tr > :is(th, td) {
    padding: 0.875rem 1rem;
    border-width: 0;
    border-block-end: 1px dashed var(--mm-rule);
    vertical-align: middle;
}

:is(.ts-catlist, .com-contact-category, .com-newsfeeds-category, .ts-tags-tag, .mm-sheet) table > thead > tr > th {
    border-block-end: 2px solid var(--ec-fg);
    background-color: var(--ec-surface-2);
    color: var(--ec-fg);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
}

:is(.ts-catlist, .com-contact-category, .com-newsfeeds-category, .ts-tags-tag) table > thead a {
    color: var(--ec-fg);
    text-decoration: underline 2px var(--mm-accent-ink);
    text-underline-offset: 4px;
}

/* Tooltips (Bootstrap): ink with paper Courier, radius 0; core role=tooltip hiding is kit joomla.css. */
:is(.ts-main, .ts-component) .tooltip {
    --bs-tooltip-bg: var(--ec-fg);
    --bs-tooltip-color: var(--ec-bg);
    --bs-tooltip-border-radius: 0;
    --bs-tooltip-font-size: 0.9375rem;
    --bs-tooltip-padding-x: 0.625rem;
    --bs-tooltip-padding-y: 0.375rem;
    font-family: var(--ts-font-mono);
    font-weight: 700;
}

/* Dropdowns and modals: paper, 2px ink border, the 4px misprint offset, never blurred. */
:is(.ts-main, .ts-component, .ts-card, .ts-panel) .dropdown-menu {
    --bs-dropdown-bg: var(--ec-surface);
    --bs-dropdown-border-color: var(--ec-fg);
    --bs-dropdown-border-width: 2px;
    --bs-dropdown-border-radius: 2px;
    --bs-dropdown-box-shadow: var(--ts-overlay-shadow);
    --bs-dropdown-link-hover-bg: var(--ec-surface-2);
    --bs-dropdown-link-active-bg: var(--ec-fg);
    --bs-dropdown-link-active-color: var(--ec-bg);
    --bs-dropdown-divider-bg: var(--mm-rule);
    --bs-dropdown-item-padding-y: 0.6875rem;
    box-shadow: var(--ts-overlay-shadow);
}

:is(.ts-main, .ts-component) .modal-content,
joomla-dialog dialog {
    --bs-modal-border-color: var(--ec-fg);
    --bs-modal-border-width: 2px;
    --bs-modal-border-radius: 2px;
    --bs-modal-box-shadow: var(--ts-overlay-shadow);
}

joomla-dialog dialog {
    border: 2px solid var(--ec-fg);
    border-radius: 2px;
    box-shadow: var(--ts-overlay-shadow);
}

/* Empty state: a dashed paper card with a small "nothing yet" rubber stamp. */
.mm-empty,
.ts-finder__empty,
.ts-journal__empty,
.ts-tags-empty {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: var(--mm-s-3);
    margin: 0;
    padding: var(--mm-s-8);
    border: 2px dashed var(--ec-border);
    border-radius: var(--mm-r);
    background-color: var(--ec-surface);
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    line-height: 1.5;
}

:is(.mm-empty, .ts-finder__empty, .ts-journal__empty, .ts-tags-empty)::before {
    content: "";
    inline-size: 4.5rem;
    block-size: 4.5rem;
    background-color: var(--mm-accent-ink);
    transform: rotate(-4deg);
    -webkit-mask: var(--mm-art-empty) center / contain no-repeat;
    mask: var(--mm-art-empty) center / contain no-repeat;
}

@media (min-width: 40rem) {
    .mm-empty,
    .ts-finder__empty,
    .ts-journal__empty,
    .ts-tags-empty {
        grid-template-columns: 4.5rem minmax(0, 1fr);
        column-gap: var(--mm-s-6);
    }

    :is(.mm-empty, .ts-finder__empty, .ts-journal__empty, .ts-tags-empty)::before {
        grid-row: 1 / span 3;
    }
}

:is(.mm-empty, .ts-finder__empty, .ts-journal__empty, .ts-tags-empty) :is(h2, h3, .mm-empty__title, .ts-finder__empty-title) {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
}

:is(.mm-empty, .ts-finder__empty, .ts-journal__empty, .ts-tags-empty) p {
    max-inline-size: 48ch;
    margin: 0;
}

:root {
    --mm-icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1B1A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --mm-icon-chevron-down-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3F2F0' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    /* A 72px decorative stamp: double ring, two stars and the two rules of the word band, left
       open (the words are in the text beside it; search prints a worded rubber stamp). */
    --mm-art-empty: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='42' cy='42' r='40' stroke-width='2.5'/%3E%3Ccircle cx='42' cy='42' r='35.5'/%3E%3C/g%3E%3Cpath d='M42 12l1.3 3.2 3.5.3-2.7 2.2.8 3.3-2.9-1.7-2.9 1.7.8-3.3-2.7-2.2 3.5-.3zM42 62l1.3 3.2 3.5.3-2.7 2.2.8 3.3-2.9-1.7-2.9 1.7.8-3.3-2.7-2.2 3.5-.3z'/%3E%3Cpath d='M12 31h60M12 53h60' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   11. Core modules in sidebars and bands: login (§9.3 at 44px), articles
   ========================================================================== */

.ts-modlogin,
.ts-modlogout {
    display: grid;
    gap: var(--mm-s-4);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    line-height: 1.4;
}

.ts-modlogin__field {
    display: grid;
    gap: var(--mm-s-2);
}

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

.ts-modlogin__input.ts-input,
.ts-modlogin .form-control {
    min-block-size: 2.75rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--mm-r);
    background-color: var(--ec-surface);
    font-size: 1.0625rem;
}

.ts-modlogin__submit .ts-btn,
.ts-modlogin__btn,
.ts-modlogout__btn {
    inline-size: 100%;
}

.ts-modlogin__options,
.ts-modlogout__options {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ts-modlogin__options li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ts-modlogin__options a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    color: var(--ec-fg);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: underline 2px var(--mm-accent-ink);
    text-underline-offset: 4px;
}

.ts-modlogin__toggle {
    border: 1px solid var(--ec-border);
    border-radius: 0 var(--mm-r) var(--mm-r) 0;
    background-color: var(--ec-surface-2);
    color: var(--ec-fg);
}

.ts-modlogout__greeting {
    margin: 0;
    color: var(--ec-fg);
    font-size: 1.0625rem;
}

.ts-modlogout__name {
    font-weight: 700;
}

/* mod_articles: dashed index rows by default, paper cards in the grid layout. */
.ts-modarticles {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--ec-font-body);
}

.ts-modarticles__item {
    margin: 0;
    padding: 0.75rem 0;
    border-block-end: 1px dashed var(--mm-rule);
    list-style: none;
}

.ts-modarticles__item:last-child {
    border-block-end: 0;
}

.ts-modarticles__title,
.ts-modarticles__titlelink {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
}

.ts-modarticles__title > a,
a.ts-modarticles__titlelink,
.ts-modarticles__link {
    color: var(--ec-fg);
    text-decoration: none;
}

.ts-modarticles__meta,
.ts-modarticles__intro {
    margin: 0.375rem 0 0;
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    line-height: 1.4;
}

.ts-modarticles__meta {
    font-family: var(--ts-font-mono);
    font-weight: 700;
}

.ts-modarticles__media img {
    display: block;
    border: 1px solid var(--ec-border);
    border-radius: 0;
}

.ts-modarticles--grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: var(--mm-s-6);
}

.ts-modarticles--grid > .ts-modarticles__item {
    padding: var(--mm-s-5);
    border: 1px solid var(--ec-border);
    border-radius: var(--mm-r);
    background-color: var(--ec-surface);
}

.ts-modarticles__readmore a {
    color: var(--ec-fg);
    font-weight: 600;
    text-decoration: underline 2px var(--mm-accent-ink);
    text-underline-offset: 5px;
}

@media (hover: hover) {
    :is(.ts-modarticles__title > a, a.ts-modarticles__titlelink, .ts-modarticles__link):hover {
        text-decoration: underline 2px var(--mm-accent-ink);
        text-underline-offset: 4px;
    }

    :is(.ts-modlogin__options, .ts-auth__options) a:hover,
    .ts-modarticles__readmore a:hover {
        color: var(--mm-accent-hover);
        text-decoration-thickness: 3px;
    }
}

/* ==========================================================================
   12. component.php (modals, print, fullscreen apps) and print
   ========================================================================== */

.ts-component {
    padding: var(--mm-s-6) clamp(1rem, 3vw, 2rem);
}

.ts-print .ts-article__actions,
.ts-print .pagenavigation,
.ts-print .mm-toc {
    display: none;
}

/* The print view is one column: the meta line under the title, no card. */
.ts-print .ts-article__layout.ts-article__layout {
    display: flex;
}

.ts-print .ts-article__aside.ts-article__aside {
    order: -1;
    position: static;
    padding: 0;
    border: 0;
    background: none;
}

@media print {
    .ts-topbar,
    .ts-header,
    .ts-footer,
    .ts-skip-link,
    .ts-article__actions,
    .pagenavigation,
    .mm-toc,
    .ts-breadcrumbs {
        display: none !important;
    }

    .ts-article__layout:not(.ts-article__layout--full) {
        grid-template-columns: minmax(0, 1fr);
    }

    .ts-article__aside {
        position: static;
    }

    :is(.ts-article__title, .mm-page-title) {
        text-shadow: none;
    }
}
/* ==========================================================================
   13. Overlay menu panel (account menu, language list): paper, 2px ink border, the 4px offset.
   Items are 44px rows with dashed separators.
   ========================================================================== */

.mm-menu {
    --ts-focus: var(--mm-focus);
    margin: 0;
    padding: 0;
    border: 2px solid var(--ec-fg);
    border-radius: var(--mm-r);
    background-color: var(--ec-surface);
    box-shadow: var(--ts-overlay-shadow);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
    list-style: none;
    text-align: start;
}

.mm-menu > li + li,
.mm-menu .ts-account__links > li + li {
    border-block-start: 1px dashed var(--mm-rule);
}

.mm-menu__item,
.mm-menu .ts-account__item {
    display: flex;
    align-items: center;
    gap: var(--mm-s-2);
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: 0 var(--mm-s-4);
    border: 0;
    background: transparent;
    color: var(--ec-fg);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.mm-menu__item[aria-current="true"] {
    font-weight: 700;
}

.mm-menu__item[aria-current="true"]::after {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    margin-inline-start: auto;
    background-color: var(--mm-yellow);
    box-shadow: 0 0 0 1px var(--mm-yellow-ink);
}

@media (hover: hover) {
    .mm-menu__item:hover,
    .mm-menu .ts-account__item:hover {
        background-color: var(--ec-surface-2);
    }
}

.mm-menu__item:focus-visible,
.mm-menu .ts-account__item:focus-visible {
    outline-offset: -3px;
}

/* A disclosure that opens the menu panel (language button): [data-ts-menu] in template.js. */
.mm-lang {
    position: relative;
}

.mm-lang > summary {
    list-style: none;
}

.mm-lang > summary::-webkit-details-marker {
    display: none;
}

.mm-lang[open] > summary .ts-icon--chevron-down {
    transform: rotate(180deg);
}

.mm-lang__list {
    position: absolute;
    inset-block-start: calc(100% + 0.375rem);
    inset-inline-end: 0;
    z-index: var(--ts-z-dropdown);
    min-inline-size: 11rem;
}

.mm-lang--up .mm-lang__list {
    inset-block: auto calc(100% + 0.375rem);
    inset-inline: 0 auto;
}

/* ==========================================================================
   Dot and count
   ========================================================================== */

/* Unread dot: 12px yellow with a ring in the band colour; the state is in the label. */
.mm-dot {
    display: block;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border: 2px solid var(--ec-accent);
    border-radius: 50%;
    background-color: var(--mm-yellow);
}

/* Count badge: Courier on the highlighter, square. */
.mm-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.5rem;
    min-block-size: 1.5rem;
    padding: 0 0.375rem;
    background-color: var(--mm-yellow);
    color: var(--mm-yellow-ink);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
}

/* ==========================================================================
   Forced colours (Windows High Contrast): filled buttons draw their edge with a system
   border (their fill and offset shadow are dropped), progress and poll bars keep a track
   outline and a solid fill, so no control or value disappears.
   ========================================================================== */
@media (forced-colors: active) {
    .mm-btn,
    .ts-btn,
    .ts-button {
        border: 2px solid ButtonText;
    }

    .mm-bar {
        border: 1px solid CanvasText;
    }

    .mm-bar__fill {
        forced-color-adjust: none;
        background-color: CanvasText;
    }
}