/* The docs site: the theme mapped onto brand.css, and the pieces of the site sundgren adds. */

/* {details} directive (a collapsible block). */
.sg-details {
  margin: 1rem 0;
  border: 1px solid var(--sy-c-border);
  border-radius: 6px;
}
.sg-details > summary {
  padding: 0.5rem 0.875rem;
  cursor: pointer;
  font-weight: 600;
}
.sg-details[open] > summary {
  border-bottom: 1px solid var(--sy-c-border);
}
.sg-details > :not(summary) {
  margin: 0.75rem 0.875rem;
}

/* Page: the compact layout's <main> lacks min-width: 0, so wide content would push the TOC
   off-screen. The article is wide enough for code; prose stays narrower. */
.sy-page > main {
  min-width: 0;
}
.sy-page article.yue {
  max-width: 60rem;
}
.sy-page article.yue > section p {
  max-width: 48rem;
}
.sy-page article.yue .admonition p {
  max-width: none;
}
.sy-page article.yue pre {
  font-size: 0.8125rem;
}
html.dark {
  color-scheme: dark;
}
html.dark pre {
  scrollbar-color: var(--gray-7) transparent;
}

/* The theme (Shibuya) in the brand: its colours and fonts from brand.css, so the site and the
   VS Code panels share one look. html.light / html.dark are the theme's own switch. */
html {
  --sy-f-text: var(--font-text);
  --sy-f-heading: var(--font-text);
  --sy-f-mono: var(--font-mono);
}
html.light,
html.dark {
  --sy-c-background: var(--bg);
  --sy-c-background-dropback: color-mix(in srgb, var(--bg) 80%, transparent);
  --sy-c-text: var(--text);
  --sy-c-heading: var(--text);
  --sy-c-bold: var(--text);
  --sy-c-light: var(--muted);
  --sy-c-border: var(--border);
  --sy-c-divider: var(--border);
  --sy-c-surface: var(--hover);
  --sy-c-link: var(--accent-text);
  --sy-c-link-hover: var(--accent);
  --accent-9: var(--accent);
  --accent-a9: var(--accent);
  --accent-a10: var(--accent);
  --accent-a11: var(--accent-text);
  --accent-a3: var(--selected);
  --accent-contrast: #fff;
}
.yue a:hover {
  text-decoration-color: var(--rose);
}

/* Hero logo under the page title; the h1 stays for the document title but is hidden visually. */
.sg-hero {
  margin: 0 0 1.75rem;
}
.sg-hero img {
  width: min(420px, 100%);
  height: auto;
}
.yue img.sg-hero-dark,
html.dark .yue img.sg-hero-light {
  display: none;
}
html.dark .yue img.sg-hero-dark {
  display: inline;
}

/* Note callouts use the brand accent instead of the theme's blue. */
.yue .admonition.note {
  --color-1: var(--color-surface-accent);
  --color-2: var(--accent-a3);
  --color-3: var(--accent-9);
  --color-4: var(--accent-a11);
}
.yue h1:has(+ .sg-hero) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Build markers (docs/_ext/sundgren_banner.py). A preview's banner uses the theme's own
   announcement bar, in the theme's red; a release is a small label left of the search box. */
.announcement:has(.sg-preview) {
  --sy-c-banner-bg: var(--red-9);
  --sy-c-banner: var(--red-contrast);
}
/* The preview of main: the theme's accent, so it doesn't read as a pull request's. */
.announcement:has(.sg-main) {
  --sy-c-banner-bg: var(--accent-9);
  --sy-c-banner: var(--accent-contrast);
}
.sg-release {
  margin-right: 0.75rem;
  font-size: 0.8125rem;
  color: var(--sy-c-light);
  white-space: nowrap;
}
.sg-release a {
  margin-left: 0.25rem;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--sy-c-border);
  text-underline-offset: 2px;
}
.sg-release a:hover {
  color: var(--sy-c-link-hover);
}

/* The history panel demo (history.md). */
.sg-demo {
  display: block;
  width: 100%;
  height: 560px;
  margin: 1rem 0 1.5rem;
  border: 1px solid var(--sy-c-border);
  border-radius: 6px;
}

/* Development menu and page (_static/environments.js): the environment you are in. */
.sg-env-current {
  font-weight: 700;
  color: var(--sy-c-link);
}

/* The footer at the bottom of the window on short pages, whatever the banner and footer heights:
   the page is a column at least as tall as the window, and the footer takes the space left. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > * {
  flex-shrink: 0;
}
body > .sy-container {
  width: 100%;
}
.sy-foot {
  margin-top: auto;
}