/* SPDX-License-Identifier: Apache-2.0 */
/* Midnight RGB565 colors from components/ui/ui.cpp, expanded to sRGB. */
:root {
  --md-text-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --md-code-font: ui-monospace, "SFMono-Regular", Consolas, monospace;
}
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #080c19;
  --md-default-fg-color: #f7f7ff;
  --md-default-fg-color--light: #a59ebd;
  --md-default-fg-color--lighter: #726d8e;
  --md-default-fg-color--lightest: #31245a;
  --md-primary-fg-color: #191831;
  --md-primary-fg-color--light: #31245a;
  --md-primary-fg-color--dark: #080c19;
  --md-primary-bg-color: #f7f7ff;
  --md-accent-fg-color: #ff75b5;
  --md-accent-fg-color--transparent: #ff75b51a;
  --md-typeset-a-color: #3ae3e6;
  --md-code-bg-color: #191831;
  --md-code-fg-color: #f7f7ff;
  --md-footer-bg-color: #080c19;
  --md-footer-bg-color--dark: #060912;
}
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #191831;
  --md-primary-fg-color--light: #31245a;
  --md-primary-fg-color--dark: #080c19;
  --md-accent-fg-color: #a52261;
  --md-typeset-a-color: #00757b;
  --md-code-bg-color: #f0eff7;
}
.md-header { border-bottom: 1px solid #3ae3e633; }
.md-header__button.md-logo img { height: 2rem; width: 2rem; image-rendering: pixelated; }
.md-typeset h1, .md-typeset h2 { font-weight: 700; letter-spacing: -.025em; }
.md-typeset h1 { color: var(--md-default-fg-color); }
.md-typeset { line-height: 1.7; }
.md-typeset__table { display: block; max-width: 100%; overflow-x: auto; }
.md-typeset table:not([class]) { font-size: .72rem; }
.md-typeset img { border-radius: .3rem; }
.md-typeset .md-button { border-radius: .3rem; margin: .35rem .4rem .35rem 0; }
.md-typeset .md-button--primary { background: #3ae3e6; border-color: #3ae3e6; color: #080c19; }
.md-typeset .md-button:hover { background: #ff75b5; border-color: #ff75b5; color: #080c19; }
.hound-hero {
  padding: 1.6rem 1.7rem .5rem;
  border: 1px solid #31245a;
  border-radius: .6rem;
  background: linear-gradient(#3ae3e608 1px, transparent 1px), linear-gradient(90deg, #3ae3e608 1px, transparent 1px), #191831;
  background-size: 28px 28px;
  color: #f7f7ff;
}
.hound-hero h2 { font-size: 2rem; margin: .6rem 0; color: #f7f7ff; }
.hound-hero a:not(.md-button) { color: #3ae3e6; }
.hound-hero .md-button:not(.md-button--primary) { color: #3ae3e6; border-color: #3ae3e6; }
.hound-hero .md-button:hover { color: #080c19; }
.hound-kicker { color: #ff75b5; font: .55rem/1.6 var(--md-code-font); letter-spacing: .12em; }
.hound-pack { display: block; width: 100%; max-width: 660px; margin: 1rem auto 0; image-rendering: pixelated; }
.hound-lab-frame { display: block; width: 100%; height: 780px; border: 1px solid #31245a; border-radius: .6rem; background: #080c19; }
.md-typeset .grid.cards > ul > li { border-radius: .4rem; }
.md-typeset .grid.cards > ul > li:hover { border-color: var(--md-typeset-a-color); }
@media (max-width: 600px) {
  .hound-hero { padding: 1rem; }
  .hound-hero h2 { font-size: 1.6rem; }
}

/* The installer stays in flow when enabled so recording/scroll position is stable. */
.hound-installer {
  border: 1px solid #726d8e;
  border-radius: .6rem;
  padding: 1.2rem;
  margin: 1.5rem 0 1rem;
  background: var(--md-code-bg-color);
}
.hound-install-confirm { display: flex; gap: .7rem; align-items: flex-start; margin: 1rem 0; }
.hound-install-confirm input { flex: none; margin-top: .35rem; accent-color: #3ae3e6; width: 1rem; height: 1rem; }
.hound-installer [hidden] { display: none !important; }
.hound-installer button { font: inherit; cursor: pointer; }
.hound-installer button:disabled { opacity: .45; cursor: not-allowed; }
.hound-installer button:focus-visible, .hound-install-confirm input:focus-visible { outline: 3px solid #ff75b5; outline-offset: 4px; }
#hound-install-status { min-height: 3.4em; color: var(--md-default-fg-color--light); }
[data-md-color-scheme="slate"] ewt-install-dialog {
  --text-color: #f7f7ff;
  --md-sys-color-primary: #3ae3e6;
  --md-sys-color-on-primary: #080c19;
  --md-sys-color-on-surface: #f7f7ff;
  --md-sys-color-on-surface-variant: #a59ebd;
  --md-sys-color-surface: #191831;
  --md-sys-color-surface-container: #191831;
  --md-sys-color-surface-container-high: #191831;
  --md-sys-color-surface-container-highest: #31245a;
  --md-sys-color-secondary-container: #31245a;
}