/* Hallmark · genre: modern-minimal · macrostructure: Ecosystem Index · tone: technical-austere · theme: Coral · enrichment: none · nav: N11 (columns=4,feature=none,scrim=dim-only,open=click) · footer: Ft5 (sentence=28ch,wordmark=under,rule=hairline) · design-system: design.md · designed-as-app · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34,49,50–57) */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */

:root {
    color-scheme: light;
    --bs-body-bg: var(--color-paper);
    --bs-body-color: var(--color-ink-2);
    --bs-primary: var(--color-accent);
    --bs-link-color: var(--color-accent);
    --bs-border-color: var(--color-rule);
    --bs-secondary-color: var(--color-muted);
    --bs-tertiary-bg: var(--color-paper-2);
}

:root[data-color-scheme="dark"] {
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root[data-color-scheme-os] {
        color-scheme: dark;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    overflow-x: clip;
}

html {
    background: var(--color-paper);
    color: var(--color-ink-2);
    font-family: var(--font-body);
    font-size: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 0;
    min-height: 100dvh;
    margin: 0;
    background: var(--color-paper);
    color: var(--color-ink-2);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.62;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--color-selection);
    color: var(--color-ink);
}

[hidden] {
    display: none !important;
}

img,
picture,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

iframe {
    max-width: 100%;
    border: 0;
}

button,
input,
optgroup,
select,
textarea {
    font: inherit;
}

button,
[role="button"] {
    touch-action: manipulation;
}

p,
ul,
ol,
dl,
blockquote,
pre,
figure {
    margin-block: 0 var(--space-lg);
}

ul,
ol {
    padding-inline-start: var(--space-lg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    min-width: 0;
    margin-block: 0 var(--space-md);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

h1,
.page-header h1,
.componentheading {
    max-width: 22ch;
    font-size: clamp(2.125rem, 7vw, var(--text-3xl));
    letter-spacing: -0.035em;
}

h2 {
    font-size: clamp(var(--text-lg), 5vw, var(--text-2xl));
}

h3 {
    font-size: var(--text-lg);
}

h4,
h5,
h6 {
    font-size: var(--text-md);
}

a {
    color: var(--color-accent);
    text-decoration-line: underline;
    text-decoration-thickness: var(--rule-hair);
    text-underline-offset: calc(var(--rule-hair) * 2);
}

a:visited {
    color: var(--color-accent);
}

a:active {
    color: var(--color-accent-hover);
}

a[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
    a:hover {
        color: var(--color-accent-hover);
        text-decoration-thickness: calc(var(--rule-hair) * 2);
    }
}

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

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

code,
kbd,
samp,
pre {
    font-family: var(--font-mono);
    font-variant-ligatures: none;
}

code {
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: var(--radius-xs);
    background: var(--color-paper-2);
    color: var(--color-ink);
    font-size: 0.92em;
}

pre {
    max-width: 100%;
    padding: var(--space-lg);
    overflow: auto;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-sm);
    background: var(--color-paper-2);
    color: var(--color-ink);
    font-size: var(--text-sm);
    line-height: 1.55;
}

pre code {
    padding: 0;
    background: transparent;
}

blockquote {
    max-width: var(--measure);
    padding-inline-start: var(--space-lg);
    border-inline-start: var(--rule-hair) solid var(--color-rule-strong);
    color: var(--color-ink);
}

.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.shdemo-container,
.grid-child {
    width: min(100%, var(--page-max));
    margin-inline: auto;
    padding-inline-start: max(var(--page-gutter), env(safe-area-inset-left));
    padding-inline-end: max(var(--page-gutter), env(safe-area-inset-right));
}

.shdemo-skip-link {
    position: fixed;
    inset-block-start: var(--space-md);
    inset-inline-start: var(--space-md);
    z-index: var(--z-tooltip);
    min-height: var(--control-height);
    padding: var(--space-sm) var(--space-md);
    border: var(--rule-control) solid var(--color-rule-strong);
    border-radius: var(--radius-sm);
    background: var(--color-paper);
    color: var(--color-ink);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(calc(-100% - var(--space-xl)));
}

.shdemo-skip-link:focus {
    transform: none;
}

.shdemo-topbar {
    border-block-end: var(--rule-hair) solid var(--color-rule);
    background: var(--color-paper-2);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
}

.shdemo-topbar .moduletable,
.shdemo-topbar p {
    margin: 0;
}

.shdemo-topbar > .shdemo-container {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
}

.shdemo-topbar__inner {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.shdemo-demo-access {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-md);
    padding-block: var(--space-xs);
}

.shdemo-demo-access__label {
    flex: 1 0 100%;
    color: var(--color-ink);
    font-weight: 650;
}

.shdemo-demo-access__credential {
    display: inline-flex;
    min-width: 0;
    align-items: baseline;
    gap: var(--space-xs);
    color: var(--color-muted);
}

.shdemo-demo-access code {
    padding: var(--space-3xs) var(--space-xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-sm);
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-mono);
    font-size: 0.92em;
    white-space: nowrap;
}

.shdemo-demo-access__login {
    min-height: 2rem;
    margin-inline-start: auto;
    padding: var(--space-2xs) var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    font-weight: 650;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.shdemo-demo-access__login:hover,
.shdemo-demo-access__login:focus-visible {
    border-color: var(--color-focus);
    color: var(--color-focus);
}

@media (min-width: 40rem) {
    .shdemo-demo-access__label {
        flex: 0 0 auto;
    }
}

.shdemo-header {
    position: relative;
    z-index: var(--z-raised);
    border-block-end: var(--rule-hair) solid var(--color-rule);
    background: var(--color-paper);
}

.shdemo-header--sticky {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
}

.shdemo-below-top {
    border-block-end: var(--rule-hair) solid var(--color-rule);
    background: var(--color-paper-2);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
}

.shdemo-below-top .shdemo-container {
    padding-block: var(--space-xs);
}

.shdemo-below-top p {
    margin: 0;
}

.shdemo-header__inner {
    position: relative;
    display: grid;
    min-height: var(--header-height);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-sm);
}

.shdemo-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-sm);
}

.shdemo-brand__link {
    display: inline-flex;
    min-width: 0;
    min-height: var(--control-height);
    align-items: center;
    justify-self: start;
    gap: var(--space-sm);
    color: var(--color-ink);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
}

.shdemo-brand__link:visited {
    color: var(--color-ink);
}

.shdemo-brand__description {
    display: none;
    max-width: 24ch;
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: 1.35;
}

.shdemo-brand__logo {
    width: auto;
    max-width: min(13rem, 46vw);
    height: 2rem;
    object-fit: contain;
}

.shdemo-brand__logo--dark {
    display: none;
}

:root[data-color-scheme="dark"] .shdemo-brand__logo--light {
    display: none;
}

:root[data-color-scheme="dark"] .shdemo-brand__logo--dark {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root[data-color-scheme-os] .shdemo-brand__logo--light {
        display: none;
    }

    :root[data-color-scheme-os] .shdemo-brand__logo--dark {
        display: block;
    }
}

.shdemo-header__actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: var(--space-xs);
}

[data-shdemo-nav-toggle],
[data-shdemo-theme-toggle],
.shdemo-icon-button {
    position: relative;
    display: inline-grid;
    width: var(--control-height);
    min-width: var(--control-height);
    height: var(--control-height);
    padding: 0;
    place-items: center;
    border: var(--rule-control) solid var(--color-rule-strong);
    border-radius: var(--radius-sm);
    background: var(--color-paper);
    color: var(--color-ink);
    cursor: pointer;
    transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}

[data-shdemo-nav-toggle] svg,
[data-shdemo-theme-toggle] svg,
.shdemo-icon-button svg {
    width: 1.125rem;
    height: 1.125rem;
    pointer-events: none;
    stroke: currentColor;
}

.shdemo-theme-toggle__label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
    [data-shdemo-nav-toggle]:hover,
    [data-shdemo-theme-toggle]:hover,
    .shdemo-icon-button:hover {
        transform: translateY(-1px);
    }
}

[data-shdemo-nav-toggle]:active,
[data-shdemo-theme-toggle]:active,
.shdemo-icon-button:active {
    transform: translateY(1px);
}

[data-shdemo-nav-toggle]:disabled,
[data-shdemo-theme-toggle]:disabled,
.shdemo-icon-button:disabled,
[data-shdemo-nav-toggle][aria-disabled="true"],
[data-shdemo-theme-toggle][aria-disabled="true"],
.shdemo-icon-button[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

[data-shdemo-theme-icon] {
    display: none;
}

:root[data-color-scheme-mode="auto"] [data-shdemo-theme-icon="auto"],
:root[data-color-scheme-mode="light"] [data-shdemo-theme-icon="light"],
:root[data-color-scheme-mode="dark"] [data-shdemo-theme-icon="dark"] {
    display: block;
}

.shdemo-nav,
[data-shdemo-nav] {
    min-width: 0;
    grid-column: 1 / -1;
}

.js .shdemo-nav,
.js [data-shdemo-nav] {
    position: absolute;
    inset-block-start: calc(100% + var(--rule-hair));
    inset-inline: var(--page-gutter);
    z-index: var(--z-dropdown);
    max-height: calc(100dvh - var(--header-height) - var(--space-lg));
    padding: var(--space-md);
    overflow-y: auto;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-sm);
    background: var(--color-paper);
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(var(--space-xs) * -1));
    transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}

.js .shdemo-nav-open .shdemo-nav,
.js .shdemo-nav-open [data-shdemo-nav] {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.shdemo-nav ul,
[data-shdemo-nav] ul,
.shdemo-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shdemo-nav .mod-menu,
[data-shdemo-nav] .mod-menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.shdemo-nav__inner,
.shdemo-nav__menu,
.shdemo-nav__search {
    min-width: 0;
}

.shdemo-nav__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.shdemo-nav li,
[data-shdemo-nav] li {
    position: relative;
    min-width: 0;
}

.shdemo-nav a,
.shdemo-nav button,
[data-shdemo-nav] a,
[data-shdemo-nav] button {
    display: flex;
    min-height: var(--control-height);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.shdemo-nav a:visited,
[data-shdemo-nav] a:visited {
    color: var(--color-ink-2);
}

.shdemo-nav .current > a,
.shdemo-nav .active > a,
.shdemo-nav a[aria-current="page"],
[data-shdemo-nav] .current > a,
[data-shdemo-nav] .active > a,
[data-shdemo-nav] a[aria-current="page"] {
    color: var(--color-accent);
    text-decoration-line: underline;
    text-decoration-thickness: calc(var(--rule-hair) * 2);
    text-underline-offset: calc(var(--rule-hair) * 2);
}

@media (hover: hover) and (pointer: fine) {
    .shdemo-nav a:hover,
    .shdemo-nav button:hover,
    [data-shdemo-nav] a:hover,
    [data-shdemo-nav] button:hover {
        background: var(--color-paper-2);
        color: var(--color-ink);
    }
}

.shdemo-nav ul ul,
[data-shdemo-nav] ul ul {
    padding-inline-start: var(--space-md);
    border-inline-start: var(--rule-hair) solid var(--color-rule);
}

.shdemo-nav .container-search,
[data-shdemo-nav] .container-search,
.shdemo-nav .mod-finder,
[data-shdemo-nav] .mod-finder,
.shdemo-nav__search {
    margin-block-start: var(--space-sm);
    padding-block-start: var(--space-sm);
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.shdemo-banner,
.shdemo-position--banner {
    border-block-end: var(--rule-hair) solid var(--color-rule);
}

.shdemo-banner img,
.shdemo-position--banner img {
    width: 100%;
    max-height: 36rem;
    object-fit: cover;
}

.shdemo-breadcrumbs {
    margin-block-end: var(--space-xl);
    padding-block-end: var(--space-sm);
    overflow-x: auto;
    border-block-end: var(--rule-hair) solid var(--color-rule);
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.shdemo-breadcrumbs__inner {
    padding-block: var(--space-sm);
    overflow-x: auto;
}

.breadcrumb,
.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb {
    width: max-content;
    max-width: 100%;
}

.breadcrumb a {
    white-space: nowrap;
}

.shdemo-position {
    min-width: 0;
}

.shdemo-position--top,
.shdemo-position--bottom {
    padding-block: var(--space-xl);
    border-block-end: var(--rule-hair) solid var(--color-rule);
}

.shdemo-sections {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    padding-block: var(--space-xl);
    border-block-end: var(--rule-hair) solid var(--color-rule);
}

.shdemo-sections--bottom {
    border-block-start: var(--rule-hair) solid var(--color-rule);
    border-block-end: 0;
}

.shdemo-section {
    min-width: 0;
}

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

.shdemo-layout {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    padding-block: var(--space-2xl) var(--space-3xl);
}

.shdemo-main {
    min-width: 0;
}

.shdemo-main > :last-child,
.shdemo-sidebar > :last-child,
.moduletable > :last-child {
    margin-block-end: 0;
}

.shdemo-sidebar {
    min-width: 0;
    padding-block-start: var(--space-lg);
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.shdemo-sidebar .moduletable,
.shdemo-sidebar .module {
    padding-block: var(--space-md) var(--space-xl);
    border-block-end: var(--rule-hair) solid var(--color-rule);
}

.shdemo-sidebar h2,
.shdemo-sidebar h3,
.shdemo-sidebar .module-title {
    font-size: var(--text-md);
}

.page-header,
.componentheading {
    margin-block-end: var(--space-xl);
    padding-block-end: var(--space-lg);
    border-block-end: var(--rule-hair) solid var(--color-rule);
}

@media (min-width: 40rem) {
    .shdemo-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shdemo-sections {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 56rem) {
    .shdemo-header__inner {
        grid-template-columns: minmax(11rem, 1fr) minmax(0, 2fr) auto;
        gap: var(--space-lg);
    }

    .shdemo-header__inner:not(:has(.shdemo-brand)) {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .shdemo-brand__description {
        display: block;
    }

    [data-shdemo-nav-toggle] {
        display: none;
    }

    .shdemo-nav,
    [data-shdemo-nav],
    .js .shdemo-nav,
    .js [data-shdemo-nav] {
        position: static;
        display: flex !important;
        max-height: none;
        padding: 0;
        overflow: visible;
        grid-column: auto;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 0;
        background: transparent;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .shdemo-nav .mod-menu,
    [data-shdemo-nav] .mod-menu {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--space-2xs);
    }

    .shdemo-nav__inner {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .shdemo-nav ul ul,
    [data-shdemo-nav] ul ul {
        position: absolute;
        inset-block-start: calc(100% + var(--space-xs));
        inset-inline-start: 0;
        z-index: var(--z-dropdown);
        min-width: 14rem;
        padding: var(--space-xs);
        border: var(--rule-hair) solid var(--color-rule);
        border-radius: var(--radius-sm);
        background: var(--color-paper);
        opacity: 0;
        pointer-events: none;
        transform: translateY(calc(var(--space-2xs) * -1));
        transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
    }

    .shdemo-nav li:hover > ul,
    .shdemo-nav li:focus-within > ul,
    [data-shdemo-nav] li:hover > ul,
    [data-shdemo-nav] li:focus-within > ul {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .shdemo-nav .container-search,
    [data-shdemo-nav] .container-search,
    .shdemo-nav .mod-finder,
    [data-shdemo-nav] .mod-finder,
    .shdemo-nav__search {
        margin-block-start: 0;
        margin-inline-start: var(--space-md);
        padding-block-start: 0;
        padding-inline-start: var(--space-md);
        border-block-start: 0;
        border-inline-start: var(--rule-hair) solid var(--color-rule);
    }
}

@media (min-width: 60rem) {
    .shdemo-layout[data-sidebars="left"] {
        grid-template-columns: minmax(12rem, 3fr) minmax(0, 9fr);
    }

    .shdemo-layout[data-sidebars="right"] {
        grid-template-columns: minmax(0, 9fr) minmax(12rem, 3fr);
    }

    .shdemo-layout[data-sidebars="both"] {
        grid-template-columns: minmax(11rem, 2.5fr) minmax(0, 7fr) minmax(11rem, 2.5fr);
    }

    .shdemo-sidebar {
        padding-block-start: 0;
        border-block-start: 0;
    }

    .shdemo-sidebar--left {
        padding-inline-end: var(--space-lg);
        border-inline-end: var(--rule-hair) solid var(--color-rule);
    }

    .shdemo-sidebar--right {
        padding-inline-start: var(--space-lg);
        border-inline-start: var(--rule-hair) solid var(--color-rule);
    }

    .shdemo-module-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Catalogue content: uniform demo cards, 4/3 media, three-up at desktop. */
.blog-items,
.com-content-category-blog__items,
.category-list .category-list__items,
.shdemo-catalogue {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.blog-item,
.com-content-category-blog__item,
.category-list .category-list__item,
.shdemo-catalogue__item {
    min-width: 0;
    padding: var(--space-lg) 0 var(--space-xl);
    border-block-end: var(--rule-hair) solid var(--color-rule);
}

.blog-item figure,
.blog-item .item-image,
.com-content-category-blog__item figure,
.com-content-category-blog__item .item-image,
.shdemo-catalogue__media {
    display: block;
    aspect-ratio: 4 / 3;
    margin-block-end: var(--space-lg);
    overflow: clip;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-sm);
    background: var(--color-paper-2);
}

.blog-item figure img,
.blog-item .item-image img,
.com-content-category-blog__item figure img,
.com-content-category-blog__item .item-image img,
.shdemo-catalogue__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform var(--dur-long) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .blog-item:has(a:hover) figure img,
    .blog-item:has(a:hover) .item-image img,
    .com-content-category-blog__item:has(a:hover) figure img,
    .com-content-category-blog__item:has(a:hover) .item-image img,
    .shdemo-catalogue__item:has(a:hover) .shdemo-catalogue__media img {
        transform: scale(1.02);
    }
}

.blog-item h2,
.blog-item h3,
.com-content-category-blog__item h2,
.com-content-category-blog__item h3,
.category-list .category-list__item h2,
.shdemo-catalogue__item h2,
.shdemo-catalogue__item h3 {
    margin-block-end: var(--space-xs);
    font-size: var(--text-md);
}

.blog-item h2 a,
.blog-item h3 a,
.com-content-category-blog__item h2 a,
.com-content-category-blog__item h3 a,
.category-list .category-list__item h2 a,
.shdemo-catalogue__item h2 a,
.shdemo-catalogue__item h3 a {
    color: var(--color-ink);
    text-decoration: none;
}

.article-info,
.article-info-muted,
.createdby,
.published,
.category-name,
.shdemo-catalogue__meta {
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.article-info dd {
    margin-inline-start: 0;
}

.readmore,
.readmore a,
.shdemo-catalogue__action {
    display: inline-flex;
    min-height: var(--control-height);
    align-items: center;
    color: var(--color-accent);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration-line: underline;
    text-underline-offset: calc(var(--rule-hair) * 2);
    white-space: nowrap;
}

.items-leading {
    margin-block-end: var(--space-2xl);
}

.item-page,
.com-content-article__body,
.contact,
.profile,
.registration,
.reset,
.remind {
    min-width: 0;
}

.item-page > p,
.com-content-article__body > p {
    max-width: var(--measure);
}

.item-page .item-image,
.com-content-article__body .item-image {
    margin-block: var(--space-xl);
}

@media (min-width: 40rem) {
    .blog-items,
    .com-content-category-blog__items,
    .category-list .category-list__items,
    .shdemo-catalogue {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-item,
    .com-content-category-blog__item,
    .category-list .category-list__item,
    .shdemo-catalogue__item {
        padding-inline: var(--space-lg);
        border-inline-end: var(--rule-hair) solid var(--color-rule);
    }

    .blog-item:nth-child(2n),
    .com-content-category-blog__item:nth-child(2n),
    .category-list .category-list__item:nth-child(2n),
    .shdemo-catalogue__item:nth-child(2n) {
        border-inline-end: 0;
    }
}

@media (min-width: 60rem) {
    .blog-items,
    .com-content-category-blog__items,
    .category-list .category-list__items,
    .shdemo-catalogue {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .blog-item:nth-child(2n),
    .com-content-category-blog__item:nth-child(2n),
    .category-list .category-list__item:nth-child(2n),
    .shdemo-catalogue__item:nth-child(2n) {
        border-inline-end: var(--rule-hair) solid var(--color-rule);
    }

    .blog-item:nth-child(3n),
    .com-content-category-blog__item:nth-child(3n),
    .category-list .category-list__item:nth-child(3n),
    .shdemo-catalogue__item:nth-child(3n) {
        border-inline-end: 0;
    }
}

/* Buttons and links expose all production states without shifting geometry. */
.btn,
button.btn,
.shdemo-button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.button,
.pager a {
    position: relative;
    display: inline-flex;
    min-height: var(--control-height);
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border: var(--rule-control) solid var(--color-rule-strong);
    border-radius: var(--radius-sm);
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}

.btn:visited,
.shdemo-button:visited,
.button:visited,
.pager a:visited {
    color: var(--color-ink);
}

.btn-primary,
.btn.btn-primary,
.shdemo-button--primary,
button[type="submit"],
input[type="submit"] {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-accent-ink);
}

.btn-primary:visited,
.btn.btn-primary:visited,
.shdemo-button--primary:visited {
    color: var(--color-accent-ink);
}

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

    .btn-primary:hover,
    .btn.btn-primary:hover,
    .shdemo-button--primary:hover,
    button[type="submit"]:hover,
    input[type="submit"]:hover {
        border-color: var(--color-accent-hover);
        background: var(--color-accent-hover);
        color: var(--color-accent-ink);
    }
}

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

.btn:disabled,
.shdemo-button:disabled,
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
.button[aria-disabled="true"],
.btn[aria-disabled="true"],
.shdemo-button[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn[aria-busy="true"],
.shdemo-button[aria-busy="true"],
button[aria-busy="true"],
.button[aria-busy="true"] {
    cursor: wait;
}

.btn[aria-busy="true"]::after,
.shdemo-button[aria-busy="true"]::after,
button[aria-busy="true"]::after,
.button[aria-busy="true"]::after {
    width: 1rem;
    height: 1rem;
    border: calc(var(--rule-control) * 2) solid currentColor;
    border-inline-start-color: transparent;
    border-radius: var(--radius-round);
    content: "";
    animation: shdemo-spin 0.8s linear infinite;
}

.btn[data-state="error"],
.shdemo-button[data-state="error"],
button[data-state="error"] {
    border-color: var(--color-error);
    background: var(--color-error);
    color: var(--color-paper);
}

.btn[data-state="success"],
.shdemo-button[data-state="success"],
button[data-state="success"] {
    border-color: var(--color-success);
    background: var(--color-success);
    color: var(--color-paper);
}

.btn[data-state="error"]::before,
.shdemo-button[data-state="error"]::before,
button[data-state="error"]::before {
    content: "!";
    font-weight: 700;
}

.btn[data-state="success"]::before,
.shdemo-button[data-state="success"]::before,
button[data-state="success"]::before {
    width: 0.4rem;
    height: 0.7rem;
    border-inline-end: var(--rule-control) solid currentColor;
    border-block-end: var(--rule-control) solid currentColor;
    content: "";
    transform: rotate(45deg);
}

@keyframes shdemo-spin {
    to {
        transform: rotate(1turn);
    }
}

/* Form controls keep a constant border and a reserved feedback slot. */
.form-label,
label {
    display: inline-block;
    margin-block-end: var(--space-2xs);
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 600;
}

.form-control,
.form-select,
input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"])),
select,
textarea {
    width: 100%;
    min-height: var(--control-height);
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm) calc(var(--space-xl) + var(--space-xs));
    border: var(--rule-control) solid var(--color-rule-strong);
    border-radius: var(--radius-sm);
    outline: 2px solid transparent;
    outline-offset: 1px;
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    line-height: 1.35;
}

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

@media (hover: hover) and (pointer: fine) {
    .form-control:hover,
    .form-select:hover,
    input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"])):hover,
    select:hover,
    textarea:hover {
        background: var(--color-paper-2);
    }
}

.form-control:focus-visible,
.form-select:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 1px;
}

.form-control[aria-invalid="true"],
.form-select[aria-invalid="true"],
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--color-error);
    background: var(--color-error-bg);
}

.form-control.is-valid,
.form-select.is-valid,
input[data-state="success"],
select[data-state="success"],
textarea[data-state="success"] {
    border-color: var(--color-success);
    background: var(--color-success-bg);
}

.form-control[aria-busy="true"],
input[aria-busy="true"],
select[aria-busy="true"],
textarea[aria-busy="true"] {
    cursor: progress;
}

textarea {
    min-height: 7rem;
    resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
    width: 1.125rem;
    height: 1.125rem;
    margin-inline-end: var(--space-xs);
    accent-color: var(--color-accent);
}

.form-text,
.invalid-feedback,
.valid-feedback,
.help-block {
    display: block;
    min-height: 1lh;
    margin-block-start: var(--space-2xs);
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.invalid-feedback,
.form-error-message {
    color: var(--color-error);
}

.valid-feedback {
    color: var(--color-success);
}

fieldset {
    min-width: 0;
    margin: 0 0 var(--space-lg);
    padding: 0;
    border: 0;
}

legend {
    margin-block-end: var(--space-md);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
}

.control-group,
.form-group,
.mb-3 {
    margin-block-end: var(--space-md);
}

.input-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.input-group > .form-control {
    min-width: min(100%, 16rem);
    flex: 1 1 16rem;
}

/* Joomla and Bootstrap-shaped output use the same token contract. */
.alert,
joomla-alert {
    display: block;
    margin-block-end: var(--space-lg);
    padding: var(--space-md);
    border: var(--rule-hair) solid var(--color-rule-strong);
    border-radius: var(--radius-sm);
    background: var(--color-paper-2);
    color: var(--color-ink);
}

.alert-danger,
.alert-error,
joomla-alert[type="danger"],
joomla-alert[type="error"] {
    border-color: var(--color-error);
    background: var(--color-error-bg);
    color: var(--color-error);
}

.alert-success,
joomla-alert[type="success"] {
    border-color: var(--color-success);
    background: var(--color-success-bg);
    color: var(--color-success);
}

.alert-warning,
joomla-alert[type="warning"] {
    border-color: var(--color-warning);
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.alert-heading {
    color: inherit;
    font-size: var(--text-md);
}

.joomla-alert--close,
.alert .btn-close {
    float: inline-end;
}

.card {
    min-width: 0;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-sm);
    background: var(--color-paper);
    color: var(--color-ink-2);
}

.card-header,
.card-footer {
    padding: var(--space-md);
    background: var(--color-paper-2);
    color: var(--color-ink);
}

.card-header {
    border-block-end: var(--rule-hair) solid var(--color-rule);
}

.card-footer {
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.card-body {
    padding: var(--space-lg);
}

.badge,
.tag-category,
.tags a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding-inline: var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule-strong);
    border-radius: var(--radius-sm);
    background: var(--color-paper-2);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    text-decoration: none;
    white-space: nowrap;
}

.table,
table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    color: var(--color-ink-2);
    font-variant-numeric: tabular-nums;
}

caption {
    padding-block: var(--space-sm);
    color: var(--color-muted);
    text-align: start;
}

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

th {
    color: var(--color-ink);
    font-weight: 600;
}

.table-responsive {
    max-width: 100%;
    overflow-x: auto;
}

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

.page-link,
.pagination a,
.pagination span {
    display: inline-grid;
    min-width: var(--control-height);
    min-height: var(--control-height);
    padding: var(--space-xs);
    place-items: center;
    border: var(--rule-hair) solid var(--color-rule-strong);
    border-radius: var(--radius-sm);
    background: var(--color-paper);
    color: var(--color-ink);
    text-decoration: none;
    white-space: nowrap;
}

.pagination .active .page-link,
.pagination .active span {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-accent-ink);
}

.btn-group,
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2xs));
    inset-inline-start: 0;
    z-index: var(--z-dropdown);
    display: none;
    min-width: 12rem;
    max-width: min(22rem, 100%);
    margin: 0;
    padding: var(--space-xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-sm);
    background: var(--color-paper);
    color: var(--color-ink-2);
}

.dropdown-menu.show {
    display: block;
}

.dropdown-menu-end {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.dropup .dropdown-menu {
    inset-block-start: auto;
    inset-block-end: calc(100% + var(--space-2xs));
}

.collapse:not(.show) {
    display: none;
}

.collapsing {
    height: 0;
    overflow: hidden;
}

.dropdown-item {
    display: block;
    min-height: var(--control-height);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-xs);
    color: var(--color-ink-2);
    text-decoration: none;
    white-space: nowrap;
}

.dropdown-item.active,
.dropdown-item[aria-current="true"] {
    background: var(--color-paper-2);
    color: var(--color-accent);
    text-decoration: underline;
}

.modal-content,
.popover,
.tooltip-inner {
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-sm);
    background: var(--color-paper);
    color: var(--color-ink-2);
}

.modal-backdrop,
dialog::backdrop {
    background: color-mix(in oklch, var(--color-ink) 45%, transparent);
}

dialog {
    position: fixed;
    inset: 0;
    width: min(calc(100% - var(--space-xl)), 38rem);
    height: fit-content;
    max-height: min(80dvh, 40rem);
    margin: auto;
    padding: var(--space-lg);
    overflow: auto;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-md);
    background: var(--color-paper);
    color: var(--color-ink-2);
}

.shdemo-footer {
    border-block-start: var(--rule-hair) solid var(--color-rule);
    background: var(--color-paper);
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.shdemo-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding-block: var(--space-xl) max(var(--space-xl), env(safe-area-inset-bottom));
}

.shdemo-footer__inner > .moduletable,
.shdemo-footer__inner > .module {
    margin: 0;
}

.shdemo-footer p {
    margin: 0;
}

.shdemo-footer .mod-menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.shdemo-footer a {
    color: var(--color-ink-2);
    white-space: nowrap;
}

.shdemo-footer__brand {
    color: var(--color-ink);
    font-family: var(--font-mono);
    font-weight: 600;
    text-decoration: none;
}

@media (min-width: 40rem) {
    .shdemo-footer__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .shdemo-footer .mod-menu {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
}

/* Version 1.1 · Ecosystem Index shell for dense Joomla demo navigation and mixed extension output. */
:root[data-color-scheme="dark"] body {
    font-weight: 350;
}

@media (prefers-color-scheme: dark) {
    :root[data-color-scheme-os] body {
        font-weight: 350;
    }
}

.shdemo-header {
    z-index: var(--z-sticky);
    background: var(--color-paper);
}

.shdemo-header__inner {
    display: flex;
    min-height: var(--header-height);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.shdemo-brand {
    min-width: 0;
}

.shdemo-brand__link {
    gap: var(--space-sm);
    font-family: var(--font-body);
}

.shdemo-brand__mark {
    display: inline-grid;
    width: var(--brand-mark-size);
    height: var(--brand-mark-size);
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-round);
    background: var(--color-ink);
    color: var(--color-paper);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
}

.shdemo-brand__copy {
    display: grid;
    min-width: 0;
    line-height: 1.15;
}

.shdemo-brand__name {
    overflow: hidden;
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 650;
    letter-spacing: -0.02em;
    text-overflow: ellipsis;
}

.shdemo-brand__description {
    display: none;
    overflow: hidden;
    max-width: 24ch;
    color: var(--color-muted);
    font-size: var(--text-xs);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shdemo-header__actions {
    flex: 0 0 auto;
}

[data-shdemo-nav-toggle],
[data-shdemo-theme-toggle],
.shdemo-nav__close {
    min-height: var(--control-height);
    border-radius: var(--radius-round);
    background: var(--color-paper);
}

[data-shdemo-nav-toggle] {
    display: inline-flex;
    width: var(--control-height);
    min-width: var(--control-height);
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 650;
    white-space: nowrap;
}

.shdemo-nav-toggle__label {
    display: none;
}

.shdemo-nav,
[data-shdemo-nav] {
    grid-column: auto;
}

.no-js .shdemo-nav,
.no-js [data-shdemo-nav] {
    position: static;
    display: block;
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.no-js [data-shdemo-nav-toggle],
.no-js .shdemo-nav__close {
    display: none;
}

.js .shdemo-nav,
.js [data-shdemo-nav] {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: var(--z-dropdown);
    display: block !important;
    max-height: min(60dvh, var(--nav-panel-max));
    padding: 0;
    overflow-y: auto;
    border: 0;
    border-block-end: var(--rule-hair) solid var(--color-rule);
    border-radius: 0;
    background: var(--color-paper);
    box-shadow: var(--shadow-panel);
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(var(--space-xs) * -1));
    transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}

.js .shdemo-nav[hidden],
.js [data-shdemo-nav][hidden],
.shdemo-nav-scrim[hidden] {
    display: none !important;
}

.js .shdemo-nav-open .shdemo-nav,
.js .shdemo-nav-open [data-shdemo-nav] {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.shdemo-nav__inner {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-lg) var(--space-xl);
    padding-block: var(--space-lg) var(--space-xl);
}

.shdemo-nav__intro {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
}

.shdemo-nav__title {
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.shdemo-nav__description {
    max-width: 34ch;
    margin: var(--space-xs) 0 0;
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.shdemo-nav__close {
    display: inline-grid;
    width: var(--control-height);
    min-width: var(--control-height);
    padding: 0;
    place-items: center;
    border: var(--rule-control) solid var(--color-rule-strong);
    color: var(--color-ink);
    cursor: pointer;
    transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}

.shdemo-nav__close svg {
    width: var(--control-icon-size);
    height: var(--control-icon-size);
    pointer-events: none;
    stroke: currentColor;
}

.shdemo-nav__menu > .mod-menu,
.shdemo-nav__menu > .mod-list,
.shdemo-nav__menu > .nav {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs) var(--space-lg);
    counter-reset: shdemo-demo-item;
}

.shdemo-nav__menu > .mod-menu > li,
.shdemo-nav__menu > .mod-list > li,
.shdemo-nav__menu > .nav > li {
    min-width: 0;
    counter-increment: shdemo-demo-item;
}

.shdemo-nav__menu > .mod-menu > li > a,
.shdemo-nav__menu > .mod-list > li > a,
.shdemo-nav__menu > .nav > li > a,
.shdemo-nav__menu > .mod-menu > li > .separator,
.shdemo-nav__menu > .mod-list > li > .separator,
.shdemo-nav__menu > .nav > li > .separator {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: var(--nav-item-height);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-xl);
    border-radius: var(--radius-sm);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 650;
    line-height: 1.25;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
}

.shdemo-nav__menu > .mod-menu > li > a::before,
.shdemo-nav__menu > .mod-list > li > a::before,
.shdemo-nav__menu > .nav > li > a::before,
.shdemo-nav__menu > .mod-menu > li > .separator::before,
.shdemo-nav__menu > .mod-list > li > .separator::before,
.shdemo-nav__menu > .nav > li > .separator::before,
.shdemo-nav__menu > .mod-menu > li > .mod-menu__toggle-sub:first-child::before,
.shdemo-nav__menu > .mod-list > li > .mod-menu__toggle-sub:first-child::before,
.shdemo-nav__menu > .nav > li > .mod-menu__toggle-sub:first-child::before {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--space-sm);
    color: var(--color-accent);
    content: counter(shdemo-demo-item, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    transform: translateY(-50%);
}

.shdemo-nav__item-label {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shdemo-nav__item-description {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shdemo-nav .current > a,
.shdemo-nav .active > a,
.shdemo-nav a[aria-current="page"],
[data-shdemo-nav] .current > a,
[data-shdemo-nav] .active > a,
[data-shdemo-nav] a[aria-current="page"] {
    background: var(--color-paper-2);
    color: var(--color-ink);
    text-decoration: none;
}

.shdemo-nav li > a + .mod-menu__toggle-sub,
[data-shdemo-nav] li > a + .mod-menu__toggle-sub {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--space-xs);
    width: var(--control-height);
    min-width: var(--control-height);
    padding: 0;
    justify-content: center;
    border: var(--rule-control) solid var(--color-rule);
    border-radius: var(--radius-round);
    transform: translateY(-50%);
}

.shdemo-nav li:has(> a + .mod-menu__toggle-sub) > a,
[data-shdemo-nav] li:has(> a + .mod-menu__toggle-sub) > a {
    padding-inline-end: calc(var(--control-height) + var(--space-md));
}

.shdemo-nav li > .mod-menu__toggle-sub:first-child,
[data-shdemo-nav] li > .mod-menu__toggle-sub:first-child {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: var(--nav-item-height);
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-xl);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 650;
    line-height: 1.25;
    text-align: start;
    white-space: nowrap;
}

.shdemo-nav li > .mod-menu__toggle-sub:first-child .mod-menu__heading,
.shdemo-nav li > .mod-menu__toggle-sub:first-child .mod-menu__separator,
[data-shdemo-nav] li > .mod-menu__toggle-sub:first-child .mod-menu__heading,
[data-shdemo-nav] li > .mod-menu__toggle-sub:first-child .mod-menu__separator {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shdemo-nav li > .mod-menu__toggle-sub:first-child .icon-chevron-down,
[data-shdemo-nav] li > .mod-menu__toggle-sub:first-child .icon-chevron-down {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.shdemo-nav .icon-chevron-down,
[data-shdemo-nav] .icon-chevron-down {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-inline-end: var(--rule-control) solid currentColor;
    border-block-end: var(--rule-control) solid currentColor;
    transform: rotate(45deg);
    transform-origin: center;
    transition: none;
}

.shdemo-nav .mod-menu__toggle-sub[aria-expanded="true"] > .icon-chevron-down,
[data-shdemo-nav] .mod-menu__toggle-sub[aria-expanded="true"] > .icon-chevron-down {
    transform: rotate(225deg);
}

.shdemo-nav ul ul,
[data-shdemo-nav] ul ul,
.shdemo-nav .mod-menu__sub {
    position: static;
    display: grid;
    min-width: 0;
    margin-block-start: var(--space-xs);
    padding: var(--space-xs) 0 0 var(--space-sm);
    gap: var(--space-2xs);
    border: 0;
    border-inline-start: var(--rule-hair) solid var(--color-rule);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: none;
}

.shdemo-nav ul ul[aria-hidden="true"],
[data-shdemo-nav] ul ul[aria-hidden="true"] {
    display: none;
}

.shdemo-nav ul ul[aria-hidden="false"],
[data-shdemo-nav] ul ul[aria-hidden="false"],
.shdemo-nav ul ul.show-menu,
[data-shdemo-nav] ul ul.show-menu {
    display: grid;
}

.shdemo-nav__search,
.shdemo-nav__search .container-search,
.shdemo-nav__search .mod-finder {
    margin: 0;
    padding-inline: 0;
    border-inline: 0;
}

.shdemo-nav__search {
    padding-block-start: var(--space-md);
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.shdemo-nav__search .container-search,
.shdemo-nav__search .mod-finder {
    padding-block: 0;
    border-block: 0;
}

.shdemo-nav-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-sticky) - 1);
    width: 100%;
    min-height: 100dvh;
    padding: 0;
    border: 0;
    background: var(--color-overlay);
    opacity: 0;
    cursor: default;
    pointer-events: none;
    transition: opacity var(--dur-short) var(--ease-out);
}

.shdemo-nav-open .shdemo-nav-scrim {
    opacity: 1;
    pointer-events: auto;
}

.shdemo-breadcrumbs {
    min-height: var(--control-height);
    margin-block-end: 0;
    padding-block: 0;
    border-block-end: var(--rule-hair) solid var(--color-rule);
    font-family: var(--font-body);
    font-size: var(--text-xs);
}

.shdemo-breadcrumbs > .breadcrumb,
.shdemo-breadcrumbs > nav,
.shdemo-breadcrumbs > ol {
    min-height: var(--control-height);
}

.shdemo-layout {
    gap: var(--space-2xl);
    padding-block: var(--space-xl) var(--space-3xl);
}

.shdemo-sidebar {
    padding-block-start: var(--space-md);
    border-block-start-color: var(--color-rule-strong);
}

.shdemo-sidebar .moduletable,
.shdemo-sidebar .module {
    padding-block: var(--space-md) var(--space-xl);
    border-block-end-color: var(--color-rule);
}

.shdemo-sidebar .moduletable:first-child,
.shdemo-sidebar .module:first-child {
    padding-block-start: 0;
}

.shdemo-sidebar h2,
.shdemo-sidebar h3,
.shdemo-sidebar .module-title {
    margin-block-end: var(--space-md);
    font-size: var(--text-md);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.page-header,
.componentheading {
    margin-block-end: var(--space-lg);
    padding-block-end: 0;
    border-block-end: 0;
}

h1,
.page-header h1,
.componentheading {
    max-width: 24ch;
    font-size: clamp(var(--text-2xl), 8vw, var(--text-3xl));
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.08;
}

/* Core Joomla article lists are one column unless the menu item explicitly declares columns-N. */
.blog-items,
.com-content-category-blog__items,
.category-list .category-list__items {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.blog-items.masonry-2,
.blog-items.masonry-3,
.blog-items.masonry-4,
.com-content-category-blog__items.masonry-2,
.com-content-category-blog__items.masonry-3,
.com-content-category-blog__items.masonry-4 {
    display: block;
    column-gap: var(--space-xl);
}

.blog-items.masonry-2 > .blog-item,
.blog-items.masonry-3 > .blog-item,
.blog-items.masonry-4 > .blog-item,
.com-content-category-blog__items.masonry-2 > .com-content-category-blog__item,
.com-content-category-blog__items.masonry-3 > .com-content-category-blog__item,
.com-content-category-blog__items.masonry-4 > .com-content-category-blog__item {
    break-inside: avoid;
}

.blog-item,
.com-content-category-blog__item,
.category-list .category-list__item {
    min-width: 0;
    padding: var(--space-lg) 0 var(--space-xl);
    border: 0;
    border-block-end: var(--rule-hair) solid var(--color-rule);
}

.items-leading {
    margin-block-end: var(--space-xl);
}

.items-leading .blog-item h2,
.items-leading .com-content-category-blog__item h2 {
    max-width: 30ch;
    font-size: clamp(var(--text-lg), 5vw, var(--text-2xl));
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.12;
}

.blog-item h2,
.blog-item h3,
.com-content-category-blog__item h2,
.com-content-category-blog__item h3,
.category-list .category-list__item h2 {
    max-width: 34ch;
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.blog-item > p,
.blog-item > ul,
.blog-item > ol,
.com-content-category-blog__item > p,
.com-content-category-blog__item > ul,
.com-content-category-blog__item > ol {
    max-width: var(--measure);
}

.article-info,
.article-info-muted {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-lg);
    margin-block: var(--space-sm) var(--space-lg);
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: var(--text-xs);
}

.article-info dd,
.article-info-muted dd {
    margin: 0;
}

.readmore {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.readmore a {
    min-width: 0;
    max-width: 100%;
}

.readmore a {
    overflow: hidden;
    padding-inline: var(--space-md);
    border: var(--rule-control) solid var(--color-ink);
    border-radius: var(--radius-pill);
    color: var(--color-ink);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The bespoke catalogue utility remains available, but no longer captures every core blog list. */
.shdemo-catalogue {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.shdemo-footer {
    border-block-start: var(--rule-hair) solid var(--color-rule);
    background: var(--color-paper-2);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
}

.shdemo-footer__inner {
    display: grid;
    align-items: stretch;
    justify-content: stretch;
    gap: var(--space-xl);
    padding-block: var(--space-2xl) max(var(--space-xl), env(safe-area-inset-bottom));
}

.shdemo-footer__statement {
    max-width: 28ch;
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: clamp(var(--text-xl), 7vw, var(--text-3xl));
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.05;
}

.shdemo-footer__meta {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-sm);
    padding-block-start: var(--space-md);
    border-block-start: var(--rule-hair) solid var(--color-rule-strong);
    color: var(--color-muted);
}

.shdemo-footer__meta > .moduletable,
.shdemo-footer__meta > .module {
    min-width: 0;
    flex: 1 1 24rem;
    margin: 0;
}

.shdemo-footer__brand {
    color: var(--color-ink);
    font-family: var(--font-body);
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.shdemo-footer__copyright {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
    .shdemo-nav__close:hover {
        transform: translateY(-1px);
    }

    .shdemo-nav__menu > .mod-menu > li > a:hover,
    .shdemo-nav__menu > .mod-list > li > a:hover,
    .shdemo-nav__menu > .nav > li > a:hover {
        background: var(--color-paper-3);
        color: var(--color-ink);
    }
}

@media (min-width: 24rem) {
    [data-shdemo-nav-toggle] {
        width: auto;
        padding-inline: var(--space-md);
    }

    .shdemo-nav-toggle__label,
    .shdemo-brand__description {
        display: inline;
    }
}

@media (min-width: 40rem) {
    .shdemo-nav__inner {
        grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr);
    }

    .shdemo-nav__menu > .mod-menu,
    .shdemo-nav__menu > .mod-list,
    .shdemo-nav__menu > .nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shdemo-nav__search {
        grid-column: 2;
    }

    .blog-items.columns-2,
    .com-content-category-blog__items.columns-2,
    .category-list .category-list__items.columns-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-xl);
    }

    .blog-items.masonry-2,
    .com-content-category-blog__items.masonry-2 {
        column-count: 2;
    }

    .shdemo-catalogue {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shdemo-footer__meta {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
    }
}

@media (min-width: 60rem) {
    .shdemo-footer__meta {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr) max-content;
        align-items: start;
        gap: var(--space-xl);
    }

    .shdemo-nav__menu > .mod-menu,
    .shdemo-nav__menu > .mod-list,
    .shdemo-nav__menu > .nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .shdemo-layout[data-sidebars="left"] {
        grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-max)) minmax(0, 1fr);
    }

    .shdemo-layout[data-sidebars="right"] {
        grid-template-columns: minmax(0, 1fr) minmax(var(--sidebar-min), var(--sidebar-max));
        gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
    }

    .shdemo-layout[data-sidebars="both"] {
        grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr) minmax(12rem, 16rem);
        gap: var(--space-xl);
    }

    .shdemo-sidebar--left {
        padding-inline-end: var(--space-xl);
    }

    .shdemo-sidebar--right {
        padding-inline-start: var(--space-xl);
    }

    .blog-items.columns-3,
    .com-content-category-blog__items.columns-3,
    .category-list .category-list__items.columns-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-xl);
    }

    .blog-items.columns-4,
    .com-content-category-blog__items.columns-4,
    .category-list .category-list__items.columns-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-lg);
    }

    .blog-items.masonry-3,
    .com-content-category-blog__items.masonry-3 {
        column-count: 3;
    }

    .blog-items.masonry-4,
    .com-content-category-blog__items.masonry-4 {
        column-count: 4;
        column-gap: var(--space-lg);
    }

    .blog-item:nth-child(2n),
    .com-content-category-blog__item:nth-child(2n),
    .category-list .category-list__item:nth-child(2n) {
        border-inline-end: 0;
    }

    .shdemo-catalogue {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 72rem) {
    .shdemo-nav__menu > .mod-menu,
    .shdemo-nav__menu > .mod-list,
    .shdemo-nav__menu > .nav {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Component-only, offline, and error documents share the same restrained shell. */
.shdemo-component-page,
.shdemo-error-page,
.shdemo-offline-page,
.shdemo-system-page {
    min-height: 100dvh;
    background: var(--color-paper);
    color: var(--color-ink-2);
}

.shdemo-main--component {
    width: min(100%, var(--page-max));
    margin-inline: auto;
    padding-block: var(--space-xl);
    padding-inline-start: max(var(--page-gutter), env(safe-area-inset-left));
    padding-inline-end: max(var(--page-gutter), env(safe-area-inset-right));
}

.shdemo-system-page__main {
    display: grid;
    width: min(100%, 72rem);
    min-height: 100dvh;
    margin-inline: auto;
    padding-block: var(--space-xl) max(var(--space-xl), env(safe-area-inset-bottom));
    padding-inline-start: max(var(--page-gutter), env(safe-area-inset-left));
    padding-inline-end: max(var(--page-gutter), env(safe-area-inset-right));
    align-content: start;
    gap: var(--space-2xl);
}

.shdemo-system-page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block-end: var(--space-md);
    border-block-end: var(--rule-hair) solid var(--color-rule);
}

.shdemo-system-page__brand {
    display: inline-flex;
    min-height: var(--control-height);
    align-items: center;
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
}

.shdemo-system-page__status {
    margin-block-end: var(--space-sm);
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.shdemo-system-page__title {
    max-width: 18ch;
    font-size: clamp(var(--text-2xl), 8vw, var(--text-3xl));
}

.shdemo-system-page__description {
    max-width: var(--measure);
    color: var(--color-ink-2);
}

.shdemo-system-page__panel {
    width: min(100%, 48rem);
    padding-block-start: var(--space-xl);
}

.shdemo-system-page__code {
    margin-block: 0 var(--space-md);
    color: var(--color-rule-strong);
    font-family: var(--font-display);
    font-size: clamp(var(--text-3xl), 18vw, 7rem);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 0.9;
}

.shdemo-system-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: var(--space-xl);
}

.shdemo-system-page__search {
    max-width: 36rem;
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-lg);
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.shdemo-system-page__search-control {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.shdemo-system-page__modules {
    margin-block-start: var(--space-xl);
}

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

.shdemo-offline__intro,
.shdemo-offline__access {
    min-width: 0;
}

.shdemo-offline__message {
    max-width: var(--measure);
}

.shdemo-offline__figure {
    margin-block: var(--space-xl) 0;
}

.shdemo-offline__image {
    width: 100%;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-sm);
}

.shdemo-offline__access {
    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-2);
}

.shdemo-offline__access-header {
    margin-block-end: var(--space-lg);
    padding-block-end: var(--space-md);
    border-block-end: var(--rule-hair) solid var(--color-rule);
}

.shdemo-offline__access-title {
    font-size: var(--text-lg);
}

.shdemo-offline__access-description {
    margin: 0;
    color: var(--color-muted);
}

.shdemo-login-form {
    width: 100%;
}

.shdemo-field {
    margin-block-end: var(--space-md);
}

.shdemo-field__label {
    display: block;
}

.shdemo-checkbox {
    display: inline-flex;
    min-height: var(--control-height);
    align-items: center;
    margin-block: 0 var(--space-md);
    font-weight: 500;
}

.shdemo-login-form__submit,
.shdemo-login-form__provider {
    width: 100%;
}

.shdemo-login-form__alternatives {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
    margin-block-start: var(--space-lg);
    padding-block-start: var(--space-lg);
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.shdemo-login-form__alternatives-label {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--text-sm);
}

@media (min-width: 40rem) {
    .shdemo-system-page__search-control {
        flex-direction: row;
        align-items: stretch;
    }

    .shdemo-system-page__search-control input {
        min-width: 0;
        flex: 1 1 auto;
    }
}

@media (min-width: 60rem) {
    .shdemo-system-page__main {
        align-content: center;
    }

    .shdemo-offline__layout {
        grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
        align-items: start;
    }

    .shdemo-offline__access {
        padding: var(--space-xl);
    }
}

@media (pointer: coarse) {
    a,
    button,
    input,
    select,
    textarea,
    [role="button"] {
        min-height: var(--control-height);
    }
}

@media (prefers-contrast: more) {
    :focus-visible {
        outline-width: 4px;
    }

    .card,
    .alert,
    input,
    select,
    textarea,
    .btn,
    button {
        border-color: var(--color-rule-strong);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 150ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 150ms !important;
    }

    .blog-item figure img,
    .blog-item .item-image img,
    .com-content-category-blog__item figure img,
    .com-content-category-blog__item .item-image img,
    .shdemo-catalogue__media img,
    .btn,
    .shdemo-button,
    button,
    .button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    .pager a,
    .shdemo-icon-button,
    [data-shdemo-nav-toggle],
    [data-shdemo-theme-toggle],
    .shdemo-nav ul ul,
    [data-shdemo-nav] ul ul {
        transform: none !important;
    }

    .js .shdemo-nav,
    .js [data-shdemo-nav] {
        transform: none;
        transition-property: opacity;
    }

    .btn[aria-busy="true"]::after,
    .shdemo-button[aria-busy="true"]::after,
    button[aria-busy="true"]::after,
    .button[aria-busy="true"]::after {
        animation-duration: 1.5s !important;
        animation-iteration-count: infinite !important;
    }
}

@media print {
    .shdemo-topbar,
    .shdemo-header,
    .shdemo-footer,
    .shdemo-sidebar,
    .shdemo-breadcrumbs,
    .shdemo-position,
    .shdemo-skip-link {
        display: none !important;
    }

    body,
    .shdemo-main {
        background: var(--color-paper);
        color: var(--color-ink);
    }

    a {
        color: var(--color-ink);
        text-decoration: underline;
    }
}