/**
 * @file
 * The "Periodic Table of Money" interactive demo.
 */
.wl-edu-ptable {
  margin: 1.5rem 0 2rem;
}
.wl-edu-ptable__controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.wl-edu-ptable__btn {
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: var(--radius-md, 8px);
  background: var(--color-accent-primary, #003bff);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.wl-edu-ptable__btn:hover { background: var(--color-accent-hover, #194eff); }
.wl-edu-ptable__btn:disabled { opacity: 0.5; cursor: default; }
.wl-edu-ptable__btn--ghost {
  background: transparent;
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.15));
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
}
.wl-edu-ptable__btn--ghost:hover { background: rgba(255, 255, 255, 0.06); }
.wl-edu-ptable__count {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-muted, rgba(255, 255, 255, 0.5));
  margin-left: auto;
}

.wl-edu-ptable__step {
  min-height: 3.2rem;
  margin-bottom: 0.9rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-md, 8px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.08));
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
}
.wl-edu-ptable__step strong { color: var(--color-text-primary, #fff); }
.wl-edu-ptable__step.is-verdict {
  background: rgba(245, 197, 24, 0.1);
  border-color: rgba(245, 197, 24, 0.4);
}

/* 18 columns × 9 rows (7 periods + lanthanides + actinides). */
.wl-edu-ptable__grid {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  grid-auto-rows: 1fr;
  gap: 3px;
  /* Keep the cells square-ish and the whole table on one line. */
  aspect-ratio: 18 / 9;
  overflow-x: auto;
}
/* A small gap between the main table and the lanthanide/actinide block. */
.wl-edu-el { min-width: 0; }

.wl-edu-el {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: var(--el-bg, #2a3350);
  color: #fff;
  line-height: 1;
  cursor: default;
  transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
  overflow: hidden;
}
.wl-edu-el__z { font-size: clamp(0.4rem, 0.7vw, 0.6rem); opacity: 0.65; }
.wl-edu-el__sym { font-size: clamp(0.6rem, 1.1vw, 0.95rem); font-weight: 700; }

/* Category colours. */
.wl-edu-el--noble-gas { --el-bg: #3a2d5c; }
.wl-edu-el--alkali { --el-bg: #6d3030; }
.wl-edu-el--alkaline { --el-bg: #6d4a30; }
.wl-edu-el--metalloid { --el-bg: #30596d; }
.wl-edu-el--nonmetal { --el-bg: #2f6d4a; }
.wl-edu-el--halogen { --el-bg: #305a6d; }
.wl-edu-el--transition { --el-bg: #3a4266; }
.wl-edu-el--post-transition { --el-bg: #46506e; }
.wl-edu-el--lanthanide { --el-bg: #5a4a6d; }
.wl-edu-el--actinide { --el-bg: #6d4a5f; }
.wl-edu-el--platinum { --el-bg: #5c6473; }
.wl-edu-el--precious { --el-bg: #b8860b; }

.wl-edu-el.is-out {
  opacity: 0.12;
  transform: scale(0.82);
}
.wl-edu-el.is-winner {
  background: linear-gradient(160deg, #f5c518, #d4a017);
  color: #1a1400;
  box-shadow: 0 0 0 2px rgba(245, 197, 24, 0.8), 0 0 22px rgba(245, 197, 24, 0.55);
  transform: scale(1.06);
  z-index: 2;
}
.wl-edu-el.is-winner .wl-edu-el__z { opacity: 0.75; }

/* Steps legend. */
.wl-edu-ptable__legend {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.wl-edu-ptable__legenditem {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-muted, rgba(255, 255, 255, 0.45));
  border: 1px solid transparent;
}
.wl-edu-ptable__legendn {
  width: 1.15rem; height: 1.15rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.7rem; font-weight: 700;
}
.wl-edu-ptable__legenditem.is-done {
  color: var(--color-text-primary, #fff);
  background: rgba(0, 59, 255, 0.15);
}
.wl-edu-ptable__legenditem.is-done .wl-edu-ptable__legendn { background: var(--color-accent-primary, #003bff); color: #fff; }
.wl-edu-ptable__legenditem.is-current { border-color: var(--color-accent-primary, #003bff); }

@media (max-width: 40rem) {
  .wl-edu-ptable__grid { aspect-ratio: auto; min-width: 34rem; }
  .wl-edu-ptable__count { margin-left: 0; }
}