/* Guides, Help Center and Glossary - every page under /guides, /help and /glossary. Scoped to .kh.
   Hero band, one card system, a device row, curated platform pages, a search dropdown and a
   reading grid with a sticky contents rail. Icons are Phosphor (duotone on cards, regular inline).
   Logical properties throughout, so the file mirrors itself under dir="rtl";
   knowledge_hub.rtl.css holds only what they cannot express. */

/* ===== Tokens =========================================================================
   The site's own palette where it has one: page = --bg-color, accent = --brand-color. Its card
   tone (--light-darkblue #222b46) is barely lighter than the page, so the surfaces are set here. */

.kh {
    --kh-bg: var(--bg-color, #0b0d10);
    --kh-surface: #14171c;
    --kh-surface-2: #1a1d22;
    --kh-border: rgba(255, 255, 255, .08);
    --kh-border-hi: rgba(149, 171, 82, .45);
    --kh-accent: var(--brand-color, #A4C63F);
    --kh-accent-dim: rgba(149, 171, 82, .12);
    --kh-accent-glow: rgba(149, 171, 82, .22);
    --kh-on-accent: var(--dark-blue-color, #0e121e);
    --kh-text: #EDEFF5;
    --kh-body: rgba(237, 239, 245, .86);
    --kh-muted: rgba(237, 239, 245, .62);
    --kh-faint: rgba(237, 239, 245, .3);
    --kh-radius: 16px;
    --kh-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    --kh-sticky: 96px;

    background-color: transparent;
    color: var(--kh-text);
}

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

.kh [hidden] { display: none !important; }

/* The theme's custom.css capitalises every heading, label and .btn with !important. That title-
   cases questions, so the H1 stops matching <title> and the schema headline. Not here. */
.kh h1, .kh h2, .kh h3, .kh h4, .kh h5, .kh h6,
.kh label, .kh dt, .kh .btn { text-transform: none !important; }

/* The theme stretches .container to 100% from 576px and drops its padding below 992px: here the
   content keeps a readable width and a gutter on phones. */
.kh .container {
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: 16px;
}

@media (min-width: 992px) {
    .kh .container { padding-inline: 24px; }
}

/* One focus ring for everything interactive. */
.kh a:focus-visible,
.kh button:focus-visible,
.kh summary:focus-visible {
    outline: 2px solid var(--kh-accent);
    outline-offset: 2px;
}

/* Phosphor glyphs: inline-block, so the RTL flip (.kh-dir-icon) and the chevron rotations -
   both transforms - apply; a transform does nothing on an inline element. */
.kh .ph,
.kh .ph-duotone {
    display: inline-block;
    line-height: 1;
}

/* A duotone icon is two glyphs: the second is pulled back over the first with a physical
   margin-left: -1em (vendor CSS). Under dir="rtl" they would sit side by side, so the icon
   itself always lays out left to right. */
.kh .ph-duotone {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ===== Breadcrumb ===================================================================== */

.kh-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--kh-muted);
}

.kh-crumbs li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

/* Separator: Phosphor caret-right (caret-left in knowledge_hub.rtl.css). */
.kh-crumbs li + li::before {
    content: "\e13a";
    margin-inline: 8px;
    font-family: "Phosphor";
    font-size: .6875rem;
    line-height: 1;
    color: var(--kh-faint);
}

.kh-crumbs a {
    color: var(--kh-muted);
    text-decoration: none;
}

.kh-crumbs a:hover { color: var(--kh-text); }

.kh-crumbs [aria-current] {
    max-width: min(60vw, 480px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--kh-text);
}

/* ===== Hero band (hubs, topic, section and platform pages) ============================ */

.kh-hero {
    display: flex;
    align-items: center;
    min-height: 280px;
    padding-block: 24px 40px;
    border-block-end: 1px solid var(--kh-border);
    background:
        radial-gradient(ellipse 60% 90% at 20% 0%, var(--kh-accent-dim), transparent 70%),
        linear-gradient(160deg, var(--kh-bg) 0%, #14171c 60%, var(--kh-bg) 100%);
    text-align: center;
}

.kh-hero__inner { width: 100%; }

/* Centred to match the centred hero. */
.kh-hero .kh-crumbs ol {
    justify-content: center;
    margin-block-end: 24px;
}

.kh-hero__platform {
    display: block;
    width: 200px;
    height: 200px;
    margin: 0 auto 16px;
    object-fit: contain;
}

.kh .kh-hero__title {
    max-width: 900px;
    margin: 0 auto 12px;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--kh-text);
}

.kh-hero__lead {
    max-width: 620px;
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--kh-muted);
}

/* ===== Search box and results dropdown ================================================ */

.kh-search {
    position: relative;
    z-index: 20;
    max-width: 640px;
    margin: 28px auto 0;
}

.kh-search__icon {
    position: absolute;
    inset-inline-start: 20px;
    top: 28px;
    transform: translateY(-50%);
    font-size: 1.25rem;
    color: var(--kh-muted);
    pointer-events: none;
}

.kh .kh-search__input {
    display: block;
    width: 100%;
    height: 56px;
    margin: 0;
    padding-block: 0;
    padding-inline: 52px 24px;
    border: 1px solid var(--kh-border);
    border-radius: 999px;
    background-color: var(--kh-surface);
    color: var(--kh-text);
    font-family: inherit;
    font-size: 1rem; /* 16px keeps iOS from zooming on focus */
    -webkit-appearance: none;
    appearance: none;
}

.kh .kh-search__input::placeholder { color: var(--kh-muted); }

.kh .kh-search__input:focus {
    border-color: var(--kh-accent);
    box-shadow: 0 0 0 4px var(--kh-accent-dim);
    outline: none;
}

.kh-suggest {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline: 0;
    z-index: 1050;
    max-height: 70vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    border: 1px solid var(--kh-border);
    border-radius: 16px;
    background-color: var(--kh-surface);
    box-shadow: var(--kh-shadow);
    text-align: start;
}

.kh-suggest__group + .kh-suggest__group {
    margin-block-start: 4px;
    padding-block-start: 4px;
    border-block-start: 1px solid var(--kh-border);
}

.kh-suggest__head {
    padding: 10px 12px 6px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--kh-muted);
}

.kh-suggest__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--kh-text);
    text-decoration: none;
}

/* Hover and keyboard selection share this one highlight (knowledge_hub.js sets it on both). */
.kh-suggest__item.is-active {
    background-color: var(--kh-surface-2);
    color: var(--kh-text);
}

.kh-suggest__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background-color: var(--kh-accent-dim);
    color: var(--kh-accent);
    font-size: 1.25rem;
}

.kh-suggest__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-block-start: 2px;
}

.kh-suggest__title {
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.kh-suggest__title strong {
    font-weight: 700;
    color: var(--kh-accent);
}

.kh-suggest__q {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--kh-muted);
    overflow-wrap: anywhere;
}

.kh-suggest__q .ph {
    flex: none;
    margin-block-start: 3px;
}

.kh-suggest__empty {
    padding: 20px 16px;
    text-align: center;
}

.kh-suggest__empty p {
    margin: 0 0 8px;
    color: var(--kh-muted);
}

.kh-suggest__browse {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: var(--kh-accent);
    font-weight: 600;
    text-decoration: none;
}

.kh-suggest__browse:hover { text-decoration: underline; }

/* ===== Page body and group headings ==================================================== */

.kh-body { padding-block: 0 80px; }

.kh-block__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 64px 0 24px;
}

/* Group headings: 1.5rem / 700, 64px above, a short accent bar under. */
.kh .kh-block__title {
    margin: 64px 0 24px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--kh-text);
    scroll-margin-top: var(--kh-sticky);
}

.kh .kh-block__title::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    margin-block-start: 10px;
    border-radius: 2px;
    background-color: var(--kh-accent);
}

.kh .kh-block__head .kh-block__title { margin: 0; }

.kh-block__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--kh-accent);
    text-decoration: none;
}

.kh-block__more:hover { color: var(--kh-text); }

/* ===== Card grid ====================================================================== */

/* Rows stretch, so every card in a row is as tall as the tallest. */
.kh-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 24px;
}

@media (min-width: 768px) {
    .kh-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
    .kh-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .kh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kh-grid--narrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The two cross-link cards at the foot of each hub: side by side from 768px. */
@media (min-width: 768px) {
    .kh .kh-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Cards ========================================================================== */

.kh-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 24px;
    border: 1px solid var(--kh-border);
    border-radius: var(--kh-radius);
    background-color: var(--kh-surface);
    color: var(--kh-text);
    text-decoration: none;
    /* A long unbroken word (a URL, a model number) breaks instead of pushing past the card. */
    overflow-wrap: anywhere;
}

a.kh-card:hover,
.kh-card--page:hover {
    transform: translateY(-2px);
    border-color: var(--kh-border-hi);
    background-color: var(--kh-surface-2);
    box-shadow: var(--kh-shadow);
    color: var(--kh-text);
}

.kh-card__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-color: var(--kh-accent-dim);
    color: var(--kh-accent);
    font-size: 1.625rem;
}

.kh .kh-card__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.34;
    color: var(--kh-text);
}

a.kh-card:hover .kh-card__title { color: var(--kh-accent); }

.kh-card__link {
    color: inherit;
    text-decoration: none;
}

.kh-card__link:hover { color: var(--kh-accent); }

/* Two lines, exactly: line-height 1.55, max-height two lines, no bottom padding. */
.kh-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 3.1em;
    margin: 0;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--kh-muted);
}

.kh-card__meta {
    font-size: .8125rem;
    color: var(--kh-muted);
}

/* "Learn more" and the count pill sit on the bottom edge, whatever is above them. */
.kh-card__more,
.kh-pill { margin-block-start: auto; }

.kh-card__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-block-start: 6px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--kh-accent);
    text-decoration: none;
}

.kh-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background-color: var(--kh-accent-dim);
    color: var(--kh-accent);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Glossary letter anchors ride inside a card; the card is the scroll target. */
.kh-anchor {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 1px;
    scroll-margin-top: var(--kh-sticky);
}

/* ----- Section page card: title link, the page's first questions, "Learn more" -------- */

.kh-questions {
    width: 100%;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    border-block-start: 1px solid var(--kh-border);
}

.kh-questions li { border-block-end: 1px solid var(--kh-border); }

.kh-questions li:last-child { border-block-end: 0; }

.kh-questions a {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 44px;
    padding-block: 11px;
    color: var(--kh-muted);
    font-size: .9375rem;
    line-height: 1.4;
    text-decoration: none;
}

.kh-questions a .ph {
    flex: none;
    margin-block-start: 3px;
    color: var(--kh-accent);
}

.kh-questions a:hover { color: var(--kh-accent); }

/* ----- Section pages: six cards, the rest behind "Show all" --------------------------- */
/* Only once the script is there to open them again; without it, everything shows. */

.kh-js .kh-block.is-collapsed .is-extra { display: none; }

.kh-showall { display: none; }

.kh-js .kh-showall {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    min-height: 44px;
    margin: 24px auto 0;
    padding-inline: 22px;
    border: 1px solid var(--kh-border);
    border-radius: 999px;
    background-color: var(--kh-surface);
    color: var(--kh-text);
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
}

.kh-js .kh-showall:hover {
    border-color: var(--kh-border-hi);
    color: var(--kh-accent);
}

/* ===== Device row (/help, /help/section/platforms) ==================================== */

.kh-devices__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .kh-devices__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

@media (min-width: 1200px) {
    .kh-devices__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.kh-devices__list li { min-width: 0; }

/* Console image, then the name - nothing else. Taller than a card, centred, a stronger hover. */
.kh-device {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    height: 100%;
    padding: 24px 16px;
    border: 1px solid var(--kh-border);
    border-radius: var(--kh-radius);
    background-color: var(--kh-surface);
    color: var(--kh-text);
    text-align: center;
    text-decoration: none;
}

.kh-device:hover {
    transform: translateY(-4px);
    border-color: var(--kh-accent);
    background-color: var(--kh-surface-2);
    box-shadow: 0 0 0 1px var(--kh-accent), 0 12px 32px var(--kh-accent-glow);
    color: var(--kh-text);
}

.kh-device__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 160px;
    padding: 12px;
}

.kh-device__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.kh-device__name {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
}

.kh-device:hover .kh-device__name { color: var(--kh-accent); }

/* ===== Platform page: the one task ===================================================== */

.kh-task {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-block-start: 48px;
    padding: 32px;
    border: 1px solid var(--kh-border-hi);
    border-radius: var(--kh-radius);
    background:
        linear-gradient(135deg, rgba(149, 171, 82, .18) 0%, rgba(149, 171, 82, .04) 100%),
        var(--kh-surface);
}

@media (min-width: 768px) {
    .kh-task {
        flex-direction: row;
        align-items: center;
        gap: 28px;
    }
}

.kh-task__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background-color: var(--kh-accent-dim);
    color: var(--kh-accent);
    font-size: 2.5rem;
}

.kh-task__body {
    flex: 1 1 auto;
    min-width: 0;
}

.kh .kh-task__title {
    margin: 0 0 6px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--kh-text);
}

.kh-task__text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--kh-muted);
}

.kh .kh-task__btn { flex: none; }

/* ----- "See all {n} pages" - a quiet link, not a card ---------------------------------- */

.kh-seeall {
    margin: 56px 0 0;
    padding-block-start: 24px;
    border-block-start: 1px solid var(--kh-border);
    text-align: center;
}

.kh-seeall a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--kh-accent);
    font-weight: 600;
    text-decoration: none;
}

.kh-seeall a:hover { text-decoration: underline; }

/* ===== /help/platform/{key}/all: a plain, dense index ================================== */

.kh-index {
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 992px) {
    .kh-index {
        column-count: 2;
        column-gap: 48px;
    }
}

.kh-index li {
    break-inside: avoid;
    border-block-end: 1px solid var(--kh-border);
}

.kh-index a {
    display: block;
    min-height: 44px;
    padding-block: 10px;
    color: var(--kh-text);
    text-decoration: none;
}

.kh-index__title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.kh-index a:hover .kh-index__title { color: var(--kh-accent); }

.kh-index__desc {
    display: block;
    overflow: hidden;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--kh-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kh--index .kh-block__title { margin-block-start: 48px; }

/* ===== Glossary: A-Z bar and the inline definitions ==================================== */

.kh-az { margin-block-start: 40px; }

.kh-az ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kh-az a,
.kh-az span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding-inline: 6px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1;
}

.kh-az a {
    border-color: var(--kh-border);
    background-color: var(--kh-surface);
    color: var(--kh-text);
    text-decoration: none;
}

.kh-az a:hover {
    border-color: var(--kh-border-hi);
    color: var(--kh-accent);
}

.kh-az span { color: var(--kh-faint); }

.kh-defs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin: 0;
}

@media (min-width: 992px) {
    .kh-defs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kh-grid + .kh-defs { margin-block-start: 24px; }

.kh-card--def { scroll-margin-top: var(--kh-sticky); }

.kh-card--def:target {
    border-color: var(--kh-border-hi);
    box-shadow: 0 0 0 4px var(--kh-accent-dim);
}

.kh-card--def dfn { font-style: normal; }

.kh .kh-def__body {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--kh-body);
}

.kh .kh-def__body > :last-child { margin-block-end: 0; }

/* ===== Empty, buttons, "Still need help?" ============================================== */

.kh-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 520px;
    margin: 64px auto 0;
    padding: 40px 24px;
    border: 1px dashed var(--kh-border);
    border-radius: var(--kh-radius);
    color: var(--kh-muted);
    text-align: center;
}

.kh-empty p { margin: 0; }

.kh .kh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding-inline: 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    background-color: var(--kh-accent);
    color: var(--kh-on-accent);
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.kh .kh-btn:hover {
    color: var(--kh-on-accent);
    box-shadow: 0 0 0 4px var(--kh-accent-dim);
}

.kh .kh-btn .ph { font-size: 1.125rem; }

.kh .kh-btn--ghost {
    border-color: var(--kh-border-hi);
    background-color: transparent;
    color: var(--kh-text);
}

.kh .kh-btn--ghost:hover {
    background-color: var(--kh-accent-dim);
    color: var(--kh-accent);
}

.kh-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-block-start: 64px;
    padding: 32px;
    border: 1px solid var(--kh-border);
    border-radius: var(--kh-radius);
    background-color: var(--kh-surface);
}

@media (min-width: 768px) {
    .kh-cta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.kh-cta__copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.kh .kh-cta__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--kh-text);
}

.kh-cta__text {
    margin: 0;
    color: var(--kh-muted);
}

.kh-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ===== Article page =================================================================== */

.kh-body--page { padding-block-start: 24px; }

/* Text and contents rail sit centred as one block. */
.kh-doc-wrap {
    max-width: 1160px;
    margin-inline: auto;
}

.kh-doc-wrap > .kh-crumbs,
.kh-doc {
    max-width: 760px;
    margin-inline: auto;
}

/* 760px of text and a 260px rail, 48px apart. */
@media (min-width: 1200px) {
    .kh-doc-wrap > .kh-crumbs { max-width: 1068px; }

    .kh-doc {
        display: grid;
        max-width: 1068px;
        grid-template-columns: minmax(0, 760px) 260px;
        grid-template-rows: auto auto auto 1fr;
        grid-template-areas:
            "head   toc"
            "figure toc"
            "body   toc"
            "foot   toc";
        justify-content: center;
        column-gap: 48px;
    }

    .kh-doc--no-toc {
        max-width: 760px;
        grid-template-columns: minmax(0, 760px);
        grid-template-areas: "head" "figure" "body" "foot";
    }

    .kh-doc__head { grid-area: head; }
    .kh-doc__figure { grid-area: figure; }
    .kh-doc__body { grid-area: body; }
    .kh-doc__foot { grid-area: foot; }
}

.kh .kh-doc__title {
    margin: 0 0 12px;
    font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--kh-text);
}

.kh-doc__lead {
    margin: 0 0 12px;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--kh-muted);
}

.kh-doc__meta {
    margin: 0 0 4px;
    font-size: .875rem;
    color: var(--kh-muted);
}

.kh-doc__figure { margin: 24px 0 0; }

.kh-doc__figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--kh-radius);
}

/* ----- Share row ---------------------------------------------------------------------- */

.kh-share {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-start: 16px;
    padding-block-end: 24px;
    border-block-end: 1px solid var(--kh-border);
}

.kh .kh-share__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding-inline: 16px;
    border: 1px solid var(--kh-border);
    border-radius: 999px;
    background-color: var(--kh-surface);
    color: var(--kh-text);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.kh .kh-share__btn .ph { font-size: 1.125rem; }

.kh .kh-share__btn:hover {
    border-color: var(--kh-border-hi);
    color: var(--kh-accent);
}

.kh-share__btn--wa .ph { color: #25D366; }

/* ----- Contents: accordion below 1200px, sticky rail above ---------------------------- */

.kh-toc {
    margin: 24px 0 0;
    border: 1px solid var(--kh-border);
    border-radius: var(--kh-radius);
    background-color: var(--kh-surface);
}

.kh .kh-toc__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 12px 20px;
    border: 0;
    border-radius: var(--kh-radius);
    background: none;
    color: var(--kh-text);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
}

.kh-toc__toggle .ph-list-bullets {
    font-size: 1.25rem;
    color: var(--kh-accent);
}

.kh-toc__chevron {
    margin-inline-start: auto;
    color: var(--kh-muted);
}

.kh-toc.is-open .kh-toc__chevron { transform: rotate(180deg); }

.kh-toc__label { display: none; }

.kh-toc__list {
    margin: 0;
    padding: 0 12px 12px;
    list-style: none;
}

/* Collapsed until opened - only once the script is there to open it. */
.kh-toc.is-collapsible:not(.is-open) .kh-toc__list { display: none; }

.kh-toc__list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    border-inline-start: 2px solid transparent;
    border-start-end-radius: 8px;
    border-end-end-radius: 8px;
    color: var(--kh-muted);
    font-size: .9375rem;
    line-height: 1.4;
    text-decoration: none;
}

.kh-toc__list a:hover {
    background-color: rgba(255, 255, 255, .03);
    color: var(--kh-text);
}

.kh-toc__list a.is-active {
    border-inline-start-color: var(--kh-accent);
    background-color: var(--kh-accent-dim);
    color: var(--kh-accent);
}

@media (min-width: 1200px) {
    .kh-toc {
        grid-area: toc;
        align-self: start;
        position: sticky;
        top: var(--kh-sticky);
        max-height: calc(100vh - var(--kh-sticky) - 24px);
        overflow-y: auto;
        margin: 0;
        padding-block: 4px;
        border: 0;
        border-radius: 0;
        background: none;
    }

    .kh .kh-toc__toggle { display: none; }

    .kh-toc__label {
        display: block;
        margin: 0 0 12px;
        padding-inline-start: 14px;
        font-size: .8125rem;
        font-weight: 700;
        color: var(--kh-muted);
    }

    .kh-toc__list,
    .kh-toc.is-collapsible:not(.is-open) .kh-toc__list {
        display: block;
        padding: 0;
        border-inline-start: 1px solid var(--kh-border);
    }

    .kh-toc__list a {
        min-height: 0;
        margin-inline-start: -1px;
        padding: 7px 14px;
    }
}

/* ----- Article text ------------------------------------------------------------------- */

.kh-doc__body { margin-block-start: 8px; }

.kh-prose {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--kh-body);
    overflow-wrap: break-word;
}

.kh-prose p { margin: 0 0 1.1em; }

.kh .kh-prose h2 {
    position: relative;
    margin: 48px 0 16px;
    padding-block-start: 24px;
    border-block-start: 1px solid var(--kh-border);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--kh-text);
    scroll-margin-top: var(--kh-sticky);
}

.kh .kh-prose > h2:first-child {
    margin-block-start: 24px;
    padding-block-start: 0;
    border-block-start: 0;
}

.kh .kh-prose h3 {
    margin: 32px 0 12px;
    font-size: 1.1875rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--kh-text);
    scroll-margin-top: var(--kh-sticky);
}

.kh-prose ul,
.kh-prose ol {
    margin: 0 0 1.2em;
    padding-inline-start: 24px;
}

.kh-prose li { margin-block-end: 8px; }

.kh-prose a {
    color: var(--kh-accent);
    text-decoration: none;
}

.kh-prose a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kh-prose .updated-note {
    padding: 12px 16px;
    border-inline-start: 3px solid var(--kh-accent);
    border-radius: 8px;
    background-color: var(--kh-accent-dim);
    color: var(--kh-text);
}

.kh-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.kh-prose iframe { width: 100%; max-width: 100%; }

.kh-prose table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin: 0 0 1.4em;
    border-collapse: collapse;
    font-size: .9375rem;
    line-height: 1.5;
}

.kh-prose th,
.kh-prose td {
    padding: 10px 12px;
    border-block-end: 1px solid var(--kh-border);
    text-align: start;
    vertical-align: top;
}

.kh-prose th {
    border-block-end-color: rgba(255, 255, 255, .16);
    color: var(--kh-text);
    font-weight: 600;
}

.kh-prose blockquote {
    margin: 1.4em 0;
    padding-inline-start: 16px;
    border-inline-start: 3px solid var(--kh-accent);
    color: var(--kh-muted);
}

/* Code or pasted text in <pre> keeps its lines; it scrolls inside itself, never widens the page. */
.kh-prose pre {
    max-width: 100%;
    overflow-x: auto;
    margin: 0 0 1.2em;
    padding: 12px 16px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, .25);
    font-size: .875rem;
    white-space: pre;
}

.kh-prose hr {
    margin: 2em 0;
    border: 0;
    border-block-start: 1px solid var(--kh-border);
    opacity: 1;
}

.kh-prose > :last-child { margin-block-end: 0; }

/* ----- Copy-link button on each <h2> (added by knowledge_hub.js) ---------------------- */

.kh .kh-h2link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    margin-inline-start: 8px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--kh-muted);
    font-size: 1.125rem;
    vertical-align: middle;
    cursor: pointer;
    opacity: 0;
}

.kh-prose h2:hover .kh-h2link,
.kh-prose h2:focus-within .kh-h2link,
.kh .kh-h2link:focus-visible { opacity: 1; }

.kh .kh-h2link:hover {
    background-color: var(--kh-accent-dim);
    color: var(--kh-accent);
}

/* No hover on touch: always there, quietly. */
@media (hover: none) {
    .kh .kh-h2link {
        width: 44px;
        height: 44px;
        opacity: .45;
    }
}

/* ----- Help answers: one <details> per question --------------------------------------- */

.kh-qa {
    margin: 24px 0;
    border-block-start: 1px solid var(--kh-border);
}

.kh-qa__item { border-block-end: 1px solid var(--kh-border); }

.kh-qa__q {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    padding-block: 12px;
    list-style: none;
    cursor: pointer;
}

.kh-qa__q::-webkit-details-marker { display: none; }

/* Phosphor caret-down. */
.kh-qa__q::after {
    content: "\e136";
    flex: none;
    margin-inline-start: auto;
    font-family: "Phosphor";
    font-size: 1.25rem;
    line-height: 1;
    color: var(--kh-muted);
}

.kh-qa__item[open] > .kh-qa__q::after { transform: rotate(180deg); }

.kh .kh-prose .kh-qa__q h2 {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
}

.kh-qa__q:hover h2,
.kh-qa__item[open] > .kh-qa__q h2 { color: var(--kh-accent); }

.kh-qa__a { padding-block-end: 16px; }

.kh-qa__a > :last-child { margin-block-end: 0; }

/* ----- After the text: back link, prev/next, related, products ------------------------ */

.kh-back { margin: 40px 0 0; }

.kh-back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--kh-accent);
    font-weight: 600;
    text-decoration: none;
}

.kh-back a:hover { color: var(--kh-text); }

.kh-pager {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-block-start: 48px;
}

@media (min-width: 576px) {
    .kh-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kh-pager__link--next { grid-column: 2; }
}

.kh-pager__link { gap: 6px; }

.kh-pager__link--next {
    align-items: flex-end;
    text-align: end;
}

.kh-pager__dir {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--kh-accent);
}

/* ----- "You might need": ListProducts theme 11 (Strip.cshtml) ------------------------- */

.kh-strip .kh-strip__title { margin-block-start: 48px; }

.kh-strip__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .kh-strip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kh-strip__list li { min-width: 0; }

.kh-strip__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 12px;
    border: 1px solid var(--kh-border);
    border-radius: var(--kh-radius);
    background-color: var(--kh-surface);
    color: var(--kh-text);
    text-decoration: none;
}

.kh-strip__card:hover {
    transform: translateY(-2px);
    border-color: var(--kh-border-hi);
    background-color: var(--kh-surface-2);
    box-shadow: var(--kh-shadow);
    color: var(--kh-text);
}

/* Fixed box; every level may shrink (min-height: 0) so nothing is cropped off the bottom. */
.kh-strip__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background-color: var(--kh-bg);
}

.kh-strip__media picture,
.kh-strip__media img {
    display: block;
    min-height: 0;
}

.kh-strip__blur {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(18px) brightness(.55);
    transform: scale(1.15);
}

.kh-strip__media picture {
    position: absolute;
    inset: 0;
}

.kh-strip__art {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Two lines exactly: line-height 1.34, max-height two lines, no bottom padding. */
.kh-strip__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.68em;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.34;
    overflow-wrap: anywhere;
}

.kh-strip__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-block-start: auto;
    color: var(--kh-accent);
    font-weight: 700;
}

.kh-strip__was {
    color: var(--kh-muted);
    font-size: .8125rem;
    font-weight: 500;
    text-decoration: line-through;
}

.kh-strip__preorder { font-size: .875rem; }

.kh-strip__all {
    margin: 16px 0 0;
    text-align: end;
}

.kh-strip__all a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: var(--kh-accent);
    font-weight: 600;
    text-decoration: none;
}

.kh-strip__all a:hover { text-decoration: underline; }

.kh-related .kh-block__title { margin-block-start: 64px; }

.kh-doc__foot .kh-cta { margin-block-start: 48px; }

.kh-products {
    margin-block-start: 64px;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--kh-border);
}

/* ----- "Copied" toast ------------------------------------------------------------------ */

.kh-toast {
    position: fixed;
    left: 50%; /* centred - the same in both directions */
    bottom: 96px;
    z-index: 1080;
    max-width: calc(100vw - 32px);
    padding: 10px 18px;
    border: 1px solid var(--kh-border-hi);
    border-radius: 999px;
    background-color: var(--kh-surface-2);
    box-shadow: var(--kh-shadow);
    color: var(--kh-text);
    font-size: .9375rem;
    font-weight: 600;
    opacity: 0;
    transform: translate(-50%, 8px);
    pointer-events: none;
}

.kh-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ===== Arabic ========================================================================== */
/* Tajawal is forced by custom.rtl.css. Arabic reads smaller at the same size, and is never
   tracked. */

.kh[dir="rtl"] .kh-hero__title,
.kh[dir="rtl"] .kh-doc__title { letter-spacing: 0; }

.kh[dir="rtl"] .kh-prose { font-size: calc(1.0625rem + 1px); }
.kh[dir="rtl"] .kh-card__desc,
.kh[dir="rtl"] .kh-def__body { font-size: calc(.9375rem + 1px); }

/* ===== Phones ========================================================================= */

@media (max-width: 767.98px) {
    .kh-hero {
        min-height: 200px;
        padding-block: 16px 28px;
    }

    .kh-hero .kh-crumbs ol { margin-block-end: 16px; }

    .kh-search { margin-block-start: 20px; }

    .kh-card { padding: 20px; }

    .kh-device { padding: 16px 12px; }

    .kh-task { padding: 24px 20px; }

    .kh-crumbs a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .kh .kh-block__title { margin-block-start: 48px; }
    .kh-block__head { margin-block-start: 48px; }

    .kh-cta { padding: 24px 20px; }
}

/* ===== Motion ========================================================================== */

a.kh-card,
.kh-card--page,
.kh-device,
.kh-strip__card,
.kh-az a,
.kh-share__btn,
.kh-showall,
.kh-toc__list a,
.kh-toc__chevron,
.kh-qa__q::after,
.kh .kh-h2link,
.kh .kh-btn,
.kh-search__input {
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease,
                box-shadow .15s ease, color .15s ease, opacity .15s ease;
}

.kh-toast { transition: opacity .2s ease, transform .2s ease; }

@media (prefers-reduced-motion: reduce) {
    .kh *,
    .kh *::before,
    .kh *::after {
        transition: none !important;
        animation: none !important;
    }

    a.kh-card:hover,
    .kh-card--page:hover,
    .kh-device:hover,
    .kh-strip__card:hover { transform: none; }

    .kh-toast,
    .kh-toast.is-visible { transform: translate(-50%, 0); }
}