/* ==========================================================================
   hub.css — the home page's (index.html) own styling: hero layout, header,
   sidebar, Experience/Canonical APIs flyouts, and the home-page inline API
   browser. Was an inline <style> block in index.html directly; moved to an
   external file so style-src doesn't need 'unsafe-inline' for it. Loaded
   only by index.html.
   ========================================================================== */
  :root{
    --navy-950:#081226; --navy-900:#0a1a33; --navy-800:#0d2143; --navy-700:#123159;
    --blue-accent:#1e6fe0; --blue-accent-light:#2f8bff; --teal:#00DCC7;
    --ink:#0f1b2d; --text:#3d4a5c; --muted:#6b7a8d;
    --border:#e4e8f0; --bg:#f5f7fb; --surface:#ffffff;
    --sans:'DM Sans',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --display:'Radio Canada Big','DM Sans',sans-serif;
    --sidebar-w:254px;
    --header-h:76px;
    --rail-w:76px;
    --level2-w:300px;
    --level3-w:340px;
    --shadow-sm:0 1px 2px rgba(10,27,46,.06), 0 1px 3px rgba(10,27,46,.05);
    --shadow-md:0 8px 24px rgba(10,27,46,.10);
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--sans); font-size:15px; line-height:1.6; color:var(--text);
    background:var(--bg); -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none;}
  h1,h2,h3,h4{font-family:var(--display); color:var(--ink); letter-spacing:-.01em;}
  button{font-family:var(--sans);}

  /* ===== Reusable QwikLive loader =========================================
     Branded loading indicator: the QwikLive mark centered over 12 ticks
     that fade around it in sequence (classic activity-indicator motion).
     Self-contained component — only needs --teal (above) and the favicon
     mark image. Drop `.ql-loader-block` (wrapper, centers + sizes itself)
     wherever a loading state is needed on any page that loads this file,
     or copy this whole block into another stylesheet to reuse it there.
     ========================================================================== */
  .ql-loader-block{display:flex; align-items:center; justify-content:center; min-height:120px; padding:32px 16px;}
  .ql-loader{position:relative; width:52px; height:52px; flex:none;}
  .ql-loader-mark{position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-10px 0 0 -10px; object-fit:contain;}
  .ql-loader-ticks{position:absolute; inset:0;}
  .ql-loader-ticks i{position:absolute; top:0; left:50%; width:3px; height:9px; margin-left:-1.5px; background:var(--teal); border-radius:2px; transform-origin:50% 26px; opacity:.15; animation:ql-loader-fade 1.1s linear infinite;}
  .ql-loader-ticks i:nth-child(1){transform:rotate(0deg); animation-delay:-1.008s;}
  .ql-loader-ticks i:nth-child(2){transform:rotate(30deg); animation-delay:-.917s;}
  .ql-loader-ticks i:nth-child(3){transform:rotate(60deg); animation-delay:-.825s;}
  .ql-loader-ticks i:nth-child(4){transform:rotate(90deg); animation-delay:-.733s;}
  .ql-loader-ticks i:nth-child(5){transform:rotate(120deg); animation-delay:-.642s;}
  .ql-loader-ticks i:nth-child(6){transform:rotate(150deg); animation-delay:-.55s;}
  .ql-loader-ticks i:nth-child(7){transform:rotate(180deg); animation-delay:-.458s;}
  .ql-loader-ticks i:nth-child(8){transform:rotate(210deg); animation-delay:-.367s;}
  .ql-loader-ticks i:nth-child(9){transform:rotate(240deg); animation-delay:-.275s;}
  .ql-loader-ticks i:nth-child(10){transform:rotate(270deg); animation-delay:-.183s;}
  .ql-loader-ticks i:nth-child(11){transform:rotate(300deg); animation-delay:-.092s;}
  .ql-loader-ticks i:nth-child(12){transform:rotate(330deg); animation-delay:0s;}
  @keyframes ql-loader-fade{0%{opacity:1;} 100%{opacity:.15;}}
  @media (prefers-reduced-motion: reduce){
    .ql-loader-ticks i{animation:none; opacity:.35;}
  }

  /* ===== Top header ===== */
  .top-header{
    position:fixed; top:0; left:0; right:0; height:var(--header-h); z-index:100;
    background:linear-gradient(100deg,#002A55 0%,#003366 45%,#004C8F 100%);
    display:flex; align-items:center; gap:24px; padding:0 24px;
    box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 4px 14px rgba(10,27,46,.18);
    border-bottom:1px solid rgba(0,0,0,.18);
  }
  /* Hidden on desktop — only drives the sidebar drawer below --sidebar-breakpoint. */
  .header-hamburger{
    display:none; flex-shrink:0; width:38px; height:38px; align-items:center; justify-content:center;
    background:none; border:none; color:#fff; cursor:pointer; border-radius:8px;
  }
  .header-hamburger:hover{background:rgba(255,255,255,.1);}
  .header-hamburger svg{width:22px; height:22px;}

  .brand-block{display:flex; align-items:center; gap:12px; flex-shrink:0; color:#fff;}
  .brand-mark{height:38px; width:auto; object-fit:contain; flex-shrink:0; transition:height .15s ease;}

  .header-search{
    flex:1 1 auto; min-width:0; max-width:640px; position:relative;
  }
  .header-search-box{
    display:flex; align-items:center; gap:10px; min-width:0;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
    border-radius:10px; padding:10px 14px; transition:background .15s, border-color .15s;
  }
  .header-search-box:focus-within{background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.28);}
  .header-search-box svg{color:rgba(255,255,255,.55); flex-shrink:0;}
  .header-search-box input{
    flex:1; min-width:0; background:none; border:none; outline:none; color:#fff; font-size:14px; font-family:var(--sans);
  }
  .header-search-box input::placeholder{color:rgba(255,255,255,.45);}
  .kbd-hint{
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px; color:rgba(255,255,255,.55);
    border:1px solid rgba(255,255,255,.22); border-radius:6px; padding:2px 7px; flex-shrink:0;
  }
  .header-search-results{
    position:absolute; top:calc(100% + 8px); left:0; right:0;
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    box-shadow:var(--shadow-md); max-height:60vh; overflow-y:auto; z-index:200; display:none;
  }
  .header-search-results.visible{display:block;}
  .sr-group{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:10px 16px 4px; background:var(--bg);}
  .sr-item{display:block; padding:9px 16px; border-top:1px solid var(--border); text-decoration:none;}
  .sr-group + .sr-item{border-top:none;}
  .sr-item:hover, .sr-item.active{background:var(--bg);}
  .sr-title{font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.4;}
  .sr-desc{font-size:12px; color:var(--muted); margin-top:2px; line-height:1.4;}
  .sr-empty{padding:16px; font-size:13.5px; color:var(--muted);}

  .btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:14.5px; border-radius:10px; padding:10px 18px; cursor:pointer; border:1px solid transparent; transition:transform .12s ease, box-shadow .2s ease; white-space:nowrap;}
  .btn-demo{flex-shrink:0; margin-left:auto; font-weight:500; font-size:16px; line-height:24px; background-image:linear-gradient(180deg, #00DCC7 0%, #00A0F6 50%, #00DCC7 100%); background-size:100% 200%; background-position:0% 0%; color:rgb(255,255,255); box-shadow:none; transition:background-position .7s ease, transform .12s ease; border-radius:999px;}
  .btn-demo:hover{background-position:0% 100%; color:rgb(255,255,255); transform:translateY(-1px);}
  @media (max-width:640px){
    .btn-demo{padding:8px 14px; font-size:13.5px;}
    .btn-demo svg{width:18px; height:18px;}
  }
  /* Header itself — hamburger appears once the sidebar becomes a drawer
     (see --sidebar-breakpoint below), then things shrink further as the
     viewport narrows so the search box and Contact Us both stay usable
     instead of getting pushed off-screen. */
  @media (max-width:960px){
    .header-hamburger{display:flex;}
    .top-header{gap:12px; padding:0 16px;}
  }
  @media (max-width:640px){
    .brand-mark{height:30px;}
    .kbd-hint{display:none;}
    .header-search-box{padding:8px 10px;}
  }
  @media (max-width:420px){
    .brand-mark{height:26px;}
    .header-search-box input{font-size:13px;}
    .btn-demo-label{display:none;}
    .btn-demo{padding:9px; border-radius:50%;}
    .btn-demo svg{width:16px; height:16px;}
  }

  /* ===== Layout shell ===== */
  .shell{display:flex; margin-top:var(--header-h);}

  /* ===== Sidebar ===== */
  .docs-sidebar{
    width:var(--sidebar-w); min-width:var(--sidebar-w); flex-shrink:0;
    position:fixed; top:var(--header-h); bottom:0; left:0;
    background:#ffffff; border-right:1px solid #e3e7ef;
    display:flex; flex-direction:column;
    padding:16px 12px 70px; box-sizing:border-box;
    overflow-y:auto; transition:width .2s, padding .2s;
    scrollbar-width:thin; scrollbar-color:rgba(15,27,46,.15) transparent;
    font-family:'Inter','Manrope',Arial,sans-serif;
  }
  .docs-sidebar.collapsed{width:0; min-width:0; padding-left:0; padding-right:0; overflow:hidden; border-right:none;}
  .sidebar-nav{width:100%;}
  .sidebar-section{margin-top:10px;}
  .sidebar-heading{font-size:14px; font-weight:700; letter-spacing:.2px; color:#252c3a; padding:0 12px; margin-bottom:6px;}

  .sidebar-item{
    position:relative; width:100%; height:44px; display:flex; align-items:center; gap:14px;
    padding:0 12px; margin-bottom:1px; text-decoration:none; color:#202838;
    border-radius:7px; box-sizing:border-box; cursor:pointer;
    background:none; border:none; font:inherit; text-align:left;
    transition:background .15s ease, color .15s ease;
  }
  /* "Selected" (Home by default on load, moves to whichever item you click)
     is the only PERSISTENT highlight — background + edge mark, one item at a
     time. Hover is purely transient feedback on top of that — background
     tint only, no mark — for whichever item the cursor is currently over. */
  .sidebar-item:hover{background:#f5f8fd; color:#004C8F;}
  .sidebar-item.selected{background:#eaf1fc; color:#002A55; font-weight:600;}
  .sidebar-item.selected:hover{color:#004C8F;}
  .sidebar-item::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:#002A55; border-radius:0 4px 4px 0; opacity:0; transition:opacity .15s ease;
  }
  .sidebar-item.selected::before{opacity:1;}
  .sidebar-item.selected:hover::before{background:#004C8F;}

  .sidebar-icon{
    width:24px; height:24px; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; color:inherit;
  }
  .sidebar-icon svg{width:24px; height:24px; flex-shrink:0;}
  .faq-icon{
    width:24px; height:24px; border:2px solid currentColor; border-radius:50%;
  }
  .faq-icon svg{width:12px; height:12px;}

  .sidebar-text{flex:1; font-size:15px; font-weight:500; white-space:nowrap;}

  .sidebar-arrow{
    margin-left:auto; width:20px; display:flex; align-items:center; justify-content:flex-end;
    color:inherit; opacity:.6; transition:transform .15s ease;
  }
  .sidebar-arrow svg{width:12px; height:12px;}
  .sidebar-parent.open > .sidebar-item .sidebar-arrow{transform:rotate(90deg);}

  .sidebar-children{overflow:hidden; max-height:0; transition:max-height .2s ease;}
  .sidebar-parent.open > .sidebar-children{max-height:400px;}
  .sidebar-item.sidebar-item-child{height:34px; padding-left:44px; font-size:13.5px; font-weight:400;}

  .sidebar-item.sidebar-item-disabled{opacity:.45; cursor:default;}
  .sidebar-item.sidebar-item-disabled:hover{background:none; color:#202838;}
  .sidebar-item.sidebar-item-disabled:hover::before{opacity:0;}
  .sidebar-soon-tag{
    margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:#8b96a8; border:1px solid #e3e7ef; border-radius:5px; padding:1px 5px;
  }

  .resources-section{margin-top:10px;}
  .sidebar-resource-heading{
    width:100%; height:40px; display:flex; align-items:center; justify-content:space-between;
    padding:0 12px; box-sizing:border-box; text-decoration:none; color:#252c3a;
    font-size:14px; font-weight:700; letter-spacing:.2px; border-radius:7px;
    transition:color .2s ease;
  }
  .sidebar-resource-heading:hover{color:#004C8F;}
  .resource-arrow{margin-left:auto; display:flex; align-items:center; justify-content:center; color:inherit; opacity:.6;}
  .resource-arrow svg{width:12px; height:12px;}
  .sidebar-resource-heading.sidebar-resource-disabled{opacity:.45; cursor:default;}
  .sidebar-resource-heading.sidebar-resource-disabled:hover{color:#252c3a;}

  /* Below --sidebar-breakpoint the sidebar stops being a permanent layout
     column (it was eating a fixed 254px out of every phone/tablet screen,
     the single biggest cause of the page overflowing sideways) and becomes
     an off-canvas drawer instead, opened by the header hamburger — same
     pattern the old docs' own docs.css uses for its sidebar. */
  @media (max-width:960px){
    .docs-sidebar{
      z-index:150; transform:translateX(-100%); box-shadow:none;
      transition:transform .25s ease;
    }
    .docs-sidebar.mobile-open{transform:translateX(0); box-shadow:var(--shadow-md);}
    /* Neutralises the desktop collapsed-via-button state, which has no
       meaning here (the hamburger/backdrop own show/hide on mobile). */
    .docs-sidebar.collapsed{width:var(--sidebar-w); min-width:var(--sidebar-w); padding:16px 12px 70px; overflow-y:auto; border-right:1px solid #e3e7ef;}
    .sidebar-collapse-btn{display:none !important;}
    /* Only when no flyout is open — that case reserves its own rail-width
       margin further down, and must keep doing so on mobile too. */
    .shell:not(.flyout-open) .main{margin-left:0 !important;}
  }
  @media (max-width:400px){
    .docs-sidebar{width:calc(100vw - 46px); min-width:0;}
  }
  .sidebar-backdrop{display:none; position:fixed; top:var(--header-h); left:0; right:0; bottom:0; background:rgba(10,20,40,.4); z-index:140;}
  .sidebar-backdrop.visible{display:block;}

  /* Collapse button kept fixed (outside the sidebar box) so it stays reachable to re-expand
     a collapsed sidebar. */
  .sidebar-collapse-btn{
    position:fixed; bottom:20px; left:calc(var(--sidebar-w) - 26px); z-index:110;
    width:52px; height:52px; border-radius:50%; border:1px solid #d7dfe9;
    background:#ffffff; color:#1d55bd; display:flex; align-items:center; justify-content:center;
    cursor:pointer; box-shadow:var(--shadow-md);
    transition:background .2s ease, transform .2s ease, left .2s;
  }
  .sidebar-collapse-btn:hover{background:#f4f7fc; transform:scale(1.04);}
  .sidebar-collapse-btn svg{width:18px; height:18px; transition:transform .2s ease;}
  .docs-sidebar.collapsed ~ .sidebar-collapse-btn svg{transform:rotate(180deg);}
  .docs-sidebar.collapsed ~ .sidebar-collapse-btn{left:18px;}
  /* Hidden while the flyout's own rail-collapse button occupies the same corner. */
  .shell.flyout-open .sidebar-collapse-btn{display:none;}

  /* ===== Main content ===== */
  .main{flex:1; min-width:0; margin-left:var(--sidebar-w); padding:0; background:#ffffff; transition:margin-left .2s;}
  .main.expanded{margin-left:0;}

  /* ===== Home content layout =====
     Flex, not float: with two columns of very different length (a long,
     growing intro vs. a short image+Quick Links block), a plain stretched
     row would force .dp-right to match .dp-content's full height — leaving
     it nowhere to go, and a visible empty gap under the shorter column once
     the intro text keeps going past it. align-items:flex-start keeps each
     column sized to its own content instead (like the old float did), and
     .dp-right is sticky: it follows the scroll and stays visible near the
     top instead of sitting still while the gap beneath it grows — the same
     pattern almost every "short card beside a long article" layout on the
     web uses. .dp-references, a separate full-width section after the row,
     still only starts once the row's TALLER column actually finishes —
     .dp-grid's own height (a flex row) is set by its tallest item even
     though the items themselves aren't stretched, so there's no gap there
     either, at any content length. */
  /* No max-width/centering — fills the full width available next to the
     sidebar, so the right column sits at the actual page edge (not centered
     with dead space on both sides) and the text column stretches to use
     whatever's left, rather than both being capped into a narrower
     "structured" block in the middle of a wide window. */
  .dp-wrap{padding:18px 55px 80px;}
  .dp-grid{
    display:flex; align-items:flex-start; gap:32px;
    font-family:'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
    color:#071b41;
  }
  .dp-content{flex:1 1 auto; min-width:0;}
  .dp-content h1{
    font-family:'Plus Jakarta Sans',sans-serif; font-size:32px; font-weight:800;
    color:rgb(12,28,43); line-height:1.22; margin-bottom:8px; letter-spacing:-0.02em;
  }
  .dp-content h1 strong{color:#003366;}
  .dp-intro{
    font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; color:rgb(12,28,43); line-height:1.6;
    max-width:820px; margin-bottom:25px;
  }
  .dp-content h3{
    font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; font-weight:600;
    color:rgb(12,28,43); margin:24px 0 10px; scroll-margin-top:80px;
  }
  .dp-content p{
    font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; color:rgb(12,28,43); line-height:1.6;
    margin-top:0;
  }
  .dp-inline{color:rgb(12,28,43); font-weight:600; text-decoration:none;}
  /* Matches the image/Quick Links card's own 400px size exactly — this box
     used to be 520px (from when the image filled it edge to edge), so even
     after shrinking the image/card to 400px, .dp-content was still avoiding
     the old wider 520px float and stopping short, leaving dead space
     between the text and the now-smaller image. Shrinking the float itself
     lets the text reclaim that space. */
  /* top offset clears the fixed header so the sticky card settles just
     below it, not underneath/behind it. */
  .dp-right{flex:0 0 400px; width:400px; position:sticky; top:calc(var(--header-h) + 24px); padding-top:5px;}
  /* No max-width on the image — it needs to track .dp-right's actual width
     capped the SAME size as .quick-links-card (max-width:400px) and pushed
     flush-right the same way (justify-content:flex-end here instead of
     margin-left:auto, since this is a flex container rather than a plain
     block) — so the image is no longer stretched to fill the whole column,
     it's sized and aligned to match the card exactly, same right edge. */
  .dp-illustration{width:100%; display:flex; justify-content:flex-end; align-items:center; margin-bottom:6px;}
  .dp-illustration svg, .dp-illustration img{width:100%; max-width:400px; height:auto;}
  /* ===== Quick Links (matches supplied quick-links-card reference exactly) ===== */
  /* Stays the SAME small fixed size it always was (max-width:400px) — only
     its position changed: margin-left:auto pushes a fixed-width block all
     the way flush against its container's own right edge (the same trick
     as float:right, without floating), so the card's right edge always
     lands exactly on .dp-right's right edge (same as the illustration and
     References) however wide that column is, with no stretching involved. */
  .quick-links-card{
    width:100%; max-width:400px; margin-left:auto; margin-right:0; background:#ffffff;
    border:1px solid #dbe2ec; border-radius:16px; padding:18px 20px; box-sizing:border-box;
    box-shadow:0 8px 30px rgba(23,58,117,.04);
    font-family:'Inter','Manrope',Arial,sans-serif;
  }
  .quick-links-title{margin:0 0 6px; font-size:17px; font-weight:700; line-height:1.3; color:#003366;}
  .quick-links-list{display:flex; flex-direction:column;}
  .quick-link-item{
    width:100%; min-height:44px; display:flex; align-items:center; gap:14px;
    text-decoration:none; color:#1f2937; border-radius:8px; padding:0; box-sizing:border-box;
    transition:background .2s ease, color .2s ease, transform .2s ease;
  }
  .quick-link-item:hover{background:#f7f9fd;}
  /* Icon/text/arrow colors reuse the sidebar's own scheme: black at rest, #004C8F on hover. */
  .quick-link-icon{
    width:24px; height:24px; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; color:#202838; transition:color .2s ease;
  }
  .quick-link-icon svg{width:24px; height:24px; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .quick-link-text{flex:1; font-size:14.5px; font-weight:500; color:#202838; line-height:1.4; transition:color .2s ease;}
  .quick-link-arrow{
    width:18px; height:18px; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; color:#1d2635; transition:color .2s ease;
  }
  .quick-link-arrow svg{width:15px; height:15px; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .quick-link-item:hover .quick-link-icon,
  .quick-link-item:hover .quick-link-text,
  .quick-link-item:hover .quick-link-arrow{color:#004C8F;}
  @media (max-width:768px){
    .quick-links-card{padding:22px;}
    .quick-link-text{font-size:15px;}
    /* Mobile: drop the hero illustration entirely — only the main content,
       Quick Links, and References sections remain, stacked full-width. */
    .dp-illustration{display:none;}
  }
  .dp-references{border:1px solid #dce5f2; border-radius:16px; padding:20px 25px 25px; margin-top:30px; background:#fff;}
  .dp-references > h2{color:#003366; margin:0; font-size:22px; font-family:inherit; font-weight:700;}
  .dp-references > p{margin:3px 0 18px; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; line-height:1.6; color:rgb(12,28,43);}
  .dp-ref-grid{display:grid; grid-template-columns:repeat(2,1fr);}
  .dp-ref-item{display:flex; gap:18px; padding:5px 30px; border-right:1px solid #dce5f2;}
  .dp-ref-item:first-child{padding-left:0;}
  .dp-ref-item:last-child{border-right:none;}
  .dp-ref-icon{width:30px; height:30px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#202838;}
  .dp-ref-icon svg{width:24px; height:24px; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .dp-ref-item h3{margin:0 0 6px; font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; font-weight:600; color:rgb(12,28,43);}
  .dp-ref-item p{margin:0 0 12px; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; line-height:1.6; color:rgb(12,28,43);}
  .dp-ref-item a{color:#003366; text-decoration:none; font-size:14px; font-weight:600;}
  .dp-ref-soon{color:#8b96a8; text-decoration:none; font-size:14px; font-style:italic; font-weight:500;}

  /* 961-1300px ("tablet"): stays two-column, matching desktop's shape
     exactly — only sizes shrink. The sidebar is still a fixed 254px dock
     here (it only goes off-canvas at/below 960px, see that breakpoint
     above), so left beside a permanently-400px right column it used to
     squeeze the text column down to a sliver, which is what made this band
     get stacked to a single column before. The real fix is to shrink the
     right column itself instead of abandoning two-column: clamp() shortens
     it fluidly as the viewport narrows (400px at 1300px down to ~250px at
     961px, continuous with the fixed 400px used just above 1300px and just
     below 961px), so both columns keep their side-by-side desktop position
     the whole way down and the image + Quick Links card — both width:100%
     of .dp-right — shrink right along with it, no extra rules needed. */
  @media (min-width:961px) and (max-width:1300px){
    .dp-wrap{padding:18px 32px 80px;}
    .dp-grid{gap:24px;}
    .dp-right{flex-basis:clamp(220px, 44vw - 172px, 400px); width:clamp(220px, 44vw - 172px, 400px);}
    .dp-content h1{font-size:clamp(24px, 1.8vw + 12px, 32px);}
  }
  /* <=768px: genuine phone widths — the right column's own ~400px can
     approach or exceed the entire viewport, so there's no width left for
     two columns no matter how much else shrinks; this is the only band
     that actually stacks to a single column. Placed here — AFTER the base
     .dp-ref-grid/.quick-links-card rules further up — on purpose: an
     identical copy placed inside an earlier ≤768px block (positioned
     BEFORE those base rules in the file) would lose to them, since a later
     same-specificity rule always wins regardless of which media query
     wraps it. */
  @media (max-width:768px){
    /* align-items:flex-start (set on .dp-grid up top) is what the desktop/
       tablet two-column row needs — it's what lets .dp-right size to its
       own short content instead of stretching to match .dp-content's full
       height. In column mode here, though, align-items governs the
       HORIZONTAL axis instead, so that same flex-start was leaving
       .dp-right (and the Quick Links card inside it) shrink-wrapped to its
       own short text instead of stretching full-width like every other
       stacked block — .dp-content only looked full-width by coincidence,
       because wrapping paragraph text happens to measure close to the
       available width anyway. stretch here fixes both for real. */
    .dp-grid{flex-direction:column; align-items:stretch;}
    .dp-right{flex:none; width:auto; position:static;}
    .quick-links-card{max-width:none; margin-left:0;}
    .dp-ref-grid{grid-template-columns:1fr; gap:25px;}
    .dp-ref-item{border-right:none; border-bottom:1px solid #dce5f2; padding:20px 0;}
    .dp-ref-item:last-child{border-bottom:none;}
  }
  @media (max-width:640px){
    .dp-wrap{padding:28px 20px 60px;}
  }

  /* ===== Experience APIs flyout — icon rail + a single Level-2 panel =====
     Pilot: only the Self-Service Banking path is wired up. Clicking it
     expands its real resource/endpoint tree inline, right under it, in this
     same panel (same accordion pattern as Experience/Canonical APIs in the
     main sidebar) — no separate third column. Selecting an endpoint renders
     the real standalone page's content inline (via iframe reusing its own
     renderer — same content, nothing duplicated). Platform Administration /
     Digital Assets Banking keep navigating away as before. */
  .icon-rail{
    width:var(--rail-w); position:fixed; top:var(--header-h); bottom:0; left:0; z-index:32;
    background:#fff; border-right:1px solid #e3e7ef;
    display:none; flex-direction:column; align-items:center; gap:8px;
    padding:16px 10px; overflow-y:auto;
  }
  .shell.flyout-open .icon-rail{display:flex;}
  .shell.flyout-open .docs-sidebar{display:none;}
  .rail-icon{
    position:relative; width:48px; height:48px; border:none; background:transparent; border-radius:10px;
    color:#202838; display:flex; align-items:center; justify-content:center; cursor:pointer;
    text-decoration:none; flex-shrink:0; transition:background .15s ease, color .15s ease;
  }
  .rail-icon svg{width:24px; height:24px;}
  .rail-icon:hover{background:#f5f8fd; color:#004C8F;}
  .rail-icon.active{background:#eaf1fc; color:#002A55;}
  .rail-icon.disabled{opacity:.4; cursor:default;}
  .rail-icon.disabled:hover{background:transparent; color:#202838;}
  /* Same persistent left-edge mark as the sidebar's own selected item, kept
     in sync — whichever rail icon is "active" reflects the section that
     closed the full sidebar to get here. */
  .rail-icon::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:#002A55; border-radius:0 4px 4px 0; opacity:0; transition:opacity .15s ease;
  }
  .rail-icon.active::before{opacity:1;}
  /* Same floating toggle as the Level-1 sidebar's own collapse button (see
     .sidebar-collapse-btn), just parked at the boundary of the icon rail +
     open panel instead — fixed position, so it stays put regardless of how
     deep the tree inside the panel is drilled into. */
  .rail-collapse{
    position:fixed; bottom:20px; left:calc(var(--rail-w) + var(--level2-w) - 26px); z-index:110;
    width:52px; height:52px; border-radius:50%; border:1px solid #d7dfe9;
    background:#ffffff; color:#1d55bd; display:none; align-items:center; justify-content:center;
    cursor:pointer; box-shadow:var(--shadow-md); flex-shrink:0;
    transition:background .2s ease, transform .2s ease;
  }
  .shell.flyout-open .rail-collapse{display:flex;}
  .rail-collapse:hover{background:#f4f7fc; transform:scale(1.04);}
  .rail-collapse svg{width:18px; height:18px; transition:transform .2s ease;}
  @media (max-width:1000px){
    .rail-collapse{left:calc(var(--rail-w) - 26px);}
  }
  /* Same collapse/expand behavior as the Level-1 sidebar's own toggle — just
     hides the icon rail + open panel and lets the current content (whatever
     it is) fill the freed width, instead of resetting navigation back to
     Home. Clicking again brings the exact same rail/panel/tree state right
     back, since nothing about it was ever torn down. */
  .shell.rail-collapsed .icon-rail{display:none;}
  .shell.rail-collapsed .level-panel.level-2{display:none;}
  .shell.flyout-open.rail-collapsed .main{margin-left:0;}
  .shell.rail-collapsed .rail-collapse{left:18px;}
  .shell.rail-collapsed .rail-collapse svg{transform:rotate(180deg);}
  @media (max-width:1000px){
    .shell.flyout-open.rail-collapsed .main{margin-left:0;}
  }

  .level-panel{
    position:fixed; top:var(--header-h); bottom:0; background:#fff; border-right:1px solid #e3e7ef;
    box-shadow:12px 0 30px rgba(28,47,83,.05); z-index:31; overflow-y:auto;
    transform:translateX(-120%); visibility:hidden; pointer-events:none;
    transition:transform .3s ease, visibility 0s linear .3s;
  }
  .level-2{width:var(--level2-w); left:var(--rail-w);}
  /* Only the ONE currently-open product panel gets shown — .panel-visible is
     toggled by JS so opening Canonical APIs doesn't also reveal Experience
     APIs' panel underneath it (they share the same slot/position). */
  .level-2.panel-visible{transform:translateX(0); visibility:visible; pointer-events:auto; transition:transform .3s ease;}
  /* rail (76px) + panel (300px) = 376px, wider than a small phone on its
     own — cap the panel at whichever is smaller, its normal 300px or
     whatever's actually left after the rail, so it only shrinks below
     300px on phones that genuinely need it instead of always stretching
     to fill the full remaining width regardless of how little the text
     itself needs (that used to leave a large empty gap after short labels
     like "Self-Service Banking" on any phone wider than ~376px). */
  @media (max-width:480px){
    /* 480px, not 420px — modern large phones (iPhone 14/15 Pro Max and
       similar) report a CSS width up to ~430px, which a 420px cutoff
       would miss entirely, silently leaving those devices on the wider
       desktop/tablet sizing below. 480px comfortably covers every
       realistic phone width without reaching into tablet territory.
       Narrower than the 300px desktop/tablet default on top of the earlier
       overflow-safe cap — the panel was still eating most of a phone's
       width (76px rail + 300px panel = 376px), leaving only a sliver of
       actual documentation content visible behind it. 280px was picked by
       testing the actual label set: it's the narrowest width where only
       the two genuinely extreme-length labels ("Account Types &
       Capabilities", "Core Connectivity & App Properties" — both 28+
       characters, far longer than anything else in the tree) still wrap
       to a second line; every other label already fits on one line here. */
    :root{ --level2-w: min(254px, calc(100vw - 76px)); }
  }

  .panel-header{
    min-height:72px; display:flex; align-items:center; justify-content:space-between;
    gap:10px; padding:16px 20px; border-bottom:1px solid #edf0f5;
  }
  .panel-label{display:block; font-size:11px; color:#718096; font-weight:700; letter-spacing:.07em; text-transform:uppercase; margin-bottom:5px;}
  .panel-header h3{margin:0; font-size:18px; font-weight:700; color:#0f1b2d; font-family:inherit;}

  .panel-menu{padding:14px 12px;}
  .level-item{
    width:100%; min-height:50px; display:flex; align-items:center; justify-content:space-between;
    border:none; background:none; padding:0 14px; color:#202838; font:inherit; font-size:16px;
    border-radius:8px; cursor:pointer; margin-bottom:4px; text-align:left; text-decoration:none;
    transition:background .15s ease, color .15s ease;
  }
  .level-item:hover{background:#f5f8fd; color:#004C8F;}
  .level-item svg{width:12px; height:12px; flex-shrink:0; opacity:.6; transition:transform .2s ease;}
  /* The three top-level product rows (Self-Service Banking, Platform
     Administration, Digital Assets Banking) — scoped to .level-parent
     [data-doc-set] specifically so the Guides list further down, which
     reuses this same .level-item class for an unrelated set of labels,
     isn't affected. Same arrow-alignment complaint as .tree-parent below,
     solved differently on purpose: every label's own <span> gets the same
     fixed width, sized to the longest label ("Platform Administration",
     measured at 175px), so all three sit left-aligned in one shared
     column and every arrow lines up at that column's edge — not
     stretched to the row's own right edge (space-between) and not
     chasing each label's own length either. */
  .level-parent[data-doc-set] > .level-item{justify-content:flex-start; gap:6px;}
  .level-parent[data-doc-set] > .level-item span{width:176px; flex-shrink:0;}
  /* No font-weight on either of these — bold text is wider than regular and
     can push a label that fits on one line at rest onto two lines the
     moment it's selected/opened (exactly what happened to tree-child
     labels like "Log out the current session"). Color + background alone
     is a clear enough indicator without ever changing the text's width. */
  .level-item.selected{color:#002A55; background:#eaf1fc;}
  /* Same pill treatment as .selected, but tied to the accordion's own open
     state — shows only while that product's tree is actually expanded, not
     as a sticky default (that was explicitly removed earlier this session:
     "Self-Service Banking is auto selecting... please remove"). Collapsing
     it, or opening a different product, clears it automatically since it's
     driven by the same .open class the arrow rotation already uses. */
  .level-parent.open > .level-item{color:#002A55; background:#eaf1fc;}
  .level-parent.open > .level-item .level-arrow{transform:rotate(90deg);}

  /* Resource/endpoint tree — now nested directly under "Self-Service Banking"
     inside this same Level-2 panel, expand/collapse like a normal accordion. */
  .level-children{overflow:hidden; max-height:0; transition:max-height .25s ease;}
  .level-parent.open > .level-children{max-height:2000px;}
  /* Same border-left trunk technique as .tree-children below — now the
     WHOLE top-level resource list shares one continuous trunk too (one tick
     + square per resource, e.g. Account Management, Debit Transactions...),
     not just the nested endpoints within an open group. */
  .api-tree{position:relative; padding:4px 14px 14px 20px; border-left:1px solid #dbe3ee;}
  /* Canonical APIs flattens two doc sets' trees back-to-back (Lending, then
     Self Service Canonical) with no heading between them — each tree's own
     top/bottom padding was stacking up into a visible gap right at that
     seam. Removing it there makes the boundary read as just another item in
     one continuous list, matching the 4px rhythm between any two groups. */
  #lendingTree{padding-bottom:0;}
  #canonicalTree{padding-top:0;}
  /* Tree markers — a small solid square bullet in front of every resource
     group and endpoint (our established accent blue, #004C8F). The squares
     sit in the outer indent gutter, OUTSIDE each row's own box — so a row's
     hover background (scoped to just that row) never paints behind/around
     its square. */
  .tree-group{position:relative; margin-bottom:4px;}
  /* Every arrow sits in one shared vertical column (justify-content:
     space-between pins it to this row's own right edge) instead of
     following each label's own length — a real table/tree-style column,
     not the arrow chasing the text. The trade-off that comes with that:
     short labels ("Fees") will always show more trailing space before the
     arrow than long ones ("Transactions & Dashboard") — that's inherent to
     column alignment across labels this different in length, not a bug. */
  .tree-parent{
    position:relative; width:100%; min-height:32px; display:flex; align-items:center; justify-content:space-between;
    color:#4b5565; font-size:15px; font-weight:500; background:none; border:none; font-family:inherit;
    cursor:pointer; padding:6px 8px; border-radius:6px; text-align:left;
    transition:background .15s ease, color .15s ease;
  }
  .tree-parent:hover{background:#f2f6fd; color:#004C8F;}
  /* Horizontal tick — same geometry as .tree-child's own tick further down
     (this row's own left edge sits 21px right of the trunk: 1px border +
     20px padding on .api-tree), so tick and square always meet flush. */
  .tree-parent::before{content:""; position:absolute; left:-21px; top:50%; width:9px; height:1px; background:#dbe3ee; transform:translateY(-50%);}
  .tree-parent::after{content:""; position:absolute; left:-12px; top:50%; width:7px; height:7px; border-radius:2px; background:#004C8F; transform:translateY(-50%); z-index:2;}
  .tree-arrow{width:11px; height:11px; flex-shrink:0; color:#a7b3c4; transition:transform .2s ease;}
  .tree-group.open > .tree-parent .tree-arrow{transform:rotate(90deg);}
  /* The trunk is a real border, not a manually-positioned line — it auto-
     sizes to however tall the open children list actually is (no top/bottom
     guesswork, so it can never end up detached from the squares at either
     end regardless of how many children there are). */
  .tree-children{position:relative; overflow:hidden; max-height:0; margin-left:4px; padding-left:20px; border-left:1px solid #dbe3ee; transition:max-height .2s ease;}
  .tree-group.open > .tree-children{max-height:2000px;}
  .tree-child{
    position:relative; display:block; padding:7px 10px; margin-bottom:2px; text-decoration:none; color:#455064;
    font-size:14px; border-radius:6px; transition:background .15s ease, color .15s ease;
  }
  /* Horizontal tick — runs from the trunk (this child's own left edge sits
     21px right of it: 1px border + 20px padding) right up to the square's
     own left edge, so tick and square always meet with no gap. Anchored to
     a FIXED offset (the first line's own vertical center: 7px padding-top +
     half of the 22.4px line-height), not top:50% of the whole box — .tree-
     child is display:block, so a wrapped 2-line label grows the box taller
     while the text itself stays pinned to the top; centering on the full
     (variable) box height would put each tick/square at a different height
     depending on how many lines that one label happens to wrap to, which is
     exactly what broke the trunk into disconnected-looking segments. */
  .tree-child::before{content:""; position:absolute; left:-21px; top:18px; width:9px; height:1px; background:#dbe3ee;}
  .tree-child::after{content:""; position:absolute; left:-12px; top:18px; width:6px; height:6px; border-radius:2px; background:#004C8F; margin-top:-3px; z-index:2;}
  .tree-child:hover{color:#004C8F; background:#f2f6fd;}
  /* No font-weight here — bold text is wider than regular, which was
     pushing labels that fit on one line at rest (e.g. "Log out the current
     session") onto two lines the moment they got selected. Color +
     background alone is a clear enough "selected" indicator without ever
     changing the text's own width. */
  .tree-child.active-child{color:#002A55; background:#eef4ff;}

  /* Mobile-only (480px, not 420px, to actually cover large modern phones —
     iPhone 14/15 Pro Max and similar report up to ~430px, which a 420px
     cutoff was silently missing). Desktop/tablet keep space-between as-is.
     Same fixed-width-column technique as .level-item above, applied here
     per tree instead of once globally: each doc set's own longest resource
     -group label sets that tree's own column width, so "Customer
     Preferences" (Self-Service Banking's longest) doesn't force a column
     wide enough for "Core Connectivity & App Properties" (Platform
     Administration's, a different tree entirely) — that would leave
     every short label in Self-Service Banking's own list with a huge,
     pointless gap for no reason, the exact problem this is fixing. Widths
     measured from each tree's own actual longest label, +1-2px buffer.
     Placed HERE — after the base .tree-parent rule further up — on
     purpose: an identical override placed inside the earlier
     @media(max-width:480px) block (which sits BEFORE that base rule in
     the file) would lose to it, since a later same-specificity rule
     always wins regardless of which one is wrapped in a media query. */
  @media (max-width:480px){
    .tree-parent{justify-content:flex-start; gap:6px;}
    /* width, not flex-shrink:0 — on the narrowest phones (~320px) even the
       shrunk ~244px panel can't fit Platform Administration's 214px column
       plus gap and arrow. Left free to shrink (flex-shrink's own default),
       every span in a tree still shrinks by the same amount since they all
       share one declared width and shrink factor, so alignment holds; the
       ellipsis truncates gracefully instead of pushing the arrow off-panel. */
    .tree-parent span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    #ssbTree .tree-parent span{width:160px;}        /* longest: "Customer Preferences" */
    #platformTree .tree-parent span{width:214px;}   /* longest: "Core Connectivity & App Properties" */
    #digitalTree .tree-parent span{width:154px;}    /* longest: "Digital Asset Account" */
    #lendingTree .tree-parent span{width:128px;}    /* longest: "Loan Applications" */
    #canonicalTree .tree-parent span{width:148px;}  /* longest: "Cardless Withdrawal" */
  }

  /* Main content: default hero vs one selected endpoint's real content,
     rendered inline (not an iframe, not the whole reference page — just the
     single endpoint, via ql-self-service-banking-docs's own apiref.js). */
  .docs-embed-wrap{display:none;}
  .main.showing-embed .dp-wrap{display:none;}
  .main.showing-embed .docs-embed-wrap{display:block;}
  .docs-embed{max-width:none; margin:0; padding:32px 40px 80px;}

  /* ---- Scoped component styles, matching ql-self-service-banking-docs's own
     assets/css/docs.css exactly for this content — kept scoped under
     .docs-embed so none of it leaks into the rest of the home page. ---- */
  .docs-embed{
    --color-border:#D0D7DE; --color-text:#24292F; --color-text-muted:#6E7781;
    --color-code-bg:#F6F8FA; --color-code-dark-bg:#161B22; --color-code-dark-text:#E6EDF3;
    --color-get:#1A7F37; --color-get-bg:#DAFBE1;
    --color-post:#0550AE; --color-post-bg:#DFF0FF;
    --color-put:#9A6700; --color-put-bg:#FFF8C5;
    --color-patch:#6639BA; --color-patch-bg:#FBEFFF;
    --color-delete:#CF222E; --color-delete-bg:#FFEBE9;
    --color-note-border:#0066CC; --color-note-bg:#EBF4FF;
    --color-warning-border:#D97706; --color-warning-bg:#FFFBEB;
    --color-important-border:#CF222E; --color-important-bg:#FFF5F5;
    --color-tip-border:#1A7F37; --color-tip-bg:#F0FFF4;
    --font-mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
    --radius-sm:4px; --radius-md:8px; --radius-lg:12px;
    --color-primary:#003366; --color-accent:#0066CC; --color-surface:#FFFFFF;
    --shadow-lg:0 12px 32px rgba(16,42,67,.13), 0 4px 10px rgba(16,42,67,.07);
    --ease:cubic-bezier(.4,0,.2,1);
  }
  /* Breadcrumb shown above an endpoint's/guide's inline content — Home and
     the flyout name are clickable (site's own brand blue, same color used
     for "QwikLive Developer Docs"/"Quick Links" elsewhere on this page);
     the levels in between are plain nav-group labels with nowhere to go, so
     they render as plain gray text; the last segment (current page) is dark
     and bold, never a link. */
  .docs-embed .embed-breadcrumb{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; margin-bottom:18px;}
  .docs-embed .embed-breadcrumb-link{color:#003366; font-weight:600; text-decoration:none;}
  .docs-embed .embed-breadcrumb-link:hover{color:#004C8F; text-decoration:underline;}
  .docs-embed .embed-breadcrumb-plain{color:#6d7890; font-weight:500;}
  .docs-embed .embed-breadcrumb-current{color:rgb(12,28,43); font-weight:600;}
  .docs-embed .embed-breadcrumb-sep{color:#a7b3c4;}
  .docs-embed .page-header{padding-bottom:22px; border-bottom:1px solid var(--color-border); margin-bottom:32px;}
  .docs-embed .page-header h1{font-family:'Plus Jakarta Sans',sans-serif; font-size:32px; font-weight:800; color:rgb(12,28,43); line-height:1.22; margin-bottom:8px; letter-spacing:-.02em;}
  .docs-embed h2{font-family:'Manrope',sans-serif; font-size:26px; font-weight:700; color:rgb(12,28,43); margin:34px 0 12px; letter-spacing:-.01em;}
  .docs-embed h3{font-size:18px; font-weight:600; color:rgb(12,28,43); margin:0 0 10px; font-family:'Manrope',sans-serif;}
  .docs-embed h4{font-size:16px; font-weight:600; color:rgb(12,28,43); margin:16px 0 8px; font-family:'Manrope',sans-serif;}
  .docs-embed p{font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:400; line-height:1.7; color:rgb(12,28,43); margin-bottom:14px;}
  .docs-embed .lead{font-size:16px; line-height:1.55; color:var(--color-text-muted); margin:2px 0 18px;}
  .docs-embed ul, .docs-embed ol{margin:0 0 14px 0; padding-left:22px;}
  .docs-embed li{margin-bottom:5px; font-size:14px;}
  .docs-embed strong{font-weight:600;}
  .docs-embed hr{border:none; border-top:1px solid var(--color-border); margin:28px 0;}
  .docs-embed code:not(pre code){background:var(--color-code-bg); color:#6639BA; padding:2px 5px; border-radius:4px; font-family:var(--font-mono); font-size:13px; border:1px solid var(--color-border); word-break:break-word;}

  /* Guides use plain code blocks + language tabs (Java/Python/Shell), a
     different component from the API endpoints' .api-example/.api-panel. */
  .docs-embed pre{background:var(--color-code-dark-bg); color:var(--color-code-dark-text); padding:16px; overflow-x:auto; font-family:var(--font-mono); font-size:13px; line-height:1.65; margin:0;}
  .docs-embed .code-block-wrap{position:relative; margin:12px 0 20px; border-radius:8px; overflow:hidden; box-shadow:0 4px 14px rgba(16,42,67,.10);}
  .docs-embed .code-block-header{display:flex; align-items:center; justify-content:space-between; background:#1C2128; padding:8px 14px; font-size:12px;}
  .docs-embed .code-block-lang{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.07em; font-size:11px; color:rgba(255,255,255,.7);}
  .docs-embed .tabs{margin:16px 0; border:1px solid var(--color-border); border-radius:8px; overflow:hidden;}
  .docs-embed .tab-list{display:flex; background:#F0F4F8; border-bottom:1px solid var(--color-border); overflow-x:auto;}
  .docs-embed .tab-btn{padding:9px 18px; background:none; border:none; cursor:pointer; font-size:13px; font-weight:500; color:var(--color-text-muted); white-space:nowrap; flex-shrink:0; border-bottom:2px solid transparent; transition:color .15s; font-family:var(--sans);}
  .docs-embed .tab-btn:hover{color:var(--color-text);}
  .docs-embed .tab-btn.active{color:#0066CC; border-bottom-color:#0066CC;}
  .docs-embed .tab-panel{display:none;}
  .docs-embed .tab-panel.active{display:block;}
  .docs-embed .tab-panel pre{border-radius:0;}

  .docs-embed .method-badge{font-size:11px; font-weight:700; padding:3px 9px; border-radius:var(--radius-sm); text-transform:uppercase; letter-spacing:.04em; flex-shrink:0; box-shadow:0 0 0 1px rgba(16,42,67,.06) inset;}
  .docs-embed .method-get{background:var(--color-get-bg); color:var(--color-get);}
  .docs-embed .method-post{background:var(--color-post-bg); color:var(--color-post);}
  .docs-embed .method-put{background:var(--color-put-bg); color:var(--color-put);}
  .docs-embed .method-patch{background:var(--color-patch-bg); color:var(--color-patch);}
  .docs-embed .method-delete{background:var(--color-delete-bg); color:var(--color-delete);}

  .docs-embed .endpoint-block{display:flex; align-items:center; gap:12px; background:linear-gradient(180deg,#FFFFFF 0%,var(--color-code-bg) 100%); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:13px 16px; margin:12px 0 24px; box-shadow:0 1px 2px rgba(16,42,67,.06);}
  .docs-embed .endpoint-path{font-family:var(--font-mono); font-size:14px; color:var(--color-text); word-break:break-all;}
  .docs-embed .ep-flags{font-size:13px; color:var(--color-text-muted); margin-bottom:14px;}
  .docs-embed .ep-notes{margin:0 0 14px 0; padding-left:22px; font-size:13.5px; color:var(--color-text-muted);}

  .docs-embed .table-wrap{overflow-x:auto; margin:16px 0 24px; border-radius:var(--radius-md); border:1px solid var(--color-border); box-shadow:0 1px 2px rgba(16,42,67,.06);}
  .docs-embed table{width:100%; border-collapse:collapse; font-size:13.5px;}
  .docs-embed thead tr{background:linear-gradient(180deg,#F4F7FB 0%,#EAF0F6 100%);}
  .docs-embed thead th{padding:10px 14px; text-align:left; font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted); border-bottom:1px solid var(--color-border); white-space:nowrap;}
  .docs-embed tbody tr{border-bottom:1px solid var(--color-border);}
  .docs-embed tbody tr:last-child{border-bottom:none;}
  .docs-embed tbody tr:hover{background:#FAFBFC;}
  .docs-embed tbody td{padding:10px 14px; vertical-align:top; line-height:1.5; font-size:13.5px; color:var(--color-text);}
  .docs-embed .ep-errors-note{font-size:13px; color:var(--color-text-muted);}

  .docs-embed .callout{padding:14px 16px; border-radius:var(--radius-md); margin:18px 0; border-left:4px solid; display:flex; gap:10px; align-items:flex-start;}
  .docs-embed .callout-icon{font-size:16px; flex-shrink:0; margin-top:1px;}
  .docs-embed .callout-body{flex:1;}
  .docs-embed .callout-title{font-weight:700; font-size:12px; margin-bottom:4px; text-transform:uppercase; letter-spacing:.05em;}
  .docs-embed .callout-body p{font-size:14px; color:rgb(12,28,43); margin-bottom:0;}
  .docs-embed .callout-note{background:var(--color-note-bg); border-color:var(--color-note-border);} .docs-embed .callout-note .callout-title{color:var(--color-note-border);}
  .docs-embed .callout-warning{background:var(--color-warning-bg); border-color:var(--color-warning-border);} .docs-embed .callout-warning .callout-title{color:var(--color-warning-border);}
  .docs-embed .callout-important{background:var(--color-important-bg); border-color:var(--color-important-border);} .docs-embed .callout-important .callout-title{color:var(--color-important-border);}
  .docs-embed .callout-tip{background:var(--color-tip-bg); border-color:var(--color-tip-border);} .docs-embed .callout-tip .callout-title{color:var(--color-tip-border);}

  .docs-embed .api-panel{border:1px solid var(--color-border); border-radius:12px; overflow:hidden; margin:20px 0 36px; box-shadow:0 4px 14px rgba(16,42,67,.10);}
  .docs-embed .api-panel-tabs{display:flex; align-items:center; background:linear-gradient(180deg,#F4F7FB 0%,#EAF0F6 100%); border-bottom:1px solid var(--color-border); padding:0 6px; overflow-x:auto; scrollbar-width:none;}
  .docs-embed .api-panel-tabs::-webkit-scrollbar{display:none;}
  .docs-embed .api-tab{background:none; border:none; border-bottom:2px solid transparent; padding:10px 14px; font-size:13px; font-weight:600; color:var(--color-text-muted); cursor:pointer; margin-bottom:-1px; transition:color .15s, border-color .15s; font-family:var(--sans); letter-spacing:.01em; white-space:nowrap; flex-shrink:0;}
  .docs-embed .api-tab:hover{color:var(--color-text);}
  .docs-embed .api-tab.active{color:#0066CC; border-bottom-color:#0066CC;}
  .docs-embed .api-pane{display:none;}
  .docs-embed .api-pane.active{display:block;}
  .docs-embed .ai-context-panel{padding:14px 16px 4px;}
  .docs-embed .ai-context-panel > *:first-child{margin-top:0;}
  .docs-embed .ai-context-panel .callout{margin:12px 0;}

  .docs-embed .api-example{background:var(--color-code-dark-bg); position:relative; overflow:hidden; display:flex; flex-direction:column;}
  .docs-embed .api-example pre{color:var(--color-code-dark-text); font-family:var(--font-mono); font-size:12px; line-height:1.65; margin:0; padding:16px; overflow-x:auto; flex:1; max-height:360px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent;}
  .docs-embed .api-example-header{display:flex; align-items:center; justify-content:space-between; background:#1C2128; padding:7px 12px; font-size:11px;}
  .docs-embed .api-example-label{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.07em; font-size:10.5px; color:rgba(255,255,255,.7);}
  .docs-embed .copy-btn{background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.65); border-radius:4px; padding:3px 10px; font-size:11px; cursor:pointer; transition:all .15s; font-family:var(--sans);}
  .docs-embed .copy-btn:hover{background:rgba(255,255,255,.18); color:#fff;}
  .docs-embed .copy-btn.copied{color:#3FB950; border-color:#3FB950; background:rgba(63,185,80,.1);}

  .docs-embed .tryit-btn{margin-left:auto; font-family:var(--sans); font-size:12px; font-weight:600; color:var(--color-text-muted); background:#eef1f5; border:1px solid var(--color-border); border-radius:6px; padding:4px 12px; cursor:not-allowed; opacity:.75;}

  .docs-embed .param-list{border:1px solid var(--color-border); border-radius:8px; overflow:hidden;}
  .docs-embed .param-item{padding:12px 14px; border-bottom:1px solid #eef1f5;}
  .docs-embed .param-item:last-child{border-bottom:none;}
  .docs-embed .param-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .docs-embed .param-name{font-family:var(--font-mono); font-weight:700; font-size:14px; color:var(--color-text);}
  .docs-embed .param-desc{margin-top:6px; font-size:14px; color:var(--color-text-muted);}
  .docs-embed .param-desc code, .docs-embed .st-desc code{font-size:12.5px;}

  .docs-embed .pill{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.02em; border-radius:4px; padding:1px 8px; text-transform:uppercase;}
  .docs-embed .pill-req{color:#c0392b; background:#fdeceb; border:1px solid #f3c6c1;}
  .docs-embed .pill-cond{color:#8a6d1b; background:#fdf6ec; border:1px solid #f0d9a8;}
  .docs-embed .pill-opt{color:var(--color-text-muted); background:#eef1f5; border:1px solid var(--color-border);}
  .docs-embed .pill-type{color:#0b66c3; background:#eaf2fb; border:1px solid #cfe0f4; font-family:var(--font-mono); text-transform:none;}
  .docs-embed .pill-loc{color:var(--color-text-muted); background:#eef1f5; border:1px solid var(--color-border);}

  .docs-embed .schema-tree{font-family:var(--font-mono); font-size:13px; border:1px solid var(--color-border); border-radius:8px; overflow:hidden;}
  .docs-embed .st-node > .st-row{display:flex; align-items:flex-start; gap:8px; padding:7px 12px; border-bottom:1px solid #eef1f5;}
  .docs-embed .st-node:last-child > .st-row{border-bottom:none;}
  .docs-embed .st-row:hover{background:#fafbfc;}
  .docs-embed .st-toggle{width:14px; flex-shrink:0; cursor:pointer; color:var(--color-text-muted); user-select:none; text-align:center;}
  .docs-embed .st-toggle.leaf{visibility:hidden; cursor:default;}
  .docs-embed .st-name{font-weight:700; color:var(--color-text);}
  .docs-embed .st-type{color:#0b66c3;}
  .docs-embed .st-req{color:#c0392b; font-size:11px; font-weight:700; text-transform:uppercase;}
  .docs-embed .st-req.st-ctx{color:#8a6d1b;}
  .docs-embed .st-desc{color:var(--color-text-muted); font-family:var(--sans); margin-left:auto; max-width:46%; text-align:right;}
  .docs-embed .st-children{margin-left:18px; border-left:1px solid var(--color-border);}
  .docs-embed .st-node.collapsed > .st-children{display:none;}

  .docs-embed .api-no-body{display:flex; align-items:center; justify-content:center; min-height:80px; color:var(--color-text-muted); font-size:13px; padding:24px; font-style:italic;}

  /* ---- Extra component styles needed for Quick Links content (Security,
     Error Handling, Getting Started, Recipes) — same rules as docs.css's own,
     scoped under .docs-embed. ---- */
  .docs-embed .field-name{font-family:var(--font-mono); font-size:13px; color:#6639BA; font-weight:500;}
  .docs-embed .field-type{font-family:var(--font-mono); font-size:11.5px; color:var(--color-text-muted); background:var(--color-code-bg); padding:1px 6px; border-radius:3px; border:1px solid var(--color-border);}
  .docs-embed .req-yes{color:var(--color-get); font-weight:600; font-size:12px;}
  .docs-embed .req-no{color:var(--color-text-muted); font-size:12px;}
  .docs-embed .req-ctx{color:#9A6700; font-weight:600; font-size:12px;}
  .docs-embed .opt{color:var(--color-text-muted);}

  /* Matches docs.css exactly (see that file for why): a description's own
     cross-reference link (e.g. "Balance Inquiry" on Account Lookup) uses the
     header's navy blue so it reads as a deliberate reference, not a generic link. */
  .docs-embed .ep-description a{color:var(--color-primary); font-weight:600;}
  .docs-embed .ep-description a:hover{color:var(--color-primary-light,#0055AA);}

  .docs-embed .card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin:20px 0;}
  .docs-embed .card{position:relative; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:20px; transition:box-shadow .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease); text-decoration:none; display:block; color:var(--color-text); overflow:hidden;}
  .docs-embed .card::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--color-accent),#2E8FFF); opacity:0; transition:opacity .22s var(--ease);}
  .docs-embed .card:hover{box-shadow:var(--shadow-lg); border-color:var(--color-accent); text-decoration:none; transform:translateY(-3px);}
  .docs-embed .card:hover::before{opacity:1;}
  .docs-embed .card-icon{font-size:22px; margin-bottom:10px;}
  .docs-embed .card-title{font-size:16px; font-weight:700; color:var(--color-primary); margin-bottom:5px;}
  .docs-embed .card-desc{font-size:13px; color:var(--color-text-muted); line-height:1.5;}

  .docs-embed .nav-card{display:flex; align-items:flex-start; gap:14px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:18px; text-decoration:none; color:var(--color-text); transition:border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);}
  .docs-embed .nav-card:hover{border-color:var(--color-accent); box-shadow:var(--shadow-md); text-decoration:none; color:var(--color-text); transform:translateY(-3px);}
  .docs-embed .nav-card-icon{font-size:24px; flex-shrink:0; line-height:1;}
  .docs-embed .nav-card-body{flex:1;}
  .docs-embed .nav-card-title{font-size:14px; font-weight:700; color:var(--color-primary); margin-bottom:5px;}
  .docs-embed .nav-card-desc{font-size:13px; color:var(--color-text-muted); line-height:1.5; margin-bottom:6px;}
  .docs-embed .nav-card-meta{font-size:11.5px; color:var(--color-accent); font-weight:600;}

  .docs-embed .steps{margin:24px 0;}
  .docs-embed .step{display:flex; gap:16px; margin-bottom:22px;}
  .docs-embed .step-num{width:28px; height:28px; min-width:28px; background:var(--color-accent); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; margin-top:2px;}
  .docs-embed .step-body h4{margin-top:0; font-size:15px; margin-bottom:6px;}
  .docs-embed .step-body p{font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; color:rgb(12,28,43); margin-bottom:8px;}

  .docs-embed .status-row{display:flex; gap:12px; padding:10px 14px; border-bottom:1px solid var(--color-border); align-items:flex-start;}
  .docs-embed .status-row:last-child{border-bottom:none;}
  .docs-embed .status-row:hover{background:#FAFBFC;}
  .docs-embed .status-code-badge{font-family:var(--font-mono); font-weight:700; font-size:14px; min-width:42px;}
  .docs-embed .s2xx{color:var(--color-get);}
  .docs-embed .s4xx{color:var(--color-delete);}
  .docs-embed .s5xx{color:#D97706;}
  .docs-embed .status-reason{font-family:var(--font-mono); font-size:12px; color:#6639BA; min-width:200px;}
  .docs-embed .status-desc{font-size:13px; color:var(--color-text-muted); flex:1;}
  .docs-embed .retryable{font-size:11px; font-weight:600; padding:2px 6px; border-radius:3px; white-space:nowrap;}
  .docs-embed .retry-yes{background:var(--color-tip-bg); color:var(--color-tip-border);}
  .docs-embed .retry-no{background:#F0F4F8; color:var(--color-text-muted);}

  @media (max-width:860px){
    .docs-embed{padding:28px 20px 60px;}
    .docs-embed .card-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:640px){
    .docs-embed .card-grid{grid-template-columns:1fr;}
    .docs-embed .status-row{flex-wrap:wrap;}
    .docs-embed .status-reason{min-width:0;}
  }

  .shell.flyout-open .main{margin-left:calc(var(--rail-w) + var(--level2-w));}

  @media (max-width:1000px){
    .shell.flyout-open .main{margin-left:var(--rail-w);}
  }