/*
 * Present documentation screenshots inside a consistent browser window.
 * Retype emits standalone images as either <figure> or legacy <p> blocks,
 * so both structures are covered without changing every Markdown file.
 */

html {
  --docs-browser-frame-border: #d7dce3;
  --docs-browser-frame-chrome: #f5f6f8;
  --docs-browser-frame-shadow: 0 18px 48px rgba(15, 23, 42, 0.12),
    0 3px 12px rgba(15, 23, 42, 0.08);
}

html.dark {
  --docs-browser-frame-border: #334155;
  --docs-browser-frame-chrome: #1e293b;
  --docs-browser-frame-shadow: 0 20px 52px rgba(0, 0, 0, 0.4),
    0 3px 14px rgba(0, 0, 0, 0.28);
}

:where(figure, p):has(> img[src*="static/images/"]) {
  position: relative;
  isolation: isolate;
  display: block !important;
  max-width: 100%;
  margin: 1.75rem auto 2rem;
  padding: 36px 0 0;
  overflow: hidden;
  line-height: 0;
  background: var(--docs-browser-frame-chrome);
  border: 1px solid var(--docs-browser-frame-border);
  border-radius: 14px;
  box-shadow: var(--docs-browser-frame-shadow);
}

/* macOS-style window controls. */
:where(figure, p):has(> img[src*="static/images/"])::before {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 16px;
  width: 9px;
  height: 9px;
  content: "";
  background: #ff5f57;
  border-radius: 999px;
  box-shadow: 15px 0 0 #febc2e, 30px 0 0 #28c840;
}

:where(figure, p):has(> img[src*="static/images/"]) > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  background: #ffffff;
  border: 0 !important;
  border-top: 1px solid var(--docs-browser-frame-border) !important;
  border-radius: 0 !important;
}

/* Captions are redundant with the surrounding guide text. */
:where(figure, p):has(> img[src*="static/images/"]) > :where(figcaption, em) {
  display: none;
}

:where(figure, p):has(> img[src*="static/images/"]) > br {
  display: none;
}

/*
 * Older documentation assets already include window chrome in the image.
 * Reset the generated frame for those assets so the controls are not doubled.
 */
:where(figure, p):has(
    > img:is(
        [src*="/framework-images/"],
        [src*="/example-walkthrough/wizcreateenvironment.png"],
        [src*="/example-walkthrough/wizcreateorg.png"],
        [src*="/example-walkthrough/wizcreatestack.png"],
        [src*="/example-walkthrough/wizgitconnect.png"],
        [src*="/example-walkthrough/wizprojectcreate.png"],
        [src*="/access/addmember.png"],
        [src*="/access/configurepermissions.png"],
        [src*="/access/usergroupmenu.png"],
        [src*="/configure/configdatabase.png"],
        [src*="/configure/createconfig.png"],
        [src*="/copilot/aws-auth.png"],
        [src*="/deploy/createrelease.png"]
      )
  ) {
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

:where(figure, p):has(
    > img:is(
        [src*="/framework-images/"],
        [src*="/example-walkthrough/wizcreateenvironment.png"],
        [src*="/example-walkthrough/wizcreateorg.png"],
        [src*="/example-walkthrough/wizcreatestack.png"],
        [src*="/example-walkthrough/wizgitconnect.png"],
        [src*="/example-walkthrough/wizprojectcreate.png"],
        [src*="/access/addmember.png"],
        [src*="/access/configurepermissions.png"],
        [src*="/access/usergroupmenu.png"],
        [src*="/configure/configdatabase.png"],
        [src*="/configure/createconfig.png"],
        [src*="/copilot/aws-auth.png"],
        [src*="/deploy/createrelease.png"]
      )
  )::before {
  display: none;
}

:where(figure, p):has(
    > img:is(
        [src*="/framework-images/"],
        [src*="/example-walkthrough/wizcreateenvironment.png"],
        [src*="/example-walkthrough/wizcreateorg.png"],
        [src*="/example-walkthrough/wizcreatestack.png"],
        [src*="/example-walkthrough/wizgitconnect.png"],
        [src*="/example-walkthrough/wizprojectcreate.png"],
        [src*="/access/addmember.png"],
        [src*="/access/configurepermissions.png"],
        [src*="/access/usergroupmenu.png"],
        [src*="/configure/configdatabase.png"],
        [src*="/configure/createconfig.png"],
        [src*="/copilot/aws-auth.png"],
        [src*="/deploy/createrelease.png"]
      )
  ) > img {
  background: transparent;
  border: 0 !important;
  border-radius: 0 !important;
}

@media (max-width: 640px) {
  :where(figure, p):has(> img[src*="static/images/"]) {
    margin: 1.25rem auto 1.5rem;
    padding-top: 34px;
    border-radius: 10px;
  }

  :where(figure, p):has(> img[src*="static/images/"])::before {
    top: 13px;
    left: 13px;
    width: 8px;
    height: 8px;
    box-shadow: 13px 0 0 #febc2e, 26px 0 0 #28c840;
  }

}

@media (prefers-reduced-motion: reduce) {
  :where(figure, p):has(> img[src*="static/images/"]) {
    scroll-behavior: auto;
  }
}