/*
  Portal styling.

  elixtechs.css (loaded before this) themes Bootstrap with the ElixTechs
  identity and declares the faces and the role tokens (--elx-*). Bootstrap's
  RTL build does the layout. This adds what a stock theme cannot know:

    - Arabic needs more leading than Latin at the same size.
    - Version numbers, checksums, file names and addresses stay left-to-right
      inside an Arabic page.
    - The marketing components: the navy header and footer bands, hero,
      feature and price cards, the download panel and the quiet notes.

  Shape language: square corners, 1px hairlines, a 3px rule on top of the
  cards that matter, mono uppercase labels. Colours come only from tokens, so
  the dark scheme needs almost nothing here.

  The Content-Security-Policy is style-src 'self', so there are no inline
  styles anywhere; anything a page needs lives here.
*/

/* ---------------------------------------------------------------------------
   Type
   --------------------------------------------------------------------------- */

[dir="rtl"] body {
    line-height: 1.85;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
    line-height: 1.5;
}

/* Anything that must stay left-to-right inside an Arabic page: version
   numbers, checksums, file names, email addresses, phone numbers. */
.ltr {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

.mono {
    font-family: var(--elx-font-mono);
    direction: ltr;
    unicode-bidi: isolate;
}

/* ---------------------------------------------------------------------------
   Accessibility
   --------------------------------------------------------------------------- */

.skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    top: 0.5rem;
    z-index: 1080;
    background: var(--elx-action);
    color: var(--elx-action-ink);
    padding: 0.55rem 1.1rem;
    font-weight: 600;
}

.skip-link:focus { color: var(--elx-action-ink); }

/* The enquiry form's honeypot. Off-screen rather than display:none, because a
   hidden input is not submitted and this one must be submitted empty. It used
   to be an inline style, which the CSP silently blocked — leaving the field on
   screen for every visitor. */
.honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Header — the navy band, as on elixtechs.com
   --------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    color: var(--elx-band-body);
}

.site-header .navbar {
    background: rgba(3, 4, 94, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--elx-band-line);
}

/* A header label never breaks inside itself: "الأسئلة الشائعة" or "اطلب عرض
   سعر" on two lines doubles the bar's height. */
.site-header .nav-link,
.site-header .btn {
    white-space: nowrap;
}

[dir="rtl"] .site-header .nav-link { font-size: 0.95rem; }

/* From the lg breakpoint, where the links come out of the menu, up to xl, the
   container is 960px and the Arabic labels are wider than the English ones.
   Tighter link padding in that range leaves room in both languages.
   !important only because elixtechs.css sets this padding with it. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .site-header .navbar .nav-link {
        padding-inline: 0.55rem !important;
    }
}

/* The language switch on the band: a ghost button. */
.site-header .btn-outline-secondary {
    --bs-btn-color: var(--elx-band-body);
    --bs-btn-border-color: rgba(144, 224, 239, 0.45);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--elx-sky);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--elx-band-raised);
    --bs-btn-active-border-color: var(--elx-sky);
}

.site-header .navbar-collapse.show,
.site-header .navbar-collapse.collapsing {
    padding-bottom: 0.75rem;
}

/* ---------------------------------------------------------------------------
   Footer — the navy band
   --------------------------------------------------------------------------- */

.site-footer {
    margin-top: 3rem;
    padding: 2.75rem 0 1.75rem;
    background: var(--elx-band);
    color: var(--elx-band-body);
    border-top: 1px solid var(--elx-band-line);
}

.site-footer .elx-brand,
.site-footer .elx-brand:hover { color: #ffffff; }

.site-footer .text-secondary { color: var(--elx-band-body) !important; }

.site-footer .border-top { border-color: var(--elx-band-line) !important; }

.site-footer .footer-heading {
    font-family: var(--elx-font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--elx-band-label);
    margin-bottom: 0.7rem;
}

[dir="rtl"] .site-footer .footer-heading {
    font-family: var(--elx-font-sans);
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.9rem;
}

.site-footer ul li { margin-bottom: 0.2rem; }
.site-footer a { color: var(--elx-band-body); text-decoration: none; }
.site-footer a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer :focus-visible { outline-color: var(--elx-sky); }

.footer-meta {
    font-family: var(--elx-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

[dir="rtl"] .footer-meta { font-family: var(--elx-font-sans); letter-spacing: 0; font-size: 0.82rem; }

/* "A product of ELIXTECHS", with the company mark. */
.by-elixtechs {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.by-elixtechs .elx-mark { width: 1.15rem; height: 1.15rem; }
.by-elixtechs .elx-wordmark { color: #ffffff; font-size: 0.8rem; }

/* ---------------------------------------------------------------------------
   Hero — a white band with the mark's split square behind it
   --------------------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 4.5rem 0 4rem;
    background: var(--elx-surface);
    border-bottom: 1px solid var(--elx-line);
}

.hero::before,
.hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    width: clamp(14rem, 30vw, 26rem);
    aspect-ratio: 1;
    top: 50%;
    inset-inline-end: -7rem;
    transform: translateY(-50%) rotate(45deg);
}

/* Two halves of the rotated square, as in the ElixTechs mark. */
.hero::before {
    background: var(--elx-ice);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    opacity: 0.55;
}

.hero::after {
    background: var(--elx-sky);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    opacity: 0.35;
}

[data-bs-theme="dark"] .hero::before,
[data-bs-theme="dark"] .hero::after { opacity: 0.08; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .hero::before,
    :root:not([data-theme]) .hero::after { opacity: 0.08; }
}

.hero h1 {
    font-size: clamp(2.1rem, 1.4rem + 3vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    max-width: 18ch;
}

[dir="rtl"] .hero h1 {
    letter-spacing: normal;
    line-height: 1.45;
    max-width: 22ch;
}

.hero .lead {
    font-size: 1.15rem;
    max-width: 42rem;
}

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */

.feature-card {
    padding: 1.5rem;
    background: var(--elx-surface);
    border: 1px solid var(--elx-line);
    border-top: 3px solid var(--elx-rule-strong);
    transition: border-color 0.15s;
}

.feature-card:hover { border-top-color: var(--elx-cyan); }

/* Equal heights across a row of cards: a card that is the only thing in its
   grid column fills the column, which the row stretches to the tallest one.
   Only the only child — a column holding several cards stacks them, and
   height: 100% on each would make every one as tall as the whole column, so
   they would overflow it and run under whatever follows (the Pricing page's
   cards used to spill over the footer). The download aside is left out: its
   card keeps its own height even when the release notes are absent. */
.row > :not(.download-aside) > .feature-card:only-child,
.row > * > .price-card:only-child {
    height: 100%;
}

/* On a white band a white card needs the page ground to stand apart. */
.bg-body-tertiary .feature-card {
    background: var(--elx-bg);
}

.bg-body-tertiary {
    border-block: 1px solid var(--elx-line);
}

.feature-card h2,
.feature-card .h5 {
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

.feature-card .feature-group {
    font-family: var(--elx-font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--elx-label);
}

[dir="rtl"] .feature-card .feature-group {
    font-family: var(--elx-font-sans);
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.85rem;
}

.tool-pill {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    margin: 0 0 0.45rem;
    margin-inline-end: 0.45rem;
    font-size: 0.85rem;
    background: var(--elx-subtle);
    border: 1px solid var(--elx-line);
    color: var(--elx-ink);
}

.price-card {
    padding: 1.9rem;
    background: var(--elx-surface);
    border: 1px solid var(--elx-line);
    border-top: 3px solid var(--elx-rule-strong);
}

.price-card h2,
.price-card .h5 {
    font-weight: 600;
    font-size: 1.4rem;
}

/* The featured plan is a navy band in both schemes — marked by the band and
   its cyan rule, not by hue alone. */
.price-card.featured {
    background: var(--elx-band);
    color: var(--elx-band-body);
    border-color: var(--elx-band);
    border-top-color: var(--elx-cyan);
    box-shadow: var(--elx-shadow-lg);
}

.price-card.featured h2,
.price-card.featured .h5 { color: #ffffff; }

.price-card.featured .text-secondary { color: var(--elx-band-body) !important; }

.price-card.featured a { color: var(--elx-sky); }

.price-card.featured .badge.text-bg-primary {
    background-color: var(--elx-action) !important;
    color: var(--elx-action-ink) !important;
    box-shadow: none;
}

.price-card ul { padding-inline-start: 1.1rem; }
.price-card li::marker { color: var(--elx-label); }
.price-card.featured li::marker { color: var(--elx-cyan); }

/* The download panel: version, checksum and file details. */
.download-panel {
    padding: 1.6rem;
    background: var(--elx-bg);
    border: 1px solid var(--elx-line);
    border-top: 3px solid var(--elx-cyan);
}

.download-panel .h3,
.download-panel .h4 {
    font-family: var(--elx-font-mono);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.checksum {
    font-family: var(--elx-font-mono);
    font-size: 0.8rem;
    word-break: break-all;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

.download-panel .checksum {
    padding: 0.6rem 0.8rem;
    background: var(--elx-subtle);
    border: 1px solid var(--elx-line);
}

/* A quiet callout for the "runs offline" and privacy notes. */
.note {
    padding: 1rem 1.25rem;
    background: var(--elx-wash);
    color: var(--elx-wash-ink);
    border: 1px solid var(--elx-line);
    border-inline-start: 3px solid var(--elx-cyan);
}

.note a { color: var(--elx-wash-ink); font-weight: 600; }

.note .mono {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.25rem 0.6rem;
    background: var(--elx-surface);
    border: 1px solid var(--elx-line);
}

/* ---------------------------------------------------------------------------
   User guide
   --------------------------------------------------------------------------- */

.guide-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 3.5rem 0 2.5rem;
    background: var(--elx-surface);
    border-bottom: 1px solid var(--elx-line);
    margin-bottom: 2rem;
}

.guide-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: clamp(10rem, 22vw, 18rem);
    aspect-ratio: 1;
    inset-inline-end: -4rem;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    background: linear-gradient(135deg, var(--elx-ice) 50%, var(--elx-sky) 50%);
    opacity: 0.4;
}

[data-bs-theme="dark"] .guide-hero::before { opacity: 0.07; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .guide-hero::before { opacity: 0.07; }
}

.guide-hero h1 {
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    line-height: 1.1;
    max-width: 20ch;
}

[dir="rtl"] .guide-hero h1 { line-height: 1.45; max-width: 24ch; }

.guide-hero .lead { max-width: 46rem; }

.guide-kicker {
    margin-bottom: 0.8rem;
    font-family: var(--elx-font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--elx-label);
}

[dir="rtl"] .guide-kicker { font-family: var(--elx-font-sans); letter-spacing: 0; text-transform: none; font-size: 0.95rem; }

.guide { padding-bottom: 2rem; }

.guide-toc {
    position: sticky;
    top: 6rem;
    padding: 1.25rem 1.1rem;
    background: var(--elx-surface);
    border: 1px solid var(--elx-line);
}

.guide-toc ol { margin: 0; padding-inline-start: 1.4rem; }
.guide-toc li { margin: 0.3rem 0; }
.guide-toc li::marker { color: var(--elx-label); font-family: var(--elx-font-mono); font-size: 0.85em; }
.guide-toc a { color: var(--elx-ink); text-decoration: none; }
.guide-toc a:hover { color: var(--elx-link); text-decoration: underline; }

.guide-step {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 1.75rem 1.75rem 1.5rem;
    padding-inline-start: 5rem;
    background: var(--elx-surface);
    border: 1px solid var(--elx-line);
    scroll-margin-top: 6rem;
}

.guide-step h2 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.guide-step li { margin-bottom: 0.4rem; }
.guide-step li::marker { color: var(--elx-label); }

.guide-num {
    position: absolute;
    inset-inline-start: 1.5rem;
    top: 1.75rem;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    background: var(--elx-band);
    color: #ffffff;
    font-family: var(--elx-font-mono);
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: inset 0 -3px 0 var(--elx-cyan);
}

.guide-code {
    margin: 0.5rem 0 0.25rem;
    padding: 0.75rem 1rem;
    background: var(--elx-band);
    color: var(--elx-ice);
    border: 1px solid var(--elx-band-line);
    font-size: 0.85rem;
    overflow-x: auto;
    text-align: left;
}

kbd {
    padding: 0.1rem 0.45rem;
    border-radius: var(--elx-radius);
    border: 1px solid var(--elx-line-strong);
    border-bottom-width: 2px;
    background: var(--elx-surface);
    color: var(--elx-ink);
    font-family: var(--elx-font-mono);
    font-size: 0.8em;
}

/* Screenshots of the desktop app sit untreated on a hairline frame. */
.guide-shot {
    margin: 1.25rem 0 0.25rem;
}

.guide-shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--elx-line);
    background: var(--elx-surface);
}

.guide-shot figcaption {
    margin-top: 0.55rem;
    font-size: 0.85rem;
    color: var(--elx-muted);
}

.guide-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1.6rem 1.75rem;
    background: var(--elx-band);
    color: var(--elx-band-body);
    border-top: 3px solid var(--elx-cyan);
}

.guide-cta h2 { color: #ffffff; }
.guide-cta .text-secondary { color: var(--elx-band-body) !important; }
.guide-cta a:not(.btn) { color: var(--elx-sky); }
.guide-cta :focus-visible { outline-color: var(--elx-sky); }

/* The second action on the band: a ghost button. */
.guide-cta .btn-outline-secondary {
    --bs-btn-color: var(--elx-band-body);
    --bs-btn-border-color: rgba(144, 224, 239, 0.45);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--elx-sky);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--elx-band-raised);
    --bs-btn-active-border-color: var(--elx-sky);
}

@media (max-width: 575.98px) {
    .guide-step { padding: 1.4rem 1.2rem; padding-top: 4.2rem; }
    .guide-num { top: 1.1rem; inset-inline-start: 1.2rem; }
}

/* ---------------------------------------------------------------------------
   Documentation
   --------------------------------------------------------------------------- */

.docs-hero { padding-bottom: 2rem; }
.docs-hero h1 { max-width: 28ch; }

.docs-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    color: var(--elx-muted);
}

.docs-breadcrumb li + li::before {
    content: "/";
    margin-inline-end: 0.35rem;
    color: var(--elx-line-strong);
}

.docs-breadcrumb a { color: var(--elx-link); text-decoration: none; font-weight: 500; }
.docs-breadcrumb a:hover { text-decoration: underline; }

.docs-audience {
    display: inline-block;
    margin: 0.25rem 0 0;
    padding: 0.25rem 0.75rem;
    background: var(--elx-bg);
    border: 1px solid var(--elx-line);
    font-size: 0.85rem;
    color: var(--elx-muted);
}

.docs-side {
    display: grid;
    gap: 1rem;
}

@media (min-width: 992px) {
    .docs-side { position: sticky; top: 6rem; max-height: calc(100vh - 7rem); overflow-y: auto; }
}

@media (max-width: 575.98px) {
    .docs-body > section { padding: 1.3rem 1.1rem; }
    .docs-pager { grid-template-columns: 1fr; }
    .doc-table th, .doc-table td { padding: 0.55rem 0.65rem; }
}

.docs-nav,
.docs-toc {
    padding: 1rem 0.85rem;
    background: var(--elx-surface);
    border: 1px solid var(--elx-line);
    font-size: 0.92rem;
}

.docs-nav ul,
.docs-toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs-nav a,
.docs-toc a {
    display: block;
    padding: 0.3rem 0.65rem;
    border-inline-start: 2px solid transparent;
    color: var(--elx-ink);
    text-decoration: none;
}

.docs-nav a:hover,
.docs-toc a:hover { background: var(--elx-bg); color: var(--elx-link); }

.docs-nav a.active {
    background: var(--elx-wash);
    border-inline-start-color: var(--elx-cyan);
    color: var(--elx-wash-ink);
    font-weight: 600;
}

.docs-nav-heading {
    margin: 0 0.65rem 0.4rem;
    font-family: var(--elx-font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--elx-label);
}

[dir="rtl"] .docs-nav-heading { font-family: var(--elx-font-sans); letter-spacing: 0; text-transform: none; font-size: 0.85rem; }

.docs-toc a { font-size: 0.86rem; padding-block: 0.2rem; }

.docs-body > section {
    margin-bottom: 1.5rem;
    padding: 1.75rem;
    background: var(--elx-surface);
    border: 1px solid var(--elx-line);
    scroll-margin-top: 6rem;
}

.docs-body > section > h2 {
    font-size: 1.4rem;
    margin-bottom: 0.85rem;
}

.docs-body h3 {
    margin: 1.4rem 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.docs-body li { margin-bottom: 0.35rem; }
.docs-body li::marker { color: var(--elx-label); }
.docs-body p:last-child,
.docs-body ul:last-child,
.docs-body ol:last-child { margin-bottom: 0; }

.docs-body code {
    padding: 0.05rem 0.35rem;
    background: var(--elx-subtle);
    border: 1px solid var(--elx-line);
    color: var(--elx-ink);
    font-size: 0.86em;
    direction: ltr;
    unicode-bidi: isolate;
    overflow-wrap: anywhere;
}

.docs-body .guide-code code { padding: 0; background: none; border: 0; color: inherit; font-size: inherit; }

/* Reference tables: requirements, switches, error messages. */
.doc-table {
    width: 100%;
    margin: 0.75rem 0 0.25rem;
    border-collapse: collapse;
    background: var(--elx-surface);
    border: 1px solid var(--elx-line);
    font-size: 0.92rem;
}

.doc-table th,
.doc-table td {
    padding: 0.65rem 0.9rem;
    vertical-align: top;
    text-align: start;
    border-bottom: 1px solid var(--elx-line);
}

.doc-table thead th {
    background: var(--elx-subtle);
    font-family: var(--elx-font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--elx-muted);
}

[dir="rtl"] .doc-table thead th { font-family: var(--elx-font-sans); letter-spacing: 0; text-transform: none; font-size: 0.88rem; }

.doc-table tbody tr:last-child td,
.doc-table tbody tr:last-child th { border-bottom: 0; }

.doc-table tbody th { font-weight: 600; width: 32%; }

.table-scroll { overflow-x: auto; }

/* Callouts. .note is information; these add info, tip and warning. */
.callout {
    margin: 1rem 0;
    padding: 0.9rem 1.15rem;
    border: 1px solid var(--elx-line);
    border-inline-start: 3px solid;
    font-size: 0.95rem;
}

.callout > strong:first-child { display: block; margin-bottom: 0.15rem; }
.callout p:last-child { margin-bottom: 0; }

.callout-info { background: var(--elx-wash); border-inline-start-color: var(--elx-label); color: var(--elx-wash-ink); }
.callout-tip { background: var(--elx-bg); border-inline-start-color: var(--elx-cyan); color: var(--elx-ink); }
.callout-warn { background: var(--elx-warn-wash); border-inline-start-color: var(--elx-warn); color: var(--elx-warn-ink); }
.callout a { color: inherit; font-weight: 600; }

.docs-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2rem;
}

.docs-pager-link {
    display: grid;
    padding: 1rem 1.25rem;
    border: 1px solid var(--elx-line);
    background: var(--elx-surface);
    color: var(--elx-ink);
    text-decoration: none;
}

.docs-pager-link:hover { border-color: var(--elx-ink); color: var(--elx-ink); }
.docs-pager-next { text-align: end; }
.docs-pager-dir {
    font-family: var(--elx-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--elx-label);
}
[dir="rtl"] .docs-pager-dir { font-family: var(--elx-font-sans); letter-spacing: 0; text-transform: none; font-size: 0.8rem; }
.docs-pager-title { font-weight: 600; }

/* The documentation hub. (Not a 1px-gap hairline grid: auto-fill leaves the
   last row's empty cells showing the line colour.) */
.doc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
}

.doc-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.9rem;
    align-content: start;
    height: 100%;
    padding: 1.35rem;
    background: var(--elx-surface);
    border: 1px solid var(--elx-line);
    color: var(--elx-ink);
    text-decoration: none;
    box-shadow: inset 0 3px 0 transparent;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.doc-card:hover,
.doc-card:focus-visible {
    box-shadow: inset 0 3px 0 var(--elx-cyan);
    color: var(--elx-ink);
    text-decoration: none;
}

.doc-card .doc-icon {
    grid-row: span 2;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.55rem;
    background: var(--elx-wash);
    color: var(--elx-wash-ink);
}

.doc-card-title { font-weight: 600; font-size: 1.02rem; }
.doc-card-text { font-size: 0.9rem; color: var(--elx-muted); }

.doc-audiences {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.doc-audience {
    padding: 1.4rem;
    background: var(--elx-surface);
    border: 1px solid var(--elx-line);
    border-top: 3px solid var(--elx-rule-strong);
}

.doc-audience h2 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.doc-audience ul { margin: 0; padding-inline-start: 1.1rem; font-size: 0.92rem; }
.doc-audience li { margin-bottom: 0.3rem; }
.doc-audience li::marker { color: var(--elx-label); }

/* ---------------------------------------------------------------------------
   FAQ and support
   --------------------------------------------------------------------------- */

.faq-search {
    position: relative;
    max-width: 34rem;
}

.faq-search input {
    padding-block: 0.8rem;
    padding-inline: 1rem;
}

.faq-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.faq-cats a {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: var(--elx-bg);
    border: 1px solid var(--elx-line);
    color: var(--elx-ink);
    font-size: 0.88rem;
    text-decoration: none;
}

.faq-cats a:hover { border-color: var(--elx-cyan); color: var(--elx-ink); }

.faq-group {
    margin-bottom: 2.25rem;
    scroll-margin-top: 6rem;
}

.faq-group > h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.35rem;
    margin-bottom: 0.9rem;
}

.faq-group .faq-icon {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0.45rem;
    background: var(--elx-wash);
    color: var(--elx-wash-ink);
    flex: none;
}

.faq-group .accordion-button { font-weight: 600; }

.support-quick {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--elx-line);
    border: 1px solid var(--elx-line);
}

.support-quick a {
    display: block;
    padding: 0.8rem 1.1rem;
    background: var(--elx-surface);
    color: var(--elx-ink);
    font-weight: 500;
    text-decoration: none;
}

.support-quick a:hover { background: var(--elx-subtle); color: var(--elx-ink); box-shadow: inset 3px 0 0 var(--elx-cyan); }
[dir="rtl"] .support-quick a:hover { box-shadow: inset -3px 0 0 var(--elx-cyan); }

.support-contact .support-icon {
    width: 1.3rem;
    height: 1.3rem;
    margin-inline-end: 0.35rem;
    vertical-align: -0.2rem;
    color: var(--elx-label);
}
.faq-group .accordion-item { scroll-margin-top: 6rem; }
.faq-group .accordion-body { line-height: 1.7; }
.faq-group .accordion-body ul { margin-bottom: 0.5rem; }
.faq-group .accordion-body p:last-child { margin-bottom: 0; }

.faq-empty { display: none; }
.faq-empty.is-visible { display: block; }

/* Copy buttons on command examples (added by site.js). */
.code-wrap { position: relative; }

.copy-button {
    position: absolute;
    top: 0.45rem;
    right: 0.5rem;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--elx-band-line);
    background: var(--elx-band-raised);
    color: var(--elx-ice);
    font-size: 0.72rem;
    font-family: var(--elx-font-mono);
}

.copy-button:hover,
.copy-button:focus-visible { background: var(--elx-action); border-color: var(--elx-action); color: var(--elx-action-ink); }

.code-wrap .guide-code { padding-right: 5.5rem; padding-left: 1rem; }

/* ---------------------------------------------------------------------------
   Downloads and release notes
   --------------------------------------------------------------------------- */

.release-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.arch-card {
    padding: 1.5rem;
    background: var(--elx-surface);
    border: 1px solid var(--elx-line);
    border-top: 3px solid var(--elx-rule-strong);
}

.arch-card-detected {
    border-color: var(--elx-label);
    border-top-color: var(--elx-cyan);
    box-shadow: var(--elx-shadow-md);
}

.arch-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

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

.asset {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.9rem 1.1rem;
    background: var(--elx-bg);
    border: 1px solid var(--elx-line);
}

.asset-primary {
    background: var(--elx-surface);
    border-inline-start: 3px solid var(--elx-cyan);
}

.asset-main { flex: 1 1 18rem; min-width: 0; }
.asset-title { font-weight: 600; }

.asset-details summary {
    cursor: pointer;
    color: var(--elx-link);
    margin-top: 0.3rem;
}

.asset-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.asset-size {
    font-family: var(--elx-font-mono);
    font-size: 0.75rem;
    opacity: 0.9;
}

.asset-chip {
    display: inline-block;
    margin: 0.15rem 0;
    margin-inline-end: 0.35rem;
    padding: 0.1rem 0.55rem;
    background: var(--elx-surface);
    border: 1px solid var(--elx-line);
    color: var(--elx-ink);
    text-decoration: none;
    white-space: nowrap;
}

.asset-chip:hover { border-color: var(--elx-cyan); color: var(--elx-ink); }

.release-notes ul { padding-inline-start: 1.15rem; margin-bottom: 0.75rem; }
.release-notes li { margin-bottom: 0.3rem; }
.release-notes li::marker { color: var(--elx-label); }
.release-notes p:last-child { margin-bottom: 0; }

.notes-heading {
    margin: 1rem 0 0.4rem;
    font-family: var(--elx-font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--elx-label);
}

[dir="rtl"] .notes-heading { font-family: var(--elx-font-sans); letter-spacing: 0; text-transform: none; font-size: 0.95rem; }

.release-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1.25rem;
}

.release-entry {
    padding: 1.6rem 1.75rem;
    background: var(--elx-surface);
    border: 1px solid var(--elx-line);
    border-top: 3px solid var(--elx-rule-strong);
    scroll-margin-top: 6rem;
}

.release-entry:target {
    border-color: var(--elx-label);
    border-top-color: var(--elx-cyan);
    box-shadow: var(--elx-shadow-md);
}

.release-entry-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.release-anchor { color: inherit; text-decoration: none; }
.release-anchor:hover { color: var(--elx-link); }

.release-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--elx-line);
}

/* Home page: a product screenshot beside the hero copy, when one exists. */
.hero-shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--elx-line);
    box-shadow: var(--elx-shadow-lg);
}