/* Stabilize scrollbar gutter on the host document so navigating between
   long and short topics does not shift the page width. */
html{scrollbar-gutter:stable}
.a2l-docs{
  --a2l-bg:#ffffff;--a2l-bg-alt:#f3f4f6;--a2l-bg-card:#f8f9fa;
  --a2l-teal:#1dc598;--a2l-text:#111827;--a2l-text-soft:#374151;--a2l-muted:#6b7280;
  --a2l-border:#e5e7eb;--a2l-border-strong:#d1d5db;
  --a2l-radius:6px;--a2l-radius-lg:10px;
  background:var(--a2l-bg);color:var(--a2l-text);
  font-family:'Sora',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:13px;line-height:1.55;
  position:relative;width:100%;
  /* Full-width layout: no card framing, no fixed-height frame, no inner scrolling.
     The page scrolls naturally; the left nav and right TOC are made sticky below
     in their own rules so they stay in view while the article body scrolls. */
}
.a2l-docs *,.a2l-docs *::before,.a2l-docs *::after{box-sizing:border-box}
.a2l-docs h1,.a2l-docs h2,.a2l-docs h3,.a2l-docs h4{
  font-family:'Sora',system-ui,sans-serif;font-weight:500;line-height:1.3;
  margin:0;color:var(--a2l-text);
}
.a2l-docs p{margin:0}
.a2l-docs a{color:var(--a2l-teal);text-decoration:none}
.a2l-docs a:hover{text-decoration:underline}
.a2l-docs code{
  font-family:'DM Mono','SF Mono',Menlo,Consolas,monospace;font-size:.92em;
  background:#f3f4f6;padding:1px 5px;border-radius:3px;
  border:1px solid #e5e7eb;color:#059669;
}

/* === TOP BAR === */
.a2l-topbar{
  display:flex;align-items:center;gap:14px;padding:11px 18px;
  border-bottom:1px solid #2a2d31;background:#1a1c1e;
  flex:0 0 auto;z-index:10;min-height:46px;
}
.a2l-brand{
  color:var(--a2l-teal);font-size:11px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}
.a2l-search-wrap{margin-left:auto;position:relative;width:300px;max-width:100%}
.a2l-search-input{
  width:100%;background:#222426;border:1px solid #2a2d31;
  border-radius:var(--a2l-radius);color:#e8e8eb;
  font-family:inherit;font-size:12px;padding:6px 32px 6px 30px;outline:none;
  transition:border-color .15s,background-color .15s;
}
.a2l-search-input::placeholder{color:#a2a5b9}
.a2l-search-input:focus{border-color:var(--a2l-teal);background:#28292c}
.a2l-search-icon{
  position:absolute;left:9px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:#a2a5b9;display:flex;
}
.a2l-search-kbd{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  background:#1a1c1e;border:1px solid #2a2d31;border-radius:3px;
  font-family:'DM Mono',monospace;font-size:10px;color:#a2a5b9;
  padding:1px 5px;pointer-events:none;line-height:1.2;
}
@media(max-width:560px){
  .a2l-search-wrap{width:auto;flex:1}
  .a2l-search-kbd{display:none}
}

/* === BODY === */
.a2l-docs-body{
  display:grid;grid-template-columns:220px 1fr;
  position:relative;background:var(--a2l-bg);
}
@media(max-width:860px){.a2l-docs-body{grid-template-columns:1fr;background:var(--a2l-bg)}}

/* === NAV TREE ===
   Sticky to the viewport so the nav stays in view as the article body scrolls.
   align-self:start prevents the grid from stretching the nav to row height,
   which would break position:sticky. height:100vh + overflow-y:auto gives the
   nav its own internal scrollbar when the tree is taller than the viewport. */
.a2l-nav{
  border-right:1px solid #2a2d31;background:#1a1c1e;
  padding:12px 0;
  font-size:11px;
  position:sticky;top:0;align-self:start;
  height:100vh;overflow-y:auto;z-index:5;
}
.a2l-nav::-webkit-scrollbar{width:6px}
.a2l-nav::-webkit-scrollbar-track{background:transparent}
.a2l-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}
.a2l-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.14)}
@media(max-width:860px){
  .a2l-nav{
    position:static;height:auto;max-height:300px;
    border-right:none;border-bottom:1px solid #2a2d31;
  }
}
@media(max-width:860px){
  .a2l-main{border-top-left-radius:0}
  .a2l-docs-body::after{display:none}
}



/* === NOTCH FILL ===
   Local dark extension at the top-right of the nav rail. The white .a2l-main
   panel has a 10px rounded top-left corner that curves AWAY from the rail.
   This pseudo fills that corner with dark so the curve is visible. */
.a2l-docs-body::after{
  content:"";position:absolute;top:0;left:220px;
  width:10px;height:10px;background:#1a1c1e;
  z-index:0;pointer-events:none;
}
.a2l-nav-group{margin-bottom:2px}
.a2l-nav-group.is-empty{display:none}
.a2l-nav-group-head{
  display:flex;align-items:center;gap:6px;width:100%;
  background:none;border:none;color:#fff;
  font-family:inherit;font-size:11px;font-weight:500;
  padding:4px 14px;cursor:pointer;text-align:left;letter-spacing:.005em;
  transition:color .15s;line-height:1.5;
}
.a2l-nav-group-head:hover{color:var(--a2l-teal)}
.a2l-nav-caret{
  display:inline-block;width:9px;font-size:8px;color:#fff;
  text-align:center;line-height:1;flex-shrink:0;
}
.a2l-nav-caret::before{content:'\25BC'}
.a2l-nav-group.is-collapsed .a2l-nav-caret::before{content:'\25B6'}
.a2l-nav-group.is-collapsed .a2l-nav-items{display:none}
.a2l-nav-items{display:flex;flex-direction:column;margin-bottom:4px}
.a2l-docs .a2l-nav-item{
  display:block;padding:3px 14px 3px 50px;color:#a2a5b9;
  font-size:11px;border-left:2px solid transparent;cursor:pointer;
  transition:color .12s,background-color .12s,border-color .12s;
  line-height:1.5;text-decoration:none;
}
.a2l-docs .a2l-nav-item:hover{color:#fff;background:rgba(255,255,255,.04);text-decoration:none}
.a2l-docs .a2l-nav-item.is-active{
  color:#fff;background:rgba(29,197,152,.13);
  border-left-color:var(--a2l-teal);font-weight:500;
}
.a2l-nav-item.is-hidden{display:none}
.a2l-nav-item mark{background:rgba(29,197,152,.2);color:var(--a2l-teal);padding:0 2px;border-radius:2px}

/* === MAIN ===
   Scrolls with the page naturally — no internal overflow, no fixed height. */
.a2l-main{
  padding:24px 32px 48px;min-width:0;
  background:#fff;
  position:relative;z-index:1;
}
@media(max-width:760px){.a2l-main{padding:20px 22px 36px}}

/* === TOPIC === */
.a2l-topic{display:none;max-width:760px}
.a2l-topic.is-active{display:block}

.a2l-breadcrumb{
  font-size:10px;font-family:'DM Mono','SF Mono',Menlo,monospace;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--a2l-muted);margin-bottom:8px;
}
.a2l-breadcrumb .sep{color:var(--a2l-border-strong);margin:0 6px}

.a2l-topic h2{
  font-size:22px;font-weight:500;margin-bottom:10px;letter-spacing:-.005em;
  color:var(--a2l-text);
}
.a2l-topic-lead{
  font-size:14px;color:var(--a2l-text-soft);line-height:1.65;margin-bottom:22px;
  font-weight:400;
}
.a2l-topic-body{font-size:13px;line-height:1.7;color:var(--a2l-text-soft)}
.a2l-topic-body p{margin-bottom:14px}
.a2l-topic-body p:last-child{margin-bottom:0}
.a2l-topic-body strong{color:var(--a2l-text);font-weight:500}

/* Section label */
.a2l-section{margin:22px 0 0}
.a2l-section-label{
  display:block;font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--a2l-teal);
  font-family:'DM Mono','SF Mono',Menlo,monospace;margin-bottom:8px;
}
.a2l-section-label.muted{color:var(--a2l-muted)}
.a2l-section-label.amber{color:#d4b14a}

/* Bordered list */
.a2l-bordered{
  border-left:2px solid var(--a2l-teal);
  padding:2px 0 2px 14px;color:var(--a2l-muted);
  font-size:12.5px;line-height:1.75;
}
.a2l-bordered.amber{border-left-color:#d4b14a}

/* Code block */
.a2l-code{
  background:var(--a2l-bg-alt);border:1px solid var(--a2l-border);
  border-radius:var(--a2l-radius);padding:9px 12px;margin:12px 0 0;
  font-family:'DM Mono','SF Mono',Menlo,monospace;font-size:12px;
  color:var(--a2l-text-soft);overflow-x:auto;line-height:1.6;
}
.a2l-code .tok-cmd{color:var(--a2l-muted)}
.a2l-code .tok-flag{color:var(--a2l-teal)}
.a2l-code .tok-str{color:var(--a2l-text)}

/* Inline link */
.a2l-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--a2l-teal)!important;font-size:11px;font-weight:500;
  text-decoration:none!important;transition:transform .15s;
  font-family:'DM Mono','SF Mono',Menlo,monospace;letter-spacing:.08em;
  text-transform:uppercase;
}
.a2l-link:hover{transform:translateX(2px);text-decoration:none!important}

/* === SEARCH RESULTS === */
.a2l-results{display:none;max-width:760px}
.a2l-results-head{
  font-size:10px;font-family:'DM Mono','SF Mono',Menlo,monospace;letter-spacing:.12em;
  color:var(--a2l-muted);margin-bottom:14px;text-transform:uppercase;
}
.a2l-result{
  display:block;background:var(--a2l-bg-alt);border:1px solid var(--a2l-border);
  border-radius:var(--a2l-radius);padding:11px 14px;margin-bottom:8px;
  text-decoration:none!important;color:var(--a2l-text);cursor:pointer;
  transition:border-color .12s,background-color .12s;
}
.a2l-result:hover{border-color:rgba(29,197,152,.4);background:#ffffff;text-decoration:none}
.a2l-result-cat{
  font-size:9px;font-family:'DM Mono','SF Mono',Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--a2l-muted);margin-bottom:4px;
}
.a2l-result-title{font-size:13px;font-weight:500;color:var(--a2l-text);margin-bottom:3px}
.a2l-result-snippet{font-size:11.5px;color:var(--a2l-muted);line-height:1.5}
.a2l-result mark{
  background:rgba(29,197,152,.2);color:var(--a2l-teal);padding:0 2px;border-radius:2px;
}

/* === EMPTY === */
.a2l-empty{display:none;max-width:440px;text-align:center;margin:50px auto;padding:30px 22px}
.a2l-empty-icon{
  width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.04);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
  color:var(--a2l-muted);
}
.a2l-empty h3{font-size:15px;margin-bottom:6px;color:var(--a2l-text);font-weight:500}
.a2l-empty p{font-size:12.5px;color:var(--a2l-muted);line-height:1.6}
.a2l-empty-q{color:var(--a2l-teal);font-family:'DM Mono','SF Mono',Menlo,monospace}

.a2l-reader{display:block}


/* ===================================================================
   RICH CONTENT MODULE — dark-theme versions of step/section/screenshot
   patterns used in the long-form documentation pages.
   =================================================================== */

/* Hero eyebrow + step nav chips (top of long articles) */
.a2l-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--a2l-teal);margin-bottom:10px;
  font-family:'DM Mono','SF Mono',Menlo,monospace;
}
.a2l-eyebrow::before{content:'';width:18px;height:1px;background:var(--a2l-teal);display:inline-block}

.a2l-step-nav{
  display:flex;flex-wrap:wrap;margin:20px 0 30px;
  background:var(--a2l-bg-alt);border:1px solid var(--a2l-border);
  border-radius:var(--a2l-radius);overflow:hidden;
}
.a2l-sn-item{
  flex:1;min-width:120px;display:flex;align-items:center;gap:8px;
  padding:8px 11px;border-right:1px solid var(--a2l-border);
  text-decoration:none!important;transition:background .15s;color:var(--a2l-muted);
}
.a2l-sn-item:last-child{border-right:none}
.a2l-sn-item:hover{background:rgba(29,197,152,.06);text-decoration:none}
.a2l-sn-num{
  width:20px;height:20px;border-radius:50%;
  background:rgba(29,197,152,.13);border:1px solid rgba(29,197,152,.3);
  font-size:9.5px;font-weight:700;color:var(--a2l-teal);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:'DM Mono',monospace;
}
.a2l-sn-lbl{font-size:10px;font-weight:500;color:var(--a2l-muted);line-height:1.35}

/* Phase label divider */
.a2l-phase{display:flex;align-items:center;gap:14px;margin:36px 0 26px}
.a2l-phase-text{
  font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--a2l-muted);white-space:nowrap;font-family:'DM Mono',monospace;
}
.a2l-phase-line{flex:1;height:1px;background:var(--a2l-border)}

/* Step blocks — numbered walkthrough steps */
.a2l-step{margin-bottom:36px}
.a2l-step-hdr{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.a2l-step-badge{
  flex-shrink:0;width:34px;height:34px;border-radius:8px;
  background:var(--a2l-teal);color:var(--a2l-bg);font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(29,197,152,.22);
  font-family:'Sora',sans-serif;
}
.a2l-step-meta{padding-top:1px;min-width:0}
.a2l-step-label{
  font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--a2l-teal);margin-bottom:2px;font-family:'DM Mono',monospace;
}
.a2l-step-title{
  font-size:15px;font-weight:500;color:var(--a2l-text);
  letter-spacing:-.005em;line-height:1.3;
}
.a2l-step-body{margin-left:48px}
.a2l-step-body p{margin-bottom:12px;color:var(--a2l-text-soft)}
.a2l-step-body p:last-child{margin-bottom:0}
.a2l-step-body ul,.a2l-step-body ol{
  margin:0 0 12px 18px;color:var(--a2l-text-soft);line-height:1.85;
}
.a2l-step-body li{margin-bottom:2px}
.a2l-step-divider{height:1px;background:var(--a2l-border);margin:0 0 36px;border:none}

/* Section blocks — for reference docs (no numbering, SVG icon) */
.a2l-doc-section{margin-bottom:36px}
.a2l-doc-section-hdr{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.a2l-doc-section-badge{
  flex-shrink:0;width:34px;height:34px;border-radius:8px;
  background:rgba(29,197,152,.13);border:1px solid rgba(29,197,152,.4);
  display:flex;align-items:center;justify-content:center;
}
.a2l-doc-section-badge svg{
  width:16px;height:16px;stroke:var(--a2l-teal);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.a2l-doc-section-meta{padding-top:1px;min-width:0}
.a2l-doc-section-label{
  font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--a2l-teal);margin-bottom:2px;font-family:'DM Mono',monospace;
}
.a2l-doc-section-title{
  font-size:15px;font-weight:500;color:var(--a2l-text);
  letter-spacing:-.005em;line-height:1.3;
}
.a2l-doc-section-body{margin-left:48px}
.a2l-doc-section-body p{margin-bottom:12px;color:var(--a2l-text-soft)}
.a2l-doc-section-body p:last-child{margin-bottom:0}
.a2l-doc-section-body ul,.a2l-doc-section-body ol{
  margin:0 0 12px 18px;color:var(--a2l-text-soft);line-height:1.85;
}
.a2l-doc-section-body li{margin-bottom:2px}

.a2l-sub-title{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--a2l-text);margin:20px 0 10px;
  padding-bottom:6px;border-bottom:1px solid var(--a2l-border);
  font-family:'DM Mono',monospace;
}

/* Inline tag pill (e.g., field names like "Resource group") */
.a2l-docs .a2l-tag{
  display:inline-flex;align-items:center;background:rgba(29,197,152,.1);
  border:1px solid rgba(29,197,152,.3);border-radius:4px;padding:1px 7px;
  font-size:11.5px;font-weight:600;color:var(--a2l-teal);
  font-family:inherit;line-height:1.5;
}
/* Inline mono pill (e.g., `mrg-art2linkesb-...`) */
.a2l-docs .a2l-mono{
  font-family:'DM Mono','SF Mono',Menlo,monospace;font-size:11.5px;
  background:#f3f4f6;border:1px solid #e5e7eb;
  border-radius:3px;padding:1px 6px;color:#059669;line-height:1.5;
}

/* Screenshot wrapper with browser-style chrome bar */
.a2l-ss{
  margin:18px 0;border:1px solid var(--a2l-border);border-radius:var(--a2l-radius);
  overflow:hidden;background:var(--a2l-bg-alt);cursor:zoom-in;
  transition:box-shadow .2s,border-color .2s;
}
.a2l-ss:hover{
  box-shadow:0 0 0 1px var(--a2l-teal),0 6px 20px rgba(29,197,152,.12);
  border-color:var(--a2l-teal);
}
.a2l-ss-bar{
  background:#f9fafb;border-bottom:1px solid var(--a2l-border);
  padding:7px 12px;display:flex;align-items:center;gap:8px;
}
.a2l-ss-dots{display:flex;gap:5px}
.a2l-ss-dots span{width:9px;height:9px;border-radius:50%;background:#d1d5db}
.a2l-ss-cap{
  font-size:11px;color:var(--a2l-muted);
  font-family:'DM Mono','SF Mono',Menlo,monospace;margin-left:4px;
}
.a2l-ss img{width:100%;display:block}

/* Note (amber, info-icon) */
.a2l-note{
  background:#fffbeb;border-left:3px solid #f59e0b;
  border-radius:0 4px 4px 0;padding:11px 14px;margin:16px 0;
  font-size:12.5px;color:#78350f;display:flex;gap:10px;line-height:1.65;
}
.a2l-note-icon{flex-shrink:0;font-size:14px;line-height:1.6;color:#f59e0b}
.a2l-note strong{color:var(--a2l-text);font-weight:500}

/* Warning (red, danger-icon) */
.a2l-warn{
  background:rgba(239,68,68,.07);border-left:3px solid #ef4444;
  border-radius:0 4px 4px 0;padding:11px 14px;margin:16px 0;
  font-size:12.5px;color:#7f1d1d;display:flex;gap:10px;line-height:1.65;
}
.a2l-warn-icon{flex-shrink:0;font-size:14px;line-height:1.6;color:#ef4444}
.a2l-warn strong{color:var(--a2l-text);font-weight:500}

/* Inline callout (teal-tinted, preserved from existing pattern, refined) */
.a2l-callout{
  background:rgba(29,197,152,.06);border-left:3px solid var(--a2l-teal);
  border-radius:0 4px 4px 0;padding:11px 14px;margin:16px 0;
  font-size:12.5px;color:var(--a2l-text-soft);line-height:1.65;
}
.a2l-callout strong{color:var(--a2l-text);font-weight:500}

/* Prerequisites block (top of long guides) */
.a2l-prereq{
  background:#1a1c1e;border:1px solid #2a2d31;border-radius:10px;
  padding:16px 20px;margin:0 0 22px;
}
.a2l-prereq-title{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--a2l-teal);margin-bottom:10px;
  font-family:'DM Mono','SF Mono',Menlo,monospace;
}
.a2l-prereq-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.a2l-prereq-row:last-child{margin-bottom:0}
.a2l-prereq-icon{
  flex-shrink:0;width:20px;height:20px;border-radius:50%;
  background:rgba(29,197,152,.15);border:1px solid rgba(29,197,152,.25);
  display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.a2l-prereq-icon svg{stroke:var(--a2l-teal);fill:none;stroke-width:3}
.a2l-prereq-text{font-size:13px;color:#a2a5b9;line-height:1.5}
.a2l-prereq-text strong{color:#fcfcfc;font-weight:600}

/* Value tables (Field/Value, Permission/Purpose, etc) */
.a2l-vals{
  width:100%;border-collapse:collapse;margin:14px 0;font-size:12.5px;
  background:var(--a2l-bg-alt);border:1px solid var(--a2l-border);
  border-radius:var(--a2l-radius);overflow:hidden;
}
.a2l-vals thead{background:rgba(0,0,0,.025)}
.a2l-vals th{
  text-align:left;padding:8px 12px;font-weight:600;color:var(--a2l-text);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  font-family:'DM Mono',monospace;border-bottom:1px solid var(--a2l-border);
}
.a2l-vals td{
  padding:8px 12px;border-bottom:1px solid var(--a2l-border);
  color:var(--a2l-text-soft);vertical-align:top;line-height:1.6;
}
.a2l-vals tr:last-child td{border-bottom:none}
.a2l-vals td:first-child{font-weight:500;color:var(--a2l-text);width:35%}

/* Code block (multi-line, with optional title bar) */
.a2l-codeblock,.code-block{
  background:#1a1c1e;border:1px solid #2a2d31;border-radius:10px;
  overflow:hidden;margin:18px 0;
}
.a2l-codeblock-bar,.code-bar{
  background:#151719;border-bottom:1px solid #2a2d31;
  padding:7px 14px;display:flex;align-items:center;justify-content:space-between;
  font-family:'DM Mono','SF Mono',Menlo,monospace;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:#6b7280;
}
.a2l-docs .code-lang{font-family:'DM Mono','SF Mono',Menlo,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6b7280}
.a2l-docs .code-file{font-family:'DM Mono','SF Mono',Menlo,monospace;font-size:11px;color:#a2a5b9}

.a2l-codeblock pre,.code-block pre{
  margin:0;padding:16px 20px;overflow-x:auto;
  font-family:'DM Mono','SF Mono',Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.65;color:#c8d4e8;
}
/* Syntax-color tokens — exact live-site values, designed for dark code-block bg */
.a2l-docs .kw{color:#a87bc4}        /* C# keyword */
.a2l-docs .tp{color:#7eb8f7}        /* C# type */
.a2l-docs .pr{color:#1dc598}        /* C# property */
.a2l-docs .at{color:#fb7185}        /* C# attribute / annotation */
.a2l-docs .str{color:#84cc16}       /* C# string */
.a2l-docs .cm{color:#6b7280;font-style:italic}  /* C# comment */
.a2l-docs .fn{color:#f5a855}        /* C# function */
.a2l-docs .xk{color:#a87bc4}        /* XML/XSLT tag */
.a2l-docs .xa{color:#f5a855}        /* XML/XSLT attribute */
.a2l-docs .xv{color:#84cc16}        /* XML/XSLT value */
.a2l-docs .xt{color:#7eb8f7}        /* XML text content */
.a2l-docs .xc{color:#6b7280;font-style:italic}  /* XML comment */
/* Legacy single-letter tokens (forward-compatibility) */
.a2l-codeblock pre .k,.code-block pre .k{color:#a87bc4}
.a2l-codeblock pre .s,.code-block pre .s{color:#84cc16}
.a2l-codeblock pre .c,.code-block pre .c{color:#6b7280;font-style:italic}
.a2l-codeblock pre .t,.code-block pre .t{color:#a87bc4}
.a2l-codeblock pre .a,.code-block pre .a{color:#1dc598}
.a2l-codeblock pre .n,.code-block pre .n{color:#f5a855}/* Guard against unsized inline <svg> in article bodies blowing up to viewBox size.
   Only constrains SVGs that have NO width attribute set explicitly. */
.a2l-topic-body svg:not([width]),
.a2l-step-body svg:not([width]),
.a2l-doc-section-body svg:not([width]){
  width:18px;height:18px;flex-shrink:0;
}
/* Override: SVGs nested inside section/step badges are intentionally sized by CSS */
.a2l-doc-section-badge svg,
.a2l-step-badge svg,
.a2l-prereq-icon svg,
.a2l-done-icon svg,
.a2l-transition-icon svg,
.a2l-empty-icon svg,
.a2l-search-icon svg{width:auto;height:auto}

/* Transition banner (between phases of a long guide) */
.a2l-transition{
  background:linear-gradient(135deg,rgba(29,197,152,.10),rgba(29,197,152,.04));
  border:1px solid rgba(29,197,152,.30);border-radius:var(--a2l-radius);
  padding:14px 18px;margin:0 0 28px;display:flex;align-items:flex-start;gap:12px;
}
.a2l-transition-icon{
  flex-shrink:0;width:28px;height:28px;border-radius:6px;
  background:rgba(29,197,152,.15);border:1px solid rgba(29,197,152,.3);
  display:flex;align-items:center;justify-content:center;
}
.a2l-transition-icon svg{stroke:var(--a2l-teal);fill:none;stroke-width:2;width:13px;height:13px}
.a2l-transition-body p{font-size:13px;color:var(--a2l-text-soft);line-height:1.6;margin:0}
.a2l-transition-body strong{color:var(--a2l-text);font-weight:500}

/* "Done" card (end of long guide) */
.a2l-done{
  background:linear-gradient(135deg,rgba(29,197,152,.10),rgba(29,197,152,.04));
  border:1px solid rgba(29,197,152,.30);border-radius:var(--a2l-radius);
  padding:26px 24px;text-align:center;margin-top:8px;
}
.a2l-done-icon{
  width:38px;height:38px;border-radius:50%;
  background:rgba(29,197,152,.15);border:1.5px solid var(--a2l-teal);
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;
}
.a2l-done-icon svg{stroke:var(--a2l-teal);fill:none;stroke-width:2.5;width:18px;height:18px}
.a2l-done h3{font-size:15px;font-weight:500;color:var(--a2l-text);margin-bottom:6px}
.a2l-done p{font-size:13px;color:var(--a2l-text-soft);line-height:1.6;max-width:420px;margin:0 auto}

/* Lightbox (zoomable screenshots) */
.a2l-lb{
  display:none;position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.92);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;padding:16px;cursor:zoom-out;
}
.a2l-lb.is-open{display:flex}
.a2l-lb-box{
  position:relative;width:92vw;height:90vh;border-radius:8px;overflow:hidden;
  cursor:default;box-shadow:0 24px 60px rgba(0,0,0,.8);
  display:flex;align-items:center;justify-content:center;background:#0d0f10;
  animation:a2l-lb-in .18s ease;
}
@keyframes a2l-lb-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.a2l-lb-box img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.a2l-lb-cap{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.85));
  padding:28px 18px 14px;font-family:'DM Mono',monospace;font-size:11px;
  color:rgba(255,255,255,.7);pointer-events:none;
}
.a2l-lb-x{
  position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.25);
  color:#fff;font-size:18px;line-height:32px;text-align:center;cursor:pointer;
  transition:background .15s;z-index:10;
}
.a2l-lb-x:hover{background:rgba(0,0,0,.95)}
.a2l-lb-hint{
  position:absolute;bottom:38px;right:14px;font-size:10px;
  color:rgba(255,255,255,.35);font-family:'DM Mono',monospace;pointer-events:none;
}


/* ===================================================================
   HOME LANDING PAGE
   =================================================================== */
.a2l-home{display:none;max-width:none;animation:none}
.a2l-home.is-active{display:block}
.a2l-home-hero{
  margin:0 0 32px;padding:0 0 24px;
  border-bottom:1px solid var(--a2l-border);
}
.a2l-home-hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'DM Mono','SF Mono',Menlo,monospace;
  font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--a2l-teal);margin-bottom:14px;
}
.a2l-home-hero-eyebrow::before{content:"";width:18px;height:1px;background:var(--a2l-teal);display:inline-block}
.a2l-home-hero h1{
  font-size:30px;font-weight:600;letter-spacing:-.015em;line-height:1.2;
  color:var(--a2l-text);margin:0 0 12px;
}
.a2l-home-hero h1 em{color:var(--a2l-teal);font-style:normal}
.a2l-home-hero-sub{
  font-size:15px;color:var(--a2l-text-soft);line-height:1.6;
  max-width:620px;margin:0 0 18px;
}
.a2l-home-hero-meta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:'DM Mono','SF Mono',Menlo,monospace;font-size:11px;
}
.a2l-home-version{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(29,197,152,.1);border:1px solid rgba(29,197,152,.3);
  border-radius:4px;padding:3px 10px;color:#059669;font-weight:500;
  letter-spacing:.04em;
}
.a2l-home-updated{color:var(--a2l-muted);letter-spacing:.04em}
.a2l-home-updated strong{color:var(--a2l-text-soft);font-weight:500}

/* Layout: 2-column on desktop, single column on mobile */
.a2l-home-body{
  display:grid;grid-template-columns:1fr 280px;gap:32px;
}
@media(max-width:900px){
  .a2l-home-body{grid-template-columns:1fr}
}

/* Section heading shared by both columns */
.a2l-home-section-label{
  display:block;font-family:'DM Mono','SF Mono',Menlo,monospace;
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--a2l-teal);margin:0 0 14px;
}

/* === Categories grid (left column) === */
.a2l-home-cats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:600px){
  .a2l-home-cats{grid-template-columns:1fr}
}
.a2l-home-cat{
  display:block;background:var(--a2l-bg-alt);
  border:1px solid var(--a2l-border);border-radius:8px;
  padding:14px 16px;text-decoration:none!important;color:var(--a2l-text);
  cursor:pointer;transition:border-color .15s,background-color .15s,transform .15s;
}
.a2l-home-cat:hover{
  border-color:rgba(29,197,152,.4);background:#fff;
  transform:translateY(-1px);text-decoration:none;
}
.a2l-home-cat-name{
  font-size:14px;font-weight:600;color:var(--a2l-text);margin:0 0 4px;
  letter-spacing:-.005em;
}
.a2l-home-cat-desc{
  font-size:12px;color:var(--a2l-muted);line-height:1.45;margin:0 0 8px;
}
.a2l-home-cat-count{
  font-family:'DM Mono','SF Mono',Menlo,monospace;font-size:10px;
  color:var(--a2l-teal);letter-spacing:.05em;font-weight:500;
}

/* === What's new (right column) === */
.a2l-home-news{
  background:var(--a2l-bg-alt);border:1px solid var(--a2l-border);
  border-radius:8px;padding:16px 18px;align-self:start;
}
.a2l-home-news-list{margin:0;padding:0;list-style:none}
.a2l-home-news-item{
  padding:12px 0;border-bottom:1px solid var(--a2l-border);
}
.a2l-home-news-item:last-child{border-bottom:none;padding-bottom:0}
.a2l-home-news-item:first-child{padding-top:0}
.a2l-home-news-meta{
  display:flex;align-items:center;gap:8px;margin-bottom:5px;
  font-family:'DM Mono','SF Mono',Menlo,monospace;font-size:10px;
  letter-spacing:.04em;
}
.a2l-home-news-ver{
  color:#059669;font-weight:500;
  background:rgba(29,197,152,.08);
  border:1px solid rgba(29,197,152,.25);
  padding:1px 6px;border-radius:3px;
}
.a2l-home-news-date{color:var(--a2l-muted)}
.a2l-home-news-title{
  font-size:13px;font-weight:500;color:var(--a2l-text);margin:0 0 3px;
  line-height:1.35;
}
.a2l-home-news-desc{
  font-size:12px;color:var(--a2l-muted);line-height:1.5;margin:0;
}

/* === Release list (full-width collapsible rows) === */
.a2l-home-releases{display:block;margin:0;padding:0}
.a2l-home-release{
  display:block;background:var(--a2l-bg-alt);
  border:1px solid var(--a2l-border);border-radius:8px;
  margin:0 0 10px;overflow:hidden;
  transition:border-color .15s,background-color .15s;
}
.a2l-home-release:hover{border-color:rgba(29,197,152,.4)}
.a2l-home-release.is-open{background:#fff;border-color:rgba(29,197,152,.45)}
.a2l-home-release-head{
  display:flex;align-items:center;gap:14px;
  width:100%;padding:14px 18px;
  background:transparent;border:0;cursor:pointer;
  font-family:inherit;text-align:left;color:var(--a2l-text);
}
.a2l-home-release-head:focus{outline:2px solid rgba(29,197,152,.5);outline-offset:-2px}
.a2l-home-release-ver{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(29,197,152,.1);border:1px solid rgba(29,197,152,.3);
  border-radius:4px;padding:3px 10px;color:#059669;font-weight:500;
  font-family:'DM Mono','SF Mono',Menlo,monospace;font-size:11px;
  letter-spacing:.04em;flex:0 0 auto;
}
.a2l-home-release-date{
  font-family:'DM Mono','SF Mono',Menlo,monospace;font-size:11px;
  color:var(--a2l-muted);letter-spacing:.04em;flex:0 0 auto;
}
.a2l-home-release-title{
  flex:1 1 auto;font-size:14px;font-weight:500;
  color:var(--a2l-text);line-height:1.4;
  letter-spacing:-.005em;
}
.a2l-home-release-chev{
  flex:0 0 auto;width:16px;height:16px;color:var(--a2l-muted);
  transition:transform .2s;
}
.a2l-home-release.is-open .a2l-home-release-chev{transform:rotate(180deg);color:var(--a2l-teal)}
.a2l-home-release-body{
  display:none;padding:0 18px 18px;
  border-top:1px solid var(--a2l-border);
  margin-top:0;padding-top:14px;
  font-size:13px;color:var(--a2l-text-soft);line-height:1.6;
}
.a2l-home-release.is-open .a2l-home-release-body{display:block}
.a2l-home-release-body p{margin:0 0 10px}
.a2l-home-release-body p:last-child{margin-bottom:0}
.a2l-home-release-body ul{margin:0 0 10px;padding-left:20px}
.a2l-home-release-body li{margin:0 0 4px}
.a2l-home-release-placeholder{
  font-style:italic;color:var(--a2l-muted);font-size:12px;
}
@media(max-width:600px){
  .a2l-home-release-head{flex-wrap:wrap;gap:8px 10px}
  .a2l-home-release-title{flex-basis:100%;order:3}
  .a2l-home-release-chev{order:2;margin-left:auto}
}

/* ==========================================================================
   ENTERPRISE SHELL OVERRIDES — Variant C (Teal accent + Navy ribbon)
   Light + Dark themes, 3-pane body, global ribbon, in-page TOC, breadcrumb,
   article meta, feedback widget, theme toggle.
   These rules are appended to override earlier shell styles. Article content
   styles above are intentionally untouched.
   ========================================================================== */

/* Extend the existing CSS variables with theme tokens used by the new shell. */
.a2l-docs{
  --a2l-ribbon-bg:#0b1320;
  --a2l-ribbon-text:#e8ecf3;
  --a2l-ribbon-muted:#9aa3b2;
  --a2l-accent:var(--a2l-teal);
  --a2l-accent-deep:#0f9a78;
  --a2l-accent-soft:rgba(29,197,152,.10);
  --a2l-nav-w:280px;
  --a2l-toc-w:220px;
}

/* === DARK THEME — opt-in via .is-dark on the docs root === */
.a2l-docs.is-dark{
  --a2l-bg:#0f1115;
  --a2l-bg-alt:#161a21;
  --a2l-bg-card:#161a21;
  --a2l-text:#e8ecf3;
  --a2l-text-soft:#cbd2dd;
  --a2l-muted:#9aa3b2;
  --a2l-border:#222730;
  --a2l-border-strong:#2a3140;
  --a2l-ribbon-bg:#070a12;
  --a2l-accent-soft:rgba(29,197,152,.14);
  --a2l-accent-deep:#1dc598;
  background:var(--a2l-bg);color:var(--a2l-text);
  border-color:#1f2227;
}
.a2l-docs.is-dark code{background:#1a2028;border-color:#222730;color:#5eead4}
.a2l-docs.is-dark a{color:var(--a2l-teal)}
.a2l-docs.is-dark .a2l-topic-body{color:var(--a2l-text-soft)}
.a2l-docs.is-dark .a2l-topic-body strong{color:var(--a2l-text)}
.a2l-docs.is-dark .a2l-topic-lead{color:var(--a2l-muted)}
.a2l-docs.is-dark .a2l-topic h2,
.a2l-docs.is-dark .a2l-topic h1{color:var(--a2l-text)}
.a2l-docs.is-dark .a2l-done{background:#10171f;border-color:#1f2730}

/* === GLOBAL RIBBON === */
.a2l-ribbon{
  display:flex;align-items:center;gap:16px;
  height:36px;padding:0 18px;
  background:var(--a2l-ribbon-bg);color:var(--a2l-ribbon-text);
  font-size:11px;flex:0 0 auto;z-index:11;
}
.a2l-ribbon-brand{
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--a2l-ribbon-text);white-space:nowrap;
}
.a2l-ribbon-crumbs{color:var(--a2l-ribbon-text);opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a2l-ribbon-crumbs .a2l-bc{margin:0 6px;opacity:.55}
.a2l-ribbon-right{margin-left:auto;display:flex;align-items:center;gap:18px;opacity:.92;white-space:nowrap}
.a2l-ribbon-right b{font-weight:600}
.a2l-ribbon-dot{
  width:6px;height:6px;border-radius:50%;background:var(--a2l-teal);
  display:inline-block;margin-right:7px;vertical-align:middle;
}
@media(max-width:680px){
  .a2l-ribbon-crumbs{display:none}
  .a2l-ribbon-right span:first-child{display:none}
}

/* === PRODUCT BAR (recolors old dark topbar to a light enterprise look) ===
   IMPORTANT: This block was authored for the in-docs `.a2l-topbar` element
   that used to render brand + version + search + toggle below the corporate
   ribbon. That topbar was removed 2026-05-13 when the same controls moved
   into the utility strip rendered by header.php.

   Every rule in this block is now scoped under `.a2l-topbar`, so it only
   applies if anyone re-introduces that topbar. Without the scoping prefix,
   the !important rules below were leaking onto `#a2l-search` and
   `#a2l-theme-toggle` in the utility strip, fighting the dark-strip styling
   in header.php. Re-add a `<div class="a2l-topbar">` to bring this styling
   back. */
.a2l-topbar{
  background:var(--a2l-bg)!important;
  border-bottom:1px solid var(--a2l-border)!important;
  color:var(--a2l-text);
  padding:0 22px!important;min-height:54px;gap:14px;
}
.a2l-topbar .a2l-brand{
  color:var(--a2l-text)!important;text-transform:none!important;letter-spacing:normal!important;
  font-size:14px!important;font-weight:600!important;
  display:flex;align-items:center;gap:10px;white-space:nowrap;
}
.a2l-topbar .a2l-brand-logo{
  width:26px;height:26px;border-radius:7px;
  background:linear-gradient(135deg,var(--a2l-teal),var(--a2l-accent-deep));
  display:inline-flex;align-items:center;justify-content:center;
  color:#062019;font-weight:700;font-size:13px;flex:0 0 26px;
}
.a2l-topbar .a2l-ver-chip{
  font-size:10px;padding:3px 9px;
  border:1px solid var(--a2l-border);border-radius:999px;
  color:var(--a2l-muted);background:var(--a2l-bg-alt);
  font-weight:500;letter-spacing:.04em;text-transform:uppercase;
}

/* Restyle the existing search wrap for the (removed) light topbar */
.a2l-topbar .a2l-search-wrap{margin-left:auto;width:360px;max-width:46%}
.a2l-topbar .a2l-search-input{
  background:var(--a2l-bg-alt)!important;
  border:1px solid var(--a2l-border)!important;
  color:var(--a2l-text)!important;
  font-size:12px;padding:7px 36px 7px 32px!important;
  border-radius:6px;height:34px;
}
.a2l-topbar .a2l-search-input::placeholder{color:var(--a2l-muted)!important}
.a2l-topbar .a2l-search-input:focus{
  border-color:var(--a2l-teal)!important;background:var(--a2l-bg)!important;
  box-shadow:0 0 0 3px var(--a2l-accent-soft);
}
.a2l-topbar .a2l-search-icon{color:var(--a2l-muted)!important;left:10px}
.a2l-topbar .a2l-search-kbd{
  background:var(--a2l-bg)!important;border:1px solid var(--a2l-border)!important;
  color:var(--a2l-muted)!important;right:8px;font-size:10px;padding:2px 6px;
}

/* Theme toggle button (in the removed topbar) */
.a2l-topbar .a2l-theme-toggle{
  width:34px;height:34px;border:1px solid var(--a2l-border);border-radius:6px;
  background:var(--a2l-bg-alt);color:var(--a2l-muted);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .15s,border-color .15s,background-color .15s;
  flex:0 0 34px;padding:0;
}
.a2l-topbar .a2l-theme-toggle:hover{color:var(--a2l-text);border-color:var(--a2l-border-strong);background:var(--a2l-bg)}
.a2l-topbar .a2l-theme-toggle .a2l-theme-icon{width:15px;height:15px}
.a2l-topbar .a2l-theme-toggle .a2l-theme-icon-sun{display:none}
.a2l-docs.is-dark .a2l-topbar .a2l-theme-toggle .a2l-theme-icon-moon{display:none}
.a2l-docs.is-dark .a2l-topbar .a2l-theme-toggle .a2l-theme-icon-sun{display:block}

/* === BODY: switch from 2-col dark-sidebar gradient to 3-col light layout === */
.a2l-docs-body{
  grid-template-columns:var(--a2l-nav-w) 1fr var(--a2l-toc-w)!important;
  background:var(--a2l-bg)!important;
}
@media(max-width:1100px){
  .a2l-docs-body{grid-template-columns:var(--a2l-nav-w) 1fr!important}
  .a2l-toc{display:none!important}
}
@media(max-width:860px){
  .a2l-docs-body{grid-template-columns:1fr!important;background:var(--a2l-bg)!important;overflow:visible}
}

/* === NAV: recolor from dark sidebar to enterprise light tree === */
.a2l-nav{
  background:var(--a2l-bg-alt)!important;
  border-right:1px solid var(--a2l-border)!important;
  color:var(--a2l-text);
}
.a2l-nav::-webkit-scrollbar-thumb{background:rgba(0,0,0,.10)}
.a2l-nav::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.18)}
.a2l-docs.is-dark .a2l-nav{background:var(--a2l-bg-alt)!important;border-right-color:var(--a2l-border)!important}
.a2l-docs.is-dark .a2l-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10)}

.a2l-nav-home{
  color:var(--a2l-text)!important;font-weight:600;
  border-left-color:transparent!important;
}
.a2l-nav-home.is-active{
  color:var(--a2l-accent-deep)!important;
  border-left-color:var(--a2l-teal)!important;
  background:var(--a2l-accent-soft);
}
.a2l-docs.is-dark .a2l-nav-home.is-active{color:var(--a2l-teal)!important}

.a2l-nav-group-head{
  color:var(--a2l-muted)!important;font-weight:600!important;
  text-transform:uppercase!important;letter-spacing:.08em!important;font-size:10px!important;
  background:transparent!important;
}
.a2l-nav-group-head:hover{color:var(--a2l-text)!important;background:transparent!important}
.a2l-nav-caret{border-color:var(--a2l-muted)!important}

.a2l-nav-item{
  color:var(--a2l-text)!important;font-size:12px!important;font-weight:400!important;
  border-left:2px solid transparent!important;
}
.a2l-nav-item:hover{background:var(--a2l-accent-soft)!important;color:var(--a2l-text)!important}
.a2l-nav-item.is-active{
  color:var(--a2l-accent-deep)!important;font-weight:600!important;
  background:var(--a2l-accent-soft)!important;
  border-left-color:var(--a2l-teal)!important;
}
.a2l-docs.is-dark .a2l-nav-item{color:var(--a2l-text-soft)!important}
.a2l-docs.is-dark .a2l-nav-item.is-active{color:var(--a2l-teal)!important}

/* === MAIN === */
.a2l-main{background:var(--a2l-bg)!important;color:var(--a2l-text)}
/* Retire the legacy notch pseudo and rail-to-panel curve — the nav is no longer dark */
.a2l-docs-body::after{display:none!important}
.a2l-main{border-top-left-radius:0!important}

/* === RIGHT TOC ===
   Sticky like the nav, with the same align-self:start trick to avoid grid
   stretching. max-height:100vh + overflow-y:auto keeps long TOCs scrollable. */
.a2l-toc{
  border-left:1px solid var(--a2l-border);
  background:var(--a2l-bg);
  padding:24px 18px;
  position:sticky;top:0;align-self:start;
  max-height:100vh;overflow-y:auto;z-index:5;
  font-size:11.5px;
}
.a2l-toc::-webkit-scrollbar{width:6px}
.a2l-toc::-webkit-scrollbar-track{background:transparent}
.a2l-toc::-webkit-scrollbar-thumb{background:rgba(0,0,0,.10);border-radius:3px}
.a2l-docs.is-dark .a2l-toc::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10)}
.a2l-toc h5{
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--a2l-muted);margin:0 0 12px;font-weight:600;
}
.a2l-toc-items{display:flex;flex-direction:column;gap:1px}
.a2l-toc-link{
  display:block;padding:5px 0 5px 12px;
  border-left:2px solid transparent;
  color:var(--a2l-muted)!important;text-decoration:none;
  font-size:11.5px;line-height:1.4;
  transition:color .15s,border-color .15s;
}
.a2l-toc-link:hover{color:var(--a2l-text)!important;text-decoration:none}
.a2l-toc-link.is-active{
  color:var(--a2l-accent-deep)!important;
  border-left-color:var(--a2l-teal);
  font-weight:600;
}
.a2l-docs.is-dark .a2l-toc-link.is-active{color:var(--a2l-teal)!important}
.a2l-toc-empty{
  font-size:11px;color:var(--a2l-muted);font-style:italic;padding:6px 0;
}

/* === BREADCRUMBS inside articles === */
.a2l-breadcrumb{
  font-size:11.5px;color:var(--a2l-muted);
  margin:0 0 14px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.a2l-breadcrumb a{color:var(--a2l-muted)!important;text-decoration:none}
.a2l-breadcrumb a:hover{color:var(--a2l-accent-deep)!important;text-decoration:none}
.a2l-breadcrumb .a2l-bc-sep{opacity:.45;color:var(--a2l-muted)}
.a2l-breadcrumb b{color:var(--a2l-text);font-weight:500}

/* === ARTICLE META LINE === */
.a2l-meta{
  display:flex;flex-wrap:wrap;gap:14px;font-size:11px;color:var(--a2l-muted);
  margin:0 0 18px;align-items:center;
}
.a2l-meta b{color:var(--a2l-text);font-weight:500}
.a2l-meta-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--a2l-teal);margin-right:7px;vertical-align:middle;
}

/* === FEEDBACK WIDGET (end of every article except home) === */
.a2l-feedback{
  margin-top:32px;padding:14px 16px;
  border:1px solid var(--a2l-border);border-radius:8px;
  background:var(--a2l-bg-alt);
  display:flex;align-items:center;gap:12px;font-size:12px;color:var(--a2l-text);
  flex-wrap:wrap;
}
.a2l-fb-btns{margin-left:auto;display:flex;gap:8px}
.a2l-fb-btns button{
  padding:6px 14px;border:1px solid var(--a2l-border);border-radius:6px;
  background:var(--a2l-bg);font:inherit;font-size:11px;cursor:pointer;color:var(--a2l-text);
  transition:border-color .15s,color .15s;
}
.a2l-fb-btns button:hover{border-color:var(--a2l-teal);color:var(--a2l-accent-deep)}
.a2l-feedback.is-thanked{color:var(--a2l-accent-deep);background:var(--a2l-accent-soft);border-color:var(--a2l-teal)}

/* === Results / Empty / Reader text-color cascading for dark mode === */
.a2l-docs.is-dark .a2l-results,
.a2l-docs.is-dark .a2l-empty{color:var(--a2l-text)}

/* === NAV: Variant D section heads — divider + icon + full-strength text === */
.a2l-nav-group{
  border-top:1px solid var(--a2l-border);margin-top:0;padding-top:8px;
}
/* First .a2l-nav-group sits right under the Home link — no top divider there */
.a2l-nav-group:first-of-type{border-top:0;padding-top:4px}
.a2l-docs.is-dark .a2l-nav-group{border-top-color:var(--a2l-border)}

.a2l-nav-group-head{
  color:var(--a2l-text)!important;
  font-size:11px!important;
  letter-spacing:.06em!important;
  padding:8px 14px 6px!important;
}
.a2l-docs.is-dark .a2l-nav-group-head{color:var(--a2l-text)!important}

.a2l-nav-group-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:13px;height:13px;flex:0 0 13px;
  color:var(--a2l-accent-deep);
  margin-left:2px;margin-right:1px;
}
.a2l-docs.is-dark .a2l-nav-group-ico{color:var(--a2l-teal)}
.a2l-nav-group-ico svg{width:100%;height:100%;display:block}

/* === NAV: accordion expand/collapse animation === */
/* Smooth height/opacity transitions on items + rotation on the caret. The
   original CSS used display:none for collapsed groups, which cannot animate;
   we keep the items rendered and shrink them via max-height instead. */
.a2l-nav-items{
  max-height:1200px;
  overflow:hidden;
  opacity:1;
  transition:max-height .26s cubic-bezier(.4,0,.2,1), opacity .18s ease-out;
  will-change:max-height;
}
.a2l-nav-group.is-collapsed .a2l-nav-items{
  display:block!important; /* override the base display:none so the transition can run */
  max-height:0;
  opacity:0;
  transition:max-height .22s cubic-bezier(.4,0,.2,1), opacity .12s ease-in;
}
/* Caret: always render the right-pointing arrow; rotate to point down when expanded */
.a2l-nav-caret{
  transition:transform .22s cubic-bezier(.4,0,.2,1);
  transform-origin:center center;
  display:inline-block;
}
.a2l-nav-caret::before{content:'\25B6'!important}
.a2l-nav-group:not(.is-collapsed) > .a2l-nav-group-head .a2l-nav-caret{
  transform:rotate(90deg);
}

/* === NAV: third-level subitems ===========================================
   A parent topic (e.g. Ports) that has nested children (Receive, Send, etc.)
   uses the .a2l-nav-sub wrapper. The parent link still navigates to its own
   article; a separate caret button next to it toggles the child list.
   Indentation goes deeper at each level: category 14px → topic 26px → child 42px. */
.a2l-nav-parent-row{display:flex;align-items:center;width:100%}
.a2l-nav-parent-row > .a2l-nav-item{flex:1;min-width:0}
.a2l-nav-subtoggle{
  background:none;border:none;cursor:pointer;
  width:22px;height:22px;flex:0 0 22px;margin-right:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--a2l-muted);padding:0;border-radius:3px;
}
.a2l-nav-subtoggle:hover{color:var(--a2l-text);background:var(--a2l-accent-soft)}
.a2l-docs.is-dark .a2l-nav-subtoggle{color:var(--a2l-text-soft)}
.a2l-nav-subcaret{
  display:inline-block;font-size:7px;line-height:1;
  transform:rotate(0deg);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.a2l-nav-subcaret::before{content:'\25B6';}
.a2l-nav-sub:not(.is-collapsed) .a2l-nav-subcaret{transform:rotate(90deg);}
.a2l-nav-subitems{
  display:flex;flex-direction:column;
  max-height:600px;overflow:hidden;opacity:1;
  transition:max-height .26s cubic-bezier(.4,0,.2,1), opacity .18s ease-out;
}
.a2l-nav-sub.is-collapsed .a2l-nav-subitems{
  max-height:0;opacity:0;
  transition:max-height .22s cubic-bezier(.4,0,.2,1), opacity .12s ease-in;
}
.a2l-docs .a2l-nav-subitem{padding-left:66px!important;font-size:10.5px}
.a2l-nav-sub.is-empty{display:none}
/* ===== Cross-document view transitions =====
   Smooths navigation between article pages: instead of a hard reload flash,
   the browser cross-fades between the old and new page. Stable chrome
   (ribbon, topbar, nav, TOC) is named so it morphs in place rather than
   fading separately. Older browsers ignore these rules and keep the
   default reload behavior. */
@view-transition {
  navigation: auto;
}

.a2l-ribbon { view-transition-name: a2l-ribbon; }
.a2l-topbar { view-transition-name: a2l-topbar; }
.a2l-nav    { view-transition-name: a2l-nav; }
.a2l-toc    { view-transition-name: a2l-toc; }
.a2l-main   { view-transition-name: a2l-main; }

/* Tight animation: 150ms for the main area, snappy not floaty */
::view-transition-old(a2l-main),
::view-transition-new(a2l-main) {
  animation-duration: .15s;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .12s;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}


/* ====================================================================
   WORDPRESS INTEGRATION OVERRIDES
   --------------------------------------------------------------------
   These rules adapt the standalone docs styling to the Art2link
   WordPress theme. Required because:
     - header.php fixes a 30px utility strip at the top of every page.
       On docs context that strip carries the Document-Primary menu.
     - WP's admin bar adds another 32px (46px on small screens) when
       a logged-in admin is browsing.
     - The body element on docs pages carries class "a2l-body" already
       (from header.php body_class()). The reference CSS originally
       used .a2l-body for the docs grid wrapper — we renamed every
       occurrence to .a2l-docs-body to avoid that collision.
     - We need a single .a2l-topic to always be visible (the reference
       used a multi-topic single-page; in WP each doc is its own URL).
   ==================================================================== */

/* Single-doc-per-URL: a2l-topic is always visible (no toggle needed) */
.a2l-docs .a2l-topic{display:block}

/* The marketing site's body class "a2l-body" carries no styling on
   docs pages because header.php hides the pill nav and body bg is set
   to white by page.php. But defensive reset in case any leakage occurs: */
body.a2l-doc-mode{background:#fff;color:#111827}
body.a2l-doc-mode.is-dark-docs{background:#0d0f10;color:#e8e8eb}

/* Push the .a2l-docs container below the fixed utility strip.
   The strip height is exposed as the CSS variable --a2l-util-h by
   header.php (30px on marketing pages, 44px on docs mode). */
.a2l-docs{padding-top:var(--a2l-util-h,30px)}
body.admin-bar .a2l-docs{padding-top:calc(32px + var(--a2l-util-h,30px))}
@media screen and (max-width:782px){
  body.admin-bar .a2l-docs{padding-top:calc(46px + var(--a2l-util-h,30px))}
}

/* Sticky left nav offset — anchor below the utility strip (+ admin bar) */
.a2l-docs .a2l-nav{
  top:var(--a2l-util-h,30px);
  height:calc(100vh - var(--a2l-util-h,30px));
}
body.admin-bar .a2l-docs .a2l-nav{
  top:calc(32px + var(--a2l-util-h,30px));
  height:calc(100vh - 32px - var(--a2l-util-h,30px));
}
@media screen and (max-width:782px){
  body.admin-bar .a2l-docs .a2l-nav{
    top:calc(46px + var(--a2l-util-h,30px));
    height:calc(100vh - 46px - var(--a2l-util-h,30px));
  }
}
@media(max-width:860px){
  .a2l-docs .a2l-nav{top:auto;height:auto}
}

/* Sticky right TOC — match the nav offset */
.a2l-docs .a2l-toc{
  position:sticky;
  top:var(--a2l-util-h,30px);
  align-self:start;
  max-height:calc(100vh - var(--a2l-util-h,30px));
  overflow-y:auto;
}
body.admin-bar .a2l-docs .a2l-toc{
  top:calc(32px + var(--a2l-util-h,30px));
  max-height:calc(100vh - 32px - var(--a2l-util-h,30px));
}
@media screen and (max-width:782px){
  body.admin-bar .a2l-docs .a2l-toc{
    top:calc(46px + var(--a2l-util-h,30px));
    max-height:calc(100vh - 46px - var(--a2l-util-h,30px));
  }
}

/* Three-column grid for the docs body — sidebar | content | TOC */
.a2l-docs .a2l-docs-body{grid-template-columns:220px minmax(0,1fr) 260px}
@media(max-width:1180px){
  .a2l-docs .a2l-docs-body{grid-template-columns:220px minmax(0,1fr)}
  .a2l-docs .a2l-toc{display:none}
}
@media(max-width:860px){
  .a2l-docs .a2l-docs-body{grid-template-columns:1fr}
}

/* Docs ribbon — slim corporate strip just inside the .a2l-docs container */
.a2l-docs .a2l-ribbon{
  display:flex;align-items:center;gap:14px;
  padding:9px 22px;font-size:11px;
  background:#16181a;border-bottom:1px solid #1f2225;
  font-family:'DM Mono','SF Mono',Menlo,monospace;
  color:#a2a5b9;letter-spacing:.04em;
  flex-wrap:wrap;
}
.a2l-docs .a2l-ribbon-brand{
  color:var(--a2l-teal);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;font-size:10px;
}
.a2l-docs .a2l-ribbon-crumbs{color:#a2a5b9}
.a2l-docs .a2l-ribbon .a2l-bc{color:#4b5161;margin:0 6px}
.a2l-docs .a2l-ribbon-right{
  margin-left:auto;display:flex;align-items:center;gap:14px;
  color:#6b7280;font-size:10.5px;
}
.a2l-docs .a2l-ribbon-right b{color:#a2a5b9;font-weight:500}
.a2l-docs .a2l-ribbon-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--a2l-teal);box-shadow:0 0 6px rgba(29,197,152,.5);
  margin-right:6px;
}
@media(max-width:760px){
  .a2l-docs .a2l-ribbon{padding:8px 16px;gap:10px;font-size:10.5px}
  .a2l-docs .a2l-ribbon-right{gap:10px}
}

/* Document-Primary menu inline inside the topbar (placed between
   the version chip and the search box). */
.a2l-docs .a2l-topbar-menu{
  display:flex;align-items:center;gap:0;
  margin-left:14px;font-size:12px;
}
.a2l-docs .a2l-topbar-menu a{
  position:relative;color:#a2a5b9;text-decoration:none;
  padding:6px 12px;border-radius:6px;
  transition:color .15s ease,background-color .15s ease;
}
.a2l-docs .a2l-topbar-menu a:hover{color:#fff;background:rgba(255,255,255,.04);text-decoration:none}
.a2l-docs .a2l-topbar-menu a.is-active{color:var(--a2l-teal)}
@media(max-width:760px){
  .a2l-docs .a2l-topbar-menu{display:none}
}

/* Search results panel — surfaces over the article area */
.a2l-docs .a2l-search-results{
  display:none;max-width:760px;
}
.a2l-docs .a2l-search-results .a2l-search-head{
  font-size:13px;color:var(--a2l-muted);
  padding-bottom:14px;margin-bottom:14px;
  border-bottom:1px solid var(--a2l-border);
}
.a2l-docs .a2l-search-results .a2l-search-head strong{color:var(--a2l-text);font-weight:600}
.a2l-docs .a2l-search-results .a2l-search-list{display:flex;flex-direction:column;gap:10px}
.a2l-docs .a2l-search-results .a2l-search-hit{
  display:block;padding:13px 16px;
  border:1px solid var(--a2l-border);border-radius:8px;
  text-decoration:none!important;background:var(--a2l-bg-alt);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.a2l-docs .a2l-search-results .a2l-search-hit:hover{
  border-color:var(--a2l-teal);
  box-shadow:0 4px 12px -4px rgba(29,197,152,.25);
  transform:translateY(-1px);text-decoration:none;
}
.a2l-docs .a2l-search-results .a2l-search-hit-cat{
  font-family:'DM Mono','SF Mono',Menlo,monospace;
  font-size:10px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--a2l-muted);margin-bottom:4px;
}
.a2l-docs .a2l-search-results .a2l-search-hit h4{
  font-size:14px;font-weight:600;color:var(--a2l-text);
  margin:0 0 5px;line-height:1.3;
}
.a2l-docs .a2l-search-results .a2l-search-hit p{
  font-size:12.5px;color:var(--a2l-text-soft);line-height:1.5;margin:0;
}
.a2l-docs .a2l-search-results mark{
  background:rgba(29,197,152,.22);color:#0f9b75;padding:0 2px;border-radius:2px;
}
.a2l-docs .a2l-search-empty{padding:28px 8px;text-align:center}
.a2l-docs .a2l-search-empty h3{font-size:15px;font-weight:600;color:var(--a2l-text);margin:0 0 6px}
.a2l-docs .a2l-search-empty p{font-size:13px;color:var(--a2l-muted)}
.a2l-docs .a2l-search-loading{
  padding:28px 0;text-align:center;
  color:var(--a2l-muted);font-size:13px;
}

/* On-this-page TOC — vertical list of section links with scroll-spy */
.a2l-docs .a2l-toc{
  padding:24px 22px;border-left:1px solid var(--a2l-border);
  font-size:12px;
}
.a2l-docs .a2l-toc h5{
  font-family:'DM Mono','SF Mono',Menlo,monospace;
  font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--a2l-teal);
  margin:0 0 12px;
}
.a2l-docs .a2l-toc-items{display:flex;flex-direction:column;gap:6px}
.a2l-docs .a2l-toc-link{
  display:block;color:var(--a2l-muted);text-decoration:none;
  padding:4px 0 4px 10px;border-left:2px solid transparent;
  font-size:12px;line-height:1.4;
  transition:color .12s,border-color .12s;
}
.a2l-docs .a2l-toc-link:hover{color:var(--a2l-text);text-decoration:none}
.a2l-docs .a2l-toc-link.is-active{
  color:var(--a2l-teal);border-left-color:var(--a2l-teal);font-weight:500;
}
.a2l-docs .a2l-toc-empty{color:var(--a2l-muted);font-size:11.5px;font-style:italic}

/* Mobile: hide top-right nav-toggle in topbar if present */
@media(max-width:760px){
  .a2l-docs .a2l-search-wrap{display:none}
}