/* Wide layout: widen the content grid (Material default is 61rem).
   Matches AWS Powertools docs, which use a viewport-relative cap.
   Higher vw -> sidebars sit closer to the viewport edges and the centered
   content column gets the remaining width. */
.md-grid {
  max-width: 96vw;
}

/* Hide site name in sidebar navigation */
.md-sidebar--primary .md-sidebar__inner .md-nav--primary > .md-nav__title {
  display: none;
}

/* Custom primary color matching LangForge UI (#8c57ff) */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #8c57ff;
  --md-primary-fg-color--light: #a47dfd;
  --md-primary-fg-color--dark: #7341e6;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #8c57ff;
  --md-primary-fg-color--light: #a47dfd;
  --md-primary-fg-color--dark: #7341e6;
}

/* Navigation sidebar separator color */
.md-sidebar--primary {
  border-right: 1px solid rgba(140, 87, 255, 0.12);
}

/* Navigation sidebar scrollbar - hover color matches primary theme */
.md-sidebar__scrollwrap:hover {
  scrollbar-color: #8c57ff transparent;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
  background-color: #8c57ff !important;
}

/* Cap workshop/tutorial screenshots: high-res (2x) captures (up to ~2600px)
   otherwise dominate the wide grid. */
img[src*="/images/workshop/"],
img[src*="/images/tutorials/"] {
  max-width: min(100%, 960px);
  height: auto;
}

/* A handful of zh-TW workshop captures were taken at 1x (~half the DPI of the
   rest), so they render with oversized text. Display each at ~0.42x its pixel
   width to match the 2x screenshots. Tune any single value independently.
   Scoped to /workshop/ so the English (tutorials/) mirror is unaffected. */
img[src*="/images/workshop/"][src$="02_02_loader-add-source.png"]         { max-width: 500px; }
img[src*="/images/workshop/"][src$="01_04_llm-action-configure-prompt.png"] { max-width: 500px; }
img[src*="/images/workshop/"][src$="01_05_update-and-run-application.png"] { max-width: 240px; }
img[src*="/images/workshop/"][src$="02_02_configure-retriever-action.png"] { max-width: 340px; }
img[src*="/images/workshop/"][src$="02_03_test-retriever-action.png"]      { max-width: 340px; }
img[src*="/images/workshop/"][src$="02_05_retriever-action-output.png"]    { max-width: 340px; }
img[src*="/images/workshop/"][src$="02_06_llm-action-add-reference-variable.png"] { max-width: 500px; }
img[src*="/images/workshop/"][src$="02_07_llm-action-update-template.png"] { max-width: 510px; }
img[src*="/images/workshop/"][src$="02_05_chat-input-question.png"]        { max-width: 440px; }
img[src*="/images/workshop/"][src$="02_06_agent-response.png"]             { max-width: 430px; }
img[src*="/images/workshop/"][src$="02_07_thinking-process.png"]           { max-width: 430px; }
img[src*="/images/workshop/"][src$="01_02_add-tool-agent.png"]             { max-width: 520px; }
img[src*="/images/workshop/"][src$="01_03_add-input-structure.png"]        { max-width: 500px; }
img[src*="/images/workshop/"][src$="02_04_lfe-login.png"]                  { max-width: 430px; }

/* Polished frame for action form screenshots */
img[src*="/images/actions/"],
img[src*="../images/actions/"] {
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--md-default-fg-color) 16%, transparent);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 10px 28px rgba(15, 23, 42, 0.12);
  background: color-mix(in oklab, var(--md-default-bg-color) 95%, #fff);
}