main.css

/* Row backgrounds for the side navigation. These are design tokens that @octopusdeploy/design-system-tokens does not ship because they are specific to the docs site.*/
:root {
  --navBackgroundRest: rgba(26, 119, 202, 0);
  --navBackgroundHover: var(--colorScalesSlate100);
  --navBackgroundActive: rgba(26, 119, 202, 0.06);
}

html[data-theme='dark'] {
  --navBackgroundHover: var(--colorScalesNavy800);
  --navBackgroundActive: rgba(26, 119, 202, 0.24);
}

html {
  box-sizing: border-box;
  scroll-padding-block-start: var(--scroll-pad);
}

*,
*::before,
*::after {
  border: 0 none;
  font-weight: inherit;
  font-family: inherit;
  font-style: inherit;
  font-size: 100%;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

.input-keyboard :focus {
  outline: 2px dashed silver;
}

body {
  font: var(--textBodyRegularLarge);
  color: var(--color-text);
  background-color: var(--color-base-primary);
  transition-property: background-color, color;
  transition-duration: var(--duration-default);
  transition-timing-function: ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition-property: none;
  }
}

body.no-scroll {
  overflow: hidden;
}

a,
summary,
summary > * {
  text-decoration: underline;
  cursor: pointer;
  color: var(--body-link-alt);
}

a:hover,
a:focus,
summary:hover,
summary:focus,
dt[data-destination]:hover {
  color: var(--body-link-color);
}

button[data-share] {
  background-color: unset;
  cursor: pointer;
  color: var(--body-link-alt);
  stroke: var(--body-link-alt);
}

hr {
  border-bottom: 1px solid var(--header-separator-color);
}

.page-content a:not(.link) {
  color: var(--octo-blue);
}

.page-content a:hover,
.page-content a:focus {
  color: var(--body-link-color);
}

blockquote {
  background: var(--bg-color-hint);
  border-radius: var(--standard-radius);
  font-size: var(--fontSizeLarge);
  line-height: var(--lineHeightMedium);
  margin: var(--block-gap) 0;
  padding: 1.5rem 2.5rem 1.5rem 4.5rem;
  position: relative;
}

blockquote::before {
  content: ' ';
  position: absolute;
  left: 1.5rem;
  top: 1.8rem;
  width: 28px;
  height: 21px;
  background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMjgnIGhlaWdodD0nMjEnIGZpbGw9J25vbmUnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTI3Ljg1NSAyLjhjLTIuMDI3LjY0LTMuNjU0IDEuNi00Ljg4IDIuODgtMS4xNzQgMS4yOC0xLjYyNyAyLjkzMy0xLjM2IDQuOTYuNTg2LjQ4IDEuNDEzLjk4NyAyLjQ4IDEuNTIgMS4wNjYuNDggMiAuODUzIDIuOCAxLjEyLjIxMy44NTMuMjEzIDEuNjggMCAyLjQ4LS4yMTQuOC0uNTYgMS41Mi0xLjA0IDIuMTZhNy42MTYgNy42MTYgMCAwMS0xLjY4IDEuNTJjLS42NC4zNzMtMS4yMjcuNTg3LTEuNzYuNjQtMS44NjctLjE2LTMuNDk0LS44NTMtNC44OC0yLjA4LTEuMzg3LTEuMjI3LTIuMDgtMi45ODctMi4wOC01LjI4IDAtMS4zMzMuMjEzLTIuNjY3LjY0LTRhMTIuNTkgMTIuNTkgMCAwMTIuMDgtMy42OGMuOTA2LTEuMTczIDIuMDUzLTIuMTg3IDMuNDQtMy4wNEMyMyAxLjA5MyAyNC42NTUuNDUzIDI2LjU3NS4wOGwxLjI4IDIuNzJ6bS0xNC41NiAwYy0yLjAyNy42NC0zLjY1NCAxLjYtNC44OCAyLjg4LTEuMTc0IDEuMjgtMS42MjcgMi45MzMtMS4zNiA0Ljk2LjU4Ni40OCAxLjQxMy45ODcgMi40OCAxLjUyIDEuMDY2LjQ4IDIgLjg1MyAyLjggMS4xMi4yMTMuODUzLjIxMyAxLjY4IDAgMi40OC0uMjE0LjgtLjU2IDEuNTItMS4wNCAyLjE2YTcuNjE1IDcuNjE1IDAgMDEtMS42OCAxLjUyYy0uNjQuMzczLTEuMjI3LjU4Ny0xLjc2LjY0LTEuODY3LS4xNi0zLjQ5NC0uODUzLTQuODgtMi4wOC0xLjM4Ny0xLjIyNy0yLjA4LTIuOTg3LTIuMDgtNS4yOCAwLTEuMzMzLjIxMy0yLjY2Ny42NC00YTEyLjU5MSAxMi41OTEgMCAwMTIuMDgtMy42OEM0LjUyIDMuODY3IDUuNjY4IDIuODUzIDcuMDU1IDJjMS4zODYtLjkwNyAzLjA0LTEuNTQ3IDQuOTYtMS45MmwxLjI4IDIuNzJ6JyBmaWxsPScjMTExODFEJy8+PC9zdmc+);
  background-repeat: no-repeat;
}

blockquote cite {
  display: block;
  text-align: end;
  margin-block-start: var(--block-gap);
  font-style: italic;
  font-size: var(--fontSizeBase);
}

code {
  border-radius: var(--borderRadiusSmall);
  border: var(--borderWidth1) solid var(--colorBorderPrimary);
  background: var(--colorBackgroundSecondaryDefault);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  padding: 0 var(--space4);
  font: var(--textCodeRegularMedium);
}

pre {
  padding: 0.5rem 1rem;
  white-space: break-spaces;
  background: var(--colorBackgroundSecondaryDefault) !important;
  border: var(--borderWidth1) solid var(--colorBorderPrimary);
  border-radius: var(--borderRadiusLarge);
  font: var(--textCodeRegularMedium);
  color: var(--color-text);
}

pre code {
  background-color: unset;
  border: unset;
  padding: unset;
}

table code {
  font: var(--textCodeRegularSmall);
}

/* TODO: Also will be removed once component is implemented */
div.info code:not(pre code),
div.success code:not(pre code),
div.warning code:not(pre code),
div.problem code:not(pre code),
div.question code:not(pre code),
div.hint code:not(pre code) {
  background-color: var(--colorBackgroundSecondaryDefault);
  color: var(--color-text);
}

html[data-theme='dark'] {
  pre.astro-code code .line {
    filter: invert(98%) hue-rotate(180deg) brightness(1.1);
  }
}

em {
  font-style: italic;
}

h1 {
  font: var(--textHeadingXLarge);
  color: var(--color-heading);
}

h2:not(:where([data-shared-fragment] *)),
h3:not(:where([data-shared-fragment] *)),
h4:not(:where([data-shared-fragment] *)),
h5:not(:where([data-shared-fragment] *)),
h6:not(:where([data-shared-fragment] *)) {
  color: var(--color-heading);
  margin-block-end: var(--space12);
  transition: color var(--duration-default) ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

/* A heading directly below a larger one reads as a group, so the step is
   reduced. Only h3 and h4 need it: h5 already sits at 32px and h6 at 24px,
   where this would space the pair further apart, not closer. */
:is(h2, h3) + :is(h3, h4):not(:where([data-shared-fragment] *)) {
  margin-block-start: var(--space32);
}

h2:not(:where([data-shared-fragment] *)) {
  font: var(--textHeadingLarge);
  margin-block-start: var(--space56);
}

h3:not(:where([data-shared-fragment] *)) {
  font: var(--textHeadingMedium);
  margin-block-start: var(--space48);
}

h4:not(:where([data-shared-fragment] *)) {
  font: var(--textHeadingSmall);
  margin-block-start: var(--space40);
}

h5:not(:where([data-shared-fragment] *)) {
  font-size: var(--fontSizeMedium);
  font-weight: var(--fontWeight600);
  line-height: var(--lineHeightXSmall);
  margin-block-start: var(--space32);
}

h6:not(:where([data-shared-fragment] *)) {
  font-size: var(--fontSizeSmall);
  font-weight: var(--fontWeight600);
  line-height: var(--lineHeightXSmall);
  margin-block-start: var(--space24);
}

img {
  max-width: 100%;
  height: auto;
  background-color: var(--color-base-primary);
}

figure img {
  display: block;
  /* Only html is border-box, so without this the border pushes the image
     2px past the max-width: 100% it inherits from the global img rule */
  box-sizing: border-box;
  margin-inline: auto;
  border: var(--borderWidth1) solid var(--colorBorderPrimary);
  border-radius: 0.5rem;
  cursor: zoom-in;
}

figure img[data-hidden='true'] {
  visibility: hidden;
}

.image__caption {
  color: var(--color-heading);
  font-size: var(--fontSizeBase);
  font-weight: var(--fontWeight400);
  text-align: start;
  margin-block-start: 0.8125rem;
}

.zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--color-base-primary);
  animation: zoom-fade 200ms ease-out;
}

.zoom-overlay--closing {
  animation: zoom-fade 200ms ease-out reverse forwards;
}

.zoom-lightbox {
  position: fixed;
  inset: 0;
  z-index: 101;
  cursor: zoom-out;
}

.zoom-lightbox > div {
  position: absolute;
}

.zoom-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: none;
  color: var(--color-heading);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.zoom-close:hover,
.zoom-close:focus-visible {
  background: var(--bg-color-menu);
}

.zoom-lightbox img {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: var(--borderWidth1) solid var(--colorBorderPrimary);
  border-radius: 0.5rem;
}

@keyframes zoom-fade {
  from {
    opacity: 0;
  }
}

input {
  padding: 0.5em;
  border-radius: 0.3em;
}

mark {
  color: unset;
  background-color: transparent;
  font-weight: var(--fontWeight700);
}

strong {
  font-weight: var(--fontWeight700);
  font-family: var(--fontFamilySystem-ui);
}

/* Headings are excluded because they set a tighter 12px block-end themselves,
   which this rule would otherwise outrank on specificity. */
.page-content > *:not(:is(h2, h3, h4, h5, h6)),
.page-content > blockquote > *:not(:last-child),
.page-content > div.info > *:not(:last-child),
.page-content > div.success > *:not(:last-child),
.page-content > div.warning > *:not(:last-child),
.page-content > div.problem > *:not(:last-child),
.page-content > div.question > *:not(:last-child),
.page-content > div.hint > *:not(:last-child) {
  margin-block-end: 1rem;
}

/* TODO: This is ugly but global styles above requires this to be set - Layout refactor is required to do first, then remove this. */
.page-content > div.info > .copy-container,
.page-content > div.success > .copy-container,
.page-content > div.warning > .copy-container,
.page-content > div.problem > .copy-container,
.page-content > div.question > .copy-container,
.page-content > div.hint > .copy-container {
  margin: 0;
}

.page-content ul,
.page-content ol {
  margin-inline-start: 2rem;
}

/* Figma puts space/6 above every list item after the first, so consecutive
   items read as a group while the list still sits tight against the block
   above it. Only markdown content lists are in scope, and those are the
   classless ones - the component lists rendered into the article body (recent
   updates, article cards, the copy markdown menu) all carry a class and space
   themselves. */
.page-content :where(ul, ol):not([class]) > li + li {
  padding-block-start: var(--space6);
}

/* Boxes */

.hint,
.info,
.success,
.warning,
.problem {
  border-radius: 0 var(--standard-radius) var(--standard-radius) 0;
  margin: var(--block-gap) 0;
  padding: 1.5rem;
  border-inline-start: 3px solid #000;
}

.hint {
  color: var(--color-hint);
  border-color: var(--border-color-hint);
  background-color: var(--bg-color-hint);
}

.info {
  color: var(--color-info);
  border-color: var(--border-color-info);
  background-color: var(--bg-color-info);
}

.success {
  color: var(--color-success);
  border-color: var(--border-color-success);
  background-color: var(--bg-color-success);
}

.warning {
  color: var(--color-warning);
  border-color: var(--border-color-warning);
  background-color: var(--bg-color-warning);
}

.problem {
  color: var(--color-problem);
  border-color: var(--border-color-problem);
  background-color: var(--bg-color-problem);
}

.question {
  background: var(--bg-color-hint);
  border-radius: var(--standard-radius);
  margin: var(--block-gap) 0;
  padding: 1.5rem;
}

.question .answer {
  font-size: var(--fontSizeLarge);
  line-height: var(--lineHeightMedium);
  font-weight: var(--fontWeight700);
  padding-block-start: 0.5em;
}

.question h3,
.question h4,
.question h5,
.question h6 {
  padding-block-start: 0.5em;
  font: var(--textHeadingLarge);
}

.copy-heading-url.btn {
  position: relative;
  top: -0.1em;
  font-size: inherit; /* make sure button is centered */
  margin-inline-start: var(--space8);
  vertical-align: middle;
  opacity: 0;
}

.copy-heading-url__icon {
  background-color: var(--colorIconPrimary);
  mask: url('../assets/icons/link-on.svg') center / contain no-repeat;
}

.copy-heading-url[data-copied] .copy-heading-url__icon {
  mask: url('../assets/icons/check.svg') center / contain no-repeat;
}

/* The tooltip bubble. */
.copy-heading-url::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  inset-block-end: calc(100% + var(--space8) + var(--borderWidth1));
  translate: -50% 0;
  padding: var(--space4) var(--space8);
  border-radius: var(--borderRadiusSmall);
  background: var(--colorBackgroundInversePrimary);
  color: var(--colorTextInversePrimary);
  font: var(--textBodyRegularXSmall);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

/* The tooltip arrow. A border triangle */
.copy-heading-url::before {
  content: '';
  position: absolute;
  left: 50%;
  inset-block-end: calc(100% + var(--space2) + var(--borderWidth1));
  translate: -50% 0;
  width: 0;
  height: 0;
  border-block-start: 7px solid var(--colorBackgroundInversePrimary);
  border-inline: 7px solid transparent;
  pointer-events: none;
  opacity: 0;
}

:is(h2, h3, h4, h5, h6):hover .copy-heading-url,
.copy-heading-url:focus-visible,
.copy-heading-url[data-copied] {
  opacity: 1;
}

.copy-heading-url:is(:hover, :focus-visible, [data-copied])::before,
.copy-heading-url:is(:hover, :focus-visible, [data-copied])::after {
  opacity: 1;
}

/* Tables */

.table-wrap {
  overflow: auto;
  max-width: 100%;
}

table {
  border-collapse: collapse;
  font-size: var(--fontSizeMedium);
}

table thead {
  border-bottom: var(--borderWidth1, 1px) solid var(--colorBorderPrimary);
  font-weight: var(--fontWeight700);
}

table tr {
  border-bottom: var(--borderWidth1, 1px) solid var(--colorBorderPrimary);
}

table td {
  padding: var(--space-16) var(--space-24) var(--space-16) 0;
}

table th {
  text-align: start;
  padding: var(--space-12) var(--space-24) var(--space-12) 0;
}

.table-full-width table {
  width: 100%;
}

.table-full-width th {
  text-align: start;
}

.credits table,
.credits thead,
.credits tbody,
.credits th,
.credits td,
.credits tr {
  display: block;
}

.credits table {
  margin-block: 1rem;
}

.credits thead {
  display: none;
}

.credits td:before {
  font-weight: var(--fontWeight700);
}

.credits td:nth-of-type(1):before {
  content: 'Package: ';
}

.credits td:nth-of-type(2):before {
  content: 'Authors and/or maintainers: ';
}

.credits td:nth-of-type(3):before {
  content: 'Find it at…: ';
}

.credits td:nth-of-type(4):before {
  content: 'License: ';
}

/* Skip Links */
nav.skip-links {
  position: fixed;
  z-index: 12;
}

nav.skip-links a {
  background-color: var(--color-base-primary);
  clip: rect(0 0 0 0);
  min-width: 20vw;
  overflow: hidden;
  padding: 1em;
  position: fixed;
  top: 0;
  z-index: 15;
  text-align: center;
  display: inline-block;
  margin: -1px;
  width: 1px;
}

nav.skip-links a:focus {
  clip: auto;
  height: auto;
  margin: 0.2em;
  overflow: visible;
  width: auto;
}

/* Site Header */

.octo-header-bkg {
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
  background-color: var(--header-bg);
  min-height: 82px;
  position: fixed;
  width: 100%;
  top: 0;
  /* z-index due to conflict with octo-title-bkg */
  z-index: 11;
  background-color: var(--color-base-primary);
  transition: background-color var(--duration-default) ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

.octo-header {
  margin-inline: var(--page-inline-margin);
  font-size: var(--fontSizeBase);
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

@media (max-width: 1130px) {
  .octo-header {
    gap: 0.5rem;
  }
}

.octo-header .logo {
  max-height: 45px;
}

.octo-header__logo {
  height: 50px;
  width: auto;
}

.octo-header > a.navigation-icon {
  display: none;
  text-align: end;
  stroke: var(--header-link-alt);
  width: 40px;
  height: 40px;
}

@media (max-width: 1130px) {
  .octo-header {
    grid-template-columns: auto 40px;
  }

  .octo-header > nav,
  .octo-header > a.button--primary {
    display: none;
  }

  .octo-header > a.navigation-icon {
    display: inline-block;
  }
}

.octo-header__wrapper--left {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  column-gap: 0.5rem;
}

/* Hide badge due to not enough space */
@media (max-width: 360px) {
  .octo-header__wrapper--left .badge {
    display: none;
  }
}

/* Badge */
.badge {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0.75rem;
  gap: 0.75rem;
  border-radius: 0.5rem;
  font-size: var(--fontSizeMedium);
  font-weight: var(--fontWeight600);
  line-height: 138%;
  transition-property: background-color, color;
  transition-timing-function: ease-in-out;
  transition-duration: var(--duration-default);

  @media (prefers-reduced-motion: reduce) {
    transition-property: none;
  }
}

.badge--brand {
  color: var(--badge-color);
  background-color: var(--badge-background);
}

/* Theme switcher */

.theme-switcher {
  position: relative;
  display: inline-block;
  width: 11.1875rem;
  height: 2.5rem;
  margin-inline-start: 1rem;
}

/* Hide theme switcher in header on mobile */
@media screen and (max-width: 1130px) {
  .octo-header .octo-header__wrapper--left > .theme-switcher {
    display: none;
  }
}

.site-nav__mobile > .theme-switcher {
  display: block;
  margin: 1rem auto;
}

.theme-switcher input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.theme-switcher__label {
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: var(--white);
  cursor: pointer;
  width: 100%;
  height: 100%;
  background-color: var(--header-bg);
  border: 0.0625rem solid var(--theme-switcher-border);
  border-radius: 1.75rem;
  position: relative;
  transition: background-color var(--duration-default) ease-in-out;
}

.switch-slider {
  --toggle-sides-offset: 0.375rem;
  position: absolute;
  width: calc((100% - var(--toggle-sides-offset)) / 2);
  height: calc(100% - var(--toggle-sides-offset));
  left: calc(var(--toggle-sides-offset) / 2);
  background-color: var(--blue-500);
  border-radius: 3.375rem;
  transition: transform var(--duration-default) ease-in-out;
}

.theme-switcher__icon {
  font-size: var(--fontSizeMedium);
  font-weight: var(--fontWeight700);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  z-index: 2;
}

html[data-theme='dark'] .theme-switcher .switch-slider {
  transform: translateX(100%);
}

html[data-theme='dark'] .theme-switcher__icon--light {
  color: #7c98b4;
}

html[data-theme='dark'] .theme-switcher__icon--light svg path {
  fill: #7c98b4;
}

html[data-theme='light'] .theme-switcher__icon--dark {
  color: #557999;
}

html[data-theme='light'] .theme-switcher__icon--dark svg path {
  fill: #557999;
}

/* The input is visually hidden but still the focusable control, so the ring
   has to be drawn on the label. */
.theme-switcher input:focus-visible + .theme-switcher__label {
  outline: 0.125rem solid var(--octo-blue);
  outline-offset: 0.125rem;
}

.theme-switcher input:disabled + .theme-switcher__label {
  opacity: 0.5;
  cursor: not-allowed;
}

/* */

.last-updated {
  color: var(--color-subtitle);
  margin-block-start: var(--block-gap);
}

.docs-home {
  text-align: center;
  margin-block-start: 5vh;
  margin-block-end: 5vh;
}

/* Separator */
.separator {
  width: 100%;
  height: 0.0625rem;
  background-color: var(--separator-color);
  margin: 3rem 0 3.75rem;
  transition: background-color var(--duration-default) ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

/* Link */
.link {
  display: inline-flex;
  gap: 1rem;
  text-decoration: none;
  color: var(--octo-blue-lightest);
  font-family: var(--fontFamilySystem-ui);
  font-size: var(--fontSizeLarge);
  line-height: var(--lineHeightMedium);
  font-weight: var(--fontWeight500);
  align-items: center;
  transition: color var(--duration-default) ease-in-out;
}

.link:hover,
.link:focus {
  color: var(--octo-blue);
}

.link__icon-wrapper {
  flex: 1;
  max-width: 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.link__icon {
  width: 100%;
}

.link__content {
  /* TODO: remove together with simple-grid width 100% */
  width: auto !important;
}

.simple-grid .astro-code {
  text-align: left;
}

/* Article Nav */
.article-nav {
  margin-inline-end: 1rem;
}

@media (max-width: 1130px) {
  .article-nav {
    margin-bottom: 2rem;
  }
}

.article-nav .article-nav__details .article-nav__title::marker {
  content: '';
  display: none;
}

.article-nav .article-nav__details .article-nav__title::after {
  /* fa-chevron-down */
  content: '\f078';
  font-family: fa-solid;
  float: right;
  transition: transform var(--duration-default) ease-in-out;
  display: none;
}

.article-nav .article-nav__details[open] .article-nav__title::after {
  transform: rotate(180deg);
}

.article-nav__title {
  pointer-events: none;
}

@media (max-width: 1130px) {
  .article-nav__title {
    pointer-events: auto;
  }

  .article-nav .article-nav__details .article-nav__title::after {
    /* fa-chevron-down */
    content: '\f078';
    font-family: fa-solid;
    float: right;
    transition: transform var(--duration-default) ease-in-out;
    display: block;
  }
}

.article-nav__title {
  color: var(--color-heading);
  font-family: var(--fontFamilySystem-ui);
  font-size: var(--fontSizeBase);
  font-weight: var(--fontWeight700);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--duration-default) ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

.article-nav .separator {
  margin: 1rem 0 0.69rem;
}

.article-nav__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  list-style: none;
  gap: 1rem;
}

.article-nav__item {
  cursor: pointer;
}

.article-nav__link {
  display: flex;
  color: var(--color-subtitle);
  font-size: var(--fontSizeBase);
  line-height: 1.5rem;
  font-weight: var(--fontWeight400);
  text-decoration: none;
  transition-property: font-weight, color, transform;
  transition-timing-function: ease-in-out;
  transition-duration: var(--duration-default);

  @media (prefers-reduced-motion: reduce) {
    transition-property: none;
  }
}

.article-nav__link.highlight,
.article-nav__item:hover .article-nav__link {
  font-weight: var(--fontWeight600);
  color: var(--badge-color);
}

.article-nav__item:hover .article-nav__link {
  transform: translateX(0.5rem);
}

.article-nav .article-nav__item--level-3 {
  padding-inline-start: 1em;
}

.article-nav .article-nav__item--level-4 {
  padding-inline-start: 2em;
}

.article-nav .article-nav__item--level-5 {
  padding-inline-start: 3em;
}

.article-nav .article-nav__item--level-6 {
  padding-inline-start: 4em;
}

/* Card */
.card {
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--navy-200);
  transition: box-shadow 300ms ease-in-out;
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--card-shadow);
}

.card:not(.card--related-topics):hover .card__image {
  transform: scale(1.3);
}

/* padded variant */
.card--padded .card__image-wrapper {
  background-color: #c3cdd5;
  padding: 1rem 2rem 0;
}

/* related-topics variant */
.card--related-topics {
  box-shadow: var(--card-related-topics-shadow);
}

.card--related-topics:hover,
.card--related-topics .card__link:focus-visible {
  box-shadow: var(--card-related-topics-hover-shadow);
}

.card--related-topics:hover .card__label svg,
.card--related-topics .card__link:focus-visible .card__label svg {
  transform: translateX(0.5rem);
}

.card--related-topics .card__image-wrapper {
  padding: 0.75rem 0.75em 0;
}

.card--related-topics .card__image {
  border-radius: 0.625rem;
}

.card--related-topics .card__copy {
  padding: 0 1.25rem 1.25rem;
}

.card--related-topics .card__title {
  color: var(--color-text);
  font-family: var(--fontFamilySystem-ui);
  font-size: var(--fontSizeLarge);
  line-height: var(--lineHeightMedium);
  font-weight: var(--fontWeight700);
}

.card__image {
  border-radius: 0.625rem 0.625rem 0rem 0rem;
  transition: transform 300ms ease-in-out;
}

.card__link {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  text-decoration: none;
  height: 100%;
}

.card__image-wrapper {
  display: flex;
  height: 9rem;
  overflow: hidden;
  box-sizing: border-box;
}

.card__image {
  width: 100%;
  object-fit: cover;
}

.card__copy {
  padding: 0 1.25rem 1.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  text-align: start;
  flex-grow: 1;
}

.card__title {
  font-size: var(--fontSizeBase);
  font-weight: var(--fontWeight600);
  color: var(--color-heading);
}

.card__description {
  font: var(--textBodyRegularMedium);
  color: var(--blue-grey);
}

.card__bottom {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--badge-color);
  font-size: var(--fontSizeBase);
  font-weight: var(--fontWeight500);
  padding-bottom: 0.25rem;
  border-bottom: 0.0625rem solid var(--badge-color);
}

.card__label svg {
  transition: transform 300ms ease-in-out;
}

/* IconTile */
.icon-tile {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--icon-tile-border);
  background: var(--icon-tile-background);
  padding: 1.25rem 1.75rem 1rem;
  text-decoration: none;
  transition-property: background, box-shadow, border-color;
  transition-duration: var(--duration-default);
  transition-timing-function: ease-in-out;
  height: fit-content;
  box-sizing: border-box;
}

.icon-tile:hover {
  background: var(--icon-tile-background-hover);
  box-shadow: 0px 4px 10px 0px rgba(13, 128, 216, 0.2);
  border-color: var(--icon-tile-border-hover);
}

.icon-tile__icon-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 4rem;
}

.icon-tile__icon {
  max-width: 4rem;
  width: 100%;
}

.icon-tile__content {
  display: flex;
  flex-direction: column;
  text-align: start;
}

.icon-tile__title {
  color: var(--color-heading);
  font-family: var(--fontFamilySystem-ui);
  font-size: var(--fontSizeBase);
  font-weight: var(--fontWeight600);
  /* Override global styles */
  padding: 0;
}

.icon-tile__description {
  color: var(--color-text-secondary);
  font-size: var(--fontSizeMedium);
  font-weight: var(--fontWeight400);
}

/* Navigation */

.site-nav {
  align-self: start;
  position: sticky;
  top: 82px;
  height: calc(100vh - 82px);
  box-sizing: border-box;
  /* No inline-end padding here — the scrolling list owns that gap, so the
     scrollbar rides against the border. No block-end padding either: the
     column runs to the bottom of the window. */
  padding-block: var(--space16) 0;
  padding-inline: var(--space16) 0;
  background-color: var(--colorBackgroundPrimaryDefault);
  border-inline-end: 1px solid var(--border-default-color);
  transition-property: background-color, border-color;
  transition-duration: var(--duration-default);
  transition-timing-function: ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition-property: none;
  }
}

.site-nav-title {
  display: none;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space2);
  list-style: none;
}

/* Only the outer list scrolls; the nested ones grow inside it. */
.site-nav > .site-nav__list {
  height: 100%;
  /* Keeps row backgrounds off the scrollbar. The chevron sits inside the row,
     so this is the whole budget for that gap — anything wider here pushes the
     chevron away from the scrollbar by the same amount. */
  padding-inline-end: var(--space8);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-color) transparent;
}

.site-nav__list .site-nav__list {
  padding-inline-start: var(--space16);
}

.site-nav__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space8);
  padding: var(--space8);
  border-radius: var(--borderRadiusSmall);
  background-color: var(--navBackgroundRest);
  color: var(--colorTextPrimary);
  font: var(--textBodyRegularMedium);
  text-decoration: none;
  cursor: pointer;
  transition-property: background-color, color;
  transition-duration: var(--duration-default);
  transition-timing-function: ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition-property: none;
  }
}

/* Laying the summary out as a flex box drops the disclosure triangle everywhere except Safari, which needs this. */
.site-nav__link::-webkit-details-marker {
  display: none;
}

.site-nav__label {
  flex: 1 0 0;
  min-width: 1px;
  overflow-wrap: break-word;
  /* The global `summary > *` rule underlines and recolors everything inside a summary. Nav rows carry their own color, on the row. */
  color: inherit;
  text-decoration: none;
}

/* Chevrons are masked pseudo-elements rather than inline SVG: the tree renders
   dozens of rows per page, and shipping the markup once per row cost ~9KB of
   every page. Expanded sections point theirs down, everything else right. */
.site-nav__group > .site-nav__link::after,
.site-nav__link--section::after {
  content: '';
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--colorIconTertiary);
  mask: url('../assets/icons/chevron-right.svg') center / contain no-repeat;
}

.site-nav__group[open] > .site-nav__link::after {
  mask-image: url('../assets/icons/chevron-down.svg');
}

/* Nav rows never take a link color. Restating the resting color is what beats
   the global `a:hover, a:focus, summary:hover, summary:focus` rule — including
   after a click, which leaves the summary focused but not focus-visible. */
.site-nav__link:hover,
.site-nav__link:focus {
  color: var(--colorTextPrimary);
}

/* Clicking a section to expand it should not leave the row looking hovered. */
.site-nav__link:hover,
.site-nav__link:focus-visible {
  background-color: var(--navBackgroundHover);
}

/* The row for the page you are on, hovered or not. */
.site-nav__link[aria-current] {
  background-color: var(--navBackgroundActive);
  color: var(--colorTextSelected);
}

/* An expanded section is the only row that goes bold. */
.site-nav__group[open] > .site-nav__link {
  font: var(--textBodyBoldMedium);
}

/* Table of contents column */

.side-nav {
  align-self: start;
  overflow: overlay;
  position: sticky;
  font-size: var(--fontSizeMedium);
  font-weight: var(--fontWeight400);
  margin-block-start: 10vh;
  height: calc(100vh - 82px - 10.625rem);
  top: 10.625rem;
}

.side-nav > ul {
  padding-inline-end: 1rem;
  padding-block-end: 3rem;
}

.side-nav li {
  list-style: none;
}

@media (max-width: 1130px) {
  /* The desktop nav is hidden here and its markup is cloned into the mobile
     drawer, which reuses these class names. Keep the block padding: the drawer
     needs it, and only the desktop column's sticky geometry has to go. */
  .site-nav {
    position: static;
    top: auto;
    height: auto;
    border-inline-end: 0 none;
  }

  /* 100vh less the header, the drawer's theme switcher, and the padding
     above. */
  .site-nav > .site-nav__list {
    height: calc(100vh - 7.625rem - var(--space16));
  }

  .side-nav {
    height: auto;
    margin: 0;
    padding: 0;
    position: unset;
    top: unset;
  }

  .side-nav details {
    margin-block: 1rem;
    width: auto;
    margin-inline: auto;
  }

  .side-nav summary {
    text-align: center;
  }

  .side-nav .octo-github-edit {
    display: none;
  }
}

.mobile-menu {
  display: none;
}

@media (max-width: 1130px) {
  .mobile-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--navbar-icon-size);
    height: var(--navbar-icon-size);
  }
}
.site-nav__mobile {
  position: absolute;
  width: 100%;
  right: -100%;
  transition: right 500ms ease-in-out;
  margin: 0;
  top: 5.125rem;
}

.mobile-menu.is-active .site-nav__mobile {
  right: 0;
}

/* Burger menu */
.hamburger {
  position: relative;
}

.hamburger:hover {
  cursor: pointer;
}

.hamburger .line {
  width: var(--hamburger-line-width);
  height: var(--hamburger-line-height);
  background-color: var(--hamburger-lines-color);
  display: block;
  margin: var(--hamburger-line-margin) auto;
  transition-property: opacity, transform;
  transition-duration: 500ms;
  border-radius: 0.1rem;
}
.hamburger .circle {
  display: block;
  width: var(--navbar-icon-size);
  height: var(--navbar-icon-size);
  border: solid #76a1c2;
  border-radius: 50%;
  border-width: 0;
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition-property: opacity, border-width;
  transition-duration: 500ms;
}
.mobile-menu.is-active .hamburger .line:nth-child(1) {
  transform: translateY(var(--hamburger-translate-y)) rotate(45deg);
}
.mobile-menu.is-active .hamburger .line:nth-child(2) {
  opacity: 0;
}
.mobile-menu.is-active .hamburger .line:nth-child(3) {
  transform: translateY(calc(-1 * var(--hamburger-translate-y))) rotate(-45deg);
}
.mobile-menu.is-active .hamburger .circle {
  opacity: 1;
  border-width: 0.0625rem;
}

/* Main content group */

.content-group {
  grid-template-columns: var(--navigation-width) minmax(300px, 800px) var(
      --toc-width
    );
  display: grid;
  grid-template-rows: auto;
  gap: var(--grid-gap-main);
  max-width: 100vw;
  justify-content: space-between;
  grid-template-areas: 'menu content toc';
  margin-top: 82px;
}

/* Article header */
.header {
  display: flex;
  gap: 1.62rem;
  align-items: center;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--header-separator-color);
  margin-bottom: 1.56rem;
  transition: border-color var(--duration-default) ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

.header__icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5625rem;
  height: 4.0625rem;
  width: 4.0625rem;
  border: 1px solid var(--header-icon-border);
  background-color: var(--header-icon-background);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  transition-property: background-color, border;
  transition-duration: var(--search-dropdown-duration);
  transition-timing-function: ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition-property: none;
  }
}

.header__icon-wrapper:after {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: #1faeff;
  opacity: 0.65;
  bottom: -25%;
  filter: blur(0.835rem);
}

/* Need to override styles that might be applied to certain font awesome icons */
.header__icon-wrapper .header__icon:before {
  color: var(--blue-500);
  font-size: var(--fontSize2xLarge);
}

.header__icon {
  z-index: 1;
  /* Override image global styles */
  background: transparent;
}

.header__icon {
  &.fa-octopus,
  &.fa-twitter,
  &.fa-linkedin,
  &.fa-github,
  &.fa-youtube {
    &:before {
      padding-inline-end: 0;
    }
  }
}

.header__text {
  display: flex;
  flex-direction: column;
}

.header__title {
  color: var(--color-text);
  transition: color var(--duration-default) ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

.header__subtitle {
  color: var(--color-subtitle);
  font-size: var(--fontSizeLarge);
  line-height: var(--lineHeightMedium);
  transition: color var(--duration-default) ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

/* Article header END */

.content-group .site-nav {
  grid-area: menu;
  width: 100%;
}

.content-group main {
  grid-area: content;
  /* Drops the breadcrumb 56px below the header. The design gives each column
     its own start height below the header — 16px for the nav, 56px here,
     100px for the toc — so there is no shared value to put on .content-group,
     whose margin-top is clearance for the fixed header. Only this column is
     built to the design so far: the nav still starts at 0 and .side-nav still
     uses a viewport-relative 10vh. Reset in the restack breakpoint below. */
  margin: var(--space56) 0 0;
}

.content-group .side-nav {
  grid-area: toc;
  width: 100%;
}

.continue {
  padding-inline-end: 30px;
}

@media (max-width: 1130px) {
  .content-group {
    grid-template-columns: 1rem auto 1rem;
    grid-template-rows: auto auto auto;
    gap: 0;
    grid-template-areas:
      'left top right'
      'left toc right'
      'left content right'
      'left menu right';
  }

  .content-group main,
  .content-group .page-content {
    width: unset;
    max-width: var(--content-width-mobile);
  }

  /* The columns stack here, so the toc sits directly above the content and the
     56px that placed the breadcrumb below the header would read as a gap
     between the two. */
  .content-group main {
    margin-block-start: 0;
  }
}

/* Table of Contents */

.page-toc details summary {
  text-decoration: none;
  font-weight: var(--fontWeight700);
  font-size: var(--fontSizeBase);
}

.page-toc details summary::marker {
  content: '';
  display: none;
}

.page-toc details summary::after {
  /* fa-chevron-down */
  content: '\f078';
  font-family: fa-solid;
  margin-inline-start: 0.3em;
  float: right;
}

.page-toc details[open] summary::after {
  /* fa-chevron-up */
  content: '\f077';
  font-family: fa-solid;
}

.page-toc ol {
  margin: 1rem 0 2rem 0;
  list-style: none;
  font-size: var(--fontSizeMedium);
}

.page-toc li a {
  display: block;
  text-decoration: none;
  padding-block: 0.4em;
  margin-block: var(--gap-menu);
}

.page-toc li a.highlight {
  font-weight: var(--fontWeight700);
  color: var(--color-menu-link-alt);
}

.page-toc .toc-lev-3 {
  padding-inline-start: 1em;
}

.page-toc .toc-lev-4 {
  padding-inline-start: 2em;
}

.page-toc .toc-lev-5 {
  padding-inline-start: 3em;
}

.page-toc .toc-lev-6 {
  padding-inline-start: 4em;
}

/* Author info */

.post-meta {
  border-top: 1px solid var(--navy-400);
  padding-block-start: var(--block-gap);
  margin-block-start: 5rem;
  display: flex;
}

.post-meta .author-image {
  width: 170px;
  height: 170px;
  margin-inline-end: 1rem;
  object-fit: cover;
}

.post-meta p {
  margin-block-start: 3%;
  font-size: var(--fontSizeBase);
}

.author-info {
  margin-block-start: 3%;
}

.author-list {
  font-size: var(--fontSizeLarge);
  line-height: var(--lineHeightMedium);
}

.author-list time {
  font-size: var(--fontSizeBase);
  color: var(--grey);
}

@media (max-width: 860px) {
  .post-meta {
    display: block;
  }

  .post-meta .author-image {
    margin: 0 auto var(--block-gap) auto;
    display: block;
  }
}

/* Search dialog */

.search-dialog {
  margin: auto;
  padding: 2rem 3rem;
  border-radius: var(--standard-radius);
  box-shadow: var(--box-shadow);
  height: calc(90vh - 4em);
  width: calc(80vw - 6em);
  max-width: 860px;
}

.search-dialog::backdrop {
  background-color: #000;
  opacity: 0.5;
}

.search-dialog form {
  margin-top: 2rem;
}

#site-search-close {
  float: right;
  position: relative;
  top: -1rem;
  left: 2.5rem;
  background: none;
  cursor: pointer;
  font-size: var(--fontSize2xLarge);
  stroke: var(--color-menu-link);
}

@media (max-width: 860px) {
  .search-dialog {
    /* Fallback */
    height: calc(100vh - 4rem);
    width: calc(100vw - 6rem);
    /* Ideal units */
    height: calc(100dvh - 4rem);
    width: calc(100dvw - 6rem);
  }
}

/* Taxonomy Links */

.post-taxonomy div {
  margin: var(--block-gap) 0;
  text-align: end;
}

.post-taxonomy h2 {
  font-size: var(--fontSizeBase);
  line-height: var(--lineHeightSmall);
  display: inline;
}

.post-taxonomy ul {
  list-style: none;
  display: inline;
  margin: 0;
}

.post-taxonomy li {
  display: inline;
  margin: 0 0.3rem;
  line-height: 2.5;
}

.post-taxonomy li a {
  background-color: var(--menu-link-bg);
  color: var(--body-link-alt);
  border-radius: var(--standard-radius);
  padding: 0.3rem 0.5rem;
  text-decoration: none;
}

@media (max-width: 860px) {
  .post-taxonomy div {
    text-align: start;
  }
}

/* GitHub Link */

.octo-github-edit {
  margin-block-start: var(--block-gap);
}

.octo-github-edit a {
  color: var(--color-menu-link);
  text-decoration: none;
}

.octo-github-edit a:hover,
.octo-github-edit a:focus {
  color: var(--color-menu-link-alt);
}

/* "Use Octopus docs with AI" dropdown */
.octo-copy-md {
  margin-block-start: var(--block-gap);
}

.octo-copy-md__menu {
  display: inline-block;
  position: relative;
}

.octo-copy-md__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border-color-menu-open);
  border-radius: 999px;
  background-color: transparent;
  color: var(--color-menu-link);
  font: inherit;
  cursor: pointer;
  list-style: none;
  text-decoration: none;
  user-select: none;
  transition:
    border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.octo-copy-md__trigger > * {
  text-decoration: none;
  color: inherit;
}

.octo-copy-md__trigger::-webkit-details-marker,
.octo-copy-md__trigger::marker {
  content: '';
  display: none;
}

.octo-copy-md__trigger-icon,
.octo-copy-md__trigger-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.octo-copy-md__trigger-icon::before {
  content: '\f0eb'; /* fa-lightbulb */
  font-family: fa-solid;
  font-size: 0.95em;
  line-height: 1;
  color: var(--color-menu-link-alt);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.octo-copy-md__trigger-caret::before {
  content: '\f078'; /* fa-chevron-down */
  font-family: fa-solid;
  font-size: 0.7em;
  line-height: 1;
  color: currentColor;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.octo-copy-md__menu[open]
  > .octo-copy-md__trigger
  .octo-copy-md__trigger-caret::before {
  transform: rotate(180deg);
}

.octo-copy-md__trigger:hover {
  color: var(--color-menu-link-active);
  border-color: var(--color-menu-link-alt);
}

.octo-copy-md__menu[open] > .octo-copy-md__trigger {
  color: var(--color-menu-link-active);
  border-color: var(--color-menu-link-alt);
  background-color: var(--bg-color-menu-open);
  box-shadow: 0 0.0625rem 0.25rem rgba(13, 128, 216, 0.08);
}

.octo-copy-md__trigger:focus-visible {
  outline: 2px solid var(--color-menu-link-alt);
  outline-offset: 2px;
}

.octo-copy-md .octo-copy-md__options {
  position: absolute;
  z-index: 10;
  inset-block-start: calc(100% + 0.5rem);
  inset-inline-start: 0;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background-color: var(--bg-color-menu);
  border: 1px solid var(--border-color-menu-open);
  border-radius: 0.625rem;
  min-width: 20rem;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow:
    0 0.625rem 1.875rem rgba(15, 37, 53, 0.12),
    0 0.125rem 0.375rem rgba(15, 37, 53, 0.06);
}

.octo-copy-md .octo-copy-md__options .octo-copy-md__option {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--color-menu-link);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.octo-copy-md .octo-copy-md__options .octo-copy-md__option:hover,
.octo-copy-md .octo-copy-md__options .octo-copy-md__option:focus-visible {
  background-color: var(--bg-color-menu-open);
  color: var(--color-menu-link-active);
  outline: none;
}

.octo-copy-md__option::before {
  font-family: fa-solid;
  font-size: 0.95em;
  width: 1.1em;
  text-align: center;
  color: var(--color-menu-link-alt);
  flex-shrink: 0;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.octo-copy-md__option--copy::before {
  content: '\f0c5'; /* fa-copy */
}

.octo-copy-md__option--view::before {
  content: '\f15c'; /* fa-file-lines */
}

.octo-copy-md__option--all::before {
  content: '\f02d'; /* fa-book */
}

/* Live regions for announcing the result of an action, such as copying a URL or
   a code block. Read by screen readers, never shown. */
.octo-copy-md__sr-status,
.copy-heading-url-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Video */

.yt-video {
  aspect-ratio: 4/3;
  display: grid;
  grid-template-rows: 3fr 1fr;
}

.yt-video > * {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.yt-video .play-icon {
  background-image: url(https://img.youtube.com/vi/VOWnhMxJMMk/0.jpg);
  background-position: center;
  background-size: cover;
  border-radius: var(--standard-radius);
  box-shadow: var(--octo-shadow-standard-box);
  color: var(--fore-link);
  font-size: 5em;
}

.yt-video:hover .title,
.yt-video:focus .title {
  background-color: var(--funk);
}

.yt-iframe {
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

a[data-youtube] {
  text-decoration: none;
}

/* Article Journey */

.article-journey {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--grid-gap);
  justify-content: space-between;
  margin: 1rem auto;
}

@media (max-width: 680px) {
  .article-journey {
    flex-direction: column;
  }
}

.article-journey__button {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
}

.article-journey__button:hover .article-journey__icon,
.article-journey__button:focus-visible .article-journey__icon,
.article-journey__button:active .article-journey__icon {
  transform: translateX(var(--icon-translate-value))
    rotate(var(--icon-rotate-value));
}

.article-journey__button:hover .article-journey__icon path,
.article-journey__button:focus-visible .article-journey__icon path,
.article-journey__button:active .article-journey__icon path {
  stroke: var(--blue-500);
}

.article-journey__button:hover .article-journey__content,
.article-journey__button:focus-visible .article-journey__content,
.article-journey__button:active .article-journey__content {
  transform: translateX(calc(var(--icon-translate-value) * -1));
  color: var(--header-link-alt);
}

.article-journey__button--previous .article-journey__icon {
  transform: rotate(var(--icon-rotate-value));
}

.article-journey__button--previous {
  --icon-translate-value: -0.4rem;
  --icon-rotate-value: 180deg;
}

.article-journey__button--next {
  --icon-translate-value: 0.4rem;
  --icon-rotate-value: 0;
  margin-inline-start: auto;
}

.article-journey__button--next .article-journey__content {
  text-align: end;
}

.article-journey__icon-wrapper {
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  background: var(--grey-light);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.article-journey__icon {
  transition: transform var(--duration-default) ease-in-out;
}

.article-journey__icon path {
  transition: stroke var(--duration-default) ease-in-out;
}

.article-journey__content {
  display: flex;
  flex-direction: column;
  color: var(--color-heading);
  transition: var(--duration-default) ease-in-out;
  transition-property: color, transform;
}

.article-journey__label {
  font-size: var(--fontSizeBase);
  font-weight: var(--fontWeight400);
}

.article-journey__title {
  font-size: var(--fontSizeLarge);
  line-height: var(--lineHeightMedium);
  font-weight: var(--fontWeight700);
}

/* Related articles */

.octo-related {
  background-color: var(--blue-midnight-darker);
  color: var(--color-base-primary);
  padding: 3rem 0 3rem 0;
}

.octo-related h2 {
  color: var(--color-base-primary);
  text-align: center;
  padding: 0 0 2rem 0;
  margin: 0;
}

.octo-related ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, 270px);
  gap: 1rem;
  margin: 0 auto;
  justify-content: center;
}

.octo-related li {
  box-shadow: 0px 14px 20px rgba(0, 0, 0, 0.25);
  padding: 1px;
  border-radius: var(--standard-radius);
  background:
    linear-gradient(var(--color-text), var(--color-text)) padding-box,
    linear-gradient(to bottom, #173045 80%, #0cb0f2) border-box;
  border: 0.1rem solid transparent;
}

.octo-related img {
  border-radius: var(--standard-radius);
}

.octo-related h3 {
  font-size: var(--fontSizeLarge);
  font-weight: var(--fontWeight400);
  color: var(--color-base-primary);
}

.octo-related a {
  font-size: var(--fontSizeBase);
  color: var(--octo-blue-lightest);
}

.octo-related .list-item-content {
  display: grid;
  grid-template-rows: 7rem 3rem;
  margin: 0 1rem;
}

/* Post List */

.page-content ul.post-list {
  list-style: none;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, 270px);
  gap: var(--grid-gap);
  justify-content: center;
}

.post-list li {
  box-shadow: 0px 14px 20px rgb(0 0 0 / 25%);
  border-radius: var(--standard-radius);
}

.post-list article {
  border-radius: var(--standard-radius);
  padding: 0.5rem;
}

.post-list h3 {
  font-size: var(--fontSizeLarge);
  font-weight: var(--fontWeight400);
  padding: 0;
  align-self: center;
}

.post-list a {
  text-decoration: none;
}

.post-list img {
  border-radius: var(--standard-radius);
}

.post-list .post-meta {
  display: none;
}

.recent-updates li {
  margin-block-end: 1em;
}

.recent-updates time {
  display: block;
}

.page-content {
  /* Heading gaps rely on sibling margin collapsing, which only happens in block
     flow. Converting this to flex or grid makes every gap additive again -
     56px above an h2 becomes 72px after a paragraph, 88px after a blockquote. */
  display: flow-root;

  li:has(figure) {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

/* Paging */

.post-paging {
  margin: 2rem 0;
  text-align: center;
}

.post-paging span,
.post-paging a {
  padding: 0.3em 0.6em;
  margin: 0 0.4em;
}

.post-paging a[aria-current] {
  text-decoration: none;
}

/* Footer */

.site-footer {
  color: var(--footer-link-color);
  text-align: start;
  background-color: var(--blue-midnight-dark);
  padding: 3rem 0 3rem 0;
}

.site-footer h2 {
  text-transform: uppercase;
  color: var(--navy-400);
  font-size: var(--fontSizeMedium);
  line-height: var(--lineHeightXSmall);
  letter-spacing: 0.12em;
}

.site-footer ul {
  list-style: none;
  line-height: 2.5;
}

.site-footer a {
  color: var(--footer-link-color);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--octo-blue-lightest);
}

.site-footer nav {
  text-align: center;
  font-size: var(--fontSizeBase);
}

.site-footer nav a:after {
  /* fa-chevron-up */
  content: '\f077';
  font-family: fa-solid;
  padding-inline-start: 0.6em;
}

/* Footer columns */

.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 16rem));
  justify-content: center;
  gap: var(--grid-gap);
}

.footer-columns img.octo-logo {
  background-color: transparent;
  width: 40px;
  height: auto;
}

@media (max-width: 680px) {
  .footer-columns {
    display: block;
    width: var(--content-width-mobile);
    margin: 0 auto;
  }
}

/* Overlay (Mobile Navigation, Search) */

.overlay {
  position: fixed;
  top: 0;
  background-color: var(--content-bg);
  width: calc(100% - 1em - 1em);
  height: calc(100% - 5rem - 2rem);
  padding: 110px 1em 2rem 1em;
  max-height: 100vh;
  overflow-y: auto;
  z-index: 1;
}

/* Site Search */

.site-search__wrapper {
  position: relative;
  width: 100%;
  max-width: 34.75rem;
  transition: max-width var(--search-dropdown-duration) ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

@media screen and (min-width: 1131px) {
  .site-search__wrapper,
  .site-search__wrapper.is-active {
    max-width: 28.8rem;
  }
}

@media screen and (min-width: 1201px) {
  .site-search__wrapper.is-active {
    max-width: 34.8rem;
  }
}

@media screen and (min-width: 1370px) {
  .site-search__wrapper.is-active {
    max-width: 45.8rem;
  }
}

@media screen and (min-width: 1570px) {
  .site-search__wrapper.is-active {
    max-width: 57.8rem;
  }
}

@media screen and (max-width: 1130px) {
  .octo-header .site-search-results,
  .octo-header .site-search__overlay,
  .octo-header .site-search.is-active {
    display: none;
  }
}

.site-search {
  height: var(--search-height);
  border-radius: var(--search-border-radius);
  border: var(--search-border);
  background-color: var(--color-base-primary);
  position: relative;
  z-index: 1;
  transition: background-color var(--duration-default) ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

.site-search-results {
  background-color: var(--color-base-primary);
  position: absolute;
  top: var(--search-height);
  width: 100%;
  padding: 0;
  border-radius: var(--search-border-radius);
  border-radius: 0.9375rem;
  list-style-type: none;
  overflow-y: scroll;
  transition-property: opacity, padding, transform, visibility;
  transition-duration: var(--search-dropdown-duration);
  transition-timing-function: ease-in-out;
  visibility: hidden;
  transform: translateY(0) scaleY(0);
  z-index: 1;
  max-height: var(--search-dropdown-height);
  transform-origin: top;
  will-change: transform;
  opacity: 0;
}

.site-search.is-active + .site-search-results {
  opacity: 1;
  padding: 1rem 0;
  transform: translateY(1.37rem) scaleY(1);
  visibility: visible;
}

.site-search-results ul {
  list-style-type: none;
  margin-inline-start: 0;
}

.site-search-results .show-more {
  border-radius: 4.0625rem;
  background: #00ffa3;
  padding: 0.5rem 0.75rem;
  display: block;
  margin: 1rem auto 0;
  cursor: pointer;
}

.site-search__overlay {
  opacity: 0;
  visibility: hidden;
  background: var(--search-overlay);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity var(--search-dropdown-duration) ease-in-out;
  z-index: 1;
}

.site-search__wrapper.is-active .site-search__overlay {
  opacity: 1;
  visibility: visible;
}

.site-search__icon path {
  fill: var(--blue-grey-light);
}

.site-search-query {
  width: 100%;
  background: transparent;
  height: 100%;
  padding: 0 1rem;
  width: calc(100% - 2rem);
  color: var(--color-text);
}

.site-search-query::placeholder {
  color: var(--search-placeholder-color);
  opacity: 0.6;
}

.search-results__heading {
  visibility: hidden;
  padding: 1.5rem 3.6rem 1.75rem;
}

.site-search.is-active + .site-search-results > .search-results__heading {
  visibility: visible;
}

.site-search-results__item {
  background-color: transparent;
  transition-property: background-color, border-color;
  transition-duration: var(--search-dropdown-duration);
  transition-timing-function: ease-in-out;
  border-bottom: 0.0625rem solid;
  border-color: var(--navy-200);
  position: relative;
  cursor: pointer;
}

.site-search-results__item:hover {
  --hover-color: rgba(13, 128, 216, 0.07);
  background-color: var(--hover-color);
  border-color: var(--hover-color);
}

.site-search-results__item::after {
  content: '';
  display: inline-block;
  width: 0.75rem;
  height: 1.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20' fill='none'%3E%3Cpath d='M2 18L10 10L2 2' stroke='%230D80D8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 0.75rem 1.25rem;
  background-repeat: no-repeat;
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%) translateX(-1rem);
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: var(--search-dropdown-duration);
  transition-timing-function: ease-in-out;
}

.site-search-results__item:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 930px) {
  .site-search-results__item {
    padding: 1rem;
  }
}

.result-wrapper {
  display: flex;
  padding: 1.5rem 3.6rem 1.75rem;
  text-decoration: none;
  flex-direction: column;
  gap: 0.56rem;
}

@media (max-width: 930px) {
  .result-wrapper {
    padding: 1rem;
  }
}

.site-search-results__item:hover .result-wrapper {
  color: initial;
}

.result-wrapper mark {
  color: var(--octo-blue);
}

.result-path {
  color: var(--blue-grey-lighter);
  font-size: var(--fontSizeMedium);
  font-weight: var(--fontWeight400);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.result-path__segment:last-child {
  color: var(--color-menu-link-active);
}

.result-title {
  color: var(--color-text);
  font-size: var(--fontSizeLarge);
  line-height: var(--lineHeightMedium);
  font-weight: var(--fontWeight700);
}

.result-description {
  color: var(--color-heading);
  font-size: var(--fontSizeBase);
  font-weight: var(--fontWeight400);
}

.site-search > fieldset {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

.site-search__remove-btn {
  margin-inline-start: auto;
  background-color: transparent;
  padding: 0.5rem;
  cursor: pointer;
  visibility: hidden;
  transition: transform var(--search-dropdown-duration) ease-in-out;
}

.site-search__remove-btn:hover {
  transform: scale(1.2);
}

.site-search__remove-btn path {
  fill: var(--search-remove-icon-color);
}

.site-search.is-active .site-search__remove-btn {
  visibility: visible;
}

.site-search__mobile {
  display: none;
}

@media (max-width: 1130px) {
  .site-header .site-search__wrapper {
    max-width: fit-content;
    order: -1;
  }

  .site-header .site-search {
    display: none;
  }

  .site-header .site-search__mobile {
    display: flex;
    width: var(--navbar-icon-size);
    height: var(--navbar-icon-size);
    border-radius: calc(var(--navbar-icon-size) / 2);
    justify-content: center;
    align-items: center;
    border: var(--search-border);
  }
}

.site-search .show-more {
  display: inline-block;
  font-size: var(--fontSizeMedium);
  border-radius: 100px;
  text-decoration: none;
  text-align: center;
  padding: 0.2em 0.6em 0.3em 0.6em;
  color: var(--button-primary-text);
  background-color: var(--bg-color-hint);
}

.result-headings li {
  display: none;
}

.result-headings li:nth-child(-n + 3) {
  display: block;
}

.result-headings:has(li:nth-child(n + 4))::after {
  content: 'See more >';
  color: var(--octo-blue);
  text-decoration: underline;
}

.result-headings:focus-within li {
  display: block;
}

.result-headings:focus-within::after {
  display: none;
}

.show-more {
  display: inline-block;
  border-radius: 100px;
  text-decoration: none;
  text-align: center;
  padding: 0.2em 1.6em 0.3em 1.6em;
  color: var(--button-primary-text);
  background-color: var(--bg-color-hint);
}

@media (max-width: 860px) {
  .site-search div {
    grid-template-columns: repeat(1, auto);
  }
}

/* Helper icons */

.fa-solid {
  display: inline-block;
}

.fa-spinner:before {
  content: '\f110';
  color: var(--blue-500);
  font-family: fa-solid;
}

.fa-spinner.blue {
  color: var(--blue-500);
}

.fa-circle-check:before {
  content: '\f058';
  color: var(--green-400);
  font-family: fa-solid;
}

.fa-heart.green {
  color: var(--green-400);
}

.fa-circle-xmark:before {
  content: '\f057';
  color: var(--red-500);
  font-family: fa-solid;
}

.fa-heart-crack.red {
  color: var(--red-500);
}

.fa-clock.orange {
  color: var(--orange-400);
}

.fa-clock:before {
  content: '\f017';
  color: var(--orange-400);
  font-family: fa-solid;
}

.fa-share-nodes:before {
  content: '\f1e0';
  /* Share Nodes */
  font-family: fa-solid;
  margin-inline-end: 0.3em;
}

.fa-search:before {
  content: '\f002';
  /* Magnifying Glass */
  font-family: fa-solid;
}

.fa-brands {
  overflow: hidden;
  display: block;
}

.fa-github:before {
  content: '\f09b';
  /* GitHub */
  font-family: fa-brands;
  padding-inline-end: 1em;
}

.fa-octopus:before {
  content: '\e082';
  /* Octopus */
  font-family: fa-brands;
  padding-inline-end: 1em;
}

.fa-heart.green,
.fa-check.green,
.fa-plus-square.green {
  color: var(--green-500);
}

.fa-circle-notch.blue,
.fa-hourglass.blue,
.fa-arrows-rotate.blue {
  color: var(--blue-500);
}

.fa-circle-exclamation.red,
.fa-heart-crack.red,
.fa-minus-square.red {
  color: var(--red-500);
}

.fa-question.grey,
.fa-ghost.grey,
.fa-pause.grey,
.fa-equals.grey {
  color: var(--grey-500);
}

.fa-arrow-up.orange {
  color: var(--orange-500);
}

.i-right:after {
  /* fa-arrow-right */
  content: '\f061';
  font-family: fa-solid;
}

.copy-container {
  max-height: 0px;
  margin: 0;
  width: 100%;
  text-align: end;
  z-index: 1;
  position: relative;
}

.copy-button {
  stroke: var(--icon-stroke);
  fill: var(--icon-fill);
  background-color: transparent;
  cursor: pointer;
}

/* Custom Divisions */

.simple-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--grid-gap);
}

.simple-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: var(--grid-gap);
}

.simple-grid > * > * {
  width: 100%;
}

@media (max-width: 860px) {
  .simple-grid,
  .simple-grid-3 {
    display: block;
  }

  .simple-grid > *,
  .simple-grid-3 > * {
    margin-block-end: var(--block-gap);
  }
}

/* Buttons */

a.button {
  text-decoration: none;
  display: flex;
  padding: 0.75rem 1.875rem;
  justify-content: center;
  align-items: center;
  font-family: var(--fontFamilySystem-ui);
  font-size: var(--fontSizeBase);
  font-weight: var(--fontWeight700);
  line-height: 1.38rem;
  border-radius: 0.5rem;
  border-width: 0.0625rem;
  color: var(--button-primary-text);
  background: var(--button-primary);
  max-width: fit-content;
  transition-duration: 250ms;
  transition-property: background, border-color, box-shadow, color;
  transition-timing-function: ease-in-out;
}

a.button,
a.button.button--primary {
  color: var(--button-primary-text);
  background: var(--button-primary);
  border-color: var(--button-primary);
}

a.button:focus,
a.button.button--primary:focus {
  background: var(--button-primary-focus);
  border-color: var(--button-ring-color);
  outline: 0.1875rem solid var(--button-ring-color);
  box-shadow: none;
}

a.button:hover,
a.button.button--primary:hover {
  background: var(--button-primary-focus);
  border-color: var(--button-primary-focus);
}

a.button:active,
a.button.button--primary:active {
  background: var(--button-primary);
  border-color: var(--button-primary-focus);
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.35) inset;
}

.octo-header a.button {
  width: 120px;
}

/* Button component (namespaced `btn` as `.button` was already taken) */
.btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space0);
  min-width: var(--btn-min-size, 2.25rem);
  min-height: var(--btn-min-size, 2.25rem);
  padding: calc(var(--btn-padding-block, var(--space8)) - var(--borderWidth1))
    calc(var(--btn-padding-inline, var(--space6)) - var(--borderWidth1));
  border: var(--borderWidth1) solid var(--colorBorderPrimary);
  border-radius: var(--borderRadiusSmall);
  background: var(--colorBackgroundPrimaryDefault);
  color: var(--colorTextPrimary);
  font: var(--textBodyRegularMedium);
  max-width: fit-content;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-align: center;
}

.btn--medium {
  --btn-min-size: 2.25rem;
  --btn-padding-block: var(--space8);
  --btn-padding-inline: var(--space6);
}

.btn--small {
  --btn-min-size: 2rem;
  --btn-padding-block: var(--space6);
  --btn-padding-inline: var(--space6);
}

.btn--xsmall {
  --btn-min-size: 1.75rem;
  --btn-padding-block: var(--space4);
  --btn-padding-inline: var(--space4);
}

.btn__label {
  padding-inline: var(--space4);
}

/* Qualified with .btn to ensure greater specificity than fontawesome.css */
.btn .btn__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  font-size: var(--fontSizeBase);
  line-height: 1;
  color: var(--colorIconPrimary);
}

img.btn__icon {
  object-fit: contain;
}

/* Nudge the FontAwesome caret-down slightly so it looks right as part of a dropdown button */
.btn .btn__icon.fa-caret-down {
  transform: translateY(-0.0625rem);
}

/* Button states */
.btn:hover:not(:disabled) {
  background: var(--colorBackgroundPrimaryHover);
}

.btn:focus-visible {
  background: var(--colorBackgroundPrimaryHover);
  outline: var(--borderWidth2) solid var(--colorBorderSelected);
  outline-offset: var(--borderWidth1);
}

.btn:active:not(:disabled) {
  background: var(--colorBackgroundPrimaryPressed);
}

.btn:disabled {
  background: var(--colorButtonBackgroundDisabled);
  border-color: var(--colorButtonBorderDisabled);
  color: var(--colorButtonTextDisabled);
  cursor: not-allowed;
}

.btn:disabled .btn__icon {
  color: var(--colorButtonIconDisabled);
}

/* Buttons side by side e.g. a toolbar or the component showcase */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space8);
}

/* Stacked rows e.g. one row per size in the component showcase */
.btn-row + .btn-row {
  margin-block-start: var(--space8);
}
/* Button.astro component end */

.inline-note {
  position: absolute;
  padding-inline-start: 0.5rem;
}

/* Detail tabs */

.tab-list {
  padding-inline: 10px;
  margin-block-end: 0;
}

.tab-list button,
.tab-list button:focus,
.tab-list button:hover {
  display: inline-block;
  position: relative;
  z-index: 2;
  top: 2px;
  margin: 0;
  margin-block-start: 4px;
  border: 2px solid var(--border-color-tab);
  border-radius: var(--standard-radius) var(--standard-radius) 0 0;
  background: var(--bg-color-tab);
  outline: none;
  font-size: var(--fontSizeMedium);
  font-weight: var(--fontWeight700);
  text-align: start;
  cursor: pointer;
  color: var(--color-text);
}

.tab-list button[aria-selected='true'] {
  margin-block-start: 0;
  border-width: 2px;
  border-top-width: 6px;
  border-top-color: var(--border-color-tab-active);
  border-inline-color: var(--border-color-tab-active);
  border-bottom-color: var(--color-base-primary);
  background-color: var(--color-base-primary);
}

.tab-list button[aria-selected='false'] {
  top: 0px;
}

.tab-list button span.focus {
  display: inline-block;
  margin: 2px;
  padding: 4px 6px;
  outline: none;
}

[role='tabpanel'] {
  position: relative;
  padding: 1rem;
  border: 2px solid var(--border-color-tab-active);
  border-radius: var(--standard-radius);
  background: var(--color-base-primary);
  overflow: auto;
}

[role='tabpanel'].is-hidden {
  display: none;
}

[role='tabpanel'] p {
  margin: 0;
}

/* Animation */

@media (prefers-reduced-motion: no-preference) {
  body,
  html {
    scroll-behavior: smooth;
  }
}