/* ==========================================================
   Flashcards styles
   Used by:
   - flashcards.html       (floating widget with a single-card viewer)
   - flashcards_page.html  (full page grid, uses .fc-card)
   ========================================================== */

/* Preflight is off, so set box-sizing ourselves (only inside the widget). */
#fc-root,
#fc-root *,
#fc-root *::before,
#fc-root *::after {
  box-sizing: border-box;
}

#fc-root h3,
#fc-root h4,
#fc-root p {
  margin: 0;
}

/* ---------- Side: right (default) or left ---------- */
#fc-root[data-side="right"] .fc-fab,
#fc-root[data-side="right"] .fc-panel {
  right: 1.25rem;
  left: auto;
}

#fc-root[data-side="left"] .fc-fab,
#fc-root[data-side="left"] .fc-panel {
  left: 1.25rem;
  right: auto;
}

#fc-root[data-side="right"] .fc-panel { transform-origin: bottom right; }
#fc-root[data-side="left"] .fc-panel  { transform-origin: bottom left; }

/* ---------- Panel open / close ---------- */
.fc-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px) scale(0.94);
  transition:
    opacity 0.2s ease,
    transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.15),
    visibility 0s linear 0.32s;
}

.fc-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

/* ---------- Floating button ---------- */
/* A short attention ring, played three times on page load, then it stops. */
.fc-fab {
  position: fixed;
}

.fc-fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.55);
  animation: fc-ring 1.8s ease-out 3;
  pointer-events: none;
}

.fc-fab[aria-expanded="true"]::after {
  animation: none;
}

.fc-fab:hover .fc-bulb {
  animation: fc-wiggle 0.6s ease-in-out;
}

@keyframes fc-ring {
  0%   { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.55); }
  100% { box-shadow: 0 0 0 16px rgba(79, 70, 229, 0); }
}

@keyframes fc-wiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-14deg); }
  75%      { transform: rotate(14deg); }
}

/* ---------- Header icon buttons ---------- */
.fc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.fc-icon-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.fc-icon-btn:active {
  transform: scale(0.92);
}

.fc-icon-btn:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

#fc-refresh.is-spinning svg {
  animation: fc-spin 0.8s linear infinite;
}

@keyframes fc-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================
   SINGLE-CARD VIEWER (inside the widget panel)
   ========================================================== */

.fc-stage {
  position: relative;
  min-height: 15rem;
  overflow: hidden;
  border-radius: 1rem;
}

.fc-single {
  --card-color: #6366f1;
  --card-fg: #111827;
  display: flex;
  flex-direction: column;
  min-height: 15rem;
  max-height: 55vh;
  padding: 1.25rem;
  border-radius: 1rem;
  background: var(--card-color);
  background: linear-gradient(
    135deg,
    var(--card-color) 0%,
    color-mix(in srgb, var(--card-color) 75%, white) 100%
  );
  color: var(--card-fg);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
  animation: fc-slide-next 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.05) both;
}

.fc-single.from-prev  { animation-name: fc-slide-prev; }
.fc-single.from-first { animation-name: fc-pop; }

.fc-single-title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.fc-single-body {
  flex: 1;
  margin-top: 0.75rem !important;
  overflow-y: auto;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.fc-single-foot {
  margin-top: 1rem !important;
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.75;
}

@keyframes fc-slide-next {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fc-slide-prev {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fc-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Previous / next + dots ---------- */
.fc-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.fc-nav[hidden] {
  display: none;
}

.fc-nav-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.fc-nav-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.fc-nav-btn:active {
  transform: scale(0.9);
}

.fc-nav-btn:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

.fc-dots {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.fc-dot {
  width: 0.625rem;
  height: 0.625rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--dot, #6366f1);
  opacity: 0.4;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.fc-dot:hover {
  opacity: 0.75;
}

.fc-dot.is-active {
  opacity: 1;
  transform: scale(1.5);
}

.fc-dot:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 2px;
}

/* ==========================================================
   GRID CARDS (used by flashcards_page.html)
   ========================================================== */

.fc-card {
  --card-color: #6366f1;
  --card-fg: #111827;
  background: var(--card-color);
  background: linear-gradient(
    135deg,
    var(--card-color) 0%,
    color-mix(in srgb, var(--card-color) 78%, white) 100%
  );
  color: var(--card-fg);
  border-radius: 0.875rem;
  padding: 0.875rem 1rem;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
  opacity: 0;
  transform: translateY(14px);
  animation: fc-card-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.fc-card .fc-card-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.fc-card.is-expanded .fc-card-body {
  -webkit-line-clamp: unset;
  overflow: visible;
}

@keyframes fc-card-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Loading skeleton ---------- */
.fc-skeleton {
  height: 5.5rem;
  border-radius: 0.875rem;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: fc-shimmer 1.2s ease-in-out infinite;
}

.fc-skeleton--card {
  height: 15rem;
}

@keyframes fc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Empty / error message ---------- */
.fc-message {
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: #475569;
  animation: fc-card-in 0.3s ease forwards;
  opacity: 0;
}

/* ---------- Scrollbar ---------- */
.fc-scroll,
.fc-single-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.5) transparent;
}

/* ==========================================================
   INLINE GRID ({% flashcards_grid %} on any page)
   Plain CSS, so it does not need Tailwind on that page.
   ========================================================== */

.fc-grid-section {
  margin: 1.5rem 0;
}

.fc-grid-head {
  margin-bottom: 1rem;
}

.fc-grid-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
}

.fc-grid-sub {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: #64748b;
}

.fc-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.fc-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.fc-card-text {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

.fc-grid-empty {
  padding: 1.5rem;
  text-align: center;
  color: #64748b;
  background: #f8fafc;
  border-radius: 0.75rem;
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fc-panel,
  .fc-card,
  .fc-single,
  .fc-message,
  .fc-fab::after,
  .fc-skeleton,
  .fc-dot,
  #fc-refresh.is-spinning svg {
    animation: none !important;
    transition: none !important;
  }

  .fc-card,
  .fc-message {
    opacity: 1;
    transform: none;
  }
}