/* Make Material's dark (slate) scheme match GitHub's dark theme:
   near-black canvas, high-contrast text, GitHub-blue links. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:        #0d1117;  /* canvas */
  --md-default-bg-color--light: #161b22;
  --md-default-fg-color:        #e6edf3;  /* high-contrast body text */
  --md-default-fg-color--light: #c9d1d9;
  --md-default-fg-color--lighter: #8b949e;
  --md-default-fg-color--lightest: #30363d;
  --md-typeset-color:   #e6edf3;
  --md-typeset-a-color: #4493f8;          /* GitHub link blue */
  --md-accent-fg-color: #58a6ff;
  --md-code-bg-color:   #161b22;
  --md-code-fg-color:   #e6edf3;
}

/* Header/footer bar: GitHub's dark surface instead of indigo, both schemes. */
.md-header, .md-tabs { background-color: #161b22; }
.md-header { box-shadow: 0 0 0 1px #30363d; }

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3 { color: #e6edf3; }

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th { background-color: #161b22; }
[data-md-color-scheme="slate"] .md-typeset hr { border-color: #30363d; }

/* Homepage hero search: a prominent box that opens Material's real search
   (build-site.sh injects .hero-search into the homepage only). */
.md-typeset .hero-search-wrap { margin: 1.5rem 0 2.2rem; }
.md-typeset .hero-search {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; max-width: 640px; margin: 0 auto;
  padding: .75rem 1rem; font-size: .95rem;
  color: var(--md-default-fg-color--light);
  background: var(--md-default-bg-color--light, #161b22);
  border: 1px solid var(--md-default-fg-color--lightest, #30363d);
  border-radius: 10px; cursor: text;
  transition: border-color .15s, box-shadow .15s;
}
.md-typeset .hero-search:hover,
.md-typeset .hero-search:focus {
  border-color: var(--md-accent-fg-color, #58a6ff);
  box-shadow: 0 0 0 3px rgba(88, 166, 255, .15); outline: none;
}
.md-typeset .hero-search__icon { display: inline-flex; flex: 0 0 auto; opacity: .8; }
.md-typeset .hero-search__icon svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.md-typeset .hero-search__label { flex: 1 1 auto; text-align: left; }
.md-typeset .hero-search__kbd {
  flex: 0 0 auto; font-size: .7rem; line-height: 1; padding: .2rem .45rem;
  border: 1px solid var(--md-default-fg-color--lightest, #30363d); border-radius: 5px;
  color: var(--md-default-fg-color--lighter);
}

/* Collapsible topic groups on the homepage (build-site.sh wraps each topic).
   Override Material's default <details> admonition look (blue tint, note-pencil
   icon, .64rem font, negative summary margin) into a clean neutral collapsible.
   Keep Material's right-side chevron (summary::after), drop its pencil. */
.md-typeset details.topic-group {
  font-size: .8rem;                 /* undo Material's .64rem shrink */
  background: transparent;
  border: 1px solid var(--md-default-fg-color--lightest, #30363d);
  border-radius: 8px; margin: .5rem 0; padding: 0;
}
.md-typeset details.topic-group > summary {
  background: var(--md-default-bg-color--light, #161b22);
  margin: 0;                        /* undo Material's 0 -.6rem overflow */
  padding: .7rem 2.2rem .7rem 1rem; /* right room for the chevron */
  border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 1.05rem;
  display: flex; align-items: center; gap: .5rem;
}
.md-typeset details.topic-group[open] > summary {
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid var(--md-default-fg-color--lightest, #30363d);
}
.md-typeset details.topic-group > summary::before { display: none; }   /* kill note pencil */
.md-typeset details.topic-group > summary::after {                     /* neutral chevron */
  background-color: var(--md-default-fg-color--lighter, #8b949e);
}
.md-typeset details.topic-group .topic-count {
  margin-left: auto; font-weight: 400; font-size: .8rem;
  color: var(--md-default-fg-color--lighter, #8b949e);
}
.md-typeset details.topic-group > *:not(summary) { padding: 0 1rem; }
.md-typeset details.topic-group > *:not(summary):first-of-type { padding-top: .7rem; }
.md-typeset details.topic-group > *:not(summary):last-child { padding-bottom: .5rem; }

/* Responsive YouTube embed (build-site.sh injects .video-embed on trial pages). */
.md-typeset .video-embed {
  width: 100%;
  max-width: 1080px;   /* desktop ceiling; mobile fills 100% and ignores this */
  aspect-ratio: 16 / 9;
  margin: 1rem 0;
}
.md-typeset .video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 6px;
}