/* The knowledge base: the hub (kb-hub.tpl, /kb.php) and every article (kb-article.tpl). One sheet for both, so the
   114 articles and the hub share one cached file. Colour only through the v4 tokens (--em-*, defined on :root by
   esa-v4-bridge.css in the site bundle); type, space and components follow docs/DESIGN-HOME-V4.md. The night stage
   reads the --em-night-* set. Design record: docs/DESIGN-KB.md. */

/* ---- the chrome's containers, so the stages run edge to edge under the header ---- */
body:is(.page-kb-hub, .page-kb-article) #main-body{ display:block !important; padding:0 !important; overflow-x:clip; background:var(--em-ground) !important; }
/* the id twice: the chrome's own rule (body:not(.homepage-reset):not(.page-homepage) #main-body>.page-container) is !important too */
body:is(.page-kb-hub, .page-kb-article) #main-body#main-body > .page-container{ max-width:none !important; width:100% !important; padding:0 !important; margin:0 !important; }
body:is(.page-kb-hub, .page-kb-article) #main-body > .page-container > .row{ margin:0 !important; }
body:is(.page-kb-hub, .page-kb-article) .primary-content{ padding:0 !important; max-width:none !important; flex:0 0 100% !important; }
/* the guest strip between the header and the page ("Welcome there, Guest": sign in, register) is already hidden on
   phones; its two links are the header's own, and the stage starts directly under the header as on the homepage */
body:is(.page-kb-hub, .page-kb-article) #breadcrumb.bread-guest{ display:none !important; }

/* ---- type, space, motion: the homepage's scale ---- */
.kb{
    --em-fs-h2:clamp(30px, 25.6px + 1.124vw, 40px); --em-fs-h3:clamp(19px, 18.1px + .225vw, 21px);
    --em-fs-lead:clamp(17px, 16.1px + .225vw, 19px);
    --em-sec-pad:96px; --em-head-gap:48px; --em-col-gap:40px; --em-card-pad:24px; --em-card-gap:16px;
    --em-ease:cubic-bezier(.2,.7,.2,1);
    color:var(--em-text-1); background:var(--em-ground);
    font:400 16px/1.6 var(--em-font-text); -webkit-font-smoothing:antialiased;
}
@media (max-width:719.98px){ .kb{ --em-sec-pad:64px; --em-head-gap:32px; --em-col-gap:24px; --em-card-pad:20px; --em-card-gap:12px; } }
.kb *, .kb *::before, .kb *::after{ box-sizing:border-box; }
:where(.kb) :is(h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd){ margin:0; }
:where(.kb) :is(ul, ol){ padding:0; list-style:none; }
.kb a{ color:inherit; text-decoration:none; }
.kb a:hover{ color:inherit; text-decoration:none; }
:where(.kb) button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
.kb :is(h1, h2, h3){ font-family:var(--em-font-display); color:var(--em-text-1); text-wrap:balance; }
.kb :is(p, li){ text-wrap-style:pretty; }
.kb h2{ font-weight:600; font-size:var(--em-fs-h2); line-height:1.1; letter-spacing:-.025em; }
.kb h3{ font-weight:500; font-size:var(--em-fs-h3); line-height:1.3; letter-spacing:-.012em; }
.kb :is(b, strong){ font-weight:500; color:var(--em-text-1); }
.kb :focus-visible{ outline:2px solid var(--em-focus); outline-offset:2px; }
.kb :focus:not(:focus-visible){ outline:none; }
.kb [hidden]{ display:none !important; }

.kb-wrap{ max-width:1280px; margin:0 auto; padding:0 40px; }
@media (max-width:719.98px){ .kb-wrap{ padding:0 20px; } }
.kb-i{ display:inline-block; flex:none; width:20px; height:20px; vertical-align:middle; }
.kb-i.is-16{ width:16px; height:16px; }
.kb-i.is-24{ width:24px; height:24px; }
.kb-vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.kb-nw{ white-space:nowrap; }
.kb-sec{ padding:var(--em-sec-pad) 0; background:var(--em-ground); }
.kb-sec.is-band{ background:var(--em-band); }

/* buttons and links, as the homepage's em-btn / em-action (radius 10, never a pill; one primary per view) */
.kb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px; border-radius:10px;
    border:1px solid transparent; font:500 14px/1 var(--em-font-text); white-space:nowrap; color:var(--em-text-1);
    transition:background-color 160ms var(--em-ease), border-color 160ms var(--em-ease), color 160ms var(--em-ease); }
.kb-btn .kb-i{ width:16px; height:16px; }
.kb-btn.is-lg{ height:48px; padding:0 24px; font-size:15px; }
.kb .kb-btn.is-primary{ background:var(--em-grad-action) var(--em-brand); color:var(--em-on-brand); }
.kb .kb-btn.is-primary:hover{ background-image:none; color:var(--em-on-brand); }
.kb .kb-btn.is-secondary{ border-color:var(--em-line-strong); }
.kb .kb-btn.is-secondary:hover{ background:var(--em-surface-2); border-color:var(--em-line-control); color:var(--em-text-1); }
.kb .kb-btn.is-ghost:hover{ background:var(--em-surface-2); color:var(--em-text-1); }
.kb-ibtn{ display:inline-grid; place-items:center; flex:none; width:44px; height:44px; border-radius:10px; border:1px solid var(--em-line-strong); color:var(--em-text-2);
    transition:background-color 160ms var(--em-ease), border-color 160ms var(--em-ease), color 160ms var(--em-ease); }
.kb .kb-ibtn:hover{ background:var(--em-surface-2); border-color:var(--em-line-control); color:var(--em-text-1); }
.kb .kb-ibtn[aria-disabled="true"]{ border-color:var(--em-line); color:var(--em-line-strong); background:none; cursor:default; }
.kb .kb-link{ color:var(--em-text-1); text-decoration-line:underline !important; text-decoration-color:var(--em-brand-line) !important;
    text-decoration-thickness:1px !important; text-underline-offset:3px; transition:text-decoration-color 160ms var(--em-ease); }
.kb .kb-link:hover{ color:var(--em-text-1); text-decoration-color:var(--em-brand-text) !important; }
.kb-action{ display:inline-flex; align-items:center; gap:4px; min-height:44px; font:500 14px/1.5 var(--em-font-text); }
.kb .kb-action{ color:var(--em-brand-text); }
.kb .kb-action:hover{ color:var(--em-brand-text); text-decoration-line:underline !important; text-decoration-thickness:1px !important; text-underline-offset:3px; }
.kb-action .kb-i{ width:16px; height:16px; }

/* ---- the night stage: edge to edge, dark in both themes, everything inside on the night set ---- */
.kb-stage{
    --em-ground:var(--em-night-ground); --em-surface:var(--em-night-surface); --em-surface-2:var(--em-night-surface-2); --em-band:var(--em-night-ground);
    --em-line:var(--em-night-line); --em-line-strong:var(--em-night-line-strong); --em-line-control:var(--em-night-line-control);
    --em-text-1:var(--em-night-text-1); --em-text-2:var(--em-night-text-2); --em-text-3:var(--em-night-text-3);
    --em-brand-text:var(--em-night-brand-text); --em-brand-mark:var(--em-brand); --em-focus:var(--em-night-brand-text);
    --em-brand-line:color-mix(in srgb, var(--em-brand) 45%, var(--em-stage)); --em-attack:var(--em-night-attack);
    position:relative; isolation:isolate; overflow:hidden; overflow:clip; color-scheme:dark;
    background:var(--em-stage); color:var(--em-text-1);
}
.kb-gl{ position:absolute; inset:0; z-index:0; touch-action:pan-y; }
.kb-gl canvas{ display:block; width:100%; height:100%; opacity:0; transition:opacity 1.8s ease; }
.kb-gl.is-on canvas{ opacity:1; }
.kb-gl.is-hot{ cursor:pointer; }
/* the scrim keeps the words readable where the scene passes under them: from the left beside a wide scene, from the
   top over a narrow one */
.kb-stage::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(90deg, rgba(var(--em-scrim),.94) 0%, rgba(var(--em-scrim),.78) 34%, rgba(var(--em-scrim),0) 58%); }
@media (max-width:1023.98px){
    .kb-stage::after{ background:linear-gradient(180deg, rgba(var(--em-scrim),.9) 0%, rgba(var(--em-scrim),.7) 38%, rgba(var(--em-scrim),0) 62%); }
}
/* the words sit over the scene; clicks between them reach it */
.kb-hero-in{ position:relative; z-index:2; pointer-events:none; }
.kb-hero-in :is(a, button, input, label, p, h1, li, nav, code, span){ pointer-events:auto; }
.kb-hero-in .kb-slot{ pointer-events:none; }
/* the scene's own labels (its cluster names and the page under the pointer); the same words are links on the page */
.kb-tags{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.kb-tag{ position:absolute; left:0; top:0; display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:6px; white-space:nowrap;
    font:500 12px/1.3 var(--em-font-text); color:var(--em-text-2); background:rgba(var(--em-scrim),.72); border:1px solid var(--em-line);
    opacity:0; transition:opacity .5s var(--em-ease), color .4s var(--em-ease), border-color .4s var(--em-ease); will-change:transform; }
.kb-tag b{ font-weight:500; color:var(--em-text-3); font-variant-numeric:tabular-nums; }
.kb-tag.is-on{ color:var(--em-text-1); border-color:var(--em-brand-line); }
.kb-tag.is-tip{ max-width:280px; white-space:normal; color:var(--em-text-1); font-size:13px; padding:8px 10px; border-color:var(--em-line-strong); }
@media (max-width:719.98px){ .kb-tag:not(.is-tip){ display:none; } }

.kb-kicker{ display:flex; align-items:center; gap:8px; font:500 13px/1.3 var(--em-font-text); letter-spacing:.005em; color:var(--em-text-2); }
.kb-kicker .kb-i{ width:16px; height:16px; color:var(--em-brand-text); }
.kb-kicker a{ color:var(--em-text-2); min-height:24px; display:inline-flex; align-items:center; transition:color 160ms var(--em-ease); }
.kb-kicker a:hover{ color:var(--em-text-1); }
.kb-kicker .kb-sep{ color:var(--em-text-3); }
.kb-grad{ background:var(--em-grad-display); -webkit-background-clip:text; background-clip:text; color:transparent;
    -webkit-box-decoration-break:slice; box-decoration-break:slice; padding-bottom:.08em; }
.kb-lead{ font:400 var(--em-fs-lead)/1.55 var(--em-font-text); letter-spacing:-.006em; color:var(--em-text-2); }
.kb-ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.kb-motion{ color:var(--em-text-2); }
.kb-motion .kb-i-play, .kb-motion.is-off .kb-i-pause{ display:none; }
.kb-motion.is-off .kb-i-play{ display:inline-block; }

/* ======================================== the hub ======================================== */
.kb-hub .kb-hero{ container-type:inline-size; }
.kb-hub .kb-hero-in{ display:grid; grid-template-columns:minmax(0,1fr); padding:56px 0 0; }
.kb-hub .kb-hero-copy{ display:flex; flex-direction:column; align-items:flex-start; }
.kb-hub .kb-hero h1{ margin-top:16px; font:600 clamp(40px, 9.6cqi, 72px)/1 var(--em-font-display); letter-spacing:-.04em; }
.kb-hub .kb-hero .kb-lead{ margin-top:20px; max-width:33em; }
.kb-search{ position:relative; width:100%; max-width:560px; margin-top:32px; }
.kb-search .kb-i{ position:absolute; left:18px; top:50%; translate:0 -50%; color:var(--em-text-3); pointer-events:none; }
/* !important only where the bundle sets it (.primary-content input[type=search]{...!important}) */
.kb .kb-search input#kb-q{ display:block; width:100%; height:56px; margin:0; padding:0 92px 0 50px !important; border-radius:12px !important; border:1px solid var(--em-line-control) !important;
    background:var(--em-surface) !important; color:var(--em-text-1) !important; font:400 16px/1.2 var(--em-font-text); box-shadow:none !important; outline:none;
    transition:border-color 160ms var(--em-ease), background-color 160ms var(--em-ease); -webkit-appearance:none; appearance:none; }
.kb .kb-search input::placeholder{ color:var(--em-text-3); opacity:1; }
.kb .kb-search input#kb-q:hover{ border-color:var(--em-text-3) !important; }
.kb .kb-search input#kb-q:focus{ border-color:var(--em-brand) !important; outline:2px solid var(--em-focus); outline-offset:2px; }
.kb .kb-search input::-webkit-search-cancel-button{ display:none; }
.kb-search .kb-key{ position:absolute; right:14px; top:50%; translate:0 -50%; display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 6px;
    border-radius:6px; border:1px solid var(--em-line-strong); font:400 12px/1 var(--em-font-mono); color:var(--em-text-3); }
.kb-search .kb-clear{ position:absolute; right:6px; top:50%; translate:0 -50%; display:grid; place-items:center; width:44px; height:44px; border-radius:10px; color:var(--em-text-2); }
.kb-search .kb-clear:hover{ background:var(--em-surface-2); color:var(--em-text-1); }
.kb-search .kb-clear .kb-i{ position:static; translate:none; color:inherit; }
.kb-search.has-q .kb-key{ display:none; }
/* no keyboard shortcut to show on a touch screen */
@media (pointer:coarse), (max-width:719.98px){ .kb-search .kb-key{ display:none; } .kb .kb-search input#kb-q{ padding-right:48px !important; } }
.kb-status{ min-height:20px; margin-top:12px; font:400 13px/1.45 var(--em-font-text); color:var(--em-text-2); }
.kb-status b{ color:var(--em-text-1); font-variant-numeric:tabular-nums; }
.kb-hub .kb-ctas{ margin-top:28px; }
.kb-hub .kb-slot{ width:100%; height:320px; margin-top:8px; }

/* the category row at the foot of the stage: each is a link to its list; with script, a filter */
.kb-cats-row{ position:relative; z-index:2; display:flex; align-items:center; gap:12px 24px; margin-top:8px; padding:20px 0 24px; border-top:1px solid var(--em-line); }
.kb-cats{ display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.kb-chip{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:10px; border:1px solid var(--em-line-strong); background:var(--em-stage);
    font:500 14px/1 var(--em-font-text); color:var(--em-text-1); white-space:nowrap;
    transition:background-color 160ms var(--em-ease), border-color 160ms var(--em-ease), color 160ms var(--em-ease); }
.kb .kb-chip:hover{ background:var(--em-surface-2); border-color:var(--em-line-control); color:var(--em-text-1); }
.kb-chip .kb-i{ width:16px; height:16px; color:var(--em-text-3); transition:color 160ms var(--em-ease); }
.kb-chip:hover .kb-i{ color:var(--em-text-1); }
.kb-chip-n{ font:400 13px/1 var(--em-font-text); color:var(--em-text-3); font-variant-numeric:tabular-nums; }
.kb .kb-chip[aria-current="true"]{ background:var(--em-surface-2); border-color:var(--em-brand); }
.kb-chip[aria-current="true"] .kb-i{ color:var(--em-brand-text); }
.kb-cats-row .kb-motion{ margin-left:auto; flex:none; background:var(--em-stage); }
@media (pointer:coarse){ .kb-chip{ height:44px; } }
@media (max-width:1023.98px){
    .kb-cats-row{ flex-direction:column; align-items:stretch; gap:12px; padding-bottom:20px; }
    /* one row that scrolls sideways, through the gutter to the screen's edge */
    .kb-cats{ flex-wrap:nowrap; overflow-x:auto; margin:0 -40px; padding:2px 40px; scrollbar-width:none; scroll-padding-inline:40px; }
    .kb-cats::-webkit-scrollbar{ display:none; }
    .kb-cats-row .kb-motion{ margin-left:0; align-self:flex-start; }
}
@media (max-width:719.98px){ .kb-cats{ margin:0 -20px; padding:2px 20px; scroll-padding-inline:20px; } }
@media (min-width:1024px){
    .kb-hub .kb-hero-in{ grid-template-columns:minmax(0,6fr) minmax(0,6fr); align-items:center; min-height:500px; padding:64px 0 40px; }
    .kb-hub .kb-hero h1{ font-size:clamp(56px, 5.4cqi, 76px); }
    .kb-hub .kb-slot{ height:440px; margin:0; }
}

/* ---- the lists: a card per category (its head, five articles, then the rest on request) and a card for help ---- */
.kb-browse{ padding:var(--em-sec-pad) 0; background:var(--em-ground); }
.kb-empty{ max-width:640px; padding:0 0 32px; font:400 var(--em-fs-lead)/1.55 var(--em-font-text); color:var(--em-text-2); }
.kb-empty b{ color:var(--em-text-1); font-weight:500; }
.kb-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--em-card-gap); align-items:start; }
.kb-cat, .kb-help{ position:relative; display:flex; flex-direction:column; padding:var(--em-card-pad); border:1px solid var(--em-line); border-radius:16px; background:var(--em-surface);
    scroll-margin-top:24px; transition:border-color 160ms var(--em-ease); }
.kb-cat-key{ display:flex; align-items:center; gap:8px; font:500 13px/1.3 var(--em-font-text); letter-spacing:.005em; color:var(--em-text-1); }
.kb-cat-key .kb-i{ width:24px; height:24px; color:var(--em-text-2); }
.kb-cat-key .kb-n{ margin-left:auto; font-weight:400; color:var(--em-text-3); font-variant-numeric:tabular-nums; }
.kb-cat-head h2{ margin-top:20px; font-size:24px; line-height:1.2; letter-spacing:-.02em; }
.kb-cat-head p{ margin-top:8px; font:400 14px/1.55 var(--em-font-text); color:var(--em-text-2); }
.kb-list{ margin-top:20px; border-top:1px solid var(--em-line); }
.kb-row > a{ position:relative; display:grid; gap:2px; margin:0 calc(var(--em-card-pad) * -1); padding:14px 48px 14px var(--em-card-pad); border-bottom:1px solid var(--em-line);
    transition:background-color 160ms var(--em-ease); }
.kb-row:last-child > a{ border-bottom:0; }
.kb-row-t{ font:500 15px/1.4 var(--em-font-text); color:var(--em-text-1); transition:color 160ms var(--em-ease); }
.kb-row-d{ font:400 13px/1.5 var(--em-font-text); color:var(--em-text-2); }
.kb-row .kb-i{ position:absolute; right:calc(var(--em-card-pad) - 4px); top:50%; margin-top:-10px; color:var(--em-text-3); transition:translate 220ms var(--em-ease), color 160ms var(--em-ease); }
.kb-row mark{ background:var(--em-brand-tint); color:inherit; border-radius:3px; padding:0 1px; }
@media (hover:hover){
    .kb-row > a:hover{ background:var(--em-surface-2); }
    .kb-row > a:hover .kb-i{ color:var(--em-text-1); translate:4px 0; }
}
.kb-row > a:focus-visible{ outline-offset:-2px; }
.kb .kb-more{ display:inline-flex; align-items:center; align-self:flex-start; gap:6px; min-height:44px; margin:4px 0 -8px; font:500 14px/1.5 var(--em-font-text); color:var(--em-brand-text); }
.kb .kb-more:hover{ text-decoration-line:underline !important; text-decoration-thickness:1px !important; text-underline-offset:3px; }
.kb-more .kb-i{ width:16px; height:16px; transition:rotate 220ms var(--em-ease); }
.kb-cat.is-open .kb-more .kb-i{ rotate:180deg; }
@media (min-width:720px){ .kb .kb-more.is-phone{ display:none; } }
/* with script, a category shows five rows until it is opened (a search or a filter opens every one it shows) */
.kb-js .kb-cat:not(.is-open) .kb-row:nth-child(n+6){ display:none; }
.kb-js .kb-cat:not(.is-open) .kb-row:nth-child(5) > a{ border-bottom:0; }
/* three on a phone, where the cards stand one under another */
@media (max-width:719.98px){
    .kb-js .kb-cat:not(.is-open) .kb-row:nth-child(n+4){ display:none; }
    .kb-js .kb-cat:not(.is-open) .kb-row:nth-child(3) > a{ border-bottom:0; }
}
.kb-help{ align-self:start; background:var(--em-band); }
.kb-help h2{ font-size:24px; line-height:1.2; letter-spacing:-.02em; }
.kb-help p{ margin-top:8px; font:400 14px/1.55 var(--em-font-text); color:var(--em-text-2); max-width:34em; }
/* one category on its own (a filter): the card runs full width, its rows in two columns */
.kb-grid.is-one .kb-cat{ grid-column:1 / -1; }
.kb-grid.is-busy .kb-help{ display:none; }
@media (min-width:720px){
    .kb-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
    .kb-grid.is-one .kb-list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--em-col-gap); }
    .kb-grid.is-one .kb-row > a{ margin:0; padding-left:0; border-bottom:1px solid var(--em-line); }
    .kb-grid.is-one .kb-row:last-child > a{ border-bottom:1px solid var(--em-line); }
}
@media (min-width:1100px){
    .kb-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
    /* seven categories and the help card: the help card closes the last row */
    .kb-help:nth-child(3n+2){ grid-column:span 2; }
    /* the help card's three rows side by side: a compact band, not a tall card with little in it */
    .kb-help .kb-list{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:var(--em-col-gap); border-top:0; }
    .kb-help .kb-row > a{ height:100%; margin:0; padding:12px 36px 12px 16px; border-bottom:0; border-left:1px solid var(--em-line); }
    .kb-help .kb-row .kb-i{ right:8px; }
}
@media (hover:hover){ .kb-cat:hover{ border-color:var(--em-line-strong); } }

/* the reveal: blocks rise a little as they come into view, only with script and motion */
.kb-js.kb-motion-ok .kb-rv{ opacity:0; translate:0 16px; transition:opacity .7s var(--em-ease), translate .7s var(--em-ease); }
.kb-js.kb-motion-ok .kb-rv.is-in{ opacity:1; translate:0 0; }

/* the closing call to action, over the homepage's data-hall aisle (assets/js/home-v3/ending.js), laid out as the
   homepage's closing: the words centred, a soft shade under them, the aisle's vanishing point below */
.kb-close{ container-type:inline-size; min-height:clamp(480px, 38vw, 540px); }
.kb-close.kb-stage::after{ background:radial-gradient(62% 58% at 50% 34%, rgba(var(--em-scrim),.9) 0%, rgba(var(--em-scrim),.76) 50%, rgba(var(--em-scrim),0) 100%); }
.kb-close-in{ position:relative; z-index:2; display:grid; justify-items:center; max-width:820px; padding-top:88px; text-align:center; }
.kb-close h2{ font:600 clamp(34px, 26px + 2.4vw, 60px)/1.04 var(--em-font-display); letter-spacing:-.035em; }
.kb-close .kb-lead{ max-width:56ch; margin-top:20px; }
.kb-close .kb-ctas{ justify-content:center; margin-top:32px; }
@container (max-width:760px){
    .kb-close.kb-stage::after{ background:linear-gradient(180deg, rgba(var(--em-scrim),.9) 0%, rgba(var(--em-scrim),.84) calc(100% - 184px), rgba(var(--em-scrim),0) calc(100% - 96px)); }
    .kb-close-in{ padding-bottom:184px; }
}
@media (max-width:719.98px){ .kb-close-in{ padding-top:64px; } }

/* ======================================== an article ======================================== */
.kb-art .kb-hero-in{ display:grid; grid-template-columns:minmax(0,1fr); padding:48px 0 0; }
.kb-art .kb-hero h1{ margin-top:20px; font:600 clamp(32px, 26px + 2vw, 54px)/1.06 var(--em-font-display); letter-spacing:-.032em; max-width:17em; overflow-wrap:break-word; }
.kb-symp{ display:grid; gap:8px; margin-top:24px; max-width:640px; }
.kb-symp li{ display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-radius:10px; border:1px solid color-mix(in srgb, var(--em-attack) 30%, var(--em-line));
    background:color-mix(in srgb, var(--em-attack) 7%, var(--em-stage)); }
.kb-symp .kb-i{ width:16px; height:16px; margin-top:2px; color:var(--em-attack); }
.kb .kb-symp code{ min-width:0; padding:0; background:none; border:0; font:400 13px/1.5 var(--em-font-mono); color:var(--em-text-1); overflow-wrap:anywhere; white-space:normal; }
.kb-meta{ display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:24px; padding:20px 0 28px; font:400 13px/1.45 var(--em-font-text); color:var(--em-text-2); }
.kb-meta li{ display:inline-flex; align-items:center; gap:8px; }
.kb-meta .kb-i{ width:16px; height:16px; color:var(--em-text-3); }
.kb-art .kb-slot{ width:100%; height:clamp(200px, 56vw, 300px); }
.kb-art .kb-hero-foot{ position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px; border-top:1px solid var(--em-line); }
.kb-art .kb-hero-foot .kb-meta{ margin:0; }
@media (min-width:1024px){
    .kb-art .kb-hero-in{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:center; gap:var(--em-col-gap); min-height:440px; padding:56px 0 40px; }
    .kb-art .kb-slot{ height:400px; }
}

/* the body beside its contents and its call to action (sticky from 1024; under 1024 the contents come first) */
.kb-body{ padding:64px 0 var(--em-sec-pad); }
.kb-body-in{ display:grid; grid-template-columns:minmax(0,1fr); gap:32px; }
.kb-aside{ display:contents; }
.kb-toc{ order:-1; border:1px solid var(--em-line); border-radius:12px; background:var(--em-surface); }
.kb-toc summary{ display:flex; align-items:center; gap:10px; min-height:52px; padding:0 16px; list-style:none; cursor:pointer; font:500 14px/1.3 var(--em-font-text); color:var(--em-text-1); }
.kb-toc summary::-webkit-details-marker{ display:none; }
.kb-toc summary .kb-i{ width:16px; height:16px; color:var(--em-text-3); }
.kb-toc summary .kb-i:last-child{ margin-left:auto; transition:rotate 220ms var(--em-ease); }
.kb-toc[open] summary .kb-i:last-child{ rotate:180deg; }
.kb-toc ol{ padding:0 8px 12px; }
.kb-toc a{ position:relative; display:block; padding:9px 8px 9px 16px; border-radius:6px; font:400 14px/1.4 var(--em-font-text); color:var(--em-text-2); transition:color 160ms var(--em-ease); }
.kb-toc a::before{ content:""; position:absolute; left:4px; top:10px; bottom:10px; width:2px; border-radius:2px; background:transparent; transition:background-color 220ms var(--em-ease); }
.kb .kb-toc a:hover{ color:var(--em-text-1); }
.kb .kb-toc a[aria-current="true"]{ color:var(--em-text-1); }
.kb-toc a[aria-current="true"]::before{ background:var(--em-brand); }
.kb-cta{ order:2; padding:var(--em-card-pad); border:1px solid var(--em-line); border-radius:16px; background:var(--em-surface); }
.kb-cta h3{ font-size:19px; }
.kb-cta p{ margin-top:8px; font:400 14px/1.55 var(--em-font-text); color:var(--em-text-2); }
.kb-cta .kb-btn{ margin-top:20px; width:100%; }
@media (min-width:1024px){
    .kb-body-in{ grid-template-columns:minmax(0,1fr) 300px; gap:72px; align-items:start; }
    .kb-aside{ display:grid; gap:16px; position:sticky; top:108px; }
    .kb-toc{ border:0; background:none; border-radius:0; }
    .kb-toc summary{ min-height:0; padding:0 0 12px; cursor:default; pointer-events:none; color:var(--em-text-2); font-size:13px; }
    .kb-toc summary .kb-i:last-child{ display:none; }
    .kb-toc ol{ padding:0; border-left:1px solid var(--em-line); }
    .kb-toc a{ padding-left:16px; border-radius:0 6px 6px 0; }
    .kb-toc a::before{ left:-1px; top:6px; bottom:6px; }
    .kb-cta{ margin-top:16px; }
}

/* the article's own text */
.kb-prose{ max-width:720px; min-width:0; font:400 17px/1.75 var(--em-font-text); color:var(--em-text-2); }
.kb-prose > * + *{ margin-top:20px; }
.kb .kb-prose .kb-p-lead{ font:400 var(--em-fs-lead)/1.6 var(--em-font-text); color:var(--em-text-1); letter-spacing:-.006em; }
.kb .kb-prose h2{ margin-top:56px; font-size:clamp(24px, 21px + .8vw, 30px); line-height:1.2; letter-spacing:-.022em; }
.kb .kb-prose h2 + *{ margin-top:16px; }
.kb .kb-prose a{ color:var(--em-text-1); text-decoration-line:underline !important; text-decoration-color:var(--em-brand-line) !important;
    text-decoration-thickness:1px !important; text-underline-offset:3px; transition:text-decoration-color 160ms var(--em-ease); }
.kb .kb-prose a:hover{ text-decoration-color:var(--em-brand-text) !important; }
.kb .kb-prose code.kb-nw{ white-space:nowrap; }
.kb .kb-prose :not(pre) > code{ padding:.12em .38em; border-radius:6px; border:1px solid var(--em-line); background:var(--em-surface-2);
    font:400 .86em/1.4 var(--em-font-mono); color:var(--em-text-1); overflow-wrap:anywhere; white-space:normal; }
.kb-prose ul > li{ position:relative; padding-left:24px; }
.kb-prose ul > li + li, .kb-prose ol > li + li{ margin-top:10px; }
.kb-prose ul > li::before{ content:""; position:absolute; left:4px; top:.72em; width:6px; height:6px; border-radius:2px; background:var(--em-brand-mark); }
.kb-prose ol{ counter-reset:kb-step; }
.kb-prose ol > li{ position:relative; padding-left:44px; counter-increment:kb-step; }
.kb-prose ol > li::before{ content:counter(kb-step) / ""; position:absolute; left:0; top:0; display:grid; place-items:center; width:28px; height:28px; margin-top:-.05em;
    border-radius:8px; border:1px solid var(--em-line-strong); font:500 13px/1 var(--em-font-display); color:var(--em-text-1); font-variant-numeric:tabular-nums; }
.kb-prose blockquote{ padding:4px 0 4px 20px; border-left:2px solid var(--em-brand-mark); font:500 var(--em-fs-h3)/1.45 var(--em-font-display); letter-spacing:-.012em; color:var(--em-text-1); }
.kb-callout{ display:flex; gap:14px; align-items:flex-start; padding:20px; border-radius:12px; border:1px solid var(--em-line); background:var(--em-surface); }
.kb-callout > .kb-i{ color:var(--em-brand-mark); margin-top:3px; }
.kb-callout b{ display:block; font:500 16px/1.4 var(--em-font-text); color:var(--em-text-1); }
.kb .kb-callout p{ margin-top:4px; font:400 15px/1.65 var(--em-font-text); color:var(--em-text-2); }
/* code is a terminal: the night stage's ground in both themes, with a copy button that script adds */
.kb-code{ position:relative; border-radius:12px; background:var(--em-stage); border:1px solid var(--em-line); color-scheme:dark; }
.kb .kb-code pre{ margin:0; padding:18px 20px; overflow-x:auto; background:none; border:0; border-radius:12px; }
.kb .kb-code code{ display:block; padding:0; background:none; border:0; font:400 13.5px/1.7 var(--em-font-mono); color:var(--em-night-text-1); white-space:pre; }
/* the copy button has a bar of its own above the code, so a long line never runs under it */
.kb-code.has-copy{ padding-top:40px; }
.kb-code.has-copy::before{ content:""; position:absolute; left:0; right:0; top:40px; border-top:1px solid var(--em-night-line); }
.kb .kb-copy{ position:absolute; top:2px; right:4px; display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 10px; border-radius:8px;
    border:1px solid var(--em-night-line-strong); font:500 12px/1 var(--em-font-text); color:var(--em-night-text-2); background:var(--em-stage);
    transition:color 160ms var(--em-ease), border-color 160ms var(--em-ease); }
.kb .kb-copy:hover{ color:var(--em-night-text-1); border-color:var(--em-night-line-control); }
.kb .kb-copy:focus-visible{ outline-color:var(--em-night-brand-text); }
.kb-copy .kb-i{ width:14px; height:14px; }
.kb-copy .kb-i-done, .kb-copy.is-done .kb-i-copy{ display:none; }
.kb-copy.is-done .kb-i-done{ display:inline-block; color:var(--em-night-success); }
/* touch: the breadcrumb, the contents and the copy button reach 44 px */
@media (pointer:coarse){
    .kb-kicker a{ min-height:44px; }
    .kb-toc a{ padding-block:12px; }
    .kb .kb-copy{ height:44px; top:0; }
    .kb-code.has-copy{ padding-top:46px; }
    .kb-code.has-copy::before{ top:46px; }
}

.kb-table{ overflow-x:auto; border:1px solid var(--em-line); border-radius:12px; background:var(--em-surface); }
/* the chrome gives every table min-width:560px !important (.primary-content table); a KB table fits its column and wraps */
body.page-kb-article .kb .kb-table table{ min-width:0 !important; }
.kb .kb-table table{ width:100%; border-collapse:collapse; font:400 15px/1.5 var(--em-font-text); background:none; margin:0; }
/* the chrome sets every table head 11px/800 in its own colours, all !important (.primary-content table>thead>tr>th) */
body.page-kb-article .kb .kb-table th{ padding:12px 16px !important; text-align:left; text-transform:none !important; letter-spacing:0 !important; font:500 13px/1.3 var(--em-font-text) !important;
    color:var(--em-text-2) !important; background:var(--em-surface-2) !important; border:0 !important; border-bottom:1px solid var(--em-line) !important; }
.kb .kb-table td{ padding:12px 16px; color:var(--em-text-2); border:0; border-top:1px solid var(--em-line); background:none; }
.kb .kb-table tr:first-child td{ border-top:0; }
.kb .kb-table td:first-child{ color:var(--em-text-1); font-weight:500; }
/* figures and flags never break inside ("5 – 20", "-Xmx"), and the label column keeps a readable measure: the table
   scrolls in its own box instead */
.kb .kb-table td:not(:first-child), .kb .kb-table th:not(:first-child){ white-space:nowrap; }
.kb .kb-table td:first-child{ min-width:11em; }
.kb-figure{ margin:0; }
.kb-figure svg{ display:block; max-width:100%; height:auto; }
.kb-figure figcaption{ margin-top:8px; font:400 13px/1.45 var(--em-font-text); color:var(--em-text-3); }
.kb .kb-legal{ margin-top:40px; padding-top:20px; border-top:1px solid var(--em-line); font:400 13px/1.5 var(--em-font-text); color:var(--em-text-3); }

/* the questions: the homepage's accordion, the head beside the list from 1024 */
.kb-faq{ display:grid; gap:var(--em-head-gap); }
.kb-acc > details{ border-top:1px solid var(--em-line); }
.kb-acc > details:last-child{ border-bottom:1px solid var(--em-line); }
.kb-acc summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px; padding:16px 0; list-style:none; cursor:pointer;
    font:500 16px/1.4 var(--em-font-text); color:var(--em-text-1); }
.kb-acc summary::-webkit-details-marker{ display:none; }
.kb-acc summary .kb-i{ color:var(--em-text-3); transition:rotate 220ms var(--em-ease), color 220ms var(--em-ease); }
.kb-acc details[open] > summary .kb-i{ rotate:45deg; color:var(--em-text-1); }
@media (hover:hover){ .kb-acc summary:hover .kb-i{ color:var(--em-text-1); } }
.kb .kb-acc details > p{ max-width:68ch; padding:0 40px 20px 0; color:var(--em-text-2); }
.kb-acc details::details-content{ height:0; overflow:clip; transition:height .4s var(--em-ease), content-visibility .4s allow-discrete; }
.kb-acc details[open]::details-content{ height:auto; }
@media (min-width:1024px){ .kb-faq{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--em-col-gap); } }

/* further reading: a row that slides (scroll-snap; the arrows only move it), then the related articles */
.kb-head{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-bottom:32px; }
.kb-head p{ font:400 var(--em-fs-lead)/1.55 var(--em-font-text); color:var(--em-text-2); max-width:52ch; }
.kb-head-ctl{ display:flex; gap:8px; }
@media (min-width:1024px){ .kb-head{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:16px var(--em-col-gap); align-items:start; } .kb-head > div:last-child{ display:grid; gap:16px; } .kb-head-ctl{ justify-content:flex-end; } }
.kb-track{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 2 * var(--em-card-gap)) / 3); gap:var(--em-card-gap); overflow-x:auto;
    scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.kb-track::-webkit-scrollbar{ display:none; }
.kb-track > li{ scroll-snap-align:start; display:flex; }
@media (max-width:1023.98px){ .kb-track{ grid-auto-columns:calc((100% - var(--em-card-gap)) / 2); } }
@media (max-width:719.98px){
    .kb-track{ grid-auto-columns:86%; margin:0 -20px; padding:0 20px; scroll-padding-inline:20px; }
    .kb-head-ctl{ display:none; }
}
.kb-card{ position:relative; display:flex; flex-direction:column; gap:8px; width:100%; padding:var(--em-card-pad); border:1px solid var(--em-line); border-radius:16px; background:var(--em-surface);
    transition:border-color 160ms var(--em-ease); }
.kb-card h3{ font-size:18px; line-height:1.35; }
.kb-card h3 a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.kb-card h3 a:focus-visible{ outline:none; }
.kb-card:has(a:focus-visible){ outline:2px solid var(--em-focus); outline-offset:-2px; }
.kb-card p{ font:400 14px/1.55 var(--em-font-text); color:var(--em-text-2); }
.kb-card .kb-card-key{ font:500 13px/1.3 var(--em-font-text); color:var(--em-text-3); }
.kb-card .kb-card-go{ display:inline-flex; align-items:center; gap:4px; margin-top:auto; padding-top:12px; font:500 14px/1.5 var(--em-font-text); color:var(--em-brand-text); }
.kb-card .kb-card-go .kb-i{ width:16px; height:16px; transition:translate 220ms var(--em-ease); }
@media (hover:hover){ .kb-card:hover{ border-color:var(--em-line-strong); } .kb-card:hover .kb-card-go .kb-i{ translate:4px 0; } }
.kb-related{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--em-card-gap); }
@media (min-width:720px){ .kb-related{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.kb-sec + .kb-sec.is-flush{ padding-top:0; }

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