/* dot-illustrations demo — custom styles
   Tailwind handles layout; this file fills the gaps. */

*, *::before, *::after { box-sizing: border-box; }

/* ── Prevent legacy img rule from overriding card images ─────────────────── */
/* Only illustration img elements inside .dot-illustration get size treatment */
.dot-illustration img { display: block; }

/* ── Hidden clipboard source ────────────────────────────────────────────── */
.codeBlock { display: none !important; }

/* ── Tooltip (legacy compat — kept for copyText/copyCode) ───────────────── */
.tooltiptext { display: none; }

/* ── Floating bar — hidden off-screen, slides in on scroll ─────────────── */
#floating-bar {
  pointer-events: none;
  opacity: 0;
  transform: translateY(-100%);
}
#floating-bar.floating-bar-visible {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              opacity   0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Scrollable navs (no scrollbar) ─────────────────────────────────────── */
#illus-sub-tabs,
#floating-tabs,
#section-switcher {
  overflow-x: auto;
  scrollbar-width: none;
}
#illus-sub-tabs::-webkit-scrollbar,
#floating-tabs::-webkit-scrollbar,
#section-switcher::-webkit-scrollbar { display: none; }

/* ── GitHub user badge ──────────────────────────────────────────────────── */
#gh-user-badge { display: none; }
#gh-user-badge.connected { display: flex; }

/* ── Card grid items — slide-up action bar ──────────────────────────────── */
.copy-container { position: relative; }
.copy-container .action-bar {
  transform: translateY(100%);
  transition: transform 0.15s ease-out;
}
.copy-container:hover .action-bar {
  transform: translateY(0);
}

/* ── Alphabet strip ─────────────────────────────────────────────────────── */
#alphabet-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem;
  row-gap: 0.25rem;
}