/* Mintlify registers Text Regular (400) and Display Bold (700) from docs.json. * Register the remaining Ember Modern cuts from Amazon's public CDN so browsers * do not synthesize the weights used by the documentation and shared chrome. */ @font-face { font-display: swap; font-family: "Amazon Ember Modern Text"; font-style: normal; font-weight: 500; src: url("https://m.media-amazon.com/images/S/sash/MexTn601PAhMvAn.woff2") format("woff2"); } /* The Bold cut is also registered at 600 so semibold headings and strong text * match the live documentation. */ @font-face { font-display: swap; font-family: "Amazon Ember Modern Text"; font-style: normal; font-weight: 600; src: url("https://m.media-amazon.com/images/S/sash/ukoYNzKrqDRxhTq.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "Amazon Ember Modern Text"; font-style: normal; font-weight: 700; src: url("https://m.media-amazon.com/images/S/sash/ukoYNzKrqDRxhTq.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "Amazon Ember Modern Display"; font-style: normal; font-weight: 400; src: url("https://m.media-amazon.com/images/S/sash/lZemoC3awOEEzLR.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "Amazon Ember Modern Display"; font-style: normal; font-weight: 500; src: url("https://m.media-amazon.com/images/S/sash/1Ep1kWVX5g73xrY.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "Amazon Ember Modern Display"; font-style: normal; font-weight: 600; src: url("https://m.media-amazon.com/images/S/sash/Wdqa3S7nfGc3Naj.woff2") format("woff2"); } /* injected footer: 0 horizontal padding — cancel #content-container's padding */ #content-container > [data-edge-injection-host="mintlify-slot-footer"] { margin-right: calc( -1 * var(--vega-content-gutter-right) ); /* cancel the 24px right margin */ } @media (max-width: 1023px) { #content-container > [data-edge-injection-host="mintlify-slot-footer"] { margin-inline: calc( -1 * var(--vega-space-base) ); /* matches padding: 16px */ } } @media (max-width: 767px) { #content-container > [data-edge-injection-host="mintlify-slot-footer"] { margin-inline: calc(-1 * var(--vega-space-sm)); /* matches padding: 12px */ } } /* add background color to the navbar */ #navbar { background-color: #161d26; } /* the proxy-injected header replaces Mintlify's navbar. Gated on the injected header actually being present so local dev (mint dev, no proxy) keeps Mintlify's own navbar. :not(:empty) matches the slot pre-hydration (proxy content still inside it); the host div matches after hydration moves the content out. An empty slot (slots enabled but no proxy) matches neither. */ body:has( #mintlify-slot-header:not(:empty), [data-edge-injection-host="mintlify-slot-header"] ) #navbar { display: none; } /* * Figma navigation breakpoints: * mobile: below 768px; tablet: 768px–1023px; * small desktop: 1024px–1279px; large desktop: 1280px and above. */ .vega-mobile-navigation-row, .vega-small-desktop-toc { display: none; } @media (max-width: 1023px) { body { --vega-mobile-navigation-row-height: 39px; } body:not( :has( #mintlify-slot-header:not(:empty), [data-edge-injection-host="mintlify-slot-header"] ) ) { --mintlify-slot-header-height: calc( 3.5rem + var(--vega-mobile-navigation-row-height) ); } #navbar button.lg\:hidden:has(> div:first-child > .sr-only) { align-items: center; background: #ffffff; border: 0; box-sizing: border-box; display: flex; gap: 0; height: var(--vega-mobile-navigation-row-height); min-height: var(--vega-mobile-navigation-row-height); padding: 0 28px 0 var(--vega-space-md); width: 100%; } /* Move the existing navigation icon to the right. */ #navbar button.lg\:hidden:has(> div:first-child > .sr-only) > div:first-child { align-items: center; color: #2d415e; display: flex; flex: 0 0 var(--vega-space-md); height: var(--vega-space-md); justify-content: center; margin-left: auto; order: 2; width: var(--vega-space-md); } #navbar button.lg\:hidden:has(> div:first-child > .sr-only) > div:first-child > svg { display: block; height: var(--vega-space-md); width: var(--vega-space-md); } /* Show only the current page and reuse its breadcrumb chevron. */ #navbar button.lg\:hidden:has(> div:first-child > .sr-only) > div:nth-child(2) { align-items: center; color: var(--vega-type-color); display: flex; flex: 1 1 auto; font-family: var(--vega-font-text); font-size: var(--vega-type-h4-font-size); gap: 4px; line-height: var(--vega-type-h4-line-height); margin-left: 0 !important; min-width: 0; order: 1; overflow: hidden; } #navbar button.lg\:hidden:has(> div:first-child > .sr-only) > div:nth-child(2) > div:first-child { align-items: center; display: flex; flex: 0 0 var(--vega-space-md); height: var(--vega-space-md); justify-content: center; width: var(--vega-space-md); } #navbar button.lg\:hidden:has(> div:first-child > .sr-only) > div:nth-child(2) > div:first-child > span { display: none; } #navbar button.lg\:hidden:has(> div:first-child > .sr-only) > div:nth-child(2) > div:first-child > svg { color: #2d415e; display: block; height: var(--vega-space-sm); width: var(--vega-space-sm); } #navbar button.lg\:hidden:has(> div:first-child > .sr-only) > div:nth-child(2) > div:last-child { color: var(--vega-type-color); flex: 1 1 auto; font-weight: 500; margin-left: 0 !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #navbar button.lg\:hidden:has(> div:first-child > .sr-only):focus-visible { outline: 2px solid #0256cf; outline-offset: -2px; } /* JavaScript preserves Mintlify's native sidebar trigger hidden and proxies it through a dedicated hamburger button. */ #navbar button.vega-mobile-navigation__native-trigger { display: none !important; } .vega-mobile-navigation-row { align-items: center; background: #ffffff; box-sizing: border-box; display: flex; gap: 4px; height: var(--vega-mobile-navigation-row-height); min-height: var(--vega-mobile-navigation-row-height); padding: 0 18px 0 var(--vega-space-md); position: relative; width: 100%; } /* Standalone row mounted below the injected slot header (the Mintlify navbar is hidden in that mode, so the bar cannot live inside it). The slot header host is position:absolute, so it contributes no flow height — without this offset the row lands at top 0 underneath it. */ .vega-mobile-navigation-row--standalone { border-bottom: 1px solid #e6e6e6; margin-top: var(--mintlify-slot-header-height, 3.5rem); position: sticky; top: var(--mintlify-slot-header-height, 3.5rem); z-index: 45; } .vega-mobile-navigation-row :is( .vega-mobile-navigation__toc-trigger, .vega-mobile-navigation__sidebar-trigger ) { appearance: none; background: transparent; border: 0; border-radius: 0; color: var(--vega-type-color); cursor: pointer; font: inherit; margin: 0; padding: 0; touch-action: manipulation; } .vega-mobile-navigation-row :is( .vega-mobile-navigation__toc-trigger, .vega-mobile-navigation__sidebar-trigger ) { align-items: center; align-self: stretch; display: flex; flex: 0 0 var(--vega-space-md); justify-content: center; width: var(--vega-space-md); } .vega-mobile-navigation-row .vega-mobile-navigation__toc-trigger { flex: 0 0 auto; gap: 4px; width: auto; } .vega-mobile-navigation__toc-trigger[hidden], .vega-mobile-toc[hidden] { display: none; } .vega-mobile-navigation__toc-icon { color: #2d415e; display: block; flex: 0 0 var(--vega-space-md); height: var(--vega-space-md); width: var(--vega-space-md); } .vega-mobile-navigation__toc-label { color: #000000; display: none; font-family: var(--vega-font-text); font-size: 18px; font-style: normal; font-weight: 500; line-height: 20px; white-space: nowrap; } .vega-mobile-navigation__page-title { color: #000000; display: block; flex: 1 1 0; font-family: var(--vega-font-text); font-size: 18px; font-weight: 500; line-height: 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vega-mobile-navigation__page-title--static { align-self: center; pointer-events: none; } .vega-mobile-navigation__sidebar-icon { color: #2d415e; display: block; flex: 0 0 var(--vega-space-md); height: var(--vega-space-md); width: var(--vega-space-md); } .vega-mobile-navigation-row :is( .vega-mobile-navigation__toc-trigger, .vega-mobile-navigation__sidebar-trigger ):focus-visible { outline: 2px solid #0256cf; outline-offset: 2px; } /* Mobile "On this page" dropdown, matched to Figma node 1431:5079. */ .vega-mobile-toc { background: #ffffff; border: 1px solid #ffffff; border-radius: 24px; box-shadow: 0 0 15px rgb(0 0 0 / 20%), 0 4px 8px rgb(0 0 0 / 20%); box-sizing: border-box; color: #000000; display: flex; flex-direction: column; left: auto; max-height: min( 568px, calc( 100dvh - var(--mintlify-slot-header-height, 95px) - var(--vega-space-md) ) ); overflow: hidden; padding: 22px 8px var(--vega-space-md) 14px; position: absolute; right: var(--vega-space-base); top: calc(100% + var(--vega-space-xs)); width: min(228px, calc(100vw - (2 * var(--vega-space-sm)))); z-index: 50; } .vega-mobile-toc__heading { align-items: center; display: flex; flex: 0 0 auto; font-family: var(--vega-font-text); font-size: 18px; font-weight: 500; gap: 4px; line-height: 20px; padding-left: 9px; } .vega-mobile-toc__heading-icon { color: #2d415e; display: block; flex: 0 0 var(--vega-space-base); height: var(--vega-space-base); width: var(--vega-space-base); } .vega-mobile-toc nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; } .vega-mobile-toc__list, .vega-mobile-toc__list ul { list-style: none; margin: 0 !important; padding: 0 !important; } .vega-mobile-toc__list { border-left: 1px solid #cdcdcd; margin-top: 14px !important; } .vega-mobile-toc__list li { border: 0 !important; margin: 0 !important; padding: 0 !important; } .vega-mobile-toc__list a { border: 0 !important; border-left: 1px solid transparent !important; color: #474747; display: block; font-family: var(--vega-font-text); font-size: 14px; font-weight: var(--vega-font-weight-regular); line-height: 21px; margin: 0 0 0 -1px !important; padding: 5.5px 0 5.5px 9px !important; text-decoration: none; } .vega-mobile-toc__list li[data-active-deepest="true"] > a { border-left-color: #ff6200 !important; border-left-width: 4px !important; color: #000000; font-weight: var(--vega-font-weight-bold); padding-left: 6px !important; } #navbar .vega-mobile-toc__list li:not([data-active-deepest="true"]) > a:hover { border-left-color: #777777 !important; border-left-width: 2px !important; padding-left: 8px !important; } .vega-mobile-toc__list a:focus-visible { border-radius: 2px; outline: 2px solid #0256cf; outline-offset: -2px; } /* Custom pages keep the top navbar but do not need the docs navigation row. */ body:has(header#navbar.is-custom) #navbar button.lg\:hidden:has(> div:first-child > .sr-only) { display: none; } body:has(header#navbar.is-custom) .vega-mobile-navigation-row { display: none; } body:not( :has( #mintlify-slot-header:not(:empty), [data-edge-injection-host="mintlify-slot-header"] ) ):has(header#navbar.is-custom) { --mintlify-slot-header-height: 3.5rem; } /* Reuse the desktop sidebar language in the Figma-sized mobile drawer. */ #mobile-nav { --vega-mobile-control-border: 1px solid rgb(229 231 235 / 70%); --vega-mobile-control-radius: 0.85rem; --vega-mobile-sidebar-width: 20rem; /* 320px */ background: #ffffff; box-shadow: 0 0 4px rgb(0 0 0 / 33%), 0 4px 2px rgb(0 0 0 / 25%); color: var(--vega-type-color); font-family: var(--vega-font-text); max-width: calc(var(--vega-mobile-sidebar-width) + var(--bleed)); min-width: calc(var(--vega-mobile-sidebar-width) + var(--bleed)); width: calc(var(--vega-mobile-sidebar-width) + var(--bleed)); } #mobile-nav [data-component-part="scroll-area-viewport"] { box-sizing: border-box; padding: var(--vega-space-base) var(--vega-space-base) var(--vega-space-base) calc(var(--bleed) + var(--vega-space-base)); } #mobile-nav [data-component-part="scroll-area-content"] { font-family: var(--vega-font-text); font-size: var(--vega-type-h6-font-size); line-height: var(--vega-type-h6-line-height); min-width: 0 !important; width: 100%; } #mobile-nav .vega-mobile-sidebar__footer { background: #ffffff; box-sizing: border-box; flex: 0 0 auto; padding: 0 var(--vega-space-base) 0 calc(var(--bleed) + var(--vega-space-base)); width: 100%; z-index: 1; } #mobile-nav .vega-mobile-sidebar__footer-controls { align-items: center; display: flex; min-height: 56px; padding-block: var(--vega-space-sm); } /* Do not repeat the site logo inside the mobile navigation drawer. */ #mobile-nav div:has(> a > .nav-logo) { display: none; } #mobile-nav #navigation-items { padding-top: 0; } #mobile-nav #navigation-items > div:first-child { gap: var(--vega-space-xs); margin-bottom: var(--vega-space-xs); } #mobile-nav .vega-mobile-sidebar__footer #localization-select-trigger { align-items: center; background: transparent; border: var(--vega-mobile-control-border); border-radius: var(--vega-mobile-control-radius); box-sizing: border-box; color: var(--vega-type-color); font-family: var(--vega-font-text); font-size: var(--vega-type-h6-font-size); font-weight: 500; gap: var(--vega-space-xs); height: var(--vega-space-lg); justify-content: flex-start; line-height: 20px; min-height: var(--vega-space-lg); padding: 6px 10px; width: auto; } #mobile-nav .vega-mobile-sidebar__footer #localization-select-trigger > span { line-height: 20px; max-width: none; } #mobile-nav .vega-mobile-sidebar__footer #localization-select-trigger > svg { display: block; flex: 0 0 12px; height: 12px; width: 12px; } #mobile-nav #navigation-items > div:first-child > div { gap: var(--vega-space-xs); } #mobile-nav .sidebar-group-header { background: transparent !important; border: 0; box-sizing: border-box; color: var(--vega-type-color); height: auto; line-height: var(--vega-type-h5-line-height); margin: 0 0 10px; min-height: 0; padding: 0 0 0 var(--vega-space-base); width: 100%; } #mobile-nav #navigation-items #localization-select-trigger, #mobile-nav #navigation-items > div:first-child > div > button, #mobile-nav .nav-dropdown-trigger { border: var(--vega-mobile-control-border); border-radius: var(--vega-mobile-control-radius); } #mobile-nav .sidebar-group-header span { color: var(--vega-type-color); font-family: var(--vega-font-display); font-size: var(--vega-type-h5-font-size); font-weight: 800 !important; line-height: var(--vega-type-h5-line-height); } #mobile-nav ul.sidebar-group { font-family: var(--vega-font-text); font-size: var(--vega-type-h6-font-size); margin: 0 0 0 var(--vega-space-xs); width: calc(100% - var(--vega-space-xs)); } #mobile-nav .sidebar-group-header + ul.sidebar-group { margin-left: 0; width: 100%; } #mobile-nav ul.sidebar-group ul { margin-left: var(--vega-space-xs); } #mobile-nav ul.sidebar-group > :not([hidden]) ~ :not([hidden]) { margin-top: 0; } #mobile-nav ul.sidebar-group li > :is(a, button) { align-items: center; box-sizing: border-box; color: var(--vega-type-color); font-family: var(--vega-font-text); font-size: var(--vega-type-h6-font-size); font-weight: var(--vega-font-weight-regular); line-height: 30px; min-height: 30px; padding: 0 var(--vega-space-xs) !important; } #mobile-nav .sidebar-group-header + ul.sidebar-group li > :is(a, button) { padding-left: var(--vega-space-base) !important; } #mobile-nav ul.sidebar-group > li > :is(a, button) { line-height: var(--vega-space-lg); min-height: var(--vega-space-lg); } #mobile-nav ul.sidebar-group li > button[aria-expanded] { align-items: center; gap: var(--vega-space-xs); min-width: 0; overflow: hidden; } #mobile-nav ul.sidebar-group li > button[aria-expanded] > div:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; } #mobile-nav ul.sidebar-group li > :is(a, button) span { display: block; font-size: var(--vega-type-h6-font-size); line-height: inherit; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } #mobile-nav ul.sidebar-group li > button[aria-expanded] > div:last-child, #mobile-nav ul.sidebar-group li > button[aria-expanded] > div:last-child > svg { flex: 0 0 var(--vega-space-sm); height: var(--vega-space-sm) !important; margin: 0 !important; min-width: var(--vega-space-sm); width: var(--vega-space-sm) !important; } #mobile-nav ul.sidebar-group li[data-active] > a { margin-block: 3px; } #mobile-nav :is(a, button):focus-visible { outline: 2px solid #0256cf; outline-offset: -2px; } } @media (min-width: 768px) and (max-width: 1023px) { .vega-mobile-navigation__toc-label { display: inline; } } #content:has(> .vega-home) { /* flex-start, not center: centering floats the card mid-viewport whenever the viewport is taller than the content (e.g. browser zoomed out). */ align-items: flex-start; box-sizing: border-box; display: flex; justify-content: center; margin: 0; max-width: none; min-height: calc(100dvh - var(--mintlify-slot-header-height, 3.5rem)); padding: var(--vega-space-lg) clamp(var(--vega-space-sm), 3vw, var(--vega-space-lg)); width: 100%; } /* set all font tracking to zero */ *, *::before, *::after { letter-spacing: 0 !important; } /* Figma-aligned design tokens */ :root { /* Spacing: none, extra small, small, base, medium, large, x-large, 2x-large */ --vega-space-none: 0; --vega-space-xs: 0.5rem; /* 8px */ --vega-space-sm: 0.75rem; /* 12px */ --vega-space-base: 1rem; /* 16px */ --vega-space-md: 1.5rem; /* 24px */ --vega-space-lg: 2rem; /* 32px */ --vega-space-xl: 3rem; /* 48px */ --vega-space-2xl: 4rem; /* 64px */ /* Desktop page chrome (Figma 1576:6371). 1440: 32px left + 24px right so the body card is 1064px; large desktop body caps at 1200px. */ --vega-sidebar-width: 320px; --vega-toc-width: 240px; --vega-content-gutter-left: var(--vega-space-lg); /* 32px */ --vega-content-gutter-right: var(--vega-space-md); /* 24px */ --vega-body-max: 936px; /* with On-this-page: 936 + 24 + 240 = 1200 */ --vega-body-max-wide: 1200px; /* without On-this-page */ /* Typography */ --vega-font-display: "Amazon Ember Modern Display", sans-serif; --vega-font-text: "Amazon Ember Modern Text", sans-serif; --vega-font-weight-regular: 400; --vega-font-weight-demi-bold: 600; --vega-font-weight-bold: 700; --vega-type-color: #000000; --vega-type-body-font-size: 1rem; /* 16px */ --vega-type-body-line-height: 1.5rem; /* 24px */ --vega-type-h1-font-size: 2.25rem; /* 36px */ --vega-type-h1-line-height: 2.25rem; /* 36px */ --vega-type-h2-font-size: 2rem; /* 32px */ --vega-type-h2-line-height: 2rem; /* 32px */ --vega-type-h3-font-size: 1.5rem; /* 24px */ --vega-type-h3-line-height: 1.5rem; /* 24px */ --vega-type-h4-font-size: 1.125rem; /* 18px */ --vega-type-h4-line-height: 1.25rem; /* 20px */ --vega-type-h5-font-size: 1rem; /* 16px */ --vega-type-h5-line-height: 1.25rem; /* 20px */ --vega-type-h6-font-size: 0.875rem; /* 14px */ --vega-type-h6-line-height: 1.125rem; /* 18px */ --vega-heading-hero-min: 2.5rem; /* 40px */ --vega-heading-hero: 2.75rem; /* 44px */ /* Backwards-compatible aliases for existing custom content. */ --vega-heading-h1: var(--vega-type-h1-font-size); --vega-heading-h2: var(--vega-type-h2-font-size); --vega-heading-h3: var(--vega-type-h3-font-size); --vega-heading-h4: var(--vega-type-h4-font-size); } /* * Reusable typography classes for custom MDX/JSX. Semantic Markdown content * receives the same roles automatically; .not-prose remains an explicit opt-out. */ .vega-type-body, .mdx-content :where(p, li, td, [data-as="p"]):not( :where([class~="not-prose"], [class~="not-prose"] *) ) { color: var(--vega-type-color); font-family: var(--vega-font-text); font-size: var(--vega-type-body-font-size); font-weight: var(--vega-font-weight-regular); line-height: var(--vega-type-body-line-height); } .vega-type-emphasis, .vega-type-body :where(strong, b), .mdx-content :where(p, li, td, [data-as="p"]):not( :where([class~="not-prose"], [class~="not-prose"] *) ) :where(strong, b) { font-weight: var(--vega-font-weight-demi-bold); } .vega-type-h1, .vega-page-title, #page-title, .mdx-content :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--vega-type-color); font-family: var(--vega-font-display); font-size: var(--vega-type-h1-font-size); font-weight: var(--vega-font-weight-bold); line-height: var(--vega-type-h1-line-height); } /* break long titles at hyphens like the live site, not mid-word */ #page-title { overflow-wrap: break-word; word-break: normal; } .vega-type-h2, .vega-section-title, .mdx-content :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--vega-type-color); font-family: var(--vega-font-text); font-size: var(--vega-type-h2-font-size); font-weight: var(--vega-font-weight-demi-bold); line-height: var(--vega-type-h2-line-height); } .mdx-content.prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: var(--vega-space-xl); } .vega-type-h3, .vega-subsection-title, .mdx-content :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--vega-type-color); font-family: var(--vega-font-text); font-size: var(--vega-type-h3-font-size); font-weight: var(--vega-font-weight-demi-bold); line-height: var(--vega-type-h3-line-height); } .vega-type-h4, .vega-minor-title, .mdx-content :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--vega-type-color); font-family: var(--vega-font-text); font-size: var(--vega-type-h4-font-size); font-weight: var(--vega-font-weight-demi-bold); line-height: var(--vega-type-h4-line-height); } .vega-type-h5, .mdx-content :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--vega-type-color); font-family: var(--vega-font-text); font-size: var(--vega-type-h5-font-size); font-weight: var(--vega-font-weight-demi-bold); line-height: var(--vega-type-h5-line-height); } .vega-type-h6, .mdx-content :where(h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--vega-type-color); font-family: var(--vega-font-text); font-size: var(--vega-type-h6-font-size); font-weight: var(--vega-font-weight-demi-bold); line-height: var(--vega-type-h6-line-height); } .vega-hero-title { color: #ffffff; font-family: var(--vega-font-display); font-size: clamp(var(--vega-heading-hero-min), 4vw, var(--vega-heading-hero)); font-weight: var(--vega-font-weight-bold); line-height: 1.1; } .vega-hero-subtitle, .vega-hero-subtitle > [data-as="p"] { color: #ffffff; } /* Figma-aligned Mintlify Steps */ .mdx-content .steps { --vega-step-title-image-size: 30px; display: flex; flex-direction: column; gap: var(--vega-space-lg); margin-left: 0; } .mdx-content .steps > .step { align-items: flex-start; column-gap: var(--vega-space-sm); display: flex; padding-bottom: 0; padding-inline: 0; position: relative; } .mdx-content .steps > .step > [data-component-part="step-line"] { background: #d4d4d4; display: block; height: calc(100% + var(--vega-space-lg)); left: calc(var(--vega-space-sm) - 0.5px); pointer-events: none; position: absolute; top: var(--vega-space-sm); width: 1px; z-index: 0; } .mdx-content .steps > .step:last-child > [data-component-part="step-line"] { display: none; } .mdx-content .steps > .step > [data-component-part="step-number"] { flex: 0 0 var(--vega-space-md); margin-left: 0; padding-block: 0; position: relative; width: var(--vega-space-md); z-index: 1; } .mdx-content .steps > .step > [data-component-part="step-number"] > div { align-items: center; background-color: var(--amazon-component-ink); background-image: url("/images/workflow-step-number.svg"); background-position: center; background-repeat: no-repeat; background-size: var(--vega-space-md) var(--vega-space-md); border-radius: 50%; color: #ffffff; display: flex; flex: 0 0 var(--vega-space-md); font-family: var(--vega-font-text); font-size: 1rem; font-weight: var(--vega-font-weight-bold); height: var(--vega-space-md); justify-content: center; line-height: var(--vega-space-md); width: var(--vega-space-md); } .mdx-content .steps > .step > div:has(> [data-component-part="step-title"]) { min-width: 0; overflow: visible; padding-inline: 0; width: 100%; } .mdx-content .steps [data-component-part="step-title"] { color: var(--vega-type-color); font-family: var(--vega-font-text); font-size: 1rem; font-weight: var(--vega-font-weight-bold); line-height: var(--vega-space-md); margin: 0; overflow-wrap: break-word; } .mdx-content .steps [data-component-part="step-title"]:has(img) { align-items: flex-start; display: flex; min-height: var(--vega-step-title-image-size); } .mdx-content .steps [data-component-part="step-title"]:has(img) > :is(span, a) { align-items: flex-start; display: inline-flex; } .mdx-content .steps [data-component-part="step-title"]:has(img) > :is(span, a) > span:first-child { padding-top: calc( (var(--vega-step-title-image-size) - var(--vega-space-md)) / 2 ); } .mdx-content .steps [data-component-part="step-title"] img { display: block; flex: 0 0 var(--vega-step-title-image-size); height: var(--vega-step-title-image-size) !important; margin-block: 0 !important; object-fit: contain; width: var(--vega-step-title-image-size) !important; } .mdx-content .steps [data-component-part="step-content"] { color: var(--vega-type-color); font-family: var(--vega-font-text); font-size: 1rem; font-weight: var(--vega-font-weight-regular); line-height: var(--vega-space-md); margin: 0; overflow-wrap: break-word; } .mdx-content .steps [data-component-part="step-content"] :where(p, li, td, [data-as="p"]) { color: var(--vega-type-color); font-family: var(--vega-font-text); font-size: 1rem; font-weight: var(--vega-font-weight-regular); line-height: var(--vega-space-md); } .mdx-content .steps [data-component-part="step-content"] > :first-child { margin-top: 0; } .mdx-content .steps [data-component-part="step-content"] > :last-child { margin-bottom: 0; } /* Figma-aligned previous / next page navigation. Footer rhythm (tracker 35): content -> 48px -> "Last modified" -> 16px -> "Was this helpful?" (30px row, left aligned) -> 32px -> Previous/Next -> 64px to the bottom of the column (24px here + Mintlify's 40px column padding). */ #pagination { column-gap: var(--vega-space-base); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--vega-space-md); } /* 32px + the footer's own 16px top padding = 48px between the article and "Last modified" */ #content-area > #content:has(~ #pagination) { margin-bottom: var(--vega-space-lg) !important; } #pagination > .pagination-next:only-child { grid-column: 2; } #pagination > :is(.pagination-prev, .pagination-next) { align-items: stretch; background: transparent; border: 0; border-radius: 0; box-shadow: none; box-sizing: border-box; min-height: 43px; padding: 0; text-decoration: none; } #pagination > :is(.pagination-prev, .pagination-next):is(:hover, :focus, :active) { background: transparent; border: 0; box-shadow: none; } #pagination > :is(.pagination-prev, .pagination-next) > .space-y-1 { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; } #pagination > :is(.pagination-prev, .pagination-next) > .space-y-1 > * { margin-block: 0; } #pagination .pagination-title { color: #000000; font-family: "Amazon Ember Modern Text", sans-serif; font-size: 14px; font-weight: 400; line-height: 21px; order: 2; white-space: nowrap; } #pagination > :is(.pagination-prev, .pagination-next) > .space-y-1 > .flex { color: #0256cf; font-family: "Amazon Ember Modern Text", sans-serif; font-size: 14px; font-weight: 400; line-height: 21px; min-height: 21px; order: 1; } #pagination > :is(.pagination-prev, .pagination-next) > .space-y-1 > .flex :is(span, svg) { color: #0256cf; } #pagination > :is(.pagination-prev, .pagination-next) > .space-y-1 > .flex span { font-weight: 400; } #pagination > :is(.pagination-prev, .pagination-next) > .space-y-1 > .flex svg { height: 10px; width: 10px; } @media (max-width: 767px) { #pagination .pagination-title { display: none; } } /* hide Mintlify's built-in page footer */ #footer { display: none; } /* reduce the bottom padding on the last modified footer */ #content-area > #content + div:has(+ #pagination), #content-area > #content + div:has(+ .vega-breadcrumb-feedback-row--pagination + #pagination) { padding-bottom: var(--vega-space-base) !important; } /* no mo ask ai/assistant button */ .chat-assistant-floating-input { display: none; } .sidebar-group-header span { color: #000000; font-family: "Amazon Ember Modern Display", sans-serif; font-weight: var(--vega-font-weight-bold); font-size: 16px; } /* Tailwind mx-2 and mt-2 equivalent for top-level sidebar groups */ ul.sidebar-group { margin-top: var(--vega-space-xs); margin-left: 0; margin-right: 0; } /* hide the generated page description below the title */ div.mt-2.text-lg.prose.prose-gray { display: none; } hr { margin-top: 0 !important; margin-bottom: 0 !important; } #content > hr:last-child { border: 0 !important; border-bottom: 1px solid #d9d9d9 !important; opacity: 1 !important; } .prose :where(hr + *, h2 + *, h3 + *, h4 + *):not( :where([class~="not-prose"], [class~="not-prose"] *) ) { margin-top: 0.666667em; } /* rules for sidebar item states */ #sidebar-content li[data-active]:has(> button[aria-expanded="true"]):not(:has(li[data-active])) > button[aria-expanded="true"], #sidebar-content li[data-active]:has(> a) > a, #sidebar-group li[data-active]:has(> button[aria-expanded="true"]):not(:has(li[data-active])) > button[aria-expanded="true"], #sidebar-group li[data-active]:has(> a) > a, #mobile-nav li[data-active]:has(> button[aria-expanded="true"]):not(:has(li[data-active])) > button[aria-expanded="true"], #mobile-nav li[data-active]:has(> a) > a { background-color: #161d25; border-radius: 8px; color: #ffffff; } #sidebar-content li[data-active]:has(> button[aria-expanded="true"]):not(:has(li[data-active])) > button[aria-expanded="true"] :is(span, svg), #sidebar-content li[data-active]:has(> a) > a :is(span, svg), #sidebar-group li[data-active]:has(> button[aria-expanded="true"]):not(:has(li[data-active])) > button[aria-expanded="true"] :is(span, svg), #sidebar-group li[data-active]:has(> a) > a :is(span, svg), #mobile-nav li[data-active]:has(> button[aria-expanded="true"]):not(:has(li[data-active])) > button[aria-expanded="true"] :is(span, svg), #mobile-nav li[data-active]:has(> a) > a :is(span, svg) { color: #ffffff; } /* highlight every section in the ancestry of a deeply nested selected page */ #sidebar-content li:has(li[data-active-nav-item="true"]) > button, #sidebar-group li:has(li[data-active-nav-item="true"]) > button, #mobile-nav li:has(li[data-active-nav-item="true"]) > button { background-color: #e9ebef; border-radius: 8px; color: #000000; font-weight: 700; } #sidebar-content li:has(li[data-active-nav-item="true"]) > button :is(span, svg), #sidebar-group li:has(li[data-active-nav-item="true"]) > button :is(span, svg), #mobile-nav li:has(li[data-active-nav-item="true"]) > button :is(span, svg) { color: #000000; } #sidebar-content li:has(li[data-active-nav-item="true"]) > button span, #sidebar-group li:has(li[data-active-nav-item="true"]) > button span, #mobile-nav li:has(li[data-active-nav-item="true"]) > button span { font-weight: 700 !important; } #sidebar-content li > :is(a, button):hover, #sidebar-group li > :is(a, button):hover, #mobile-nav li > :is(a, button):hover { background-color: #d8dee9; border-radius: 8px; color: #000000; } #sidebar-content li > :is(a, button):hover :is(span, svg), #sidebar-group li > :is(a, button):hover :is(span, svg), #mobile-nav li > :is(a, button):hover :is(span, svg) { color: #000000; } #sidebar-content li:has(li[data-active-nav-item="true"]) > button:hover, #sidebar-group li:has(li[data-active-nav-item="true"]) > button:hover, #mobile-nav li:has(li[data-active-nav-item="true"]) > button:hover { background-color: #d8dee9; } #sidebar-content li > :is(a, button):active, #sidebar-group li > :is(a, button):active, #mobile-nav li > :is(a, button):active { background-color: #e1e5ee; border-radius: 8px; color: #000000; } #sidebar-content li > :is(a, button):active :is(span, svg), #sidebar-group li > :is(a, button):active :is(span, svg), #mobile-nav li > :is(a, button):active :is(span, svg) { color: #000000; } #sidebar-content li[data-active]:has(> a) > a span, #sidebar-group li[data-active]:has(> a) > a span, #mobile-nav li[data-active]:has(> a) > a span { font-weight: normal !important; text-shadow: none !important; } /* content container styles for margin, color, etc. */ #content-container { background-color: transparent; border: none; border-radius: 0 !important; box-sizing: border-box; padding-right: var(--vega-content-gutter-right); margin-left: var(--vega-sidebar-width); padding-left: 0px; padding-top: var(--vega-space-md); overflow-x: hidden; } /* remove default border radius from the assistant sheet */ #chat-assistant-sheet { border-radius: 0px; } /* remove default offset from the sticky assistant container */ div.sticky.shrink-0.z-\[22\].mt-\[var$--banner-height\,0px$\] { padding: 0 !important; } /* Figma table (Tech Docs platform, Table / Frame 1): a #E5E8F0 header pill (8px radius, 8px/12px padding, Ember Modern Text Bold 16/24) sitting 16px above body rows. Body cells are Regular 16/21 with 12px horizontal padding, 16px above and below the text, and a 1px #D4D4D4 rule between rows — no vertical borders, no outer frame, no rule under the header. 12px padding on both sides of a cell produces the 24px gap between adjacent column contents. :where() keeps these at .prose specificity so .data-table, .device-spec__table, .comparison-table__scroll, and .test-case-matrix still win. Mintlify's prose table rules (14px type, 600 header weight, thead/tr borders, first/last cell padding: 0) share that specificity, so every property they set is restated. */ .prose :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border: none; border-collapse: separate; border-spacing: 0; color: var(--vega-type-color); display: table; font-family: var(--vega-font-text); font-size: var(--vega-type-body-font-size); line-height: 1.3125rem; margin: 0; width: 100%; } .prose :where(thead):not(:where([class~="not-prose"], [class~="not-prose"] *)) { background-color: transparent; border-bottom: none; color: var(--vega-type-color); } .prose :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) { background-color: #e5e8f0; border: none; color: var(--vega-type-color); font-family: var(--vega-font-text); font-size: var(--vega-type-body-font-size); font-weight: var(--vega-font-weight-bold); line-height: var(--vega-type-body-line-height); overflow-wrap: break-word; padding: var(--vega-space-xs) var(--vega-space-sm); text-align: start; vertical-align: middle; } .prose :where(thead th:first-child):not( :where([class~="not-prose"], [class~="not-prose"] *) ) { padding-inline-start: var(--vega-space-sm); } .prose :where(thead th:last-child):not( :where([class~="not-prose"], [class~="not-prose"] *) ) { padding-inline-end: var(--vega-space-sm); } .prose :where(thead tr:first-child th:first-child):not( :where([class~="not-prose"], [class~="not-prose"] *) ) { border-top-left-radius: 8px; } .prose :where(thead tr:first-child th:last-child):not( :where([class~="not-prose"], [class~="not-prose"] *) ) { border-top-right-radius: 8px; } .prose :where(thead tr:last-child th:first-child):not( :where([class~="not-prose"], [class~="not-prose"] *) ) { border-bottom-left-radius: 8px; } .prose :where(thead tr:last-child th:last-child):not( :where([class~="not-prose"], [class~="not-prose"] *) ) { border-bottom-right-radius: 8px; } .prose :where(tbody tr):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border-bottom: none; } .prose :where(tbody td, tbody th, tfoot td):not( :where([class~="not-prose"], [class~="not-prose"] *) ) { background-color: transparent; border-color: #d4d4d4; border-style: solid; border-width: 0 0 1px; color: var(--vega-type-color); font-family: var(--vega-font-text); font-size: var(--vega-type-body-font-size); font-weight: var(--vega-font-weight-regular); line-height: 1.3125rem; overflow-wrap: break-word; padding: var(--vega-space-base) var(--vega-space-sm); text-align: start; vertical-align: top; } .prose :where(tbody td:first-child, tbody th:first-child, tfoot td:first-child):not( :where([class~="not-prose"], [class~="not-prose"] *) ) { padding-inline-start: var(--vega-space-sm); } .prose :where(tbody td:last-child, tbody th:last-child, tfoot td:last-child):not( :where([class~="not-prose"], [class~="not-prose"] *) ) { padding-inline-end: var(--vega-space-sm); } /* * Desktop reading layout (Figma 1576:6371): * - Sidebar: 320px fixed * - Left gutter 32px, right margin 24px (1440 was missing the right * margin; 24px instead of a 32px clamp lets the body go wider) * - TOC: 240px + 24px gutter * - Body with On-this-page: 936px max (936 + 24 + 240 = 1200) * - Body without On-this-page: 1200px max (1064px at 1440) */ #table-of-contents-layout { box-sizing: border-box; max-width: 100%; padding-left: 0; /* Override Mintlify w-[19rem] (304px) so TOC content stays inside 240px. */ width: 100%; } /* get mintlify tabs in navbar to move to left */ #navbar div.flex-1.flex.items-center.gap-x-4:has(.nav-logo) { flex: initial; } /* get rid of default padding for content container, lowkey more for vibes than anything */ #content-container > div:first-child { box-sizing: border-box; min-width: 0; padding-left: var(--vega-content-gutter-left) !important; /* 24px gutter between body and TOC at large/small desktop widths. */ column-gap: var(--vega-space-md); width: 100%; } /* Page canvas: Amazon spec #F2F2F2 (tracker item 31; Figma wkqZ0iAr9bVLfvZa60kJpY). Painted on html/body and on every .almond-layout, not just the sidebar variant, so sidebar-less layouts, narrow viewports and error pages get the same colour. Light-only (appearance is strict light). */ html, body, .almond-layout { background-color: #f2f2f2; } /* add zon background color to the sidebar */ .almond-layout:has(> #sidebar-content) { background-color: #f2f2f2; /* Mintlify's layout padding would stack on the 24px right margin. */ padding-right: 0 !important; } /* add zon styles to the content area */ #content-area { background-color: #ffffff; border-radius: 32px; box-sizing: border-box; /* Fill the content row up to 1200px when On-this-page is absent. */ flex: 1 1 auto; min-width: 0; padding: 40px; width: 100%; max-width: var(--vega-body-max-wide); margin-bottom: var(--vega-space-2xl); } /* add zon styles to the sidebar */ #sidebar-content { background-color: #ffffff; padding-left: var(--vega-space-md); /* 24px */ padding-right: var(--vega-space-base); /* 16px */ width: var(--vega-sidebar-width); } /* Zero nested Mintlify horizontal padding so only the 24/16 chrome applies. */ #sidebar-content > div.flex-1, #sidebar-content > div.flex-1 > div, #sidebar-content .almond-nav-bottom-section, #sidebar-content #navigation-items [data-component-part="scroll-area-viewport"], #sidebar-content #navigation-items [data-component-part="scroll-area-content"] > div.px-2, #sidebar-content .sidebar-group-header { padding-left: 0; padding-right: 0; } /* Override Mintlify's 1rem / 1.75rem row indents so items sit on the chrome edge. */ #sidebar-content .sidebar-group > li > :is(a, button) { padding-left: 0.5rem !important; } #sidebar-content .sidebar-group > li > ul > li > :is(a, button) { padding-left: 1.25rem !important; } #content-side-layout { box-sizing: border-box; flex: 0 0 var(--vega-toc-width); max-width: var(--vega-toc-width); width: var(--vega-toc-width); } /* Large desktop: the reading line is the same width whether or not the page has an On-this-page column — an empty column still reserves its 240px so TOC-less pages don't grow wider than their neighbors. */ @media (min-width: 1280px) { #content-container > div:first-child #content-area { max-width: var(--vega-body-max); } #content-side-layout { display: flex !important; } } /* Figma and live keep search in the global header, not the docs sidebar. */ #sidebar-content #search-bar-entry { display: none !important; } /* Hide the desktop header search and assistant controls. */ div:has(> #search-bar-entry):has(> #assistant-entry) { display: none !important; } /* Global-header (jheader) circular search on narrow/iPhone widths: Mintlify's mobile base CSS collapses the button height (36x20 -> border-radius:50% renders as an orange oval) and drops the search box's absolute positioning (it flows inline, shoved right next to the "Developer" logo). Re-assert the jheader's intended 34x34 circle + right-aligned position below the breakpoint where it breaks (fine at >=467px). Verified live: restores the round, right-aligned icon. */ @media (max-width: 466px) { .search-box.search-box-position-guest { position: absolute; right: 24px; margin-top: -17px; } .circular-search.circular-search-dex, .circular-search-button.button2 { width: 34px; height: 34px; } } /* remove the space reserved for the hidden sidebar search row */ #navigation-items { padding-top: var(--vega-space-sm); top: 0px; } /* small padding update for quality of life */ #navigation-items > div:first-child { padding: 0; } /* inset the Base UI vertical scrollbar inside the sidebar */ #navigation-items > [data-orientation="vertical"] { right: 0 !important; /* flush with the sidebar's right edge */ } /* add separators between sidebar navigation groups */ #navigation-items > div:has(> .sidebar-group-header) ~ div:has(> .sidebar-group-header) { padding-top: var(--vega-space-md); position: relative; } #navigation-items > div:has(> .sidebar-group-header) ~ div:has(> .sidebar-group-header)::before { background-color: #d9d9d9; content: ""; height: 1px; left: 0; position: absolute; right: 0; top: 0; } /* add separators and breathing room between top-level sidebar items */ :is(#sidebar-content, #mobile-nav) .sidebar-group-header + ul.sidebar-group > li:not(:last-child) { border-bottom: 1px solid #d4d4d4; margin-bottom: 0; padding-bottom: 3px; } :is(#sidebar-content, #mobile-nav) .sidebar-group-header + ul.sidebar-group > li + li { padding-top: 3px; } /* match the language selector divider to the sidebar item separators */ :is(#sidebar-content, #mobile-nav) .almond-nav-bottom-section-divider { background-color: #d4d4d4; height: 1px; width: calc(100% + var(--vega-space-xs)); } /* Hide the language switcher: docs.json declares a single language ("en"), so the selector has nothing to switch to. The sidebar bottom section and the mobile footer contain only the switcher and its divider. */ #sidebar-content .almond-nav-bottom-section, #mobile-nav .vega-mobile-sidebar__footer, #localization-select-trigger { display: none; } /* add zon toc border color */ #table-of-contents-content a { border-color: #c7c7c7; } /* keep the non-nested toc rail continuous */ #table-of-contents-content { border-left: 2px solid #c7c7c7; } /* make top-level toc item indicators overlay the continuous rail */ #table-of-contents-content > li[data-depth="0"] > a { border-color: transparent; border-left-style: solid; border-left-width: 2px; margin-left: -2px; } /* remove the passive nested toc rail; nested states handle their own indicator */ #table-of-contents-content li[data-depth]:not([data-depth="0"]) { border-color: transparent; border-left-width: 0; } /* hide toc button icon */ #table-of-contents > button svg { display: none; } /* add black color to toc items */ .toc-item > a { color: #000000; } /* to fix toc button spacing */ #table-of-contents > button span { margin-left: 0; font-size: 18px; font-family: "Amazon Ember Modern Display", sans-serif; color: #000000; } /* "on this page" label, the heading button now wraps the toc list nav */ nav:has(#table-of-contents-content) h2 { margin: 16px 0; } nav:has(#table-of-contents-content) h2 button span { color: #000000; font-size: 18px; } /* breadcrumb styling */ .breadcrumb-list { background-color: #f2f2f2; border-radius: 8px; box-sizing: border-box; display: flex; flex: 1 1 0; flex-wrap: wrap; max-width: 100%; min-width: 0; padding: var(--vega-space-xs) var(--vega-space-base); width: 100%; white-space: normal; } .breadcrumb-list > * { flex: 0 1 auto; min-width: 0; } /* Final unlinked crumb (current page title) injected by custom-breadcrumbs.js */ .breadcrumb-item.vega-breadcrumb-selflink > span, .breadcrumb-item.vega-breadcrumb-current > span { color: inherit; cursor: default; } /* Mintlify's own footer feedback ("Was this page helpful? [Yes] [No]", .feedback-toolbar) renders on production builds (it is null when telemetry is off, e.g. `mint dev`), so gamma showed it stretched across the column *above* our widget (tracker 34, gtojust 2026-08-18 "the footer still doesn't look right"). Keep it in the DOM - custom-feedback.js proxies clicks to its #feedback-thumbs-up/down buttons - but never paint it. */ #content-area .feedback-toolbar { display: none !important; } /* inline and pre-pagination page feedback injected by custom-feedback.js */ .vega-breadcrumb-feedback-row { align-items: center; display: flex; gap: var(--vega-space-base); max-width: 100%; min-width: 0; width: 100%; } .vega-breadcrumb-feedback-row--breadcrumb { align-items: flex-start; } .vega-breadcrumb-feedback-row--pagination { justify-content: flex-start; margin-bottom: var(--vega-space-lg); padding-top: var(--vega-space-base); text-align: left; } #content-area > #content:has(+ .vega-breadcrumb-feedback-row--pagination) { margin-bottom: var(--vega-space-base) !important; } .vega-breadcrumb-feedback { align-items: center; color: #000000; display: inline-flex; flex: 0 0 auto; font-family: "Amazon Ember Modern Text", sans-serif; font-size: 14px; gap: var(--vega-space-sm); line-height: 21px; min-height: 30px; white-space: nowrap; } .vega-breadcrumb-feedback__label { display: inline-flex; } .vega-breadcrumb-feedback__buttons { align-items: center; display: inline-flex; gap: 10px; } .vega-breadcrumb-feedback__button { align-items: center; background: transparent; border: 0; color: #000000; cursor: pointer; display: inline-flex; height: 24px; justify-content: center; padding: 0; width: 24px; } .vega-breadcrumb-feedback__button svg { display: none; height: 24px; overflow: visible; width: 24px; } .vega-breadcrumb-feedback__button:not( .vega-breadcrumb-feedback__button--selected ) .vega-breadcrumb-feedback__icon--off { display: block; } .vega-breadcrumb-feedback__button:not( .vega-breadcrumb-feedback__button--selected ):is(:hover, :focus-visible) .vega-breadcrumb-feedback__icon--off { display: none; } .vega-breadcrumb-feedback__button:not( .vega-breadcrumb-feedback__button--selected ):is(:hover, :focus-visible) .vega-breadcrumb-feedback__icon--off-hover { display: block; } .vega-breadcrumb-feedback__button--selected .vega-breadcrumb-feedback__icon--on { display: block; } .vega-breadcrumb-feedback__button--selected:is(:hover, :focus-visible) .vega-breadcrumb-feedback__icon--on { display: none; } .vega-breadcrumb-feedback__button--selected:is(:hover, :focus-visible) .vega-breadcrumb-feedback__icon--on-hover { display: block; } .vega-breadcrumb-feedback__button:focus-visible { border-radius: 4px; outline: 2px solid #ff6200; outline-offset: 3px; } body.vega-feedback-modal-open { overflow: hidden; } .vega-feedback-modal-overlay { align-items: center; background: rgb(0 0 0 / 74%); display: flex; inset: 0; justify-content: center; padding: var(--vega-space-lg); position: fixed; z-index: 1000; } .vega-feedback-modal-overlay[hidden] { display: none; } .vega-feedback-modal { background: #ffffff; border-radius: 24px; box-shadow: 0 0 30px rgb(0 0 0 / 20%), 0 5px 10px rgb(0 0 0 / 20%); box-sizing: border-box; color: #000000; display: flex; flex-direction: column; font-family: "Amazon Ember Modern Text", sans-serif; height: min(424px, calc(100dvh - var(--vega-space-lg))); max-width: 480px; overflow-y: auto; padding: var(--vega-space-lg); position: relative; width: min(480px, calc(100vw - var(--vega-space-lg))); } .vega-feedback-modal__header { align-items: center; display: flex; gap: var(--vega-space-md); justify-content: space-between; margin-bottom: 20px; } .vega-feedback-modal__close { align-items: center; background: transparent; border: 0; border-radius: 50%; cursor: pointer; display: inline-flex; flex: 0 0 24px; height: 24px; justify-content: center; padding: 0; width: 24px; } .vega-feedback-modal__close svg { display: block; height: 11px; width: 11px; } .vega-feedback-modal__close:hover { opacity: 0.72; } .vega-feedback-modal__close:focus-visible, .vega-feedback-modal__option input:focus-visible, .vega-feedback-modal__details:focus-visible, .vega-feedback-modal__action:focus-visible { outline: 2px solid #ff6200; outline-offset: 3px; } .vega-feedback-modal__title { color: #000000; font-family: "Amazon Ember Modern Display", sans-serif; font-size: 20px; font-weight: 700; line-height: 28px; margin: 0; min-width: 0; } .vega-feedback-modal__form { display: flex; flex: 1; flex-direction: column; min-height: 0; } .vega-feedback-modal__options { border: 0; display: grid; gap: var(--vega-space-xs); margin: 0; padding: 0; } .vega-feedback-modal__option { align-items: center; cursor: pointer; display: flex; font-size: 14px; gap: var(--vega-space-sm); line-height: 20px; width: fit-content; } .vega-feedback-modal__option input { -webkit-appearance: none; appearance: none; border: 2px solid #486079; border-radius: 50%; cursor: pointer; display: grid; flex: 0 0 20px; height: 20px; margin: 0; place-content: center; width: 20px; } .vega-feedback-modal__option input::before { background: #ffffff; border-radius: 50%; content: ""; height: 8px; transform: scale(0); transition: transform 0.12s ease-in-out; width: 8px; } .vega-feedback-modal__option input:checked { background: #0256cf; border-color: #0256cf; } .vega-feedback-modal__option input:checked::before { transform: scale(1); } .vega-feedback-modal__option input:focus-visible { outline-color: #0256cf; } .vega-feedback-modal__details { background: #ffffff; border: 1px solid #2d415e; border-radius: 16px; box-sizing: border-box; color: #000000; display: block; font-family: "Amazon Ember Modern Text", sans-serif; font-size: 14px; font-weight: 400; flex-shrink: 0; height: 76px; line-height: 18px; margin-top: var(--vega-space-sm); max-width: 416px; min-height: 76px; padding: var(--vega-space-sm) var(--vega-space-base); resize: vertical; width: 100%; } .vega-feedback-modal__details[hidden] { display: none; } .vega-feedback-modal__details::placeholder { color: #777777; opacity: 1; } .vega-feedback-modal__actions { display: flex; gap: var(--vega-space-lg); margin-top: auto; padding-top: var(--vega-space-base); } .vega-feedback-modal__action { border: 0; border-radius: 20px; box-sizing: border-box; cursor: pointer; font-family: "Amazon Ember Modern Text", sans-serif; font-size: 14px; font-weight: 400; height: 24px; line-height: 21px; min-height: 24px; min-width: 80px; padding: 0 17px; width: 80px; } .vega-feedback-modal__submit { background: #ff6200; color: #ffffff; } .vega-feedback-modal__submit:hover:not(:disabled) { background: #e65700; } .vega-feedback-modal__submit:disabled { background: #e9ebef; color: #b9bfc7; cursor: not-allowed; } .vega-feedback-modal__cancel { background: #e9ebef; color: #b9bfc7; } .vega-feedback-modal__form--has-selection .vega-feedback-modal__cancel { background: #ffffff; border: 1px solid #2d415e; color: #000000; } .vega-feedback-modal__sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } /* breadcrumb item link color */ .breadcrumb-item a { color: #3f82ff; } /* keep ancestor toc sections neutral when a nested item is deepest active */ #table-of-contents-content li[data-active="true"]:not([data-active-deepest]) > a { border-color: transparent; border-left-width: 2px; color: #000000; text-shadow: none; } /* re-add active toc elem border color */ #table-of-contents-content > li[data-active-deepest="true"] > a, #table-of-contents-content li[data-active-deepest="true"]:not([data-depth="0"]) { border-color: #ff6200; border-left-width: 4px; margin-left: -2px; } /* nested active toc items get the same weight treatment as top-level ones */ #table-of-contents-content li[data-active-deepest="true"]:not([data-depth="0"]) > a { font-weight: 500; text-shadow: -0.15px 0 0 currentColor, 0.15px 0 0 currentColor; } /* set toc hover indicators */ #table-of-contents-content > li[data-depth="0"]:has(> a:hover) > a, #table-of-contents-content li[data-depth]:not([data-depth="0"]):hover { border-color: #777777; border-left-width: 2px; margin-left: -2px; } /* hovering the active toc item only changes color, keeps the 4px width */ #table-of-contents-content > li[data-active-deepest="true"]:has(> a:hover) > a, #table-of-contents-content li[data-active-deepest="true"]:not([data-depth="0"]):hover { border-left-width: 4px; } /* style the copy page contextual menu trigger as a navy pill */ #page-context-menu-button, #page-context-menu-button + button[aria-label="More actions"][aria-haspopup="menu"] { box-sizing: border-box; height: 36px; min-height: 36px; display: inline-flex; align-items: center; color: #2d415e; } #page-context-menu-button { background-color: transparent; border: 1px solid #2d415e; border-radius: 999px 0px 0px 999px; border-right: none; padding-right: 0px; } #page-context-menu-button + button[aria-label="More actions"][aria-haspopup="menu"] { background-color: transparent; border: 1px solid #2d415e; border-radius: 0px 999px 999px 0px; border-left: none; aspect-ratio: auto; justify-content: center; width: 36px; padding: 0; } #page-context-menu-button + button[aria-label="More actions"][aria-haspopup="menu"] svg { color: #2d415e; height: 16px; width: 16px; overflow: visible; } /* move heading anchor links to the right of heading titles */ :is(h1, h2, h3, h4, h5, h6)[id].group { align-items: center; } :is(h1, h2, h3, h4, h5, h6)[id].group > span { order: 1; } :is(h1, h2, h3, h4, h5, h6)[id].group > div.absolute { align-items: center; display: flex; height: 24px; justify-content: center; margin-left: var(--vega-space-xs); order: 2; position: static; width: 24px; } :is(h1, h2, h3, h4, h5, h6)[id].group a[aria-label="Navigate to header"] { align-items: center; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #2d415e !important; display: inline-flex; height: 24px; justify-content: center; margin-left: 0; padding: 0 !important; position: relative; text-decoration: none !important; transition: none !important; width: 24px; } :is(h1, h2, h3, h4, h5, h6)[id].group a[aria-label="Navigate to header"]:is( :hover, :focus, :focus-visible, :active ) { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #2d415e !important; text-decoration: none !important; } :is(h1, h2, h3, h4, h5, h6)[id].group a[aria-label="Navigate to header"] > div { display: none !important; } :is(h1, h2, h3, h4, h5, h6)[id].group a[aria-label="Navigate to header"] svg { display: none !important; } :is(h1, h2, h3, h4, h5, h6)[id].group a[aria-label="Navigate to header"]::before { background-color: currentColor; content: ""; display: block; flex: none; height: 24px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 7C20.3137 7 23 9.68629 23 13C23 16.3137 20.3137 19 17 19H13V17H17C19.2091 17 21 15.2091 21 13C21 10.7909 19.2091 9 17 9H14C11.7909 9 10 10.7909 10 13H8C8 9.68629 10.6863 7 14 7H17ZM11 7H7C4.79086 7 3 8.79086 3 11C3 13.2091 4.79086 15 7 15H10C12.2091 15 14 13.2091 14 11H16C16 14.3137 13.3137 17 10 17H7C3.68629 17 1 14.3137 1 11C1 7.68629 3.68629 5 7 5H11V7Z' fill='black'/%3E%3C/svg%3E"); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 24px 24px; mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 7C20.3137 7 23 9.68629 23 13C23 16.3137 20.3137 19 17 19H13V17H17C19.2091 17 21 15.2091 21 13C21 10.7909 19.2091 9 17 9H14C11.7909 9 10 10.7909 10 13H8C8 9.68629 10.6863 7 14 7H17ZM11 7H7C4.79086 7 3 8.79086 3 11C3 13.2091 4.79086 15 7 15H10C12.2091 15 14 13.2091 14 11H16C16 14.3137 13.3137 17 10 17H7C3.68629 17 1 14.3137 1 11C1 7.68629 3.68629 5 7 5H11V7Z' fill='black'/%3E%3C/svg%3E"); mask-position: center; mask-repeat: no-repeat; mask-size: 24px 24px; width: 24px; } /* general nav tab styles for zon */ a.nav-tabs-item, button.nav-tabs-item { color: #c5c5c5; position: relative; transition: all 0.1s ease-in-out; } button.nav-tabs-item > div:first-child, button.nav-tabs-item svg { color: inherit; transition: all 0.1s ease-in-out; } /* zon nav tab hover color, this is not officially from them, i added for qual of life */ a.nav-tabs-item:hover, button.nav-tabs-item:hover { color: #ffffff; } /* zon nav tab active color */ a.nav-tabs-item[data-active="true"], button.nav-tabs-item.font-semibold { color: #ffffff; transition: all 0.1s ease-in-out; } /* zon nav tab active border */ a.nav-tabs-item[data-active="true"]::after, button.nav-tabs-item.font-semibold::after { background-color: #ff6200; border-radius: 1.5rem 1.5rem 0 0; bottom: 0; content: ""; height: 3px; left: 50%; pointer-events: none; position: absolute; transform: translateX(-50%); width: 100%; } /* zon nav tab active hover color, this is not officially from them, i added for qual of life */ a.nav-tabs-item[data-active="true"]:hover, button.nav-tabs-item.font-semibold:hover { color: #c5c5c5; } /* add black color to note callouts */ .callout span { color: #000000; } /* allow custom callouts to override generated MDX span colors */ .callout.custom-callout [data-component-part="callout-content"] span { color: var(--custom-callout-text-color); } /* remove the global prose paragraph spacing inside custom callouts */ #content-area div.mdx-content .callout.custom-callout [data-component-part="callout-content"] > span[data-as="p"] { margin-top: 0.25rem; } /* keep custom callout labels black and inline with the first paragraph */ .callout [data-component-part="callout-content"] > span.callout-label { color: #000000 !important; } .callout [data-component-part="callout-content"] > .callout-label + p, .callout [data-component-part="callout-content"] > .callout-label + [data-as="p"] { display: inline !important; margin-block: 0; } /* * Callout link color must live in @layer utilities so it can beat Mintlify's * built-in `[&_a]:text-current!` (also in utilities). Unlayered !important loses * to layered !important, which is why the previous rule never painted links blue. */ @layer utilities { .callout [data-component-part="callout-content"] a:not(.amazon-callout__button), .amazon-callout .amazon-callout__body a { border-bottom: 1px solid transparent !important; color: #3f82ff !important; transition: border-color 0.1s ease-in-out, color 0.1s ease-in-out; } .callout [data-component-part="callout-content"] a:not(.amazon-callout__button):hover, .amazon-callout .amazon-callout__body a:hover { border-bottom: 1px solid #3f82ff !important; } } /* link color */ .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: #0256cf; border-bottom: 1px solid transparent; font-weight: 400; } /* link hover bottom border */ .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):hover { border-bottom: 1px solid #0256cf; } /* inline code inside prose links keeps the link color, so code-wrapped links (e.g. [`Tracing`](...)) still read as links */ .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) code { color: inherit; } /* Mintlify marks outbound prose links with target="_blank". Restore the external-link glyph from the source docs while leaving internal links and component-owned link treatments unchanged. */ .mdx-content a.link[target="_blank"]:not(.amazon-download-button)::after { background-color: currentColor; content: ""; display: inline-block; height: 0.75em; margin-left: 0.25em; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") center / contain no-repeat; vertical-align: -0.05em; width: 0.75em; } /* Figma-aligned fenced code blocks; inline code keeps Mintlify's treatment */ #content-area .code-block:has(> [data-component-part="code-block-root"]) { --vega-code-block-background: #ffffff; --vega-code-block-border: #c5c5c5; --vega-code-block-control: #2d415e; --vega-code-block-text: var(--vega-type-color); background: var(--vega-code-block-background); border: 1px solid var(--vega-code-block-border); border-radius: var(--vega-space-md); box-shadow: none !important; box-sizing: border-box; color: var(--vega-code-block-text); overflow: hidden; } #content-area .code-block > [data-component-part="code-block-root"] { background: var(--vega-code-block-background) !important; border: 0; border-radius: calc(var(--vega-space-md) - 1px) !important; box-sizing: border-box; color: var(--vega-code-block-text); overflow: hidden; } #content-area .code-block > [data-component-part="code-block-root"] > [data-component-part="scroll-area-viewport"] { border-radius: inherit; box-sizing: border-box; padding: var(--vega-space-base); } #content-area .code-block > [data-floating-buttons="true"] { align-items: center; gap: 2px; right: var(--vega-space-base) !important; top: var(--vega-space-xs) !important; z-index: 2; } #content-area .code-block > [data-floating-buttons="true"] button { background: transparent !important; border-radius: 6px; color: var(--vega-code-block-control); height: var(--vega-space-md); width: var(--vega-space-md); } #content-area .code-block > [data-floating-buttons="true"] button:hover { background: rgba(45, 65, 94, 0.08) !important; } #content-area .code-block > [data-floating-buttons="true"] button svg { color: var(--vega-code-block-control) !important; height: var(--vega-space-base); width: var(--vega-space-base); } /* Figma-aligned Base UI tooltips (Copy / Ask DevAssistant on code blocks). Content tooltips ( - the glossary terms) keep Mintlify's white card; the dark background made their grey text unreadable (mayank, live-tv-testing). */ [role="tooltip"][data-side]:not([data-component-part="tooltip-content"]) { background: #161d26 !important; border-radius: 8px !important; } #content-area .code-block > [data-fade-overlay="true"] { --fade-color-dark: var(--vega-code-block-background) !important; --fade-color-light: var(--vega-code-block-background) !important; } #content-area .code-block > [data-component-part="code-block-root"] :where(pre, pre code) { background: transparent !important; border: 0; border-radius: 0; color: var(--vega-code-block-text) !important; } /* Enable Mintlify-style wrap on all fenced (```) code blocks */ #content-area .code-block:has(> [data-component-part="code-block-root"]) { --code-padding-right: 0px !important; } #content-area .code-block > [data-component-part="code-block-root"] { white-space: pre-wrap; } #content-area .code-block > [data-component-part="code-block-root"] > [data-component-part="scroll-area-viewport"] { overflow-x: hidden !important; } #content-area .code-block > [data-component-part="code-block-root"] :where( [data-component-part="code-group-tab-content"], [data-component-part="code-block-content"] ) { white-space: pre-wrap; } #content-area .code-block > [data-component-part="code-block-root"] pre.shiki > code { padding-right: 0 !important; width: 100% !important; } #content-area .code-block > [data-component-part="code-block-root"] pre.shiki .line span { white-space: pre-wrap !important; word-break: break-word; } #content-area .code-block > [data-fade-overlay="true"] { opacity: 0; } /* space between breadcrumb + title is 24px */ .space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: var(--vega-space-md); } /* get rid of external link icon, was colliding with content */ .card #card-link-arrow-icon { display: none; } /* title only card styles — match .vega-home-cta states. Mintlify Cards are a .card div with `hover:border-primary!` in a Tailwind @layer; a layered !important beats any unlayered !important, so the orange hover border can't be overridden by border-color (tracker 36: orange ring showing through on hover). Draw the 1px navy edge with an inset outline instead and zero the real border in every state. */ .card.vega-title-card { align-items: center; background-color: #ffffff; border: 0 !important; border-bottom: 0 !important; outline: 1px solid #2d415e; outline-offset: -1px; border-radius: 20px; box-sizing: border-box; color: #000000 !important; display: flex !important; font-family: "Amazon Ember Modern Text", sans-serif; font-size: 16px; font-weight: 400; height: 40px; justify-content: center; line-height: 24px; max-width: 252px; padding: 7px var(--vega-space-base); text-align: center; text-decoration: none; transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out; } .card.vega-title-card:hover, .card.vega-title-card:focus, .card.vega-title-card:focus-visible, .dark .card.vega-title-card:hover, .dark .card.vega-title-card:focus, .dark .card.vega-title-card:focus-visible { background-color: #d8dee9; border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; color: #000000 !important; outline: 1px solid #2d415e; outline-offset: -1px; transform: none !important; } .card.vega-title-card:active, .dark .card.vega-title-card:active { background-color: #e2e5ee; border: 0 !important; border-bottom: 0 !important; outline: 1px solid #2d415e; outline-offset: -1px; box-shadow: none !important; color: #000000 !important; transform: none !important; } .card.vega-title-card a, .card.vega-title-card a:hover, .card.vega-title-card a:active { border: none !important; border-bottom: none !important; color: #000000 !important; } .vega-title-card div[data-component-part="card-content-container"] { align-items: center; display: flex; justify-content: center; padding: 0; width: 100%; } .vega-title-card div[data-component-part="card-content-container"] > a > div.absolute:has(> svg) { display: none; } .vega-title-card h2[data-component-part="card-title"] { color: #000000; font-family: "Amazon Ember Modern Text", sans-serif; font-size: 16px; font-weight: 400 !important; line-height: 16px; text-shadow: none !important; } .vega-title-card:is(:hover, :active) h2[data-component-part="card-title"] { color: #000000 !important; } .vega-title-card div[data-component-part="card-content"]:empty { display: none; } /* develop page hero layout */ .vega-develop-hero { align-items: center; display: grid; gap: var(--vega-space-lg); grid-template-columns: minmax(0, 1fr) 280px; margin-bottom: 2.5rem; } .vega-develop-hero-content { min-width: 0; } .vega-develop-hero-cards { display: grid; gap: var(--vega-space-base); grid-template-columns: repeat(2, minmax(0, 1fr)); } .vega-develop-hero-cards-full { grid-column: 1 / -1; } .vega-develop-hero-image { max-width: 280px; width: 100%; } /* vega image card styles */ .vega-image-card { background-color: #ffffff; border: 2px solid #dee1ec; border-radius: 24px; display: flex; flex-direction: column; padding: var(--vega-space-base) var(--vega-space-md); } .vega-image-card:is(:hover, :focus-visible, :focus-within) { background-color: #ffffff !important; border-color: #dee1ec !important; box-shadow: none !important; transform: none !important; } .vega-image-card img { height: 96px; margin-bottom: 0.875rem; object-fit: contain; object-position: left center; width: 120px; } .vega-image-card div[data-component-part="card-content-container"] { display: flex; flex: 1; flex-direction: column; padding: 0; } .vega-image-card div[data-component-part="card-content-container"] > .w-full, .vega-image-card div[data-component-part="card-content-container"] > a > .w-full { display: flex; flex: 1; flex-direction: column; } .vega-image-card div[data-component-part="card-content-container"] > a > .absolute { display: none; } .vega-image-card h2 { font-size: 1.5rem; } .vega-image-card span[data-as="p"] { font-size: 1rem; color: #000000; } .vega-image-card div[data-component-part="card-content"] { display: flex; flex: 1; flex-direction: column; margin-top: 0.875rem; } .vega-image-card div[data-component-part="card-cta"] { margin-top: auto; padding-top: 1.875rem; } .vega-image-card-description { color: #000000; font-size: 1rem; line-height: 1.5; } .vega-image-card .vega-image-card-cta { align-self: flex-start; border-bottom: none !important; color: #05409e !important; display: inline-flex; font-size: 14px; font-weight: 600; gap: 0.375rem; line-height: 24px; margin-top: auto; padding-top: 1.875rem; text-decoration: none; text-decoration-color: currentColor; } .vega-image-card .vega-image-card-cta svg { color: inherit; flex: none; } .vega-image-card .vega-image-card-cta:hover, .vega-image-card .vega-image-card-cta:focus-visible { border-bottom: none !important; color: #05409e !important; text-decoration: none; } .vega-image-card .vega-image-card-cta:hover span, .vega-image-card .vega-image-card-cta:focus-visible span { text-decoration: underline; text-decoration-color: currentColor; } /* ===== VegaCard custom component (snippets/vega-card.jsx) ===== Self-contained card used in place of the Mintlify component. Renders an (whole card clickable) or a

(when no href). */ .vega-card { background-color: #ffffff; border: 1px solid #9cacc8 !important; border-radius: 24px; box-shadow: none; color: #000000 !important; display: flex; flex-direction: column; min-height: 184px; padding: var(--vega-space-base) var(--vega-space-md); text-decoration: none !important; transition: border-color 0.15s ease, box-shadow 0.15s ease; } a.vega-card:hover, a.vega-card:focus-visible { border-color: #435e89 !important; box-shadow: 0 0 0 1px #435e89, 0 2px 4px rgba(0, 0, 0, 0.25); } .vega-card__icon { align-self: flex-start; flex: none; height: 28px; margin-bottom: 10px; object-fit: contain; object-position: left center; width: auto; } .vega-card__img { align-self: flex-start; flex: none; height: 96px; margin-bottom: 14px; object-fit: contain; object-position: left center; width: 120px; } .vega-card__title { color: #000000; font-family: "Amazon Ember Modern Display", sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin: 0; } .vega-card__body { color: #000000; font-size: 1rem; line-height: 1.4; margin-top: var(--vega-space-xs); } .vega-card__body > :first-child { margin-top: 0; } .vega-card__body > :last-child { margin-bottom: 0; } .vega-card__link { align-items: center; color: #0256cf; display: inline-flex; font-size: 16px; gap: 6px; line-height: 21px; } /* single CTA pinned to the bottom of the card */ .vega-card > .vega-card__link { margin-top: auto; padding-top: var(--vega-space-sm); } /* multiple CTA links render as a column, pinned to the bottom */ .vega-card__links { display: flex; flex-direction: column; gap: var(--vega-space-xs); margin-top: auto; padding-top: var(--vega-space-sm); } a.vega-card:hover .vega-card__link, a.vega-card__link:hover { text-decoration: underline; } .vega-card__link-arrow { flex: none; } /* render the card's own bottom border inside prose (prose link rules otherwise hijack border-bottom on the card and hide it) */ .prose a.vega-card { border-bottom: 1px solid #9cacc8 !important; } .prose a.vega-card:hover { border-bottom-color: #435e89 !important; } /* CTA links inside the card keep clean underline-on-hover, not prose borders */ .prose a.vega-card__link, .prose a.vega-card__link:hover { border-bottom: none !important; } /* Vega agencies partner list */ .vega-directory-section { background-color: #ffffff; padding-bottom: var(--vega-space-2xl); padding-top: var(--vega-space-2xl); } .vega-directory-lede, .vega-directory-lede > [data-as="p"] { color: var(--amazon-component-muted); font-family: var(--vega-font-text); font-size: var(--vega-type-body-font-size); font-weight: var(--vega-font-weight-regular); line-height: 1.75rem; } .vega-directory-grid { display: grid; gap: var(--vega-space-md); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* The 3-up base rule above is overridden to a single column at >=1024px further down, so it only ever rendered below the desktop breakpoint -- where three tracks squeeze each agency card to ~103px and its text to ~51px. Stack on mobile instead. NOTE: this leaves the 3-up rule unreachable at every width; if the directory is meant to be 3-up on desktop, that belongs in the min-width: 1024px block, not here. */ @media (max-width: 1023px) { .vega-directory-grid { grid-template-columns: minmax(0, 1fr); } } .vega-agency-card-columns { row-gap: var(--vega-space-md); } .vega-agency-list { border-bottom: 1px solid #e5e7eb; border-top: 1px solid #e5e7eb; } .vega-agency-item { padding: var(--vega-space-lg) 0; } .vega-agency-item + .vega-agency-item { border-top: 1px solid #e5e7eb; } .vega-agency-logo { align-items: center; display: flex; margin-bottom: 1.25rem; } .vega-agency-logo img { max-height: 4rem; max-width: 16rem; object-fit: contain; object-position: left center; } .vega-agency-item p { color: #000000; font-size: 1rem; line-height: 1.6; margin: 0; } .vega-agency-links { display: flex; /* Without wrapping, a row of three or more agency links overflows the viewport below ~430px and forces the whole page to scroll sideways. */ flex-wrap: wrap; gap: var(--vega-space-xs); margin-top: 1.25rem; } /* log out button styles */ #navbar .logout-link { color: #c5c5c5; transition: all 0.1s ease-in-out; } #navbar .logout-link:hover { color: #ffffff; } /* responsive layout rules */ @media (min-width: 1024px) { div:has(> #chat-assistant-sheet) { bottom: 0 !important; height: auto !important; margin-top: 0 !important; position: fixed !important; right: 0 !important; top: var(--banner-height, 0px) !important; z-index: 22 !important; } .vega-directory-grid { grid-template-columns: 1fr; } } /* Small-desktop "On this page" control, matched to Figma node 1432:3571. */ @media (min-width: 1024px) and (max-width: 1279px) { #content-container { padding-top: 60px; position: relative; } #content-container > .vega-small-desktop-toc { display: block; position: absolute; /* 16px further in than the first cut so the control sits inside the page margin (tracker 33) */ right: calc(var(--vega-content-gutter-right) + 24px); top: 11px; z-index: 50; } #content-container > .vega-small-desktop-toc[hidden], #content-container .vega-small-desktop-toc__dropdown[hidden] { display: none; } #content-container .vega-small-desktop-toc__trigger { align-items: center; align-self: stretch; appearance: none; background: transparent; border: 0; border-radius: 0; color: var(--vega-type-color); cursor: pointer; display: flex; flex: 0 0 auto; font: inherit; gap: 8px; height: 36px; justify-content: center; margin: 0; min-height: 36px; padding: 0; touch-action: manipulation; width: auto; } #content-container .vega-small-desktop-toc .vega-mobile-navigation__toc-icon { color: #2d415e; display: block; flex: 0 0 24px; height: 24px; width: 24px; } /* Scrolled: the control pins below the navbar and collapses to the icon. */ #content-container > .vega-small-desktop-toc--scrolled { position: fixed; top: calc(var(--mintlify-slot-header-height, 3.5rem) + 11px); } #content-container .vega-small-desktop-toc.vega-small-desktop-toc--scrolled .vega-mobile-navigation__toc-label { display: none; } #content-container .vega-small-desktop-toc .vega-mobile-navigation__toc-label { color: #000000; display: inline; font-family: var(--vega-font-text); font-size: 18px; font-style: normal; font-weight: 600; line-height: 20px; white-space: nowrap; } #content-container .vega-small-desktop-toc__trigger:focus-visible { border-radius: 2px; outline: 2px solid #0256cf; outline-offset: 2px; } #content-container .vega-small-desktop-toc__dropdown { background: #ffffff; border: 1px solid #ffffff; border-radius: 24px; box-shadow: 0 0 15px rgb(0 0 0 / 20%), 0 4px 8px rgb(0 0 0 / 20%); box-sizing: border-box; color: #000000; display: flex; flex-direction: column; max-height: min( 568px, calc( 100dvh - var(--mintlify-slot-header-height, 3.5rem) - var(--vega-space-lg) ) ); overflow: hidden; padding: 22px 8px var(--vega-space-md) 14px; position: absolute; right: 0; top: calc(100% + var(--vega-space-xs)); width: 228px; z-index: 50; } #content-container .vega-small-desktop-toc .vega-mobile-toc__heading { align-items: center; display: flex; flex: 0 0 auto; font-family: var(--vega-font-text); font-size: 18px; font-weight: 500; gap: 4px; line-height: 20px; padding-left: 9px; } #content-container .vega-small-desktop-toc .vega-mobile-toc__heading-icon { color: #2d415e; display: block; flex: 0 0 var(--vega-space-base); height: var(--vega-space-base); width: var(--vega-space-base); } #content-container .vega-small-desktop-toc__dropdown nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; } #content-container .vega-small-desktop-toc .vega-mobile-toc__list, #content-container .vega-small-desktop-toc .vega-mobile-toc__list ul { list-style: none; margin: 0 !important; padding: 0 !important; } #content-container .vega-small-desktop-toc .vega-mobile-toc__list { border-left: 1px solid #cdcdcd; margin-top: 14px !important; } #content-container .vega-small-desktop-toc .vega-mobile-toc__list li { border: 0 !important; margin: 0 !important; padding: 0 !important; } #content-container .vega-small-desktop-toc .vega-mobile-toc__list a { border: 0 !important; border-left: 1px solid transparent !important; color: #474747; display: block; font-family: var(--vega-font-text); font-size: 14px; font-weight: var(--vega-font-weight-regular); line-height: 21px; margin: 0 0 0 -1px !important; padding: 5.5px 0 5.5px 9px !important; text-decoration: none; } #content-container .vega-small-desktop-toc .vega-mobile-toc__list li[data-active-deepest="true"] > a { border-left-color: #ff6200 !important; border-left-width: 4px !important; color: #000000; font-weight: var(--vega-font-weight-bold); padding-left: 6px !important; } #content-container .vega-small-desktop-toc .vega-mobile-toc__list li:not([data-active-deepest="true"]) > a:hover { border-left-color: #777777 !important; border-left-width: 2px !important; padding-left: 8px !important; } #content-container .vega-small-desktop-toc .vega-mobile-toc__list a:focus-visible { border-radius: 2px; outline: 2px solid #0256cf; outline-offset: -2px; } } @media (max-width: 1023px) { #content-container { margin-left: 0; padding: var(--vega-space-base); width: 100%; } #content-container > div:first-child { column-gap: 0; max-width: 100%; padding-left: 0 !important; padding-right: 0 !important; } #content-area { border-radius: 24px; max-width: 100%; padding: var(--vega-space-md); } #content-side-layout { max-width: 100%; width: 100%; } #sidebar-content { max-width: 100vw; } } @media (max-width: 767px) { .vega-mobile-navigation-row { padding-inline: var(--vega-space-sm); } #content-container { padding: var(--vega-space-sm); padding-top: var(--vega-space-xs); /* 8px gap below secondary nav */ } #content-area { border-radius: 20px; padding: 20px; } .breadcrumb-list { padding: var(--vega-space-xs) var(--vega-space-sm); } .vega-breadcrumb-feedback-row { align-items: stretch; flex-direction: column; gap: var(--vega-space-xs); } .vega-breadcrumb-feedback { align-self: flex-start; } .vega-feedback-modal-overlay { padding: var(--vega-space-base); } .vega-develop-hero { grid-template-columns: 1fr; } .vega-develop-hero-cards { grid-template-columns: 1fr; } } @media (max-width: 480px) { #content-area { border-radius: 18px; padding: var(--vega-space-base); } } /* sample apps landing page */ .vega-sample-apps { margin-top: var(--vega-space-md); margin-bottom: var(--vega-space-base); } /* sample apps snippet styles */ .vega-sample-apps-version-toggle { border: 1px solid #3470eb; border-radius: 8px; display: flex; flex-wrap: wrap; margin-bottom: 1.25rem; max-width: 100%; overflow: hidden; width: fit-content; } .vega-sample-apps-version-toggle button { background: #ffffff; border: 0; color: #3470eb; cursor: pointer; font: inherit; font-size: 0.875rem; font-weight: 500; padding: 10px 20px; } .vega-sample-apps-version-toggle button.active { background: #3470eb; color: #ffffff; } .vega-sample-apps-version-toggle button:hover:not(.active) { background: #f0f7ff; } .vega-sample-apps-version-toggle button:focus-visible { outline: 3px solid rgba(52, 112, 235, 0.18); outline-offset: -3px; z-index: 1; } .vega-sample-apps-search-row { margin-bottom: 1.25rem; } .vega-sample-apps-search-label { display: block; font-weight: 600; margin-bottom: var(--vega-space-xs); } .vega-sample-apps-search { border: 1px solid #c5c5c5; border-radius: 26px; box-sizing: border-box; color: #000000; font: inherit; padding: 10px var(--vega-space-base); width: 100%; } .vega-sample-apps-search:focus { border-color: #3470eb; outline: 3px solid rgba(52, 112, 235, 0.18); } .vega-sample-apps-layout { align-items: start; display: grid; gap: var(--vega-space-md); grid-template-columns: 250px minmax(0, 1fr); } /* Below the desktop breakpoint the 250px filter rail leaves the results column too narrow to hold a card, so stack the rail above the grid. This override must stay after the base rule: a media query adds no specificity, so an earlier-declared version loses the cascade to the unconditional rule. */ @media (max-width: 1023px) { .vega-sample-apps-layout { grid-template-columns: minmax(0, 1fr); } } .vega-sample-apps-filters { background: #f0f1f5; border-radius: 16px; padding: var(--vega-space-base); } .vega-sample-apps-filter-header { align-items: center; display: flex; gap: var(--vega-space-sm); justify-content: space-between; margin-bottom: var(--vega-space-sm); } .vega-sample-apps-filter-title, .vega-sample-apps-filter-legend { color: #000000; font-family: "Amazon Ember Modern Display", sans-serif; font-size: 1rem; font-weight: 600; line-height: 1.3; } .vega-sample-apps-clear { background: transparent; border: 0; color: #3470eb; cursor: pointer; font: inherit; padding: 0; } .vega-sample-apps-clear:hover { text-decoration: underline; } .vega-sample-apps-filter-group { border: 0; margin: 0; padding: 0; } .vega-sample-apps-filter-legend { margin-bottom: var(--vega-space-sm); padding: 0; } .vega-sample-apps-filter-list { display: grid; gap: 0.625rem; } .vega-sample-apps-filter-option { align-items: flex-start; color: #000000; cursor: pointer; display: flex; gap: var(--vega-space-xs); line-height: 1.35; } .vega-sample-apps-filter-option input { margin-top: 0.2rem; } .vega-sample-apps-results-header { align-items: center; display: flex; justify-content: space-between; margin-bottom: var(--vega-space-base); } .vega-sample-apps-count { color: #666666; margin: 0; } .vega-sample-apps-grid { display: grid; gap: var(--vega-space-base); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } .vega-sample-app-card { background: #ffffff; border: 1px solid #dee1ec !important; border-radius: 16px; box-shadow: none; color: #000000 !important; display: flex; flex-direction: column; line-height: 1.5; min-height: 260px; padding: 18px; position: relative; text-decoration: none; transition: border-color 0.15s ease; } .vega-sample-app-card:hover { border-color: #7c92b6 !important; box-shadow: none; transform: none; } .vega-sample-app-card-title { align-items: center; color: #3470eb; display: flex; flex-wrap: wrap; font-family: "Amazon Ember Modern Display", sans-serif; font-size: 1.35rem; font-weight: 600; gap: 0.5rem; line-height: 1.2; margin-bottom: var(--vega-space-sm); } .vega-sample-app-version-badge { background: #3470eb; border-radius: 4px; color: #ffffff; display: inline-block; font-family: "Amazon Ember Modern Text", sans-serif; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; padding: 0.125rem 0.5rem; } .vega-sample-app-version-badge.legacy { background: #888888; } .vega-sample-app-card-description { color: #000000; font-size: 0.95rem; margin: 0; } .vega-sample-app-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: var(--vega-space-base); } .vega-sample-app-tag { background: #e5e8f0; border-radius: 999px; color: #000000; font-size: 0.75rem; line-height: 1.2; padding: 0.25rem 0.55rem; } .vega-sample-app-github { align-items: center; color: #666666; display: flex; gap: 0.375rem; font-size: 0.8rem; line-height: 1; margin-top: auto; padding-top: var(--vega-space-base); } .vega-sample-app-github svg { display: block; flex: 0 0 auto; height: 16px; width: 16px; } /* The card itself is the outbound , so Mintlify's external-link ::after becomes a column flex item under the GitHub icon. Hide it — the GitHub badge is the component's own outbound treatment. */ .mdx-content a.link.vega-sample-app-card[target="_blank"]::after { content: none; display: none; } .vega-sample-apps-empty { background: #f0f1f5; border-radius: 16px; color: #000000; margin-top: var(--vega-space-base); padding: var(--vega-space-base); } .vega-sample-apps-empty[hidden], .vega-sample-app-card[hidden] { display: none; } /* ===== Vega Home Redesign ===== */ .vega-home { background-color: #ffffff; border-radius: 24px; box-sizing: border-box; color: #000000; flex: 0 1 1552px; font-family: "Amazon Ember Modern Text", sans-serif; max-width: 1552px; width: 100%; } .vega-home-frame { box-sizing: border-box; padding: 32px 40px 40px; width: 100%; } .vega-home :where(h1, h2, h3, p) { margin: 0; } .vega-home a:not(.vega-home-cta):not(.vega-home-card) { border-bottom: none !important; text-decoration: none; } .vega-home a:focus-visible { outline: 2px solid #0256cf; outline-offset: 3px; } /* hero banner */ .vega-home-hero { align-items: center; background-image: linear-gradient( 107deg, #324767 0%, #5679ac 56%, #cdd5e3 100% ); border-radius: 24px; box-sizing: border-box; display: flex; gap: var(--vega-space-md); height: 200px; justify-content: space-between; overflow: hidden; padding: var(--vega-space-md) var(--vega-space-lg); } .vega-home-hero-content { max-width: 32rem; min-width: 0; } .vega-home-hero-title { color: #ffffff; font-family: "Amazon Ember Modern Display", sans-serif; font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; line-height: 1.1; } .vega-home-hero-subtitle, .vega-home-hero-subtitle > [data-as="p"] { color: #ffffff; font-family: var(--vega-font-text); font-size: 1rem; font-style: normal; font-weight: var(--vega-font-weight-regular); line-height: 1.3125rem; margin-top: var(--vega-space-sm); } .vega-home-hero-graphic { flex: none; height: 128px; /* Below ~600px there is not room for the 283px this aspect ratio needs at 128px tall, and the box gets squashed. Cap the width and let object-fit keep the artwork undistorted inside it. */ max-width: 100%; object-fit: contain; width: auto; } /* quick nav pill bar */ .vega-home-quicknav { align-items: center; background-color: #e5e8f0; border-radius: 20px; box-sizing: border-box; display: flex; flex-wrap: nowrap; gap: var(--vega-space-sm) var(--vega-space-xl); height: 40px; justify-content: space-evenly; margin-top: var(--vega-space-xs); padding: var(--vega-space-xs) 40px; } .vega-home-quicknav-item { align-items: center; border-bottom: none !important; color: #000000 !important; display: inline-flex; font-family: "Amazon Ember Modern Text", sans-serif; font-size: 18px; gap: var(--vega-space-xs); line-height: 24px; text-decoration: none; } .vega-home-quicknav-item:hover, .vega-home-quicknav-item:focus-visible { color: #05409e !important; } .vega-home-quicknav-icon { height: 24px; object-fit: contain; width: 24px; } /* section headings */ .vega-home-section { margin-top: 36px; } .vega-home-section-title { color: #000000; font-family: "Amazon Ember Modern Display", sans-serif; font-size: 2rem; font-weight: 700; line-height: 1.2; } .vega-home-section-subtitle { color: #000000; font-size: 1rem; line-height: 1.5; margin-top: var(--vega-space-xs); } /* operating systems / get started cards */ .vega-home-os-grid { display: grid; gap: var(--vega-space-md); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--vega-space-base); } .vega-home-os-card { align-items: center; background-color: #cdd5e3; border-radius: 24px; box-sizing: border-box; display: flex; gap: var(--vega-space-base); justify-content: space-between; min-height: 200px; padding: var(--vega-space-base) var(--vega-space-md); } .vega-home-os-card-body { box-sizing: border-box; display: flex; flex: 1 1 auto; flex-direction: column; max-width: 378px; min-width: 0; width: 100%; } .vega-home-os-card-title { color: #000000; font-family: "Amazon Ember Modern Text", sans-serif; font-size: 1.5rem; font-weight: var(--vega-font-weight-demi-bold); line-height: 1.5rem; margin: 0; } .vega-home .vega-home-os-card-desc, .vega-home .vega-home-os-card-desc > [data-as="p"] { color: #000000; font-family: "Amazon Ember Modern Text", sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.3125rem; } .vega-home .vega-home-os-card-desc { margin-bottom: 18px; margin-top: 13px; } .vega-home .vega-home-os-card-desc > [data-as="p"] { display: block; margin: 0; } .vega-home-os-card-ctas { display: flex; flex-direction: column; gap: var(--vega-space-xs); /* Cap rather than fix the width. `width: 252px` made 252px the column's min-content contribution, which floored the whole card at 300px and pushed it past the viewport on 320px phones. */ max-width: 252px; width: 100%; } .vega-home a.vega-home-cta { align-items: center; background-color: #ffffff; border: 1px solid #2d415e !important; border-bottom: 1px solid #2d415e !important; border-radius: 20px; box-sizing: border-box; color: #000000 !important; display: inline-flex; font-family: "Amazon Ember Modern Text", sans-serif; font-size: 16px; font-weight: 400; height: 40px; justify-content: center; line-height: 24px; max-width: 100%; overflow: hidden; max-width: 252px; padding: 7px var(--vega-space-base); text-align: center; text-decoration: none; transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out; width: 100%; } .vega-home a.vega-home-cta:hover { background-color: #d8dee9; border-color: #2d415e !important; border-bottom-color: #2d415e !important; color: #000000 !important; } .vega-home a.vega-home-cta:active { background-color: #e2e5ee; border-color: #2d415e !important; border-bottom-color: #2d415e !important; color: #000000 !important; } .vega-home-os-card-art { flex: none; height: 96px; width: 96px; } /* key resources panel */ .vega-home-panel { background-color: #e5e8f0; border-radius: 32px; margin-top: var(--vega-space-lg); padding: var(--vega-space-md); } .vega-home-panel .vega-home-section-title { margin-top: 0; } /* resource card grid */ .vega-home-card-grid { display: grid; gap: var(--vega-space-md); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 10px; } .vega-home a.vega-home-card { background-color: #ffffff; border: 1px solid #9cacc8 !important; border-bottom: 1px solid #9cacc8 !important; border-radius: 24px; box-sizing: border-box; box-shadow: none; color: #000000 !important; display: flex; flex-direction: column; min-height: 184px; padding: var(--vega-space-base) var(--vega-space-md); text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .vega-home a.vega-home-card:hover, .vega-home a.vega-home-card:focus-visible { border-color: #435e89 !important; border-bottom-color: #435e89 !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } .vega-home-card-icon { align-self: flex-start; flex: none; height: 28px; margin-bottom: 10px; object-fit: contain; object-position: left center; width: 28px; } .vega-home-card-title { color: #000000; font-family: "Amazon Ember Modern Display", sans-serif; font-size: 1.25rem; font-weight: 700; line-height: 1.25; } .vega-home-card-desc { color: #000000; font-size: 1rem; line-height: 1.35; margin-top: var(--vega-space-xs); } .vega-home-card-link { align-items: center; color: #0256cf; display: inline-flex; font-size: 16px; gap: 6px; line-height: 21px; margin-top: auto; padding-top: var(--vega-space-sm); } .vega-home-card:hover .vega-home-card-link, .vega-home-card:focus-visible .vega-home-card-link { text-decoration: underline; } .vega-home-card-link-arrow { flex: none; } /* news / community grid */ .vega-home-news-grid { display: grid; gap: var(--vega-space-md); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--vega-space-base); } .vega-home .vega-home-news-grid .vega-home-card { min-height: 200px; } .vega-home #community.vega-home-section { margin-top: var(--vega-space-lg); } /* vega home responsive */ @media (max-width: 1023px) { /* Compact card layout, per the mockup: title and description on the left, art beside them, CTAs full width underneath. Applies below 1024px: on phones the grid is one column, and on tablets (768-1023px) it is two columns of ~330-450px cards -- too narrow for the desktop row of text + 252px buttons beside a 96px icon, so both use this. The CTAs live inside .vega-home-os-card-body, so the body is display: contents and its children become grid items of the card itself -- that is what lets the buttons span the full width while the text stays in column 1. */ .vega-home-os-card { /* align-content: start matters in the two-column tablet grid, where the shorter card is stretched to its neighbour's height. Left at the default (stretch) the inner grid spreads that slack evenly across its rows -- the title row grows and the art, centred on rows 1-2, drifts ~8px below the text. Packing rows to the top keeps the slack below the buttons where it is invisible. */ align-content: start; align-items: start; column-gap: var(--vega-space-base); display: grid; grid-template-columns: minmax(0, 1fr) auto; } .vega-home-os-card-body { display: contents; } .vega-home-os-card-title { grid-column: 1; grid-row: 1; } .vega-home-os-card-desc { grid-column: 1; grid-row: 2; } .vega-home-os-card-art { /* Centred against the title + description block it sits beside, and above the buttons -- not top-aligned with the title, and not centred below the CTAs. */ align-self: center; grid-column: 2; grid-row: 1 / span 2; height: auto; /* vw, not %: a percentage here resolves against the auto track, which itself sizes from this value -- the track came out at the clamp max (96px) while the image took the min (64px), leaving it floating 32px clear of the right edge. vw breaks the circularity. Capped at 80px, not 96: from ~700px the description fits on one line and the text block is ~85px tall. Any art taller than that drives the grid area itself, the text stays pinned to its top, and the art lands ~6px below the text's centre. Keeping the art shorter than a one-line block makes the centring exact at every width. */ width: clamp(64px, 18vw, 80px); } /* The description's 18px bottom margin falls inside the rows the art spans, which pushed the art 9px below the text's true centre. Move that space onto the CTAs so row 2 ends at the text and centring is exact. The .vega-home prefix is required: the base rule is ".vega-home .vega-home-os-card-desc", so an unprefixed override loses on specificity even from inside this media block. */ .vega-home .vega-home-os-card-desc { margin-bottom: 0; } .vega-home-os-card-ctas { grid-column: 1 / -1; grid-row: 3; margin-top: 18px; max-width: none; } /* The base rule caps each button at 252px, which is fine on a phone but leaves them stranded on the left of a wider tablet card. Fill the card. */ .vega-home .vega-home-os-card a.vega-home-cta { max-width: none; } .vega-home-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vega-home-news-grid { grid-template-columns: 1fr; } } @media (max-width: 767px) { #content:has(> .vega-home) { padding-block: var(--vega-space-lg); padding-inline: var(--vega-space-sm); } .vega-home { border-radius: 24px; } .vega-home-frame { padding: var(--vega-space-md); } .vega-home-hero { align-items: flex-start; flex-direction: column; height: auto; min-height: 200px; padding: 28px var(--vega-space-md); } /* Cesar (2026-08-24): centre the hero image once the hero stacks. The hero keeps align-items: flex-start so the heading and copy stay left-aligned; only the illustration is centred. */ .vega-home-hero-graphic { align-self: center; } .vega-home-quicknav { align-items: flex-start; flex-direction: column; height: auto; padding: var(--vega-space-sm) 20px; } .vega-home-os-grid { grid-template-columns: 1fr; } .vega-home-card-grid { grid-template-columns: 1fr; } .vega-home-panel { padding: 20px; } } /* ===== DeviceSpecSelector custom component (snippets/device-spec-selector.jsx) ===== Interactive Fire TV device picker: a dropdown that swaps the device image, description, and specification table below it. */ .device-spec { margin: 1.25rem 0; } .device-spec__status { color: #435e89; font-size: 0.95rem; padding: var(--vega-space-base) 0; } .device-spec__status--error { color: #b42318; } .device-spec__select { appearance: none; background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23435e89' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: right var(--vega-space-base) center; background-repeat: no-repeat; border: 1px solid #9cacc8; border-radius: 12px; color: #000000; cursor: pointer; font-family: "Amazon Ember Modern Text", sans-serif; font-size: 1rem; line-height: 1.4; max-width: 100%; padding: var(--vega-space-sm) 44px var(--vega-space-sm) var(--vega-space-base); transition: border-color 0.15s ease, box-shadow 0.15s ease; width: 100%; } .device-spec__select:hover { border-color: #435e89; } .device-spec__select:focus-visible { border-color: #435e89; box-shadow: 0 0 0 1px #435e89; outline: none; } .device-spec__panel { margin-top: var(--vega-space-md); } .device-spec__image-link { border-bottom: none !important; display: inline-block; } .prose a.device-spec__image-link { border-bottom: none !important; } .device-spec__image { height: auto; margin: 0 0 var(--vega-space-base); max-width: 320px; width: 100%; } .device-spec__description { color: #000000; font-size: 1rem; line-height: 1.6; margin-bottom: var(--vega-space-md); } .device-spec__description a { color: #0256cf; } .device-spec__table table { border-collapse: separate; border-spacing: 0; width: 100%; } .device-spec__table caption { caption-side: top; font-family: "Amazon Ember Modern Display", sans-serif; font-size: 1.25rem; font-weight: 700; margin-bottom: var(--vega-space-sm); text-align: left; } .device-spec__table th, .device-spec__table td { border: none; border-bottom: 1px solid #d4d4d4; padding: var(--vega-space-base) var(--vega-space-sm); text-align: left; vertical-align: top; } .device-spec__table thead th { background-color: #e5e8f0; border-bottom: none; font-weight: 700; line-height: var(--vega-type-body-line-height); padding: var(--vega-space-xs) var(--vega-space-sm); vertical-align: middle; } .device-spec__table thead th:first-child { border-bottom-left-radius: 8px; border-top-left-radius: 8px; } .device-spec__table thead th:last-child { border-bottom-right-radius: 8px; border-top-right-radius: 8px; } .device-spec__table td a { color: #0256cf; } .device-spec__table ul { margin: 0; padding-left: 1.25rem; } .device-spec__table code { font-size: 0.875em; white-space: nowrap; } /* ===== ComparisonTable custom component (snippets/comparison-table.jsx) ===== Interactive Fire TV device comparison: grouped checkboxes that show/hide the matching device column in a single, horizontally scrollable spec table. */ .comparison-table { margin: var(--vega-space-md) 0; } .comparison-table__status { color: #435e89; font-size: 0.95rem; padding: var(--vega-space-base) 0; } .comparison-table__toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: var(--vega-space-sm) var(--vega-space-base); justify-content: space-between; margin-bottom: var(--vega-space-base); } .comparison-table__count { color: #435e89; font-size: 0.9rem; font-weight: 600; } .comparison-table__clear { background-color: #ffffff; border: 1px solid #9cacc8; border-radius: 10px; color: #435e89; cursor: pointer; font-size: 0.85rem; font-weight: 600; padding: 6px 14px; transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease; } .comparison-table__clear:hover:not(:disabled) { border-color: #435e89; } .comparison-table__clear:disabled { cursor: default; opacity: 0.5; } .comparison-table__groups { display: flex; flex-direction: column; gap: var(--vega-space-base); } .comparison-table__small-grid { display: grid; gap: var(--vega-space-base); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); align-items: start; } .comparison-table__group { background-color: #f8f8f8; border: 1px solid #e6e9ef; border-radius: 8px; padding: var(--vega-space-sm) var(--vega-space-base); } .comparison-table__group-title { color: #000000; font-weight: 700; margin-bottom: var(--vega-space-xs); } .comparison-table__options { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); column-gap: var(--vega-space-md); } .comparison-table__option { align-items: flex-start; color: #1f2937; cursor: pointer; display: flex; font-size: 0.8rem; gap: var(--vega-space-xs); line-height: 1.4; margin: 6px 0; } .comparison-table__option input { cursor: pointer; margin-top: 2px; } .comparison-table__scroll { margin-top: var(--vega-space-md); overflow-x: auto; } .comparison-table__scroll table { border-collapse: separate; border-spacing: 0; table-layout: fixed; margin: 0; } .comparison-table__scroll caption { caption-side: top; font-family: "Amazon Ember Modern Display", sans-serif; font-size: 1.25rem; font-weight: 700; margin-bottom: var(--vega-space-sm); text-align: left; } .comparison-table__scroll th, .comparison-table__scroll td { border: none; border-bottom: 1px solid #d4d4d4; min-width: 200px; padding: var(--vega-space-base) var(--vega-space-sm); text-align: left; vertical-align: top; } .comparison-table__scroll thead th { background-color: #e5e8f0; border-bottom: none; font-weight: 700; line-height: var(--vega-type-body-line-height); padding: var(--vega-space-xs) var(--vega-space-sm); vertical-align: middle; } .comparison-table__scroll thead th:first-child { border-bottom-left-radius: 8px; border-top-left-radius: 8px; } .comparison-table__scroll thead th:last-child { border-bottom-right-radius: 8px; border-top-right-radius: 8px; } .comparison-table__scroll .headcol { font-weight: 700; } .comparison-table__scroll td a { color: #0256cf; } .comparison-table__scroll ul { margin: 0; padding-left: 1.25rem; } .comparison-table__scroll code { font-size: 0.875em; } .comparison-table__scroll .initiallyHidden { display: none; } /* Shared structured data tables */ .data-table { margin: var(--vega-space-md) 0; overflow-x: auto; } .data-table table { border-collapse: separate; border-spacing: 0; margin: 0; width: 100%; } .data-table caption { caption-side: top; font-weight: 700; margin-bottom: var(--vega-space-sm); text-align: left; } .data-table th, .data-table td { border: none; border-bottom: 1px solid #d4d4d4; padding: var(--vega-space-base) var(--vega-space-sm); text-align: left; vertical-align: top; } .data-table thead th { background: #e5e8f0; border-bottom: none; font-weight: 700; line-height: var(--vega-type-body-line-height); padding: var(--vega-space-xs) var(--vega-space-sm); vertical-align: middle; } .data-table thead th:first-child { border-bottom-left-radius: 8px; border-top-left-radius: 8px; } .data-table thead th:last-child { border-bottom-right-radius: 8px; border-top-right-radius: 8px; } .data-table ul { margin: 0; padding-left: 1.25rem; } /* Catalog snippets */ .catalog-workflow-nav { align-items: stretch; column-gap: 15px; flex-wrap: wrap; row-gap: 22px; } .catalog-workflow-nav__item { align-items: center; display: flex; flex: 0 0 auto; gap: 15px; } .catalog-workflow-nav__item--standalone { flex-basis: 100%; } @media (max-width: 640px) { .catalog-workflow-nav { flex-direction: column; gap: 10px; } .catalog-workflow-nav__item, .catalog-workflow-nav__item--standalone { flex-basis: auto; flex-direction: column; gap: 10px; width: 100%; } } .catalog-video-embed { margin: var(--vega-space-md) 0; } iframe { aspect-ratio: 16 / 9; border: 0; display: block; height: auto; max-width: 100%; } .catalog-hierarchy-selector { margin: 1.25rem 0 var(--vega-space-lg); } .catalog-hierarchy-selector__controls { align-items: end; display: flex; flex-wrap: wrap; gap: var(--vega-space-sm) var(--vega-space-base); margin: 1.25rem 0; } .catalog-hierarchy-selector__controls .catalog-element-selector { margin: 0; min-width: 14rem; } .catalog-element-selector { display: grid; gap: 0.35rem; margin: 1.25rem 0; max-width: 24rem; } .catalog-element-selector > span { color: #64748b; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .dark .catalog-element-selector > span { color: #94a3b8; } .catalog-element-selector > span:empty { display: none; } .catalog-dropdown { position: relative; } .catalog-dropdown__button { align-items: center; background-color: #fff; border: 1px solid #cbd5e1; border-radius: 0.5rem; color: #0f172a; cursor: pointer; display: flex; font: inherit; font-weight: 500; gap: var(--vega-space-sm); justify-content: space-between; padding: 0.55rem 0.85rem; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; width: 100%; } .catalog-dropdown__button svg { flex: none; opacity: 0.6; transition: transform 0.15s ease; } .catalog-dropdown__button[aria-expanded="true"] svg { transform: rotate(180deg); } .catalog-dropdown__button:hover { border-color: #64748b; box-shadow: 0 1px 2px rgb(15 23 42 / 8%); } .catalog-dropdown__button:focus-visible { border-color: #161d26; box-shadow: 0 0 0 3px rgb(22 29 38 / 15%); outline: none; } /* The catalog picker is the primary control; style it like the site's active navigation so the pair reads as primary + refinement. */ .catalog-hierarchy-selector__controls .catalog-dropdown:first-child .catalog-dropdown__button { background-color: #161d26; border-color: #161d26; color: #fff; } .catalog-hierarchy-selector__controls .catalog-dropdown:first-child .catalog-dropdown__button:hover { background-color: #232d3a; } .catalog-dropdown__menu { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.625rem; box-shadow: 0 10px 24px rgb(15 23 42 / 12%), 0 2px 6px rgb(15 23 42 / 8%); display: grid; gap: 1px; margin: 0.35rem 0 0; max-height: 17rem; overflow-y: auto; padding: 0.3rem; position: absolute; top: 100%; left: 0; min-width: 100%; z-index: 30; } .catalog-dropdown__option { align-items: center; background: none; border: none; border-radius: 0.4rem; color: #0f172a; cursor: pointer; display: flex; font: inherit; font-size: 0.9375rem; gap: var(--vega-space-sm); justify-content: space-between; padding: 0.45rem 0.65rem; text-align: left; width: 100%; } .catalog-dropdown__option:hover, .catalog-dropdown__option:focus-visible { background: #f1f5f9; outline: none; } .catalog-dropdown__option.is-selected { background: #eef2f7; color: #161d26; font-weight: 600; } .catalog-dropdown__option svg { color: #161d26; flex: none; } .dark .catalog-dropdown__button { background-color: #0f172a; border-color: #475569; color: #f8fafc; } .dark .catalog-hierarchy-selector__controls .catalog-dropdown:first-child .catalog-dropdown__button { background-color: #f8fafc; border-color: #f8fafc; color: #0f172a; } .dark .catalog-dropdown__menu { background: #1e293b; border-color: #334155; } .dark .catalog-dropdown__option { color: #e2e8f0; } .dark .catalog-dropdown__option:hover, .dark .catalog-dropdown__option:focus-visible { background: #334155; } .dark .catalog-dropdown__option.is-selected { background: #334155; color: #f8fafc; } .dark .catalog-dropdown__option svg { color: #f8fafc; } .catalog-subcatalog-tabs { display: flex; flex-wrap: wrap; gap: var(--vega-space-xs); } .catalog-subcatalog-tabs__tab { border: 1px solid #cbd5e1; border-radius: 999px; display: inline-flex; padding: 0.35rem var(--vega-space-sm); text-decoration: none; } .catalog-subcatalog-tabs { margin: var(--vega-space-base) 0 var(--vega-space-md); } .catalog-subcatalog-tabs__tab.is-active { background: #0f172a; border-color: #0f172a; color: #fff; } .catalog-element-table { display: table; margin: var(--vega-space-base) 0 var(--vega-space-md); width: 100%; } .catalog-element-table th { text-align: left; } .catalog-element-table th:first-child, .catalog-element-table td:first-child { width: 30%; } /* Element references are links wrapping a code chip; without this the chip's own text color hides the link affordance. */ .catalog-element a code { color: inherit; } .catalog-element a:hover code { text-decoration: underline; } .catalog-element h2 { font-size: 1.5rem; font-weight: 600; margin: 2.5rem 0 var(--vega-space-base); scroll-margin-top: 6rem; } .catalog-element__anchor { color: inherit; text-decoration: none; } .catalog-element__anchor:hover::after { content: " #"; opacity: 0.4; } .catalog-element__note { border-left: 4px solid #0284c7; margin: var(--vega-space-base) 0; padding: var(--vega-space-xs) var(--vega-space-base); } .catalog-expand-all { cursor: pointer; display: inline-flex; gap: 0.4rem; align-items: center; font-size: 0.875rem; margin: var(--vega-space-xs) 0 var(--vega-space-base); } .catalog-example { border: 1px solid #e2e8f0; border-radius: 0.75rem; margin: var(--vega-space-base) 0; } .dark .catalog-example { border-color: #334155; } .catalog-example summary { cursor: pointer; font-weight: 600; padding: var(--vega-space-sm) var(--vega-space-base); } .catalog-example .catalog-code { margin: 0 var(--vega-space-base) var(--vega-space-base); } /* Examples share the page's light ground; the site's always-dark pre theme ships in a stylesheet that wins the plain cascade, hence the id + importants (same fight as the hierarchy tree). */ #content-area pre.catalog-code { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 0.5rem; color: #334155 !important; font-size: 0.8125rem; line-height: 1.6; overflow-x: auto; padding: var(--vega-space-base); } #content-area pre.catalog-code code { background: none !important; border: none; color: inherit !important; padding: 0; } .catalog-code-tag { color: #1d4ed8; } .catalog-code-attr { color: #b45309; } .catalog-code-value { color: #15803d; } .catalog-code-punct { color: #64748b; } .catalog-code-comment { color: #94a3b8; font-style: italic; } .dark #content-area pre.catalog-code { background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } .dark .catalog-code-tag { color: #7dd3fc; } .dark .catalog-code-attr { color: #fbbf24; } .dark .catalog-code-value { color: #86efac; } .dark .catalog-code-punct { color: #94a3b8; } .dark .catalog-code-comment { color: #64748b; } .catalog-back-to-top { font-size: 0.875rem; margin: var(--vega-space-base) 0 0; } /* The hierarchy tree is navigation, not code -- keep it on the page's own ground instead of the always-dark code-block theme. The site styles pre blocks dark with high specificity, hence the important flags. */ #content-area pre.catalog-tree__graph { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 0.75rem; color: #475569 !important; line-height: 1.7; overflow-x: auto; padding: var(--vega-space-base) 1.25rem; } #content-area pre.catalog-tree__graph code { background: none !important; border: none; color: inherit !important; padding: 0; } #content-area pre.catalog-tree__graph .catalog-tree__gutter { color: #94a3b8; } #content-area pre.catalog-tree__graph a.catalog-tree__node { color: #1d4ed8 !important; text-decoration: none; } #content-area pre.catalog-tree__graph a.catalog-tree__node:hover { text-decoration: underline; } .dark #content-area pre.catalog-tree__graph { background: #0f172a !important; border-color: #334155 !important; color: #94a3b8 !important; } .dark #content-area pre.catalog-tree__graph .catalog-tree__gutter { color: #475569; } .dark #content-area pre.catalog-tree__graph a.catalog-tree__node { color: #7dd3fc !important; } .catalog-required { border: 1px solid #64748b; border-radius: 3px; color: #64748b; display: inline-block; font-size: 0.75rem; font-weight: 500; margin-top: 0.25rem; padding: 0 0.4rem; } .dark .catalog-required { border-color: #94a3b8; color: #94a3b8; } /* Reusable Amazon documentation components */ :root { --amazon-component-brand: #146eb4; --amazon-component-brand-dark: #12344a; --amazon-component-brand-hover: #0f578e; --amazon-component-focus: #007eb9; --amazon-component-ink: #161d26; --amazon-component-muted: #475569; --amazon-component-border: #cbd5e1; --amazon-component-surface: #ffffff; --amazon-component-surface-subtle: #f8fafc; } /* Nested steps custom component (snippets/nested-steps.jsx) */ .amazon-nested-steps { counter-reset: amazon-nested-step; display: flex; flex-direction: column; gap: var(--vega-space-lg); list-style: none; margin: var(--vega-space-lg) 0 var(--vega-space-md); padding: 0; } .amazon-nested-step { align-items: start; column-gap: var(--vega-space-sm); counter-increment: amazon-nested-step; display: grid; grid-template-columns: var(--vega-space-md) minmax(0, 1fr); margin: 0; padding: 0; } .amazon-nested-step:not(:last-child)::before { align-self: start; background: #d4d4d4; content: ""; grid-column: 1; grid-row: 1; height: calc(100% + var(--vega-space-lg)); justify-self: center; margin-top: var(--vega-space-sm); pointer-events: none; width: 1px; z-index: 0; } .amazon-nested-step__marker { align-items: center; background-color: var(--amazon-component-ink); background-image: url("/images/workflow-step-number.svg"); background-position: center; background-repeat: no-repeat; background-size: var(--vega-space-md) var(--vega-space-md); border-radius: 50%; box-sizing: border-box; color: #ffffff; display: flex; font-family: var(--vega-font-text); font-size: 1rem; font-weight: var(--vega-font-weight-bold); grid-column: 1; grid-row: 1; height: var(--vega-space-md); justify-content: center; line-height: var(--vega-space-md); min-width: var(--vega-space-md); position: relative; width: var(--vega-space-md); z-index: 1; } .amazon-nested-step__marker::before { content: counter(amazon-nested-step); } .amazon-nested-steps[data-hierarchical-numbers="true"] .amazon-nested-step { grid-template-columns: max-content minmax(0, 1fr); } .amazon-nested-steps[data-hierarchical-numbers="true"] .amazon-nested-step__marker { border-radius: 999px; padding-inline: 6px; width: auto; } .amazon-nested-steps[data-hierarchical-numbers="true"] .amazon-nested-step__marker::before { content: counters(amazon-nested-step, "."); } .amazon-nested-step__body { grid-column: 2; grid-row: 1; min-width: 0; } .amazon-nested-step__title { color: var(--vega-type-color); font-family: var(--vega-font-text); font-size: 1rem; font-weight: var(--vega-font-weight-bold); line-height: var(--vega-space-md); margin: 0; overflow-wrap: break-word; } .amazon-nested-step__content { color: var(--vega-type-color); font-family: var(--vega-font-text); font-size: 1rem; font-weight: var(--vega-font-weight-regular); line-height: var(--vega-space-md); min-width: 0; overflow-wrap: break-word; } .mdx-content .amazon-nested-step__content :where(p, li, td, [data-as="p"]) { color: var(--vega-type-color); font-family: var(--vega-font-text); font-size: 1rem; font-weight: var(--vega-font-weight-regular); line-height: var(--vega-space-md); } .amazon-nested-step__content > :first-child { margin-top: 0; } .amazon-nested-step__content > :last-child { margin-bottom: 0; } .amazon-nested-step__content > .amazon-nested-steps { margin: var(--vega-space-lg) 0 0; } .amazon-workflow-map { container-name: amazon-workflow-map; container-type: inline-size; margin-block: var(--vega-space-md); } .amazon-workflow-map__list { align-items: stretch; box-sizing: border-box; column-gap: 32px; display: grid; grid-auto-rows: 1fr; /* balanced rows: the snippet picks the column count (max 4 per row, rows as full as possible: 9 steps -> 3 x 3, 7 -> 4 + 3) and sets --wm-cols; the arrow connectors are only rendered between tiles of the same row. */ grid-template-columns: repeat(var(--wm-cols, 4), minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; row-gap: 24px; width: 100%; } .amazon-workflow-map__item { display: flex; min-width: 0; position: relative; width: 100%; } .amazon-workflow-map__connector { align-items: center; display: flex; height: 24px; justify-content: center; pointer-events: none; position: absolute; right: -32px; top: 50%; transform: translateY(-50%); width: 32px; } .amazon-workflow-map__connector-icon { display: block; height: 17px; max-width: none; width: 18px; } .amazon-workflow-map__step { /* Figma "Workflow" (Tech-Docs-platform 126-388): white pod, DDS outline, 8px radius */ background: #ffffff; border: 1px solid #2d415e; border-radius: 8px; box-sizing: border-box; color: #000000; display: flex; flex: 1 1 auto; flex-direction: column; font-family: var(--vega-font-text); font-size: 14px; font-weight: var(--vega-font-weight-regular); gap: 8px; line-height: 18px; min-width: 0; min-height: 96px; overflow: hidden; padding: 12px 12px 18px; text-decoration: none; width: 100%; } .amazon-workflow-map[data-show-numbers="false"] .amazon-workflow-map__step { gap: 0; padding: 10px; } /* Hover/focus: DDS "Button focused outline" (#435e89) with a soft tint of the pressed background, so hover reads as interactive without being mistaken for the current step. */ a.amazon-workflow-map__step:hover, a.amazon-workflow-map__step:focus-visible { background: #f2f4f9; border-color: #435e89; box-shadow: inset 0 0 0 1px #435e89; } a.amazon-workflow-map__step:focus-visible { outline: 2px solid #435e89; outline-offset: 2px; } /* Current step: DDS "Button pressed background" (#e2e5ee) + focused outline (#435e89), title in Squid Ink because the current page is not a link. */ .amazon-workflow-map__step.is-current { background: #e2e5ee; border-color: #435e89; box-shadow: none; } .amazon-workflow-map__number { align-items: center; box-sizing: border-box; color: #ffffff; display: grid; flex: 0 0 24px; font-size: 16px; font-weight: var(--vega-font-weight-bold); height: 24px; justify-content: center; justify-items: center; letter-spacing: 0 !important; line-height: 16px; min-height: 0; padding: 0; position: relative; width: 24px; } .amazon-workflow-map__number-background, .amazon-workflow-map__number > span { grid-area: 1 / 1; } .amazon-workflow-map__number-background { display: block; height: 24px; max-width: none; width: 24px; } .amazon-workflow-map__number > span { position: relative; text-align: center; z-index: 1; } .amazon-workflow-map__title { box-sizing: border-box; color: #0256cf; display: block; flex: 1 1 auto; font-weight: var(--vega-font-weight-demi-bold); font-family: var(--vega-font-text); font-size: 14px; line-height: 18px; min-height: 0; overflow-wrap: break-word; padding: 0; width: auto; } .amazon-workflow-map__step.is-current .amazon-workflow-map__title { color: #161d26; /* Amazon Squid Ink */ } a.amazon-workflow-map__step:hover .amazon-workflow-map__title { color: #0256cf; text-decoration: underline; } @container amazon-workflow-map (max-width: 520px) { .amazon-workflow-map__step { padding-bottom: 16px; } /* narrow: two per row, no arrows (the row order no longer matches the connectors) */ .amazon-workflow-map__list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none !important; } .amazon-workflow-map__connector { display: none; } } @container amazon-workflow-map (max-width: 300px) { .amazon-workflow-map__list { grid-template-columns: minmax(0, 1fr); } } .amazon-content-dropdown { margin-block: var(--vega-space-base); max-width: 30rem; } .amazon-content-dropdown__label { color: var(--amazon-component-ink); display: block; font-size: 0.875rem; font-weight: var(--vega-font-weight-demi-bold); margin-bottom: 0.4rem; } .amazon-content-dropdown__select { -webkit-appearance: none; appearance: none; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 6l5 5 5-5' stroke='%232d415e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: right 0.9rem center; background-repeat: no-repeat; background-size: 1rem; border: 1px solid #2d415e; border-radius: 999px; box-sizing: border-box; color: #2d415e; cursor: pointer; field-sizing: content; font: inherit; height: 36px; max-width: 100%; min-height: 36px; padding: 0 2.75rem 0 var(--vega-space-base); width: auto; } .amazon-content-variants__content { margin-top: var(--vega-space-base); } .amazon-content-dropdown__variant > :first-child { margin-top: 0; } .amazon-content-dropdown__variant > :last-child { margin-bottom: 0; } .amazon-download-button { align-items: center; background: #ff6200; border: 1px solid #ff6200; border-radius: 999px; color: #ffffff; display: inline-flex; font-family: var(--vega-font-text); font-size: var(--vega-type-body-font-size); font-weight: 500; gap: var(--vega-space-sm); justify-content: center; line-height: var(--vega-type-body-line-height); min-height: 3rem; padding: 0.65rem var(--vega-space-md); text-decoration: none; transition: filter 0.15s ease; white-space: nowrap; } /* Download links stack one per row (Justin, 2026-08-16): a wrapped row of pills reads as a ragged grid; live lists them vertically. Buttons size to their content, left aligned. */ .amazon-download-list { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vega-space-sm); margin-block: var(--vega-space-sm); } .amazon-download-list > .amazon-download-button { width: auto; } .amazon-download-button:hover { filter: brightness(0.9); } .amazon-download-button__icon { flex: none; height: 1.25rem; width: 1.25rem; } .amazon-download-button__image { display: block; flex: none; height: 1.25rem; max-width: 6rem; object-fit: contain; width: auto; } .amazon-callout { --amazon-callout-button-border: #2d415e; --amazon-callout-button-color: #000000; margin-block: var(--vega-space-base); } .amazon-callout > .callout { align-items: start; background: var(--amazon-callout-background); border: 1px solid var(--amazon-callout-border); border-radius: 16px; box-sizing: border-box; font-family: var(--vega-font-text); font-size: var(--vega-type-body-font-size); gap: var(--vega-space-xs); line-height: var(--vega-type-body-line-height); margin-block: 0; padding: 15px; } .amazon-callout > .callout [data-component-part="callout-content"] { color: var(--amazon-callout-text) !important; flex: 1 1 auto; font-family: var(--vega-font-text); font-size: var(--vega-type-body-font-size); line-height: var(--vega-type-body-line-height); min-width: 0; width: 100%; } .amazon-callout > .callout [data-component-part="callout-icon"] { align-items: center; display: flex; flex: 0 0 16px; height: 20px; justify-content: center; margin-top: 2px; width: 16px; } .amazon-callout--without-icon > .callout { gap: 0; } .amazon-callout--without-icon > .callout [data-component-part="callout-icon"] { display: none !important; } .amazon-callout--note { --amazon-callout-background: #eef0fd; --amazon-callout-border: #03409e; --amazon-callout-text: #000000; } .amazon-callout--tip { --amazon-callout-background: #edfdf3; --amazon-callout-border: #166b4d; --amazon-callout-text: #000000; } .amazon-callout--warning { --amazon-callout-background: #fdeded; --amazon-callout-border: #8e0f29; --amazon-callout-text: #000000; } .amazon-callout--important { --amazon-callout-background: #fff9ec; --amazon-callout-border: #7a5900; --amazon-callout-text: #000000; } /* Inline code inside callouts: the default chip is a 50%-alpha near-white that disappears on tinted callout backgrounds. Match prod's clearly-visible code treatment (crimson on a solid neutral chip). */ .amazon-callout :not(pre) > code { background: #f5f5f5; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; } /* Mintlify's callout component forces code to currentcolor with a layered !important utility ([&_code]:text-current). Layered !important beats any unlayered rule, so the color override must live inside the same cascade layer to win on specificity. */ @layer utilities { .amazon-callout :not(pre) > code { color: #c7254e !important; } } /* Pages pass a navy bg + white text inline on every CustomCallout; live docs render these as a light blue box with dark text, so the !important vars here win over that inline style. */ .amazon-callout--custom { --amazon-callout-background: #e9f2fc !important; --amazon-callout-border: #b7cde8; --amazon-callout-text: #000000 !important; } /* Quick Subscribe test-case matrix (live: .td-yes / .td-no colored cells). */ .test-case-matrix { min-width: 0 !important; table-layout: fixed !important; width: 100% !important; } .test-case-matrix th, .test-case-matrix td { min-width: 0 !important; white-space: normal !important; } /* Mintlify rounds each header row's end cells; with a two-row header that leaves white wedges between the rows. Round only the outer corners. */ .test-case-matrix thead th { border-radius: 0 !important; } .test-case-matrix thead tr:first-child th:first-child { border-top-left-radius: 8px !important; } .test-case-matrix thead tr:first-child th:last-child { border-top-right-radius: 8px !important; } .test-case-matrix thead tr:last-child th:first-child { border-bottom-left-radius: 8px !important; } .test-case-matrix thead tr:last-child th:last-child { border-bottom-right-radius: 8px !important; } .test-case-matrix td { overflow-wrap: break-word; } .test-case-matrix__cell--yes, .test-case-matrix__cell--no { border: 1px solid #ffffff; color: #000000; font-weight: 600; } .test-case-matrix__cell--yes { background-color: #c6dbaa; } .test-case-matrix__cell--no { background-color: #f48b8c; } .backToTop { font-size: 0.875rem; } .amazon-source-info { background-color: #eef0fd; border: 1px solid #03409e; border-radius: 16px; color: #111111; font-family: var(--vega-font-text); font-size: 16px; font-weight: 400; line-height: 24px; margin: 20px 0; padding: 11.25px 15px; } #content:has(> .amazon-source-info:first-child) { margin-top: 0; } .amazon-source-info :where(p, [data-as="p"], b, strong, a) { color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; } .amazon-source-info > :where(p, [data-as="p"]) { display: inline; margin: 0; } .amazon-source-info b { font-weight: 600; } .amazon-source-info a { border-bottom: 0 !important; color: #0256cf !important; font-weight: 400; text-decoration: none; } .amazon-source-info a:hover, .amazon-source-info a:focus-visible { border-bottom: 0 !important; text-decoration: underline; } .amazon-callout__inner { align-items: center; display: flex; gap: var(--vega-space-base); width: 100%; } .amazon-callout__body { color: inherit; flex: 1 1 auto; margin: 0; min-width: 0; overflow-wrap: anywhere; } .amazon-callout .amazon-callout__body :where(p, [data-as="p"], li, strong, em) { color: inherit !important; font-family: inherit; font-size: inherit; line-height: inherit; } /* links keep their own color; only inherit type metrics from the callout body */ .amazon-callout .amazon-callout__body :where(a) { font-family: inherit; font-size: inherit; line-height: inherit; } .amazon-callout__body > p { margin-block: 0; } .amazon-callout__body > p:first-of-type { display: inline; } .amazon-callout__body > p:first-of-type ~ p { display: block; margin-top: var(--vega-space-xs); } /* Inside list items Mintlify emits paragraphs as span[data-as="p"] and gives them block display + top margin, which pushes the callout text under its "Note:" label. Live keeps label and first sentence on one line, so treat the span like the p above. */ #content-area div.mdx-content.prose li .amazon-callout__body > [data-as="p"]:first-of-type, .amazon-callout__body > [data-as="p"]:first-of-type { display: inline !important; margin-top: 0 !important; } #content-area div.mdx-content.prose li .amazon-callout__body > [data-as="p"]:first-of-type ~ [data-as="p"], .amazon-callout__body > [data-as="p"]:first-of-type ~ [data-as="p"] { display: block !important; margin-top: var(--vega-space-xs) !important; } .amazon-callout__body > :where(ul, ol, pre, blockquote) { margin-block: var(--vega-space-xs) 0; } .amazon-callout__body :where(ul, ol) > li { margin: 0; } .amazon-callout__body > :last-child { margin-bottom: 0; } .amazon-callout__body a { text-decoration: none; } .amazon-callout__label { font-family: inherit; font-size: inherit; font-weight: var(--vega-font-weight-bold); line-height: inherit; } .amazon-callout > .callout [data-component-part="callout-content"] .amazon-callout__button { align-items: center; align-self: center; background: #ffffff; border: 1px solid var(--amazon-callout-button-border) !important; border-radius: 20px; box-sizing: border-box; color: var(--amazon-callout-button-color) !important; display: inline-flex; flex: 0 0 auto; font-family: var(--vega-font-text); font-size: 16px; font-weight: var(--vega-font-weight-regular); justify-content: center; line-height: 24px; min-height: 40px; padding: 7px 20px; text-decoration: none !important; transition: background-color 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; } .amazon-callout > .callout [data-component-part="callout-content"] .amazon-callout__button:hover { background: #f0f1f5; } .amazon-callout > .callout [data-component-part="callout-content"] .amazon-callout__button:focus-visible { box-shadow: 0 0 0 3px rgb(0 126 185 / 28%); outline: 2px solid var(--amazon-component-focus); outline-offset: 2px; } @media (max-width: 640px) { .amazon-callout > .callout { align-items: flex-start; } .amazon-callout__inner { align-items: flex-start; flex-direction: column; } .amazon-callout > .callout [data-component-part="callout-content"] .amazon-callout__button { align-self: flex-start; } } .amazon-titled-callout { --amazon-titled-callout-accent: #ff6200; /* Amazon Developer Orange */ background: #ffffff; border: 0; box-sizing: border-box; color: #000000; font-family: var(--vega-font-text); font-size: 16px; line-height: 24px; margin-block: 1.25rem; overflow: hidden; overflow-wrap: anywhere; padding: var(--vega-space-base); position: relative; } .amazon-titled-callout::before { background: var(--amazon-titled-callout-accent); content: ""; inset: 0 auto 0 0; position: absolute; width: 4px; } .amazon-titled-callout__title { color: inherit; font-family: var(--vega-font-text); font-size: 16px; font-weight: var(--vega-font-weight-bold); line-height: 24px; margin: 0 0 var(--vega-space-md); } .amazon-titled-callout__body { color: inherit; font: inherit; } .amazon-titled-callout__body :where(p, li, strong, em, code) { color: inherit; } .amazon-titled-callout__body a { color: #0256cf !important; } .amazon-titled-callout__body > :where(p, [data-as="p"]) { display: block; margin-block: 0; } .amazon-titled-callout__body > :first-child { margin-top: 0; } .amazon-titled-callout__body > :last-child { margin-bottom: 0; } .amazon-titled-callout__body > * + * { margin-top: var(--vega-space-md); } .amazon-alexa-conversation { background: transparent; border: 0; margin-block: var(--vega-space-md); padding: 0; } .amazon-alexa-conversation__turns { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; } .amazon-alexa-conversation__turn { align-items: baseline; border: 0; box-sizing: border-box; display: flex; font-size: 1rem; gap: 0.35rem; line-height: 1.4; margin: 0; padding: 0.85rem; } .amazon-alexa-conversation__turn[data-speaker="user"] { background: #f0f0f0; border-radius: 1.2rem 1.2rem 1.2rem 0; color: #161d26; justify-self: start; max-width: 75%; width: fit-content; } .amazon-alexa-conversation__turn[data-speaker="alexa"] { background: #003b64; border-radius: 1.2rem 1.2rem 1.2rem 0; color: #ffffff; width: 100%; } .amazon-alexa-conversation__speaker { color: inherit; flex: none; font-weight: 700; } .amazon-alexa-conversation__speech { color: inherit; margin: 0; min-width: 0; } .amazon-alexa-conversation__turn[data-speaker="alexa"] .amazon-alexa-conversation__speech { background: linear-gradient(90deg, #ffffff, #82deff); background-clip: text; color: #ffffff; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .amazon-alexa-conversation__speech > :first-child { margin-top: 0; } .amazon-alexa-conversation__speech > :last-child { margin-bottom: 0; } .amazon-workflow-map__step:focus-visible, .amazon-content-dropdown__select:focus-visible, .amazon-download-button:focus-visible { box-shadow: 0 0 0 3px rgb(0 126 185 / 28%); outline: 2px solid var(--amazon-component-focus); outline-offset: 2px; } .dark .amazon-workflow-map__step, .dark .amazon-content-dropdown__select { background: #1e293b; border-color: #64748b; color: #f8fafc; } .dark a.amazon-workflow-map__step:hover { background: #334155; } .dark .amazon-workflow-map__step.is-current { background: #12344a; border-color: #38bdf8; } .dark .amazon-content-dropdown__select { background-color: #1e293b; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 6l5 5 5-5' stroke='%23f8fafc' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .dark .amazon-workflow-map__title { color: #7dd3fc; } .dark .amazon-workflow-map__connector-icon { filter: invert(1); } .dark .amazon-workflow-map__step.is-current .amazon-workflow-map__title, .dark a.amazon-workflow-map__step:hover .amazon-workflow-map__title { color: #f8fafc; } .dark .amazon-content-dropdown__label { color: #cbd5e1; } .dark .amazon-workflow-map__step:focus-visible, .dark .amazon-content-dropdown__select:focus-visible, .dark .amazon-download-button:focus-visible { box-shadow: 0 0 0 3px rgb(56 189 248 / 28%); outline-color: #38bdf8; } .dark .amazon-titled-callout { color: #f8fafc; } .dark .amazon-alexa-conversation { background: transparent; } .dark .amazon-alexa-conversation__turn[data-speaker="user"] { background: #f0f0f0; color: #161d26; } .dark .amazon-alexa-conversation__turn[data-speaker="alexa"] { background: #003b64; } @media (max-width: 640px) { .amazon-alexa-conversation__turn { font-size: 1rem; padding: var(--vega-space-sm) var(--vega-space-base); } .amazon-alexa-conversation__turn[data-speaker="user"] { max-width: 90%; } .amazon-content-dropdown { max-width: none; } } @media (prefers-reduced-motion: reduce) { .amazon-workflow-map__step, .amazon-download-button, .amazon-content-dropdown__select { scroll-behavior: auto; transition: none; } } /* Glossary data lists */ .glossary-list__nav { background: #ffffff; display: flex; flex-wrap: wrap; gap: 0; margin: var(--vega-space-base) 0 2rem; padding: var(--vega-space-xs) 0; position: sticky; top: -1rem; z-index: 10; } .glossary-list__nav::before { background: #ffffff; content: ""; height: var(--glossary-sticky-background-height, 0); inset: var(--glossary-sticky-background-top, 0) 0 auto var(--glossary-sticky-background-left, 0); opacity: 0; pointer-events: none; position: fixed; z-index: -1; } .glossary-list__nav::after { box-shadow: 0 1px 4px 0 rgb(0 0 0 / 20%); content: ""; height: 1px; inset: calc( var(--glossary-sticky-background-top, 0px) + var(--glossary-sticky-background-height, 0px) - 1px ) 0 auto var(--glossary-sticky-background-left, 0); opacity: 0; pointer-events: none; position: fixed; } .glossary-list__nav[data-sticky]::before, .glossary-list__nav[data-sticky]::after { opacity: 1; } @media (min-width: 1024px) { .glossary-list__nav { top: -1.5rem; } } .glossary-list__nav a { border: 0; border-radius: 0; color: #0256cf; font-weight: 600; line-height: 1.25; padding: 0; text-decoration: none; } .glossary-list__nav a:not(:last-child) { border-right: 1px solid #c7c7c7; margin-right: 0.55rem; padding-right: 0.55rem; } .glossary-list__nav a:hover { color: #0f578e; text-decoration: underline; } .glossary-list__nav a:focus-visible { outline: 3px solid #007eb9; outline-offset: 2px; } .dark .glossary-list__nav { background: #161d26; } .dark .glossary-list__nav::before { background: #161d26; } .dark .glossary-list__nav a { color: #0256cf; } .dark .glossary-list__nav a:not(:last-child) { border-right-color: #c7c7c7; } .dark .glossary-list__nav a:hover { color: #bae6fd; } .dark .glossary-list__nav a:focus-visible { outline-color: #38bdf8; } .glossary-list__section > h2 { align-items: center; background: #e5e8f0; border-radius: 8px; box-sizing: border-box; color: #000000; display: flex; font-family: var(--vega-font-display); font-size: 36px; font-weight: var(--vega-font-weight-bold); line-height: 36px; margin: 0 0 var(--vega-space-base); min-height: 40px; padding: 2px 12px; scroll-margin-top: calc( var(--mintlify-slot-header-height, 4.5rem) + var(--banner-height, 0px) + 5.5rem ); } .glossary-list__section + .glossary-list__section { margin-top: 2.25rem; } .glossary-list__section dl { margin: 0; } .glossary-list__entry { border-bottom: 1px solid #d4d4d4; margin: 0; padding: 0 12px 16px; } .glossary-list__entry + .glossary-list__entry { padding-top: 16px; } .glossary-list__entry dt { color: #000000; font-family: var(--vega-font-text); font-size: 16px; font-weight: var(--vega-font-weight-bold); line-height: 21px; } .glossary-list__entry dd { color: #000000; font-family: var(--vega-font-text); font-size: 16px; font-weight: var(--vega-font-weight-regular); line-height: 21px; margin: 10px 0 0 20px; } .glossary-list__entry a { color: inherit; text-decoration: underline; text-underline-position: from-font; } .dark .glossary-list__section > h2 { background: #334155; color: #ffffff; } .dark .glossary-list__entry { border-bottom-color: #475569; } .dark .glossary-list__entry dt, .dark .glossary-list__entry dd { color: #f8fafc; } @media (max-width: 640px) { .glossary-list__nav { flex-wrap: nowrap; margin-inline: -0.25rem; overflow-x: auto; padding-inline: 0.25rem; } } /* no gap below the footer */ body:has([data-edge-injection-host="mintlify-slot-footer"]) .almond-layout { padding-bottom: 0 !important; } /* AlmondHeightWrapper has no class/id of its own; it always wraps #content-container. must stay in sync with .almond-layout's padding-bottom above, or the content card overflows the fixed container and clips at the bottom. Gated like #navbar above so local dev keeps Mintlify's default layout. */ body:has( #mintlify-slot-header:not(:empty), [data-edge-injection-host="mintlify-slot-header"] ) div:has(> #content-container) { height: calc( 100dvh - var(--mintlify-slot-header-height, 7rem) ) !important; /* mobile: was -1rem */ border-radius: 0 !important; } /* Live + ≤1023px: the standalone secondary nav (39px) sits in the band below the absolute slot header, but AlmondHeightWrapper is sized/offset for the slot header alone. Without reserving the row, content starts under the bar and eats the #content-container top padding (16px tablet / 8px mobile). Local mint dev has no slot header, so this never matches; custom pages hide the row and are excluded. */ @media (max-width: 1023px) { body:has( #mintlify-slot-header:not(:empty), [data-edge-injection-host="mintlify-slot-header"] ):not(:has(header#navbar.is-custom)) div:has(> #content-container) { height: calc( 100dvh - var(--mintlify-slot-header-height, 7rem) - var(--vega-mobile-navigation-row-height) ) !important; margin-top: var(--vega-mobile-navigation-row-height); } } @media (min-width: 1024px) { body:has( #mintlify-slot-header:not(:empty), [data-edge-injection-host="mintlify-slot-header"] ) div:has(> #content-container) { height: calc( 100dvh - var(--mintlify-slot-header-height, 3.5rem) - var(--banner-height, 0px) ) !important; /* lg: was -0.5rem */ margin-top: 0; } } /* Image captions migrated from Jekyll figcaption (italic, 14px, gray). Captioned images use Mintlify's so the caption is a real

pair (tracker 45, accessibility). Raw
is stripped by the MDX compiler, hence the component. Frame is used for nothing else in this repo, so its chrome (tinted card, grid, padding) is removed here and the caption gets the .image-caption treatment. */ .mdx-content figure.frame { background: transparent !important; border-radius: 0; /* gtojust image spec (2026-08-19): 32px above the image, 24px image -> caption, 32px below the caption before the next block. */ margin: 32px 0; padding: 0; } .mdx-content figure.frame > div.absolute { display: none; } .mdx-content figure.frame > div.relative { border-radius: 0; justify-content: flex-start; } .mdx-content figure.frame > figcaption, .image-caption { margin-top: -10px; margin-bottom: 0; padding: 0; color: #808080; font-size: 14px; font-style: italic; /* live's
is left aligned (patrick x4 tutorial pages, hahnbee on vega-parental-controls: "aligned to the middle in mintlify, left on prod") */ text-align: left; } .mdx-content figure.frame > figcaption p { margin: 0; } /* the -10px above pulled the old
caption up under the image's prose margin; inside the image has no bottom margin, so the caption sat on top of the picture (hahnbee, iap-production-mode). Live: 0 + 10px figure gap. */ .mdx-content figure.frame > figcaption { margin-top: 24px; } /* Heading scale - Amazon spec (tracker item 32; Figma wkqZ0iAr9bVLfvZa60kJpY node 1251-9305 is the source of truth): H1 Ember Modern Display Bold 36px H2 Ember Modern Text Semi bold 32px "Semi bold" = the Text Bold file at weight 600; H3 Ember Modern Text Semi bold 24px the Text family has nothing heavier (live's own H4 Ember Modern Text Semi bold 18px EmberModernTextBold.woff2 is declared 600). H5 Ember Modern Text Semi bold 16px H6 Ember Modern Text Semi bold 14px The base .mdx-content :where(h1..h6) rules above already encode exactly this, so this block only has to NOT override them (the earlier "Option 1" override forced Display 500 on every heading as a workaround for the platform markers below - removed). Platform markers inside RN reference headings (`## Containers **Vega Not Available**`, `### textBreakStrategy **Android**`) mimic reactnative.dev's platform tags and must stand out. Text has no weight above the heading's own 600, so gets the Display Bold face as an INTERIM differentiator. The agreed end state (Slack, "bold in headings", Cesar/Don/Justin, 2026-08-17) is Mintlify's Badge component; that swap is a follow-up. */ #content-area :is(h1, h2, h3, h4, h5, h6) strong, .prose :is(h1, h2, h3, h4, h5, h6) strong { font-family: var(--vega-font-display); font-weight: 600; /* Display Bold face - the heaviest Ember Modern face there is */ } /* RN reference headings with a platform badge (`### \`textBreakStrategy\` Android`). Agreed in Slack "bold in headings" (Riva, Don, Cesar, Justin, Trevor - 2026-08-17): the platform marker becomes a Mintlify Badge and, in this all-code special case, the identifier is code-formatted like reactnative.dev. Scoped with :has() so only badge headings get the mono/highlight look; every other heading keeps the live-parity rule below. */ .mdx-content :is(h2, h3, h4, h5):has(> span > [data-badge]) { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5em; } .mdx-content :is(h2, h3, h4, h5):has(> span > [data-badge]) > span { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 0.5em; } .mdx-content :is(h2, h3, h4, h5):has(> span > [data-badge]) code { background: rgba(22, 29, 38, 0.06) !important; border-radius: 6px !important; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important; font-size: 0.85em !important; font-weight: 600; padding: 0.05em 0.35em !important; } .mdx-content :is(h2, h3, h4, h5) [data-badge] { font-family: var(--vega-font-text); font-size: 0.6em; font-weight: 500; line-height: 1.6; vertical-align: middle; } /* Inline code inside headings: the live site clears the highlight background (`.docs h3 code.highlighter-rouge { background-color: transparent }`), so a prop heading like `backgroundColor` reads as a heading, not a highlighted token. */ h1 code, h2 code, h3 code, h4 code, h5 code, h6 code { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; font-family: inherit !important; /* live: heading code uses the heading's Ember font, not mono */ font-size: inherit !important; font-weight: inherit; } /* Small images meant to sit side by side in one line (e.g. the react-native-vector-icons "you can create these icons" examples); MDX would otherwise stack each as a block. */ #content-area p.inline-images, .prose p.inline-images { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #content-area p.inline-images img, .prose p.inline-images img { margin: 0; } /* Develop-for-Vega hero (`.vega-hero` on the vega-develop page of every version). Matches live: a 2fr/1fr grid with the "I want to ..." buttons filling the left column and the illustration beside them on the right. Below the desktop breakpoint it stacks to one column with the illustration centred beneath the buttons. Selectors repeat #content-area/.prose so they outrank the base .card.vega-title-card rule (which caps the card at 252px). */ #content-area .vega-hero, .prose .vega-hero { align-items: center; display: grid; gap: var(--vega-space-md, 24px); grid-template-columns: 2fr 1fr; /* The hero sat flush against the card row below it (0px gap). */ margin-bottom: var(--vega-space-lg); /* 32px */ } @media (min-width: 1280px) { /* Must repeat the #content-area selector: the base rule above matches via an id, so a .prose-only override here would lose on specificity even though it comes later. */ #content-area .vega-hero, .prose .vega-hero { margin-bottom: var(--vega-space-xl); /* 48px */ } } #content-area .vega-hero .card.vega-title-card, .prose .vega-hero .card.vega-title-card { /* Fill the button column (the base .card.vega-title-card rule caps the card at 252px). Height matches live's 40px as a floor, not a fixed value, so a label that wraps to two lines can grow instead of clipping. */ height: auto; max-width: 100%; min-height: 40px; width: 100%; } #content-area .vega-hero > p:has(img), #content-area .vega-hero img, .prose .vega-hero > p:has(img), .prose .vega-hero img { margin: 0; max-width: 100%; } /* Phones only: stack the illustration, centred, beneath the buttons. iPads keep it beside them in both orientations -- a portrait iPad mini is a 768px viewport and a landscape iPad's content column is ~560px, so the cut-offs sit below both. Container query for the docs layout (the content column can be narrow at a wide viewport), media query as the fallback. */ @container (max-width: 520px) { #content-area .vega-hero, .prose .vega-hero { grid-template-columns: 1fr; } #content-area .vega-hero img, .prose .vega-hero img { margin-inline: auto; } } @media (max-width: 767px) { #content-area .vega-hero, .prose .vega-hero { grid-template-columns: 1fr; } #content-area .vega-hero img, .prose .vega-hero img { margin-inline: auto; } } /* Horizontal rule above the first H2, like live. developer.amazon.com tags the first h2 on every page (`$('h2:first').addClass('first')`) and draws a hairline above it: .first:first-of-type { position: relative; padding-top: 57px !important; } .first:first-of-type::before { height: .7px; background: rgb(219,216,216); margin-top: -38px; } Reported in QA on crash-report, data-type-reference, developer-mode, ui-rendering, troubleshoot-overview, network-proxy-issues, run-apps-overview and others. Must be a DIRECT child of .mdx-content: :first-of-type matches per parent, so an unscoped `h2:first-of-type` also fires on every title (each card is its own parent), drawing a rule and 57px of padding inside every card. Only the page's own top-level h2 sits directly under .mdx-content. */ .mdx-content > h2:first-of-type { position: relative; /* live: ~20px from the previous block to the hairline, ~43px from the hairline to the heading text. Ours had 48px margin + 19px before the line (67px of air above the rule) - Justin, 2026-08-17: too much. */ margin-top: 4px; padding-top: 43px; } .mdx-content > h2:first-of-type::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 0.7px; background-color: rgb(219, 216, 216); display: block; } /* Summary Reference Table: the SDK Function Calls column needs room. Live gives it 55% of a fixed-layout table (936px) with `word-break: normal`, so each "- ContentPersonalizationServer.reportX(...)" entry reads on its own line. Ours was table-layout:auto - the column collapsed to 27% (181px) - plus `word-break: break-word` on inline code, which shattered the identifiers mid-token and left the leading dashes stranded on their own lines. */ .vega-sdk-call-table table { table-layout: fixed; } .vega-sdk-call-table :is(th, td):nth-child(1) { width: 20%; } .vega-sdk-call-table :is(th, td):nth-child(2) { width: 25%; } .vega-sdk-call-table :is(th, td):nth-child(3) { width: 55%; } .vega-sdk-call-table td code { overflow-wrap: anywhere; word-break: normal; } /* the SDK calls were "- x
- y" text: when an identifier is too long for the column the whole drops to the next line and strands its dash. A real list gives each call a marker with a hanging indent, so continuation lines align under the first character instead. */ .vega-cell-list { list-style: disc outside; margin: 0; padding-left: 1.1em; } .vega-cell-list li { margin: 0 0 0.25rem; padding: 0; } /* the theme draws its own bullet with ::before on prose list items; keep that one and drop the native marker so the entries don't get two bullets */ .vega-cell-list { list-style: none; } .vega-cell-list li:last-child { margin-bottom: 0; } /* Sub-steps rendered as a/b/c inside tester tabs (live parity: source nests them under step N -> a., b., c.). MDX hoists out of the
, so the letters come from this wrapper instead. */ .mdx-content .alpha-steps ol { list-style-type: lower-alpha; } .mdx-content .alpha-steps ol ol { list-style-type: lower-roman; } /* Production Preview enrollment console (vega/0.24/production-preview-enrollment). Ported from the Jekyll include production-preview-iframe.html. All three states start hidden; production-preview-iframe.js sets the iframe src and toggles them. */ .production-preview-loading, .production-preview-error, iframe.production-preview-frame { display: none; } .production-preview-loading.is-visible { align-items: center; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; display: flex; flex-direction: column; height: 600px; justify-content: center; margin: 1rem 0; padding: 2rem; text-align: center; } .production-preview-spinner { animation: production-preview-spin 1s linear infinite; border: 4px solid #f3f3f3; border-radius: 50%; border-top-color: #007bff; height: 40px; margin-bottom: 1rem; width: 40px; } @keyframes production-preview-spin { to { transform: rotate(360deg); } } .production-preview-loading-text { color: #6c757d; font-size: 1.1rem; font-weight: 500; } .production-preview-error.is-visible { background: #fae6e6; border-radius: 4px; color: #c40000; display: block; font-weight: bold; margin: 1rem 0; padding: 1rem; } iframe.production-preview-frame.is-visible { aspect-ratio: auto; border: none; display: block; height: 100vh; width: 100%; }