/* Brand accents only — Furo sets these on body, so :root would lose. */
body {
  --color-brand-primary: #007efc;
  --color-brand-content: #0066cc;
}

body[data-theme="dark"] {
  --color-brand-primary: #4da3ff;
  --color-brand-content: #7ab8ff;
}

@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) {
    --color-brand-primary: #4da3ff;
    --color-brand-content: #7ab8ff;
  }
}

/* Read the Docs Link Previews do not inherit Furo's dark background. Match
   the popup and arrow to the active Furo theme so embedded text keeps its
   intended contrast. */
body[data-theme="dark"] .tooltip .tooltip-content {
  border-color: var(--color-background-border);
  background-color: var(--color-background-primary);
  color: var(--color-foreground-primary);
}

body[data-theme="dark"] .tooltip .arrow {
  background: var(--color-background-primary);
}

@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) .tooltip .tooltip-content {
    border-color: var(--color-background-border);
    background-color: var(--color-background-primary);
    color: var(--color-foreground-primary);
  }

  body:not([data-theme="light"]) .tooltip .arrow {
    background: var(--color-background-primary);
  }
}

/* Installation-first workflow stepper. The ordered-list source remains
   readable when HTML styling is unavailable, including PDF output. */
.getting-started-flow {
  margin: 2.25rem 0 1rem;
}

.getting-started-flow > ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: getting-started-step;
}

.getting-started-flow > ol > li {
  position: relative;
  margin: 0 0 3rem;
  padding-left: 4rem;
  counter-increment: getting-started-step;
}

.getting-started-flow > ol > li::before {
  position: absolute;
  z-index: 1;
  top: -0.25rem;
  left: 0;
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  border-radius: 50%;
  background: var(--color-brand-primary);
  color: var(--color-background-primary);
  content: counter(getting-started-step);
  font-size: 1.1rem;
  font-weight: 800;
}

.getting-started-flow > ol > li:not(:last-child)::after {
  position: absolute;
  top: 2.45rem;
  bottom: -3rem;
  left: 1.3rem;
  width: 2px;
  background: var(--color-background-border);
  content: "";
}

.getting-started-flow > ol > li > p:first-child {
  margin: 0 0 0.55rem;
  color: var(--color-foreground-primary);
  font-size: 1.55rem;
  line-height: 1.25;
}

.getting-started-flow > ol > li > ul {
  display: grid;
  gap: 0.75rem;
  margin: 1.15rem 0 0;
  padding: 0;
  list-style: none;
}

.getting-started-flow > ol > li > ul > li {
  position: relative;
  margin: 0;
  padding: 0.95rem 3rem 0.95rem 1rem;
  border: 1px solid var(--color-background-border);
  border-radius: 0.6rem;
  background: var(--color-background-secondary);
}

.getting-started-flow > ol > li > ul > li::after {
  position: absolute;
  top: 50%;
  right: 1rem;
  color: var(--color-brand-content);
  content: "→";
  font-size: 1.25rem;
  transform: translateY(-50%);
}

.getting-started-flow > ol > li > ul > li:hover {
  border-color: var(--color-brand-primary);
}

.getting-started-flow > ol > li > ul > li a {
  font-weight: 700;
}

@media (max-width: 46rem) {
  .getting-started-flow > ol > li {
    padding-left: 3.35rem;
  }

  .getting-started-flow > ol > li::before {
    width: 2.35rem;
    height: 2.35rem;
  }

  .getting-started-flow > ol > li:not(:last-child)::after {
    top: 2.1rem;
    left: 1.12rem;
  }
}