/* fcc-version.css — Versioning system: footer link + walkthrough modal
 *
 * Depends on: fcc-tokens.css (--accent, --panel, --text, etc.)
 *             fcc-components.css (.fcc-dialog base)
 */

/* ── Footer version link ──────────────────────────────────────────────────── */
.fcc-version-link {
  color: var(--text-dim, #9aa3b2);
  font-size: var(--text-xs, 0.75rem);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity var(--duration-fast, 0.1s), color var(--duration-fast, 0.1s);
}
.fcc-version-link:hover {
  opacity: 1;
  color: var(--accent, #c7d2fe);
}

/* ── Walkthrough dialog ───────────────────────────────────────────────────── */
.fcc-version-dialog {
  border: 1px solid var(--border, #2a2a2a);
  border-radius: var(--radius-lg, 0.75rem);
  background: var(--panel, #111214);
  color: var(--text, #f5f6f7);
  padding: 0;
  max-width: min(32rem, calc(100vw - 2rem));
  width: 100%;
  box-shadow: var(--shadow-xl, 0 22px 58px rgba(0, 0, 0, 0.36));
  overflow: hidden;
}
.fcc-version-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Header bar (version badge + close) ───────────────────────────────────── */
.fcc-version-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4, 1rem) var(--sp-6, 1.5rem);
  border-bottom: 1px solid var(--line, #1e1e1e);
}
.fcc-version-dialog__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2, 0.5rem);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  color: var(--accent, #c7d2fe);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fcc-version-dialog__close {
  background: transparent;
  border: none;
  color: var(--text-dim, #9aa3b2);
  font-size: 1.25rem;
  cursor: pointer;
  padding: var(--sp-1, 0.25rem);
  line-height: 1;
  border-radius: var(--radius-sm, 0.25rem);
  transition: color var(--duration-fast, 0.1s);
}
.fcc-version-dialog__close:hover {
  color: var(--text, #f5f6f7);
}
.fcc-version-dialog__close:focus-visible {
  outline: 2px solid var(--accent, #c7d2fe);
  outline-offset: 2px;
}

/* ── Slide area ───────────────────────────────────────────────────────────── */
.fcc-version-dialog__slides {
  position: relative;
  min-height: 12rem;
}
.fcc-version-dialog__slide {
  padding: var(--sp-6, 1.5rem) var(--sp-6, 1.5rem) var(--sp-4, 1rem);
  display: none;
}
.fcc-version-dialog__slide.is-active {
  display: block;
  animation: fcc-version-fadein 0.25s ease;
}
@keyframes fcc-version-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fcc-version-dialog__slide-title {
  margin: 0 0 var(--sp-3, 0.75rem);
  font-size: var(--text-xl, 1.25rem);
  font-weight: 700;
  color: var(--text, #f5f6f7);
}
.fcc-version-dialog__slide-body {
  margin: 0 0 var(--sp-4, 1rem);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--leading-loose, 1.65);
  color: var(--text-dim, #9aa3b2);
}
.fcc-version-dialog__slide-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  color: var(--accent, #c7d2fe);
  text-decoration: none;
}
.fcc-version-dialog__slide-link:hover {
  text-decoration: underline;
}

/* ── Footer bar (dots + nav buttons) ──────────────────────────────────────── */
.fcc-version-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4, 1rem) var(--sp-6, 1.5rem);
  border-top: 1px solid var(--line, #1e1e1e);
}

/* Step dots */
.fcc-version-dialog__dots {
  display: flex;
  gap: var(--sp-2, 0.5rem);
}
.fcc-version-dialog__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--border, #2a2a2a);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--duration-fast, 0.1s), transform var(--duration-fast, 0.1s);
}
.fcc-version-dialog__dot:hover {
  background: var(--text-dim, #9aa3b2);
}
.fcc-version-dialog__dot.is-active {
  background: var(--accent, #c7d2fe);
  transform: scale(1.3);
}
.fcc-version-dialog__dot:focus-visible {
  outline: 2px solid var(--accent, #c7d2fe);
  outline-offset: 2px;
}

/* Nav buttons group */
.fcc-version-dialog__nav {
  display: flex;
  gap: var(--sp-2, 0.5rem);
}

.fcc-version-dialog__nav-btn {
  padding: 0.5rem 1rem;
  border-radius: var(--radius, 0.35rem);
  border: 2px solid var(--border, #2a2a2a);
  background: transparent;
  color: var(--text-dim, #9aa3b2);
  font: inherit;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-fast, 0.1s), color var(--duration-fast, 0.1s), border-color var(--duration-fast, 0.1s);
}
.fcc-version-dialog__nav-btn:hover {
  color: var(--text, #f5f6f7);
  border-color: var(--text-dim, #9aa3b2);
}
.fcc-version-dialog__nav-btn:focus-visible {
  outline: 2px solid var(--accent, #c7d2fe);
  outline-offset: 2px;
}

/* Primary nav button (Next / Done) */
.fcc-version-dialog__nav-btn--primary {
  background: var(--accent, #c7d2fe);
  border-color: var(--accent, #c7d2fe);
  color: var(--bg, #0c0d0f);
}
.fcc-version-dialog__nav-btn--primary:hover {
  background: var(--accent-2, #e0e7ff);
  border-color: var(--accent-2, #e0e7ff);
  color: var(--bg, #0c0d0f);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .fcc-version-dialog {
    max-width: calc(100vw - 1rem);
  }
  .fcc-version-dialog__slide {
    padding: var(--sp-4, 1rem) var(--sp-4, 1rem) var(--sp-3, 0.75rem);
  }
  .fcc-version-dialog__header,
  .fcc-version-dialog__footer {
    padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem);
  }
  .fcc-version-dialog__nav-btn {
    padding: 0.45rem 0.75rem;
    font-size: var(--text-xs, 0.75rem);
  }
}