/* Level badge and ladder: one colour per level (--level-1 to --level-30), the filled and locked badge, the ladder, the progress bar and the Active chip (logical properties only). */
/* The 30 colours sweep the rainbow at one lightness. Each passes 4.5:1 with the badge ink on its fill and 3:1 against the light and dark page and card colours
   (apps/levels/tests/test_palette.py measures it), so the label stays readable and a locked outline stays visible in both themes. */
:root {
  --level-ink: var(--c-ink);
  --level-1: #de5f5a;
  --level-2: #dc6341;
  --level-3: #d76821;
  --level-4: #cb7100;
  --level-5: #bc7905;
  --level-6: #ae8012;
  --level-7: #a1860e;
  --level-8: #928b0a;
  --level-9: #81900b;
  --level-10: #679506;
  --level-11: #479933;
  --level-12: #089c4e;
  --level-13: #0a9b6c;
  --level-14: #05997f;
  --level-15: #10988d;
  --level-16: #18979a;
  --level-17: #0796a7;
  --level-18: #1094b3;
  --level-19: #0792c4;
  --level-20: #098eda;
  --level-21: #3b89e6;
  --level-22: #5d83ea;
  --level-23: #767de9;
  --level-24: #8c77e5;
  --level-25: #9e72dd;
  --level-26: #ae6cd2;
  --level-27: #bc68c4;
  --level-28: #c863b3;
  --level-29: #d160a1;
  --level-30: #d85e8d;
}

.level-1 {
  --level: var(--level-1);
}

.level-2 {
  --level: var(--level-2);
}

.level-3 {
  --level: var(--level-3);
}

.level-4 {
  --level: var(--level-4);
}

.level-5 {
  --level: var(--level-5);
}

.level-6 {
  --level: var(--level-6);
}

.level-7 {
  --level: var(--level-7);
}

.level-8 {
  --level: var(--level-8);
}

.level-9 {
  --level: var(--level-9);
}

.level-10 {
  --level: var(--level-10);
}

.level-11 {
  --level: var(--level-11);
}

.level-12 {
  --level: var(--level-12);
}

.level-13 {
  --level: var(--level-13);
}

.level-14 {
  --level: var(--level-14);
}

.level-15 {
  --level: var(--level-15);
}

.level-16 {
  --level: var(--level-16);
}

.level-17 {
  --level: var(--level-17);
}

.level-18 {
  --level: var(--level-18);
}

.level-19 {
  --level: var(--level-19);
}

.level-20 {
  --level: var(--level-20);
}

.level-21 {
  --level: var(--level-21);
}

.level-22 {
  --level: var(--level-22);
}

.level-23 {
  --level: var(--level-23);
}

.level-24 {
  --level: var(--level-24);
}

.level-25 {
  --level: var(--level-25);
}

.level-26 {
  --level: var(--level-26);
}

.level-27 {
  --level: var(--level-27);
}

.level-28 {
  --level: var(--level-28);
}

.level-29 {
  --level: var(--level-29);
}

.level-30 {
  --level: var(--level-30);
}

.level-badge {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-1) var(--s-3);
  background: var(--level, var(--border));
  color: var(--level-ink);
  font-weight: 700;
  line-height: 1.3;
  border: 2px solid var(--level, var(--border));
  border-radius: 999px;
}

.level-badge.is-locked {
  background: var(--surface);
  color: var(--text);
}

.level-fruit {
  font-size: 1.25em;
  line-height: 1;
}

.level-lock {
  flex: none;
  inline-size: 1.2em;
  block-size: 1.2em;
  color: var(--level);
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card > .level-badge {
  margin-block: var(--s-2);
}

/* The Active status chip (levels/_active.html) on the card, home and rewards; the tone is the chip part's own custom property. */
.chip-active {
  --tone: var(--c-green);
}

.chip-idle {
  --tone: var(--c-orange);
}