/*!
 * site-interactions.css (v2)
 * Companion stylesheet for site-interactions.js.
 *
 * IMPORTANT: the site's own stylesheets (9ac6b68cce1f8c2a.css,
 * a649b4ef85621034.css, 064dc3d9a8c08076.css — already linked in
 * <head>) most likely already define `.back-top`, `.aside.is-pinned`,
 * `.tone-ice`, `.section-index`, and all `.image-preview-*` styling,
 * since those are plain CSS files, not broken React chunks. Everything
 * below is a *fallback* in case any of those rules are missing —
 * remove a block here if you find it's fighting with an existing rule.
 */

/* Read progress bar fill (safe to keep even if already styled) */
.read-progress span {
  display: block;
  height: 100%;
}

/* Back-to-top button: real code toggles a "show" class, not "is-visible" */
.back-top {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.back-top.show {
  opacity: 1;
  visibility: visible;
}

/* FAQ accordion arrow rotation (harmless if the theme already does this) */
.fq .arr {
  display: inline-block;
  transition: transform 0.2s ease;
}
.fq.open .arr {
  transform: rotate(180deg);
}

/* Component slider */
.component-viewport {
  overflow: hidden;
}
.component-track {
  display: flex;
  transition: transform 0.35s ease;
}
.component-slide {
  flex: 0 0 100%;
  min-width: 100%;
}
.slider-dot.active {
  background: var(--navy, #36356c);
}
.slider-button {
  cursor: pointer;
}

/* Design control panel tabs */
.design-tab {
  cursor: pointer;
}
.design-tab.active {
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Sticky sidebar fallback                                            */
/* ------------------------------------------------------------------ */
/*
 * site-interactions.js toggles the "is-pinned" class and sets
 * top/left/width/max-height inline. The actual `position: fixed`
 * declaration is expected to already exist in the site's own CSS.
 * This is only a fallback in case it doesn't.
 */
.aside.is-pinned {
  position: fixed;
  overflow-y: auto;
  z-index: 40;
}