/* Small parts used across screens: chips, coloured icon dots, avatars, dotted bars. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--glass-strong);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.chip.is-active {
  background: var(--pill);
  color: var(--on-pill);
  border-color: transparent;
}

.icon-dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 30% 25%, #9cd2ff, #4f97e6 75%);
  box-shadow: 0 8px 18px rgba(79, 151, 230, 0.3);
}

.icon-dot.tone-1 {
  background: radial-gradient(circle at 30% 25%, #ffc79a, #f27a2a 75%);
  box-shadow: 0 8px 18px rgba(242, 122, 42, 0.3);
}

.icon-dot.tone-2 {
  background: radial-gradient(circle at 30% 25%, #a8ecd9, #33a88a 75%);
  box-shadow: 0 8px 18px rgba(51, 168, 138, 0.3);
}

.icon-dot.tone-3 {
  background: radial-gradient(circle at 30% 25%, #d6cbff, #8572f2 75%);
  box-shadow: 0 8px 18px rgba(133, 114, 242, 0.3);
}

.avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--glass-strong);
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, #ffb46e, #f27a2a);
}

.avatar.tone-1 {
  background: linear-gradient(135deg, #9cd2ff, #4f97e6);
}

.avatar.tone-2 {
  background: linear-gradient(135deg, #a8ecd9, #33a88a);
}

.avatar.tone-3 {
  background: linear-gradient(135deg, #d6cbff, #8572f2);
}

.avatar.tone-4 {
  background: linear-gradient(135deg, #ffb9cf, #e55a8a);
}

.bar {
  height: 6px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 5px);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 3px, transparent 3px 5px);
}

/* Imprint and feedback, one tap away on every main screen */
.legal-foot {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 8px;
  font-size: 13px;
  color: var(--muted);
}

.legal-foot a {
  color: var(--muted);
  text-underline-offset: 3px;
}