/* =========================================================
   Light mode
   ========================================================= */

/* Light mode */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #111827;
  --md-primary-fg-color--light: #1f2937;
  --md-primary-fg-color--dark: #000000;

  --md-accent-fg-color: #ED1C24;
  --md-typeset-a-color: #ED1C24;

  /* Platform-tab panel */
  --y8-panel-border: #e2e5ea;
  --y8-panel-label-bg: #f6f7f9;
}


/* =========================================================
   Dark mode
   ========================================================= */

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #111827;
  --md-primary-fg-color--light: #1f2937;
  --md-primary-fg-color--dark: #0b0f19;

  --md-accent-fg-color: #60a5fa;

  /* Main text */
  --md-default-fg-color: #e5e7eb;
  --md-default-fg-color--light: #d1d5db;
  --md-default-fg-color--lighter: #9ca3af;
  --md-default-fg-color--lightest: #374151;

  /* Background */
  --md-default-bg-color: #111827;
  --md-default-bg-color--light: #1f2937;
  --md-default-bg-color--lighter: #374151;

  /* Links */
  --md-typeset-a-color: #60a5fa;
  --md-typeset-color: #e5e7eb;

  /* Code */
  --md-code-bg-color: #1f2937;
  --md-code-fg-color: #e5e7eb;

  /* Platform-tab panel */
  --y8-panel-border: #2b3444;
  --y8-panel-label-bg: #161f2e;
}

/* Wider documentation area */
.md-grid {
  max-width: 1440px;
}

/* Links */
.md-typeset a {
  color: var(--md-typeset-a-color);
  font-weight: 500;
}

/* Light mode - stronger Y8 red on hover */
[data-md-color-scheme="default"] .md-typeset a:hover {
  color: #c91820;
}

/* Dark mode - stronger blue on hover */
[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: #3b82f6;
}

/* Code blocks */
.md-typeset pre {
  border-radius: 10px;
}

/* Tables */
.md-typeset table:not([class]) {
  border-radius: 8px;
  overflow: hidden;
}

/* Previous / Next navigation */
.md-footer {
  background: transparent;
  color: var(--md-default-fg-color);
  margin-top: 0.5rem;
}

.md-footer-meta {
  background: transparent;
}

.md-footer__inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 0 1.5rem;
}

.md-footer__link {
  position: relative;
  flex: 1;
  min-height: 58px;
  padding: 0.65rem 1.5rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 4px;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.md-footer__link:hover {
  background: var(--md-default-bg-color);
  border-color: var(--md-default-fg-color--lighter);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Hide Material's default arrow button */
.md-footer__button {
  display: none;
}

/* Small Previous arrow */
.md-footer__link--prev::before {
  content: "‹";
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--md-default-fg-color--light);
}

/* Small Next arrow */
.md-footer__link--next::after {
  content: "›";
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--md-default-fg-color--light);
}

/* Navigation labels */
.md-footer__direction {
  font-size: 0.65rem;
  line-height: 1.2;
  color: var(--md-default-fg-color--light);
}

/* Navigation titles */
.md-footer__title {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.85rem;
  line-height: 1.25;
}

.md-footer__title__link {
  font-size: 0.85rem;
}

/* Alignment */
.md-footer__link--prev {
  text-align: left;
}

.md-footer__link--next {
  text-align: right;
}


/* =========================================================
   Platform tabs

   Every code sample on this site is tabbed by platform, and the
   default styling gives the tab body no boundary — the reader
   cannot see where the selected platform's content stops and the
   page resumes. Draw the set as one panel: labels on top, content
   enclosed beneath them.
   ========================================================= */

.md-typeset .tabbed-set {
  border: 1px solid var(--y8-panel-border);
  border-radius: 8px;
  margin: 1.5em 0;
  overflow: hidden;
}

/* The label strip reads as the panel's header. Material already draws
   the baseline under it with an inset shadow, and positions the active
   indicator against that, so tint the strip and leave the line alone. */
.md-typeset .tabbed-labels {
  background: var(--y8-panel-label-bg);
  padding: 0 0.4rem;
}

.md-typeset .tabbed-content {
  padding: 0.9rem 1rem;
}

/* Collapse the leading/trailing margins the first and last child
   bring with them, so the padding above is what actually shows. */
.md-typeset .tabbed-block > :first-child {
  margin-top: 0;
}

.md-typeset .tabbed-block > :last-child {
  margin-bottom: 0;
}

/* A nested set (tabs inside an admonition) sits flush already —
   drop the outer margin so it does not double up. */
.md-typeset .tabbed-block .tabbed-set {
  margin: 0.8em 0;
}


/* =========================================================
   404
   ========================================================= */

.y8-404 {
  max-width: 34rem;
  margin: 0 auto;
  padding: 4rem 0.8rem 6rem;
  text-align: center;
}

.y8-404__code {
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--md-accent-fg-color);
}

.y8-404__title {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0.6rem 0 0;
}

.y8-404__lede {
  color: var(--md-default-fg-color--light);
  margin: 0.7rem 0 0;
}

.y8-404__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1.8rem;
}

.y8-404__links a {
  border: 1px solid var(--y8-panel-border);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
  background: var(--y8-panel-label-bg);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.y8-404__links a:hover {
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-fg-color);
}

.y8-404__hint {
  margin-top: 2rem;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--lighter);
}