/* ── Tag Cloud — Rainbow Pill Style ───────────────────────────────────────── */

ul.tag-cloud,
#content ul.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45em 0.55em;
  padding: 0.6em 0;
  margin: 0;
  list-style: none;
  text-align: left;
}

ul.tag-cloud li,
#content ul.tag-cloud li {
  display: flex;
  margin: 0;
  padding: 0;
}

ul.tag-cloud a {
  display: inline-block;
  padding: 0.22em 0.8em;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
  border: 1.5px solid currentColor;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

ul.tag-cloud a:hover {
  color: #fff !important;
  background-color: currentColor;
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  text-decoration: none;
}

/* ── Sizes ─────────────────────────────────────────────────────────────────── */
.level1 a  { font-size: 0.72em; }
.level2 a  { font-size: 0.78em; }
.level3 a  { font-size: 0.84em; }
.level4 a  { font-size: 0.90em; }
.level5 a  { font-size: 0.96em; }
.level6 a  { font-size: 1.02em; }
.level7 a  { font-size: 1.08em; }
.level8 a  { font-size: 1.14em; }
.level9 a  { font-size: 1.20em; }
.level10 a { font-size: 1.28em; font-weight: 600; }

/* ── Rainbow gradient: cool (small) ──> warm (large) ───────────────────────
   violet → blue → cyan → teal → green → lime → amber → orange → red-orange → red
   Each level: text + border = saturated hue, background = very light tint    */

.level1 a  { color: hsl(262,62%,52%); background: hsl(262,62%,96%); border-color: hsl(262,62%,78%); }
.level1 a:hover  { background: hsl(262,62%,52%) !important; border-color: hsl(262,62%,52%); }

.level2 a  { color: hsl(225,68%,52%); background: hsl(225,68%,96%); border-color: hsl(225,68%,78%); }
.level2 a:hover  { background: hsl(225,68%,52%) !important; border-color: hsl(225,68%,52%); }

.level3 a  { color: hsl(195,80%,38%); background: hsl(195,80%,94%); border-color: hsl(195,80%,70%); }
.level3 a:hover  { background: hsl(195,80%,38%) !important; border-color: hsl(195,80%,38%); }

.level4 a  { color: hsl(172,68%,34%); background: hsl(172,68%,93%); border-color: hsl(172,68%,65%); }
.level4 a:hover  { background: hsl(172,68%,34%) !important; border-color: hsl(172,68%,34%); }

.level5 a  { color: hsl(138,60%,34%); background: hsl(138,60%,93%); border-color: hsl(138,60%,65%); }
.level5 a:hover  { background: hsl(138,60%,34%) !important; border-color: hsl(138,60%,34%); }

.level6 a  { color: hsl(82,62%,34%); background: hsl(82,62%,93%); border-color: hsl(82,62%,65%); }
.level6 a:hover  { background: hsl(82,62%,34%) !important; border-color: hsl(82,62%,34%); }

.level7 a  { color: hsl(45,90%,38%); background: hsl(45,90%,94%); border-color: hsl(45,90%,68%); }
.level7 a:hover  { background: hsl(45,90%,38%) !important; border-color: hsl(45,90%,38%); }

.level8 a  { color: hsl(28,88%,46%); background: hsl(28,88%,95%); border-color: hsl(28,88%,72%); }
.level8 a:hover  { background: hsl(28,88%,46%) !important; border-color: hsl(28,88%,46%); }

.level9 a  { color: hsl(12,85%,48%); background: hsl(12,85%,96%); border-color: hsl(12,85%,74%); }
.level9 a:hover  { background: hsl(12,85%,48%) !important; border-color: hsl(12,85%,48%); }

.level10 a { color: hsl(0,82%,46%);  background: hsl(0,82%,96%);  border-color: hsl(0,82%,72%); }
.level10 a:hover { background: hsl(0,82%,46%) !important;  border-color: hsl(0,82%,46%); }