/**
 * [d4_build_variants] — page-level build variant switcher.
 * Author: vlad1116
 * Same palette as planner-tabs.css's variant row.
 */

.d4bv {
  --d4bv-gold: #e8b971;
  margin: 16px 0;
}

.d4bv[hidden] {
  display: none;
}

/* One row, always: the buttons scroll sideways inside .d4bv__buttons instead
   of wrapping (build-variants.js scrolls the active one into view). */
.d4bv__bar {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: nowrap;
  padding: 8px 12px;
  background: #0f0e11;
  border: 1px solid #2f2e34;
  border-radius: 4px;
}

.d4bv__label {
  flex: none;
  white-space: nowrap;
  color: #8f8b97;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.d4bv__buttons {
  position: relative; /* offsetParent for the active-button centering */
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* room for the focus outline, which overflow would otherwise clip */
  padding: 4px;
  margin: -4px;
}

.d4bv__buttons::-webkit-scrollbar {
  display: none;
}

/* Fade at the edge(s) that still have buttons behind them (data-d4bv-edge is
   set by build-variants.js: "start", "end" or "both"). */
.d4bv__buttons[data-d4bv-edge="end"] {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
}

.d4bv__buttons[data-d4bv-edge="start"] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px);
  mask-image: linear-gradient(90deg, transparent, #000 22px);
}

.d4bv__buttons[data-d4bv-edge="both"] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
}

.d4bv__btn {
  flex: none;
  white-space: nowrap;
  border: none;
  background: #1a1815;
  color: #b3afba;
  padding: 7px 16px;
  border-radius: 3px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}

.d4bv__btn:hover {
  color: #fff;
}

.d4bv__btn:focus-visible {
  outline: 2px solid var(--d4bv-gold);
  outline-offset: 2px;
}

.d4bv__btn.is-active {
  color: #fff;
  background: linear-gradient(180deg, #2b1f13, #1a130a);
  box-shadow: 0 0 0 1px var(--d4bv-gold) inset;
}

/* Fixed copy shown once the in-article bar has scrolled away (see
   build-variants.js — `top` is set there, below any sticky site header). */
.d4bv--float {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 9990;
  width: min(100% - 24px, 900px);
  margin: 8px 0 0;
  transform: translate(-50%, -12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s, top .15s ease;
}

.d4bv--float.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.d4bv--float .d4bv__bar {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}

@media (max-width: 600px) {
  .d4bv__label {
    display: none;
  }

  .d4bv__bar {
    padding: 6px 8px;
  }

  .d4bv__btn {
    padding: 6px 11px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .d4bv__btn,
  .d4bv--float {
    transition: none;
  }
}

/* theme-guard:start — generated by tools/theme-guard.mjs, do not edit */
html body .d4bv__btn:where(:hover, :focus) { border: none; background: #1a1815; color: #b3afba; }
/* theme-guard:end */