/* Smart.Industrial site - the same design language as htmlelements.com: Montserrat, the
   dark header, the docs and demos sidebars, the framework pills and the source tabs. The
   values below are the ones the public site's stylesheet uses. */

/* The palette is the Industrial theme's (source/styles/jqx.industrial.css): the ISA-101 greys
   and one blue, so the site and the demos in it read as one thing. The dark values are the
   dark theme's. */
:root {
    --he-font: Montserrat, Helvetica, Arial, sans-serif;
    --he-text: #131c25;
    --he-muted: #52606e;
    --he-blue: #1f5c94;
    --he-navy: #17456f;
    --he-eyebrow: #1f5c94;
    --he-highlight: #7cbcf2;
    --he-on-accent: #ffffff;
    --he-accent-tint: rgba(31, 92, 148, 0.1);
    --he-border: #ccd6e0;
    --he-border-light: #dde4ec;
    --he-sidebar: #eef2f6;
    --he-canvas: #e2e8ef;
    --he-code-bg: #f4f7fa;
    --he-code-border: #ccd6e0;
    /* the bands - the head of the sidebar, the hero, the footer - in the page's theme: light here,
       dark in dark mode. They were dark in both, and light mode kept a dark frame round a light page. */
    --he-band-base: #eef2f6;
    --he-band: linear-gradient(135deg, #f7f9fb 0%, #e2e8ef 100%);
    --he-band-dots: rgba(19, 28, 37, 0.07);
    --he-band-text: #131c25;
    --he-band-soft: #3d4a57;
    --he-band-accent: #1f5c94;
    --he-band-hover: rgba(19, 28, 37, 0.06);
    --he-band-current: rgba(31, 92, 148, 0.12);
    --he-band-line: rgba(19, 28, 37, 0.18);
    --he-band-line-strong: rgba(19, 28, 37, 0.45);
    --he-band-field: rgba(255, 255, 255, 0.75);
    --he-band-field-focus: #ffffff;
    --he-band-shadow: 0 2px 8px rgba(19, 28, 37, 0.08);
    --he-band-shot-border: #ccd6e0;
    --he-band-shot-shadow: 0 24px 60px rgba(19, 28, 37, 0.18);
    --he-hero-button: #1f5c94;
    --he-hero-button-text: #ffffff;
    --he-search-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131c25' stroke-width='2.2' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><line x1='15.5' y1='15.5' x2='21' y2='21'/></svg>");
    --he-footer: linear-gradient(#eef2f6 0%, #e2e8ef 100%);
    --he-footer-text: #33404d;
    --he-footer-muted: #52606e;
    --he-page: #ffffff;
    --he-surface: #ffffff;
    /* the header above the page: the site's own header is at the top of the sidebar, so there is
       none here; on htmlelements.com that site's fixed 70px header goes above it (see below) */
    --he-header-height: 0px;
    /* the layout: one container that the header, the sidebar with the content, and the footer share;
       the content column stops at a width where a demo or a table is still one glance, and running
       text stops at a measure a reader follows without losing the line */
    --he-container: 1440px;
    --he-gutter: 24px;
    --he-sidebar-width: 300px;
    --he-content-max: 1060px;
    --he-content-pad: 40px;
    --he-measure: 72ch;
}

/* inside htmlelements.com's page template: its header is a fixed 70px bar at the top of the
   window, and everything here moves down by it - the page, the sticky sidebar, the anchors */
body:has(header.header-docs) {
    --he-header-height: 70px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding-top: var(--he-header-height);
    color: var(--he-text);
    background: var(--he-page);
    font: 400 16px/1.5 var(--he-font);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--he-blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
}

code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.92em;
    color: var(--he-blue);
}

pre,
pre.prettyprint {
    margin: 8px 0 16px;
    padding: 12px 16px;
    background: var(--he-code-bg);
    border: 1px solid var(--he-code-border);
    border-radius: 4px;
    color: var(--he-text);
    font: 300 14px/1.7 Consolas, "Courier New", monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
    tab-size: 4;
}

pre code {
    color: inherit;
    font-size: inherit;
}

/* the theme's navy and white in both modes: on the dark page the text turned light and stood
   on the light highlight at 1.6:1 */
.skip {
    position: absolute;
    left: -999px;
    top: 8px;
    padding: 8px 12px;
    background: #17456f;
    color: #ffffff;
    font-weight: 600;
    z-index: 100;
}

.skip:focus {
    left: 8px;
}

:focus-visible {
    outline: 2px solid var(--he-blue);
    outline-offset: 2px;
}

/* ── The site's header, at the top of the sidebar ──────────────────────────
   The page's top belongs to htmlelements.com's own header; this site's header is the head of
   the sidebar instead - the same dark band, brand, search, switch and links - and stays there
   while the list under it scrolls. */

.site-head {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 20px var(--he-gutter) 0;
    background: var(--he-band);
    background-image: radial-gradient(var(--he-band-dots) 1px, transparent 1px), var(--he-band);
    background-size: 22px 22px, auto;
    color: var(--he-band-text);
    box-shadow: var(--he-band-shadow);
}

.site-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.site-brand {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    color: var(--he-band-text);
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.5px;
}

.site-brand:hover {
    text-decoration: none;
}

.site-brand small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.4px;
    opacity: 0.9;
}

/* the parts of the site, one line each with its icon, the current one marked */
.site-nav {
    display: grid;
    gap: 2px;
    margin: 14px -10px 0;
    padding-bottom: 14px;
}

.site-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--he-band-text);
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
}

.site-nav a:hover {
    text-decoration: none;
    background: var(--he-band-hover);
}

.site-nav a[aria-current="page"] {
    background: var(--he-band-current);
    color: var(--he-band-accent);
    font-weight: 600;
}

/* the bar at the left edge that says which part this is, as the old header underlined it */
.site-nav a[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 2px;
    background: var(--he-band-accent);
}

.site-nav-icon {
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
}

.site-nav a[aria-current="page"] .site-nav-icon {
    opacity: 1;
}

.theme-toggle {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin-right: -6px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--he-band-text);
    font-size: 18px;
    cursor: pointer;
}

.theme-toggle:hover {
    background: var(--he-band-hover);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-footer {
    margin-top: 64px;
    background: var(--he-footer);
    color: var(--he-footer-text);
    font-size: 15px;
}

/* under a sidebar page the content column already ends with its own space, and the sidebar colour runs down to the footer */
.with-sidebar + .site-footer {
    margin-top: 0;
}

.site-footer-inner {
    max-width: var(--he-container);
    margin: 0 auto;
    padding: 40px var(--he-gutter);
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    align-items: center;
    justify-content: space-between;
}

.site-footer-inner p {
    margin: 0;
    color: var(--he-footer-muted);
    font-size: 14px;
}

.site-footer-inner nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.site-footer-inner nav a {
    padding: 6px 14px;
    border: 1px solid var(--he-band-line);
    border-radius: 8px;
    color: var(--he-footer-text);
}

.site-footer-inner nav a:hover {
    text-decoration: none;
    border-color: var(--he-band-line-strong);
}

.site-footer .copyright {
    width: 100%;
    color: var(--he-band-accent);
    font-size: 12px;
}

/* ── Home ───────────────────────────────────────────────────────────────── */

.hero {
    position: relative;
    background-color: var(--he-band-base);
    margin-top: 0;
    padding: 72px 24px;
    background: var(--he-band);
    background-image: radial-gradient(var(--he-band-dots) 1px, transparent 1px), var(--he-band);
    background-size: 22px 22px, auto;
    color: var(--he-band-text);
    text-align: center;
}

.hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.hero h1 {
    margin: 0;
    padding: 16px 24px 24px;
    font-size: 46px;
    font-weight: 300;
    line-height: 1.2;
}

.hero .rule {
    display: block;
    width: 32px;
    height: 2px;
    margin: 0 auto 24px;
    background: var(--he-band-accent);
}

.hero .highlights {
    margin: 0 0 32px;
    font-size: 18px;
}

.hero .highlights span {
    color: var(--he-band-accent);
    padding: 0 8px;
}

.hero p {
    margin: 0;
    font-size: 20px;
    line-height: 30px;
}

.hero p.frameworks {
    margin-top: 12px;
}

.hero p.frameworks a {
    color: var(--he-band-text);
    text-decoration: underline;
}

.hero .btn-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 32px 0 16px;
}

.button {
    display: inline-block;
    padding: 16px 24px 15px;
    border: 2px solid var(--he-blue);
    border-radius: 24px;
    background: var(--he-blue);
    color: var(--he-on-accent);
    font: 700 12px/12px var(--he-font);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.button:hover {
    text-decoration: none;
    box-shadow: 0 5px 20px rgba(19, 28, 37, 0.35);
}

.hero .button {
    background: var(--he-hero-button);
    border-color: var(--he-hero-button);
    color: var(--he-hero-button-text);
}

.button.outline,
.hero .button.outline {
    background: transparent;
    border-color: var(--he-band-line-strong);
    color: var(--he-band-text);
}

.button.blue {
    background: var(--he-blue);
    border-color: var(--he-blue);
    color: var(--he-on-accent);
}

.hero .release {
    font-size: 12px;
}

.hero .release span {
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: 1px dashed rgba(124, 188, 242, 0.6);
}

/* the home page is read top to bottom: its sections are narrower than the docs container, and the hero shot matches them */
.home section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px var(--he-gutter) 8px;
}

.home section.hero {
    max-width: none;
    margin: 0;
    padding: 72px 24px;
}

.section-title-top {
    display: block;
    margin: 8px 0;
    color: var(--he-eyebrow);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-align: center;
    text-transform: uppercase;
}

.section-title {
    margin: 0 auto;
    padding: 8px 20px 24px;
    font-size: 36px;
    font-weight: 300;
    line-height: 1.3;
    text-align: center;
}

.section-intro {
    max-width: 820px;
    margin: 0 auto 32px;
    font-weight: 300;
    text-align: center;
}

.live-panel {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--he-border);
    border-radius: 8px;
    background: var(--he-surface);
}

.live-panel .tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.live-panel smart-strip-chart,
.live-panel jqx-strip-chart {
    display: block;
    height: 160px;
    margin-bottom: 12px;
}

.live-caption {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--he-muted);
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid var(--he-border);
    border-radius: 8px;
    background: var(--he-surface);
    transition: box-shadow 0.2s;
}

.card:hover {
    box-shadow: 0 5px 20px rgba(51, 51, 51, 0.12);
}

.card-thumb {
    display: block;
    height: 150px;
    margin: -16px -16px 12px;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid var(--he-border);
    overflow: hidden;
    background: var(--he-canvas);
}

.card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.card-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.card-name a {
    color: var(--he-navy);
}

.card-tag {
    font-size: 12px;
    color: var(--he-muted);
}

.card-summary {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
}

.card-links {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--he-border-light);
    font-size: 13px;
}

.card-links a {
    margin-right: 14px;
}

.card-meta {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--he-muted);
}

.group-title {
    grid-column: 1 / -1;
    margin: 20px 0 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--he-eyebrow);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

th,
td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--he-border-light);
    text-align: left;
    vertical-align: top;
}

th {
    font-weight: 700;
    color: var(--he-navy);
}

.feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px 32px;
}

.feature-list li {
    padding: 8px 0 8px 22px;
    position: relative;
    font-weight: 300;
    font-size: 15px;
}

.feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--he-highlight);
}

.feature-list li b,
.feature-list li a {
    font-weight: 700;
    color: var(--he-navy);
}

.center {
    text-align: center;
}

/* ── The sidebar layout, on every page ──────────────────────────────────────
   The sidebar stands at the left edge of the window, as on htmlelements.com's demo pages, with
   the site's header at its top; the content column is centred in the rest of the width. */

.with-sidebar {
    position: relative;
    display: flex;
    min-height: calc(100vh - var(--he-header-height));
    /* the sidebar column, painted for the whole height even where the sidebar itself has ended */
    background: linear-gradient(to right, var(--he-sidebar) calc(var(--he-sidebar-width) - 1px), var(--he-border) calc(var(--he-sidebar-width) - 1px), var(--he-border) var(--he-sidebar-width), var(--he-page) var(--he-sidebar-width));
}

.sidebar {
    flex: 0 0 var(--he-sidebar-width);
    width: var(--he-sidebar-width);
    background: var(--he-sidebar);
    border-right: 1px solid var(--he-border);
    padding: 0 0 40px;
    position: sticky;
    top: var(--he-header-height);
    align-self: flex-start;
    /* the height of the window, however short its list, so the column reads as one */
    height: calc(100vh - var(--he-header-height));
    overflow-y: auto;
    /* above the content, so the search results that open from its header are too */
    z-index: 20;
    /* the pinned header covers the top of the list: a link reached by Tab scrolls clear of it */
    scroll-padding-top: 160px;
}

.sidebar-top {
    padding: 20px var(--he-gutter) 16px;
    border-bottom: 1px solid var(--he-border);
}

.sidebar-top .all {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--he-text);
}

.sidebar-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--he-border);
    border-radius: 999px;
    background: var(--he-surface);
    color: var(--he-navy);
    font: 600 12px var(--he-font);
    letter-spacing: 0.5px;
    cursor: pointer;
}

.sidebar-toggle[aria-expanded="true"] span {
    display: inline-block;
    transform: rotate(180deg);
}

.sidebar-top .all::before {
    content: "‹";
    margin-right: 10px;
    font-weight: 400;
}

/* on All Topics and All Components themselves */
.sidebar-top .all[aria-current="page"] {
    color: var(--he-blue);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.search-form {
    position: relative;
    margin: 16px 0 4px;
    width: 100%;
    max-width: 252px;
}

.search-form input {
    width: 100%;
    height: 38px;
    padding: 0 38px 0 16px;
    border: 2px solid var(--he-border-light);
    background: #ffffff;
    color: var(--he-text);
    font: 300 12px var(--he-font);
}

.search-form input:focus {
    outline: none;
    box-shadow: 0 0 12px var(--he-border-light);
}

.search-form::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 9px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--he-muted);
    border-radius: 50%;
    box-shadow: 4px 4px 0 -1px var(--he-muted);
    box-sizing: border-box;
    transform: scale(0.9);
}

.sidebar-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px var(--he-gutter) 4px;
    padding-bottom: 10px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    position: relative;
}

.sidebar-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background: var(--he-blue);
}

.side-nav-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0 12px;
}

.side-nav-list h4 {
    margin: 20px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--he-muted);
}

.side-nav-list li {
    margin: 2px 0;
}

.side-nav-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.side-nav-list .side-nav-group {
    margin: 0;
}

.side-nav-list a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--he-text);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.4;
}

.side-nav-list a:hover {
    text-decoration: none;
    background: var(--he-accent-tint);
}

.side-nav-list a[aria-current="page"] {
    background: var(--he-blue);
    color: var(--he-on-accent);
    font-weight: 700;
}

/* the section of the page being read, on a page whose sidebar lists its sections */
.side-nav-list a[aria-current="location"] {
    background: var(--he-accent-tint);
    color: var(--he-navy);
    font-weight: 600;
}

.sidebar-label {
    display: block;
    color: var(--he-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.side-nav-sections {
    margin-top: 12px;
}

.side-nav-list li.hidden {
    display: none;
}

.content {
    flex: 1;
    min-width: 0;
    max-width: calc(var(--he-content-max) + 2 * var(--he-content-pad));
    margin: 0 auto;
    padding: 40px var(--he-content-pad) 64px;
    background: var(--he-page);
}

/* a page read top to bottom (the home page, Scada Studio's): its sections set their own widths */
.content.content-page,
.with-sidebar .content.content-page {
    max-width: none;
    padding: 0;
    margin: 0;
}

.content h1,
.content h2.page-title {
    margin: 0 0 16px;
    font-size: 36px;
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.content h2 {
    margin: 40px 0 12px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
}

.content h3 {
    margin: 32px 0 10px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
}

.content p,
.content li {
    font-weight: 300;
    line-height: 1.75;
}

/* running text keeps a measure; tables, code, frames and card grids take the column */
.content p,
.content ul:not(.cards):not(.topic-list):not(.component-index):not(.chip-list):not(.detail-list):not(.feature-list),
.content ol,
.content blockquote,
.content dl.facts,
.content .lead {
    max-width: var(--he-measure);
}

.content .lead {
    max-width: 78ch;
}

.content p.demo-meta,
.content p.group-links,
.content p.source-note,
.content .demo-head p,
.content .card p,
.content .start-card p,
.content figcaption,
.content .on-this-page {
    max-width: none;
}

/* a link inside running text is told apart by more than its colour */
.content p a,
.content li a,
.content td a,
.content dd a,
.section-intro a,
.live-caption a,
.hero-shot figcaption a,
.faq dd a,
.card-summary a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.content p {
    margin: 0 0 16px;
}

.content ul,
.content ol {
    margin: 0 0 16px;
    padding-left: 24px;
}

.content .console,
.content span.code,
.content span.value {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.92em;
    color: var(--he-blue);
    /* a long call such as platformBrowserDynamic().bootstrapModule breaks rather than widening a phone's page */
    overflow-wrap: anywhere;
}

.content p code,
.content li code,
.content td code {
    overflow-wrap: anywhere;
}

.content table {
    margin: 8px 0 24px;
}

.content .demo {
    margin: 12px 0 24px;
}

.content .table th,
.content .table td {
    border: 1px solid var(--he-border-light);
}

/* the docs-overview fragments: framework pills, the getting-started steps */
.framework-switch {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 0 20px;
    padding: 3px;
    border: 1px solid var(--he-border);
    border-radius: 999px;
    background: var(--he-surface);
    align-items: center;
}

.framework-switch a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--he-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 12px;
}

.framework-switch a:hover {
    text-decoration: none;
    background: var(--he-accent-tint);
}

.framework-switch a[aria-current="page"],
.framework-switch a.active {
    background: var(--he-blue);
    color: var(--he-on-accent);
}

.framework-switch img {
    width: 16px;
    height: 16px;
}

.content #guideContent #header p {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--he-eyebrow);
}

.content #guideContent #header h1 {
    margin: 4px 0 24px;
}

.content #guideContent section.content {
    padding: 0;
}

.content .doc-links {
    margin: 0 0 20px;
    font-size: 13px;
}

.content .doc-links a {
    margin-right: 16px;
}

/* a code block with its Copy control in the corner */
.code-block {
    position: relative;
    margin: 8px 0 16px;
}

.code-block pre,
.code-block pre.prettyprint {
    margin: 0;
    padding-right: 84px;
}

.copy-button {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 5px 10px;
    border: 1px solid var(--he-border);
    border-radius: 4px;
    background: var(--he-surface);
    color: var(--he-muted);
    font: 600 11px var(--he-font);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
}

.copy-button:hover {
    border-color: var(--he-blue);
    color: var(--he-blue);
}

/* ── API tables on the CSS page ─────────────────────────────────────────── */

.api-table code {
    white-space: nowrap;
}

.api-table td:first-child {
    width: 30%;
}

/* ── Demo pages ─────────────────────────────────────────────────────────── */

.demo-head {
    margin-bottom: 8px;
}

.demo-title {
    margin: 0;
    font-size: 40px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--he-blue);
}

.demo-title small {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 300;
    color: var(--he-muted);
}

.source-tabs {
    display: flex;
    gap: 4px;
    margin: 24px 0 16px;
    border-bottom: 1px solid var(--he-border-light);
    overflow-x: auto;
}

.source-tabs button {
    white-space: nowrap;
}

.source-tabs button {
    padding: 12px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--he-text);
    font: 400 13.5px var(--he-font);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
}

.source-tabs button[aria-selected="true"] {
    color: var(--he-blue);
    border-bottom-color: var(--he-blue);
}

.source-panel[hidden] {
    display: none;
}

.demo-frame {
    width: 100%;
    height: 720px;
    border: 1px solid var(--he-border);
    border-radius: 4px;
    background: #ffffff;
}

.demo-frame.screen {
    height: 860px;
}

.source-panel pre {
    max-height: 720px;
    font-size: 13px;
}

/* ── Guides index list ──────────────────────────────────────────────────── */

.content .topic-list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.topic-list li {
    margin: 0;
    padding: 16px 18px;
    border: 1px solid var(--he-border);
    border-radius: 8px;
    background: var(--he-surface);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.topic-list li:hover {
    border-color: var(--he-blue);
    box-shadow: 0 5px 20px rgba(51, 51, 51, 0.1);
}

.content .topic-list a {
    font-weight: 700;
    color: var(--he-navy);
    text-decoration: none;
}

.content .topic-list li:hover a {
    text-decoration: underline;
}

.topic-list span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 300;
    color: var(--he-muted);
}

/* ── Dark mode (the header's toggle) ────────────────────────────────────── */

/* the browser draws its scrollbars and form controls for the scheme, so a dark sidebar has a dark scrollbar */
html.dark-mode,
body.dark-mode {
    color-scheme: dark;
}

body.dark-mode {
    --he-text: #eaf0f6;
    --he-muted: #a7b4c1;
    --he-blue: #6fb2ec;
    --he-navy: #8cc3f2;
    --he-eyebrow: #6fb2ec;
    --he-highlight: #8cc3f2;
    --he-on-accent: #10161d;
    --he-accent-tint: rgba(111, 178, 236, 0.16);
    --he-border: #313e4b;
    --he-border-light: #2a3540;
    --he-sidebar: #1a222b;
    --he-canvas: #0f161d;
    --he-code-bg: #0f161d;
    --he-code-border: #313e4b;
    --he-page: #10161d;
    --he-surface: #1e2731;
    --he-band-base: #131c25;
    --he-band: linear-gradient(135deg, #10161d 0%, #1e2731 100%);
    --he-band-dots: rgba(255, 255, 255, 0.08);
    --he-band-text: #ffffff;
    --he-band-soft: rgba(255, 255, 255, 0.75);
    --he-band-accent: #8cc3f2;
    --he-band-hover: rgba(255, 255, 255, 0.08);
    --he-band-current: rgba(124, 188, 242, 0.16);
    --he-band-line: rgba(255, 255, 255, 0.14);
    --he-band-line-strong: rgba(255, 255, 255, 0.5);
    --he-band-field: rgba(255, 255, 255, 0.1);
    --he-band-field-focus: rgba(255, 255, 255, 0.16);
    --he-band-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    --he-band-shot-border: rgba(255, 255, 255, 0.18);
    --he-band-shot-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    --he-hero-button: #7cbcf2;
    --he-hero-button-text: #10161d;
    --he-search-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><line x1='15.5' y1='15.5' x2='21' y2='21'/></svg>");
    --he-footer: linear-gradient(#1e2731 0%, #10161d 100%);
    --he-footer-text: #c2ced9;
    --he-footer-muted: #8b98a6;
}

body.dark-mode .framework-switch a {
    background: transparent;
}

body.dark-mode .framework-switch a[aria-current="page"],
body.dark-mode .framework-switch a.active {
    background: var(--he-blue);
}

body.dark-mode .search-form input {
    background: var(--he-code-bg);
    color: var(--he-text);
    border-color: var(--he-border);
}

body.dark-mode .card-thumb {
    background: var(--he-canvas);
}

/* A picture in each theme: the light/dark switch shows the one taken in its theme. The other
   is not shown and, being lazy, not loaded. */
html.dark-mode .theme-light,
html:not(.dark-mode) .theme-dark {
    display: none !important;
}

body.dark-mode .demo-frame {
    background: var(--he-surface);
}

/* ── Small screens ──────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
    :root {
        --he-sidebar-width: 260px;
        --he-content-pad: 32px;
    }
}

@media (max-width: 960px) {
    .with-sidebar {
        flex-direction: column;
    }

    .with-sidebar {
        background: var(--he-page);
    }

    /* the full width of the window, whatever is inside (auto margins would size it to its widest table) */
    .content {
        max-width: none;
        margin: 0;
    }

    /* a table wider than the window scrolls sideways by itself, not the page */
    .content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    .sidebar {
        position: static;
        width: auto;
        align-self: stretch;
        height: auto;
        max-height: none;
        flex-basis: auto;
        padding: 0;
        border-right: 0;
        border-bottom: 1px solid var(--he-border);
        overflow: visible;
        scroll-padding-top: 0;
    }

    /* above the content, the site's header is the top of the page and scrolls with it */
    .sidebar .site-head {
        position: static;
        padding: 16px 16px 0;
    }

    /* two by two, so the header stays short above the page */
    .site-nav {
        grid-template-columns: 1fr 1fr;
        margin-top: 12px;
    }

    /* collapsed: the back link and the Browse button; open: the search, the title and the list */
    .sidebar-top {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 16px;
        border-bottom: 0;
    }

    .sidebar-top .all {
        flex: 1;
    }

    .sidebar-toggle {
        display: inline-flex;
    }

    .sidebar .search-form {
        display: none;
        order: 2;
        flex-basis: 100%;
        margin: 4px 0 0;
        max-width: none;
    }

    /* the Scada Studio docs' filter box: shown with the list it filters */
    .sidebar .search-form {
        display: none;
        order: 2;
        flex-basis: 100%;
        margin: 4px 0 0;
        max-width: none;
    }

    .sidebar.open .search-form {
        display: block;
    }

    .sidebar:not(.open) .sidebar-title,
    .sidebar:not(.open) .side-nav-list {
        display: none;
    }

    .sidebar.open {
        padding-bottom: 16px;
    }

    .sidebar.open .search-form {
        display: block;
    }

    .sidebar.open .side-nav-list {
        max-height: 60vh;
        overflow-y: auto;
        padding-bottom: 8px;
    }

    .sidebar-title {
        margin: 8px 16px 4px;
    }

    .content {
        padding: 32px 16px 48px;
    }

    .hero h1 {
        font-size: 32px;
    }

    .section-title {
        font-size: 28px;
    }

    .live-panel {
        grid-template-columns: 1fr;
    }

    .demo-title {
        font-size: 30px;
    }
}

@media (max-width: 640px) {
    .hero {
        padding-top: 40px;
    }

    .hero .highlights {
        font-size: 15px;
    }

    .hero p {
        font-size: 16px;
        line-height: 26px;
    }

    .demo-frame {
        height: 560px;
    }
}

/* the getting-started fragments: the page title is light, as on the public docs */
/* the framework fragments come with their own h2: a section heading under the page title, not a second title */
.overview-page h2 {
    margin: 0 0 16px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
}

.overview-page h3 {
    font-size: 19px;
    font-weight: 700;
}

/* a heading that links to itself keeps the heading's colour; the link shows on hover */
.content h2 a,
.content h3 a,
.content h4 a {
    color: inherit;
    text-decoration: none;
}

.content h2 a:hover,
.content h3 a:hover,
.content h4 a:hover {
    text-decoration: underline;
    text-decoration-color: var(--he-highlight);
    text-underline-offset: 4px;
}

.overview-page ol > li {
    margin-bottom: 8px;
}

.overview-page .doc-stack-versions {
    color: var(--he-muted);
    font-size: 14px;
}

.search-form::after {
    border: 0;
    box-shadow: none;
    width: 16px;
    height: 16px;
    top: 11px;
    right: 12px;
    transform: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352606e' stroke-width='2.5' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><line x1='15.5' y1='15.5' x2='21' y2='21'/></svg>") no-repeat center / contain;
}

.live-panel > div {
    min-width: 0;
}

.live-panel jqx-strip-chart,
.live-panel jqx-alarm-banner,
.live-panel jqx-faceplate {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 760px) {
    .hero h1 {
        font-size: 28px;
    }
}

@media (max-width: 640px) {
    .source-tabs {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .source-tabs::-webkit-scrollbar {
        display: none;
    }

    .source-tabs button {
        flex: 0 0 auto;
        padding: 12px 10px;
        white-space: nowrap;
    }
}

/* the FAQ on the home page */
.faq {
    max-width: 900px;
    margin: 0 auto;
}

.faq dt {
    margin: 20px 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--he-navy);
}

.faq dd {
    margin: 0;
    font-weight: 300;
    line-height: 1.7;
}

/* the screen under the hero text */
.hero-shot {
    display: flex;
    flex-direction: column-reverse;
    max-width: 1152px;
    margin: 40px auto -120px;
    padding: 0;
    text-align: center;
}

.hero-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--he-band-shot-border);
    box-shadow: var(--he-band-shot-shadow);
}

.hero-shot figcaption {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--he-band-soft);
}

.hero-shot figcaption a {
    color: var(--he-band-accent);
}

.home section.hero {
    padding-bottom: 40px;
}

.home #live {
    padding-top: 176px;
}

@media (max-width: 960px) {
    .hero-shot {
        margin-bottom: -60px;
    }

    .home #live {
        padding-top: 110px;
    }
}

/* the code sample on the home page */
.code-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto 24px;
}

.code-columns h3 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--he-muted);
}

.code-columns > div {
    display: flex;
    flex-direction: column;
}

.code-columns pre {
    flex: 1;
    margin: 0;
    font-size: 13px;
}

@media (max-width: 960px) {
    .code-columns {
        grid-template-columns: 1fr;
    }
}

/* ── Component pages: the title block and its tabs ──────────────────────── */

.eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--he-eyebrow);
}

.content .lead,
.lead {
    max-width: 78ch;
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.7;
}

.component-head {
    margin: 0 0 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--he-border-light);
}

.content .component-head h1 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 10px;
    font-size: 36px;
    font-weight: 300;
    line-height: 1.3;
}

.head-tag {
    font-size: 15px;
    font-weight: 400;
    color: var(--he-muted);
}

.page-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.page-tabs a {
    padding: 7px 12px;
    border: 1px solid var(--he-border);
    border-radius: 999px;
    background: var(--he-surface);
    color: var(--he-blue);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.page-tabs a:hover {
    border-color: var(--he-blue);
    text-decoration: none;
}

.page-tabs a[aria-current="page"] {
    background: var(--he-blue);
    border-color: var(--he-blue);
    color: var(--he-on-accent);
}

/* the overview: the description beside the picture, then the facts */
.overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
    gap: 32px;
    align-items: start;
    margin-bottom: 8px;
}

.overview-text > p:first-child {
    font-size: 16px;
}

.facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 16px;
    margin: 20px 0 0;
    font-size: 14px;
}

.facts dt {
    font-weight: 600;
    color: var(--he-muted);
}

.facts dd {
    margin: 0;
    font-weight: 300;
    overflow-wrap: anywhere;
}

.facts dd a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.overview-shot {
    margin: 0;
}

.overview-shot > a {
    display: block;
    border: 1px solid var(--he-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--he-canvas);
    transition: box-shadow 0.2s;
}

.overview-shot > a:hover {
    box-shadow: 0 5px 20px rgba(51, 51, 51, 0.15);
}

.overview-shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
}

.overview-shot figcaption {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 300;
    color: var(--he-muted);
}

.overview-shot figcaption a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* the API tables: name, type and default, description */
.api-table .type {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    color: var(--he-navy);
}

.api-table.props td:first-child {
    width: 22%;
}

.api-table.props td:nth-child(2) {
    width: 18%;
    font-size: 13px;
}

.api-table.events td:first-child,
.api-table.methods td:first-child {
    width: 30%;
}

.detail-list {
    margin-top: 6px;
    padding: 8px 10px;
    border-left: 2px solid var(--he-border);
    font-size: 13px;
    color: var(--he-muted);
    line-height: 1.6;
}

.detail-list code {
    color: var(--he-text);
}

.api-summary {
    font-size: 14px;
}

.framework-switch.inline {
    display: inline-flex;
    margin: 0 0 0 6px;
    vertical-align: middle;
}

/* the element in each framework */
.framework-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin: 0 0 8px;
}

.framework-card {
    min-width: 0;
    padding: 14px 16px 6px;
    border: 1px solid var(--he-border);
    border-radius: 8px;
    background: var(--he-surface);
}

.content .framework-card h3 {
    margin: 0 0 10px;
    font-size: 15px;
}

.framework-card pre.prettyprint {
    margin: 0 0 8px;
    font-size: 12px;
    max-height: 220px;
    white-space: pre;
    overflow: auto;
}

.framework-card .copy-button {
    margin: 0 0 8px;
}

/* names as chips: the screens a component is on, the components beside it */
.chip-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
}

.chip-list-label {
    margin-right: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--he-muted);
}

.chip {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--he-border);
    border-radius: 999px;
    background: var(--he-surface);
    color: var(--he-navy);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
}

.content p .chip,
.content li .chip,
.chip {
    text-decoration: none;
}

.chip:hover,
.content p .chip:hover,
.content li .chip:hover {
    border-color: var(--he-blue);
    color: var(--he-blue);
    text-decoration: none;
}

.content .a11y-page section.content h3:first-child {
    margin-top: 0;
}

/* ── The docs index ─────────────────────────────────────────────────────── */

.start-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 8px 0 32px;
}

.start-card {
    display: block;
    padding: 18px 20px;
    border: 1px solid transparent;
    border-left: 4px solid var(--he-eyebrow);
    border-radius: 8px;
    background: var(--he-accent-tint);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.start-card:hover {
    border-color: var(--he-blue);
    box-shadow: 0 5px 20px rgba(51, 51, 51, 0.12);
    text-decoration: none;
}

.start-card strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    color: var(--he-navy);
}

.start-card span {
    font-size: 13px;
    font-weight: 300;
    color: var(--he-text);
}

/* the groups fill three columns top to bottom, so a short group leaves no gap */
.component-groups {
    columns: 3 240px;
    column-gap: 32px;
}

.component-group {
    break-inside: avoid;
    padding-bottom: 12px;
}

.component-groups .group-title {
    margin-top: 8px;
}

.component-groups .component-index {
    margin: 6px 0 0;
}

.component-index,
.content .component-index {
    list-style: none;
    margin: 8px 0 16px;
    padding: 0;
}

.component-index li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--he-border-light);
    font-size: 14px;
    line-height: 1.4;
}

.component-index a {
    font-weight: 600;
    color: var(--he-navy);
}

.component-index code {
    font-size: 12px;
    color: var(--he-muted);
}

/* ── The home page: eight with a picture, everything in a list ──────────── */

.cards.featured {
    margin-bottom: 8px;
}

.group-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 8px;
    font-size: 12.5px;
    font-weight: 600;
}

.group-links a,
.content .group-links a {
    padding: 6px 12px;
    border: 1px solid var(--he-border);
    border-radius: 999px;
    background: var(--he-surface);
    color: var(--he-navy);
    line-height: 1.2;
    text-decoration: none;
}

.group-links a:hover,
.content .group-links a:hover {
    border-color: var(--he-blue);
    color: var(--he-blue);
}

.home .chip-list {
    margin-top: 16px;
}

/* two columns that pack: a short answer does not leave a hole beside a long one */
.faq {
    max-width: none;
    columns: 2 380px;
    column-gap: 48px;
}

.faq div {
    min-width: 0;
    break-inside: avoid;
    padding-bottom: 8px;
}

.faq div:first-child dt {
    margin-top: 0;
}

/* ── Demo pages ─────────────────────────────────────────────────────────── */

.demo-content {
    padding-top: 40px;
}

/* the bar under the title: the source tabs on the left, the theme and the frame's actions on the right */
.demo-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 24px 0 16px;
    border-bottom: 1px solid var(--he-border-light);
}

.demo-bar .source-tabs {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    border-bottom: 0;
}

.demo-bar .demo-tools {
    flex: 0 0 auto;
    padding-bottom: 8px;
}

.demo-title {
    font-size: 36px;
    font-weight: 300;
    line-height: 1.3;
    color: var(--he-text);
}

.demo-head-text .lead {
    margin: 6px 0 8px;
    font-size: 16px;
}

.demo-meta {
    margin: 0;
    font-size: 13px;
    color: var(--he-muted);
}

.demo-meta code {
    color: var(--he-text);
}

.demo-meta .sep {
    margin: 0 4px;
}

.demo-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-bottom: 2px;
}

.theme-pills {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--he-border);
    border-radius: 999px;
    background: var(--he-surface);
}

.theme-pills button {
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--he-text);
    font: 600 12px var(--he-font);
    cursor: pointer;
}

.theme-pills button[aria-checked="true"] {
    background: var(--he-blue);
    color: var(--he-on-accent);
}

.demo-actions {
    display: flex;
    gap: 8px;
}

/* the small buttons on a light page: an outline in the page colours */
.button.small {
    padding: 7px 12px;
    border-width: 1px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 1px;
}

.button.outline.small {
    border-color: var(--he-border);
    color: var(--he-navy);
    background: var(--he-surface);
}

.button.outline.small:hover {
    border-color: var(--he-navy);
    box-shadow: none;
}

button.button {
    font-family: var(--he-font);
    cursor: pointer;
}

.demo-content .source-tabs {
    margin-top: 0;
}

.demo-frame {
    display: block;
    height: 720px;
    min-height: 240px;
    border-radius: 6px;
    transition: height 0.15s;
}

.demo-frame.screen {
    height: min(860px, calc(100vh - 120px));
}

.source-note {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--he-muted);
}

.source-file {
    margin: 0 0 6px;
    font: 500 12px Consolas, "Courier New", monospace;
    color: var(--he-muted);
}

.file-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 8px;
}

.file-tabs button {
    padding: 6px 12px;
    border: 1px solid var(--he-border);
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: var(--he-text);
    font: 500 12px Consolas, "Courier New", monospace;
    cursor: pointer;
}

.file-tabs button[aria-selected="true"] {
    background: var(--he-code-bg);
    border-bottom-color: var(--he-code-bg);
    color: var(--he-blue);
}

.demo-notes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px 40px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--he-border-light);
}

.content .demo-notes h2 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--he-muted);
}

.demo-notes ul {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
}

.demo-notes li {
    line-height: 1.6;
}

.demo-notes .chip-list {
    margin: 0;
}

/* ── Dark mode for the new parts ────────────────────────────────────────── */

body.dark-mode .page-tabs a,
body.dark-mode .chip,
body.dark-mode .theme-pills,
body.dark-mode .framework-card,
body.dark-mode .start-card,
body.dark-mode .overview-shot > a {
    background: var(--he-surface);
    border-color: var(--he-border);
}

/* the tab of the page being read keeps its colour: the rule above is the stronger one */
body.dark-mode .page-tabs a[aria-current="page"] {
    background: var(--he-blue);
    border-color: var(--he-blue);
}

body.dark-mode .file-tabs button[aria-selected="true"] {
    background: var(--he-code-bg);
}

body.dark-mode .api-table .type {
    color: #9dcbf5;
}

@media (max-width: 960px) {
    .overview-grid {
        grid-template-columns: 1fr;
    }

    .content .component-head h1 {
        font-size: 30px;
    }

    .demo-tools {
        align-items: flex-start;
    }

    .faq {
        grid-template-columns: 1fr;
    }
}

/* the cards: the tag under the name, three lines of summary, four to a row beside the sidebar */
.card-head {
    display: block;
}

.card-tag {
    display: block;
    margin-top: 3px;
}

.with-sidebar .cards {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.with-sidebar .card-thumb,
.cards.featured .card-thumb {
    height: 130px;
}

.with-sidebar .card-summary,
.cards.featured .card-summary {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* a summary that carries its links (the landing page's "before you buy": security, verified
   hardware, performance) is read whole - clamped, the links at its end were cut off */
.with-sidebar .card-summary:has(a),
.cards.featured .card-summary:has(a) {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.card-links {
    margin-top: auto;
    padding-top: 10px;
}

.card-summary + .card-links {
    margin-top: auto;
    padding-top: 12px;
}

.card-summary {
    margin-bottom: 12px;
}

/* the cards beside a sidebar keep the card typography, not the article's */
.with-sidebar .content {
    padding-left: var(--he-content-pad);
    padding-right: var(--he-content-pad);
}

.content .card-name {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
}

.content .card-summary {
    margin: 8px 0 0;
    font-size: 14px;
}

.content .card-links a,
.content .card-name a {
    text-decoration: none;
}

.content .card-links a:hover {
    text-decoration: underline;
}

.content h3.group-title {
    margin: 32px 0 12px;
    font-size: 14px;
    line-height: 1.5;
}

.content .cards + h3.group-title {
    margin-top: 40px;
}

@media (max-width: 960px) {
    .with-sidebar .content {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ── The API reference ──────────────────────────────────────────────────── */

.on-this-page {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
}

.on-this-page a {
    color: var(--he-navy);
}

.on-this-page a::before {
    content: "#";
    margin-right: 2px;
    color: var(--he-muted);
    font-weight: 400;
}

.content .api-table tr[id] td:first-child code {
    scroll-margin-top: 90px;
}

.content .api-table tr[id]:target td {
    background: var(--he-accent-tint);
}

.type-members {
    font-size: 14px;
    line-height: 2;
}

.type-members code {
    margin-right: 6px;
}

.content h3[id^="type-"] {
    margin: 20px 0 4px;
    font-size: 16px;
}

body.dark-mode .content .api-table tr[id]:target td {
    background: var(--he-accent-tint);
}

/* ── The header's search box ────────────────────────────────────────────── */

.site-search {
    position: relative;
    margin: 16px 0 0;
}

.site-search input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 32px;
    border: 1px solid var(--he-band-line);
    border-radius: 999px;
    background: var(--he-band-field) var(--he-search-icon) no-repeat 11px center / 14px;
    color: var(--he-band-text);
    font: 400 13px var(--he-font);
    transition: width 0.15s, background-color 0.15s;
}

.site-search input::placeholder {
    color: var(--he-band-soft);
}

.site-search input:focus {
    outline: 0;
    /* a ring, not only a border colour: the focus has to be seen from across a control room */
    box-shadow: 0 0 0 2px var(--he-band-accent);
    border-color: var(--he-band-accent);
    background-color: var(--he-band-field-focus);
}

/* fixed, and placed by site.js under the box: the sidebar scrolls, and would clip it */
.site-search-results {
    position: fixed;
    top: 0;
    left: 0;
    width: 440px;
    max-width: calc(100vw - 32px);
    max-height: 70vh;
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--he-border);
    border-radius: 8px;
    background: var(--he-surface);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    z-index: 30;
}

.site-search-results a {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 0 10px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--he-text);
    text-decoration: none;
}

.site-search-results a:hover,
.site-search-results a[aria-selected="true"] {
    background: var(--he-accent-tint);
}

.site-search-kind {
    grid-row: 1 / 3;
    align-self: start;
    margin-top: 3px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--he-accent-tint);
    color: var(--he-navy);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
}

.site-search-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--he-navy);
}

.site-search-summary {
    font-size: 12px;
    font-weight: 300;
    color: var(--he-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-search-empty {
    margin: 0;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--he-muted);
}

/* ── Breadcrumbs ────────────────────────────────────────────────────────── */

.breadcrumbs {
    padding: 10px 6% 0;
    font-size: 12px;
}

.content-crumbs {
    margin: -16px 0 20px;
    font-size: 12px;
}

.breadcrumbs ol,
.content-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumbs li + li::before,
.content-crumbs li + li::before {
    content: "›";
    margin: 0 8px;
    color: var(--he-muted);
}

.breadcrumbs a,
.content .content-crumbs a {
    color: var(--he-blue);
    text-decoration: none;
}

.breadcrumbs a:hover,
.content .content-crumbs a:hover {
    text-decoration: underline;
}

.content .content-crumbs li {
    font-weight: 400;
    line-height: 1.6;
}

.content #guideContent .on-this-page {
    margin: -8px 0 24px;
}

.breadcrumbs span,
.content-crumbs span {
    color: var(--he-muted);
}

/* ── Code colouring ─────────────────────────────────────────────────────── */

.hl-c { color: #5f6b78; font-style: italic; }
.hl-s { color: #032f62; }
.hl-n { color: #005cc5; }
.hl-k { color: #b31d28; }
.hl-t { color: #116329; }
.hl-a { color: #6f42c1; }

body.dark-mode .hl-c { color: #8b949e; }
body.dark-mode .hl-s { color: #a5d6ff; }
body.dark-mode .hl-n { color: #79c0ff; }
body.dark-mode .hl-k { color: #ff7b72; }
body.dark-mode .hl-t { color: #7ee787; }
body.dark-mode .hl-a { color: #d2a8ff; }


/* ── Scada Studio on the site ─────────────────────────────────────────────
   The landing page opens with the hero band below the breadcrumb, the home page shows
   the block diagram in a section of its own. */
.home section.hero.studio-hero {
    margin-top: 0;
    padding-top: 56px;
}

.studio-hero .section-title-top {
    color: var(--he-band-soft);
}

.studio-landing .breadcrumbs {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px var(--he-gutter) 8px;
}

.studio-landing #parts {
    padding-top: 176px;
}

@media (max-width: 960px) {
    .studio-landing #parts {
        padding-top: 100px;
    }
}

.studio-shot {
    max-width: 1152px;
    margin: 8px auto 24px;
    padding: 0;
}

.studio-shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--he-border);
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(19, 28, 37, 0.22);
}

.btn-group.centered {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 8px 0 24px;
}

.button.outline.dark {
    border-color: var(--he-blue);
    color: var(--he-blue);
    background: transparent;
}

.dark-mode .button.outline.dark {
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
}

/* ── Demo pages on a phone ──────────────────────────────────────────────────
   The theme pills and the frame's actions wrap under the source tabs: kept on one line, the
   bar made every demo page 465 to 589 px wide on a 390 px screen. */
@media (max-width: 640px) {
    .demo-bar .demo-tools {
        flex: 1 1 100%;
        min-width: 0;
        justify-content: flex-start;
    }

    .theme-pills {
        flex-wrap: wrap;
        max-width: 100%;
    }

    .demo-actions {
        flex-wrap: wrap;
    }

    /* a screen laid out to its window gets most of the phone's height, so the HMI shell's
       header, navigation and footer leave room for the screen between them */
    .demo-frame.screen {
        height: max(640px, calc(100vh - 80px));
    }
}

/* "as it is written with the package", after the file name over a source tab */
.source-note-inline {
    margin-left: 8px;
    font-weight: 400;
    color: var(--he-muted);
    text-transform: none;
    letter-spacing: 0;
}